@gitlab/ui 88.2.1 → 88.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (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 +75 -40
  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 +74 -39
  8. package/dist/tokens/js/tokens.dark.js +74 -39
  9. package/dist/tokens/js/tokens.js +68 -33
  10. package/dist/tokens/json/tokens.dark.json +834 -93
  11. package/dist/tokens/json/tokens.json +851 -110
  12. package/dist/tokens/scss/_tokens.dark.scss +74 -39
  13. package/dist/tokens/scss/_tokens.scss +68 -33
  14. package/dist/tokens/scss/_tokens_custom_properties.scss +35 -0
  15. package/package.json +1 -1
  16. package/src/tokens/build/css/tokens.css +68 -33
  17. package/src/tokens/build/css/tokens.dark.css +74 -39
  18. package/src/tokens/build/js/tokens.dark.js +74 -39
  19. package/src/tokens/build/js/tokens.js +68 -33
  20. package/src/tokens/build/json/tokens.dark.json +834 -93
  21. package/src/tokens/build/json/tokens.json +851 -110
  22. package/src/tokens/build/scss/_tokens.dark.scss +74 -39
  23. package/src/tokens/build/scss/_tokens.scss +68 -33
  24. package/src/tokens/build/scss/_tokens_custom_properties.scss +35 -0
  25. package/src/tokens/contextual/avatar.tokens.json +12 -6
  26. package/src/tokens/contextual/badge.tokens.json +208 -33
package/src/tokens/build/scss/_tokens.dark.scss CHANGED
@@ -571,34 +571,46 @@ $gl-badge-tier-icon-color-default: $gl-color-purple-500; // Used for the icon of
571
571
  $gl-badge-tier-text-color-active: $gl-color-purple-100; // Used for the text of a tier related badge in the active state.
572
572
  $gl-badge-tier-text-color-hover: $gl-color-purple-200; // Used for the text of a tier related badge in the hover state.
573
573
  $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.
574
+ $gl-badge-tier-border-color-active: $gl-color-alpha-0; // Used for the border of a tier related badge in the active state.
575
+ $gl-badge-tier-border-color-focus: $gl-color-alpha-0; // Used for the border of a tier related badge in the focus state.
574
576
  $gl-badge-tier-border-color-hover: $gl-color-purple-800; // Used for the border of a tier related badge in the hover state.
577
+ $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.
575
578
  $gl-badge-tier-background-color-active: $gl-color-purple-800; // Used for the background of a tier related badge in the active state.
576
579
  $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.
577
- $gl-badge-danger-icon-color-active: $gl-color-red-200; // Used for the icon of a danger (critical) badge in the active state.
578
- $gl-badge-danger-icon-color-hover: $gl-color-red-300; // Used for the icon of a danger (critical) badge in the hover state.
579
- $gl-badge-danger-icon-color-default: $gl-color-red-400; // Used for the icon of a danger (critical) badge when static or the default state when linked.
580
- $gl-badge-danger-text-color-active: $gl-color-red-50; // Used for the text of a danger (critical) badge in the active state.
581
- $gl-badge-danger-text-color-hover: $gl-color-red-100; // Used for the text of a danger (critical) badge in the hover state.
582
- $gl-badge-danger-text-color-default: $gl-color-red-200; // Used for the text of a danger (critical) badge when static or the default state when linked.
583
- $gl-badge-danger-border-color-hover: $gl-color-red-700; // Used for the border of a danger (critical) badge in the hover state.
584
- $gl-badge-danger-background-color-active: $gl-color-red-700; // Used for the background of a danger (critical) badge in the active state.
585
- $gl-badge-danger-background-color-default: $gl-color-red-800; // Used for the background of a danger (critical) badge when static or the default state when linked.
586
- $gl-badge-warning-icon-color-active: $gl-color-orange-200; // Used for the icon of a warning status or confidential item in the active state.
587
- $gl-badge-warning-icon-color-hover: $gl-color-orange-300; // Used for the icon of a warning status or confidential item in the hover state.
588
- $gl-badge-warning-icon-color-default: $gl-color-orange-400; // Used for the icon of a warning status or confidential item when static or the default state when linked.
589
- $gl-badge-warning-text-color-active: $gl-color-orange-50; // Used for the text of a warning status or confidential item in the active state.N
590
- $gl-badge-warning-text-color-hover: $gl-color-orange-100; // Used for the text of a warning status or confidential item in the hover state.
591
- $gl-badge-warning-text-color-default: $gl-color-orange-200; // Used for the text of a warning status or confidential item when static or the default state when linked.
592
- $gl-badge-warning-border-color-hover: $gl-color-orange-700; // Used for the border of a warning status or confidential item in the hover state.
593
- $gl-badge-warning-background-color-active: $gl-color-orange-700; // Used for the background of a warning status or confidential item in the active state.
594
- $gl-badge-warning-background-color-default: $gl-color-orange-800; // Used for the background of a warning status or confidential item when static or the default state when linked.
580
+ $gl-badge-danger-icon-color-active: $gl-color-red-200; // Used for the icon of a danger badge in the active state.
581
+ $gl-badge-danger-icon-color-hover: $gl-color-red-300; // Used for the icon of a danger badge in the hover state.
582
+ $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.
583
+ $gl-badge-danger-text-color-active: $gl-color-red-50; // Used for the text of a danger badge in the active state.
584
+ $gl-badge-danger-text-color-hover: $gl-color-red-100; // Used for the text of a danger badge in the hover state.
585
+ $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.
586
+ $gl-badge-danger-border-color-active: $gl-color-alpha-0; // Used for the border of a danger badge in the active state.
587
+ $gl-badge-danger-border-color-focus: $gl-color-alpha-0; // Used for the border of a danger badge in the focus state.
588
+ $gl-badge-danger-border-color-hover: $gl-color-red-700; // Used for the border of a danger badge in the hover state.
589
+ $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.
590
+ $gl-badge-danger-background-color-active: $gl-color-red-700; // Used for the background of a danger badge in the active state.
591
+ $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.
592
+ $gl-badge-warning-icon-color-active: $gl-color-orange-200; // Used for the icon of a warning badge in the active state.
593
+ $gl-badge-warning-icon-color-hover: $gl-color-orange-300; // Used for the icon of a warning badge in the hover state.
594
+ $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.
595
+ $gl-badge-warning-text-color-active: $gl-color-orange-50; // Used for the text of a warning badge in the active state.
596
+ $gl-badge-warning-text-color-hover: $gl-color-orange-100; // Used for the text of a warning badge in the hover state.
597
+ $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.
598
+ $gl-badge-warning-border-color-active: $gl-color-alpha-0; // Used for the border of a warning badge in the active state.
599
+ $gl-badge-warning-border-color-focus: $gl-color-alpha-0; // Used for the border of a warning badge in the focus state.
600
+ $gl-badge-warning-border-color-hover: $gl-color-orange-700; // Used for the border of a warning badge in the hover state.
601
+ $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.
602
+ $gl-badge-warning-background-color-active: $gl-color-orange-700; // Used for the background of a warning badge in the active state.
603
+ $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.
595
604
  $gl-badge-success-icon-color-active: $gl-color-green-200; // Used for the icon of a success badge in the active state.
596
605
  $gl-badge-success-icon-color-hover: $gl-color-green-300; // Used for the icon of a success badge in the hover state.
597
606
  $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.
598
607
  $gl-badge-success-text-color-active: $gl-color-green-50; // Used for the text of a success badge in the active state.
599
608
  $gl-badge-success-text-color-hover: $gl-color-green-100; // Used for the text of a success badge in the hover state.
600
609
  $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.
610
+ $gl-badge-success-border-color-active: $gl-color-alpha-0; // Used for the border of a success badge in the active state.
611
+ $gl-badge-success-border-color-focus: $gl-color-alpha-0; // Used for the border of a success badge in the focus state.
601
612
  $gl-badge-success-border-color-hover: $gl-color-green-700; // Used for the border of a success badge in the hover state.
613
+ $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.
602
614
  $gl-badge-success-background-color-active: $gl-color-green-700; // Used for the background of a success badge in the active state.
603
615
  $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.
604
616
  $gl-badge-info-icon-color-active: $gl-color-blue-200; // Used for the icon of an informational badge in the active state.
@@ -607,7 +619,10 @@ $gl-badge-info-icon-color-default: $gl-color-blue-400; // Used for the icon of a
607
619
  $gl-badge-info-text-color-active: $gl-color-blue-50; // Used for the text of an informational badge in the active state.
608
620
  $gl-badge-info-text-color-hover: $gl-color-blue-100; // Used for the text of an informational badge in the hover state.
609
621
  $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.
622
+ $gl-badge-info-border-color-active: $gl-color-alpha-0; // Used for the border of an informational badge in the active state.
623
+ $gl-badge-info-border-color-focus: $gl-color-alpha-0; // Used for the border of an informational badge in the focus state.
610
624
  $gl-badge-info-border-color-hover: $gl-color-blue-700; // Used for the border of an informational badge in the hover state.
625
+ $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.
611
626
  $gl-badge-info-background-color-active: $gl-color-blue-700; // Used for the background of an informational badge in the active state.
612
627
  $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.
613
628
  $gl-badge-neutral-icon-color-active: $gl-color-neutral-200; // Used for the icon of a neutral badge in the active state.
@@ -616,26 +631,32 @@ $gl-badge-neutral-icon-color-default: $gl-color-neutral-400; // Used for the ico
616
631
  $gl-badge-neutral-text-color-active: $gl-color-neutral-50; // Used for the text of a neutral badge in the active state.
617
632
  $gl-badge-neutral-text-color-hover: $gl-color-neutral-100; // Used for the text of a neutral badge in the hover state.
618
633
  $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.
634
+ $gl-badge-neutral-border-color-active: $gl-color-alpha-0; // Used for the border of a neutral badge in the active state.
635
+ $gl-badge-neutral-border-color-focus: $gl-color-alpha-0; // Used for the border of a neutral badge in the focus state.
619
636
  $gl-badge-neutral-border-color-hover: $gl-color-neutral-700; // Used for the border of a neutral badge in the hover state.
637
+ $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.
620
638
  $gl-badge-neutral-background-color-active: $gl-color-neutral-700; // Used for the background of a neutral badge in the active state.
621
639
  $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.
622
- $gl-badge-muted-icon-color-active: $gl-color-neutral-200; // Used for the icon of a subtle neutral badge in the active state.
623
- $gl-badge-muted-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a subtle neutral badge in the hover state.
624
- $gl-badge-muted-icon-color-default: $gl-color-neutral-400; // Used for the icon of a subtle neutral badge when static or the default state when linked.
625
- $gl-badge-muted-text-color-active: $gl-color-neutral-100; // Used for the text of a subtle neutral badge in the active state.
626
- $gl-badge-muted-text-color-hover: $gl-color-neutral-200; // Used for the text of a subtle neutral badge in the hover state.
627
- $gl-badge-muted-text-color-default: $gl-color-neutral-300; // Used for the text of a subtle neutral badge when static or the default state when linked.
628
- $gl-badge-muted-border-color-hover: $gl-color-neutral-700; // Used for the border of a subtle neutral badge in the hover state.
629
- $gl-badge-muted-background-color-active: $gl-color-neutral-800; // Used for the background of a subtle neutral badge in the active state.
630
- $gl-badge-muted-background-color-default: $gl-color-neutral-900; // Used for the background of a subtle neutral badge when static or the default state when linked.
640
+ $gl-badge-muted-icon-color-active: $gl-color-neutral-200; // Used for the icon of a muted badge in the active state.
641
+ $gl-badge-muted-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a muted badge in the hover state.
642
+ $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.
643
+ $gl-badge-muted-text-color-active: $gl-color-neutral-100; // Used for the text of a muted badge in the active state.
644
+ $gl-badge-muted-text-color-hover: $gl-color-neutral-200; // Used for the text of a muted badge in the hover state.
645
+ $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.
646
+ $gl-badge-muted-border-color-active: $gl-color-alpha-0; // Used for the border of a muted badge in the active state.
647
+ $gl-badge-muted-border-color-focus: $gl-color-alpha-0; // Used for the border of a muted badge in the focus state.
648
+ $gl-badge-muted-border-color-hover: $gl-color-neutral-700; // Used for the border of a muted badge in the hover state.
649
+ $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.
650
+ $gl-badge-muted-background-color-active: $gl-color-neutral-800; // Used for the background of a muted badge in the active state.
651
+ $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.
631
652
  $gl-avatar-fallback-background-color-neutral: $gl-color-neutral-900; // Neutral background for avatar fallback with no particular meaning.
632
- $gl-avatar-fallback-background-color-orange: $gl-color-orange-900; // Orange background for avatar fallback with no particular meaning.
633
- $gl-avatar-fallback-background-color-green: $gl-color-green-900; // Green background for avatar fallback with no particular meaning.
634
- $gl-avatar-fallback-background-color-blue: $gl-color-blue-900; // Blue background for avatar fallback with no particular meaning.
653
+ $gl-avatar-fallback-background-color-orange: $gl-color-orange-950; // Orange background for avatar fallback with no particular meaning.
654
+ $gl-avatar-fallback-background-color-green: $gl-color-green-950; // Green background for avatar fallback with no particular meaning.
655
+ $gl-avatar-fallback-background-color-blue: $gl-color-blue-950; // Blue background for avatar fallback with no particular meaning.
635
656
  $gl-avatar-fallback-background-color-purple: $gl-color-purple-950; // Purple background for avatar fallback with no particular meaning.
636
- $gl-avatar-fallback-background-color-red: $gl-color-red-900; // Red background for avatar fallback with no particular meaning.
637
- $gl-avatar-border-color-hover: $gl-color-alpha-dark-24; // Used to increase the edge definition of an avatar in the hover state.
638
- $gl-avatar-border-color-default: $gl-color-alpha-dark-8; // Used to define the edge of an avatar.
657
+ $gl-avatar-fallback-background-color-red: $gl-color-red-950; // Red background for avatar fallback with no particular meaning.
658
+ $gl-avatar-border-color-hover: $gl-color-alpha-light-24; // Used to increase the edge definition of an avatar in the hover state.
659
+ $gl-avatar-border-color-default: $gl-color-alpha-light-8; // Used to define the edge of an avatar.
639
660
  $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
640
661
  $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
641
662
  $gl-border-color-subtle: $gl-color-neutral-900; // Used for a subtle border in combination with the default background.
@@ -707,18 +728,25 @@ $gl-button-default-primary-foreground-color-focus: $gl-button-default-primary-fo
707
728
  $gl-button-default-primary-foreground-color-hover: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a default primary button in the hover state.
708
729
  $gl-badge-tier-icon-color-focus: $gl-badge-tier-icon-color-hover; // Used for the icon of a tier related badge in the focus state.
709
730
  $gl-badge-tier-text-color-focus: $gl-badge-tier-text-color-hover; // Used for the text of a tier related badge in the focus state.
710
- $gl-badge-danger-icon-color-focus: $gl-badge-danger-icon-color-hover; // Used for the icon of a danger (critical) badge in the focus state.
711
- $gl-badge-danger-text-color-focus: $gl-badge-danger-text-color-hover; // Used for the text of a danger (critical) badge in the focus state.
712
- $gl-badge-warning-icon-color-focus: $gl-badge-warning-icon-color-hover; // Used for the icon of a warning status or confidential item in the focus state.
713
- $gl-badge-warning-text-color-focus: $gl-badge-warning-text-color-hover; // Used for the text of a warning status or confidential item in the focus state.
731
+ $gl-badge-tier-background-color-hover: $gl-badge-tier-background-color-default; // Used for the background of a tier related badge in the hover state.
732
+ $gl-badge-danger-icon-color-focus: $gl-badge-danger-icon-color-hover; // Used for the icon of a danger badge in the focus state.
733
+ $gl-badge-danger-text-color-focus: $gl-badge-danger-text-color-hover; // Used for the text of a danger badge in the focus state.
734
+ $gl-badge-danger-background-color-hover: $gl-badge-danger-background-color-default; // Used for the background of a danger badge in the hover state.
735
+ $gl-badge-warning-icon-color-focus: $gl-badge-warning-icon-color-hover; // Used for the icon of a warning badge in the focus state.
736
+ $gl-badge-warning-text-color-focus: $gl-badge-warning-text-color-hover; // Used for the text of a warning badge in the focus state.
737
+ $gl-badge-warning-background-color-hover: $gl-badge-warning-background-color-default; // Used for the background of a warning badge in the hover state.
714
738
  $gl-badge-success-icon-color-focus: $gl-badge-success-icon-color-hover; // Used for the icon of a success badge in the focus state.
715
739
  $gl-badge-success-text-color-focus: $gl-badge-success-text-color-hover; // Used for the text of a success badge in the focus state.
740
+ $gl-badge-success-background-color-hover: $gl-badge-success-background-color-default; // Used for the background of a success badge in the hover state.
716
741
  $gl-badge-info-icon-color-focus: $gl-badge-info-icon-color-hover; // Used for the icon of an informational badge in the focus state.
717
742
  $gl-badge-info-text-color-focus: $gl-badge-info-text-color-hover; // Used for the text of an informational badge in the focus state.
743
+ $gl-badge-info-background-color-hover: $gl-badge-info-background-color-default; // Used for the background of an informational badge in the hover state.
718
744
  $gl-badge-neutral-icon-color-focus: $gl-badge-neutral-icon-color-hover; // Used for the icon of a neutral badge in the focus state.
719
745
  $gl-badge-neutral-text-color-focus: $gl-badge-neutral-text-color-hover; // Used for the text of a neutral badge in the focus state.
720
- $gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a subtle neutral badge in the focus state.
721
- $gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a subtle neutral badge in the focus state.
746
+ $gl-badge-neutral-background-color-hover: $gl-badge-neutral-background-color-default; // Used for the background of a neutral badge in the hover state.
747
+ $gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a muted badge in the focus state.
748
+ $gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a muted badge in the focus state.
749
+ $gl-badge-muted-background-color-hover: $gl-badge-muted-background-color-default; // Used for the background of a muted badge in the hover state.
722
750
  $gl-action-danger-border-color-active: $gl-action-danger-border-color-default; // Used for the border of a danger action in the active state.
723
751
  $gl-action-danger-border-color-focus: $gl-action-danger-border-color-default; // Used for the border of a danger action in the focus state.
724
752
  $gl-action-danger-border-color-hover: $gl-action-danger-border-color-default; // Used for the border of a danger action in the hover state.
@@ -756,3 +784,10 @@ $gl-button-default-tertiary-border-color-hover: $gl-action-neutral-border-color-
756
784
  $gl-button-default-tertiary-foreground-color-active: $gl-action-neutral-foreground-color-active; // Used for the foreground of a default borderless, tertiary button in the active state.
757
785
  $gl-button-default-tertiary-foreground-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the foreground of a default borderless, tertiary button in the focus state.
758
786
  $gl-button-default-tertiary-foreground-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the foreground of a default borderless, tertiary button in the hover state.
787
+ $gl-badge-tier-background-color-focus: $gl-badge-tier-background-color-hover; // Used for the background of a tier related badge in the focus state.
788
+ $gl-badge-danger-background-color-focus: $gl-badge-danger-background-color-hover; // Used for the background of a danger badge in the focus state.
789
+ $gl-badge-warning-background-color-focus: $gl-badge-warning-background-color-hover; // Used for the background of a warning badge in the focus state.
790
+ $gl-badge-success-background-color-focus: $gl-badge-success-background-color-hover; // Used for the background of a success badge in the focus state.
791
+ $gl-badge-info-background-color-focus: $gl-badge-info-background-color-hover; // Used for the background of an informational badge in the focus state.
792
+ $gl-badge-neutral-background-color-focus: $gl-badge-neutral-background-color-hover; // Used for the background of a neutral badge in the focus state.
793
+ $gl-badge-muted-background-color-focus: $gl-badge-muted-background-color-hover; // Used for the background of a muted badge in the focus state.
package/src/tokens/build/scss/_tokens.scss CHANGED
@@ -571,34 +571,46 @@ $gl-badge-tier-icon-color-default: $gl-color-purple-500; // Used for the icon of
571
571
  $gl-badge-tier-text-color-active: $gl-color-purple-900; // Used for the text of a tier related badge in the active state.
572
572
  $gl-badge-tier-text-color-hover: $gl-color-purple-800; // Used for the text of a tier related badge in the hover state.
573
573
  $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.
574
+ $gl-badge-tier-border-color-active: $gl-color-alpha-0; // Used for the border of a tier related badge in the active state.
575
+ $gl-badge-tier-border-color-focus: $gl-color-alpha-0; // Used for the border of a tier related badge in the focus state.
574
576
  $gl-badge-tier-border-color-hover: $gl-color-purple-200; // Used for the border of a tier related badge in the hover state.
577
+ $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.
575
578
  $gl-badge-tier-background-color-active: $gl-color-purple-200; // Used for the background of a tier related badge in the active state.
576
579
  $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.
577
- $gl-badge-danger-icon-color-active: $gl-color-red-700; // Used for the icon of a danger (critical) badge in the active state.
578
- $gl-badge-danger-icon-color-hover: $gl-color-red-600; // Used for the icon of a danger (critical) badge in the hover state.
579
- $gl-badge-danger-icon-color-default: $gl-color-red-500; // Used for the icon of a danger (critical) badge when static or the default state when linked.
580
- $gl-badge-danger-text-color-active: $gl-color-red-900; // Used for the text of a danger (critical) badge in the active state.
581
- $gl-badge-danger-text-color-hover: $gl-color-red-800; // Used for the text of a danger (critical) badge in the hover state.
582
- $gl-badge-danger-text-color-default: $gl-color-red-700; // Used for the text of a danger (critical) badge when static or the default state when linked.
583
- $gl-badge-danger-border-color-hover: $gl-color-red-200; // Used for the border of a danger (critical) badge in the hover state.
584
- $gl-badge-danger-background-color-active: $gl-color-red-200; // Used for the background of a danger (critical) badge in the active state.
585
- $gl-badge-danger-background-color-default: $gl-color-red-100; // Used for the background of a danger (critical) badge when static or the default state when linked.
586
- $gl-badge-warning-icon-color-active: $gl-color-orange-700; // Used for the icon of a warning status or confidential item in the active state.
587
- $gl-badge-warning-icon-color-hover: $gl-color-orange-600; // Used for the icon of a warning status or confidential item in the hover state.
588
- $gl-badge-warning-icon-color-default: $gl-color-orange-500; // Used for the icon of a warning status or confidential item when static or the default state when linked.
589
- $gl-badge-warning-text-color-active: $gl-color-orange-900; // Used for the text of a warning status or confidential item in the active state.N
590
- $gl-badge-warning-text-color-hover: $gl-color-orange-800; // Used for the text of a warning status or confidential item in the hover state.
591
- $gl-badge-warning-text-color-default: $gl-color-orange-700; // Used for the text of a warning status or confidential item when static or the default state when linked.
592
- $gl-badge-warning-border-color-hover: $gl-color-orange-200; // Used for the border of a warning status or confidential item in the hover state.
593
- $gl-badge-warning-background-color-active: $gl-color-orange-200; // Used for the background of a warning status or confidential item in the active state.
594
- $gl-badge-warning-background-color-default: $gl-color-orange-100; // Used for the background of a warning status or confidential item when static or the default state when linked.
580
+ $gl-badge-danger-icon-color-active: $gl-color-red-700; // Used for the icon of a danger badge in the active state.
581
+ $gl-badge-danger-icon-color-hover: $gl-color-red-600; // Used for the icon of a danger badge in the hover state.
582
+ $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.
583
+ $gl-badge-danger-text-color-active: $gl-color-red-900; // Used for the text of a danger badge in the active state.
584
+ $gl-badge-danger-text-color-hover: $gl-color-red-800; // Used for the text of a danger badge in the hover state.
585
+ $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.
586
+ $gl-badge-danger-border-color-active: $gl-color-alpha-0; // Used for the border of a danger badge in the active state.
587
+ $gl-badge-danger-border-color-focus: $gl-color-alpha-0; // Used for the border of a danger badge in the focus state.
588
+ $gl-badge-danger-border-color-hover: $gl-color-red-200; // Used for the border of a danger badge in the hover state.
589
+ $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.
590
+ $gl-badge-danger-background-color-active: $gl-color-red-200; // Used for the background of a danger badge in the active state.
591
+ $gl-badge-danger-background-color-default: $gl-color-red-100; // Used for the background of a danger badge when static or the default state when linked.
592
+ $gl-badge-warning-icon-color-active: $gl-color-orange-700; // Used for the icon of a warning badge in the active state.
593
+ $gl-badge-warning-icon-color-hover: $gl-color-orange-600; // Used for the icon of a warning badge in the hover state.
594
+ $gl-badge-warning-icon-color-default: $gl-color-orange-500; // Used for the icon of a warning badge when static or the default state when linked.
595
+ $gl-badge-warning-text-color-active: $gl-color-orange-900; // Used for the text of a warning badge in the active state.
596
+ $gl-badge-warning-text-color-hover: $gl-color-orange-800; // Used for the text of a warning badge in the hover state.
597
+ $gl-badge-warning-text-color-default: $gl-color-orange-700; // Used for the text of a warning badge when static or the default state when linked.
598
+ $gl-badge-warning-border-color-active: $gl-color-alpha-0; // Used for the border of a warning badge in the active state.
599
+ $gl-badge-warning-border-color-focus: $gl-color-alpha-0; // Used for the border of a warning badge in the focus state.
600
+ $gl-badge-warning-border-color-hover: $gl-color-orange-200; // Used for the border of a warning badge in the hover state.
601
+ $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.
602
+ $gl-badge-warning-background-color-active: $gl-color-orange-200; // Used for the background of a warning badge in the active state.
603
+ $gl-badge-warning-background-color-default: $gl-color-orange-100; // Used for the background of a warning badge when static or the default state when linked.
595
604
  $gl-badge-success-icon-color-active: $gl-color-green-700; // Used for the icon of a success badge in the active state.
596
605
  $gl-badge-success-icon-color-hover: $gl-color-green-600; // Used for the icon of a success badge in the hover state.
597
606
  $gl-badge-success-icon-color-default: $gl-color-green-500; // Used for the icon of a success badge when static or the default state when linked.
598
607
  $gl-badge-success-text-color-active: $gl-color-green-900; // Used for the text of a success badge in the active state.
599
608
  $gl-badge-success-text-color-hover: $gl-color-green-800; // Used for the text of a success badge in the hover state.
600
609
  $gl-badge-success-text-color-default: $gl-color-green-700; // Used for the text of a success badge when static or the default state when linked.
610
+ $gl-badge-success-border-color-active: $gl-color-alpha-0; // Used for the border of a success badge in the active state.
611
+ $gl-badge-success-border-color-focus: $gl-color-alpha-0; // Used for the border of a success badge in the focus state.
601
612
  $gl-badge-success-border-color-hover: $gl-color-green-200; // Used for the border of a success badge in the hover state.
613
+ $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.
602
614
  $gl-badge-success-background-color-active: $gl-color-green-200; // Used for the background of a success badge in the active state.
603
615
  $gl-badge-success-background-color-default: $gl-color-green-100; // Used for the background of a success badge when static or the default state when linked.
604
616
  $gl-badge-info-icon-color-active: $gl-color-blue-700; // Used for the icon of an informational badge in the active state.
@@ -607,7 +619,10 @@ $gl-badge-info-icon-color-default: $gl-color-blue-500; // Used for the icon of a
607
619
  $gl-badge-info-text-color-active: $gl-color-blue-900; // Used for the text of an informational badge in the active state.
608
620
  $gl-badge-info-text-color-hover: $gl-color-blue-800; // Used for the text of an informational badge in the hover state.
609
621
  $gl-badge-info-text-color-default: $gl-color-blue-700; // Used for the text of an informational badge when static or the default state when linked.
622
+ $gl-badge-info-border-color-active: $gl-color-alpha-0; // Used for the border of an informational badge in the active state.
623
+ $gl-badge-info-border-color-focus: $gl-color-alpha-0; // Used for the border of an informational badge in the focus state.
610
624
  $gl-badge-info-border-color-hover: $gl-color-blue-200; // Used for the border of an informational badge in the hover state.
625
+ $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.
611
626
  $gl-badge-info-background-color-active: $gl-color-blue-200; // Used for the background of an informational badge in the active state.
612
627
  $gl-badge-info-background-color-default: $gl-color-blue-100; // Used for the background of an informational badge when static or the default state when linked.
613
628
  $gl-badge-neutral-icon-color-active: $gl-color-neutral-700; // Used for the icon of a neutral badge in the active state.
@@ -616,18 +631,24 @@ $gl-badge-neutral-icon-color-default: $gl-color-neutral-500; // Used for the ico
616
631
  $gl-badge-neutral-text-color-active: $gl-color-neutral-900; // Used for the text of a neutral badge in the active state.
617
632
  $gl-badge-neutral-text-color-hover: $gl-color-neutral-800; // Used for the text of a neutral badge in the hover state.
618
633
  $gl-badge-neutral-text-color-default: $gl-color-neutral-700; // Used for the text of a neutral badge when static or the default state when linked.
634
+ $gl-badge-neutral-border-color-active: $gl-color-alpha-0; // Used for the border of a neutral badge in the active state.
635
+ $gl-badge-neutral-border-color-focus: $gl-color-alpha-0; // Used for the border of a neutral badge in the focus state.
619
636
  $gl-badge-neutral-border-color-hover: $gl-color-neutral-200; // Used for the border of a neutral badge in the hover state.
637
+ $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.
620
638
  $gl-badge-neutral-background-color-active: $gl-color-neutral-200; // Used for the background of a neutral badge in the active state.
621
639
  $gl-badge-neutral-background-color-default: $gl-color-neutral-100; // Used for the background of a neutral badge when static or the default state when linked.
622
- $gl-badge-muted-icon-color-active: $gl-color-neutral-700; // Used for the icon of a subtle neutral badge in the active state.
623
- $gl-badge-muted-icon-color-hover: $gl-color-neutral-600; // Used for the icon of a subtle neutral badge in the hover state.
624
- $gl-badge-muted-icon-color-default: $gl-color-neutral-500; // Used for the icon of a subtle neutral badge when static or the default state when linked.
625
- $gl-badge-muted-text-color-active: $gl-color-neutral-800; // Used for the text of a subtle neutral badge in the active state.
626
- $gl-badge-muted-text-color-hover: $gl-color-neutral-700; // Used for the text of a subtle neutral badge in the hover state.
627
- $gl-badge-muted-text-color-default: $gl-color-neutral-600; // Used for the text of a subtle neutral badge when static or the default state when linked.
628
- $gl-badge-muted-border-color-hover: $gl-color-neutral-200; // Used for the border of a subtle neutral badge in the hover state.
629
- $gl-badge-muted-background-color-active: $gl-color-neutral-100; // Used for the background of a subtle neutral badge in the active state.
630
- $gl-badge-muted-background-color-default: $gl-color-neutral-50; // Used for the background of a subtle neutral badge when static or the default state when linked.
640
+ $gl-badge-muted-icon-color-active: $gl-color-neutral-700; // Used for the icon of a muted badge in the active state.
641
+ $gl-badge-muted-icon-color-hover: $gl-color-neutral-600; // Used for the icon of a muted badge in the hover state.
642
+ $gl-badge-muted-icon-color-default: $gl-color-neutral-500; // Used for the icon of a muted badge when static or the default state when linked.
643
+ $gl-badge-muted-text-color-active: $gl-color-neutral-800; // Used for the text of a muted badge in the active state.
644
+ $gl-badge-muted-text-color-hover: $gl-color-neutral-700; // Used for the text of a muted badge in the hover state.
645
+ $gl-badge-muted-text-color-default: $gl-color-neutral-600; // Used for the text of a muted badge when static or the default state when linked.
646
+ $gl-badge-muted-border-color-active: $gl-color-alpha-0; // Used for the border of a muted badge in the active state.
647
+ $gl-badge-muted-border-color-focus: $gl-color-alpha-0; // Used for the border of a muted badge in the focus state.
648
+ $gl-badge-muted-border-color-hover: $gl-color-neutral-200; // Used for the border of a muted badge in the hover state.
649
+ $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.
650
+ $gl-badge-muted-background-color-active: $gl-color-neutral-100; // Used for the background of a muted badge in the active state.
651
+ $gl-badge-muted-background-color-default: $gl-color-neutral-50; // Used for the background of a muted badge when static or the default state when linked.
631
652
  $gl-avatar-fallback-background-color-neutral: $gl-color-neutral-50; // Neutral background for avatar fallback with no particular meaning.
632
653
  $gl-avatar-fallback-background-color-orange: $gl-color-orange-50; // Orange background for avatar fallback with no particular meaning.
633
654
  $gl-avatar-fallback-background-color-green: $gl-color-green-50; // Green background for avatar fallback with no particular meaning.
@@ -707,18 +728,25 @@ $gl-button-default-primary-foreground-color-focus: $gl-button-default-primary-fo
707
728
  $gl-button-default-primary-foreground-color-hover: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a default primary button in the hover state.
708
729
  $gl-badge-tier-icon-color-focus: $gl-badge-tier-icon-color-hover; // Used for the icon of a tier related badge in the focus state.
709
730
  $gl-badge-tier-text-color-focus: $gl-badge-tier-text-color-hover; // Used for the text of a tier related badge in the focus state.
710
- $gl-badge-danger-icon-color-focus: $gl-badge-danger-icon-color-hover; // Used for the icon of a danger (critical) badge in the focus state.
711
- $gl-badge-danger-text-color-focus: $gl-badge-danger-text-color-hover; // Used for the text of a danger (critical) badge in the focus state.
712
- $gl-badge-warning-icon-color-focus: $gl-badge-warning-icon-color-hover; // Used for the icon of a warning status or confidential item in the focus state.
713
- $gl-badge-warning-text-color-focus: $gl-badge-warning-text-color-hover; // Used for the text of a warning status or confidential item in the focus state.
731
+ $gl-badge-tier-background-color-hover: $gl-badge-tier-background-color-default; // Used for the background of a tier related badge in the hover state.
732
+ $gl-badge-danger-icon-color-focus: $gl-badge-danger-icon-color-hover; // Used for the icon of a danger badge in the focus state.
733
+ $gl-badge-danger-text-color-focus: $gl-badge-danger-text-color-hover; // Used for the text of a danger badge in the focus state.
734
+ $gl-badge-danger-background-color-hover: $gl-badge-danger-background-color-default; // Used for the background of a danger badge in the hover state.
735
+ $gl-badge-warning-icon-color-focus: $gl-badge-warning-icon-color-hover; // Used for the icon of a warning badge in the focus state.
736
+ $gl-badge-warning-text-color-focus: $gl-badge-warning-text-color-hover; // Used for the text of a warning badge in the focus state.
737
+ $gl-badge-warning-background-color-hover: $gl-badge-warning-background-color-default; // Used for the background of a warning badge in the hover state.
714
738
  $gl-badge-success-icon-color-focus: $gl-badge-success-icon-color-hover; // Used for the icon of a success badge in the focus state.
715
739
  $gl-badge-success-text-color-focus: $gl-badge-success-text-color-hover; // Used for the text of a success badge in the focus state.
740
+ $gl-badge-success-background-color-hover: $gl-badge-success-background-color-default; // Used for the background of a success badge in the hover state.
716
741
  $gl-badge-info-icon-color-focus: $gl-badge-info-icon-color-hover; // Used for the icon of an informational badge in the focus state.
717
742
  $gl-badge-info-text-color-focus: $gl-badge-info-text-color-hover; // Used for the text of an informational badge in the focus state.
743
+ $gl-badge-info-background-color-hover: $gl-badge-info-background-color-default; // Used for the background of an informational badge in the hover state.
718
744
  $gl-badge-neutral-icon-color-focus: $gl-badge-neutral-icon-color-hover; // Used for the icon of a neutral badge in the focus state.
719
745
  $gl-badge-neutral-text-color-focus: $gl-badge-neutral-text-color-hover; // Used for the text of a neutral badge in the focus state.
720
- $gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a subtle neutral badge in the focus state.
721
- $gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a subtle neutral badge in the focus state.
746
+ $gl-badge-neutral-background-color-hover: $gl-badge-neutral-background-color-default; // Used for the background of a neutral badge in the hover state.
747
+ $gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a muted badge in the focus state.
748
+ $gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a muted badge in the focus state.
749
+ $gl-badge-muted-background-color-hover: $gl-badge-muted-background-color-default; // Used for the background of a muted badge in the hover state.
722
750
  $gl-action-danger-border-color-active: $gl-action-danger-border-color-default; // Used for the border of a danger action in the active state.
723
751
  $gl-action-danger-border-color-focus: $gl-action-danger-border-color-default; // Used for the border of a danger action in the focus state.
724
752
  $gl-action-danger-border-color-hover: $gl-action-danger-border-color-default; // Used for the border of a danger action in the hover state.
@@ -756,3 +784,10 @@ $gl-button-default-tertiary-border-color-hover: $gl-action-neutral-border-color-
756
784
  $gl-button-default-tertiary-foreground-color-active: $gl-action-neutral-foreground-color-active; // Used for the foreground of a default borderless, tertiary button in the active state.
757
785
  $gl-button-default-tertiary-foreground-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the foreground of a default borderless, tertiary button in the focus state.
758
786
  $gl-button-default-tertiary-foreground-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the foreground of a default borderless, tertiary button in the hover state.
787
+ $gl-badge-tier-background-color-focus: $gl-badge-tier-background-color-hover; // Used for the background of a tier related badge in the focus state.
788
+ $gl-badge-danger-background-color-focus: $gl-badge-danger-background-color-hover; // Used for the background of a danger badge in the focus state.
789
+ $gl-badge-warning-background-color-focus: $gl-badge-warning-background-color-hover; // Used for the background of a warning badge in the focus state.
790
+ $gl-badge-success-background-color-focus: $gl-badge-success-background-color-hover; // Used for the background of a success badge in the focus state.
791
+ $gl-badge-info-background-color-focus: $gl-badge-info-background-color-hover; // Used for the background of an informational badge in the focus state.
792
+ $gl-badge-neutral-background-color-focus: $gl-badge-neutral-background-color-hover; // Used for the background of a neutral badge in the focus state.
793
+ $gl-badge-muted-background-color-focus: $gl-badge-muted-background-color-hover; // Used for the background of a muted badge in the focus state.
package/src/tokens/build/scss/_tokens_custom_properties.scss CHANGED
@@ -285,8 +285,13 @@ $gl-avatar-fallback-background-color-green: var(--gl-avatar-fallback-background-
285
285
  $gl-avatar-fallback-background-color-orange: var(--gl-avatar-fallback-background-color-orange);
286
286
  $gl-avatar-fallback-background-color-neutral: var(--gl-avatar-fallback-background-color-neutral);
287
287
  $gl-badge-muted-background-color-default: var(--gl-badge-muted-background-color-default);
288
+ $gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-hover);
289
+ $gl-badge-muted-background-color-focus: var(--gl-badge-muted-background-color-focus);
288
290
  $gl-badge-muted-background-color-active: var(--gl-badge-muted-background-color-active);
291
+ $gl-badge-muted-border-color-default: var(--gl-badge-muted-border-color-default);
289
292
  $gl-badge-muted-border-color-hover: var(--gl-badge-muted-border-color-hover);
293
+ $gl-badge-muted-border-color-focus: var(--gl-badge-muted-border-color-focus);
294
+ $gl-badge-muted-border-color-active: var(--gl-badge-muted-border-color-active);
290
295
  $gl-badge-muted-text-color-default: var(--gl-badge-muted-text-color-default);
291
296
  $gl-badge-muted-text-color-hover: var(--gl-badge-muted-text-color-hover);
292
297
  $gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-focus);
