@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/control.json5 ADDED
@@ -0,0 +1,1087 @@
1
+ {
2
+ control: {
3
+ bgColor: {
4
+ rest: {
5
+ $value: '{base.color.neutral.1}',
6
+ $type: 'color',
7
+ $extensions: {
8
+ 'org.primer.figma': {
9
+ collection: 'mode',
10
+ group: 'component',
11
+ scopes: [
12
+ 'bgColor',
13
+ ],
14
+ },
15
+ 'org.primer.overrides': {
16
+ dark: '{base.color.neutral.3}',
17
+ 'dark-high-contrast': {
18
+ $value: '{base.color.neutral.4}',
19
+ },
20
+ 'dark-dimmed': {
21
+ $value: '{base.color.neutral.5}',
22
+ },
23
+ 'light-high-contrast': {
24
+ $value: '{base.color.neutral.4}',
25
+ },
26
+ },
27
+ },
28
+ },
29
+ hover: {
30
+ $value: '{base.color.neutral.2}',
31
+ $type: 'color',
32
+ $extensions: {
33
+ 'org.primer.figma': {
34
+ collection: 'mode',
35
+ group: 'component',
36
+ scopes: [
37
+ 'bgColor',
38
+ ],
39
+ },
40
+ 'org.primer.overrides': {
41
+ dark: '{base.color.neutral.4}',
42
+ 'dark-high-contrast': {
43
+ $value: '{base.color.neutral.5}',
44
+ },
45
+ 'dark-dimmed': {
46
+ $value: '{base.color.neutral.6}',
47
+ },
48
+ 'light-high-contrast': {
49
+ $value: '{base.color.neutral.5}',
50
+ },
51
+ },
52
+ },
53
+ },
54
+ active: {
55
+ $value: '{base.color.neutral.3}',
56
+ $type: 'color',
57
+ $extensions: {
58
+ 'org.primer.figma': {
59
+ collection: 'mode',
60
+ group: 'component',
61
+ scopes: [
62
+ 'bgColor',
63
+ ],
64
+ },
65
+ 'org.primer.overrides': {
66
+ dark: '{base.color.neutral.5}',
67
+ 'dark-high-contrast': {
68
+ $value: '{base.color.neutral.6}',
69
+ },
70
+ 'dark-dimmed': {
71
+ $value: '{base.color.neutral.7}',
72
+ },
73
+ 'light-high-contrast': {
74
+ $value: '{base.color.neutral.6}',
75
+ },
76
+ },
77
+ },
78
+ },
79
+ disabled: {
80
+ $value: '{bgColor.disabled}',
81
+ $type: 'color',
82
+ $extensions: {
83
+ 'org.primer.figma': {
84
+ collection: 'mode',
85
+ group: 'component',
86
+ scopes: [
87
+ 'bgColor',
88
+ ],
89
+ },
90
+ 'org.primer.overrides': {
91
+ dark: '{bgColor.disabled}',
92
+ },
93
+ },
94
+ },
95
+ selected: {
96
+ $value: '{control.bgColor.rest}',
97
+ $type: 'color',
98
+ $extensions: {
99
+ 'org.primer.figma': {
100
+ collection: 'mode',
101
+ group: 'component',
102
+ scopes: [
103
+ 'bgColor',
104
+ ],
105
+ },
106
+ 'org.primer.overrides': {
107
+ dark: '{control.bgColor.rest}',
108
+ },
109
+ },
110
+ },
111
+ },
112
+ fgColor: {
113
+ rest: {
114
+ $value: '{base.color.neutral.12}',
115
+ $type: 'color',
116
+ $extensions: {
117
+ 'org.primer.figma': {
118
+ collection: 'mode',
119
+ group: 'component',
120
+ scopes: [
121
+ 'fgColor',
122
+ ],
123
+ },
124
+ 'org.primer.overrides': {
125
+ dark: '{fgColor.default}',
126
+ },
127
+ },
128
+ },
129
+ placeholder: {
130
+ $value: '{fgColor.muted}',
131
+ $type: 'color',
132
+ $extensions: {
133
+ 'org.primer.figma': {
134
+ collection: 'mode',
135
+ group: 'component',
136
+ scopes: [
137
+ 'fgColor',
138
+ ],
139
+ },
140
+ 'org.primer.overrides': {
141
+ dark: '{fgColor.muted}',
142
+ 'dark-high-contrast': {
143
+ $value: '{base.color.neutral.10}',
144
+ },
145
+ 'light-high-contrast': {
146
+ $value: '{base.color.neutral.10}',
147
+ },
148
+ },
149
+ },
150
+ },
151
+ disabled: {
152
+ $value: '{fgColor.disabled}',
153
+ $type: 'color',
154
+ $extensions: {
155
+ 'org.primer.figma': {
156
+ collection: 'mode',
157
+ group: 'component',
158
+ scopes: [
159
+ 'fgColor',
160
+ ],
161
+ },
162
+ 'org.primer.overrides': {
163
+ dark: '{fgColor.disabled}',
164
+ },
165
+ },
166
+ },
167
+ },
168
+ borderColor: {
169
+ rest: {
170
+ $value: '{borderColor.default}',
171
+ $type: 'color',
172
+ $extensions: {
173
+ 'org.primer.figma': {
174
+ collection: 'mode',
175
+ group: 'component',
176
+ scopes: [
177
+ 'borderColor',
178
+ ],
179
+ },
180
+ 'org.primer.overrides': {
181
+ dark: '{borderColor.default}',
182
+ 'dark-dimmed': {
183
+ $value: '#3d444d',
184
+ },
185
+ },
186
+ },
187
+ },
188
+ emphasis: {
189
+ $value: '{borderColor.emphasis}',
190
+ $type: 'color',
191
+ $extensions: {
192
+ 'org.primer.figma': {
193
+ collection: 'mode',
194
+ group: 'component',
195
+ scopes: [
196
+ 'borderColor',
197
+ ],
198
+ },
199
+ 'org.primer.overrides': {
200
+ dark: '{borderColor.emphasis}',
201
+ 'dark-high-contrast': {
202
+ $value: '{borderColor.emphasis}',
203
+ },
204
+ },
205
+ },
206
+ },
207
+ disabled: {
208
+ $value: '{borderColor.disabled}',
209
+ $type: 'color',
210
+ $extensions: {
211
+ 'org.primer.figma': {
212
+ collection: 'mode',
213
+ group: 'component',
214
+ scopes: [
215
+ 'borderColor',
216
+ ],
217
+ },
218
+ 'org.primer.overrides': {
219
+ dark: '{borderColor.disabled}',
220
+ 'dark-dimmed': {
221
+ $value: '{base.color.neutral.8}',
222
+ alpha: 0.1,
223
+ },
224
+ },
225
+ },
226
+ },
227
+ selected: {
228
+ $value: '{control.bgColor.selected}',
229
+ $type: 'color',
230
+ $extensions: {
231
+ 'org.primer.figma': {
232
+ collection: 'mode',
233
+ group: 'component',
234
+ scopes: [
235
+ 'borderColor',
236
+ ],
237
+ },
238
+ 'org.primer.overrides': {
239
+ dark: '{base.color.neutral.12}',
240
+ },
241
+ },
242
+ },
243
+ success: {
244
+ $value: '{borderColor.success.emphasis}',
245
+ $type: 'color',
246
+ $extensions: {
247
+ 'org.primer.figma': {
248
+ collection: 'mode',
249
+ group: 'component',
250
+ scopes: [
251
+ 'borderColor',
252
+ ],
253
+ },
254
+ 'org.primer.overrides': {
255
+ dark: '{borderColor.success.emphasis}',
256
+ },
257
+ },
258
+ },
259
+ danger: {
260
+ $value: '{borderColor.danger.emphasis}',
261
+ $type: 'color',
262
+ $extensions: {
263
+ 'org.primer.figma': {
264
+ collection: 'mode',
265
+ group: 'component',
266
+ scopes: [
267
+ 'borderColor',
268
+ ],
269
+ },
270
+ 'org.primer.overrides': {
271
+ dark: '{borderColor.danger.emphasis}',
272
+ },
273
+ },
274
+ },
275
+ warning: {
276
+ $value: '{borderColor.attention.emphasis}',
277
+ $type: 'color',
278
+ $extensions: {
279
+ 'org.primer.figma': {
280
+ collection: 'mode',
281
+ group: 'component',
282
+ scopes: [
283
+ 'borderColor',
284
+ ],
285
+ },
286
+ 'org.primer.overrides': {
287
+ dark: '{borderColor.attention.emphasis}',
288
+ },
289
+ },
290
+ },
291
+ },
292
+ iconColor: {
293
+ rest: {
294
+ $value: '{fgColor.muted}',
295
+ $type: 'color',
296
+ $extensions: {
297
+ 'org.primer.figma': {
298
+ collection: 'mode',
299
+ group: 'component',
300
+ scopes: [
301
+ 'fgColor',
302
+ ],
303
+ },
304
+ 'org.primer.overrides': {
305
+ dark: '{fgColor.muted}',
306
+ },
307
+ },
308
+ },
309
+ },
310
+ transparent: {
311
+ bgColor: {
312
+ rest: {
313
+ $value: '{base.color.transparent}',
314
+ $type: 'color',
315
+ $extensions: {
316
+ 'org.primer.figma': {
317
+ collection: 'mode',
318
+ group: 'component',
319
+ scopes: [
320
+ 'bgColor',
321
+ ],
322
+ },
323
+ 'org.primer.overrides': {
324
+ dark: '{base.color.transparent}',
325
+ },
326
+ },
327
+ },
328
+ hover: {
329
+ $value: '{base.color.neutral.8}',
330
+ $type: 'color',
331
+ $extensions: {
332
+ 'org.primer.figma': {
333
+ collection: 'mode',
334
+ group: 'component',
335
+ scopes: [
336
+ 'bgColor',
337
+ ],
338
+ },
339
+ 'org.primer.overrides': {
340
+ dark: {
341
+ $value: '{base.color.neutral.8}',
342
+ alpha: 0.2,
343
+ },
344
+ 'dark-high-contrast': {
345
+ $value: '{base.color.neutral.6}',
346
+ alpha: 1,
347
+ },
348
+ 'dark-dimmed': {
349
+ $value: '{base.color.neutral.8}',
350
+ alpha: 0.15,
351
+ },
352
+ 'light-high-contrast': {
353
+ $value: '{base.color.neutral.5}',
354
+ alpha: 1,
355
+ },
356
+ },
357
+ },
358
+ alpha: 0.1,
359
+ },
360
+ active: {
361
+ $value: '{base.color.neutral.8}',
362
+ $type: 'color',
363
+ $extensions: {
364
+ 'org.primer.figma': {
365
+ collection: 'mode',
366
+ group: 'component',
367
+ scopes: [
368
+ 'bgColor',
369
+ ],
370
+ },
371
+ 'org.primer.overrides': {
372
+ dark: {
373
+ $value: '{base.color.neutral.8}',
374
+ alpha: 0.25,
375
+ },
376
+ 'dark-high-contrast': {
377
+ $value: '{base.color.neutral.7}',
378
+ alpha: 1,
379
+ },
380
+ 'dark-dimmed': {
381
+ $value: '{base.color.neutral.8}',
382
+ alpha: 0.2,
383
+ },
384
+ 'light-high-contrast': {
385
+ $value: '{base.color.neutral.6}',
386
+ alpha: 1,
387
+ },
388
+ },
389
+ },
390
+ alpha: 0.15,
391
+ },
392
+ disabled: {
393
+ $value: '{bgColor.disabled}',
394
+ $type: 'color',
395
+ $extensions: {
396
+ 'org.primer.figma': {
397
+ collection: 'mode',
398
+ group: 'component',
399
+ scopes: [
400
+ 'bgColor',
401
+ ],
402
+ },
403
+ 'org.primer.overrides': {
404
+ dark: '{bgColor.disabled}',
405
+ },
406
+ },
407
+ },
408
+ selected: {
409
+ $value: '{base.color.neutral.8}',
410
+ $type: 'color',
411
+ $extensions: {
412
+ 'org.primer.figma': {
413
+ collection: 'mode',
414
+ group: 'component',
415
+ scopes: [
416
+ 'bgColor',
417
+ ],
418
+ },
419
+ 'org.primer.overrides': {
420
+ dark: {
421
+ $value: '{base.color.neutral.8}',
422
+ alpha: 0.1,
423
+ },
424
+ 'dark-high-contrast': {
425
+ $value: '{base.color.neutral.6}',
426
+ alpha: 1,
427
+ },
428
+ 'dark-dimmed': {
429
+ $value: '{base.color.neutral.8}',
430
+ alpha: 0.1,
431
+ },
432
+ 'light-high-contrast': {
433
+ $value: '{base.color.neutral.5}',
434
+ alpha: 1,
435
+ },
436
+ },
437
+ },
438
+ alpha: 0.15,
439
+ },
440
+ },
441
+ borderColor: {
442
+ rest: {
443
+ $value: '{base.color.transparent}',
444
+ $type: 'color',
445
+ $extensions: {
446
+ 'org.primer.figma': {
447
+ collection: 'mode',
448
+ group: 'component',
449
+ scopes: [
450
+ 'borderColor',
451
+ ],
452
+ },
453
+ 'org.primer.overrides': {
454
+ dark: '{base.color.transparent}',
455
+ },
456
+ },
457
+ },
458
+ hover: {
459
+ $value: '{base.color.transparent}',
460
+ $type: 'color',
461
+ $extensions: {
462
+ 'org.primer.figma': {
463
+ collection: 'mode',
464
+ group: 'component',
465
+ scopes: [
466
+ 'borderColor',
467
+ ],
468
+ },
469
+ 'org.primer.overrides': {
470
+ dark: '{base.color.transparent}',
471
+ 'dark-high-contrast': {
472
+ $value: '{borderColor.default}',
473
+ },
474
+ 'light-high-contrast': {
475
+ $value: '{borderColor.default}',
476
+ },
477
+ },
478
+ },
479
+ },
480
+ active: {
481
+ $value: '{base.color.transparent}',
482
+ $type: 'color',
483
+ $extensions: {
484
+ 'org.primer.figma': {
485
+ collection: 'mode',
486
+ group: 'component',
487
+ scopes: [
488
+ 'borderColor',
489
+ ],
490
+ },
491
+ 'org.primer.overrides': {
492
+ dark: '{base.color.transparent}',
493
+ 'dark-high-contrast': {
494
+ $value: '{borderColor.default}',
495
+ },
496
+ 'light-high-contrast': {
497
+ $value: '{borderColor.default}',
498
+ },
499
+ },
500
+ },
501
+ },
502
+ },
503
+ },
504
+ danger: {
505
+ fgColor: {
506
+ rest: {
507
+ $value: '{fgColor.danger}',
508
+ $type: 'color',
509
+ $extensions: {
510
+ 'org.primer.figma': {
511
+ collection: 'mode',
512
+ group: 'component',
513
+ scopes: [
514
+ 'fgColor',
515
+ ],
516
+ },
517
+ 'org.primer.overrides': {
518
+ dark: '{fgColor.danger}',
519
+ },
520
+ },
521
+ },
522
+ hover: {
523
+ $value: '{fgColor.danger}',
524
+ $type: 'color',
525
+ $extensions: {
526
+ 'org.primer.figma': {
527
+ collection: 'mode',
528
+ group: 'component',
529
+ scopes: [
530
+ 'fgColor',
531
+ ],
532
+ },
533
+ 'org.primer.overrides': {
534
+ dark: '{base.color.red.3}',
535
+ 'dark-protanopia-deuteranopia': '{base.color.orange.3}',
536
+ 'light-high-contrast': {
537
+ $value: '{fgColor.onEmphasis}',
538
+ },
539
+ },
540
+ },
541
+ },
542
+ },
543
+ bgColor: {
544
+ hover: {
545
+ $value: '{bgColor.danger.muted}',
546
+ $type: 'color',
547
+ $extensions: {
548
+ 'org.primer.figma': {
549
+ collection: 'mode',
550
+ group: 'component',
551
+ scopes: [
552
+ 'bgColor',
553
+ ],
554
+ },
555
+ 'org.primer.overrides': {
556
+ dark: '{bgColor.danger.muted}',
557
+ 'dark-high-contrast': {
558
+ $value: '{bgColor.danger.emphasis}',
559
+ },
560
+ 'light-high-contrast': {
561
+ $value: '{bgColor.danger.emphasis}',
562
+ alpha: null,
563
+ },
564
+ },
565
+ },
566
+ },
567
+ active: {
568
+ $value: '{bgColor.danger.muted}',
569
+ $type: 'color',
570
+ $extensions: {
571
+ 'org.primer.figma': {
572
+ collection: 'mode',
573
+ group: 'component',
574
+ scopes: [
575
+ 'bgColor',
576
+ ],
577
+ },
578
+ 'org.primer.overrides': {
579
+ light: {
580
+ $value: '{bgColor.danger.muted}',
581
+ alpha: 0.4,
582
+ },
583
+ dark: {
584
+ $value: '{bgColor.danger.muted}',
585
+ alpha: 0.4,
586
+ },
587
+ 'dark-high-contrast': {
588
+ $value: '#c51120',
589
+ alpha: 1,
590
+ },
591
+ 'light-high-contrast': {
592
+ $value: '#8c0b1d',
593
+ },
594
+ },
595
+ },
596
+ },
597
+ },
598
+ },
599
+ checked: {
600
+ bgColor: {
601
+ rest: {
602
+ $value: '{bgColor.accent.emphasis}',
603
+ $type: 'color',
604
+ $extensions: {
605
+ 'org.primer.figma': {
606
+ collection: 'mode',
607
+ group: 'component',
608
+ scopes: [
609
+ 'bgColor',
610
+ ],
611
+ },
612
+ 'org.primer.overrides': {
613
+ dark: '{bgColor.accent.emphasis}',
614
+ },
615
+ },
616
+ },
617
+ hover: {
618
+ $value: '#0860ca',
619
+ $type: 'color',
620
+ $extensions: {
621
+ 'org.primer.figma': {
622
+ collection: 'mode',
623
+ group: 'component',
624
+ scopes: [
625
+ 'bgColor',
626
+ ],
627
+ },
628
+ 'org.primer.overrides': {
629
+ dark: '#2A7AEF',
630
+ 'dark-high-contrast': {
631
+ $value: '#2b64c1',
632
+ },
633
+ 'dark-dimmed': {
634
+ $value: '#3876d3',
635
+ },
636
+ 'light-high-contrast': {
637
+ $value: '#0344a8',
638
+ },
639
+ },
640
+ },
641
+ },
642
+ active: {
643
+ $value: '#0757ba',
644
+ $type: 'color',
645
+ $extensions: {
646
+ 'org.primer.figma': {
647
+ collection: 'mode',
648
+ group: 'component',
649
+ scopes: [
650
+ 'bgColor',
651
+ ],
652
+ },
653
+ 'org.primer.overrides': {
654
+ dark: '#3685F3',
655
+ 'dark-high-contrast': {
656
+ $value: '#3c79d0',
657
+ },
658
+ 'dark-dimmed': {
659
+ $value: '#3f7fdb',
660
+ },
661
+ 'light-high-contrast': {
662
+ $value: '#033f9d',
663
+ },
664
+ },
665
+ },
666
+ },
667
+ disabled: {
668
+ $value: '{fgColor.disabled}',
669
+ $type: 'color',
670
+ $extensions: {
671
+ 'org.primer.figma': {
672
+ collection: 'mode',
673
+ group: 'component',
674
+ scopes: [
675
+ 'bgColor',
676
+ ],
677
+ },
678
+ 'org.primer.overrides': {
679
+ dark: '{fgColor.disabled}',
680
+ },
681
+ },
682
+ },
683
+ },
684
+ fgColor: {
685
+ rest: {
686
+ $value: '{fgColor.onEmphasis}',
687
+ $type: 'color',
688
+ $extensions: {
689
+ 'org.primer.figma': {
690
+ collection: 'mode',
691
+ group: 'component',
692
+ scopes: [
693
+ 'fgColor',
694
+ ],
695
+ },
696
+ 'org.primer.overrides': {
697
+ dark: '{fgColor.onEmphasis}',
698
+ },
699
+ },
700
+ },
701
+ disabled: {
702
+ $value: '{fgColor.onEmphasis}',
703
+ $type: 'color',
704
+ $extensions: {
705
+ 'org.primer.figma': {
706
+ collection: 'mode',
707
+ group: 'component',
708
+ scopes: [
709
+ 'fgColor',
710
+ ],
711
+ },
712
+ 'org.primer.overrides': {
713
+ dark: '{base.color.inset}',
714
+ },
715
+ },
716
+ },
717
+ },
718
+ borderColor: {
719
+ rest: {
720
+ $value: '{control.checked.bgColor.rest}',
721
+ $type: 'color',
722
+ $extensions: {
723
+ 'org.primer.figma': {
724
+ collection: 'mode',
725
+ group: 'component',
726
+ scopes: [
727
+ 'borderColor',
728
+ ],
729
+ },
730
+ 'org.primer.overrides': {
731
+ dark: '{control.checked.bgColor.rest}',
732
+ 'dark-high-contrast': {
733
+ $value: '{base.color.blue.2}',
734
+ },
735
+ },
736
+ },
737
+ },
738
+ hover: {
739
+ $value: '{control.checked.bgColor.hover}',
740
+ $type: 'color',
741
+ $extensions: {
742
+ 'org.primer.figma': {
743
+ collection: 'mode',
744
+ group: 'component',
745
+ scopes: [
746
+ 'borderColor',
747
+ ],
748
+ },
749
+ 'org.primer.overrides': {
750
+ dark: '{control.checked.bgColor.hover}',
751
+ 'dark-high-contrast': {
752
+ $value: '{base.color.blue.2}',
753
+ },
754
+ 'dark-dimmed': {
755
+ $value: '#3876d3',
756
+ },
757
+ 'light-high-contrast': {
758
+ $value: '#0344a8',
759
+ },
760
+ },
761
+ },
762
+ },
763
+ active: {
764
+ $value: '{control.checked.bgColor.active}',
765
+ $type: 'color',
766
+ $extensions: {
767
+ 'org.primer.figma': {
768
+ collection: 'mode',
769
+ group: 'component',
770
+ scopes: [
771
+ 'borderColor',
772
+ ],
773
+ },
774
+ 'org.primer.overrides': {
775
+ dark: '{control.checked.bgColor.active}',
776
+ 'dark-high-contrast': {
777
+ $value: '{base.color.blue.2}',
778
+ },
779
+ 'dark-dimmed': {
780
+ $value: '#3f7fdb',
781
+ },
782
+ 'light-high-contrast': {
783
+ $value: '#033f9d',
784
+ },
785
+ },
786
+ },
787
+ },
788
+ disabled: {
789
+ $value: '{control.checked.bgColor.disabled}',
790
+ $type: 'color',
791
+ $extensions: {
792
+ 'org.primer.figma': {
793
+ collection: 'mode',
794
+ group: 'component',
795
+ scopes: [
796
+ 'borderColor',
797
+ ],
798
+ },
799
+ 'org.primer.overrides': {
800
+ dark: '{control.checked.bgColor.disabled}',
801
+ },
802
+ },
803
+ },
804
+ },
805
+ },
806
+ },
807
+ controlTrack: {
808
+ bgColor: {
809
+ rest: {
810
+ $value: '{base.color.neutral.3}',
811
+ $type: 'color',
812
+ $extensions: {
813
+ 'org.primer.figma': {
814
+ collection: 'mode',
815
+ group: 'component (internal)',
816
+ scopes: [
817
+ 'bgColor',
818
+ ],
819
+ },
820
+ 'org.primer.overrides': {
821
+ dark: '{base.color.neutral.4}',
822
+ 'dark-high-contrast': {
823
+ $value: '{base.color.neutral.5}',
824
+ },
825
+ 'dark-dimmed': {
826
+ $value: '{base.color.neutral.5}',
827
+ },
828
+ 'light-high-contrast': {
829
+ $value: '{base.color.neutral.5}',
830
+ },
831
+ },
832
+ },
833
+ },
834
+ hover: {
835
+ $value: '{base.color.neutral.4}',
836
+ $type: 'color',
837
+ $extensions: {
838
+ 'org.primer.figma': {
839
+ collection: 'mode',
840
+ group: 'component (internal)',
841
+ scopes: [
842
+ 'bgColor',
843
+ ],
844
+ },
845
+ 'org.primer.overrides': {
846
+ dark: '{base.color.neutral.5}',
847
+ 'dark-high-contrast': {
848
+ $value: '{base.color.neutral.6}',
849
+ },
850
+ 'dark-dimmed': {
851
+ $value: '{base.color.neutral.6}',
852
+ },
853
+ 'light-high-contrast': {
854
+ $value: '{base.color.neutral.6}',
855
+ },
856
+ },
857
+ },
858
+ },
859
+ active: {
860
+ $value: '{base.color.neutral.5}',
861
+ $type: 'color',
862
+ $extensions: {
863
+ 'org.primer.figma': {
864
+ collection: 'mode',
865
+ group: 'component (internal)',
866
+ scopes: [
867
+ 'bgColor',
868
+ ],
869
+ },
870
+ 'org.primer.overrides': {
871
+ dark: '{base.color.neutral.6}',
872
+ 'dark-high-contrast': {
873
+ $value: '{base.color.neutral.7}',
874
+ },
875
+ 'dark-dimmed': {
876
+ $value: '{base.color.neutral.7}',
877
+ },
878
+ 'light-high-contrast': {
879
+ $value: '{base.color.neutral.7}',
880
+ },
881
+ },
882
+ },
883
+ },
884
+ disabled: {
885
+ $value: '{fgColor.disabled}',
886
+ $type: 'color',
887
+ $extensions: {
888
+ 'org.primer.figma': {
889
+ collection: 'mode',
890
+ group: 'component (internal)',
891
+ scopes: [
892
+ 'bgColor',
893
+ ],
894
+ },
895
+ 'org.primer.overrides': {
896
+ dark: '{fgColor.disabled}',
897
+ },
898
+ },
899
+ },
900
+ },
901
+ fgColor: {
902
+ rest: {
903
+ $value: '{base.color.neutral.9}',
904
+ $type: 'color',
905
+ $extensions: {
906
+ 'org.primer.figma': {
907
+ collection: 'mode',
908
+ group: 'component (internal)',
909
+ scopes: [
910
+ 'fgColor',
911
+ ],
912
+ },
913
+ 'org.primer.overrides': {
914
+ dark: '{fgColor.muted}',
915
+ 'dark-high-contrast': {
916
+ $value: '{fgColor.default}',
917
+ },
918
+ },
919
+ },
920
+ },
921
+ disabled: {
922
+ $value: '{fgColor.onEmphasis}',
923
+ $type: 'color',
924
+ $extensions: {
925
+ 'org.primer.figma': {
926
+ collection: 'mode',
927
+ group: 'component (internal)',
928
+ scopes: [
929
+ 'fgColor',
930
+ ],
931
+ },
932
+ 'org.primer.overrides': {
933
+ dark: '{fgColor.onEmphasis}',
934
+ },
935
+ },
936
+ },
937
+ },
938
+ borderColor: {
939
+ rest: {
940
+ $value: '{borderColor.default}',
941
+ $type: 'color',
942
+ $extensions: {
943
+ 'org.primer.figma': {
944
+ collection: 'mode',
945
+ group: 'component (internal)',
946
+ scopes: [
947
+ 'borderColor',
948
+ ],
949
+ },
950
+ 'org.primer.overrides': {
951
+ dark: '{borderColor.default}',
952
+ 'dark-high-contrast': {
953
+ $value: '{borderColor.emphasis}',
954
+ },
955
+ 'dark-dimmed': {
956
+ $value: '{base.color.neutral.7}',
957
+ },
958
+ 'light-high-contrast': {
959
+ $value: '{borderColor.emphasis}',
960
+ },
961
+ },
962
+ },
963
+ },
964
+ disabled: {
965
+ $value: '{fgColor.disabled}',
966
+ $type: 'color',
967
+ $extensions: {
968
+ 'org.primer.figma': {
969
+ collection: 'mode',
970
+ group: 'component (internal)',
971
+ scopes: [
972
+ 'borderColor',
973
+ ],
974
+ },
975
+ 'org.primer.overrides': {
976
+ dark: '{fgColor.disabled}',
977
+ },
978
+ },
979
+ },
980
+ },
981
+ },
982
+ controlKnob: {
983
+ bgColor: {
984
+ rest: {
985
+ $value: '{base.color.neutral.0}',
986
+ $type: 'color',
987
+ $extensions: {
988
+ 'org.primer.figma': {
989
+ collection: 'mode',
990
+ group: 'component (internal)',
991
+ scopes: [
992
+ 'bgColor',
993
+ ],
994
+ },
995
+ 'org.primer.overrides': {
996
+ dark: '{bgColor.inset}',
997
+ 'dark-dimmed': {
998
+ $value: '{bgColor.inset}',
999
+ },
1000
+ },
1001
+ },
1002
+ },
1003
+ disabled: {
1004
+ $value: '{control.bgColor.disabled}',
1005
+ $type: 'color',
1006
+ $extensions: {
1007
+ 'org.primer.figma': {
1008
+ collection: 'mode',
1009
+ group: 'component (internal)',
1010
+ scopes: [
1011
+ 'bgColor',
1012
+ ],
1013
+ },
1014
+ 'org.primer.overrides': {
1015
+ dark: '{control.bgColor.disabled}',
1016
+ },
1017
+ },
1018
+ },
1019
+ checked: {
1020
+ $value: '{base.color.neutral.0}',
1021
+ $type: 'color',
1022
+ $extensions: {
1023
+ 'org.primer.figma': {
1024
+ collection: 'mode',
1025
+ group: 'component (internal)',
1026
+ scopes: [
1027
+ 'bgColor',
1028
+ ],
1029
+ },
1030
+ 'org.primer.overrides': {
1031
+ dark: '{base.color.neutral.13}',
1032
+ },
1033
+ },
1034
+ },
1035
+ },
1036
+ borderColor: {
1037
+ rest: {
1038
+ $value: '{control.borderColor.emphasis}',
1039
+ $type: 'color',
1040
+ $extensions: {
1041
+ 'org.primer.figma': {
1042
+ collection: 'mode',
1043
+ group: 'component (internal)',
1044
+ scopes: [
1045
+ 'borderColor',
1046
+ ],
1047
+ },
1048
+ 'org.primer.overrides': {
1049
+ dark: '{control.borderColor.emphasis}',
1050
+ },
1051
+ },
1052
+ },
1053
+ disabled: {
1054
+ $value: '{control.bgColor.disabled}',
1055
+ $type: 'color',
1056
+ $extensions: {
1057
+ 'org.primer.figma': {
1058
+ collection: 'mode',
1059
+ group: 'component (internal)',
1060
+ scopes: [
1061
+ 'borderColor',
1062
+ ],
1063
+ },
1064
+ 'org.primer.overrides': {
1065
+ dark: '{control.bgColor.disabled}',
1066
+ },
1067
+ },
1068
+ },
1069
+ checked: {
1070
+ $value: '{control.checked.bgColor.rest}',
1071
+ $type: 'color',
1072
+ $extensions: {
1073
+ 'org.primer.figma': {
1074
+ collection: 'mode',
1075
+ group: 'component (internal)',
1076
+ scopes: [
1077
+ 'borderColor',
1078
+ ],
1079
+ },
1080
+ 'org.primer.overrides': {
1081
+ dark: '{control.checked.bgColor.rest}',
1082
+ },
1083
+ },
1084
+ },
1085
+ },
1086
+ },
1087
+ }