Skip to content

Commit 20b3dda

Browse files
lukasoppermannlukasoppermann
authored
Extract bgColor tokens to a separate file (#1155)
* mode dark and light to bgColor * add light & dark tritanopia overrides * dark & light protanopia * add dark & light HC * fix
1 parent 3218978 commit 20b3dda

8 files changed

+175
-787
lines changed

‎src/tokens/functional/color/light/primitives-light.json5 renamed to ‎src/tokens/functional/color/bgColor.json5

Lines changed: 175 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@
1212
web: 'var(--bgColor-default) /* utility class: .color-bg-default */',
1313
},
1414
},
15+
'org.primer.overrides': {
16+
dark: '{base.color.neutral.1}',
17+
"dark-high-contrast": "{base.color.neutral.0}",
18+
},
1519
},
1620
},
1721
muted: {
@@ -26,6 +30,11 @@
2630
web: 'var(--bgColor-muted) /* utility class: .color-bg-muted */',
2731
},
2832
},
33+
'org.primer.overrides': {
34+
dark: '{base.color.neutral.2}',
35+
"light-high-contrast": "{base.color.neutral.3}",
36+
"dark-high-contrast": "{base.color.neutral.2}",
37+
},
2938
},
3039
},
3140
inset: {
@@ -40,6 +49,10 @@
4049
web: 'var(--bgColor-inset) /* utility class: .color-bg-inset */',
4150
},
4251
},
52+
'org.primer.overrides': {
53+
dark: '{base.color.neutral.0}',
54+
"light-high-contrast": "{base.color.neutral.2}",
55+
},
4356
},
4457
},
4558
emphasis: {
@@ -54,6 +67,9 @@
5467
web: 'var(--bgColor-emphasis) /* utility class: .color-bg-emphasis */',
5568
},
5669
},
70+
'org.primer.overrides': {
71+
dark: '{base.color.neutral.7}',
72+
},
5773
},
5874
},
5975
inverse: {
@@ -65,6 +81,9 @@
6581
group: 'semantic',
6682
scopes: ['bgColor'],
6783
},
84+
'org.primer.overrides': {
85+
dark: '{base.color.neutral.13}',
86+
},
6887
},
6988
},
7089
white: {
@@ -76,6 +95,9 @@
7695
group: 'semantic',
7796
scopes: ['bgColor'],
7897
},
98+
'org.primer.overrides': {
99+
dark: '{base.color.neutral.13}',
100+
},
79101
},
80102
},
81103
black: {
@@ -87,6 +109,9 @@
87109
group: 'semantic',
88110
scopes: ['bgColor'],
89111
},
112+
'org.primer.overrides': {
113+
dark: '{base.color.neutral.0}',
114+
},
90115
},
91116
},
92117
disabled: {
@@ -98,6 +123,11 @@
98123
group: 'semantic',
99124
scopes: ['bgColor'],
100125
},
126+
'org.primer.overrides': {
127+
dark: '{base.color.neutral.3}',
128+
"light-high-contrast": "{base.color.neutral.4}",
129+
"dark-high-contrast": "{base.color.neutral.4}",
130+
},
101131
},
102132
},
103133
transparent: {
@@ -124,8 +154,19 @@
124154
group: 'semantic',
125155
scopes: ['bgColor'],
126156
},
157+
'org.primer.overrides': {
158+
light: {
159+
$value: '{base.color.neutral.8}',
160+
alpha: 0.12,
161+
},
162+
dark: {
163+
$value: '{base.color.neutral.8}',
164+
alpha: 0.2,
165+
},
166+
"light-high-contrast": "{base.color.neutral.4}",
167+
"dark-high-contrast": "{base.color.neutral.3}",
168+
},
127169
},
128-
alpha: 0.12,
129170
},
130171
emphasis: {
131172
$value: '{base.color.neutral.9}',
@@ -136,6 +177,11 @@
136177
group: 'semantic',
137178
scopes: ['bgColor'],
138179
},
180+
'org.primer.overrides': {
181+
dark: '{base.color.neutral.8}',
182+
"light-high-contrast": "{base.color.neutral.10}",
183+
"dark-high-contrast": "{base.color.neutral.7}",
184+
},
139185
},
140186
},
141187
},
@@ -152,6 +198,12 @@
152198
web: 'var(--bgColor-accent-muted) /* utility class: .color-bg-accent */',
153199
},
154200
},
201+
'org.primer.overrides': {
202+
dark: {
203+
$value: '{base.color.blue.4}',
204+
alpha: 0.1,
205+
},
206+
},
155207
},
156208
},
157209
emphasis: {
@@ -166,6 +218,10 @@
166218
web: 'var(--bgColor-accent-emphasis) /* utility class: .color-bg-accent-emphasis */',
167219
},
168220
},
221+
'org.primer.overrides': {
222+
dark: '{base.color.blue.5}',
223+
"dark-high-contrast": "{base.color.blue.9}",
224+
},
169225
},
170226
},
171227
},
@@ -182,6 +238,23 @@
182238
web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
183239
},
184240
},
241+
'org.primer.overrides': {
242+
dark: {
243+
$value: '{base.color.green.4}',
244+
alpha: 0.15,
245+
},
246+
'light-tritanopia': '{base.color.blue.0}',
247+
'dark-tritanopia': {
248+
$value: '{base.color.blue.4}',
249+
alpha: 0.15,
250+
},
251+
'light-protanopia-deuteranopia': '{base.color.blue.0}',
252+
'dark-protanopia-deuteranopia': {
253+
$value: '{base.color.blue.4}',
254+
alpha: 0.2,
255+
},
256+
257+
},
185258
},
186259
},
187260
emphasis: {
@@ -196,6 +269,15 @@
196269
web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
197270
},
198271
},
272+
'org.primer.overrides': {
273+
dark: '{base.color.green.5}',
274+
'light-tritanopia': '{base.color.blue.5}',
275+
'dark-tritanopia': '{base.color.blue.5}',
276+
'light-protanopia-deuteranopia': '{base.color.blue.5}',
277+
'dark-protanopia-deuteranopia': '{base.color.blue.5}',
278+
"light-high-contrast": "{base.color.green.5}",
279+
"dark-high-contrast": "{base.color.green.9}",
280+
},
199281
},
200282
},
201283
},
@@ -212,6 +294,13 @@
212294
web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
213295
},
214296
},
297+
'org.primer.overrides': {
298+
'light-tritanopia': '{base.color.red.0}',
299+
'dark-tritanopia': {
300+
$value: '{base.color.red.4}',
301+
alpha: 0.1,
302+
},
303+
},
215304
},
216305
},
217306
emphasis: {
@@ -226,6 +315,10 @@
226315
web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
227316
},
228317
},
318+
'org.primer.overrides': {
319+
'light-tritanopia': '{base.color.red.5}',
320+
'dark-tritanopia': '{base.color.red.5}',
321+
},
229322
},
230323
},
231324
},
@@ -242,6 +335,12 @@
242335
web: 'var(--bgColor-attention-muted) /* utility class: .color-bg-attention */',
243336
},
244337
},
338+
'org.primer.overrides': {
339+
dark: {
340+
$value: '{base.color.yellow.4}',
341+
alpha: 0.15,
342+
},
343+
},
245344
},
246345
},
247346
emphasis: {
@@ -256,6 +355,9 @@
256355
web: 'var(--bgColor-attention-emphasis) /* utility class: .color-bg-attention-emphasis */',
257356
},
258357
},
358+
'org.primer.overrides': {
359+
"dark-high-contrast": "{base.color.yellow.9}",
360+
},
259361
},
260362
},
261363
},
@@ -272,6 +374,17 @@
272374
web: 'var(--bgColor-severe-muted) /* utility class: .color-bg-severe */',
273375
},
274376
},
377+
'org.primer.overrides': {
378+
dark: {
379+
$value: '{base.color.orange.4}',
380+
alpha: 0.1,
381+
},
382+
'light-tritanopia': '{base.color.red.0}',
383+
'dark-tritanopia': {
384+
$value: '{base.color.red.4}',
385+
alpha: 0.1,
386+
},
387+
},
275388
},
276389
},
277390
emphasis: {
@@ -286,6 +399,11 @@
286399
web: 'var(--bgColor-severe-emphasis) /* utility class: .color-bg-severe-emphasis */',
287400
},
288401
},
402+
'org.primer.overrides': {
403+
'light-tritanopia': '{base.color.red.5}',
404+
'dark-tritanopia': '{base.color.red.5}',
405+
"dark-high-contrast": "{base.color.orange.9}",
406+
},
289407
},
290408
},
291409
},
@@ -302,6 +420,17 @@
302420
web: 'var(--bgColor-danger-muted) /* utility class: .color-bg-danger */',
303421
},
304422
},
423+
'org.primer.overrides': {
424+
dark: {
425+
$value: '{base.color.red.4}',
426+
alpha: 0.1,
427+
},
428+
'light-protanopia-deuteranopia': '{base.color.orange.0}',
429+
'dark-protanopia-deuteranopia': {
430+
$value: '{base.color.orange.4}',
431+
alpha: 0.1,
432+
},
433+
},
305434
},
306435
},
307436
emphasis: {
@@ -316,6 +445,11 @@
316445
web: 'var(--bgColor-danger-emphasis) /* utility class: .color-bg-danger-emphasis */',
317446
},
318447
},
448+
'org.primer.overrides': {
449+
'light-protanopia-deuteranopia': '{base.color.orange.5}',
450+
"dark-protanopia-deuteranopia": "{base.color.orange.5}",
451+
"dark-high-contrast": "{base.color.red.9}",
452+
},
319453
},
320454
},
321455
},
@@ -332,6 +466,18 @@
332466
web: 'var(--bgColor-closed-muted) /* utility class: .color-bg-closed */',
333467
},
334468
},
469+
'org.primer.overrides': {
470+
'light-tritanopia': '{bgColor.neutral.muted}',
471+
'dark-tritanopia': {
472+
$value: '{bgColor.neutral.muted}',
473+
alpha: 0.1,
474+
},
475+
'light-protanopia-deuteranopia': '{bgColor.neutral.muted}',
476+
'dark-protanopia-deuteranopia': {
477+
$value: '{bgColor.neutral.muted}',
478+
alpha: 0.1,
479+
},
480+
},
335481
},
336482
},
337483
emphasis: {
@@ -346,6 +492,12 @@
346492
web: 'var(--bgColor-closed-emphasis) /* utility class: .color-bg-closed-emphasis */',
347493
},
348494
},
495+
'org.primer.overrides': {
496+
'light-tritanopia': '{bgColor.neutral.emphasis}',
497+
'dark-tritanopia': '{bgColor.neutral.emphasis}',
498+
'light-protanopia-deuteranopia': '{bgColor.neutral.emphasis}',
499+
'dark-protanopia-deuteranopia': '{bgColor.neutral.emphasis}',
500+
},
349501
},
350502
},
351503
},
@@ -362,6 +514,12 @@
362514
web: 'var(--bgColor-done-muted) /* utility class: .color-bg-done */',
363515
},
364516
},
517+
'org.primer.overrides': {
518+
dark: {
519+
$value: '{base.color.purple.4}',
520+
alpha: 0.15,
521+
},
522+
},
365523
},
366524
},
367525
emphasis: {
@@ -376,6 +534,9 @@
376534
web: 'var(--bgColor-done-emphasis) /* utility class: .color-bg-done-emphasis */',
377535
},
378536
},
537+
'org.primer.overrides': {
538+
"dark-high-contrast": "{base.color.purple.9}",
539+
},
379540
},
380541
},
381542
},
@@ -422,6 +583,16 @@
422583
web: 'var(--bgColor-sponsors-muted) /* utility class: .color-bg-sponsors */',
423584
},
424585
},
586+
'org.primer.overrides': {
587+
dark: {
588+
$value: '{base.color.pink.4}',
589+
alpha: 0.1,
590+
},
591+
'dark-tritanopia': {
592+
$value: '#db61a2',
593+
alpha: 0.1,
594+
},
595+
},
425596
},
426597
},
427598
emphasis: {
@@ -436,6 +607,9 @@
436607
web: 'var(--bgColor-sponsors-emphasis) /* utility class: .color-bg-sponsors-emphasis */',
437608
},
438609
},
610+
'org.primer.overrides': {
611+
"dark-high-contrast": "{base.color.pink.9}",
612+
},
439613
},
440614
},
441615
},

0 commit comments

Comments
 (0)