@primer/primitives 8.2.4 → 9.0.0-rc.23ee6c3f

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 (94) hide show
  1. package/dist/css/functional/size/size.css +0 -6
  2. package/dist/css/functional/themes/dark-colorblind.css +276 -276
  3. package/dist/css/functional/themes/dark-dimmed.css +294 -294
  4. package/dist/css/functional/themes/dark-high-contrast.css +308 -308
  5. package/dist/css/functional/themes/dark-tritanopia.css +276 -276
  6. package/dist/css/functional/themes/dark.css +266 -266
  7. package/dist/css/functional/themes/light-colorblind.css +230 -230
  8. package/dist/css/functional/themes/light-high-contrast.css +264 -264
  9. package/dist/css/functional/themes/light-tritanopia.css +230 -230
  10. package/dist/css/functional/themes/light.css +220 -220
  11. package/dist/css/primitives.css +0 -6
  12. package/dist/docs/functional/size/size.json +0 -162
  13. package/dist/docs/functional/themes/dark-colorblind.json +247 -319
  14. package/dist/docs/functional/themes/dark-dimmed.json +275 -347
  15. package/dist/docs/functional/themes/dark-high-contrast.json +285 -347
  16. package/dist/docs/functional/themes/dark-tritanopia.json +245 -317
  17. package/dist/docs/functional/themes/dark.json +235 -307
  18. package/dist/docs/functional/themes/light-colorblind.json +224 -290
  19. package/dist/docs/functional/themes/light-high-contrast.json +272 -338
  20. package/dist/docs/functional/themes/light-tritanopia.json +223 -287
  21. package/dist/docs/functional/themes/light.json +213 -277
  22. package/dist/fallbacks/color-fallbacks.json +11 -1
  23. package/dist/fallbacks/functional/size/size.json +0 -6
  24. package/dist/figma/dimension/dimension.json +0 -64
  25. package/dist/figma/scales/dark-dimmed.json +106 -60
  26. package/dist/figma/scales/dark-high-constrast.json +106 -60
  27. package/dist/figma/scales/dark.json +76 -30
  28. package/dist/figma/scales/light-high-constrast.json +106 -60
  29. package/dist/figma/scales/light.json +73 -27
  30. package/dist/figma/shadows/dark-colorblind.json +12 -12
  31. package/dist/figma/shadows/dark-dimmed.json +15 -15
  32. package/dist/figma/shadows/dark-high-contrast.json +15 -15
  33. package/dist/figma/shadows/dark-tritanopia.json +12 -12
  34. package/dist/figma/shadows/dark.json +12 -12
  35. package/dist/figma/shadows/light-colorblind.json +39 -39
  36. package/dist/figma/shadows/light-high-contrast.json +39 -39
  37. package/dist/figma/shadows/light-tritanopia.json +39 -39
  38. package/dist/figma/shadows/light.json +39 -39
  39. package/dist/figma/themes/dark-colorblind.json +816 -828
  40. package/dist/figma/themes/dark-dimmed.json +785 -797
  41. package/dist/figma/themes/dark-high-contrast.json +870 -879
  42. package/dist/figma/themes/dark-tritanopia.json +822 -834
  43. package/dist/figma/themes/dark.json +719 -731
  44. package/dist/figma/themes/light-colorblind.json +776 -788
  45. package/dist/figma/themes/light-high-contrast.json +778 -792
  46. package/dist/figma/themes/light-tritanopia.json +772 -783
  47. package/dist/figma/themes/light.json +664 -675
  48. package/dist/internalCss/dark-colorblind.css +302 -296
  49. package/dist/internalCss/dark-dimmed.css +320 -314
  50. package/dist/internalCss/dark-high-contrast.css +334 -328
  51. package/dist/internalCss/dark-tritanopia.css +302 -296
  52. package/dist/internalCss/dark.css +292 -286
  53. package/dist/internalCss/light-colorblind.css +254 -248
  54. package/dist/internalCss/light-high-contrast.css +290 -284
  55. package/dist/internalCss/light-tritanopia.css +254 -248
  56. package/dist/internalCss/light.css +244 -238
  57. package/dist/styleLint/functional/size/size.json +0 -162
  58. package/dist/styleLint/functional/themes/dark-colorblind.json +247 -319
  59. package/dist/styleLint/functional/themes/dark-dimmed.json +275 -347
  60. package/dist/styleLint/functional/themes/dark-high-contrast.json +285 -347
  61. package/dist/styleLint/functional/themes/dark-tritanopia.json +245 -317
  62. package/dist/styleLint/functional/themes/dark.json +235 -307
  63. package/dist/styleLint/functional/themes/light-colorblind.json +224 -290
  64. package/dist/styleLint/functional/themes/light-high-contrast.json +272 -338
  65. package/dist/styleLint/functional/themes/light-tritanopia.json +223 -287
  66. package/dist/styleLint/functional/themes/light.json +213 -277
  67. package/package.json +1 -1
  68. package/src/tokens/base/color/dark/dark.dimmed.json5 +0 -142
  69. package/src/tokens/base/color/dark/dark.high-contrast.json5 +0 -92
  70. package/src/tokens/base/color/dark/dark.json5 +131 -104
  71. package/src/tokens/base/color/light/light.high-contrast.json5 +0 -92
  72. package/src/tokens/base/color/light/light.json5 +130 -103
  73. package/src/tokens/fallback/color-fallbacks.json +11 -1
  74. package/src/tokens/functional/color/dark/app-dark.json5 +1 -1
  75. package/src/tokens/functional/color/dark/data-vis-dark.json5 +10 -10
  76. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +126 -10
  77. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +91 -81
  78. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +5 -7
  79. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +5 -6
  80. package/src/tokens/functional/color/dark/patterns-dark.json5 +46 -72
  81. package/src/tokens/functional/color/dark/primitives-dark.json5 +14 -24
  82. package/src/tokens/functional/color/dark/syntax-dark.json5 +12 -12
  83. package/src/tokens/functional/color/light/app-light.json5 +5 -5
  84. package/src/tokens/functional/color/light/data-vis-light.json5 +10 -10
  85. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +51 -126
  86. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +5 -7
  87. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +5 -6
  88. package/src/tokens/functional/color/light/patterns-light.json5 +38 -64
  89. package/src/tokens/functional/color/light/primitives-light.json5 +12 -18
  90. package/src/tokens/functional/color/light/syntax-light.json5 +12 -12
  91. package/src/tokens/functional/shadow/dark.json5 +1 -1
  92. package/src/tokens/functional/shadow/light.json5 +11 -11
  93. package/src/tokens/functional/size/size.json +0 -68
  94. package/dist/deprecated/size.json +0 -8
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.black}',
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.black}',
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.9}',
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.black}',
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.9}',
540
540
  $type: 'color',
