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

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 +0 -1992
  2. package/dist/build/schemas/shadowToken.js +0 -27
  3. package/dist/css/base/motion/motion.css +0 -1
  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 +0 -1
  14. package/dist/docs/base/motion/motion.json +0 -14
  15. package/dist/docs/functional/themes/dark-colorblind.json +556 -9776
  16. package/dist/docs/functional/themes/dark-dimmed.json +662 -9926
  17. package/dist/docs/functional/themes/dark-high-contrast.json +4182 -14424
  18. package/dist/docs/functional/themes/dark-tritanopia.json +527 -9629
  19. package/dist/docs/functional/themes/dark.json +493 -9335
  20. package/dist/docs/functional/themes/light-colorblind.json +540 -9712
  21. package/dist/docs/functional/themes/light-high-contrast.json +3886 -14056
  22. package/dist/docs/functional/themes/light-tritanopia.json +486 -9540
  23. package/dist/docs/functional/themes/light.json +454 -9322
  24. package/dist/fallbacks/base/motion/motion.json +0 -1
  25. package/dist/figma/figma.json +10 -1
  26. package/dist/figma/shadows/dark-colorblind.json +1152 -0
  27. package/dist/figma/shadows/dark-dimmed.json +1152 -0
  28. package/dist/figma/shadows/dark-high-contrast.json +1152 -0
  29. package/dist/figma/shadows/dark-tritanopia.json +1152 -0
  30. package/dist/figma/shadows/dark.json +1152 -0
  31. package/dist/figma/shadows/light-colorblind.json +1052 -0
  32. package/dist/figma/shadows/light-high-contrast.json +1052 -0
  33. package/dist/figma/shadows/light-tritanopia.json +1052 -0
  34. package/dist/figma/shadows/light.json +1052 -0
  35. package/dist/figma/themes/dark-colorblind.json +3728 -3975
  36. package/dist/figma/themes/dark-dimmed.json +3690 -4044
  37. package/dist/figma/themes/dark-high-contrast.json +3166 -4658
  38. package/dist/figma/themes/dark-tritanopia.json +3819 -3952
  39. package/dist/figma/themes/dark.json +4274 -4158
  40. package/dist/figma/themes/light-colorblind.json +3639 -3923
  41. package/dist/figma/themes/light-high-contrast.json +3033 -4516
  42. package/dist/figma/themes/light-tritanopia.json +3748 -3921
  43. package/dist/figma/themes/light.json +3771 -3771
  44. package/dist/internalCss/dark-colorblind.css +2 -2
  45. package/dist/internalCss/dark-dimmed.css +2 -2
  46. package/dist/internalCss/dark-high-contrast.css +2 -2
  47. package/dist/internalCss/dark-tritanopia.css +2 -2
  48. package/dist/internalCss/dark.css +2 -2
  49. package/dist/internalCss/light-colorblind.css +2 -2
  50. package/dist/internalCss/light-high-contrast.css +2 -2
  51. package/dist/internalCss/light-tritanopia.css +2 -2
  52. package/dist/internalCss/light.css +2 -2
  53. package/dist/styleLint/base/motion/motion.json +0 -14
  54. package/dist/styleLint/functional/themes/dark-colorblind.json +556 -9776
  55. package/dist/styleLint/functional/themes/dark-dimmed.json +683 -9947
  56. package/dist/styleLint/functional/themes/dark-high-contrast.json +4183 -14425
  57. package/dist/styleLint/functional/themes/dark-tritanopia.json +527 -9629
  58. package/dist/styleLint/functional/themes/dark.json +493 -9335
  59. package/dist/styleLint/functional/themes/light-colorblind.json +540 -9712
  60. package/dist/styleLint/functional/themes/light-high-contrast.json +791 -10961
  61. package/dist/styleLint/functional/themes/light-tritanopia.json +486 -9540
  62. package/dist/styleLint/functional/themes/light.json +454 -9322
  63. package/package.json +1 -1
  64. package/src/tokens/base/motion/timing.json5 +0 -4
  65. package/src/tokens/component/header.json5 +0 -3
  66. package/src/tokens/functional/color/dark/display-dark.json5 +1258 -0
  67. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +199 -0
  68. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +618 -0
  69. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +145 -0
  70. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +97 -0
  71. package/src/tokens/functional/color/dark/patterns-dark.json5 +2589 -0
  72. package/src/tokens/functional/color/light/display-light.json5 +1163 -0
  73. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +581 -0
  74. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +145 -0
  75. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +87 -0
  76. package/src/tokens/functional/color/light/patterns-light.json5 +2583 -0
  77. package/src/tokens/functional/color/syntax.json5 +210 -256
  78. package/src/tokens/functional/shadow/dark.json5 +369 -0
  79. package/src/tokens/functional/shadow/light.json5 +363 -0
  80. package/src/tokens/component/button.json5 +0 -1527
  81. package/src/tokens/component/label.json5 +0 -1942
  82. package/src/tokens/component/menu.json5 +0 -24
  83. package/src/tokens/component/selectMenu.json5 +0 -38
  84. package/src/tokens/component/sideNav.json5 +0 -22
  85. package/src/tokens/component/treeView.json5 +0 -24
  86. package/src/tokens/component/underlineNav.json5 +0 -56
  87. package/src/tokens/functional/color/control.json5 +0 -1087
  88. package/src/tokens/functional/color/display.json5 +0 -2170
  89. package/src/tokens/functional/color/selection.json5 +0 -22
  90. package/src/tokens/functional/shadow/shadow.json5 +0 -677
