@gitlab/ui 89.2.0 → 89.3.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 (26) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/index.css +2 -2
  3. package/dist/index.css.map +1 -1
  4. package/dist/tokens/build/js/tokens.dark.js +91 -91
  5. package/dist/tokens/build/js/tokens.js +8 -8
  6. package/dist/tokens/css/tokens.css +6 -6
  7. package/dist/tokens/css/tokens.dark.css +63 -63
  8. package/dist/tokens/js/tokens.dark.js +91 -91
  9. package/dist/tokens/js/tokens.js +8 -8
  10. package/dist/tokens/json/tokens.dark.json +160 -160
  11. package/dist/tokens/json/tokens.json +77 -77
  12. package/dist/tokens/scss/_tokens.dark.scss +63 -63
  13. package/dist/tokens/scss/_tokens.scss +6 -6
  14. package/package.json +1 -1
  15. package/src/components/base/badge/badge.scss +65 -32
  16. package/src/components/base/datepicker/datepicker.scss +5 -0
  17. package/src/components/base/toggle/toggle.scss +8 -5
  18. package/src/tokens/build/css/tokens.css +6 -6
  19. package/src/tokens/build/css/tokens.dark.css +63 -63
  20. package/src/tokens/build/js/tokens.dark.js +91 -91
  21. package/src/tokens/build/js/tokens.js +8 -8
  22. package/src/tokens/build/json/tokens.dark.json +160 -160
  23. package/src/tokens/build/json/tokens.json +77 -77
  24. package/src/tokens/build/scss/_tokens.dark.scss +63 -63
  25. package/src/tokens/build/scss/_tokens.scss +6 -6
  26. package/src/tokens/contextual/badge.tokens.json +69 -69
package/src/tokens/build/scss/_tokens.dark.scss CHANGED
@@ -572,90 +572,90 @@ $gl-button-default-primary-foreground-color-default: $gl-color-neutral-50; // Us
572
572
  $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
573
573
  $gl-banner-promo-background-color: $gl-color-neutral-900; // Used as background for the default banner type.
574
574
  $gl-banner-intro-border-color: $gl-color-blue-600; // Used to compliment the info banner.
575
- $gl-badge-tier-icon-color-active: $gl-color-purple-300; // Used for the icon of a tier related badge in the active state.
576
- $gl-badge-tier-icon-color-hover: $gl-color-purple-400; // Used for the icon of a tier related badge in the hover state.
577
- $gl-badge-tier-icon-color-default: $gl-color-purple-500; // Used for the icon of a tier related badge when static or the default state when linked.
578
- $gl-badge-tier-text-color-active: $gl-color-purple-100; // Used for the text of a tier related badge in the active state.
579
- $gl-badge-tier-text-color-hover: $gl-color-purple-200; // Used for the text of a tier related badge in the hover state.
580
- $gl-badge-tier-text-color-default: $gl-color-purple-300; // Used for the text of a tier related badge when static or the default state when linked.
575
+ $gl-badge-tier-icon-color-active: $gl-color-purple-950; // Used for the icon of a tier related badge in the active state.
576
+ $gl-badge-tier-icon-color-hover: $gl-color-purple-950; // Used for the icon of a tier related badge in the hover state.
577
+ $gl-badge-tier-icon-color-default: $gl-color-purple-950; // Used for the icon of a tier related badge when static or the default state when linked.
578
+ $gl-badge-tier-text-color-active: $gl-color-purple-950; // Used for the text of a tier related badge in the active state.
579
+ $gl-badge-tier-text-color-hover: $gl-color-purple-950; // Used for the text of a tier related badge in the hover state.
580
+ $gl-badge-tier-text-color-default: $gl-color-purple-950; // Used for the text of a tier related badge when static or the default state when linked.
581
581
  $gl-badge-tier-border-color-active: $gl-color-alpha-0; // Used for the border of a tier related badge in the active state.
582
582
  $gl-badge-tier-border-color-focus: $gl-color-alpha-0; // Used for the border of a tier related badge in the focus state.
