@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/light/overrides/light.high-contrast.json5 CHANGED
@@ -6,16 +6,15 @@
6
6
  {
7
7
  fgColor: {
8
8
  muted: {
9
- $value: '{base.color.neutral.9}',
9
+ $value: '{base.color.neutral.10}',
10
10
  $type: 'color',
11
- mix: null,
12
11
  },
13
12
  disabled: {
14
- $value: '{base.color.neutral.5}',
13
+ $value: '{base.color.neutral.9}',
15
14
  $type: 'color',
16
15
  },
17
16
  neutral: {
18
- $value: '{base.color.neutral.7}',
17
+ $value: '{base.color.neutral.11}',
19
18
  $type: 'color',
20
19
  },
21
20
  success: {
@@ -53,27 +52,26 @@
53
52
  },
54
53
  bgColor: {
55
54
  muted: {
56
- $value: '{base.color.neutral.1}',
55
+ $value: '{base.color.neutral.3}',
57
56
  $type: 'color',
58
57
  },
59
58
  inset: {
60
- $value: '{base.color.white}',
59
+ $value: '{base.color.neutral.2}',
61
60
  $type: 'color',
62
61
  },
63
62
  neutral: {
64
- muted: {
65
- $value: '{base.color.neutral.1}',
63
+ emphasis: {
64
+ $value: '{base.color.neutral.10}',
66
65
  $type: 'color',
67
- alpha: 1,
68
66
  },
69
- emphasis: {
70
- $value: '{base.color.neutral.6}',
67
+ muted: {
68
+ $value: '{base.color.neutral.4}',
71
69
  $type: 'color',
72
70
  alpha: 1,
73
71
  },
74
72
  },
75
73
  disabled: {
76
- $value: '{base.color.neutral.2}',
74
+ $value: '{base.color.neutral.4}',
77
75
  $type: 'color',
78
76
  },
79
77
  success: {
@@ -92,26 +90,28 @@
92
90
  },
93
91
  borderColor: {
94
92
  default: {
95
- $value: '{base.color.neutral.8}',
93
+ $value: '{base.color.neutral.10}',
96
94
  $type: 'color',
97
95
  },
98
96
  muted: {
99
- $value: '{base.color.neutral.4}',
97
+ $value: '{borderColor.default}',
100
98
  $type: 'color',
101
99
  alpha: 1,
102
100
  },
101
+ emphasis: {
102
+ $value: '{borderColor.default}',
103
+ $type: 'color',
104
+ },
105
+ disabled: {
106
+ $value: '{base.color.neutral.9}',
107
+ $type: 'color',
108
+ alpha: 0.12,
109
+ },
103
110
  translucent: {
104
- $value: '{base.color.neutral.8}',
111
+ $value: '{base.color.neutral.9}',
105
112
  $type: 'color',
106
113
  alpha: 1,
107
114
  },
108
- neutral: {
109
- muted: {
110
- $value: '{base.color.neutral.4}',
111
- $type: 'color',
112
- alpha: 1,
113
- },
114
- },
115
115
  accent: {
116
116
  muted: {
117
117
  $value: '{base.color.blue.3}',
@@ -176,11 +176,25 @@
176
176
  alpha: 1,
177
177
  },
178
178
  },
179
+ upsell: {
180
+ muted: {
181
+ $value: '{borderColor.done.muted}',
182
+ $type: 'color',
183
+ alpha: 1,
184
+ },
185
+ },
186
+ closed: {
187
+ muted: {
188
+ $value: '{borderColor.danger.muted}',
189
+ $type: 'color',
190
+ alpha: 1,
191
+ },
192
+ },
179
193
  },
180
194
  // patterns
181
195
  avatar: {
182
196
  borderColor: {
183
- $value: '{base.color.black}',
197
+ $value: '{base.color.neutral.13}',
184
198
  $type: 'color',
185
199
  alpha: 0.9,
186
200
  },
@@ -196,68 +210,59 @@
196
210
  $value: '{borderColor.default}',
197
211
  $type: 'color',
198
212
  },
213
+ bgColor: {
214
+ muted: {
215
+ $value: '{bgColor.neutral.muted}',
216
+ $type: 'color',
217
+ $extensions: {
218
+ 'org.primer.figma': {
219
+ collection: 'mode',
220
+ mode: 'light',
221
+ group: 'component',
222
+ scopes: ['bgColor'],
223
+ },
224
+ },
225
+ alpha: 1,
226
+ },
227
+ },
199
228
  },
200
229
  control: {
201
230
  fgColor: {
202
231
  placeholder: {
203
- $value: '{base.color.neutral.6}',
232
+ $value: '{base.color.neutral.10}',
204
233
  $type: 'color',
205
- mix: {
206
- color: '{base.color.neutral.7}',
207
- weight: 0.2,
208
- },
209
234
  },
210
235
  },
211
236
  bgColor: {
212
237
  rest: {
213
- $value: '{base.color.neutral.1}',
238
+ $value: '{base.color.neutral.4}',
214
239
  $type: 'color',
215
240
  },
216
241
  hover: {
217
- $value: '{base.color.neutral.1}',
242
+ $value: '{base.color.neutral.5}',
218
243
  $type: 'color',
219
- mix: {
220
- color: '{base.color.neutral.3}',
221
- weight: 0.2,
222
- },
223
244
  },
224
245
  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}',
246
+ $value: '{base.color.neutral.6}',
240
247
  $type: 'color',
241
- mix: null,
242
248
  },
243
249
  },
244
250
  transparent: {
245
251
  bgColor: {
246
252
  hover: {
247
- $value: '{base.color.neutral.1}',
253
+ $value: '{base.color.neutral.5}',
248
254
  $type: 'color',
249
- alpha: null,
250
- mix: null,
255
+ alpha: 1,
251
256
  },
252
257
  active: {
253
- $value: '{base.color.neutral.2}',
258
+ $value: '{base.color.neutral.6}',
254
259
  $type: 'color',
255
- alpha: null,
256
- mix: null,
260
+ alpha: 1,
257
261
  },
258
262
  selected: {
259
- $value: '{base.color.neutral.2}',
263
+ $value: '{base.color.neutral.5}',
260
264
  $type: 'color',
265
+ alpha: 1,
261
266
  },
262
267
  },
263
268
  borderColor: {
@@ -265,6 +270,10 @@
265
270
  $value: '{borderColor.default}',
266
271
  $type: 'color',
267
272
  },
273
+ active: {
274
+ $value: '{borderColor.default}',
275
+ $type: 'color',
276
+ },
268
277
  },
269
278
  },
270
279
  danger: {
@@ -296,33 +305,15 @@
296
305
  controlTrack: {
297
306
  bgColor: {
298
307
  rest: {
299
- $value: '{base.color.neutral.3}',
308
+ $value: '{base.color.neutral.5}',
300
309
  $type: 'color',
301
310
  },
302
311
  hover: {
303
- $value: '{base.color.neutral.3}',
312
+ $value: '{base.color.neutral.6}',
304
313
  $type: 'color',
305
- mix: {
306
- color: '{base.color.neutral.5}',
307
- weight: 0.2,
308
- },
309
314
  },
310
315
  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}',
316
+ $value: '{base.color.neutral.7}',
326
317
  $type: 'color',
327
318
  },
328
319
  },
@@ -334,22 +325,6 @@
334
325
  },
335
326
  },
