@primer/primitives 9.1.0-rc.e0e1c4b6 → 9.1.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 (53) hide show
  1. package/dist/build/PrimerStyleDictionary.js +1 -0
  2. package/dist/build/formats/cssAdvanced.js +9 -10
  3. package/dist/build/transformers/index.d.ts +1 -0
  4. package/dist/build/transformers/index.js +3 -1
  5. package/dist/css/functional/motion/motion.css +3 -3
  6. package/dist/css/functional/size/border.css +2 -2
  7. package/dist/css/functional/typography/typography.css +11 -11
  8. package/dist/css/primitives.css +16 -16
  9. package/package.json +5 -3
  10. package/src/tokens/base/color/dark/dark.dimmed.json5 +1164 -0
  11. package/src/tokens/base/color/dark/dark.high-contrast.json5 +764 -0
  12. package/src/tokens/base/color/dark/dark.json5 +911 -0
  13. package/src/tokens/base/color/dark/display-dark.json5 +1774 -0
  14. package/src/tokens/base/color/light/display-light.json5 +1774 -0
  15. package/src/tokens/base/color/light/light.high-contrast.json5 +755 -0
  16. package/src/tokens/base/color/light/light.json5 +911 -0
  17. package/src/tokens/base/size/size.json +196 -0
  18. package/src/tokens/base/typography/typography.json +48 -0
  19. package/src/tokens/fallback/color-fallbacks.json +270 -0
  20. package/src/tokens/functional/border/dark.json5 +12 -0
  21. package/src/tokens/functional/border/light.json5 +12 -0
  22. package/src/tokens/functional/color/dark/app-dark.json5 +554 -0
  23. package/src/tokens/functional/color/dark/data-vis-dark.json5 +284 -0
  24. package/src/tokens/functional/color/dark/display-dark.json5 +1258 -0
  25. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +194 -0
  26. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +935 -0
  27. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +310 -0
  28. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +224 -0
  29. package/src/tokens/functional/color/dark/patterns-dark.json5 +3097 -0
  30. package/src/tokens/functional/color/dark/primitives-dark.json5 +1200 -0
  31. package/src/tokens/functional/color/dark/syntax-dark.json5 +559 -0
  32. package/src/tokens/functional/color/light/app-light.json5 +551 -0
  33. package/src/tokens/functional/color/light/data-vis-light.json5 +284 -0
  34. package/src/tokens/functional/color/light/display-light.json5 +1258 -0
  35. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +819 -0
  36. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +327 -0
  37. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +237 -0
  38. package/src/tokens/functional/color/light/patterns-light.json5 +3091 -0
  39. package/src/tokens/functional/color/light/primitives-light.json5 +1193 -0
  40. package/src/tokens/functional/color/light/syntax-light.json5 +559 -0
  41. package/src/tokens/functional/motion/loading.json5 +17 -0
  42. package/src/tokens/functional/motion/patterns.json5 +28 -0
  43. package/src/tokens/functional/shadow/dark.json5 +383 -0
  44. package/src/tokens/functional/shadow/light.json5 +376 -0
  45. package/src/tokens/functional/size/border.json +111 -0
  46. package/src/tokens/functional/size/breakpoints.json +64 -0
  47. package/src/tokens/functional/size/size-coarse.json +28 -0
  48. package/src/tokens/functional/size/size-fine.json +28 -0
  49. package/src/tokens/functional/size/size.json +740 -0
  50. package/src/tokens/functional/size/viewport.json +28 -0
  51. package/src/tokens/functional/typography/typography.json +527 -0
  52. package/src/tokens/removed/color.json +421 -0
  53. package/src/tokens/removed/testing.json5 +4 -0
