diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
index d569a2498..cc9a80870 100644
--- a/.storybook/data/tokens.json
+++ b/.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",
diff --git a/src/components/Accordion/Accordion-v2.module.css b/src/components/Accordion/Accordion-v2.module.css
index 6cc729e4a..f76d8eb49 100644
--- a/src/components/Accordion/Accordion-v2.module.css
+++ b/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 {
diff --git a/src/components/BannerNotification/BannerNotification.module.css b/src/components/BannerNotification/BannerNotification.module.css
index 4b62c1158..75ad3f423 100644
--- a/src/components/BannerNotification/BannerNotification.module.css
+++ b/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.
*/
diff --git a/src/components/Button/Button-v2.module.css b/src/components/Button/Button-v2.module.css
index 739c36d68..20752d106 100644
--- a/src/components/Button/Button-v2.module.css
+++ b/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);
diff --git a/src/components/Card/Card-v2.module.css b/src/components/Card/Card-v2.module.css
index da002512d..6700af3e0 100755
--- a/src/components/Card/Card-v2.module.css
+++ b/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.
diff --git a/src/components/FieldNote/FieldNote-v2.module.css b/src/components/FieldNote/FieldNote-v2.module.css
index fa53f7c22..a1d646fb1 100755
--- a/src/components/FieldNote/FieldNote-v2.module.css
+++ b/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);
}
}
\ No newline at end of file
diff --git a/src/components/Icon/__snapshots__/Icon.test.ts.snap b/src/components/Icon/__snapshots__/Icon.test.ts.snap
index c2420fb14..02ec6a317 100644
--- a/src/components/Icon/__snapshots__/Icon.test.ts.snap
+++ b/src/components/Icon/__snapshots__/Icon.test.ts.snap
@@ -2500,7 +2500,7 @@ exports[` IconGrid story renders snapshot 1`] = `
>
),
},
+ // TODO-AH: remove hard-coded value to bridge to the new styles for utility-warning-hover eds.color.other.orange.600
'status-warning': {
viewBox: '0 0 24 24',
content: (
<>