From 5c2b92255184010f236fd461779864dffd269c79 Mon Sep 17 00:00:00 2001 From: fajar-apri-alaska Date: Mon, 2 Oct 2023 12:27:49 +0700 Subject: [PATCH] perf(token): update token per new theming #183 Changes to be committed: modified: demo/index.html modified: package-lock.json modified: package.json modified: src/style.scss --- demo/index.html | 1 + package-lock.json | 105 ++++++++++------------------------------------ package.json | 8 ++-- src/style.scss | 96 +++++++++++++++++++++--------------------- 4 files changed, 75 insertions(+), 135 deletions(-) diff --git a/demo/index.html b/demo/index.html index ac2876b..dff475e 100644 --- a/demo/index.html +++ b/demo/index.html @@ -23,6 +23,7 @@ href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css" /> + diff --git a/package-lock.json b/package-lock.json index 6935623..6f34fc3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,10 +14,10 @@ "lit": "^2.8.0" }, "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", @@ -65,9 +65,9 @@ "node": ">=18.15.0" }, "peerDependencies": { - "@alaskaairux/design-tokens": "^3.15.5", "@alaskaairux/icons": "^4.20.0", - "@aurodesignsystem/webcorestylesheets": "^4.8.0" + "@aurodesignsystem/design-tokens": "^4.1.1", + "@aurodesignsystem/webcorestylesheets": "^5.0.2" } }, "node_modules/@75lb/deep-merge": { @@ -101,19 +101,6 @@ "node": ">=0.10.0" } }, - "node_modules/@alaskaairux/design-tokens": { - "version": "3.15.5", - "resolved": "https://registry.npmjs.org/@alaskaairux/design-tokens/-/design-tokens-3.15.5.tgz", - "integrity": "sha512-aS5z3uY5yJirJlja/7MiIXxFnhLLl6dIX5NmAKnpQy95VqAKbyhpvx4zv1mtMJb+y5tQ5qoo46T0SA+oAAR3Sg==", - "dev": true, - "hasInstallScript": true, - "dependencies": { - "chalk": "^5.3.0" - }, - "engines": { - "node": ">=18" - } - }, "node_modules/@alaskaairux/icons": { "version": "4.28.0", "resolved": "https://registry.npmjs.org/@alaskaairux/icons/-/icons-4.28.0.tgz", @@ -189,6 +176,19 @@ "node": ">=8" } }, + "node_modules/@aurodesignsystem/design-tokens": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/design-tokens/-/design-tokens-4.1.1.tgz", + "integrity": "sha512-C/w0GLqx6YsXbvxXa+ly6VYpc2JLRiRKAbaEXAdP8+OM2If9UB4qEA1YA28G8veRMkf4sG/Joff8c01xmxQvuQ==", + "dev": true, + "hasInstallScript": true, + "dependencies": { + "chalk": "^5.3.0" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/@aurodesignsystem/eslint-config": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@aurodesignsystem/eslint-config/-/eslint-config-1.3.0.tgz", @@ -563,80 +563,19 @@ } }, "node_modules/@aurodesignsystem/webcorestylesheets": { - "version": "4.8.0", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/webcorestylesheets/-/webcorestylesheets-4.8.0.tgz", - "integrity": "sha512-wJqahfLi2njv9g4G2ooK1ciwV0+AWNlXqcpSDMaZSh1WReDbh/ml+IuZq9M5MUKvXCx/ILe/QUSGmkzjFRGAyA==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/webcorestylesheets/-/webcorestylesheets-5.0.2.tgz", + "integrity": "sha512-GJ9iR1l0Mi+sUCmPH7c6w7r9gA95ajQ3gRoZXAIhenN/PdhOOj7beo9g1KHNrL+Pjwopdhi692nynUw4sTymlQ==", "dev": true, "hasInstallScript": true, "dependencies": { - "chalk": "^4.1.2" + "chalk": "^5.3.0" }, "peerDependencies": { - "@alaskaairux/design-tokens": "^3.11.0", + "@aurodesignsystem/design-tokens": "^4.1.1", "sass": "^1.42.1" } }, - "node_modules/@aurodesignsystem/webcorestylesheets/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/@aurodesignsystem/webcorestylesheets/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/@aurodesignsystem/webcorestylesheets/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/@aurodesignsystem/webcorestylesheets/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "node_modules/@aurodesignsystem/webcorestylesheets/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/@babel/code-frame": { "version": "7.21.4", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz", diff --git a/package.json b/package.json index 655647f..026f1e6 100644 --- a/package.json +++ b/package.json @@ -23,15 +23,15 @@ "lit": "^2.8.0" }, "peerDependencies": { - "@alaskaairux/design-tokens": "^3.15.5", "@alaskaairux/icons": "^4.20.0", - "@aurodesignsystem/webcorestylesheets": "^4.8.0" + "@aurodesignsystem/design-tokens": "^4.1.1", + "@aurodesignsystem/webcorestylesheets": "^5.0.2" }, "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", diff --git a/src/style.scss b/src/style.scss index 044feb7..fae831b 100644 --- a/src/style.scss +++ b/src/style.scss @@ -4,14 +4,14 @@ // --------------------------------------------------------------------- // 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/@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 @@ -45,7 +45,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() @@ -54,23 +54,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; } @@ -82,7 +82,7 @@ &--ondark { &:hover { - color: var(--auro-hyperlink-ondark-hover-color); + color: var(--ds-color-ui-hover-inverse); } } } @@ -99,16 +99,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 { @@ -118,51 +118,51 @@ // 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); } } } @@ -170,30 +170,30 @@ // 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); } } } @@ -204,5 +204,5 @@ svg { position: relative; top: 4px; - margin-left: var(--auro-size-25); + margin-left: var(--ds-size-25); }