@primer/primitives 10.4.0-rc.fd8ac4c9 → 10.4.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 (92) hide show
  1. package/dist/build/schemas/shadowToken.d.ts +1992 -0
  2. package/dist/build/schemas/shadowToken.js +27 -0
  3. package/dist/css/functional/themes/dark-colorblind.css +8 -8
  4. package/dist/css/functional/themes/dark-dimmed.css +8 -8
  5. package/dist/css/functional/themes/dark-high-contrast.css +8 -8
  6. package/dist/css/functional/themes/dark-tritanopia.css +8 -8
  7. package/dist/css/functional/themes/dark.css +8 -8
  8. package/dist/css/functional/themes/light-colorblind.css +8 -8
  9. package/dist/css/functional/themes/light-high-contrast.css +8 -8
  10. package/dist/css/functional/themes/light-tritanopia.css +8 -8
  11. package/dist/css/functional/themes/light.css +8 -8
  12. package/dist/css/primitives.css +0 -6
  13. package/dist/docs/functional/themes/dark-colorblind.json +9370 -439
  14. package/dist/docs/functional/themes/dark-dimmed.json +9790 -563
  15. package/dist/docs/functional/themes/dark-high-contrast.json +10794 -589
  16. package/dist/docs/functional/themes/dark-tritanopia.json +9352 -449
  17. package/dist/docs/functional/themes/dark.json +9248 -443
  18. package/dist/docs/functional/themes/light-colorblind.json +9334 -433
  19. package/dist/docs/functional/themes/light-high-contrast.json +10806 -673
  20. package/dist/docs/functional/themes/light-tritanopia.json +9323 -450
  21. package/dist/docs/functional/themes/light.json +9245 -414
  22. package/dist/figma/figma.json +1 -10
  23. package/dist/figma/themes/dark-colorblind.json +5203 -5080
  24. package/dist/figma/themes/dark-dimmed.json +5130 -4676
  25. package/dist/figma/themes/dark-high-contrast.json +6223 -4631
  26. package/dist/figma/themes/dark-tritanopia.json +5185 -5096
  27. package/dist/figma/themes/dark.json +4869 -4885
  28. package/dist/figma/themes/light-colorblind.json +5347 -5171
  29. package/dist/figma/themes/light-high-contrast.json +6117 -4534
  30. package/dist/figma/themes/light-tritanopia.json +5532 -5387
  31. package/dist/figma/themes/light.json +5270 -5170
  32. package/dist/internalCss/dark-colorblind.css +8 -8
  33. package/dist/internalCss/dark-dimmed.css +8 -8
  34. package/dist/internalCss/dark-high-contrast.css +8 -8
  35. package/dist/internalCss/dark-tritanopia.css +8 -8
  36. package/dist/internalCss/dark.css +8 -8
  37. package/dist/internalCss/light-colorblind.css +8 -8
  38. package/dist/internalCss/light-high-contrast.css +8 -8
  39. package/dist/internalCss/light-tritanopia.css +8 -8
  40. package/dist/internalCss/light.css +8 -8
  41. package/dist/styleLint/functional/themes/dark-colorblind.json +9370 -439
  42. package/dist/styleLint/functional/themes/dark-dimmed.json +9790 -563
  43. package/dist/styleLint/functional/themes/dark-high-contrast.json +10794 -589
  44. package/dist/styleLint/functional/themes/dark-tritanopia.json +9352 -449
  45. package/dist/styleLint/functional/themes/dark.json +9248 -443
  46. package/dist/styleLint/functional/themes/light-colorblind.json +9334 -433
  47. package/dist/styleLint/functional/themes/light-high-contrast.json +10806 -673
  48. package/dist/styleLint/functional/themes/light-tritanopia.json +9323 -450
  49. package/dist/styleLint/functional/themes/light.json +9245 -414
  50. package/package.json +1 -1
  51. package/src/tokens/component/avatar.json5 +33 -0
  52. package/src/tokens/component/button.json5 +1714 -0
  53. package/src/tokens/component/header.json5 +3 -0
  54. package/src/tokens/component/label.json5 +1942 -0
  55. package/src/tokens/component/menu.json5 +24 -0
  56. package/src/tokens/component/overlay.json5 +1 -1
  57. package/src/tokens/component/selectMenu.json5 +38 -0
  58. package/src/tokens/component/sideNav.json5 +22 -0
  59. package/src/tokens/component/treeView.json5 +24 -0
  60. package/src/tokens/component/underlineNav.json5 +56 -0
  61. package/src/tokens/functional/color/control.json5 +1087 -0
  62. package/src/tokens/functional/color/display.json5 +2170 -0
  63. package/src/tokens/functional/color/selection.json5 +22 -0
  64. package/src/tokens/functional/shadow/shadow.json5 +478 -0
  65. package/dist/css/functional/motion/motion.css +0 -6
  66. package/dist/docs/functional/motion/motion.json +0 -66
  67. package/dist/fallbacks/functional/motion/motion.json +0 -6
  68. package/dist/figma/shadows/dark-colorblind.json +0 -1152
  69. package/dist/figma/shadows/dark-dimmed.json +0 -1152
  70. package/dist/figma/shadows/dark-high-contrast.json +0 -1152
  71. package/dist/figma/shadows/dark-tritanopia.json +0 -1152
  72. package/dist/figma/shadows/dark.json +0 -1152
  73. package/dist/figma/shadows/light-colorblind.json +0 -1052
  74. package/dist/figma/shadows/light-high-contrast.json +0 -1052
  75. package/dist/figma/shadows/light-tritanopia.json +0 -1052
  76. package/dist/figma/shadows/light.json +0 -1052
  77. package/dist/styleLint/functional/motion/motion.json +0 -66
  78. package/src/tokens/functional/color/dark/display-dark.json5 +0 -1258
  79. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -199
  80. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +0 -618
  81. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +0 -65
  82. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +0 -47
  83. package/src/tokens/functional/color/dark/patterns-dark.json5 +0 -2589
  84. package/src/tokens/functional/color/light/display-light.json5 +0 -1163
  85. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +0 -581
  86. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +0 -69
  87. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +0 -41
  88. package/src/tokens/functional/color/light/patterns-light.json5 +0 -2583
  89. package/src/tokens/functional/motion/loading.json5 +0 -17
  90. package/src/tokens/functional/motion/patterns.json5 +0 -35
  91. package/src/tokens/functional/shadow/dark.json5 +0 -369
  92. package/src/tokens/functional/shadow/light.json5 +0 -363
