@primer/primitives 11.4.0-rc.f798df25 → 11.4.1-rc.4e2d1de5

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 (198) hide show
  1. package/DESIGN_TOKENS_GUIDE.md +185 -0
  2. package/DESIGN_TOKENS_SPEC.md +565 -0
  3. package/dist/build/filters/hasLlmExtensions.d.ts +7 -0
  4. package/dist/build/filters/hasLlmExtensions.js +11 -0
  5. package/dist/build/filters/index.d.ts +1 -0
  6. package/dist/build/filters/index.js +1 -0
  7. package/dist/build/formats/index.d.ts +1 -0
  8. package/dist/build/formats/index.js +1 -0
  9. package/dist/build/formats/markdownLlmGuidelines.d.ts +11 -0
  10. package/dist/build/formats/markdownLlmGuidelines.js +1168 -0
  11. package/dist/build/platforms/index.d.ts +1 -0
  12. package/dist/build/platforms/index.js +1 -0
  13. package/dist/build/platforms/llmGuidelines.d.ts +2 -0
  14. package/dist/build/platforms/llmGuidelines.js +17 -0
  15. package/dist/build/preprocessors/inheritGroupProperties.d.ts +7 -0
  16. package/dist/build/preprocessors/inheritGroupProperties.js +70 -0
  17. package/dist/build/primerStyleDictionary.js +7 -1
  18. package/dist/build/schemas/borderToken.d.ts +22 -2
  19. package/dist/build/schemas/borderToken.js +6 -0
  20. package/dist/build/schemas/colorToken.d.ts +4 -0
  21. package/dist/build/schemas/colorToken.js +2 -0
  22. package/dist/build/schemas/cubicBezierToken.d.ts +6 -0
  23. package/dist/build/schemas/cubicBezierToken.js +10 -2
  24. package/dist/build/schemas/designToken.d.ts +1 -1
  25. package/dist/build/schemas/designToken.js +113 -21
  26. package/dist/build/schemas/dimensionToken.d.ts +14 -3
  27. package/dist/build/schemas/dimensionToken.js +6 -2
  28. package/dist/build/schemas/dimensionValue.d.ts +24 -1
  29. package/dist/build/schemas/dimensionValue.js +20 -1
  30. package/dist/build/schemas/durationToken.d.ts +13 -1
  31. package/dist/build/schemas/durationToken.js +6 -0
  32. package/dist/build/schemas/durationValue.d.ts +11 -1
  33. package/dist/build/schemas/durationValue.js +13 -3
  34. package/dist/build/schemas/fontFamilyToken.d.ts +4 -0
  35. package/dist/build/schemas/fontFamilyToken.js +2 -0
  36. package/dist/build/schemas/fontWeightToken.d.ts +4 -0
  37. package/dist/build/schemas/fontWeightToken.js +2 -0
  38. package/dist/build/schemas/gradientToken.d.ts +4 -0
  39. package/dist/build/schemas/gradientToken.js +2 -0
  40. package/dist/build/schemas/llmExtension.d.ts +9 -0
  41. package/dist/build/schemas/llmExtension.js +11 -0
  42. package/dist/build/schemas/numberToken.d.ts +4 -0
  43. package/dist/build/schemas/numberToken.js +2 -0
  44. package/dist/build/schemas/shadowToken.d.ts +676 -84
  45. package/dist/build/schemas/shadowToken.js +2 -0
  46. package/dist/build/schemas/stringToken.d.ts +6 -0
  47. package/dist/build/schemas/stringToken.js +6 -0
  48. package/dist/build/schemas/transitionToken.d.ts +20 -2
  49. package/dist/build/schemas/transitionToken.js +6 -0
  50. package/dist/build/schemas/typographyToken.d.ts +38 -4
  51. package/dist/build/schemas/typographyToken.js +6 -0
  52. package/dist/build/schemas/validTokenType.d.ts +5 -1
  53. package/dist/build/schemas/validTokenType.js +71 -17
  54. package/dist/build/schemas/viewportRangeToken.d.ts +6 -0
  55. package/dist/build/schemas/viewportRangeToken.js +6 -0
  56. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  57. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  58. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  59. package/dist/build/transformers/dimensionToRem.js +21 -22
  60. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  61. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  62. package/dist/build/transformers/durationToCss.d.ts +2 -1
  63. package/dist/build/transformers/durationToCss.js +18 -11
  64. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  65. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  66. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  67. package/dist/css/base/motion/motion.css +5 -4
  68. package/dist/css/functional/size/border.css +9 -14
  69. package/dist/css/functional/size/radius.css +7 -0
  70. package/dist/css/functional/size/size-coarse.css +3 -3
  71. package/dist/css/functional/size/size-fine.css +3 -3
  72. package/dist/css/functional/size/viewport.css +1 -1
  73. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +194 -190
  74. package/dist/css/functional/themes/dark-colorblind.css +194 -190
  75. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +194 -190
  76. package/dist/css/functional/themes/dark-dimmed.css +194 -190
  77. package/dist/css/functional/themes/dark-high-contrast.css +194 -190
  78. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +194 -190
  79. package/dist/css/functional/themes/dark-tritanopia.css +194 -190
  80. package/dist/css/functional/themes/dark.css +194 -190
  81. package/dist/css/functional/themes/light-colorblind-high-contrast.css +194 -190
  82. package/dist/css/functional/themes/light-colorblind.css +194 -190
  83. package/dist/css/functional/themes/light-high-contrast.css +194 -190
  84. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +194 -190
  85. package/dist/css/functional/themes/light-tritanopia.css +194 -190
  86. package/dist/css/functional/themes/light.css +194 -190
  87. package/dist/css/functional/typography/typography.css +4 -4
  88. package/dist/css/primitives.css +5 -0
  89. package/dist/docs/base/motion/motion.json +181 -32
  90. package/dist/docs/base/size/size.json +76 -19
  91. package/dist/docs/base/typography/typography.json +24 -6
  92. package/dist/docs/functional/size/border.json +62 -182
  93. package/dist/docs/functional/size/breakpoints.json +24 -6
  94. package/dist/docs/functional/size/radius.json +221 -0
  95. package/dist/docs/functional/size/size-coarse.json +45 -3
  96. package/dist/docs/functional/size/size-fine.json +45 -3
  97. package/dist/docs/functional/size/size.json +60 -15
  98. package/dist/docs/functional/size/viewport.json +2 -2
  99. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +1043 -97
  100. package/dist/docs/functional/themes/dark-colorblind.json +1043 -97
  101. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +1043 -97
  102. package/dist/docs/functional/themes/dark-dimmed.json +1081 -135
  103. package/dist/docs/functional/themes/dark-high-contrast.json +1043 -97
  104. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +1043 -97
  105. package/dist/docs/functional/themes/dark-tritanopia.json +1043 -97
  106. package/dist/docs/functional/themes/dark.json +1043 -97
  107. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +1049 -103
  108. package/dist/docs/functional/themes/light-colorblind.json +1049 -103
  109. package/dist/docs/functional/themes/light-high-contrast.json +1049 -103
  110. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +1049 -103
  111. package/dist/docs/functional/themes/light-tritanopia.json +1049 -103
  112. package/dist/docs/functional/themes/light.json +1049 -103
  113. package/dist/docs/functional/typography/typography.json +180 -10
  114. package/dist/fallbacks/base/motion/motion.json +49 -12
  115. package/dist/fallbacks/functional/size/border.json +0 -5
  116. package/dist/fallbacks/functional/size/radius.json +7 -0
  117. package/dist/fallbacks/functional/size/viewport.json +1 -1
  118. package/dist/figma/dimension/dimension.json +30 -20
  119. package/dist/figma/themes/dark-colorblind.json +85 -0
  120. package/dist/figma/themes/dark-dimmed.json +134 -49
  121. package/dist/figma/themes/dark-high-contrast.json +85 -0
  122. package/dist/figma/themes/dark-tritanopia.json +85 -0
  123. package/dist/figma/themes/dark.json +85 -0
  124. package/dist/figma/themes/light-colorblind.json +89 -4
  125. package/dist/figma/themes/light-high-contrast.json +89 -4
  126. package/dist/figma/themes/light-tritanopia.json +89 -4
  127. package/dist/figma/themes/light.json +89 -4
  128. package/dist/figma/typography/typography.json +44 -40
  129. package/dist/internalCss/dark-colorblind-high-contrast.css +208 -218
  130. package/dist/internalCss/dark-colorblind.css +208 -218
  131. package/dist/internalCss/dark-dimmed-high-contrast.css +208 -218
  132. package/dist/internalCss/dark-dimmed.css +208 -218
  133. package/dist/internalCss/dark-high-contrast.css +208 -218
  134. package/dist/internalCss/dark-tritanopia-high-contrast.css +208 -218
  135. package/dist/internalCss/dark-tritanopia.css +208 -218
  136. package/dist/internalCss/dark.css +208 -218
  137. package/dist/internalCss/light-colorblind-high-contrast.css +208 -218
  138. package/dist/internalCss/light-colorblind.css +208 -218
  139. package/dist/internalCss/light-high-contrast.css +208 -218
  140. package/dist/internalCss/light-tritanopia-high-contrast.css +208 -218
  141. package/dist/internalCss/light-tritanopia.css +208 -218
  142. package/dist/internalCss/light.css +208 -218
  143. package/dist/styleLint/base/motion/motion.json +181 -32
  144. package/dist/styleLint/base/size/size.json +76 -19
  145. package/dist/styleLint/base/typography/typography.json +30 -12
  146. package/dist/styleLint/functional/size/border.json +55 -175
  147. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  148. package/dist/styleLint/functional/size/radius.json +221 -0
  149. package/dist/styleLint/functional/size/size-coarse.json +45 -3
  150. package/dist/styleLint/functional/size/size-fine.json +45 -3
  151. package/dist/styleLint/functional/size/size.json +111 -66
  152. package/dist/styleLint/functional/size/viewport.json +2 -2
  153. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +975 -29
  154. package/dist/styleLint/functional/themes/dark-colorblind.json +975 -29
  155. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +975 -29
  156. package/dist/styleLint/functional/themes/dark-dimmed.json +1013 -67
  157. package/dist/styleLint/functional/themes/dark-high-contrast.json +975 -29
  158. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +975 -29
  159. package/dist/styleLint/functional/themes/dark-tritanopia.json +975 -29
  160. package/dist/styleLint/functional/themes/dark.json +975 -29
  161. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +981 -35
  162. package/dist/styleLint/functional/themes/light-colorblind.json +981 -35
  163. package/dist/styleLint/functional/themes/light-high-contrast.json +981 -35
  164. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +981 -35
  165. package/dist/styleLint/functional/themes/light-tritanopia.json +981 -35
  166. package/dist/styleLint/functional/themes/light.json +981 -35
  167. package/dist/styleLint/functional/typography/typography.json +196 -26
  168. package/package.json +6 -3
  169. package/src/tokens/base/motion/easing.json5 +39 -4
  170. package/src/tokens/base/motion/timing.json5 +12 -12
  171. package/src/tokens/base/size/size.json5 +19 -19
  172. package/src/tokens/base/typography/typography.json5 +6 -6
  173. package/src/tokens/functional/border/border.json5 +25 -0
  174. package/src/tokens/functional/color/bgColor.json5 +165 -0
  175. package/src/tokens/functional/color/borderColor.json5 +146 -0
  176. package/src/tokens/functional/color/control.json5 +24 -0
  177. package/src/tokens/functional/color/data-vis.json5 +7 -0
  178. package/src/tokens/functional/color/display.json5 +7 -0
  179. package/src/tokens/functional/color/fgColor.json5 +101 -1
  180. package/src/tokens/functional/color/focus.json5 +5 -0
  181. package/src/tokens/functional/color/selection.json5 +5 -0
  182. package/src/tokens/functional/color/syntax.json5 +14 -0
  183. package/src/tokens/functional/shadow/shadow.json5 +49 -4
  184. package/src/tokens/functional/size/border.json5 +22 -74
  185. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  186. package/src/tokens/functional/size/radius.json5 +90 -0
  187. package/src/tokens/functional/size/size-coarse.json5 +24 -3
  188. package/src/tokens/functional/size/size-fine.json5 +45 -24
  189. package/src/tokens/functional/size/size.json5 +50 -15
  190. package/src/tokens/functional/size/viewport.json5 +1 -1
  191. package/src/tokens/functional/typography/font-stack.json5 +60 -0
  192. package/src/tokens/functional/typography/typography.json5 +71 -44
  193. package/dist/build/parsers/index.d.ts +0 -1
  194. package/dist/build/parsers/index.js +0 -1
  195. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  196. package/dist/build/parsers/w3cJsonParser.js +0 -25
  197. package/dist/removed/testing.json5 +0 -4
  198. package/src/tokens/removed/testing.json5 +0 -4
