@primer/primitives 10.3.0-rc.b425078b → 10.3.0

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 (56) hide show
  1. package/dist/build/transformers/colorToHex.js +3 -3
  2. package/dist/build/transformers/colorToRgbAlpha.js +2 -2
  3. package/dist/build/transformers/shadowToCss.js +2 -2
  4. package/dist/build/transformers/utilities/alpha.d.ts +2 -2
  5. package/dist/build/transformers/utilities/alpha.js +3 -3
  6. package/dist/build/utilities/log.d.ts +6 -0
  7. package/dist/build/utilities/log.js +34 -0
  8. package/dist/docs/functional/themes/dark-colorblind.json +174 -12
  9. package/dist/docs/functional/themes/dark-dimmed.json +212 -12
  10. package/dist/docs/functional/themes/dark-high-contrast.json +213 -13
  11. package/dist/docs/functional/themes/dark-tritanopia.json +174 -12
  12. package/dist/docs/functional/themes/dark.json +174 -12
  13. package/dist/docs/functional/themes/light-colorblind.json +170 -10
  14. package/dist/docs/functional/themes/light-high-contrast.json +211 -11
  15. package/dist/docs/functional/themes/light-tritanopia.json +170 -10
  16. package/dist/docs/functional/themes/light.json +170 -10
  17. package/dist/figma/themes/dark-colorblind.json +165 -164
  18. package/dist/figma/themes/dark-dimmed.json +165 -115
  19. package/dist/figma/themes/dark-high-contrast.json +165 -114
  20. package/dist/figma/themes/dark-tritanopia.json +165 -164
  21. package/dist/figma/themes/dark.json +165 -164
  22. package/dist/figma/themes/light-colorblind.json +164 -164
  23. package/dist/figma/themes/light-high-contrast.json +151 -100
  24. package/dist/figma/themes/light-tritanopia.json +164 -164
  25. package/dist/figma/themes/light.json +164 -164
  26. package/dist/styleLint/functional/themes/dark-colorblind.json +174 -12
  27. package/dist/styleLint/functional/themes/dark-dimmed.json +212 -12
  28. package/dist/styleLint/functional/themes/dark-high-contrast.json +213 -13
  29. package/dist/styleLint/functional/themes/dark-tritanopia.json +174 -12
  30. package/dist/styleLint/functional/themes/dark.json +174 -12
  31. package/dist/styleLint/functional/themes/light-colorblind.json +170 -10
  32. package/dist/styleLint/functional/themes/light-high-contrast.json +211 -11
  33. package/dist/styleLint/functional/themes/light-tritanopia.json +170 -10
  34. package/dist/styleLint/functional/themes/light.json +170 -10
  35. package/package.json +1 -1
  36. package/src/tokens/component/header.json5 +65 -0
  37. package/src/tokens/component/headerSerach.json5 +32 -0
  38. package/src/tokens/component/overlay.json5 +68 -0
  39. package/src/tokens/component/skeletonLoader.json5 +29 -0
  40. package/src/tokens/functional/color/dark/app-dark.json5 +0 -81
  41. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -18
  42. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +0 -21
  43. package/src/tokens/functional/color/dark/patterns-dark.json5 +0 -127
  44. package/src/tokens/functional/color/light/app-light.json5 +0 -75
  45. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +0 -21
  46. package/src/tokens/functional/color/light/patterns-light.json5 +0 -127
  47. package/dist/figma/figma.json +0 -133
  48. package/dist/figma/shadows/dark-colorblind.json +0 -1152
  49. package/dist/figma/shadows/dark-dimmed.json +0 -1152
  50. package/dist/figma/shadows/dark-high-contrast.json +0 -1152
  51. package/dist/figma/shadows/dark-tritanopia.json +0 -1152
  52. package/dist/figma/shadows/dark.json +0 -1152
  53. package/dist/figma/shadows/light-colorblind.json +0 -1052
  54. package/dist/figma/shadows/light-high-contrast.json +0 -1052
  55. package/dist/figma/shadows/light-tritanopia.json +0 -1052
  56. package/dist/figma/shadows/light.json +0 -1052
