Skip to content

Commit

Permalink
perf(token): update token per new theming #23
Browse files Browse the repository at this point in the history 
- add fallback values to the tokens
- keep the old WCSS because of still being used in demo/style.scss

Changes to be committed:
	modified:   demo/style.scss
	modified:   package-lock.json
	modified:   package.json
	modified:   src/style-fixed.css.map
	modified:   src/style-fixed.scss
	modified:   src/style.css.map
	modified:   src/style.scss
  • Loading branch information
@fajar-apri-alaska
fajar-apri-alaska committed Nov 9, 2023
1 parent 53280b7 commit a710a33
Show file tree
Hide file tree
Showing 7 changed files with 91 additions and 56 deletions.
63 changes: 34 additions & 29 deletions demo/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,32 @@
// ----------------------- DO NOT EDIT -----------------------------

// 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 baseline library dependencies
// Mixins
@import './../node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints';
// This is needed for @mixin auro_focus-hyperlink
@import './../node_modules/@alaskaairux/webcorestylesheets/dist/utilityMixins/focusVisible';

// Support for fallback values
@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables.scss';

// Creates baseline output in CSS
@import './../node_modules/@alaskaairux/webcorestylesheets/dist/fonts';
@import './../node_modules/@alaskaairux/webcorestylesheets/dist/normalize';
@import './../node_modules/@alaskaairux/webcorestylesheets/dist/headings';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/fonts';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/normalize';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/headings';
$paragraph: true;
@import './../node_modules/@alaskaairux/webcorestylesheets/dist/essentials';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/essentials';

// Import Utility classes (will produce CSS in output)
$layout-properties: margin;
$layout-extensions: Right;
$layout-modifiers: (
'md': $auro-size-md
'md': $ds-size-200
);
@import './../node_modules/@alaskaairux/webcorestylesheets/dist/utilityMixins/layoutPropertiesGenerator';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/utilityMixins/layoutPropertiesGenerator';

// Custom styles per demo pages
body {
Expand All @@ -45,15 +50,15 @@ main {

.exampleWrapper {
$stripe: #f3f3f3;
$background: var(--auro-color-base-white);
$background: var(--ds-color-base-white, $ds-color-base-white);

background: repeating-linear-gradient( 45deg, $stripe, $stripe 10px, $background 10px, $background 20px);
overflow: auto;
}

.exampleWrapper--ondark {
$stripe: var(--auro-color-background-darkest);
$background: var(--auro-color-background-darker);
$stripe: var(--ds-color-background-darkest, $ds-color-background-darkest);
$background: var(--ds-color-background-darker, $ds-color-background-darker);

background: repeating-linear-gradient( 45deg, $stripe, $stripe 10px, $background 10px, $background 20px);
}
Expand All @@ -79,18 +84,18 @@ code[class*='language-'], pre[class*='language-'] {
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

code:not(.html):not(.css):not(.js) {
color: var(--auro-color-brand-flamingo-500);
color: var(--ds-color-brand-flamingo-500, $ds-color-brand-flamingo-500);
}

blockquote {
margin-left: 0;
border-left: 1px solid var(--auro-color-border-active-on-light);
padding: var(--auro-size-xs);
padding-left: var(--auro-size-xl);
color: var(--auro-color-text-secondary-on-light);
border-left: 1px solid var(--ds-color-border-active-default, $ds-color-border-active-default);
padding: var(--ds-size-100, $ds-size-100);
padding-left: var(--ds-size-400, $ds-size-400);
color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
font-weight: 200;
margin-top: var(--auro-size-lg);
margin-bottom: var(--auro-size-lg);
margin-top: var(--ds-size-300, $ds-size-300);
margin-bottom: var(--ds-size-300, $ds-size-300);

p {
line-height: 2;
Expand All @@ -100,7 +105,7 @@ blockquote {
}

& + p {
margin-bottom: var(--auro-size-xl);
margin-bottom: var(--ds-size-400, $ds-size-400);
}
}

Expand Down Expand Up @@ -148,8 +153,8 @@ strong {

pre {
overflow: auto;
background-color: var(--auro-color-base-gray-100);
margin-bottom: var(--auro-size-xxl);
background-color: var(--ds-color-brand-gray-100, $ds-color-brand-gray-100);
margin-bottom: var(--ds-size-600, $ds-size-600);

code {
font-size: .9rem;
Expand All @@ -161,19 +166,19 @@ table {
border-collapse: collapse;
overflow: scroll;
width: auto;
border-spacing: var(--auro-size-sm);
margin-bottom: var(--auro-size-xl);
font-weight: var(--auro-text-heading-display-weight);
border-spacing: var(--ds-size-150, $ds-size-150);
margin-bottom: var(--ds-size-400, $ds-size-400);
font-weight: var(--ds-text-heading-display-weight, $ds-text-heading-display-weight);

tr {
&:nth-child(even) {
background-color: var(--auro-color-base-gray-100);
background-color: var(--ds-color-brand-gray-100, $ds-color-brand-gray-100);
}
}

th {
text-align: left;
font-weight: var(--auro-text-heading-default-weight);
font-weight: var(--ds-text-heading-default-weight, $ds-text-heading-default-weight);
}

img {
Expand All @@ -187,10 +192,10 @@ table {
}

thead {
border-bottom: 1px solid var(--auro-color-base-gray-200);
border-bottom: 1px solid var(--ds-color-brand-gray-200, $ds-color-brand-gray-200);
border-collapse: collapse;
}

th, td {
padding: var(--auro-size-md);
padding: var(--ds-size-200, $ds-size-200);
}
49 changes: 37 additions & 12 deletions package-lock.json
View file

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

10 changes: 6 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,17 @@
"lit-element": "^2.5.1"
},
"peerDependencies": {
"@alaskaairux/design-tokens": "^3.3.0",
"@alaskaairux/webcorestylesheets": "^3.4.0",
"@alaskaairux/webcorestylesheets": "^3.7.3",
"@aurodesignsystem/design-tokens": "^4.2.0",
"@aurodesignsystem/webcorestylesheets": "^5.0.4",
"@webcomponents/webcomponentsjs": "^2.5.0",
"focus-visible": "^5.2.0"
},
"devDependencies": {
"@alaskaairux/design-tokens": "^3.3.0",
"@alaskaairux/webcorestylesheets": "^3.6.2",
"@alaskaairux/webcorestylesheets": "^3.7.3",
"@aurodesignsystem/design-tokens": "^4.2.0",
"@aurodesignsystem/eslint-config": "^1.2.0",
"@aurodesignsystem/webcorestylesheets": "^5.0.4",
"@babel/core": "^7.15.0",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.15.0",
Expand Down
2 changes: 1 addition & 1 deletion src/style-fixed.css.map
View file

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

2 changes: 1 addition & 1 deletion src/style-fixed.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import './../node_modules/@alaskaairux/design-tokens/dist/tokens/SassCustomProperties';
@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SassCustomProperties';

:host([fixed]) {
@import './style.scss';
Expand Down
Loading

0 comments on commit a710a33

Please sign in to comment.