refactor(tokens): make token names a little more semantically correct

AlaskaAirlines · Jul 9, 2024 · 33e2fbc · 33e2fbc
1 parent a3faedc
commit 33e2fbc
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 8 deletions.
diff --git a/demo/api.md b/demo/api.md
@@ -92,9 +92,9 @@ The component may be restyled using the following code sample and changing the v
 
 :host {
   --ds-auro-skeleton-background-color: var(--ds-color-background-subtle-default, #{$ds-color-background-subtle-default});
-  --ds-auro-skeleton-background-gradient-one-color: var(--ds-color-background-subtle-default, #{$ds-color-background-subtle-default});
-  --ds-auro-skeleton-background-gradient-two-color: var(--ds-color-background-primary-300-default, #{$ds-color-background-primary-300-default});
-  --ds-auro-skeleton-background-gradient-three-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});
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
diff --git a/src/color.scss b/src/color.scss
@@ -8,5 +8,5 @@
 
 :host {
   background-color: var(--ds-auro-skeleton-background-color);
-  background-image: linear-gradient(to right, var(--ds-auro-skeleton-background-gradient-one-color) 10%, var(--ds-auro-skeleton-background-gradient-two-color) 40%,var(--ds-auro-skeleton-background-gradient-three-color) 60%);
+  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%);
 }
diff --git a/src/style.scss b/src/style.scss
@@ -5,7 +5,6 @@
 
 // Import Auro tokens
 @import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
-@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SassCustomProperties';
 
 @import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints';
 @import './../node_modules/@aurodesignsystem/webcorestylesheets/src/core';

diff --git a/src/tokens.scss b/src/tokens.scss
@@ -2,7 +2,7 @@
 
 :host {
   --ds-auro-skeleton-background-color: var(--ds-color-background-subtle-default, #{$ds-color-background-subtle-default});
-  --ds-auro-skeleton-background-gradient-one-color: var(--ds-color-background-subtle-default, #{$ds-color-background-subtle-default});
-  --ds-auro-skeleton-background-gradient-two-color: var(--ds-color-background-primary-300-default, #{$ds-color-background-primary-300-default});
-  --ds-auro-skeleton-background-gradient-three-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});
 }