package/src/tokens/component/button.json5 DELETED
@@ -1,1527 +0,0 @@
1
- {
2
- button: {
3
- default: {
4
- fgColor: {
5
- rest: {
6
- $value: '{control.fgColor.rest}',
7
- $type: 'color',
8
- $extensions: {
9
- 'org.primer.figma': {
10
- collection: 'mode',
11
- group: 'component (internal)',
12
- scopes: ['fgColor'],
13
- },
14
- 'org.primer.overrides': {
15
- dark: {
16
- $value: '{control.fgColor.rest}',
17
- },
18
- },
19
- },
20
- },
21
- },
22
- bgColor: {
23
- rest: {
24
- $value: '{control.bgColor.rest}',
25
- $type: 'color',
26
- $extensions: {
27
- 'org.primer.figma': {
28
- collection: 'mode',
29
- group: 'component (internal)',
30
- scopes: ['bgColor'],
31
- },
32
- 'org.primer.overrides': {
33
- dark: {
34
- $value: '{control.bgColor.rest}',
35
- },
36
- },
37
- },
38
- },
39
- hover: {
40
- $value: '{control.bgColor.hover}',
41
- $type: 'color',
42
- $extensions: {
43
- 'org.primer.figma': {
44
- collection: 'mode',
45
- group: 'component (internal)',
46
- scopes: ['bgColor'],
47
- },
48
- 'org.primer.overrides': {
49
- dark: {
50
- $value: '{control.bgColor.hover}',
51
- },
52
- },
53
- },
54
- },
55
- active: {
56
- $value: '{control.bgColor.active}',
57
- $type: 'color',
58
- $extensions: {
59
- 'org.primer.figma': {
60
- collection: 'mode',
61
- group: 'component (internal)',
62
- scopes: ['bgColor'],
63
- },
64
- },
65
- },
66
- selected: {
67
- $value: '{control.bgColor.active}',
68
- $type: 'color',
69
- $extensions: {
70
- 'org.primer.figma': {
71
- collection: 'mode',
72
- group: 'component (internal)',
73
- scopes: ['bgColor'],
74
- },
75
- },
76
- },
77
- disabled: {
78
- $value: '{control.bgColor.disabled}',
79
- $type: 'color',
80
- $extensions: {},
81
- },
82
- },
83
- borderColor: {
84
- rest: {
85
- $value: '{control.borderColor.rest}',
86
- $type: 'color',
87
- $extensions: {
88
- 'org.primer.figma': {
89
- collection: 'mode',
90
- group: 'component (internal)',
91
- scopes: ['borderColor'],
92
- },
93
- },
94
- },
95
- hover: {
96
- $value: '{button.default.borderColor.rest}',
97
- $type: 'color',
98
- $extensions: {
99
- 'org.primer.figma': {
100
- collection: 'mode',
101
- group: 'component (internal)',
102
- scopes: ['borderColor'],
103
- },
104
- },
105
- },
106
- active: {
107
- $value: '{control.borderColor.rest}',
108
- $type: 'color',
109
- $extensions: {
110
- 'org.primer.figma': {
111
- collection: 'mode',
112
- group: 'component (internal)',
113
- scopes: ['borderColor'],
114
- },
115
- 'org.primer.overrides': {
116
- dark: {
117
- $value: '{button.default.borderColor.rest}',
118
- },
119
- },
120
- },
121
- },
122
- disabled: {
123
- $value: '{control.borderColor.disabled}',
124
- $type: 'color',
125
- $extensions: {
126
- 'org.primer.figma': {
127
- collection: 'mode',
128
- group: 'component (internal)',
129
- scopes: ['borderColor'],
130
- },
131
- 'org.primer.overrides': {
132
- dark: {
133
- $value: '{control.borderColor.disabled}',
134
- },
135
- },
136
- },
137
- },
138
- },
139
- },
140
- primary: {
141
- fgColor: {
142
- rest: {
143
- $value: '{fgColor.white}',
144
- $type: 'color',
145
- $extensions: {
146
- 'org.primer.figma': {
147
- collection: 'mode',
148
- group: 'component (internal)',
149
- scopes: ['fgColor'],
150
- },
151
- 'org.primer.overrides': {
152
- dark: {
153
- $value: '{fgColor.white}',
154
- },
155
- 'dark-dimmed': {
156
- $value: '#ffffff',
157
- },
158
- },
159
- },
160
- },
161
- disabled: {
162
- $value: '{base.color.neutral.0}',
163
- $type: 'color',
164
- $extensions: {
165
- 'org.primer.figma': {
166
- collection: 'mode',
167
- group: 'component (internal)',
168
- scopes: ['fgColor'],
169
- },
170
- 'org.primer.overrides': {
171
- dark: {
172
- $value: '{base.color.neutral.13}',
173
- alpha: 0.4,
174
- },
175
- },
176
- },
177
- alpha: 0.8,
178
- },
179
- },
180
- iconColor: {
181
- rest: {
182
- $value: '{fgColor.white}',
183
- $type: 'color',
184
- $extensions: {
185
- 'org.primer.figma': {
186
- collection: 'mode',
187
- group: 'component (internal)',
188
- scopes: ['fgColor'],
189
- },
190
- 'org.primer.overrides': {
191
- light: {
192
- $value: '{fgColor.white}',
193
- alpha: 0.8,
194
- },
195
- dark: {
196
- $value: '{fgColor.white}',
197
- },
198
- 'dark-dimmed': {
199
- $value: '#ffffff',
200
- },
201
- },
202
- },
203
- },
204
- },
205
- bgColor: {
206
- rest: {
207
- $value: '{bgColor.success.emphasis}',
208
- $type: 'color',
209
- $extensions: {
210
- 'org.primer.figma': {
211
- collection: 'mode',
212
- group: 'component (internal)',
213
- scopes: ['bgColor'],
214
- },
215
- 'org.primer.overrides': {
216
- dark: {
217
- $value: '{bgColor.success.emphasis}',
218
- },
219
- 'light-high-contrast': {
220
- $value: '{base.color.green.5}',
221
- },
222
- },
223
- },
224
- },
225
- hover: {
226
- $value: '#1c8139',
227
- $type: 'color',
228
- $extensions: {
229
- 'org.primer.figma': {
230
- collection: 'mode',
231
- group: 'component (internal)',
232
- scopes: ['bgColor'],
233
- },
234
- 'org.primer.overrides': {
235
- dark: {
236
- $value: '#29903B',
237
- },
238
- 'dark-dimmed': {
239
- $value: '#3b8640',
240
- },
241
- 'dark-tritanopia': {
242
- $value: '#2a7aef',
243
- },
244
- 'dark-protanopia-deuteranopia': {
245
- $value: '#2a7aef',
246
- },
247
- 'dark-high-contrast': {
248
- $value: '#08792b',
249
- },
250
- 'light-tritanopia': {
251
- $value: '#0864d1',
252
- },
253
- 'light-protanopia-deuteranopia': {
254
- $value: '#0864d1',
255
- },
256
- 'light-high-contrast': {
257
- $value: '#04571e',
258
- },
259
- },
260
- },
261
- },
262
- active: {
263
- $value: '#197935',
264
- $type: 'color',
265
- $extensions: {
266
- 'org.primer.figma': {
267
- collection: 'mode',
268
- group: 'component (internal)',
269
- scopes: ['bgColor'],
270
- },
271
- 'org.primer.overrides': {
272
- dark: {
273
- $value: '#2E9A40',
274
- },
275
- 'dark-dimmed': {
276
- $value: '#428f46',
277
- },
278
- 'dark-tritanopia': {
279
- $value: '#3685f3',
280
- },
281
- 'dark-protanopia-deuteranopia': {
282
- $value: '#3685f3',
283
- },
284
- 'dark-high-contrast': {
285
- $value: '#109135',
286
- },
287
- 'light-tritanopia': {
288
- $value: '#075fc8',
289
- },
290
- 'light-protanopia-deuteranopia': {
291
- $value: '#075fc8',
292
- },
293
- 'light-high-contrast': {
294
- $value: '#03501b',
295
- },
296
- },
297
- },
298
- },
299
- disabled: {
300
- $value: '#95d8a6',
301
- $type: 'color',
302
- $extensions: {
303
- 'org.primer.figma': {
304
- collection: 'mode',
305
- group: 'component (internal)',
306
- scopes: ['bgColor'],
307
- },
308
- 'org.primer.overrides': {
309
- dark: {
310
- $value: '#105823',
311
- },
312
- 'dark-dimmed': {
313
- $value: '#50a254',
314
- },
315
- 'dark-tritanopia': {
316
- $value: '#5fabfe',
317
- },
318
- 'dark-protanopia-deuteranopia': {
319
- $value: '{base.color.blue.6}',
320
- },
321
- 'dark-high-contrast': {
322
- $value: '#048f2f',
323
- },
324
- 'light-tritanopia': {
325
- $value: '#92caff',
326
- },
327
- 'light-protanopia-deuteranopia': {
328
- $value: '#92caff',
329
- },
330
- 'light-high-contrast': {
331
- $value: '#85cb97',
332
- },
333
- },
334
- },
335
- },
336
- },
337
- borderColor: {
338
- rest: {
339
- $value: '{base.color.neutral.13}',
340
- $type: 'color',
341
- $extensions: {
342
- 'org.primer.figma': {
343
- collection: 'mode',
344
- group: 'component (internal)',
345
- scopes: ['borderColor'],
346
- },
347
- 'org.primer.overrides': {
348
- dark: {
349
- $value: '{base.color.neutral.13}',
350
- alpha: 0.1,
351
- },
352
- 'dark-high-contrast': {
353
- $value: '{base.color.green.2}',
354
- alpha: 1,
355
- },
356
- 'light-high-contrast': {
357
- $value: '{base.color.green.7}',
358
- alpha: 1,
359
- },
360
- },
361
- },
362
- alpha: 0.15,
363
- },
364
- hover: {
365
- $value: '{button.primary.borderColor.rest}',
366
- $type: 'color',
367
- $extensions: {
368
- 'org.primer.figma': {
369
- collection: 'mode',
370
- group: 'component (internal)',
371
- scopes: ['borderColor'],
372
- },
373
- 'org.primer.overrides': {
374
- dark: {
375
- $value: '{button.primary.borderColor.rest}',
376
- },
377
- 'dark-high-contrast': {
378
- $value: '{base.color.green.2}',
379
- alpha: 1,
380
- },
381
- 'light-high-contrast': {
382
- $value: '{base.color.green.7}',
383
- alpha: 1,
384
- },
385
- },
386
- },
387
- },
388
- active: {
389
- $value: '{button.primary.borderColor.rest}',
390
- $type: 'color',
391
- $extensions: {
392
- 'org.primer.figma': {
393
- collection: 'mode',
394
- group: 'component (internal)',
395
- scopes: ['borderColor'],
396
- },
397
- 'org.primer.overrides': {
398
- dark: {
399
- $value: '{button.primary.borderColor.rest}',
400
- },
401
- 'dark-high-contrast': {
402
- $value: '{base.color.green.2}',
403
- alpha: 1,
404
- },
405
- 'light-high-contrast': {
406
- $value: '{base.color.green.7}',
407
- alpha: 1,
408
- },
409
- },
410
- },
411
- },
412
- disabled: {
413
- $value: '{button.primary.bgColor.disabled}',
414
- $type: 'color',
415
- $extensions: {
416
- 'org.primer.figma': {
417
- collection: 'mode',
418
- group: 'component (internal)',
419
- scopes: ['borderColor'],
420
- },
421
- 'org.primer.overrides': {
422
- dark: {
423
- $value: '#105823',
424
- },
425
- 'dark-dimmed': {
426
- $value: '#50a254',
427
- },
428
- 'dark-tritanopia': {
429
- $value: '#5fabfe',
430
- },
431
- 'dark-protanopia-deuteranopia': {
432
- $value: '#1158c7',
433
- },
434
- 'dark-high-contrast': {
435
- $value: '{base.color.green.2}',
436
- alpha: 0.4,
437
- },
438
- 'light-high-contrast': {
439
- $value: '#85cb97',
440
- },
441
- },
442
- },
443
- },
444
- },
445
- },
446
- invisible: {
447
- fgColor: {
448
- rest: {
449
- $value: '{control.fgColor.rest}',
450
- $type: 'color',
451
- $extensions: {
452
- 'org.primer.figma': {
453
- collection: 'mode',
454
- group: 'component (internal)',
455
- scopes: ['fgColor'],
456
- },
457
- 'org.primer.overrides': {
458
- dark: {
459
- $value: '{control.fgColor.rest}',
460
- },
461
- },
462
- },
463
- },
464
- hover: {
465
- $value: '{control.fgColor.rest}',
466
- $type: 'color',
467
- $extensions: {
468
- 'org.primer.figma': {
469
- collection: 'mode',
470
- group: 'component (internal)',
471
- scopes: ['fgColor'],
472
- },
473
- 'org.primer.overrides': {
474
- dark: {
475
- $value: '{control.fgColor.rest}',
476
- },
477
- 'light-high-contrast': {
478
- $value: '{base.color.neutral.11}',
479
- },
480
- },
481
- },
482
- },
483
- active: {
484
- $value: '{control.fgColor.rest}',
485
- $type: 'color',
486
- $extensions: {
487
- 'org.primer.figma': {
488
- collection: 'mode',
489
- group: 'component (internal)',
490
- scopes: ['fgColor'],
491
- },
492
- 'org.primer.overrides': {
493
- dark: {
494
- $value: '{control.fgColor.rest}',
495
- },
496
- },
497
- },
498
- },
499
- disabled: {
500
- $value: '{control.fgColor.disabled}',
501
- $type: 'color',
502
- $extensions: {
503
- 'org.primer.figma': {
504
- collection: 'mode',
505
- group: 'component (internal)',
506
- scopes: ['fgColor'],
507
- },
508
- 'org.primer.overrides': {
509
- dark: {
510
- $value: '{control.fgColor.disabled}',
511
- },
512
- },
513
- },
514
- },
515
- },
516
- iconColor: {
517
- rest: {
518
- $value: '{fgColor.muted}',
519
- $type: 'color',
520
- $extensions: {
521
- 'org.primer.figma': {
522
- collection: 'mode',
523
- group: 'component (internal)',
524
- scopes: ['fgColor'],
525
- },
526
- 'org.primer.overrides': {
527
- dark: {
528
- $value: '{fgColor.muted}',
529
- },
530
- 'dark-dimmed': {
531
- $value: '{base.color.neutral.10}',
532
- },
533
- 'dark-high-contrast': {
534
- $value: '{base.color.neutral.11}',
535
- },
536
- },
537
- },
538
- },
539
- hover: {
540
- $value: '{fgColor.muted}',
541
- $type: 'color',
542
- $extensions: {
543
- 'org.primer.figma': {
544
- collection: 'mode',
545
- group: 'component (internal)',
546
- scopes: ['fgColor'],
547
- },
548
- 'org.primer.overrides': {
549
- dark: {
550
- $value: '{fgColor.muted}',
551
- },
552
- 'dark-dimmed': {
553
- $value: '{base.color.neutral.10}',
554
- },
555
- 'dark-high-contrast': {
556
- $value: '{base.color.neutral.11}',
557
- },
558
- 'light-high-contrast': {
559
- $value: '{base.color.neutral.11}',
560
- },
561
- },
562
- },
563
- },
564
- disabled: {
565
- $value: '{control.fgColor.disabled}',
566
- $type: 'color',
567
- $extensions: {
568
- 'org.primer.figma': {
569
- collection: 'mode',
570
- group: 'component (internal)',
571
- scopes: ['fgColor'],
572
- },
573
- 'org.primer.overrides': {
574
- dark: {
575
- $value: '{control.fgColor.disabled}',
576
- },
577
- },
578
- },
579
- },
580
- },
581
- bgColor: {
582
- rest: {
583
- $value: '{control.transparent.bgColor.rest}',
584
- $type: 'color',
585
- $extensions: {
586
- 'org.primer.figma': {
587
- collection: 'mode',
588
- group: 'component (internal)',
589
- scopes: ['bgColor'],
590
- },
591
- 'org.primer.overrides': {
592
- dark: {
593
- $value: '{control.transparent.bgColor.rest}',
594
- },
595
- },
596
- },
597
- },
598
- hover: {
599
- $value: '{control.transparent.bgColor.hover}',
600
- $type: 'color',
601
- $extensions: {
602
- 'org.primer.figma': {
603
- collection: 'mode',
604
- group: 'component (internal)',
605
- scopes: ['bgColor'],
606
- },
607
- 'org.primer.overrides': {
608
- dark: {
609
- $value: '{control.transparent.bgColor.hover}',
610
- },
611
- 'dark-high-contrast': {
612
- $value: '{base.color.neutral.2}',
613
- alpha: null,
614
- },
615
- },
616
- },
617
- },
618
- active: {
619
- $value: '{control.transparent.bgColor.active}',
620
- $type: 'color',
621
- $extensions: {
622
- 'org.primer.figma': {
623
- collection: 'mode',
624
- group: 'component (internal)',
625
- scopes: ['bgColor'],
626
- },
627
- 'org.primer.overrides': {
628
- dark: {
629
- $value: '{control.transparent.bgColor.active}',
630
- },
631
- 'dark-high-contrast': {
632
- $value: '{base.color.neutral.3}',
633
- alpha: null,
634
- },
635
- },
636
- },
637
- },
638
- disabled: {
639
- $value: '{base.color.transparent}',
640
- $type: 'color',
641
- $extensions: {
642
- 'org.primer.figma': {
643
- collection: 'mode',
644
- group: 'component (internal)',
645
- scopes: ['bgColor'],
646
- },
647
- 'org.primer.overrides': {
648
- dark: {
649
- $value: '{base.color.transparent}',
650
- },
651
- },
652
- },
653
- },
654
- },
655
- borderColor: {
656
- rest: {
657
- $value: '{control.transparent.borderColor.rest}',
658
- $type: 'color',
659
- $extensions: {
660
- 'org.primer.figma': {
661
- collection: 'mode',
662
- group: 'component (internal)',
663
- scopes: ['borderColor'],
664
- },
665
- 'org.primer.overrides': {
666
- dark: {
667
- $value: '{control.transparent.borderColor.rest}',
668
- },
669
- },
670
- },
671
- },
672
- hover: {
673
- $value: '{control.transparent.borderColor.hover}',
674
- $type: 'color',
675
- $extensions: {
676
- 'org.primer.figma': {
677
- collection: 'mode',
678
- group: 'component (internal)',
679
- scopes: ['borderColor'],
680
- },
681
- 'org.primer.overrides': {
682
- dark: {
683
- $value: '{control.transparent.borderColor.hover}',
684
- },
685
- },
686
- },
687
- },
688
- disabled: {
689
- $value: '{base.color.transparent}',
690
- $type: 'color',
691
- $extensions: {
692
- 'org.primer.figma': {
693
- collection: 'mode',
694
- group: 'component (internal)',
695
- scopes: ['borderColor'],
696
- },
697
- 'org.primer.overrides': {
698
- dark: {
699
- $value: '{base.color.transparent}',
700
- },
701
- },
702
- },
703
- },
704
- },
705
- },
706
- outline: {
707
- fgColor: {
708
- rest: {
709
- $value: '{fgColor.accent}',
710
- $type: 'color',
711
- $extensions: {
712
- 'org.primer.figma': {
713
- collection: 'mode',
714
- group: 'component (internal)',
715
- scopes: ['fgColor'],
716
- },
717
- 'org.primer.overrides': {
718
- dark: {
719
- $value: '{base.color.blue.4}',
720
- },
721
- },
722
- },
723
- },
724
- hover: {
725
- $value: '{base.color.neutral.0}',
726
- $type: 'color',
727
- $extensions: {
728
- 'org.primer.figma': {
729
- collection: 'mode',
730
- group: 'component (internal)',
731
- scopes: ['fgColor'],
732
- },
733
- 'org.primer.overrides': {
734
- dark: {
735
- $value: '{base.color.blue.3}',
736
- },
737
- },
738
- },
739
- },
740
- active: {
741
- $value: '{base.color.neutral.0}',
742
- $type: 'color',
743
- $extensions: {
744
- 'org.primer.figma': {
745
- collection: 'mode',
746
- group: 'component (internal)',
747
- scopes: ['fgColor'],
748
- },
749
- 'org.primer.overrides': {
750
- dark: {
751
- $value: '{base.color.neutral.13}',
752
- },
753
- },
754
- },
755
- },
756
- disabled: {
757
- $value: '{fgColor.accent}',
758
- $type: 'color',
759
- $extensions: {
760
- 'org.primer.figma': {
761
- collection: 'mode',
762
- group: 'component (internal)',
763
- scopes: ['fgColor'],
764
- },
765
- 'org.primer.overrides': {
766
- dark: {
767
- $value: '{fgColor.accent}',
768
- alpha: 0.5,
769
- },
770
- 'dark-dimmed': {
771
- $value: '#478be680',
772
- },
773
- },
774
- },
775
- alpha: 0.5,
776
- },
777
- },
778
- bgColor: {
779
- rest: {
780
- $value: '{control.bgColor.rest}',
781
- $type: 'color',
782
- $extensions: {
783
- 'org.primer.figma': {
784
- collection: 'mode',
785
- group: 'component (internal)',
786
- scopes: ['bgColor'],
787
- },
788
- 'org.primer.overrides': {
789
- dark: {
790
- $value: '{base.color.neutral.12}',
791
- },
792
- },
793
- },
794
- },
795
- hover: {
796
- $value: '{bgColor.accent.emphasis}',
797
- $type: 'color',
798
- $extensions: {
799
- 'org.primer.figma': {
800
- collection: 'mode',
801
- group: 'component (internal)',
802
- scopes: ['bgColor'],
803
- },
804
- 'org.primer.overrides': {
805
- dark: {
806
- $value: '{control.bgColor.hover}',
807
- },
808
- 'dark-tritanopia': {
809
- $value: '#262c36',
810
- },
811
- },
812
- },
813
- },
814
- active: {
815
- $value: '#0757ba',
816
- $type: 'color',
817
- $extensions: {
818
- 'org.primer.figma': {
819
- collection: 'mode',
820
- group: 'component (internal)',
821
- scopes: ['bgColor'],
822
- },
823
- 'org.primer.overrides': {
824
- dark: {
825
- $value: '{base.color.blue.7}',
826
- },
827
- 'dark-tritanopia': {
828
- $value: '#0d419d',
829
- },
830
- 'light-high-contrast': {
831
- $value: '#033f9d',
832
- },
833
- },
834
- },
835
- },
836
- disabled: {
837
- $value: '{control.bgColor.disabled}',
838
- $type: 'color',
839
- $extensions: {
840
- 'org.primer.figma': {
841
- collection: 'mode',
842
- group: 'component (internal)',
843
- scopes: ['bgColor'],
844
- },
845
- 'org.primer.overrides': {
846
- dark: {
847
- $value: '{control.bgColor.disabled}',
848
- },
849
- 'dark-tritanopia': {
850
- $value: '#212830',
851
- },
852
- },
853
- },
854
- },
855
- },
856
- borderColor: {
857
- hover: {
858
- $value: '{button.primary.borderColor.hover}',
859
- $type: 'color',
860
- $extensions: {
861
- 'org.primer.figma': {
862
- collection: 'mode',
863
- group: 'component (internal)',
864
- scopes: ['borderColor'],
865
- },
866
- 'org.primer.overrides': {
867
- dark: {
868
- $value: '{button.default.borderColor.hover}',
869
- },
870
- },
871
- },
872
- },
873
- active: {
874
- $value: '{button.outline.borderColor.hover}',
875
- $type: 'color',
876
- $extensions: {
877
- 'org.primer.figma': {
878
- collection: 'mode',
879
- group: 'component (internal)',
880
- scopes: ['borderColor'],
881
- },
882
- },
883
- },
884
- },
885
- },
886
- danger: {
887
- fgColor: {
888
- rest: {
889
- $value: '{fgColor.danger}',
890
- $type: 'color',
891
- $extensions: {
892
- 'org.primer.figma': {
893
- collection: 'mode',
894
- group: 'component (internal)',
895
- scopes: ['fgColor'],
896
- },
897
- 'org.primer.overrides': {
898
- dark: {
899
- $value: '#FA5E55',
900
- },
901
- 'dark-dimmed': {
902
- $value: '#ea5c53',
903
- },
904
- 'dark-protanopia-deuteranopia': {
905
- $value: '{fgColor.danger}',
906
- },
907
- 'dark-high-contrast': {
908
- $value: '{base.color.red.2}',
909
- },
910
- },
911
- },
912
- },
913
- hover: {
914
- $value: '{base.color.neutral.0}',
915
- $type: 'color',
916
- $extensions: {
917
- 'org.primer.figma': {
918
- collection: 'mode',
919
- group: 'component (internal)',
920
- scopes: ['fgColor'],
921
- },
922
- 'org.primer.overrides': {
923
- dark: {
924
- $value: '{base.color.neutral.13}',
925
- },
926
- },
927
- },
928
- },
929
- active: {
930
- $value: '{base.color.neutral.0}',
931
- $type: 'color',
932
- $extensions: {
933
- 'org.primer.figma': {
934
- collection: 'mode',
935
- group: 'component (internal)',
936
- scopes: ['fgColor'],
937
- },
938
- 'org.primer.overrides': {
939
- dark: {
940
- $value: '{base.color.neutral.13}',
941
- },
942
- },
943
- },
944
- },
945
- disabled: {
946
- $value: '{fgColor.danger}',
947
- $type: 'color',
948
- $extensions: {
949
- 'org.primer.figma': {
950
- collection: 'mode',
951
- group: 'component (internal)',
952
- scopes: ['fgColor'],
953
- },
954
- 'org.primer.overrides': {
955
- dark: {
956
- $value: '{fgColor.danger}',
957
- alpha: 0.5,
958
- },
959
- },
960
- },
961
- alpha: 0.5,
962
- },
963
- },
964
- iconColor: {
965
- rest: {
966
- $value: '{fgColor.danger}',
967
- $type: 'color',
968
- $extensions: {
969
- 'org.primer.figma': {
970
- collection: 'mode',
971
- group: 'component (internal)',
972
- scopes: ['fgColor'],
973
- },
974
- 'org.primer.overrides': {
975
- dark: {
976
- $value: '#FA5E55',
977
- },
978
- 'dark-dimmed': {
979
- $value: '#ea5c53',
980
- },
981
- 'dark-protanopia-deuteranopia': {
982
- $value: '#f0883e',
983
- },
984
- 'dark-high-contrast': {
985
- $value: '#ffb1af',
986
- },
987
- },
988
- },
989
- },
990
- hover: {
991
- $value: '{base.color.neutral.0}',
992
- $type: 'color',
993
- $extensions: {
994
- 'org.primer.figma': {
995
- collection: 'mode',
996
- group: 'component (internal)',
997
- scopes: ['fgColor'],
998
- },
999
- 'org.primer.overrides': {
1000
- dark: {
1001
- $value: '{base.color.neutral.13}',
1002
- },
1003
- },
1004
- },
1005
- },
1006
- },
1007
- bgColor: {
1008
- rest: {
1009
- $value: '{control.bgColor.rest}',
1010
- $type: 'color',
1011
- $extensions: {
1012
- 'org.primer.figma': {
1013
- collection: 'mode',
1014
- group: 'component (internal)',
1015
- scopes: ['bgColor'],
1016
- },
1017
- 'org.primer.overrides': {
1018
- dark: {
1019
- $value: '{control.bgColor.rest}',
1020
- },
1021
- },
1022
- },
1023
- },
1024
- hover: {
1025
- $value: '{base.color.red.6}',
1026
- $type: 'color',
1027
- $extensions: {
1028
- 'org.primer.figma': {
1029
- collection: 'mode',
1030
- group: 'component (internal)',
1031
- scopes: ['bgColor'],
1032
- },
1033
- 'org.primer.overrides': {
1034
- dark: {
1035
- $value: '{base.color.red.6}',
1036
- },
1037
- 'dark-protanopia-deuteranopia': {
1038
- $value: '{base.color.orange.6}',
1039
- },
1040
- 'dark-high-contrast': {
1041
- $value: '{bgColor.danger.emphasis}',
1042
- },
1043
- 'light-protanopia-deuteranopia': {
1044
- $value: '{base.color.orange.6}',
1045
- },
1046
- },
1047
- },
1048
- },
1049
- active: {
1050
- $value: '#8b0820',
1051
- $type: 'color',
1052
- $extensions: {
1053
- 'org.primer.figma': {
1054
- collection: 'mode',
1055
- group: 'component (internal)',
1056
- scopes: ['bgColor'],
1057
- },
1058
- 'org.primer.overrides': {
1059
- dark: {
1060
- $value: '#D03533',
1061
- },
1062
- 'dark-dimmed': {
1063
- $value: '#c33d38',
1064
- },
1065
- 'dark-protanopia-deuteranopia': {
1066
- $value: '#b5531d',
1067
- },
1068
- 'dark-high-contrast': {
1069
- $value: '{bgColor.danger.emphasis}',
1070
- },
1071
- 'light-protanopia-deuteranopia': {
1072
- $value: '#7e2f00',
1073
- },
1074
- 'light-high-contrast': {
1075
- $value: '#74041a',
1076
- },
1077
- },
1078
- },
1079
- },
1080
- disabled: {
1081
- $value: '{control.bgColor.disabled}',
1082
- $type: 'color',
1083
- $extensions: {
1084
- 'org.primer.figma': {
1085
- collection: 'mode',
1086
- group: 'component (internal)',
1087
- scopes: ['bgColor'],
1088
- },
1089
- 'org.primer.overrides': {
1090
- dark: {
1091
- $value: '{control.bgColor.disabled}',
1092
- },
1093
- },
1094
- },
1095
- },
1096
- },
1097
- borderColor: {
1098
- rest: {
1099
- $value: '{control.borderColor.rest}',
1100
- $type: 'color',
1101
- $extensions: {
1102
- 'org.primer.figma': {
1103
- collection: 'mode',
1104
- group: 'component (internal)',
1105
- scopes: ['borderColor'],
1106
- },
1107
- 'org.primer.overrides': {
1108
- dark: {
1109
- $value: '{control.borderColor.rest}',
1110
- },
1111
- },
1112
- },
1113
- },
1114
- hover: {
1115
- $value: '{button.primary.borderColor.rest}',
1116
- $type: 'color',
1117
- $extensions: {
1118
- 'org.primer.figma': {
1119
- collection: 'mode',
1120
- group: 'component (internal)',
1121
- scopes: ['borderColor'],
1122
- },
1123
- 'org.primer.overrides': {
1124
- dark: {
1125
- $value: '{button.primary.borderColor.rest}',
1126
- },
1127
- 'dark-high-contrast': {
1128
- $value: '{base.color.red.2}',
1129
- alpha: 1,
1130
- },
1131
- },
1132
- },
1133
- },
1134
- active: {
1135
- $value: '{button.danger.borderColor.hover}',
1136
- $type: 'color',
1137
- $extensions: {
1138
- 'org.primer.figma': {
1139
- collection: 'mode',
1140
- group: 'component (internal)',
1141
- scopes: ['borderColor'],
1142
- },
1143
- 'org.primer.overrides': {
1144
- dark: {
1145
- $value: '{button.danger.borderColor.hover}',
1146
- },
1147
- 'dark-high-contrast': {
1148
- $value: '{base.color.red.2}',
1149
- alpha: 1,
1150
- },
1151
- },
1152
- },
1153
- },
1154
- },
1155
- },
1156
- inactive: {
1157
- fgColor: {
1158
- $value: '{base.color.neutral.9}',
1159
- $type: 'color',
1160
- $extensions: {
1161
- 'org.primer.figma': {
1162
- collection: 'mode',
1163
- group: 'component (internal)',
1164
- scopes: ['fgColor'],
1165
- },
1166
- 'org.primer.overrides': {
1167
- dark: {
1168
- $value: '{base.color.neutral.9}',
1169
- },
1170
- 'dark-dimmed': {
1171
- $value: '{base.color.neutral.8}',
1172
- },
1173
- 'dark-high-contrast': {
1174
- $value: '{base.color.neutral.10}',
1175
- },
1176
- 'light-high-contrast': {
1177
- $value: '{base.color.neutral.10}',
1178
- },
1179
- },
1180
- },
1181
- },
1182
- bgColor: {
1183
- $value: '{base.color.neutral.3}',
1184
- $type: 'color',
1185
- $extensions: {
1186
- 'org.primer.figma': {
1187
- collection: 'mode',
1188
- group: 'component (internal)',
1189
- scopes: ['bgColor'],
1190
- },
1191
- 'org.primer.overrides': {
1192
- dark: {
1193
- $value: '{base.color.neutral.4}',
1194
- },
1195
- 'dark-dimmed': {
1196
- $value: '{base.color.neutral.5}',
1197
- },
1198
- 'dark-high-contrast': {
1199
- $value: '{control.bgColor.rest}',
1200
- },
1201
- 'light-high-contrast': {
1202
- $value: '{control.bgColor.rest}',
1203
- },
1204
- },
1205
- },
1206
- },
1207
- },
1208
- star: {
1209
- iconColor: {
1210
- $value: '{base.color.yellow.2}',
1211
- $type: 'color',
1212
- $extensions: {
1213
- 'org.primer.figma': {
1214
- collection: 'mode',
1215
- group: 'component (internal)',
1216
- scopes: ['bgColor'],
1217
- },
1218
- 'org.primer.overrides': {
1219
- dark: {
1220
- $value: '{base.color.yellow.2}',
1221
- },
1222
- },
1223
- },
1224
- },
1225
- },
1226
- },
1227
- buttonCounter: {
1228
- default: {
1229
- bgColor: {
1230
- rest: {
1231
- $value: '{bgColor.neutral.muted}',
1232
- $type: 'color',
1233
- $extensions: {
1234
- 'org.primer.figma': {
1235
- collection: 'mode',
1236
- group: 'component (internal)',
1237
- scopes: ['bgColor'],
1238
- },
1239
- 'org.primer.overrides': {
1240
- dark: {
1241
- $value: '{base.color.neutral.6}',
1242
- },
1243
- 'light-high-contrast': '{base.color.neutral.7}',
1244
- },
1245
- },
1246
- },
1247
- },
1248
- },
1249
- invisible: {
1250
- bgColor: {
1251
- rest: {
1252
- $value: '{bgColor.neutral.muted}',
1253
- $type: 'color',
1254
- $extensions: {
1255
- 'org.primer.figma': {
1256
- collection: 'mode',
1257
- group: 'component (internal)',
1258
- scopes: ['bgColor'],
1259
- },
1260
- 'org.primer.overrides': {
1261
- dark: {
1262
- $value: '{bgColor.neutral.muted}',
1263
- },
1264
- },
1265
- },
1266
- },
1267
- },
1268
- },
1269
- primary: {
1270
- bgColor: {
1271
- rest: {
1272
- $value: '{base.color.green.9}',
1273
- $type: 'color',
1274
- $extensions: {
1275
- 'org.primer.figma': {
1276
- collection: 'mode',
1277
- group: 'component (internal)',
1278
- scopes: ['bgColor'],
1279
- },
1280
- 'org.primer.overrides': {
1281
- dark: {
1282
- $value: '{base.color.green.9}',
1283
- alpha: 0.2,
1284
- },
1285
- 'dark-high-contrast': {
1286
- $value: '{base.color.neutral.0}',
1287
- alpha: 0.15,
1288
- },
1289
- },
1290
- },
1291
- alpha: 0.2,
1292
- },
1293
- },
1294
- },
1295
- outline: {
1296
- bgColor: {
1297
- rest: {
1298
- $value: '{bgColor.accent.emphasis}',
1299
- $type: 'color',
1300
- $extensions: {
1301
- 'org.primer.figma': {
1302
- collection: 'mode',
1303
- group: 'component (internal)',
1304
- scopes: ['bgColor'],
1305
- },
1306
- 'org.primer.overrides': {
1307
- dark: {
1308
- $value: '{base.color.blue.9}',
1309
- alpha: 0.2,
1310
- },
1311
- },
1312
- },
1313
- alpha: 0.1,
1314
- },
1315
- hover: {
1316
- $value: '{base.color.neutral.0}',
1317
- $type: 'color',
1318
- $extensions: {
1319
- 'org.primer.figma': {
1320
- collection: 'mode',
1321
- group: 'component (internal)',
1322
- scopes: ['bgColor'],
1323
- },
1324
- 'org.primer.overrides': {
1325
- dark: {
1326
- $value: '{base.color.blue.9}',
1327
- alpha: 0.2,
1328
- },
1329
- },
1330
- },
1331
- alpha: 0.2,
1332
- },
1333
- disabled: {
1334
- $value: '{bgColor.accent.emphasis}',
1335
- $type: 'color',
1336
- $extensions: {
1337
- 'org.primer.figma': {
1338
- collection: 'mode',
1339
- group: 'component (internal)',
1340
- scopes: ['bgColor'],
1341
- },
1342
- 'org.primer.overrides': {
1343
- dark: {
1344
- $value: '{bgColor.accent.emphasis}',
1345
- alpha: 0.05,
1346
- },
1347
- },
1348
- },
1349
- alpha: 0.05,
1350
- },
1351
- },
1352
- fgColor: {
1353
- rest: {
1354
- $value: '{base.color.blue.6}',
1355
- $type: 'color',
1356
- $extensions: {
1357
- 'org.primer.figma': {
1358
- collection: 'mode',
1359
- group: 'component (internal)',
1360
- scopes: ['fgColor'],
1361
- },
1362
- 'org.primer.overrides': {
1363
- dark: {
1364
- $value: '{base.color.blue.4}',
1365
- },
1366
- },
1367
- },
1368
- },
1369
- hover: {
1370
- $value: '{base.color.neutral.0}',
1371
- $type: 'color',
1372
- $extensions: {
1373
- 'org.primer.figma': {
1374
- collection: 'mode',
1375
- group: 'component (internal)',
1376
- scopes: ['fgColor'],
1377
- },
1378
- 'org.primer.overrides': {
1379
- dark: {
1380
- $value: '{base.color.blue.3}',
1381
- },
1382
- },
1383
- },
1384
- },
1385
- disabled: {
1386
- $value: '{fgColor.accent}',
1387
- $type: 'color',
1388
- $extensions: {
1389
- 'org.primer.figma': {
1390
- collection: 'mode',
1391
- group: 'component (internal)',
1392
- scopes: ['fgColor'],
1393
- },
1394
- 'org.primer.overrides': {
1395
- dark: {
1396
- $value: '{fgColor.accent}',
1397
- alpha: 0.5,
1398
- },
1399
- },
1400
- },
1401
- alpha: 0.5,
1402
- },
1403
- },
1404
- },
1405
- danger: {
1406
- bgColor: {
1407
- hover: {
1408
- $value: '{base.color.neutral.0}',
1409
- $type: 'color',
1410
- $extensions: {
1411
- 'org.primer.figma': {
1412
- collection: 'mode',
1413
- group: 'component (internal)',
1414
- scopes: ['bgColor'],
1415
- },
1416
- 'org.primer.overrides': {
1417
- dark: {
1418
- $value: '{base.color.neutral.13}',
1419
- alpha: 0.2,
1420
- },
1421
- 'dark-high-contrast': {
1422
- $value: '{base.color.neutral.0}',
1423
- alpha: 0.15,
1424
- },
1425
- },
1426
- },
1427
- alpha: 0.2,
1428
- },
1429
- disabled: {
1430
- $value: '{bgColor.danger.emphasis}',
1431
- $type: 'color',
1432
- $extensions: {
1433
- 'org.primer.figma': {
1434
- collection: 'mode',
1435
- group: 'component (internal)',
1436
- scopes: ['bgColor'],
1437
- },
1438
- 'org.primer.overrides': {
1439
- dark: {
1440
- $value: '{bgColor.danger.emphasis}',
1441
- alpha: 0.05,
1442
- },
1443
- },
1444
- },
1445
- alpha: 0.05,
1446
- },
1447
- rest: {
1448
- $value: '{bgColor.danger.emphasis}',
1449
- $type: 'color',
1450
- $extensions: {
1451
- 'org.primer.figma': {
1452
- collection: 'mode',
1453
- group: 'component (internal)',
1454
- scopes: ['bgColor'],
1455
- },
1456
- 'org.primer.overrides': {
1457
- dark: {
1458
- $value: '{base.color.red.9}',
1459
- alpha: 0.2,
1460
- },
1461
- 'dark-high-contrast': {
1462
- $value: '{base.color.neutral.0}',
1463
- alpha: 0.15,
1464
- },
1465
- },
1466
- },
1467
- alpha: 0.1,
1468
- },
1469
- },
1470
- fgColor: {
1471
- rest: {
1472
- $value: '#c21c2c',
1473
- $type: 'color',
1474
- $extensions: {
1475
- 'org.primer.figma': {
1476
- collection: 'mode',
1477
- group: 'component (internal)',
1478
- scopes: ['fgColor'],
1479
- },
1480
- 'org.primer.overrides': {
1481
- dark: {
1482
- $value: '{fgColor.danger}',
1483
- },
1484
- 'light-high-contrast': {
1485
- $value: '#980e1e',
1486
- },
1487
- },
1488
- },
1489
- },
1490
- hover: {
1491
- $value: '{base.color.neutral.0}',
1492
- $type: 'color',
1493
- $extensions: {
1494
- 'org.primer.figma': {
1495
- collection: 'mode',
1496
- group: 'component (internal)',
1497
- scopes: ['fgColor'],
1498
- },
1499
- 'org.primer.overrides': {
1500
- dark: {
1501
- $value: '{base.color.neutral.13}',
1502
- },
1503
- },
1504
- },
1505
- },
1506
- disabled: {
1507
- $value: '{fgColor.danger}',
1508
- $type: 'color',
1509
- $extensions: {
1510
- 'org.primer.figma': {
1511
- collection: 'mode',
1512
- group: 'component (internal)',
1513
- scopes: ['fgColor'],
1514
- },
1515
- 'org.primer.overrides': {
1516
- dark: {
1517
- $value: '{fgColor.danger}',
1518
- alpha: 0.5,
1519
- },
1520
- },
1521
- },
1522
- alpha: 0.5,
1523
- },
1524
- },
1525
- },
1526
- },
1527
- }