package/src/tokens/functional/shadow/light.json5 ADDED
@@ -0,0 +1,376 @@
1
+ {
2
+ avatar: {
3
+ shadow: {
4
+ $value: [
5
+ {
6
+ color: '{base.color.neutral.0}',
7
+ alpha: 0.8,
8
+ offsetX: '0px',
9
+ offsetY: '0px',
10
+ blur: '0px',
11
+ spread: '2px',
12
+ },
13
+ ],
14
+ $type: 'shadow',
15
+ $extensions: {
16
+ 'org.primer.figma': {
17
+ collection: 'mode',
18
+ mode: 'light',
19
+ group: 'component shadow',
20
+ },
21
+ },
22
+ },
23
+ },
24
+ button: {
25
+ default: {
26
+ shadow: {
27
+ resting: {
28
+ $value: [
29
+ {
30
+ color: '{base.color.neutral.13}',
31
+ alpha: 0.04,
32
+ offsetX: '0px',
33
+ offsetY: '1px',
34
+ blur: '0px',
35
+ spread: '0px',
36
+ inset: false,
37
+ },
38
+ ],
39
+ $type: 'shadow',
40
+ $extensions: {
41
+ 'org.primer.figma': {
42
+ collection: 'mode',
43
+ mode: 'light',
44
+ group: 'component shadow',
45
+ },
46
+ },
47
+ },
48
+ },
49
+ },
50
+ primary: {
51
+ shadow: {
52
+ selected: {
53
+ $value: [
54
+ {
55
+ color: '{base.color.green.9}',
56
+ alpha: 0.3,
57
+ offsetX: '0px',
58
+ offsetY: '1px',
59
+ blur: '0px',
60
+ spread: '0px',
61
+ inset: true,
62
+ },
63
+ ],
64
+ $type: 'shadow',
65
+ $extensions: {
66
+ 'org.primer.figma': {
67
+ collection: 'mode',
68
+ mode: 'light',
69
+ group: 'component shadow',
70
+ },
71
+ },
72
+ },
73
+ },
74
+ },
75
+ outline: {
76
+ shadow: {
77
+ selected: {
78
+ $value: [
79
+ {
80
+ color: '{base.color.blue.9}',
81
+ alpha: 0.2,
82
+ offsetX: '0px',
83
+ offsetY: '1px',
84
+ blur: '0px',
85
+ spread: '0px',
86
+ inset: true,
87
+ },
88
+ ],
89
+ $type: 'shadow',
90
+ $extensions: {
91
+ 'org.primer.figma': {
92
+ collection: 'mode',
93
+ mode: 'light',
94
+ group: 'component shadow',
95
+ },
96
+ },
97
+ },
98
+ },
99
+ },
100
+ danger: {
101
+ shadow: {
102
+ selected: {
103
+ $value: [
104
+ {
105
+ color: '{base.color.red.9}',
106
+ alpha: 0.2,
107
+ offsetX: '0px',
108
+ offsetY: '1px',
109
+ blur: '0px',
110
+ spread: '0px',
111
+ inset: true,
112
+ },
113
+ ],
114
+ $type: 'shadow',
115
+ $extensions: {
116
+ 'org.primer.figma': {
117
+ collection: 'mode',
118
+ mode: 'light',
119
+ group: 'component shadow',
120
+ },
121
+ },
122
+ },
123
+ },
124
+ },
125
+ },
126
+ shadow: {
127
+ inset: {
128
+ $value: {
129
+ color: '{base.color.neutral.13}',
130
+ alpha: 0.04,
131
+ offsetX: '0px',
132
+ offsetY: '1px',
133
+ blur: '0px',
134
+ spread: '0px',
135
+ inset: true,
136
+ },
137
+ $type: 'shadow',
138
+ $extensions: {
139
+ 'org.primer.figma': {
140
+ collection: 'mode',
141
+ mode: 'light',
142
+ group: 'shadow',
143
+ },
144
+ },
145
+ },
146
+ resting: {
147
+ xsmall: {
148
+ $value: {
149
+ color: '{base.color.neutral.13}',
150
+ alpha: 0.1,
151
+ offsetX: '0px',
152
+ offsetY: '1px',
153
+ blur: '0px',
154
+ spread: '0px',
155
+ inset: false,
156
+ },
157
+ $type: 'shadow',
158
+ $extensions: {
159
+ 'org.primer.figma': {
160
+ collection: 'mode',
161
+ mode: 'light',
162
+ group: 'shadow',
163
+ },
164
+ },
165
+ },
166
+ small: {
167
+ $value: [
168
+ {
169
+ color: '{base.color.neutral.13}',
170
+ alpha: 0.04,
171
+ offsetX: '0px',
172
+ offsetY: '1px',
173
+ blur: '0px',
174
+ spread: '0px',
175
+ inset: false,
176
+ },
177
+ ],
178
+ $type: 'shadow',
179
+ $extensions: {
180
+ 'org.primer.figma': {
181
+ collection: 'mode',
182
+ mode: 'light',
183
+ group: 'shadow',
184
+ },
185
+ },
186
+ },
187
+ medium: {
188
+ $value: [
189
+ {
190
+ color: '{base.color.neutral.12}',
191
+ alpha: 0.12,
192
+ offsetX: '0px',
193
+ offsetY: '3px',
194
+ blur: '6px',
195
+ spread: '0px',
196
+ },
197
+ ],
198
+ $type: 'shadow',
199
+ $extensions: {
200
+ 'org.primer.figma': {
201
+ collection: 'mode',
202
+ mode: 'light',
203
+ group: 'shadow',
204
+ },
205
+ },
206
+ },
207
+ },
208
+ floating: {
209
+ small: {
210
+ $value: [
211
+ {
212
+ color: '{overlay.borderColor}',
213
+ alpha: 0.5,
214
+ offsetX: '0px',
215
+ offsetY: '0px',
216
+ blur: '0px',
217
+ spread: '1px',
218
+ },
219
+ {
220
+ color: '{base.color.neutral.12}',
221
+ alpha: 0.04,
222
+ offsetX: '0px',
223
+ offsetY: '6px',
224
+ blur: '12px',
225
+ spread: '-3px',
226
+ },
227
+ {
228
+ color: '{base.color.neutral.12}',
229
+ alpha: 0.12,
230
+ offsetX: '0px',
231
+ offsetY: '6px',
232
+ blur: '18px',
233
+ spread: '0px',
234
+ },
235
+ ],
236
+ $type: 'shadow',
237
+ $extensions: {
238
+ 'org.primer.figma': {
239
+ collection: 'mode',
240
+ mode: 'light',
241
+ group: 'shadow',
242
+ },
243
+ },
244
+ },
245
+ medium: {
246
+ $value: [
247
+ {
248
+ color: '{overlay.borderColor}',
249
+ alpha: 0,
250
+ offsetX: '0px',
251
+ offsetY: '0px',
252
+ blur: '0px',
253
+ spread: '1px',
254
+ },
255
+ {
256
+ color: '{base.color.neutral.12}',
257
+ alpha: 0.08,
258
+ offsetX: '0px',
259
+ offsetY: '8px',
260
+ blur: '16px',
261
+ spread: '-4px',
262
+ },
263
+ {
264
+ color: '{base.color.neutral.12}',
265
+ alpha: 0.08,
266
+ offsetX: '0px',
267
+ offsetY: '4px',
268
+ blur: '32px',
269
+ spread: '-4px',
270
+ },
271
+ {
272
+ color: '{base.color.neutral.12}',
273
+ alpha: 0.08,
274
+ offsetX: '0px',
275
+ offsetY: '24px',
276
+ blur: '48px',
277
+ spread: '-12px',
278
+ },
279
+ {
280
+ color: '{base.color.neutral.12}',
281
+ alpha: 0.08,
282
+ offsetX: '0px',
283
+ offsetY: '48px',
284
+ blur: '96px',
285
+ spread: '-24px',
286
+ },
287
+ ],
288
+ $type: 'shadow',
289
+ $extensions: {
290
+ 'org.primer.figma': {
291
+ collection: 'mode',
292
+ mode: 'light',
293
+ group: 'shadow',
294
+ },
295
+ },
296
+ },
297
+ large: {
298
+ $value: [
299
+ {
300
+ color: '{overlay.borderColor}',
301
+ alpha: 0,
302
+ offsetX: '0px',
303
+ offsetY: '0px',
304
+ blur: '0px',
305
+ spread: '1px',
306
+ },
307
+ {
308
+ color: '{base.color.neutral.12}',
309
+ alpha: 0.24,
310
+ offsetX: '0px',
311
+ offsetY: '40px',
312
+ blur: '80px',
313
+ spread: '0px',
314
+ },
315
+ ],
316
+ $type: 'shadow',
317
+ $extensions: {
318
+ 'org.primer.figma': {
319
+ collection: 'mode',
320
+ mode: 'light',
321
+ group: 'shadow',
322
+ },
323
+ },
324
+ },
325
+ xlarge: {
326
+ $value: [
327
+ {
328
+ color: '{overlay.borderColor}',
329
+ alpha: 0,
330
+ offsetX: '0px',
331
+ offsetY: '0px',
332
+ blur: '0px',
333
+ spread: '1px',
334
+ },
335
+ {
336
+ color: '{base.color.neutral.12}',
337
+ alpha: 0.32,
338
+ offsetX: '0px',
339
+ offsetY: '56px',
340
+ blur: '112px',
341
+ spread: '0px',
342
+ },
343
+ ],
344
+ $type: 'shadow',
345
+ $extensions: {
346
+ 'org.primer.figma': {
347
+ collection: 'mode',
348
+ mode: 'light',
349
+ group: 'shadow',
350
+ },
351
+ },
352
+ },
353
+ legacy: {
354
+ $value: [
355
+ {
356
+ color: '{base.color.neutral.12}',
357
+ alpha: 0.04,
358
+ offsetX: '0px',
359
+ offsetY: '6px',
360
+ blur: '12px',
361
+ spread: '-3px',
362
+ },
363
+ {
364
+ color: '{base.color.neutral.12}',
365
+ alpha: 0.12,
366
+ offsetX: '0px',
367
+ offsetY: '6px',
368
+ blur: '18px',
369
+ spread: '0px',
370
+ },
371
+ ],
372
+ $type: 'shadow',
373
+ },
374
+ },
375
+ },
376
+ }
package/src/tokens/functional/size/border.json ADDED
@@ -0,0 +1,111 @@
1
+ {
2
+ "boxShadow": {
3
+ "thin": {
4
+ "$value": "inset 0 0 0 {borderWidth.thin}",
5
+ "$description": "Thin shadow for borders",
6
+ "$type": "string"
7
+ },
8
+ "thick": {
9
+ "$value": "inset 0 0 0 {borderWidth.thick}",
10
+ "$type": "string"
11
+ },
12
+ "thicker": {
13
+ "$value": "inset 0 0 0 {borderWidth.thicker}",
14
+ "$type": "string"
15
+ }
16
+ },
17
+ "borderWidth": {
18
+ "thin": {
19
+ "$value": "max(1px, 0.0625rem)",
20
+ "$type": "string"
21
+ },
22
+ "thick": {
23
+ "$value": "max(2px, 0.125rem)",
24
+ "$type": "string"
25
+ },
26
+ "thicker": {
27
+ "$value": "max(4px, 0.25rem)",
28
+ "$type": "string"
29
+ }
30
+ },
31
+ "borderRadius": {
32
+ "small": {
33
+ "$value": "3px",
34
+ "$type": "dimension",
35
+ "$extensions": {
36
+ "org.primer.figma": {
37
+ "collection": "functional/size",
38
+ "scopes": ["radius"],
39
+ "codeSyntax": {
40
+ "web": "var(--borderRadius-small) /* utility class: .rounded-1 */"
41
+ }
42
+ }
43
+ }
44
+ },
45
+ "medium": {
46
+ "$value": "6px",
47
+ "$type": "dimension",
48
+ "$extensions": {
49
+ "org.primer.figma": {
50
+ "collection": "functional/size",
51
+ "scopes": ["radius"],
52
+ "codeSyntax": {
53
+ "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */"
54
+ }
55
+ }
56
+ }
57
+ },
58
+ "large": {
59
+ "$value": "12px",
60
+ "$type": "dimension",
61
+ "$extensions": {
62
+ "org.primer.figma": {
63
+ "collection": "functional/size",
64
+ "scopes": ["radius"],
65
+ "codeSyntax": {
66
+ "web": "var(--borderRadius-large) /* utility class: .rounded-3 */"
67
+ }
68
+ }
69
+ }
70
+ },
71
+ "full": {
72
+ "$value": "9999px",
73
+ "$type": "dimension",
74
+ "$description": "Use this border radius for pill shaped elements",
75
+ "$extensions": {
76
+ "org.primer.figma": {
77
+ "collection": "functional/size",
78
+ "scopes": ["radius"],
79
+ "codeSyntax": {
80
+ "web": "var(--borderRadius-full) /* utility class: .circle */"
81
+ }
82
+ }
83
+ }
84
+ },
85
+ "default": {
86
+ "$value": "{borderRadius.medium}",
87
+ "$type": "dimension",
88
+ "$extensions": {
89
+ "org.primer.figma": {
90
+ "collection": "functional/size",
91
+ "scopes": ["radius"],
92
+ "codeSyntax": {
93
+ "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
94
+ }
95
+ }
96
+ }
97
+ }
98
+ },
99
+ "outline": {
100
+ "focus": {
101
+ "offset": {
102
+ "$value": "-2px",
103
+ "$type": "dimension"
104
+ },
105
+ "width": {
106
+ "$value": "2px",
107
+ "$type": "dimension"
108
+ }
109
+ }
110
+ }
111
+ }
package/src/tokens/functional/size/breakpoints.json ADDED
@@ -0,0 +1,64 @@
1
+ {
2
+ "breakpoint": {
3
+ "xsmall": {
4
+ "$value": "320px",
5
+ "$type": "dimension",
6
+ "$extensions": {
7
+ "org.primer.figma": {
8
+ "collection": "functional/size",
9
+ "scopes": ["size"]
10
+ }
11
+ }
12
+ },
13
+ "small": {
14
+ "$value": "544px",
15
+ "$type": "dimension",
16
+ "$extensions": {
17
+ "org.primer.figma": {
18
+ "collection": "functional/size",
19
+ "scopes": ["size"]
20
+ }
21
+ }
22
+ },
23
+ "medium": {
24
+ "$value": "768px",
25
+ "$type": "dimension",
26
+ "$extensions": {
27
+ "org.primer.figma": {
28
+ "collection": "functional/size",
29
+ "scopes": ["size"]
30
+ }
31
+ }
32
+ },
33
+ "large": {
34
+ "$value": "1012px",
35
+ "$type": "dimension",
36
+ "$extensions": {
37
+ "org.primer.figma": {
38
+ "collection": "functional/size",
39
+ "scopes": ["size"]
40
+ }
41
+ }
42
+ },
43
+ "xlarge": {
44
+ "$value": "1280px",
45
+ "$type": "dimension",
46
+ "$extensions": {
47
+ "org.primer.figma": {
48
+ "collection": "functional/size",
49
+ "scopes": ["size"]
50
+ }
51
+ }
52
+ },
53
+ "xxlarge": {
54
+ "$value": "1400px",
55
+ "$type": "dimension",
56
+ "$extensions": {
57
+ "org.primer.figma": {
58
+ "collection": "functional/size",
59
+ "scopes": ["size"]
60
+ }
61
+ }
62
+ }
63
+ }
64
+ }
package/src/tokens/functional/size/size-coarse.json ADDED
@@ -0,0 +1,28 @@
1
+ {
2
+ "control": {
3
+ "minTarget": {
4
+ "auto": {
5
+ "$value": "{base.size.44}",
6
+ "$type": "dimension"
7
+ }
8
+ }
9
+ },
10
+ "controlStack": {
11
+ "small": {
12
+ "gap": {
13
+ "auto": {
14
+ "$value": "{base.size.16}",
15
+ "$type": "dimension"
16
+ }
17
+ }
18
+ },
19
+ "medium": {
20
+ "gap": {
21
+ "auto": {
22
+ "$value": "{base.size.12}",
23
+ "$type": "dimension"
24
+ }
25
+ }
26
+ }
27
+ }
28
+ }
package/src/tokens/functional/size/size-fine.json ADDED
@@ -0,0 +1,28 @@
1
+ {
2
+ "control": {
3
+ "minTarget": {
4
+ "auto": {
5
+ "$value": "{base.size.16}",
6
+ "$type": "dimension"
7
+ }
8
+ }
9
+ },
10
+ "controlStack": {
11
+ "small": {
12
+ "gap": {
13
+ "auto": {
14
+ "$value": "{base.size.8}",
15
+ "$type": "dimension"
16
+ }
17
+ }
18
+ },
19
+ "medium": {
20
+ "gap": {
21
+ "auto": {
22
+ "$value": "{base.size.8}",
23
+ "$type": "dimension"
24
+ }
25
+ }
26
+ }
27
+ }
28
+ }