Skip to content

Commit

Permalink
perf(demo): update token names for demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@jordanjones243
jordanjones243 committed Sep 5, 2023
1 parent 1ad98bc commit d6397f1
Show file tree
Hide file tree
Showing 3 changed files with 383 additions and 43 deletions.
2 changes: 1 addition & 1 deletion demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
type="text/css"
href="https://cdn.jsdelivr.net/npm/prismjs@latest/themes/prism.css"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
<link rel="stylesheet" href="./../themeDemo/CSSCustomProperties.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@alaskaairux/webcorestylesheets@latest/dist/demoWrapper.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@alaskaairux/webcorestylesheets@latest/dist/elementDemoStyles.css" />
</head>
Expand Down
84 changes: 42 additions & 42 deletions src/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,15 @@ $auro-rgb-color-base-white-03: rgba(255, 255, 255, .03);
&[variant='secondary'],
&--secondary {
background-color: var(--ds-color-background-lighter);
box-shadow: inset 0 0 0 3px var(--ds-color-ui-default-on-light);
box-shadow: inset 0 0 0 3px var(--ds-color-ui-default-default);
}

// auro-button--tertiary
&[variant='tertiary'],
&--tertiary {
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);
border-color: var(--ds-color-ui-default-default);
box-shadow: inset 0 0 0 3px var(--ds-color-ui-default-default);
}

