Upgrade Passage-Elements to v1.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`

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.0v1.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.0What it does
--passage-input-text-colorStyles color of inputted text on text <input> tags. Previously styled using --passage-body-text-color
--passage-input-box-background-colorStyles 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-colorStyles 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;
}