@@ -296,8 +301,13 @@ $gl-badge-muted-icon-color-hover: var(--gl-badge-muted-icon-color-hover);
296
301
  $gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-focus);
297
302
  $gl-badge-muted-icon-color-active: var(--gl-badge-muted-icon-color-active);
298
303
  $gl-badge-neutral-background-color-default: var(--gl-badge-neutral-background-color-default);
304
+ $gl-badge-neutral-background-color-hover: var(--gl-badge-neutral-background-color-hover);
305
+ $gl-badge-neutral-background-color-focus: var(--gl-badge-neutral-background-color-focus);
299
306
  $gl-badge-neutral-background-color-active: var(--gl-badge-neutral-background-color-active);
307
+ $gl-badge-neutral-border-color-default: var(--gl-badge-neutral-border-color-default);
300
308
  $gl-badge-neutral-border-color-hover: var(--gl-badge-neutral-border-color-hover);
309
+ $gl-badge-neutral-border-color-focus: var(--gl-badge-neutral-border-color-focus);
310
+ $gl-badge-neutral-border-color-active: var(--gl-badge-neutral-border-color-active);
301
311
  $gl-badge-neutral-text-color-default: var(--gl-badge-neutral-text-color-default);
302
312
  $gl-badge-neutral-text-color-hover: var(--gl-badge-neutral-text-color-hover);
