@primer/primitives 10.3.4 → 10.4.0-rc.06084fce

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