@gitlab/ui 88.3.0 → 88.4.1

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 +14 -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/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.scss +1 -0
  17. package/src/tokens/build/css/tokens.css +68 -33
  18. package/src/tokens/build/css/tokens.dark.css +68 -33
  19. package/src/tokens/build/js/tokens.dark.js +68 -33
  20. package/src/tokens/build/js/tokens.js +68 -33
  21. package/src/tokens/build/json/tokens.dark.json +842 -107
  22. package/src/tokens/build/json/tokens.json +842 -107
  23. package/src/tokens/build/scss/_tokens.dark.scss +68 -33
  24. package/src/tokens/build/scss/_tokens.scss +68 -33
  25. package/src/tokens/build/scss/_tokens_custom_properties.scss +35 -0
  26. package/src/tokens/contextual/badge.tokens.json +208 -33
package/src/tokens/build/css/tokens.css CHANGED
@@ -573,34 +573,46 @@
573
573
  --gl-badge-tier-text-color-active: var(--gl-color-purple-900); /* Used for the text of a tier related badge in the active state. */
574
574
  --gl-badge-tier-text-color-hover: var(--gl-color-purple-800); /* Used for the text of a tier related badge in the hover state. */
575
575
  --gl-badge-tier-text-color-default: var(--gl-color-purple-700); /* Used for the text of a tier related badge when static or the default state when linked. */
576
+ --gl-badge-tier-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a tier related badge in the active state. */
577
+ --gl-badge-tier-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a tier related badge in the focus state. */
576
578
  --gl-badge-tier-border-color-hover: var(--gl-color-purple-200); /* Used for the border of a tier related badge in the hover state. */
579
+ --gl-badge-tier-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a tier related badge when static or the default state when linked. */
577
580
  --gl-badge-tier-background-color-active: var(--gl-color-purple-200); /* Used for the background of a tier related badge in the active state. */
578
581
  --gl-badge-tier-background-color-default: var(--gl-color-purple-100); /* Used for the background of a tier related badge when static or the default state when linked. */
579
- --gl-badge-danger-icon-color-active: var(--gl-color-red-700); /* Used for the icon of a danger (critical) badge in the active state. */
580
- --gl-badge-danger-icon-color-hover: var(--gl-color-red-600); /* Used for the icon of a danger (critical) badge in the hover state. */
581
- --gl-badge-danger-icon-color-default: var(--gl-color-red-500); /* Used for the icon of a danger (critical) badge when static or the default state when linked. */
582
- --gl-badge-danger-text-color-active: var(--gl-color-red-900); /* Used for the text of a danger (critical) badge in the active state. */
583
- --gl-badge-danger-text-color-hover: var(--gl-color-red-800); /* Used for the text of a danger (critical) badge in the hover state. */
584
- --gl-badge-danger-text-color-default: var(--gl-color-red-700); /* Used for the text of a danger (critical) badge when static or the default state when linked. */
585
- --gl-badge-danger-border-color-hover: var(--gl-color-red-200); /* Used for the border of a danger (critical) badge in the hover state. */
586
- --gl-badge-danger-background-color-active: var(--gl-color-red-200); /* Used for the background of a danger (critical) badge in the active state. */
587
- --gl-badge-danger-background-color-default: var(--gl-color-red-100); /* Used for the background of a danger (critical) badge when static or the default state when linked. */
588
- --gl-badge-warning-icon-color-active: var(--gl-color-orange-700); /* Used for the icon of a warning status or confidential item in the active state. */
589
- --gl-badge-warning-icon-color-hover: var(--gl-color-orange-600); /* Used for the icon of a warning status or confidential item in the hover state. */
590
- --gl-badge-warning-icon-color-default: var(--gl-color-orange-500); /* Used for the icon of a warning status or confidential item when static or the default state when linked. */
591
- --gl-badge-warning-text-color-active: var(--gl-color-orange-900); /* Used for the text of a warning status or confidential item in the active state.N */
592
- --gl-badge-warning-text-color-hover: var(--gl-color-orange-800); /* Used for the text of a warning status or confidential item in the hover state. */
593
- --gl-badge-warning-text-color-default: var(--gl-color-orange-700); /* Used for the text of a warning status or confidential item when static or the default state when linked. */
594
- --gl-badge-warning-border-color-hover: var(--gl-color-orange-200); /* Used for the border of a warning status or confidential item in the hover state. */
595
- --gl-badge-warning-background-color-active: var(--gl-color-orange-200); /* Used for the background of a warning status or confidential item in the active state. */
596
- --gl-badge-warning-background-color-default: var(--gl-color-orange-100); /* Used for the background of a warning status or confidential item when static or the default state when linked. */
582
+ --gl-badge-danger-icon-color-active: var(--gl-color-red-700); /* Used for the icon of a danger badge in the active state. */
583
+ --gl-badge-danger-icon-color-hover: var(--gl-color-red-600); /* Used for the icon of a danger badge in the hover state. */
584
+ --gl-badge-danger-icon-color-default: var(--gl-color-red-500); /* Used for the icon of a danger badge when static or the default state when linked. */
585
+ --gl-badge-danger-text-color-active: var(--gl-color-red-900); /* Used for the text of a danger badge in the active state. */
586
+ --gl-badge-danger-text-color-hover: var(--gl-color-red-800); /* Used for the text of a danger badge in the hover state. */
587
+ --gl-badge-danger-text-color-default: var(--gl-color-red-700); /* Used for the text of a danger badge when static or the default state when linked. */
588
+ --gl-badge-danger-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a danger badge in the active state. */
589
+ --gl-badge-danger-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a danger badge in the focus state. */
590
+ --gl-badge-danger-border-color-hover: var(--gl-color-red-200); /* Used for the border of a danger badge in the hover state. */
591
+ --gl-badge-danger-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a danger badge when static or the default state when linked. */
592
+ --gl-badge-danger-background-color-active: var(--gl-color-red-200); /* Used for the background of a danger badge in the active state. */
593
+ --gl-badge-danger-background-color-default: var(--gl-color-red-100); /* Used for the background of a danger badge when static or the default state when linked. */
594
+ --gl-badge-warning-icon-color-active: var(--gl-color-orange-700); /* Used for the icon of a warning badge in the active state. */
595
+ --gl-badge-warning-icon-color-hover: var(--gl-color-orange-600); /* Used for the icon of a warning badge in the hover state. */
596
+ --gl-badge-warning-icon-color-default: var(--gl-color-orange-500); /* Used for the icon of a warning badge when static or the default state when linked. */
597
+ --gl-badge-warning-text-color-active: var(--gl-color-orange-900); /* Used for the text of a warning badge in the active state. */
598
+ --gl-badge-warning-text-color-hover: var(--gl-color-orange-800); /* Used for the text of a warning badge in the hover state. */
599
+ --gl-badge-warning-text-color-default: var(--gl-color-orange-700); /* Used for the text of a warning badge when static or the default state when linked. */
600
+ --gl-badge-warning-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a warning badge in the active state. */
601
+ --gl-badge-warning-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a warning badge in the focus state. */
602
+ --gl-badge-warning-border-color-hover: var(--gl-color-orange-200); /* Used for the border of a warning badge in the hover state. */
603
+ --gl-badge-warning-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a warning badge when static or the default state when linked. */
604
+ --gl-badge-warning-background-color-active: var(--gl-color-orange-200); /* Used for the background of a warning badge in the active state. */
605
+ --gl-badge-warning-background-color-default: var(--gl-color-orange-100); /* Used for the background of a warning badge when static or the default state when linked. */
597
606
  --gl-badge-success-icon-color-active: var(--gl-color-green-700); /* Used for the icon of a success badge in the active state. */