303
313
  $gl-badge-neutral-text-color-focus: var(--gl-badge-neutral-text-color-focus);
@@ -307,8 +317,13 @@ $gl-badge-neutral-icon-color-hover: var(--gl-badge-neutral-icon-color-hover);
307
317
  $gl-badge-neutral-icon-color-focus: var(--gl-badge-neutral-icon-color-focus);
308
318
  $gl-badge-neutral-icon-color-active: var(--gl-badge-neutral-icon-color-active);
309
319
  $gl-badge-info-background-color-default: var(--gl-badge-info-background-color-default);
320
+ $gl-badge-info-background-color-hover: var(--gl-badge-info-background-color-hover);
321
+ $gl-badge-info-background-color-focus: var(--gl-badge-info-background-color-focus);
310
322
  $gl-badge-info-background-color-active: var(--gl-badge-info-background-color-active);
323
+ $gl-badge-info-border-color-default: var(--gl-badge-info-border-color-default);
311
324
  $gl-badge-info-border-color-hover: var(--gl-badge-info-border-color-hover);
325
+ $gl-badge-info-border-color-focus: var(--gl-badge-info-border-color-focus);
326
+ $gl-badge-info-border-color-active: var(--gl-badge-info-border-color-active);
312
327
  $gl-badge-info-text-color-default: var(--gl-badge-info-text-color-default);
