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