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..fd5b1db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,8 +16,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", @@ -189,6 +190,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 +577,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..22d00e1 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/style.scss b/src/style.scss index 044feb7..47fd9d5 100644 --- a/src/style.scss +++ b/src/style.scss @@ -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 @@ -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() @@ -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; } @@ -82,7 +83,7 @@ &--ondark { &:hover { - color: var(--auro-hyperlink-ondark-hover-color); + color: var(--ds-color-ui-hover-inverse); } } } @@ -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 { @@ -118,51 +119,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 +171,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 +205,5 @@ svg { position: relative; top: 4px; - margin-left: var(--auro-size-25); + margin-left: var(--ds-size-25); }