@primer/primitives 10.3.3 → 10.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/dist/css/functional/themes/dark-colorblind.css +12 -12
  2. package/dist/css/functional/themes/light-colorblind.css +10 -10
  3. package/dist/docs/functional/themes/dark-colorblind.json +1032 -92
  4. package/dist/docs/functional/themes/dark-dimmed.json +786 -70
  5. package/dist/docs/functional/themes/dark-high-contrast.json +1218 -120
  6. package/dist/docs/functional/themes/dark-tritanopia.json +1042 -88
  7. package/dist/docs/functional/themes/dark.json +763 -73
  8. package/dist/docs/functional/themes/light-colorblind.json +993 -75
  9. package/dist/docs/functional/themes/light-high-contrast.json +1082 -78
  10. package/dist/docs/functional/themes/light-tritanopia.json +1001 -65
  11. package/dist/docs/functional/themes/light.json +749 -53
  12. package/dist/figma/scales/dark-high-constrast.json +4 -4
  13. package/dist/figma/themes/dark-colorblind.json +3137 -2904
  14. package/dist/figma/themes/dark-dimmed.json +2955 -2886
  15. package/dist/figma/themes/dark-high-contrast.json +2695 -2299
  16. package/dist/figma/themes/dark-tritanopia.json +3137 -2887
  17. package/dist/figma/themes/dark.json +3172 -3175
  18. package/dist/figma/themes/light-colorblind.json +3139 -2929
  19. package/dist/figma/themes/light-high-contrast.json +2654 -2346
  20. package/dist/figma/themes/light-tritanopia.json +3120 -2892
  21. package/dist/figma/themes/light.json +3125 -3125
  22. package/dist/internalCss/dark-colorblind.css +12 -12
  23. package/dist/internalCss/light-colorblind.css +10 -10
  24. package/dist/styleLint/functional/themes/dark-colorblind.json +1032 -92
  25. package/dist/styleLint/functional/themes/dark-dimmed.json +786 -70
  26. package/dist/styleLint/functional/themes/dark-high-contrast.json +1219 -121
  27. package/dist/styleLint/functional/themes/dark-tritanopia.json +1042 -88
  28. package/dist/styleLint/functional/themes/dark.json +763 -73
  29. package/dist/styleLint/functional/themes/light-colorblind.json +993 -75
  30. package/dist/styleLint/functional/themes/light-high-contrast.json +1082 -78
  31. package/dist/styleLint/functional/themes/light-tritanopia.json +1001 -65
  32. package/dist/styleLint/functional/themes/light.json +749 -53
  33. package/package.json +1 -1
  34. package/src/tokens/base/color/dark/dark.high-contrast.json5 +0 -9
  35. package/src/tokens/functional/color/{light/primitives-light.json5 → bgColor.json5} +182 -254
  36. package/src/tokens/functional/color/borderColor.json5 +14 -0
  37. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -19
  38. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +0 -114
  39. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +0 -63
  40. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +0 -71
  41. package/src/tokens/functional/color/fgColor.json5 +342 -0
  42. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +0 -84
  43. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +0 -70
  44. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +0 -60
  45. package/src/tokens/functional/color/dark/primitives-dark.json5 +0 -757
