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

AlaskaAirlines · Mar 14, 2024 · 36d2072 · 36d2072
1 parent ce20bff
commit 36d2072
Showing 1 changed file with 17 additions and 5 deletions.
diff --git a/src/style.scss b/src/style.scss
@@ -12,6 +12,18 @@
 
 @import '../node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement';
 
+$ds-color-icon-error-default: var(--ds-color-alert-error-default, $ds-color-alert-error-default);
+$ds-color-icon-warning-default: var(--ds-color-alert-warning-default, $ds-color-alert-warning-default);
+$ds-color-icon-notification-default: var(--ds-color-alert-notification-default, $ds-color-alert-notification-default);
+$ds-color-icon-success-default: var(--ds-color-alert-success-default, $ds-color-alert-success-default);
+
+:root {
+  --ds-color-icon-error-default: var(--ds-color-alert-error-default, $ds-color-alert-error-default);
+  --ds-color-icon-warning-default: var(--ds-color-alert-warning-default, $ds-color-alert-warning-default);
+  --ds-color-icon-notification-default: var(--ds-color-alert-notification-default, $ds-color-alert-notification-default);
+  --ds-color-icon-success-default: var(--ds-color-alert-success-default, $ds-color-alert-success-default);
+}
+
 // container styles - defines the look of the outer custom component
 :host([type='error']),
 :host([type='warning']),
@@ -28,7 +40,7 @@
   }
 
   svg {
-    color: var(--ds-color-alert-error-default, $ds-color-alert-error-default);
+    color: var(--ds-color-icon-error-default, $ds-color-icon-error-default);
   }
 }
 
@@ -38,7 +50,7 @@
   }
 
   svg {
-    color: var(--ds-color-alert-warning-default, $ds-color-alert-warning-default);
+    color: var(--ds-color-icon-warning-default, $ds-color-icon-warning-default);
   }
 }
 
@@ -48,7 +60,7 @@
   }
 
   svg {
-    color: var(--ds-color-alert-notification-default, $ds-color-alert-notification-default);
+    color: var(--ds-color-icon-notification-default, $ds-color-icon-notification-default);
   }
 }
 
@@ -58,7 +70,7 @@
   }
 
   svg {
-    color: var(--ds-color-alert-success-default, $ds-color-alert-success-default);
+    color: var(--ds-color-icon-success-default, $ds-color-icon-success-default);
   }
 }
 
@@ -72,7 +84,7 @@
   padding-left: var(--ds-size-150, $ds-size-150);
   border-width: 1px;
   border-style: solid;
-  border-color: var(--ds-color-brand-neutral-400, $ds-color-brand-neutral-400);
+  border-color: var(--ds-color-border-primary-inverse, $ds-color-border-primary-inverse); // Is "inverse" the right semantic name?
   border-radius: var(--ds-border-radius, $ds-border-radius);
   border-left-width: var(--ds-size-100, $ds-size-100);
   background-color: var(--ds-color-background-lightest, $ds-color-background-lightest);