598
607
  --gl-badge-success-icon-color-hover: var(--gl-color-green-600); /* Used for the icon of a success badge in the hover state. */
599
608
  --gl-badge-success-icon-color-default: var(--gl-color-green-500); /* Used for the icon of a success badge when static or the default state when linked. */
600
609
  --gl-badge-success-text-color-active: var(--gl-color-green-900); /* Used for the text of a success badge in the active state. */
601
610
  --gl-badge-success-text-color-hover: var(--gl-color-green-800); /* Used for the text of a success badge in the hover state. */
602
611
  --gl-badge-success-text-color-default: var(--gl-color-green-700); /* Used for the text of a success badge when static or the default state when linked. */
612
+ --gl-badge-success-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a success badge in the active state. */
613
+ --gl-badge-success-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a success badge in the focus state. */
603
614
  --gl-badge-success-border-color-hover: var(--gl-color-green-200); /* Used for the border of a success badge in the hover state. */
615
+ --gl-badge-success-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a success badge when static or the default state when linked. */
604
616
  --gl-badge-success-background-color-active: var(--gl-color-green-200); /* Used for the background of a success badge in the active state. */
605
617
  --gl-badge-success-background-color-default: var(--gl-color-green-100); /* Used for the background of a success badge when static or the default state when linked. */
606
618
  --gl-badge-info-icon-color-active: var(--gl-color-blue-700); /* Used for the icon of an informational badge in the active state. */
@@ -609,7 +621,10 @@
609
621
  --gl-badge-info-text-color-active: var(--gl-color-blue-900); /* Used for the text of an informational badge in the active state. */
610
622
  --gl-badge-info-text-color-hover: var(--gl-color-blue-800); /* Used for the text of an informational badge in the hover state. */
611
623
  --gl-badge-info-text-color-default: var(--gl-color-blue-700); /* Used for the text of an informational badge when static or the default state when linked. */
624
+ --gl-badge-info-border-color-active: var(--gl-color-alpha-0); /* Used for the border of an informational badge in the active state. */
625
+ --gl-badge-info-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of an informational badge in the focus state. */
612
626
  --gl-badge-info-border-color-hover: var(--gl-color-blue-200); /* Used for the border of an informational badge in the hover state. */
627
+ --gl-badge-info-border-color-default: var(--gl-color-alpha-0); /* Used for the border of an informational badge when static or the default state when linked. */
613
628
  --gl-badge-info-background-color-active: var(--gl-color-blue-200); /* Used for the background of an informational badge in the active state. */
614
629
  --gl-badge-info-background-color-default: var(--gl-color-blue-100); /* Used for the background of an informational badge when static or the default state when linked. */
615
630
  --gl-badge-neutral-icon-color-active: var(--gl-color-neutral-700); /* Used for the icon of a neutral badge in the active state. */
@@ -618,18 +633,24 @@
618
633
  --gl-badge-neutral-text-color-active: var(--gl-color-neutral-900); /* Used for the text of a neutral badge in the active state. */
619
634
  --gl-badge-neutral-text-color-hover: var(--gl-color-neutral-800); /* Used for the text of a neutral badge in the hover state. */
620
635
  --gl-badge-neutral-text-color-default: var(--gl-color-neutral-700); /* Used for the text of a neutral badge when static or the default state when linked. */
636
+ --gl-badge-neutral-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a neutral badge in the active state. */
637
+ --gl-badge-neutral-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a neutral badge in the focus state. */
621
638
  --gl-badge-neutral-border-color-hover: var(--gl-color-neutral-200); /* Used for the border of a neutral badge in the hover state. */
639
+ --gl-badge-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a neutral badge when static or the default state when linked. */
622
640
  --gl-badge-neutral-background-color-active: var(--gl-color-neutral-200); /* Used for the background of a neutral badge in the active state. */
623
641
  --gl-badge-neutral-background-color-default: var(--gl-color-neutral-100); /* Used for the background of a neutral badge when static or the default state when linked. */
624
- --gl-badge-muted-icon-color-active: var(--gl-color-neutral-700); /* Used for the icon of a subtle neutral badge in the active state. */
625
- --gl-badge-muted-icon-color-hover: var(--gl-color-neutral-600); /* Used for the icon of a subtle neutral badge in the hover state. */
626
- --gl-badge-muted-icon-color-default: var(--gl-color-neutral-500); /* Used for the icon of a subtle neutral badge when static or the default state when linked. */
627
- --gl-badge-muted-text-color-active: var(--gl-color-neutral-800); /* Used for the text of a subtle neutral badge in the active state. */
628
- --gl-badge-muted-text-color-hover: var(--gl-color-neutral-700); /* Used for the text of a subtle neutral badge in the hover state. */
629
- --gl-badge-muted-text-color-default: var(--gl-color-neutral-600); /* Used for the text of a subtle neutral badge when static or the default state when linked. */
630
- --gl-badge-muted-border-color-hover: var(--gl-color-neutral-200); /* Used for the border of a subtle neutral badge in the hover state. */
631
- --gl-badge-muted-background-color-active: var(--gl-color-neutral-100); /* Used for the background of a subtle neutral badge in the active state. */
632
- --gl-badge-muted-background-color-default: var(--gl-color-neutral-50); /* Used for the background of a subtle neutral badge when static or the default state when linked. */
642
+ --gl-badge-muted-icon-color-active: var(--gl-color-neutral-700); /* Used for the icon of a muted badge in the active state. */
643
+ --gl-badge-muted-icon-color-hover: var(--gl-color-neutral-600); /* Used for the icon of a muted badge in the hover state. */
644
+ --gl-badge-muted-icon-color-default: var(--gl-color-neutral-500); /* Used for the icon of a muted badge when static or the default state when linked. */
645
+ --gl-badge-muted-text-color-active: var(--gl-color-neutral-800); /* Used for the text of a muted badge in the active state. */
646
+ --gl-badge-muted-text-color-hover: var(--gl-color-neutral-700); /* Used for the text of a muted badge in the hover state. */
647
+ --gl-badge-muted-text-color-default: var(--gl-color-neutral-600); /* Used for the text of a muted badge when static or the default state when linked. */
648
+ --gl-badge-muted-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a muted badge in the active state. */
649
+ --gl-badge-muted-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a muted badge in the focus state. */
650
+ --gl-badge-muted-border-color-hover: var(--gl-color-neutral-200); /* Used for the border of a muted badge in the hover state. */
651
+ --gl-badge-muted-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a muted badge when static or the default state when linked. */
652
+ --gl-badge-muted-background-color-active: var(--gl-color-neutral-100); /* Used for the background of a muted badge in the active state. */
653
+ --gl-badge-muted-background-color-default: var(--gl-color-neutral-50); /* Used for the background of a muted badge when static or the default state when linked. */
633
654
  --gl-avatar-fallback-background-color-neutral: var(--gl-color-neutral-50); /* Neutral background for avatar fallback with no particular meaning. */
634
655
  --gl-avatar-fallback-background-color-orange: var(--gl-color-orange-50); /* Orange background for avatar fallback with no particular meaning. */
635
656
  --gl-avatar-fallback-background-color-green: var(--gl-color-green-50); /* Green background for avatar fallback with no particular meaning. */
@@ -709,18 +730,25 @@
709
730
  --gl-button-default-primary-foreground-color-hover: var(--gl-button-default-primary-foreground-color-default); /* Used for the foreground of a default primary button in the hover state. */
