Upgrade Passage-Elements to 1.11.0

Breaking changes from Passage Elements v1.10.0 to v1.11.0

Passage CSS Variables

As of version 1.11.0, passage-elements introduced new CSS variables to support finer-grained Passage Element customization. The following table shows which CSS variables have changed and what their replacement should be.

Currently Supported CSS Variables

View all CSS variables available in v1.11.0 here.

Deprecated CSS Variables

Some CSS variables in v.1.10.0 have been deprecated and either renamed or replaced with a subset of variables for more specific styling in v1.11.0. Many of the variables in v1.10.0 controlled multiple properties that can now be controlled in a more granular manner.

v1.10.0	v1.11.0
--passage-container-background	--passage-container-background-color
--passage-primary-color	--passage-primary-button-background-color
--passage-onprimary-color	--passage-primary-button-text-color --passage-anchor-text-color
--passage-button-border-radius	--passage-primary-button-border-radius --passage-secondary-button-border-radius
--passage-hover-color	--passage-primary-button-hover-color --passage-secondary-button-background-hover-color --passage-secondary-button-border-hover-color --passage-secondary-button-border-hover-color --passage-anchor-hover-color
--passage-onhover-color	--passage-primary-button-hover-color --passage-secondary-button-background-hover-color
--passage-active-color	--passage-primary-button-background-active-color --passage-secondary-button-background-active-color --passage-anchor-active-color
--passage-onactive-color	--passage-primary-button-text-active-color --passage-secondary-button-text-active-color --passage-secondary-button-text-active-color

New CSS Variables

Several new CSS variables have been introduced to allow for more styling capabilities in v1.11.0.

v1.11.0	What it does
--passage-input-text-color	Styles color of inputted text on text <input> tags. Previously styled using --passage-body-text-color
--passage-input-box-background-color	Styles background color on text <input> tags. Previously styled using --passage-container-background-color
--passage-input-box-border-radius	Styles border radius on <input> tags. Previously styled using --passage-control-border-radius Note: --passage-control-border-radius can still be used to style other inputs such as checkboxes and dropdowns
--passage-control-border-active-color	Styles border color on<input> tags with :active state. Previously styled using --passage-body-text-color

Example Migration

v.1.10.0

passage-auth {
    --passage-primary-color: #000;
    --passage-onprimary-color: #fff;
    --passage-hover-color: #4d4d4d;
    --passage-onhover-color: #fff;
    
    --passage-body-text-color: #000;
}

v.1.11.0

passage-auth {
    --passage-primary-button-background-color: #000;
    --passage-primary-button-text-color: #fff;
    --passage-primary-button-background-hover-color: #4d4d4d;
    --passage-primary-button-text-hover-color: #fff;
    
    --passage-secondary-button-background-color: #fff;
    --passage-secondary-button-text-color: #000;
    --passage-secondary-button-background-hover-color: #d7d7d7;
    --passage-secondary-button-text-hover-color: #4d4d4d;
    
    --passage-body-text-color: #000;
    --passage-anchor-text-color: #d7d7d7;
}