313
328
  $gl-badge-info-text-color-hover: var(--gl-badge-info-text-color-hover);
314
329
  $gl-badge-info-text-color-focus: var(--gl-badge-info-text-color-focus);
@@ -318,8 +333,13 @@ $gl-badge-info-icon-color-hover: var(--gl-badge-info-icon-color-hover);
318
333
  $gl-badge-info-icon-color-focus: var(--gl-badge-info-icon-color-focus);
319
334
  $gl-badge-info-icon-color-active: var(--gl-badge-info-icon-color-active);
320
335
  $gl-badge-success-background-color-default: var(--gl-badge-success-background-color-default);
336
+ $gl-badge-success-background-color-hover: var(--gl-badge-success-background-color-hover);
337
+ $gl-badge-success-background-color-focus: var(--gl-badge-success-background-color-focus);
321
338
  $gl-badge-success-background-color-active: var(--gl-badge-success-background-color-active);
339
+ $gl-badge-success-border-color-default: var(--gl-badge-success-border-color-default);
322
340
  $gl-badge-success-border-color-hover: var(--gl-badge-success-border-color-hover);
341
+ $gl-badge-success-border-color-focus: var(--gl-badge-success-border-color-focus);
342
+ $gl-badge-success-border-color-active: var(--gl-badge-success-border-color-active);
323
343
  $gl-badge-success-text-color-default: var(--gl-badge-success-text-color-default);
