@gitlab/ui 88.3.0 → 88.4.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 (25) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/index.css +1 -1
  3. package/dist/index.css.map +1 -1
  4. package/dist/tokens/build/js/tokens.dark.js +69 -34
  5. package/dist/tokens/build/js/tokens.js +69 -34
  6. package/dist/tokens/css/tokens.css +68 -33
  7. package/dist/tokens/css/tokens.dark.css +68 -33
  8. package/dist/tokens/js/tokens.dark.js +68 -33
  9. package/dist/tokens/js/tokens.js +68 -33
  10. package/dist/tokens/json/tokens.dark.json +842 -107
  11. package/dist/tokens/json/tokens.json +842 -107
  12. package/dist/tokens/scss/_tokens.dark.scss +68 -33
  13. package/dist/tokens/scss/_tokens.scss +68 -33
  14. package/dist/tokens/scss/_tokens_custom_properties.scss +35 -0
  15. package/package.json +1 -1
  16. package/src/tokens/build/css/tokens.css +68 -33
  17. package/src/tokens/build/css/tokens.dark.css +68 -33
  18. package/src/tokens/build/js/tokens.dark.js +68 -33
  19. package/src/tokens/build/js/tokens.js +68 -33
  20. package/src/tokens/build/json/tokens.dark.json +842 -107
  21. package/src/tokens/build/json/tokens.json +842 -107
  22. package/src/tokens/build/scss/_tokens.dark.scss +68 -33
  23. package/src/tokens/build/scss/_tokens.scss +68 -33
  24. package/src/tokens/build/scss/_tokens_custom_properties.scss +35 -0
  25. package/src/tokens/contextual/badge.tokens.json +208 -33
package/src/tokens/contextual/badge.tokens.json CHANGED
@@ -9,7 +9,17 @@
9
9
  "dark": "{color.neutral.900}"
10
10
  },
11
11
  "$type": "color",
12
- "$description": "Used for the background of a subtle neutral badge when static or the default state when linked."
12
+ "$description": "Used for the background of a muted badge when static or the default state when linked."
13
+ },
14
+ "hover": {
15
+ "$value": "{badge.muted.background.color.default}",
16
+ "$type": "color",
17
+ "$description": "Used for the background of a muted badge in the hover state."
18
+ },
19
+ "focus": {
20
+ "$value": "{badge.muted.background.color.hover}",
21
+ "$type": "color",
22
+ "$description": "Used for the background of a muted badge in the focus state."
13
23
  },
14
24
  "active": {
15
25
  "$value": {
@@ -17,19 +27,34 @@
17
27
  "dark": "{color.neutral.800}"
18
28
  },
19
29
  "$type": "color",
20
- "$description": "Used for the background of a subtle neutral badge in the active state."
30
+ "$description": "Used for the background of a muted badge in the active state."
21
31
  }
22
32
  }
23
33
  },
24
34
  "border": {
25
35
  "color": {
36
+ "default": {
37
+ "$value": "{color.alpha.0}",
38
+ "$type": "color",
39
+ "$description": "Used for the border of a muted badge when static or the default state when linked."
40
+ },
26
41
  "hover": {
27
42
  "$value": {
28
43
  "default": "{color.neutral.200}",
29
44
  "dark": "{color.neutral.700}"
30
45
  },
31
46
  "$type": "color",
32
- "$description": "Used for the border of a subtle neutral badge in the hover state."
47
+ "$description": "Used for the border of a muted badge in the hover state."
48
+ },
49
+ "focus": {
50
+ "$value": "{color.alpha.0}",
51
+ "$type": "color",
52
+ "$description": "Used for the border of a muted badge in the focus state."
53
+ },
54
+ "active": {
55
+ "$value": "{color.alpha.0}",
56
+ "$type": "color",
57
+ "$description": "Used for the border of a muted badge in the active state."
33
58
  }
34
59
  }
35
60
  },
@@ -41,7 +66,7 @@
41
66
  "dark": "{color.neutral.300}"
42
67
  },
43
68
  "$type": "color",
44
- "$description": "Used for the text of a subtle neutral badge when static or the default state when linked."
69
+ "$description": "Used for the text of a muted badge when static or the default state when linked."
45
70
  },
46
71
  "hover": {
47
72
  "$value": {
@@ -49,12 +74,12 @@
49
74
  "dark": "{color.neutral.200}"
50
75
  },
51
76
  "$type": "color",
52
- "$description": "Used for the text of a subtle neutral badge in the hover state."
77
+ "$description": "Used for the text of a muted badge in the hover state."
53
78
  },
