Skip to content

Commit

Permalink
perf(token): update token per new theming #183
Browse files Browse the repository at this point in the history 
Changes to be committed:
	modified:   demo/index.html
	modified:   package-lock.json
	modified:   package.json
	modified:   src/style.scss
  • Loading branch information
@fajar-apri-alaska
fajar-apri-alaska committed Oct 6, 2023
1 parent 8aad9ab commit a69c6ae
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 116 deletions.
1 change: 1 addition & 0 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
</head>
Expand Down
87 changes: 20 additions & 67 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,9 @@
"devDependencies": {
"@alaskaairux/design-tokens": "^3.15.5",
"@alaskaairux/icons": "^4.28.0",
"@aurodesignsystem/design-tokens": "^4.1.1",
"@aurodesignsystem/eslint-config": "^1.3.0",
"@aurodesignsystem/webcorestylesheets": "^4.8.0",
"@aurodesignsystem/webcorestylesheets": "^5.0.2",
"@commitlint/cli": "^17.7.1",
"@commitlint/config-conventional": "^17.7.0",
"@open-wc/testing": "^3.2.0",
Expand Down
97 changes: 49 additions & 48 deletions src/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,15 @@
// ---------------------------------------------------------------------

// general WCSS imports
@import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/anchor-roleButton';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/core';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/animation';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/utilityMixins/anchor-roleButton';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/core';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/animation';

// Import Auro Sass variables
// Dependency required to process variables from Icons
@import './../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables';
// @import './../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables';
@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';

// layout styles - define any layout specifications for UI that is contained WITHIN the component
// never define layout that would cause effect on element outside the scope of this component
Expand Down Expand Up @@ -45,7 +46,7 @@
.hyperlink {
@include auro_transition(all, .15s, ease);

color: var(--auro-color-ui-default-default);
color: var(--ds-color-ui-default-default);
text-decoration: underline;

// applying a focus UI when using .focus()
Expand All @@ -54,23 +55,23 @@
}

&:visited {
color: var(--auro-color-ui-default-default);
color: var(--ds-color-ui-default-default);
}

&:focus-visible {
background-color: var(--auro-color-ui-default-default);
color: var(--auro-color-text-primary-inverse);
outline: var(--auro-color-ui-default-default) solid var(--auro-size-50);
background-color: var(--ds-color-ui-default-default);
color: var(--ds-color-text-primary-inverse);
outline: var(--ds-color-ui-default-default) solid var(--ds-size-50);
outline-offset: unset;

&:hover {
color: var(--auro-color-text-primary-inverse);
color: var(--ds-color-text-primary-inverse);
}
}

@media (hover: hover) {
&:hover {
color: var(--auro-color-ui-hover-default);
color: var(--ds-color-ui-hover-default);
text-decoration: none;
}

Expand All @@ -82,7 +83,7 @@

&--ondark {
&:hover {
color: var(--auro-hyperlink-ondark-hover-color);
color: var(--ds-color-ui-hover-inverse);
}
}
}
Expand All @@ -99,16 +100,16 @@
&--cta {
@include auro_anchorButton(css, component, block);

border: 1px solid var(--auro-color-ui-default-default);
border-radius: var(--auro-border-radius);
background-color: var(--auro-color-ui-default-default);
color: var(--auro-color-text-primary-inverse);
font-family: var(--auro-font-family-default);
font-size: var(--auro-text-body-size-default);
font-weight: var(--auro-text-body-default-weight);
border: 1px solid var(--ds-color-ui-default-default);
border-radius: var(--ds-border-radius);
background-color: var(--ds-color-ui-default-default);
color: var(--ds-color-text-primary-inverse);
font-family: var(--ds-font-family-default);
font-size: var(--ds-text-body-size-default);
font-weight: var(--ds-text-body-default-weight);

// override from common button height
line-height: calc((var(--auro-size-800)) + ((var(--auro-size-100)) - (var(--auro-size-25))));
line-height: calc((var(--ds-size-800)) + ((var(--ds-size-100)) - (var(--ds-size-25))));
text-align: center;

&:active {
Expand All @@ -118,82 +119,82 @@
// update to media query when ods-hyperlink support is removed
:host(:not(.is-touching)) & {
&:hover {
border: 1px solid var(--auro-color-ui-hover-default);
background-color: var(--auro-color-ui-hover-default);
color: var(--auro-color-text-primary-inverse);
border: 1px solid var(--ds-color-ui-hover-default);
background-color: var(--ds-color-ui-hover-default);
color: var(--ds-color-text-primary-inverse);
text-decoration: none;
}
}

&:visited {
color: var(--auro-color-text-primary-inverse);
color: var(--ds-color-text-primary-inverse);
}

@include auro_breakpoint--sm {
display: inline-block;
min-width: calc((var(--auro-size-800)) * 3);
min-width: calc((var(--ds-size-800)) * 3);
}

&.hyperlink--secondary {
border: 1px solid var(--auro-color-ui-default-default);
background-color: var(--auro-color-background-lightest);
color: var(--auro-color-text-link-default);
border: 1px solid var(--ds-color-ui-default-default);
background-color: var(--ds-color-background-lightest);
color: var(--ds-color-text-link-default);

// update to media query when ods-hyperlink support is removed
:host(:not(.is-touching)) & {
&:hover {
border: 1px solid var(--auro-color-ui-default-default);
background-color: var(--auro-color-background-lighter);
color: var(--auro-color-text-link-default);
border: 1px solid var(--ds-color-ui-default-default);
background-color: var(--ds-color-background-lighter);
color: var(--ds-color-text-link-default);
}
}

&.hyperlink--ondark {
border: 1px solid var(--auro-color-ui-default-on-dark);
border: 1px solid var(--ds-color-ui-default-inverse);
background-color: transparent;
color: var(--auro-color-ui-default-on-dark);
color: var(--ds-color-ui-default-inverse);

// update to media query when ods-hyperlink support is removed
:host(:not(.is-touching)) & {
&:hover {
border: 1px solid var(--auro-color-ui-default-on-dark);
background-color: var(--auro-color-base-black-opacity-15);
color: var(--auro-color-ui-default-on-dark);
border: 1px solid var(--ds-color-ui-default-inverse);
background-color: var(--ds-color-base-black-opacity-15);
color: var(--ds-color-ui-default-inverse);
}

&:visited {
color: var(--auro-color-ui-default-on-dark);
color: var(--ds-color-ui-default-inverse);
}
}
}
}

// CTA ondark
&.hyperlink--ondark {
border: 1px solid var(--auro-color-ui-default-on-dark);
background-color: var(--auro-color-ui-default-on-dark);
color: var(--auro-color-text-primary-default);
border: 1px solid var(--ds-color-ui-default-inverse);
background-color: var(--ds-color-ui-default-inverse);
color: var(--ds-color-text-primary-default);

// update to media query when ods-hyperlink support is removed
:host(:not(.is-touching)) & {
&:hover {
border: 1px solid var(--auro-color-ui-hover-on-dark);
background-color: var(--auro-color-ui-hover-on-dark);
color: var(--auro-color-text-primary-default);
border: 1px solid var(--ds-color-ui-hover-inverse);
background-color: var(--ds-color-ui-hover-inverse);
color: var(--ds-color-text-primary-default);
}

&:visited {
color: var(--auro-color-text-primary-default);
color: var(--ds-color-text-primary-default);
}
}
}
}

&--ondark {
color: var(--auro-color-ui-default-on-dark);
color: var(--ds-color-ui-default-inverse);

&:visited {
color: var(--auro-color-ui-default-on-dark);
color: var(--ds-color-ui-default-inverse);
}
}
}
Expand All @@ -204,5 +205,5 @@ svg {

position: relative;
top: 4px;
margin-left: var(--auro-size-25);
margin-left: var(--ds-size-25);
}

0 comments on commit a69c6ae

Please sign in to comment.