package/src/tokens/component/header.json5 ADDED
@@ -0,0 +1,65 @@
1
+ {
2
+ header: {
3
+ bgColor: {
4
+ $value: '{base.color.neutral.12}',
5
+ $type: 'color',
6
+ $extensions: {
7
+ 'org.primer.figma': {
8
+ collection: 'mode',
9
+ group: 'component (internal)',
10
+ scopes: ['bgColor'],
11
+ },
12
+ 'org.primer.overrides': {
13
+ dark: {
14
+ $value: '{base.color.neutral.2}',
15
+ alpha: 0.95,
16
+ },
17
+ },
18
+ },
19
+ },
20
+ fgColor: {
21
+ default: {
22
+ $value: '{base.color.neutral.0}',
23
+ $type: 'color',
24
+ $extensions: {
25
+ 'org.primer.figma': {
26
+ collection: 'mode',
27
+ group: 'component (internal)',
28
+ scopes: ['fgColor'],
29
+ },
30
+ 'org.primer.overrides': {
31
+ dark: '{base.color.neutral.13}',
32
+ },
33
+ },
34
+ alpha: 0.7,
35
+ },
36
+ logo: {
37
+ $value: '{base.color.neutral.0}',
38
+ $type: 'color',
39
+ $extensions: {
40
+ 'org.primer.figma': {
41
+ collection: 'mode',
42
+ group: 'component (internal)',
43
+ scopes: ['fgColor'],
44
+ },
45
+ 'org.primer.overrides': {
46
+ dark: '{base.color.neutral.12}',
47
+ },
48
+ },
49
+ },
50
+ },
51
+ borderColor: {
52
+ divider: {
53
+ $value: '{base.color.neutral.8}',
54
+ $type: 'color',
55
+ $extensions: {
56
+ 'org.primer.figma': {
57
+ collection: 'mode',
58
+ group: 'component (internal)',
59
+ scopes: ['borderColor'],
60
+ },
61
+ },
62
+ },
63
+ },
64
+ },
65
+ }
package/src/tokens/component/headerSerach.json5 ADDED
@@ -0,0 +1,32 @@
1
+ {
2
+ headerSearch: {
3
+ bgColor: {
4
+ $value: '{base.color.neutral.12}',
5
+ $type: 'color',
6
+ $extensions: {
7
+ 'org.primer.figma': {
8
+ collection: 'mode',
9
+ group: 'component (internal)',
10
+ scopes: ['bgColor'],
11
+ },
12
+ 'org.primer.overrides': {
13
+ dark: '{base.color.neutral.1}',
14
+ },
15
+ },
16
+ },
17
+ borderColor: {
18
+ $value: '{base.color.neutral.8}',
19
+ $type: 'color',
20
+ $extensions: {
21
+ 'org.primer.figma': {
22
+ collection: 'mode',
23
+ group: 'component (internal)',
24
+ scopes: ['borderColor'],
25
+ },
26
+ 'org.primer.overrides': {
27
+ dark: '{base.color.neutral.5}',
28
+ },
29
+ },
30
+ },
31
+ },
32
+ }
package/src/tokens/component/overlay.json5 ADDED
@@ -0,0 +1,68 @@
1
+ {
2
+ overlay: {
3
+ bgColor: {
4
+ $value: '{base.color.neutral.0}',
5
+ $type: 'color',
6
+ $extensions: {
7
+ 'org.primer.figma': {
8
+ collection: 'mode',
9
+ group: 'component (internal)',
10
+ scopes: ['bgColor'],
11
+ },
12
+ 'org.primer.overrides': {
13
+ dark: '{bgColor.muted}',
14
+ 'dark-dimmed': '{base.color.neutral.5}',
15
+ },
16
+ },
17
+ },
18
+ borderColor: {
19
+ $value: '{borderColor.muted}',
20
+ $type: 'color',
21
+ $extensions: {
22
+ 'org.primer.figma': {
23
+ collection: 'mode',
24
+ group: 'component (internal)',
25
+ },
26
+ 'org.primer.overrides': {
27
+ dark: {
28
+ alpha: 1,
29
+ $value: '{borderColor.muted}',
30
+ },
31
+ 'dark-dimmed': {
32
+ $value: '{base.color.neutral.7}',
33
+ alpha: 0.7,
34
+ },
35
+ 'light-high-contrast': {
36
+ alpha: 1,
37
+ $value: '{borderColor.default}',
38
+ },
39
+ 'dark-high-contrast': {
40
+ $value: '{borderColor.default}',
41
+ alpha: 1,
42
+ },
43
+ },
44
+ },
45
+ alpha: 0.5,
46
+ },
47
+ backdrop: {
48
+ bgColor: {
49
+ $value: '{base.color.neutral.7}',
50
+ $type: 'color',
51
+ $extensions: {
52
+ 'org.primer.figma': {
53
+ collection: 'mode',
54
+ group: 'component (internal)',
55
+ scopes: ['bgColor'],
56
+ },
57
+ 'org.primer.overrides': {
58
+ dark: '{base.color.neutral.3}',
59
+ 'dark-dimmed': '{base.color.neutral.4}',
60
+ 'light-high-contrast': '{base.color.neutral.11}',
61
+ 'dark-high-contrast': '{base.color.neutral.11}',
62
+ },
63
+ },
64
+ alpha: 0.4,
65
+ },
66
+ },
67
+ },
68
+ }
package/src/tokens/component/skeletonLoader.json5 ADDED
@@ -0,0 +1,29 @@
1
+ {
2
+ skeletonLoader: {
3
+ bgColor: {
4
+ $value: '{base.color.neutral.8}',
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
+ alpha: 0.2,
15
+ },
16
+ 'light-high-contrast': {
17
+ $value: '{base.color.neutral.5}',
18
+ alpha: 1,
19
+ },
20
+ 'dark-high-contrast': {
21
+ $value: '{base.color.neutral.5}',
22
+ alpha: 1,
23
+ },
24
+ },
25
+ },
26
+ alpha: 0.1,
27
+ },
28
+ },
29
+ }
package/src/tokens/functional/color/dark/app-dark.json5 CHANGED
@@ -251,85 +251,4 @@
251
251
  },
