Comment on page
Upgrade Passage-Elements to 1.11.0
Breaking changes from Passage Elements v1.10.0 to v1.11.0
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. 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 |
| |
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 |
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;
}
Last modified 3mo ago