@primer/primitives 9.0.0-rc.e0216c44 → 9.0.0

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 (87) hide show
  1. package/dist/css/functional/themes/dark-colorblind.css +262 -258
  2. package/dist/css/functional/themes/dark-dimmed.css +280 -276
  3. package/dist/css/functional/themes/dark-high-contrast.css +432 -428
  4. package/dist/css/functional/themes/dark-tritanopia.css +262 -258
  5. package/dist/css/functional/themes/dark.css +252 -248
  6. package/dist/css/functional/themes/light-colorblind.css +220 -216
  7. package/dist/css/functional/themes/light-high-contrast.css +252 -248
  8. package/dist/css/functional/themes/light-tritanopia.css +220 -216
  9. package/dist/css/functional/themes/light.css +210 -206
  10. package/dist/docs/functional/themes/dark-colorblind.json +325 -353
  11. package/dist/docs/functional/themes/dark-dimmed.json +351 -379
  12. package/dist/docs/functional/themes/dark-high-contrast.json +548 -538
  13. package/dist/docs/functional/themes/dark-tritanopia.json +323 -351
  14. package/dist/docs/functional/themes/dark.json +313 -341
  15. package/dist/docs/functional/themes/light-colorblind.json +305 -327
  16. package/dist/docs/functional/themes/light-high-contrast.json +353 -373
  17. package/dist/docs/functional/themes/light-tritanopia.json +304 -324
  18. package/dist/docs/functional/themes/light.json +294 -314
  19. package/dist/figma/figma.json +3 -3
  20. package/dist/figma/scales/dark-dimmed.json +147 -69
  21. package/dist/figma/scales/dark-high-constrast.json +145 -67
  22. package/dist/figma/scales/dark.json +120 -42
  23. package/dist/figma/scales/light-high-constrast.json +147 -69
  24. package/dist/figma/scales/light.json +118 -40
  25. package/dist/figma/shadows/dark-colorblind.json +179 -179
  26. package/dist/figma/shadows/dark-dimmed.json +179 -179
  27. package/dist/figma/shadows/dark-high-contrast.json +179 -179
  28. package/dist/figma/shadows/dark-tritanopia.json +179 -179
  29. package/dist/figma/shadows/dark.json +179 -179
  30. package/dist/figma/shadows/light-colorblind.json +123 -123
  31. package/dist/figma/shadows/light-high-contrast.json +123 -123
  32. package/dist/figma/shadows/light-tritanopia.json +123 -123
  33. package/dist/figma/shadows/light.json +123 -123
  34. package/dist/figma/themes/dark-colorblind.json +4632 -4613
  35. package/dist/figma/themes/dark-dimmed.json +1929 -1910
  36. package/dist/figma/themes/dark-high-contrast.json +3381 -3354
  37. package/dist/figma/themes/dark-tritanopia.json +4278 -4259
  38. package/dist/figma/themes/dark.json +4636 -4617
  39. package/dist/figma/themes/light-colorblind.json +2212 -2193
  40. package/dist/figma/themes/light-high-contrast.json +1878 -1860
  41. package/dist/figma/themes/light-tritanopia.json +2215 -2195
  42. package/dist/figma/themes/light.json +1873 -1853
  43. package/dist/internalCss/dark-colorblind.css +292 -278
  44. package/dist/internalCss/dark-dimmed.css +310 -296
  45. package/dist/internalCss/dark-high-contrast.css +462 -448
  46. package/dist/internalCss/dark-tritanopia.css +292 -278
  47. package/dist/internalCss/dark.css +282 -268
  48. package/dist/internalCss/light-colorblind.css +250 -236
  49. package/dist/internalCss/light-high-contrast.css +280 -266
  50. package/dist/internalCss/light-tritanopia.css +250 -236
  51. package/dist/internalCss/light.css +240 -226
  52. package/dist/styleLint/functional/themes/dark-colorblind.json +325 -353
  53. package/dist/styleLint/functional/themes/dark-dimmed.json +351 -379
  54. package/dist/styleLint/functional/themes/dark-high-contrast.json +548 -538
  55. package/dist/styleLint/functional/themes/dark-tritanopia.json +323 -351
  56. package/dist/styleLint/functional/themes/dark.json +313 -341
  57. package/dist/styleLint/functional/themes/light-colorblind.json +305 -327
  58. package/dist/styleLint/functional/themes/light-high-contrast.json +353 -373
  59. package/dist/styleLint/functional/themes/light-tritanopia.json +304 -324
  60. package/dist/styleLint/functional/themes/light.json +294 -314
  61. package/package.json +1 -1
  62. package/src/schemas/colorToken.ts +1 -1
  63. package/src/schemas/dimensionToken.ts +1 -0
  64. package/src/schemas/scopes.ts +10 -21
  65. package/src/tokens/base/color/dark/dark.dimmed.json5 +0 -162
  66. package/src/tokens/base/color/dark/dark.high-contrast.json5 +0 -92
  67. package/src/tokens/base/color/dark/dark.json5 +149 -104
  68. package/src/tokens/base/color/light/light.high-contrast.json5 +0 -92
  69. package/src/tokens/base/color/light/light.json5 +148 -103
  70. package/src/tokens/functional/color/dark/app-dark.json5 +5 -5
  71. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +147 -10
  72. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +211 -187
  73. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +5 -7
  74. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +5 -6
  75. package/src/tokens/functional/color/dark/patterns-dark.json5 +87 -96
  76. package/src/tokens/functional/color/dark/primitives-dark.json5 +27 -35
  77. package/src/tokens/functional/color/dark/syntax-dark.json5 +14 -14
  78. package/src/tokens/functional/color/light/app-light.json5 +5 -5
  79. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +103 -119
  80. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +5 -7
  81. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +5 -6
  82. package/src/tokens/functional/color/light/patterns-light.json5 +89 -97
  83. package/src/tokens/functional/color/light/primitives-light.json5 +27 -32
  84. package/src/tokens/functional/color/light/syntax-light.json5 +14 -14
  85. package/src/tokens/functional/shadow/dark.json5 +15 -15
  86. package/src/tokens/functional/shadow/light.json5 +16 -16
  87. package/src/transformers/figmaAttributes.ts +6 -0
