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: ( <>