252
252
  },
253
253
  },
254
- header: {
255
- fgColor: {
256
- default: {
257
- $value: '{fgColor.onEmphasis}',
258
- $type: 'color',
259
- $extensions: {
260
- 'org.primer.figma': {
261
- collection: 'mode',
262
-
263
- group: 'component',
264
- scopes: ['fgColor'],
265
- },
266
- },
267
- alpha: 0.7,
268
- },
269
- logo: {
270
- $value: '{fgColor.onEmphasis}',
271
- $type: 'color',
272
- $extensions: {
273
- 'org.primer.figma': {
274
- collection: 'mode',
275
-
276
- group: 'component',
277
- scopes: ['fgColor'],
278
- },
279
- },
280
- },
281
- },
282
- bgColor: {
283
- $value: '{base.color.neutral.10}',
284
- $type: 'color',
285
- $extensions: {
286
- 'org.primer.figma': {
287
- collection: 'mode',
288
-
289
- group: 'component',
290
- scopes: ['bgColor'],
291
- },
292
- },
293
- },
294
- borderColor: {
295
- divider: {
296
- $value: '{base.color.neutral.4}',
297
- $type: 'color',
298
- $extensions: {
299
- 'org.primer.figma': {
300
- collection: 'mode',
301
-
302
- group: 'component',
303
- scopes: ['borderColor'],
304
- },
305
- },
306
- },
307
- },
308
- },
309
- headerSearch: {
310
- bgColor: {
311
- $value: '{base.color.neutral.10}',
312
- $type: 'color',
313
- $extensions: {
314
- 'org.primer.figma': {
315
- collection: 'mode',
316
-
317
- group: 'component',
318
- scopes: ['bgColor'],
319
- },
320
- },
321
- },
322
- borderColor: {
323
- $value: '{base.color.neutral.7}',
324
- $type: 'color',
325
- $extensions: {
326
- 'org.primer.figma': {
327
- collection: 'mode',
328
-
329
- group: 'component',
330
- scopes: ['borderColor'],
331
- },
332
- },
333
- },
334
- },
335
254
  }
package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 CHANGED
@@ -176,24 +176,6 @@
176
176
  },
177
177
  },
178
178
  },