336
327
  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
328
  primary: {
354
329
  bgColor: {
355
330
  rest: {
@@ -391,43 +366,45 @@
391
366
  },
392
367
  },
393
368
  },
394
- invisible: {
395
- iconColor: {
396
- hover: {
397
- $value: '{fgColor.onEmphasis}',
398
- $type: 'color',
369
+ inactive: {
370
+ fgColor: {
371
+ $value: '{base.color.neutral.10}',
372
+ $type: 'color',
373
+ $extensions: {
374
+ 'org.primer.figma': {
375
+ collection: 'mode',
376
+ mode: 'light',
377
+ group: 'component (internal)',
378
+ scopes: ['fgColor'],
379
+ },
399
380
  },
400
381
  },
401
382
  bgColor: {
383
+ $value: '{control.bgColor.rest}',
384
+ $type: 'color',
385
+ },
386
+ },
387
+ invisible: {
388
+ fgColor: {
402
389
  hover: {
403
- $value: '{base.color.neutral.8}',
390
+ $value: '{base.color.neutral.11}',
404
391
  $type: 'color',
405
- alpha: 1,
406
392
  },
407
- active: {
408
- $value: '{base.color.neutral.6}',
393
+ },
394
+ iconColor: {
395
+ hover: {
396
+ $value: '{base.color.neutral.11}',
409
397
  $type: 'color',
410
- alpha: 1,
411
398
  },
412
- },
413
- },
399
+ }
400
+ }
414
401
  },
415
402
  buttonCounter: {
416
403
  default: {
417
404
  bgColor: {
418
405
  rest: {
419
- $value: '{bgColor.neutral.emphasis}',
420
- $type: 'color',
421
- alpha: 0.2,
422
- },
423
- },
424
- },
425
- invisible: {
426
- bgColor: {
427
- rest: {
428
- $value: '{bgColor.neutral.emphasis}',
406
+ $value: '{base.color.neutral.7}',
429
407
  $type: 'color',
430
- alpha: 0.2,
431
408
  },
432
409
  },
433
410
  },
@@ -476,17 +453,24 @@
476
453
  header: {
477
454
  borderColor: {
478
455
  divider: {
479
- $value: '{base.color.neutral.3}',
456
+ $value: '{base.color.neutral.7}',
480
457
  $type: 'color',
481
458
  },
482
459
  },
483
460
  },
484
461
  overlay: {
485
462
  borderColor: {
486
- $value: '{borderColor.muted}',
463
+ $value: '{borderColor.default}',
487
464
  $type: 'color',
488
465
  alpha: null,
489
466
  },
467
+ backdrop: {
468
+ bgColor: {
469
+ $value: '{base.color.neutral.11}',
470
+ $type: 'color',
471
+ alpha: 0.4,
472
+ },
473
+ },
490
474
  },
491
475
  display: {
492
476
  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
  },