fix: sync color tokens with design (#1929)

- add in -icon- tokens (matching -text- equivalents)
- annotate files where they can be used
- update snapshots

Author: booc0mtaco

.storybook/data/tokens.json

@@ -198,6 +198,9 @@
   "eds-theme-color-background-utility-default-low-emphasis": "#F9F3F1",
   "eds-theme-color-background-utility-default-low-emphasis-hover": "#EEE7E4",
   "eds-theme-color-background-utility-default-low-emphasis-active": "#DFD9D6",
+  "eds-theme-color-background-utility-default-medium-emphasis": "#6C6967",
+  "eds-theme-color-background-utility-default-medium-emphasis-hover": "#565352",
+  "eds-theme-color-background-utility-default-medium-emphasis-active": "#3F3E3D",
   "eds-theme-color-background-utility-default-high-emphasis": "#0F2163",
   "eds-theme-color-background-utility-default-high-emphasis-hover": "#0A164C",
   "eds-theme-color-background-utility-default-high-emphasis-active": "#060E30",
@@ -272,9 +275,9 @@
   "eds-theme-color-border-utility-default-low-emphasis": "#CFC9C7",
   "eds-theme-color-border-utility-default-low-emphasis-hover": "#BEB8B6",
   "eds-theme-color-border-utility-default-low-emphasis-active": "#A09C9A",
-  "eds-theme-color-border-utility-default-medium-emphasis": "#868281",
-  "eds-theme-color-border-utility-default-medium-emphasis-hover": "#6C6967",
-  "eds-theme-color-border-utility-default-medium-emphasis-active": "#565352",
+  "eds-theme-color-border-utility-default-medium-emphasis": "#6C6967",
+  "eds-theme-color-border-utility-default-medium-emphasis-hover": "#565352",
+  "eds-theme-color-border-utility-default-medium-emphasis-active": "#3F3E3D",
   "eds-theme-color-border-utility-default-high-emphasis": "#0F2163",
   "eds-theme-color-border-utility-default-high-emphasis-hover": "#0A164C",
   "eds-theme-color-border-utility-default-high-emphasis-active": "#060E30",
@@ -471,10 +474,38 @@
   "eds-theme-color-icon-link-default-hover": "#5751D2",
   "eds-theme-color-icon-brand-primary": "#8984E8",
   "eds-theme-color-icon-brand-primary-hover": "#6B65E2",
+  "eds-theme-color-icon-utility-default-primary": "#0F2163",
+  "eds-theme-color-icon-utility-default-primary-hover": "#0A164C",
+  "eds-theme-color-icon-utility-default-primary-active": "#060E30",
+  "eds-theme-color-icon-utility-default-secondary": "#6C6967",
+  "eds-theme-color-icon-utility-default-secondary-hover": "#565352",
+  "eds-theme-color-icon-utility-default-secondary-active": "#3F3E3D",
+  "eds-theme-color-icon-utility-interactive-primary": "#0F2163",
+  "eds-theme-color-icon-utility-interactive-primary-hover": "#0A164C",
+  "eds-theme-color-icon-utility-interactive-primary-active": "#060E30",
+  "eds-theme-color-icon-utility-interactive-secondary": "#3165D2",
+  "eds-theme-color-icon-utility-interactive-secondary-hover": "#254EAC",
+  "eds-theme-color-icon-utility-interactive-secondary-active": "#1B3889",
+  "eds-theme-color-icon-utility-interactive-visited": "#8A50A7",
+  "eds-theme-color-icon-utility-critical": "#A51115",
+  "eds-theme-color-icon-utility-critical-hover": "#7D0A16",
+  "eds-theme-color-icon-utility-critical-active": "#660517",
+  "eds-theme-color-icon-utility-favorable": "#367759",
+  "eds-theme-color-icon-utility-favorable-hover": "#225E43",
+  "eds-theme-color-icon-utility-favorable-active": "#13462F",
+  "eds-theme-color-icon-utility-warning": "#876701",
+  "eds-theme-color-icon-utility-warning-hover": "#695001",
+  "eds-theme-color-icon-utility-warning-active": "#4D3A01",
+  "eds-theme-color-icon-utility-informational": "#3165D2",
+  "eds-theme-color-icon-utility-informational-hover": "#254EAC",
+  "eds-theme-color-icon-utility-informational-active": "#1B3889",
+  "eds-theme-color-icon-utility-disabled-primary": "#A09C9A",
+  "eds-theme-color-icon-utility-disabled-secondary": "#CFC9C7",
+  "eds-theme-color-icon-utility-inverse": "#FFFFFF",
+  "eds-theme-color-icon-utility-inverse-disabled": "255 255 255",
+  "eds-theme-color-icon-utility-placeholder": "#6C6967",
   "eds-theme-color-icon-utility-success": "#00A56A",
   "eds-theme-color-icon-utility-success-hover": "#008656",
-  "eds-theme-color-icon-utility-warning": "#E06B00",
-  "eds-theme-color-icon-utility-warning-hover": "#C64600",
   "eds-theme-color-icon-utility-error": "#F1497B",
   "eds-theme-color-icon-utility-error-hover": "#D41E52",
   "eds-theme-color-icon-grade-complete": "#00A56A",

src/components/Accordion/Accordion-v2.module.css

@@ -3,7 +3,10 @@
 /*------------------------------------*\
     # ACCORDION
 \*------------------------------------*/
-
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
+ 
 /**
  * Accordion Panel that expands and collapses.
  * Reveals itself below the associated Accordion Button.
@@ -100,7 +103,7 @@
 }
 
 .accordion-button__leading-icon {
-  color: var(--eds-theme-color-text-utility-default-primary);
+  color: var(--eds-theme-color-icon-utility-default-primary);
 }
 
 .accordion-button__title {

src/components/BannerNotification/BannerNotification.module.css

@@ -3,7 +3,10 @@
 /*------------------------------------*\
     # BANNER NOTIFICATION
 \*------------------------------------*/
-
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
+ 
 /**
  * Message of information, success, caution, or warning to the user.
  */

src/components/Button/Button-v2.module.css

@@ -3,7 +3,10 @@
 /*------------------------------------*\
     # BUTTON
 \*------------------------------------*/
-
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
+ 
 .button {
   position: relative;
   border-radius: calc(var(--eds-border-radius-full) * 1px);

src/components/Card/Card-v2.module.css

@@ -1,6 +1,9 @@
 /*------------------------------------*\
     # CARD
 \*------------------------------------*/
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
 
 /**
  * A card is a block that typically contains a title, image, text, and/or calls to action.

src/components/FieldNote/FieldNote-v2.module.css

@@ -3,7 +3,10 @@
 /*------------------------------------*\
     # FIELD NOTE
 \*------------------------------------*/
-
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
+ 
 /**
  * Fieldnote
  */
@@ -44,6 +47,6 @@
   color: var(--eds-theme-color-text-utility-warning);
 
   & > .field-note__icon {
-    color: var(--eds-theme-color-text-utility-warning);
+    color: var(--eds-theme-color-icon-utility-warning);
   }
 }

src/components/Icon/__snapshots__/Icon.test.ts.snap

@@ -2500,7 +2500,7 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
       >
         <path
           d="M1.72497 18C1.54164 18 1.37497 17.9542 1.22497 17.8625C1.07497 17.7708 0.958306 17.65 0.874973 17.5C0.791639 17.35 0.745806 17.1875 0.737473 17.0125C0.729139 16.8375 0.774973 16.6667 0.874973 16.5L10.125 0.5C10.225 0.333333 10.3541 0.208333 10.5125 0.125C10.6708 0.0416667 10.8333 0 11 0C11.1666 0 11.3291 0.0416667 11.4875 0.125C11.6458 0.208333 11.775 0.333333 11.875 0.5L21.125 16.5C21.225 16.6667 21.2708 16.8375 21.2625 17.0125C21.2541 17.1875 21.2083 17.35 21.125 17.5C21.0416 17.65 20.925 17.7708 20.775 17.8625C20.625 17.9542 20.4583 18 20.275 18H1.72497Z"
-          fill="var(--eds-theme-color-icon-utility-warning-hover)"
+          fill="#C64600"
         />
         <path
           d="M11 15C11.2833 15 11.5208 14.9042 11.7125 14.7125C11.9041 14.5208 12 14.2833 12 14C12 13.7167 11.9041 13.4792 11.7125 13.2875C11.5208 13.0958 11.2833 13 11 13C10.7166 13 10.4791 13.0958 10.2875 13.2875C10.0958 13.4792 9.99997 13.7167 9.99997 14C9.99997 14.2833 10.0958 14.5208 10.2875 14.7125C10.4791 14.9042 10.7166 15 11 15Z"

src/components/InlineNotification/InlineNotification-v2.module.css

@@ -3,6 +3,9 @@
 /*------------------------------------*\
     # INLINE NOTIFICATION
 \*------------------------------------*/
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
 
 /**
  * A messaging element that is used inline.

src/components/InputField/InputField-v2.module.css

@@ -1,7 +1,10 @@
 /*------------------------------------*\
     # INPUT FIELD
 \*------------------------------------*/
-
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
+ 
 /**
  * Wraps the Label and the optional/required hint.
  * TODO: match/share the overline styles between Select and InputField
@@ -43,7 +46,7 @@
   align-items: center;
   justify-content: center;
 
-  color: var(--eds-theme-color-text-utility-default-secondary);
+  color: var(--eds-theme-color-icon-utility-default-secondary);
 }
 
 /**

src/components/Link/Link-v2.module.css

@@ -3,6 +3,9 @@
 /*------------------------------------*\
     # LINK
 \*------------------------------------*/
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
 
 .link {
   color: var(--eds-theme-color-text-utility-default-primary);

src/components/Modal/Modal-v2.module.css

@@ -3,6 +3,9 @@
 /*------------------------------------*\
     # MODAL
 \*------------------------------------*/
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
 
 /**
  * The modal wrapper and overlay which takes up the entire screen.
@@ -144,7 +147,7 @@
 
   z-index: 1;
 
-  color: var(--eds-theme-color-text-utility-default-secondary);
+  color: var(--eds-theme-color-icon-utility-default-secondary);
 }
 
 /**

src/components/PopoverListItem/PopoverListItem-v2.module.css

@@ -1,6 +1,9 @@
 /*------------------------------------*\
     # POPOVER LIST ITEM
 \*------------------------------------*/
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
 
 /**
  * PopoverListItem

src/components/Select/Select-v2.module.css

@@ -3,6 +3,9 @@
 /*------------------------------------*\
     # SELECT
 \*------------------------------------*/
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
 
 /**
  * Select field used to select one option from a list of options.

src/components/TabGroup/TabGroup.module.css

@@ -3,7 +3,10 @@
 /*------------------------------------*\
     #TABGROUP
 \*------------------------------------*/
-
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
+ 
 /**
  * List of of links where each link toggles open associated information
  */

src/components/TextareaField/TextareaField-v2.module.css

@@ -3,6 +3,9 @@
 /*------------------------------------*\
     # TEXTAREA FIELD
 \*------------------------------------*/
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
 
 /**
  * Default input styles 

src/components/Toast/Toast-v2.module.css

@@ -3,6 +3,9 @@
 /*------------------------------------*\
     # TOAST
 \*------------------------------------*/
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
 
 .toast {
   width: 100%;

src/design-tokens/mixins.css

@@ -180,7 +180,8 @@
 
 @define-mixin messagingWarning {
   --messaging-border-color: var(--eds-theme-color-border-utility-warning-subtle);
-  --messaging-icon-color: var(--eds-theme-color-icon-utility-warning);
+  /* TODO-AH: remove hard-coded value to bridge to the new styles eds.color.other.orange.500 */
+  --messaging-icon-color: #E06B00;
 
   background: var(--eds-theme-color-background-utility-warning);
   color: var(--eds-theme-color-text-utility-warning);