541
541
  $extensions: {
542
542
  'org.primer.figma': {
package/src/tokens/functional/color/light/data-vis-light.json5 CHANGED
@@ -2,7 +2,7 @@
2
2
  data: {
3
3
  blue: {
4
4
  color: {
5
- '@': {
5
+ 'emphasis': {
6
6
  $value: '{base.display.color.blue.5}',
7
7
  $type: 'color',
8
8
  $extensions: {
@@ -30,7 +30,7 @@
30
30
  },
31
31
  auburn: {
32
32
  color: {
33
- '@': {
33
+ 'emphasis': {
34
34
  $value: '{base.display.color.auburn.5}',
35
35
  $type: 'color',
36
36
  $extensions: {
@@ -58,7 +58,7 @@
58
58
  },
59
59
  orange: {
60
60
  color: {
61
- '@': {
61
+ 'emphasis': {
62
62
  $value: '{base.display.color.orange.4}',
63
63
  $type: 'color',
64
64
  $extensions: {
@@ -86,7 +86,7 @@
86
86
  },
87
87
  yellow: {
88
88
  color: {
89
- '@': {
89
+ 'emphasis': {
90
90
  $value: '{base.display.color.yellow.4}',
91
91
  $type: 'color',
92
92
  $extensions: {
@@ -114,7 +114,7 @@
114
114
  },
115
115
  green: {
116
116
  color: {
117
- '@': {
117
+ 'emphasis': {
118
118
  $value: '{base.display.color.green.4}',
119
119
  $type: 'color',
120
120
  $extensions: {
@@ -142,7 +142,7 @@
142
142
  },
143
143
  teal: {
144
144
  color: {
145
- '@': {
145
+ 'emphasis': {
146
146
  $value: '{base.display.color.teal.4}',
147
147
  $type: 'color',
148
148
  $extensions: {
@@ -170,7 +170,7 @@
170
170
  },
171
171
  purple: {
172
172
  color: {
173
- '@': {
173
+ 'emphasis': {
174
174
  $value: '{base.display.color.purple.5}',
175
175
  $type: 'color',
176
176
  $extensions: {
@@ -198,7 +198,7 @@
198
198
  },
199
199
  pink: {
200
200
  color: {
201
- '@': {
201
+ 'emphasis': {
202
202
  $value: '{base.display.color.pink.5}',
203
203
  $type: 'color',
204
204
  $extensions: {
@@ -226,7 +226,7 @@
226
226
  },
227
227
  red: {
228
228
  color: {
229
- '@': {
229
+ 'emphasis': {
230
230
  $value: '{base.display.color.red.5}',
231
231
  $type: 'color',
232
232
  $extensions: {
@@ -254,7 +254,7 @@
254
254
  },
255
255
  gray: {
256
256
  color: {
257
- '@': {
257
+ 'emphasis': {
258
258
  $value: '{base.display.color.gray.4}',
259
259
  $type: 'color',
260
260
  $extensions: {
package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 CHANGED
@@ -8,14 +8,13 @@
8
8
  muted: {
9
9
  $value: '{base.color.neutral.9}',
10
10
  $type: 'color',
11
- mix: null,
12
11
  },
13
12
  disabled: {
14
- $value: '{base.color.neutral.5}',
13
+ $value: '{base.color.neutral.8}',
15
14
  $type: 'color',
16
15
  },
17
16
  neutral: {
18
- $value: '{base.color.neutral.7}',
17
+ $value: '{base.color.neutral.9}',
19
18
  $type: 'color',
20
19
  },
21
20
  success: {
@@ -53,27 +52,21 @@
53
52
  },
54
53
  bgColor: {
55
54
  muted: {
56
- $value: '{base.color.neutral.1}',
55
+ $value: '{base.color.neutral.2}',
57
56
  $type: 'color',
58
57
  },
59
58
  inset: {
60
- $value: '{base.color.white}',
59
+ $value: '{base.color.neutral.1}',
61
60
  $type: 'color',
62
61
  },
63
62
  neutral: {
64
- muted: {
65
- $value: '{base.color.neutral.1}',
66
- $type: 'color',
67
- alpha: 1,
68
- },
69
63
  emphasis: {
70
- $value: '{base.color.neutral.6}',
64
+ $value: '{base.color.neutral.9}',
71
65
  $type: 'color',
72
- alpha: 1,
73
66
  },
74
67
  },
75
68
  disabled: {
76
- $value: '{base.color.neutral.2}',
69
+ $value: '{base.color.neutral.3}',
77
70
  $type: 'color',
78
71
  },
79
72
  success: {
@@ -92,26 +85,23 @@
92
85
  },
93
86
  borderColor: {
94
87
  default: {
95
- $value: '{base.color.neutral.8}',
88
+ $value: '{base.color.neutral.9}',
96
89
  $type: 'color',
97
90
  },
98
91
  muted: {
99
- $value: '{base.color.neutral.4}',
92
+ $value: '{borderColor.default}',
100
93
  $type: 'color',
101
94
  alpha: 1,
102
95
  },
96
+ emphasis: {
97
+ $value: '{borderColor.default}',
98
+ $type: 'color',
99
+ },
103
100
  translucent: {
104
101
  $value: '{base.color.neutral.8}',
105
102
  $type: 'color',
106
103
  alpha: 1,
107
104
  },
108
- neutral: {
109
- muted: {
110
- $value: '{base.color.neutral.4}',
111
- $type: 'color',
112
- alpha: 1,
113
- },
114
- },
115
105
  accent: {
116
106
  muted: {
117
107
  $value: '{base.color.blue.3}',
@@ -200,64 +190,40 @@
200
190
  control: {
201
191
  fgColor: {
202
192
  placeholder: {
203
- $value: '{base.color.neutral.6}',
193
+ $value: '{base.color.neutral.9}',
204
194
  $type: 'color',
205
- mix: {
206
- color: '{base.color.neutral.7}',
207
- weight: 0.2,
208
- },
209
195
  },
210
196
  },
211
197
  bgColor: {
212
198
  rest: {
213
- $value: '{base.color.neutral.1}',
199
+ $value: '{base.color.neutral.3}',
214
200
  $type: 'color',
215
201
  },
216
202
  hover: {
217
- $value: '{base.color.neutral.1}',
203
+ $value: '{base.color.neutral.4}',
218
204
  $type: 'color',
219
- mix: {
220
- color: '{base.color.neutral.3}',
221
- weight: 0.2,
222
- },
223
205
  },
224
206
  active: {
225
- $value: '{base.color.neutral.1}',
226
- $type: 'color',
227
- mix: {
228
- color: '{base.color.neutral.3}',
229
- weight: 0.4,
230
- },
231
- },
232
- selected: {
233
- $value: '{base.color.neutral.3}',
234
- $type: 'color',
235
- },
236
- },
237
- borderColor: {
238
- emphasis: {
239
- $value: '{borderColor.default}',
207
+ $value: '{base.color.neutral.5}',
240
208
  $type: 'color',
241
- mix: null,
242
209
  },
243
210
  },
244
211
  transparent: {
245
212
  bgColor: {
246
213
  hover: {
247
- $value: '{base.color.neutral.1}',
214
+ $value: '{base.color.neutral.4}',
248
215
  $type: 'color',
249
- alpha: null,
250
- mix: null,
216
+ alpha: 1,
251
217
  },
252
218
  active: {
253
- $value: '{base.color.neutral.2}',
219
+ $value: '{base.color.neutral.5}',
254
220
  $type: 'color',
255
- alpha: null,
256
- mix: null,
221
+ alpha: 1,
257
222
  },
258
223
  selected: {
259
- $value: '{base.color.neutral.2}',
224
+ $value: '{base.color.neutral.4}',
260
225
  $type: 'color',
226
+ alpha: 1,
261
227
  },
262
228
  },
263
229
  borderColor: {
@@ -265,6 +231,10 @@
265
231
  $value: '{borderColor.default}',
266
232
  $type: 'color',
267
233
  },
234
+ active: {
235
+ $value: '{borderColor.default}',
236
+ $type: 'color',
237
+ },
268
238
  },
269
239
  },
270
240
  danger: {
@@ -296,33 +266,15 @@
296
266
  controlTrack: {
297
267
  bgColor: {
298
268
  rest: {
299
- $value: '{base.color.neutral.3}',
269
+ $value: '{base.color.neutral.4}',
300
270
  $type: 'color',
301
271
  },
302
272
  hover: {
303
- $value: '{base.color.neutral.3}',
273
+ $value: '{base.color.neutral.5}',
304
274
  $type: 'color',
305
- mix: {
306
- color: '{base.color.neutral.5}',
307
- weight: 0.2,
308
- },
309
275
  },
310
276
  active: {
311
- $value: '{base.color.neutral.3}',
312
- $type: 'color',
313
- mix: {
314
- color: '{base.color.neutral.5}',
315
- weight: 0.4,
316
- },
317
- },
318
- disabled: {
319
- $value: '{fgColor.disabled}',
320
- $type: 'color',
321
- },
322
- },
323
- fgColor: {
324
- rest: {
325
- $value: '{fgColor.default}',
277
+ $value: '{base.color.neutral.6}',
326
278
  $type: 'color',
327
279
  },
328
280
  },
@@ -334,22 +286,6 @@
334
286
  },
335
287
  },
336
288
  button: {
337
- default: {
338
- borderColor: {
339
- rest: {
340
- $value: '{borderColor.default}',
341
- $type: 'color',
342
- },
343
- hover: {
344
- $value: '{borderColor.default}',
345
- $type: 'color',
346
- },
347
- active: {
348
- $value: '{borderColor.default}',
349
- $type: 'color',
350
- },
351
- },
352
- },
353
289
  primary: {
354
290
  bgColor: {
355
291
  rest: {
@@ -391,30 +327,22 @@
391
327
  },
392
328
  },
393
329
  },
394
- invisible: {
330
+ inactive: {
395
331
  fgColor: {
396
- hover: {
397
- $value: '{base.color.blue.2}',
398
- $type: 'color',
399
- },
400
- },
401
- iconColor: {
402
- hover: {
403
- $value: '{fgColor.onEmphasis}',
404
- $type: 'color',
332
+ $value: '{base.color.neutral.9}',
333
+ $type: 'color',
334
+ $extensions: {
335
+ 'org.primer.figma': {
336
+ collection: 'mode',
337
+ mode: 'light',
338
+ group: 'component (internal)',
339
+ scopes: ['fgColor'],
340
+ },
405
341
  },
406
342
  },
407
343
  bgColor: {
408
- hover: {
409
- $value: '{base.color.neutral.8}',
410
- $type: 'color',
411
- alpha: 1,
412
- },
413
- active: {
414
- $value: '{base.color.neutral.6}',
415
- $type: 'color',
416
- alpha: 1,
417
- },
344
+ $value: '{control.bgColor.rest}',
345
+ $type: 'color',
418
346
  },
419
347
  },
420
348
  },
@@ -422,18 +350,8 @@
422
350
  default: {
423
351
  bgColor: {
424
352
  rest: {
425
- $value: '{bgColor.neutral.emphasis}',
426
- $type: 'color',
427
- alpha: 0.2,
428
- },
429
- },
430
- },
431
- invisible: {
432
- bgColor: {
433
- rest: {
434
- $value: '{bgColor.neutral.emphasis}',
353
+ $value: '{base.color.neutral.6}',
435
354
  $type: 'color',
436
- alpha: 0.2,
437
355
  },
438
356
  },
439
357
  },
@@ -482,17 +400,24 @@
482
400
  header: {
483
401
  borderColor: {
484
402
  divider: {
485
- $value: '{base.color.neutral.3}',
403
+ $value: '{base.color.neutral.6}',
486
404
  $type: 'color',
487
405
  },
488
406
  },
489
407
  },
490
408
  overlay: {
491
409
  borderColor: {
492
- $value: '{borderColor.muted}',
410
+ $value: '{borderColor.default}',
493
411
  $type: 'color',
494
412
  alpha: null,
495
413
  },
414
+ backdrop: {
415
+ bgColor: {
416
+ $value: '{base.color.neutral.10}',
417
+ $type: 'color',
418
+ alpha: 0.4,
419
+ },
420
+ },
496
421
  },
497
422
  display: {
498
423
  blue: {
package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 CHANGED
@@ -14,7 +14,7 @@
14
14
  $type: 'color',
15
15
  },
16
16
  closed: {
17
- $value: '{base.color.neutral.5}',
17
+ $value: '{fgColor.muted}',
18
18
  $type: 'color',
19
19
  },
20
20
  danger: {
@@ -61,12 +61,11 @@
61
61
  },
62
62
  closed: {
63
63
  muted: {
64
- $value: '{base.color.neutral.3}',
64
+ $value: '{bgColor.neutral.muted}',
65
65
  $type: 'color',
66
- alpha: 0.4,
67
66
  },
68
67
  emphasis: {
69
- $value: '{base.color.neutral.5}',
68
+ $value: '{bgColor.neutral.emphasis}',
70
69
  $type: 'color',
71
70
  },
72
71
  },
@@ -85,12 +84,11 @@
85
84
  },
86
85
  closed: {
87
86
  muted: {
88
- $value: '{base.color.neutral.3}',
87
+ $value: '{borderColor.default}',
89
88
  $type: 'color',
90
- alpha: 0.4,
91
89
  },
92
90
  emphasis: {
93
- $value: '{base.color.neutral.5}',
91
+ $value: '{borderColor.emphasis}',
94
92
  $type: 'color',
95
93
  },
96
94
  },
package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 CHANGED
@@ -18,7 +18,7 @@
18
18
  $type: 'color',
19
19
  },
20
20
  closed: {
21
- $value: '{base.color.neutral.5}',
21
+ $value: '{fgColor.muted}',
22
22
  $type: 'color',
23
23
  },
24
24
  },
@@ -56,11 +56,11 @@
56
56
  },
57
57
  closed: {
58
58
  muted: {
59
- $value: '{base.color.neutral.0}',
59
+ $value: '{bgColor.neutral.muted}',
60
60
  $type: 'color',
61
61
  },
62
62
  emphasis: {
63
- $value: '{base.color.neutral.5}',
63
+ $value: '{bgColor.neutral.emphasis}',
64
64
  $type: 'color',
65
65
  },
66
66
  },
@@ -101,12 +101,11 @@
101
101
  },
102
102
  closed: {
103
103
  muted: {
104
- $value: '{base.color.neutral.3}',
104
+ $value: '{borderColor.default}',
105
105
  $type: 'color',
106
- alpha: 0.4,
107
106
  },
108
107
  emphasis: {
109
- $value: '{base.color.neutral.5}',
108
+ $value: '{borderColor.emphasis}',
110
109
  $type: 'color',
111
110
  },
112
111
  },