package/src/tokens/functional/motion/loading.json5 DELETED
@@ -1,17 +0,0 @@
1
- /**
2
- * Loading
3
- * @description Used for consistent durations of loading indicator animations
4
- */
5
- {
6
- motion: {
7
- loading: {
8
- delay: {
9
- default: {
10
- $value: '{base.duration.1000}',
11
- $type: 'duration',
12
- $description: 'The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies.',
13
- },
14
- },
15
- },
16
- },
17
- }
package/src/tokens/functional/motion/patterns.json5 DELETED
@@ -1,35 +0,0 @@
1
- /**
2
- * Motion patterns
3
- * @description Used to create animated components
4
- */
5
- {
6
- motion: {
7
- spinner: {
8
- duration: {
9
- rotation: {
10
- $value: '{base.duration.1000}',
11
- $type: 'duration',
12
- $description: 'The amount of time it takes the "Spinner" loading indicator to make a full 360deg rotation',
13
- },
14
- },
15
- easing: {
16
- rotation: {
17
- $value: '{base.easing.linear}',
18
- $type: 'cubicBezier',
19
- $description: 'The easing curve for the "Spinner" loading indicator rotation',
20
- },
21
- },
22
- },
23
- skeletonLoader: {
24
- shimmer: {
25
- duration: {
26
- scale: {
27
- $value: '{base.duration.1000}',
28
- $type: 'duration',
29
- $description: 'The amount of times it takes the "shimmer" effect to go from the start (left) of the skeleton loader to the end (right)',
30
- },
31
- },
32
- },
33
- },
34
- },
35
- }
package/src/tokens/functional/shadow/dark.json5 DELETED
@@ -1,369 +0,0 @@
1
- {
2
- avatar: {
3
- shadow: {
4
- $value: [
5
- {
6
- color: '{base.color.neutral.1}',
7
- alpha: 1,
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
- group: 'component shadow',
19
- },
20
- },
21
- },
22
- },
23
- button: {
24
- default: {
25
- shadow: {
26
- resting: {
27
- $value: [
28
- {
29
- color: '{base.color.transparent}',
30
- alpha: 0,
31
- offsetX: '0px',
32
- offsetY: '0px',
33
- blur: '0px',
34
- spread: '0px',
35
- inset: false,
36
- },
37
- ],
38
- $type: 'shadow',
39
- $extensions: {
40
- 'org.primer.figma': {
41
- collection: 'mode',
42
- group: 'component shadow',
43
- },
44
- },
45
- },
46
- },
47
- },
48
- primary: {
49
- shadow: {
50
- selected: {
51
- $value: [
52
- {
53
- color: '{base.color.transparent}',
54
- alpha: 0,
55
- offsetX: '0px',
56
- offsetY: '0px',
57
- blur: '0px',
58
- spread: '0px',
59
- inset: false,
60
- },
61
- ],
62
- $type: 'shadow',
63
- $extensions: {
64
- 'org.primer.figma': {
65
- collection: 'mode',
66
- group: 'component shadow',
67
- },
68
- },
69
- },
70
- },
71
- },
72
- outline: {
73
- shadow: {
74
- selected: {
75
- $value: [
76
- {
77
- color: '{base.color.transparent}',
78
- alpha: 0,
79
- offsetX: '0px',
80
- offsetY: '0px',
81
- blur: '0px',
82
- spread: '0px',
83
- inset: false,
84
- },
85
- ],
86
- $type: 'shadow',
87
- $extensions: {
88
- 'org.primer.figma': {
89
- collection: 'mode',
90
- group: 'component shadow',
91
- },
92
- },
93
- },
94
- },
95
- },
96
- danger: {
97
- shadow: {
98
- selected: {
99
- $value: [
100
- {
101
- color: '{base.color.transparent}',
102
- alpha: 0,
103
- offsetX: '0px',
104
- offsetY: '0px',
105
- blur: '0px',
106
- spread: '0px',
107
- inset: false,
108
- },
109
- ],
110
- $type: 'shadow',
111
- $extensions: {
112
- 'org.primer.figma': {
113
- collection: 'mode',
114
- group: 'component shadow',
115
- },
116
- },
117
- },
118
- },
119
- },
120
- },
121
- shadow: {
122
- inset: {
123
- $value: {
124
- color: '{base.color.neutral.0}',
125
- alpha: 0.24,
126
- offsetX: '0px',
127
- offsetY: '1px',
128
- blur: '0px',
129
- spread: '0px',
130
- inset: true,
131
- },
132
- $type: 'shadow',
133
- $extensions: {
134
- 'org.primer.figma': {
135
- collection: 'mode',
136
- group: 'shadow',
137
- },
138
- },
139
- },
140
- resting: {
141
- xsmall: {
142
- $value: {
143
- color: '{base.color.neutral.0}',
144
- alpha: 0.8,
145
- offsetX: '0px',
146
- offsetY: '1px',
147
- blur: '0px',
148
- spread: '0px',
149
- inset: false,
150
- },
151
- $type: 'shadow',
152
- $extensions: {
153
- 'org.primer.figma': {
154
- collection: 'mode',
155
- group: 'shadow',
156
- },
157
- },
158
- },
159
- small: {
160
- $value: [
161
- {
162
- color: '{base.color.neutral.0}',
163
- alpha: 0.4,
164
- offsetX: '0px',
165
- offsetY: '1px',
166
- blur: '0px',
167
- spread: '0px',
168
- inset: false,
169
- },
170
- ],
171
- $type: 'shadow',
172
- $extensions: {
173
- 'org.primer.figma': {
174
- collection: 'mode',
175
- group: 'shadow',
176
- },
177
- },
178
- },
179
- medium: {
180
- $value: [
181
- {
182
- color: '{base.color.neutral.0}',
183
- alpha: 0.8,
184
- offsetX: '0px',
185
- offsetY: '3px',
186
- blur: '6px',
187
- spread: '0px',
188
- },
189
- ],
190
- $type: 'shadow',
191
- $extensions: {
192
- 'org.primer.figma': {
193
- collection: 'mode',
194
- group: 'shadow',
195
- },
196
- },
197
- },
198
- },
199
- floating: {
200
- small: {
201
- $value: [
202
- {
203
- color: '{overlay.borderColor}',
204
- alpha: 1,
205
- offsetX: '0px',
206
- offsetY: '0px',
207
- blur: '0px',
208
- spread: '1px',
209
- },
210
- {
211
- color: '{base.color.neutral.0}',
212
- alpha: 0.4,
213
- offsetX: '0px',
214
- offsetY: '6px',
215
- blur: '12px',
216
- spread: '-3px',
217
- },
218
- {
219
- color: '{base.color.neutral.0}',
220
- alpha: 0.4,
221
- offsetX: '0px',
222
- offsetY: '6px',
223
- blur: '18px',
224
- spread: '0px',
225
- },
226
- ],
227
- $type: 'shadow',
228
- $extensions: {
229
- 'org.primer.figma': {
230
- collection: 'mode',
231
- group: 'shadow',
232
- },
233
- },
234
- },
235
- medium: {
236
- $value: [
237
- {
238
- color: '{overlay.borderColor}',
239
- alpha: 1,
240
- offsetX: '0px',
241
- offsetY: '0px',
242
- blur: '0px',
243
- spread: '1px',
244
- },
245
- {
246
- color: '{base.color.neutral.0}',
247
- alpha: 0.4,
248
- offsetX: '0px',
249
- offsetY: '8px',
250
- blur: '16px',
251
- spread: '-4px',
252
- },
253
- {
254
- color: '{base.color.neutral.0}',
255
- alpha: 0.4,
256
- offsetX: '0px',
257
- offsetY: '4px',
258
- blur: '32px',
259
- spread: '-4px',
260
- },
261
- {
262
- color: '{base.color.neutral.0}',
263
- alpha: 0.4,
264
- offsetX: '0px',
265
- offsetY: '24px',
266
- blur: '48px',
267
- spread: '-12px',
268
- },
269
- {
270
- color: '{base.color.neutral.0}',
271
- alpha: 0.4,
272
- offsetX: '0px',
273
- offsetY: '48px',
274
- blur: '96px',
275
- spread: '-24px',
276
- },
277
- ],
278
- $type: 'shadow',
279
- $extensions: {
280
- 'org.primer.figma': {
281
- collection: 'mode',
282
- group: 'shadow',
283
- },
284
- },
285
- },
286
- large: {
287
- $value: [
288
- {
289
- color: '{overlay.borderColor}',
290
- alpha: 1,
291
- offsetX: '0px',
292
- offsetY: '0px',
293
- blur: '0px',
294
- spread: '1px',
295
- },
296
- {
297
- color: '{base.color.neutral.0}',
298
- alpha: 1,
299
- offsetX: '0px',
300
- offsetY: '24px',
301
- blur: '48px',
302
- spread: '0px',
303
- },
304
- ],
305
- $type: 'shadow',
306
- $extensions: {
307
- 'org.primer.figma': {
308
- collection: 'mode',
309
- group: 'shadow',
310
- },
311
- },
312
- },
313
- xlarge: {
314
- $value: [
315
- {
316
- color: '{overlay.borderColor}',
317
- alpha: 1,
318
- offsetX: '0px',
319
- offsetY: '0px',
320
- blur: '0px',
321
- spread: '1px',
322
- },
323
- {
324
- color: '{base.color.neutral.0}',
325
- alpha: 1,
326
- offsetX: '0px',
327
- offsetY: '32px',
328
- blur: '64px',
329
- spread: '0px',
330
- },
331
- ],
332
- $type: 'shadow',
333
- $extensions: {
334
- 'org.primer.figma': {
335
- collection: 'mode',
336
- group: 'shadow',
337
- },
338
- },
339
- },
340
- legacy: {
341
- $value: [
342
- {
343
- color: '{base.color.neutral.0}',
344
- alpha: 0.4,
345
- offsetX: '0px',
346
- offsetY: '6px',
347
- blur: '12px',
348
- spread: '-3px',
349
- },
350
- {
351
- color: '{base.color.neutral.0}',
352
- alpha: 0.4,
353
- offsetX: '0px',
354
- offsetY: '6px',
355
- blur: '18px',
356
- spread: '0px',
357
- },
358
- ],
359
- $type: 'shadow',
360
- $extensions: {
361
- 'org.primer.figma': {
362
- collection: 'mode',
363
- group: 'shadow',
364
- },
365
- },
366
- },
367
- },
368
- },
369
- }