Skip to content

Commit

Permalink
perf(token): update token per new theming #6
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-items.scss
	modified:   src/style-sections.scss
	modified:   src/style.scss
  • Loading branch information
@fajar-apri-alaska
fajar-apri-alaska committed Nov 14, 2023
1 parent b718bd7 commit 4403360
Show file tree
Hide file tree
Showing 6 changed files with 95 additions and 127 deletions.
5 changes: 4 additions & 1 deletion demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,10 @@
type="text/css"
href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.css"
/>
<!-- legacy reference is still needed to support auro-accordion's use of legacy toke vales at this time -->
<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 All @@ -42,7 +45,7 @@
</script>

<!-- If additional elements are needed for the demo, add them here. -->
<script src="https://cdn.jsdelivr.net/npm/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>

<script type="module" src="../index.js" data-demo-script="true"></script>
<script type="module">
Expand Down
101 changes: 33 additions & 68 deletions package-lock.json
View file

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

8 changes: 4 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,13 @@
"lit": "^2.7.5"
},
"peerDependencies": {
"@alaskaairux/design-tokens": "^3.14.0",
"@aurodesignsystem/webcorestylesheets": "^4.5.0"
"@aurodesignsystem/design-tokens": "^4.2.0",
"@aurodesignsystem/webcorestylesheets": "^5.0.5"
},
"devDependencies": {
"@alaskaairux/design-tokens": "^3.14.0",
"@aurodesignsystem/design-tokens": "^4.2.0",
"@aurodesignsystem/eslint-config": "^1.3.0",
"@aurodesignsystem/webcorestylesheets": "^4.5.0",
"@aurodesignsystem/webcorestylesheets": "^5.0.5",
"@commitlint/cli": "^17.6.5",
"@commitlint/config-conventional": "^17.6.5",
"@open-wc/testing": "^3.2.0",
Expand Down
60 changes: 30 additions & 30 deletions src/style-items.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,18 @@
// ---------------------------------------------------------------------

// Import Auro tokens
@import './../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables';
@import './../node_modules/@alaskaairux/design-tokens/dist/tokens/SassCustomProperties';
@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SassCustomProperties';

@import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/core';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/core';

svg {
top: -4px;
width: var(--auro-size-300);
width: var(--ds-size-300, $ds-size-300);
/* stylelint-disable-next-line declaration-no-important */
height: var(--auro-size-300) !important; // !important necc. to override inline styling
color: var(--auro-color-icon-primary-on-light);
height: var(--ds-size-300, $ds-size-300) !important; // !important necc. to override inline styling
color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);
}

%hyperlink-styles {
Expand All @@ -25,34 +25,34 @@ svg {
border-width: 1px;
border-style: solid;
border-color: transparent;
color: var(--auro-color-text-primary-on-light);
color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
cursor: pointer;
font-size: var(--auro-text-body-size-lg);
line-height: var(--auro-text-body-height-lg);
font-size: var(--ds-text-body-size-lg, $ds-text-body-size-lg);
line-height: var(--ds-text-body-height-lg, $ds-text-body-height-lg);
/* stylelint-disable-next-line declaration-no-important */
text-decoration: none !important; // necc to override default hyperlink styling

&:hover {
background: var(--auro-color-ui-bkg-hover-on-light);
background: var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default);
/* stylelint-disable-next-line declaration-no-important */
color: var(--auro-color-text-primary-on-light) !important; // necc to override default hyperlink styling
color: var(--ds-color-text-primary-default, $ds-color-text-primary-default) !important; // necc to override default hyperlink styling
}

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

&:focus-visible {
border-color: var(--auro-color-ui-default-on-light);
border-radius: var(--auro-border-radius);
border-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
border-radius: var(--ds-border-radius, $ds-border-radius);
background: none;
color: var(--auro-color-text-primary-on-light);
color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
outline: none;

&:hover {
background: var(--auro-color-ui-bkg-hover-on-light);
background: var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default);
/* stylelint-disable-next-line declaration-no-important */
color: var(--auro-color-text-primary-on-light) !important; // necc to override default hyperlink styling
color: var(--ds-color-text-primary-default, $ds-color-text-primary-default) !important; // necc to override default hyperlink styling
}
}
}
Expand All @@ -74,41 +74,41 @@ svg {

:host([tier="0"]) {
.hyperlink {
padding: var(--auro-size-200);
padding-left: calc(var(--auro-size-200) - 2px);
padding: var(--ds-size-200, $ds-size-200);
padding-left: calc(var(--ds-size-200, $ds-size-200) - 2px);
}
}

:host([tier="1"]) {
.hyperlink {
padding: var(--auro-size-100) var(--auro-size-200) var(--auro-size-100) var(--auro-size-500);
padding-left: calc(var(--auro-size-500) - 2px);
font-size: var(--auro-text-body-size-default);
line-height:var(--auro-text-body-height-default);
padding: var(--ds-size-100, $ds-size-100) var(--ds-size-200, $ds-size-200) var(--ds-size-100, $ds-size-100) var(--ds-size-500, $ds-size-500);
padding-left: calc(var(--ds-size-500, $ds-size-500) - 2px);
font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);
line-height:var(--ds-text-body-height-default, $ds-text-body-height-default);
}
}

%selected-item-colors {
color: var(--auro-color-text-link-on-light);
color: var(--ds-color-text-link-default, $ds-color-text-link-default);

&:hover {
/* stylelint-disable-next-line declaration-no-important */
color: var(--auro-color-text-link-on-light) !important; // necc to override default hyperlink styling
color: var(--ds-color-text-link-default, $ds-color-text-link-default) !important; // necc to override default hyperlink styling
}

&:focus-visible {
color: var(--auro-color-text-link-on-light);
color: var(--ds-color-text-link-default, $ds-color-text-link-default);

&:hover {
/* stylelint-disable-next-line declaration-no-important */
color: var(--auro-color-text-link-on-light) !important; // necc to override default hyperlink styling
color: var(--ds-color-text-link-default, $ds-color-text-link-default) !important; // necc to override default hyperlink styling
}
}
}

:host([selected]) {
border-left-color: var(--auro-color-ui-default-on-light);
color: var(--auro-color-text-link-on-light);
border-left-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
color: var(--ds-color-text-link-default, $ds-color-text-link-default);

.hyperlink {
@extend %selected-item-colors;
Expand Down
Loading

0 comments on commit 4403360

Please sign in to comment.