@primer/primitives 11.4.0 → 11.4.1-rc.24c79953

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 (152) hide show
  1. package/DESIGN_TOKENS_GUIDE.md +185 -0
  2. package/DESIGN_TOKENS_SPEC.md +565 -0
  3. package/dist/build/formats/jsonFigma.js +8 -1
  4. package/dist/build/formats/markdownLlmGuidelines.d.ts +7 -6
  5. package/dist/build/formats/markdownLlmGuidelines.js +1034 -60
  6. package/dist/build/schemas/borderToken.d.ts +17 -3
  7. package/dist/build/schemas/colorToken.d.ts +1 -1
  8. package/dist/build/schemas/cubicBezierToken.d.ts +1 -1
  9. package/dist/build/schemas/dimensionToken.d.ts +9 -2
  10. package/dist/build/schemas/dimensionValue.d.ts +12 -1
  11. package/dist/build/schemas/dimensionValue.js +10 -13
  12. package/dist/build/schemas/durationToken.d.ts +8 -2
  13. package/dist/build/schemas/durationValue.d.ts +11 -1
  14. package/dist/build/schemas/durationValue.js +13 -3
  15. package/dist/build/schemas/fontFamilyToken.d.ts +1 -1
  16. package/dist/build/schemas/fontWeightToken.d.ts +1 -1
  17. package/dist/build/schemas/gradientToken.d.ts +1 -1
  18. package/dist/build/schemas/numberToken.d.ts +1 -1
  19. package/dist/build/schemas/shadowToken.d.ts +673 -85
  20. package/dist/build/schemas/stringToken.d.ts +1 -1
  21. package/dist/build/schemas/stringToken.js +1 -1
  22. package/dist/build/schemas/tokenType.d.ts +1 -1
  23. package/dist/build/schemas/transitionToken.d.ts +15 -3
  24. package/dist/build/schemas/typographyToken.d.ts +19 -5
  25. package/dist/build/schemas/typographyToken.js +1 -1
  26. package/dist/build/schemas/validTokenType.d.ts +1 -1
  27. package/dist/build/schemas/validTokenType.js +1 -1
  28. package/dist/build/schemas/viewportRangeToken.d.ts +1 -1
  29. package/dist/build/transformers/borderToCss.js +17 -1
  30. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  31. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  32. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  33. package/dist/build/transformers/dimensionToRem.js +21 -22
  34. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  35. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  36. package/dist/build/transformers/durationToCss.d.ts +2 -1
  37. package/dist/build/transformers/durationToCss.js +18 -11
  38. package/dist/build/transformers/shadowToCss.js +12 -1
  39. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  40. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  41. package/dist/build/types/borderTokenValue.d.ts +3 -1
  42. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  43. package/dist/build/types/shadowTokenValue.d.ts +6 -4
  44. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +32 -28
  45. package/dist/css/functional/themes/dark-colorblind.css +32 -28
  46. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +32 -28
  47. package/dist/css/functional/themes/dark-dimmed.css +32 -28
  48. package/dist/css/functional/themes/dark-high-contrast.css +32 -28
  49. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +32 -28
  50. package/dist/css/functional/themes/dark-tritanopia.css +32 -28
  51. package/dist/css/functional/themes/dark.css +32 -28
  52. package/dist/css/functional/themes/light-colorblind-high-contrast.css +32 -28
  53. package/dist/css/functional/themes/light-colorblind.css +32 -28
  54. package/dist/css/functional/themes/light-high-contrast.css +32 -28
  55. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +32 -28
  56. package/dist/css/functional/themes/light-tritanopia.css +32 -28
  57. package/dist/css/functional/themes/light.css +32 -28
  58. package/dist/css/primitives.css +4 -0
  59. package/dist/docs/base/motion/motion.json +96 -24
  60. package/dist/docs/base/size/size.json +76 -19
  61. package/dist/docs/base/typography/typography.json +24 -6
  62. package/dist/docs/functional/size/border.json +26 -11
  63. package/dist/docs/functional/size/breakpoints.json +24 -6
  64. package/dist/docs/functional/size/radius.json +16 -4
  65. package/dist/docs/functional/size/size.json +60 -15
  66. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +1423 -346
  67. package/dist/docs/functional/themes/dark-colorblind.json +1423 -346
  68. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +1423 -346
  69. package/dist/docs/functional/themes/dark-dimmed.json +1423 -346
  70. package/dist/docs/functional/themes/dark-high-contrast.json +1423 -346
  71. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +1423 -346
  72. package/dist/docs/functional/themes/dark-tritanopia.json +1423 -346
  73. package/dist/docs/functional/themes/dark.json +1423 -346
  74. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +1426 -349
  75. package/dist/docs/functional/themes/light-colorblind.json +1426 -349
  76. package/dist/docs/functional/themes/light-high-contrast.json +1426 -349
  77. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +1426 -349
  78. package/dist/docs/functional/themes/light-tritanopia.json +1426 -349
  79. package/dist/docs/functional/themes/light.json +1426 -349
  80. package/dist/docs/functional/typography/typography.json +8 -2
  81. package/dist/fallbacks/base/motion/motion.json +48 -12
  82. package/dist/figma/themes/light-colorblind.json +4 -4
  83. package/dist/figma/themes/light-high-contrast.json +4 -4
  84. package/dist/figma/themes/light-tritanopia.json +4 -4
  85. package/dist/figma/themes/light.json +4 -4
  86. package/dist/internalCss/dark-colorblind-high-contrast.css +28 -28
  87. package/dist/internalCss/dark-colorblind.css +28 -28
  88. package/dist/internalCss/dark-dimmed-high-contrast.css +28 -28
  89. package/dist/internalCss/dark-dimmed.css +28 -28
  90. package/dist/internalCss/dark-high-contrast.css +28 -28
  91. package/dist/internalCss/dark-tritanopia-high-contrast.css +28 -28
  92. package/dist/internalCss/dark-tritanopia.css +28 -28
  93. package/dist/internalCss/dark.css +28 -28
  94. package/dist/internalCss/light-colorblind-high-contrast.css +28 -28
  95. package/dist/internalCss/light-colorblind.css +28 -28
  96. package/dist/internalCss/light-high-contrast.css +28 -28
  97. package/dist/internalCss/light-tritanopia-high-contrast.css +28 -28
  98. package/dist/internalCss/light-tritanopia.css +28 -28
  99. package/dist/internalCss/light.css +28 -28
  100. package/dist/styleLint/base/motion/motion.json +96 -24
  101. package/dist/styleLint/base/size/size.json +76 -19
  102. package/dist/styleLint/base/typography/typography.json +30 -12
  103. package/dist/styleLint/functional/size/border.json +27 -12
  104. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  105. package/dist/styleLint/functional/size/radius.json +17 -5
  106. package/dist/styleLint/functional/size/size-coarse.json +3 -3
  107. package/dist/styleLint/functional/size/size-fine.json +3 -3
  108. package/dist/styleLint/functional/size/size.json +111 -66
  109. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +1551 -366
  110. package/dist/styleLint/functional/themes/dark-colorblind.json +1551 -366
  111. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +1551 -366
  112. package/dist/styleLint/functional/themes/dark-dimmed.json +1551 -366
  113. package/dist/styleLint/functional/themes/dark-high-contrast.json +1551 -366
  114. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +1551 -366
  115. package/dist/styleLint/functional/themes/dark-tritanopia.json +1551 -366
  116. package/dist/styleLint/functional/themes/dark.json +1551 -366
  117. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +1554 -369
  118. package/dist/styleLint/functional/themes/light-colorblind.json +1554 -369
  119. package/dist/styleLint/functional/themes/light-high-contrast.json +1554 -369
  120. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +1554 -369
  121. package/dist/styleLint/functional/themes/light-tritanopia.json +1554 -369
  122. package/dist/styleLint/functional/themes/light.json +1554 -369
  123. package/dist/styleLint/functional/typography/typography.json +28 -22
  124. package/package.json +6 -5
  125. package/src/tokens/base/motion/timing.json5 +12 -12
  126. package/src/tokens/base/size/size.json5 +19 -19
  127. package/src/tokens/base/typography/typography.json5 +6 -6
  128. package/src/tokens/component/avatar.json5 +72 -44
  129. package/src/tokens/component/button.json5 +1545 -1193
  130. package/src/tokens/functional/border/border.json5 +4 -1
  131. package/src/tokens/functional/color/bgColor.json5 +8 -0
  132. package/src/tokens/functional/color/display.json5 +7 -0
  133. package/src/tokens/functional/color/fgColor.json5 +8 -0
  134. package/src/tokens/functional/color/syntax.json5 +14 -0
  135. package/src/tokens/functional/shadow/shadow.json5 +678 -163
  136. package/src/tokens/functional/size/border.json5 +8 -8
  137. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  138. package/src/tokens/functional/size/radius.json5 +4 -4
  139. package/src/tokens/functional/size/size.json5 +15 -15
  140. package/src/tokens/functional/typography/typography.json5 +8 -4
  141. package/dist/build/parsers/index.d.ts +0 -1
  142. package/dist/build/parsers/index.js +0 -1
  143. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  144. package/dist/build/parsers/w3cJsonParser.js +0 -25
  145. package/dist/removed/testing.json5 +0 -4
  146. package/guidelines/color.llm.md +0 -16
  147. package/guidelines/guidelines.llm.md +0 -34
  148. package/guidelines/motion.llm.md +0 -41
  149. package/guidelines/spacing.llm.md +0 -20
  150. package/guidelines/typography.llm.md +0 -14
  151. package/src/tokens/removed/testing.json5 +0 -4
  152. package/token-guidelines.llm.md +0 -695
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "borderWidth-default": {
3
3
  "key": "{borderWidth.default}",
4
- "$value": ["0.00390625rem", "0.0625px"],
4
+ "$value": ["0.0625rem", "1px"],
5
5
  "$description": "Default border width for most UI elements. Alias of borderWidth.thin (1px)",
6
6
  "$type": "dimension",
7
7
  "$extensions": {
@@ -46,7 +46,10 @@
46
46
  "filePath": "src/tokens/functional/size/border.json5",
47
47
  "isSource": true,
48
48
  "original": {
49
- "$value": "2px",
49
+ "$value": {
50
+ "value": 2,
51
+ "unit": "px"
52
+ },
50
53
  "$description": "Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries",
51
54
  "$type": "dimension",
52
55
  "$extensions": {
@@ -79,7 +82,10 @@
79
82
  "filePath": "src/tokens/functional/size/border.json5",
80
83
  "isSource": true,
81
84
  "original": {
82
- "$value": "4px",
85
+ "$value": {
86
+ "value": 4,
87
+ "unit": "px"
88
+ },
83
89
  "$description": "Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators",
84
90
  "$type": "dimension",
85
91
  "$extensions": {
@@ -108,7 +114,10 @@
108
114
  "filePath": "src/tokens/functional/size/border.json5",
109
115
  "isSource": true,
110
116
  "original": {
111
- "$value": "1px",
117
+ "$value": {
118
+ "value": 1,
119
+ "unit": "px"
120
+ },
112
121
  "$description": "Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface",
113
122
  "$type": "dimension",
114
123
  "$extensions": {
@@ -127,13 +136,13 @@
127
136
  "key": "{boxShadow.thick}",
128
137
  "$value": "inset 0 0 0 0.125rem,2px",
129
138
  "$description": "Thick shadow (2px) used instead of a border for emphasis without layout shift",
130
- "$type": "string",
139
+ "$type": "custom-string",
131
140
  "filePath": "src/tokens/functional/size/border.json5",
132
141
  "isSource": true,
133
142
  "original": {
134
143
  "$value": "inset 0 0 0 {borderWidth.thick}",
135
144
  "$description": "Thick shadow (2px) used instead of a border for emphasis without layout shift",
136
- "$type": "string",
145
+ "$type": "custom-string",
137
146
  "key": "{boxShadow.thick}"
138
147
  },
139
148
  "name": "boxShadow-thick",
@@ -144,13 +153,13 @@
144
153
  "key": "{boxShadow.thicker}",
145
154
  "$value": "inset 0 0 0 0.25rem,4px",
146
155
  "$description": "Thickest shadow (4px) used for high emphasis borders without layout shift. Use sparingly for maximum visual impact",
147
- "$type": "string",
156
+ "$type": "custom-string",
148
157
  "filePath": "src/tokens/functional/size/border.json5",
149
158
  "isSource": true,
150
159
  "original": {
151
160
  "$value": "inset 0 0 0 {borderWidth.thicker}",
152
161
  "$description": "Thickest shadow (4px) used for high emphasis borders without layout shift. Use sparingly for maximum visual impact",
153
- "$type": "string",
162
+ "$type": "custom-string",
154
163
  "key": "{boxShadow.thicker}"
155
164
  },
156
165
  "name": "boxShadow-thicker",
@@ -161,13 +170,13 @@
161
170
  "key": "{boxShadow.thin}",
162
171
  "$value": "inset 0 0 0 0.0625rem,1px",
163
172
  "$description": "Thin shadow used instead of a border to prevent layout shift",
164
- "$type": "string",
173
+ "$type": "custom-string",
165
174
  "filePath": "src/tokens/functional/size/border.json5",
166
175
  "isSource": true,
167
176
  "original": {
168
177
  "$value": "inset 0 0 0 {borderWidth.thin}",
169
178
  "$description": "Thin shadow used instead of a border to prevent layout shift",
170
- "$type": "string",
179
+ "$type": "custom-string",
171
180
  "key": "{boxShadow.thin}"
172
181
  },
173
182
  "name": "boxShadow-thin",
@@ -188,7 +197,10 @@
188
197
  "filePath": "src/tokens/functional/size/border.json5",
189
198
  "isSource": true,
190
199
  "original": {
191
- "$value": "-2px",
200
+ "$value": {
201
+ "value": -2,
202
+ "unit": "px"
203
+ },
192
204
  "$description": "Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds",
193
205
  "$type": "dimension",
194
206
  "$extensions": {
@@ -221,7 +233,10 @@
221
233
  "filePath": "src/tokens/functional/size/border.json5",
222
234
  "isSource": true,
223
235
  "original": {
224
- "$value": "2px",
236
+ "$value": {
237
+ "value": 2,
238
+ "unit": "px"
239
+ },
225
240
  "$description": "Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements",
226
241
  "$type": "dimension",
227
242
  "$extensions": {
@@ -12,7 +12,10 @@
12
12
  "filePath": "src/tokens/functional/size/breakpoints.json5",
13
13
  "isSource": true,
14
14
  "original": {
15
- "$value": "1012px",
15
+ "$value": {
16
+ "value": 1012,
17
+ "unit": "px"
18
+ },
16
19
  "$type": "dimension",
17
20
  "$extensions": {
18
21
  "org.primer.figma": {
@@ -39,7 +42,10 @@
39
42
  "filePath": "src/tokens/functional/size/breakpoints.json5",
40
43
  "isSource": true,
41
44
  "original": {
42
- "$value": "768px",
45
+ "$value": {
46
+ "value": 768,
47
+ "unit": "px"
48
+ },
43
49
  "$type": "dimension",
44
50
  "$extensions": {
45
51
  "org.primer.figma": {
@@ -66,7 +72,10 @@
66
72
  "filePath": "src/tokens/functional/size/breakpoints.json5",
67
73
  "isSource": true,
68
74
  "original": {
69
- "$value": "544px",
75
+ "$value": {
76
+ "value": 544,
77
+ "unit": "px"
78
+ },
70
79
  "$type": "dimension",
71
80
  "$extensions": {
72
81
  "org.primer.figma": {
@@ -93,7 +102,10 @@
93
102
  "filePath": "src/tokens/functional/size/breakpoints.json5",
94
103
  "isSource": true,
95
104
  "original": {
96
- "$value": "1280px",
105
+ "$value": {
106
+ "value": 1280,
107
+ "unit": "px"
108
+ },
97
109
  "$type": "dimension",
98
110
  "$extensions": {
99
111
  "org.primer.figma": {
@@ -120,7 +132,10 @@
120
132
  "filePath": "src/tokens/functional/size/breakpoints.json5",
121
133
  "isSource": true,
122
134
  "original": {
123
- "$value": "320px",
135
+ "$value": {
136
+ "value": 320,
137
+ "unit": "px"
138
+ },
124
139
  "$type": "dimension",
125
140
  "$extensions": {
126
141
  "org.primer.figma": {
@@ -147,7 +162,10 @@
147
162
  "filePath": "src/tokens/functional/size/breakpoints.json5",
148
163
  "isSource": true,
149
164
  "original": {
150
- "$value": "1400px",
165
+ "$value": {
166
+ "value": 1400,
167
+ "unit": "px"
168
+ },
151
169
  "$type": "dimension",
152
170
  "$extensions": {
153
171
  "org.primer.figma": {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "borderRadius-default": {
3
3
  "key": "{borderRadius.default}",
4
- "$value": ["0.0234375rem", "0.375px"],
4
+ "$value": ["0.375rem", "6px"],
5
5
  "$description": "Default border radius for most UI elements. Alias of borderRadius.medium (6px). Use when in doubt",
6
6
  "$type": "dimension",
7
7
  "$extensions": {
@@ -55,7 +55,10 @@
55
55
  "filePath": "src/tokens/functional/size/radius.json5",
56
56
  "isSource": true,
57
57
  "original": {
58
- "$value": "9999px",
58
+ "$value": {
59
+ "value": 9999,
60
+ "unit": "px"
61
+ },
59
62
  "$type": "dimension",
60
63
  "$description": "Use this border radius for pill shaped elements",
61
64
  "$extensions": {
@@ -98,7 +101,10 @@
98
101
  "filePath": "src/tokens/functional/size/radius.json5",
99
102
  "isSource": true,
100
103
  "original": {
101
- "$value": "12px",
104
+ "$value": {
105
+ "value": 12,
106
+ "unit": "px"
107
+ },
102
108
  "$description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired. Always use this for buttons.",
103
109
  "$type": "dimension",
104
110
  "$extensions": {
@@ -141,7 +147,10 @@
141
147
  "filePath": "src/tokens/functional/size/radius.json5",
142
148
  "isSource": true,
143
149
  "original": {
144
- "$value": "6px",
150
+ "$value": {
151
+ "value": 6,
152
+ "unit": "px"
153
+ },
145
154
  "$description": "Medium border radius (6px). The default choice for most buttons, cards, and containers",
146
155
  "$type": "dimension",
147
156
  "$extensions": {
@@ -184,7 +193,10 @@
184
193
  "filePath": "src/tokens/functional/size/radius.json5",
185
194
  "isSource": true,
186
195
  "original": {
187
- "$value": "3px",
196
+ "$value": {
197
+ "value": 3,
198
+ "unit": "px"
199
+ },
188
200
  "$description": "Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height",
189
201
  "$type": "dimension",
190
202
  "$extensions": {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "control-minTarget-auto": {
3
3
  "key": "{control.minTarget.auto}",
4
- "$value": ["0.171875rem", "2.75px"],
4
+ "$value": ["2.75rem", "44px"],
5
5
  "$type": "dimension",
6
6
  "$description": "Minimum touch target size for coarse pointer devices (touch screens)",
7
7
  "$extensions": {
@@ -30,7 +30,7 @@
30
30
  },
31
31
  "controlStack-medium-gap-auto": {
32
32
  "key": "{controlStack.medium.gap.auto}",
33
- "$value": ["0.046875rem", "0.75px"],
33
+ "$value": ["0.75rem", "12px"],
34
34
  "$type": "dimension",
35
35
  "$description": "Gap between stacked controls in medium density layouts for touch devices",
36
36
  "$extensions": {
@@ -59,7 +59,7 @@
59
59
  },
60
60
  "controlStack-small-gap-auto": {
61
61
  "key": "{controlStack.small.gap.auto}",
62
- "$value": ["0.0625rem", "1px"],
62
+ "$value": ["1rem", "16px"],
63
63
  "$type": "dimension",
64
64
  "$description": "Gap between stacked controls in small density layouts for touch devices",
65
65
  "$extensions": {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "control-minTarget-auto": {
3
3
  "key": "{control.minTarget.auto}",
4
- "$value": ["0.0625rem", "1px"],
4
+ "$value": ["1rem", "16px"],
5
5
  "$type": "dimension",
6
6
  "$description": "Minimum target size for fine pointer devices (mouse)",
7
7
  "$extensions": {
@@ -30,7 +30,7 @@
30
30
  },
31
31
  "controlStack-medium-gap-auto": {
32
32
  "key": "{controlStack.medium.gap.auto}",
33
- "$value": ["0.03125rem", "0.5px"],
33
+ "$value": ["0.5rem", "8px"],
34
34
  "$type": "dimension",
35
35
  "$description": "Gap between stacked controls in medium density layouts for mouse interfaces",
36
36
  "$extensions": {
@@ -59,7 +59,7 @@
59
59
  },
60
60
  "controlStack-small-gap-auto": {
61
61
  "key": "{controlStack.small.gap.auto}",
62
- "$value": ["0.03125rem", "0.5px"],
62
+ "$value": ["0.5rem", "8px"],
63
63
  "$type": "dimension",
64
64
  "$description": "Gap between stacked controls in small density layouts for mouse interfaces",
65
65
  "$extensions": {