@patternfly/design-tokens 1.14.1 → 1.14.2

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 (24) hide show
  1. package/build/css/tokens-charts-dark.scss +1 -1
  2. package/build/css/tokens-charts.scss +1 -1
  3. package/build/css/tokens-dark.scss +2 -1
  4. package/build/css/tokens-default.scss +8 -2
  5. package/build/css/tokens-highcontrast-dark.scss +5 -4
  6. package/build/css/tokens-highcontrast.scss +275 -4
  7. package/build/css/tokens-palette.scss +1 -1
  8. package/package.json +1 -1
  9. package/patternfly-docs/content/token-layers-dark.json +848 -627
  10. package/patternfly-docs/content/token-layers-default.json +469 -298
  11. package/plugins/export-patternfly-tokens/dist/ui.html +48 -27
  12. package/plugins/export-patternfly-tokens/src/ui.tsx +50 -26
  13. package/tokens/dark/base.dark.json +46 -42
  14. package/tokens/dark/charts.dark.json +4 -4
  15. package/tokens/default/base.json +1 -1
  16. package/tokens/default/charts.json +4 -4
  17. package/tokens/default/semantic.dimension.json +41 -10
  18. package/tokens/default/semantic.motion.json +25 -25
  19. package/tokens/highcontrast/base.dimension.json +387 -0
  20. package/tokens/highcontrast/base.json +1 -1
  21. package/tokens/highcontrast/semantic.dimension.highcontrast.json +1055 -0
  22. package/tokens/highcontrast/semantic.highcontrast.json +2 -2
  23. package/tokens/highcontrast-dark/base.dark.json +46 -42
  24. package/tokens/highcontrast-dark/semantic.highcontrast.dark.json +2 -2
package/plugins/export-patternfly-tokens/src/ui.tsx CHANGED
@@ -22,57 +22,81 @@ const saveVars = (text, setJsonFiles, setZipFile) => {
22
22
  let saveFolderNames = [];
23
23
 
24
24
  switch (splitFileName) {
25
- case '/* Base Dimension Tokens.Mode 1.tokens.json */':
26
- saveFileName = 'base.dimension.json';
27
- saveFolderNames = ['default'];
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
- case '/* Color Palette.Mode 1.tokens.json */':
34
- saveFileName = 'palette.color.json';
35
- saveFolderNames = ['default', 'dark', 'highcontrast', 'highcontrast-dark'];
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
- case ('/* Semantic Dimension Tokens.Value.tokens.json */' || '/* Semantic Dimension Tokens.Mode 1.tokens.json */'):
38
- saveFileName = 'semantic.dimension.json';
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
- case '/* Base Color Tokens - Dark.Mode 1.tokens.json */':
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
- case '/* Charts.Light.tokens.json */':
54
- saveFileName = 'charts.json';
55
- saveFolderNames = ['default'];
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
- case '/* Charts.Dark.tokens.json */':
58
- saveFileName = 'charts.dark.json';
59
- saveFolderNames = ['dark'];
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
- case '/* Base Motion Tokens.Mode 1.tokens.json */':
62
- saveFileName = 'base.motion.json';
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
- case '/* Semantic Color Tokens.Light - High Contrast.tokens.json */':
70
- saveFileName = 'semantic.highcontrast.json';
71
- saveFolderNames = ['highcontrast'];
89
+
90
+ // Charts tokens
91
+ // Charts
92
+ case '/* Charts.Light.tokens.json */':
93
+ saveFileName = 'charts.json';
94
+ saveFolderNames = ['default'];
72
95
  break;
73
- case '/* Semantic Color Tokens.Dark - High Contrast.tokens.json */':
74
- saveFileName = 'semantic.highcontrast.dark.json';
75
- saveFolderNames = ['highcontrast-dark'];
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];
package/tokens/dark/base.dark.json CHANGED
@@ -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
  },
package/tokens/dark/charts.dark.json CHANGED
@@ -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"
package/tokens/default/base.json CHANGED
@@ -467,7 +467,7 @@
467
467
  "type": "color",
468
468
  "value": "{color.gray.50}"
469
469
  },
470
- "450": {
470
+ "400": {
471
471
  "type": "color",
472
472
  "value": "{color.gray.60}"
473
473
  }
package/tokens/default/charts.json CHANGED
@@ -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"
package/tokens/default/semantic.dimension.json CHANGED
@@ -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",
@@ -96,6 +96,20 @@
96
96
  }
97
97
  }
98
98
  },
