diff --git a/demo/index.html b/demo/index.html index a4b0a37..b74994d 100644 --- a/demo/index.html +++ b/demo/index.html @@ -22,7 +22,7 @@ type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css" /> - + @@ -46,7 +46,7 @@ registerComponent('custom-checkbox'); - + diff --git a/package-lock.json b/package-lock.json index 8590a1a..853336b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,14 +10,14 @@ "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { - "@alaskaairux/icons": "^4.28.0", + "@alaskaairux/icons": "^4.28.1", "chalk": "^5.3.0", "lit": "^2.8.0" }, "devDependencies": { - "@alaskaairux/design-tokens": "^3.15.5", + "@aurodesignsystem/design-tokens": "^4.3.0", "@aurodesignsystem/eslint-config": "^1.3.0", - "@aurodesignsystem/webcorestylesheets": "^4.6.1", + "@aurodesignsystem/webcorestylesheets": "^5.0.5", "@commitlint/cli": "^17.7.2", "@commitlint/config-conventional": "^17.7.0", "@open-wc/testing": "^3.2.0", @@ -63,7 +63,7 @@ "node": ">=18.15.0" }, "peerDependencies": { - "@alaskaairux/design-tokens": "^3.14.0", + "@aurodesignsystem/design-tokens": "^4.1.1", "@aurodesignsystem/webcorestylesheets": "^4.6.1" } }, @@ -98,23 +98,10 @@ "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", - "integrity": "sha512-XCji0Q6fF6DGe/q4zFGE0epAMncJdTEL/OOxeRbrvJYrQ+3Cb68hN8XfDorrfhqm31yozUCe51PPkqVWyzdhKA==", + "version": "4.28.1", + "resolved": "https://registry.npmjs.org/@alaskaairux/icons/-/icons-4.28.1.tgz", + "integrity": "sha512-gszKFUaooa9cZpQKYS+qtcOkavTmlfpMqo7AwpG5F/y/duSawT1v3FyZWtro3m/8+1lz5rlf6D4q3ehYZ/mIRQ==", "hasInstallScript": true, "dependencies": { "chalk": "^4.1.2", @@ -180,6 +167,19 @@ "node": ">=8" } }, + "node_modules/@aurodesignsystem/design-tokens": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/design-tokens/-/design-tokens-4.3.0.tgz", + "integrity": "sha512-dA/4FIx1ZnDQEcb20gjVeC5XIqY1IX9DYCvT4iexKzR+fbKNbLRKzbOM7XN1hMVCQLRnEspNww5qFdFSbNyytQ==", + "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", @@ -554,78 +554,20 @@ } }, "node_modules/@aurodesignsystem/webcorestylesheets": { - "version": "4.6.1", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/webcorestylesheets/-/webcorestylesheets-4.6.1.tgz", - "integrity": "sha512-nGtwdozsEqXtTWCYKSZqUcsTN8z+F3zr628xTotCnmii96uA5XTjiI2aQXICCvAMuC/74xZgXe2tqRMUVPM9Kw==", + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/webcorestylesheets/-/webcorestylesheets-5.0.5.tgz", + "integrity": "sha512-BwVux3qElPaKxh58PjlTsdbM8xtXRMGNubw1wz6egDn6FbJ+96aOeg+BXC0f4rsnW/KkkPKLOkbzZFUPvMmyHg==", "dev": true, "hasInstallScript": true, "dependencies": { - "chalk": "^4.1.2" - }, - "peerDependencies": { - "@alaskaairux/design-tokens": "^3.11.0", - "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" + "chalk": "^5.3.0" }, "engines": { - "node": ">=10" + "node": "^18 || ^20" }, - "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" + "peerDependencies": { + "@aurodesignsystem/design-tokens": "^4.1.1", + "sass": "^1.42.1" } }, "node_modules/@babel/code-frame": { @@ -18290,19 +18232,10 @@ "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==", "dev": true }, - "@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, - "requires": { - "chalk": "^5.3.0" - } - }, "@alaskaairux/icons": { - "version": "4.28.0", - "resolved": "https://registry.npmjs.org/@alaskaairux/icons/-/icons-4.28.0.tgz", - "integrity": "sha512-XCji0Q6fF6DGe/q4zFGE0epAMncJdTEL/OOxeRbrvJYrQ+3Cb68hN8XfDorrfhqm31yozUCe51PPkqVWyzdhKA==", + "version": "4.28.1", + "resolved": "https://registry.npmjs.org/@alaskaairux/icons/-/icons-4.28.1.tgz", + "integrity": "sha512-gszKFUaooa9cZpQKYS+qtcOkavTmlfpMqo7AwpG5F/y/duSawT1v3FyZWtro3m/8+1lz5rlf6D4q3ehYZ/mIRQ==", "requires": { "chalk": "^4.1.2", "svgo": "^3.0.2" @@ -18348,6 +18281,15 @@ } } }, + "@aurodesignsystem/design-tokens": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/design-tokens/-/design-tokens-4.3.0.tgz", + "integrity": "sha512-dA/4FIx1ZnDQEcb20gjVeC5XIqY1IX9DYCvT4iexKzR+fbKNbLRKzbOM7XN1hMVCQLRnEspNww5qFdFSbNyytQ==", + "dev": true, + "requires": { + "chalk": "^5.3.0" + } + }, "@aurodesignsystem/eslint-config": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@aurodesignsystem/eslint-config/-/eslint-config-1.3.0.tgz", @@ -18645,57 +18587,12 @@ } }, "@aurodesignsystem/webcorestylesheets": { - "version": "4.6.1", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/webcorestylesheets/-/webcorestylesheets-4.6.1.tgz", - "integrity": "sha512-nGtwdozsEqXtTWCYKSZqUcsTN8z+F3zr628xTotCnmii96uA5XTjiI2aQXICCvAMuC/74xZgXe2tqRMUVPM9Kw==", + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/webcorestylesheets/-/webcorestylesheets-5.0.5.tgz", + "integrity": "sha512-BwVux3qElPaKxh58PjlTsdbM8xtXRMGNubw1wz6egDn6FbJ+96aOeg+BXC0f4rsnW/KkkPKLOkbzZFUPvMmyHg==", "dev": true, "requires": { - "chalk": "^4.1.2" - }, - "dependencies": { - "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, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "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, - "requires": { - "color-name": "~1.1.4" - } - }, - "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 - }, - "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, - "requires": { - "has-flag": "^4.0.0" - } - } + "chalk": "^5.3.0" } }, "@babel/code-frame": { diff --git a/package.json b/package.json index 09ea074..dfed123 100644 --- a/package.json +++ b/package.json @@ -19,18 +19,18 @@ "node": ">=18.15.0" }, "dependencies": { - "@alaskaairux/icons": "^4.28.0", + "@alaskaairux/icons": "^4.28.1", "chalk": "^5.3.0", "lit": "^2.8.0" }, "peerDependencies": { - "@alaskaairux/design-tokens": "^3.14.0", + "@aurodesignsystem/design-tokens": "^4.1.1", "@aurodesignsystem/webcorestylesheets": "^4.6.1" }, "devDependencies": { - "@alaskaairux/design-tokens": "^3.15.5", + "@aurodesignsystem/design-tokens": "^4.3.0", "@aurodesignsystem/eslint-config": "^1.3.0", - "@aurodesignsystem/webcorestylesheets": "^4.6.1", + "@aurodesignsystem/webcorestylesheets": "^5.0.5", "@commitlint/cli": "^17.7.2", "@commitlint/config-conventional": "^17.7.0", "@open-wc/testing": "^3.2.0", diff --git a/src/auro-checkbox-group.scss b/src/auro-checkbox-group.scss index e72e85c..a825be9 100644 --- a/src/auro-checkbox-group.scss +++ b/src/auro-checkbox-group.scss @@ -13,17 +13,16 @@ scss/selector-nest-combinators, selector-class-pattern */ -// Import Auro tokens -@import "./../node_modules/@alaskaairux/design-tokens/dist/tokens/SassCustomProperties"; +@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables"; :host { display: block; - padding-bottom: var(--auro-size-150); - color: var(--auro-color-text-primary-on-light); + padding-bottom: var(--ds-size-150, $ds-size-150); + color: var(--ds-color-text-primary-default, $ds-color-text-primary-default); } :host([disabled]) { - color: var(--auro-color-text-disabled-on-light); + color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default); } .displayFlex { @@ -39,16 +38,16 @@ fieldset { } legend { - margin-bottom: var(--auro-size-150); + margin-bottom: var(--ds-size-150, $ds-size-150); } .checkboxGroupElement-helpText { - color: var(--auro-color-text-secondary-on-light); + color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default); } :host([validity]:not([validity='valid'])) { .checkboxGroupElement-helpText { - color: var(--auro-color-alert-error-on-light); + color: var(--ds-color-alert-error-default, $ds-color-alert-error-default); } } diff --git a/src/auro-checkbox.scss b/src/auro-checkbox.scss index 705bdb7..11531c1 100644 --- a/src/auro-checkbox.scss +++ b/src/auro-checkbox.scss @@ -19,16 +19,16 @@ declaration-empty-line-before */ // Import Auro tokens -@import "./../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables"; +@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables"; -@import "./../node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; -@import "./../node_modules/@aurodesignsystem/webcorestylesheets/dist/core"; -@import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties'; +@import "./../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints"; +@import "./../node_modules/@aurodesignsystem/webcorestylesheets/src/core"; +@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties'; // container styles - defines the look of the outer custom component :host { display: block; - --cbxLocation: var(--auro-size-50); + --cbxLocation: var(--ds-size-50); } // layout styles - define any layout specifications for UI that is contained WITHIN the component @@ -43,16 +43,16 @@ .cbxGroup { display: block; - padding-right: var(--auro-size-100); + padding-right: var(--ds-size-100, $ds-size-100); .label--cbx { &:before{ - border-color: var(--auro-color-brand-atlas-400); + border-color: var(--ds-color-brand-atlas-400, $ds-color-brand-atlas-400); } &:after { - outline: 1px solid var(--auro-color-border-active-on-light); - border-color: var(--auro-color-border-active-on-light); + outline: 1px solid var(--ds-color-border-active-default, $ds-color-border-active-default); + border-color: var(--ds-color-border-active-default, $ds-color-border-active-default); } } @@ -60,8 +60,8 @@ &:checked { + .label { &:after { - outline: 1px solid var(--auro-color-border-active-on-light); - border-color: var(--auro-color-border-focus-on-dark);; + outline: 1px solid var(--ds-color-border-active-default, $ds-color-border-active-default); + border-color: var(--ds-color-border-focus-inverse, $ds-color-border-focus-inverse); } } } @@ -70,7 +70,7 @@ & + .label { &:hover { &:after { - background-color: var(--auro-color-background-lightest); + background-color: var(--ds-color-background-lightest, $ds-color-background-lightest); } } } @@ -105,33 +105,33 @@ fieldset { .cbxGroup { position: relative; - padding-left: var(--auro-size-100); - padding-right: var(--auro-size-100); - line-height: var(--auro-size-400); + padding-left: var(--ds-size-100, $ds-size-100); + padding-right: var(--ds-size-100, $ds-size-100); + line-height: var(--ds-size-400, $ds-size-400); } .cbx--input { &:disabled { & + label { - color: var(--auro-color-text-disabled-on-light); + color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default); &:hover { cursor: auto; &:after { - background-color: var(--auro-color-background-lightest); + background-color: var(--ds-color-background-lightest, $ds-color-background-lightest); } } } & + .label--cbx { &:before { - border-color: var(--auro-color-base-white); + border-color: var(--ds-color-base-white, $ds-color-base-white); } &:after { - border-color: var(--auro-color-text-disabled-on-light); + border-color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default); } } } @@ -140,14 +140,14 @@ fieldset { & + .label--cbx { &:hover { &:after { - background-color: var(--auro-color-ui-hover-on-light); + background-color: var(--ds-color-ui-hover-default, $ds-color-ui-hover-default); } } &:after { opacity: 1; - background-color: var(--auro-color-ui-default-on-light); - border-color: var(--auro-color-border-active-on-light); + background-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default); + border-color: var(--ds-color-border-active-default, $ds-color-border-active-default); } &:before { @@ -159,23 +159,23 @@ fieldset { &:disabled { & + .label--cbx { &:after { - background-color: var(--auro-color-brand-gray-200); - border-color: var(--auro-color-text-disabled-on-light); + background-color: var(--ds-color-brand-gray-200, $ds-color-brand-gray-200); + border-color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default); } } } & + .errorBorder { &:before { - border-color: var(--auro-color-base-white); + border-color: var(--ds-color-base-white, $ds-color-base-white); } &:after { - border-color: var(--auro-color-border-error-on-light); - background-color: var(--auro-color-border-error-on-light); + border-color: var(--ds-color-border-error-default, $ds-color-border-error-default); + background-color: var(--ds-color-border-error-default, $ds-color-border-error-default); } &:hover { &:after { - background-color: var(--auro-color-alert-error-on-light); + background-color: var(--ds-color-alert-error-default, $ds-color-alert-error-default); } } } @@ -183,14 +183,14 @@ fieldset { } .label { - margin-left: var(--auro-size-300); + margin-left: var(--ds-size-300, $ds-size-300); display: block; &:hover { cursor: pointer; &:after { - background-color: var(--auro-color-ui-bkg-hover-on-light); + background-color: var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default); } } } @@ -201,36 +201,36 @@ fieldset { -webkit-tap-highlight-color: transparent; position: absolute; content: ''; - top: var(--auro-size-50); + top: var(--ds-size-50, $ds-size-50); left: var(--cbxLocation); - width: calc(var(--auro-size-200) + var(--auro-size-50)); - height: calc(var(--auro-size-200) + var(--auro-size-50)); + width: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50)); + height: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50)); border-width: 1px; border-style: solid; - border-color: var(--auro-color-base-gray-500); - border-radius: var(--auro-border-radius); + border-color: var(--ds-color-brand-gray-500, $ds-color-brand-gray-500); + border-radius: var(--ds-border-radius, $ds-border-radius); z-index: 0; - background-color: var(--auro-color-base-white); + background-color: var(--ds-color-base-white, $ds-color-base-white); } } .label--cbx { &.errorBorder { &:after { - border-color: var(--auro-color-border-error-on-light); + border-color: var(--ds-color-border-error-default, $ds-color-border-error-default); } } } .svg--cbx { position: absolute; - top: var(--auro-size-25); - left: var(--auro-size-25); + top: var(--ds-size-25, $ds-size-25); + left: var(--ds-size-25, $ds-size-25); padding-top: 3px; padding-bottom: 3px; z-index: 1; - color: var(--auro-color-base-white); + color: var(--ds-color-base-white, $ds-color-base-white); } diff --git a/src/style.scss b/src/style.scss deleted file mode 100644 index e6c3f5a..0000000 --- a/src/style.scss +++ /dev/null @@ -1,35 +0,0 @@ -// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license -// See LICENSE in the project root for license information. - -// --------------------------------------------------------------------- - -// 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/webcorestylesheets/dist/breakpoints'; -@import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/core'; - -// Support for auroElement styles -// @import './node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement'; - -// container styles - defines the look of the outer custom component -// :host { -// ... -// } - - -// Selector is for initial setup only -// delete when building new custom element -.testClass { - display: inline-block; - padding: var(--auro-text-body-size-default); - border: 1px solid var(--auro-color-border-error-on-light); - color: var(--auro-color-border-error-on-light); -} - -// Selector for native :focus-visible support -:focus-visible { - background-color: var(--auro-color-border-error-on-light); - color: var(--auro-color-base-white); -}