179
- overlay: {
180
- backdrop: {
181
- bgColor: {
182
- $value: '{base.color.neutral.4}',
183
- $type: 'color',
184
- alpha: 0.4,
185
- },
186
- },
187
- bgColor: {
188
- $value: '{base.color.neutral.5}',
189
- $type: 'color',
190
- },
191
- borderColor: {
192
- $value: '{base.color.neutral.7}',
193
- $type: 'color',
194
- alpha: 0.7,
195
- },
196
- },
197
179
  button: {
198
180
  primary: {
199
181
  bgColor: {
package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 CHANGED
@@ -517,20 +517,6 @@
517
517
  },
518
518
  },
519
519
  },
520
- overlay: {
521
- borderColor: {
522
- $value: '{borderColor.default}',
523
- $type: 'color',
524
- alpha: null,
525
- },
526
- backdrop: {
527
- bgColor: {
528
- $value: '{base.color.neutral.11}',
529
- $type: 'color',
530
- alpha: 0.4,
531
- },
532
- },
533
- },
534
520
  display: {
535
521
  blue: {
536
522
  bgColor: {
@@ -885,11 +871,4 @@
885
871
  $type: 'color',
886
872
  },
887
873
  },
888
- skeletonLoader: {
889
- bgColor: {
890
- $value: '{base.color.neutral.5}',
891
- $type: 'color',
892
- alpha: 1,
893
- },
894
- },
895
874
  }
package/src/tokens/functional/color/dark/patterns-dark.json5 CHANGED
@@ -1649,82 +1649,6 @@
1649
1649
  },
1650
1650
  },
1651
1651
  },
1652
- header: {
1653
- bgColor: {
1654
- $value: '{base.color.neutral.2}',
1655
- $type: 'color',
1656
- $extensions: {
1657
- 'org.primer.figma': {
1658
- collection: 'mode',
1659
- group: 'component (internal)',
1660
- scopes: ['bgColor'],
1661
- },
1662
- },
1663
- alpha: 0.95,
1664
- },
1665
- fgColor: {
1666
- default: {
1667
- $value: '{base.color.neutral.13}',
1668
- $type: 'color',
1669
- $extensions: {
1670
- 'org.primer.figma': {
1671
- collection: 'mode',
1672
- group: 'component (internal)',
1673
- scopes: ['fgColor'],
1674
- },
1675
- },
1676
- alpha: 0.7,
1677
- },
1678
- logo: {
1679
- $value: '{base.color.neutral.12}',
1680
- $type: 'color',
1681
- $extensions: {
1682
- 'org.primer.figma': {
1683
- collection: 'mode',
1684
- group: 'component (internal)',
1685
- scopes: ['fgColor'],
1686
- },
1687
- },
1688
- },
1689
- },
1690
- borderColor: {
1691
- divider: {
1692
- $value: '{base.color.neutral.8}',
1693
- $type: 'color',
1694
- $extensions: {
1695
- 'org.primer.figma': {
1696
- collection: 'mode',
1697
- group: 'component (internal)',
1698
- scopes: ['borderColor'],
1699
- },
1700
- },
1701
- },
1702
- },
1703
- },
1704
- headerSearch: {
1705
- bgColor: {
1706
- $value: '{base.color.neutral.1}',
1707
- $type: 'color',
1708
- $extensions: {
1709
- 'org.primer.figma': {
1710
- collection: 'mode',
1711
- group: 'component (internal)',
1712
- scopes: ['bgColor'],
1713
- },
1714
- },
1715
- },
1716
- borderColor: {
1717
- $value: '{base.color.neutral.5}',
1718
- $type: 'color',
1719
- $extensions: {
1720
- 'org.primer.figma': {
1721
- collection: 'mode',
1722
- group: 'component (internal)',
1723
- scopes: ['borderColor'],
1724
- },
1725
- },
1726
- },
1727
- },
1728
1652
  menu: {
1729
1653
  bgColor: {
1730
1654
  active: {
@@ -1740,43 +1664,6 @@
1740
1664
  },
1741
1665
  },
1742
1666
  },