710
731
  --gl-badge-tier-icon-color-focus: var(--gl-badge-tier-icon-color-hover); /* Used for the icon of a tier related badge in the focus state. */
711
732
  --gl-badge-tier-text-color-focus: var(--gl-badge-tier-text-color-hover); /* Used for the text of a tier related badge in the focus state. */
712
- --gl-badge-danger-icon-color-focus: var(--gl-badge-danger-icon-color-hover); /* Used for the icon of a danger (critical) badge in the focus state. */
713
- --gl-badge-danger-text-color-focus: var(--gl-badge-danger-text-color-hover); /* Used for the text of a danger (critical) badge in the focus state. */
714
- --gl-badge-warning-icon-color-focus: var(--gl-badge-warning-icon-color-hover); /* Used for the icon of a warning status or confidential item in the focus state. */
715
- --gl-badge-warning-text-color-focus: var(--gl-badge-warning-text-color-hover); /* Used for the text of a warning status or confidential item in the focus state. */
733
+ --gl-badge-tier-background-color-hover: var(--gl-badge-tier-background-color-default); /* Used for the background of a tier related badge in the hover state. */
734
+ --gl-badge-danger-icon-color-focus: var(--gl-badge-danger-icon-color-hover); /* Used for the icon of a danger badge in the focus state. */
735
+ --gl-badge-danger-text-color-focus: var(--gl-badge-danger-text-color-hover); /* Used for the text of a danger badge in the focus state. */
736
+ --gl-badge-danger-background-color-hover: var(--gl-badge-danger-background-color-default); /* Used for the background of a danger badge in the hover state. */
737
+ --gl-badge-warning-icon-color-focus: var(--gl-badge-warning-icon-color-hover); /* Used for the icon of a warning badge in the focus state. */
738
+ --gl-badge-warning-text-color-focus: var(--gl-badge-warning-text-color-hover); /* Used for the text of a warning badge in the focus state. */
739
+ --gl-badge-warning-background-color-hover: var(--gl-badge-warning-background-color-default); /* Used for the background of a warning badge in the hover state. */
716
740
  --gl-badge-success-icon-color-focus: var(--gl-badge-success-icon-color-hover); /* Used for the icon of a success badge in the focus state. */
717
741
  --gl-badge-success-text-color-focus: var(--gl-badge-success-text-color-hover); /* Used for the text of a success badge in the focus state. */
742
+ --gl-badge-success-background-color-hover: var(--gl-badge-success-background-color-default); /* Used for the background of a success badge in the hover state. */
718
743
  --gl-badge-info-icon-color-focus: var(--gl-badge-info-icon-color-hover); /* Used for the icon of an informational badge in the focus state. */
719
744
  --gl-badge-info-text-color-focus: var(--gl-badge-info-text-color-hover); /* Used for the text of an informational badge in the focus state. */
745
+ --gl-badge-info-background-color-hover: var(--gl-badge-info-background-color-default); /* Used for the background of an informational badge in the hover state. */
720
746
  --gl-badge-neutral-icon-color-focus: var(--gl-badge-neutral-icon-color-hover); /* Used for the icon of a neutral badge in the focus state. */
721
747
  --gl-badge-neutral-text-color-focus: var(--gl-badge-neutral-text-color-hover); /* Used for the text of a neutral badge in the focus state. */
722
- --gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-hover); /* Used for the icon of a subtle neutral badge in the focus state. */
723
- --gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /* Used for the text of a subtle neutral badge in the focus state. */
748
+ --gl-badge-neutral-background-color-hover: var(--gl-badge-neutral-background-color-default); /* Used for the background of a neutral badge in the hover state. */
749
+ --gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-hover); /* Used for the icon of a muted badge in the focus state. */
750
+ --gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /* Used for the text of a muted badge in the focus state. */
751
+ --gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-default); /* Used for the background of a muted badge in the hover state. */
724
752
  --gl-action-danger-border-color-active: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the active state. */
725
753
  --gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the focus state. */
726
754
  --gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the hover state. */
@@ -758,4 +786,11 @@
758
786
  --gl-button-default-tertiary-foreground-color-active: var(--gl-action-neutral-foreground-color-active); /* Used for the foreground of a default borderless, tertiary button in the active state. */
759
787
  --gl-button-default-tertiary-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus); /* Used for the foreground of a default borderless, tertiary button in the focus state. */
760
788
  --gl-button-default-tertiary-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover); /* Used for the foreground of a default borderless, tertiary button in the hover state. */
789
+ --gl-badge-tier-background-color-focus: var(--gl-badge-tier-background-color-hover); /* Used for the background of a tier related badge in the focus state. */
790
+ --gl-badge-danger-background-color-focus: var(--gl-badge-danger-background-color-hover); /* Used for the background of a danger badge in the focus state. */
791
+ --gl-badge-warning-background-color-focus: var(--gl-badge-warning-background-color-hover); /* Used for the background of a warning badge in the focus state. */
792
+ --gl-badge-success-background-color-focus: var(--gl-badge-success-background-color-hover); /* Used for the background of a success badge in the focus state. */
793
+ --gl-badge-info-background-color-focus: var(--gl-badge-info-background-color-hover); /* Used for the background of an informational badge in the focus state. */
794
+ --gl-badge-neutral-background-color-focus: var(--gl-badge-neutral-background-color-hover); /* Used for the background of a neutral badge in the focus state. */
795
+ --gl-badge-muted-background-color-focus: var(--gl-badge-muted-background-color-hover); /* Used for the background of a muted badge in the focus state. */
761
796
  }
package/src/tokens/build/css/tokens.dark.css CHANGED
@@ -573,34 +573,46 @@
573
573
  --gl-badge-tier-text-color-active: var(--gl-color-purple-100); /* Used for the text of a tier related badge in the active state. */
574
574
  --gl-badge-tier-text-color-hover: var(--gl-color-purple-200); /* Used for the text of a tier related badge in the hover state. */
575
575
  --gl-badge-tier-text-color-default: var(--gl-color-purple-300); /* Used for the text of a tier related badge when static or the default state when linked. */
576
+ --gl-badge-tier-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a tier related badge in the active state. */
577
+ --gl-badge-tier-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a tier related badge in the focus state. */
576
578
  --gl-badge-tier-border-color-hover: var(--gl-color-purple-800); /* Used for the border of a tier related badge in the hover state. */
579
+ --gl-badge-tier-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a tier related badge when static or the default state when linked. */
577
580
  --gl-badge-tier-background-color-active: var(--gl-color-purple-800); /* Used for the background of a tier related badge in the active state. */
578
581
  --gl-badge-tier-background-color-default: var(--gl-color-purple-900); /* Used for the background of a tier related badge when static or the default state when linked. */