324
344
  $gl-badge-success-text-color-hover: var(--gl-badge-success-text-color-hover);
325
345
  $gl-badge-success-text-color-focus: var(--gl-badge-success-text-color-focus);
@@ -329,8 +349,13 @@ $gl-badge-success-icon-color-hover: var(--gl-badge-success-icon-color-hover);
329
349
  $gl-badge-success-icon-color-focus: var(--gl-badge-success-icon-color-focus);
330
350
  $gl-badge-success-icon-color-active: var(--gl-badge-success-icon-color-active);
331
351
  $gl-badge-warning-background-color-default: var(--gl-badge-warning-background-color-default);
352
+ $gl-badge-warning-background-color-hover: var(--gl-badge-warning-background-color-hover);
353
+ $gl-badge-warning-background-color-focus: var(--gl-badge-warning-background-color-focus);
332
354
  $gl-badge-warning-background-color-active: var(--gl-badge-warning-background-color-active);
355
+ $gl-badge-warning-border-color-default: var(--gl-badge-warning-border-color-default);
333
356
  $gl-badge-warning-border-color-hover: var(--gl-badge-warning-border-color-hover);
357
+ $gl-badge-warning-border-color-focus: var(--gl-badge-warning-border-color-focus);
358
+ $gl-badge-warning-border-color-active: var(--gl-badge-warning-border-color-active);
334
359
  $gl-badge-warning-text-color-default: var(--gl-badge-warning-text-color-default);