@@ -1,12 +1,18 @@
1
1
  {
2
2
  "base-duration-0": {
3
3
  "key": "{base.duration.0}",
4
- "$value": "0ms",
4
+ "$value": {
5
+ "value": 0,
6
+ "unit": "ms"
7
+ },
5
8
  "$type": "duration",
6
9
  "filePath": "src/tokens/base/motion/timing.json5",
7
10
  "isSource": true,
8
11
  "original": {
9
- "$value": "0ms",
12
+ "$value": {
13
+ "value": 0,
14
+ "unit": "ms"
15
+ },
10
16
  "$type": "duration",
11
17
  "key": "{base.duration.0}"
12
18
  },
@@ -16,12 +22,18 @@
16
22
  },
17
23
  "base-duration-100": {
18
24
  "key": "{base.duration.100}",
19
- "$value": "100ms",
25
+ "$value": {
26
+ "value": 100,
27
+ "unit": "ms"
28
+ },
20
29
  "$type": "duration",
21
30
  "filePath": "src/tokens/base/motion/timing.json5",
22
31
  "isSource": true,
23
32
  "original": {
24
- "$value": "100ms",
33
+ "$value": {
34
+ "value": 100,
35
+ "unit": "ms"
36
+ },
25
37
  "$type": "duration",
26
38
  "key": "{base.duration.100}"
27
39
  },
@@ -31,12 +43,18 @@
31
43
  },
32
44
  "base-duration-1000": {
33
45
  "key": "{base.duration.1000}",
34
- "$value": "1000ms",
46
+ "$value": {
47
+ "value": 1000,
48
+ "unit": "ms"
49
+ },
35
50
  "$type": "duration",
36
51
  "filePath": "src/tokens/base/motion/timing.json5",
37
52
  "isSource": true,
38
53
  "original": {
39
- "$value": "1000ms",
54
+ "$value": {
55
+ "value": 1000,
56
+ "unit": "ms"
57
+ },
40
58
  "$type": "duration",
41
59
  "key": "{base.duration.1000}"
42
60
  },
@@ -46,12 +64,18 @@
46
64
  },
47
65
  "base-duration-200": {
48
66
  "key": "{base.duration.200}",
49
- "$value": "200ms",
67
+ "$value": {
68
+ "value": 200,
69
+ "unit": "ms"
70
+ },
50
71
  "$type": "duration",
51
72
  "filePath": "src/tokens/base/motion/timing.json5",
52
73
  "isSource": true,
53
74
  "original": {
54
- "$value": "200ms",
75
+ "$value": {
76
+ "value": 200,
77
+ "unit": "ms"
78
+ },
55
79
  "$type": "duration",
56
80
  "key": "{base.duration.200}"
57
81
  },
@@ -61,12 +85,18 @@
61
85
  },
62
86
  "base-duration-300": {
63
87
  "key": "{base.duration.300}",
64
- "$value": "300ms",
88
+ "$value": {
89
+ "value": 300,
90
+ "unit": "ms"
91
+ },
65
92
  "$type": "duration",
66
93
  "filePath": "src/tokens/base/motion/timing.json5",
67
94
  "isSource": true,
68
95
  "original": {
69
- "$value": "300ms",
96
+ "$value": {
97
+ "value": 300,
98
+ "unit": "ms"
99
+ },
70
100
  "$type": "duration",
71
101
  "key": "{base.duration.300}"
72
102
  },
@@ -76,12 +106,18 @@
76
106
  },
77
107
  "base-duration-400": {
78
108
  "key": "{base.duration.400}",
79
- "$value": "400ms",
109
+ "$value": {
110
+ "value": 400,
111
+ "unit": "ms"
112
+ },
80
113
  "$type": "duration",
81
114
  "filePath": "src/tokens/base/motion/timing.json5",
82
115
  "isSource": true,
83
116
  "original": {
84
- "$value": "400ms",
117
+ "$value": {
118
+ "value": 400,
119
+ "unit": "ms"
120
+ },
85
121
  "$type": "duration",
86
122
  "key": "{base.duration.400}"
87
123
  },
@@ -91,12 +127,18 @@
91
127
  },
92
128
  "base-duration-50": {
93
129
  "key": "{base.duration.50}",
94
- "$value": "50ms",
130
+ "$value": {
131
+ "value": 50,
132
+ "unit": "ms"
133
+ },
95
134
  "$type": "duration",
96
135
  "filePath": "src/tokens/base/motion/timing.json5",
97
136
  "isSource": true,
98
137
  "original": {
99
- "$value": "50ms",
138
+ "$value": {
139
+ "value": 50,
140
+ "unit": "ms"
141
+ },
100
142
  "$type": "duration",
101
143
  "key": "{base.duration.50}"
102
144
  },
@@ -106,12 +148,18 @@
106
148
  },
107
149
  "base-duration-500": {
108
150
  "key": "{base.duration.500}",
109
- "$value": "500ms",
151
+ "$value": {
152
+ "value": 500,
153
+ "unit": "ms"
154
+ },
110
155
  "$type": "duration",
111
156
  "filePath": "src/tokens/base/motion/timing.json5",
112
157
  "isSource": true,
113
158
  "original": {
114
- "$value": "500ms",
159
+ "$value": {
160
+ "value": 500,
161
+ "unit": "ms"
162
+ },
115
163
  "$type": "duration",
116
164
  "key": "{base.duration.500}"
117
165
  },
@@ -121,12 +169,18 @@
121
169
  },
122
170
  "base-duration-600": {
123
171
  "key": "{base.duration.600}",
124
- "$value": "600ms",
172
+ "$value": {
173
+ "value": 600,
174
+ "unit": "ms"
175
+ },
125
176
  "$type": "duration",
126
177
  "filePath": "src/tokens/base/motion/timing.json5",
127
178
  "isSource": true,
128
179
  "original": {
129
- "$value": "600ms",
180
+ "$value": {
181
+ "value": 600,
182
+ "unit": "ms"
183
+ },
130
184
  "$type": "duration",
131
185
  "key": "{base.duration.600}"
132
186
  },
@@ -136,12 +190,18 @@
136
190
  },
137
191
  "base-duration-700": {
138
192
  "key": "{base.duration.700}",
139
- "$value": "700ms",
193
+ "$value": {
194
+ "value": 700,
195
+ "unit": "ms"
196
+ },
140
197
  "$type": "duration",
141
198
  "filePath": "src/tokens/base/motion/timing.json5",
142
199
  "isSource": true,
143
200
  "original": {
144
- "$value": "700ms",
201
+ "$value": {
202
+ "value": 700,
203
+ "unit": "ms"
204
+ },
145
205
  "$type": "duration",
146
206
  "key": "{base.duration.700}"
147
207
  },
@@ -151,12 +211,18 @@
151
211
  },
152
212
  "base-duration-800": {
153
213
  "key": "{base.duration.800}",
154
- "$value": "800ms",
214
+ "$value": {
215
+ "value": 800,
216
+ "unit": "ms"
217
+ },
155
218
  "$type": "duration",
156
219
  "filePath": "src/tokens/base/motion/timing.json5",
157
220
  "isSource": true,
158
221
  "original": {
159
- "$value": "800ms",
222
+ "$value": {
223
+ "value": 800,
224
+ "unit": "ms"
225
+ },
160
226
  "$type": "duration",
161
227
  "key": "{base.duration.800}"
162
228
  },
@@ -166,12 +232,18 @@
166
232
  },
167
233
  "base-duration-900": {
168
234
  "key": "{base.duration.900}",
169
- "$value": "900ms",
235
+ "$value": {
236
+ "value": 900,
237
+ "unit": "ms"
238
+ },
170
239
  "$type": "duration",
171
240
  "filePath": "src/tokens/base/motion/timing.json5",
172
241
  "isSource": true,
173
242
  "original": {
174
- "$value": "900ms",
243
+ "$value": {
244
+ "value": 900,
245
+ "unit": "ms"
246
+ },
175
247
  "$type": "duration",
176
248
  "key": "{base.duration.900}"
177
249
  },
@@ -179,17 +251,58 @@
179
251
  "attributes": {},
180
252
  "path": ["base", "duration", "900"]
181
253
  },
254
+ "base-easing-ease": {
255
+ "key": "{base.easing.ease}",
256
+ "$value": [0.25, 0.1, 0.25, 1],
257
+ "$type": "cubicBezier",
258
+ "$description": "CSS default easing. Use for hover state changes and micro-interactions.",
259
+ "$extensions": {
260
+ "org.primer.llm": {
261
+ "usage": ["hover-state", "micro-interaction", "button-hover", "link-hover"],
262
+ "rules": "Use for hover state changes."
263
+ }
264
+ },
265
+ "filePath": "src/tokens/base/motion/easing.json5",
266
+ "isSource": true,
267
+ "original": {
268
+ "$value": [0.25, 0.1, 0.25, 1],
269
+ "$type": "cubicBezier",
270
+ "$description": "CSS default easing. Use for hover state changes and micro-interactions.",
271
+ "$extensions": {
272
+ "org.primer.llm": {
273
+ "usage": ["hover-state", "micro-interaction", "button-hover", "link-hover"],
274
+ "rules": "Use for hover state changes."
275
+ }
276
+ },
277
+ "key": "{base.easing.ease}"
278
+ },
279
+ "name": "base-easing-ease",
280
+ "attributes": {},
281
+ "path": ["base", "easing", "ease"]
282
+ },
182
283
  "base-easing-easeIn": {
183
284
  "key": "{base.easing.easeIn}",
184
285
  "$value": [0.7, 0.1, 0.75, 0.9],
185
286
  "$type": "cubicBezier",
186
- "$description": "Ideal for movement that starts on the page and ends off the page.",
287
+ "$description": "Accelerating motion. Use for elements exiting the viewport (moving off-screen).",
288
+ "$extensions": {
289
+ "org.primer.llm": {
290
+ "usage": ["exit-animation", "element-leaving", "off-screen-motion"],
291
+ "rules": "Rarely used alone. Prefer ease-out for most exit animations."
292
+ }
293
+ },
187
294
  "filePath": "src/tokens/base/motion/easing.json5",
188
295
  "isSource": true,
189
296
  "original": {
190
297
  "$value": [0.7, 0.1, 0.75, 0.9],
191
298
  "$type": "cubicBezier",
192
- "$description": "Ideal for movement that starts on the page and ends off the page.",
299
+ "$description": "Accelerating motion. Use for elements exiting the viewport (moving off-screen).",
300
+ "$extensions": {
301
+ "org.primer.llm": {
302
+ "usage": ["exit-animation", "element-leaving", "off-screen-motion"],
303
+ "rules": "Rarely used alone. Prefer ease-out for most exit animations."
304
+ }
305
+ },
193
306
  "key": "{base.easing.easeIn}"
194
307
  },
195
308
  "name": "base-easing-easeIn",
@@ -200,13 +313,25 @@
200
313
  "key": "{base.easing.easeInOut}",
201
314
  "$value": [0.6, 0, 0.2, 1],
202
315
  "$type": "cubicBezier",
203
- "$description": "Ideal for movement that starts and ends on the page.",
316
+ "$description": "Smooth acceleration and deceleration. Use for elements moving or morphing within the viewport.",
317
+ "$extensions": {
318
+ "org.primer.llm": {
319
+ "usage": ["position-change", "size-change", "morph-animation", "expand-collapse", "slide-transition"],
320
+ "rules": "Use if an element moves or morphs on screen."
321
+ }
322
+ },
204
323
  "filePath": "src/tokens/base/motion/easing.json5",
205
324
  "isSource": true,
206
325
  "original": {
207
326
  "$value": [0.6, 0, 0.2, 1],
208
327
  "$type": "cubicBezier",
209
- "$description": "Ideal for movement that starts and ends on the page.",
328
+ "$description": "Smooth acceleration and deceleration. Use for elements moving or morphing within the viewport.",
329
+ "$extensions": {
330
+ "org.primer.llm": {
331
+ "usage": ["position-change", "size-change", "morph-animation", "expand-collapse", "slide-transition"],
332
+ "rules": "Use if an element moves or morphs on screen."
333
+ }
334
+ },
210
335
  "key": "{base.easing.easeInOut}"
211
336
  },
212
337
  "name": "base-easing-easeInOut",
@@ -217,13 +342,25 @@
217
342
  "key": "{base.easing.easeOut}",
218
343
  "$value": [0.3, 0.8, 0.6, 1],
219
344
  "$type": "cubicBezier",
220
- "$description": "Ideal for movement that starts off the page and ends on the page.",
345
+ "$description": "Decelerating motion. Use for elements entering the viewport or appearing on screen.",
346
+ "$extensions": {
347
+ "org.primer.llm": {
348
+ "usage": ["enter-animation", "element-appearing", "modal-open", "dropdown-open", "tooltip-appear"],
349
+ "rules": "RECOMMENDED default. Use if an element enters or exits the viewport."
350
+ }
351
+ },
221
352
  "filePath": "src/tokens/base/motion/easing.json5",
222
353
  "isSource": true,
223
354
  "original": {
224
355
  "$value": [0.3, 0.8, 0.6, 1],
225
356
  "$type": "cubicBezier",
226
- "$description": "Ideal for movement that starts off the page and ends on the page.",
357
+ "$description": "Decelerating motion. Use for elements entering the viewport or appearing on screen.",
358
+ "$extensions": {
359
+ "org.primer.llm": {
360
+ "usage": ["enter-animation", "element-appearing", "modal-open", "dropdown-open", "tooltip-appear"],
361
+ "rules": "RECOMMENDED default. Use if an element enters or exits the viewport."
362
+ }
363
+ },
227
364
  "key": "{base.easing.easeOut}"
228
365
  },
229
366
  "name": "base-easing-easeOut",
@@ -234,13 +371,25 @@
234
371
  "key": "{base.easing.linear}",
235
372
  "$value": [0, 0, 1, 1],
236
373
  "$type": "cubicBezier",
237
- "$description": "Ideal for non-movement properties, like opacity or background color.",
374
+ "$description": "Constant motion with no acceleration. Use for continuous animations like progress bars or loaders.",
375
+ "$extensions": {
376
+ "org.primer.llm": {
377
+ "usage": ["progress-bar", "loader", "continuous-animation", "scrolling"],
378
+ "rules": "Use if the motion is constant."
379
+ }
380
+ },
238
381
  "filePath": "src/tokens/base/motion/easing.json5",
239
382
  "isSource": true,
240
383
  "original": {
241
384
  "$value": [0, 0, 1, 1],
242
385
  "$type": "cubicBezier",
243
- "$description": "Ideal for non-movement properties, like opacity or background color.",
386
+ "$description": "Constant motion with no acceleration. Use for continuous animations like progress bars or loaders.",
387
+ "$extensions": {
388
+ "org.primer.llm": {
389
+ "usage": ["progress-bar", "loader", "continuous-animation", "scrolling"],
390
+ "rules": "Use if the motion is constant."
391
+ }
392
+ },
244
393
  "key": "{base.easing.linear}"
245
394
  },
246
395
  "name": "base-easing-linear",
@@ -12,7 +12,10 @@
12
12
  "filePath": "src/tokens/base/size/size.json5",
13
13
  "isSource": true,
14
14
  "original": {
15
- "$value": "112px",
15
+ "$value": {
16
+ "value": 112,
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/base/size/size.json5",
40
43
  "isSource": true,
41
44
  "original": {
42
- "$value": "12px",
45
+ "$value": {
46
+ "value": 12,
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/base/size/size.json5",
67
73
  "isSource": true,
68
74
  "original": {
69
- "$value": "128px",
75
+ "$value": {
76
+ "value": 128,
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/base/size/size.json5",
94
103
  "isSource": true,
95
104
  "original": {
96
- "$value": "16px",
105
+ "$value": {
106
+ "value": 16,
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/base/size/size.json5",
121
133
  "isSource": true,
122
134
  "original": {
123
- "$value": "2px",
135
+ "$value": {
136
+ "value": 2,
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/base/size/size.json5",
148
163
  "isSource": true,
149
164
  "original": {
150
- "$value": "20px",
165
+ "$value": {
166
+ "value": 20,
167
+ "unit": "px"
168
+ },
151
169
  "$type": "dimension",
152
170
  "$extensions": {
153
171
  "org.primer.figma": {
@@ -174,7 +192,10 @@
174
192
  "filePath": "src/tokens/base/size/size.json5",
175
193
  "isSource": true,
176
194
  "original": {
177
- "$value": "24px",
195
+ "$value": {
196
+ "value": 24,
197
+ "unit": "px"
198
+ },
178
199
  "$type": "dimension",
179
200
  "$extensions": {
180
201
  "org.primer.figma": {
@@ -201,7 +222,10 @@
201
222
  "filePath": "src/tokens/base/size/size.json5",
202
223
  "isSource": true,
203
224
  "original": {
204
- "$value": "28px",
225
+ "$value": {
226
+ "value": 28,
227
+ "unit": "px"
228
+ },
205
229
  "$type": "dimension",
206
230
  "$extensions": {
207
231
  "org.primer.figma": {
@@ -228,7 +252,10 @@
228
252
  "filePath": "src/tokens/base/size/size.json5",
229
253
  "isSource": true,
230
254
  "original": {
231
- "$value": "32px",
255
+ "$value": {
256
+ "value": 32,
257
+ "unit": "px"
258
+ },
232
259
  "$type": "dimension",
233
260
  "$extensions": {
234
261
  "org.primer.figma": {
@@ -255,7 +282,10 @@
255
282
  "filePath": "src/tokens/base/size/size.json5",
256
283
  "isSource": true,
257
284
  "original": {
258
- "$value": "36px",
285
+ "$value": {
286
+ "value": 36,
287
+ "unit": "px"
288
+ },
259
289
  "$type": "dimension",
260
290
  "$extensions": {
261
291
  "org.primer.figma": {
@@ -282,7 +312,10 @@
282
312
  "filePath": "src/tokens/base/size/size.json5",
283
313
  "isSource": true,
284
314
  "original": {
285
- "$value": "4px",
315
+ "$value": {
316
+ "value": 4,
317
+ "unit": "px"
318
+ },
286
319
  "$type": "dimension",
287
320
  "$extensions": {
288
321
  "org.primer.figma": {
@@ -309,7 +342,10 @@
309
342
  "filePath": "src/tokens/base/size/size.json5",
310
343
  "isSource": true,
311
344
  "original": {
312
- "$value": "40px",
345
+ "$value": {
346
+ "value": 40,
347
+ "unit": "px"
348
+ },
313
349
  "$type": "dimension",
314
350
  "$extensions": {
315
351
  "org.primer.figma": {
@@ -336,7 +372,10 @@
336
372
  "filePath": "src/tokens/base/size/size.json5",
337
373
  "isSource": true,
338
374
  "original": {
339
- "$value": "44px",
375
+ "$value": {
376
+ "value": 44,
377
+ "unit": "px"
378
+ },
340
379
  "$type": "dimension",
341
380
  "$extensions": {
342
381
  "org.primer.figma": {
@@ -363,7 +402,10 @@
363
402
  "filePath": "src/tokens/base/size/size.json5",
364
403
  "isSource": true,
365
404
  "original": {
366
- "$value": "48px",
405
+ "$value": {
406
+ "value": 48,
407
+ "unit": "px"
408
+ },
367
409
  "$type": "dimension",
368
410
  "$extensions": {
369
411
  "org.primer.figma": {
@@ -390,7 +432,10 @@
390
432
  "filePath": "src/tokens/base/size/size.json5",
391
433
  "isSource": true,
392
434
  "original": {
393
- "$value": "6px",
435
+ "$value": {
436
+ "value": 6,
437
+ "unit": "px"
438
+ },
394
439
  "$type": "dimension",
395
440
  "$extensions": {
396
441
  "org.primer.figma": {
@@ -417,7 +462,10 @@
417
462
  "filePath": "src/tokens/base/size/size.json5",
418
463
  "isSource": true,
419
464
  "original": {
420
- "$value": "64px",
465
+ "$value": {
466
+ "value": 64,
467
+ "unit": "px"
468
+ },
421
469
  "$type": "dimension",
422
470
  "$extensions": {
423
471
  "org.primer.figma": {
@@ -444,7 +492,10 @@
444
492
  "filePath": "src/tokens/base/size/size.json5",
445
493
  "isSource": true,
446
494
  "original": {
447
- "$value": "8px",
495
+ "$value": {
496
+ "value": 8,
497
+ "unit": "px"
498
+ },
448
499
  "$type": "dimension",
449
500
  "$extensions": {
450
501
  "org.primer.figma": {
@@ -471,7 +522,10 @@
471
522
  "filePath": "src/tokens/base/size/size.json5",
472
523
  "isSource": true,
473
524
  "original": {
474
- "$value": "80px",
525
+ "$value": {
526
+ "value": 80,
527
+ "unit": "px"
528
+ },
475
529
  "$type": "dimension",
476
530
  "$extensions": {
477
531
  "org.primer.figma": {
@@ -498,7 +552,10 @@
498
552
  "filePath": "src/tokens/base/size/size.json5",
499
553
  "isSource": true,
500
554
  "original": {
501
- "$value": "96px",
555
+ "$value": {
556
+ "value": 96,
557
+ "unit": "px"
558
+ },
502
559
  "$type": "dimension",
503
560
  "$extensions": {
504
561
  "org.primer.figma": {