@primer/primitives 10.4.0-rc.e41ed5ed → 10.4.0-rc.ea0a5a9d

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 (90) hide show
  1. package/dist/build/schemas/shadowToken.d.ts +1992 -0
  2. package/dist/build/schemas/shadowToken.js +27 -0
  3. package/dist/css/base/motion/motion.css +1 -0
  4. package/dist/css/functional/themes/dark-colorblind.css +2 -2
  5. package/dist/css/functional/themes/dark-dimmed.css +2 -2
  6. package/dist/css/functional/themes/dark-high-contrast.css +2 -2
  7. package/dist/css/functional/themes/dark-tritanopia.css +2 -2
  8. package/dist/css/functional/themes/dark.css +2 -2
  9. package/dist/css/functional/themes/light-colorblind.css +2 -2
  10. package/dist/css/functional/themes/light-high-contrast.css +2 -2
  11. package/dist/css/functional/themes/light-tritanopia.css +2 -2
  12. package/dist/css/functional/themes/light.css +2 -2
  13. package/dist/css/primitives.css +1 -0
  14. package/dist/docs/base/motion/motion.json +14 -0
  15. package/dist/docs/functional/themes/dark-colorblind.json +9685 -465
  16. package/dist/docs/functional/themes/dark-dimmed.json +9811 -547
  17. package/dist/docs/functional/themes/dark-high-contrast.json +10869 -627
  18. package/dist/docs/functional/themes/dark-tritanopia.json +9577 -475
  19. package/dist/docs/functional/themes/dark.json +9311 -469
  20. package/dist/docs/functional/themes/light-colorblind.json +9630 -458
  21. package/dist/docs/functional/themes/light-high-contrast.json +10860 -690
  22. package/dist/docs/functional/themes/light-tritanopia.json +9543 -489
  23. package/dist/docs/functional/themes/light.json +9307 -439
  24. package/dist/fallbacks/base/motion/motion.json +1 -0
  25. package/dist/figma/figma.json +1 -10
  26. package/dist/figma/themes/dark-colorblind.json +5060 -4813
  27. package/dist/figma/themes/dark-dimmed.json +5049 -4695
  28. package/dist/figma/themes/dark-high-contrast.json +6050 -4558
  29. package/dist/figma/themes/dark-tritanopia.json +5065 -4932
  30. package/dist/figma/themes/dark.json +4775 -4891
  31. package/dist/figma/themes/light-colorblind.json +5026 -4742
  32. package/dist/figma/themes/light-high-contrast.json +6075 -4592
  33. package/dist/figma/themes/light-tritanopia.json +5084 -4911
  34. package/dist/figma/themes/light.json +5230 -5230
  35. package/dist/internalCss/dark-colorblind.css +2 -2
  36. package/dist/internalCss/dark-dimmed.css +2 -2
  37. package/dist/internalCss/dark-high-contrast.css +2 -2
  38. package/dist/internalCss/dark-tritanopia.css +2 -2
  39. package/dist/internalCss/dark.css +2 -2
  40. package/dist/internalCss/light-colorblind.css +2 -2
  41. package/dist/internalCss/light-high-contrast.css +2 -2
  42. package/dist/internalCss/light-tritanopia.css +2 -2
  43. package/dist/internalCss/light.css +2 -2
  44. package/dist/styleLint/base/motion/motion.json +14 -0
  45. package/dist/styleLint/functional/themes/dark-colorblind.json +9685 -465
  46. package/dist/styleLint/functional/themes/dark-dimmed.json +9811 -547
  47. package/dist/styleLint/functional/themes/dark-high-contrast.json +10869 -627
  48. package/dist/styleLint/functional/themes/dark-tritanopia.json +9577 -475
  49. package/dist/styleLint/functional/themes/dark.json +9311 -469
  50. package/dist/styleLint/functional/themes/light-colorblind.json +9630 -458
  51. package/dist/styleLint/functional/themes/light-high-contrast.json +10853 -683
  52. package/dist/styleLint/functional/themes/light-tritanopia.json +9543 -489
  53. package/dist/styleLint/functional/themes/light.json +9307 -439
  54. package/package.json +1 -1
  55. package/src/tokens/base/motion/timing.json5 +4 -0
  56. package/src/tokens/component/avatar.json5 +33 -0
  57. package/src/tokens/component/button.json5 +1714 -0
  58. package/src/tokens/component/header.json5 +3 -0
  59. package/src/tokens/component/label.json5 +1942 -0
  60. package/src/tokens/component/menu.json5 +24 -0
  61. package/src/tokens/component/selectMenu.json5 +38 -0
  62. package/src/tokens/component/sideNav.json5 +22 -0
  63. package/src/tokens/component/treeView.json5 +24 -0
  64. package/src/tokens/component/underlineNav.json5 +56 -0
  65. package/src/tokens/functional/color/control.json5 +1087 -0
  66. package/src/tokens/functional/color/display.json5 +2170 -0
  67. package/src/tokens/functional/color/selection.json5 +22 -0
  68. package/src/tokens/functional/color/syntax.json5 +256 -210
  69. package/src/tokens/functional/shadow/{light.json5 → shadow.json5} +202 -120
  70. package/dist/figma/shadows/dark-colorblind.json +0 -1152
  71. package/dist/figma/shadows/dark-dimmed.json +0 -1152
  72. package/dist/figma/shadows/dark-high-contrast.json +0 -1152
  73. package/dist/figma/shadows/dark-tritanopia.json +0 -1152
  74. package/dist/figma/shadows/dark.json +0 -1152
  75. package/dist/figma/shadows/light-colorblind.json +0 -1052
  76. package/dist/figma/shadows/light-high-contrast.json +0 -1052
  77. package/dist/figma/shadows/light-tritanopia.json +0 -1052
  78. package/dist/figma/shadows/light.json +0 -1052
  79. package/src/tokens/functional/color/dark/display-dark.json5 +0 -1258
  80. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -199
  81. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +0 -618
  82. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +0 -145
  83. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +0 -97
  84. package/src/tokens/functional/color/dark/patterns-dark.json5 +0 -2589
  85. package/src/tokens/functional/color/light/display-light.json5 +0 -1163
  86. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +0 -581
  87. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +0 -145
  88. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +0 -87
  89. package/src/tokens/functional/color/light/patterns-light.json5 +0 -2583
  90. package/src/tokens/functional/shadow/dark.json5 +0 -369
