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.0 | v1.11.0 |
---|---|
--passage-container-background | --passage-container-background-color |
--passage-primary-color | --passage-primary-button-background-color |
--passage-onprimary-color |
|
--passage-button-border-radius |
|
--passage-hover-color |
|
--passage-onhover-color |
|
--passage-active-color |
|
--passage-onactive-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 |
--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;
}