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

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 (96) 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 -6
  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/css/functional/motion/motion.css +0 -6
  71. package/dist/docs/functional/motion/motion.json +0 -66
  72. package/dist/fallbacks/functional/motion/motion.json +0 -6
  73. package/dist/figma/shadows/dark-colorblind.json +0 -1152
  74. package/dist/figma/shadows/dark-dimmed.json +0 -1152
  75. package/dist/figma/shadows/dark-high-contrast.json +0 -1152
  76. package/dist/figma/shadows/dark-tritanopia.json +0 -1152
  77. package/dist/figma/shadows/dark.json +0 -1152
  78. package/dist/figma/shadows/light-colorblind.json +0 -1052
  79. package/dist/figma/shadows/light-high-contrast.json +0 -1052
  80. package/dist/figma/shadows/light-tritanopia.json +0 -1052
  81. package/dist/figma/shadows/light.json +0 -1052
  82. package/dist/styleLint/functional/motion/motion.json +0 -66
  83. package/src/tokens/functional/color/dark/display-dark.json5 +0 -1258
  84. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -199
  85. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +0 -618
  86. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +0 -145
  87. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +0 -97
  88. package/src/tokens/functional/color/dark/patterns-dark.json5 +0 -2589
  89. package/src/tokens/functional/color/light/display-light.json5 +0 -1163
  90. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +0 -581
  91. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +0 -145
  92. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +0 -87
  93. package/src/tokens/functional/color/light/patterns-light.json5 +0 -2583
  94. package/src/tokens/functional/motion/loading.json5 +0 -17
  95. package/src/tokens/functional/motion/patterns.json5 +0 -35
  96. package/src/tokens/functional/shadow/dark.json5 +0 -369
