Skip to content

Commit 4a895a2

Browse files
lukasoppermannlukasoppermann
committed
wip
1 parent cd3187c commit 4a895a2

File tree

4 files changed

+236
-184
lines changed

4 files changed

+236
-184
lines changed

‎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 & 71 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,9 +329,6 @@
341329
web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
342330
},
343331
},
344-
'org.primer.overrides': {
345-
346-
},
347332
},
348333
},
349334
emphasis: {
@@ -358,9 +343,6 @@
358343
web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
359344
},
360345
},
361-
'org.primer.overrides': {
362-
363-
},
364346
},
365347
},
366348
},
@@ -475,10 +457,10 @@
475457
$value: '{base.color.red.4}',
476458
alpha: 0.1,
477459
},
478-
'light-protanopia-deuteranopia': '{base.color.orange.0}',
479-
'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}',
480462
'dark-protanopia-deuteranopia': {
481-
$value: '{base.color.orange.4}',
463+
$value: '{base.color.red.4}',
482464
alpha: 0.1,
483465
},
484466
},
@@ -497,10 +479,10 @@
497479
},
498480
},
499481
'org.primer.overrides': {
500-
'light-protanopia-deuteranopia': '{base.color.orange.5}',
501-
'light-protanopia-deuteranopia-high-contrast': '{base.color.orange.5}',
502-
'dark-protanopia-deuteranopia': '{base.color.orange.5}',
503-
'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}',
504486
'dark-high-contrast': '{base.color.red.9}',
505487
'dark-dimmed-high-contrast': '{base.color.red.7}',
506488
'dark-tritanopia-high-contrast': '{base.color.red.9}',
@@ -521,24 +503,7 @@
521503
web: 'var(--bgColor-closed-muted) /* utility class: .color-bg-closed */',
522504
},
523505
},
524-
'org.primer.overrides': {
525-
'light-tritanopia': '{bgColor.neutral.muted}',
526-
'light-tritanopia-high-contrast': '{bgColor.neutral.muted}',
527-
'dark-tritanopia': {
528-
$value: '{bgColor.neutral.muted}',
529-
alpha: 0.1,
530-
},
531-
'light-protanopia-deuteranopia': '{bgColor.neutral.muted}',
532-
'light-protanopia-deuteranopia-high-contrast': '{bgColor.neutral.muted}',
533-
'dark-protanopia-deuteranopia': {
534-
$value: '{bgColor.neutral.muted}',
535-
alpha: 0.1,
536-
},
537-
'dark-protanopia-deuteranopia-high-contrast': {
538-
$value: '{bgColor.neutral.muted}',
539-
alpha: 0.1,
540-
},
541-
},
506+
'org.primer.overrides': {},
542507
},
543508
},
544509
emphasis: {
@@ -553,16 +518,7 @@
553518
web: 'var(--bgColor-closed-emphasis) /* utility class: .color-bg-closed-emphasis */',
554519
},
555520
},
556-
'org.primer.overrides': {
557-
'light-tritanopia': '{bgColor.neutral.emphasis}',
558-
'light-tritanopia-high-contrast': '{bgColor.neutral.emphasis}',
559-
'dark-tritanopia': '{bgColor.neutral.emphasis}',
560-
'dark-tritanopia-high-contrast': '{bgColor.neutral.emphasis}',
561-
'light-protanopia-deuteranopia': '{bgColor.neutral.emphasis}',
562-
'light-protanopia-deuteranopia-high-contrast': '{bgColor.neutral.emphasis}',
563-
'dark-protanopia-deuteranopia': '{bgColor.neutral.emphasis}',
564-
'dark-protanopia-deuteranopia-high-contrast': '{bgColor.neutral.emphasis}',
565-
},
521+
'org.primer.overrides': {},
566522
},
567523
},
568524
},
@@ -584,6 +540,14 @@
584540
$value: '{base.color.purple.4}',
585541
alpha: 0.15,
586542
},
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}',
587551
},
588552
},
589553
},
@@ -602,8 +566,14 @@
602566
'org.primer.overrides': {
603567
'dark-high-contrast': '{base.color.purple.9}',
604568
'dark-dimmed-high-contrast': '{base.color.purple.7}',
605-
'dark-tritanopia-high-contrast': '{base.color.purple.9}',
606-
'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}',
607577
},
608578
},
609579
},
@@ -621,6 +591,16 @@
621591
web: 'var(--bgColor-upsell-muted)',
622592
},
623593
},
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+
},
624604
},
625605
},
626606
emphasis: {
@@ -635,6 +615,16 @@
635615
web: 'var(--bgColor-upsell-emphasis)',
636616
},
637617
},
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+
},
638628
},
639629
},
640630
},

0 commit comments

Comments
 (0)