auro-button: tier 2 & 3 tokens needed

[braven112]

Is your feature request related to a problem? Please describe.

This lists all of the tokens that need to be updated. There will likely need to be some new ones created in addition to this list. Please see this issue for some of the new tokens that need to be created for gradient support

The following lines need to be updated to support theming

auro-button/src/style.scss

Line 40 in 4b18af8

$auro-rgb-color-base-black-03: rgba(0, 0, 0, .03);

auro-button/src/style.scss

Line 41 in 4b18af8

$auro-rgb-color-base-white-03: rgba(255, 255, 255, .03);

https://github.com/AlaskaAirlines/auro-button/blob/4b18af8d691f7100c73b2565bc6e22adfa092067/src/style.scss#L66C4-L66C19

Needs to use a tier 2 semantic token to be used across repos or a tier 3 component level token

auro-button/src/style.scss

Line 85 in 4b18af8

min-height: var(--ds-size-600, $ds-size-600);

auro-button/src/style.scss

Line 86 in 4b18af8

max-height: var(--ds-size-600, $ds-size-600);

auro-button/src/style.scss

Line 92 in 4b18af8

gap: var(--ds-size-100, $ds-size-100);

auro-button/src/style.scss

Line 317 in 4b18af8

border: 1px solid transparent;

auro-button/src/style.scss

Line 377 in 4b18af8

width: calc(var(--ds-size-300, $ds-size-300) - var(--ds-size-50, $ds-size-50));

auro-button/src/style.scss

Line 378 in 4b18af8

height: calc(var(--ds-size-300, $ds-size-300) - var(--ds-size-50, $ds-size-50));

auro-button/src/style.scss

Line 381 in 4b18af8

padding-left: var(--ds-size-50, $ds-size-50);

auro-button/src/style.scss

Line 382 in 4b18af8

padding-right: var(--ds-size-50, $ds-size-50);

auro-button/src/style.scss

Line 388 in 4b18af8

box-shadow: var(--ds-elevation-300, $ds-elevation-300);

auro-button/src/style.scss

Line 390 in 4b18af8

height: var(--ds-size-500, $ds-size-500);

auro-button/src/style.scss

Line 396 in 4b18af8

width: var(--ds-size-300, $ds-size-300);

auro-button/src/style.scss

Line 397 in 4b18af8

height: var(--ds-size-300, $ds-size-300);

auro-button/src/style.scss

Line 423 in 4b18af8

width: var(--ds-size-600, $ds-size-600);

Should be converted from SASS to a tier 2 token

auro-button/src/style.scss

Line 145 in 4b18af8

background-color: rgba($ds-color-ui-default-default, $disabledOPacity);

auro-button/src/style.scss

Line 146 in 4b18af8

border: 1px solid rgba($ds-color-ui-default-default, 0);

auro-button/src/style.scss

Line 180 in 4b18af8

color: rgba($ds-color-text-link-default, $disabledOPacity);

auro-button/src/style.scss

Line 181 in 4b18af8

background-color: rgba($ds-color-background-lightest, $disabledOPacity);

auro-button/src/style.scss

Line 182 in 4b18af8

border: 1px solid rgba($ds-color-ui-default-default, $disabledOPacity);

auro-button/src/style.scss

Line 186 in 4b18af8

color: rgba($ds-color-text-link-default, $disabledOPacity);

auro-button/src/style.scss

Line 187 in 4b18af8

background-color: rgba($ds-color-background-lightest, $disabledOPacity);

auro-button/src/style.scss

Line 188 in 4b18af8

border: 1px solid rgba($ds-color-ui-default-default, $disabledOPacity);

auro-button/src/style.scss

Line 197 in 4b18af8

background-color: $auro-rgb-color-base-black-03;

auro-button/src/style.scss

Line 218 in 4b18af8

color: rgba($ds-color-text-link-default, $disabledOPacity);

auro-button/src/style.scss

Line 219 in 4b18af8

background-color: $auro-rgb-color-base-black-03;

auro-button/src/style.scss

Line 254 in 4b18af8

color: rgba($ds-color-text-primary-default, $disabledOPacity);

auro-button/src/style.scss

Line 255 in 4b18af8

background-color: rgba($ds-color-ui-default-inverse, $disabledOPacity);

