@primer/primitives 9.0.0-rc.02c27a21 → 9.0.0-rc.2cba8cbe

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 (83) hide show
  1. package/dist/css/functional/themes/dark-colorblind.css +258 -258
  2. package/dist/css/functional/themes/dark-dimmed.css +276 -276
  3. package/dist/css/functional/themes/dark-high-contrast.css +408 -408
  4. package/dist/css/functional/themes/dark-tritanopia.css +258 -258
  5. package/dist/css/functional/themes/dark.css +248 -248
  6. package/dist/css/functional/themes/light-colorblind.css +216 -216
  7. package/dist/css/functional/themes/light-high-contrast.css +248 -248
  8. package/dist/css/functional/themes/light-tritanopia.css +216 -216
  9. package/dist/css/functional/themes/light.css +206 -206
  10. package/dist/docs/functional/themes/dark-colorblind.json +266 -350
  11. package/dist/docs/functional/themes/dark-dimmed.json +292 -376
  12. package/dist/docs/functional/themes/dark-high-contrast.json +452 -524
  13. package/dist/docs/functional/themes/dark-tritanopia.json +264 -348
  14. package/dist/docs/functional/themes/dark.json +254 -338
  15. package/dist/docs/functional/themes/light-colorblind.json +245 -325
  16. package/dist/docs/functional/themes/light-high-contrast.json +295 -375
  17. package/dist/docs/functional/themes/light-tritanopia.json +244 -322
  18. package/dist/docs/functional/themes/light.json +234 -312
  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 +4646 -4658
  35. package/dist/figma/themes/dark-dimmed.json +2034 -2046
  36. package/dist/figma/themes/dark-high-contrast.json +2645 -2653
  37. package/dist/figma/themes/dark-tritanopia.json +4595 -4607
  38. package/dist/figma/themes/dark.json +4743 -4755
  39. package/dist/figma/themes/light-colorblind.json +2177 -2190
  40. package/dist/figma/themes/light-high-contrast.json +2415 -2430
  41. package/dist/figma/themes/light-tritanopia.json +2173 -2185
  42. package/dist/figma/themes/light.json +2158 -2170
  43. package/dist/internalCss/dark-colorblind.css +288 -278
  44. package/dist/internalCss/dark-dimmed.css +306 -296
  45. package/dist/internalCss/dark-high-contrast.css +438 -428
  46. package/dist/internalCss/dark-tritanopia.css +288 -278
  47. package/dist/internalCss/dark.css +278 -268
  48. package/dist/internalCss/light-colorblind.css +246 -236
  49. package/dist/internalCss/light-high-contrast.css +276 -266
  50. package/dist/internalCss/light-tritanopia.css +246 -236
  51. package/dist/internalCss/light.css +236 -226
  52. package/dist/styleLint/functional/themes/dark-colorblind.json +266 -350
  53. package/dist/styleLint/functional/themes/dark-dimmed.json +292 -376
  54. package/dist/styleLint/functional/themes/dark-high-contrast.json +452 -524
  55. package/dist/styleLint/functional/themes/dark-tritanopia.json +264 -348
  56. package/dist/styleLint/functional/themes/dark.json +254 -338
  57. package/dist/styleLint/functional/themes/light-colorblind.json +245 -325
  58. package/dist/styleLint/functional/themes/light-high-contrast.json +295 -375
  59. package/dist/styleLint/functional/themes/light-tritanopia.json +244 -322
  60. package/dist/styleLint/functional/themes/light.json +234 -312
  61. package/package.json +1 -1
  62. package/src/tokens/base/color/dark/dark.dimmed.json5 +0 -162
  63. package/src/tokens/base/color/dark/dark.high-contrast.json5 +0 -92
  64. package/src/tokens/base/color/dark/dark.json5 +149 -104
  65. package/src/tokens/base/color/light/light.high-contrast.json5 +0 -92
  66. package/src/tokens/base/color/light/light.json5 +148 -103
  67. package/src/tokens/functional/color/dark/app-dark.json5 +5 -5
  68. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +147 -10
  69. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +174 -192
  70. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +5 -7
  71. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +5 -6
  72. package/src/tokens/functional/color/dark/patterns-dark.json5 +61 -95
  73. package/src/tokens/functional/color/dark/primitives-dark.json5 +27 -35
  74. package/src/tokens/functional/color/dark/syntax-dark.json5 +14 -14
  75. package/src/tokens/functional/color/light/app-light.json5 +5 -5
  76. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +73 -129
  77. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +5 -7
  78. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +5 -6
  79. package/src/tokens/functional/color/light/patterns-light.json5 +62 -96
  80. package/src/tokens/functional/color/light/primitives-light.json5 +27 -32
  81. package/src/tokens/functional/color/light/syntax-light.json5 +14 -14
  82. package/src/tokens/functional/shadow/dark.json5 +15 -15
  83. package/src/tokens/functional/shadow/light.json5 +16 -16
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.10}',
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.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}',
66
- $type: 'color',
67
- alpha: 1,
68
- },
69
63
  emphasis: {
70
- $value: '{base.color.neutral.6}',
64
+ $value: '{base.color.neutral.10}',
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.4}',
77
70
  $type: 'color',
