@patternfly/design-tokens 1.10.0 → 1.12.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.
- package/build/css/tokens-charts-dark.scss +153 -153
- package/build/css/tokens-charts.scss +153 -153
- package/build/css/tokens-dark.scss +300 -300
- package/build/css/tokens-default.scss +567 -548
- package/build/css/tokens-palette.scss +65 -65
- package/build.js +18 -9
- package/config.default.json +1 -0
- package/package.json +1 -1
- package/tokens/dark/base.dark.json +2 -2
- package/tokens/dark/semantic.dark.json +325 -64
- package/tokens/default/base.dimension.json +16 -54
- package/tokens/default/base.json +3 -3
- package/tokens/default/semantic.dimension.json +191 -83
- package/tokens/default/semantic.json +325 -64
- package/tokens/default/semantic.motion.json +26 -0
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"value": "{global.dark.background.color.300}"
|
|
16
16
|
},
|
|
17
17
|
"clicked": {
|
|
18
|
-
"description": "Use as the
|
|
18
|
+
"description": "Use as the clicked state for primary backgrounds",
|
|
19
19
|
"type": "color",
|
|
20
20
|
"value": "{global.dark.background.color.300}"
|
|
21
21
|
}
|
|
@@ -32,14 +32,14 @@
|
|
|
32
32
|
"value": "{global.dark.background.color.200}"
|
|
33
33
|
},
|
|
34
34
|
"clicked": {
|
|
35
|
-
"description": "Use as the
|
|
35
|
+
"description": "Use as the clicked state for secondary backgrounds",
|
|
36
36
|
"type": "color",
|
|
37
37
|
"value": "{global.dark.background.color.200}"
|
|
38
38
|
}
|
|
39
39
|
},
|
|
40
40
|
"floating": {
|
|
41
41
|
"default": {
|
|
42
|
-
"description": "Use as background color for components that
|
|
42
|
+
"description": "Use as the background color for components that appear over other content, such as toast alerts, menus, modals, overlay drawers, etc.",
|
|
43
43
|
"type": "color",
|
|
44
44
|
"value": "{global.dark.background.color.300}"
|
|
45
45
|
},
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"value": "{global.dark.background.color.200}"
|
|
50
50
|
},
|
|
51
51
|
"clicked": {
|
|
52
|
-
"description": "Use as the
|
|
52
|
+
"description": "Use as the clicked state for floating backgrounds",
|
|
53
53
|
"type": "color",
|
|
54
54
|
"value": "{global.dark.background.color.200}"
|
|
55
55
|
}
|
|
@@ -130,139 +130,166 @@
|
|
|
130
130
|
"color": {
|
|
131
131
|
"brand": {
|
|
132
132
|
"default": {
|
|
133
|
+
"description": "Use this color for elements that you want to reinforce your brand",
|
|
133
134
|
"type": "color",
|
|
134
135
|
"value": "{global.dark.color.brand.100}"
|
|
135
136
|
},
|
|
136
137
|
"hover": {
|
|
138
|
+
"description": "Use as the hover state for elements that have a branded background color",
|
|
137
139
|
"type": "color",
|
|
138
140
|
"value": "{global.dark.color.brand.200}"
|
|
139
141
|
},
|
|
140
142
|
"clicked": {
|
|
143
|
+
"description": "Use as the clicked state for elements that have a brand background color",
|
|
141
144
|
"type": "color",
|
|
142
145
|
"value": "{global.dark.color.brand.200}"
|
|
143
146
|
}
|
|
144
147
|
},
|
|
145
148
|
"favorite": {
|
|
146
149
|
"default": {
|
|
150
|
+
"description": "Use as the default color for elements that have been favorited",
|
|
147
151
|
"type": "color",
|
|
148
152
|
"value": "{global.dark.color.favorite.100}"
|
|
149
153
|
},
|
|
150
154
|
"hover": {
|
|
155
|
+
"description": "Use as the hover state for elements that have been favorited",
|
|
151
156
|
"type": "color",
|
|
152
157
|
"value": "{global.dark.color.favorite.200}"
|
|
153
158
|
},
|
|
154
159
|
"clicked": {
|
|
160
|
+
"description": "Use as the clicked state for elements that have been favorited",
|
|
155
161
|
"type": "color",
|
|
156
162
|
"value": "{global.dark.color.favorite.200}"
|
|
157
163
|
}
|
|
158
164
|
},
|
|
159
165
|
"status": {
|
|
160
|
-
"unread": {
|
|
161
|
-
"default": {
|
|
162
|
-
"default": {
|
|
163
|
-
"type": "color",
|
|
164
|
-
"value": "{global.color.brand.default}"
|
|
165
|
-
},
|
|
166
|
-
"hover": {
|
|
167
|
-
"type": "color",
|
|
168
|
-
"value": "{global.color.brand.hover}"
|
|
169
|
-
},
|
|
170
|
-
"clicked": {
|
|
171
|
-
"type": "color",
|
|
172
|
-
"value": "{global.color.brand.clicked}"
|
|
173
|
-
}
|
|
174
|
-
},
|
|
175
|
-
"attention": {
|
|
176
|
-
"default": {
|
|
177
|
-
"type": "color",
|
|
178
|
-
"value": "{global.color.status.danger.default}"
|
|
179
|
-
},
|
|
180
|
-
"clicked": {
|
|
181
|
-
"type": "color",
|
|
182
|
-
"value": "{global.color.status.danger.clicked}"
|
|
183
|
-
},
|
|
184
|
-
"hover": {
|
|
185
|
-
"type": "color",
|
|
186
|
-
"value": "{global.color.status.danger.hover}"
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
},
|
|
190
166
|
"success": {
|
|
191
167
|
"default": {
|
|
168
|
+
"description": "Use as the default color for any element communicating a favorable outcome, like a success status for alert, progress, select.",
|
|
192
169
|
"type": "color",
|
|
193
170
|
"value": "{global.dark.color.status.success.100}"
|
|
194
171
|
},
|
|
195
172
|
"hover": {
|
|
173
|
+
"description": "Use as the hover state for any element that conveys a success status.",
|
|
196
174
|
"type": "color",
|
|
197
175
|
"value": "{global.dark.color.status.success.200}"
|
|
198
176
|
},
|
|
199
177
|
"clicked": {
|
|
178
|
+
"description": "Use as the clicked state for any element that conveys a success status.",
|
|
200
179
|
"type": "color",
|
|
201
180
|
"value": "{global.dark.color.status.success.200}"
|
|
202
181
|
}
|
|
203
182
|
},
|
|
204
183
|
"warning": {
|
|
205
184
|
"default": {
|
|
185
|
+
"description": "Use as the default color for any element communicating caution, like a warning status for alert, progress, select.",
|
|
206
186
|
"type": "color",
|
|
207
187
|
"value": "{global.dark.color.status.warning.100}"
|
|
208
188
|
},
|
|
209
189
|
"hover": {
|
|
190
|
+
"description": "Use as the hover state for any element that conveys a warning status.",
|
|
210
191
|
"type": "color",
|
|
211
192
|
"value": "{global.dark.color.status.warning.200}"
|
|
212
193
|
},
|
|
213
194
|
"clicked": {
|
|
195
|
+
"description": "Use as the clicked state for any element that conveys a warning status.",
|
|
214
196
|
"type": "color",
|
|
215
197
|
"value": "{global.dark.color.status.warning.200}"
|
|
216
198
|
}
|
|
217
199
|
},
|
|
218
200
|
"danger": {
|
|
219
201
|
"default": {
|
|
202
|
+
"description": "Use as the default color for any element communicating a critical warning or error, like a danger status for alert, progress, select.",
|
|
220
203
|
"type": "color",
|
|
221
204
|
"value": "{global.dark.color.status.danger.100}"
|
|
222
205
|
},
|
|
223
206
|
"hover": {
|
|
207
|
+
"description": "Use as the hover state for any element that conveys a danger status.",
|
|
224
208
|
"type": "color",
|
|
225
209
|
"value": "{global.dark.color.status.danger.200}"
|
|
226
210
|
},
|
|
227
211
|
"clicked": {
|
|
212
|
+
"description": "Use as the clicked state for any element that conveys a danger status.",
|
|
228
213
|
"type": "color",
|
|
229
214
|
"value": "{global.dark.color.status.danger.200}"
|
|
230
215
|
}
|
|
231
216
|
},
|
|
232
217
|
"info": {
|
|
233
218
|
"default": {
|
|
219
|
+
"description": "Use as the default color for any element communicating information, like an info status for alert, progress, select.",
|
|
234
220
|
"type": "color",
|
|
235
221
|
"value": "{global.dark.color.status.info.100}"
|
|
236
222
|
},
|
|
237
223
|
"hover": {
|
|
224
|
+
"description": "Use as the hover state for any element that conveys an info status.",
|
|
238
225
|
"type": "color",
|
|
239
226
|
"value": "{global.dark.color.status.info.200}"
|
|
240
227
|
},
|
|
241
228
|
"clicked": {
|
|
229
|
+
"description": "Use as the clicked state for any element that conveys an info status.",
|
|
242
230
|
"type": "color",
|
|
243
231
|
"value": "{global.dark.color.status.info.200}"
|
|
244
232
|
}
|
|
245
233
|
},
|
|
246
234
|
"custom": {
|
|
247
235
|
"default": {
|
|
236
|
+
"description": "Use as the default color for any element that conveys a generic status with no associated severity. This color can be customized.",
|
|
248
237
|
"type": "color",
|
|
249
238
|
"value": "{global.dark.color.status.custom.100}"
|
|
250
239
|
},
|
|
251
240
|
"hover": {
|
|
241
|
+
"description": "Use this color as the hover state color for any element that conveys a generic status with no associated severity. This color can be customized.",
|
|
252
242
|
"type": "color",
|
|
253
243
|
"value": "{global.dark.color.status.custom.200}"
|
|
254
244
|
},
|
|
255
245
|
"clicked": {
|
|
246
|
+
"description": "Use as the clicked state color for any element that conveys a generic status with no associated severity. This color can be customized.",
|
|
256
247
|
"type": "color",
|
|
257
248
|
"value": "{global.dark.color.status.custom.200}"
|
|
258
249
|
}
|
|
259
250
|
},
|
|
251
|
+
"unread": {
|
|
252
|
+
"default": {
|
|
253
|
+
"description": "Use as the default color for elements that convey an unread status, like badges and stateful buttons.",
|
|
254
|
+
"type": "color",
|
|
255
|
+
"value": "{global.color.brand.default}"
|
|
256
|
+
},
|
|
257
|
+
"hover": {
|
|
258
|
+
"description": "Use as the hover state color for elements that convey an unread status, like badges and stateful buttons.",
|
|
259
|
+
"type": "color",
|
|
260
|
+
"value": "{global.color.brand.hover}"
|
|
261
|
+
},
|
|
262
|
+
"clicked": {
|
|
263
|
+
"description": "Use as the clicked state color for elements that convey an unread status, like badges and stateful buttons.",
|
|
264
|
+
"type": "color",
|
|
265
|
+
"value": "{global.color.brand.clicked}"
|
|
266
|
+
},
|
|
267
|
+
"attention": {
|
|
268
|
+
"default": {
|
|
269
|
+
"description": "Use as the default color for elements that convey an unread status and require greater attention like badges and stateful buttons.",
|
|
270
|
+
"type": "color",
|
|
271
|
+
"value": "{global.color.status.danger.default}"
|
|
272
|
+
},
|
|
273
|
+
"clicked": {
|
|
274
|
+
"description": "Use as the hover state color for elements that convey an unread status and require greater attention like badges and stateful buttons.",
|
|
275
|
+
"type": "color",
|
|
276
|
+
"value": "{global.color.status.danger.clicked}"
|
|
277
|
+
},
|
|
278
|
+
"hover": {
|
|
279
|
+
"description": "Use as the clicked state color for elements that convey an unread status and require greater attention like badges and stateful buttons.",
|
|
280
|
+
"type": "color",
|
|
281
|
+
"value": "{global.color.status.danger.hover}"
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
},
|
|
260
285
|
"read": {
|
|
261
286
|
"on-secondary": {
|
|
287
|
+
"description": "Use as the default color for elements that convey a read status and are placed on a secondary background",
|
|
262
288
|
"type": "color",
|
|
263
289
|
"value": "{global.background.color.control.default}"
|
|
264
290
|
},
|
|
265
291
|
"on-primary": {
|
|
292
|
+
"description": "Use as the default color for elements that convey a read status and are placed on a primary background",
|
|
266
293
|
"type": "color",
|
|
267
294
|
"value": "{global.background.color.secondary.default}"
|
|
268
295
|
}
|
|
@@ -271,126 +298,153 @@
|
|
|
271
298
|
"nonstatus": {
|
|
272
299
|
"red": {
|
|
273
300
|
"default": {
|
|
301
|
+
"description": "Use as the default background color for any element that does not convey status and that you always will want to be red (i.e. color-coded labels, banners, etc.)",
|
|
274
302
|
"type": "color",
|
|
275
303
|
"value": "{global.dark.color.nonstatus.red.100}"
|
|
276
304
|
},
|
|
277
305
|
"hover": {
|
|
306
|
+
"description": "Use as the hover state color for any element that uses the non status red background color.",
|
|
278
307
|
"type": "color",
|
|
279
308
|
"value": "{global.dark.color.nonstatus.red.200}"
|
|
280
309
|
},
|
|
281
310
|
"clicked": {
|
|
311
|
+
"description": "Use as the clicked state color for any element that uses the non status red background color.",
|
|
282
312
|
"type": "color",
|
|
283
313
|
"value": "{global.dark.color.nonstatus.red.200}"
|
|
284
314
|
}
|
|
285
315
|
},
|
|
286
316
|
"orange": {
|
|
287
317
|
"default": {
|
|
318
|
+
"description": "Use as the default background color for any element that does not convey status and that you always will want to be orange (i.e. color-coded labels, banners, etc.)",
|
|
288
319
|
"type": "color",
|
|
289
320
|
"value": "{global.dark.color.nonstatus.orange.100}"
|
|
290
321
|
},
|
|
291
322
|
"hover": {
|
|
323
|
+
"description": "Use as the hover state color for any element that uses the non status orange background color.",
|
|
292
324
|
"type": "color",
|
|
293
325
|
"value": "{global.dark.color.nonstatus.orange.200}"
|
|
294
326
|
},
|
|
295
327
|
"clicked": {
|
|
328
|
+
"description": "Use as the clicked state color for any element that uses the non status orange background color.",
|
|
296
329
|
"type": "color",
|
|
297
330
|
"value": "{global.dark.color.nonstatus.orange.200}"
|
|
298
331
|
}
|
|
299
332
|
},
|
|
300
333
|
"orangered": {
|
|
301
334
|
"default": {
|
|
335
|
+
"description": "Use as the default background color for any element that does not convey status and that you always will want to be orange-red (i.e. color-coded labels, banners, etc.)",
|
|
302
336
|
"type": "color",
|
|
303
337
|
"value": "{global.dark.color.nonstatus.orangered.100}"
|
|
304
338
|
},
|
|
305
339
|
"hover": {
|
|
340
|
+
"description": "Use as the hover state color for any element that uses the non status orange-red background color.",
|
|
306
341
|
"type": "color",
|
|
307
342
|
"value": "{global.dark.color.nonstatus.orangered.200}"
|
|
308
343
|
},
|
|
309
344
|
"clicked": {
|
|
345
|
+
"description": "Use as the clicked state color for any element that uses the non status orange-red background color.",
|
|
310
346
|
"type": "color",
|
|
311
347
|
"value": "{global.dark.color.nonstatus.orangered.200}"
|
|
312
348
|
}
|
|
313
349
|
},
|
|
314
350
|
"yellow": {
|
|
315
351
|
"default": {
|
|
352
|
+
"description": "Use as the default background color for any element that does not convey status and that you always will want to be yellow (i.e. color-coded labels, banners, etc.)",
|
|
316
353
|
"type": "color",
|
|
317
|
-
"value": "{global.dark.color.nonstatus.
|
|
354
|
+
"value": "{global.dark.color.nonstatus.yellow.100}"
|
|
318
355
|
},
|
|
319
356
|
"hover": {
|
|
357
|
+
"description": "Use as the hover state color for any element that uses the non status yellow background color.",
|
|
320
358
|
"type": "color",
|
|
321
|
-
"value": "{global.dark.color.nonstatus.
|
|
359
|
+
"value": "{global.dark.color.nonstatus.yellow.200}"
|
|
322
360
|
},
|
|
323
361
|
"clicked": {
|
|
362
|
+
"description": "Use as the clicked state color for any element that uses the non status yellow background color.",
|
|
324
363
|
"type": "color",
|
|
325
|
-
"value": "{global.dark.color.nonstatus.
|
|
364
|
+
"value": "{global.dark.color.nonstatus.yellow.200}"
|
|
326
365
|
}
|
|
327
366
|
},
|
|
328
367
|
"green": {
|
|
329
368
|
"default": {
|
|
369
|
+
"description": "Use as the default background color for any element that does not convey status and that you always will want to be green (i.e. color-coded labels, banners, etc.)",
|
|
330
370
|
"type": "color",
|
|
331
371
|
"value": "{global.dark.color.nonstatus.green.100}"
|
|
332
372
|
},
|
|
333
373
|
"hover": {
|
|
374
|
+
"description": "Use as the hover state color for any element that uses the non status green background color.",
|
|
334
375
|
"type": "color",
|
|
335
376
|
"value": "{global.dark.color.nonstatus.green.200}"
|
|
336
377
|
},
|
|
337
378
|
"clicked": {
|
|
379
|
+
"description": "Use as the clicked state color for any element that uses the non status green background color.",
|
|
338
380
|
"type": "color",
|
|
339
381
|
"value": "{global.dark.color.nonstatus.green.200}"
|
|
340
382
|
}
|
|
341
383
|
},
|
|
342
384
|
"teal": {
|
|
343
385
|
"default": {
|
|
386
|
+
"description": "Use as the default background color for any element that does not convey status and that you always will want to be teal (i.e. color-coded labels, banners, etc.)",
|
|
344
387
|
"type": "color",
|
|
345
|
-
"value": "{global.dark.color.nonstatus.
|
|
388
|
+
"value": "{global.dark.color.nonstatus.teal.100}"
|
|
346
389
|
},
|
|
347
390
|
"hover": {
|
|
391
|
+
"description": "Use as the hover state color for any element that uses the non status teal background color.",
|
|
348
392
|
"type": "color",
|
|
349
|
-
"value": "{global.dark.color.nonstatus.
|
|
393
|
+
"value": "{global.dark.color.nonstatus.teal.200}"
|
|
350
394
|
},
|
|
351
395
|
"clicked": {
|
|
396
|
+
"description": "Use as the clicked state color for any element that uses the non status teal background color.",
|
|
352
397
|
"type": "color",
|
|
353
|
-
"value": "{global.dark.color.nonstatus.
|
|
398
|
+
"value": "{global.dark.color.nonstatus.teal.200}"
|
|
354
399
|
}
|
|
355
400
|
},
|
|
356
401
|
"blue": {
|
|
357
402
|
"default": {
|
|
403
|
+
"description": "Use as the default background color for any element that does not convey status and that you always will want to be blue (i.e. color-coded labels, banners, etc.)",
|
|
358
404
|
"type": "color",
|
|
359
405
|
"value": "{global.dark.color.nonstatus.blue.100}"
|
|
360
406
|
},
|
|
361
407
|
"hover": {
|
|
408
|
+
"description": "Use as the hover state color for any element that uses the non status blue background color.",
|
|
362
409
|
"type": "color",
|
|
363
410
|
"value": "{global.dark.color.nonstatus.blue.200}"
|
|
364
411
|
},
|
|
365
412
|
"clicked": {
|
|
413
|
+
"description": "Use as the clicked state color for any element that uses the non status blue background color.",
|
|
366
414
|
"type": "color",
|
|
367
415
|
"value": "{global.dark.color.nonstatus.blue.200}"
|
|
368
416
|
}
|
|
369
417
|
},
|
|
370
418
|
"purple": {
|
|
371
419
|
"default": {
|
|
420
|
+
"description": "Use as the default background color for any element that does not convey status and that you always will want to be purple (i.e. color-coded labels, banners, etc.)",
|
|
372
421
|
"type": "color",
|
|
373
422
|
"value": "{global.dark.color.nonstatus.purple.100}"
|
|
374
423
|
},
|
|
375
424
|
"hover": {
|
|
425
|
+
"description": "Use as the hover state color for any element that uses the non status purple background color.",
|
|
376
426
|
"type": "color",
|
|
377
427
|
"value": "{global.dark.color.nonstatus.purple.200}"
|
|
378
428
|
},
|
|
379
429
|
"clicked": {
|
|
430
|
+
"description": "Use as the clicked state color for any element that uses the non status purple background color.",
|
|
380
431
|
"type": "color",
|
|
381
432
|
"value": "{global.dark.color.nonstatus.purple.200}"
|
|
382
433
|
}
|
|
383
434
|
},
|
|
384
435
|
"gray": {
|
|
385
436
|
"default": {
|
|
437
|
+
"description": "Use as the default background color for any element that does not convey status and that you always will want to be gray (i.e. color-coded labels, banners, etc.)",
|
|
386
438
|
"type": "color",
|
|
387
439
|
"value": "{global.dark.color.nonstatus.gray.100}"
|
|
388
440
|
},
|
|
389
441
|
"hover": {
|
|
442
|
+
"description": "Use as the hover state color for any element that uses the non status gray background color.",
|
|
390
443
|
"type": "color",
|
|
391
444
|
"value": "{global.dark.color.nonstatus.gray.200}"
|
|
392
445
|
},
|
|
393
446
|
"clicked": {
|
|
447
|
+
"description": "Use as the clicked state color for any element that uses the non status gray background color.",
|
|
394
448
|
"type": "color",
|
|
395
449
|
"value": "{global.dark.color.nonstatus.gray.200}"
|
|
396
450
|
}
|
|
@@ -401,42 +455,51 @@
|
|
|
401
455
|
"color": {
|
|
402
456
|
"brand": {
|
|
403
457
|
"default": {
|
|
458
|
+
"description": "Use as the color for icons that convey your brand and/or are paired with branded text color.",
|
|
404
459
|
"type": "color",
|
|
405
460
|
"value": "{global.dark.color.brand.200}"
|
|
406
461
|
},
|
|
407
462
|
"hover": {
|
|
463
|
+
"description": "Use as the hover state color for icons that convey your brand and/or are paired with branded text color.",
|
|
408
464
|
"type": "color",
|
|
409
465
|
"value": "{global.dark.color.brand.300}"
|
|
410
466
|
},
|
|
411
467
|
"clicked": {
|
|
468
|
+
"description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.",
|
|
412
469
|
"type": "color",
|
|
413
470
|
"value": "{global.dark.color.brand.300}"
|
|
414
471
|
}
|
|
415
472
|
},
|
|
416
473
|
"on-brand": {
|
|
417
474
|
"default": {
|
|
475
|
+
"description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
|
|
418
476
|
"type": "color",
|
|
419
477
|
"value": "{global.icon.color.inverse}"
|
|
420
478
|
},
|
|
421
479
|
"hover": {
|
|
480
|
+
"description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
|
|
422
481
|
"type": "color",
|
|
423
482
|
"value": "{global.icon.color.inverse}"
|
|
424
483
|
},
|
|
425
484
|
"clicked": {
|
|
485
|
+
"description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
|
|
426
486
|
"type": "color",
|
|
427
487
|
"value": "{global.icon.color.inverse}"
|
|
428
488
|
}
|
|
429
489
|
},
|
|
430
490
|
"favorite": {
|
|
431
491
|
"default": {
|
|
492
|
+
"description": "Use as the icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)",
|
|
432
493
|
"type": "color",
|
|
433
494
|
"value": "{global.color.favorite.default}"
|
|
434
495
|
},
|
|
435
496
|
"hover": {
|
|
497
|
+
"description": "Use as the hover state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)",
|
|
436
498
|
"type": "color",
|
|
437
499
|
"value": "{global.color.favorite.hover}"
|
|
438
500
|
},
|
|
439
501
|
"clicked": {
|
|
502
|
+
"description": "Use as the clicked state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)",
|
|
440
503
|
"type": "color",
|
|
441
504
|
"value": "{global.color.favorite.clicked}"
|
|
442
505
|
}
|
|
@@ -444,140 +507,170 @@
|
|
|
444
507
|
"status": {
|
|
445
508
|
"success": {
|
|
446
509
|
"default": {
|
|
510
|
+
"description": "Use as the default color for text that communicates a success status.",
|
|
447
511
|
"type": "color",
|
|
448
512
|
"value": "{global.color.status.success.default}"
|
|
449
513
|
},
|
|
450
514
|
"hover": {
|
|
515
|
+
"description": "Use as the hover state color for text that communicates a success status.",
|
|
451
516
|
"type": "color",
|
|
452
517
|
"value": "{global.color.status.success.hover}"
|
|
453
518
|
},
|
|
454
519
|
"clicked": {
|
|
520
|
+
"description": "Use as the clicked state color for text that communicates a success status.",
|
|
455
521
|
"type": "color",
|
|
456
522
|
"value": "{global.color.status.success.clicked}"
|
|
457
523
|
}
|
|
458
524
|
},
|
|
459
525
|
"on-success": {
|
|
460
526
|
"default": {
|
|
527
|
+
"description": "Use as the default color for icons that are placed on a success background color and/or are paired with on-success colored text",
|
|
461
528
|
"type": "color",
|
|
462
529
|
"value": "{global.icon.color.inverse}"
|
|
463
530
|
},
|
|
464
531
|
"hover": {
|
|
532
|
+
"description": "Use as the hover state color for icons that are placed on a success background color and/or are paired with on-success colored text",
|
|
465
533
|
"type": "color",
|
|
466
534
|
"value": "{global.icon.color.inverse}"
|
|
467
535
|
},
|
|
468
536
|
"clicked": {
|
|
537
|
+
"description": "Use as the clicked state color for icons that are placed on a success background color and/or are paired with on-success colored text",
|
|
469
538
|
"type": "color",
|
|
470
539
|
"value": "{global.icon.color.inverse}"
|
|
471
540
|
}
|
|
472
541
|
},
|
|
473
542
|
"warning": {
|
|
474
543
|
"default": {
|
|
544
|
+
"description": "Use as the default color for text that communicates a warning status.",
|
|
475
545
|
"type": "color",
|
|
476
546
|
"value": "{global.color.status.warning.default}"
|
|
477
547
|
},
|
|
478
548
|
"hover": {
|
|
549
|
+
"description": "Use as the hover state color for text that communicates a warning status.",
|
|
479
550
|
"type": "color",
|
|
480
551
|
"value": "{global.color.status.warning.hover}"
|
|
481
552
|
},
|
|
482
553
|
"clicked": {
|
|
554
|
+
"description": "Use as the clicked state color for text that communicates a warning status.",
|
|
483
555
|
"type": "color",
|
|
484
556
|
"value": "{global.color.status.warning.clicked}"
|
|
485
557
|
}
|
|
486
558
|
},
|
|
487
559
|
"on-warning": {
|
|
488
560
|
"default": {
|
|
561
|
+
"description": "Use as the default color for icons that are placed on a warning background color and/or are paired with on-warning colored text",
|
|
489
562
|
"type": "color",
|
|
490
563
|
"value": "{global.icon.color.inverse}"
|
|
491
564
|
},
|
|
492
565
|
"hover": {
|
|
566
|
+
"description": "Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text",
|
|
493
567
|
"type": "color",
|
|
494
568
|
"value": "{global.icon.color.inverse}"
|
|
495
569
|
},
|
|
496
570
|
"clicked": {
|
|
571
|
+
"description": "Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text",
|
|
497
572
|
"type": "color",
|
|
498
573
|
"value": "{global.icon.color.inverse}"
|
|
499
574
|
}
|
|
500
575
|
},
|
|
501
576
|
"danger": {
|
|
502
577
|
"default": {
|
|
578
|
+
"description": "Use as the default color for icons that convey danger, like in alerts or banners.",
|
|
503
579
|
"type": "color",
|
|
504
580
|
"value": "{global.color.status.danger.default}"
|
|
505
581
|
},
|
|
506
582
|
"hover": {
|
|
583
|
+
"description": "Use as the hover state for icons that indicate danger.",
|
|
507
584
|
"type": "color",
|
|
508
585
|
"value": "{global.color.status.danger.hover}"
|
|
509
586
|
},
|
|
510
587
|
"clicked": {
|
|
588
|
+
"description": "Use as the clicked state for icons that indicate danger.",
|
|
511
589
|
"type": "color",
|
|
512
590
|
"value": "{global.color.status.danger.clicked}"
|
|
513
591
|
}
|
|
514
592
|
},
|
|
515
593
|
"on-danger": {
|
|
516
594
|
"default": {
|
|
595
|
+
"description": "Use as the default color for icons that are placed on a danger background color and/or are paired with on-danger colored text",
|
|
517
596
|
"type": "color",
|
|
518
597
|
"value": "{global.icon.color.inverse}"
|
|
519
598
|
},
|
|
520
599
|
"hover": {
|
|
600
|
+
"description": "Use as the hover state color for icons that are placed on a danger background color and/or are paired with on-danger colored text",
|
|
521
601
|
"type": "color",
|
|
522
602
|
"value": "{global.icon.color.inverse}"
|
|
523
603
|
},
|
|
524
604
|
"clicked": {
|
|
605
|
+
"description": "Use as the clicked state color for icons that are placed on a danger background color and/or are paired with on-danger colored text",
|
|
525
606
|
"type": "color",
|
|
526
607
|
"value": "{global.icon.color.inverse}"
|
|
527
608
|
}
|
|
528
609
|
},
|
|
529
610
|
"info": {
|
|
530
611
|
"default": {
|
|
612
|
+
"description": "Use as the default color for icons that identify informational messages, like in alerts or banners.",
|
|
531
613
|
"type": "color",
|
|
532
614
|
"value": "{global.color.status.info.default}"
|
|
533
615
|
},
|
|
534
616
|
"hover": {
|
|
617
|
+
"description": "Use as the hover state for icons that identify informational messages.",
|
|
535
618
|
"type": "color",
|
|
536
619
|
"value": "{global.color.status.info.hover}"
|
|
537
620
|
},
|
|
538
621
|
"clicked": {
|
|
622
|
+
"description": "Use as the clicked state for icons that identify informational messages.",
|
|
539
623
|
"type": "color",
|
|
540
624
|
"value": "{global.color.status.info.clicked}"
|
|
541
625
|
}
|
|
542
626
|
},
|
|
543
627
|
"on-info": {
|
|
544
628
|
"default": {
|
|
629
|
+
"description": "Use as the default color for icons that are placed on an info background color and/or are paired with on-info colored text",
|
|
545
630
|
"type": "color",
|
|
546
631
|
"value": "{global.icon.color.inverse}"
|
|
547
632
|
},
|
|
548
633
|
"hover": {
|
|
634
|
+
"description": "Use as the hover state color for icons that are placed on an info background color and/or are paired with on-info colored text",
|
|
549
635
|
"type": "color",
|
|
550
636
|
"value": "{global.icon.color.inverse}"
|
|
551
637
|
},
|
|
552
638
|
"clicked": {
|
|
639
|
+
"description": "Use as the clicked state color for icons that are placed on an info background color and/or are paired with on-info colored text",
|
|
553
640
|
"type": "color",
|
|
554
641
|
"value": "{global.icon.color.inverse}"
|
|
555
642
|
}
|
|
556
643
|
},
|
|
557
644
|
"custom": {
|
|
558
645
|
"default": {
|
|
646
|
+
"description": "Use as the default color for icons that convey generic status with no associated severity. This color can be customized.",
|
|
559
647
|
"type": "color",
|
|
560
648
|
"value": "{global.color.status.custom.default}"
|
|
561
649
|
},
|
|
562
650
|
"hover": {
|
|
651
|
+
"description": "Use as the hover state for icons that convey generic status with no associated severity.",
|
|
563
652
|
"type": "color",
|
|
564
653
|
"value": "{global.color.status.custom.hover}"
|
|
565
654
|
},
|
|
566
655
|
"clicked": {
|
|
656
|
+
"description": "Use as the clicked state for icons that convey generic status with no associated severity.",
|
|
567
657
|
"type": "color",
|
|
568
658
|
"value": "{global.color.status.custom.clicked}"
|
|
569
659
|
}
|
|
570
660
|
},
|
|
571
661
|
"on-custom": {
|
|
572
662
|
"default": {
|
|
663
|
+
"description": "Use as the default color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status color, make sure that this token meets contrast requirements with your new custom status color.",
|
|
573
664
|
"type": "color",
|
|
574
665
|
"value": "{global.icon.color.inverse}"
|
|
575
666
|
},
|
|
576
667
|
"hover": {
|
|
668
|
+
"description": "Use as the hover state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status hover color, make sure that this token meets contrast requirements with your new custom status hover color.",
|
|
577
669
|
"type": "color",
|
|
578
670
|
"value": "{global.icon.color.inverse}"
|
|
579
671
|
},
|
|
580
672
|
"clicked": {
|
|
673
|
+
"description": "Use as the clicked state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status clicked color, make sure that this token meets contrast requirements with your new custom status clicked color.",
|
|
581
674
|
"type": "color",
|
|
582
675
|
"value": "{global.icon.color.inverse}"
|
|
583
676
|
}
|
|
@@ -585,28 +678,34 @@
|
|
|
585
678
|
"unread": {
|
|
586
679
|
"on-default": {
|
|
587
680
|
"default": {
|
|
681
|
+
"description": "Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.",
|
|
588
682
|
"type": "color",
|
|
589
683
|
"value": "{global.icon.color.inverse}"
|
|
590
684
|
},
|
|
591
685
|
"hover": {
|
|
686
|
+
"description": "Use as the hover state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.",
|
|
592
687
|
"type": "color",
|
|
593
688
|
"value": "{global.icon.color.inverse}"
|
|
594
689
|
},
|
|
595
690
|
"clicked": {
|
|
691
|
+
"description": "Use as the clicked state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.",
|
|
596
692
|
"type": "color",
|
|
597
693
|
"value": "{global.icon.color.inverse}"
|
|
598
694
|
}
|
|
599
695
|
},
|
|
600
696
|
"on-attention": {
|
|
601
697
|
"default": {
|
|
698
|
+
"description": "Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.",
|
|
602
699
|
"type": "color",
|
|
603
700
|
"value": "{global.icon.color.inverse}"
|
|
604
701
|
},
|
|
605
702
|
"hover": {
|
|
703
|
+
"description": "Use as the hover state color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.",
|
|
606
704
|
"type": "color",
|
|
607
705
|
"value": "{global.icon.color.inverse}"
|
|
608
706
|
},
|
|
609
707
|
"clicked": {
|
|
708
|
+
"description": "Use as the clicked state color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.",
|
|
610
709
|
"type": "color",
|
|
611
710
|
"value": "{global.icon.color.inverse}"
|
|
612
711
|
}
|
|
@@ -614,60 +713,69 @@
|
|
|
614
713
|
}
|
|
615
714
|
},
|
|
616
715
|
"regular": {
|
|
716
|
+
"description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text",
|
|
617
717
|
"type": "color",
|
|
618
718
|
"value": "{global.dark.icon.color.100}"
|
|
619
719
|
},
|
|
620
720
|
"subtle": {
|
|
721
|
+
"description": "Use as the color for icons when you want the icon to have less emphasis and/or when paired with subtle-colored text",
|
|
621
722
|
"type": "color",
|
|
622
723
|
"value": "{global.dark.icon.color.200}"
|
|
623
724
|
},
|
|
624
725
|
"inverse": {
|
|
726
|
+
"description": "Use as the color for icons that are placed on an inverse background color",
|
|
625
727
|
"type": "color",
|
|
626
728
|
"value": "{global.dark.icon.color.300}"
|
|
627
729
|
},
|
|
628
730
|
"disabled": {
|
|
629
|
-
"description": "for
|
|
731
|
+
"description": "Use as the color for icons that show in disabled icon buttons and/or when paired with disabled-color text",
|
|
630
732
|
"type": "color",
|
|
631
733
|
"value": "{global.dark.color.disabled.200}"
|
|
632
734
|
},
|
|
633
735
|
"on-disabled": {
|
|
634
|
-
"description": "
|
|
736
|
+
"description": "Use as the color for icons that are placed on a disabled background color and/or are paired with on-disabled colored text.",
|
|
635
737
|
"type": "color",
|
|
636
738
|
"value": "{global.dark.color.disabled.300}"
|
|
637
739
|
},
|
|
638
740
|
"severity": {
|
|
639
741
|
"undefined": {
|
|
640
742
|
"default": {
|
|
743
|
+
"description": "Use as the default color for severity icons that don’t communicate a specific severity level for issues.",
|
|
641
744
|
"type": "color",
|
|
642
745
|
"value": "{global.dark.color.severity.undefined.100}"
|
|
643
746
|
}
|
|
644
747
|
},
|
|
645
748
|
"none": {
|
|
646
749
|
"default": {
|
|
750
|
+
"description": "Use as the default color for severity icons that identify no issues.",
|
|
647
751
|
"type": "color",
|
|
648
752
|
"value": "{global.dark.color.severity.none.100}"
|
|
649
753
|
}
|
|
650
754
|
},
|
|
651
755
|
"minor": {
|
|
652
756
|
"default": {
|
|
757
|
+
"description": "Use as the default color for severity icons that identify issues of minor severity.",
|
|
653
758
|
"type": "color",
|
|
654
759
|
"value": "{global.dark.color.severity.minor.100}"
|
|
655
760
|
}
|
|
656
761
|
},
|
|
657
762
|
"moderate": {
|
|
658
763
|
"default": {
|
|
764
|
+
"description": "Use as the default color for severity icons that identify issues of moderate severity.",
|
|
659
765
|
"type": "color",
|
|
660
766
|
"value": "{global.dark.color.severity.moderate.100}"
|
|
661
767
|
}
|
|
662
768
|
},
|
|
663
769
|
"important": {
|
|
664
770
|
"default": {
|
|
771
|
+
"description": "Use as the default color for severity icons that identify issues of important severity.",
|
|
665
772
|
"type": "color",
|
|
666
773
|
"value": "{global.dark.color.severity.important.100}"
|
|
667
774
|
}
|
|
668
775
|
},
|
|
669
776
|
"critical": {
|
|
670
777
|
"default": {
|
|
778
|
+
"description": "Use as the default color for severity icons that identify issues of critical severity.",
|
|
671
779
|
"type": "color",
|
|
672
780
|
"value": "{global.dark.color.severity.critical.100}"
|
|
673
781
|
}
|
|
@@ -676,126 +784,153 @@
|
|
|
676
784
|
"nonstatus": {
|
|
677
785
|
"on-red": {
|
|
678
786
|
"default": {
|
|
787
|
+
"description": "Use as the default color for icons that are placed on a non status red background color and/or are paired with on-red colored text.",
|
|
679
788
|
"type": "color",
|
|
680
789
|
"value": "{global.icon.color.inverse}"
|
|
681
790
|
},
|
|
682
791
|
"hover": {
|
|
792
|
+
"description": "Use as the hover state color for icons that are placed on a non status red background color and/or are paired with on-red colored text.",
|
|
683
793
|
"type": "color",
|
|
684
794
|
"value": "{global.icon.color.inverse}"
|
|
685
795
|
},
|
|
686
796
|
"clicked": {
|
|
797
|
+
"description": "Use as the clicked state color for icons that are placed on a nonstatus red background color and/or are paired with on-red colored text.",
|
|
687
798
|
"type": "color",
|
|
688
799
|
"value": "{global.icon.color.inverse}"
|
|
689
800
|
}
|
|
690
801
|
},
|
|
691
802
|
"on-orangered": {
|
|
692
803
|
"default": {
|
|
804
|
+
"description": "Use as the default color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.",
|
|
693
805
|
"type": "color",
|
|
694
806
|
"value": "{global.icon.color.inverse}"
|
|
695
807
|
},
|
|
696
808
|
"hover": {
|
|
809
|
+
"description": "Use as the hover state color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.",
|
|
697
810
|
"type": "color",
|
|
698
811
|
"value": "{global.icon.color.inverse}"
|
|
699
812
|
},
|
|
700
813
|
"clicked": {
|
|
814
|
+
"description": "Use as the clicked state color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.",
|
|
701
815
|
"type": "color",
|
|
702
816
|
"value": "{global.icon.color.inverse}"
|
|
703
817
|
}
|
|
704
818
|
},
|
|
705
819
|
"on-orange": {
|
|
706
820
|
"default": {
|
|
821
|
+
"description": "Use as the default color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.",
|
|
707
822
|
"type": "color",
|
|
708
823
|
"value": "{global.icon.color.inverse}"
|
|
709
824
|
},
|
|
710
825
|
"hover": {
|
|
826
|
+
"description": "Use as the hover state color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.",
|
|
711
827
|
"type": "color",
|
|
712
828
|
"value": "{global.icon.color.inverse}"
|
|
713
829
|
},
|
|
714
830
|
"clicked": {
|
|
831
|
+
"description": "Use as the clicked state color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.",
|
|
715
832
|
"type": "color",
|
|
716
833
|
"value": "{global.icon.color.inverse}"
|
|
717
834
|
}
|
|
718
835
|
},
|
|
719
836
|
"on-yellow": {
|
|
720
837
|
"default": {
|
|
838
|
+
"description": "Use as the default color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.",
|
|
721
839
|
"type": "color",
|
|
722
840
|
"value": "{global.icon.color.inverse}"
|
|
723
841
|
},
|
|
724
842
|
"hover": {
|
|
843
|
+
"description": "Use as the hover state color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.",
|
|
725
844
|
"type": "color",
|
|
726
845
|
"value": "{global.icon.color.inverse}"
|
|
727
846
|
},
|
|
728
847
|
"clicked": {
|
|
848
|
+
"description": "Use as the clicked state color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.",
|
|
729
849
|
"type": "color",
|
|
730
850
|
"value": "{global.icon.color.inverse}"
|
|
731
851
|
}
|
|
732
852
|
},
|
|
733
853
|
"on-green": {
|
|
734
854
|
"default": {
|
|
855
|
+
"description": "Use as the default color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.",
|
|
735
856
|
"type": "color",
|
|
736
857
|
"value": "{global.icon.color.inverse}"
|
|
737
858
|
},
|
|
738
859
|
"hover": {
|
|
860
|
+
"description": "Use as the hover state color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.",
|
|
739
861
|
"type": "color",
|
|
740
862
|
"value": "{global.icon.color.inverse}"
|
|
741
863
|
},
|
|
742
864
|
"clicked": {
|
|
865
|
+
"description": "Use as the clicked state color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.",
|
|
743
866
|
"type": "color",
|
|
744
867
|
"value": "{global.icon.color.inverse}"
|
|
745
868
|
}
|
|
746
869
|
},
|
|
747
870
|
"on-teal": {
|
|
748
871
|
"default": {
|
|
872
|
+
"description": "Use as the default color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.",
|
|
749
873
|
"type": "color",
|
|
750
874
|
"value": "{global.icon.color.inverse}"
|
|
751
875
|
},
|
|
752
876
|
"hover": {
|
|
877
|
+
"description": "Use as the hover state color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.",
|
|
753
878
|
"type": "color",
|
|
754
879
|
"value": "{global.icon.color.inverse}"
|
|
755
880
|
},
|
|
756
881
|
"clicked": {
|
|
882
|
+
"description": "Use as the clicked state color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.",
|
|
757
883
|
"type": "color",
|
|
758
884
|
"value": "{global.icon.color.inverse}"
|
|
759
885
|
}
|
|
760
886
|
},
|
|
761
887
|
"on-blue": {
|
|
762
888
|
"default": {
|
|
889
|
+
"description": "Use as the default color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.",
|
|
763
890
|
"type": "color",
|
|
764
891
|
"value": "{global.icon.color.inverse}"
|
|
765
892
|
},
|
|
766
893
|
"hover": {
|
|
894
|
+
"description": "Use as the hover state color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.",
|
|
767
895
|
"type": "color",
|
|
768
896
|
"value": "{global.icon.color.inverse}"
|
|
769
897
|
},
|
|
770
898
|
"clicked": {
|
|
899
|
+
"description": "Use as the clicked state color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.",
|
|
771
900
|
"type": "color",
|
|
772
901
|
"value": "{global.icon.color.inverse}"
|
|
773
902
|
}
|
|
774
903
|
},
|
|
775
904
|
"on-purple": {
|
|
776
905
|
"default": {
|
|
906
|
+
"description": "Use as the default color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.",
|
|
777
907
|
"type": "color",
|
|
778
908
|
"value": "{global.icon.color.inverse}"
|
|
779
909
|
},
|
|
780
910
|
"hover": {
|
|
911
|
+
"description": "Use as the hover state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.",
|
|
781
912
|
"type": "color",
|
|
782
913
|
"value": "{global.icon.color.inverse}"
|
|
783
914
|
},
|
|
784
915
|
"clicked": {
|
|
916
|
+
"description": "Use as the clicked state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.",
|
|
785
917
|
"type": "color",
|
|
786
918
|
"value": "{global.icon.color.inverse}"
|
|
787
919
|
}
|
|
788
920
|
},
|
|
789
921
|
"on-gray": {
|
|
790
922
|
"default": {
|
|
923
|
+
"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.",
|
|
791
924
|
"type": "color",
|
|
792
925
|
"value": "{global.icon.color.inverse}"
|
|
793
926
|
},
|
|
794
927
|
"hover": {
|
|
928
|
+
"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.",
|
|
795
929
|
"type": "color",
|
|
796
930
|
"value": "{global.icon.color.inverse}"
|
|
797
931
|
},
|
|
798
932
|
"clicked": {
|
|
933
|
+
"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.",
|
|
799
934
|
"type": "color",
|
|
800
935
|
"value": "{global.icon.color.inverse}"
|
|
801
936
|
}
|
|
@@ -807,14 +942,17 @@
|
|
|
807
942
|
"color": {
|
|
808
943
|
"brand": {
|
|
809
944
|
"default": {
|
|
945
|
+
"description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
|
|
810
946
|
"type": "color",
|
|
811
947
|
"value": "{global.color.brand.default}"
|
|
812
948
|
},
|
|
813
949
|
"hover": {
|
|
950
|
+
"description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
|
|
814
951
|
"type": "color",
|
|
815
952
|
"value": "{global.color.brand.hover}"
|
|
816
953
|
},
|
|
817
954
|
"clicked": {
|
|
955
|
+
"description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
|
|
818
956
|
"type": "color",
|
|
819
957
|
"value": "{global.color.brand.clicked}"
|
|
820
958
|
}
|
|
@@ -822,222 +960,270 @@
|
|
|
822
960
|
"status": {
|
|
823
961
|
"success": {
|
|
824
962
|
"default": {
|
|
963
|
+
"description": "Use as the default color for borders that convey a success status, like in alerts, notifications or status labels.",
|
|
825
964
|
"type": "color",
|
|
826
965
|
"value": "{global.color.status.success.default}"
|
|
827
966
|
},
|
|
828
967
|
"hover": {
|
|
968
|
+
"description": "Use as the hover state color for borders that convey a success status, like in alerts, notifications, or status labels.",
|
|
829
969
|
"type": "color",
|
|
830
970
|
"value": "{global.color.status.success.hover}"
|
|
831
971
|
},
|
|
832
972
|
"clicked": {
|
|
973
|
+
"description": "Use as the clicked state color for borders that convey a success status, like in alerts, notifications, or status labels.",
|
|
833
974
|
"type": "color",
|
|
834
975
|
"value": "{global.color.status.success.clicked}"
|
|
835
976
|
}
|
|
836
977
|
},
|
|
837
978
|
"warning": {
|
|
838
979
|
"default": {
|
|
980
|
+
"description": "Use as the default color for borders that convey a warning status, like in alerts, notifications or status labels.",
|
|
839
981
|
"type": "color",
|
|
840
982
|
"value": "{global.color.status.warning.default}"
|
|
841
983
|
},
|
|
842
984
|
"hover": {
|
|
985
|
+
"description": "Use as the hover state color for borders that convey a warning status, like in alerts, notifications or status labels.",
|
|
843
986
|
"type": "color",
|
|
844
987
|
"value": "{global.color.status.warning.hover}"
|
|
845
988
|
},
|
|
846
989
|
"clicked": {
|
|
990
|
+
"description": "Use as the clicked state color for borders that convey a warning status, like in alerts, notifications or status labels.",
|
|
847
991
|
"type": "color",
|
|
848
992
|
"value": "{global.color.status.warning.clicked}"
|
|
849
993
|
}
|
|
850
994
|
},
|
|
851
995
|
"danger": {
|
|
852
996
|
"default": {
|
|
997
|
+
"description": "Use as the default color for borders that convey a danger status, like in alerts, notifications or status labels.",
|
|
853
998
|
"type": "color",
|
|
854
999
|
"value": "{global.color.status.danger.default}"
|
|
855
1000
|
},
|
|
856
1001
|
"hover": {
|
|
1002
|
+
"description": "Use as the hover state color for borders that convey a danger status, like in alerts, notifications or status labels.",
|
|
857
1003
|
"type": "color",
|
|
858
1004
|
"value": "{global.color.status.danger.hover}"
|
|
859
1005
|
},
|
|
860
1006
|
"clicked": {
|
|
1007
|
+
"description": "Use as the clicked state color for borders that convey a danger status, like in alerts, notifications or status labels.",
|
|
861
1008
|
"type": "color",
|
|
862
1009
|
"value": "{global.color.status.danger.clicked}"
|
|
863
1010
|
}
|
|
864
1011
|
},
|
|
865
1012
|
"info": {
|
|
866
1013
|
"default": {
|
|
1014
|
+
"description": "Use as the default color for borders that convey an info status, like in alerts, notifications or status labels.",
|
|
867
1015
|
"type": "color",
|
|
868
1016
|
"value": "{global.color.status.info.default}"
|
|
869
1017
|
},
|
|
870
1018
|
"hover": {
|
|
1019
|
+
"description": "Use as the hover state color for borders that convey an info status, like in alerts, notifications or status labels.",
|
|
871
1020
|
"type": "color",
|
|
872
1021
|
"value": "{global.color.status.info.hover}"
|
|
873
1022
|
},
|
|
874
1023
|
"clicked": {
|
|
1024
|
+
"description": "Use as the clicked state color for borders that convey an info status, like in alerts, notifications or status labels.",
|
|
875
1025
|
"type": "color",
|
|
876
1026
|
"value": "{global.color.status.info.clicked}"
|
|
877
1027
|
}
|
|
878
1028
|
},
|
|
879
1029
|
"custom": {
|
|
880
1030
|
"default": {
|
|
1031
|
+
"description": "Use as the default color for borders that convey a custom status, like in alerts, notifications or status labels.",
|
|
881
1032
|
"type": "color",
|
|
882
1033
|
"value": "{global.color.status.custom.default}"
|
|
883
1034
|
},
|
|
884
1035
|
"hover": {
|
|
1036
|
+
"description": "Use as the hover state color for borders that convey a custom status, like in alerts, notifications or status labels.",
|
|
885
1037
|
"type": "color",
|
|
886
1038
|
"value": "{global.color.status.custom.hover}"
|
|
887
1039
|
},
|
|
888
1040
|
"clicked": {
|
|
1041
|
+
"description": "Use as the clicked state color for borders that convey a custom status, like in alerts, notifications or status labels.",
|
|
889
1042
|
"type": "color",
|
|
890
1043
|
"value": "{global.color.status.custom.clicked}"
|
|
891
1044
|
}
|
|
892
1045
|
}
|
|
893
1046
|
},
|
|
894
1047
|
"default": {
|
|
1048
|
+
"description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.",
|
|
895
1049
|
"type": "color",
|
|
896
1050
|
"value": "{global.dark.border.color.200}"
|
|
897
1051
|
},
|
|
898
1052
|
"hover": {
|
|
1053
|
+
"description": "Use as the hover state border color for elements like form inputs, menu toggles, cards, etc.",
|
|
899
1054
|
"type": "color",
|
|
900
1055
|
"value": "{global.dark.color.brand.100}"
|
|
901
1056
|
},
|
|
902
1057
|
"clicked": {
|
|
1058
|
+
"description": "Use as the clicked state border color for elements like form inputs, menu toggles, cards, etc.",
|
|
903
1059
|
"type": "color",
|
|
904
1060
|
"value": "{global.dark.color.brand.200}"
|
|
905
1061
|
},
|
|
906
1062
|
"disabled": {
|
|
1063
|
+
"description": "Use as the disabled border color for elements like form inputs, menu toggles, cards, etc.",
|
|
907
1064
|
"type": "color",
|
|
908
1065
|
"value": "{global.dark.color.disabled.200}"
|
|
909
1066
|
},
|
|
910
1067
|
"alt": {
|
|
1068
|
+
"description": "Use when border color needs to match the primary bkg color – helpful when you want a divider to look like negative space when shown on a colored bkg",
|
|
911
1069
|
"type": "color",
|
|
912
1070
|
"value": "{global.background.color.primary.default}"
|
|
913
1071
|
},
|
|
914
1072
|
"on-secondary": {
|
|
1073
|
+
"description": "Use on borders/dividers that are placed on a secondary bkg color.",
|
|
915
1074
|
"type": "color",
|
|
916
1075
|
"value": "{global.dark.border.color.200}"
|
|
917
1076
|
},
|
|
918
1077
|
"nonstatus": {
|
|
919
1078
|
"red": {
|
|
920
1079
|
"default": {
|
|
1080
|
+
"description": "Use as the default border color for any element that does not convey status and that you always will want to be red (i.e. color-coded labels, banners, etc.)",
|
|
921
1081
|
"type": "color",
|
|
922
1082
|
"value": "{global.dark.color.nonstatus.red.100}"
|
|
923
1083
|
},
|
|
924
1084
|
"hover": {
|
|
1085
|
+
"description": "Use as the hover state border color for any element that does not convey status and that you always will want to be red (i.e. color-coded labels)",
|
|
925
1086
|
"type": "color",
|
|
926
1087
|
"value": "{global.dark.color.nonstatus.red.200}"
|
|
927
1088
|
},
|
|
928
1089
|
"clicked": {
|
|
1090
|
+
"description": "Use as the clicked state border color for any element that does not convey status and that you always will want to be red (i.e. color-coded labels)",
|
|
929
1091
|
"type": "color",
|
|
930
1092
|
"value": "{global.dark.color.nonstatus.red.200}"
|
|
931
1093
|
}
|
|
932
1094
|
},
|
|
933
1095
|
"orangered": {
|
|
934
1096
|
"default": {
|
|
1097
|
+
"description": "Use as the default border color for any element that does not convey status and that you always will want to be orangered (i.e. color-coded labels)",
|
|
935
1098
|
"type": "color",
|
|
936
1099
|
"value": "{global.dark.color.nonstatus.orangered.100}"
|
|
937
1100
|
},
|
|
938
1101
|
"hover": {
|
|
1102
|
+
"description": "Use as the hover state border color for any element that does not convey status and that you always will want to be orangered (i.e. color-coded labels)",
|
|
939
1103
|
"type": "color",
|
|
940
1104
|
"value": "{global.dark.color.nonstatus.orangered.200}"
|
|
941
1105
|
},
|
|
942
1106
|
"clicked": {
|
|
1107
|
+
"description": "Use as the clicked state border color for any element that does not convey status and that you always will want to be orangered (i.e. color-coded labels)",
|
|
943
1108
|
"type": "color",
|
|
944
1109
|
"value": "{global.dark.color.nonstatus.orangered.200}"
|
|
945
1110
|
}
|
|
946
1111
|
},
|
|
947
1112
|
"orange": {
|
|
948
1113
|
"default": {
|
|
1114
|
+
"description": "Use as the default border color for any element that does not convey status and that you always will want to be orange (i.e. color-coded labels)",
|
|
949
1115
|
"type": "color",
|
|
950
1116
|
"value": "{global.dark.color.nonstatus.orange.100}"
|
|
951
1117
|
},
|
|
952
1118
|
"hover": {
|
|
1119
|
+
"description": "Use as the hover state border color for any element that does not convey status and that you always will want to be orange (i.e. color-coded labels)",
|
|
953
1120
|
"type": "color",
|
|
954
1121
|
"value": "{global.dark.color.nonstatus.orange.200}"
|
|
955
1122
|
},
|
|
956
1123
|
"clicked": {
|
|
1124
|
+
"description": "Use as the clicked state border color for any element that does not convey status and that you always will want to be orange (i.e. color-coded labels)",
|
|
957
1125
|
"type": "color",
|
|
958
1126
|
"value": "{global.dark.color.nonstatus.orange.200}"
|
|
959
1127
|
}
|
|
960
1128
|
},
|
|
961
1129
|
"yellow": {
|
|
962
1130
|
"default": {
|
|
1131
|
+
"description": "Use as the default border color for any element that does not convey status and that you always will want to be yellow (i.e. color-coded labels)",
|
|
963
1132
|
"type": "color",
|
|
964
|
-
"value": "{global.dark.color.nonstatus.
|
|
1133
|
+
"value": "{global.dark.color.nonstatus.yellow.100}"
|
|
965
1134
|
},
|
|
966
1135
|
"hover": {
|
|
1136
|
+
"description": "Use as the hover state border color for any element that does not convey status and that you always will want to be yellow (i.e. color-coded labels)",
|
|
967
1137
|
"type": "color",
|
|
968
|
-
"value": "{global.dark.color.nonstatus.
|
|
1138
|
+
"value": "{global.dark.color.nonstatus.yellow.200}"
|
|
969
1139
|
},
|
|
970
1140
|
"clicked": {
|
|
1141
|
+
"description": "Use as the clicked state border color for any element that does not convey status and that you always will want to be yellow (i.e. color-coded labels)",
|
|
971
1142
|
"type": "color",
|
|
972
|
-
"value": "{global.dark.color.nonstatus.
|
|
1143
|
+
"value": "{global.dark.color.nonstatus.yellow.200}"
|
|
973
1144
|
}
|
|
974
1145
|
},
|
|
975
1146
|
"green": {
|
|
976
1147
|
"default": {
|
|
1148
|
+
"description": "Use as the default border color for any element that does not convey status and that you always will want to be green (i.e. color-coded labels)",
|
|
977
1149
|
"type": "color",
|
|
978
1150
|
"value": "{global.dark.color.nonstatus.green.100}"
|
|
979
1151
|
},
|
|
980
1152
|
"hover": {
|
|
1153
|
+
"description": "Use as the hover state border color for any element that does not convey status and that you always will want to be green (i.e. color-coded labels)",
|
|
981
1154
|
"type": "color",
|
|
982
1155
|
"value": "{global.dark.color.nonstatus.green.200}"
|
|
983
1156
|
},
|
|
984
1157
|
"clicked": {
|
|
1158
|
+
"description": "Use as the clicked state border color for any element that does not convey status and that you always will want to be green (i.e. color-coded labels)",
|
|
985
1159
|
"type": "color",
|
|
986
1160
|
"value": "{global.dark.color.nonstatus.green.200}"
|
|
987
1161
|
}
|
|
988
1162
|
},
|
|
989
1163
|
"teal": {
|
|
990
1164
|
"default": {
|
|
1165
|
+
"description": "Use as the default border color for any element that does not convey status and that you always will want to be teal (i.e. color-coded labels)",
|
|
991
1166
|
"type": "color",
|
|
992
|
-
"value": "{global.dark.color.nonstatus.
|
|
1167
|
+
"value": "{global.dark.color.nonstatus.teal.100}"
|
|
993
1168
|
},
|
|
994
1169
|
"hover": {
|
|
1170
|
+
"description": "Use as the hover state border color for any element that does not convey status and that you always will want to be teal (i.e. color-coded labels)",
|
|
995
1171
|
"type": "color",
|
|
996
|
-
"value": "{global.dark.color.nonstatus.
|
|
1172
|
+
"value": "{global.dark.color.nonstatus.teal.200}"
|
|
997
1173
|
},
|
|
998
1174
|
"clicked": {
|
|
1175
|
+
"description": "Use as the clicked state border color for any element that does not convey status and that you always will want to be teal (i.e. color-coded labels)",
|
|
999
1176
|
"type": "color",
|
|
1000
|
-
"value": "{global.dark.color.nonstatus.
|
|
1177
|
+
"value": "{global.dark.color.nonstatus.teal.200}"
|
|
1001
1178
|
}
|
|
1002
1179
|
},
|
|
1003
1180
|
"blue": {
|
|
1004
1181
|
"default": {
|
|
1182
|
+
"description": "Use as the default border color for any element that does not convey status and that you always will want to be blue (i.e. color-coded labels)",
|
|
1005
1183
|
"type": "color",
|
|
1006
1184
|
"value": "{global.dark.color.nonstatus.blue.100}"
|
|
1007
1185
|
},
|
|
1008
1186
|
"hover": {
|
|
1187
|
+
"description": "Use as the hover state border color for any element that does not convey status and that you always will want to be blue (i.e. color-coded labels)",
|
|
1009
1188
|
"type": "color",
|
|
1010
1189
|
"value": "{global.dark.color.nonstatus.blue.200}"
|
|
1011
1190
|
},
|
|
1012
1191
|
"clicked": {
|
|
1192
|
+
"description": "Use as the clicked state border color for any element that does not convey status and that you always will want to be blue (i.e. color-coded labels)",
|
|
1013
1193
|
"type": "color",
|
|
1014
1194
|
"value": "{global.dark.color.nonstatus.blue.200}"
|
|
1015
1195
|
}
|
|
1016
1196
|
},
|
|
1017
1197
|
"purple": {
|
|
1018
1198
|
"default": {
|
|
1199
|
+
"description": "Use as the default border color for any element that does not convey status and that you always will want to be purple (i.e. color-coded labels)",
|
|
1019
1200
|
"type": "color",
|
|
1020
1201
|
"value": "{global.dark.color.nonstatus.purple.100}"
|
|
1021
1202
|
},
|
|
1022
1203
|
"hover": {
|
|
1204
|
+
"description": "Use as the hover state border color for any element that does not convey status and that you always will want to be purple (i.e. color-coded labels)",
|
|
1023
1205
|
"type": "color",
|
|
1024
1206
|
"value": "{global.dark.color.nonstatus.purple.200}"
|
|
1025
1207
|
},
|
|
1026
1208
|
"clicked": {
|
|
1209
|
+
"description": "Use as the clicked state border color for any element that does not convey status and that you always will want to be purple (i.e. color-coded labels)",
|
|
1027
1210
|
"type": "color",
|
|
1028
1211
|
"value": "{global.dark.color.nonstatus.purple.200}"
|
|
1029
1212
|
}
|
|
1030
1213
|
},
|
|
1031
1214
|
"gray": {
|
|
1032
1215
|
"default": {
|
|
1216
|
+
"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)",
|
|
1033
1217
|
"type": "color",
|
|
1034
1218
|
"value": "{global.dark.color.nonstatus.gray.100}"
|
|
1035
1219
|
},
|
|
1036
1220
|
"hover": {
|
|
1221
|
+
"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)",
|
|
1037
1222
|
"type": "color",
|
|
1038
1223
|
"value": "{global.dark.color.nonstatus.gray.200}"
|
|
1039
1224
|
},
|
|
1040
1225
|
"clicked": {
|
|
1226
|
+
"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)",
|
|
1041
1227
|
"type": "color",
|
|
1042
1228
|
"value": "{global.dark.color.nonstatus.gray.200}"
|
|
1043
1229
|
}
|
|
@@ -1049,77 +1235,92 @@
|
|
|
1049
1235
|
"color": {
|
|
1050
1236
|
"link": {
|
|
1051
1237
|
"default": {
|
|
1238
|
+
"description": "Use as the default text color for links.",
|
|
1052
1239
|
"type": "color",
|
|
1053
1240
|
"value": "{global.dark.text.color.link.100}"
|
|
1054
1241
|
},
|
|
1055
1242
|
"hover": {
|
|
1243
|
+
"description": "Use as the hover state text color for links.",
|
|
1056
1244
|
"type": "color",
|
|
1057
1245
|
"value": "{global.dark.text.color.link.200}"
|
|
1058
1246
|
},
|
|
1059
1247
|
"visited": {
|
|
1248
|
+
"description": "Use as the color to indicate that a link has been visited.",
|
|
1060
1249
|
"type": "color",
|
|
1061
1250
|
"value": "{global.dark.text.color.link.300}"
|
|
1062
1251
|
}
|
|
1063
1252
|
},
|
|
1253
|
+
"brand": {
|
|
1254
|
+
"default": {
|
|
1255
|
+
"description": "Use as the default color for branded text.",
|
|
1256
|
+
"type": "color",
|
|
1257
|
+
"value": "{global.dark.color.brand.200}"
|
|
1258
|
+
},
|
|
1259
|
+
"hover": {
|
|
1260
|
+
"description": "Use as the hover state color for branded text.",
|
|
1261
|
+
"type": "color",
|
|
1262
|
+
"value": "{global.dark.color.brand.300}"
|
|
1263
|
+
},
|
|
1264
|
+
"clicked": {
|
|
1265
|
+
"description": "Use as the clicked state color for branded text.",
|
|
1266
|
+
"type": "color",
|
|
1267
|
+
"value": "{global.dark.color.brand.300}"
|
|
1268
|
+
}
|
|
1269
|
+
},
|
|
1064
1270
|
"regular": {
|
|
1271
|
+
"description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.",
|
|
1065
1272
|
"type": "color",
|
|
1066
1273
|
"value": "{global.dark.text.color.100}"
|
|
1067
1274
|
},
|
|
1068
1275
|
"subtle": {
|
|
1276
|
+
"description": "Use as a subtle text color for text in an element that is secondary or less important, like descriptions or inactive tab labels.",
|
|
1069
1277
|
"type": "color",
|
|
1070
1278
|
"value": "{global.dark.text.color.200}"
|
|
1071
1279
|
},
|
|
1072
1280
|
"inverse": {
|
|
1281
|
+
"description": "Use as the color of text that is placed on an inverse background color, like tooltips.",
|
|
1073
1282
|
"type": "color",
|
|
1074
1283
|
"value": "{global.dark.text.color.300}"
|
|
1075
1284
|
},
|
|
1076
1285
|
"on-brand": {
|
|
1077
1286
|
"default": {
|
|
1287
|
+
"description": "Use as the default color for text placed on a brand-colored background.",
|
|
1078
1288
|
"type": "color",
|
|
1079
1289
|
"value": "{global.text.color.inverse}"
|
|
1080
1290
|
},
|
|
1081
1291
|
"hover": {
|
|
1292
|
+
"description": "Use as the hover state color for text placed on a brand-colored background.",
|
|
1082
1293
|
"type": "color",
|
|
1083
1294
|
"value": "{global.text.color.inverse}"
|
|
1084
1295
|
},
|
|
1085
1296
|
"clicked": {
|
|
1297
|
+
"description": "Use as the clicked state color for text placed on a brand-colored background.",
|
|
1086
1298
|
"type": "color",
|
|
1087
1299
|
"value": "{global.text.color.inverse}"
|
|
1088
1300
|
}
|
|
1089
1301
|
},
|
|
1090
1302
|
"placeholder": {
|
|
1303
|
+
"description": "Use as the color of text that serves as a placeholder, like within a search bar/input.",
|
|
1091
1304
|
"type": "color",
|
|
1092
1305
|
"value": "{global.text.color.subtle}"
|
|
1093
1306
|
},
|
|
1094
1307
|
"disabled": {
|
|
1095
|
-
"description": "
|
|
1308
|
+
"description": "Use as the color of text on disabled elements, like disabled menu items.",
|
|
1096
1309
|
"type": "color",
|
|
1097
1310
|
"value": "{global.dark.color.disabled.200}"
|
|
1098
1311
|
},
|
|
1099
1312
|
"on-disabled": {
|
|
1100
|
-
"description": "
|
|
1313
|
+
"description": "Use as the color of text that is placed on a disabled background, like disabled menu toggles or tabs.",
|
|
1101
1314
|
"type": "color",
|
|
1102
1315
|
"value": "{global.dark.color.disabled.300}"
|
|
1103
1316
|
},
|
|
1104
|
-
"brand": {
|
|
1105
|
-
"default": {
|
|
1106
|
-
"type": "color",
|
|
1107
|
-
"value": "{global.dark.color.brand.200}"
|
|
1108
|
-
},
|
|
1109
|
-
"hover": {
|
|
1110
|
-
"type": "color",
|
|
1111
|
-
"value": "{global.dark.color.brand.300}"
|
|
1112
|
-
},
|
|
1113
|
-
"clicked": {
|
|
1114
|
-
"type": "color",
|
|
1115
|
-
"value": "{global.dark.color.brand.300}"
|
|
1116
|
-
}
|
|
1117
|
-
},
|
|
1118
1317
|
"required": {
|
|
1318
|
+
"description": "Use as the color of text that signals that action/information is required from users, like asterisks placed beside form fields or checkboxes.",
|
|
1119
1319
|
"type": "color",
|
|
1120
1320
|
"value": "{global.dark.text.color.400}"
|
|
1121
1321
|
},
|
|
1122
1322
|
"on-highlight": {
|
|
1323
|
+
"description": "Use as the color of text that is highlighted.",
|
|
1123
1324
|
"type": "color",
|
|
1124
1325
|
"value": "{global.dark.text.color.300}"
|
|
1125
1326
|
},
|
|
@@ -1140,14 +1341,17 @@
|
|
|
1140
1341
|
},
|
|
1141
1342
|
"on-success": {
|
|
1142
1343
|
"default": {
|
|
1344
|
+
"description": "Use as the default color for text that is placed on a success background color, like in banners.",
|
|
1143
1345
|
"type": "color",
|
|
1144
1346
|
"value": "{global.text.color.inverse}"
|
|
1145
1347
|
},
|
|
1146
1348
|
"hover": {
|
|
1349
|
+
"description": "Use as the hover state color for text that is placed on a success background color, like in banners.",
|
|
1147
1350
|
"type": "color",
|
|
1148
1351
|
"value": "{global.text.color.inverse}"
|
|
1149
1352
|
},
|
|
1150
1353
|
"clicked": {
|
|
1354
|
+
"description": "Use as the clicked state color for text that is placed on a success background color, like in banners.",
|
|
1151
1355
|
"type": "color",
|
|
1152
1356
|
"value": "{global.text.color.inverse}"
|
|
1153
1357
|
}
|
|
@@ -1168,98 +1372,119 @@
|
|
|
1168
1372
|
},
|
|
1169
1373
|
"on-warning": {
|
|
1170
1374
|
"default": {
|
|
1375
|
+
"description": "Use as the default color for text that is placed on a warning background color, like in banners.",
|
|
1171
1376
|
"type": "color",
|
|
1172
1377
|
"value": "{global.text.color.inverse}"
|
|
1173
1378
|
},
|
|
1174
1379
|
"hover": {
|
|
1380
|
+
"description": "Use as the hover state color for text that is placed on a warning background color, like in banners.",
|
|
1175
1381
|
"type": "color",
|
|
1176
1382
|
"value": "{global.text.color.inverse}"
|
|
1177
1383
|
},
|
|
1178
1384
|
"clicked": {
|
|
1385
|
+
"description": "Use as the clicked state color for text that is placed on a warning background color, like in banners.",
|
|
1179
1386
|
"type": "color",
|
|
1180
1387
|
"value": "{global.text.color.inverse}"
|
|
1181
1388
|
}
|
|
1182
1389
|
},
|
|
1183
1390
|
"danger": {
|
|
1184
1391
|
"default": {
|
|
1392
|
+
"description": "Use as the default color for text that communicates a danger status.",
|
|
1185
1393
|
"type": "color",
|
|
1186
1394
|
"value": "{global.dark.color.status.danger.250}"
|
|
1187
1395
|
},
|
|
1188
1396
|
"hover": {
|
|
1397
|
+
"description": "Use as the hover state color for text that communicates a danger status.",
|
|
1189
1398
|
"type": "color",
|
|
1190
1399
|
"value": "{global.dark.color.status.danger.300}"
|
|
1191
1400
|
},
|
|
1192
1401
|
"clicked": {
|
|
1402
|
+
"description": "Use as the clicked state color for text that communicates a danger status.",
|
|
1193
1403
|
"type": "color",
|
|
1194
1404
|
"value": "{global.dark.color.status.danger.300}"
|
|
1195
1405
|
}
|
|
1196
1406
|
},
|
|
1197
1407
|
"on-danger": {
|
|
1198
1408
|
"default": {
|
|
1409
|
+
"description": "Use as the default color for text that is placed on a danger background color, like in banners.",
|
|
1199
1410
|
"type": "color",
|
|
1200
1411
|
"value": "{global.text.color.inverse}"
|
|
1201
1412
|
},
|
|
1202
1413
|
"hover": {
|
|
1414
|
+
"description": "Use as the hover state color for text that is placed on a danger background color, like in banners.",
|
|
1203
1415
|
"type": "color",
|
|
1204
1416
|
"value": "{global.text.color.inverse}"
|
|
1205
1417
|
},
|
|
1206
1418
|
"clicked": {
|
|
1419
|
+
"description": "Use as the clicked state color for text that is placed on a danger background color, like in banners.",
|
|
1207
1420
|
"type": "color",
|
|
1208
1421
|
"value": "{global.text.color.inverse}"
|
|
1209
1422
|
}
|
|
1210
1423
|
},
|
|
1211
1424
|
"info": {
|
|
1212
1425
|
"default": {
|
|
1426
|
+
"description": "Use as the default color for text that communicates am info status.",
|
|
1213
1427
|
"type": "color",
|
|
1214
1428
|
"value": "{global.color.status.info.default}"
|
|
1215
1429
|
},
|
|
1216
1430
|
"hover": {
|
|
1431
|
+
"description": "Use as the hover state color for text that communicates an infostatus.",
|
|
1217
1432
|
"type": "color",
|
|
1218
1433
|
"value": "{global.color.status.info.hover}"
|
|
1219
1434
|
},
|
|
1220
1435
|
"clicked": {
|
|
1436
|
+
"description": "Use as the clicked state color for text that communicates an info status.",
|
|
1221
1437
|
"type": "color",
|
|
1222
1438
|
"value": "{global.color.status.info.clicked}"
|
|
1223
1439
|
}
|
|
1224
1440
|
},
|
|
1225
1441
|
"on-info": {
|
|
1226
1442
|
"default": {
|
|
1443
|
+
"description": "Use as the default color for text that is placed on an info background color, like in banners.",
|
|
1227
1444
|
"type": "color",
|
|
1228
1445
|
"value": "{global.text.color.inverse}"
|
|
1229
1446
|
},
|
|
1230
1447
|
"hover": {
|
|
1448
|
+
"description": "Use as the hover state color for text that is placed on an info background color, like in banners.",
|
|
1231
1449
|
"type": "color",
|
|
1232
1450
|
"value": "{global.text.color.inverse}"
|
|
1233
1451
|
},
|
|
1234
1452
|
"clicked": {
|
|
1453
|
+
"description": "Use as the clicked state color for text that is placed on an info background color, like in banners.",
|
|
1235
1454
|
"type": "color",
|
|
1236
1455
|
"value": "{global.text.color.inverse}"
|
|
1237
1456
|
}
|
|
1238
1457
|
},
|
|
1239
1458
|
"custom": {
|
|
1240
1459
|
"default": {
|
|
1460
|
+
"description": "Use as the default color for text that communicates a custom status.",
|
|
1241
1461
|
"type": "color",
|
|
1242
1462
|
"value": "{global.color.status.custom.default}"
|
|
1243
1463
|
},
|
|
1244
1464
|
"hover": {
|
|
1465
|
+
"description": "Use as the hover state color for text that communicates a custom status.",
|
|
1245
1466
|
"type": "color",
|
|
1246
1467
|
"value": "{global.color.status.custom.hover}"
|
|
1247
1468
|
},
|
|
1248
1469
|
"clicked": {
|
|
1470
|
+
"description": "Use as the clicked state color for text that communicates a custom status.",
|
|
1249
1471
|
"type": "color",
|
|
1250
1472
|
"value": "{global.color.status.custom.clicked}"
|
|
1251
1473
|
}
|
|
1252
1474
|
},
|
|
1253
1475
|
"on-custom": {
|
|
1254
1476
|
"default": {
|
|
1477
|
+
"description": "Use as the default color for text that is placed on a custom background color, like in banners.",
|
|
1255
1478
|
"type": "color",
|
|
1256
1479
|
"value": "{global.text.color.inverse}"
|
|
1257
1480
|
},
|
|
1258
1481
|
"hover": {
|
|
1482
|
+
"description": "Use as the hover state color for text that is placed on a custom background color, like in banners.",
|
|
1259
1483
|
"type": "color",
|
|
1260
1484
|
"value": "{global.text.color.inverse}"
|
|
1261
1485
|
},
|
|
1262
1486
|
"clicked": {
|
|
1487
|
+
"description": "Use as the clicked state color for text that is placed on a custom background color, like in banners.",
|
|
1263
1488
|
"type": "color",
|
|
1264
1489
|
"value": "{global.text.color.inverse}"
|
|
1265
1490
|
}
|
|
@@ -1267,28 +1492,34 @@
|
|
|
1267
1492
|
"unread": {
|
|
1268
1493
|
"on-default": {
|
|
1269
1494
|
"default": {
|
|
1495
|
+
"description": "Use as the default color for text that is placed in elements that convey an unread status, like badges and stateful buttons.",
|
|
1270
1496
|
"type": "color",
|
|
1271
1497
|
"value": "{global.text.color.inverse}"
|
|
1272
1498
|
},
|
|
1273
1499
|
"hover": {
|
|
1500
|
+
"description": "Use as the hover state color for text that is placed in elements that convey an unread status, like badges and stateful buttons.",
|
|
1274
1501
|
"type": "color",
|
|
1275
1502
|
"value": "{global.text.color.inverse}"
|
|
1276
1503
|
},
|
|
1277
1504
|
"clicked": {
|
|
1505
|
+
"description": "Use as the clicked state color for text that is placed in elements that convey an unread status, like badges and stateful buttons.",
|
|
1278
1506
|
"type": "color",
|
|
1279
1507
|
"value": "{global.text.color.inverse}"
|
|
1280
1508
|
}
|
|
1281
1509
|
},
|
|
1282
1510
|
"on-attention": {
|
|
1283
1511
|
"default": {
|
|
1512
|
+
"description": "Use as the default color for text that is placed in elements that convey an unread status and require greater attention like badges and stateful buttons.",
|
|
1284
1513
|
"type": "color",
|
|
1285
1514
|
"value": "{global.text.color.inverse}"
|
|
1286
1515
|
},
|
|
1287
1516
|
"hover": {
|
|
1517
|
+
"description": "Use as the hover state color for text that is placed in elements that convey an unread status and require greater attention like badges and stateful buttons.",
|
|
1288
1518
|
"type": "color",
|
|
1289
1519
|
"value": "{global.text.color.inverse}"
|
|
1290
1520
|
},
|
|
1291
1521
|
"clicked": {
|
|
1522
|
+
"description": "Use as the clicked state color for text that is placed in elements that convey an unread status and require greater attention like badges and stateful buttons.",
|
|
1292
1523
|
"type": "color",
|
|
1293
1524
|
"value": "{global.text.color.inverse}"
|
|
1294
1525
|
}
|
|
@@ -1298,126 +1529,153 @@
|
|
|
1298
1529
|
"nonstatus": {
|
|
1299
1530
|
"on-red": {
|
|
1300
1531
|
"default": {
|
|
1532
|
+
"description": "Use as the default color for text that is placed on a nonstatus red background color.",
|
|
1301
1533
|
"type": "color",
|
|
1302
1534
|
"value": "{global.text.color.inverse}"
|
|
1303
1535
|
},
|
|
1304
1536
|
"hover": {
|
|
1537
|
+
"description": "Use as the hover state color for text that is placed on a nonstatus red background color.",
|
|
1305
1538
|
"type": "color",
|
|
1306
1539
|
"value": "{global.text.color.inverse}"
|
|
1307
1540
|
},
|
|
1308
1541
|
"clicked": {
|
|
1542
|
+
"description": "Use as the clicked state color for text that is placed on a nonstatus red background color.",
|
|
1309
1543
|
"type": "color",
|
|
1310
1544
|
"value": "{global.text.color.inverse}"
|
|
1311
1545
|
}
|
|
1312
1546
|
},
|
|
1313
1547
|
"on-orangered": {
|
|
1314
1548
|
"default": {
|
|
1549
|
+
"description": "Use as the default color for text that is placed on a nonstatus orangered background color.",
|
|
1315
1550
|
"type": "color",
|
|
1316
1551
|
"value": "{global.text.color.inverse}"
|
|
1317
1552
|
},
|
|
1318
1553
|
"hover": {
|
|
1554
|
+
"description": "Use as the hover state color for text that is placed on a nonstatus orangered background color.",
|
|
1319
1555
|
"type": "color",
|
|
1320
1556
|
"value": "{global.text.color.inverse}"
|
|
1321
1557
|
},
|
|
1322
1558
|
"clicked": {
|
|
1559
|
+
"description": "Use as the clicked state color for text that is placed on a nonstatus orangered background color.",
|
|
1323
1560
|
"type": "color",
|
|
1324
1561
|
"value": "{global.text.color.inverse}"
|
|
1325
1562
|
}
|
|
1326
1563
|
},
|
|
1327
1564
|
"on-orange": {
|
|
1328
1565
|
"default": {
|
|
1566
|
+
"description": "Use as the default color for text that is placed on a nonstatus orange background color.",
|
|
1329
1567
|
"type": "color",
|
|
1330
1568
|
"value": "{global.text.color.inverse}"
|
|
1331
1569
|
},
|
|
1332
1570
|
"hover": {
|
|
1571
|
+
"description": "Use as the hover state color for text that is placed on a nonstatus orange background color.",
|
|
1333
1572
|
"type": "color",
|
|
1334
1573
|
"value": "{global.text.color.inverse}"
|
|
1335
1574
|
},
|
|
1336
1575
|
"clicked": {
|
|
1576
|
+
"description": "Use as the clicked state color for text that is placed on a nonstatus orange background color.",
|
|
1337
1577
|
"type": "color",
|
|
1338
1578
|
"value": "{global.text.color.inverse}"
|
|
1339
1579
|
}
|
|
1340
1580
|
},
|
|
1341
1581
|
"on-yellow": {
|
|
1342
1582
|
"default": {
|
|
1583
|
+
"description": "Use as the default color for text that is placed on a nonstatus yellow background color.",
|
|
1343
1584
|
"type": "color",
|
|
1344
1585
|
"value": "{global.text.color.inverse}"
|
|
1345
1586
|
},
|
|
1346
1587
|
"hover": {
|
|
1588
|
+
"description": "Use as the hover state color for text that is placed on a nonstatus yellow background color.",
|
|
1347
1589
|
"type": "color",
|
|
1348
1590
|
"value": "{global.text.color.inverse}"
|
|
1349
1591
|
},
|
|
1350
1592
|
"clicked": {
|
|
1593
|
+
"description": "Use as the clicked state color for text that is placed on a nonstatus yellow background color.",
|
|
1351
1594
|
"type": "color",
|
|
1352
1595
|
"value": "{global.text.color.inverse}"
|
|
1353
1596
|
}
|
|
1354
1597
|
},
|
|
1355
1598
|
"on-green": {
|
|
1356
1599
|
"default": {
|
|
1600
|
+
"description": "Use as the default color for text that is placed on a nonstatus green background color.",
|
|
1357
1601
|
"type": "color",
|
|
1358
1602
|
"value": "{global.text.color.inverse}"
|
|
1359
1603
|
},
|
|
1360
1604
|
"hover": {
|
|
1605
|
+
"description": "Use as the hover state color for text that is placed on a nonstatus green background color.",
|
|
1361
1606
|
"type": "color",
|
|
1362
1607
|
"value": "{global.text.color.inverse}"
|
|
1363
1608
|
},
|
|
1364
1609
|
"clicked": {
|
|
1610
|
+
"description": "Use as the clicked state color for text that is placed on a nonstatus green background color.",
|
|
1365
1611
|
"type": "color",
|
|
1366
1612
|
"value": "{global.text.color.inverse}"
|
|
1367
1613
|
}
|
|
1368
1614
|
},
|
|
1369
1615
|
"on-teal": {
|
|
1370
1616
|
"default": {
|
|
1617
|
+
"description": "Use as the default color for text that is placed on a nonstatus teal background color.",
|
|
1371
1618
|
"type": "color",
|
|
1372
1619
|
"value": "{global.text.color.inverse}"
|
|
1373
1620
|
},
|
|
1374
1621
|
"hover": {
|
|
1622
|
+
"description": "Use as the hover state color for text that is placed on a nonstatus teal background color.",
|
|
1375
1623
|
"type": "color",
|
|
1376
1624
|
"value": "{global.text.color.inverse}"
|
|
1377
1625
|
},
|
|
1378
1626
|
"clicked": {
|
|
1627
|
+
"description": "Use as the clicked state color for text that is placed on a nonstatus teal background color.",
|
|
1379
1628
|
"type": "color",
|
|
1380
1629
|
"value": "{global.text.color.inverse}"
|
|
1381
1630
|
}
|
|
1382
1631
|
},
|
|
1383
1632
|
"on-blue": {
|
|
1384
1633
|
"default": {
|
|
1634
|
+
"description": "Use as the default color for text that is placed on a nonstatus blue background color.",
|
|
1385
1635
|
"type": "color",
|
|
1386
1636
|
"value": "{global.text.color.inverse}"
|
|
1387
1637
|
},
|
|
1388
1638
|
"hover": {
|
|
1639
|
+
"description": "Use as the hover state color for text that is placed on a nonstatus blue background color.",
|
|
1389
1640
|
"type": "color",
|
|
1390
1641
|
"value": "{global.text.color.inverse}"
|
|
1391
1642
|
},
|
|
1392
1643
|
"clicked": {
|
|
1644
|
+
"description": "Use as the clicked state color for text that is placed on a nonstatus blue background color.",
|
|
1393
1645
|
"type": "color",
|
|
1394
1646
|
"value": "{global.text.color.inverse}"
|
|
1395
1647
|
}
|
|
1396
1648
|
},
|
|
1397
1649
|
"on-purple": {
|
|
1398
1650
|
"default": {
|
|
1651
|
+
"description": "Use as the default color for text that is placed on a nonstatus purple background color.",
|
|
1399
1652
|
"type": "color",
|
|
1400
1653
|
"value": "{global.text.color.inverse}"
|
|
1401
1654
|
},
|
|
1402
1655
|
"hover": {
|
|
1656
|
+
"description": "Use as the hover state color for text that is placed on a nonstatus purple background color.",
|
|
1403
1657
|
"type": "color",
|
|
1404
1658
|
"value": "{global.text.color.inverse}"
|
|
1405
1659
|
},
|
|
1406
1660
|
"clicked": {
|
|
1661
|
+
"description": "Use as the clicked state color for text that is placed on a nonstatus purple background color.",
|
|
1407
1662
|
"type": "color",
|
|
1408
1663
|
"value": "{global.text.color.inverse}"
|
|
1409
1664
|
}
|
|
1410
1665
|
},
|
|
1411
1666
|
"on-gray": {
|
|
1412
1667
|
"default": {
|
|
1668
|
+
"description": "Use as the default color for text that is placed on a nonstatus gray background color.",
|
|
1413
1669
|
"type": "color",
|
|
1414
1670
|
"value": "{global.text.color.inverse}"
|
|
1415
1671
|
},
|
|
1416
1672
|
"hover": {
|
|
1673
|
+
"description": "Use as the hover state color for text that is placed on a nonstatus gray background color.",
|
|
1417
1674
|
"type": "color",
|
|
1418
1675
|
"value": "{global.text.color.inverse}"
|
|
1419
1676
|
},
|
|
1420
1677
|
"clicked": {
|
|
1678
|
+
"description": "Use as the clicked state color for text that is placed on a nonstatus gray background color.",
|
|
1421
1679
|
"type": "color",
|
|
1422
1680
|
"value": "{global.text.color.inverse}"
|
|
1423
1681
|
}
|
|
@@ -1428,14 +1686,17 @@
|
|
|
1428
1686
|
"box-shadow": {
|
|
1429
1687
|
"color": {
|
|
1430
1688
|
"sm": {
|
|
1689
|
+
"description": "Use as the color of small box-shadows.",
|
|
1431
1690
|
"type": "color",
|
|
1432
1691
|
"value": "{global.dark.box-shadow.color.100}"
|
|
1433
1692
|
},
|
|
1434
1693
|
"md": {
|
|
1694
|
+
"description": "Use as the color of medium box-shadows.",
|
|
1435
1695
|
"type": "color",
|
|
1436
1696
|
"value": "{global.dark.box-shadow.color.100}"
|
|
1437
1697
|
},
|
|
1438
1698
|
"lg": {
|
|
1699
|
+
"description": "Use as the color of large box-shadows.",
|
|
1439
1700
|
"type": "color",
|
|
1440
1701
|
"value": "{global.dark.box-shadow.color.100}"
|
|
1441
1702
|
}
|