583
- $gl-badge-tier-border-color-hover: $gl-color-purple-800; // Used for the border of a tier related badge in the hover state.
583
+ $gl-badge-tier-border-color-hover: $gl-color-purple-200; // Used for the border of a tier related badge in the hover state.
584
584
  $gl-badge-tier-border-color-default: $gl-color-alpha-0; // Used for the border of a tier related badge when static or the default state when linked.
585
- $gl-badge-tier-background-color-active: $gl-color-purple-800; // Used for the background of a tier related badge in the active state.
586
- $gl-badge-tier-background-color-default: $gl-color-purple-900; // Used for the background of a tier related badge when static or the default state when linked.
587
- $gl-badge-danger-icon-color-active: $gl-color-red-200; // Used for the icon of a danger badge in the active state.
588
- $gl-badge-danger-icon-color-hover: $gl-color-red-300; // Used for the icon of a danger badge in the hover state.
589
- $gl-badge-danger-icon-color-default: $gl-color-red-400; // Used for the icon of a danger badge when static or the default state when linked.
590
- $gl-badge-danger-text-color-active: $gl-color-red-50; // Used for the text of a danger badge in the active state.
591
- $gl-badge-danger-text-color-hover: $gl-color-red-100; // Used for the text of a danger badge in the hover state.
592
- $gl-badge-danger-text-color-default: $gl-color-red-200; // Used for the text of a danger badge when static or the default state when linked.
585
+ $gl-badge-tier-background-color-active: $gl-color-purple-200; // Used for the background of a tier related badge in the active state.
586
+ $gl-badge-tier-background-color-default: $gl-color-purple-300; // Used for the background of a tier related badge when static or the default state when linked.
587
+ $gl-badge-danger-icon-color-active: $gl-color-red-950; // Used for the icon of a danger badge in the active state.
588
+ $gl-badge-danger-icon-color-hover: $gl-color-red-950; // Used for the icon of a danger badge in the hover state.
589
+ $gl-badge-danger-icon-color-default: $gl-color-red-950; // Used for the icon of a danger badge when static or the default state when linked.
590
+ $gl-badge-danger-text-color-active: $gl-color-red-950; // Used for the text of a danger badge in the active state.
591
+ $gl-badge-danger-text-color-hover: $gl-color-red-950; // Used for the text of a danger badge in the hover state.
592
+ $gl-badge-danger-text-color-default: $gl-color-red-950; // Used for the text of a danger badge when static or the default state when linked.
593
593
  $gl-badge-danger-border-color-active: $gl-color-alpha-0; // Used for the border of a danger badge in the active state.
594
594
  $gl-badge-danger-border-color-focus: $gl-color-alpha-0; // Used for the border of a danger badge in the focus state.
595
- $gl-badge-danger-border-color-hover: $gl-color-red-700; // Used for the border of a danger badge in the hover state.
595
+ $gl-badge-danger-border-color-hover: $gl-color-red-200; // Used for the border of a danger badge in the hover state.
596
596
  $gl-badge-danger-border-color-default: $gl-color-alpha-0; // Used for the border of a danger badge when static or the default state when linked.
597
- $gl-badge-danger-background-color-active: $gl-color-red-700; // Used for the background of a danger badge in the active state.
598
- $gl-badge-danger-background-color-default: $gl-color-red-800; // Used for the background of a danger badge when static or the default state when linked.
599
- $gl-badge-warning-icon-color-active: $gl-color-orange-200; // Used for the icon of a warning badge in the active state.
600
- $gl-badge-warning-icon-color-hover: $gl-color-orange-300; // Used for the icon of a warning badge in the hover state.
601
- $gl-badge-warning-icon-color-default: $gl-color-orange-400; // Used for the icon of a warning badge when static or the default state when linked.
602
- $gl-badge-warning-text-color-active: $gl-color-orange-50; // Used for the text of a warning badge in the active state.
603
- $gl-badge-warning-text-color-hover: $gl-color-orange-100; // Used for the text of a warning badge in the hover state.
604
- $gl-badge-warning-text-color-default: $gl-color-orange-200; // Used for the text of a warning badge when static or the default state when linked.
597
+ $gl-badge-danger-background-color-active: $gl-color-red-200; // Used for the background of a danger badge in the active state.
598
+ $gl-badge-danger-background-color-default: $gl-color-red-300; // Used for the background of a danger badge when static or the default state when linked.
599
+ $gl-badge-warning-icon-color-active: $gl-color-orange-950; // Used for the icon of a warning badge in the active state.
600
+ $gl-badge-warning-icon-color-hover: $gl-color-orange-950; // Used for the icon of a warning badge in the hover state.
601
+ $gl-badge-warning-icon-color-default: $gl-color-orange-950; // Used for the icon of a warning badge when static or the default state when linked.
602
+ $gl-badge-warning-text-color-active: $gl-color-orange-950; // Used for the text of a warning badge in the active state.
603
+ $gl-badge-warning-text-color-hover: $gl-color-orange-950; // Used for the text of a warning badge in the hover state.
604
+ $gl-badge-warning-text-color-default: $gl-color-orange-950; // Used for the text of a warning badge when static or the default state when linked.
605
605
  $gl-badge-warning-border-color-active: $gl-color-alpha-0; // Used for the border of a warning badge in the active state.
