Skip to content

Commit 9cf443a

Browse files
lukasoppermannlukasoppermann
authored
Merge edd3f75 into 101f812 
2 parents 101f812 + edd3f75 commit 9cf443a

File tree

5 files changed

+242
-257
lines changed

5 files changed

+242
-257
lines changed

‎.changeset/modern-items-notice.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/primitives': patch
3+
---
4+
5+
Changes open colors to blue for tritanopia and colorblind

‎docs/storybook/stories/Demo/DisplayColorTesting.stories.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,18 @@ const roles = [
8282
export const RoleDemo = () => {
8383
return (
8484
<Box sx={{gap: 3, display: 'flex', flexDirection: 'column'}}>
85+
<Box sx={{gap: 2, display: 'flex'}}>
86+
{roles.map(role => (
87+
<Token
88+
text={role}
89+
sx={{
90+
backgroundColor: `var(--bgColor-${role}-muted)`,
91+
color: `var(--fgColor-${role})`,
92+
borderColor: `var(--borderColor-${role}-muted)`,
93+
}}
94+
/>
95+
))}
96+
</Box>
8597
<Box sx={{gap: 2, display: 'flex'}}>
8698
{roles.map(role => (
8799
<Token

‎src/tokens/functional/color/bgColor.json5

Lines changed: 61 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -276,26 +276,14 @@
276276
$value: '{base.color.green.4}',
277277
alpha: 0.15,
278278
},
279-
'light-tritanopia': '{base.color.blue.0}',
280-
'light-tritanopia-high-contrast': '{base.color.blue.0}',
281-
'dark-tritanopia': {
282-
$value: '{base.color.blue.4}',
283-
alpha: 0.15,
284-
},
285-
'dark-tritanopia-high-contrast': {
286-
$value: '{base.color.blue.4}',
287-
alpha: 0.15,
288-
},
289-
'light-protanopia-deuteranopia': '{base.color.blue.0}',
290-
'light-protanopia-deuteranopia-high-contrast': '{base.color.blue.0}',
291-
'dark-protanopia-deuteranopia': {
292-
$value: '{base.color.blue.4}',
293-
alpha: 0.2,
294-
},
295-
'dark-protanopia-deuteranopia-high-contrast': {
296-
$value: '{base.color.blue.4}',
297-
alpha: 0.2,
298-
},
279+
'light-tritanopia': '{bgColor.accent.muted}',
280+
'light-tritanopia-high-contrast': '{bgColor.accent.muted}',
281+
'dark-tritanopia': '{bgColor.accent.muted}',
282+
'dark-tritanopia-high-contrast': '{bgColor.accent.muted}',
283+
'light-protanopia-deuteranopia': '{bgColor.accent.muted}',
284+
'light-protanopia-deuteranopia-high-contrast': '{bgColor.accent.muted}',
285+
'dark-protanopia-deuteranopia': '{bgColor.accent.muted}',
286+
'dark-protanopia-deuteranopia-high-contrast': '{bgColor.accent.muted}',
299287
},
300288
},
301289
},
@@ -313,14 +301,14 @@
313301
},
314302
'org.primer.overrides': {
315303
dark: '{base.color.green.5}',
316-
'light-tritanopia': '{base.color.blue.5}',
317-
'light-tritanopia-high-contrast': '{base.color.blue.5}',
318-
'dark-tritanopia': '{base.color.blue.5}',
319-
'dark-tritanopia-high-contrast': '{base.color.blue.9}',
320-
'light-protanopia-deuteranopia': '{base.color.blue.5}',
321-
'light-protanopia-deuteranopia-high-contrast': '{base.color.blue.5}',
322-
'dark-protanopia-deuteranopia': '{base.color.blue.5}',
323-
'dark-protanopia-deuteranopia-high-contrast': '{base.color.blue.9}',
304+
'light-tritanopia': '{bgColor.accent.emphasis}',
305+
'light-tritanopia-high-contrast': '{bgColor.accent.emphasis}',
306+
'dark-tritanopia': '{bgColor.accent.emphasis}',
307+
'dark-tritanopia-high-contrast': '{bgColor.accent.emphasis}',
308+
'light-protanopia-deuteranopia': '{bgColor.accent.emphasis}',
309+
'light-protanopia-deuteranopia-high-contrast': '{bgColor.accent.emphasis}',
310+
'dark-protanopia-deuteranopia': '{bgColor.accent.emphasis}',
311+
'dark-protanopia-deuteranopia-high-contrast': '{bgColor.accent.emphasis}',
324312
'light-high-contrast': '{base.color.green.5}',
325313
'dark-high-contrast': '{base.color.green.9}',
326314
'dark-dimmed-high-contrast': '{base.color.green.7}',
@@ -341,28 +329,6 @@
341329
web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
342330
},
343331
},
344-
'org.primer.overrides': {
345-
'light-tritanopia-high-contrast': '{base.color.red.0}',
346-
'light-tritanopia': '{base.color.red.0}',
347-
'dark-tritanopia': {
348-
$value: '{base.color.red.4}',
349-
alpha: 0.1,
350-
},
351-
'dark-tritanopia-high-contrast': {
352-
$value: '{base.color.red.4}',
353-
alpha: 0.1,
354-
},
355-
'light-protanopia-deuteranopia': '{base.color.orange.0}',
356-
'light-protanopia-deuteranopia-high-contrast': '{base.color.orange.0}',
357-
'dark-protanopia-deuteranopia': {
358-
$value: '{base.color.orange.4}',
359-
alpha: 0.1,
360-
},
361-
'dark-protanopia-deuteranopia-high-contrast': {
362-
$value: '{base.color.orange.4}',
363-
alpha: 0.1,
364-
},
365-
},
366332
},
367333
},
368334
emphasis: {
@@ -377,16 +343,6 @@
377343
web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
378344
},
379345
},
380-
'org.primer.overrides': {
381-
'light-tritanopia': '{base.color.red.5}',
382-
'light-tritanopia-high-contrast': '{base.color.red.5}',
383-
'dark-tritanopia': '{base.color.red.5}',
384-
'dark-tritanopia-high-contrast': '{base.color.red.9}',
385-
'light-protanopia-deuteranopia': '{base.color.orange.5}',
386-
'light-protanopia-deuteranopia-high-contrast': '{base.color.orange.5}',
387-
'dark-protanopia-deuteranopia': '{base.color.orange.5}',
388-
'dark-protanopia-deuteranopia-high-contrast': '{base.color.orange.9}',
389-
},
390346
},
391347
},
392348
},
@@ -501,10 +457,10 @@
501457
$value: '{base.color.red.4}',
502458
alpha: 0.1,
503459
},
504-
'light-protanopia-deuteranopia': '{base.color.orange.0}',
505-
'light-protanopia-deuteranopia-high-contrast': '{base.color.orange.0}',
460+
'light-protanopia-deuteranopia': '{base.color.red.0}',
461+
'light-protanopia-deuteranopia-high-contrast': '{base.color.red.0}',
506462
'dark-protanopia-deuteranopia': {
507-
$value: '{base.color.orange.4}',
463+
$value: '{base.color.red.4}',
508464
alpha: 0.1,
509465
},
510466
},
@@ -523,10 +479,10 @@
523479
},
524480
},
525481
'org.primer.overrides': {
526-
'light-protanopia-deuteranopia': '{base.color.orange.5}',
527-
'light-protanopia-deuteranopia-high-contrast': '{base.color.orange.5}',
528-
'dark-protanopia-deuteranopia': '{base.color.orange.5}',
529-
'dark-protanopia-deuteranopia-high-contrast': '{base.color.orange.9}',
482+
'light-protanopia-deuteranopia': '{base.color.red.5}',
483+
'light-protanopia-deuteranopia-high-contrast': '{base.color.red.5}',
484+
'dark-protanopia-deuteranopia': '{base.color.red.5}',
485+
'dark-protanopia-deuteranopia-high-contrast': '{base.color.red.9}',
530486
'dark-high-contrast': '{base.color.red.9}',
531487
'dark-dimmed-high-contrast': '{base.color.red.7}',
532488
'dark-tritanopia-high-contrast': '{base.color.red.9}',
@@ -547,24 +503,7 @@
547503
web: 'var(--bgColor-closed-muted) /* utility class: .color-bg-closed */',
548504
},
549505
},
550-
'org.primer.overrides': {
551-
'light-tritanopia': '{bgColor.neutral.muted}',
552-
'light-tritanopia-high-contrast': '{bgColor.neutral.muted}',
553-
'dark-tritanopia': {
554-
$value: '{bgColor.neutral.muted}',
555-
alpha: 0.1,
556-
},
557-
'light-protanopia-deuteranopia': '{bgColor.neutral.muted}',
558-
'light-protanopia-deuteranopia-high-contrast': '{bgColor.neutral.muted}',
559-
'dark-protanopia-deuteranopia': {
560-
$value: '{bgColor.neutral.muted}',
561-
alpha: 0.1,
562-
},
563-
'dark-protanopia-deuteranopia-high-contrast': {
564-
$value: '{bgColor.neutral.muted}',
565-
alpha: 0.1,
566-
},
567-
},
506+
'org.primer.overrides': {},
568507
},
569508
},
570509
emphasis: {
@@ -579,16 +518,7 @@
579518
web: 'var(--bgColor-closed-emphasis) /* utility class: .color-bg-closed-emphasis */',
580519
},
581520
},
582-
'org.primer.overrides': {
583-
'light-tritanopia': '{bgColor.neutral.emphasis}',
584-
'light-tritanopia-high-contrast': '{bgColor.neutral.emphasis}',
585-
'dark-tritanopia': '{bgColor.neutral.emphasis}',
586-
'dark-tritanopia-high-contrast': '{bgColor.neutral.emphasis}',
587-
'light-protanopia-deuteranopia': '{bgColor.neutral.emphasis}',
588-
'light-protanopia-deuteranopia-high-contrast': '{bgColor.neutral.emphasis}',
589-
'dark-protanopia-deuteranopia': '{bgColor.neutral.emphasis}',
590-
'dark-protanopia-deuteranopia-high-contrast': '{bgColor.neutral.emphasis}',
591-
},
521+
'org.primer.overrides': {},
592522
},
593523
},
594524
},
@@ -610,6 +540,14 @@
610540
$value: '{base.color.purple.4}',
611541
alpha: 0.15,
612542
},
543+
'light-protanopia-deuteranopia': '{bgColor.neutral.muted}',
544+
'light-protanopia-deuteranopia-high-contrast': '{bgColor.neutral.muted}',
545+
'dark-protanopia-deuteranopia': '{bgColor.neutral.muted}',
546+
'dark-protanopia-deuteranopia-high-contrast': '{bgColor.neutral.muted}',
547+
'dark-tritanopia': '{bgColor.neutral.muted}',
548+
'dark-tritanopia-high-contrast': '{bgColor.neutral.muted}',
549+
'light-tritanopia': '{bgColor.neutral.muted}',
550+
'light-tritanopia-high-contrast': '{bgColor.neutral.muted}',
613551
},
614552
},
615553
},
@@ -628,8 +566,14 @@
628566
'org.primer.overrides': {
629567
'dark-high-contrast': '{base.color.purple.9}',
630568
'dark-dimmed-high-contrast': '{base.color.purple.7}',
631-
'dark-tritanopia-high-contrast': '{base.color.purple.9}',
632-
'dark-protanopia-deuteranopia-high-contrast': '{base.color.purple.9}',
569+
'light-protanopia-deuteranopia': '{bgColor.neutral.emphasis}',
570+
'light-protanopia-deuteranopia-high-contrast': '{bgColor.neutral.emphasis}',
571+
'dark-protanopia-deuteranopia': '{bgColor.neutral.emphasis}',
572+
'dark-protanopia-deuteranopia-high-contrast': '{bgColor.neutral.emphasis}',
573+
'dark-tritanopia-high-contrast': '{bgColor.neutral.emphasis}',
574+
'dark-tritanopia': '{bgColor.neutral.emphasis}',
575+
'light-tritanopia-high-contrast': '{bgColor.neutral.emphasis}',
576+
'light-tritanopia': '{bgColor.neutral.emphasis}',
633577
},
634578
},
635579
},
@@ -647,6 +591,16 @@
647591
web: 'var(--bgColor-upsell-muted)',
648592
},
649593
},
594+
'org.primer.overrides': {
595+
'light-protanopia-deuteranopia': '{base.color.purple.0}',
596+
'light-protanopia-deuteranopia-high-contrast': '{base.color.purple.0}',
597+
'dark-protanopia-deuteranopia': '{base.color.purple.9}',
598+
'dark-protanopia-deuteranopia-high-contrast': '{base.color.purple.9}',
599+
'dark-tritanopia-high-contrast': '{base.color.purple.9}',
600+
'dark-tritanopia': '{base.color.purple.9}',
601+
'light-tritanopia': '{base.color.purple.0}',
602+
'light-tritanopia-high-contrast': '{base.color.purple.0}',
603+
},
650604
},
651605
},
652606
emphasis: {
@@ -661,6 +615,16 @@
661615
web: 'var(--bgColor-upsell-emphasis)',
662616
},
663617
},
618+
'org.primer.overrides': {
619+
'light-protanopia-deuteranopia': '{base.color.purple.5}',
620+
'light-protanopia-deuteranopia-high-contrast': '{base.color.purple.5}',
621+
'dark-protanopia-deuteranopia': '{base.color.purple.5}',
622+
'dark-protanopia-deuteranopia-high-contrast': '{base.color.purple.5}',
623+
'dark-tritanopia': '{base.color.purple.5}',
624+
'dark-tritanopia-high-contrast': '{base.color.purple.5}',
625+
'light-tritanopia': '{base.color.purple.5}',
626+
'light-tritanopia-high-contrast': '{base.color.purple.5}',
627+
},
664628
},
665629
},
666630
},

0 commit comments

Comments
 (0)