feat(tokens): update semantic color token names #31

AlaskaAirlines · Mar 15, 2024 · 0ee557e · 0ee557e
1 parent 71ce2e8
commit 0ee557e
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/src/style.scss b/src/style.scss
@@ -11,16 +11,22 @@
 @import './../node_modules/@aurodesignsystem/webcorestylesheets/src/core';
 @import './../node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties';
 
+$ds-color-skeleton-background-lightest: var(--ds-color-brand-neutral-100, $ds-color-brand-neutral-100);
+$ds-color-skeleton-background-lighter: var(--ds-color-brand-neutral-200, $ds-color-brand-neutral-200);
+
 // container styles - defines the look of the outer custom component
 :host {
+  --ds-color-skeleton-background-lightest: var(--ds-color-brand-neutral-100, $ds-color-brand-neutral-100);
+  --ds-color-skeleton-background-lighter: var(--ds-color-brand-neutral-200, $ds-color-brand-neutral-200);
+
   display: block;
   animation-duration: 2s;
   animation-fill-mode: backwards;
   animation-iteration-count: infinite;
   animation-name: place-holder-shimmer;
   animation-timing-function: linear;
-  background-color: var(--ds-color-brand-neutral-100, $ds-color-brand-neutral-100);
-  background-image: linear-gradient(to right,var(--ds-color-brand-neutral-100, $ds-color-brand-neutral-100) 10%,var(--ds-color-brand-neutral-200, $ds-color-brand-neutral-200) 40%,var(--ds-color-brand-neutral-100, $ds-color-brand-neutral-100) 60%);
+  background-color: var(--ds-color-skeleton-background-lightest, $ds-color-skeleton-background-lightest);
+  background-image: linear-gradient(to right,var(--ds-color-skeleton-background-lightest, $ds-color-skeleton-background-lightest) 10%,var(--ds-color-skeleton-background-lighter, $ds-color-skeleton-background-lighter) 40%,var(--ds-color-skeleton-background-lightest, $ds-color-skeleton-background-lightest) 60%);
   background-repeat: no-repeat;
   background-size: 1000px 100%;
 }