@momentum-design/tokens 0.10.2 → 0.10.4
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.
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@keyframes mds-animation-button-loading-spin {
|
|
6
|
+
from { transform: rotate(0deg); }
|
|
7
|
+
to { transform: rotate(360deg); }
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@keyframes mds-animation-button-loading-pulse {
|
|
11
|
+
from { opacity: 1; }
|
|
12
|
+
to { opacity: 0.4; }
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@keyframes mds-animation-checkbox-checked {
|
|
16
|
+
from { transform: scale(0.8); }
|
|
17
|
+
to { transform: scale(1); }
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@keyframes mds-animation-checkbox-checked-icon {
|
|
21
|
+
from { opacity: 0; }
|
|
22
|
+
to { opacity: 1; }
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.mds-animation {
|
|
26
|
+
--mds-transition-button-background: background-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms;
|
|
27
|
+
--mds-transition-button-border: border-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, box-shadow 100ms cubic-bezier(0.44, 0, 0, 1) 0ms;
|
|
28
|
+
--mds-transition-button-icon: color 200ms cubic-bezier(0.44, 0, 0, 1) 0ms, transform 200ms cubic-bezier(0.44, 0, 0, 1) 0ms;
|
|
29
|
+
--mds-transition-button-focus-ring: box-shadow 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, outline 100ms cubic-bezier(0.44, 0, 0, 1) 0ms;
|
|
30
|
+
--mds-transition-button-press: background-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, color 200ms cubic-bezier(0.44, 0, 0, 1) 0ms, transform 200ms cubic-bezier(0.44, 0, 0, 1) 0ms;
|
|
31
|
+
--mds-transition-button-hover: background-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, border-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, box-shadow 100ms cubic-bezier(0.44, 0, 0, 1) 0ms;
|
|
32
|
+
--mds-animation-button-loading-spin: 600ms cubic-bezier(0, 0, 1, 1) 0ms infinite mds-animation-button-loading-spin;
|
|
33
|
+
--mds-animation-button-loading-pulse: 600ms cubic-bezier(0.44, 0, 0, 1) 0ms infinite mds-animation-button-loading-pulse;
|
|
34
|
+
--mds-animation-button-loading-spin-pulse: 600ms cubic-bezier(0, 0, 1, 1) 0ms infinite mds-animation-button-loading-spin, 600ms cubic-bezier(0.44, 0, 0, 1) 0ms infinite mds-animation-button-loading-pulse;
|
|
35
|
+
--mds-transition-checkbox-default: background-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, border-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms;
|
|
36
|
+
--mds-animation-checkbox-checked: 200ms cubic-bezier(0.44, 0, 0, 1) 0ms mds-animation-checkbox-checked;
|
|
37
|
+
--mds-animation-checkbox-checked-icon: 200ms cubic-bezier(0.44, 0, 0, 1) 0ms mds-animation-checkbox-checked-icon;
|
|
38
|
+
}
|
|
@@ -0,0 +1,816 @@
|
|
|
1
|
+
{
|
|
2
|
+
"motion": {
|
|
3
|
+
"duration": {
|
|
4
|
+
"instant": {
|
|
5
|
+
"value": "100ms",
|
|
6
|
+
"type": "duration",
|
|
7
|
+
"description": "Direct user feedback — press scale, toggle, focus ring",
|
|
8
|
+
"filePath": "src/core/motion.json",
|
|
9
|
+
"isSource": true,
|
|
10
|
+
"original": {
|
|
11
|
+
"value": "100ms",
|
|
12
|
+
"type": "duration",
|
|
13
|
+
"description": "Direct user feedback — press scale, toggle, focus ring"
|
|
14
|
+
},
|
|
15
|
+
"name": "mds-motion-duration-instant",
|
|
16
|
+
"attributes": {
|
|
17
|
+
"category": "motion",
|
|
18
|
+
"type": "duration",
|
|
19
|
+
"item": "instant"
|
|
20
|
+
},
|
|
21
|
+
"path": [
|
|
22
|
+
"motion",
|
|
23
|
+
"duration",
|
|
24
|
+
"instant"
|
|
25
|
+
]
|
|
26
|
+
},
|
|
27
|
+
"fast": {
|
|
28
|
+
"value": "200ms",
|
|
29
|
+
"type": "duration",
|
|
30
|
+
"description": "Immediate response — dropdown open, hover, button background",
|
|
31
|
+
"filePath": "src/core/motion.json",
|
|
32
|
+
"isSource": true,
|
|
33
|
+
"original": {
|
|
34
|
+
"value": "200ms",
|
|
35
|
+
"type": "duration",
|
|
36
|
+
"description": "Immediate response — dropdown open, hover, button background"
|
|
37
|
+
},
|
|
38
|
+
"name": "mds-motion-duration-fast",
|
|
39
|
+
"attributes": {
|
|
40
|
+
"category": "motion",
|
|
41
|
+
"type": "duration",
|
|
42
|
+
"item": "fast"
|
|
43
|
+
},
|
|
44
|
+
"path": [
|
|
45
|
+
"motion",
|
|
46
|
+
"duration",
|
|
47
|
+
"fast"
|
|
48
|
+
]
|
|
49
|
+
},
|
|
50
|
+
"normal": {
|
|
51
|
+
"value": "300ms",
|
|
52
|
+
"type": "duration",
|
|
53
|
+
"description": "System choreography — accordion expand, stagger, carousel",
|
|
54
|
+
"filePath": "src/core/motion.json",
|
|
55
|
+
"isSource": true,
|
|
56
|
+
"original": {
|
|
57
|
+
"value": "300ms",
|
|
58
|
+
"type": "duration",
|
|
59
|
+
"description": "System choreography — accordion expand, stagger, carousel"
|
|
60
|
+
},
|
|
61
|
+
"name": "mds-motion-duration-normal",
|
|
62
|
+
"attributes": {
|
|
63
|
+
"category": "motion",
|
|
64
|
+
"type": "duration",
|
|
65
|
+
"item": "normal"
|
|
66
|
+
},
|
|
67
|
+
"path": [
|
|
68
|
+
"motion",
|
|
69
|
+
"duration",
|
|
70
|
+
"normal"
|
|
71
|
+
]
|
|
72
|
+
},
|
|
73
|
+
"relaxed": {
|
|
74
|
+
"value": "450ms",
|
|
75
|
+
"type": "duration",
|
|
76
|
+
"description": "Dramatic entrances — dialog pop, sheet reveal, page transitions",
|
|
77
|
+
"filePath": "src/core/motion.json",
|
|
78
|
+
"isSource": true,
|
|
79
|
+
"original": {
|
|
80
|
+
"value": "450ms",
|
|
81
|
+
"type": "duration",
|
|
82
|
+
"description": "Dramatic entrances — dialog pop, sheet reveal, page transitions"
|
|
83
|
+
},
|
|
84
|
+
"name": "mds-motion-duration-relaxed",
|
|
85
|
+
"attributes": {
|
|
86
|
+
"category": "motion",
|
|
87
|
+
"type": "duration",
|
|
88
|
+
"item": "relaxed"
|
|
89
|
+
},
|
|
90
|
+
"path": [
|
|
91
|
+
"motion",
|
|
92
|
+
"duration",
|
|
93
|
+
"relaxed"
|
|
94
|
+
]
|
|
95
|
+
},
|
|
96
|
+
"slow": {
|
|
97
|
+
"value": "600ms",
|
|
98
|
+
"type": "duration",
|
|
99
|
+
"description": "Deliberate slow reveals — onboarding sequences, hero sections",
|
|
100
|
+
"filePath": "src/core/motion.json",
|
|
101
|
+
"isSource": true,
|
|
102
|
+
"original": {
|
|
103
|
+
"value": "600ms",
|
|
104
|
+
"type": "duration",
|
|
105
|
+
"description": "Deliberate slow reveals — onboarding sequences, hero sections"
|
|
106
|
+
},
|
|
107
|
+
"name": "mds-motion-duration-slow",
|
|
108
|
+
"attributes": {
|
|
109
|
+
"category": "motion",
|
|
110
|
+
"type": "duration",
|
|
111
|
+
"item": "slow"
|
|
112
|
+
},
|
|
113
|
+
"path": [
|
|
114
|
+
"motion",
|
|
115
|
+
"duration",
|
|
116
|
+
"slow"
|
|
117
|
+
]
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
"easing": {
|
|
121
|
+
"standard": {
|
|
122
|
+
"value": "cubic-bezier(0.44, 0, 0, 1)",
|
|
123
|
+
"type": "cubicBezier",
|
|
124
|
+
"description": "State changes — background, border, color; hover, press, toggle",
|
|
125
|
+
"filePath": "src/core/motion.json",
|
|
126
|
+
"isSource": true,
|
|
127
|
+
"original": {
|
|
128
|
+
"value": "cubic-bezier(0.44, 0, 0, 1)",
|
|
129
|
+
"type": "cubicBezier",
|
|
130
|
+
"description": "State changes — background, border, color; hover, press, toggle"
|
|
131
|
+
},
|
|
132
|
+
"name": "mds-motion-easing-standard",
|
|
133
|
+
"attributes": {
|
|
134
|
+
"category": "motion",
|
|
135
|
+
"type": "easing",
|
|
136
|
+
"item": "standard"
|
|
137
|
+
},
|
|
138
|
+
"path": [
|
|
139
|
+
"motion",
|
|
140
|
+
"easing",
|
|
141
|
+
"standard"
|
|
142
|
+
]
|
|
143
|
+
},
|
|
144
|
+
"entrance": {
|
|
145
|
+
"value": "cubic-bezier(0, 0, 0.2, 1)",
|
|
146
|
+
"type": "cubicBezier",
|
|
147
|
+
"description": "Elements entering the screen; give users time to orient",
|
|
148
|
+
"filePath": "src/core/motion.json",
|
|
149
|
+
"isSource": true,
|
|
150
|
+
"original": {
|
|
151
|
+
"value": "cubic-bezier(0, 0, 0.2, 1)",
|
|
152
|
+
"type": "cubicBezier",
|
|
153
|
+
"description": "Elements entering the screen; give users time to orient"
|
|
154
|
+
},
|
|
155
|
+
"name": "mds-motion-easing-entrance",
|
|
156
|
+
"attributes": {
|
|
157
|
+
"category": "motion",
|
|
158
|
+
"type": "easing",
|
|
159
|
+
"item": "entrance"
|
|
160
|
+
},
|
|
161
|
+
"path": [
|
|
162
|
+
"motion",
|
|
163
|
+
"easing",
|
|
164
|
+
"entrance"
|
|
165
|
+
]
|
|
166
|
+
},
|
|
167
|
+
"exit": {
|
|
168
|
+
"value": "cubic-bezier(0.5, 0, 1, 1)",
|
|
169
|
+
"type": "cubicBezier",
|
|
170
|
+
"description": "Elements leaving the screen; get out of the way quickly",
|
|
171
|
+
"filePath": "src/core/motion.json",
|
|
172
|
+
"isSource": true,
|
|
173
|
+
"original": {
|
|
174
|
+
"value": "cubic-bezier(0.5, 0, 1, 1)",
|
|
175
|
+
"type": "cubicBezier",
|
|
176
|
+
"description": "Elements leaving the screen; get out of the way quickly"
|
|
177
|
+
},
|
|
178
|
+
"name": "mds-motion-easing-exit",
|
|
179
|
+
"attributes": {
|
|
180
|
+
"category": "motion",
|
|
181
|
+
"type": "easing",
|
|
182
|
+
"item": "exit"
|
|
183
|
+
},
|
|
184
|
+
"path": [
|
|
185
|
+
"motion",
|
|
186
|
+
"easing",
|
|
187
|
+
"exit"
|
|
188
|
+
]
|
|
189
|
+
},
|
|
190
|
+
"linear": {
|
|
191
|
+
"value": "cubic-bezier(0, 0, 1, 1)",
|
|
192
|
+
"type": "cubicBezier",
|
|
193
|
+
"description": "Constant-speed transitions with no acceleration or deceleration",
|
|
194
|
+
"filePath": "src/core/motion.json",
|
|
195
|
+
"isSource": true,
|
|
196
|
+
"original": {
|
|
197
|
+
"value": "cubic-bezier(0, 0, 1, 1)",
|
|
198
|
+
"type": "cubicBezier",
|
|
199
|
+
"description": "Constant-speed transitions with no acceleration or deceleration"
|
|
200
|
+
},
|
|
201
|
+
"name": "mds-motion-easing-linear",
|
|
202
|
+
"attributes": {
|
|
203
|
+
"category": "motion",
|
|
204
|
+
"type": "easing",
|
|
205
|
+
"item": "linear"
|
|
206
|
+
},
|
|
207
|
+
"path": [
|
|
208
|
+
"motion",
|
|
209
|
+
"easing",
|
|
210
|
+
"linear"
|
|
211
|
+
]
|
|
212
|
+
}
|
|
213
|
+
},
|
|
214
|
+
"delay": {
|
|
215
|
+
"none": {
|
|
216
|
+
"value": "0ms",
|
|
217
|
+
"type": "duration",
|
|
218
|
+
"description": "No intentional pause before animation starts",
|
|
219
|
+
"filePath": "src/core/motion.json",
|
|
220
|
+
"isSource": true,
|
|
221
|
+
"original": {
|
|
222
|
+
"value": "0ms",
|
|
223
|
+
"type": "duration",
|
|
224
|
+
"description": "No intentional pause before animation starts"
|
|
225
|
+
},
|
|
226
|
+
"name": "mds-motion-delay-none",
|
|
227
|
+
"attributes": {
|
|
228
|
+
"category": "motion",
|
|
229
|
+
"type": "delay",
|
|
230
|
+
"item": "none"
|
|
231
|
+
},
|
|
232
|
+
"path": [
|
|
233
|
+
"motion",
|
|
234
|
+
"delay",
|
|
235
|
+
"none"
|
|
236
|
+
]
|
|
237
|
+
},
|
|
238
|
+
"short": {
|
|
239
|
+
"value": "200ms",
|
|
240
|
+
"type": "duration",
|
|
241
|
+
"description": "Hover delay before tooltip appears",
|
|
242
|
+
"filePath": "src/core/motion.json",
|
|
243
|
+
"isSource": true,
|
|
244
|
+
"original": {
|
|
245
|
+
"value": "200ms",
|
|
246
|
+
"type": "duration",
|
|
247
|
+
"description": "Hover delay before tooltip appears"
|
|
248
|
+
},
|
|
249
|
+
"name": "mds-motion-delay-short",
|
|
250
|
+
"attributes": {
|
|
251
|
+
"category": "motion",
|
|
252
|
+
"type": "delay",
|
|
253
|
+
"item": "short"
|
|
254
|
+
},
|
|
255
|
+
"path": [
|
|
256
|
+
"motion",
|
|
257
|
+
"delay",
|
|
258
|
+
"short"
|
|
259
|
+
]
|
|
260
|
+
},
|
|
261
|
+
"medium": {
|
|
262
|
+
"value": "400ms",
|
|
263
|
+
"type": "duration",
|
|
264
|
+
"description": "Sequential reveals and debounced responses",
|
|
265
|
+
"filePath": "src/core/motion.json",
|
|
266
|
+
"isSource": true,
|
|
267
|
+
"original": {
|
|
268
|
+
"value": "400ms",
|
|
269
|
+
"type": "duration",
|
|
270
|
+
"description": "Sequential reveals and debounced responses"
|
|
271
|
+
},
|
|
272
|
+
"name": "mds-motion-delay-medium",
|
|
273
|
+
"attributes": {
|
|
274
|
+
"category": "motion",
|
|
275
|
+
"type": "delay",
|
|
276
|
+
"item": "medium"
|
|
277
|
+
},
|
|
278
|
+
"path": [
|
|
279
|
+
"motion",
|
|
280
|
+
"delay",
|
|
281
|
+
"medium"
|
|
282
|
+
]
|
|
283
|
+
},
|
|
284
|
+
"long": {
|
|
285
|
+
"value": "600ms",
|
|
286
|
+
"type": "duration",
|
|
287
|
+
"description": "Extended pause for complex sequential animations",
|
|
288
|
+
"filePath": "src/core/motion.json",
|
|
289
|
+
"isSource": true,
|
|
290
|
+
"original": {
|
|
291
|
+
"value": "600ms",
|
|
292
|
+
"type": "duration",
|
|
293
|
+
"description": "Extended pause for complex sequential animations"
|
|
294
|
+
},
|
|
295
|
+
"name": "mds-motion-delay-long",
|
|
296
|
+
"attributes": {
|
|
297
|
+
"category": "motion",
|
|
298
|
+
"type": "delay",
|
|
299
|
+
"item": "long"
|
|
300
|
+
},
|
|
301
|
+
"path": [
|
|
302
|
+
"motion",
|
|
303
|
+
"delay",
|
|
304
|
+
"long"
|
|
305
|
+
]
|
|
306
|
+
}
|
|
307
|
+
},
|
|
308
|
+
"stagger": {
|
|
309
|
+
"tight": {
|
|
310
|
+
"value": "30ms",
|
|
311
|
+
"type": "duration",
|
|
312
|
+
"description": "Delay between consecutive items — dropdown menu items",
|
|
313
|
+
"filePath": "src/core/motion.json",
|
|
314
|
+
"isSource": true,
|
|
315
|
+
"original": {
|
|
316
|
+
"value": "30ms",
|
|
317
|
+
"type": "duration",
|
|
318
|
+
"description": "Delay between consecutive items — dropdown menu items"
|
|
319
|
+
},
|
|
320
|
+
"name": "mds-motion-stagger-tight",
|
|
321
|
+
"attributes": {
|
|
322
|
+
"category": "motion",
|
|
323
|
+
"type": "stagger",
|
|
324
|
+
"item": "tight"
|
|
325
|
+
},
|
|
326
|
+
"path": [
|
|
327
|
+
"motion",
|
|
328
|
+
"stagger",
|
|
329
|
+
"tight"
|
|
330
|
+
]
|
|
331
|
+
},
|
|
332
|
+
"normal": {
|
|
333
|
+
"value": "60ms",
|
|
334
|
+
"type": "duration",
|
|
335
|
+
"description": "Delay between consecutive items — card grids",
|
|
336
|
+
"filePath": "src/core/motion.json",
|
|
337
|
+
"isSource": true,
|
|
338
|
+
"original": {
|
|
339
|
+
"value": "60ms",
|
|
340
|
+
"type": "duration",
|
|
341
|
+
"description": "Delay between consecutive items — card grids"
|
|
342
|
+
},
|
|
343
|
+
"name": "mds-motion-stagger-normal",
|
|
344
|
+
"attributes": {
|
|
345
|
+
"category": "motion",
|
|
346
|
+
"type": "stagger",
|
|
347
|
+
"item": "normal"
|
|
348
|
+
},
|
|
349
|
+
"path": [
|
|
350
|
+
"motion",
|
|
351
|
+
"stagger",
|
|
352
|
+
"normal"
|
|
353
|
+
]
|
|
354
|
+
},
|
|
355
|
+
"relaxed": {
|
|
356
|
+
"value": "100ms",
|
|
357
|
+
"type": "duration",
|
|
358
|
+
"description": "Delay between consecutive items — onboarding steps",
|
|
359
|
+
"filePath": "src/core/motion.json",
|
|
360
|
+
"isSource": true,
|
|
361
|
+
"original": {
|
|
362
|
+
"value": "100ms",
|
|
363
|
+
"type": "duration",
|
|
364
|
+
"description": "Delay between consecutive items — onboarding steps"
|
|
365
|
+
},
|
|
366
|
+
"name": "mds-motion-stagger-relaxed",
|
|
367
|
+
"attributes": {
|
|
368
|
+
"category": "motion",
|
|
369
|
+
"type": "stagger",
|
|
370
|
+
"item": "relaxed"
|
|
371
|
+
},
|
|
372
|
+
"path": [
|
|
373
|
+
"motion",
|
|
374
|
+
"stagger",
|
|
375
|
+
"relaxed"
|
|
376
|
+
]
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
},
|
|
380
|
+
"animation": {
|
|
381
|
+
"buttonBackground": {
|
|
382
|
+
"description": "Button background color transition on hover/press",
|
|
383
|
+
"type": "transition",
|
|
384
|
+
"properties": [
|
|
385
|
+
"background-color"
|
|
386
|
+
],
|
|
387
|
+
"duration": "100ms",
|
|
388
|
+
"easing": "cubic-bezier(0.44, 0, 0, 1)",
|
|
389
|
+
"delay": "0ms",
|
|
390
|
+
"value": "background-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms",
|
|
391
|
+
"filePath": "src/motion/animation.json",
|
|
392
|
+
"isSource": true,
|
|
393
|
+
"original": {
|
|
394
|
+
"description": "Button background color transition on hover/press",
|
|
395
|
+
"type": "transition",
|
|
396
|
+
"properties": [
|
|
397
|
+
"background-color"
|
|
398
|
+
],
|
|
399
|
+
"duration": "{motion.duration.instant}",
|
|
400
|
+
"easing": "{motion.easing.standard}",
|
|
401
|
+
"delay": "{motion.delay.none}",
|
|
402
|
+
"value": "background-color {motion.duration.instant} {motion.easing.standard} {motion.delay.none}"
|
|
403
|
+
},
|
|
404
|
+
"name": "mds-animation-button-background",
|
|
405
|
+
"attributes": {
|
|
406
|
+
"category": "animation",
|
|
407
|
+
"type": "buttonBackground"
|
|
408
|
+
},
|
|
409
|
+
"path": [
|
|
410
|
+
"animation",
|
|
411
|
+
"buttonBackground"
|
|
412
|
+
]
|
|
413
|
+
},
|
|
414
|
+
"buttonBorder": {
|
|
415
|
+
"description": "Button border and shadow transition on focus",
|
|
416
|
+
"type": "transition",
|
|
417
|
+
"properties": [
|
|
418
|
+
"border-color",
|
|
419
|
+
"box-shadow"
|
|
420
|
+
],
|
|
421
|
+
"duration": "100ms",
|
|
422
|
+
"easing": "cubic-bezier(0.44, 0, 0, 1)",
|
|
423
|
+
"delay": "0ms",
|
|
424
|
+
"value": "border-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, box-shadow 100ms cubic-bezier(0.44, 0, 0, 1) 0ms",
|
|
425
|
+
"filePath": "src/motion/animation.json",
|
|
426
|
+
"isSource": true,
|
|
427
|
+
"original": {
|
|
428
|
+
"description": "Button border and shadow transition on focus",
|
|
429
|
+
"type": "transition",
|
|
430
|
+
"properties": [
|
|
431
|
+
"border-color",
|
|
432
|
+
"box-shadow"
|
|
433
|
+
],
|
|
434
|
+
"duration": "{motion.duration.instant}",
|
|
435
|
+
"easing": "{motion.easing.standard}",
|
|
436
|
+
"delay": "{motion.delay.none}",
|
|
437
|
+
"value": "border-color {motion.duration.instant} {motion.easing.standard} {motion.delay.none}, box-shadow {motion.duration.instant} {motion.easing.standard} {motion.delay.none}"
|
|
438
|
+
},
|
|
439
|
+
"name": "mds-animation-button-border",
|
|
440
|
+
"attributes": {
|
|
441
|
+
"category": "animation",
|
|
442
|
+
"type": "buttonBorder"
|
|
443
|
+
},
|
|
444
|
+
"path": [
|
|
445
|
+
"animation",
|
|
446
|
+
"buttonBorder"
|
|
447
|
+
]
|
|
448
|
+
},
|
|
449
|
+
"buttonIcon": {
|
|
450
|
+
"description": "Button icon color and transform transition",
|
|
451
|
+
"type": "transition",
|
|
452
|
+
"properties": [
|
|
453
|
+
"color",
|
|
454
|
+
"transform"
|
|
455
|
+
],
|
|
456
|
+
"duration": "200ms",
|
|
457
|
+
"easing": "cubic-bezier(0.44, 0, 0, 1)",
|
|
458
|
+
"delay": "0ms",
|
|
459
|
+
"value": "color 200ms cubic-bezier(0.44, 0, 0, 1) 0ms, transform 200ms cubic-bezier(0.44, 0, 0, 1) 0ms",
|
|
460
|
+
"filePath": "src/motion/animation.json",
|
|
461
|
+
"isSource": true,
|
|
462
|
+
"original": {
|
|
463
|
+
"description": "Button icon color and transform transition",
|
|
464
|
+
"type": "transition",
|
|
465
|
+
"properties": [
|
|
466
|
+
"color",
|
|
467
|
+
"transform"
|
|
468
|
+
],
|
|
469
|
+
"duration": "{motion.duration.fast}",
|
|
470
|
+
"easing": "{motion.easing.standard}",
|
|
471
|
+
"delay": "{motion.delay.none}",
|
|
472
|
+
"value": "color {motion.duration.fast} {motion.easing.standard} {motion.delay.none}, transform {motion.duration.fast} {motion.easing.standard} {motion.delay.none}"
|
|
473
|
+
},
|
|
474
|
+
"name": "mds-animation-button-icon",
|
|
475
|
+
"attributes": {
|
|
476
|
+
"category": "animation",
|
|
477
|
+
"type": "buttonIcon"
|
|
478
|
+
},
|
|
479
|
+
"path": [
|
|
480
|
+
"animation",
|
|
481
|
+
"buttonIcon"
|
|
482
|
+
]
|
|
483
|
+
},
|
|
484
|
+
"buttonFocusRing": {
|
|
485
|
+
"description": "Button focus ring appearance",
|
|
486
|
+
"type": "transition",
|
|
487
|
+
"properties": [
|
|
488
|
+
"box-shadow",
|
|
489
|
+
"outline"
|
|
490
|
+
],
|
|
491
|
+
"duration": "100ms",
|
|
492
|
+
"easing": "cubic-bezier(0.44, 0, 0, 1)",
|
|
493
|
+
"delay": "0ms",
|
|
494
|
+
"value": "box-shadow 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, outline 100ms cubic-bezier(0.44, 0, 0, 1) 0ms",
|
|
495
|
+
"filePath": "src/motion/animation.json",
|
|
496
|
+
"isSource": true,
|
|
497
|
+
"original": {
|
|
498
|
+
"description": "Button focus ring appearance",
|
|
499
|
+
"type": "transition",
|
|
500
|
+
"properties": [
|
|
501
|
+
"box-shadow",
|
|
502
|
+
"outline"
|
|
503
|
+
],
|
|
504
|
+
"duration": "{motion.duration.instant}",
|
|
505
|
+
"easing": "{motion.easing.standard}",
|
|
506
|
+
"delay": "{motion.delay.none}",
|
|
507
|
+
"value": "box-shadow {motion.duration.instant} {motion.easing.standard} {motion.delay.none}, outline {motion.duration.instant} {motion.easing.standard} {motion.delay.none}"
|
|
508
|
+
},
|
|
509
|
+
"name": "mds-animation-button-focus-ring",
|
|
510
|
+
"attributes": {
|
|
511
|
+
"category": "animation",
|
|
512
|
+
"type": "buttonFocusRing"
|
|
513
|
+
},
|
|
514
|
+
"path": [
|
|
515
|
+
"animation",
|
|
516
|
+
"buttonFocusRing"
|
|
517
|
+
]
|
|
518
|
+
},
|
|
519
|
+
"buttonPress": {
|
|
520
|
+
"description": "Button press effect combining background and icon transitions",
|
|
521
|
+
"type": "transitionCompound",
|
|
522
|
+
"animations": [
|
|
523
|
+
"buttonBackground",
|
|
524
|
+
"buttonIcon"
|
|
525
|
+
],
|
|
526
|
+
"composition": "parallel",
|
|
527
|
+
"value": "background-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, color 200ms cubic-bezier(0.44, 0, 0, 1) 0ms, transform 200ms cubic-bezier(0.44, 0, 0, 1) 0ms",
|
|
528
|
+
"filePath": "src/motion/animation.json",
|
|
529
|
+
"isSource": true,
|
|
530
|
+
"original": {
|
|
531
|
+
"description": "Button press effect combining background and icon transitions",
|
|
532
|
+
"type": "transitionCompound",
|
|
533
|
+
"animations": [
|
|
534
|
+
"buttonBackground",
|
|
535
|
+
"buttonIcon"
|
|
536
|
+
],
|
|
537
|
+
"composition": "parallel",
|
|
538
|
+
"value": "background-color {motion.duration.instant} {motion.easing.standard} {motion.delay.none}, color {motion.duration.fast} {motion.easing.standard} {motion.delay.none}, transform {motion.duration.fast} {motion.easing.standard} {motion.delay.none}"
|
|
539
|
+
},
|
|
540
|
+
"name": "mds-animation-button-press",
|
|
541
|
+
"attributes": {
|
|
542
|
+
"category": "animation",
|
|
543
|
+
"type": "buttonPress"
|
|
544
|
+
},
|
|
545
|
+
"path": [
|
|
546
|
+
"animation",
|
|
547
|
+
"buttonPress"
|
|
548
|
+
]
|
|
549
|
+
},
|
|
550
|
+
"buttonHover": {
|
|
551
|
+
"description": "Button hover effect combining background and border transitions",
|
|
552
|
+
"type": "transitionCompound",
|
|
553
|
+
"animations": [
|
|
554
|
+
"buttonBackground",
|
|
555
|
+
"buttonBorder"
|
|
556
|
+
],
|
|
557
|
+
"composition": "parallel",
|
|
558
|
+
"value": "background-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, border-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, box-shadow 100ms cubic-bezier(0.44, 0, 0, 1) 0ms",
|
|
559
|
+
"filePath": "src/motion/animation.json",
|
|
560
|
+
"isSource": true,
|
|
561
|
+
"original": {
|
|
562
|
+
"description": "Button hover effect combining background and border transitions",
|
|
563
|
+
"type": "transitionCompound",
|
|
564
|
+
"animations": [
|
|
565
|
+
"buttonBackground",
|
|
566
|
+
"buttonBorder"
|
|
567
|
+
],
|
|
568
|
+
"composition": "parallel",
|
|
569
|
+
"value": "background-color {motion.duration.instant} {motion.easing.standard} {motion.delay.none}, border-color {motion.duration.instant} {motion.easing.standard} {motion.delay.none}, box-shadow {motion.duration.instant} {motion.easing.standard} {motion.delay.none}"
|
|
570
|
+
},
|
|
571
|
+
"name": "mds-animation-button-hover",
|
|
572
|
+
"attributes": {
|
|
573
|
+
"category": "animation",
|
|
574
|
+
"type": "buttonHover"
|
|
575
|
+
},
|
|
576
|
+
"path": [
|
|
577
|
+
"animation",
|
|
578
|
+
"buttonHover"
|
|
579
|
+
]
|
|
580
|
+
},
|
|
581
|
+
"buttonLoadingSpin": {
|
|
582
|
+
"description": "Button loading spinner - continuous rotation for button loading states",
|
|
583
|
+
"type": "keyframe",
|
|
584
|
+
"keyframes": [
|
|
585
|
+
{
|
|
586
|
+
"propertyName": "transform",
|
|
587
|
+
"from": "rotate(0deg)",
|
|
588
|
+
"to": "rotate(360deg)"
|
|
589
|
+
}
|
|
590
|
+
],
|
|
591
|
+
"duration": "600ms",
|
|
592
|
+
"easing": "cubic-bezier(0, 0, 1, 1)",
|
|
593
|
+
"delay": "0ms",
|
|
594
|
+
"iterationCount": "infinite",
|
|
595
|
+
"value": "600ms cubic-bezier(0, 0, 1, 1) 0ms infinite mds-animation-button-loading-spin",
|
|
596
|
+
"filePath": "src/motion/animation.json",
|
|
597
|
+
"isSource": true,
|
|
598
|
+
"original": {
|
|
599
|
+
"description": "Button loading spinner - continuous rotation for button loading states",
|
|
600
|
+
"type": "keyframe",
|
|
601
|
+
"keyframes": [
|
|
602
|
+
{
|
|
603
|
+
"propertyName": "transform",
|
|
604
|
+
"from": "rotate(0deg)",
|
|
605
|
+
"to": "rotate(360deg)"
|
|
606
|
+
}
|
|
607
|
+
],
|
|
608
|
+
"duration": "{motion.duration.slow}",
|
|
609
|
+
"easing": "{motion.easing.linear}",
|
|
610
|
+
"delay": "{motion.delay.none}",
|
|
611
|
+
"iterationCount": "infinite",
|
|
612
|
+
"value": "{motion.duration.slow} {motion.easing.linear} {motion.delay.none} infinite mds-animation-button-loading-spin"
|
|
613
|
+
},
|
|
614
|
+
"name": "mds-animation-button-loading-spin",
|
|
615
|
+
"attributes": {
|
|
616
|
+
"category": "animation",
|
|
617
|
+
"type": "buttonLoadingSpin"
|
|
618
|
+
},
|
|
619
|
+
"path": [
|
|
620
|
+
"animation",
|
|
621
|
+
"buttonLoadingSpin"
|
|
622
|
+
]
|
|
623
|
+
},
|
|
624
|
+
"buttonLoadingPulse": {
|
|
625
|
+
"description": "Button loading pulse - opacity animation for button skeleton/loading state",
|
|
626
|
+
"type": "keyframe",
|
|
627
|
+
"keyframes": [
|
|
628
|
+
{
|
|
629
|
+
"propertyName": "opacity",
|
|
630
|
+
"from": "1",
|
|
631
|
+
"to": "0.4"
|
|
632
|
+
}
|
|
633
|
+
],
|
|
634
|
+
"duration": "600ms",
|
|
635
|
+
"easing": "cubic-bezier(0.44, 0, 0, 1)",
|
|
636
|
+
"delay": "0ms",
|
|
637
|
+
"iterationCount": "infinite",
|
|
638
|
+
"value": "600ms cubic-bezier(0.44, 0, 0, 1) 0ms infinite mds-animation-button-loading-pulse",
|
|
639
|
+
"filePath": "src/motion/animation.json",
|
|
640
|
+
"isSource": true,
|
|
641
|
+
"original": {
|
|
642
|
+
"description": "Button loading pulse - opacity animation for button skeleton/loading state",
|
|
643
|
+
"type": "keyframe",
|
|
644
|
+
"keyframes": [
|
|
645
|
+
{
|
|
646
|
+
"propertyName": "opacity",
|
|
647
|
+
"from": "1",
|
|
648
|
+
"to": "0.4"
|
|
649
|
+
}
|
|
650
|
+
],
|
|
651
|
+
"duration": "{motion.duration.slow}",
|
|
652
|
+
"easing": "{motion.easing.standard}",
|
|
653
|
+
"delay": "{motion.delay.none}",
|
|
654
|
+
"iterationCount": "infinite",
|
|
655
|
+
"value": "{motion.duration.slow} {motion.easing.standard} {motion.delay.none} infinite mds-animation-button-loading-pulse"
|
|
656
|
+
},
|
|
657
|
+
"name": "mds-animation-button-loading-pulse",
|
|
658
|
+
"attributes": {
|
|
659
|
+
"category": "animation",
|
|
660
|
+
"type": "buttonLoadingPulse"
|
|
661
|
+
},
|
|
662
|
+
"path": [
|
|
663
|
+
"animation",
|
|
664
|
+
"buttonLoadingPulse"
|
|
665
|
+
]
|
|
666
|
+
},
|
|
667
|
+
"buttonLoadingSpinPulse": {
|
|
668
|
+
"description": "Button loading state combining spin and pulse keyframe animations",
|
|
669
|
+
"type": "keyframeCompound",
|
|
670
|
+
"animations": [
|
|
671
|
+
"buttonLoadingSpin",
|
|
672
|
+
"buttonLoadingPulse"
|
|
673
|
+
],
|
|
674
|
+
"composition": "parallel",
|
|
675
|
+
"value": "600ms cubic-bezier(0, 0, 1, 1) 0ms infinite mds-animation-button-loading-spin, 600ms cubic-bezier(0.44, 0, 0, 1) 0ms infinite mds-animation-button-loading-pulse",
|
|
676
|
+
"filePath": "src/motion/animation.json",
|
|
677
|
+
"isSource": true,
|
|
678
|
+
"original": {
|
|
679
|
+
"description": "Button loading state combining spin and pulse keyframe animations",
|
|
680
|
+
"type": "keyframeCompound",
|
|
681
|
+
"animations": [
|
|
682
|
+
"buttonLoadingSpin",
|
|
683
|
+
"buttonLoadingPulse"
|
|
684
|
+
],
|
|
685
|
+
"composition": "parallel",
|
|
686
|
+
"value": "{motion.duration.slow} {motion.easing.linear} {motion.delay.none} infinite mds-animation-button-loading-spin, {motion.duration.slow} {motion.easing.standard} {motion.delay.none} infinite mds-animation-button-loading-pulse"
|
|
687
|
+
},
|
|
688
|
+
"name": "mds-animation-button-loading-spin-pulse",
|
|
689
|
+
"attributes": {
|
|
690
|
+
"category": "animation",
|
|
691
|
+
"type": "buttonLoadingSpinPulse"
|
|
692
|
+
},
|
|
693
|
+
"path": [
|
|
694
|
+
"animation",
|
|
695
|
+
"buttonLoadingSpinPulse"
|
|
696
|
+
]
|
|
697
|
+
},
|
|
698
|
+
"checkboxDefault": {
|
|
699
|
+
"description": "Checkbox default transition applied in all states (e.g. background-color, border-color)",
|
|
700
|
+
"type": "transition",
|
|
701
|
+
"properties": [
|
|
702
|
+
"background-color",
|
|
703
|
+
"border-color"
|
|
704
|
+
],
|
|
705
|
+
"duration": "100ms",
|
|
706
|
+
"easing": "cubic-bezier(0.44, 0, 0, 1)",
|
|
707
|
+
"delay": "0ms",
|
|
708
|
+
"value": "background-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, border-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms",
|
|
709
|
+
"filePath": "src/motion/animation.json",
|
|
710
|
+
"isSource": true,
|
|
711
|
+
"original": {
|
|
712
|
+
"description": "Checkbox default transition applied in all states (e.g. background-color, border-color)",
|
|
713
|
+
"type": "transition",
|
|
714
|
+
"properties": [
|
|
715
|
+
"background-color",
|
|
716
|
+
"border-color"
|
|
717
|
+
],
|
|
718
|
+
"duration": "{motion.duration.instant}",
|
|
719
|
+
"easing": "{motion.easing.standard}",
|
|
720
|
+
"delay": "{motion.delay.none}",
|
|
721
|
+
"value": "background-color {motion.duration.instant} {motion.easing.standard} {motion.delay.none}, border-color {motion.duration.instant} {motion.easing.standard} {motion.delay.none}"
|
|
722
|
+
},
|
|
723
|
+
"name": "mds-animation-checkbox-default",
|
|
724
|
+
"attributes": {
|
|
725
|
+
"category": "animation",
|
|
726
|
+
"type": "checkboxDefault"
|
|
727
|
+
},
|
|
728
|
+
"path": [
|
|
729
|
+
"animation",
|
|
730
|
+
"checkboxDefault"
|
|
731
|
+
]
|
|
732
|
+
},
|
|
733
|
+
"checkboxChecked": {
|
|
734
|
+
"description": "Checkbox checked state animation — scale-in effect applied when the checkbox becomes checked",
|
|
735
|
+
"type": "keyframe",
|
|
736
|
+
"keyframes": [
|
|
737
|
+
{
|
|
738
|
+
"propertyName": "transform",
|
|
739
|
+
"from": "scale(0.8)",
|
|
740
|
+
"to": "scale(1)"
|
|
741
|
+
}
|
|
742
|
+
],
|
|
743
|
+
"duration": "200ms",
|
|
744
|
+
"easing": "cubic-bezier(0.44, 0, 0, 1)",
|
|
745
|
+
"delay": "0ms",
|
|
746
|
+
"value": "200ms cubic-bezier(0.44, 0, 0, 1) 0ms mds-animation-checkbox-checked",
|
|
747
|
+
"filePath": "src/motion/animation.json",
|
|
748
|
+
"isSource": true,
|
|
749
|
+
"original": {
|
|
750
|
+
"description": "Checkbox checked state animation — scale-in effect applied when the checkbox becomes checked",
|
|
751
|
+
"type": "keyframe",
|
|
752
|
+
"keyframes": [
|
|
753
|
+
{
|
|
754
|
+
"propertyName": "transform",
|
|
755
|
+
"from": "scale(0.8)",
|
|
756
|
+
"to": "scale(1)"
|
|
757
|
+
}
|
|
758
|
+
],
|
|
759
|
+
"duration": "{motion.duration.fast}",
|
|
760
|
+
"easing": "{motion.easing.standard}",
|
|
761
|
+
"delay": "{motion.delay.none}",
|
|
762
|
+
"value": "{motion.duration.fast} {motion.easing.standard} {motion.delay.none} mds-animation-checkbox-checked"
|
|
763
|
+
},
|
|
764
|
+
"name": "mds-animation-checkbox-checked",
|
|
765
|
+
"attributes": {
|
|
766
|
+
"category": "animation",
|
|
767
|
+
"type": "checkboxChecked"
|
|
768
|
+
},
|
|
769
|
+
"path": [
|
|
770
|
+
"animation",
|
|
771
|
+
"checkboxChecked"
|
|
772
|
+
]
|
|
773
|
+
},
|
|
774
|
+
"checkboxCheckedIcon": {
|
|
775
|
+
"description": "Checkmark icon draw-in animation when the checkbox becomes checked",
|
|
776
|
+
"type": "keyframe",
|
|
777
|
+
"keyframes": [
|
|
778
|
+
{
|
|
779
|
+
"propertyName": "opacity",
|
|
780
|
+
"from": "0",
|
|
781
|
+
"to": "1"
|
|
782
|
+
}
|
|
783
|
+
],
|
|
784
|
+
"duration": "200ms",
|
|
785
|
+
"easing": "cubic-bezier(0.44, 0, 0, 1)",
|
|
786
|
+
"delay": "0ms",
|
|
787
|
+
"value": "200ms cubic-bezier(0.44, 0, 0, 1) 0ms mds-animation-checkbox-checked-icon",
|
|
788
|
+
"filePath": "src/motion/animation.json",
|
|
789
|
+
"isSource": true,
|
|
790
|
+
"original": {
|
|
791
|
+
"description": "Checkmark icon draw-in animation when the checkbox becomes checked",
|
|
792
|
+
"type": "keyframe",
|
|
793
|
+
"keyframes": [
|
|
794
|
+
{
|
|
795
|
+
"propertyName": "opacity",
|
|
796
|
+
"from": "0",
|
|
797
|
+
"to": "1"
|
|
798
|
+
}
|
|
799
|
+
],
|
|
800
|
+
"duration": "{motion.duration.fast}",
|
|
801
|
+
"easing": "{motion.easing.standard}",
|
|
802
|
+
"delay": "{motion.delay.none}",
|
|
803
|
+
"value": "{motion.duration.fast} {motion.easing.standard} {motion.delay.none} mds-animation-checkbox-checked-icon"
|
|
804
|
+
},
|
|
805
|
+
"name": "mds-animation-checkbox-checked-icon",
|
|
806
|
+
"attributes": {
|
|
807
|
+
"category": "animation",
|
|
808
|
+
"type": "checkboxCheckedIcon"
|
|
809
|
+
},
|
|
810
|
+
"path": [
|
|
811
|
+
"animation",
|
|
812
|
+
"checkboxCheckedIcon"
|
|
813
|
+
]
|
|
814
|
+
}
|
|
815
|
+
}
|
|
816
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"motion": {
|
|
3
|
+
"duration": {
|
|
4
|
+
"instant": "100ms",
|
|
5
|
+
"fast": "200ms",
|
|
6
|
+
"normal": "300ms",
|
|
7
|
+
"relaxed": "450ms",
|
|
8
|
+
"slow": "600ms"
|
|
9
|
+
},
|
|
10
|
+
"easing": {
|
|
11
|
+
"standard": "cubic-bezier(0.44, 0, 0, 1)",
|
|
12
|
+
"entrance": "cubic-bezier(0, 0, 0.2, 1)",
|
|
13
|
+
"exit": "cubic-bezier(0.5, 0, 1, 1)",
|
|
14
|
+
"linear": "cubic-bezier(0, 0, 1, 1)"
|
|
15
|
+
},
|
|
16
|
+
"delay": {
|
|
17
|
+
"none": "0ms",
|
|
18
|
+
"short": "200ms",
|
|
19
|
+
"medium": "400ms",
|
|
20
|
+
"long": "600ms"
|
|
21
|
+
},
|
|
22
|
+
"stagger": {
|
|
23
|
+
"tight": "30ms",
|
|
24
|
+
"normal": "60ms",
|
|
25
|
+
"relaxed": "100ms"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
"animation": {
|
|
29
|
+
"buttonBackground": "background-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms",
|
|
30
|
+
"buttonBorder": "border-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, box-shadow 100ms cubic-bezier(0.44, 0, 0, 1) 0ms",
|
|
31
|
+
"buttonIcon": "color 200ms cubic-bezier(0.44, 0, 0, 1) 0ms, transform 200ms cubic-bezier(0.44, 0, 0, 1) 0ms",
|
|
32
|
+
"buttonFocusRing": "box-shadow 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, outline 100ms cubic-bezier(0.44, 0, 0, 1) 0ms",
|
|
33
|
+
"buttonPress": "background-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, color 200ms cubic-bezier(0.44, 0, 0, 1) 0ms, transform 200ms cubic-bezier(0.44, 0, 0, 1) 0ms",
|
|
34
|
+
"buttonHover": "background-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, border-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, box-shadow 100ms cubic-bezier(0.44, 0, 0, 1) 0ms",
|
|
35
|
+
"buttonLoadingSpin": "600ms cubic-bezier(0, 0, 1, 1) 0ms infinite mds-animation-button-loading-spin",
|
|
36
|
+
"buttonLoadingPulse": "600ms cubic-bezier(0.44, 0, 0, 1) 0ms infinite mds-animation-button-loading-pulse",
|
|
37
|
+
"buttonLoadingSpinPulse": "600ms cubic-bezier(0, 0, 1, 1) 0ms infinite mds-animation-button-loading-spin, 600ms cubic-bezier(0.44, 0, 0, 1) 0ms infinite mds-animation-button-loading-pulse",
|
|
38
|
+
"checkboxDefault": "background-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, border-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms",
|
|
39
|
+
"checkboxChecked": "200ms cubic-bezier(0.44, 0, 0, 1) 0ms mds-animation-checkbox-checked",
|
|
40
|
+
"checkboxCheckedIcon": "200ms cubic-bezier(0.44, 0, 0, 1) 0ms mds-animation-checkbox-checked-icon"
|
|
41
|
+
}
|
|
42
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@keyframes mds-animation-button-loading-spin {
|
|
6
|
+
from { transform: rotate(0deg); }
|
|
7
|
+
to { transform: rotate(360deg); }
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@keyframes mds-animation-button-loading-pulse {
|
|
11
|
+
from { opacity: 1; }
|
|
12
|
+
to { opacity: 0.4; }
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@keyframes mds-animation-checkbox-checked {
|
|
16
|
+
from { transform: scale(0.8); }
|
|
17
|
+
to { transform: scale(1); }
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@keyframes mds-animation-checkbox-checked-icon {
|
|
21
|
+
from { opacity: 0; }
|
|
22
|
+
to { opacity: 1; }
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
$mds-transition-button-background: background-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms;
|
|
26
|
+
$mds-transition-button-border: border-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, box-shadow 100ms cubic-bezier(0.44, 0, 0, 1) 0ms;
|
|
27
|
+
$mds-transition-button-icon: color 200ms cubic-bezier(0.44, 0, 0, 1) 0ms, transform 200ms cubic-bezier(0.44, 0, 0, 1) 0ms;
|
|
28
|
+
$mds-transition-button-focus-ring: box-shadow 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, outline 100ms cubic-bezier(0.44, 0, 0, 1) 0ms;
|
|
29
|
+
$mds-transition-button-press: background-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, color 200ms cubic-bezier(0.44, 0, 0, 1) 0ms, transform 200ms cubic-bezier(0.44, 0, 0, 1) 0ms;
|
|
30
|
+
$mds-transition-button-hover: background-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, border-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, box-shadow 100ms cubic-bezier(0.44, 0, 0, 1) 0ms;
|
|
31
|
+
$mds-animation-button-loading-spin: 600ms cubic-bezier(0, 0, 1, 1) 0ms infinite mds-animation-button-loading-spin;
|
|
32
|
+
$mds-animation-button-loading-pulse: 600ms cubic-bezier(0.44, 0, 0, 1) 0ms infinite mds-animation-button-loading-pulse;
|
|
33
|
+
$mds-animation-button-loading-spin-pulse: 600ms cubic-bezier(0, 0, 1, 1) 0ms infinite mds-animation-button-loading-spin, 600ms cubic-bezier(0.44, 0, 0, 1) 0ms infinite mds-animation-button-loading-pulse;
|
|
34
|
+
$mds-transition-checkbox-default: background-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms, border-color 100ms cubic-bezier(0.44, 0, 0, 1) 0ms;
|
|
35
|
+
$mds-animation-checkbox-checked: 200ms cubic-bezier(0.44, 0, 0, 1) 0ms mds-animation-checkbox-checked;
|
|
36
|
+
$mds-animation-checkbox-checked-icon: 200ms cubic-bezier(0.44, 0, 0, 1) 0ms mds-animation-checkbox-checked-icon;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@momentum-design/tokens",
|
|
3
3
|
"packageManager": "yarn@3.2.4",
|
|
4
|
-
"version": "0.10.
|
|
4
|
+
"version": "0.10.4",
|
|
5
5
|
"files": [
|
|
6
6
|
"./dist/"
|
|
7
7
|
],
|
|
@@ -9,11 +9,12 @@
|
|
|
9
9
|
"analyze": "yarn analyze:prebuild && yarn analyze:postbuild",
|
|
10
10
|
"analyze:postbuild": "echo \"script 'analyze:postbuild' has not been implemented\"",
|
|
11
11
|
"analyze:prebuild": "echo \"script 'analyze:prebuild' has not been implemented\"",
|
|
12
|
-
"build": "yarn build:core && yarn build:additionalthemes && yarn build:typography && yarn build:elevation && yarn build:motion && yarn build:components",
|
|
12
|
+
"build": "yarn build:core && yarn build:additionalthemes && yarn build:typography && yarn build:elevation && yarn build:motion && yarn build:animation && yarn build:components",
|
|
13
13
|
"build:core": "md-token-builder --config ./config/tokens/core.json --input ./src --output ./dist",
|
|
14
14
|
"build:typography": "md-token-builder --config ./config/tokens/typography.json --input ./src --output ./dist",
|
|
15
15
|
"build:elevation": "md-token-builder --config ./config/tokens/elevation.json --input ./src --output ./dist",
|
|
16
16
|
"build:motion": "md-token-builder --config ./config/tokens/motion.json --input ./src --output ./dist",
|
|
17
|
+
"build:animation": "md-token-builder --config ./config/tokens/animation.json --input ./src --output ./dist",
|
|
17
18
|
"build:additionalthemes": "md-token-builder --config ./config/tokens/additional-themes.json --input ./src --output ./dist",
|
|
18
19
|
"build:components": "node ./scripts/build-components-css.js",
|
|
19
20
|
"clean": "yarn clean:dist",
|