579
- --gl-badge-danger-icon-color-active: var(--gl-color-red-200); /* Used for the icon of a danger (critical) badge in the active state. */
580
- --gl-badge-danger-icon-color-hover: var(--gl-color-red-300); /* Used for the icon of a danger (critical) badge in the hover state. */
581
- --gl-badge-danger-icon-color-default: var(--gl-color-red-400); /* Used for the icon of a danger (critical) badge when static or the default state when linked. */
582
- --gl-badge-danger-text-color-active: var(--gl-color-red-50); /* Used for the text of a danger (critical) badge in the active state. */
583
- --gl-badge-danger-text-color-hover: var(--gl-color-red-100); /* Used for the text of a danger (critical) badge in the hover state. */
584
- --gl-badge-danger-text-color-default: var(--gl-color-red-200); /* Used for the text of a danger (critical) badge when static or the default state when linked. */
585
- --gl-badge-danger-border-color-hover: var(--gl-color-red-700); /* Used for the border of a danger (critical) badge in the hover state. */
586
- --gl-badge-danger-background-color-active: var(--gl-color-red-700); /* Used for the background of a danger (critical) badge in the active state. */
587
- --gl-badge-danger-background-color-default: var(--gl-color-red-800); /* Used for the background of a danger (critical) badge when static or the default state when linked. */
588
- --gl-badge-warning-icon-color-active: var(--gl-color-orange-200); /* Used for the icon of a warning status or confidential item in the active state. */
589
- --gl-badge-warning-icon-color-hover: var(--gl-color-orange-300); /* Used for the icon of a warning status or confidential item in the hover state. */
590
- --gl-badge-warning-icon-color-default: var(--gl-color-orange-400); /* Used for the icon of a warning status or confidential item when static or the default state when linked. */
591
- --gl-badge-warning-text-color-active: var(--gl-color-orange-50); /* Used for the text of a warning status or confidential item in the active state.N */
592
- --gl-badge-warning-text-color-hover: var(--gl-color-orange-100); /* Used for the text of a warning status or confidential item in the hover state. */
593
- --gl-badge-warning-text-color-default: var(--gl-color-orange-200); /* Used for the text of a warning status or confidential item when static or the default state when linked. */
594
- --gl-badge-warning-border-color-hover: var(--gl-color-orange-700); /* Used for the border of a warning status or confidential item in the hover state. */
595
- --gl-badge-warning-background-color-active: var(--gl-color-orange-700); /* Used for the background of a warning status or confidential item in the active state. */
596
- --gl-badge-warning-background-color-default: var(--gl-color-orange-800); /* Used for the background of a warning status or confidential item when static or the default state when linked. */
582
+ --gl-badge-danger-icon-color-active: var(--gl-color-red-200); /* Used for the icon of a danger badge in the active state. */
583
+ --gl-badge-danger-icon-color-hover: var(--gl-color-red-300); /* Used for the icon of a danger badge in the hover state. */
584
+ --gl-badge-danger-icon-color-default: var(--gl-color-red-400); /* Used for the icon of a danger badge when static or the default state when linked. */
585
+ --gl-badge-danger-text-color-active: var(--gl-color-red-50); /* Used for the text of a danger badge in the active state. */
586
+ --gl-badge-danger-text-color-hover: var(--gl-color-red-100); /* Used for the text of a danger badge in the hover state. */
587
+ --gl-badge-danger-text-color-default: var(--gl-color-red-200); /* Used for the text of a danger badge when static or the default state when linked. */
588
+ --gl-badge-danger-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a danger badge in the active state. */
589
+ --gl-badge-danger-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a danger badge in the focus state. */
590
+ --gl-badge-danger-border-color-hover: var(--gl-color-red-700); /* Used for the border of a danger badge in the hover state. */
591
+ --gl-badge-danger-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a danger badge when static or the default state when linked. */
592
+ --gl-badge-danger-background-color-active: var(--gl-color-red-700); /* Used for the background of a danger badge in the active state. */
593
+ --gl-badge-danger-background-color-default: var(--gl-color-red-800); /* Used for the background of a danger badge when static or the default state when linked. */
594
+ --gl-badge-warning-icon-color-active: var(--gl-color-orange-200); /* Used for the icon of a warning badge in the active state. */
595
+ --gl-badge-warning-icon-color-hover: var(--gl-color-orange-300); /* Used for the icon of a warning badge in the hover state. */
596
+ --gl-badge-warning-icon-color-default: var(--gl-color-orange-400); /* Used for the icon of a warning badge when static or the default state when linked. */
597
+ --gl-badge-warning-text-color-active: var(--gl-color-orange-50); /* Used for the text of a warning badge in the active state. */
598
+ --gl-badge-warning-text-color-hover: var(--gl-color-orange-100); /* Used for the text of a warning badge in the hover state. */
599
+ --gl-badge-warning-text-color-default: var(--gl-color-orange-200); /* Used for the text of a warning badge when static or the default state when linked. */
600
+ --gl-badge-warning-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a warning badge in the active state. */
601
+ --gl-badge-warning-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a warning badge in the focus state. */
602
+ --gl-badge-warning-border-color-hover: var(--gl-color-orange-700); /* Used for the border of a warning badge in the hover state. */
603
+ --gl-badge-warning-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a warning badge when static or the default state when linked. */
604
+ --gl-badge-warning-background-color-active: var(--gl-color-orange-700); /* Used for the background of a warning badge in the active state. */
605
+ --gl-badge-warning-background-color-default: var(--gl-color-orange-800); /* Used for the background of a warning badge when static or the default state when linked. */
597
606
  --gl-badge-success-icon-color-active: var(--gl-color-green-200); /* Used for the icon of a success badge in the active state. */
598
607
  --gl-badge-success-icon-color-hover: var(--gl-color-green-300); /* Used for the icon of a success badge in the hover state. */
599
608
  --gl-badge-success-icon-color-default: var(--gl-color-green-400); /* Used for the icon of a success badge when static or the default state when linked. */
600
609
  --gl-badge-success-text-color-active: var(--gl-color-green-50); /* Used for the text of a success badge in the active state. */
601
610
  --gl-badge-success-text-color-hover: var(--gl-color-green-100); /* Used for the text of a success badge in the hover state. */
602
611
  --gl-badge-success-text-color-default: var(--gl-color-green-200); /* Used for the text of a success badge when static or the default state when linked. */
612
+ --gl-badge-success-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a success badge in the active state. */
613
+ --gl-badge-success-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a success badge in the focus state. */
603
614
  --gl-badge-success-border-color-hover: var(--gl-color-green-700); /* Used for the border of a success badge in the hover state. */
615
+ --gl-badge-success-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a success badge when static or the default state when linked. */
604
616
  --gl-badge-success-background-color-active: var(--gl-color-green-700); /* Used for the background of a success badge in the active state. */
605
617
  --gl-badge-success-background-color-default: var(--gl-color-green-800); /* Used for the background of a success badge when static or the default state when linked. */
606
618
  --gl-badge-info-icon-color-active: var(--gl-color-blue-200); /* Used for the icon of an informational badge in the active state. */
@@ -609,7 +621,10 @@
609
621
  --gl-badge-info-text-color-active: var(--gl-color-blue-50); /* Used for the text of an informational badge in the active state. */
610
622
  --gl-badge-info-text-color-hover: var(--gl-color-blue-100); /* Used for the text of an informational badge in the hover state. */
611
623
  --gl-badge-info-text-color-default: var(--gl-color-blue-200); /* Used for the text of an informational badge when static or the default state when linked. */
624
+ --gl-badge-info-border-color-active: var(--gl-color-alpha-0); /* Used for the border of an informational badge in the active state. */
625
+ --gl-badge-info-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of an informational badge in the focus state. */
612
626
  --gl-badge-info-border-color-hover: var(--gl-color-blue-700); /* Used for the border of an informational badge in the hover state. */
627
+ --gl-badge-info-border-color-default: var(--gl-color-alpha-0); /* Used for the border of an informational badge when static or the default state when linked. */
613
628
  --gl-badge-info-background-color-active: var(--gl-color-blue-700); /* Used for the background of an informational badge in the active state. */
614
629
  --gl-badge-info-background-color-default: var(--gl-color-blue-800); /* Used for the background of an informational badge when static or the default state when linked. */
615
630
  --gl-badge-neutral-icon-color-active: var(--gl-color-neutral-200); /* Used for the icon of a neutral badge in the active state. */