606
606
  $gl-badge-warning-border-color-focus: $gl-color-alpha-0; // Used for the border of a warning badge in the focus state.
607
- $gl-badge-warning-border-color-hover: $gl-color-orange-700; // Used for the border of a warning badge in the hover state.
607
+ $gl-badge-warning-border-color-hover: $gl-color-orange-200; // Used for the border of a warning badge in the hover state.
608
608
  $gl-badge-warning-border-color-default: $gl-color-alpha-0; // Used for the border of a warning badge when static or the default state when linked.
609
- $gl-badge-warning-background-color-active: $gl-color-orange-700; // Used for the background of a warning badge in the active state.
610
- $gl-badge-warning-background-color-default: $gl-color-orange-800; // Used for the background of a warning badge when static or the default state when linked.
611
- $gl-badge-success-icon-color-active: $gl-color-green-200; // Used for the icon of a success badge in the active state.
612
- $gl-badge-success-icon-color-hover: $gl-color-green-300; // Used for the icon of a success badge in the hover state.
613
- $gl-badge-success-icon-color-default: $gl-color-green-400; // Used for the icon of a success badge when static or the default state when linked.
614
- $gl-badge-success-text-color-active: $gl-color-green-50; // Used for the text of a success badge in the active state.
615
- $gl-badge-success-text-color-hover: $gl-color-green-100; // Used for the text of a success badge in the hover state.
616
- $gl-badge-success-text-color-default: $gl-color-green-200; // Used for the text of a success badge when static or the default state when linked.
609
+ $gl-badge-warning-background-color-active: $gl-color-orange-200; // Used for the background of a warning badge in the active state.
610
+ $gl-badge-warning-background-color-default: $gl-color-orange-300; // Used for the background of a warning badge when static or the default state when linked.
611
+ $gl-badge-success-icon-color-active: $gl-color-green-950; // Used for the icon of a success badge in the active state.
612
+ $gl-badge-success-icon-color-hover: $gl-color-green-950; // Used for the icon of a success badge in the hover state.
613
+ $gl-badge-success-icon-color-default: $gl-color-green-950; // Used for the icon of a success badge when static or the default state when linked.
614
+ $gl-badge-success-text-color-active: $gl-color-green-950; // Used for the text of a success badge in the active state.
615
+ $gl-badge-success-text-color-hover: $gl-color-green-950; // Used for the text of a success badge in the hover state.
616
+ $gl-badge-success-text-color-default: $gl-color-green-950; // Used for the text of a success badge when static or the default state when linked.
617
617
  $gl-badge-success-border-color-active: $gl-color-alpha-0; // Used for the border of a success badge in the active state.
618
618
  $gl-badge-success-border-color-focus: $gl-color-alpha-0; // Used for the border of a success badge in the focus state.
619
- $gl-badge-success-border-color-hover: $gl-color-green-700; // Used for the border of a success badge in the hover state.
619
+ $gl-badge-success-border-color-hover: $gl-color-green-200; // Used for the border of a success badge in the hover state.
620
620
  $gl-badge-success-border-color-default: $gl-color-alpha-0; // Used for the border of a success badge when static or the default state when linked.
