@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/functional/color/selection.json5 DELETED
@@ -1,22 +0,0 @@
1
- {
2
- selection: {
3
- bgColor: {
4
- $value: '{bgColor.accent.emphasis}',
5
- $type: 'color',
6
- $extensions: {
7
- 'org.primer.figma': {
8
- collection: 'mode',
9
- group: 'component',
10
- scopes: ['bgColor'],
11
- },
12
- 'org.primer.overrides': {
13
- dark: {
14
- $value: '{bgColor.accent.emphasis}',
15
- alpha: 0.7,
16
- },
17
- },
18
- },
19
- alpha: 0.2,
20
- },
21
- },
22
- }
package/src/tokens/functional/shadow/shadow.json5 DELETED
@@ -1,677 +0,0 @@
1
- {
2
- avatar: {
3
- shadow: {
4
- $value: [
5
- {
6
- color: '{base.color.neutral.0}',
7
- alpha: 0.8,
8
- offsetX: '0px',
9
- offsetY: '0px',
10
- blur: '0px',
11
- spread: '2px',
12
- },
13
- ],
14
- $type: 'shadow',
15
- $extensions: {
16
- 'org.primer.figma': {
17
- collection: 'mode',
18
- group: 'component shadow',
19
- },
20
- 'org.primer.overrides': {
21
- dark: {
22
- $value: [
23
- {
24
- color: '{base.color.neutral.1}',
25
- alpha: 1,
26
- offsetX: '0px',
27
- offsetY: '0px',
28
- blur: '0px',
29
- spread: '2px',
30
- },
31
- ],
32
- },
33
- },
34
- },
35
- },
36
- },
37
- button: {
38
- default: {
39
- shadow: {
40
- resting: {
41
- $value: [
42
- {
43
- color: '{base.color.neutral.13}',
44
- alpha: 0.04,
45
- offsetX: '0px',
46
- offsetY: '1px',
47
- blur: '0px',
48
- spread: '0px',
49
- inset: false,
50
- },
51
- ],
52
- $type: 'shadow',
53
- $extensions: {
54
- 'org.primer.figma': {
55
- collection: 'mode',
56
- group: 'component shadow',
57
- },
58
- 'org.primer.overrides': {
59
- dark: {
60
- $value: [
61
- {
62
- color: '{base.color.transparent}',
63
- alpha: 0,
64
- offsetX: '0px',
65
- offsetY: '0px',
66
- blur: '0px',
67
- spread: '0px',
68
- inset: false,
69
- },
70
- ],
71
- },
72
- },
73
- },
74
- },
75
- },
76
- },
77
- primary: {
78
- shadow: {
79
- selected: {
80
- $value: [
81
- {
82
- color: '{base.color.green.9}',
83
- alpha: 0.3,
84
- offsetX: '0px',
85
- offsetY: '1px',
86
- blur: '0px',
87
- spread: '0px',
88
- inset: true,
89
- },
90
- ],
91
- $type: 'shadow',
92
- $extensions: {
93
- 'org.primer.figma': {
94
- collection: 'mode',
95
- group: 'component shadow',
96
- },
97
- 'org.primer.overrides': {
98
- 'light-tritanopia': {
99
- $value: [
100
- {
101
- color: '{base.color.blue.9}',
102
- alpha: 0.3,
103
- offsetX: '0px',
104
- offsetY: '1px',
105
- blur: '0px',
106
- spread: '0px',
107
- inset: true,
108
- },
109
- ],
110
- },
111
- 'light-protanopia-deuteranopia': {
112
- $value: [
113
- {
114
- color: '{base.color.blue.9}',
115
- alpha: 0.3,
116
- offsetX: '0px',
117
- offsetY: '1px',
118
- blur: '0px',
119
- spread: '0px',
120
- inset: true,
121
- },
122
- ],
123
- },
124
- dark: {
125
- $value: [
126
- {
127
- color: '{base.color.transparent}',
128
- alpha: 0,
129
- offsetX: '0px',
130
- offsetY: '0px',
131
- blur: '0px',
132
- spread: '0px',
133
- inset: false,
134
- },
135
- ],
136
- },
137
- },
138
- },
139
- },
140
- },
141
- },
142
- outline: {
143
- shadow: {
144
- selected: {
145
- $value: [
146
- {
147
- color: '{base.color.blue.9}',
148
- alpha: 0.2,
149
- offsetX: '0px',
150
- offsetY: '1px',
151
- blur: '0px',
152
- spread: '0px',
153
- inset: true,
154
- },
155
- ],
156
- $type: 'shadow',
157
- $extensions: {
158
- 'org.primer.figma': {
159
- collection: 'mode',
160
- group: 'component shadow',
161
- },
162
- 'org.primer.overrides': {
163
- dark: {
164
- $value: [
165
- {
166
- color: '{base.color.transparent}',
167
- alpha: 0,
168
- offsetX: '0px',
169
- offsetY: '0px',
170
- blur: '0px',
171
- spread: '0px',
172
- inset: false,
173
- },
174
- ],
175
- },
176
- },
177
- },
178
- },
179
- },
180
- },
181
- danger: {
182
- shadow: {
183
- selected: {
184
- $value: [
185
- {
186
- color: '{base.color.red.9}',
187
- alpha: 0.2,
188
- offsetX: '0px',
189
- offsetY: '1px',
190
- blur: '0px',
191
- spread: '0px',
192
- inset: true,
193
- },
194
- ],
195
- $type: 'shadow',
196
- $extensions: {
197
- 'org.primer.figma': {
198
- collection: 'mode',
199
- group: 'component shadow',
200
- },
201
- 'org.primer.overrides': {
202
- 'light-protanopia-deuteranopia': {
203
- $value: [
204
- {
205
- color: '{base.color.orange.9}',
206
- alpha: 0.2,
207
- offsetX: '0px',
208
- offsetY: '1px',
209
- blur: '0px',
210
- spread: '0px',
211
- inset: true,
212
- },
213
- ],
214
- },
215
- dark: {
216
- $value: [
217
- {
218
- color: '{base.color.transparent}',
219
- alpha: 0,
220
- offsetX: '0px',
221
- offsetY: '0px',
222
- blur: '0px',
223
- spread: '0px',
224
- inset: false,
225
- },
226
- ],
227
- },
228
- },
229
- },
230
- },
231
- },
232
- },
233
- },
234
- shadow: {
235
- inset: {
236
- $value: {
237
- color: '{base.color.neutral.13}',
238
- alpha: 0.04,
239
- offsetX: '0px',
240
- offsetY: '1px',
241
- blur: '0px',
242
- spread: '0px',
243
- inset: true,
244
- },
245
- $type: 'shadow',
246
- $extensions: {
247
- 'org.primer.figma': {
248
- collection: 'mode',
249
- group: 'shadow',
250
- },
251
- 'org.primer.overrides': {
252
- dark: {
253
- $value: {
254
- color: '{base.color.neutral.0}',
255
- alpha: 0.24,
256
- offsetX: '0px',
257
- offsetY: '1px',
258
- blur: '0px',
259
- spread: '0px',
260
- inset: true,
261
- },
262
- },
263
- },
264
- },
265
- },
266
- resting: {
267
- xsmall: {
268
- $value: {
269
- color: '{base.color.neutral.13}',
270
- alpha: 0.1,
271
- offsetX: '0px',
272
- offsetY: '1px',
273
- blur: '0px',
274
- spread: '0px',
275
- inset: false,
276
- },
277
- $type: 'shadow',
278
- $extensions: {
279
- 'org.primer.figma': {
280
- collection: 'mode',
281
- group: 'shadow',
282
- },
283
- 'org.primer.overrides': {
284
- dark: {
285
- $value: {
286
- color: '{base.color.neutral.0}',
287
- alpha: 0.8,
288
- offsetX: '0px',
289
- offsetY: '1px',
290
- blur: '0px',
291
- spread: '0px',
292
- inset: false,
293
- },
294
- },
295
- },
296
- },
297
- },
298
- small: {
299
- $value: [
300
- {
301
- color: '{base.color.neutral.13}',
302
- alpha: 0.04,
303
- offsetX: '0px',
304
- offsetY: '1px',
305
- blur: '0px',
306
- spread: '0px',
307
- inset: false,
308
- },
309
- ],
310
- $type: 'shadow',
311
- $extensions: {
312
- 'org.primer.figma': {
313
- collection: 'mode',
314
- group: 'shadow',
315
- },
316
- 'org.primer.overrides': {
317
- dark: {
318
- $value: [
319
- {
320
- color: '{base.color.neutral.0}',
321
- alpha: 0.4,
322
- offsetX: '0px',
323
- offsetY: '1px',
324
- blur: '0px',
325
- spread: '0px',
326
- inset: false,
327
- },
328
- ],
329
- },
330
- },
331
- },
332
- },
333
- medium: {
334
- $value: [
335
- {
336
- color: '{base.color.neutral.12}',
337
- alpha: 0.12,
338
- offsetX: '0px',
339
- offsetY: '3px',
340
- blur: '6px',
341
- spread: '0px',
342
- },
343
- ],
344
- $type: 'shadow',
345
- $extensions: {
346
- 'org.primer.figma': {
347
- collection: 'mode',
348
- group: 'shadow',
349
- },
350
- 'org.primer.overrides': {
351
- dark: {
352
- $value: [
353
- {
354
- color: '{base.color.neutral.0}',
355
- alpha: 0.8,
356
- offsetX: '0px',
357
- offsetY: '3px',
358
- blur: '6px',
359
- spread: '0px',
360
- },
361
- ],
362
- },
363
- },
364
- },
365
- },
366
- },
367
- floating: {
368
- small: {
369
- $value: [
370
- {
371
- color: '{overlay.borderColor}',
372
- alpha: 0.5,
373
- offsetX: '0px',
374
- offsetY: '0px',
375
- blur: '0px',
376
- spread: '1px',
377
- },
378
- {
379
- color: '{base.color.neutral.12}',
380
- alpha: 0.04,
381
- offsetX: '0px',
382
- offsetY: '6px',
383
- blur: '12px',
384
- spread: '-3px',
385
- },
386
- {
387
- color: '{base.color.neutral.12}',
388
- alpha: 0.12,
389
- offsetX: '0px',
390
- offsetY: '6px',
391
- blur: '18px',
392
- spread: '0px',
393
- },
394
- ],
395
- $type: 'shadow',
396
- $extensions: {
397
- 'org.primer.figma': {
398
- collection: 'mode',
399
- group: 'shadow',
400
- },
401
- 'org.primer.overrides': {
402
- dark: {
403
- $value: [
404
- {
405
- color: '{overlay.borderColor}',
406
- alpha: 1,
407
- offsetX: '0px',
408
- offsetY: '0px',
409
- blur: '0px',
410
- spread: '1px',
411
- },
412
- {
413
- color: '{base.color.neutral.0}',
414
- alpha: 0.4,
415
- offsetX: '0px',
416
- offsetY: '6px',
417
- blur: '12px',
418
- spread: '-3px',
419
- },
420
- {
421
- color: '{base.color.neutral.0}',
422
- alpha: 0.4,
423
- offsetX: '0px',
424
- offsetY: '6px',
425
- blur: '18px',
426
- spread: '0px',
427
- },
428
- ],
429
- },
430
- },
431
- },
432
- },
433
- medium: {
434
- $value: [
435
- {
436
- color: '{overlay.borderColor}',
437
- alpha: 0,
438
- offsetX: '0px',
439
- offsetY: '0px',
440
- blur: '0px',
441
- spread: '1px',
442
- },
443
- {
444
- color: '{base.color.neutral.12}',
445
- alpha: 0.08,
446
- offsetX: '0px',
447
- offsetY: '8px',
448
- blur: '16px',
449
- spread: '-4px',
450
- },
451
- {
452
- color: '{base.color.neutral.12}',
453
- alpha: 0.08,
454
- offsetX: '0px',
455
- offsetY: '4px',
456
- blur: '32px',
457
- spread: '-4px',
458
- },
459
- {
460
- color: '{base.color.neutral.12}',
461
- alpha: 0.08,
462
- offsetX: '0px',
463
- offsetY: '24px',
464
- blur: '48px',
465
- spread: '-12px',
466
- },
467
- {
468
- color: '{base.color.neutral.12}',
469
- alpha: 0.08,
470
- offsetX: '0px',
471
- offsetY: '48px',
472
- blur: '96px',
473
- spread: '-24px',
474
- },
475
- ],
476
- $type: 'shadow',
477
- $extensions: {
478
- 'org.primer.figma': {
479
- collection: 'mode',
480
- group: 'shadow',
481
- },
482
- 'org.primer.overrides': {
483
- dark: {
484
- $value: [
485
- {
486
- color: '{overlay.borderColor}',
487
- alpha: 1,
488
- offsetX: '0px',
489
- offsetY: '0px',
490
- blur: '0px',
491
- spread: '1px',
492
- },
493
- {
494
- color: '{base.color.neutral.0}',
495
- alpha: 0.4,
496
- offsetX: '0px',
497
- offsetY: '8px',
498
- blur: '16px',
499
- spread: '-4px',
500
- },
501
- {
502
- color: '{base.color.neutral.0}',
503
- alpha: 0.4,
504
- offsetX: '0px',
505
- offsetY: '4px',
506
- blur: '32px',
507
- spread: '-4px',
508
- },
509
- {
510
- color: '{base.color.neutral.0}',
511
- alpha: 0.4,
512
- offsetX: '0px',
513
- offsetY: '24px',
514
- blur: '48px',
515
- spread: '-12px',
516
- },
517
- {
518
- color: '{base.color.neutral.0}',
519
- alpha: 0.4,
520
- offsetX: '0px',
521
- offsetY: '48px',
522
- blur: '96px',
523
- spread: '-24px',
524
- },
525
- ],
526
- },
527
- },
528
- },
529
- },
530
- large: {
531
- $value: [
532
- {
533
- color: '{overlay.borderColor}',
534
- alpha: 0,
535
- offsetX: '0px',
536
- offsetY: '0px',
537
- blur: '0px',
538
- spread: '1px',
539
- },
540
- {
541
- color: '{base.color.neutral.12}',
542
- alpha: 0.24,
543
- offsetX: '0px',
544
- offsetY: '40px',
545
- blur: '80px',
546
- spread: '0px',
547
- },
548
- ],
549
- $type: 'shadow',
550
- $extensions: {
551
- 'org.primer.figma': {
552
- collection: 'mode',
553
- group: 'shadow',
554
- },
555
- 'org.primer.overrides': {
556
- dark: {
557
- $value: [
558
- {
559
- color: '{overlay.borderColor}',
560
- alpha: 1,
561
- offsetX: '0px',
562
- offsetY: '0px',
563
- blur: '0px',
564
- spread: '1px',
565
- },
566
- {
567
- color: '{base.color.neutral.0}',
568
- alpha: 1,
569
- offsetX: '0px',
570
- offsetY: '24px',
571
- blur: '48px',
572
- spread: '0px',
573
- },
574
- ],
575
- },
576
- },
577
- },
578
- },
579
- xlarge: {
580
- $value: [
581
- {
582
- color: '{overlay.borderColor}',
583
- alpha: 0,
584
- offsetX: '0px',
585
- offsetY: '0px',
586
- blur: '0px',
587
- spread: '1px',
588
- },
589
- {
590
- color: '{base.color.neutral.12}',
591
- alpha: 0.32,
592
- offsetX: '0px',
593
- offsetY: '56px',
594
- blur: '112px',
595
- spread: '0px',
596
- },
597
- ],
598
- $type: 'shadow',
599
- $extensions: {
600
- 'org.primer.figma': {
601
- collection: 'mode',
602
- group: 'shadow',
603
- },
604
- 'org.primer.overrides': {
605
- dark: {
606
- $value: [
607
- {
608
- color: '{overlay.borderColor}',
609
- alpha: 1,
610
- offsetX: '0px',
611
- offsetY: '0px',
612
- blur: '0px',
613
- spread: '1px',
614
- },
615
- {
616
- color: '{base.color.neutral.0}',
617
- alpha: 1,
618
- offsetX: '0px',
619
- offsetY: '32px',
620
- blur: '64px',
621
- spread: '0px',
622
- },
623
- ],
624
- },
625
- },
626
- },
627
- },
628
- legacy: {
629
- $value: [
630
- {
631
- color: '{base.color.neutral.12}',
632
- alpha: 0.04,
633
- offsetX: '0px',
634
- offsetY: '6px',
635
- blur: '12px',
636
- spread: '-3px',
637
- },
638
- {
639
- color: '{base.color.neutral.12}',
640
- alpha: 0.12,
641
- offsetX: '0px',
642
- offsetY: '6px',
643
- blur: '18px',
644
- spread: '0px',
645
- },
646
- ],
647
- $type: 'shadow',
648
- $extensions: {
649
- 'org.primer.figma': {
650
- },
651
- 'org.primer.overrides': {
652
- dark: {
653
- $value: [
654
- {
655
- color: '{base.color.neutral.0}',
656
- alpha: 0.4,
657
- offsetX: '0px',
658
- offsetY: '6px',
659
- blur: '12px',
660
- spread: '-3px',
661
- },
662
- {
663
- color: '{base.color.neutral.0}',
664
- alpha: 0.4,
665
- offsetX: '0px',
666
- offsetY: '6px',
667
- blur: '18px',
668
- spread: '0px',
669
- },
670
- ],
671
- },
672
- },
673
- },
674
- },
675
- },
676
- },
677
- }