auro-button/src/style.scss

Line 256 in 4b18af8

border: 1px solid rgba($ds-color-ui-default-inverse, $disabledOPacity);

auro-button/src/style.scss

Line 260 in 4b18af8

color: rgba($ds-color-text-primary-default, $disabledOPacity);

auro-button/src/style.scss

Line 261 in 4b18af8

background-color: rgba($ds-color-ui-default-inverse, $disabledOPacity);

auro-button/src/style.scss

Line 262 in 4b18af8

border: 1px solid rgba($ds-color-ui-default-inverse, $disabledOPacity);

auro-button/src/style.scss

Line 299 in 4b18af8

color: rgba($ds-color-ui-default-inverse, $disabledOPacity);

auro-button/src/style.scss

Line 301 in 4b18af8

border: 1px solid rgba($ds-color-ui-default-inverse, $disabledOPacity);

auro-button/src/style.scss

Line 305 in 4b18af8

color: rgba($ds-color-ui-default-inverse, $disabledOPacity);

auro-button/src/style.scss

Line 307 in 4b18af8

border: 1px solid rgba($ds-color-ui-default-inverse, $disabledOPacity);

auro-button/src/style.scss

Line 316 in 4b18af8

background-color: $auro-rgb-color-base-white-03;

auro-button/src/style.scss

Line 338 in 4b18af8

background-color: $auro-rgb-color-base-white-03;

auro-button/src/style.scss

Line 340 in 4b18af8

color: rgba($ds-color-ui-default-inverse, $disabledOPacity);

auro-button/src/style.scss

Line 344 in 4b18af8

background-color: $auro-rgb-color-base-white-03;

auro-button/src/style.scss

Line 345 in 4b18af8

color: rgba($ds-color-ui-default-inverse, $disabledOPacity);

auro-button/src/style.scss

Line 106 in 4b18af8

background-image: linear-gradient(var(--ds-color-ui-hover-default, $ds-color-ui-hover-default), var(--ds-color-ui-hover-default, $ds-color-ui-hover-default));

auro-button/src/style.scss

Line 107 in 4b18af8

border: 1px solid var(--ds-color-ui-hover-default, $ds-color-ui-hover-default);

Should use a new tier 2 token. Currently the token describes the value since it references "Darkest" or "Lightest"

auro-button/src/style.scss

Line 126 in 4b18af8

color: var(--ds-color-background-darkest, $ds-color-background-darkest, $ds-color-background-darkest);

auro-button/src/style.scss

Line 159 in 4b18af8

background-color: var(--ds-color-background-lightest, $ds-color-background-lightest);

auro-button/src/style.scss

Line 270 in 4b18af8

background-color: var(--ds-color-background-darker, $ds-color-background-darker);

auro-button/src/style.scss

Line 289 in 4b18af8

background-color: var(--ds-color-background-darker, $ds-color-background-darker);

auro-button/src/style.scss

Line 300 in 4b18af8

background-color: var(--ds-color-background-darker, $ds-color-background-darker);

auro-button/src/style.scss

Line 306 in 4b18af8

background-color: var(--ds-color-background-darker, $ds-color-background-darker);

Missing background-image property to support gradients:

auro-button/src/style.scss

Line 144 in 4b18af8

auro-button/src/style.scss

Line 158 in 4b18af8

&--secondary {

auro-button/src/style.scss

Line 209 in 4b18af8

&:active {

auro-button/src/style.scss

Line 232 in 4b18af8

background-color: var(--ds-color-ui-default-inverse, $ds-color-ui-default-inverse);

auro-button/src/style.scss

Line 270 in 4b18af8

background-color: var(--ds-color-background-darker, $ds-color-background-darker);

auro-button/src/style.scss

Line 281 in 4b18af8

&:active {

auro-button/src/style.scss

Line 288 in 4b18af8

&:hover {

Describe the solution you'd like

No response

Describe alternatives you've considered

No response

Additional context

No response

Exit criteria

• All SASS references have been updated to CSS variables
• There are no longer tier 1 tokens referenced in this repo.
• All lines listed have been addressed.
• All button state have tokens. (visited, hover, focus, focus-visible, active, etc.)
• background-gradients #242 is complete
• Update disabled state color rules to make them themable #237 is complete