fix: resolve minor color theming issues

BREAKING CHANGE: trigger major release for color theme support #13

README.md

@@ -62,15 +62,6 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
-### CSS Custom Property fallbacks
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/cssFallbacks.md) -->
-[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are [not supported](https://auro.alaskaair.com/support/custom-properties) in older browsers. For this, fallback properties are pre-generated and included with the npm.
-
-Any update to the Auro Design Tokens will be immediately reflected with browsers that support CSS custom properties, legacy browsers will require updated components with pre-generated fallback properties.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
 ### Define dependency in project component
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->

demo/api.md

@@ -730,11 +730,10 @@ The component may be restyled using the following code sample and changing the v
 @import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
 
 :host {
-  --ds-auro-dialog-background-color: var(--ds-color-background-primary-100-default, #{$ds-color-background-primary-100-default});
-  --ds-auro-dialog-boxshadow-color-one: rgb(0 0 0 / 0.12);
-  --ds-auro-dialog-boxshadow-color-two: rgb(0 0 0 / 0.1);
-  --ds-auro-dialog-overlay-modal-background-color: rgb(0 0 0 / 0.5);
-  --ds-auro-dialog-overlay-open-background-color: rgb(0 0 0 / 0.2);
+  --ds-auro-dialog-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
+  --ds-auro-dialog-boxshadow-color: var(--ds-elevation-300, #{$ds-elevation-300});
+  --ds-auro-dialog-overlay-modal-background-color: var(--ds-color-background-scrimmed-default, #{$ds-color-background-scrimmed-default});
+  --ds-auro-dialog-overlay-open-background-color: var(--ds-color-background-scrimmed-default, #{$ds-color-background-scrimmed-default});
   --ds-auro-dialog-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
 }
 ```

package.json

@@ -33,7 +33,7 @@
   "devDependencies": {
     "@alaskaairux/icons": "^4.41.1",
     "@aurodesignsystem/auro-library": "^2.6.0",
-    "@aurodesignsystem/design-tokens": "^4.9.0",
+    "@aurodesignsystem/design-tokens": "^4.10.0",
     "@aurodesignsystem/eslint-config": "^1.3.0",
     "@aurodesignsystem/webcorestylesheets": "^5.1.1",
     "@commitlint/cli": "^19.3.0",

src/buttonVersion.js

@@ -1 +1 @@
-export default '7.3.0-beta.6'
+export default '8.0.0'

src/color.scss

@@ -20,12 +20,12 @@
 }
 
 .dialog {
-  background: var(--ds-auro-dialog-background-color);
+  background: var(--ds-auro-dialog-container-color);
   color: var(--ds-auro-dialog-text-color);
 
   // 1024px breakpoint / large dialog size is default
   @include auro_breakpoint--md {
-    box-shadow: 0 10px 20px 0 var(--ds-auro-dialog-boxshadow-color-one), 0 1px 10px 0 var(--ds-auro-dialog-boxshadow-color-two);
+    box-shadow: var(--ds-auro-dialog-boxshadow-color);
   }
 }
 

src/iconVersion.js

@@ -1 +1 @@
-export default '5.0.0-beta.1'
+export default '5.0.0'

src/tokens.scss

@@ -1,10 +1,9 @@
 @import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
 
 :host {
-  --ds-auro-dialog-background-color: var(--ds-color-background-primary-100-default, #{$ds-color-background-primary-100-default});
-  --ds-auro-dialog-boxshadow-color-one: rgb(0 0 0 / 0.12);
-  --ds-auro-dialog-boxshadow-color-two: rgb(0 0 0 / 0.1);
-  --ds-auro-dialog-overlay-modal-background-color: rgb(0 0 0 / 0.5);
-  --ds-auro-dialog-overlay-open-background-color: rgb(0 0 0 / 0.2);
+  --ds-auro-dialog-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
+  --ds-auro-dialog-boxshadow-color: var(--ds-elevation-300, #{$ds-elevation-300});
+  --ds-auro-dialog-overlay-modal-background-color: var(--ds-color-background-scrimmed-default, #{$ds-color-background-scrimmed-default});
+  --ds-auro-dialog-overlay-open-background-color: var(--ds-color-background-scrimmed-default, #{$ds-color-background-scrimmed-default});
   --ds-auro-dialog-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
 }