621
- $gl-badge-success-background-color-active: $gl-color-green-700; // Used for the background of a success badge in the active state.
622
- $gl-badge-success-background-color-default: $gl-color-green-800; // Used for the background of a success badge when static or the default state when linked.
623
- $gl-badge-info-icon-color-active: $gl-color-blue-200; // Used for the icon of an informational badge in the active state.
624
- $gl-badge-info-icon-color-hover: $gl-color-blue-300; // Used for the icon of an informational badge in the hover state.
625
- $gl-badge-info-icon-color-default: $gl-color-blue-400; // Used for the icon of an informational badge when static or the default state when linked.
626
- $gl-badge-info-text-color-active: $gl-color-blue-50; // Used for the text of an informational badge in the active state.
627
- $gl-badge-info-text-color-hover: $gl-color-blue-100; // Used for the text of an informational badge in the hover state.
628
- $gl-badge-info-text-color-default: $gl-color-blue-200; // Used for the text of an informational badge when static or the default state when linked.
621
+ $gl-badge-success-background-color-active: $gl-color-green-200; // Used for the background of a success badge in the active state.
622
+ $gl-badge-success-background-color-default: $gl-color-green-300; // Used for the background of a success badge when static or the default state when linked.
623
+ $gl-badge-info-icon-color-active: $gl-color-blue-950; // Used for the icon of an informational badge in the active state.
624
+ $gl-badge-info-icon-color-hover: $gl-color-blue-950; // Used for the icon of an informational badge in the hover state.
625
+ $gl-badge-info-icon-color-default: $gl-color-blue-950; // Used for the icon of an informational badge when static or the default state when linked.
626
+ $gl-badge-info-text-color-active: $gl-color-blue-950; // Used for the text of an informational badge in the active state.
627
+ $gl-badge-info-text-color-hover: $gl-color-blue-950; // Used for the text of an informational badge in the hover state.
628
+ $gl-badge-info-text-color-default: $gl-color-blue-950; // Used for the text of an informational badge when static or the default state when linked.
629
629
  $gl-badge-info-border-color-active: $gl-color-alpha-0; // Used for the border of an informational badge in the active state.
630
630
  $gl-badge-info-border-color-focus: $gl-color-alpha-0; // Used for the border of an informational badge in the focus state.
631
- $gl-badge-info-border-color-hover: $gl-color-blue-700; // Used for the border of an informational badge in the hover state.
631
+ $gl-badge-info-border-color-hover: $gl-color-blue-200; // Used for the border of an informational badge in the hover state.
632
632
  $gl-badge-info-border-color-default: $gl-color-alpha-0; // Used for the border of an informational badge when static or the default state when linked.
633
- $gl-badge-info-background-color-active: $gl-color-blue-700; // Used for the background of an informational badge in the active state.
634
- $gl-badge-info-background-color-default: $gl-color-blue-800; // Used for the background of an informational badge when static or the default state when linked.
635
- $gl-badge-neutral-icon-color-active: $gl-color-neutral-200; // Used for the icon of a neutral badge in the active state.
636
- $gl-badge-neutral-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a neutral badge in the hover state.
637
- $gl-badge-neutral-icon-color-default: $gl-color-neutral-400; // Used for the icon of a neutral badge when static or the default state when linked.
638
- $gl-badge-neutral-text-color-active: $gl-color-neutral-50; // Used for the text of a neutral badge in the active state.
639
- $gl-badge-neutral-text-color-hover: $gl-color-neutral-100; // Used for the text of a neutral badge in the hover state.
640
- $gl-badge-neutral-text-color-default: $gl-color-neutral-200; // Used for the text of a neutral badge when static or the default state when linked.
633
+ $gl-badge-info-background-color-active: $gl-color-blue-200; // Used for the background of an informational badge in the active state.
634
+ $gl-badge-info-background-color-default: $gl-color-blue-300; // Used for the background of an informational badge when static or the default state when linked.
635
+ $gl-badge-neutral-icon-color-active: $gl-color-neutral-950; // Used for the icon of a neutral badge in the active state.
636
+ $gl-badge-neutral-icon-color-hover: $gl-color-neutral-950; // Used for the icon of a neutral badge in the hover state.
637
+ $gl-badge-neutral-icon-color-default: $gl-color-neutral-950; // Used for the icon of a neutral badge when static or the default state when linked.
638
+ $gl-badge-neutral-text-color-active: $gl-color-neutral-950; // Used for the text of a neutral badge in the active state.
639
+ $gl-badge-neutral-text-color-hover: $gl-color-neutral-950; // Used for the text of a neutral badge in the hover state.
640
+ $gl-badge-neutral-text-color-default: $gl-color-neutral-950; // Used for the text of a neutral badge when static or the default state when linked.
641
641
  $gl-badge-neutral-border-color-active: $gl-color-alpha-0; // Used for the border of a neutral badge in the active state.