54
79
  "focus": {
55
80
  "$value": "{badge.muted.text.color.hover}",
56
81
  "$type": "color",
57
- "$description": "Used for the text of a subtle neutral badge in the focus state."
82
+ "$description": "Used for the text of a muted badge in the focus state."
58
83
  },
59
84
  "active": {
60
85
  "$value": {
@@ -62,7 +87,7 @@
62
87
  "dark": "{color.neutral.100}"
63
88
  },
64
89
  "$type": "color",
65
- "$description": "Used for the text of a subtle neutral badge in the active state."
90
+ "$description": "Used for the text of a muted badge in the active state."
66
91
  }
67
92
  }
68
93
  },
@@ -74,7 +99,7 @@
74
99
  "dark": "{color.neutral.400}"
75
100
  },
76
101
  "$type": "color",
77
- "$description": "Used for the icon of a subtle neutral badge when static or the default state when linked."
102
+ "$description": "Used for the icon of a muted badge when static or the default state when linked."
78
103
  },
79
104
  "hover": {
80
105
  "$value": {
@@ -82,12 +107,12 @@
82
107
  "dark": "{color.neutral.300}"
83
108
  },
84
109
  "$type": "color",
85
- "$description": "Used for the icon of a subtle neutral badge in the hover state."
110
+ "$description": "Used for the icon of a muted badge in the hover state."
86
111
  },
87
112
  "focus": {
88
113
  "$value": "{badge.muted.icon.color.hover}",
89
114
  "$type": "color",
90
- "$description": "Used for the icon of a subtle neutral badge in the focus state."
115
+ "$description": "Used for the icon of a muted badge in the focus state."
91
116
  },
92
117
  "active": {
93
118
  "$value": {
@@ -95,7 +120,7 @@
95
120
  "dark": "{color.neutral.200}"
96
121
  },
97
122
  "$type": "color",
98
- "$description": "Used for the icon of a subtle neutral badge in the active state."
123
+ "$description": "Used for the icon of a muted badge in the active state."
99
124
  }
100
125
  }
101
126
  }
@@ -111,6 +136,16 @@
111
136
  "$type": "color",
112
137
  "$description": "Used for the background of a neutral badge when static or the default state when linked."
113
138
  },
139
+ "hover": {
140
+ "$value": "{badge.neutral.background.color.default}",
141
+ "$type": "color",
142
+ "$description": "Used for the background of a neutral badge in the hover state."
143
+ },
144
+ "focus": {
145
+ "$value": "{badge.neutral.background.color.hover}",
146
+ "$type": "color",
147
+ "$description": "Used for the background of a neutral badge in the focus state."
148
+ },
114
149
  "active": {
115
150
  "$value": {
116
151
  "default": "{color.neutral.200}",
@@ -123,6 +158,11 @@
123
158
  },
124
159
  "border": {
125
160
  "color": {
161
+ "default": {
162
+ "$value": "{color.alpha.0}",
163
+ "$type": "color",
164
+ "$description": "Used for the border of a neutral badge when static or the default state when linked."
165
+ },
126
166
  "hover": {
127
167
  "$value": {
128
168
  "default": "{color.neutral.200}",
@@ -130,6 +170,16 @@
130
170
  },
131
171
  "$type": "color",
132
172
  "$description": "Used for the border of a neutral badge in the hover state."
173
+ },
174
+ "focus": {
175
+ "$value": "{color.alpha.0}",
176
+ "$type": "color",
177
+ "$description": "Used for the border of a neutral badge in the focus state."
178
+ },
179
+ "active": {
180
+ "$value": "{color.alpha.0}",
181
+ "$type": "color",
182
+ "$description": "Used for the border of a neutral badge in the active state."
133
183
  }
134
184
  }
135
185
  },
@@ -211,6 +261,16 @@
211
261
  "$type": "color",
212
262
  "$description": "Used for the background of an informational badge when static or the default state when linked."
213
263
  },
