@primer/primitives 10.0.0-rc.4b3d8b21 → 10.0.0-rc.59775793

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 (47) hide show
  1. package/README.md +2 -2
  2. package/dist/build/PrimerStyleDictionary.js +26 -26
  3. package/dist/build/formats/typescriptExportDefinition.js +2 -2
  4. package/dist/build/parsers/w3cJsonParser.js +2 -2
  5. package/dist/build/schemas/designToken.js +0 -1
  6. package/dist/build/transformers/durationToCss.js +2 -2
  7. package/dist/css/base/motion/motion.css +17 -0
  8. package/dist/css/functional/motion/motion.css +4 -3
  9. package/dist/css/functional/typography/typography.css +43 -43
  10. package/dist/css/primitives.css +64 -46
  11. package/dist/docs/base/motion/motion.json +205 -0
  12. package/dist/docs/functional/motion/motion.json +18 -3
  13. package/dist/fallbacks/base/motion/motion.json +17 -0
  14. package/dist/fallbacks/functional/motion/motion.json +1 -0
  15. package/dist/figma/dimension/dimension.json +518 -518
  16. package/dist/figma/figma.json +26 -26
  17. package/dist/figma/scales/dark-dimmed.json +1787 -1787
  18. package/dist/figma/scales/dark-high-constrast.json +1787 -1787
  19. package/dist/figma/scales/dark.json +1460 -1460
  20. package/dist/figma/scales/light-high-constrast.json +1775 -1775
  21. package/dist/figma/scales/light.json +1447 -1447
  22. package/dist/figma/shadows/dark-colorblind.json +285 -285
  23. package/dist/figma/shadows/dark-dimmed.json +285 -285
  24. package/dist/figma/shadows/dark-high-contrast.json +285 -285
  25. package/dist/figma/shadows/dark-tritanopia.json +285 -285
  26. package/dist/figma/shadows/dark.json +285 -285
  27. package/dist/figma/shadows/light-colorblind.json +254 -254
  28. package/dist/figma/shadows/light-high-contrast.json +254 -254
  29. package/dist/figma/shadows/light-tritanopia.json +254 -254
  30. package/dist/figma/shadows/light.json +254 -254
  31. package/dist/figma/themes/dark-colorblind.json +5161 -5161
  32. package/dist/figma/themes/dark-dimmed.json +5551 -5551
  33. package/dist/figma/themes/dark-high-contrast.json +4324 -4324
  34. package/dist/figma/themes/dark-tritanopia.json +5264 -5264
  35. package/dist/figma/themes/dark.json +5679 -5679
  36. package/dist/figma/themes/light-colorblind.json +5094 -5094
  37. package/dist/figma/themes/light-high-contrast.json +4418 -4418
  38. package/dist/figma/themes/light-tritanopia.json +5151 -5151
  39. package/dist/figma/themes/light.json +5547 -5547
  40. package/dist/figma/typography/typography.json +162 -162
  41. package/dist/styleLint/base/motion/motion.json +205 -0
  42. package/dist/styleLint/functional/motion/motion.json +18 -3
  43. package/package.json +20 -22
  44. package/src/tokens/base/motion/easing.json5 +26 -0
  45. package/src/tokens/base/motion/timing.json5 +50 -0
  46. package/src/tokens/functional/motion/loading.json5 +1 -1
  47. package/src/tokens/functional/motion/patterns.json5 +9 -2