335
360
  $gl-badge-warning-text-color-hover: var(--gl-badge-warning-text-color-hover);
336
361
  $gl-badge-warning-text-color-focus: var(--gl-badge-warning-text-color-focus);
@@ -340,8 +365,13 @@ $gl-badge-warning-icon-color-hover: var(--gl-badge-warning-icon-color-hover);
340
365
  $gl-badge-warning-icon-color-focus: var(--gl-badge-warning-icon-color-focus);
341
366
  $gl-badge-warning-icon-color-active: var(--gl-badge-warning-icon-color-active);
342
367
  $gl-badge-danger-background-color-default: var(--gl-badge-danger-background-color-default);
368
+ $gl-badge-danger-background-color-hover: var(--gl-badge-danger-background-color-hover);
369
+ $gl-badge-danger-background-color-focus: var(--gl-badge-danger-background-color-focus);
343
370
  $gl-badge-danger-background-color-active: var(--gl-badge-danger-background-color-active);
371
+ $gl-badge-danger-border-color-default: var(--gl-badge-danger-border-color-default);
344
372
  $gl-badge-danger-border-color-hover: var(--gl-badge-danger-border-color-hover);
373
+ $gl-badge-danger-border-color-focus: var(--gl-badge-danger-border-color-focus);
374
+ $gl-badge-danger-border-color-active: var(--gl-badge-danger-border-color-active);
345
375
  $gl-badge-danger-text-color-default: var(--gl-badge-danger-text-color-default);
