Skip to content

Commit 82f8bc9

Browse files
booc0mtacobooc0mtaco
committed
fix: sync color tokens with design
1 parent 189b154 commit 82f8bc9

File tree

8 files changed

+329
-33
lines changed

8 files changed

+329
-33
lines changed

‎.storybook/data/tokens.json

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,9 @@
198198
"eds-theme-color-background-utility-default-low-emphasis": "#F9F3F1",
199199
"eds-theme-color-background-utility-default-low-emphasis-hover": "#EEE7E4",
200200
"eds-theme-color-background-utility-default-low-emphasis-active": "#DFD9D6",
201+
"eds-theme-color-background-utility-default-medium-emphasis": "#6C6967",
202+
"eds-theme-color-background-utility-default-medium-emphasis-hover": "#565352",
203+
"eds-theme-color-background-utility-default-medium-emphasis-active": "#3F3E3D",
201204
"eds-theme-color-background-utility-default-high-emphasis": "#0F2163",
202205
"eds-theme-color-background-utility-default-high-emphasis-hover": "#0A164C",
203206
"eds-theme-color-background-utility-default-high-emphasis-active": "#060E30",
@@ -272,9 +275,9 @@
272275
"eds-theme-color-border-utility-default-low-emphasis": "#CFC9C7",
273276
"eds-theme-color-border-utility-default-low-emphasis-hover": "#BEB8B6",
274277
"eds-theme-color-border-utility-default-low-emphasis-active": "#A09C9A",
275-
"eds-theme-color-border-utility-default-medium-emphasis": "#868281",
276-
"eds-theme-color-border-utility-default-medium-emphasis-hover": "#6C6967",
277-
"eds-theme-color-border-utility-default-medium-emphasis-active": "#565352",
278+
"eds-theme-color-border-utility-default-medium-emphasis": "#6C6967",
279+
"eds-theme-color-border-utility-default-medium-emphasis-hover": "#565352",
280+
"eds-theme-color-border-utility-default-medium-emphasis-active": "#3F3E3D",
278281
"eds-theme-color-border-utility-default-high-emphasis": "#0F2163",
279282
"eds-theme-color-border-utility-default-high-emphasis-hover": "#0A164C",
280283
"eds-theme-color-border-utility-default-high-emphasis-active": "#060E30",
@@ -471,10 +474,38 @@
471474
"eds-theme-color-icon-link-default-hover": "#5751D2",
472475
"eds-theme-color-icon-brand-primary": "#8984E8",
473476
"eds-theme-color-icon-brand-primary-hover": "#6B65E2",
477+
"eds-theme-color-icon-utility-default-primary": "#0F2163",
478+
"eds-theme-color-icon-utility-default-primary-hover": "#0A164C",
479+
"eds-theme-color-icon-utility-default-primary-active": "#060E30",
480+
"eds-theme-color-icon-utility-default-secondary": "#6C6967",
481+
"eds-theme-color-icon-utility-default-secondary-hover": "#565352",
482+
"eds-theme-color-icon-utility-default-secondary-active": "#3F3E3D",
483+
"eds-theme-color-icon-utility-interactive-primary": "#0F2163",
484+
"eds-theme-color-icon-utility-interactive-primary-hover": "#0A164C",
485+
"eds-theme-color-icon-utility-interactive-primary-active": "#060E30",
486+
"eds-theme-color-icon-utility-interactive-secondary": "#3165D2",
487+
"eds-theme-color-icon-utility-interactive-secondary-hover": "#254EAC",
488+
"eds-theme-color-icon-utility-interactive-secondary-active": "#1B3889",
489+
"eds-theme-color-icon-utility-interactive-visited": "#8A50A7",
490+
"eds-theme-color-icon-utility-critical": "#A51115",
491+
"eds-theme-color-icon-utility-critical-hover": "#7D0A16",
492+
"eds-theme-color-icon-utility-critical-active": "#660517",
493+
"eds-theme-color-icon-utility-favorable": "#367759",
494+
"eds-theme-color-icon-utility-favorable-hover": "#225E43",
495+
"eds-theme-color-icon-utility-favorable-active": "#13462F",
496+
"eds-theme-color-icon-utility-warning": "#876701",
497+
"eds-theme-color-icon-utility-warning-hover": "#695001",
498+
"eds-theme-color-icon-utility-warning-active": "#4D3A01",
499+
"eds-theme-color-icon-utility-informational": "#3165D2",
500+
"eds-theme-color-icon-utility-informational-hover": "#254EAC",
501+
"eds-theme-color-icon-utility-informational-active": "#1B3889",
502+
"eds-theme-color-icon-utility-disabled-primary": "#A09C9A",
503+
"eds-theme-color-icon-utility-disabled-secondary": "#CFC9C7",
504+
"eds-theme-color-icon-utility-inverse": "#FFFFFF",
505+
"eds-theme-color-icon-utility-inverse-disabled": "255 255 255",
506+
"eds-theme-color-icon-utility-placeholder": "#6C6967",
474507
"eds-theme-color-icon-utility-success": "#00A56A",
475508
"eds-theme-color-icon-utility-success-hover": "#008656",
476-
"eds-theme-color-icon-utility-warning": "#E06B00",
477-
"eds-theme-color-icon-utility-warning-hover": "#C64600",
478509
"eds-theme-color-icon-utility-error": "#F1497B",
479510
"eds-theme-color-icon-utility-error-hover": "#D41E52",
480511
"eds-theme-color-icon-grade-complete": "#00A56A",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2500,7 +2500,7 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
25002500
>
25012501
<path
25022502
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"
2503-
fill="var(--eds-theme-color-icon-utility-warning-hover)"
2503+
fill="#C64600"
25042504
/>
25052505
<path
25062506
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/design-tokens/mixins.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,8 @@
180180

