@patternfly/design-tokens 1.13.0 → 1.13.1

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 (14) 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 +17 -14
  4. package/build/css/tokens-default.scss +12 -6
  5. package/build/css/tokens-palette.scss +1 -1
  6. package/package.json +1 -1
  7. package/patternfly-docs/content/token-layers-dark.json +4033 -2456
  8. package/patternfly-docs/content/token-layers-default.json +3361 -1828
  9. package/tokens/dark/base.dark.json +46 -42
  10. package/tokens/dark/semantic.dark.json +19 -9
  11. package/tokens/default/base.dimension.json +3 -3
  12. package/tokens/default/base.json +4 -0
  13. package/tokens/default/semantic.dimension.json +28 -11
  14. package/tokens/default/semantic.json +10 -0
package/tokens/dark/base.dark.json CHANGED
@@ -79,44 +79,6 @@
79
79
  "value": "{color.yellow.20}"
80
80
  }
81
81
  },
82
- "severity": {
83
- "undefined": {
84
- "100": {
85
- "type": "color",
86
- "value": "{color.gray.40}"
87
- }
88
- },
89
- "none": {
90
- "100": {
91
- "type": "color",
92
- "value": "{color.blue.30}"
93
- }
94
- },
95
- "minor": {
96
- "100": {
97
- "type": "color",
98
- "value": "{color.gray.30}"
99
- }
100
- },
101
- "moderate": {
102
- "100": {
103
- "type": "color",
104
- "value": "{color.yellow.30}"
105
- }
106
- },
107
- "important": {
108
- "100": {
109
- "type": "color",
110
- "value": "{color.orange.40}"
111
- }
112
- },
113
- "critical": {
114
- "100": {
115
- "type": "color",
116
- "value": "{color.red-orange.50}"
117
- }
118
- }
119
- },
120
82
  "status": {
121
83
  "success": {
122
84
  "100": {
@@ -177,6 +139,44 @@
177
139
  }
178
140
  }
179
141
  },