package/src/tokens/functional/color/dark/primitives-dark.json5 CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  fgColor: {
3
3
  default: {
4
- $value: '{base.color.neutral.0}',
4
+ $value: '{base.color.neutral.12}',
5
5
  $type: 'color',
6
6
  $extensions: {
7
7
  'org.primer.figma': {
@@ -14,13 +14,9 @@
14
14
  },
15
15
  },
16
16
  },
17
- mix: {
18
- color: '{base.color.neutral.1}',
19
- weight: 0.25,
20
- },
21
17
  },
22
18
  muted: {
23
- $value: '{base.color.neutral.2}',
19
+ $value: '{base.color.neutral.9}',
24
20
  $type: 'color',
25
21
  $extensions: {
26
22
  'org.primer.figma': {
@@ -33,13 +29,9 @@
33
29
  },
34
30
  },
35
31
  },
36
- mix: {
37
- color: '{base.color.neutral.3}',
38
- weight: 0.95,
39
- },
40
32
  },
41
33
  onEmphasis: {
42
- $value: '{base.color.white}',
34
+ $value: '{base.color.neutral.13}',
43
35
  $type: 'color',
44
36
  $extensions: {
45
37
  'org.primer.figma': {
@@ -54,7 +46,7 @@
54
46
  },
55
47
  },
56
48
  onInverse: {
57
- $value: '{base.color.black}',
49
+ $value: '{base.color.neutral.0}',
58
50
  $type: 'color',
59
51
  $extensions: {
60
52
  'org.primer.figma': {
@@ -66,7 +58,7 @@
66
58
  },
67
59
  },
68
60
  white: {
69
- $value: '{base.color.white}',
61
+ $value: '{base.color.neutral.13}',
70
62
  $type: 'color',
71
63
  $extensions: {
72
64
  'org.primer.figma': {
@@ -78,7 +70,7 @@
78
70
  },
79
71
  },
80
72
  black: {
81
- $value: '{base.color.black}',
73
+ $value: '{base.color.neutral.0}',
82
74
  $type: 'color',
83
75
  $extensions: {
84
76
  'org.primer.figma': {
@@ -90,7 +82,7 @@
90
82
  },
91
83
  },
92
84
  disabled: {
93
- $value: '{base.color.neutral.4}',
85
+ $value: '{base.color.neutral.8}',
94
86
  $type: 'color',
95
87
  $extensions: {
96
88
  'org.primer.figma': {
@@ -100,6 +92,7 @@
100
92
  scopes: ['fgColor'],
101
93
  },
102
94
  },
95
+ alpha: 0.6,
103
96
  },
104
97
  link: {
105
98
  $value: '{fgColor.accent}',
@@ -117,7 +110,7 @@
117
110
  },
118
111
  },
119
112
  neutral: {
120
- $value: '{base.color.neutral.2}',
113
+ $value: '{base.color.neutral.9}',
121
114
  $type: 'color',
122
115
  $extensions: {
123
116
  'org.primer.figma': {
@@ -285,7 +278,7 @@
285
278
  },
286
279
  bgColor: {
287
280
  default: {
288
- $value: '{base.color.neutral.9}',
281
+ $value: '{base.color.neutral.1}',
289
282
  $type: 'color',
290
283
  $extensions: {
291
284
  'org.primer.figma': {
@@ -300,7 +293,7 @@
300
293
  },
301
294
  },
302
295
  muted: {
303
- $value: '{base.color.neutral.8}',
296
+ $value: '{base.color.neutral.2}',
304
297
  $type: 'color',
305
298
  $extensions: {
306
299
  'org.primer.figma': {
@@ -315,7 +308,7 @@
315
308
  },
316
309
  },
317
310
  inset: {
318
- $value: '{base.color.black}',
311
+ $value: '{base.color.neutral.0}',
319
312
  $type: 'color',
320
313
  $extensions: {
321
314
  'org.primer.figma': {
@@ -330,7 +323,7 @@
330
323
  },
331
324
  },
332
325
  emphasis: {
333
- $value: '{base.color.neutral.4}',
326
+ $value: '{base.color.neutral.7}',
334
327
  $type: 'color',
335
328
  $extensions: {
336
329
  'org.primer.figma': {
@@ -345,7 +338,7 @@
345
338
  },
346
339
  },
347
340
  inverse: {
348
- $value: '{base.color.white}',
341
+ $value: '{base.color.neutral.13}',
349
342
  $type: 'color',
350
343
  $extensions: {
351
344
  'org.primer.figma': {
@@ -357,7 +350,7 @@
357
350
  },
358
351
  },
359
352
  white: {
360
- $value: '{base.color.white}',
353
+ $value: '{base.color.neutral.13}',
361
354
  $type: 'color',
362
355
  $extensions: {
363
356
  'org.primer.figma': {
@@ -369,7 +362,7 @@
369
362
  },
370
363
  },
371
364
  black: {
372
- $value: '{base.color.black}',
365
+ $value: '{base.color.neutral.0}',
373
366
  $type: 'color',
374
367
  $extensions: {
375
368
  'org.primer.figma': {
@@ -381,7 +374,7 @@
381
374
  },
382
375
  },
383
376
  disabled: {
384
- $value: '{base.color.neutral.7}',
377
+ $value: '{base.color.neutral.3}',
385
378
  $type: 'color',
386
379
  $extensions: {
387
380
  'org.primer.figma': {
@@ -391,7 +384,6 @@
391
384
  scopes: ['bgColor'],
392
385
  },
393
386
  },
394
- alpha: 0.7,
395
387
  },
396
388
  transparent: {
397
389
  $value: '{base.color.transparent}',
@@ -410,7 +402,7 @@
410
402
  },
411
403
  neutral: {
412
404
  muted: {
413
- $value: '{base.color.neutral.4}',
405
+ $value: '{base.color.neutral.8}',
414
406
  $type: 'color',
415
407
  $extensions: {
416
408
  'org.primer.figma': {
@@ -420,10 +412,10 @@
420
412
  scopes: ['bgColor'],
421
413
  },
422
414
  },
423
- alpha: 0.4,
415
+ alpha: 0.2,
424
416
  },
425
417
  emphasis: {
426
- $value: '{base.color.neutral.4}',
418
+ $value: '{base.color.neutral.8}',
427
419
  $type: 'color',
428
420
  $extensions: {
429
421
  'org.primer.figma': {
@@ -768,7 +760,7 @@
768
760
  },
769
761
  borderColor: {
770
762
  default: {
771
- $value: '{base.color.neutral.6}',
763
+ $value: '{base.color.neutral.7}',
772
764
  $type: 'color',
773
765
  $extensions: {
774
766
  'org.primer.figma': {
@@ -799,7 +791,7 @@
799
791
  alpha: 0.7,
800
792
  },
801
793
  emphasis: {
802
- $value: '{base.color.neutral.5}',
794
+ $value: '{base.color.neutral.8}',
803
795
  $type: 'color',
804
796
  $extensions: {
805
797
  'org.primer.figma': {
@@ -811,7 +803,7 @@
811
803
  },
812
804
  },
813
805
  disabled: {
814
- $value: '{bgColor.disabled}',
806
+ $value: '{base.color.neutral.8}',
815
807
  $type: 'color',
816
808
  $extensions: {
817
809
  'org.primer.figma': {
@@ -821,6 +813,7 @@
821
813
  scopes: ['borderColor'],
822
814
  },
823
815
  },
816
+ alpha: 0.1,
824
817
  },
825
818
  transparent: {
826
819
  $value: '{base.color.transparent}',
@@ -835,7 +828,7 @@
835
828
  },
836
829
  },
837
830
  translucent: {
838
- $value: '{base.color.white}',
831
+ $value: '{base.color.neutral.13}',
839
832
  $type: 'color',
840
833
  $extensions: {
841
834
  'org.primer.figma': {
@@ -849,7 +842,7 @@
849
842
  },
850
843
  neutral: {
851
844
  muted: {
852
- $value: '{base.color.neutral.4}',
845
+ $value: '{borderColor.muted}',
853
846
  $type: 'color',
854
847
  $extensions: {
855
848
  'org.primer.figma': {
@@ -859,10 +852,9 @@
859
852
  scopes: ['borderColor'],
860
853
  },
861
854
  },
862
- alpha: 0.4,
863
855
  },
864
856
  emphasis: {
865
- $value: '{base.color.neutral.4}',
857
+ $value: '{borderColor.emphasis}',
866
858
  $type: 'color',
867
859
  $extensions: {
868
860
  'org.primer.figma': {
package/src/tokens/functional/color/dark/syntax-dark.json5 CHANGED
@@ -2,7 +2,7 @@
2
2
  color: {
3
3
  ansi: {
4
4
  black: {
5
- $value: '{base.color.neutral.5}',
5
+ $value: '{base.color.neutral.6}',
6
6
  $type: 'color',
7
7
  $extensions: {
8
8
  'org.primer.figma': {
@@ -13,7 +13,7 @@
13
13
  },
14
14
  },
15
15
  'black-bright': {
16
- $value: '{base.color.neutral.4}',
16
+ $value: '{base.color.neutral.8}',
17
17
  $type: 'color',
18
18
  $extensions: {
19
19
  'org.primer.figma': {
@@ -24,7 +24,7 @@
24
24
  },
25
25
  },
26
26
  white: {
27
- $value: '{base.color.neutral.2}',
27
+ $value: '{base.color.neutral.12}',
28
28
  $type: 'color',
29
29
  $extensions: {
30
30
  'org.primer.figma': {
@@ -35,7 +35,7 @@
35
35
  },
36
36
  },
37
37
  'white-bright': {
38
- $value: '{base.color.white}',
38
+ $value: '{base.color.neutral.13}',
39
39
  $type: 'color',
40
40
  $extensions: {
41
41
  'org.primer.figma': {
@@ -46,7 +46,7 @@
46
46
  },
47
47
  },
48
48
  gray: {
49
- $value: '{base.color.neutral.4}',
49
+ $value: '{base.color.neutral.8}',
50
50
  $type: 'color',
51
51
  $extensions: {
52
52
  'org.primer.figma': {
@@ -192,7 +192,7 @@
192
192
  prettylights: {
193
193
  syntax: {
194
194
  comment: {
195
- $value: '{base.color.neutral.3}',
195
+ $value: '{base.color.neutral.9}',
196
196
  $type: 'color',
197
197
  $extensions: {
198
198
  'org.primer.figma': {
@@ -238,7 +238,7 @@
238
238
  storage: {
239
239
  modifier: {
240
240
  import: {
241
- $value: '{base.color.neutral.1}',
241
+ $value: '{base.color.neutral.12}',
242
242
  $type: 'color',
243
243
  $extensions: {
244
244
  'org.primer.figma': {
@@ -307,7 +307,7 @@
307
307
  },
308
308
  },
309
309
  angle: {
310
- $value: '{base.color.neutral.3}',
310
+ $value: '{base.color.neutral.9}',
311
311
  $type: 'color',
312
312
  $extensions: {
313
313
  'org.primer.figma': {
@@ -321,7 +321,7 @@
321
321
  invalid: {
322
322
  illegal: {
323
323
  text: {
324
- $value: '{base.color.neutral.0}',
324
+ $value: '{base.color.neutral.12}',
325
325
  $type: 'color',
326
326
  $extensions: {
327
327
  'org.primer.figma': {
@@ -347,7 +347,7 @@
347
347
  carriage: {
348
348
  return: {
349
349
  text: {
350
- $value: '{base.color.neutral.0}',
350
+ $value: '{base.color.neutral.12}',
351
351
  $type: 'color',
352
352
  $extensions: {
353
353
  'org.primer.figma': {
@@ -405,7 +405,7 @@
405
405
  },
406
406
  },
407
407
  italic: {
408
- $value: '{base.color.neutral.1}',
408
+ $value: '{base.color.neutral.12}',
409
409
  $type: 'color',
410
410
  $extensions: {
411
411
  'org.primer.figma': {
@@ -416,7 +416,7 @@
416
416
  },
417
417
  },
418
418
  bold: {
419
- $value: '{base.color.neutral.1}',
419
+ $value: '{base.color.neutral.12}',
420
420
  $type: 'color',
421
421
  $extensions: {
422
422
  'org.primer.figma': {
@@ -500,7 +500,7 @@
500
500
  },
501
501
  ignored: {
502
502
  text: {
503
- $value: '{base.color.neutral.1}',
503
+ $value: '{base.color.neutral.12}',
504
504
  $type: 'color',
505
505
  $extensions: {
506
506
  'org.primer.figma': {
@@ -541,7 +541,7 @@
541
541
  sublimelinter: {
542
542
  gutter: {
543
543
  mark: {
544
- $value: '{base.color.neutral.5}',
544
+ $value: '{base.color.neutral.7}',
545
545
  $type: 'color',
546
546
  $extensions: {
547
547
  'org.primer.figma': {
package/src/tokens/functional/color/light/app-light.json5 CHANGED
@@ -369,7 +369,7 @@
369
369
  syntax: {
370
370
  fgColor: {
371
371
  comment: {
372
- $value: '{base.color.neutral.9}',
372
+ $value: '{base.color.neutral.13}',
373
373
  $type: 'color',
374
374
  $extensions: {
375
375
  'org.primer.figma': {
@@ -496,7 +496,7 @@
496
496
  },
497
497
  },
498
498
  bgColor: {
499
- $value: '{base.color.neutral.9}',
499
+ $value: '{base.color.neutral.13}',
500
500
  $type: 'color',
501
501
  $extensions: {
502
502
  'org.primer.figma': {
@@ -509,7 +509,7 @@
509
509
  },
510
510
  borderColor: {
511
511
  divider: {
512
- $value: '{base.color.neutral.6}',
512
+ $value: '{base.color.neutral.10}',
513
513
  $type: 'color',
514
514
  $extensions: {
515
515
  'org.primer.figma': {
@@ -524,7 +524,7 @@
524
524
  },
525
525
  headerSearch: {
526
526
  bgColor: {
527
- $value: '{base.color.neutral.9}',
527
+ $value: '{base.color.neutral.13}',
528
528
  $type: 'color',
529
529
  $extensions: {
530
530
  'org.primer.figma': {
@@ -536,7 +536,7 @@
536
536
  },
537
537
  },
538
538
  borderColor: {
539
- $value: '{base.color.neutral.6}',
539
+ $value: '{base.color.neutral.10}',
540
540
  $type: 'color',
541
541
  $extensions: {
542
542
  'org.primer.figma': {