@primer/primitives 10.2.0 → 10.3.0-rc.22c9c6cf

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 (123) hide show
  1. package/dist/build/formats/cssCustomMedia.js +2 -2
  2. package/dist/build/formats/jsonOneDimensional.js +2 -1
  3. package/dist/build/platforms/css.js +5 -2
  4. package/dist/build/platforms/figma.js +40 -36
  5. package/dist/build/preprocessors/themeOverrides.js +7 -4
  6. package/dist/build/schemas/collections.d.ts +1 -1
  7. package/dist/build/schemas/colorToken.d.ts +471 -65
  8. package/dist/build/schemas/colorToken.js +18 -15
  9. package/dist/build/schemas/shadowToken.js +2 -2
  10. package/dist/build/transformers/colorAlphaToCss.d.ts +1 -1
  11. package/dist/build/transformers/colorToHex.js +3 -3
  12. package/dist/build/transformers/colorToRgbAlpha.js +2 -2
  13. package/dist/build/transformers/figmaAttributes.js +2 -1
  14. package/dist/build/transformers/shadowToCss.js +2 -2
  15. package/dist/build/transformers/utilities/alpha.d.ts +2 -2
  16. package/dist/build/transformers/utilities/alpha.js +3 -3
  17. package/dist/build/types/styleDictionaryConfigGenerator.d.ts +1 -1
  18. package/dist/build/utilities/asArray.d.ts +1 -0
  19. package/dist/build/utilities/asArray.js +1 -0
  20. package/dist/build/utilities/log.d.ts +6 -0
  21. package/dist/build/utilities/log.js +34 -0
  22. package/dist/css/functional/size/border.css +5 -5
  23. package/dist/css/functional/size/size.css +15 -15
  24. package/dist/css/functional/size/viewport.css +2 -2
  25. package/dist/css/functional/themes/dark-colorblind.css +408 -408
  26. package/dist/css/functional/themes/dark-dimmed.css +390 -390
  27. package/dist/css/functional/themes/dark-high-contrast.css +412 -412
  28. package/dist/css/functional/themes/dark-tritanopia.css +406 -406
  29. package/dist/css/functional/themes/dark.css +416 -416
  30. package/dist/css/functional/themes/light-colorblind.css +444 -444
  31. package/dist/css/functional/themes/light-high-contrast.css +438 -438
  32. package/dist/css/functional/themes/light-tritanopia.css +432 -432
  33. package/dist/css/functional/themes/light.css +444 -444
  34. package/dist/css/primitives.css +20 -20
  35. package/dist/docs/base/motion/motion.json +88 -73
  36. package/dist/docs/base/size/size.json +94 -75
  37. package/dist/docs/base/typography/typography.json +14 -10
  38. package/dist/docs/functional/motion/motion.json +19 -15
  39. package/dist/docs/functional/size/border.json +139 -125
  40. package/dist/docs/functional/size/breakpoints.json +31 -25
  41. package/dist/docs/functional/size/size-coarse.json +13 -10
  42. package/dist/docs/functional/size/size-fine.json +9 -6
  43. package/dist/docs/functional/size/size.json +499 -433
  44. package/dist/docs/functional/size/viewport.json +32 -26
  45. package/dist/docs/functional/themes/dark-colorblind.json +7846 -6530
  46. package/dist/docs/functional/themes/dark-dimmed.json +7774 -6498
  47. package/dist/docs/functional/themes/dark-high-contrast.json +8121 -6737
  48. package/dist/docs/functional/themes/dark-tritanopia.json +7817 -6543
  49. package/dist/docs/functional/themes/dark.json +7772 -6562
  50. package/dist/docs/functional/themes/light-colorblind.json +7753 -6455
  51. package/dist/docs/functional/themes/light-high-contrast.json +7983 -6643
  52. package/dist/docs/functional/themes/light-tritanopia.json +7732 -6454
  53. package/dist/docs/functional/themes/light.json +7658 -6450
  54. package/dist/docs/functional/typography/typography.json +518 -472
  55. package/dist/figma/themes/dark-colorblind.json +5704 -5570
  56. package/dist/figma/themes/dark-dimmed.json +5204 -5122
  57. package/dist/figma/themes/dark-high-contrast.json +4381 -4166
  58. package/dist/figma/themes/dark-tritanopia.json +5354 -5271
  59. package/dist/figma/themes/dark.json +5505 -5504
  60. package/dist/figma/themes/light-colorblind.json +5666 -5567
  61. package/dist/figma/themes/light-high-contrast.json +4277 -4115
  62. package/dist/figma/themes/light-tritanopia.json +5071 -4991
  63. package/dist/figma/themes/light.json +4808 -4808
  64. package/dist/internalCss/dark-colorblind.css +1148 -1148
  65. package/dist/internalCss/dark-dimmed.css +1138 -1138
  66. package/dist/internalCss/dark-high-contrast.css +1154 -1154
  67. package/dist/internalCss/dark-tritanopia.css +1148 -1148
  68. package/dist/internalCss/dark.css +1150 -1150
  69. package/dist/internalCss/light-colorblind.css +1152 -1152
  70. package/dist/internalCss/light-high-contrast.css +1166 -1166
  71. package/dist/internalCss/light-tritanopia.css +1156 -1156
  72. package/dist/internalCss/light.css +1158 -1158
  73. package/dist/styleLint/base/motion/motion.json +97 -82
  74. package/dist/styleLint/base/size/size.json +102 -83
  75. package/dist/styleLint/base/typography/typography.json +16 -12
  76. package/dist/styleLint/functional/motion/motion.json +22 -18
  77. package/dist/styleLint/functional/size/border.json +140 -126
  78. package/dist/styleLint/functional/size/breakpoints.json +32 -26
  79. package/dist/styleLint/functional/size/size-coarse.json +14 -11
  80. package/dist/styleLint/functional/size/size-fine.json +10 -7
  81. package/dist/styleLint/functional/size/size.json +486 -420
  82. package/dist/styleLint/functional/size/viewport.json +36 -30
  83. package/dist/styleLint/functional/themes/dark-colorblind.json +7601 -6285
  84. package/dist/styleLint/functional/themes/dark-dimmed.json +7984 -6708
  85. package/dist/styleLint/functional/themes/dark-high-contrast.json +8150 -6766
  86. package/dist/styleLint/functional/themes/dark-tritanopia.json +7780 -6506
  87. package/dist/styleLint/functional/themes/dark.json +7689 -6479
  88. package/dist/styleLint/functional/themes/light-colorblind.json +7756 -6458
  89. package/dist/styleLint/functional/themes/light-high-contrast.json +8135 -6795
  90. package/dist/styleLint/functional/themes/light-tritanopia.json +7642 -6364
  91. package/dist/styleLint/functional/themes/light.json +7552 -6344
  92. package/dist/styleLint/functional/typography/typography.json +520 -474
  93. package/package.json +2 -2
  94. package/src/tokens/component/diffBlob.json5 +387 -0
  95. package/src/tokens/component/header.json5 +65 -0
  96. package/src/tokens/component/headerSerach.json5 +32 -0
  97. package/src/tokens/component/highlight.json5 +23 -0
  98. package/src/tokens/component/overlay.json5 +68 -0
  99. package/src/tokens/component/page.json5 +20 -0
  100. package/src/tokens/component/reactionButton.json5 +78 -0
  101. package/src/tokens/component/skeletonLoader.json5 +29 -0
  102. package/src/tokens/component/timelineBadge.json5 +19 -0
  103. package/src/tokens/functional/color/dark/app-dark.json5 +0 -399
  104. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -35
  105. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +0 -92
  106. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +5 -63
  107. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +0 -37
  108. package/src/tokens/functional/color/dark/patterns-dark.json5 +0 -194
  109. package/src/tokens/functional/color/light/app-light.json5 +0 -364
  110. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +0 -70
  111. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +15 -76
  112. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +0 -71
  113. package/src/tokens/functional/color/light/patterns-light.json5 +1 -192
  114. package/dist/figma/figma.json +0 -133
  115. package/dist/figma/shadows/dark-colorblind.json +0 -1152
  116. package/dist/figma/shadows/dark-dimmed.json +0 -1152
  117. package/dist/figma/shadows/dark-high-contrast.json +0 -1152
  118. package/dist/figma/shadows/dark-tritanopia.json +0 -1152
  119. package/dist/figma/shadows/dark.json +0 -1152
  120. package/dist/figma/shadows/light-colorblind.json +0 -1052
  121. package/dist/figma/shadows/light-high-contrast.json +0 -1052
  122. package/dist/figma/shadows/light-tritanopia.json +0 -1052
  123. package/dist/figma/shadows/light.json +0 -1052
