@patternfly/design-tokens 1.7.0 → 1.9.0

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 (7) hide show
  1. package/build.js +1 -1
  2. package/package.json +1 -1
  3. package/plugins/export-patternfly-tokens/code.js +11 -3
  4. package/tokens/dark/semantic.dark.json +32 -8
  5. package/tokens/default/base.dimension.json +80 -0
  6. package/tokens/default/semantic.dimension.json +131 -39
  7. package/tokens/default/semantic.json +32 -8
package/build.js CHANGED
@@ -31,7 +31,7 @@ const build = (selector) => {
31
31
  token.attributes.type === 'icon' ||
32
32
  token.attributes.type === 'breakpoint' ||
33
33
  (token.attributes.type === 'box-shadow' && token.attributes.item !== 'color') ||
34
- token.attributes.type === 'font',
34
+ (token.attributes.type === 'font' && token.attributes.item === 'size'),
35
35
  transformer: (token) => `${token.value}px`
36
36
  });
37
37
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/design-tokens",
3
- "version": "1.7.0",
3
+ "version": "1.9.0",
4
4
  "description": "Define the design tokens for patternfly design system and component library",
5
5
  "main": "dist/esm/index.js",
6
6
  "module": "dist/esm/index.js",
package/plugins/export-patternfly-tokens/code.js CHANGED
@@ -43,8 +43,13 @@ function processCollection({ name, modes, variableIds }) {
43
43
  let file = { fileName: `${name}.${mode.name}.tokens.json`, body: {} };
44
44
 
45
45
  variableIds.forEach((variableId) => {
46
- const { name, resolvedType, valuesByMode } =
46
+ const { name, resolvedType, valuesByMode, description } =
47
47
  figma.variables.getVariableById(variableId);
48
+
49
+ if (name.includes("figma-only")) {
50
+ return; // Skip this variable
51
+ }
52
+
48
53
  const value = valuesByMode[mode.modeId];
49
54
 
50
55
  if (value !== undefined && ["COLOR", "FLOAT", "STRING"].includes(resolvedType)) {
@@ -53,8 +58,11 @@ function processCollection({ name, modes, variableIds }) {
53
58
  obj[groupName] = obj[groupName] || {};
54
59
  obj = obj[groupName];
55
60
  });
56
-
57
-
61
+
62
+ if (description) {
63
+ obj.description = description;
64
+ }
65
+
58
66
  if (value.type === "VARIABLE_ALIAS") {
59
67
  obj.$type = resolvedType === "COLOR" ? "color" : "number";
60
68
  obj.$value = `{${figma.variables
package/tokens/dark/semantic.dark.json CHANGED
@@ -5,42 +5,51 @@
5
5
  "color": {
6
6
  "primary": {
7
7
  "default": {
8
+ "description": "Use as the primary background color for UI content such as cards, page sections, and other content areas.",
8
9
  "type": "color",
9
10
  "value": "{global.dark.background.color.200}"
10
11
  },
11
12
  "hover": {
13
+ "description": "Use as the hover state for primary backgrounds",
12
14
  "type": "color",
13
15
  "value": "{global.dark.background.color.300}"
14
16
  },
15
17
  "clicked": {
18
+ "description": "Use as the selected state for primary backgrounds",
16
19
  "type": "color",
17
20
  "value": "{global.dark.background.color.300}"
18
21
  }
19
22
  },
20
23
  "secondary": {
21
24
  "default": {
25
+ "description": "Use as the secondary background color for UI content Use as the primary background color for UI content such as cards, page sections, and other content areas. Secondary background color is also used for our UI shell backgrounds (nav, masthead, etc).",
22
26
  "type": "color",
23
27
  "value": "{global.dark.background.color.100}"
24
28
  },
25
29
  "hover": {
30
+ "description": "Use as the hover state for secondary backgrounds",
26
31
  "type": "color",
27
32
  "value": "{global.dark.background.color.200}"
28
33
  },
29
34
  "clicked": {
35
+ "description": "Use as the selected state for secondary backgrounds",
30
36
  "type": "color",
31
37
  "value": "{global.dark.background.color.200}"
32
38
  }
33
39
  },
34
40
  "floating": {
35
41
  "default": {
42
+ "description": "Use as background color for components that show over top of other content such as toast alerts, menus, modals, overlay drawers, etc.",
36
43
  "type": "color",
37
44
  "value": "{global.dark.background.color.300}"
38
45
  },
39
46
  "hover": {
47
+ "description": "Use as the hover state for floating backgrounds",
40
48
  "type": "color",
41
49
  "value": "{global.dark.background.color.200}"
42
50
  },
43
51
  "clicked": {
52
+ "description": "Use as the selected state for floating backgrounds",
44
53
  "type": "color",
45
54
  "value": "{global.dark.background.color.200}"
46
55
  }
@@ -48,23 +57,28 @@
48
57
  "action": {
49
58
  "plain": {
50
59
  "default": {
60
+ "description": "Use as the default background for actions with transparent backgrounds such as menu items, accordion toggles, buttons, etc.",
51
61
  "type": "color",
52
62
  "value": "rgba(0, 0, 0, 0.0000)"
53
63
  },
54
64
  "hover": {
65
+ "description": "Use as the hover state for components that use the plain action default background.",
55
66
  "type": "color",
56
67
  "value": "{global.dark.background.color.600}"
57
68
  },
58
69
  "clicked": {
70
+ "description": "Use as the active/pressed state for components that use the plain action default background.",
59
71
  "type": "color",
60
72
  "value": "{global.dark.background.color.600}"
61
73
  },
62
74
  "alt": {
63
75
  "hover": {
76
+ "description": "Use as the hover state for components that use the plain action default background but are placed on a secondary background color (like left nav, horizontal nav, etc.)",
64
77
  "type": "color",
65
78
  "value": "{global.dark.background.color.200}"
66
79
  },
67
80
  "clicked": {
81
+ "description": "Use as the active/pressed state for components that use the plain action default background but are placed on a secondary background color (like left nav, horizontal nav, etc.)",
68
82
  "type": "color",
69
83
  "value": "{global.dark.background.color.200}"
70
84
  }
@@ -73,34 +87,40 @@
73
87
  },
74
88
  "control": {
75
89
  "default": {
90
+ "description": "Use as the default background for control elements like form inputs and menu toggles.",
76
91
  "type": "color",
77
92
  "value": "{global.dark.background.color.300}"
78
93
  }
79
94
  },
80
95
  "highlight": {
81
96
  "default": {
97
+ "description": "Use as the background color for highlighted elements",
82
98
  "type": "color",
83
99
  "value": "{global.dark.background.color.highlight.100}"
84
100
  },
85
101
  "clicked": {
102
+ "description": "Use as the active state for for highlighted elements",
86
103
  "type": "color",
87
104
  "value": "{global.dark.background.color.highlight.200}"
88
105
  }
89
106
  },
90
107
  "inverse": {
91
108
  "default": {
109
+ "description": "Use as the background color components with inversed backgrounds like tooltips.",
92
110
  "type": "color",
93
111
  "value": "{global.dark.background.color.400}"
94
112
  }
95
113
  },
96
114
  "disabled": {
97
115
  "default": {
116
+ "description": "Use as the background color for disabled components.",
98
117
  "type": "color",
99
118
  "value": "{global.dark.color.disabled.100}"
100
119
  }
101
120
  },
102
121
  "backdrop": {
103
122
  "default": {
123
+ "description": "Use as the background color for the backdrop component that shows beneath a modal/about modal/floating wizard etc.",
104
124
  "type": "color",
105
125
  "value": "{global.dark.background.color.500}"
106
126
  }
@@ -291,7 +311,7 @@
291
311
  "value": "{global.dark.color.nonstatus.orangered.200}"
292
312
  }
293
313
  },
294
- "gold": {
314
+ "yellow": {
295
315
  "default": {
296
316
  "type": "color",
297
317
  "value": "{global.dark.color.nonstatus.gold.100}"
@@ -319,7 +339,7 @@
319
339
  "value": "{global.dark.color.nonstatus.green.200}"
320
340
  }
321
341
  },
322
- "cyan": {
342
+ "teal": {
323
343
  "default": {
324
344
  "type": "color",
325
345
  "value": "{global.dark.color.nonstatus.cyan.100}"
@@ -606,10 +626,12 @@
606
626
  "value": "{global.dark.icon.color.300}"
607
627
  },
608
628
  "disabled": {
629
+ "description": "for use without disabled background color",
609
630
  "type": "color",
610
631
  "value": "{global.dark.color.disabled.200}"
611
632
  },
612
633
  "on-disabled": {
634
+ "description": "pair with disabled background color",
613
635
  "type": "color",
614
636
  "value": "{global.dark.color.disabled.300}"
615
637
  },
@@ -694,7 +716,7 @@
694
716
  "value": "{global.icon.color.inverse}"
695
717
  }
696
718
  },
697
- "on-gold": {
719
+ "on-yellow": {
698
720
  "default": {
699
721
  "type": "color",
700
722
  "value": "{global.icon.color.inverse}"
@@ -722,7 +744,7 @@
722
744
  "value": "{global.icon.color.inverse}"
723
745
  }
724
746
  },
725
- "on-cyan": {
747
+ "on-teal": {
726
748
  "default": {
727
749
  "type": "color",
728
750
  "value": "{global.icon.color.inverse}"
@@ -936,7 +958,7 @@
936
958
  "value": "{global.dark.color.nonstatus.orange.200}"
937
959
  }
938
960
  },
939
- "gold": {
961
+ "yellow": {
940
962
  "default": {
941
963
  "type": "color",
942
964
  "value": "{global.dark.color.nonstatus.gold.100}"
@@ -964,7 +986,7 @@
964
986
  "value": "{global.dark.color.nonstatus.green.200}"
965
987
  }
966
988
  },
967
- "cyan": {
989
+ "teal": {
968
990
  "default": {
969
991
  "type": "color",
970
992
  "value": "{global.dark.color.nonstatus.cyan.100}"
@@ -1070,10 +1092,12 @@
1070
1092
  "value": "{global.text.color.subtle}"
1071
1093
  },
1072
1094
  "disabled": {
1095
+ "description": "for use without disabled background color",
1073
1096
  "type": "color",
1074
1097
  "value": "{global.dark.color.disabled.200}"
1075
1098
  },
1076
1099
  "on-disabled": {
1100
+ "description": "pair with disabled background color",
1077
1101
  "type": "color",
1078
1102
  "value": "{global.dark.color.disabled.300}"
1079
1103
  },
@@ -1314,7 +1338,7 @@
1314
1338
  "value": "{global.text.color.inverse}"
1315
1339
  }
1316
1340
  },
1317
- "on-gold": {
1341
+ "on-yellow": {
1318
1342
  "default": {
1319
1343
  "type": "color",
1320
1344
  "value": "{global.text.color.inverse}"
@@ -1342,7 +1366,7 @@
1342
1366
  "value": "{global.text.color.inverse}"
1343
1367
  }
1344
1368
  },
1345
- "on-cyan": {
1369
+ "on-teal": {
1346
1370
  "default": {
1347
1371
  "type": "color",
1348
1372
  "value": "{global.text.color.inverse}"
package/tokens/default/base.dimension.json CHANGED
@@ -106,6 +106,86 @@
106
106
  }
107
107
  },
108
108
  "font": {
109
+ "family": {
110
+ "100": {
111
+ "type": "string",
112
+ "value": "Red Hat Text VF"
113
+ },
114
+ "200": {
115
+ "type": "string",
116
+ "value": "Red Hat Display VF"
117
+ },
118
+ "300": {
119
+ "type": "string",
120
+ "value": "Red Hat Mono VF"
121
+ }
122
+ },
123
+ "weight": {
124
+ "body": {
125
+ "100": {
126
+ "type": "number",
127
+ "value": 400
128
+ },
129
+ "200": {
130
+ "type": "number",
131
+ "value": 500
132
+ }
133
+ },
134
+ "heading": {
135
+ "100": {
136
+ "type": "number",
137
+ "value": 700
138
+ },
139
+ "200": {
140
+ "type": "number",
141
+ "value": 700
142
+ }
143
+ }
144
+ },
145
+ "line-height": {
146
+ "100": {
147
+ "type": "number",
148
+ "value": 1.2999999523162842
149
+ },
150
+ "200": {
151
+ "type": "number",
152
+ "value": 1.5
153
+ },
154
+ "figma-only": {
155
+ "100": {
156
+ "type": "number",
157
+ "value": 18
158
+ },
159
+ "200": {
160
+ "type": "number",
161
+ "value": 21
162
+ },
163
+ "300": {
164
+ "type": "number",
165
+ "value": 24
166
+ },
167
+ "400": {
168
+ "type": "number",
169
+ "value": 23.399999618530273
170
+ },
171
+ "500": {
172
+ "type": "number",
173
+ "value": 26
174
+ },
175
+ "600": {
176
+ "type": "number",
177
+ "value": 28.600000381469727
178
+ },
179
+ "700": {
180
+ "type": "number",
181
+ "value": 36.400001525878906
182
+ },
183
+ "800": {
184
+ "type": "number",
185
+ "value": 46.79999923706055
186
+ }
187
+ }
188
+ },
109
189
  "size": {
110
190
  "100": {
111
191
  "type": "number",
package/tokens/default/semantic.dimension.json CHANGED
@@ -142,33 +142,15 @@
142
142
  "type": "number",
143
143
  "value": "{global.spacer.800}"
144
144
  },
145
- "action": {
145
+ "control": {
146
146
  "vertical": {
147
147
  "default": {
148
148
  "type": "number",
149
149
  "value": "{global.spacer.sm}"
150
150
  },
151
- "plain": {
152
- "type": "number",
153
- "value": "{global.spacer.sm}"
154
- }
155
- },
156
- "horizontal": {
157
- "default": {
158
- "type": "number",
159
- "value": "{global.spacer.lg}"
160
- },
161
- "plain": {
162
- "type": "number",
163
- "value": "{global.spacer.sm}"
164
- }
165
- }
166
- },
167
- "control": {
168
- "vertical": {
169
- "default": {
151
+ "compact": {
170
152
  "type": "number",
171
- "value": "{global.spacer.sm}"
153
+ "value": "{global.spacer.100}"
172
154
  },
173
155
  "plain": {
174
156
  "type": "number",
@@ -180,6 +162,10 @@
180
162
  "type": "number",
181
163
  "value": "{global.spacer.md}"
182
164
  },
165
+ "compact": {
166
+ "type": "number",
167
+ "value": "{global.spacer.200}"
168
+ },
183
169
  "plain": {
184
170
  "type": "number",
185
171
  "value": "{global.spacer.sm}"
@@ -230,6 +216,28 @@
230
216
  }
231
217
  }
232
218
  },
219
+ "action": {
220
+ "vertical": {
221
+ "default": {
222
+ "type": "number",
223
+ "value": "{global.spacer.sm}"
224
+ },
225
+ "plain": {
226
+ "type": "number",
227
+ "value": "{global.spacer.sm}"
228
+ }
229
+ },
230
+ "horizontal": {
231
+ "default": {
232
+ "type": "number",
233
+ "value": "{global.spacer.lg}"
234
+ },
235
+ "plain": {
236
+ "type": "number",
237
+ "value": "{global.spacer.sm}"
238
+ }
239
+ }
240
+ },
233
241
  "button": {
234
242
  "horizontal": {
235
243
  "compact": {
@@ -267,7 +275,25 @@
267
275
  "type": "number",
268
276
  "value": "{global.icon.size.400}"
269
277
  },
278
+ "3xl": {
279
+ "type": "number",
280
+ "value": "{global.icon.size.500}"
281
+ },
270
282
  "font": {
283
+ "body": {
284
+ "sm": {
285
+ "type": "number",
286
+ "value": "{global.font.size.body.sm}"
287
+ },
288
+ "default": {
289
+ "type": "number",
290
+ "value": "{global.font.size.body.default}"
291
+ },
292
+ "lg": {
293
+ "type": "number",
294
+ "value": "{global.font.size.body.lg}"
295
+ }
296
+ },
271
297
  "heading": {
272
298
  "h1": {
273
299
  "type": "number",
@@ -294,20 +320,6 @@
294
320
  "value": "{global.font.size.heading.h6}"
295
321
  }
296
322
  },
297
- "body": {
298
- "sm": {
299
- "type": "number",
300
- "value": "{global.font.size.body.sm}"
301
- },
302
- "default": {
303
- "type": "number",
304
- "value": "{global.font.size.body.default}"
305
- },
306
- "lg": {
307
- "type": "number",
308
- "value": "{global.font.size.body.lg}"
309
- }
310
- },
311
323
  "xs": {
312
324
  "type": "number",
313
325
  "value": "{global.font.size.xs}"
@@ -340,14 +352,94 @@
340
352
  "type": "number",
341
353
  "value": "{global.font.size.4xl}"
342
354
  }
343
- },
344
- "3xl": {
345
- "type": "number",
346
- "value": "{global.icon.size.500}"
347
355
  }
348
356
  }
349
357
  },
350
358
  "font": {
359
+ "weight": {
360
+ "body": {
361
+ "type": "number",
362
+ "value": "{global.font.weight.body.100}",
363
+ "bold": {
364
+ "type": "number",
365
+ "value": "{global.font.weight.body.200}"
366
+ }
367
+ },
368
+ "heading": {
369
+ "type": "number",
370
+ "value": "{global.font.weight.heading.100}",
371
+ "bold": {
372
+ "type": "number",
373
+ "value": "{global.font.weight.heading.200}"
374
+ }
375
+ }
376
+ },
377
+ "line-height": {
378
+ "body": {
379
+ "type": "number",
380
+ "value": "{global.font.line-height.100}"
381
+ },
382
+ "heading": {
383
+ "type": "number",
384
+ "value": "{global.font.line-height.200}"
385
+ },
386
+ "figma-only": {
387
+ "body": {
388
+ "small": {
389
+ "type": "number",
390
+ "value": "{global.font.line-height.figma-only.100}"
391
+ },
392
+ "default": {
393
+ "type": "number",
394
+ "value": "{global.font.line-height.figma-only.200}"
395
+ },
396
+ "large": {
397
+ "type": "number",
398
+ "value": "{global.font.line-height.figma-only.300}"
399
+ }
400
+ },
401
+ "heading": {
402
+ "xs": {
403
+ "type": "number",
404
+ "value": "{global.font.line-height.figma-only.300}"
405
+ },
406
+ "sm": {
407
+ "type": "number",
408
+ "value": "{global.font.line-height.figma-only.400}"
409
+ },
410
+ "md": {
411
+ "type": "number",
412
+ "value": "{global.font.line-height.figma-only.500}"
413
+ },
414
+ "lg": {
415
+ "type": "number",
416
+ "value": "{global.font.line-height.figma-only.600}"
417
+ },
418
+ "xl": {
419
+ "type": "number",
420
+ "value": "{global.font.line-height.figma-only.700}"
421
+ },
422
+ "2xl": {
423
+ "type": "number",
424
+ "value": "{global.font.line-height.figma-only.800}"
425
+ }
426
+ }
427
+ }
428
+ },
429
+ "family": {
430
+ "body": {
431
+ "type": "number",
432
+ "value": "{global.font.family.100}"
433
+ },
434
+ "heading": {
435
+ "type": "number",
436
+ "value": "{global.font.family.200}"
437
+ },
438
+ "mono": {
439
+ "type": "number",
440
+ "value": "{global.font.family.300}"
441
+ }
442
+ },
351
443
  "size": {
352
444
  "body": {
353
445
  "sm": {
package/tokens/default/semantic.json CHANGED
@@ -5,42 +5,51 @@
5
5
  "color": {
6
6
  "primary": {
7
7
  "default": {
8
+ "description": "Use as the primary background color for UI content such as cards, page sections, and other content areas.",
8
9
  "type": "color",
9
10
  "value": "{global.background.color.100}"
10
11
  },
11
12
  "hover": {
13
+ "description": "Use as the hover state for primary backgrounds",
12
14
  "type": "color",
13
15
  "value": "{global.background.color.200}"
14
16
  },
15
17
  "clicked": {
18
+ "description": "Use as the selected state for primary backgrounds",
16
19
  "type": "color",
17
20
  "value": "{global.background.color.200}"
18
21
  }
19
22
  },
20
23
  "secondary": {
21
24
  "default": {
25
+ "description": "Use as the secondary background color for UI content Use as the primary background color for UI content such as cards, page sections, and other content areas. Secondary background color is also used for our UI shell backgrounds (nav, masthead, etc).",
22
26
  "type": "color",
23
27
  "value": "{global.background.color.200}"
24
28
  },
25
29
  "hover": {
30
+ "description": "Use as the hover state for secondary backgrounds",
26
31
  "type": "color",
27
32
  "value": "{global.background.color.300}"
28
33
  },
29
34
  "clicked": {
35
+ "description": "Use as the selected state for secondary backgrounds",
30
36
  "type": "color",
31
37
  "value": "{global.background.color.300}"
32
38
  }
33
39
  },
34
40
  "floating": {
35
41
  "default": {
42
+ "description": "Use as background color for components that show over top of other content such as toast alerts, menus, modals, overlay drawers, etc.",
36
43
  "type": "color",
37
44
  "value": "{global.background.color.100}"
38
45
  },
39
46
  "hover": {
47
+ "description": "Use as the hover state for floating backgrounds",
40
48
  "type": "color",
41
49
  "value": "{global.background.color.200}"
42
50
  },
43
51
  "clicked": {
52
+ "description": "Use as the selected state for floating backgrounds",
44
53
  "type": "color",
45
54
  "value": "{global.background.color.200}"
46
55
  }
@@ -48,23 +57,28 @@
48
57
  "action": {
49
58
  "plain": {
50
59
  "default": {
60
+ "description": "Use as the default background for actions with transparent backgrounds such as menu items, accordion toggles, buttons, etc.",
51
61
  "type": "color",
52
62
  "value": "rgba(255, 255, 255, 0.0000)"
53
63
  },
54
64
  "hover": {
65
+ "description": "Use as the hover state for components that use the plain action default background.",
55
66
  "type": "color",
56
67
  "value": "{global.background.color.600}"
57
68
  },
58
69
  "clicked": {
70
+ "description": "Use as the active/pressed state for components that use the plain action default background.",
59
71
  "type": "color",
60
72
  "value": "{global.background.color.600}"
61
73
  },
62
74
  "alt": {
63
75
  "hover": {
76
+ "description": "Use as the hover state for components that use the plain action default background but are placed on a secondary background color (like left nav, horizontal nav, etc.)",
64
77
  "type": "color",
65
78
  "value": "{global.background.color.100}"
66
79
  },
67
80
  "clicked": {
81
+ "description": "Use as the active/pressed state for components that use the plain action default background but are placed on a secondary background color (like left nav, horizontal nav, etc.)",
68
82
  "type": "color",
69
83
  "value": "{global.background.color.100}"
70
84
  }
@@ -73,34 +87,40 @@
73
87
  },
74
88
  "control": {
75
89
  "default": {
90
+ "description": "Use as the default background for control elements like form inputs and menu toggles.",
76
91
  "type": "color",
77
92
  "value": "{global.background.color.primary.default}"
78
93
  }
79
94
  },
80
95
  "highlight": {
81
96
  "default": {
97
+ "description": "Use as the background color for highlighted elements",
82
98
  "type": "color",
83
99
  "value": "{global.background.color.highlight.100}"
84
100
  },
85
101
  "clicked": {
102
+ "description": "Use as the active state for for highlighted elements",
86
103
  "type": "color",
87
104
  "value": "{global.background.color.highlight.200}"
88
105
  }
89
106
  },
90
107
  "inverse": {
91
108
  "default": {
109
+ "description": "Use as the background color components with inversed backgrounds like tooltips.",
92
110
  "type": "color",
93
111
  "value": "{global.background.color.400}"
94
112
  }
95
113
  },
96
114
  "disabled": {
97
115
  "default": {
116
+ "description": "Use as the background color for disabled components.",
98
117
  "type": "color",
99
118
  "value": "{global.color.disabled.100}"
100
119
  }
101
120
  },
102
121
  "backdrop": {
103
122
  "default": {
123
+ "description": "Use as the background color for the backdrop component that shows beneath a modal/about modal/floating wizard etc.",
104
124
  "type": "color",
105
125
  "value": "{global.background.color.500}"
106
126
  }
@@ -291,7 +311,7 @@
291
311
  "value": "{global.color.nonstatus.orangered.200}"
292
312
  }
293
313
  },
294
- "gold": {
314
+ "yellow": {
295
315
  "default": {
296
316
  "type": "color",
297
317
  "value": "{global.color.nonstatus.gold.100}"
@@ -319,7 +339,7 @@
319
339
  "value": "{global.color.nonstatus.green.200}"
320
340
  }
321
341
  },
322
- "cyan": {
342
+ "teal": {
323
343
  "default": {
324
344
  "type": "color",
325
345
  "value": "{global.color.nonstatus.cyan.100}"
@@ -606,10 +626,12 @@
606
626
  "value": "{global.icon.color.300}"
607
627
  },
608
628
  "disabled": {
629
+ "description": "for use without disabled background color",
609
630
  "type": "color",
610
631
  "value": "{global.color.disabled.200}"
611
632
  },
612
633
  "on-disabled": {
634
+ "description": "pair with disabled background color",
613
635
  "type": "color",
614
636
  "value": "{global.color.disabled.300}"
615
637
  },
@@ -694,7 +716,7 @@
694
716
  "value": "{global.icon.color.regular}"
695
717
  }
696
718
  },
697
- "on-gold": {
719
+ "on-yellow": {
698
720
  "default": {
699
721
  "type": "color",
700
722
  "value": "{global.icon.color.regular}"
@@ -722,7 +744,7 @@
722
744
  "value": "{global.icon.color.regular}"
723
745
  }
724
746
  },
725
- "on-cyan": {
747
+ "on-teal": {
726
748
  "default": {
727
749
  "type": "color",
728
750
  "value": "{global.icon.color.regular}"
@@ -936,7 +958,7 @@
936
958
  "value": "{global.color.nonstatus.orange.300}"
937
959
  }
938
960
  },
939
- "gold": {
961
+ "yellow": {
940
962
  "default": {
941
963
  "type": "color",
942
964
  "value": "{global.color.nonstatus.gold.200}"
@@ -964,7 +986,7 @@
964
986
  "value": "{global.color.nonstatus.green.300}"
965
987
  }
966
988
  },
967
- "cyan": {
989
+ "teal": {
968
990
  "default": {
969
991
  "type": "color",
970
992
  "value": "{global.color.nonstatus.cyan.200}"
@@ -1070,10 +1092,12 @@
1070
1092
  "value": "{global.text.color.subtle}"
1071
1093
  },
1072
1094
  "disabled": {
1095
+ "description": "for use without disabled background color",
1073
1096
  "type": "color",
1074
1097
  "value": "{global.color.disabled.200}"
1075
1098
  },
1076
1099
  "on-disabled": {
1100
+ "description": "pair with disabled background color",
1077
1101
  "type": "color",
1078
1102
  "value": "{global.color.disabled.300}"
1079
1103
  },
@@ -1314,7 +1338,7 @@
1314
1338
  "value": "{global.text.color.regular}"
1315
1339
  }
1316
1340
  },
1317
- "on-gold": {
1341
+ "on-yellow": {
1318
1342
  "default": {
1319
1343
  "type": "color",
1320
1344
  "value": "{global.text.color.regular}"
@@ -1342,7 +1366,7 @@
1342
1366
  "value": "{global.text.color.regular}"
1343
1367
  }
1344
1368
  },
1345
- "on-cyan": {
1369
+ "on-teal": {
1346
1370
  "default": {
1347
1371
  "type": "color",
1348
1372
  "value": "{global.text.color.regular}"