642
642
  $gl-badge-neutral-border-color-focus: $gl-color-alpha-0; // Used for the border of a neutral badge in the focus state.
643
- $gl-badge-neutral-border-color-hover: $gl-color-neutral-700; // Used for the border of a neutral badge in the hover state.
643
+ $gl-badge-neutral-border-color-hover: $gl-color-neutral-200; // Used for the border of a neutral badge in the hover state.
644
644
  $gl-badge-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a neutral badge when static or the default state when linked.
645
- $gl-badge-neutral-background-color-active: $gl-color-neutral-700; // Used for the background of a neutral badge in the active state.
646
- $gl-badge-neutral-background-color-default: $gl-color-neutral-800; // Used for the background of a neutral badge when static or the default state when linked.
647
- $gl-badge-muted-icon-color-active: $gl-color-neutral-200; // Used for the icon of a muted badge in the active state.
648
- $gl-badge-muted-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a muted badge in the hover state.
649
- $gl-badge-muted-icon-color-default: $gl-color-neutral-400; // Used for the icon of a muted badge when static or the default state when linked.
650
- $gl-badge-muted-text-color-active: $gl-color-neutral-100; // Used for the text of a muted badge in the active state.
651
- $gl-badge-muted-text-color-hover: $gl-color-neutral-200; // Used for the text of a muted badge in the hover state.
652
- $gl-badge-muted-text-color-default: $gl-color-neutral-300; // Used for the text of a muted badge when static or the default state when linked.
645
+ $gl-badge-neutral-background-color-active: $gl-color-neutral-200; // Used for the background of a neutral badge in the active state.
646
+ $gl-badge-neutral-background-color-default: $gl-color-neutral-300; // Used for the background of a neutral badge when static or the default state when linked.
647
+ $gl-badge-muted-icon-color-active: $gl-color-neutral-950; // Used for the icon of a muted badge in the active state.
648
+ $gl-badge-muted-icon-color-hover: $gl-color-neutral-950; // Used for the icon of a muted badge in the hover state.
649
+ $gl-badge-muted-icon-color-default: $gl-color-neutral-950; // Used for the icon of a muted badge when static or the default state when linked.
650
+ $gl-badge-muted-text-color-active: $gl-color-neutral-950; // Used for the text of a muted badge in the active state.
651
+ $gl-badge-muted-text-color-hover: $gl-color-neutral-950; // Used for the text of a muted badge in the hover state.
652
+ $gl-badge-muted-text-color-default: $gl-color-neutral-950; // Used for the text of a muted badge when static or the default state when linked.
653
653
  $gl-badge-muted-border-color-active: $gl-color-alpha-0; // Used for the border of a muted badge in the active state.
654
654
  $gl-badge-muted-border-color-focus: $gl-color-alpha-0; // Used for the border of a muted badge in the focus state.
655
- $gl-badge-muted-border-color-hover: $gl-color-neutral-700; // Used for the border of a muted badge in the hover state.
655
+ $gl-badge-muted-border-color-hover: $gl-color-neutral-300; // Used for the border of a muted badge in the hover state.
656
656
  $gl-badge-muted-border-color-default: $gl-color-alpha-0; // Used for the border of a muted badge when static or the default state when linked.