@@ -10,7 +10,7 @@
10
10
  $type: 'color',
11
11
  },
12
12
  open: {
13
- $value: '{base.color.orange.5}',
13
+ $value: '{base.color.blue.5}',
14
14
  $type: 'color',
15
15
  },
16
16
  closed: {
@@ -31,15 +31,25 @@
31
31
  emphasis: {
32
32
  $value: '{base.color.blue.5}',
33
33
  $type: 'color',
34
+ $extensions: {
35
+ 'org.primer.figma': {
36
+ collection: 'mode',
37
+ group: 'semantic',
38
+ scopes: ['bgColor'],
39
+ codeSyntax: {
40
+ web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
41
+ },
42
+ },
43
+ },
34
44
  },
35
45
  },
36
46
  open: {
37
47
  muted: {
38
- $value: '{base.color.orange.0}',
48
+ $value: '{base.color.blue.0}',
39
49
  $type: 'color',
40
50
  },
41
51
  emphasis: {
42
- $value: '{base.color.orange.5}',
52
+ $value: '{base.color.blue.5}',
43
53
  $type: 'color',
44
54
  },
45
55
  },
@@ -67,12 +77,12 @@
67
77
  borderColor: {
68
78
  open: {
69
79
  muted: {
70
- $value: '{base.color.orange.3}',
80
+ $value: '{base.color.blue.3}',
71
81
  $type: 'color',
72
82
  alpha: 0.4,
73
83
  },
74
84
  emphasis: {
75
- $value: '{base.color.orange.4}',
85
+ $value: '{base.color.blue.4}',
76
86
  $type: 'color',
77
87
  },
78
88
  },
@@ -110,77 +120,6 @@
110
120
  },