264
+ "hover": {
265
+ "$value": "{badge.info.background.color.default}",
266
+ "$type": "color",
267
+ "$description": "Used for the background of an informational badge in the hover state."
268
+ },
269
+ "focus": {
270
+ "$value": "{badge.info.background.color.hover}",
271
+ "$type": "color",
272
+ "$description": "Used for the background of an informational badge in the focus state."
273
+ },
214
274
  "active": {
215
275
  "$value": {
216
276
  "default": "{color.blue.200}",
@@ -223,6 +283,11 @@
223
283
  },
224
284
  "border": {
225
285
  "color": {
286
+ "default": {
287
+ "$value": "{color.alpha.0}",
288
+ "$type": "color",
289
+ "$description": "Used for the border of an informational badge when static or the default state when linked."
290
+ },
226
291
  "hover": {
227
292
  "$value": {
228
293
  "default": "{color.blue.200}",
@@ -230,6 +295,16 @@
230
295
  },
231
296
  "$type": "color",
232
297
  "$description": "Used for the border of an informational badge in the hover state."
298
+ },
299
+ "focus": {
300
+ "$value": "{color.alpha.0}",
301
+ "$type": "color",
302
+ "$description": "Used for the border of an informational badge in the focus state."
303
+ },
304
+ "active": {
305
+ "$value": "{color.alpha.0}",
306
+ "$type": "color",
307
+ "$description": "Used for the border of an informational badge in the active state."
233
308
  }
234
309
  }
235
310
  },
@@ -311,6 +386,16 @@
311
386
  "$type": "color",
312
387
  "$description": "Used for the background of a success badge when static or the default state when linked."
313
388
  },
389
+ "hover": {
390
+ "$value": "{badge.success.background.color.default}",
391
+ "$type": "color",
392
+ "$description": "Used for the background of a success badge in the hover state."
393
+ },
394
+ "focus": {
395
+ "$value": "{badge.success.background.color.hover}",
396
+ "$type": "color",
397
+ "$description": "Used for the background of a success badge in the focus state."
398
+ },
314
399
  "active": {
315
400
  "$value": {
316
401
  "default": "{color.green.200}",
@@ -323,6 +408,11 @@
323
408
  },
324
409
  "border": {
325
410
  "color": {
411
+ "default": {
412
+ "$value": "{color.alpha.0}",
413
+ "$type": "color",
414
+ "$description": "Used for the border of a success badge when static or the default state when linked."
415
+ },
326
416
  "hover": {
327
417
  "$value": {
328
418
  "default": "{color.green.200}",
@@ -330,6 +420,16 @@
330
420
  },
331
421
  "$type": "color",
332
422
  "$description": "Used for the border of a success badge in the hover state."
423
+ },
424
+ "focus": {
425
+ "$value": "{color.alpha.0}",
426
+ "$type": "color",
427
+ "$description": "Used for the border of a success badge in the focus state."
428
+ },
429
+ "active": {
430
+ "$value": "{color.alpha.0}",
431
+ "$type": "color",
432
+ "$description": "Used for the border of a success badge in the active state."
333
433
  }
334
434
  }
335
435
  },
@@ -409,7 +509,17 @@
409
509
  "dark": "{color.orange.800}"
410
510
  },
411
511
  "$type": "color",
412
- "$description": "Used for the background of a warning status or confidential item when static or the default state when linked."
512
+ "$description": "Used for the background of a warning badge when static or the default state when linked."
513
+ },
514
+ "hover": {
515
+ "$value": "{badge.warning.background.color.default}",
516
+ "$type": "color",
517
+ "$description": "Used for the background of a warning badge in the hover state."
518
+ },
519
+ "focus": {
520
+ "$value": "{badge.warning.background.color.hover}",
521
+ "$type": "color",
522
+ "$description": "Used for the background of a warning badge in the focus state."
413
523
  },
414
524
  "active": {
415
525
  "$value": {
@@ -417,19 +527,34 @@
417
527
  "dark": "{color.orange.700}"
418
528
  },
419
529
  "$type": "color",
420
- "$description": "Used for the background of a warning status or confidential item in the active state."
530
+ "$description": "Used for the background of a warning badge in the active state."
421
531
  }
422
532
  }
423
533
  },
424
534
  "border": {
425
535
  "color": {
536
+ "default": {
537
+ "$value": "{color.alpha.0}",
538
+ "$type": "color",
539
+ "$description": "Used for the border of a warning badge when static or the default state when linked."
540
+ },
426
541
  "hover": {
427
542
  "$value": {
428
543
  "default": "{color.orange.200}",
429
544
  "dark": "{color.orange.700}"
430
545
  },
431
546
  "$type": "color",
432
- "$description": "Used for the border of a warning status or confidential item in the hover state."
547
+ "$description": "Used for the border of a warning badge in the hover state."
548
+ },
549
+ "focus": {
550
+ "$value": "{color.alpha.0}",
551
+ "$type": "color",
552
+ "$description": "Used for the border of a warning badge in the focus state."
553
+ },
554
+ "active": {
555
+ "$value": "{color.alpha.0}",
556
+ "$type": "color",
557
+ "$description": "Used for the border of a warning badge in the active state."
433
558
  }
434
559
  }
435
560
  },