@@ -618,18 +633,24 @@
618
633
  --gl-badge-neutral-text-color-active: var(--gl-color-neutral-50); /* Used for the text of a neutral badge in the active state. */
619
634
  --gl-badge-neutral-text-color-hover: var(--gl-color-neutral-100); /* Used for the text of a neutral badge in the hover state. */
620
635
  --gl-badge-neutral-text-color-default: var(--gl-color-neutral-200); /* Used for the text of a neutral badge when static or the default state when linked. */
636
+ --gl-badge-neutral-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a neutral badge in the active state. */
637
+ --gl-badge-neutral-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a neutral badge in the focus state. */
621
638
  --gl-badge-neutral-border-color-hover: var(--gl-color-neutral-700); /* Used for the border of a neutral badge in the hover state. */
639
+ --gl-badge-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a neutral badge when static or the default state when linked. */
622
640
  --gl-badge-neutral-background-color-active: var(--gl-color-neutral-700); /* Used for the background of a neutral badge in the active state. */
623
641
  --gl-badge-neutral-background-color-default: var(--gl-color-neutral-800); /* Used for the background of a neutral badge when static or the default state when linked. */
624
- --gl-badge-muted-icon-color-active: var(--gl-color-neutral-200); /* Used for the icon of a subtle neutral badge in the active state. */
625
- --gl-badge-muted-icon-color-hover: var(--gl-color-neutral-300); /* Used for the icon of a subtle neutral badge in the hover state. */
626
- --gl-badge-muted-icon-color-default: var(--gl-color-neutral-400); /* Used for the icon of a subtle neutral badge when static or the default state when linked. */
627
- --gl-badge-muted-text-color-active: var(--gl-color-neutral-100); /* Used for the text of a subtle neutral badge in the active state. */
628
- --gl-badge-muted-text-color-hover: var(--gl-color-neutral-200); /* Used for the text of a subtle neutral badge in the hover state. */
629
- --gl-badge-muted-text-color-default: var(--gl-color-neutral-300); /* Used for the text of a subtle neutral badge when static or the default state when linked. */
630
- --gl-badge-muted-border-color-hover: var(--gl-color-neutral-700); /* Used for the border of a subtle neutral badge in the hover state. */
631
- --gl-badge-muted-background-color-active: var(--gl-color-neutral-800); /* Used for the background of a subtle neutral badge in the active state. */
632
- --gl-badge-muted-background-color-default: var(--gl-color-neutral-900); /* Used for the background of a subtle neutral badge when static or the default state when linked. */
642
+ --gl-badge-muted-icon-color-active: var(--gl-color-neutral-200); /* Used for the icon of a muted badge in the active state. */
643
+ --gl-badge-muted-icon-color-hover: var(--gl-color-neutral-300); /* Used for the icon of a muted badge in the hover state. */
644
+ --gl-badge-muted-icon-color-default: var(--gl-color-neutral-400); /* Used for the icon of a muted badge when static or the default state when linked. */
645
+ --gl-badge-muted-text-color-active: var(--gl-color-neutral-100); /* Used for the text of a muted badge in the active state. */
646
+ --gl-badge-muted-text-color-hover: var(--gl-color-neutral-200); /* Used for the text of a muted badge in the hover state. */
647
+ --gl-badge-muted-text-color-default: var(--gl-color-neutral-300); /* Used for the text of a muted badge when static or the default state when linked. */
648
+ --gl-badge-muted-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a muted badge in the active state. */
649
+ --gl-badge-muted-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a muted badge in the focus state. */
650
+ --gl-badge-muted-border-color-hover: var(--gl-color-neutral-700); /* Used for the border of a muted badge in the hover state. */
651
+ --gl-badge-muted-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a muted badge when static or the default state when linked. */
652
+ --gl-badge-muted-background-color-active: var(--gl-color-neutral-800); /* Used for the background of a muted badge in the active state. */
653
+ --gl-badge-muted-background-color-default: var(--gl-color-neutral-900); /* Used for the background of a muted badge when static or the default state when linked. */
633
654
  --gl-avatar-fallback-background-color-neutral: var(--gl-color-neutral-900); /* Neutral background for avatar fallback with no particular meaning. */
634
655
  --gl-avatar-fallback-background-color-orange: var(--gl-color-orange-950); /* Orange background for avatar fallback with no particular meaning. */
635
656
  --gl-avatar-fallback-background-color-green: var(--gl-color-green-950); /* Green background for avatar fallback with no particular meaning. */
@@ -709,18 +730,25 @@
709
730
  --gl-button-default-primary-foreground-color-hover: var(--gl-button-default-primary-foreground-color-default); /* Used for the foreground of a default primary button in the hover state. */
710
731
  --gl-badge-tier-icon-color-focus: var(--gl-badge-tier-icon-color-hover); /* Used for the icon of a tier related badge in the focus state. */
711
732
  --gl-badge-tier-text-color-focus: var(--gl-badge-tier-text-color-hover); /* Used for the text of a tier related badge in the focus state. */
712
- --gl-badge-danger-icon-color-focus: var(--gl-badge-danger-icon-color-hover); /* Used for the icon of a danger (critical) badge in the focus state. */
713
- --gl-badge-danger-text-color-focus: var(--gl-badge-danger-text-color-hover); /* Used for the text of a danger (critical) badge in the focus state. */
714
- --gl-badge-warning-icon-color-focus: var(--gl-badge-warning-icon-color-hover); /* Used for the icon of a warning status or confidential item in the focus state. */
715
- --gl-badge-warning-text-color-focus: var(--gl-badge-warning-text-color-hover); /* Used for the text of a warning status or confidential item in the focus state. */
733
+ --gl-badge-tier-background-color-hover: var(--gl-badge-tier-background-color-default); /* Used for the background of a tier related badge in the hover state. */
734
+ --gl-badge-danger-icon-color-focus: var(--gl-badge-danger-icon-color-hover); /* Used for the icon of a danger badge in the focus state. */
735
+ --gl-badge-danger-text-color-focus: var(--gl-badge-danger-text-color-hover); /* Used for the text of a danger badge in the focus state. */
736
+ --gl-badge-danger-background-color-hover: var(--gl-badge-danger-background-color-default); /* Used for the background of a danger badge in the hover state. */
737
+ --gl-badge-warning-icon-color-focus: var(--gl-badge-warning-icon-color-hover); /* Used for the icon of a warning badge in the focus state. */
738
+ --gl-badge-warning-text-color-focus: var(--gl-badge-warning-text-color-hover); /* Used for the text of a warning badge in the focus state. */
739
+ --gl-badge-warning-background-color-hover: var(--gl-badge-warning-background-color-default); /* Used for the background of a warning badge in the hover state. */
716
740
  --gl-badge-success-icon-color-focus: var(--gl-badge-success-icon-color-hover); /* Used for the icon of a success badge in the focus state. */
717
741
  --gl-badge-success-text-color-focus: var(--gl-badge-success-text-color-hover); /* Used for the text of a success badge in the focus state. */
742
+ --gl-badge-success-background-color-hover: var(--gl-badge-success-background-color-default); /* Used for the background of a success badge in the hover state. */
718
743
  --gl-badge-info-icon-color-focus: var(--gl-badge-info-icon-color-hover); /* Used for the icon of an informational badge in the focus state. */
719
744
  --gl-badge-info-text-color-focus: var(--gl-badge-info-text-color-hover); /* Used for the text of an informational badge in the focus state. */