111
121
  },
112
122
  },
113
- diffBlob: {
114
- additionNum: {
115
- bgColor: {
116
- $value: '{base.color.blue.1}',
117
- $type: 'color',
118
- },
119
- },
120
- additionWord: {
121
- bgColor: {
122
- $value: '{base.color.blue.1}',
123
- $type: 'color',
124
- },
125
- },
126
- deletionNum: {
127
- bgColor: {
128
- $value: '{base.color.orange.1}',
129
- $type: 'color',
130
- },
131
- },
132
- deletionWord: {
133
- bgColor: {
134
- $value: '{base.color.orange.1}',
135
- $type: 'color',
136
- },
137
- },
138
- hunkLine: {
139
- bgColor: {
140
- $value: '{base.color.neutral.1}',
141
- $type: 'color',
142
- $extensions: {
143
- 'org.primer.figma': {
144
- collection: 'mode',
145
- group: 'component',
146
- scopes: ['bgColor'],
147
- },
148
- },
149
- },
150
- },
151
- hunkNum: {
152
- bgColor: {
153
- rest: {
154
- $value: '{base.color.neutral.3}',
155
- $type: 'color',
156
- $extensions: {
157
- 'org.primer.figma': {
158
- collection: 'mode',
159
- group: 'component',
160
- scopes: ['bgColor'],
161
- },
162
- },
163
- },
164
- hover: {
165
- $value: '{base.color.neutral.7}',
166
- $type: 'color',
167
- $extensions: {
168
- 'org.primer.figma': {
169
- collection: 'mode',
170
- group: 'component',
171
- scopes: ['bgColor'],
172
- },
173
- },
174
- },
175
- },
176
- fgColor: {
177
- hover: {
178
- $value: '{fgColor.default}',
179
- $type: 'color',
180
- },
181
- },
182
- },
183
- },
184
123
  codeMirror: {
185
124
  syntax: {
186
125
  fgColor: {
@@ -110,77 +110,6 @@
110
110
  },
111
111
  },
112
112
  },