78
71
  },
79
72
  success: {
@@ -92,26 +85,28 @@
92
85
  },
93
86
  borderColor: {
94
87
  default: {
95
- $value: '{base.color.neutral.8}',
88
+ $value: '{base.color.neutral.10}',
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
+ },
100
+ disabled: {
101
+ $value: '{base.color.neutral.9}',
102
+ $type: 'color',
103
+ alpha: 0.12,
104
+ },
103
105
  translucent: {
104
- $value: '{base.color.neutral.8}',
106
+ $value: '{base.color.neutral.9}',
105
107
  $type: 'color',
106
108
  alpha: 1,
107
109
  },
108
- neutral: {
109
- muted: {
110
- $value: '{base.color.neutral.4}',
111
- $type: 'color',
112
- alpha: 1,
113
- },
114
- },
115
110
  accent: {
116
111
  muted: {
117
112
  $value: '{base.color.blue.3}',
@@ -176,11 +171,25 @@
176
171
  alpha: 1,
177
172
  },
178
173
  },
174
+ upsell: {
175
+ muted: {
176
+ $value: '{borderColor.done.muted}',
177
+ $type: 'color',
178
+ alpha: 1,
179
+ },
180
+ },
181
+ closed: {
182
+ muted: {
183
+ $value: '{borderColor.danger.muted}',
184
+ $type: 'color',
185
+ alpha: 1,
186
+ },
187
+ },
179
188
  },
180
189
  // patterns
181
190
  avatar: {
182
191
  borderColor: {
183
- $value: '{base.color.black}',
192
+ $value: '{base.color.neutral.13}',
184
193
  $type: 'color',
185
194
  alpha: 0.9,
186
195
  },
@@ -200,64 +209,40 @@
200
209
  control: {
201
210
  fgColor: {
202
211
  placeholder: {
203
- $value: '{base.color.neutral.6}',
212
+ $value: '{base.color.neutral.10}',
204
213
  $type: 'color',
205
- mix: {
206
- color: '{base.color.neutral.7}',
207
- weight: 0.2,
208
- },
209
214
  },
210
215
  },
211
216
  bgColor: {
212
217
  rest: {
213
- $value: '{base.color.neutral.1}',
218
+ $value: '{base.color.neutral.4}',
214
219
  $type: 'color',
215
220
  },
216
221
  hover: {
217
- $value: '{base.color.neutral.1}',
222
+ $value: '{base.color.neutral.5}',
218
223
  $type: 'color',
219
- mix: {
220
- color: '{base.color.neutral.3}',
221
- weight: 0.2,
222
- },
223
224
  },
224
225
  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}',
226
+ $value: '{base.color.neutral.6}',
240
227
  $type: 'color',
241
- mix: null,
242
228
  },
243
229
  },