@@ -441,7 +566,7 @@
441
566
  "dark": "{color.orange.200}"
442
567
  },
443
568
  "$type": "color",
444
- "$description": "Used for the text of a warning status or confidential item when static or the default state when linked."
569
+ "$description": "Used for the text of a warning badge when static or the default state when linked."
445
570
  },
446
571
  "hover": {
447
572
  "$value": {
@@ -449,12 +574,12 @@
449
574
  "dark": "{color.orange.100}"
450
575
  },
451
576
  "$type": "color",
452
- "$description": "Used for the text of a warning status or confidential item in the hover state."
577
+ "$description": "Used for the text of a warning badge in the hover state."
453
578
  },
454
579
  "focus": {
455
580
  "$value": "{badge.warning.text.color.hover}",
456
581
  "$type": "color",
457
- "$description": "Used for the text of a warning status or confidential item in the focus state."
582
+ "$description": "Used for the text of a warning badge in the focus state."
458
583
  },
459
584
  "active": {
460
585
  "$value": {
@@ -462,7 +587,7 @@
462
587
  "dark": "{color.orange.50}"
463
588
  },
464
589
  "$type": "color",
465
- "$description": "Used for the text of a warning status or confidential item in the active state.N"
590
+ "$description": "Used for the text of a warning badge in the active state."
466
591
  }
467
592
  }
468
593
  },
@@ -474,7 +599,7 @@
474
599
  "dark": "{color.orange.400}"
475
600
  },
476
601
  "$type": "color",
477
- "$description": "Used for the icon of a warning status or confidential item when static or the default state when linked."
602
+ "$description": "Used for the icon of a warning badge when static or the default state when linked."
478
603
  },
479
604
  "hover": {
480
605
  "$value": {
@@ -482,12 +607,12 @@
482
607
  "dark": "{color.orange.300}"
483
608
  },
484
609
  "$type": "color",
485
- "$description": "Used for the icon of a warning status or confidential item in the hover state."
610
+ "$description": "Used for the icon of a warning badge in the hover state."
486
611
  },
487
612
  "focus": {
488
613
  "$value": "{badge.warning.icon.color.hover}",
489
614
  "$type": "color",
490
- "$description": "Used for the icon of a warning status or confidential item in the focus state."
615
+ "$description": "Used for the icon of a warning badge in the focus state."
491
616
  },
492
617
  "active": {
493
618
  "$value": {
@@ -495,7 +620,7 @@
495
620
  "dark": "{color.orange.200}"
496
621
  },
497
622
  "$type": "color",
498
- "$description": "Used for the icon of a warning status or confidential item in the active state."
623
+ "$description": "Used for the icon of a warning badge in the active state."
499
624
  }
500
625
  }
501
626
  }
@@ -509,7 +634,17 @@
509
634
  "dark": "{color.red.800}"
510
635
  },
511
636
  "$type": "color",
512
- "$description": "Used for the background of a danger (critical) badge when static or the default state when linked."
637
+ "$description": "Used for the background of a danger badge when static or the default state when linked."
638
+ },
639
+ "hover": {
640
+ "$value": "{badge.danger.background.color.default}",
641
+ "$type": "color",
642
+ "$description": "Used for the background of a danger badge in the hover state."
643
+ },
644
+ "focus": {
645
+ "$value": "{badge.danger.background.color.hover}",
646
+ "$type": "color",
647
+ "$description": "Used for the background of a danger badge in the focus state."
513
648
  },
514
649
  "active": {
515
650
  "$value": {
@@ -517,19 +652,34 @@
517
652
  "dark": "{color.red.700}"
518
653
  },
519
654
  "$type": "color",
520
- "$description": "Used for the background of a danger (critical) badge in the active state."
655
+ "$description": "Used for the background of a danger badge in the active state."
521
656
  }
522
657
  }
523
658
  },
524
659
  "border": {
525
660
  "color": {
661
+ "default": {
662
+ "$value": "{color.alpha.0}",
663
+ "$type": "color",
664
+ "$description": "Used for the border of a danger badge when static or the default state when linked."
665
+ },
526
666
  "hover": {
527
667
  "$value": {
528
668
  "default": "{color.red.200}",
529
669
  "dark": "{color.red.700}"
530
670
  },
531
671
  "$type": "color",
532
- "$description": "Used for the border of a danger (critical) badge in the hover state."
672
+ "$description": "Used for the border of a danger badge in the hover state."
673
+ },
674
+ "focus": {
675
+ "$value": "{color.alpha.0}",
676
+ "$type": "color",
677
+ "$description": "Used for the border of a danger badge in the focus state."
678
+ },
679
+ "active": {
680
+ "$value": "{color.alpha.0}",
681
+ "$type": "color",
682
+ "$description": "Used for the border of a danger badge in the active state."
533
683
  }
534
684
  }
535
685
  },