745
+ --gl-badge-info-background-color-hover: var(--gl-badge-info-background-color-default); /* Used for the background of an informational badge in the hover state. */
720
746
  --gl-badge-neutral-icon-color-focus: var(--gl-badge-neutral-icon-color-hover); /* Used for the icon of a neutral badge in the focus state. */
721
747
  --gl-badge-neutral-text-color-focus: var(--gl-badge-neutral-text-color-hover); /* Used for the text of a neutral badge in the focus state. */
722
- --gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-hover); /* Used for the icon of a subtle neutral badge in the focus state. */
723
- --gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /* Used for the text of a subtle neutral badge in the focus state. */
748
+ --gl-badge-neutral-background-color-hover: var(--gl-badge-neutral-background-color-default); /* Used for the background of a neutral badge in the hover state. */
749
+ --gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-hover); /* Used for the icon of a muted badge in the focus state. */
750
+ --gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /* Used for the text of a muted badge in the focus state. */
751
+ --gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-default); /* Used for the background of a muted badge in the hover state. */
724
752
  --gl-action-danger-border-color-active: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the active state. */
725
753
  --gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the focus state. */
726
754
  --gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the hover state. */
@@ -758,4 +786,11 @@
758
786
  --gl-button-default-tertiary-foreground-color-active: var(--gl-action-neutral-foreground-color-active); /* Used for the foreground of a default borderless, tertiary button in the active state. */
759
787
  --gl-button-default-tertiary-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus); /* Used for the foreground of a default borderless, tertiary button in the focus state. */
760
788
  --gl-button-default-tertiary-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover); /* Used for the foreground of a default borderless, tertiary button in the hover state. */
789
+ --gl-badge-tier-background-color-focus: var(--gl-badge-tier-background-color-hover); /* Used for the background of a tier related badge in the focus state. */
790
+ --gl-badge-danger-background-color-focus: var(--gl-badge-danger-background-color-hover); /* Used for the background of a danger badge in the focus state. */
791
+ --gl-badge-warning-background-color-focus: var(--gl-badge-warning-background-color-hover); /* Used for the background of a warning badge in the focus state. */
792
+ --gl-badge-success-background-color-focus: var(--gl-badge-success-background-color-hover); /* Used for the background of a success badge in the focus state. */
793
+ --gl-badge-info-background-color-focus: var(--gl-badge-info-background-color-hover); /* Used for the background of an informational badge in the focus state. */
794
+ --gl-badge-neutral-background-color-focus: var(--gl-badge-neutral-background-color-hover); /* Used for the background of a neutral badge in the focus state. */
795
+ --gl-badge-muted-background-color-focus: var(--gl-badge-muted-background-color-hover); /* Used for the background of a muted badge in the focus state. */
761
796
  }
package/src/tokens/build/js/tokens.dark.js CHANGED
@@ -284,20 +284,30 @@ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#002850'; // Blue backg
284
284
  export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#072b15'; // Green background for avatar fallback with no particular meaning.
285
285
  export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#421f00'; // Orange background for avatar fallback with no particular meaning.
286
286
  export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#28272d'; // Neutral background for avatar fallback with no particular meaning.
287
- export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of a subtle neutral badge when static or the default state when linked.
288
- export const GL_BADGE_MUTED_BACKGROUND_COLOR_ACTIVE = '#3a383f'; // Used for the background of a subtle neutral badge in the active state.
289
- export const GL_BADGE_MUTED_BORDER_COLOR_HOVER = '#4c4b51'; // Used for the border of a subtle neutral badge in the hover state.
290
- export const GL_BADGE_MUTED_TEXT_COLOR_DEFAULT = '#a4a3a8'; // Used for the text of a subtle neutral badge when static or the default state when linked.
291
- export const GL_BADGE_MUTED_TEXT_COLOR_HOVER = '#bfbfc3'; // Used for the text of a subtle neutral badge in the hover state.
292
- export const GL_BADGE_MUTED_TEXT_COLOR_FOCUS = '#bfbfc3'; // Used for the text of a subtle neutral badge in the focus state.
293
- export const GL_BADGE_MUTED_TEXT_COLOR_ACTIVE = '#dcdcde'; // Used for the text of a subtle neutral badge in the active state.
294
- export const GL_BADGE_MUTED_ICON_COLOR_DEFAULT = '#89888d'; // Used for the icon of a subtle neutral badge when static or the default state when linked.
295
- export const GL_BADGE_MUTED_ICON_COLOR_HOVER = '#a4a3a8'; // Used for the icon of a subtle neutral badge in the hover state.
296
- export const GL_BADGE_MUTED_ICON_COLOR_FOCUS = '#a4a3a8'; // Used for the icon of a subtle neutral badge in the focus state.
297
- export const GL_BADGE_MUTED_ICON_COLOR_ACTIVE = '#bfbfc3'; // Used for the icon of a subtle neutral badge in the active state.
287
+ export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of a muted badge when static or the default state when linked.
288
+ export const GL_BADGE_MUTED_BACKGROUND_COLOR_HOVER = '#28272d'; // Used for the background of a muted badge in the hover state.
289
+ export const GL_BADGE_MUTED_BACKGROUND_COLOR_FOCUS = '#28272d'; // Used for the background of a muted badge in the focus state.
290
+ export const GL_BADGE_MUTED_BACKGROUND_COLOR_ACTIVE = '#3a383f'; // Used for the background of a muted badge in the active state.
291
+ export const GL_BADGE_MUTED_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a muted badge when static or the default state when linked.
292
+ export const GL_BADGE_MUTED_BORDER_COLOR_HOVER = '#4c4b51'; // Used for the border of a muted badge in the hover state.
293
+ export const GL_BADGE_MUTED_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a muted badge in the focus state.
294
+ export const GL_BADGE_MUTED_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a muted badge in the active state.
295
+ export const GL_BADGE_MUTED_TEXT_COLOR_DEFAULT = '#a4a3a8'; // Used for the text of a muted badge when static or the default state when linked.
296
+ export const GL_BADGE_MUTED_TEXT_COLOR_HOVER = '#bfbfc3'; // Used for the text of a muted badge in the hover state.
297
+ export const GL_BADGE_MUTED_TEXT_COLOR_FOCUS = '#bfbfc3'; // Used for the text of a muted badge in the focus state.
298
+ export const GL_BADGE_MUTED_TEXT_COLOR_ACTIVE = '#dcdcde'; // Used for the text of a muted badge in the active state.
299
+ export const GL_BADGE_MUTED_ICON_COLOR_DEFAULT = '#89888d'; // Used for the icon of a muted badge when static or the default state when linked.
300
+ export const GL_BADGE_MUTED_ICON_COLOR_HOVER = '#a4a3a8'; // Used for the icon of a muted badge in the hover state.
301
+ export const GL_BADGE_MUTED_ICON_COLOR_FOCUS = '#a4a3a8'; // Used for the icon of a muted badge in the focus state.
302
+ export const GL_BADGE_MUTED_ICON_COLOR_ACTIVE = '#bfbfc3'; // Used for the icon of a muted badge in the active state.
298
303
  export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#3a383f'; // Used for the background of a neutral badge when static or the default state when linked.
304
+ export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_HOVER = '#3a383f'; // Used for the background of a neutral badge in the hover state.
305
+ export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#3a383f'; // Used for the background of a neutral badge in the focus state.
299
306
  export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#4c4b51'; // Used for the background of a neutral badge in the active state.
307
+ export const GL_BADGE_NEUTRAL_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a neutral badge when static or the default state when linked.
300
308
  export const GL_BADGE_NEUTRAL_BORDER_COLOR_HOVER = '#4c4b51'; // Used for the border of a neutral badge in the hover state.
