@gitlab/ui 87.7.0 → 87.8.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 (29) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/bin/migrate_custom_utils_to_tw.bundled.mjs +51 -46
  3. package/dist/index.css +1 -1
  4. package/dist/index.css.map +1 -1
  5. package/dist/tokens/build/js/tokens.dark.js +96 -78
  6. package/dist/tokens/build/js/tokens.js +96 -78
  7. package/dist/tokens/css/tokens.css +95 -77
  8. package/dist/tokens/css/tokens.dark.css +95 -77
  9. package/dist/tokens/js/tokens.dark.js +95 -77
  10. package/dist/tokens/js/tokens.js +95 -77
  11. package/dist/tokens/json/tokens.dark.json +6046 -5624
  12. package/dist/tokens/json/tokens.json +6046 -5624
  13. package/dist/tokens/scss/_tokens.dark.scss +95 -77
  14. package/dist/tokens/scss/_tokens.scss +95 -77
  15. package/dist/tokens/scss/_tokens_custom_properties.scss +95 -77
  16. package/package.json +4 -4
  17. package/src/components/base/avatars_inline/avatars_inline.scss +2 -2
  18. package/src/components/base/badge/badge.scss +63 -63
  19. package/src/tokens/build/css/tokens.css +95 -77
  20. package/src/tokens/build/css/tokens.dark.css +95 -77
  21. package/src/tokens/build/js/tokens.dark.js +95 -77
  22. package/src/tokens/build/js/tokens.js +95 -77
  23. package/src/tokens/build/json/tokens.dark.json +6046 -5624
  24. package/src/tokens/build/json/tokens.json +6046 -5624
  25. package/src/tokens/build/scss/_tokens.dark.scss +95 -77
  26. package/src/tokens/build/scss/_tokens.scss +95 -77
  27. package/src/tokens/build/scss/_tokens_custom_properties.scss +95 -77
  28. package/src/tokens/contextual/badge.tokens.json +704 -0
  29. package/src/tokens/status.tokens.json +90 -640
