@primer/primitives 9.0.0-rc.02c27a21 → 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 (82) hide show
  1. package/dist/css/functional/themes/dark-colorblind.css +256 -256
  2. package/dist/css/functional/themes/dark-dimmed.css +274 -274
  3. package/dist/css/functional/themes/dark-high-contrast.css +288 -288
  4. package/dist/css/functional/themes/dark-tritanopia.css +256 -256
  5. package/dist/css/functional/themes/dark.css +246 -246
  6. package/dist/css/functional/themes/light-colorblind.css +210 -210
  7. package/dist/css/functional/themes/light-high-contrast.css +244 -244
  8. package/dist/css/functional/themes/light-tritanopia.css +210 -210
  9. package/dist/css/functional/themes/light.css +200 -200
  10. package/dist/docs/functional/themes/dark-colorblind.json +217 -289
  11. package/dist/docs/functional/themes/dark-dimmed.json +245 -317
  12. package/dist/docs/functional/themes/dark-high-contrast.json +255 -317
  13. package/dist/docs/functional/themes/dark-tritanopia.json +215 -287
  14. package/dist/docs/functional/themes/dark.json +205 -277
  15. package/dist/docs/functional/themes/light-colorblind.json +194 -260
  16. package/dist/docs/functional/themes/light-high-contrast.json +242 -308
  17. package/dist/docs/functional/themes/light-tritanopia.json +193 -257
  18. package/dist/docs/functional/themes/light.json +183 -247
  19. package/dist/figma/scales/dark-dimmed.json +106 -60
  20. package/dist/figma/scales/dark-high-constrast.json +106 -60
  21. package/dist/figma/scales/dark.json +76 -30
  22. package/dist/figma/scales/light-high-constrast.json +106 -60
  23. package/dist/figma/scales/light.json +73 -27
  24. package/dist/figma/shadows/dark-colorblind.json +12 -12
  25. package/dist/figma/shadows/dark-dimmed.json +15 -15
  26. package/dist/figma/shadows/dark-high-contrast.json +15 -15
  27. package/dist/figma/shadows/dark-tritanopia.json +12 -12
  28. package/dist/figma/shadows/dark.json +12 -12
  29. package/dist/figma/shadows/light-colorblind.json +39 -39
  30. package/dist/figma/shadows/light-high-contrast.json +39 -39
  31. package/dist/figma/shadows/light-tritanopia.json +39 -39
  32. package/dist/figma/shadows/light.json +39 -39
  33. package/dist/figma/themes/dark-colorblind.json +796 -808
  34. package/dist/figma/themes/dark-dimmed.json +765 -777
  35. package/dist/figma/themes/dark-high-contrast.json +850 -859
  36. package/dist/figma/themes/dark-tritanopia.json +802 -814
  37. package/dist/figma/themes/dark.json +699 -711
  38. package/dist/figma/themes/light-colorblind.json +756 -768
  39. package/dist/figma/themes/light-high-contrast.json +758 -772
  40. package/dist/figma/themes/light-tritanopia.json +752 -763
  41. package/dist/figma/themes/light.json +644 -655
  42. package/dist/internalCss/dark-colorblind.css +282 -276
  43. package/dist/internalCss/dark-dimmed.css +300 -294
  44. package/dist/internalCss/dark-high-contrast.css +314 -308
  45. package/dist/internalCss/dark-tritanopia.css +282 -276
  46. package/dist/internalCss/dark.css +272 -266
  47. package/dist/internalCss/light-colorblind.css +234 -228
  48. package/dist/internalCss/light-high-contrast.css +270 -264
  49. package/dist/internalCss/light-tritanopia.css +234 -228
  50. package/dist/internalCss/light.css +224 -218
  51. package/dist/styleLint/functional/themes/dark-colorblind.json +217 -289
  52. package/dist/styleLint/functional/themes/dark-dimmed.json +245 -317
  53. package/dist/styleLint/functional/themes/dark-high-contrast.json +255 -317
  54. package/dist/styleLint/functional/themes/dark-tritanopia.json +215 -287
  55. package/dist/styleLint/functional/themes/dark.json +205 -277
  56. package/dist/styleLint/functional/themes/light-colorblind.json +194 -260
  57. package/dist/styleLint/functional/themes/light-high-contrast.json +242 -308
  58. package/dist/styleLint/functional/themes/light-tritanopia.json +193 -257
  59. package/dist/styleLint/functional/themes/light.json +183 -247
  60. package/package.json +1 -1
  61. package/src/tokens/base/color/dark/dark.dimmed.json5 +0 -142
  62. package/src/tokens/base/color/dark/dark.high-contrast.json5 +0 -92
  63. package/src/tokens/base/color/dark/dark.json5 +131 -104
  64. package/src/tokens/base/color/light/light.high-contrast.json5 +0 -92
  65. package/src/tokens/base/color/light/light.json5 +130 -103
  66. package/src/tokens/functional/color/dark/app-dark.json5 +1 -1
  67. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +126 -10
  68. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +91 -81
  69. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +5 -7
  70. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +5 -6
  71. package/src/tokens/functional/color/dark/patterns-dark.json5 +46 -72
  72. package/src/tokens/functional/color/dark/primitives-dark.json5 +14 -24
  73. package/src/tokens/functional/color/dark/syntax-dark.json5 +12 -12
  74. package/src/tokens/functional/color/light/app-light.json5 +5 -5
  75. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +51 -126
  76. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +5 -7
  77. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +5 -6
  78. package/src/tokens/functional/color/light/patterns-light.json5 +38 -64
  79. package/src/tokens/functional/color/light/primitives-light.json5 +12 -18
  80. package/src/tokens/functional/color/light/syntax-light.json5 +12 -12
  81. package/src/tokens/functional/shadow/dark.json5 +1 -1
  82. package/src/tokens/functional/shadow/light.json5 +11 -11
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/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
  },