244
230
  transparent: {
245
231
  bgColor: {
246
232
  hover: {
247
- $value: '{base.color.neutral.1}',
233
+ $value: '{base.color.neutral.5}',
248
234
  $type: 'color',
249
- alpha: null,
250
- mix: null,
235
+ alpha: 1,
251
236
  },
252
237
  active: {
253
- $value: '{base.color.neutral.2}',
238
+ $value: '{base.color.neutral.6}',
254
239
  $type: 'color',
255
- alpha: null,
256
- mix: null,
240
+ alpha: 1,
257
241
  },
258
242
  selected: {
259
- $value: '{base.color.neutral.2}',
243
+ $value: '{base.color.neutral.5}',
260
244
  $type: 'color',
245
+ alpha: 1,
261
246
  },
262
247
  },
263
248
  borderColor: {
@@ -265,6 +250,10 @@
265
250
  $value: '{borderColor.default}',
266
251
  $type: 'color',
267
252
  },
253
+ active: {
254
+ $value: '{borderColor.default}',
255
+ $type: 'color',
256
+ },
268
257
  },
269
258
  },
270
259
  danger: {
@@ -296,33 +285,15 @@
296
285
  controlTrack: {
297
286
  bgColor: {
298
287
  rest: {
299
- $value: '{base.color.neutral.3}',
288
+ $value: '{base.color.neutral.5}',
300
289
  $type: 'color',
301
290
  },
302
291
  hover: {
303
- $value: '{base.color.neutral.3}',
292
+ $value: '{base.color.neutral.6}',
304
293
  $type: 'color',
305
- mix: {
306
- color: '{base.color.neutral.5}',
307
- weight: 0.2,
308
- },
309
294
  },
310
295
  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}',
296
+ $value: '{base.color.neutral.7}',
326
297
  $type: 'color',
327
298
  },
328
299
  },
@@ -334,22 +305,6 @@
334
305
  },
335
306
  },
336
307
  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
308
  primary: {
354
309
  bgColor: {
355
310
  rest: {
@@ -391,30 +346,22 @@
391
346
  },
392
347
  },
393
348
  },
394
- invisible: {
349
+ inactive: {
395
350
  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',
351
+ $value: '{base.color.neutral.10}',
352
+ $type: 'color',
353
+ $extensions: {
354
+ 'org.primer.figma': {
355
+ collection: 'mode',
356
+ mode: 'light',
357
+ group: 'component (internal)',
358
+ scopes: ['fgColor'],
359
+ },
405
360
  },
406
361
  },
407
362
  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
- },
363
+ $value: '{control.bgColor.rest}',
364
+ $type: 'color',
418
365
  },
419
366
  },
420
367
  },
@@ -422,18 +369,8 @@
422
369
  default: {
423
370
  bgColor: {
424
371
  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}',
372
+ $value: '{base.color.neutral.7}',
435
373
  $type: 'color',
436
- alpha: 0.2,
437
374
  },
438
375
  },
439
376
  },
@@ -482,17 +419,24 @@
482
419
  header: {
483
420
  borderColor: {
484
421
  divider: {
485
- $value: '{base.color.neutral.3}',
422
+ $value: '{base.color.neutral.7}',
486
423
  $type: 'color',
487
424
  },
488
425
  },
489
426
  },
490
427
  overlay: {
491
428
  borderColor: {
492
- $value: '{borderColor.muted}',
429
+ $value: '{borderColor.default}',
493
430
  $type: 'color',
494
431
  alpha: null,
495
432
  },
433
+ backdrop: {
434
+ bgColor: {
435
+ $value: '{base.color.neutral.11}',
436
+ $type: 'color',
437
+ alpha: 0.4,
438
+ },
439
+ },
496
440
  },
497
441
  display: {
498
442
  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
  },