1743
- overlay: {
1744
- bgColor: {
1745
- $value: '{bgColor.muted}',
1746
- $type: 'color',
1747
- $extensions: {
1748
- 'org.primer.figma': {
1749
- collection: 'mode',
1750
- group: 'component (internal)',
1751
- scopes: ['bgColor'],
1752
- },
1753
- },
1754
- },
1755
- borderColor: {
1756
- $value: '{borderColor.muted}',
1757
- $type: 'color',
1758
- $extensions: {
1759
- 'org.primer.figma': {
1760
- collection: 'mode',
1761
- group: 'component (internal)',
1762
- },
1763
- },
1764
- },
1765
- backdrop: {
1766
- bgColor: {
1767
- $value: '{base.color.neutral.3}',
1768
- $type: 'color',
1769
- $extensions: {
1770
- 'org.primer.figma': {
1771
- collection: 'mode',
1772
- group: 'component (internal)',
1773
- scopes: ['bgColor'],
1774
- },
1775
- },
1776
- alpha: 0.4,
1777
- },
1778
- },
1779
- },
1780
1667
  selectMenu: {
1781
1668
  borderColor: {
1782
1669
  $value: '{borderColor.default}',
@@ -1818,20 +1705,6 @@
1818
1705
  },
1819
1706
  },
1820
1707
  },
1821
- skeletonLoader: {
1822
- bgColor: {
1823
- $value: '{base.color.neutral.8}',
1824
- $type: 'color',
1825
- $extensions: {
1826
- 'org.primer.figma': {
1827
- collection: 'mode',
1828
- group: 'component',
1829
- scopes: ['bgColor'],
1830
- },
1831
- },
1832
- alpha: 0.2,
1833
- },
1834
- },
1835
1708
  treeViewItem: {
1836
1709
  leadingVisual: {
1837
1710
  iconColor: {
package/src/tokens/functional/color/light/app-light.json5 CHANGED
@@ -232,79 +232,4 @@
232
232
  },
233
233
  },
234
234
  },
235
- header: {
236
- fgColor: {
237
- default: {
238
- $value: '{fgColor.onEmphasis}',
239
- $type: 'color',
240
- $extensions: {
241
- 'org.primer.figma': {
242
- collection: 'mode',
243
- group: 'component',
244
- scopes: ['fgColor'],
245
- },
246
- },
247
- alpha: 0.7,
248
- },
249
- logo: {
250
- $value: '{fgColor.onEmphasis}',
251
- $type: 'color',
252
- $extensions: {
253
- 'org.primer.figma': {
254
- collection: 'mode',
255
- group: 'component',
256
- scopes: ['fgColor'],
257
- },
258
- },
259
- },
260
- },
261
- bgColor: {
262
- $value: '{base.color.neutral.13}',
263
- $type: 'color',
264
- $extensions: {
265
- 'org.primer.figma': {
266
- collection: 'mode',
267
- group: 'component',
268
- scopes: ['bgColor'],
269
- },
270
- },
271
- },
272
- borderColor: {
273
- divider: {
274
- $value: '{base.color.neutral.10}',
275
- $type: 'color',
276
- $extensions: {
277
- 'org.primer.figma': {
278
- collection: 'mode',
279
- group: 'component',
280
- scopes: ['borderColor'],
281
- },
282
- },
283
- },
284
- },
285
- },
286
- headerSearch: {
287
- bgColor: {
288
- $value: '{base.color.neutral.13}',
289
- $type: 'color',
290
- $extensions: {
291
- 'org.primer.figma': {
292
- collection: 'mode',
293
- group: 'component',
294
- scopes: ['bgColor'],
295
- },
296
- },
297
- },
298
- borderColor: {
299
- $value: '{base.color.neutral.10}',
300
- $type: 'color',
301
- $extensions: {
302
- 'org.primer.figma': {
303
- collection: 'mode',
304
- group: 'component',
305
- scopes: ['borderColor'],
306
- },
307
- },
308
- },
309
- },
310
235
  }
package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 CHANGED
@@ -448,20 +448,6 @@
448
448
  },
449
449
  },
450
450
  },
451
- overlay: {
452
- borderColor: {
453
- $value: '{borderColor.default}',
454
- $type: 'color',
455
- alpha: null,
456
- },
457
- backdrop: {
458
- bgColor: {
459
- $value: '{base.color.neutral.11}',
460
- $type: 'color',
461
- alpha: 0.4,
462
- },
463
- },
464
- },
465
451
  display: {
466
452
  blue: {
467
453
  bgColor: {
@@ -806,11 +792,4 @@
806
792
  },
807
793
  },
808
794
  },
809
- skeletonLoader: {
810
- bgColor: {
811
- $value: '{base.color.neutral.5}',
812
- $type: 'color',
813
- alpha: 1,
814
- },
815
- },
816
795
  }