From b393d2d4417cf1021cf1c02f9f2b6e1b002c69b5 Mon Sep 17 00:00:00 2001 From: Jordan Jones Date: Mon, 28 Aug 2023 16:18:02 -0700 Subject: [PATCH] perf(token): update design token names #229 --- docs/index.html | 7 ++- src/style.scss | 152 ++++++++++++++++++++++++------------------------ 2 files changed, 80 insertions(+), 79 deletions(-) diff --git a/docs/index.html b/docs/index.html index f0b6969..d0f0a19 100644 --- a/docs/index.html +++ b/docs/index.html @@ -80,10 +80,11 @@

auro-button: default

+ + - + href="https://cdn.jsdelivr.net/npm/@alaskaairux/webcorestylesheets@latest/dist/bundled/essentials.css" /> diff --git a/src/style.scss b/src/style.scss index a32c7ed..9a11a17 100644 --- a/src/style.scss +++ b/src/style.scss @@ -45,42 +45,42 @@ $auro-rgb-color-base-white-03: rgba(255, 255, 255, .03); // focus-visible mixin @mixin focus-visible { outline: 3px solid transparent; - box-shadow: inset 0 0 0 1px var(--auro-color-border-focus-on-dark), inset 0 0 0 3px var(--auro-color-background-lightest); + box-shadow: inset 0 0 0 1px var(--ds-color-border-focus-on-dark), inset 0 0 0 3px var(--ds-color-background-lightest); // auro-button--secondary &[variant='secondary'], &--secondary { - background-color: var(--auro-color-background-lighter); - box-shadow: inset 0 0 0 3px var(--auro-color-ui-default-on-light); + background-color: var(--ds-color-background-lighter); + box-shadow: inset 0 0 0 3px var(--ds-color-ui-default-on-light); } // auro-button--tertiary &[variant='tertiary'], &--tertiary { - background-color: var(--auro-color-background-lighter); - border-color: var(--auro-color-ui-default-on-light); - box-shadow: inset 0 0 0 3px var(--auro-color-ui-default-on-light); + background-color: var(--ds-color-background-lighter); + border-color: var(--ds-color-ui-default-on-light); + box-shadow: inset 0 0 0 3px var(--ds-color-ui-default-on-light); } // auro-buttonOndark &Ondark { - background-color: var(--auro-color-ui-default-on-dark); - box-shadow: inset 0 0 0 3px var(--auro-color-border-focus-on-dark); + background-color: var(--ds-color-ui-default-on-dark); + box-shadow: inset 0 0 0 3px var(--ds-color-border-focus-on-dark); // auro-buttonOndark--secondary &[variant='secondary'], &--secondary { - background-color: var(--auro-color-base-black-opacity-15); - box-shadow: inset 0 0 0 3px var(--auro-color-ui-active-on-dark); - border: 1px solid var(--auro-color-ui-active-on-dark); + background-color: var(--ds-color-base-black-opacity-15); + box-shadow: inset 0 0 0 3px var(--ds-color-ui-active-on-dark); + border: 1px solid var(--ds-color-ui-active-on-dark); } // auro-buttonOndark--tertiary &[variant='tertiary'], &--tertiary { - background-color: var(--auro-color-base-black-opacity-15); - border-color: var(--auro-color-ui-active-on-dark); - box-shadow: inset 0 0 0 3px var(--auro-color-ui-active-on-dark); + background-color: var(--ds-color-base-black-opacity-15); + border-color: var(--ds-color-ui-active-on-dark); + box-shadow: inset 0 0 0 3px var(--ds-color-ui-active-on-dark); } } } @@ -114,29 +114,29 @@ slot { position: relative; - padding: 0 var(--auro-size-lg); + padding: 0 var(--ds-size-lg); - color: var(--auro-color-text-primary-on-dark); + color: var(--ds-color-text-primary-on-dark); cursor: pointer; - background-color: var(--auro-color-ui-default-on-light); - border: 1px solid var(--auro-color-ui-default-on-light); - border-radius: var(--auro-border-radius); - font-family: var(--auro-font-family-default); - font-size: var(--auro-text-body-size-default); - font-weight: var(--auro-text-body-default-weight); + background-color: var(--ds-color-ui-default-on-light); + border: 1px solid var(--ds-color-ui-default-on-light); + border-radius: var(--ds-border-radius); + font-family: var(--ds-font-family-default); + font-size: var(--ds-text-body-size-default); + font-weight: var(--ds-text-body-default-weight); overflow: hidden; text-overflow: ellipsis; user-select: none; white-space: nowrap; - min-height: var(--auro-size-xxl); - max-height: var(--auro-size-xxl); + min-height: var(--ds-size-xxl); + max-height: var(--ds-size-xxl); display: inline-flex; flex-direction: row; align-items: center; justify-content: center; - gap: var(--auro-size-xxs); + gap: var(--ds-size-xxs); // removes margins around button in Safari margin: 0; @@ -150,15 +150,15 @@ slot { @media (hover: hover) { &:active, &:hover { - background-color: var(--auro-color-ui-hover-on-light); - border: 1px solid var(--auro-color-ui-hover-on-light); + background-color: var(--ds-color-ui-hover-on-light); + border: 1px solid var(--ds-color-ui-hover-on-light); } } // handle active state &:active { - background-color: var(--auro-color-ui-active-on-light); - border: 1px solid var(--auro-color-ui-active-on-light); + background-color: var(--ds-color-ui-active-on-light); + border: 1px solid var(--ds-color-ui-active-on-light); transform: scale(0.95); } @@ -170,12 +170,12 @@ slot { } auro-loader { - color: var(--auro-color-background-darkest); + color: var(--ds-color-background-darkest); } &.auro-buttonOndark { auro-loader { - color: var(--auro-color-text-primary-on-dark); + color: var(--ds-color-text-primary-on-dark); } } } @@ -203,21 +203,21 @@ slot { // auro-button--secondary &[variant='secondary'], &--secondary { - background-color: var(--auro-color-background-lightest); - border: 1px solid var(--auro-color-ui-default-on-light); - color: var(--auro-color-text-link-on-light); + background-color: var(--ds-color-background-lightest); + border: 1px solid var(--ds-color-ui-default-on-light); + color: var(--ds-color-text-link-on-light); @media (hover: hover) { &:active, &:hover { - background-color: var(--auro-color-ui-bkg-hover-on-light); - border: 1px solid var(--auro-color-ui-default-on-light); + background-color: var(--ds-color-ui-bkg-hover-on-light); + border: 1px solid var(--ds-color-ui-default-on-light); } } &:active { - background-color: var(--auro-color-ui-bkg-hover-on-light); - border: 1px solid var(--auro-color-ui-default-on-light); + background-color: var(--ds-color-ui-bkg-hover-on-light); + border: 1px solid var(--ds-color-ui-default-on-light); } &:disabled { @@ -243,18 +243,18 @@ slot { &--tertiary { background-color: $auro-rgb-color-base-black-03; border-color: transparent; - color: var(--auro-color-text-link-on-light); + color: var(--ds-color-text-link-on-light); @media (hover: hover) { &:active, &:hover { - background-color: var(--auro-color-ui-bkg-hover-on-light); + background-color: var(--ds-color-ui-bkg-hover-on-light); border-color: transparent; } } &:active { - background-color: var(--auro-color-ui-bkg-hover-on-light); + background-color: var(--ds-color-ui-bkg-hover-on-light); border-color: transparent; } @@ -276,22 +276,22 @@ slot { } &Ondark { - background-color: var(--auro-color-ui-default-on-dark); - border: 1px solid var(--auro-color-ui-default-on-dark); - color: var(--auro-color-text-primary-on-light); + background-color: var(--ds-color-ui-default-on-dark); + border: 1px solid var(--ds-color-ui-default-on-dark); + color: var(--ds-color-text-primary-on-light); // auro-buttonOndark hover @media (hover: hover) { &:active, &:hover { - background-color: var(--auro-color-ui-hover-on-dark); - border: 1px solid var(--auro-color-ui-hover-on-dark); + background-color: var(--ds-color-ui-hover-on-dark); + border: 1px solid var(--ds-color-ui-hover-on-dark); } } &:active { - background-color: var(--auro-color-ui-active-on-dark); - border: 1px solid var(--auro-color-ui-active-on-dark); + background-color: var(--ds-color-ui-active-on-dark); + border: 1px solid var(--ds-color-ui-active-on-dark); } &:disabled { @@ -314,27 +314,27 @@ slot { // auro-buttonOndark--secondary &[variant='secondary'], &--secondary { - background-color: var(--auro-color-background-darker); - border: 1px solid var(--auro-color-ui-default-on-dark); - color: var(--auro-color-ui-default-on-dark); + background-color: var(--ds-color-background-darker); + border: 1px solid var(--ds-color-ui-default-on-dark); + color: var(--ds-color-ui-default-on-dark); @media (hover: hover) { &:active, &:hover { - background-color: var(--auro-color-background-darkest); + background-color: var(--ds-color-background-darkest); } } &:active { - background-color: var(--auro-color-base-black-opacity-15); - border: 1px solid var(--auro-color-ui-hover-on-dark); + background-color: var(--ds-color-base-black-opacity-15); + border: 1px solid var(--ds-color-ui-hover-on-dark); } &:disabled { @media (hover: hover) { &:hover { - background-color: var(--auro-color-background-darker); - border: 1px solid var(--auro-color-ui-default-on-dark); + background-color: var(--ds-color-background-darker); + border: 1px solid var(--ds-color-ui-default-on-dark); } } } @@ -344,13 +344,13 @@ slot { transform: unset; color: rgba($auro-color-ui-default-on-dark, $disabledOPacity); - background-color: var(--auro-color-background-darker); + background-color: var(--ds-color-background-darker); border: 1px solid rgba($auro-color-ui-default-on-dark, $disabledOPacity); @media (hover: hover) { &:hover { color: rgba($auro-color-ui-default-on-dark, $disabledOPacity); - background-color: var(--auro-color-background-darker); + background-color: var(--ds-color-background-darker); border: 1px solid rgba($auro-color-ui-default-on-dark, $disabledOPacity); } } @@ -362,19 +362,19 @@ slot { &--tertiary { background-color: $auro-rgb-color-base-white-03; border: 1px solid transparent; - color: var(--auro-color-ui-default-on-dark); + color: var(--ds-color-ui-default-on-dark); @media (hover: hover) { &:active, &:hover { - background-color: var(--auro-color-base-black-opacity-15); + background-color: var(--ds-color-base-black-opacity-15); border: 1px solid transparent; box-shadow: none; } } &:active { - background-color: var(--auro-color-base-black-opacity-15); + background-color: var(--ds-color-base-black-opacity-15); border: 1px solid transparent; box-shadow: none; } @@ -399,8 +399,8 @@ slot { // auro-button--slim &--slim { - padding: var(--auro-size-xs) var(--auro-size-md); - font-size: var(--auro-text-body-size-sm); + padding: var(--ds-size-xs) var(--ds-size-md); + font-size: var(--ds-text-body-size-sm); min-width: unset; min-height: 2.25rem; max-height: 2.25rem; @@ -408,12 +408,12 @@ slot { &--iconOnly { ::slotted(auro-icon) { - width: var(--auro-size-300); - height: var(--auro-size-300); + width: var(--ds-size-300); + height: var(--ds-size-300); } - padding-left: calc(var(--auro-size-100) - var(--auro-size-25)); - padding-right: calc(var(--auro-size-100) - var(--auro-size-25)); + padding-left: calc(var(--ds-size-100) - var(--ds-size-25)); + padding-right: calc(var(--ds-size-100) - var(--ds-size-25)); border-radius: 100px; min-width: unset; @@ -421,27 +421,27 @@ slot { &--iconOnlySlim { ::slotted(auro-icon) { - width: calc(var(--auro-size-300) - var(--auro-size-50)); - height: calc(var(--auro-size-300) - var(--auro-size-50)); + width: calc(var(--ds-size-300) - var(--ds-size-50)); + height: calc(var(--ds-size-300) - var(--ds-size-50)); } - padding-left: var(--auro-size-50); - padding-right: var(--auro-size-50); + padding-left: var(--ds-size-50); + padding-right: var(--ds-size-50); } // auro-button--rounded &--rounded { border-radius: 100px; - box-shadow: var(--auro-elevation-300); + box-shadow: var(--ds-elevation-300); - height: var(--auro-size-500); + height: var(--ds-size-500); min-width: unset; transition: all 300ms ease-out; ::slotted(auro-icon) { - width: var(--auro-size-300); - height: var(--auro-size-300); + width: var(--ds-size-300); + height: var(--ds-size-300); } } } @@ -467,7 +467,7 @@ slot { min-width: unset; padding: unset; - width: var(--auro-size-600); + width: var(--ds-size-600); } }