@@ -541,7 +691,7 @@
541
691
  "dark": "{color.red.200}"
542
692
  },
543
693
  "$type": "color",
544
- "$description": "Used for the text of a danger (critical) badge when static or the default state when linked."
694
+ "$description": "Used for the text of a danger badge when static or the default state when linked."
545
695
  },
546
696
  "hover": {
547
697
  "$value": {
@@ -549,12 +699,12 @@
549
699
  "dark": "{color.red.100}"
550
700
  },
551
701
  "$type": "color",
552
- "$description": "Used for the text of a danger (critical) badge in the hover state."
702
+ "$description": "Used for the text of a danger badge in the hover state."
553
703
  },
554
704
  "focus": {
555
705
  "$value": "{badge.danger.text.color.hover}",
556
706
  "$type": "color",
557
- "$description": "Used for the text of a danger (critical) badge in the focus state."
707
+ "$description": "Used for the text of a danger badge in the focus state."
558
708
  },
559
709
  "active": {
560
710
  "$value": {
@@ -562,7 +712,7 @@
562
712
  "dark": "{color.red.50}"
563
713
  },
564
714
  "$type": "color",
565
- "$description": "Used for the text of a danger (critical) badge in the active state."
715
+ "$description": "Used for the text of a danger badge in the active state."
566
716
  }
567
717
  }
568
718
  },
@@ -574,7 +724,7 @@
574
724
  "dark": "{color.red.400}"
575
725
  },
576
726
  "$type": "color",
577
- "$description": "Used for the icon of a danger (critical) badge when static or the default state when linked."
727
+ "$description": "Used for the icon of a danger badge when static or the default state when linked."
578
728
  },
579
729
  "hover": {
580
730
  "$value": {
@@ -582,12 +732,12 @@
582
732
  "dark": "{color.red.300}"
583
733
  },
584
734
  "$type": "color",
585
- "$description": "Used for the icon of a danger (critical) badge in the hover state."
735
+ "$description": "Used for the icon of a danger badge in the hover state."
586
736
  },
587
737
  "focus": {
588
738
  "$value": "{badge.danger.icon.color.hover}",
589
739
  "$type": "color",
590
- "$description": "Used for the icon of a danger (critical) badge in the focus state."
740
+ "$description": "Used for the icon of a danger badge in the focus state."
591
741
  },
592
742
  "active": {
593
743
  "$value": {
@@ -595,7 +745,7 @@
595
745
  "dark": "{color.red.200}"
596
746
  },
597
747
  "$type": "color",
598
- "$description": "Used for the icon of a danger (critical) badge in the active state."
748
+ "$description": "Used for the icon of a danger badge in the active state."
599
749
  }
600
750
  }
601
751
  }
@@ -611,6 +761,16 @@
611
761
  "$type": "color",
612
762
  "$description": "Used for the background of a tier related badge when static or the default state when linked."
613
763
  },
764
+ "hover": {
765
+ "$value": "{badge.tier.background.color.default}",
766
+ "$type": "color",
767
+ "$description": "Used for the background of a tier related badge in the hover state."
768
+ },
769
+ "focus": {
770
+ "$value": "{badge.tier.background.color.hover}",
771
+ "$type": "color",
772
+ "$description": "Used for the background of a tier related badge in the focus state."
773
+ },
614
774
  "active": {
615
775
  "$value": {
616
776
  "default": "{color.purple.200}",
@@ -623,6 +783,11 @@
623
783
  },
624
784
  "border": {
625
785
  "color": {
786
+ "default": {
787
+ "$value": "{color.alpha.0}",
788
+ "$type": "color",
789
+ "$description": "Used for the border of a tier related badge when static or the default state when linked."
790
+ },
626
791
  "hover": {
627
792
  "$value": {
628
793
  "default": "{color.purple.200}",
@@ -630,6 +795,16 @@
630
795
  },
631
796
  "$type": "color",
632
797
  "$description": "Used for the border of a tier related badge in the hover state."
798
+ },
799
+ "focus": {
800
+ "$value": "{color.alpha.0}",
801
+ "$type": "color",
802
+ "$description": "Used for the border of a tier related badge in the focus state."
803
+ },
804
+ "active": {
805
+ "$value": "{color.alpha.0}",
806
+ "$type": "color",
807
+ "$description": "Used for the border of a tier related badge in the active state."
633
808
  }
634
809
  }
635
810
  },