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