package/src/tokens/status.tokens.json CHANGED
@@ -1,744 +1,194 @@
1
1
  {
2
2
  "status": {
3
- "muted": {
4
- "background": {
5
- "color": {
6
- "default": {
7
- "$value": {
8
- "default": "{color.neutral.50}",
9
- "dark": "{color.neutral.900}"
10
- },
11
- "$type": "color",
12
- "$description": "Used for the background of a subtle neutral status item when static or the default state when linked."
13
- },
14
- "active": {
15
- "$value": {
16
- "default": "{color.neutral.100}",
17
- "dark": "{color.neutral.800}"
18
- },
19
- "$type": "color",
20
- "$description": "Used for the background of a subtle neutral status item in the active state."
21
- }
22
- }
23
- },
24
- "border": {
25
- "color": {
26
- "hover": {
27
- "$value": {
28
- "default": "{color.neutral.200}",
29
- "dark": "{color.neutral.700}"
30
- },
31
- "$type": "color",
32
- "$description": "Used for the border of a subtle neutral status item in the hover state."
33
- }
34
- }
35
- },
36
- "text": {
37
- "color": {
38
- "default": {
39
- "$value": {
40
- "default": "{color.neutral.600}",
41
- "dark": "{color.neutral.300}"
42
- },
43
- "$type": "color",
44
- "$description": "Used for the text of a subtle neutral status item when static or the default state when linked."
45
- },
46
- "hover": {
47
- "$value": {
48
- "default": "{color.neutral.700}",
49
- "dark": "{color.neutral.200}"
50
- },
51
- "$type": "color",
52
- "$description": "Used for the text of a subtle neutral status item in the hover state."
53
- },
54
- "focus": {
55
- "$value": {
56
- "default": "{color.neutral.700}",
57
- "dark": "{color.neutral.200}"
58
- },
59
- "$type": "color",
60
- "$description": "Used for the text of a subtle neutral status item in the focus state."
61
- },
62
- "active": {
63
- "$value": {
64
- "default": "{color.neutral.800}",
65
- "dark": "{color.neutral.100}"
66
- },
67
- "$type": "color",
68
- "$description": "Used for the text of a subtle neutral status item in the active state."
69
- }
70
- }
71
- },
72
- "icon": {
73
- "color": {
74
- "default": {
75
- "$value": {
76
- "default": "{color.neutral.500}",
77
- "dark": "{color.neutral.400}"
78
- },
79
- "$type": "color",
80
- "$description": "Used for the icon of a subtle neutral status item when static or the default state when linked."
81
- },
82
- "hover": {
83
- "$value": {
84
- "default": "{color.neutral.600}",
85
- "dark": "{color.neutral.300}"
86
- },
87
- "$type": "color",
88
- "$description": "Used for the icon of a subtle neutral status item in the hover state."
89
- },
90
- "focus": {
91
- "$value": {
92
- "default": "{color.neutral.600}",
93
- "dark": "{color.neutral.300}"
94
- },
95
- "$type": "color",
96
- "$description": "Used for the icon of a subtle neutral status item in the focus state."
97
- },
98
- "active": {
99
- "$value": {
100
- "default": "{color.neutral.700}",
101
- "dark": "{color.neutral.200}"
102
- },
103
- "$type": "color",
104
- "$description": "Used for the icon of a subtle neutral status item in the active state."
105
- }
106
- }
107
- }
108
- },
109
3
  "neutral": {
110
4
  "background": {
111
5
  "color": {
112
- "default": {
113
- "$value": {
114
- "default": "{color.neutral.100}",
115
- "dark": "{color.neutral.800}"
116
- },
117
- "$type": "color",
118
- "$description": "Used for the background of a neutral status item when static or the default state when linked."
6
+ "$value": {
7
+ "default": "{color.neutral.100}",
8
+ "dark": "{color.neutral.800}"
119
9
  },
120
- "active": {
121
- "$value": {
122
- "default": "{color.neutral.200}",
123
- "dark": "{color.neutral.700}"
124
- },
125
- "$type": "color",
126
- "$description": "Used for the background of a neutral status item in the active state."
127
- }
128
- }
129
- },
130
- "border": {
131
- "color": {
132
- "hover": {
133
- "$value": {
134
- "default": "{color.neutral.200}",
135
- "dark": "{color.neutral.700}"
136
- },
137
- "$type": "color",
138
- "$description": "Used for the border of a neutral status item in the hover state."
139
- }
10
+ "$type": "color",
11
+ "$description": "Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state."
140
12
  }
141
13
  },
142
14
  "text": {
143
15
  "color": {
144
- "default": {
145
- "$value": {
146
- "default": "{color.neutral.700}",
147
- "dark": "{color.neutral.200}"
148
- },
149
- "$type": "color",
150
- "$description": "Used for the text of a neutral status item when static or the default state when linked."
151
- },
152
- "hover": {
153
- "$value": {
154
- "default": "{color.neutral.800}",
155
- "dark": "{color.neutral.100}"
156
- },
157
- "$type": "color",
158
- "$description": "Used for the text of a neutral status item in the hover state."
16
+ "$value": {
17
+ "default": "{color.neutral.700}",
18
+ "dark": "{color.neutral.200}"
159
19
  },
160
- "focus": {
161
- "$value": {
162
- "default": "{color.neutral.800}",
163
- "dark": "{color.neutral.100}"
164
- },
165
- "$type": "color",
166
- "$description": "Used for the text of a neutral status item in the focus state."
167
- },
168
- "active": {
169
- "$value": {
170
- "default": "{color.neutral.900}",
171
- "dark": "{color.neutral.50}"
172
- },
173
- "$type": "color",
174
- "$description": "Used for the text of a neutral status item in the active state."
175
- }
20
+ "$type": "color",
21
+ "$description": "Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state."
176
22
  }
177
23
  },
178
24
  "icon": {
179
25
  "color": {
180
- "default": {
181
- "$value": {
182
- "default": "{color.neutral.500}",
183
- "dark": "{color.neutral.400}"
184
- },
185
- "$type": "color",
186
- "$description": "Used for the icon of a neutral status item when static or the default state when linked."
187
- },
188
- "hover": {
189
- "$value": {
190
- "default": "{color.neutral.600}",
191
- "dark": "{color.neutral.300}"
192
- },
193
- "$type": "color",
194
- "$description": "Used for the icon of a neutral status item in the hover state."
26
+ "$value": {
27
+ "default": "{color.neutral.500}",
28
+ "dark": "{color.neutral.400}"
195
29
  },
196
- "focus": {
197
- "$value": {
198
- "default": "{color.neutral.600}",
199
- "dark": "{color.neutral.300}"
200
- },
201
- "$type": "color",
202
- "$description": "Used for the icon of a neutral status item in the focus state."
203
- },
204
- "active": {
205
- "$value": {
206
- "default": "{color.neutral.700}",
207
- "dark": "{color.neutral.200}"
208
- },
209
- "$type": "color",
210
- "$description": "Used for the icon of a neutral status item in the active state."
211
- }
30
+ "$type": "color",
31
+ "$description": "Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state."
212
32
  }
213
33
  }
214
34
  },
215
35
  "info": {
216
36
  "background": {
217
37
  "color": {
218
- "default": {
219
- "$value": {
220
- "default": "{color.blue.100}",
221
- "dark": "{color.blue.800}"
222
- },
223
- "$type": "color",
224
- "$description": "Used for the background of an informational status item when static or the default state when linked."
38
+ "$value": {
39
+ "default": "{color.blue.100}",
40
+ "dark": "{color.blue.800}"
225
41
  },
226
- "active": {
227
- "$value": {
228
- "default": "{color.blue.200}",
229
- "dark": "{color.blue.700}"
230
- },
231
- "$type": "color",
232
- "$description": "Used for the background of an informational status item in the active state."
233
- }
234
- }
235
- },
236
- "border": {
237
- "color": {
238
- "hover": {
239
- "$value": {
240
- "default": "{color.blue.200}",
241
- "dark": "{color.blue.700}"
242
- },
243
- "$type": "color",
244
- "$description": "Used for the border of an informational status item in the hover state."
245
- }
42
+ "$type": "color",
43
+ "$description": "Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress."
246
44
  }
247
45
  },
248
46
  "text": {
249
47
  "color": {
250
- "default": {
251
- "$value": {
252
- "default": "{color.blue.700}",
253
- "dark": "{color.blue.200}"
254
- },
255
- "$type": "color",
256
- "$description": "Used for the text of an informational status item when static or the default state when linked."
48
+ "$value": {
49
+ "default": "{color.blue.700}",
50
+ "dark": "{color.blue.200}"
257
51
  },
258
- "hover": {
259
- "$value": {
260
- "default": "{color.blue.800}",
261
- "dark": "{color.blue.100}"
262
- },
263
- "$type": "color",
264
- "$description": "Used for the text of an informational status item in the hover state."
265
- },
266
- "focus": {
267
- "$value": {
268
- "default": "{color.blue.800}",
269
- "dark": "{color.blue.100}"
270
- },
271
- "$type": "color",
272
- "$description": "Used for the text of an informational status item in the focus state."
273
- },
274
- "active": {
275
- "$value": {
276
- "default": "{color.blue.900}",
277
- "dark": "{color.blue.50}"
278
- },
279
- "$type": "color",
280
- "$description": "Used for the text of an informational status item in the active state."
281
- }
52
+ "$type": "color",
53
+ "$description": "Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress."
282
54
  }
283
55
  },
284
56
  "icon": {
285
57
  "color": {
286
- "default": {
287
- "$value": {
288
- "default": "{color.blue.500}",
289
- "dark": "{color.blue.400}"
290
- },
291
- "$type": "color",
292
- "$description": "Used for the icon of an informational status item when static or the default state when linked."
293
- },
294
- "hover": {
295
- "$value": {
296
- "default": "{color.blue.600}",
297
- "dark": "{color.blue.300}"
298
- },
299
- "$type": "color",
300
- "$description": "Used for the icon of an informational status item in the hover state."
301
- },
302
- "focus": {
303
- "$value": {
304
- "default": "{color.blue.600}",
305
- "dark": "{color.blue.300}"
306
- },
307
- "$type": "color",
308
- "$description": "Used for the icon of an informational status item in the focus state."
58
+ "$value": {
59
+ "default": "{color.blue.500}",
60
+ "dark": "{color.blue.400}"
309
61
  },
310
- "active": {
311
- "$value": {
312
- "default": "{color.blue.700}",
313
- "dark": "{color.blue.200}"
314
- },
315
- "$type": "color",
316
- "$description": "Used for the icon of an informational status item in the active state."
317
- }
62
+ "$type": "color",
63
+ "$description": "Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress."
318
64
  }
319
65
  }
320
66
  },
321
67
  "success": {
322
68
  "background": {
323
69
  "color": {
324
- "default": {
325
- "$value": {
326
- "default": "{color.green.100}",
327
- "dark": "{color.green.800}"
328
- },
329
- "$type": "color",
330
- "$description": "Used for the background of a success status item when static or the default state when linked."
70
+ "$value": {
71
+ "default": "{color.green.100}",
72
+ "dark": "{color.green.800}"
331
73
  },
332
- "active": {
333
- "$value": {
334
- "default": "{color.green.200}",
335
- "dark": "{color.green.700}"
336
- },
337
- "$type": "color",
338
- "$description": "Used for the background of a success status item in the active state."
339
- }
340
- }
341
- },
342
- "border": {
343
- "color": {
344
- "hover": {
345
- "$value": {
346
- "default": "{color.green.200}",
347
- "dark": "{color.green.700}"
348
- },
349
- "$type": "color",
350
- "$description": "Used for the border of a success status item in the hover state."
351
- }
74
+ "$type": "color",
75
+ "$description": "Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation."
352
76
  }
353
77
  },
354
78
  "text": {
355
79
  "color": {
356
- "default": {
357
- "$value": {
358
- "default": "{color.green.700}",
359
- "dark": "{color.green.200}"
360
- },
361
- "$type": "color",
362
- "$description": "Used for the text of a success status item when static or the default state when linked."
363
- },
364
- "hover": {
365
- "$value": {
366
- "default": "{color.green.800}",
367
- "dark": "{color.green.100}"
368
- },
369
- "$type": "color",
370
- "$description": "Used for the text of a success status item in the hover state."
80
+ "$value": {
81
+ "default": "{color.green.700}",
82
+ "dark": "{color.green.200}"
371
83
  },
372
- "focus": {
373
- "$value": {
374
- "default": "{color.green.800}",
375
- "dark": "{color.green.100}"
376
- },
377
- "$type": "color",
378
- "$description": "Used for the text of a success status item in the focus state."
379
- },
380
- "active": {
381
- "$value": {
382
- "default": "{color.green.900}",
383
- "dark": "{color.green.50}"
384
- },
385
- "$type": "color",
386
- "$description": "Used for the text of a success status item in the active state."
387
- }
84
+ "$type": "color",
85
+ "$description": "Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation."
388
86
  }
389
87
  },
390
88
  "icon": {
391
89
  "color": {
392
- "default": {
393
- "$value": {
394
- "default": "{color.green.500}",
395
- "dark": "{color.green.400}"
396
- },
397
- "$type": "color",
398
- "$description": "Used for the icon of a success status item when static or the default state when linked."
399
- },
400
- "hover": {
401
- "$value": {
402
- "default": "{color.green.600}",
403
- "dark": "{color.green.300}"
404
- },
405
- "$type": "color",
406
- "$description": "Used for the icon of a success status item in the hover state."
90
+ "$value": {
91
+ "default": "{color.green.500}",
92
+ "dark": "{color.green.400}"
407
93
  },
408
- "focus": {
409
- "$value": {
410
- "default": "{color.green.600}",
411
- "dark": "{color.green.300}"
412
- },
413
- "$type": "color",
414
- "$description": "Used for the icon of a success status item in the focus state."
415
- },
416
- "active": {
417
- "$value": {
418
- "default": "{color.green.700}",
419
- "dark": "{color.green.200}"
420
- },
421
- "$type": "color",
422
- "$description": "Used for the icon of a success status item in the active state."
423
- }
94
+ "$type": "color",
95
+ "$description": "Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation."
424
96
  }
425
97
  }
426
98
  },
427
99
  "warning": {
428
100
  "background": {
429
101
  "color": {
430
- "default": {
431
- "$value": {
432
- "default": "{color.orange.100}",
433
- "dark": "{color.orange.800}"
434
- },
435
- "$type": "color",
436
- "$description": "Used for the background of a warning status or confidential item when static or the default state when linked."
102
+ "$value": {
103
+ "default": "{color.orange.100}",
104
+ "dark": "{color.orange.800}"
437
105
  },
438
- "active": {
439
- "$value": {
440
- "default": "{color.orange.200}",
441
- "dark": "{color.orange.700}"
442
- },
443
- "$type": "color",
444
- "$description": "Used for the background of a warning status or confidential item in the active state."
445
- }
446
- }
447
- },
448
- "border": {
449
- "color": {
450
- "hover": {
451
- "$value": {
452
- "default": "{color.orange.200}",
453
- "dark": "{color.orange.700}"
454
- },
455
- "$type": "color",
456
- "$description": "Used for the border of a warning status or confidential item in the hover state."
457
- }
106
+ "$type": "color",
107
+ "$description": "Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item."
458
108
  }
459
109
  },
460
110
  "text": {
461
111
  "color": {
462
- "default": {
463
- "$value": {
464
- "default": "{color.orange.700}",
465
- "dark": "{color.orange.200}"
466
- },
467
- "$type": "color",
468
- "$description": "Used for the text of a warning status or confidential item when static or the default state when linked."
469
- },
470
- "hover": {
471
- "$value": {
472
- "default": "{color.orange.800}",
473
- "dark": "{color.orange.100}"
474
- },
475
- "$type": "color",
476
- "$description": "Used for the text of a warning status or confidential item in the hover state."
477
- },
478
- "focus": {
479
- "$value": {
480
- "default": "{color.orange.800}",
481
- "dark": "{color.orange.100}"
482
- },
483
- "$type": "color",
484
- "$description": "Used for the text of a warning status or confidential item in the focus state."
112
+ "$value": {
113
+ "default": "{color.orange.700}",
114
+ "dark": "{color.orange.200}"
485
115
  },
486
- "active": {
487
- "$value": {
488
- "default": "{color.orange.900}",
489
- "dark": "{color.orange.50}"
490
- },
491
- "$type": "color",
492
- "$description": "Used for the text of a warning status or confidential item in the active state.N"
493
- }
116
+ "$type": "color",
117
+ "$description": "Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item."
494
118
  }
495
119
  },
496
120
  "icon": {
497
121
  "color": {
498
- "default": {
499
- "$value": {
500
- "default": "{color.orange.500}",
501
- "dark": "{color.orange.400}"
502
- },
503
- "$type": "color",
504
- "$description": "Used for the icon of a warning status or confidential item when static or the default state when linked."
122
+ "$value": {
123
+ "default": "{color.orange.500}",
124
+ "dark": "{color.orange.400}"
505
125
  },
506
- "hover": {
507
- "$value": {
508
- "default": "{color.orange.600}",
509
- "dark": "{color.orange.300}"
510
- },
511
- "$type": "color",
512
- "$description": "Used for the icon of a warning status or confidential item in the hover state."
513
- },
514
- "focus": {
515
- "$value": {
516
- "default": "{color.orange.600}",
517
- "dark": "{color.orange.300}"
518
- },
519
- "$type": "color",
520
- "$description": "Used for the icon of a warning status or confidential item in the focus state."
521
- },
522
- "active": {
523
- "$value": {
524
- "default": "{color.orange.700}",
525
- "dark": "{color.orange.200}"
526
- },
527
- "$type": "color",
528
- "$description": "Used for the icon of a warning status or confidential item in the active state."
529
- }
126
+ "$type": "color",
127
+ "$description": "Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item."
530
128
  }
531
129
  }
532
130
  },
533
131
  "danger": {
534
132
  "background": {
535
133
  "color": {
536
- "default": {
537
- "$value": {
538
- "default": "{color.red.100}",
539
- "dark": "{color.red.800}"
540
- },
541
- "$type": "color",
542
- "$description": "Used for the background of a danger (critical) status item when static or the default state when linked."
134
+ "$value": {
135
+ "default": "{color.red.100}",
136
+ "dark": "{color.red.800}"
543
137
  },
544
- "active": {
545
- "$value": {
546
- "default": "{color.red.200}",
547
- "dark": "{color.red.700}"
548
- },
549
- "$type": "color",
550
- "$description": "Used for the background of a danger (critical) status item in the active state."
551
- }
552
- }
553
- },
554
- "border": {
555
- "color": {
556
- "hover": {
557
- "$value": {
558
- "default": "{color.red.200}",
559
- "dark": "{color.red.700}"
560
- },
561
- "$type": "color",
562
- "$description": "Used for the border of a danger (critical) status item in the hover state."
563
- }
138
+ "$type": "color",
139
+ "$description": "Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition."
564
140
  }
565
141
  },
566
142
  "text": {
567
143
  "color": {
568
- "default": {
569
- "$value": {
570
- "default": "{color.red.700}",
571
- "dark": "{color.red.200}"
572
- },
573
- "$type": "color",
574
- "$description": "Used for the text of a danger (critical) status item when static or the default state when linked."
575
- },
576
- "hover": {
577
- "$value": {
578
- "default": "{color.red.800}",
579
- "dark": "{color.red.100}"
580
- },
581
- "$type": "color",
582
- "$description": "Used for the text of a danger (critical) status item in the hover state."
144
+ "$value": {
145
+ "default": "{color.red.700}",
146
+ "dark": "{color.red.200}"
583
147
  },
584
- "focus": {
585
- "$value": {
586
- "default": "{color.red.800}",
587
- "dark": "{color.red.100}"
588
- },
589
- "$type": "color",
590
- "$description": "Used for the text of a danger (critical) status item in the focus state."
591
- },
592
- "active": {
593
- "$value": {
594
- "default": "{color.red.900}",
595
- "dark": "{color.red.50}"
596
- },
597
- "$type": "color",
598
- "$description": "Used for the text of a danger (critical) status item in the active state."
599
- }
148
+ "$type": "color",
149
+ "$description": "Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition."
600
150
  }
601
151
  },
602
152
  "icon": {
603
153
  "color": {
604
- "default": {
605
- "$value": {
606
- "default": "{color.red.500}",
607
- "dark": "{color.red.400}"
608
- },
609
- "$type": "color",
610
- "$description": "Used for the icon of a danger (critical) status item when static or the default state when linked."
611
- },
612
- "hover": {
613
- "$value": {
614
- "default": "{color.red.600}",
615
- "dark": "{color.red.300}"
616
- },
617
- "$type": "color",
618
- "$description": "Used for the icon of a danger (critical) status item in the hover state."
154
+ "$value": {
155
+ "default": "{color.red.500}",
156
+ "dark": "{color.red.400}"
619
157
  },
620
- "focus": {
621
- "$value": {
622
- "default": "{color.red.600}",
623
- "dark": "{color.red.300}"
624
- },
625
- "$type": "color",
626
- "$description": "Used for the icon of a danger (critical) status item in the focus state."
627
- },
628
- "active": {
629
- "$value": {
630
- "default": "{color.red.700}",
631
- "dark": "{color.red.200}"
632
- },
633
- "$type": "color",
634
- "$description": "Used for the icon of a danger (critical) status item in the active state."
635
- }
158
+ "$type": "color",
159
+ "$description": "Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition."
636
160
  }
637
161
  }
638
162
  },
639
163
  "brand": {
640
164
  "background": {
641
165
  "color": {
642
- "default": {
643
- "$value": {
644
- "default": "{color.purple.100}",
645
- "dark": "{color.purple.900}"
646
- },
647
- "$type": "color",
648
- "$description": "Used for the background of a brand related status item when static or the default state when linked."
166
+ "$value": {
167
+ "default": "{color.purple.100}",
168
+ "dark": "{color.purple.900}"
649
169
  },
650
- "active": {
651
- "$value": {
652
- "default": "{color.purple.200}",
653
- "dark": "{color.purple.800}"
654
- },
655
- "$type": "color",
656
- "$description": "Used for the background of a brand related status item in the active state."
657
- }
658
- }
659
- },
660
- "border": {
661
- "color": {
662
- "hover": {
663
- "$value": {
664
- "default": "{color.purple.200}",
665
- "dark": "{color.purple.800}"
666
- },
667
- "$type": "color",
668
- "$description": "Used for the border of a brand related status item in the hover state."
669
- }
170
+ "$type": "color",
171
+ "$description": "Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface."
670
172
  }
671
173
  },
672
174
  "text": {
673
175
  "color": {
674
- "default": {
675
- "$value": {
676
- "default": "{color.purple.700}",
677
- "dark": "{color.purple.300}"
678
- },
679
- "$type": "color",
680
- "$description": "Used for the text of a brand related status item when static or the default state when linked."
176
+ "$value": {
177
+ "default": "{color.purple.700}",
178
+ "dark": "{color.purple.300}"
681
179
  },
682
- "hover": {
683
- "$value": {
684
- "default": "{color.purple.800}",
685
- "dark": "{color.purple.200}"
686
- },
687
- "$type": "color",
688
- "$description": "Used for the text of a brand related status item in the hover state."
689
- },
690
- "focus": {
691
- "$value": {
692
- "default": "{color.purple.800}",
693
- "dark": "{color.purple.200}"
694
- },
695
- "$type": "color",
696
- "$description": "Used for the text of a brand related status item in the focus state."
697
- },
698
- "active": {
699
- "$value": {
700
- "default": "{color.purple.900}",
701
- "dark": "{color.purple.100}"
702
- },
703
- "$type": "color",
704
- "$description": "Used for the text of a brand related status item in the active state."
705
- }
180
+ "$type": "color",
181
+ "$description": "Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface."
706
182
  }
707
183
  },
708
184
  "icon": {
709
185
  "color": {
710
- "default": {
711
- "$value": {
712
- "default": "{color.purple.500}",
713
- "dark": "{color.purple.500}"
714
- },
715
- "$type": "color",
716
- "$description": "Used for the icon of a brand related status item when static or the default state when linked."
717
- },
718
- "hover": {
719
- "$value": {
720
- "default": "{color.purple.600}",
721
- "dark": "{color.purple.400}"
722
- },
723
- "$type": "color",
724
- "$description": "Used for the icon of a brand related status item in the hover state."
725
- },
726
- "focus": {
727
- "$value": {
728
- "default": "{color.purple.600}",
729
- "dark": "{color.purple.400}"
730
- },
731
- "$type": "color",
732
- "$description": "Used for the icon of a brand related status item in the focus state."
186
+ "$value": {
187
+ "default": "{color.purple.500}",
188
+ "dark": "{color.purple.500}"
733
189
  },
734
- "active": {
735
- "$value": {
736
- "default": "{color.purple.700}",
737
- "dark": "{color.purple.300}"
738
- },
739
- "$type": "color",
740
- "$description": "Used for the icon of a brand related status item in the active state."
741
- }
190
+ "$type": "color",
191
+ "$description": "Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface."
742
192
  }
743
193
  }
744
194
  }