113
- diffBlob: {
114
- additionNum: {
115
- bgColor: {
116
- $value: '{base.color.blue.1}',
117
- $type: 'color',
118
- },
119
- },
120
- additionWord: {
121
- bgColor: {
122
- $value: '{base.color.blue.1}',
123
- $type: 'color',
124
- },
125
- },
126
- deletionNum: {
127
- bgColor: {
128
- $value: '{base.color.red.1}',
129
- $type: 'color',
130
- },
131
- },
132
- deletionWord: {
133
- bgColor: {
134
- $value: '{base.color.red.1}',
135
- $type: 'color',
136
- },
137
- },
138
- hunkLine: {
139
- bgColor: {
140
- $value: '{base.color.neutral.1}',
141
- $type: 'color',
142
- $extensions: {
143
- 'org.primer.figma': {
144
- collection: 'mode',
145
- group: 'component',
146
- scopes: ['bgColor'],
147
- },
148
- },
149
- },
150
- },
151
- hunkNum: {
152
- bgColor: {
153
- rest: {
154
- $value: '{base.color.neutral.3}',
155
- $type: 'color',
156
- $extensions: {
157
- 'org.primer.figma': {
158
- collection: 'mode',
159
- group: 'component',
160
- scopes: ['bgColor'],
161
- },
162
- },
163
- },
164
- hover: {
165
- $value: '{base.color.neutral.7}',
166
- $type: 'color',
167
- $extensions: {
168
- 'org.primer.figma': {
169
- collection: 'mode',
170
- group: 'component',
171
- scopes: ['bgColor'],
172
- },
173
- },
174
- },
175
- },
176
- fgColor: {
177
- hover: {
178
- $value: '{fgColor.default}',
179
- $type: 'color',
180
- },
181
- },
182
- },
183
- },
184
113
  codeMirror: {
185
114
  syntax: {
186
115
  fgColor: {
@@ -1629,58 +1629,7 @@
1629
1629
  },
1630
1630
  },
1631
1631
  },
1632
- reactionButton: {
1633
- selected: {
1634
- bgColor: {
1635
- rest: {
1636
- $value: '{base.color.blue.0}',
1637
- $type: 'color',
1638
- $extensions: {
1639
- 'org.primer.figma': {
1640
- collection: 'mode',
1641
- group: 'component (internal)',
1642
- scopes: ['bgColor'],
1643
- },
1644
- },
1645
- },
1646
- hover: {
1647
- $value: '#caecff',
1648
- $type: 'color',
1649
- $extensions: {
1650
- 'org.primer.figma': {
1651
- collection: 'mode',
1652
- group: 'component (internal)',
1653
- scopes: ['bgColor'],
1654
- },
1655
- },
1656
- },
1657
- },
1658
- fgColor: {
1659
- rest: {
1660
- $value: '{fgColor.link}',
1661
- $type: 'color',
1662
- $extensions: {
1663
- 'org.primer.figma': {
1664
- collection: 'mode',
1665
- group: 'component (internal)',
1666
- scopes: ['fgColor'],
1667
- },
1668
- },
1669
- },
1670
- hover: {
1671
- $value: '{base.color.blue.6}',
1672
- $type: 'color',
1673
- $extensions: {
1674
- 'org.primer.figma': {
1675
- collection: 'mode',
1676
- group: 'component (internal)',
1677
- scopes: ['fgColor'],
1678
- },
1679
- },
1680
- },
1681
- },
1682
- },
1683
- },
1632
+
1684
1633
  focus: {
1685
1634
  outlineColor: {
1686
1635
  $value: '{borderColor.accent.emphasis}',
@@ -1694,81 +1643,6 @@
1694
1643
  },
1695
1644
  },
1696
1645
  },
