@primer/primitives 10.4.0-rc.eab36abe → 10.4.0-rc.fd8ac4c9

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 (90) hide show
  1. package/dist/build/schemas/shadowToken.d.ts +0 -1992
  2. package/dist/build/schemas/shadowToken.js +0 -27
  3. package/dist/css/functional/motion/motion.css +6 -0
  4. package/dist/css/functional/themes/dark-colorblind.css +2 -2
  5. package/dist/css/functional/themes/dark-dimmed.css +2 -2
  6. package/dist/css/functional/themes/dark-high-contrast.css +2 -2
  7. package/dist/css/functional/themes/dark-tritanopia.css +2 -2
  8. package/dist/css/functional/themes/dark.css +2 -2
  9. package/dist/css/functional/themes/light-colorblind.css +2 -2
  10. package/dist/css/functional/themes/light-high-contrast.css +2 -2
  11. package/dist/css/functional/themes/light-tritanopia.css +2 -2
  12. package/dist/css/functional/themes/light.css +2 -2
  13. package/dist/css/primitives.css +6 -0
  14. package/dist/docs/functional/motion/motion.json +66 -0
  15. package/dist/docs/functional/themes/dark-colorblind.json +510 -9390
  16. package/dist/docs/functional/themes/dark-dimmed.json +633 -9809
  17. package/dist/docs/functional/themes/dark-high-contrast.json +4339 -14493
  18. package/dist/docs/functional/themes/dark-tritanopia.json +537 -9389
  19. package/dist/docs/functional/themes/dark.json +452 -9206
  20. package/dist/docs/functional/themes/light-colorblind.json +470 -9320
  21. package/dist/docs/functional/themes/light-high-contrast.json +3990 -14072
  22. package/dist/docs/functional/themes/light-tritanopia.json +470 -9292
  23. package/dist/docs/functional/themes/light.json +425 -9205
  24. package/dist/fallbacks/functional/motion/motion.json +6 -0
  25. package/dist/figma/figma.json +10 -1
  26. package/dist/figma/shadows/dark-colorblind.json +1152 -0
  27. package/dist/figma/shadows/dark-dimmed.json +1152 -0
  28. package/dist/figma/shadows/dark-high-contrast.json +1152 -0
  29. package/dist/figma/shadows/dark-tritanopia.json +1152 -0
  30. package/dist/figma/shadows/dark.json +1152 -0
  31. package/dist/figma/shadows/light-colorblind.json +1052 -0
  32. package/dist/figma/shadows/light-high-contrast.json +1052 -0
  33. package/dist/figma/shadows/light-tritanopia.json +1052 -0
  34. package/dist/figma/shadows/light.json +1052 -0
  35. package/dist/figma/themes/dark-colorblind.json +5047 -5070
  36. package/dist/figma/themes/dark-dimmed.json +4705 -5059
  37. package/dist/figma/themes/dark-high-contrast.json +4565 -6057
  38. package/dist/figma/themes/dark-tritanopia.json +5056 -5045
  39. package/dist/figma/themes/dark.json +4945 -4829
  40. package/dist/figma/themes/light-colorblind.json +4959 -5035
  41. package/dist/figma/themes/light-high-contrast.json +4601 -6084
  42. package/dist/figma/themes/light-tritanopia.json +4979 -5024
  43. package/dist/figma/themes/light.json +5223 -5223
  44. package/dist/internalCss/dark-colorblind.css +2 -2
  45. package/dist/internalCss/dark-dimmed.css +2 -2
  46. package/dist/internalCss/dark-high-contrast.css +2 -2
  47. package/dist/internalCss/dark-tritanopia.css +2 -2
  48. package/dist/internalCss/dark.css +2 -2
  49. package/dist/internalCss/light-colorblind.css +2 -2
  50. package/dist/internalCss/light-high-contrast.css +2 -2
  51. package/dist/internalCss/light-tritanopia.css +2 -2
  52. package/dist/internalCss/light.css +2 -2
  53. package/dist/styleLint/functional/motion/motion.json +66 -0
  54. package/dist/styleLint/functional/themes/dark-colorblind.json +510 -9390
  55. package/dist/styleLint/functional/themes/dark-dimmed.json +672 -9848
  56. package/dist/styleLint/functional/themes/dark-high-contrast.json +4339 -14493
  57. package/dist/styleLint/functional/themes/dark-tritanopia.json +537 -9389
  58. package/dist/styleLint/functional/themes/dark.json +452 -9206
  59. package/dist/styleLint/functional/themes/light-colorblind.json +470 -9320
  60. package/dist/styleLint/functional/themes/light-high-contrast.json +771 -10853
  61. package/dist/styleLint/functional/themes/light-tritanopia.json +470 -9292
  62. package/dist/styleLint/functional/themes/light.json +425 -9205
  63. package/package.json +1 -1
  64. package/src/tokens/component/avatar.json5 +0 -33
  65. package/src/tokens/component/header.json5 +0 -3
  66. package/src/tokens/functional/color/dark/display-dark.json5 +1258 -0
  67. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +199 -0
  68. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +618 -0
  69. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +65 -0
  70. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +47 -0
  71. package/src/tokens/functional/color/dark/patterns-dark.json5 +2589 -0
  72. package/src/tokens/functional/color/light/display-light.json5 +1163 -0
  73. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +581 -0
  74. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +69 -0
  75. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +41 -0
  76. package/src/tokens/functional/color/light/patterns-light.json5 +2583 -0
  77. package/src/tokens/functional/motion/loading.json5 +17 -0
  78. package/src/tokens/functional/motion/patterns.json5 +35 -0
  79. package/src/tokens/functional/shadow/dark.json5 +369 -0
  80. package/src/tokens/functional/shadow/{shadow.json5 → light.json5} +120 -202
  81. package/src/tokens/component/button.json5 +0 -1714
  82. package/src/tokens/component/label.json5 +0 -1942
  83. package/src/tokens/component/menu.json5 +0 -24
  84. package/src/tokens/component/selectMenu.json5 +0 -38
  85. package/src/tokens/component/sideNav.json5 +0 -22
  86. package/src/tokens/component/treeView.json5 +0 -24
  87. package/src/tokens/component/underlineNav.json5 +0 -56
  88. package/src/tokens/functional/color/control.json5 +0 -1087
  89. package/src/tokens/functional/color/display.json5 +0 -2170
  90. package/src/tokens/functional/color/selection.json5 +0 -22
package/src/tokens/functional/motion/loading.json5 ADDED
@@ -0,0 +1,17 @@
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 ADDED
@@ -0,0 +1,35 @@
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 ADDED
@@ -0,0 +1,369 @@
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
+ }