Skip to content

Commit 6570bbf

Browse files
sneharao3lukasoppermannCopilot
authored
Fix color contrast failures in default and colorblind/tritanopia themes (#1405)
* Adjust color and shadow token tuning Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Tune color scale tokens Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Set default muted/neutral to neutral.9 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Set dark fgColor.onEmphasis to white for emphasis contrast * Darken bgColor.neutral.emphasis so white text passes contrast in light themes * Fix control-borderColor-emphasis contrast in default themes * Set danger/primary button text to white for contrast in dark themes * Update button.json5 to use fgColor instead of base.color Use fgColor.white on line 247 --------- Co-authored-by: Lukas Oppermann <lukasoppermann@github.com> Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 44c80e0 commit 6570bbf

13 files changed

Lines changed: 191 additions & 142 deletions

File tree

‎docs/storybook/stories/Color/Base/Scales.stories.tsx‎

Lines changed: 12 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -22,54 +22,31 @@ const Color = ({color: colorName, length = 12, border}: {color: string; length?:
2222
export const AllScales = () => {
2323
return (
2424
<div className="ColorScale--grid">
25-
<Red />
26-
<Auburn />
27-
<Coral />
28-
<Orange />
29-
<Brown />
30-
<Yellow />
31-
<Lemon />
32-
<Olive />
33-
<Lime />
34-
<Green />
35-
<Pine />
36-
<Teal />
37-
<Cyan />
38-
<Blue />
3925
<Neutral />
40-
<Gray />
41-
<Indigo />
26+
<Blue />
27+
<Green />
28+
<Yellow />
29+
<Orange />
30+
<Red />
4231
<Purple />
43-
<Plum />
4432
<Pink />
33+
<Coral />
4534
<Black />
4635
<White />
4736
</div>
4837
)
4938
}
5039
AllScales.tags = ['includeSnapshot']
5140

52-
// sorted by hue (0° → 360°)
53-
export const Red = () => <Color color="red" />
54-
export const Auburn = () => <Color color="auburn" />
55-
export const Coral = () => <Color color="coral" />
56-
export const Orange = () => <Color color="orange" />
57-
export const Brown = () => <Color color="brown" />
58-
export const Yellow = () => <Color color="yellow" />
59-
export const Lemon = () => <Color color="lemon" />
60-
export const Olive = () => <Color color="olive" />
61-
export const Lime = () => <Color color="lime" />
62-
export const Green = () => <Color color="green" />
63-
export const Pine = () => <Color color="pine" />
64-
export const Teal = () => <Color color="teal" />
65-
export const Cyan = () => <Color color="cyan" />
66-
export const Blue = () => <Color color="blue" />
6741
export const Neutral = () => <Color color="neutral" />
68-
export const Gray = () => <Color color="gray" />
69-
export const Indigo = () => <Color color="indigo" />
42+
export const Blue = () => <Color color="blue" />
43+
export const Green = () => <Color color="green" />
44+
export const Yellow = () => <Color color="yellow" />
45+
export const Orange = () => <Color color="orange" />
46+
export const Red = () => <Color color="red" />
7047
export const Purple = () => <Color color="purple" />
71-
export const Plum = () => <Color color="plum" />
7248
export const Pink = () => <Color color="pink" />
49+
export const Coral = () => <Color color="coral" />
7350

7451
export const Black = () => (
7552
<div>

‎src/tokens/base/color/dark/dark.json5‎

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -110,8 +110,8 @@
110110
'4': {
111111
$value: {
112112
colorSpace: 'hsl',
113-
components: [213, 17.6, 20],
114-
hex: '#2A323C',
113+
components: [217.5, 17.4, 18],
114+
hex: '#262C36',
115115
},
116116
$type: 'color',
117117
$extensions: {
@@ -123,8 +123,8 @@
123123
'5': {
124124
$value: {
125125
colorSpace: 'hsl',
126-
components: [213.8, 11.6, 27.1],
127-
hex: '#3D444D',
126+
components: [216.7, 17.6, 20],
127+
hex: '#2A313C',
128128
},
129129
$type: 'color',
130130
$extensions: {
@@ -136,8 +136,8 @@
136136
'6': {
137137
$value: {
138138
colorSpace: 'hsl',
139-
components: [214, 12, 42.9],
140-
hex: '#606C7B',
139+
components: [214.7, 16.8, 22.2],
140+
hex: '#2F3742',
141141
},
142142
$type: 'color',
143143
$extensions: {
@@ -149,8 +149,8 @@
149149
'7': {
150150
$value: {
151151
colorSpace: 'hsl',
152-
components: [213.8, 12.5, 60],
153-
hex: '#8C97A6',
152+
components: [213.8, 11.6, 27.1],
153+
hex: '#3D444D',
154154
},
155155
$type: 'color',
156156
$extensions: {
@@ -162,8 +162,8 @@
162162
'8': {
163163
$value: {
164164
colorSpace: 'hsl',
165-
components: [213, 13.4, 75.1],
166-
hex: '#B7BFC8',
165+
components: [215.3, 7.8, 42.9],
166+
hex: '#656C76',
167167
},
168168
$type: 'color',
169169
$extensions: {
@@ -175,8 +175,8 @@
175175
'9': {
176176
$value: {
177177
colorSpace: 'hsl',
178-
components: [212, 19.5, 84.9],
179-
hex: '#D1D8E0',
178+
components: [213.8, 7.8, 60],
179+
hex: '#9198A1',
180180
},
181181
$type: 'color',
182182
$extensions: {
@@ -188,8 +188,8 @@
188188
'10': {
189189
$value: {
190190
colorSpace: 'hsl',
191-
components: [210, 66.7, 96.5],
192-
hex: '#F0F6FC',
191+
components: [218.8, 13.4, 75.1],
192+
hex: '#B7BDC8',
193193
},
194194
$type: 'color',
195195
$extensions: {
@@ -199,7 +199,24 @@
199199
},
200200
},
201201
'11': {
202-
$value: '{base.color.white}',
202+
$value: {
203+
colorSpace: 'hsl',
204+
components: [216, 19.5, 84.9],
205+
hex: '#D1D7E0',
206+
},
207+
$type: 'color',
208+
$extensions: {
209+
'org.primer.figma': {
210+
collection: 'base/color/dark',
211+
},
212+
},
213+
},
214+
'12': {
215+
$value: {
216+
colorSpace: 'hsl',
217+
components: [210, 66.7, 96.5],
218+
hex: '#F0F6FC',
219+
},
203220
$type: 'color',
204221
$extensions: {
205222
'org.primer.figma': {

‎src/tokens/base/color/light/light.json5‎

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,19 @@
104104
},
105105
},
106106
'4': {
107+
$value: {
108+
colorSpace: 'hsl',
109+
components: [207.3, 21.6, 90],
110+
hex: '#E0E6EB',
111+
},
112+
$type: 'color',
113+
$extensions: {
114+
'org.primer.figma': {
115+
collection: 'base/color/light',
116+
},
117+
},
118+
},
119+
'5': {
107120
$value: {
108121
colorSpace: 'hsl',
109122
components: [212.3, 21.3, 88],
@@ -116,7 +129,20 @@
116129
},
117130
},
118131
},
119-
'5': {
132+
'6': {
133+
$value: {
134+
colorSpace: 'hsl',
135+
components: [208, 19.5, 84.9],
136+
hex: '#D1D9E0',
137+
},
138+
$type: 'color',
139+
$extensions: {
140+
'org.primer.figma': {
141+
collection: 'base/color/light',
142+
},
143+
},
144+
},
145+
'7': {
120146
$value: {
121147
colorSpace: 'hsl',
122148
components: [210, 19.6, 82],
@@ -129,7 +155,7 @@
129155
},
130156
},
131157
},
132-
'6': {
158+
'8': {
133159
$value: {
134160
colorSpace: 'hsl',
135161
components: [213.9, 10, 55.1],
@@ -142,7 +168,7 @@
142168
},
143169
},
144170
},
145-
'7': {
171+
'9': {
146172
$value: {
147173
colorSpace: 'hsl',
148174
components: [211.4, 10.6, 39],
@@ -155,7 +181,7 @@
155181
},
156182
},
157183
},
158-
'8': {
184+
'10': {
159185
$value: {
160186
colorSpace: 'hsl',
161187
components: [212, 9.8, 30],
@@ -168,7 +194,7 @@
168194
},
169195
},
170196
},
171-
'9': {
197+
'11': {
172198
$value: {
173199
colorSpace: 'hsl',
174200
components: [212.3, 10.2, 24.9],
@@ -181,7 +207,7 @@
181207
},
182208
},
183209
},
184-
'10': {
210+
'12': {
185211
$value: {
186212
colorSpace: 'hsl',
187213
components: [213.3, 10.8, 16.3],
@@ -194,7 +220,7 @@
194220
},
195221
},
196222
},
197-
'11': {
223+
'13': {
198224
$value: '{base.color.black}',
199225
$type: 'color',
200226
$extensions: {

‎src/tokens/component/button.json5‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1625,7 +1625,7 @@
16251625
},
16261626
'org.primer.overrides': {
16271627
dark: {
1628-
'$value': '{base.color.neutral.11}'
1628+
'$value': '{base.color.white}'
16291629
},
16301630
'dark-dimmed-high-contrast': {
16311631
'$value': {
@@ -1657,7 +1657,7 @@
16571657
},
16581658
'org.primer.overrides': {
16591659
dark: {
1660-
'$value': '{base.color.neutral.11}'
1660+
'$value': '{base.color.white}'
16611661
},
16621662
'dark-dimmed-high-contrast': {
16631663
'$value': {
@@ -1724,6 +1724,9 @@
17241724
},
17251725
'org.primer.overrides': {
17261726
dark: {
1727+
'$value': '{base.color.white}'
1728+
},
1729+
'dark-dimmed': {
17271730
'$value': '{base.color.neutral.11}'
17281731
},
17291732
'dark-dimmed-high-contrast': {
@@ -1898,19 +1901,19 @@
18981901
'$value': '{button.primary.borderColor.rest}'
18991902
},
19001903
'dark-high-contrast': {
1901-
'$value': '{base.color.red.2}',
1904+
'$value': '{base.color.red.10}',
19021905
alpha: 1
19031906
},
19041907
'dark-dimmed-high-contrast': {
1905-
'$value': '{base.color.red.1}',
1908+
'$value': '{base.color.red.10}',
19061909
alpha: 1
19071910
},
19081911
'dark-protanopia-deuteranopia-high-contrast': {
1909-
'$value': '{base.color.orange.2}',
1912+
'$value': '{base.color.orange.10}',
19101913
alpha: 1
19111914
},
19121915
'dark-tritanopia-high-contrast': {
1913-
'$value': '{base.color.red.2}',
1916+
'$value': '{base.color.red.10}',
19141917
alpha: 1
19151918
},
19161919
'light-high-contrast': {
@@ -1944,7 +1947,19 @@
19441947
'$value': '{button.danger.borderColor.hover}'
19451948
},
19461949
'dark-high-contrast': {
1947-
'$value': '{base.color.red.2}',
1950+
'$value': '{base.color.red.10}',
1951+
alpha: 1
1952+
},
1953+
'dark-dimmed-high-contrast': {
1954+
'$value': '{base.color.red.10}',
1955+
alpha: 1
1956+
},
1957+
'dark-protanopia-deuteranopia-high-contrast': {
1958+
'$value': '{base.color.orange.10}',
1959+
alpha: 1
1960+
},
1961+
'dark-tritanopia-high-contrast': {
1962+
'$value': '{base.color.red.10}',
19481963
alpha: 1
19491964
}
19501965
}
@@ -2122,7 +2137,7 @@
21222137
},
21232138
'org.primer.overrides': {
21242139
dark: {
2125-
'$value': '{base.color.yellow.2}'
2140+
'$value': '{base.color.yellow.6}'
21262141
}
21272142
}
21282143
}

0 commit comments

Comments
 (0)