package/dist/figma/typography/typography.json CHANGED
@@ -1,160 +1,170 @@
1
1
  [
2
2
  {
3
- "name": "text/codeInline/weight",
4
- "value": 400,
3
+ "name": "base/text/weight/light",
4
+ "value": 300,
5
5
  "type": "FLOAT",
6
- "refId": "typography/text/codeInline/weight",
7
- "reference": "base/typography/base/text/weight/normal",
8
- "collection": "typography",
6
+ "refId": "base/typography/base/text/weight/light",
7
+ "collection": "base/typography",
9
8
  "mode": "default",
10
- "group": "typography",
9
+ "group": "base/typography",
11
10
  "scopes": ["FONT_WEIGHT"]
12
11
  },
13
12
  {
14
- "name": "text/codeBlock/weight",
13
+ "name": "base/text/weight/normal",
15
14
  "value": 400,
16
15
  "type": "FLOAT",
17
- "refId": "typography/text/codeBlock/weight",
18
- "reference": "base/typography/base/text/weight/normal",
19
- "collection": "typography",
16
+ "refId": "base/typography/base/text/weight/normal",
17
+ "collection": "base/typography",
20
18
  "mode": "default",
21
- "group": "typography",
19
+ "group": "base/typography",
22
20
  "scopes": ["FONT_WEIGHT"]
23
21
  },
24
22
  {
25
- "name": "lineHeight",
26
- "value": 1.5385,
23
+ "name": "base/text/weight/medium",
24
+ "value": 500,
27
25
  "type": "FLOAT",
28
- "refId": "lineHeight"
26
+ "refId": "base/typography/base/text/weight/medium",
27
+ "collection": "base/typography",
28
+ "mode": "default",
29
+ "group": "base/typography",
30
+ "scopes": ["FONT_WEIGHT"]
29
31
  },
30
32
  {
31
- "name": "text/codeBlock/size",
32
- "value": 13,
33
+ "name": "base/text/weight/semibold",
34
+ "value": 600,
33
35
  "type": "FLOAT",
34
- "refId": "typography/text/codeBlock/size",
35
- "collection": "typography",
36
+ "refId": "base/typography/base/text/weight/semibold",
37
+ "collection": "base/typography",
36
38
  "mode": "default",
37
- "group": "typography",
38
- "scopes": ["FONT_SIZE"]
39
+ "group": "base/typography",
40
+ "scopes": ["FONT_WEIGHT"]
39
41
  },
40
42
  {
41
- "name": "text/caption/weight",
42
- "value": 400,
43
- "type": "FLOAT",
44
- "refId": "typography/text/caption/weight",
45
- "reference": "base/typography/base/text/weight/normal",
43
+ "name": "fontStack/system",
44
+ "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
45
+ "type": "STRING",
46
+ "refId": "typography/fontStack/system",
46
47
  "collection": "typography",
47
48
  "mode": "default",
48
49
  "group": "typography",
49
- "scopes": ["FONT_WEIGHT"]
50
+ "scopes": ["FONT_FAMILY"]
50
51
  },
51
52
  {
52
- "name": "lineHeight",
53
- "value": 1.3333,
54
- "type": "FLOAT",
55
- "refId": "lineHeight"
53
+ "name": "fontStack/sansSerif",
54
+ "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
55
+ "type": "STRING",
56
+ "refId": "typography/fontStack/sansSerif",
57
+ "collection": "typography",
58
+ "mode": "default",
59
+ "group": "typography",
60
+ "scopes": ["FONT_FAMILY"]
56
61
  },
57
62
  {
58
- "name": "text/caption/size",
59
- "value": 12,
60
- "type": "FLOAT",
61
- "refId": "typography/text/caption/size",
63
+ "name": "fontStack/sansSerifDisplay",
64
+ "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
65
+ "type": "STRING",
66
+ "refId": "typography/fontStack/sansSerifDisplay",
62
67
  "collection": "typography",
63
68
  "mode": "default",
64
69
  "group": "typography",
65
- "scopes": ["FONT_SIZE"]
70
+ "scopes": ["FONT_FAMILY"]
66
71
  },
67
72
  {
68
- "name": "text/body/weight",
69
- "value": 400,
70
- "type": "FLOAT",
71
- "refId": "typography/text/body/weight",
72
- "reference": "base/typography/base/text/weight/normal",
73
+ "name": "fontStack/monospace",
74
+ "value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
75
+ "type": "STRING",
76
+ "refId": "typography/fontStack/monospace",
73
77
  "collection": "typography",
74
78
  "mode": "default",
75
79
  "group": "typography",
76
- "scopes": ["FONT_WEIGHT"]
80
+ "scopes": ["FONT_FAMILY"]
77
81
  },
78
82
  {
79
- "name": "small",
80
- "value": 1.6666,
83
+ "name": "lineBoxHeight",
84
+ "value": 1.4,
81
85
  "type": "FLOAT",
82
- "refId": "small"
86
+ "refId": "lineBoxHeight"
83
87
  },
84
88
  {
85
- "name": "medium",
86
- "value": 1.4285,
89
+ "name": "text/display/size",
90
+ "value": 40,
87
91
  "type": "FLOAT",
88
- "refId": "medium"
92
+ "refId": "typography/text/display/size",
93
+ "collection": "typography",
94
+ "mode": "default",
95
+ "group": "typography",
96
+ "scopes": ["FONT_SIZE"]
89
97
  },
90
98
  {
91
- "name": "large",
92
- "value": 1.5,
99
+ "name": "lineHeight",
100
+ "value": 1.4,
93
101
  "type": "FLOAT",
94
- "refId": "large"
102
+ "refId": "lineHeight"
95
103
  },
96
104
  {
97
- "name": "text/body/size/small",
98
- "value": 12,
105
+ "name": "text/display/weight",
106
+ "value": 500,
99
107
  "type": "FLOAT",
100
- "refId": "typography/text/body/size/small",
108
+ "refId": "typography/text/display/weight",
109
+ "reference": "base/typography/base/text/weight/medium",
101
110
  "collection": "typography",
102
111
  "mode": "default",
103
112
  "group": "typography",
104
- "scopes": ["FONT_SIZE"]
113
+ "scopes": ["FONT_WEIGHT"]
105
114
  },
106
115
  {
107
- "name": "text/body/size/medium",
108
- "value": 14,
116
+ "name": "text/title/size/large",
117
+ "value": 32,
109
118
  "type": "FLOAT",
110
- "refId": "typography/text/body/size/medium",
119
+ "refId": "typography/text/title/size/large",
111
120
  "collection": "typography",
112
121
  "mode": "default",
113
122
  "group": "typography",
114
123
  "scopes": ["FONT_SIZE"]
115
124
  },
116
125
  {
117
- "name": "text/body/size/large",
118
- "value": 16,
126
+ "name": "text/title/size/medium",
127
+ "value": 20,
119
128
  "type": "FLOAT",
120
- "refId": "typography/text/body/size/large",
129
+ "refId": "typography/text/title/size/medium",
121
130
  "collection": "typography",
122
131
  "mode": "default",
123
132
  "group": "typography",
124
133
  "scopes": ["FONT_SIZE"]
125
134
  },
126
135
  {
127
- "name": "text/subtitle/weight",
128
- "value": 400,
136
+ "name": "text/title/size/small",
137
+ "value": 16,
129
138
  "type": "FLOAT",
130
- "refId": "typography/text/subtitle/weight",
131
- "reference": "base/typography/base/text/weight/normal",
139
+ "refId": "typography/text/title/size/small",
132
140
  "collection": "typography",
133
141
  "mode": "default",
134
142
  "group": "typography",
135
- "scopes": ["FONT_WEIGHT"]
143
+ "scopes": ["FONT_SIZE"]
136
144
  },
137
145
  {
138
- "name": "lineHeight",
146
+ "name": "large",
147
+ "value": 1.5,
148
+ "type": "FLOAT",
149
+ "refId": "large"
150
+ },
151
+ {
152
+ "name": "medium",
139
153
  "value": 1.6,
140
154
  "type": "FLOAT",
141
- "refId": "lineHeight"
155
+ "refId": "medium"
142
156
  },
143
157
  {
144
- "name": "text/subtitle/size",
145
- "value": 20,
158
+ "name": "small",
159
+ "value": 1.5,
146
160
  "type": "FLOAT",
147
- "refId": "typography/text/subtitle/size",
148
- "collection": "typography",
149
- "mode": "default",
150
- "group": "typography",
151
- "scopes": ["FONT_SIZE"]
161
+ "refId": "small"
152
162
  },
153
163
  {
154
- "name": "text/title/weight/small",
164
+ "name": "text/title/weight/large",
155
165
  "value": 600,
156
166
  "type": "FLOAT",
157
- "refId": "typography/text/title/weight/small",
167
+ "refId": "typography/text/title/weight/large",
158
168
  "reference": "base/typography/base/text/weight/semibold",
159
169
  "collection": "typography",
160
170
  "mode": "default",
@@ -173,10 +183,10 @@
173
183
  "scopes": ["FONT_WEIGHT"]
174
184
  },
175
185
  {
176
- "name": "text/title/weight/large",
186
+ "name": "text/title/weight/small",
177
187
  "value": 600,
178
188
  "type": "FLOAT",
179
- "refId": "typography/text/title/weight/large",
189
+ "refId": "typography/text/title/weight/small",
180
190
  "reference": "base/typography/base/text/weight/semibold",
181
191
  "collection": "typography",
182
192
  "mode": "default",
@@ -184,164 +194,154 @@
184
194
  "scopes": ["FONT_WEIGHT"]
185
195
  },
186
196
  {
187
- "name": "small",
188
- "value": 1.5,
197
+ "name": "text/subtitle/size",
198
+ "value": 20,
189
199
  "type": "FLOAT",
190
- "refId": "small"
200
+ "refId": "typography/text/subtitle/size",
201
+ "collection": "typography",
202
+ "mode": "default",
203
+ "group": "typography",
204
+ "scopes": ["FONT_SIZE"]
191
205
  },
192
206
  {
193
- "name": "medium",
207
+ "name": "lineHeight",
194
208
  "value": 1.6,
195
209
  "type": "FLOAT",
196
- "refId": "medium"
197
- },
198
- {
199
- "name": "large",
200
- "value": 1.5,
201
- "type": "FLOAT",
202
- "refId": "large"
210
+ "refId": "lineHeight"
203
211
  },
204
212
  {
205
- "name": "text/title/size/small",
206
- "value": 16,
213
+ "name": "text/subtitle/weight",
214
+ "value": 400,
207
215
  "type": "FLOAT",
208
- "refId": "typography/text/title/size/small",
216
+ "refId": "typography/text/subtitle/weight",
217
+ "reference": "base/typography/base/text/weight/normal",
209
218
  "collection": "typography",
210
219
  "mode": "default",
211
220
  "group": "typography",
212
- "scopes": ["FONT_SIZE"]
221
+ "scopes": ["FONT_WEIGHT"]
213
222
  },
214
223
  {
215
- "name": "text/title/size/medium",
216
- "value": 20,
224
+ "name": "text/body/size/large",
225
+ "value": 16,
217
226
  "type": "FLOAT",
218
- "refId": "typography/text/title/size/medium",
227
+ "refId": "typography/text/body/size/large",
219
228
  "collection": "typography",
220
229
  "mode": "default",
221
230
  "group": "typography",
222
231
  "scopes": ["FONT_SIZE"]
223
232
  },
224
233
  {
225
- "name": "text/title/size/large",
226
- "value": 32,
234
+ "name": "text/body/size/medium",
235
+ "value": 14,
227
236
  "type": "FLOAT",
228
- "refId": "typography/text/title/size/large",
237
+ "refId": "typography/text/body/size/medium",
229
238
  "collection": "typography",
230
239
  "mode": "default",
231
240
  "group": "typography",
232
241
  "scopes": ["FONT_SIZE"]
233
242
  },
234
243
  {
235
- "name": "text/display/weight",
236
- "value": 500,
244
+ "name": "text/body/size/small",
245
+ "value": 12,
237
246
  "type": "FLOAT",
238
- "refId": "typography/text/display/weight",
239
- "reference": "base/typography/base/text/weight/medium",
247
+ "refId": "typography/text/body/size/small",
240
248
  "collection": "typography",
241
249
  "mode": "default",
242
250
  "group": "typography",
243
- "scopes": ["FONT_WEIGHT"]
251
+ "scopes": ["FONT_SIZE"]
244
252
  },
245
253
  {
246
- "name": "lineHeight",
247
- "value": 1.4,
254
+ "name": "large",
255
+ "value": 1.5,
248
256
  "type": "FLOAT",
249
- "refId": "lineHeight"
257
+ "refId": "large"
250
258
  },
251
259
  {
252
- "name": "text/display/size",
253
- "value": 40,
260
+ "name": "medium",
261
+ "value": 1.4285,
254
262
  "type": "FLOAT",
255
- "refId": "typography/text/display/size",
256
- "collection": "typography",
257
- "mode": "default",
258
- "group": "typography",
259
- "scopes": ["FONT_SIZE"]
263
+ "refId": "medium"
260
264
  },
261
265
  {
262
- "name": "lineBoxHeight",
263
- "value": 1.4,
266
+ "name": "small",
267
+ "value": 1.6666,
264
268
  "type": "FLOAT",
265
- "refId": "lineBoxHeight"
269
+ "refId": "small"
266
270
  },
267
271
  {
268
- "name": "fontStack/monospace",
269
- "value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
270
- "type": "STRING",
271
- "refId": "typography/fontStack/monospace",
272
+ "name": "text/body/weight",
273
+ "value": 400,
274
+ "type": "FLOAT",
275
+ "refId": "typography/text/body/weight",
276
+ "reference": "base/typography/base/text/weight/normal",
272
277
  "collection": "typography",
273
278
  "mode": "default",
274
279
  "group": "typography",
275
- "scopes": ["FONT_FAMILY"]
280
+ "scopes": ["FONT_WEIGHT"]
276
281
  },
277
282
  {
278
- "name": "fontStack/sansSerifDisplay",
279
- "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
280
- "type": "STRING",
281
- "refId": "typography/fontStack/sansSerifDisplay",
283
+ "name": "text/caption/size",
284
+ "value": 12,
285
+ "type": "FLOAT",
286
+ "refId": "typography/text/caption/size",
282
287
  "collection": "typography",
283
288
  "mode": "default",
284
289
  "group": "typography",
285
- "scopes": ["FONT_FAMILY"]
290
+ "scopes": ["FONT_SIZE"]
286
291
  },
287
292
  {
288
- "name": "fontStack/sansSerif",
289
- "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
290
- "type": "STRING",
291
- "refId": "typography/fontStack/sansSerif",
292
- "collection": "typography",
293
- "mode": "default",
294
- "group": "typography",
295
- "scopes": ["FONT_FAMILY"]
293
+ "name": "lineHeight",
294
+ "value": 1.3333,
295
+ "type": "FLOAT",
296
+ "refId": "lineHeight"
296
297
  },
297
298
  {
298
- "name": "fontStack/system",
299
- "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
300
- "type": "STRING",
301
- "refId": "typography/fontStack/system",
299
+ "name": "text/caption/weight",
300
+ "value": 400,
301
+ "type": "FLOAT",
302
+ "refId": "typography/text/caption/weight",
303
+ "reference": "base/typography/base/text/weight/normal",
302
304
  "collection": "typography",
303
305
  "mode": "default",
304
306
  "group": "typography",
305
- "scopes": ["FONT_FAMILY"]
307
+ "scopes": ["FONT_WEIGHT"]
306
308
  },
307
309
  {
308
- "name": "base/text/weight/semibold",
309
- "value": 600,
310
+ "name": "text/codeBlock/size",
311
+ "value": 13,
310
312
  "type": "FLOAT",
311
- "refId": "base/typography/base/text/weight/semibold",
312
- "collection": "base/typography",
313
+ "refId": "typography/text/codeBlock/size",
314
+ "collection": "typography",
313
315
  "mode": "default",
314
- "group": "base/typography",
315
- "scopes": ["FONT_WEIGHT"]
316
+ "group": "typography",
317
+ "scopes": ["FONT_SIZE"]
316
318
  },
317
319
  {
318
- "name": "base/text/weight/medium",
319
- "value": 500,
320
+ "name": "lineHeight",
321
+ "value": 1.5385,
320
322
  "type": "FLOAT",
321
- "refId": "base/typography/base/text/weight/medium",
322
- "collection": "base/typography",
323
- "mode": "default",
324
- "group": "base/typography",
325
- "scopes": ["FONT_WEIGHT"]
323
+ "refId": "lineHeight"
326
324
  },
327
325
  {
328
- "name": "base/text/weight/normal",
326
+ "name": "text/codeBlock/weight",
329
327
  "value": 400,
330
328
  "type": "FLOAT",
331
- "refId": "base/typography/base/text/weight/normal",
332
- "collection": "base/typography",
329
+ "refId": "typography/text/codeBlock/weight",
330
+ "reference": "base/typography/base/text/weight/normal",
331
+ "collection": "typography",
333
332
  "mode": "default",
334
- "group": "base/typography",
333
+ "group": "typography",
335
334
  "scopes": ["FONT_WEIGHT"]
336
335
  },
337
336
  {
338
- "name": "base/text/weight/light",
339
- "value": 300,
337
+ "name": "text/codeInline/weight",
338
+ "value": 400,
340
339
  "type": "FLOAT",
341
- "refId": "base/typography/base/text/weight/light",
342
- "collection": "base/typography",
340
+ "refId": "typography/text/codeInline/weight",
341
+ "reference": "base/typography/base/text/weight/normal",
342
+ "collection": "typography",
343
343
  "mode": "default",
344
- "group": "base/typography",
344
+ "group": "typography",
345
345
  "scopes": ["FONT_WEIGHT"]
346
346
  }
347
347
  ]