@primer/primitives 9.0.0-rc.02c27a21 → 9.0.0-rc.62824cb6

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 +386 -386
  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 +244 -244
  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 +407 -479
  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 +286 -366
  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 +2613 -2621
  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 +1742 -1757
  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 +416 -406
  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 +272 -262
  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 +407 -479
  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 +286 -366
  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 +160 -141
  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 +59 -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}',
@@ -180,7 +175,7 @@
180
175
  // patterns
181
176
  avatar: {
182
177
  borderColor: {
183
- $value: '{base.color.black}',
178
+ $value: '{base.color.neutral.13}',
184
179
  $type: 'color',
185
180
  alpha: 0.9,
186
181
  },
@@ -200,64 +195,40 @@
200
195
  control: {
201
196
  fgColor: {
202
197
  placeholder: {
203
- $value: '{base.color.neutral.6}',
198
+ $value: '{base.color.neutral.10}',
204
199
  $type: 'color',
205
- mix: {
206
- color: '{base.color.neutral.7}',
207
- weight: 0.2,
208
- },
209
200
  },
210
201
  },
211
202
  bgColor: {
212
203
  rest: {
213
- $value: '{base.color.neutral.1}',
204
+ $value: '{base.color.neutral.4}',
214
205
  $type: 'color',
215
206
  },
216
207
  hover: {
217
- $value: '{base.color.neutral.1}',
208
+ $value: '{base.color.neutral.5}',
218
209
  $type: 'color',
219
- mix: {
220
- color: '{base.color.neutral.3}',
221
- weight: 0.2,
222
- },
223
210
  },
224
211
  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}',
212
+ $value: '{base.color.neutral.6}',
240
213
  $type: 'color',
241
- mix: null,
242
214
  },
243
215
  },
244
216
  transparent: {
245
217
  bgColor: {
246
218
  hover: {
247
- $value: '{base.color.neutral.1}',
219
+ $value: '{base.color.neutral.5}',
248
220
  $type: 'color',
249
- alpha: null,
250
- mix: null,
221
+ alpha: 1,
251
222
  },
252
223
  active: {
253
- $value: '{base.color.neutral.2}',
224
+ $value: '{base.color.neutral.6}',
254
225
  $type: 'color',
255
- alpha: null,
256
- mix: null,
226
+ alpha: 1,
257
227
  },
258
228
  selected: {
259
- $value: '{base.color.neutral.2}',
229
+ $value: '{base.color.neutral.5}',
260
230
  $type: 'color',
231
+ alpha: 1,
261
232
  },
262
233
  },
263
234
  borderColor: {
@@ -265,6 +236,10 @@
265
236
  $value: '{borderColor.default}',
266
237
  $type: 'color',
267
238
  },
239
+ active: {
240
+ $value: '{borderColor.default}',
241
+ $type: 'color',
242
+ },
268
243
  },
269
244
  },
270
245
  danger: {
@@ -296,33 +271,15 @@
296
271
  controlTrack: {
297
272
  bgColor: {
298
273
  rest: {
299
- $value: '{base.color.neutral.3}',
274
+ $value: '{base.color.neutral.5}',
300
275
  $type: 'color',
301
276
  },
302
277
  hover: {
303
- $value: '{base.color.neutral.3}',
278
+ $value: '{base.color.neutral.6}',
304
279
  $type: 'color',
305
- mix: {
306
- color: '{base.color.neutral.5}',
307
- weight: 0.2,
308
- },
309
280
  },
310
281
  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}',
282
+ $value: '{base.color.neutral.7}',
326
283
  $type: 'color',
327
284
  },
328
285
  },
@@ -334,22 +291,6 @@
334
291
  },
335
292
  },
336
293
  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
294
  primary: {
354
295
  bgColor: {
355
296
  rest: {
@@ -391,30 +332,22 @@
391
332
  },
392
333
  },
393
334
  },
394
- invisible: {
335
+ inactive: {
395
336
  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',
337
+ $value: '{base.color.neutral.10}',
338
+ $type: 'color',
339
+ $extensions: {
340
+ 'org.primer.figma': {
341
+ collection: 'mode',
342
+ mode: 'light',
343
+ group: 'component (internal)',
344
+ scopes: ['fgColor'],
345
+ },
405
346
  },
406
347
  },
407
348
  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
- },
349
+ $value: '{control.bgColor.rest}',
350
+ $type: 'color',
418
351
  },
419
352
  },
420
353
  },
@@ -422,18 +355,8 @@
422
355
  default: {
423
356
  bgColor: {
424
357
  rest: {
425
- $value: '{bgColor.neutral.emphasis}',
358
+ $value: '{base.color.neutral.7}',
426
359
  $type: 'color',
427
- alpha: 0.2,
428
- },
429
- },
430
- },
431
- invisible: {
432
- bgColor: {
433
- rest: {
434
- $value: '{bgColor.neutral.emphasis}',
435
- $type: 'color',
436
- alpha: 0.2,
437
360
  },
438
361
  },
439
362
  },
@@ -482,17 +405,24 @@
482
405
  header: {
483
406
  borderColor: {
484
407
  divider: {
485
- $value: '{base.color.neutral.3}',
408
+ $value: '{base.color.neutral.7}',
486
409
  $type: 'color',
487
410
  },
488
411
  },
489
412
  },
490
413
  overlay: {
491
414
  borderColor: {
492
- $value: '{borderColor.muted}',
415
+ $value: '{borderColor.default}',
493
416
  $type: 'color',
494
417
  alpha: null,
495
418
  },
419
+ backdrop: {
420
+ bgColor: {
421
+ $value: '{base.color.neutral.11}',
422
+ $type: 'color',
423
+ alpha: 0.4,
424
+ },
425
+ },
496
426
  },
497
427
  display: {
498
428
  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
  },