@@ -1,757 +0,0 @@
1
- {
2
- fgColor: {
3
- default: {
4
- $value: '{base.color.neutral.12}',
5
- $type: 'color',
6
- $extensions: {
7
- 'org.primer.figma': {
8
- collection: 'mode',
9
-
10
- group: 'semantic',
11
- scopes: ['fgColor'],
12
- codeSyntax: {
13
- web: 'var(--fgColor-default) /* utility class: .color-fg-default */',
14
- },
15
- },
16
- },
17
- },
18
- muted: {
19
- $value: '{base.color.neutral.9}',
20
- $type: 'color',
21
- $extensions: {
22
- 'org.primer.figma': {
23
- collection: 'mode',
24
-
25
- group: 'semantic',
26
- scopes: ['fgColor'],
27
- codeSyntax: {
28
- web: 'var(--fgColor-muted) /* utility class: .color-fg-muted */',
29
- },
30
- },
31
- },
32
- },
33
- onEmphasis: {
34
- $value: '{base.color.neutral.13}',
35
- $type: 'color',
36
- $extensions: {
37
- 'org.primer.figma': {
38
- collection: 'mode',
39
-
40
- group: 'semantic',
41
- scopes: ['fgColor'],
42
- codeSyntax: {
43
- web: 'var(--fgColor-onEmphasis) /* utility class: .color-fg-on-emphasis */',
44
- },
45
- },
46
- },
47
- },
48
- onInverse: {
49
- $value: '{base.color.neutral.0}',
50
- $type: 'color',
51
- $extensions: {
52
- 'org.primer.figma': {
53
- collection: 'mode',
54
-
55
- group: 'semantic',
56
- scopes: ['fgColor'],
57
- },
58
- },
59
- },
60
- white: {
61
- $value: '{base.color.neutral.13}',
62
- $type: 'color',
63
- $extensions: {
64
- 'org.primer.figma': {
65
- collection: 'mode',
66
-
67
- group: 'semantic',
68
- scopes: ['fgColor'],
69
- },
70
- },
71
- },
72
- black: {
73
- $value: '{base.color.neutral.0}',
74
- $type: 'color',
75
- $extensions: {
76
- 'org.primer.figma': {
77
- collection: 'mode',
78
-
79
- group: 'semantic',
80
- scopes: ['fgColor'],
81
- },
82
- },
83
- },
84
- disabled: {
85
- $value: '{base.color.neutral.8}',
86
- $type: 'color',
87
- alpha: 0.6,
88
- $extensions: {
89
- 'org.primer.figma': {
90
- collection: 'mode',
91
-
92
- group: 'semantic',
93
- scopes: ['fgColor'],
94
- },
95
- },
96
- },
97
- link: {
98
- $value: '{fgColor.accent}',
99
- $type: 'color',
100
- $extensions: {
101
- 'org.primer.figma': {
102
- collection: 'mode',
103
-
104
- group: 'semantic',
105
- scopes: ['fgColor'],
106
- codeSyntax: {
107
- web: 'var(--fgColor-link) /* utility class: .color-fg-accent */',
108
- },
109
- },
110
- },
111
- },
112
- neutral: {
113
- $value: '{base.color.neutral.9}',
114
- $type: 'color',
115
- $extensions: {
116
- 'org.primer.figma': {
117
- collection: 'mode',
118
-
119
- group: 'semantic',
120
- scopes: ['fgColor'],
121
- },
122
- },
123
- },
124
- accent: {
125
- $value: '#4493F8',
126
- $type: 'color',
127
- $extensions: {
128
- 'org.primer.figma': {
129
- collection: 'mode',
130
-
131
- group: 'semantic',
132
- scopes: ['fgColor'],
133
- codeSyntax: {
134
- web: 'var(--fgColor-accent) /* utility class: .color-fg-accent */',
135
- },
136
- },
137
- },
138
- },
139
- success: {
140
- $value: '{base.color.green.3}',
141
- $type: 'color',
142
- $extensions: {
143
- 'org.primer.figma': {
144
- collection: 'mode',
145
-
146
- group: 'semantic',
147
- scopes: ['fgColor'],
148
- codeSyntax: {
149
- web: 'var(--fgColor-success) /* utility class: .color-fg-success */',
150
- },
151
- },
152
- },
153
- },
154
- open: {
155
- $value: '{fgColor.success}',
156
- $type: 'color',
157
- $extensions: {
158
- 'org.primer.figma': {
159
- collection: 'mode',
160
-
161
- group: 'semantic',
162
- scopes: ['fgColor'],
163
- codeSyntax: {
164
- web: 'var(--fgColor-open) /* utility class: .color-fg-open */',
165
- },
166
- },
167
- },
168
- },
169
- attention: {
170
- $value: '{base.color.yellow.3}',
171
- $type: 'color',
172
- $extensions: {
173
- 'org.primer.figma': {
174
- collection: 'mode',
175
-
176
- group: 'semantic',
177
- scopes: ['fgColor'],
178
- codeSyntax: {
179
- web: 'var(--fgColor-attention) /* utility class: .color-fg-attention */',
180
- },
181
- },
182
- },
183
- },
184
- severe: {
185
- $value: '{base.color.orange.4}',
186
- $type: 'color',
187
- $extensions: {
188
- 'org.primer.figma': {
189
- collection: 'mode',
190
-
191
- group: 'semantic',
192
- scopes: ['fgColor'],
193
- codeSyntax: {
194
- web: 'var(--fgColor-severe) /* utility class: .color-fg-severe */',
195
- },
196
- },
197
- },
198
- },
199
- danger: {
200
- $value: '{base.color.red.4}',
201
- $type: 'color',
202
- $extensions: {
203
- 'org.primer.figma': {
204
- collection: 'mode',
205
-
206
- group: 'semantic',
207
- scopes: ['fgColor'],
208
- codeSyntax: {
209
- web: 'var(--fgColor-danger) /* utility class: .color-fg-danger */',
210
- },
211
- },
212
- },
213
- },
214
- closed: {
215
- $value: '{fgColor.danger}',
216
- $type: 'color',
217
- $extensions: {
218
- 'org.primer.figma': {
219
- collection: 'mode',
220
-
221
- group: 'semantic',
222
- scopes: ['fgColor'],
223
- codeSyntax: {
224
- web: 'var(--fgColor-closed) /* utility class: .color-fg-closed */',
225
- },
226
- },
227
- },
228
- },
229
- done: {
230
- $value: '{base.color.purple.4}',
231
- $type: 'color',
232
- $extensions: {
233
- 'org.primer.figma': {
234
- collection: 'mode',
235
-
236
- group: 'semantic',
237
- scopes: ['fgColor'],
238
- codeSyntax: {
239
- web: 'var(--fgColor-done) /* utility class: .color-fg-done */',
240
- },
241
- },
242
- },
243
- },
244
- upsell: {
245
- $value: '{fgColor.done}',
246
- $type: 'color',
247
- $extensions: {
248
- 'org.primer.figma': {
249
- collection: 'mode',
250
-
251
- group: 'semantic',
252
- scopes: ['fgColor'],
253
- codeSyntax: {
254
- web: 'var(--fgColor-upsell)',
255
- },
256
- },
257
- },
258
- },
259
- sponsors: {
260
- $value: '{base.color.pink.4}',
261
- $type: 'color',
262
- $extensions: {
263
- 'org.primer.figma': {
264
- collection: 'mode',
265
-
266
- group: 'semantic',
267
- scopes: ['fgColor'],
268
- codeSyntax: {
269
- web: 'var(--fgColor-sponsors) /* utility class: .color-fg-sponsors */',
270
- },
271
- },
272
- },
273
- },
274
- },
275
- bgColor: {
276
- default: {
277
- $value: '{base.color.neutral.1}',
278
- $type: 'color',
279
- $extensions: {
280
- 'org.primer.figma': {
281
- collection: 'mode',
282
-
283
- scopes: ['bgColor', 'borderColor'],
284
- group: 'semantic',
285
- codeSyntax: {
286
- web: 'var(--bgColor-default) /* utility class: .color-bg-default */',
287
- },
288
- },
289
- },
290
- },
291
- muted: {
292
- $value: '{base.color.neutral.2}',
293
- $type: 'color',
294
- $extensions: {
295
- 'org.primer.figma': {
296
- collection: 'mode',
297
-
298
- scopes: ['bgColor', 'borderColor'],
299
- group: 'semantic',
300
- codeSyntax: {
301
- web: 'var(--bgColor-muted) /* utility class: .color-bg-muted */',
302
- },
303
- },
304
- },
305
- },
306
- inset: {
307
- $value: '{base.color.neutral.0}',
308
- $type: 'color',
309
- $extensions: {
310
- 'org.primer.figma': {
311
- collection: 'mode',
312
-
313
- scopes: ['bgColor', 'borderColor'],
314
- group: 'semantic',
315
- codeSyntax: {
316
- web: 'var(--bgColor-inset) /* utility class: .color-bg-inset */',
317
- },
318
- },
319
- },
320
- },
321
- emphasis: {
322
- $value: '{base.color.neutral.7}',
323
- $type: 'color',
324
- $extensions: {
325
- 'org.primer.figma': {
326
- collection: 'mode',
327
-
328
- group: 'semantic',
329
- scopes: ['bgColor'],
330
- codeSyntax: {
331
- web: 'var(--bgColor-emphasis) /* utility class: .color-bg-emphasis */',
332
- },
333
- },
334
- },
335
- },
336
- inverse: {
337
- $value: '{base.color.neutral.13}',
338
- $type: 'color',
339
- $extensions: {
340
- 'org.primer.figma': {
341
- collection: 'mode',
342
-
343
- group: 'semantic',
344
- scopes: ['bgColor'],
345
- },
346
- },
347
- },
348
- white: {
349
- $value: '{base.color.neutral.13}',
350
- $type: 'color',
351
- $extensions: {
352
- 'org.primer.figma': {
353
- collection: 'mode',
354
-
355
- group: 'semantic',
356
- scopes: ['bgColor'],
357
- },
358
- },
359
- },
360
- black: {
361
- $value: '{base.color.neutral.0}',
362
- $type: 'color',
363
- $extensions: {
364
- 'org.primer.figma': {
365
- collection: 'mode',
366
-
367
- group: 'semantic',
368
- scopes: ['bgColor'],
369
- },
370
- },
371
- },
372
- disabled: {
373
- $value: '{base.color.neutral.3}',
374
- $type: 'color',
375
- $extensions: {
376
- 'org.primer.figma': {
377
- collection: 'mode',
378
-
379
- group: 'semantic',
380
- scopes: ['bgColor'],
381
- },
382
- },
383
- },
384
- transparent: {
385
- $value: '{base.color.transparent}',
386
- $type: 'color',
387
- $extensions: {
388
- 'org.primer.figma': {
389
- collection: 'mode',
390
-
391
- group: 'semantic',
392
- scopes: ['bgColor'],
393
- codeSyntax: {
394
- web: 'var(--bgColor-transparent) /* utility class: .color-bg-transparent */',
395
- },
396
- },
397
- },
398
- },
399
- neutral: {
400
- muted: {
401
- $value: '{base.color.neutral.8}',
402
- $type: 'color',
403
- $extensions: {
404
- 'org.primer.figma': {
405
- collection: 'mode',
406
-
407
- group: 'semantic',
408
- scopes: ['bgColor'],
409
- },
410
- },
411
- alpha: 0.2,
412
- },
413
- emphasis: {
414
- $value: '{base.color.neutral.8}',
415
- $type: 'color',
416
- $extensions: {
417
- 'org.primer.figma': {
418
- collection: 'mode',
419
-
420
- group: 'semantic',
421
- scopes: ['bgColor'],
422
- },
423
- },
424
- },
425
- },
426
- accent: {
427
- muted: {
428
- $value: '{base.color.blue.4}',
429
- $type: 'color',
430
- $extensions: {
431
- 'org.primer.figma': {
432
- collection: 'mode',
433
-
434
- group: 'semantic',
435
- scopes: ['bgColor'],
436
- codeSyntax: {
437
- web: 'var(--bgColor-accent-muted) /* utility class: .color-bg-accent */',
438
- },
439
- },
440
- },
441
- alpha: 0.1,
442
- },
443
- emphasis: {
444
- $value: '{base.color.blue.5}',
445
- $type: 'color',
446
- $extensions: {
447
- 'org.primer.figma': {
448
- collection: 'mode',
449
-
450
- group: 'semantic',
451
- scopes: ['bgColor'],
452
- codeSyntax: {
453
- web: 'var(--bgColor-accent-emphasis) /* utility class: .color-bg-accent-emphasis */',
454
- },
455
- },
456
- },
457
- },
458
- },
459
- success: {
460
- muted: {
461
- $value: '{base.color.green.4}',
462
- $type: 'color',
463
- $extensions: {
464
- 'org.primer.figma': {
465
- collection: 'mode',
466
-
467
- group: 'semantic',
468
- scopes: ['bgColor'],
469
- codeSyntax: {
470
- web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
471
- },
472
- },
473
- },
474
- alpha: 0.15,
475
- },
476
- emphasis: {
477
- $value: '{base.color.green.5}',
478
- $type: 'color',
479
- $extensions: {
480
- 'org.primer.figma': {
481
- collection: 'mode',
482
-
483
- group: 'semantic',
484
- scopes: ['bgColor'],
485
- codeSyntax: {
486
- web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
487
- },
488
- },
489
- },
490
- },
491
- },
492
- open: {
493
- muted: {
494
- $value: '{bgColor.success.muted}',
495
- $type: 'color',
496
- $extensions: {
497
- 'org.primer.figma': {
498
- collection: 'mode',
499
-
500
- group: 'semantic',
501
- scopes: ['bgColor'],
502
- codeSyntax: {
503
- web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
504
- },
505
- },
506
- },
507
- alpha: 0.15,
508
- },
509
- emphasis: {
510
- $value: '{bgColor.success.emphasis}',
511
- $type: 'color',
512
- $extensions: {
513
- 'org.primer.figma': {
514
- collection: 'mode',
515
-
516
- group: 'semantic',
517
- scopes: ['bgColor'],
518
- codeSyntax: {
519
- web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
520
- },
521
- },
522
- },
523
- },
524
- },
525
- attention: {
526
- muted: {
527
- $value: '{base.color.yellow.4}',
528
- $type: 'color',
529
- $extensions: {
530
- 'org.primer.figma': {
531
- collection: 'mode',
532
-
533
- group: 'semantic',
534
- scopes: ['bgColor'],
535
- codeSyntax: {
536
- web: 'var(--bgColor-attention-muted) /* utility class: .color-bg-attention */',
537
- },
538
- },
539
- },
540
- alpha: 0.15,
541
- },
542
- emphasis: {
543
- $value: '{base.color.yellow.5}',
544
- $type: 'color',
545
- $extensions: {
546
- 'org.primer.figma': {
547
- collection: 'mode',
548
-
549
- group: 'semantic',
550
- scopes: ['bgColor'],
551
- codeSyntax: {
552
- web: 'var(--bgColor-attention-emphasis) /* utility class: .color-bg-attention-emphasis */',
553
- },
554
- },
555
- },
556
- },
557
- },
558
- severe: {
559
- muted: {
560
- $value: '{base.color.orange.4}',
561
- $type: 'color',
562
- $extensions: {
563
- 'org.primer.figma': {
564
- collection: 'mode',
565
-
566
- group: 'semantic',
567
- scopes: ['bgColor'],
568
- codeSyntax: {
569
- web: 'var(--bgColor-severe-muted) /* utility class: .color-bg-severe */',
570
- },
571
- },
572
- },
573
- alpha: 0.1,
574
- },
575
- emphasis: {
576
- $value: '{base.color.orange.5}',
577
- $type: 'color',
578
- $extensions: {
579
- 'org.primer.figma': {
580
- collection: 'mode',
581
-
582
- group: 'semantic',
583
- scopes: ['bgColor'],
584
- codeSyntax: {
585
- web: 'var(--bgColor-severe-emphasis) /* utility class: .color-bg-severe-emphasis */',
586
- },
587
- },
588
- },
589
- },
590
- },
591
- danger: {
592
- muted: {
593
- $value: '{base.color.red.4}',
594
- $type: 'color',
595
- alpha: 0.1,
596
- $extensions: {
597
- 'org.primer.figma': {
598
- collection: 'mode',
599
-
600
- group: 'semantic',
601
- scopes: ['bgColor'],
602
- codeSyntax: {
603
- web: 'var(--bgColor-danger-muted) /* utility class: .color-bg-danger */',
604
- },
605
- },
606
- },
607
- },
608
- emphasis: {
609
- $value: '{base.color.red.5}',
610
- $type: 'color',
611
- $extensions: {
612
- 'org.primer.figma': {
613
- collection: 'mode',
614
-
615
- group: 'semantic',
616
- scopes: ['bgColor'],
617
- codeSyntax: {
618
- web: 'var(--bgColor-danger-emphasis) /* utility class: .color-bg-danger-emphasis */',
619
- },
620
- },
621
- },
622
- },
623
- },
624
- closed: {
625
- muted: {
626
- $value: '{bgColor.danger.muted}',
627
- $type: 'color',
628
- alpha: 0.1,
629
- $extensions: {
630
- 'org.primer.figma': {
631
- collection: 'mode',
632
-
633
- group: 'semantic',
634
- scopes: ['bgColor'],
635
- codeSyntax: {
636
- web: 'var(--bgColor-closed-muted) /* utility class: .color-bg-closed */',
637
- },
638
- },
639
- },
640
- },
641
- emphasis: {
642
- $value: '{bgColor.danger.emphasis}',
643
- $type: 'color',
644
- $extensions: {
645
- 'org.primer.figma': {
646
- collection: 'mode',
647
-
648
- group: 'semantic',
649
- scopes: ['bgColor'],
650
- codeSyntax: {
651
- web: 'var(--bgColor-closed-emphasis) /* utility class: .color-bg-closed-emphasis */',
652
- },
653
- },
654
- },
655
- },
656
- },
657
- done: {
658
- muted: {
659
- $value: '{base.color.purple.4}',
660
- $type: 'color',
661
- $extensions: {
662
- 'org.primer.figma': {
663
- collection: 'mode',
664
-
665
- group: 'semantic',
666
- scopes: ['bgColor'],
667
- codeSyntax: {
668
- web: 'var(--bgColor-done-muted) /* utility class: .color-bg-done */',
669
- },
670
- },
671
- },
672
- alpha: 0.15,
673
- },
674
- emphasis: {
675
- $value: '{base.color.purple.5}',
676
- $type: 'color',
677
- $extensions: {
678
- 'org.primer.figma': {
679
- collection: 'mode',
680
-
681
- group: 'semantic',
682
- scopes: ['bgColor'],
683
- codeSyntax: {
684
- web: 'var(--bgColor-done-emphasis) /* utility class: .color-bg-done-emphasis */',
685
- },
686
- },
687
- },
688
- },
689
- },
690
- upsell: {
691
- muted: {
692
- $value: '{bgColor.done.muted}',
693
- $type: 'color',
694
- $extensions: {
695
- 'org.primer.figma': {
696
- collection: 'mode',
697
-
698
- group: 'semantic',
699
- scopes: ['bgColor'],
700
- codeSyntax: {
701
- web: 'var(--bgColor-upsell-muted)',
702
- },
703
- },
704
- },
705
- alpha: 0.15,
706
- },
707
- emphasis: {
708
- $value: '{bgColor.done.emphasis}',
709
- $type: 'color',
710
- $extensions: {
711
- 'org.primer.figma': {
712
- collection: 'mode',
713
-
714
- group: 'semantic',
715
- scopes: ['bgColor'],
716
- codeSyntax: {
717
- web: 'var(--bgColor-upsell-emphasis)',
718
- },
719
- },
720
- },
721
- },
722
- },
723
- sponsors: {
724
- muted: {
725
- $value: '{base.color.pink.4}',
726
- $type: 'color',
727
- $extensions: {
728
- 'org.primer.figma': {
729
- collection: 'mode',
730
-
731
- group: 'semantic',
732
- scopes: ['bgColor'],
733
- codeSyntax: {
734
- web: 'var(--bgColor-sponsors-muted) /* utility class: .color-bg-sponsors */',
735
- },
736
- },
737
- },
738
- alpha: 0.1,
739
- },
740
- emphasis: {
741
- $value: '{base.color.pink.5}',
742
- $type: 'color',
743
- $extensions: {
744
- 'org.primer.figma': {
745
- collection: 'mode',
746
-
747
- group: 'semantic',
748
- scopes: ['bgColor'],
749
- codeSyntax: {
750
- web: 'var(--bgColor-sponsors-emphasis) /* utility class: .color-bg-sponsors-emphasis */',
751
- },
752
- },
753
- },
754
- },
755
- },
756
- },
757
- }