refactor(tokens): use correct syntax for fallback variables

AlaskaAirlines · Jul 9, 2024 · 73d0e06 · 73d0e06
1 parent 7e1a45d
commit 73d0e06
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/demo/api.md b/demo/api.md
@@ -180,14 +180,16 @@ The component may be restyled using the following code sample and changing the v
 <!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
 
 ```scss
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
 :host {
-  --ds-auro-toast-background-color: var(--ds-color-brand-gray-400, $ds-color-brand-gray-400);
-  --ds-auro-toast-border-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);
-  --ds-auro-toast-close-button-icon-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
+  --ds-auro-toast-background-color: var(--ds-color-brand-gray-400, #{$ds-color-brand-gray-400});
+  --ds-auro-toast-border-color: var(--ds-color-border-divider-default, #{$ds-color-border-divider-default});
+  --ds-auro-toast-close-button-icon-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
   --ds-auro-toast-close-button-background-color: transparent;
   --ds-auro-toast-close-button-border-color: transparent;
-  --ds-auro-toast-icon-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
-  --ds-auro-toast-text-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
+  --ds-auro-toast-icon-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
+  --ds-auro-toast-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
diff --git a/src/color.scss b/src/color.scss
@@ -22,23 +22,22 @@
     color: var(--ds-auro-toast-close-button-icon-color);
 
     &:hover {
-      --ds-auro-toast-close-button-border-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);
-      --ds-auro-toast-close-button-background-color: var(--ds-color-container-ui-tertiary-active-default, $ds-color-container-ui-tertiary-active-default);
+      --ds-auro-toast-close-button-border-color: var(--ds-color-border-divider-default, #{$ds-color-border-divider-default});
+      --ds-auro-toast-close-button-background-color: var(--ds-color-container-ui-tertiary-active-default, #{$ds-color-container-ui-tertiary-active-default});
     }
-  }
-
+  }  
 }
 
 :host([variant='error']) {
   --ds-auro-toast-background-color: var(--ds-color-container-error-default, #{$ds-color-container-error-default});
-  --ds-auro-toast-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
-  --ds-auro-toast-icon-color: var(--ds-color-icon-error-default, $ds-color-icon-error-default);
-  --ds-auro-toast-close-button-icon-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+  --ds-auro-toast-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+  --ds-auro-toast-icon-color: var(--ds-color-icon-error-default, #{$ds-color-icon-error-default});
+  --ds-auro-toast-close-button-icon-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
 }
 
 :host([variant='success']) {
   --ds-auro-toast-background-color: var(--ds-color-container-success-default, #{$ds-color-container-success-default});
-  --ds-auro-toast-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
-  --ds-auro-toast-icon-color: var(--ds-color-icon-success-default, $ds-color-icon-success-default);
-  --ds-auro-toast-close-button-icon-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+  --ds-auro-toast-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+  --ds-auro-toast-icon-color: var(--ds-color-icon-success-default, #{$ds-color-icon-success-default});
+  --ds-auro-toast-close-button-icon-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
 }
diff --git a/src/tokens.scss b/src/tokens.scss
@@ -1,3 +1,5 @@
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
 :host {
   --ds-auro-toast-background-color: var(--ds-color-brand-gray-400, #{$ds-color-brand-gray-400});
   --ds-auro-toast-border-color: var(--ds-color-border-divider-default, #{$ds-color-border-divider-default});