346
376
  $gl-badge-danger-text-color-hover: var(--gl-badge-danger-text-color-hover);
347
377
  $gl-badge-danger-text-color-focus: var(--gl-badge-danger-text-color-focus);
@@ -351,8 +381,13 @@ $gl-badge-danger-icon-color-hover: var(--gl-badge-danger-icon-color-hover);
351
381
  $gl-badge-danger-icon-color-focus: var(--gl-badge-danger-icon-color-focus);
352
382
  $gl-badge-danger-icon-color-active: var(--gl-badge-danger-icon-color-active);
353
383
  $gl-badge-tier-background-color-default: var(--gl-badge-tier-background-color-default);
384
+ $gl-badge-tier-background-color-hover: var(--gl-badge-tier-background-color-hover);
385
+ $gl-badge-tier-background-color-focus: var(--gl-badge-tier-background-color-focus);
354
386
  $gl-badge-tier-background-color-active: var(--gl-badge-tier-background-color-active);
387
+ $gl-badge-tier-border-color-default: var(--gl-badge-tier-border-color-default);
355
388
  $gl-badge-tier-border-color-hover: var(--gl-badge-tier-border-color-hover);
389
+ $gl-badge-tier-border-color-focus: var(--gl-badge-tier-border-color-focus);
390
+ $gl-badge-tier-border-color-active: var(--gl-badge-tier-border-color-active);
356
391
  $gl-badge-tier-text-color-default: var(--gl-badge-tier-text-color-default);
