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-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;
}