@@ -1,581 +0,0 @@
1
- /**
2
- * Light high contrast
3
- * @extends all functional tokens
4
- * @description All overwrites for functional color tokens for light high contrast color mode are in this file
5
- */
6
- {
7
- control: {
8
- fgColor: {
9
- placeholder: {
10
- $value: '{base.color.neutral.10}',
11
- $type: 'color',
12
- },
13
- },
14
- bgColor: {
15
- rest: {
16
- $value: '{base.color.neutral.4}',
17
- $type: 'color',
18
- },
19
- hover: {
20
- $value: '{base.color.neutral.5}',
21
- $type: 'color',
22
- },
23
- active: {
24
- $value: '{base.color.neutral.6}',
25
- $type: 'color',
26
- },
27
- },
28
- transparent: {
29
- bgColor: {
30
- hover: {
31
- $value: '{base.color.neutral.5}',
32
- $type: 'color',
33
- alpha: 1,
34
- },
35
- active: {
36
- $value: '{base.color.neutral.6}',
37
- $type: 'color',
38
- alpha: 1,
39
- },
40
- selected: {
41
- $value: '{base.color.neutral.5}',
42
- $type: 'color',
43
- alpha: 1,
44
- },
45
- },
46
- borderColor: {
47
- hover: {
48
- $value: '{borderColor.default}',
49
- $type: 'color',
50
- },
51
- active: {
52
- $value: '{borderColor.default}',
53
- $type: 'color',
54
- },
55
- },
56
- },
57
- danger: {
58
- fgColor: {
59
- hover: {
60
- $value: '{fgColor.onEmphasis}',
61
- $type: 'color',
62
- },
63
- },
64
- bgColor: {
65
- hover: {
66
- $value: '{bgColor.danger.emphasis}',
67
- $type: 'color',
68
- alpha: null,
69
- },
70
- active: {
71
- $value: '#8c0b1d',
72
- $type: 'color',
73
- },
74
- },
75
- },
76
- checked: {
77
- bgColor: {
78
- hover: {
79
- $value: '#0344a8',
80
- $type: 'color',
81
- },
82
- active: {
83
- $value: '#033f9d',
84
- $type: 'color',
85
- },
86
- },
87
- borderColor: {
88
- hover: {
89
- $value: '#0344a8',
90
- $type: 'color',
91
- },
92
- active: {
93
- $value: '#033f9d',
94
- $type: 'color',
95
- },
96
- },
97
- },
98
- },
99
- controlTrack: {
100
- bgColor: {
101
- rest: {
102
- $value: '{base.color.neutral.5}',
103
- $type: 'color',
104
- },
105
- hover: {
106
- $value: '{base.color.neutral.6}',
107
- $type: 'color',
108
- },
109
- active: {
110
- $value: '{base.color.neutral.7}',
111
- $type: 'color',
112
- },
113
- },
114
- borderColor: {
115
- rest: {
116
- $value: '{borderColor.emphasis}',
117
- $type: 'color',
118
- },
119
- },
120
- },
121
- button: {
122
- primary: {
123
- bgColor: {
124
- rest: {
125
- $value: '{base.color.green.5}',
126
- $type: 'color',
127
- },
128
- hover: {
129
- $value: '#04571e',
130
- $type: 'color',
131
- },
132
- active: {
133
- $value: '#03501b',
134
- $type: 'color',
135
- },
136
- disabled: {
137
- $value: '#85cb97',
138
- $type: 'color',
139
- },
140
- },
141
- borderColor: {
142
- rest: {
143
- $value: '{base.color.green.7}',
144
- $type: 'color',
145
- alpha: 1,
146
- },
147
- hover: {
148
- $value: '{base.color.green.7}',
149
- $type: 'color',
150
- alpha: 1,
151
- },
152
- active: {
153
- $value: '{base.color.green.7}',
154
- $type: 'color',
155
- alpha: 1,
156
- },
157
- disabled: {
158
- $value: '#85cb97',
159
- $type: 'color',
160
- },
161
- },
162
- },
163
- inactive: {
164
- fgColor: {
165
- $value: '{base.color.neutral.10}',
166
- $type: 'color',
167
- $extensions: {
168
- 'org.primer.figma': {
169
- collection: 'mode',
170
- group: 'component (internal)',
171
- scopes: ['fgColor'],
172
- },
173
- },
174
- },
175
- bgColor: {
176
- $value: '{control.bgColor.rest}',
177
- $type: 'color',
178
- },
179
- },
180
- invisible: {
181
- fgColor: {
182
- hover: {
183
- $value: '{base.color.neutral.11}',
184
- $type: 'color',
185
- },
186
- },
187
- iconColor: {
188
- hover: {
189
- $value: '{base.color.neutral.11}',
190
- $type: 'color',
191
- },
192
- },
193
- },
194
- outline: {
195
- bgColor: {
196
- active: {
197
- $value: '#033f9d',
198
- $type: 'color',
199
- },
200
- },
201
- },
202
- danger: {
203
- bgColor: {
204
- active: {
205
- $value: '#74041a',
206
- $type: 'color',
207
- },
208
- },
209
- },
210
- },
211
- buttonCounter: {
212
- default: {
213
- bgColor: {
214
- rest: {
215
- $value: '{base.color.neutral.7}',
216
- $type: 'color',
217
- },
218
- },
219
- },
220
- danger: {
221
- fgColor: {
222
- rest: {
223
- $value: '#980e1e',
224
- $type: 'color',
225
- },
226
- },
227
- },
228
- },
229
- header: {
230
- borderColor: {
231
- divider: {
232
- $value: '{base.color.neutral.7}',
233
- $type: 'color',
234
- },
235
- },
236
- },
237
- display: {
238
- blue: {
239
- bgColor: {
240
- emphasis: {
241
- $value: '{base.display.color.blue.7}',
242
- $type: 'color',
243
- },
244
- },
245
- fgColor: {
246
- $value: '{base.display.color.blue.8}',
247
- $type: 'color',
248
- },
249
- borderColor: {
250
- emphasis: {
251
- $value: '{base.display.color.blue.6}',
252
- $type: 'color',
253
- },
254
- },
255
- },
256
- indigo: {
257
- bgColor: {
258
- emphasis: {
259
- $value: '{base.display.color.indigo.7}',
260
- $type: 'color',
261
- },
262
- },
263
- fgColor: {
264
- $value: '{base.display.color.indigo.8}',
265
- $type: 'color',
266
- },
267
- borderColor: {
268
- emphasis: {
269
- $value: '{base.display.color.indigo.6}',
270
- $type: 'color',
271
- },
272
- },
273
- },
274
- gray: {
275
- bgColor: {
276
- emphasis: {
277
- $value: '{base.display.color.gray.7}',
278
- $type: 'color',
279
- },
280
- },
281
- fgColor: {
282
- $value: '{base.display.color.gray.8}',
283
- $type: 'color',
284
- },
285
- borderColor: {
286
- emphasis: {
287
- $value: '{base.display.color.gray.6}',
288
- $type: 'color',
289
- },
290
- },
291
- },
292
- cyan: {
293
- bgColor: {
294
- emphasis: {
295
- $value: '{base.display.color.cyan.7}',
296
- $type: 'color',
297
- },
298
- },
299
- fgColor: {
300
- $value: '{base.display.color.cyan.8}',
301
- $type: 'color',
302
- },
303
- borderColor: {
304
- emphasis: {
305
- $value: '{base.display.color.cyan.6}',
306
- $type: 'color',
307
- },
308
- },
309
- },
310
- teal: {
311
- bgColor: {
312
- emphasis: {
313
- $value: '{base.display.color.teal.7}',
314
- $type: 'color',
315
- },
316
- },
317
- fgColor: {
318
- $value: '{base.display.color.teal.8}',
319
- $type: 'color',
320
- },
321
- borderColor: {
322
- emphasis: {
323
- $value: '{base.display.color.teal.6}',
324
- $type: 'color',
325
- },
326
- },
327
- },
328
- pine: {
329
- bgColor: {
330
- emphasis: {
331
- $value: '{base.display.color.pine.7}',
332
- $type: 'color',
333
- },
334
- },
335
- fgColor: {
336
- $value: '{base.display.color.pine.8}',
337
- $type: 'color',
338
- },
339
- borderColor: {
340
- emphasis: {
341
- $value: '{base.display.color.pine.6}',
342
- $type: 'color',
343
- },
344
- },
345
- },
346
- green: {
347
- bgColor: {
348
- emphasis: {
349
- $value: '{base.display.color.green.7}',
350
- $type: 'color',
351
- },
352
- },
353
- fgColor: {
354
- $value: '{base.display.color.green.8}',
355
- $type: 'color',
356
- },
357
- borderColor: {
358
- emphasis: {
359
- $value: '{base.display.color.green.6}',
360
- $type: 'color',
361
- },
362
- },
363
- },
364
- lime: {
365
- bgColor: {
366
- emphasis: {
367
- $value: '{base.display.color.lime.7}',
368
- $type: 'color',
369
- },
370
- },
371
- fgColor: {
372
- $value: '{base.display.color.lime.8}',
373
- $type: 'color',
374
- },
375
- borderColor: {
376
- emphasis: {
377
- $value: '{base.display.color.lime.6}',
378
- $type: 'color',
379
- },
380
- },
381
- },
382
- olive: {
383
- bgColor: {
384
- emphasis: {
385
- $value: '{base.display.color.olive.7}',
386
- $type: 'color',
387
- },
388
- },
389
- fgColor: {
390
- $value: '{base.display.color.olive.8}',
391
- $type: 'color',
392
- },
393
- borderColor: {
394
- emphasis: {
395
- $value: '{base.display.color.olive.6}',
396
- $type: 'color',
397
- },
398
- },
399
- },
400
- lemon: {
401
- bgColor: {
402
- emphasis: {
403
- $value: '{base.display.color.lemon.7}',
404
- $type: 'color',
405
- },
406
- },
407
- fgColor: {
408
- $value: '{base.display.color.lemon.8}',
409
- $type: 'color',
410
- },
411
- borderColor: {
412
- emphasis: {
413
- $value: '{base.display.color.lemon.6}',
414
- $type: 'color',
415
- },
416
- },
417
- },
418
- yellow: {
419
- bgColor: {
420
- emphasis: {
421
- $value: '{base.display.color.yellow.7}',
422
- $type: 'color',
423
- },
424
- },
425
- fgColor: {
426
- $value: '{base.display.color.yellow.8}',
427
- $type: 'color',
428
- },
429
- borderColor: {
430
- emphasis: {
431
- $value: '{base.display.color.yellow.6}',
432
- $type: 'color',
433
- },
434
- },
435
- },
436
- orange: {
437
- bgColor: {
438
- emphasis: {
439
- $value: '{base.display.color.orange.7}',
440
- $type: 'color',
441
- },
442
- },
443
- fgColor: {
444
- $value: '{base.display.color.orange.8}',
445
- $type: 'color',
446
- },
447
- borderColor: {
448
- emphasis: {
449
- $value: '{base.display.color.orange.6}',
450
- $type: 'color',
451
- },
452
- },
453
- },
454
- red: {
455
- bgColor: {
456
- emphasis: {
457
- $value: '{base.display.color.red.7}',
458
- $type: 'color',
459
- },
460
- },
461
- fgColor: {
462
- $value: '{base.display.color.red.8}',
463
- $type: 'color',
464
- },
465
- borderColor: {
466
- emphasis: {
467
- $value: '{base.display.color.red.6}',
468
- $type: 'color',
469
- },
470
- },
471
- },
472
- coral: {
473
- bgColor: {
474
- emphasis: {
475
- $value: '{base.display.color.coral.7}',
476
- $type: 'color',
477
- },
478
- },
479
- fgColor: {
480
- $value: '{base.display.color.coral.8}',
481
- $type: 'color',
482
- },
483
- borderColor: {
484
- emphasis: {
485
- $value: '{base.display.color.coral.6}',
486
- $type: 'color',
487
- },
488
- },
489
- },
490
- pink: {
491
- bgColor: {
492
- emphasis: {
493
- $value: '{base.display.color.pink.7}',
494
- $type: 'color',
495
- },
496
- },
497
- fgColor: {
498
- $value: '{base.display.color.pink.8}',
499
- $type: 'color',
500
- },
501
- borderColor: {
502
- emphasis: {
503
- $value: '{base.display.color.pink.6}',
504
- $type: 'color',
505
- },
506
- },
507
- },
508
- plum: {
509
- bgColor: {
510
- emphasis: {
511
- $value: '{base.display.color.plum.7}',
512
- $type: 'color',
513
- },
514
- },
515
- fgColor: {
516
- $value: '{base.display.color.plum.8}',
517
- $type: 'color',
518
- },
519
- borderColor: {
520
- emphasis: {
521
- $value: '{base.display.color.plum.6}',
522
- $type: 'color',
523
- },
524
- },
525
- },
526
- purple: {
527
- bgColor: {
528
- emphasis: {
529
- $value: '{base.display.color.purple.7}',
530
- $type: 'color',
531
- },
532
- },
533
- fgColor: {
534
- $value: '{base.display.color.purple.8}',
535
- $type: 'color',
536
- },
537
- borderColor: {
538
- emphasis: {
539
- $value: '{base.display.color.purple.6}',
540
- $type: 'color',
541
- },
542
- },
543
- },
544
- brown: {
545
- bgColor: {
546
- emphasis: {
547
- $value: '{base.display.color.brown.7}',
548
- $type: 'color',
549
- },
550
- },
551
- fgColor: {
552
- $value: '{base.display.color.brown.8}',
553
- $type: 'color',
554
- },
555
- borderColor: {
556
- emphasis: {
557
- $value: '{base.display.color.brown.6}',
558
- $type: 'color',
559
- },
560
- },
561
- },
562
- auburn: {
563
- bgColor: {
564
- emphasis: {
565
- $value: '{base.display.color.auburn.7}',
566
- $type: 'color',
567
- },
568
- },
569
- fgColor: {
570
- $value: '{base.display.color.auburn.8}',
571
- $type: 'color',
572
- },
573
- borderColor: {
574
- emphasis: {
575
- $value: '{base.display.color.auburn.6}',
576
- $type: 'color',
577
- },
578
- },
579
- },
580
- },
581
- }
@@ -1,145 +0,0 @@
1
- /**
2
- * Light protanopia and deuteranopia (colorblind)
3
- * @extends all functional tokens
4
- * @description All overwrites for functional color tokens for light protanopia and deuteranopia color mode are in this file
5
- */
6
- {
7
- button: {
8
- primary: {
9
- bgColor: {
10
- hover: {
11
- $value: '#0864d1',
12
- $type: 'color',
13
- },
14
- active: {
15
- $value: '#075fc8',
16
- $type: 'color',
17
- },
18
- disabled: {
19
- $value: '#92caff',
20
- $type: 'color',
21
- },
22
- },
23
- shadow: {
24
- selected: {
25
- $value: [
26
- {
27
- color: '{base.color.blue.9}',
28
- alpha: 0.3,
29
- offsetX: '0px',
30
- offsetY: '1px',
31
- blur: '0px',
32
- spread: '0px',
33
- inset: true,
34
- },
35
- ],
36
- $type: 'shadow',
37
- },
38
- },
39
- },
40
- danger: {
41
- bgColor: {
42
- hover: {
43
- $value: '{base.color.orange.6}',
44
- $type: 'color',
45
- },
46
- active: {
47
- $value: '#7e2f00',
48
- $type: 'color',
49
- },
50
- },
51
- shadow: {
52
- selected: {
53
- $value: [
54
- {
55
- color: '{base.color.orange.9}',
56
- alpha: 0.2,
57
- offsetX: '0px',
58
- offsetY: '1px',
59
- blur: '0px',
60
- spread: '0px',
61
- inset: true,
62
- },
63
- ],
64
- $type: 'shadow',
65
- },
66
- },
67
- },
68
- },
69
- color: {
70
- ansi: {
71
- green: {
72
- $value: '{base.color.blue.6}',
73
- $type: 'color',
74
- },
75
- 'green-bright': {
76
- $value: '{base.color.blue.5}',
77
- $type: 'color',
78
- },
79
- red: {
80
- $value: '{base.color.orange.5}',
81
- $type: 'color',
82
- },
83
- 'red-bright': {
84
- $value: '{base.color.orange.6}',
85
- $type: 'color',
86
- },
87
- },
88
- prettylights: {
89
- syntax: {
90
- keyword: {
91
- $value: '{base.color.orange.5}',
92
- $type: 'color',
93
- },
94
- invalid: {
95
- illegal: {
96
- bg: {
97
- $value: '{base.color.orange.7}',
98
- $type: 'color',
99
- },
100
- },
101
- },
102
- carriage: {
103
- return: {
104
- bg: {
105
- $value: '{base.color.orange.5}',
106
- $type: 'color',
107
- },
108
- },
109
- },
110
- 'string-regexp': {
111
- $value: '{base.color.blue.6}',
112
- $type: 'color',
113
- },
114
- brackethighlighter: {
115
- unmatched: {
116
- $value: '{base.color.orange.7}',
117
- $type: 'color',
118
- },
119
- },
120
- markup: {
121
- deleted: {
122
- text: {
123
- $value: '{base.color.orange.7}',
124
- $type: 'color',
125
- },
126
- bg: {
127
- $value: '{base.color.orange.0}',
128
- $type: 'color',
129
- },
130
- },
131
- inserted: {
132
- text: {
133
- $value: '{base.color.blue.6}',
134
- $type: 'color',
135
- },
136
- bg: {
137
- $value: '{base.color.blue.0}',
138
- $type: 'color',
139
- },
140
- },
141
- },
142
- },
143
- },
144
- },
145
- }