142
+ "severity": {
143
+ "undefined": {
144
+ "100": {
145
+ "type": "color",
146
+ "value": "{color.gray.40}"
147
+ }
148
+ },
149
+ "none": {
150
+ "100": {
151
+ "type": "color",
152
+ "value": "{color.blue.30}"
153
+ }
154
+ },
155
+ "minor": {
156
+ "100": {
157
+ "type": "color",
158
+ "value": "{color.gray.30}"
159
+ }
160
+ },
161
+ "moderate": {
162
+ "100": {
163
+ "type": "color",
164
+ "value": "{color.yellow.30}"
165
+ }
166
+ },
167
+ "important": {
168
+ "100": {
169
+ "type": "color",
170
+ "value": "{color.orange.40}"
171
+ }
172
+ },
173
+ "critical": {
174
+ "100": {
175
+ "type": "color",
176
+ "value": "{color.red-orange.50}"
177
+ }
178
+ }
179
+ },
180
180
  "nonstatus": {
181
181
  "red": {
182
182
  "100": {
@@ -293,21 +293,25 @@
293
293
  "gray": {
294
294
  "100": {
295
295
  "type": "color",
296
- "value": "{color.gray.30}"
296
+ "value": "{color.gray.60}"
297
297
  },
298
298
  "200": {
299
299
  "type": "color",
300
- "value": "{color.gray.20}"
300
+ "value": "{color.gray.50}"
301
301
  },
302
302
  "300": {
303
303
  "type": "color",
304
- "value": "{color.gray.10}"
304
+ "value": "{color.gray.40}"
305
305
  }
306
306
  }
307
307
  }
308
308
  },
309
309
  "border": {
310
310
  "color": {
311
+ "50": {
312
+ "type": "color",
313
+ "value": "{color.gray.60}"
314
+ },
311
315
  "100": {
312
316
  "type": "color",
313
317
  "value": "{color.gray.50}"
@@ -322,7 +326,7 @@
322
326
  "color": {
323
327
  "100": {
324
328
  "type": "color",
325
- "value": "{color.gray.10}"
329
+ "value": "{color.white}"
326
330
  },
327
331
  "200": {
328
332
  "type": "color",
package/tokens/dark/semantic.dark.json CHANGED
@@ -90,6 +90,10 @@
90
90
  "description": "Use as the default background for control elements like form inputs and menu toggles.",
91
91
  "type": "color",
92
92
  "value": "{global.dark.background.color.300}"
93
+ },
94
+ "read-only": {
95
+ "type": "color",
96
+ "value": "{global.dark.background.color.300}"
93
97
  }
94
98
  },
95
99
  "highlight": {
@@ -922,17 +926,17 @@
922
926
  "default": {
923
927
  "description": "Use as the default color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.",
924
928
  "type": "color",
925
- "value": "{global.icon.color.inverse}"
929
+ "value": "{global.icon.color.regular}"
926
930
  },
927
931
  "hover": {
928
932
  "description": "Use as the hover state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.",
929
933
  "type": "color",
930
- "value": "{global.icon.color.inverse}"
934
+ "value": "{global.icon.color.regular}"
931
935
  },
932
936
  "clicked": {
933
937
  "description": "Use as the clicked state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.",
934
938
  "type": "color",
935
- "value": "{global.icon.color.inverse}"
939
+ "value": "{global.icon.color.regular}"
936
940
  }
937
941
  }
938
942
  }
@@ -940,6 +944,12 @@
940
944
  },
941
945
  "border": {
942
946
  "color": {
947
+ "control": {
948
+ "read-only": {
949
+ "type": "color",
950
+ "value": "{global.dark.border.color.50}"
951
+ }
952
+ },
943
953
  "brand": {
944
954
  "default": {
945
955
  "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
@@ -1215,17 +1225,17 @@
1215
1225
  "default": {
1216
1226
  "description": "Use as the default border color for any element that does not convey status and that you always will want to be gray (i.e. color-coded labels)",
1217
1227
  "type": "color",
1218
- "value": "{global.dark.color.nonstatus.gray.100}"
1228
+ "value": "{global.dark.color.nonstatus.gray.200}"
1219
1229
  },
1220
1230
  "hover": {
1221
1231
  "description": "Use as the hover state border color for any element that does not convey status and that you always will want to be gray (i.e. color-coded labels)",
1222
1232
  "type": "color",
1223
- "value": "{global.dark.color.nonstatus.gray.200}"
1233
+ "value": "{global.dark.color.nonstatus.gray.300}"
1224
1234
  },
1225
1235
  "clicked": {
1226
1236
  "description": "Use as the clicked state border color for any element that does not convey status and that you always will want to be gray (i.e. color-coded labels)",
1227
1237
  "type": "color",
1228
- "value": "{global.dark.color.nonstatus.gray.200}"
1238
+ "value": "{global.dark.color.nonstatus.gray.300}"
1229
1239
  }
1230
1240
  }
1231
1241
  }
@@ -1667,17 +1677,17 @@
1667
1677
  "default": {
1668
1678
  "description": "Use as the default color for text that is placed on a nonstatus gray background color.",
1669
1679
  "type": "color",
1670
- "value": "{global.text.color.inverse}"
1680
+ "value": "{global.text.color.regular}"
1671
1681
  },
1672
1682
  "hover": {
1673
1683
  "description": "Use as the hover state color for text that is placed on a nonstatus gray background color.",
1674
1684
  "type": "color",
1675
- "value": "{global.text.color.inverse}"
1685
+ "value": "{global.text.color.regular}"
1676
1686
  },
1677
1687
  "clicked": {
1678
1688
  "description": "Use as the clicked state color for text that is placed on a nonstatus gray background color.",
1679
1689
  "type": "color",
1680
- "value": "{global.text.color.inverse}"
1690
+ "value": "{global.text.color.regular}"
1681
1691
  }
1682
1692
  }
1683
1693
  }
package/tokens/default/base.dimension.json CHANGED
@@ -51,7 +51,7 @@
51
51
  },
52
52
  "300": {
53
53
  "type": "number",
54
- "value": 22
54
+ "value": 24
55
55
  },
56
56
  "400": {
57
57
  "type": "number",
@@ -117,7 +117,7 @@
117
117
  },
118
118
  "300": {
119
119
  "type": "number",
120
- "value": 700
120
+ "value": 500
121
121
  },
122
122
  "400": {
123
123
  "type": "number",
@@ -157,7 +157,7 @@
157
157
  },
158
158
  "600": {
159
159
  "type": "number",
160
- "value": 22
160
+ "value": 24
161
161
  },
162
162
  "700": {
163
163
  "type": "number",
package/tokens/default/base.json CHANGED
@@ -307,6 +307,10 @@
307
307
  },
308
308
  "border": {
309
309
  "color": {
310
+ "50": {
311
+ "type": "color",
312
+ "value": "{color.gray.20}"
313
+ },
310
314
  "100": {
311
315
  "type": "color",
312
316
  "value": "{color.gray.30}"
package/tokens/default/semantic.dimension.json CHANGED
@@ -35,11 +35,6 @@
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
- },
43
38
  "divider": {
44
39
  "default": {
45
40
  "description": "Use as the default border width for dividers.",
@@ -57,6 +52,11 @@
57
52
  "value": "{global.border.width.100}"
58
53
  }
59
54
  },
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",
@@ -256,6 +256,11 @@
256
256
  "description": "Use to space an element, like an icon or badge, inline with text",
257
257
  "type": "number",
258
258
  "value": "{global.spacer.sm}"
259
+ },
260
+ "compact": {
261
+ "description": "Use to space an element, like an icon or badge, inline with text",
262
+ "type": "number",
263
+ "value": "{global.spacer.xs}"
259
264
  }
260
265
  },
261
266
  "control-to-control": {
@@ -279,14 +284,26 @@
279
284
  },
280
285
  "group-to-group": {
281
286
  "horizontal": {
282
- "description": "Use to set the horizontal space between groups of elements, like between multiple action groups or forms groups placed in a horizontal layout.",
283
- "type": "number",
284
- "value": "{global.spacer.2xl}"
287
+ "default": {
288
+ "description": "Use to set the horizontal space between groups of elements, like between multiple action groups or forms groups placed in a horizontal layout.",
289
+ "type": "number",
290
+ "value": "{global.spacer.2xl}"
291
+ },
292
+ "compact": {
293
+ "type": "number",
294
+ "value": "{global.spacer.sm}"
295
+ }
285
296
  },
286
297
  "vertical": {
287
- "description": "Use to set the vertical space between groups of elements, like between stacked form groups.",
288
- "type": "number",
289
- "value": "{global.spacer.lg}"
298
+ "default": {
299
+ "description": "Use to set the vertical space between groups of elements, like between stacked form groups.",
300
+ "type": "number",
301
+ "value": "{global.spacer.lg}"
302
+ },
303
+ "compact": {
304
+ "type": "number",
305
+ "value": "{global.spacer.md}"
306
+ }
290
307
  }
291
308
  },
292
309
  "action-to-action": {
package/tokens/default/semantic.json CHANGED
@@ -90,6 +90,10 @@
90
90
  "description": "Use as the default background for control elements like form inputs and menu toggles.",
91
91
  "type": "color",
92
92
  "value": "{global.background.color.primary.default}"
93
+ },
94
+ "read-only": {
95
+ "type": "color",
96
+ "value": "{global.background.color.200}"
93
97
  }
94
98
  },
95
99
  "highlight": {
@@ -940,6 +944,12 @@
940
944
  },
941
945
  "border": {
942
946
  "color": {
947
+ "control": {
948
+ "read-only": {
949
+ "type": "color",
950
+ "value": "{global.border.color.50}"
951
+ }
952
+ },
943
953
  "brand": {
944
954
  "default": {
945
955
  "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",