657
- $gl-badge-muted-background-color-active: $gl-color-neutral-800; // Used for the background of a muted badge in the active state.
658
- $gl-badge-muted-background-color-default: $gl-color-neutral-900; // Used for the background of a muted badge when static or the default state when linked.
657
+ $gl-badge-muted-background-color-active: $gl-color-neutral-300; // Used for the background of a muted badge in the active state.
658
+ $gl-badge-muted-background-color-default: $gl-color-neutral-400; // Used for the background of a muted badge when static or the default state when linked.
659
659
  $gl-avatar-fallback-text-color-neutral: $gl-color-neutral-200; // Neutral text color for avatar fallback with no particular meaning.
660
660
  $gl-avatar-fallback-text-color-orange: $gl-color-orange-200; // Orange text color for avatar fallback with no particular meaning.
661
661
  $gl-avatar-fallback-text-color-green: $gl-color-green-200; // Green text color for avatar fallback with no particular meaning.
package/src/tokens/build/scss/_tokens.scss CHANGED
@@ -572,9 +572,9 @@ $gl-button-default-primary-foreground-color-default: $gl-color-neutral-800; // U
572
572
  $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
573
573
  $gl-banner-promo-background-color: $gl-color-neutral-10; // Used as background for the default banner type.
574
574
  $gl-banner-intro-border-color: $gl-color-blue-300; // Used to compliment the info banner.
575
- $gl-badge-tier-icon-color-active: $gl-color-purple-700; // Used for the icon of a tier related badge in the active state.
576
- $gl-badge-tier-icon-color-hover: $gl-color-purple-600; // Used for the icon of a tier related badge in the hover state.
577
- $gl-badge-tier-icon-color-default: $gl-color-purple-500; // Used for the icon of a tier related badge when static or the default state when linked.
575
+ $gl-badge-tier-icon-color-active: $gl-color-purple-900; // Used for the icon of a tier related badge in the active state.
576
+ $gl-badge-tier-icon-color-hover: $gl-color-purple-800; // Used for the icon of a tier related badge in the hover state.
577
+ $gl-badge-tier-icon-color-default: $gl-color-purple-700; // Used for the icon of a tier related badge when static or the default state when linked.
578
578
  $gl-badge-tier-text-color-active: $gl-color-purple-900; // Used for the text of a tier related badge in the active state.
579
579
  $gl-badge-tier-text-color-hover: $gl-color-purple-800; // Used for the text of a tier related badge in the hover state.
580
580
  $gl-badge-tier-text-color-default: $gl-color-purple-700; // Used for the text of a tier related badge when static or the default state when linked.
@@ -584,9 +584,9 @@ $gl-badge-tier-border-color-hover: $gl-color-purple-200; // Used for the border
584
584
  $gl-badge-tier-border-color-default: $gl-color-alpha-0; // Used for the border of a tier related badge when static or the default state when linked.
585
585
  $gl-badge-tier-background-color-active: $gl-color-purple-200; // Used for the background of a tier related badge in the active state.
586
586
  $gl-badge-tier-background-color-default: $gl-color-purple-100; // Used for the background of a tier related badge when static or the default state when linked.
587
- $gl-badge-danger-icon-color-active: $gl-color-red-700; // Used for the icon of a danger badge in the active state.
588
- $gl-badge-danger-icon-color-hover: $gl-color-red-600; // Used for the icon of a danger badge in the hover state.
589
- $gl-badge-danger-icon-color-default: $gl-color-red-500; // Used for the icon of a danger badge when static or the default state when linked.
587
+ $gl-badge-danger-icon-color-active: $gl-color-red-900; // Used for the icon of a danger badge in the active state.
588
+ $gl-badge-danger-icon-color-hover: $gl-color-red-800; // Used for the icon of a danger badge in the hover state.
589
+ $gl-badge-danger-icon-color-default: $gl-color-red-700; // Used for the icon of a danger badge when static or the default state when linked.
590
590
  $gl-badge-danger-text-color-active: $gl-color-red-900; // Used for the text of a danger badge in the active state.
591
591
  $gl-badge-danger-text-color-hover: $gl-color-red-800; // Used for the text of a danger badge in the hover state.
592
592
  $gl-badge-danger-text-color-default: $gl-color-red-700; // Used for the text of a danger badge when static or the default state when linked.