357
392
  $gl-badge-tier-text-color-hover: var(--gl-badge-tier-text-color-hover);
358
393
  $gl-badge-tier-text-color-focus: var(--gl-badge-tier-text-color-focus);
package/src/tokens/contextual/avatar.tokens.json CHANGED
@@ -3,12 +3,18 @@
3
3
  "border": {
4
4
  "color": {
5
5
  "default": {
6
- "$value": "{color.alpha.dark.8}",
6
+ "$value": {
7
+ "default": "{color.alpha.dark.8}",
8
+ "dark": "{color.alpha.light.8}"
9
+ },
7
10
  "$type": "color",
8
11
  "$description": "Used to define the edge of an avatar."
9
12
  },
10
13
  "hover": {
11
- "$value": "{color.alpha.dark.24}",
14
+ "$value": {
15
+ "default": "{color.alpha.dark.24}",
16
+ "dark": "{color.alpha.light.24}"
17
+ },
12
18
  "$type": "color",
13
19
  "$description": "Used to increase the edge definition of an avatar in the hover state."
14
20
  }
@@ -20,7 +26,7 @@
20
26
  "red": {
21
27
  "$value": {
22
28
  "default": "{color.red.50}",
23
- "dark": "{color.red.900}"
29
+ "dark": "{color.red.950}"
24
30
  },
25
31
  "$type": "color",
26
32
  "$description": "Red background for avatar fallback with no particular meaning."
@@ -36,7 +42,7 @@
36
42
  "blue": {
37
43
  "$value": {
38
44
  "default": "{color.blue.50}",
39
- "dark": "{color.blue.900}"
45
+ "dark": "{color.blue.950}"
40
46
  },
41
47
  "$type": "color",
42
48
  "$description": "Blue background for avatar fallback with no particular meaning."
@@ -44,7 +50,7 @@
44
50
  "green": {
45
51
  "$value": {
46
52
  "default": "{color.green.50}",
47
- "dark": "{color.green.900}"
53
+ "dark": "{color.green.950}"
48
54
  },
49
55
  "$type": "color",
50
56
  "$description": "Green background for avatar fallback with no particular meaning."
@@ -52,7 +58,7 @@
52
58
  "orange": {
53
59
  "$value": {
54
60
  "default": "{color.orange.50}",
55
- "dark": "{color.orange.900}"
61
+ "dark": "{color.orange.950}"
56
62
  },
57
63
  "$type": "color",
58
64
  "$description": "Orange background for avatar fallback with no particular meaning."