309
+ export const GL_BADGE_NEUTRAL_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a neutral badge in the focus state.
310
+ export const GL_BADGE_NEUTRAL_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a neutral badge in the active state.
301
311
  export const GL_BADGE_NEUTRAL_TEXT_COLOR_DEFAULT = '#bfbfc3'; // Used for the text of a neutral badge when static or the default state when linked.
302
312
  export const GL_BADGE_NEUTRAL_TEXT_COLOR_HOVER = '#dcdcde'; // Used for the text of a neutral badge in the hover state.
303
313
  export const GL_BADGE_NEUTRAL_TEXT_COLOR_FOCUS = '#dcdcde'; // Used for the text of a neutral badge in the focus state.
@@ -307,8 +317,13 @@ export const GL_BADGE_NEUTRAL_ICON_COLOR_HOVER = '#a4a3a8'; // Used for the icon
307
317
  export const GL_BADGE_NEUTRAL_ICON_COLOR_FOCUS = '#a4a3a8'; // Used for the icon of a neutral badge in the focus state.
308
318
  export const GL_BADGE_NEUTRAL_ICON_COLOR_ACTIVE = '#bfbfc3'; // Used for the icon of a neutral badge in the active state.
309
319
  export const GL_BADGE_INFO_BACKGROUND_COLOR_DEFAULT = '#064787'; // Used for the background of an informational badge when static or the default state when linked.
320
+ export const GL_BADGE_INFO_BACKGROUND_COLOR_HOVER = '#064787'; // Used for the background of an informational badge in the hover state.
321
+ export const GL_BADGE_INFO_BACKGROUND_COLOR_FOCUS = '#064787'; // Used for the background of an informational badge in the focus state.
310
322
  export const GL_BADGE_INFO_BACKGROUND_COLOR_ACTIVE = '#0b5cad'; // Used for the background of an informational badge in the active state.
323
+ export const GL_BADGE_INFO_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of an informational badge when static or the default state when linked.
311
324
  export const GL_BADGE_INFO_BORDER_COLOR_HOVER = '#0b5cad'; // Used for the border of an informational badge in the hover state.
325
+ export const GL_BADGE_INFO_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of an informational badge in the focus state.
326
+ export const GL_BADGE_INFO_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of an informational badge in the active state.
312
327
  export const GL_BADGE_INFO_TEXT_COLOR_DEFAULT = '#9dc7f1'; // Used for the text of an informational badge when static or the default state when linked.
313
328
  export const GL_BADGE_INFO_TEXT_COLOR_HOVER = '#cbe2f9'; // Used for the text of an informational badge in the hover state.
314
329
  export const GL_BADGE_INFO_TEXT_COLOR_FOCUS = '#cbe2f9'; // Used for the text of an informational badge in the focus state.
@@ -318,8 +333,13 @@ export const GL_BADGE_INFO_ICON_COLOR_HOVER = '#63a6e9'; // Used for the icon of
318
333
  export const GL_BADGE_INFO_ICON_COLOR_FOCUS = '#63a6e9'; // Used for the icon of an informational badge in the focus state.
319
334
  export const GL_BADGE_INFO_ICON_COLOR_ACTIVE = '#9dc7f1'; // Used for the icon of an informational badge in the active state.
320
335
  export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_DEFAULT = '#0d532a'; // Used for the background of a success badge when static or the default state when linked.
336
+ export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_HOVER = '#0d532a'; // Used for the background of a success badge in the hover state.
337
+ export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_FOCUS = '#0d532a'; // Used for the background of a success badge in the focus state.
321
338
  export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_ACTIVE = '#24663b'; // Used for the background of a success badge in the active state.
339
+ export const GL_BADGE_SUCCESS_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a success badge when static or the default state when linked.
322
340
  export const GL_BADGE_SUCCESS_BORDER_COLOR_HOVER = '#24663b'; // Used for the border of a success badge in the hover state.
341
+ export const GL_BADGE_SUCCESS_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a success badge in the focus state.
342
+ export const GL_BADGE_SUCCESS_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a success badge in the active state.
323
343
  export const GL_BADGE_SUCCESS_TEXT_COLOR_DEFAULT = '#91d4a8'; // Used for the text of a success badge when static or the default state when linked.
324
344
  export const GL_BADGE_SUCCESS_TEXT_COLOR_HOVER = '#c3e6cd'; // Used for the text of a success badge in the hover state.
325
345
  export const GL_BADGE_SUCCESS_TEXT_COLOR_FOCUS = '#c3e6cd'; // Used for the text of a success badge in the focus state.
@@ -328,31 +348,46 @@ export const GL_BADGE_SUCCESS_ICON_COLOR_DEFAULT = '#2da160'; // Used for the ic
328
348
  export const GL_BADGE_SUCCESS_ICON_COLOR_HOVER = '#52b87a'; // Used for the icon of a success badge in the hover state.
329
349
  export const GL_BADGE_SUCCESS_ICON_COLOR_FOCUS = '#52b87a'; // Used for the icon of a success badge in the focus state.
330
350
  export const GL_BADGE_SUCCESS_ICON_COLOR_ACTIVE = '#91d4a8'; // Used for the icon of a success badge in the active state.
