Skip to content

Commit

Permalink
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 c15c5d9
Show file tree
Hide file tree
Showing 4 changed files with 725 additions and 44 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
87 changes: 44 additions & 43 deletions src/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@
no-duplicate-selectors */

// Import Auro Sass variables
@import "./../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables";
// @import "./../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables";
@import "./../themeDemo/SCSSVariables.scss";

// general WCSS imports
@import "./../node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
Expand Down Expand Up @@ -51,15 +52,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 +119,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 +151,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 +190,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($ds-color-ui-default-default, $disabledOPacity);
border: 1px solid rgba($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($ds-color-ui-default-default, $disabledOPacity);
border: 1px solid rgba($ds-color-ui-default-default, 0);
}
}
}
Expand All @@ -204,35 +205,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($ds-color-text-link-default, $disabledOPacity);
background-color: rgba($ds-color-background-lightest, $disabledOPacity);
border: 1px solid rgba($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($ds-color-text-link-default, $disabledOPacity);
background-color: rgba($ds-color-background-lightest, $disabledOPacity);
border: 1px solid rgba($ds-color-ui-default-default, $disabledOPacity);
}
}
}
Expand All @@ -243,26 +244,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($ds-color-text-link-default, $disabledOPacity);
background-color: $auro-rgb-color-base-black-03;
border: 1px solid transparent;

Expand All @@ -278,7 +279,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 +299,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($ds-color-text-primary-default, $disabledOPacity);
background-color: rgba($ds-color-ui-default-on-dark, $disabledOPacity);
border: 1px solid rgba($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($ds-color-text-primary-default, $disabledOPacity);
background-color: rgba($ds-color-ui-default-on-dark, $disabledOPacity);
border: 1px solid rgba($ds-color-ui-default-on-dark, $disabledOPacity);
}
}
}
Expand Down Expand Up @@ -343,15 +344,15 @@ slot {
cursor: not-allowed;
transform: unset;

color: rgba($auro-color-ui-default-on-dark, $disabledOPacity);
color: rgba($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($ds-color-ui-default-on-dark, $disabledOPacity);

@media (hover: hover) {
&:hover {
color: rgba($auro-color-ui-default-on-dark, $disabledOPacity);
color: rgba($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($ds-color-ui-default-on-dark, $disabledOPacity);
}
}
}
Expand Down Expand Up @@ -384,12 +385,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($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($ds-color-ui-default-on-dark, $disabledOPacity);
border: transparent;
}
}
Expand Down
Loading

0 comments on commit c15c5d9

Please sign in to comment.