@patternfly/design-tokens 1.14.1 → 1.14.3
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.
- package/build/css/tokens-charts-dark.scss +1 -1
- package/build/css/tokens-charts.scss +1 -1
- package/build/css/tokens-dark.scss +3 -1
- package/build/css/tokens-default.scss +14 -6
- package/build/css/tokens-highcontrast-dark.scss +6 -4
- package/build/css/tokens-highcontrast.scss +277 -4
- package/build/css/tokens-palette.scss +1 -1
- package/build.js +5 -2
- package/package.json +1 -1
- package/patternfly-docs/content/token-layers-dark.json +977 -598
- package/patternfly-docs/content/token-layers-default.json +678 -353
- package/plugins/export-patternfly-tokens/dist/ui.html +48 -27
- package/plugins/export-patternfly-tokens/src/ui.tsx +50 -26
- package/tokens/dark/base.dark.json +46 -42
- package/tokens/dark/charts.dark.json +8 -8
- package/tokens/dark/semantic.dark.json +6 -0
- package/tokens/default/base.json +1 -1
- package/tokens/default/charts.json +8 -8
- package/tokens/default/semantic.dimension.json +59 -22
- package/tokens/default/semantic.json +6 -0
- package/tokens/default/semantic.motion.json +22 -22
- package/tokens/highcontrast/base.dimension.json +387 -0
- package/tokens/highcontrast/base.json +1 -1
- package/tokens/highcontrast/semantic.dimension.highcontrast.json +1061 -0
- package/tokens/highcontrast/semantic.highcontrast.json +8 -2
- package/tokens/highcontrast-dark/base.dark.json +46 -42
- package/tokens/highcontrast-dark/semantic.highcontrast.dark.json +8 -2
|
@@ -22,57 +22,81 @@ const saveVars = (text, setJsonFiles, setZipFile) => {
|
|
|
22
22
|
let saveFolderNames = [];
|
|
23
23
|
|
|
24
24
|
switch (splitFileName) {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
// Color palette
|
|
26
|
+
case '/* Color Palette.Mode 1.tokens.json */':
|
|
27
|
+
saveFileName = 'palette.color.json';
|
|
28
|
+
saveFolderNames = ['default', 'dark', 'highcontrast', 'highcontrast-dark'];
|
|
28
29
|
break;
|
|
30
|
+
|
|
31
|
+
// Base tokens
|
|
32
|
+
// Base color
|
|
29
33
|
case '/* Base Color Tokens - Light.Value.tokens.json */':
|
|
30
34
|
saveFileName = 'base.json';
|
|
31
35
|
saveFolderNames = ['default', 'highcontrast'];
|
|
32
36
|
break;
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
37
|
+
// Base color - dark
|
|
38
|
+
case '/* Base Color Tokens - Dark.Mode 1.tokens.json */':
|
|
39
|
+
saveFileName = 'base.dark.json';
|
|
40
|
+
saveFolderNames = ['dark', 'highcontrast-dark'];
|
|
36
41
|
break;
|
|
37
|
-
|
|
38
|
-
|
|
42
|
+
// Base dimension
|
|
43
|
+
case '/* Base Dimension Tokens.Mode 1.tokens.json */':
|
|
44
|
+
saveFileName = 'base.dimension.json';
|
|
45
|
+
saveFolderNames = ['default', 'highcontrast'];
|
|
46
|
+
break;
|
|
47
|
+
// Base motion
|
|
48
|
+
case '/* Base Motion Tokens.Mode 1.tokens.json */':
|
|
49
|
+
saveFileName = 'base.motion.json';
|
|
39
50
|
saveFolderNames = ['default'];
|
|
40
51
|
break;
|
|
52
|
+
|
|
53
|
+
// Semantic tokens
|
|
54
|
+
// Semantic color
|
|
41
55
|
case '/* Semantic Color Tokens.Light.tokens.json */':
|
|
42
56
|
saveFileName = 'semantic.json';
|
|
43
57
|
saveFolderNames = ['default'];
|
|
44
58
|
break;
|
|
45
|
-
|
|
46
|
-
saveFileName = 'base.dark.json';
|
|
47
|
-
saveFolderNames = ['dark', 'highcontrast-dark'];
|
|
48
|
-
break;
|
|
59
|
+
// Semantic color - dark
|
|
49
60
|
case '/* Semantic Color Tokens.Dark.tokens.json */':
|
|
50
61
|
saveFileName = 'semantic.dark.json';
|
|
51
62
|
saveFolderNames = ['dark'];
|
|
52
63
|
break;
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
64
|
+
// Semantic color - high contrast
|
|
65
|
+
case '/* Semantic Color Tokens.Light - High Contrast.tokens.json */':
|
|
66
|
+
saveFileName = 'semantic.highcontrast.json';
|
|
67
|
+
saveFolderNames = ['highcontrast'];
|
|
56
68
|
break;
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
69
|
+
// Semantic color - high contrast - dark
|
|
70
|
+
case '/* Semantic Color Tokens.Dark - High Contrast.tokens.json */':
|
|
71
|
+
saveFileName = 'semantic.highcontrast.dark.json';
|
|
72
|
+
saveFolderNames = ['highcontrast-dark'];
|
|
60
73
|
break;
|
|
61
|
-
|
|
62
|
-
|
|
74
|
+
// Semantic dimension
|
|
75
|
+
case ('/* Semantic Dimension Tokens.Default.tokens.json */'):
|
|
76
|
+
saveFileName = 'semantic.dimension.json';
|
|
63
77
|
saveFolderNames = ['default'];
|
|
64
78
|
break;
|
|
79
|
+
// Semantic dimension - high contrast
|
|
80
|
+
case '/* Semantic Dimension Tokens.High Contrast.tokens.json */':
|
|
81
|
+
saveFileName = 'semantic.dimension.highcontrast.json';
|
|
82
|
+
saveFolderNames = ['highcontrast'];
|
|
83
|
+
break;
|
|
84
|
+
// Semantic motion
|
|
65
85
|
case '/* Semantic Motion Tokens.Mode 1.tokens.json */':
|
|
66
86
|
saveFileName = 'semantic.motion.json';
|
|
67
87
|
saveFolderNames = ['default'];
|
|
68
88
|
break;
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
89
|
+
|
|
90
|
+
// Charts tokens
|
|
91
|
+
// Charts
|
|
92
|
+
case '/* Charts.Light.tokens.json */':
|
|
93
|
+
saveFileName = 'charts.json';
|
|
94
|
+
saveFolderNames = ['default'];
|
|
72
95
|
break;
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
96
|
+
// Charts - dark
|
|
97
|
+
case '/* Charts.Dark.tokens.json */':
|
|
98
|
+
saveFileName = 'charts.dark.json';
|
|
99
|
+
saveFolderNames = ['dark'];
|
|
76
100
|
break;
|
|
77
101
|
default:
|
|
78
102
|
saveFileName = splitFiles[i].split('\n', 1)[0];
|
|
@@ -87,6 +87,48 @@
|
|
|
87
87
|
"value": "{color.yellow.20}"
|
|
88
88
|
}
|
|
89
89
|
},
|
|
90
|
+
"severity": {
|
|
91
|
+
"undefined": {
|
|
92
|
+
"100": {
|
|
93
|
+
"type": "color",
|
|
94
|
+
"value": "{color.gray.40}"
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
"none": {
|
|
98
|
+
"100": {
|
|
99
|
+
"type": "color",
|
|
100
|
+
"value": "{color.blue.30}"
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
"minor": {
|
|
104
|
+
"100": {
|
|
105
|
+
"type": "color",
|
|
106
|
+
"value": "{color.gray.30}"
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
"moderate": {
|
|
110
|
+
"100": {
|
|
111
|
+
"type": "color",
|
|
112
|
+
"value": "{color.yellow.30}"
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
"important": {
|
|
116
|
+
"100": {
|
|
117
|
+
"type": "color",
|
|
118
|
+
"value": "{color.orange.40}"
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
"critical": {
|
|
122
|
+
"100": {
|
|
123
|
+
"type": "color",
|
|
124
|
+
"value": "{color.red-orange.50}"
|
|
125
|
+
},
|
|
126
|
+
"200": {
|
|
127
|
+
"type": "color",
|
|
128
|
+
"value": "{color.red-orange.40}"
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
},
|
|
90
132
|
"status": {
|
|
91
133
|
"success": {
|
|
92
134
|
"100": {
|
|
@@ -159,48 +201,6 @@
|
|
|
159
201
|
}
|
|
160
202
|
}
|
|
161
203
|
},
|
|
162
|
-
"severity": {
|
|
163
|
-
"undefined": {
|
|
164
|
-
"100": {
|
|
165
|
-
"type": "color",
|
|
166
|
-
"value": "{color.gray.40}"
|
|
167
|
-
}
|
|
168
|
-
},
|
|
169
|
-
"none": {
|
|
170
|
-
"100": {
|
|
171
|
-
"type": "color",
|
|
172
|
-
"value": "{color.blue.30}"
|
|
173
|
-
}
|
|
174
|
-
},
|
|
175
|
-
"minor": {
|
|
176
|
-
"100": {
|
|
177
|
-
"type": "color",
|
|
178
|
-
"value": "{color.gray.30}"
|
|
179
|
-
}
|
|
180
|
-
},
|
|
181
|
-
"moderate": {
|
|
182
|
-
"100": {
|
|
183
|
-
"type": "color",
|
|
184
|
-
"value": "{color.yellow.30}"
|
|
185
|
-
}
|
|
186
|
-
},
|
|
187
|
-
"important": {
|
|
188
|
-
"100": {
|
|
189
|
-
"type": "color",
|
|
190
|
-
"value": "{color.orange.40}"
|
|
191
|
-
}
|
|
192
|
-
},
|
|
193
|
-
"critical": {
|
|
194
|
-
"100": {
|
|
195
|
-
"type": "color",
|
|
196
|
-
"value": "{color.red-orange.50}"
|
|
197
|
-
},
|
|
198
|
-
"200": {
|
|
199
|
-
"type": "color",
|
|
200
|
-
"value": "{color.red-orange.40}"
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
|
-
},
|
|
204
204
|
"nonstatus": {
|
|
205
205
|
"red": {
|
|
206
206
|
"100": {
|
|
@@ -347,6 +347,10 @@
|
|
|
347
347
|
"200": {
|
|
348
348
|
"type": "color",
|
|
349
349
|
"value": "{color.gray.40}"
|
|
350
|
+
},
|
|
351
|
+
"300": {
|
|
352
|
+
"type": "color",
|
|
353
|
+
"value": "{color.gray.30}"
|
|
350
354
|
}
|
|
351
355
|
}
|
|
352
356
|
},
|
|
@@ -270,6 +270,10 @@
|
|
|
270
270
|
}
|
|
271
271
|
}
|
|
272
272
|
},
|
|
273
|
+
"letter-spacing": {
|
|
274
|
+
"type": "string",
|
|
275
|
+
"value": "normal"
|
|
276
|
+
},
|
|
273
277
|
"FontSize": {
|
|
274
278
|
"xs": {
|
|
275
279
|
"type": "number",
|
|
@@ -288,10 +292,6 @@
|
|
|
288
292
|
"value": 22
|
|
289
293
|
}
|
|
290
294
|
},
|
|
291
|
-
"letter-spacing": {
|
|
292
|
-
"type": "string",
|
|
293
|
-
"value": "normal"
|
|
294
|
-
},
|
|
295
295
|
"layout": {
|
|
296
296
|
"padding": {
|
|
297
297
|
"type": "number",
|
|
@@ -306,6 +306,10 @@
|
|
|
306
306
|
"value": 450
|
|
307
307
|
}
|
|
308
308
|
},
|
|
309
|
+
"stroke-line-cap": {
|
|
310
|
+
"type": "string",
|
|
311
|
+
"value": "round"
|
|
312
|
+
},
|
|
309
313
|
"label": {
|
|
310
314
|
"padding": {
|
|
311
315
|
"type": "number",
|
|
@@ -332,10 +336,6 @@
|
|
|
332
336
|
"value": "{color.white}"
|
|
333
337
|
}
|
|
334
338
|
},
|
|
335
|
-
"stroke-line-cap": {
|
|
336
|
-
"type": "string",
|
|
337
|
-
"value": "round"
|
|
338
|
-
},
|
|
339
339
|
"stroke-line-join": {
|
|
340
340
|
"type": "string",
|
|
341
341
|
"value": "round"
|
|
@@ -1105,6 +1105,12 @@
|
|
|
1105
1105
|
"type": "color",
|
|
1106
1106
|
"value": "{global.dark.border.color.200}"
|
|
1107
1107
|
},
|
|
1108
|
+
"main": {
|
|
1109
|
+
"default": {
|
|
1110
|
+
"type": "color",
|
|
1111
|
+
"value": "{global.background.color.primary.default}"
|
|
1112
|
+
}
|
|
1113
|
+
},
|
|
1108
1114
|
"nonstatus": {
|
|
1109
1115
|
"red": {
|
|
1110
1116
|
"default": {
|
package/tokens/default/base.json
CHANGED
|
@@ -270,6 +270,10 @@
|
|
|
270
270
|
}
|
|
271
271
|
}
|
|
272
272
|
},
|
|
273
|
+
"letter-spacing": {
|
|
274
|
+
"type": "string",
|
|
275
|
+
"value": "normal"
|
|
276
|
+
},
|
|
273
277
|
"FontSize": {
|
|
274
278
|
"xs": {
|
|
275
279
|
"type": "number",
|
|
@@ -288,10 +292,6 @@
|
|
|
288
292
|
"value": 22
|
|
289
293
|
}
|
|
290
294
|
},
|
|
291
|
-
"letter-spacing": {
|
|
292
|
-
"type": "string",
|
|
293
|
-
"value": "normal"
|
|
294
|
-
},
|
|
295
295
|
"layout": {
|
|
296
296
|
"padding": {
|
|
297
297
|
"type": "number",
|
|
@@ -306,6 +306,10 @@
|
|
|
306
306
|
"value": 450
|
|
307
307
|
}
|
|
308
308
|
},
|
|
309
|
+
"stroke-line-cap": {
|
|
310
|
+
"type": "string",
|
|
311
|
+
"value": "round"
|
|
312
|
+
},
|
|
309
313
|
"label": {
|
|
310
314
|
"padding": {
|
|
311
315
|
"type": "number",
|
|
@@ -332,10 +336,6 @@
|
|
|
332
336
|
"value": "{color.gray.90}"
|
|
333
337
|
}
|
|
334
338
|
},
|
|
335
|
-
"stroke-line-cap": {
|
|
336
|
-
"type": "string",
|
|
337
|
-
"value": "round"
|
|
338
|
-
},
|
|
339
339
|
"stroke-line-join": {
|
|
340
340
|
"type": "string",
|
|
341
341
|
"value": "round"
|
|
@@ -35,6 +35,11 @@
|
|
|
35
35
|
}
|
|
36
36
|
},
|
|
37
37
|
"width": {
|
|
38
|
+
"regular": {
|
|
39
|
+
"description": "Use as the default border width for elements.",
|
|
40
|
+
"type": "number",
|
|
41
|
+
"value": "{global.border.width.100}"
|
|
42
|
+
},
|
|
38
43
|
"divider": {
|
|
39
44
|
"default": {
|
|
40
45
|
"description": "Use as the default border width for dividers.",
|
|
@@ -52,11 +57,6 @@
|
|
|
52
57
|
"value": "{global.border.width.100}"
|
|
53
58
|
}
|
|
54
59
|
},
|
|
55
|
-
"regular": {
|
|
56
|
-
"description": "Use as the default border width for elements.",
|
|
57
|
-
"type": "number",
|
|
58
|
-
"value": "{global.border.width.100}"
|
|
59
|
-
},
|
|
60
60
|
"strong": {
|
|
61
61
|
"description": "Use as a stronger/wider border width for elements.",
|
|
62
62
|
"type": "number",
|
|
@@ -67,6 +67,26 @@
|
|
|
67
67
|
"type": "number",
|
|
68
68
|
"value": "{global.border.width.300}"
|
|
69
69
|
},
|
|
70
|
+
"main": {
|
|
71
|
+
"default": {
|
|
72
|
+
"type": "number",
|
|
73
|
+
"value": "{global.border.width.400}"
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
"high-contrast": {
|
|
77
|
+
"regular": {
|
|
78
|
+
"type": "number",
|
|
79
|
+
"value": 0
|
|
80
|
+
},
|
|
81
|
+
"strong": {
|
|
82
|
+
"type": "number",
|
|
83
|
+
"value": 0
|
|
84
|
+
},
|
|
85
|
+
"extra-strong": {
|
|
86
|
+
"type": "number",
|
|
87
|
+
"value": 0
|
|
88
|
+
}
|
|
89
|
+
},
|
|
70
90
|
"box": {
|
|
71
91
|
"default": {
|
|
72
92
|
"description": "Use as the default border width for containers like cards, panels, code editors, etc.",
|
|
@@ -111,6 +131,23 @@
|
|
|
111
131
|
"description": "Use as the clicked state border width for actions like secondary and tertiary buttons",
|
|
112
132
|
"type": "number",
|
|
113
133
|
"value": "{global.border.width.200}"
|
|
134
|
+
},
|
|
135
|
+
"plain": {
|
|
136
|
+
"default": {
|
|
137
|
+
"description": "Use as the default border width for actions like secondary and tertiary buttons",
|
|
138
|
+
"type": "number",
|
|
139
|
+
"value": 0
|
|
140
|
+
},
|
|
141
|
+
"hover": {
|
|
142
|
+
"description": "Use as the hover state border width for actions like secondary and tertiary buttons",
|
|
143
|
+
"type": "number",
|
|
144
|
+
"value": 0
|
|
145
|
+
},
|
|
146
|
+
"clicked": {
|
|
147
|
+
"description": "Use as the clicked state border width for actions like secondary and tertiary buttons",
|
|
148
|
+
"type": "number",
|
|
149
|
+
"value": 0
|
|
150
|
+
}
|
|
114
151
|
}
|
|
115
152
|
},
|
|
116
153
|
"control": {
|
|
@@ -359,6 +396,11 @@
|
|
|
359
396
|
"type": "number",
|
|
360
397
|
"value": "{global.icon.size.400}"
|
|
361
398
|
},
|
|
399
|
+
"3xl": {
|
|
400
|
+
"description": "Use for triple extra large icons.",
|
|
401
|
+
"type": "number",
|
|
402
|
+
"value": "{global.icon.size.500}"
|
|
403
|
+
},
|
|
362
404
|
"font": {
|
|
363
405
|
"body": {
|
|
364
406
|
"sm": {
|
|
@@ -449,15 +491,22 @@
|
|
|
449
491
|
"type": "number",
|
|
450
492
|
"value": "{global.font.size.4xl}"
|
|
451
493
|
}
|
|
452
|
-
},
|
|
453
|
-
"3xl": {
|
|
454
|
-
"description": "Use for triple extra large icons.",
|
|
455
|
-
"type": "number",
|
|
456
|
-
"value": "{global.icon.size.500}"
|
|
457
494
|
}
|
|
458
495
|
}
|
|
459
496
|
},
|
|
460
497
|
"font": {
|
|
498
|
+
"line-height": {
|
|
499
|
+
"body": {
|
|
500
|
+
"description": "Use to define the line height for body text",
|
|
501
|
+
"type": "number",
|
|
502
|
+
"value": "{global.font.line-height.200}"
|
|
503
|
+
},
|
|
504
|
+
"heading": {
|
|
505
|
+
"description": "Use to define the line height for heading text",
|
|
506
|
+
"type": "number",
|
|
507
|
+
"value": "{global.font.line-height.100}"
|
|
508
|
+
}
|
|
509
|
+
},
|
|
461
510
|
"weight": {
|
|
462
511
|
"body": {
|
|
463
512
|
"default": {
|
|
@@ -484,18 +533,6 @@
|
|
|
484
533
|
}
|
|
485
534
|
}
|
|
486
535
|
},
|
|
487
|
-
"line-height": {
|
|
488
|
-
"body": {
|
|
489
|
-
"description": "Use to define the line height for body text",
|
|
490
|
-
"type": "number",
|
|
491
|
-
"value": "{global.font.line-height.200}"
|
|
492
|
-
},
|
|
493
|
-
"heading": {
|
|
494
|
-
"description": "Use to define the line height for heading text",
|
|
495
|
-
"type": "number",
|
|
496
|
-
"value": "{global.font.line-height.100}"
|
|
497
|
-
}
|
|
498
|
-
},
|
|
499
536
|
"family": {
|
|
500
537
|
"body": {
|
|
501
538
|
"description": "Use to define the font family for body text",
|
|
@@ -1105,6 +1105,12 @@
|
|
|
1105
1105
|
"type": "color",
|
|
1106
1106
|
"value": "{global.border.color.300}"
|
|
1107
1107
|
},
|
|
1108
|
+
"main": {
|
|
1109
|
+
"default": {
|
|
1110
|
+
"type": "color",
|
|
1111
|
+
"value": "{global.background.color.primary.default}"
|
|
1112
|
+
}
|
|
1113
|
+
},
|
|
1108
1114
|
"nonstatus": {
|
|
1109
1115
|
"red": {
|
|
1110
1116
|
"default": {
|
|
@@ -38,70 +38,70 @@
|
|
|
38
38
|
"type": "number",
|
|
39
39
|
"value": "{global.duration.600}"
|
|
40
40
|
},
|
|
41
|
-
"slide-
|
|
41
|
+
"slide-out": {
|
|
42
42
|
"short": {
|
|
43
|
-
"description": "Use for a
|
|
43
|
+
"description": "Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.",
|
|
44
44
|
"type": "number",
|
|
45
45
|
"value": "{global.motion.duration.lg}"
|
|
46
46
|
},
|
|
47
47
|
"default": {
|
|
48
|
-
"description": "Use
|
|
48
|
+
"description": "Use as the default duration of a slide-out animation, which moves an element out of the viewport.",
|
|
49
49
|
"type": "number",
|
|
50
50
|
"value": "{global.motion.duration.xl}"
|
|
51
51
|
},
|
|
52
52
|
"long": {
|
|
53
|
-
"description": "Use for a longer duration of a slide-
|
|
53
|
+
"description": "Use for a longer duration of a slide-out animation, which moves an element out of the viewport.",
|
|
54
54
|
"type": "number",
|
|
55
55
|
"value": "{global.motion.duration.2xl}"
|
|
56
56
|
}
|
|
57
57
|
},
|
|
58
|
-
"
|
|
58
|
+
"icon": {
|
|
59
59
|
"short": {
|
|
60
|
-
"description": "Use a short
|
|
60
|
+
"description": "Use a short duration on an icon that requires a fast/snappy transition. Used to define the speed at which an icon may animate. Used on a notification badge(stateful button).",
|
|
61
61
|
"type": "number",
|
|
62
|
-
"value": "{global.motion.duration.
|
|
62
|
+
"value": "{global.motion.duration.xs}"
|
|
63
63
|
},
|
|
64
64
|
"default": {
|
|
65
|
-
"description": "Use a default
|
|
65
|
+
"description": "Use a default duration on an icon that requires a moderately timed transition. Used to define the speed at which an icon may animate. Used on a favoriting star(icon button).",
|
|
66
66
|
"type": "number",
|
|
67
|
-
"value": "{global.motion.duration.
|
|
67
|
+
"value": "{global.motion.duration.sm}"
|
|
68
68
|
},
|
|
69
69
|
"long": {
|
|
70
|
-
"description": "Use a long
|
|
70
|
+
"description": "Use a long duration on an icon that requires a slow transition. Used to define the speed at which an icon may animate. Used on the settings cog icon(plain menu toggle).",
|
|
71
71
|
"type": "number",
|
|
72
|
-
"value": "{global.motion.duration.
|
|
72
|
+
"value": "{global.motion.duration.md}"
|
|
73
73
|
}
|
|
74
74
|
},
|
|
75
|
-
"
|
|
75
|
+
"fade": {
|
|
76
76
|
"short": {
|
|
77
|
-
"description": "Use a short
|
|
77
|
+
"description": "Use a short/quick fade to transition color and/or opacity. Useful for fading in one or more elements. Short fades are used for small elements traveling short distances. Used in small interactions like buttons.",
|
|
78
78
|
"type": "number",
|
|
79
|
-
"value": "{global.motion.duration.
|
|
79
|
+
"value": "{global.motion.duration.sm}"
|
|
80
80
|
},
|
|
81
81
|
"default": {
|
|
82
|
-
"description": "Use a default
|
|
82
|
+
"description": "Use a default fade to transition color and/or opacity. Useful for fading in one or more elements. Default fades are used for medium sized elements traveling medium distances. Used on alerts.",
|
|
83
83
|
"type": "number",
|
|
84
|
-
"value": "{global.motion.duration.
|
|
84
|
+
"value": "{global.motion.duration.md}"
|
|
85
85
|
},
|
|
86
86
|
"long": {
|
|
87
|
-
"description": "Use a long
|
|
87
|
+
"description": "Use a long fade to transition color and/or opacity. Useful for fading in one or more elements. Long fades are used for large elements traveling long distances.",
|
|
88
88
|
"type": "number",
|
|
89
|
-
"value": "{global.motion.duration.
|
|
89
|
+
"value": "{global.motion.duration.lg}"
|
|
90
90
|
}
|
|
91
91
|
},
|
|
92
|
-
"slide-
|
|
92
|
+
"slide-in": {
|
|
93
93
|
"short": {
|
|
94
|
-
"description": "Use for a
|
|
94
|
+
"description": "Use for a short duration of a slide-in animation, which moves an offscreen element into the viewport.",
|
|
95
95
|
"type": "number",
|
|
96
96
|
"value": "{global.motion.duration.lg}"
|
|
97
97
|
},
|
|
98
98
|
"default": {
|
|
99
|
-
"description": "Use
|
|
99
|
+
"description": "Use for a default duration of a slide-in animation, which moves an offscreen element into the viewport.",
|
|
100
100
|
"type": "number",
|
|
101
101
|
"value": "{global.motion.duration.xl}"
|
|
102
102
|
},
|
|
103
103
|
"long": {
|
|
104
|
-
"description": "Use for a longer duration of a slide-
|
|
104
|
+
"description": "Use for a longer duration of a slide-in animation, which moves an offscreen element into the viewport.",
|
|
105
105
|
"type": "number",
|
|
106
106
|
"value": "{global.motion.duration.2xl}"
|
|
107
107
|
}
|