331
- export const GL_BADGE_WARNING_BACKGROUND_COLOR_DEFAULT = '#703800'; // Used for the background of a warning status or confidential item when static or the default state when linked.
332
- export const GL_BADGE_WARNING_BACKGROUND_COLOR_ACTIVE = '#8f4700'; // Used for the background of a warning status or confidential item in the active state.
333
- export const GL_BADGE_WARNING_BORDER_COLOR_HOVER = '#8f4700'; // Used for the border of a warning status or confidential item in the hover state.
334
- export const GL_BADGE_WARNING_TEXT_COLOR_DEFAULT = '#e9be74'; // Used for the text of a warning status or confidential item when static or the default state when linked.
335
- export const GL_BADGE_WARNING_TEXT_COLOR_HOVER = '#f5d9a8'; // Used for the text of a warning status or confidential item in the hover state.
336
- export const GL_BADGE_WARNING_TEXT_COLOR_FOCUS = '#f5d9a8'; // Used for the text of a warning status or confidential item in the focus state.
337
- export const GL_BADGE_WARNING_TEXT_COLOR_ACTIVE = '#fdf1dd'; // Used for the text of a warning status or confidential item in the active state.N
338
- export const GL_BADGE_WARNING_ICON_COLOR_DEFAULT = '#c17d10'; // Used for the icon of a warning status or confidential item when static or the default state when linked.
339
- export const GL_BADGE_WARNING_ICON_COLOR_HOVER = '#d99530'; // Used for the icon of a warning status or confidential item in the hover state.
340
- export const GL_BADGE_WARNING_ICON_COLOR_FOCUS = '#d99530'; // Used for the icon of a warning status or confidential item in the focus state.
341
- export const GL_BADGE_WARNING_ICON_COLOR_ACTIVE = '#e9be74'; // Used for the icon of a warning status or confidential item in the active state.
342
- export const GL_BADGE_DANGER_BACKGROUND_COLOR_DEFAULT = '#8d1300'; // Used for the background of a danger (critical) badge when static or the default state when linked.
343
- export const GL_BADGE_DANGER_BACKGROUND_COLOR_ACTIVE = '#ae1800'; // Used for the background of a danger (critical) badge in the active state.
344
- export const GL_BADGE_DANGER_BORDER_COLOR_HOVER = '#ae1800'; // Used for the border of a danger (critical) badge in the hover state.
345
- export const GL_BADGE_DANGER_TEXT_COLOR_DEFAULT = '#fcb5aa'; // Used for the text of a danger (critical) badge when static or the default state when linked.
346
- export const GL_BADGE_DANGER_TEXT_COLOR_HOVER = '#fdd4cd'; // Used for the text of a danger (critical) badge in the hover state.
347
- export const GL_BADGE_DANGER_TEXT_COLOR_FOCUS = '#fdd4cd'; // Used for the text of a danger (critical) badge in the focus state.
348
- export const GL_BADGE_DANGER_TEXT_COLOR_ACTIVE = '#fcf1ef'; // Used for the text of a danger (critical) badge in the active state.
349
- export const GL_BADGE_DANGER_ICON_COLOR_DEFAULT = '#ec5941'; // Used for the icon of a danger (critical) badge when static or the default state when linked.
350
- export const GL_BADGE_DANGER_ICON_COLOR_HOVER = '#f57f6c'; // Used for the icon of a danger (critical) badge in the hover state.
351
- export const GL_BADGE_DANGER_ICON_COLOR_FOCUS = '#f57f6c'; // Used for the icon of a danger (critical) badge in the focus state.
352
- export const GL_BADGE_DANGER_ICON_COLOR_ACTIVE = '#fcb5aa'; // Used for the icon of a danger (critical) badge in the active state.
351
+ export const GL_BADGE_WARNING_BACKGROUND_COLOR_DEFAULT = '#703800'; // Used for the background of a warning badge when static or the default state when linked.
352
+ export const GL_BADGE_WARNING_BACKGROUND_COLOR_HOVER = '#703800'; // Used for the background of a warning badge in the hover state.
353
+ export const GL_BADGE_WARNING_BACKGROUND_COLOR_FOCUS = '#703800'; // Used for the background of a warning badge in the focus state.
354
+ export const GL_BADGE_WARNING_BACKGROUND_COLOR_ACTIVE = '#8f4700'; // Used for the background of a warning badge in the active state.
355
+ export const GL_BADGE_WARNING_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a warning badge when static or the default state when linked.
356
+ export const GL_BADGE_WARNING_BORDER_COLOR_HOVER = '#8f4700'; // Used for the border of a warning badge in the hover state.
357
+ export const GL_BADGE_WARNING_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a warning badge in the focus state.
358
+ export const GL_BADGE_WARNING_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a warning badge in the active state.
359
+ export const GL_BADGE_WARNING_TEXT_COLOR_DEFAULT = '#e9be74'; // Used for the text of a warning badge when static or the default state when linked.
360
+ export const GL_BADGE_WARNING_TEXT_COLOR_HOVER = '#f5d9a8'; // Used for the text of a warning badge in the hover state.
361
+ export const GL_BADGE_WARNING_TEXT_COLOR_FOCUS = '#f5d9a8'; // Used for the text of a warning badge in the focus state.
362
+ export const GL_BADGE_WARNING_TEXT_COLOR_ACTIVE = '#fdf1dd'; // Used for the text of a warning badge in the active state.
363
+ export const GL_BADGE_WARNING_ICON_COLOR_DEFAULT = '#c17d10'; // Used for the icon of a warning badge when static or the default state when linked.
364
+ export const GL_BADGE_WARNING_ICON_COLOR_HOVER = '#d99530'; // Used for the icon of a warning badge in the hover state.
365
+ export const GL_BADGE_WARNING_ICON_COLOR_FOCUS = '#d99530'; // Used for the icon of a warning badge in the focus state.
366
+ export const GL_BADGE_WARNING_ICON_COLOR_ACTIVE = '#e9be74'; // Used for the icon of a warning badge in the active state.
367
+ export const GL_BADGE_DANGER_BACKGROUND_COLOR_DEFAULT = '#8d1300'; // Used for the background of a danger badge when static or the default state when linked.
368
+ export const GL_BADGE_DANGER_BACKGROUND_COLOR_HOVER = '#8d1300'; // Used for the background of a danger badge in the hover state.
369
+ export const GL_BADGE_DANGER_BACKGROUND_COLOR_FOCUS = '#8d1300'; // Used for the background of a danger badge in the focus state.
370
+ export const GL_BADGE_DANGER_BACKGROUND_COLOR_ACTIVE = '#ae1800'; // Used for the background of a danger badge in the active state.
371
+ export const GL_BADGE_DANGER_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a danger badge when static or the default state when linked.
372
+ export const GL_BADGE_DANGER_BORDER_COLOR_HOVER = '#ae1800'; // Used for the border of a danger badge in the hover state.
373
+ export const GL_BADGE_DANGER_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a danger badge in the focus state.
374
+ export const GL_BADGE_DANGER_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a danger badge in the active state.
375
+ export const GL_BADGE_DANGER_TEXT_COLOR_DEFAULT = '#fcb5aa'; // Used for the text of a danger badge when static or the default state when linked.
376
+ export const GL_BADGE_DANGER_TEXT_COLOR_HOVER = '#fdd4cd'; // Used for the text of a danger badge in the hover state.
377
+ export const GL_BADGE_DANGER_TEXT_COLOR_FOCUS = '#fdd4cd'; // Used for the text of a danger badge in the focus state.
378
+ export const GL_BADGE_DANGER_TEXT_COLOR_ACTIVE = '#fcf1ef'; // Used for the text of a danger badge in the active state.
379
+ export const GL_BADGE_DANGER_ICON_COLOR_DEFAULT = '#ec5941'; // Used for the icon of a danger badge when static or the default state when linked.
380
+ export const GL_BADGE_DANGER_ICON_COLOR_HOVER = '#f57f6c'; // Used for the icon of a danger badge in the hover state.
381
+ export const GL_BADGE_DANGER_ICON_COLOR_FOCUS = '#f57f6c'; // Used for the icon of a danger badge in the focus state.
382
+ export const GL_BADGE_DANGER_ICON_COLOR_ACTIVE = '#fcb5aa'; // Used for the icon of a danger badge in the active state.
353
383
  export const GL_BADGE_TIER_BACKGROUND_COLOR_DEFAULT = '#2f2a6b'; // Used for the background of a tier related badge when static or the default state when linked.
384
+ export const GL_BADGE_TIER_BACKGROUND_COLOR_HOVER = '#2f2a6b'; // Used for the background of a tier related badge in the hover state.
385
+ export const GL_BADGE_TIER_BACKGROUND_COLOR_FOCUS = '#2f2a6b'; // Used for the background of a tier related badge in the focus state.
354
386
  export const GL_BADGE_TIER_BACKGROUND_COLOR_ACTIVE = '#453894'; // Used for the background of a tier related badge in the active state.
387
+ export const GL_BADGE_TIER_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a tier related badge when static or the default state when linked.
355
388
  export const GL_BADGE_TIER_BORDER_COLOR_HOVER = '#453894'; // Used for the border of a tier related badge in the hover state.
389
+ export const GL_BADGE_TIER_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a tier related badge in the focus state.
390
+ export const GL_BADGE_TIER_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a tier related badge in the active state.
356
391
  export const GL_BADGE_TIER_TEXT_COLOR_DEFAULT = '#ac93e6'; // Used for the text of a tier related badge when static or the default state when linked.
357
392
  export const GL_BADGE_TIER_TEXT_COLOR_HOVER = '#cbbbf2'; // Used for the text of a tier related badge in the hover state.
358
393
  export const GL_BADGE_TIER_TEXT_COLOR_FOCUS = '#cbbbf2'; // Used for the text of a tier related badge in the focus state.