fix: resolve minor color theming issues

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

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

@@ -91,10 +91,9 @@ 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-skeleton-background-color: var(--ds-color-background-subtle-default, #{$ds-color-background-subtle-default});
-  --ds-auro-skeleton-background-gradient-color-one: var(--ds-color-background-subtle-default, #{$ds-color-background-subtle-default});
-  --ds-auro-skeleton-background-gradient-color-two: var(--ds-color-background-primary-300-default, #{$ds-color-background-primary-300-default});
-  --ds-auro-skeleton-background-gradient-color-three: var(--ds-color-background-subtle-default, #{$ds-color-background-subtle-default});
+  --ds-auro-skeleton-container-color: var(--ds-color-container-subtle-default, #{$ds-color-container-subtle-default});
+  --ds-auro-skeleton-container-gradient-color-one: var(--ds-color-container-subtle-default, #{$ds-color-container-subtle-default});
+  --ds-auro-skeleton-container-gradient-color-two: var(--ds-color-container-tertiary-default, #{$ds-color-container-tertiary-default});
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

src/color.scss

@@ -7,6 +7,6 @@
 @import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
 
 :host {
-  background-color: var(--ds-auro-skeleton-background-color);
-  background-image: linear-gradient(to right, var(--ds-auro-skeleton-background-gradient-color-one) 10%, var(--ds-auro-skeleton-background-gradient-color-two) 40%,var(--ds-auro-skeleton-background-gradient-color-three) 60%);
+  background-color: var(--ds-auro-skeleton-container-color);
+  background-image: linear-gradient(to right, var(--ds-auro-skeleton-container-gradient-color-one) 10%, var(--ds-auro-skeleton-container-gradient-color-two) 40%,var(--ds-auro-skeleton-container-gradient-color-one) 60%);
 }

src/tokens.scss

@@ -1,8 +1,7 @@
 @import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
 
 :host {
-  --ds-auro-skeleton-background-color: var(--ds-color-background-subtle-default, #{$ds-color-background-subtle-default});
-  --ds-auro-skeleton-background-gradient-color-one: var(--ds-color-background-subtle-default, #{$ds-color-background-subtle-default});
-  --ds-auro-skeleton-background-gradient-color-two: var(--ds-color-background-primary-300-default, #{$ds-color-background-primary-300-default});
-  --ds-auro-skeleton-background-gradient-color-three: var(--ds-color-background-subtle-default, #{$ds-color-background-subtle-default});
+  --ds-auro-skeleton-container-color: var(--ds-color-container-subtle-default, #{$ds-color-container-subtle-default});
+  --ds-auro-skeleton-container-gradient-color-one: var(--ds-color-container-subtle-default, #{$ds-color-container-subtle-default});
+  --ds-auro-skeleton-container-gradient-color-two: var(--ds-color-container-tertiary-default, #{$ds-color-container-tertiary-default});
 }