181181
@define-mixin messagingWarning {
182182
--messaging-border-color: var(--eds-theme-color-border-utility-warning-subtle);
183-
--messaging-icon-color: var(--eds-theme-color-icon-utility-warning);
183+
/* TODO-AH: remove hard-coded value to bridge to the new styles eds.color.other.orange.500 */
184+
--messaging-icon-color: #E06B00;
184185

185186
background: var(--eds-theme-color-background-utility-warning);
186187
color: var(--eds-theme-color-text-utility-warning);

‎src/design-tokens/themes.json

Lines changed: 152 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,17 @@
228228
"value": "{eds.color.neutral.150}"
229229
}
230230
},
231+
"mediumEmphasis": {
232+
"@": {
233+
"value": "{eds.color.neutral.550}"
234+
},
235+
"hover": {
236+
"value": "{eds.color.neutral.650}"
237+
},
238+
"active": {
239+
"value": "{eds.color.neutral.750}"
240+
}
241+
},
231242
"highEmphasis": {
232243
"@": {
233244
"value": "{eds.color.blue.850}"
@@ -550,13 +561,13 @@
550561
},
551562
"mediumEmphasis": {
552563
"@": {
553-
"value": "{eds.color.neutral.450}"
564+
"value": "{eds.color.neutral.550}"
554565
},
555566
"hover": {
556-
"value": "{eds.color.neutral.550}"
567+
"value": "{eds.color.neutral.650}"
557568
},
558569
"active": {
559-
"value": "{eds.color.neutral.650}"
570+
"value": "{eds.color.neutral.750}"
560571
}
561572
},
562573
"highEmphasis": {
@@ -1508,23 +1519,156 @@
15081519
}
15091520
},
15101521
"utility": {
1511-
"success": {
1522+
"default": {
1523+
"primary": {
1524+
"@": {
1525+
"value": "{eds.color.blue.850}",
1526+
"group": "color"
1527+
},
1528+
"hover": {
1529+
"value": "{eds.color.blue.900}",
1530+
"group": "color"
1531+
},
1532+
"active": {
1533+
"value": "{eds.color.blue.950}",
1534+
"group": "color"
1535+
}
1536+
},
1537+
"secondary": {
1538+
"@": {
1539+
"value": "{eds.color.neutral.550}"
1540+
},
1541+
"hover": {
1542+
"value": "{eds.color.neutral.650}",
1543+
"group": "color"
1544+
},
1545+
"active": {
1546+
"value": "{eds.color.neutral.750}",
1547+
"group": "color"
1548+
}
1549+
}
1550+
},
1551+
"interactive": {
1552+
"primary": {
1553+
"@": {
1554+
"value": "{eds.color.blue.850}",
1555+
"group": "color"
1556+
},
1557+
"hover": {
1558+
"value": "{eds.color.blue.900}",
1559+
"group": "color"
1560+
},
1561+
"active": {
1562+
"value": "{eds.color.blue.950}",
1563+
"group": "color"
1564+
}
1565+
},
1566+
"secondary": {
1567+
"@": {
1568+
"value": "{eds.color.blue.550}",
1569+
"group": "color"
1570+
},
1571+
"hover": {
1572+
"value": "{eds.color.blue.650}",
1573+
"group": "color"
1574+
},
1575+
"active": {
1576+
"value": "{eds.color.blue.750}",
1577+
"group": "color"
1578+
}
1579+
},
1580+
"visited": {
1581+
"value": "{eds.color.purple.550}",
1582+
"group": "color"
1583+
}
1584+
},
1585+
"critical": {
15121586
"@": {
1513-
"value": "{eds.color.other.mint.500}",
1587+
"value": "{eds.color.red.650}",
15141588
"group": "color"
15151589
},
15161590
"hover": {
1517-
"value": "{eds.color.other.mint.600}",
1591+
"value": "{eds.color.red.750}",
1592+
"group": "color"
1593+
},
1594+
"active": {
1595+
"value": "{eds.color.red.800}",
1596+
"group": "color"
1597+
}
1598+
},
1599+
"favorable": {
1600+
"@": {
1601+
"value": "{eds.color.green.550}",
1602+
"group": "color"
1603+
},
1604+
"hover": {
1605+
"value": "{eds.color.green.650}",
1606+
"group": "color"
1607+
},
1608+
"active": {
1609+
"value": "{eds.color.green.750}",
15181610
"group": "color"
15191611
}
15201612
},
15211613
"warning": {
15221614
"@": {
1523-
"value": "{eds.color.other.orange.500}",
1615+
"value": "{eds.color.yellow.550}",
15241616
"group": "color"
15251617
},
15261618
"hover": {
1527-
"value": "{eds.color.other.orange.600}",
1619+
"value": "{eds.color.yellow.650}",
1620+
"group": "color"
1621+
},
1622+
"active": {
1623+
"value": "{eds.color.yellow.750}",
1624+
"group": "color"
1625+
}
1626+
},
1627+
"informational": {
1628+
"@": {
1629+
"value": "{eds.color.blue.550}",
1630+
"group": "color"
1631+
},
1632+
"hover": {
1633+
"value": "{eds.color.blue.650}",
1634+
"group": "color"
1635+
},
1636+
"active": {
1637+
"value": "{eds.color.blue.750}",
1638+
"group": "color"
1639+
}
1640+
},
1641+
"disabled": {
1642+
"primary": {
1643+
"value": "{eds.color.neutral.350}",
1644+
"group": "color"
1645+
},
1646+
"secondary": {
1647+
"value": "{eds.color.neutral.200}",
1648+
"group": "color"
1649+
}
1650+
},
1651+
"inverse": {
1652+
"@": {
1653+
"value": "{eds.color.neutral.white}",
1654+
"group": "color"
1655+
},
1656+
"disabled": {
1657+
"value": "{eds.color.white}",
1658+
"group": "color",
1659+
"comment": "Use with rgb()"
1660+
}
1661+
},
1662+
"placeholder": {
1663+
"value": "{eds.color.neutral.550}"
1664+
},
1665+
"success": {
1666+
"@": {
1667+
"value": "{eds.color.other.mint.500}",
1668+
"group": "color"
1669+
},
1670+
"hover": {
1671+
"value": "{eds.color.other.mint.600}",
15281672
"group": "color"
15291673
}
15301674
},

‎src/icons/spritemap.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -728,13 +728,14 @@ const icons = {
728728
</>
729729
),
730730
},
731+
// TODO-AH: remove hard-coded value to bridge to the new styles for utility-warning-hover eds.color.other.orange.600
731732
'status-warning': {
732733
viewBox: '0 0 24 24',
733734
content: (
734735
<>
735736
<path
736737
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"
737-
fill="var(--eds-theme-color-icon-utility-warning-hover)"
738+
fill="#C64600"
738739
/>
739740
<path
740741
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/tokens-dist/css/variables.css

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -472,10 +472,38 @@
472472
--eds-theme-color-icon-grade-complete: var(--eds-color-other-mint-500); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
473473
--eds-theme-color-icon-utility-error-hover: var(--eds-color-other-ruby-600);
474474
--eds-theme-color-icon-utility-error: var(--eds-color-other-ruby-500);
475-
--eds-theme-color-icon-utility-warning-hover: var(--eds-color-other-orange-600);
476-
--eds-theme-color-icon-utility-warning: var(--eds-color-other-orange-500);
477475
--eds-theme-color-icon-utility-success-hover: var(--eds-color-other-mint-600);
478476
--eds-theme-color-icon-utility-success: var(--eds-color-other-mint-500);
477+
--eds-theme-color-icon-utility-placeholder: var(--eds-color-neutral-550);
478+
--eds-theme-color-icon-utility-inverse-disabled: var(--eds-color-white); /* Use with rgb() */
479+
--eds-theme-color-icon-utility-inverse: var(--eds-color-neutral-white);
480+
--eds-theme-color-icon-utility-disabled-secondary: var(--eds-color-neutral-200);
481+
--eds-theme-color-icon-utility-disabled-primary: var(--eds-color-neutral-350);
482+
--eds-theme-color-icon-utility-informational-active: var(--eds-color-blue-750);
483+
--eds-theme-color-icon-utility-informational-hover: var(--eds-color-blue-650);
484+
--eds-theme-color-icon-utility-informational: var(--eds-color-blue-550);
485+
--eds-theme-color-icon-utility-warning-active: var(--eds-color-yellow-750);
486+
--eds-theme-color-icon-utility-warning-hover: var(--eds-color-yellow-650);
487+
--eds-theme-color-icon-utility-warning: var(--eds-color-yellow-550);
488+
--eds-theme-color-icon-utility-favorable-active: var(--eds-color-green-750);
489+
--eds-theme-color-icon-utility-favorable-hover: var(--eds-color-green-650);
490+
--eds-theme-color-icon-utility-favorable: var(--eds-color-green-550);
491+
--eds-theme-color-icon-utility-critical-active: var(--eds-color-red-800);
492+
--eds-theme-color-icon-utility-critical-hover: var(--eds-color-red-750);
493+
--eds-theme-color-icon-utility-critical: var(--eds-color-red-650);
494+
--eds-theme-color-icon-utility-interactive-visited: var(--eds-color-purple-550);
495+
--eds-theme-color-icon-utility-interactive-secondary-active: var(--eds-color-blue-750);
496+
--eds-theme-color-icon-utility-interactive-secondary-hover: var(--eds-color-blue-650);
497+
--eds-theme-color-icon-utility-interactive-secondary: var(--eds-color-blue-550);
498+
--eds-theme-color-icon-utility-interactive-primary-active: var(--eds-color-blue-950);
499+
--eds-theme-color-icon-utility-interactive-primary-hover: var(--eds-color-blue-900);
500+
--eds-theme-color-icon-utility-interactive-primary: var(--eds-color-blue-850);
501+
--eds-theme-color-icon-utility-default-secondary-active: var(--eds-color-neutral-750);
502+
--eds-theme-color-icon-utility-default-secondary-hover: var(--eds-color-neutral-650);
503+
--eds-theme-color-icon-utility-default-secondary: var(--eds-color-neutral-550);
504+
--eds-theme-color-icon-utility-default-primary-active: var(--eds-color-blue-950);
505+
--eds-theme-color-icon-utility-default-primary-hover: var(--eds-color-blue-900);
506+
--eds-theme-color-icon-utility-default-primary: var(--eds-color-blue-850);
479507
--eds-theme-color-icon-brand-primary-hover: var(--eds-color-brand-grape-600);
480508
--eds-theme-color-icon-brand-primary: var(--eds-color-brand-grape-500);
481509
--eds-theme-color-icon-link-default-hover: var(--eds-color-brand-grape-700);
@@ -665,9 +693,9 @@
665693
--eds-theme-color-border-utility-default-high-emphasis-active: var(--eds-color-blue-950);
666694
--eds-theme-color-border-utility-default-high-emphasis-hover: var(--eds-color-blue-900);
667695
--eds-theme-color-border-utility-default-high-emphasis: var(--eds-color-blue-850);
668-
--eds-theme-color-border-utility-default-medium-emphasis-active: var(--eds-color-neutral-650);
669-
--eds-theme-color-border-utility-default-medium-emphasis-hover: var(--eds-color-neutral-550);
670-
--eds-theme-color-border-utility-default-medium-emphasis: var(--eds-color-neutral-450);
696+
--eds-theme-color-border-utility-default-medium-emphasis-active: var(--eds-color-neutral-750);
697+
--eds-theme-color-border-utility-default-medium-emphasis-hover: var(--eds-color-neutral-650);
698+
--eds-theme-color-border-utility-default-medium-emphasis: var(--eds-color-neutral-550);
671699
--eds-theme-color-border-utility-default-low-emphasis-active: var(--eds-color-neutral-350);
672700
--eds-theme-color-border-utility-default-low-emphasis-hover: var(--eds-color-neutral-250);
673701
--eds-theme-color-border-utility-default-low-emphasis: var(--eds-color-neutral-200);
@@ -732,6 +760,9 @@
732760
--eds-theme-color-background-utility-default-high-emphasis-active: var(--eds-color-blue-950);
733761
--eds-theme-color-background-utility-default-high-emphasis-hover: var(--eds-color-blue-900);
734762
--eds-theme-color-background-utility-default-high-emphasis: var(--eds-color-blue-850);
763+
--eds-theme-color-background-utility-default-medium-emphasis-active: var(--eds-color-neutral-750);
764+
--eds-theme-color-background-utility-default-medium-emphasis-hover: var(--eds-color-neutral-650);
765+
--eds-theme-color-background-utility-default-medium-emphasis: var(--eds-color-neutral-550);
735766
--eds-theme-color-background-utility-default-low-emphasis-active: var(--eds-color-neutral-150);
736767
--eds-theme-color-background-utility-default-low-emphasis-hover: var(--eds-color-neutral-100);
737768
--eds-theme-color-background-utility-default-low-emphasis: var(--eds-color-neutral-050);

0 commit comments

Comments
 (0)