1697
- header: {
1698
- bgColor: {
1699
- $value: '{base.color.neutral.12}',
1700
- $type: 'color',
1701
- $extensions: {
1702
- 'org.primer.figma': {
1703
- collection: 'mode',
1704
- group: 'component (internal)',
1705
- scopes: ['bgColor'],
1706
- },
1707
- },
1708
- },
1709
- fgColor: {
1710
- default: {
1711
- $value: '{base.color.neutral.0}',
1712
- $type: 'color',
1713
- $extensions: {
1714
- 'org.primer.figma': {
1715
- collection: 'mode',
1716
- group: 'component (internal)',
1717
- scopes: ['fgColor'],
1718
- },
1719
- },
1720
- alpha: 0.7,
1721
- },
1722
- logo: {
1723
- $value: '{base.color.neutral.0}',
1724
- $type: 'color',
1725
- $extensions: {
1726
- 'org.primer.figma': {
1727
- collection: 'mode',
1728
- group: 'component (internal)',
1729
- scopes: ['fgColor'],
1730
- },
1731
- },
1732
- },
1733
- },
1734
- borderColor: {
1735
- divider: {
1736
- $value: '{base.color.neutral.8}',
1737
- $type: 'color',
1738
- $extensions: {
1739
- 'org.primer.figma': {
1740
- collection: 'mode',
1741
- group: 'component (internal)',
1742
- scopes: ['borderColor'],
1743
- },
1744
- },
1745
- },
1746
- },
1747
- },
1748
- headerSearch: {
1749
- bgColor: {
1750
- $value: '{base.color.neutral.12}',
1751
- $type: 'color',
1752
- $extensions: {
1753
- 'org.primer.figma': {
1754
- collection: 'mode',
1755
- group: 'component (internal)',
1756
- scopes: ['bgColor'],
1757
- },
1758
- },
1759
- },
1760
- borderColor: {
1761
- $value: '{base.color.neutral.8}',
1762
- $type: 'color',
1763
- $extensions: {
1764
- 'org.primer.figma': {
1765
- collection: 'mode',
1766
- group: 'component (internal)',
1767
- scopes: ['borderColor'],
1768
- },
1769
- },
1770
- },
1771
- },
1772
1646
  menu: {
1773
1647
  bgColor: {
1774
1648
  active: {
@@ -1784,44 +1658,6 @@
1784
1658
  },
1785
1659
  },
1786
1660
  },
1787
- overlay: {
1788
- bgColor: {
1789
- $value: '{base.color.neutral.0}',
1790
- $type: 'color',
1791
- $extensions: {
1792
- 'org.primer.figma': {
1793
- collection: 'mode',
1794
- group: 'component (internal)',
1795
- scopes: ['bgColor'],
1796
- },
1797
- },
1798
- },
1799
- borderColor: {
1800
- $value: '{borderColor.muted}',
1801
- $type: 'color',
1802
- $extensions: {
1803
- 'org.primer.figma': {
1804
- collection: 'mode',
1805
- group: 'component (internal)',
1806
- },
1807
- },
1808
- alpha: 0.5,
1809
- },
1810
- backdrop: {
1811
- bgColor: {
1812
- $value: '{base.color.neutral.7}',
1813
- $type: 'color',
1814
- $extensions: {
1815
- 'org.primer.figma': {
1816
- collection: 'mode',
1817
- group: 'component (internal)',
1818
- scopes: ['bgColor'],
1819
- },
1820
- },
1821
- alpha: 0.4,
1822
- },
1823
- },
1824
- },
1825
1661
  selectMenu: {
1826
1662
  borderColor: {
1827
1663
  $value: '{base.color.transparent}',
@@ -1863,33 +1699,6 @@
1863
1699
  },
1864
1700
  },
1865
1701
  },