99
+ "high-contrast": {
100
+ "regular": {
101
+ "type": "number",
102
+ "value": 0
103
+ },
104
+ "strong": {
105
+ "type": "number",
106
+ "value": 0
107
+ },
108
+ "extra-strong": {
109
+ "type": "number",
110
+ "value": 0
111
+ }
112
+ },
99
113
  "action": {
100
114
  "default": {
101
115
  "description": "Use as the default border width for actions like secondary and tertiary buttons",
@@ -111,6 +125,23 @@
111
125
  "description": "Use as the clicked state border width for actions like secondary and tertiary buttons",
112
126
  "type": "number",
113
127
  "value": "{global.border.width.200}"
128
+ },
129
+ "plain": {
130
+ "default": {
131
+ "description": "Use as the default border width for actions like secondary and tertiary buttons",
132
+ "type": "number",
133
+ "value": 0
134
+ },
135
+ "hover": {
136
+ "description": "Use as the hover state border width for actions like secondary and tertiary buttons",
137
+ "type": "number",
138
+ "value": 0
139
+ },
140
+ "clicked": {
141
+ "description": "Use as the clicked state border width for actions like secondary and tertiary buttons",
142
+ "type": "number",
143
+ "value": 0
144
+ }
114
145
  }
115
146
  },
116
147
  "control": {
@@ -359,6 +390,11 @@
359
390
  "type": "number",
360
391
  "value": "{global.icon.size.400}"
361
392
  },
393
+ "3xl": {
394
+ "description": "Use for triple extra large icons.",
395
+ "type": "number",
396
+ "value": "{global.icon.size.500}"
397
+ },
362
398
  "font": {
363
399
  "body": {
364
400
  "sm": {
@@ -449,11 +485,6 @@
449
485
  "type": "number",
450
486
  "value": "{global.font.size.4xl}"
451
487
  }
452
- },
453
- "3xl": {
454
- "description": "Use for triple extra large icons.",
455
- "type": "number",
456
- "value": "{global.icon.size.500}"
457
488
  }
458
489
  }
459
490
  },
package/tokens/default/semantic.motion.json CHANGED
@@ -38,70 +38,70 @@
38
38
  "type": "number",
39
39
  "value": "{global.duration.600}"
40
40
  },
41
- "slide-in": {
41
+ "icon": {
42
42
  "short": {
43
- "description": "Use for a short duration of a slide-in animation, which moves an offscreen element into the viewport.",
43
+ "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).",
44
44
  "type": "number",
45
- "value": "{global.motion.duration.lg}"
45
+ "value": "{global.motion.duration.xs}"
46
46
  },
47
47
  "default": {
48
- "description": "Use for a default duration of a slide-in animation, which moves an offscreen element into the viewport.",
48
+ "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).",
49
49
  "type": "number",
50
- "value": "{global.motion.duration.xl}"
50
+ "value": "{global.motion.duration.sm}"
51
51
  },
52
52
  "long": {
53
- "description": "Use for a longer duration of a slide-in animation, which moves an offscreen element into the viewport.",
53
+ "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).",
54
54
  "type": "number",
55
- "value": "{global.motion.duration.2xl}"
55
+ "value": "{global.motion.duration.md}"
56
56
  }
57
57
  },
58
- "fade": {
58
+ "slide-out": {
59
59
  "short": {
60
- "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.",
60
+ "description": "Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.",
61
61
  "type": "number",
62
- "value": "{global.motion.duration.sm}"
62
+ "value": "{global.motion.duration.lg}"
63
63
  },
64
64
  "default": {
65
- "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.",
65
+ "description": "Use as the default duration of a slide-out animation, which moves an element out of the viewport.",
66
66
  "type": "number",
67
- "value": "{global.motion.duration.md}"
67
+ "value": "{global.motion.duration.xl}"
68
68
  },
69
69
  "long": {
70
- "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.",
70
+ "description": "Use for a longer duration of a slide-out animation, which moves an element out of the viewport.",
71
71
  "type": "number",
72
- "value": "{global.motion.duration.lg}"
72
+ "value": "{global.motion.duration.2xl}"
73
73
  }
74
74
  },
75
- "icon": {
75
+ "fade": {
76
76
  "short": {
77
- "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).",
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.xs}"
79
+ "value": "{global.motion.duration.sm}"
80
80
  },
81
81
  "default": {
82
- "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).",
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.sm}"
84
+ "value": "{global.motion.duration.md}"
85
85
  },
86
86
  "long": {
87
- "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).",
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.md}"
89
+ "value": "{global.motion.duration.lg}"
90
90
  }
91
91
  },
92
- "slide-out": {
92
+ "slide-in": {
93
93
  "short": {
94
- "description": "Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.",
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 as the default duration of a slide-out animation, which moves an element out of the viewport.",
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-out animation, which moves an element out of the viewport.",
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
  }