package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 DELETED
@@ -1,618 +0,0 @@
1
- /**
2
- * Dark high contrast
3
- * @extends all functional tokens
4
- * @description All overwrites for functional color tokens for dark 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
- borderColor: {
29
- emphasis: {
30
- $value: '{borderColor.emphasis}',
31
- $type: 'color',
32
- },
33
- },
34
- transparent: {
35
- bgColor: {
36
- hover: {
37
- $value: '{base.color.neutral.6}',
38
- $type: 'color',
39
- alpha: 1,
40
- },
41
- active: {
42
- $value: '{base.color.neutral.7}',
43
- $type: 'color',
44
- alpha: 1,
45
- },
46
- selected: {
47
- $value: '{base.color.neutral.6}',
48
- $type: 'color',
49
- alpha: 1,
50
- },
51
- },
52
- borderColor: {
53
- hover: {
54
- $value: '{borderColor.default}',
55
- $type: 'color',
56
- },
57
- active: {
58
- $value: '{borderColor.default}',
59
- $type: 'color',
60
- },
61
- },
62
- },
63
- danger: {
64
- bgColor: {
65
- hover: {
66
- $value: '{bgColor.danger.emphasis}',
67
- $type: 'color',
68
- },
69
- active: {
70
- $value: '#c51120',
71
- $type: 'color',
72
- alpha: 1,
73
- },
74
- },
75
- },
76
- checked: {
77
- bgColor: {
78
- hover: {
79
- $value: '#2b64c1',
80
- $type: 'color',
81
- },
82
- active: {
83
- $value: '#3c79d0',
84
- $type: 'color',
85
- },
86
- },
87
- borderColor: {
88
- rest: {
89
- $value: '{base.color.blue.2}',
90
- $type: 'color',
91
- },
92
- hover: {
93
- $value: '{base.color.blue.2}',
94
- $type: 'color',
95
- },
96
- active: {
97
- $value: '{base.color.blue.2}',
98
- $type: 'color',
99
- },
100
- },
101
- },
102
- },
103
- controlTrack: {
104
- fgColor: {
105
- rest: {
106
- $value: '{fgColor.default}',
107
- $type: 'color',
108
- },
109
- },
110
- borderColor: {
111
- rest: {
112
- $value: '{borderColor.emphasis}',
113
- $type: 'color',
114
- },
115
- },
116
- bgColor: {
117
- rest: {
118
- $value: '{base.color.neutral.5}',
119
- $type: 'color',
120
- },
121
- hover: {
122
- $value: '{base.color.neutral.6}',
123
- $type: 'color',
124
- },
125
- active: {
126
- $value: '{base.color.neutral.7}',
127
- $type: 'color',
128
- },
129
- },
130
- },
131
- button: {
132
- primary: {
133
- bgColor: {
134
- hover: {
135
- $value: '#08792b',
136
- $type: 'color',
137
- },
138
- active: {
139
- $value: '#109135',
140
- $type: 'color',
141
- },
142
- disabled: {
143
- $value: '#048f2f',
144
- $type: 'color',
145
- },
146
- },
147
- borderColor: {
148
- rest: {
149
- $value: '{base.color.green.2}',
150
- $type: 'color',
151
- alpha: 1,
152
- },
153
- hover: {
154
- $value: '{base.color.green.2}',
155
- $type: 'color',
156
- alpha: 1,
157
- },
158
- active: {
159
- $value: '{base.color.green.2}',
160
- $type: 'color',
161
- alpha: 1,
162
- },
163
- disabled: {
164
- $value: '{base.color.green.2}',
165
- $type: 'color',
166
- alpha: 0.4,
167
- },
168
- },
169
- },
170
- invisible: {
171
- iconColor: {
172
- rest: {
173
- $value: '{base.color.neutral.11}',
174
- $type: 'color',
175
- },
176
- hover: {
177
- $value: '{base.color.neutral.11}',
178
- $type: 'color',
179
- },
180
- },
181
- bgColor: {
182
- hover: {
183
- $value: '{base.color.neutral.2}',
184
- $type: 'color',
185
- alpha: null,
186
- },
187
- active: {
188
- $value: '{base.color.neutral.3}',
189
- $type: 'color',
190
- alpha: null,
191
- },
192
- },
193
- },
194
- danger: {
195
- fgColor: {
196
- rest: {
197
- $value: '{base.color.red.2}',
198
- $type: 'color',
199
- $extensions: {
200
- 'org.primer.figma': {
201
- collection: 'mode',
202
-
203
- group: 'component (internal)',
204
- scopes: ['fgColor'],
205
- },
206
- },
207
- },
208
- },
209
- borderColor: {
210
- hover: {
211
- $value: '{base.color.red.2}',
212
- $type: 'color',
213
- alpha: 1,
214
- },
215
- active: {
216
- $value: '{base.color.red.2}',
217
- $type: 'color',
218
- alpha: 1,
219
- },
220
- },
221
- bgColor: {
222
- hover: {
223
- $value: '{bgColor.danger.emphasis}',
224
- $type: 'color',
225
- },
226
- active: {
227
- $value: '{bgColor.danger.emphasis}',
228
- $type: 'color',
229
- },
230
- },
231
- iconColor: {
232
- rest: {
233
- $value: '#ffb1af',
234
- $type: 'color',
235
- },
236
- },
237
- },
238
- inactive: {
239
- bgColor: {
240
- $value: '{control.bgColor.rest}',
241
- $type: 'color',
242
- },
243
- fgColor: {
244
- $value: '{base.color.neutral.10}',
245
- $type: 'color',
246
- },
247
- },
248
- },
249
- buttonCounter: {
250
- primary: {
251
- bgColor: {
252
- rest: {
253
- $value: '{base.color.neutral.0}',
254
- $type: 'color',
255
- alpha: 0.15,
256
- },
257
- },
258
- },
259
- danger: {
260
- bgColor: {
261
- hover: {
262
- $value: '{base.color.neutral.0}',
263
- $type: 'color',
264
- alpha: 0.15,
265
- },
266
- rest: {
267
- $value: '{base.color.neutral.0}',
268
- $type: 'color',
269
- alpha: 0.15,
270
- },
271
- },
272
- },
273
- },
274
- display: {
275
- blue: {
276
- bgColor: {
277
- emphasis: {
278
- $value: '{base.display.color.blue.3}',
279
- $type: 'color',
280
- },
281
- },
282
- fgColor: {
283
- $value: '{base.display.color.blue.8}',
284
- $type: 'color',
285
- },
286
- borderColor: {
287
- emphasis: {
288
- $value: '{base.display.color.blue.6}',
289
- $type: 'color',
290
- },
291
- },
292
- },
293
- indigo: {
294
- bgColor: {
295
- emphasis: {
296
- $value: '{base.display.color.indigo.3}',
297
- $type: 'color',
298
- },
299
- },
300
- fgColor: {
301
- $value: '{base.display.color.indigo.8}',
302
- $type: 'color',
303
- },
304
- borderColor: {
305
- emphasis: {
306
- $value: '{base.display.color.indigo.6}',
307
- $type: 'color',
308
- },
309
- },
310
- },
311
- gray: {
312
- bgColor: {
313
- emphasis: {
314
- $value: '{base.display.color.gray.3}',
315
- $type: 'color',
316
- },
317
- },
318
- fgColor: {
319
- $value: '{base.display.color.gray.8}',
320
- $type: 'color',
321
- },
322
- borderColor: {
323
- emphasis: {
324
- $value: '{base.display.color.gray.6}',
325
- $type: 'color',
326
- },
327
- },
328
- },
329
- cyan: {
330
- bgColor: {
331
- emphasis: {
332
- $value: '{base.display.color.cyan.3}',
333
- $type: 'color',
334
- },
335
- },
336
- fgColor: {
337
- $value: '{base.display.color.cyan.8}',
338
- $type: 'color',
339
- },
340
- borderColor: {
341
- emphasis: {
342
- $value: '{base.display.color.cyan.6}',
343
- $type: 'color',
344
- },
345
- },
346
- },
347
- teal: {
348
- bgColor: {
349
- emphasis: {
350
- $value: '{base.display.color.teal.3}',
351
- $type: 'color',
352
- },
353
- },
354
- fgColor: {
355
- $value: '{base.display.color.teal.8}',
356
- $type: 'color',
357
- },
358
- borderColor: {
359
- emphasis: {
360
- $value: '{base.display.color.teal.6}',
361
- $type: 'color',
362
- },
363
- },
364
- },
365
- pine: {
366
- bgColor: {
367
- emphasis: {
368
- $value: '{base.display.color.pine.3}',
369
- $type: 'color',
370
- },
371
- },
372
- fgColor: {
373
- $value: '{base.display.color.pine.8}',
374
- $type: 'color',
375
- },
376
- borderColor: {
377
- emphasis: {
378
- $value: '{base.display.color.pine.6}',
379
- $type: 'color',
380
- },
381
- },
382
- },
383
- green: {
384
- bgColor: {
385
- emphasis: {
386
- $value: '{base.display.color.green.3}',
387
- $type: 'color',
388
- },
389
- },
390
- fgColor: {
391
- $value: '{base.display.color.green.8}',
392
- $type: 'color',
393
- },
394
- borderColor: {
395
- emphasis: {
396
- $value: '{base.display.color.green.6}',
397
- $type: 'color',
398
- },
399
- },
400
- },
401
- lime: {
402
- bgColor: {
403
- emphasis: {
404
- $value: '{base.display.color.lime.3}',
405
- $type: 'color',
406
- },
407
- },
408
- fgColor: {
409
- $value: '{base.display.color.lime.8}',
410
- $type: 'color',
411
- },
412
- borderColor: {
413
- emphasis: {
414
- $value: '{base.display.color.lime.6}',
415
- $type: 'color',
416
- },
417
- },
418
- },
419
- olive: {
420
- bgColor: {
421
- emphasis: {
422
- $value: '{base.display.color.olive.3}',
423
- $type: 'color',
424
- },
425
- },
426
- fgColor: {
427
- $value: '{base.display.color.olive.8}',
428
- $type: 'color',
429
- },
430
- borderColor: {
431
- emphasis: {
432
- $value: '{base.display.color.olive.6}',
433
- $type: 'color',
434
- },
435
- },
436
- },
437
- lemon: {
438
- bgColor: {
439
- emphasis: {
440
- $value: '{base.display.color.lemon.3}',
441
- $type: 'color',
442
- },
443
- },
444
- fgColor: {
445
- $value: '{base.display.color.lemon.8}',
446
- $type: 'color',
447
- },
448
- borderColor: {
449
- emphasis: {
450
- $value: '{base.display.color.lemon.6}',
451
- $type: 'color',
452
- },
453
- },
454
- },
455
- yellow: {
456
- bgColor: {
457
- emphasis: {
458
- $value: '{base.display.color.yellow.3}',
459
- $type: 'color',
460
- },
461
- },
462
- fgColor: {
463
- $value: '{base.display.color.yellow.8}',
464
- $type: 'color',
465
- },
466
- borderColor: {
467
- emphasis: {
468
- $value: '{base.display.color.yellow.6}',
469
- $type: 'color',
470
- },
471
- },
472
- },
473
- orange: {
474
- bgColor: {
475
- emphasis: {
476
- $value: '{base.display.color.orange.3}',
477
- $type: 'color',
478
- },
479
- },
480
- fgColor: {
481
- $value: '{base.display.color.orange.8}',
482
- $type: 'color',
483
- },
484
- borderColor: {
485
- emphasis: {
486
- $value: '{base.display.color.orange.6}',
487
- $type: 'color',
488
- },
489
- },
490
- },
491
- red: {
492
- bgColor: {
493
- emphasis: {
494
- $value: '{base.display.color.red.3}',
495
- $type: 'color',
496
- },
497
- },
498
- fgColor: {
499
- $value: '{base.display.color.red.8}',
500
- $type: 'color',
501
- },
502
- borderColor: {
503
- emphasis: {
504
- $value: '{base.display.color.red.6}',
505
- $type: 'color',
506
- },
507
- },
508
- },
509
- coral: {
510
- bgColor: {
511
- emphasis: {
512
- $value: '{base.display.color.coral.3}',
513
- $type: 'color',
514
- },
515
- },
516
- fgColor: {
517
- $value: '{base.display.color.coral.8}',
518
- $type: 'color',
519
- },
520
- borderColor: {
521
- emphasis: {
522
- $value: '{base.display.color.coral.6}',
523
- $type: 'color',
524
- },
525
- },
526
- },
527
- pink: {
528
- bgColor: {
529
- emphasis: {
530
- $value: '{base.display.color.pink.3}',
531
- $type: 'color',
532
- },
533
- },
534
- fgColor: {
535
- $value: '{base.display.color.pink.8}',
536
- $type: 'color',
537
- },
538
- borderColor: {
539
- emphasis: {
540
- $value: '{base.display.color.pink.6}',
541
- $type: 'color',
542
- },
543
- },
544
- },
545
- plum: {
546
- bgColor: {
547
- emphasis: {
548
- $value: '{base.display.color.plum.3}',
549
- $type: 'color',
550
- },
551
- },
552
- fgColor: {
553
- $value: '{base.display.color.plum.8}',
554
- $type: 'color',
555
- },
556
- borderColor: {
557
- emphasis: {
558
- $value: '{base.display.color.plum.6}',
559
- $type: 'color',
560
- },
561
- },
562
- },
563
- purple: {
564
- bgColor: {
565
- emphasis: {
566
- $value: '{base.display.color.purple.3}',
567
- $type: 'color',
568
- },
569
- },
570
- fgColor: {
571
- $value: '{base.display.color.purple.8}',
572
- $type: 'color',
573
- },
574
- borderColor: {
575
- emphasis: {
576
- $value: '{base.display.color.purple.6}',
577
- $type: 'color',
578
- },
579
- },
580
- },
581
- brown: {
582
- bgColor: {
583
- emphasis: {
584
- $value: '{base.display.color.brown.3}',
585
- $type: 'color',
586
- },
587
- },
588
- fgColor: {
589
- $value: '{base.display.color.brown.8}',
590
- $type: 'color',
591
- },
592
- borderColor: {
593
- emphasis: {
594
- $value: '{base.display.color.brown.6}',
595
- $type: 'color',
596
- },
597
- },
598
- },
599
- auburn: {
600
- bgColor: {
601
- emphasis: {
602
- $value: '{base.display.color.auburn.3}',
603
- $type: 'color',
604
- },
605
- },
606
- fgColor: {
607
- $value: '{base.display.color.auburn.8}',
608
- $type: 'color',
609
- },
610
- borderColor: {
611
- emphasis: {
612
- $value: '{base.display.color.auburn.6}',
613
- $type: 'color',
614
- },
615
- },
616
- },
617
- },
618
- }