From 894b6fdb1291e3e1e71fc7cbe75b1aec6d07400d Mon Sep 17 00:00:00 2001
From: Jordan Jones <jmjones2463@gmail.com>
Date: Fri, 27 Sep 2024 11:23:36 -0700
Subject: [PATCH] fix: resolve minor color theming issues

BREAKING CHANGE: trigger major release for color theme support #31
---
 README.md       | 9 ---------
 demo/api.md     | 7 +++----
 src/color.scss  | 4 ++--
 src/tokens.scss | 7 +++----
 4 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 3496e87..406d821 100644
--- a/README.md
+++ b/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) -->
diff --git a/demo/api.md b/demo/api.md
index faf8164..7ad54dc 100644
--- a/demo/api.md
+++ b/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 -->
diff --git a/src/color.scss b/src/color.scss
index 7071cc2..f3dbabb 100644
--- a/src/color.scss
+++ b/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%);
 }
diff --git a/src/tokens.scss b/src/tokens.scss
index 9eed9c6..9a8d8df 100644
--- a/src/tokens.scss
+++ b/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});
 }