1866
- skeletonLoader: {
1867
- bgColor: {
1868
- $value: '{base.color.neutral.8}',
1869
- $type: 'color',
1870
- $extensions: {
1871
- 'org.primer.figma': {
1872
- collection: 'mode',
1873
- group: 'component',
1874
- scopes: ['bgColor'],
1875
- },
1876
- },
1877
- alpha: 0.1,
1878
- },
1879
- },
1880
- timelineBadge: {
1881
- bgColor: {
1882
- $value: '{bgColor.muted}',
1883
- $type: 'color',
1884
- $extensions: {
1885
- 'org.primer.figma': {
1886
- collection: 'mode',
1887
- group: 'component (internal)',
1888
- scopes: ['bgColor'],
1889
- },
1890
- },
1891
- },
1892
- },
1893
1702
  treeViewItem: {
1894
1703
  leadingVisual: {
1895
1704
  iconColor: {
@@ -1,133 +0,0 @@
1
- {
2
- "collections": {
3
- "base/size": {
4
- "modes": [
5
- "default"
6
- ],
7
- "groups": [
8
- "base/size"
9
- ]
10
- },
11
- "functional/size": {
12
- "modes": [
13
- "default"
14
- ],
15
- "groups": [
16
- "functional/size"
17
- ]
18
- },
19
- "pattern/size": {
20
- "modes": [
21
- "default"
22
- ],
23
- "groups": [
24
- "pattern/size",
25
- "component"
26
- ]
27
- },
28
- "base/color/dark-dimmed": {
29
- "modes": [
30
- "default"
31
- ],
32
- "groups": [
33
- "base/color/dark-dimmed"
34
- ]
35
- },
36
- "base/color/dark": {
37
- "modes": [
38
- "default"
39
- ],
40
- "groups": [
41
- "base/color/dark"
42
- ]
43
- },
44
- "base/color/dark-high-contrast": {
45
- "modes": [
46
- "default"
47
- ],
48
- "groups": [
49
- "base/color/dark-high-contrast"
50
- ]
51
- },
52
- "base/color/light-high-contrast": {
53
- "modes": [
54
- "default"
55
- ],
56
- "groups": [
57
- "base/color/light-high-contrast"
58
- ]
59
- },
60
- "base/color/light": {
61
- "modes": [
62
- "default"
63
- ],
64
- "groups": [
65
- "base/color/light"
66
- ]
67
- },
68
- "mode": {
69
- "modes": [
70
- "light",
71
- "dark",
72
- "dark dimmed",
73
- "light high contrast",
74
- "dark high contrast",
75
- "light colorblind",
76
- "dark colorblind",
77
- "light tritanopia",
78
- "dark tritanopia"
79
- ],
80
- "groups": [
81
- "component shadow",
82
- "shadow",
83
- "component",
84
- "component (internal)",
85
- "semantic",
86
- "syntax"
87
- ]
88
- },
89
- "base/typography": {
90
- "modes": [
91
- "default"
92
- ],
93
- "groups": [
94
- "base/typography"
95
- ]
96
- },
97
- "typography": {
98
- "modes": [
99
- "default"
100
- ],
101
- "groups": [
102
- "typography"
103
- ]
104
- }
105
- },
106
- "files": [
107
- "dist/figma/dimension/dimension.json",
108
- "dist/figma/scales/dark-dimmed.json",
109
- "dist/figma/scales/dark-high-constrast.json",
110
- "dist/figma/scales/dark.json",
111
- "dist/figma/scales/light-high-constrast.json",
112
- "dist/figma/scales/light.json",
113
- "dist/figma/shadows/dark-colorblind.json",
114
- "dist/figma/shadows/dark-dimmed.json",
115
- "dist/figma/shadows/dark-high-contrast.json",
116
- "dist/figma/shadows/dark-tritanopia.json",
117
- "dist/figma/shadows/dark.json",
118
- "dist/figma/shadows/light-colorblind.json",
119
- "dist/figma/shadows/light-high-contrast.json",
120
- "dist/figma/shadows/light-tritanopia.json",
121
- "dist/figma/shadows/light.json",
122
- "dist/figma/themes/dark-colorblind.json",
123
- "dist/figma/themes/dark-dimmed.json",
124
- "dist/figma/themes/dark-high-contrast.json",
125
- "dist/figma/themes/dark-tritanopia.json",
126
- "dist/figma/themes/dark.json",
127
- "dist/figma/themes/light-colorblind.json",
128
- "dist/figma/themes/light-high-contrast.json",
129
- "dist/figma/themes/light-tritanopia.json",
130
- "dist/figma/themes/light.json",
131
- "dist/figma/typography/typography.json"
132
- ]
133
- }