// auro-buttonOndark
Expand Down Expand Up @@ -118,8 +118,8 @@ slot {

color: var(--ds-color-text-primary-on-dark);
cursor: pointer;
background-color: var(--ds-color-ui-default-on-light);
border: 1px solid var(--ds-color-ui-default-on-light);
background-color: var(--ds-color-ui-default-default);
border: 1px solid var(--ds-color-ui-default-default);
border-radius: var(--ds-border-radius);
font-family: var(--ds-font-family-default);
font-size: var(--ds-text-body-size-default);
Expand Down Expand Up @@ -150,15 +150,15 @@ slot {
@media (hover: hover) {
&:active,
&:hover {
background-color: var(--ds-color-ui-hover-on-light);
border: 1px solid var(--ds-color-ui-hover-on-light);
background-color: var(--ds-color-ui-hover-default);
border: 1px solid var(--ds-color-ui-hover-default);
}
}

// handle active state
&:active {
background-color: var(--ds-color-ui-active-on-light);
border: 1px solid var(--ds-color-ui-active-on-light);
background-color: var(--ds-color-ui-active-default);
border: 1px solid var(--ds-color-ui-active-default);
transform: scale(0.95);
}

Expand Down Expand Up @@ -189,13 +189,13 @@ slot {
cursor: not-allowed;
transform: unset;

background-color: rgba($auro-color-ui-default-on-light, $disabledOPacity);
border: 1px solid rgba($auro-color-ui-default-on-light, 0);
background-color: rgba(var(--ds-color-ui-default-default), $disabledOPacity);
border: 1px solid rgba(var(--ds-color-ui-default-default), 0);

@media (hover: hover) {
&:hover {
background-color: rgba($auro-color-ui-default-on-light, $disabledOPacity);
border: 1px solid rgba($auro-color-ui-default-on-light, 0);
background-color: rgba(var(--ds-color-ui-default-default), $disabledOPacity);
border: 1px solid rgba(var(--ds-color-ui-default-default), 0);
}
}
}
Expand All @@ -204,35 +204,35 @@ slot {
&[variant='secondary'],
&--secondary {
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);
border: 1px solid var(--ds-color-ui-default-default);
color: var(--ds-color-text-link-default);

@media (hover: hover) {
&:active,
&:hover {
background-color: var(--ds-color-ui-bkg-hover-on-light);
border: 1px solid var(--ds-color-ui-default-on-light);
background-color: var(--ds-color-ui-bkg-hover-default);
border: 1px solid var(--ds-color-ui-default-default);
}
}

&:active {
background-color: var(--ds-color-ui-bkg-hover-on-light);
border: 1px solid var(--ds-color-ui-default-on-light);
background-color: var(--ds-color-ui-bkg-hover-default);
border: 1px solid var(--ds-color-ui-default-default);
}

&:disabled {
cursor: not-allowed;
transform: unset;

color: rgba($auro-color-text-link-on-light, $disabledOPacity);
background-color: rgba($auro-color-background-lightest, $disabledOPacity);
border: 1px solid rgba($auro-color-ui-default-on-light, $disabledOPacity);
color: rgba(var(--ds-color-text-link-default), $disabledOPacity);
background-color: rgba(var(--ds-color-background-lightest), $disabledOPacity);
border: 1px solid rgba(var(--ds-color-ui-default-default), $disabledOPacity);

@media (hover: hover) {
&:hover {
color: rgba($auro-color-text-link-on-light, $disabledOPacity);
background-color: rgba($auro-color-background-lightest, $disabledOPacity);
border: 1px solid rgba($auro-color-ui-default-on-light, $disabledOPacity);
color: rgba(var(--ds-color-text-link-default), $disabledOPacity);
background-color: rgba(var(--ds-color-background-lightest), $disabledOPacity);
border: 1px solid rgba(var(--ds-color-ui-default-default), $disabledOPacity);
}
}
}
Expand All @@ -243,26 +243,26 @@ slot {
&--tertiary {
background-color: $auro-rgb-color-base-black-03;
border-color: transparent;
color: var(--ds-color-text-link-on-light);
color: var(--ds-color-text-link-default);

@media (hover: hover) {
&:active,
&:hover {
background-color: var(--ds-color-ui-bkg-hover-on-light);
background-color: var(--ds-color-ui-bkg-hover-default);
border-color: transparent;
}
}

&:active {
background-color: var(--ds-color-ui-bkg-hover-on-light);
background-color: var(--ds-color-ui-bkg-hover-default);
border-color: transparent;
}

&:disabled {
cursor: not-allowed;
transform: unset;

color: rgba($auro-color-text-link-on-light, $disabledOPacity);
color: rgba(var(--ds-color-text-link-default), $disabledOPacity);
background-color: $auro-rgb-color-base-black-03;
border: 1px solid transparent;

Expand All @@ -278,7 +278,7 @@ slot {
&Ondark {
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);
color: var(--ds-color-text-primary-default);

// auro-buttonOndark hover
@media (hover: hover) {
Expand All @@ -298,15 +298,15 @@ slot {
cursor: not-allowed;
transform: unset;

color: rgba($auro-color-text-primary-on-light, $disabledOPacity);
background-color: rgba($auro-color-ui-default-on-dark, $disabledOPacity);
border: 1px solid rgba($auro-color-ui-default-on-dark, $disabledOPacity);
color: rgba(var(--ds-color-text-primary-default), $disabledOPacity);
background-color: rgba(var(--ds-color-ui-default-on-dark), $disabledOPacity);
border: 1px solid rgba(var(--ds-color-ui-default-on-dark), $disabledOPacity);

@media (hover: hover) {
&:hover {
color: rgba($auro-color-text-primary-on-light, $disabledOPacity);
background-color: rgba($auro-color-ui-default-on-dark, $disabledOPacity);
border: 1px solid rgba($auro-color-ui-default-on-dark, $disabledOPacity);
color: rgba(var(--ds-color-text-primary-default), $disabledOPacity);
background-color: rgba(var(--ds-color-ui-default-on-dark), $disabledOPacity);
border: 1px solid rgba(var(--ds-color-ui-default-on-dark), $disabledOPacity);
}
}
}
Expand Down Expand Up @@ -343,15 +343,15 @@ slot {
cursor: not-allowed;
transform: unset;

color: rgba($auro-color-ui-default-on-dark, $disabledOPacity);
color: rgba(var(--ds-color-ui-default-on-dark), $disabledOPacity);
background-color: var(--ds-color-background-darker);
border: 1px solid rgba($auro-color-ui-default-on-dark, $disabledOPacity);
border: 1px solid rgba(var(--ds-color-ui-default-on-dark), $disabledOPacity);

@media (hover: hover) {
&:hover {
color: rgba($auro-color-ui-default-on-dark, $disabledOPacity);
color: rgba(var(--ds-color-ui-default-on-dark), $disabledOPacity);
background-color: var(--ds-color-background-darker);
border: 1px solid rgba($auro-color-ui-default-on-dark, $disabledOPacity);
border: 1px solid rgba(var(--ds-color-ui-default-on-dark), $disabledOPacity);
}
}
}
Expand Down Expand Up @@ -384,12 +384,12 @@ slot {
transform: unset;
background-color: $auro-rgb-color-base-white-03;
border: transparent;
color: rgba($auro-color-ui-default-on-dark, $disabledOPacity);
color: rgba(var(--ds-color-ui-default-on-dark), $disabledOPacity);

@media (hover: hover) {
&:hover {
background-color: $auro-rgb-color-base-white-03;
color: rgba($auro-color-ui-default-on-dark, $disabledOPacity);
color: rgba(var(--ds-color-ui-default-on-dark), $disabledOPacity);
border: transparent;
}
}
Expand Down
Loading

0 comments on commit d6397f1

Please sign in to comment.