@gitlab/ui 89.2.0 → 89.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 (30) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/index.css +2 -2
  3. package/dist/index.css.map +1 -1
  4. package/dist/tokens/build/js/tokens.dark.js +116 -92
  5. package/dist/tokens/build/js/tokens.js +33 -9
  6. package/dist/tokens/css/tokens.css +38 -14
  7. package/dist/tokens/css/tokens.dark.css +95 -71
  8. package/dist/tokens/js/tokens.dark.js +115 -91
  9. package/dist/tokens/js/tokens.js +32 -8
  10. package/dist/tokens/json/tokens.dark.json +744 -177
  11. package/dist/tokens/json/tokens.json +661 -94
  12. package/dist/tokens/scss/_tokens.dark.scss +95 -71
  13. package/dist/tokens/scss/_tokens.scss +38 -14
  14. package/dist/tokens/scss/_tokens_custom_properties.scss +24 -0
  15. package/package.json +3 -3
  16. package/src/components/base/badge/badge.scss +65 -32
  17. package/src/components/base/datepicker/datepicker.scss +5 -0
  18. package/src/components/base/toggle/toggle.scss +8 -5
  19. package/src/tokens/action.tokens.json +171 -3
  20. package/src/tokens/build/css/tokens.css +38 -14
  21. package/src/tokens/build/css/tokens.dark.css +95 -71
  22. package/src/tokens/build/js/tokens.dark.js +115 -91
  23. package/src/tokens/build/js/tokens.js +32 -8
  24. package/src/tokens/build/json/tokens.dark.json +744 -177
  25. package/src/tokens/build/json/tokens.json +661 -94
  26. package/src/tokens/build/scss/_tokens.dark.scss +95 -71
  27. package/src/tokens/build/scss/_tokens.scss +38 -14
  28. package/src/tokens/build/scss/_tokens_custom_properties.scss +24 -0
  29. package/src/tokens/contextual/badge.tokens.json +69 -69
  30. package/src/tokens/contextual/button.tokens.json +8 -17
package/src/tokens/build/scss/_tokens.dark.scss CHANGED
@@ -555,10 +555,6 @@ $gl-button-confirm-secondary-foreground-color-default: $gl-color-blue-400; // Us
555
555
  $gl-button-confirm-primary-border-color-active: $gl-color-blue-50; // Used for the border of a confirm (positive) primary button in the active state.
556
556
  $gl-button-confirm-primary-border-color-hover: $gl-color-blue-100; // Used for the border of a confirm (positive) primary button in the hover state.
557
557
  $gl-button-confirm-primary-border-color-default: $gl-color-blue-300; // Used for the border of a confirm (positive) primary button in the default state.
558
- $gl-button-confirm-primary-background-color-active: $gl-color-blue-200; // Used for the background of a confirm (positive) primary button in the active state.
559
- $gl-button-confirm-primary-background-color-hover: $gl-color-blue-300; // Used for the background of a confirm (positive) primary button in the hover state.
560
- $gl-button-confirm-primary-background-color-default: $gl-color-blue-400; // Used for the background of a confirm (positive) primary button in the default state.
561
- $gl-button-confirm-primary-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a confirm (positive) primary button in the default state.
562
558
  $gl-button-default-tertiary-background-color-active: $gl-action-neutral-background-color-active; // Used for the background of a default borderless, tertiary button in the active state.
563
559
  $gl-button-default-tertiary-background-color-hover: $gl-action-neutral-background-color-hover; // Used for the background of a default borderless, tertiary button in the hover state.
564
560
  $gl-button-default-tertiary-background-color-default: $gl-action-neutral-background-color-default; // Used for the background of a default borderless, tertiary button in the default state.
@@ -572,90 +568,90 @@ $gl-button-default-primary-foreground-color-default: $gl-color-neutral-50; // Us
572
568
  $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
573
569
  $gl-banner-promo-background-color: $gl-color-neutral-900; // Used as background for the default banner type.
574
570
  $gl-banner-intro-border-color: $gl-color-blue-600; // Used to compliment the info banner.
575
- $gl-badge-tier-icon-color-active: $gl-color-purple-300; // Used for the icon of a tier related badge in the active state.
576
- $gl-badge-tier-icon-color-hover: $gl-color-purple-400; // Used for the icon of a tier related badge in the hover state.
577
- $gl-badge-tier-icon-color-default: $gl-color-purple-500; // Used for the icon of a tier related badge when static or the default state when linked.
578
- $gl-badge-tier-text-color-active: $gl-color-purple-100; // Used for the text of a tier related badge in the active state.
579
- $gl-badge-tier-text-color-hover: $gl-color-purple-200; // Used for the text of a tier related badge in the hover state.
580
- $gl-badge-tier-text-color-default: $gl-color-purple-300; // Used for the text of a tier related badge when static or the default state when linked.
571
+ $gl-badge-tier-icon-color-active: $gl-color-purple-950; // Used for the icon of a tier related badge in the active state.
572
+ $gl-badge-tier-icon-color-hover: $gl-color-purple-950; // Used for the icon of a tier related badge in the hover state.
573
+ $gl-badge-tier-icon-color-default: $gl-color-purple-950; // Used for the icon of a tier related badge when static or the default state when linked.
574
+ $gl-badge-tier-text-color-active: $gl-color-purple-950; // Used for the text of a tier related badge in the active state.
575
+ $gl-badge-tier-text-color-hover: $gl-color-purple-950; // Used for the text of a tier related badge in the hover state.
576
+ $gl-badge-tier-text-color-default: $gl-color-purple-950; // Used for the text of a tier related badge when static or the default state when linked.
581
577
  $gl-badge-tier-border-color-active: $gl-color-alpha-0; // Used for the border of a tier related badge in the active state.
582
578
  $gl-badge-tier-border-color-focus: $gl-color-alpha-0; // Used for the border of a tier related badge in the focus state.
583
- $gl-badge-tier-border-color-hover: $gl-color-purple-800; // Used for the border of a tier related badge in the hover state.
579
+ $gl-badge-tier-border-color-hover: $gl-color-purple-200; // Used for the border of a tier related badge in the hover state.
584
580
  $gl-badge-tier-border-color-default: $gl-color-alpha-0; // Used for the border of a tier related badge when static or the default state when linked.
585
- $gl-badge-tier-background-color-active: $gl-color-purple-800; // Used for the background of a tier related badge in the active state.
586
- $gl-badge-tier-background-color-default: $gl-color-purple-900; // Used for the background of a tier related badge when static or the default state when linked.
587
- $gl-badge-danger-icon-color-active: $gl-color-red-200; // Used for the icon of a danger badge in the active state.
588
- $gl-badge-danger-icon-color-hover: $gl-color-red-300; // Used for the icon of a danger badge in the hover state.
589
- $gl-badge-danger-icon-color-default: $gl-color-red-400; // Used for the icon of a danger badge when static or the default state when linked.
590
- $gl-badge-danger-text-color-active: $gl-color-red-50; // Used for the text of a danger badge in the active state.
591
- $gl-badge-danger-text-color-hover: $gl-color-red-100; // Used for the text of a danger badge in the hover state.
592
- $gl-badge-danger-text-color-default: $gl-color-red-200; // Used for the text of a danger badge when static or the default state when linked.
581
+ $gl-badge-tier-background-color-active: $gl-color-purple-200; // Used for the background of a tier related badge in the active state.
582
+ $gl-badge-tier-background-color-default: $gl-color-purple-300; // Used for the background of a tier related badge when static or the default state when linked.
583
+ $gl-badge-danger-icon-color-active: $gl-color-red-950; // Used for the icon of a danger badge in the active state.
584
+ $gl-badge-danger-icon-color-hover: $gl-color-red-950; // Used for the icon of a danger badge in the hover state.
585
+ $gl-badge-danger-icon-color-default: $gl-color-red-950; // Used for the icon of a danger badge when static or the default state when linked.
586
+ $gl-badge-danger-text-color-active: $gl-color-red-950; // Used for the text of a danger badge in the active state.
587
+ $gl-badge-danger-text-color-hover: $gl-color-red-950; // Used for the text of a danger badge in the hover state.
588
+ $gl-badge-danger-text-color-default: $gl-color-red-950; // Used for the text of a danger badge when static or the default state when linked.
593
589
  $gl-badge-danger-border-color-active: $gl-color-alpha-0; // Used for the border of a danger badge in the active state.
594
590
  $gl-badge-danger-border-color-focus: $gl-color-alpha-0; // Used for the border of a danger badge in the focus state.
595
- $gl-badge-danger-border-color-hover: $gl-color-red-700; // Used for the border of a danger badge in the hover state.
591
+ $gl-badge-danger-border-color-hover: $gl-color-red-200; // Used for the border of a danger badge in the hover state.
596
592
  $gl-badge-danger-border-color-default: $gl-color-alpha-0; // Used for the border of a danger badge when static or the default state when linked.
597
- $gl-badge-danger-background-color-active: $gl-color-red-700; // Used for the background of a danger badge in the active state.
598
- $gl-badge-danger-background-color-default: $gl-color-red-800; // Used for the background of a danger badge when static or the default state when linked.
599
- $gl-badge-warning-icon-color-active: $gl-color-orange-200; // Used for the icon of a warning badge in the active state.
600
- $gl-badge-warning-icon-color-hover: $gl-color-orange-300; // Used for the icon of a warning badge in the hover state.
601
- $gl-badge-warning-icon-color-default: $gl-color-orange-400; // Used for the icon of a warning badge when static or the default state when linked.
602
- $gl-badge-warning-text-color-active: $gl-color-orange-50; // Used for the text of a warning badge in the active state.
603
- $gl-badge-warning-text-color-hover: $gl-color-orange-100; // Used for the text of a warning badge in the hover state.
604
- $gl-badge-warning-text-color-default: $gl-color-orange-200; // Used for the text of a warning badge when static or the default state when linked.
593
+ $gl-badge-danger-background-color-active: $gl-color-red-200; // Used for the background of a danger badge in the active state.
594
+ $gl-badge-danger-background-color-default: $gl-color-red-300; // Used for the background of a danger badge when static or the default state when linked.
595
+ $gl-badge-warning-icon-color-active: $gl-color-orange-950; // Used for the icon of a warning badge in the active state.
596
+ $gl-badge-warning-icon-color-hover: $gl-color-orange-950; // Used for the icon of a warning badge in the hover state.
597
+ $gl-badge-warning-icon-color-default: $gl-color-orange-950; // Used for the icon of a warning badge when static or the default state when linked.
598
+ $gl-badge-warning-text-color-active: $gl-color-orange-950; // Used for the text of a warning badge in the active state.
599
+ $gl-badge-warning-text-color-hover: $gl-color-orange-950; // Used for the text of a warning badge in the hover state.
600
+ $gl-badge-warning-text-color-default: $gl-color-orange-950; // Used for the text of a warning badge when static or the default state when linked.
605
601
  $gl-badge-warning-border-color-active: $gl-color-alpha-0; // Used for the border of a warning badge in the active state.
606
602
  $gl-badge-warning-border-color-focus: $gl-color-alpha-0; // Used for the border of a warning badge in the focus state.
607
- $gl-badge-warning-border-color-hover: $gl-color-orange-700; // Used for the border of a warning badge in the hover state.
603
+ $gl-badge-warning-border-color-hover: $gl-color-orange-200; // Used for the border of a warning badge in the hover state.
608
604
  $gl-badge-warning-border-color-default: $gl-color-alpha-0; // Used for the border of a warning badge when static or the default state when linked.
609
- $gl-badge-warning-background-color-active: $gl-color-orange-700; // Used for the background of a warning badge in the active state.
610
- $gl-badge-warning-background-color-default: $gl-color-orange-800; // Used for the background of a warning badge when static or the default state when linked.
611
- $gl-badge-success-icon-color-active: $gl-color-green-200; // Used for the icon of a success badge in the active state.
612
- $gl-badge-success-icon-color-hover: $gl-color-green-300; // Used for the icon of a success badge in the hover state.
613
- $gl-badge-success-icon-color-default: $gl-color-green-400; // Used for the icon of a success badge when static or the default state when linked.
614
- $gl-badge-success-text-color-active: $gl-color-green-50; // Used for the text of a success badge in the active state.
615
- $gl-badge-success-text-color-hover: $gl-color-green-100; // Used for the text of a success badge in the hover state.
616
- $gl-badge-success-text-color-default: $gl-color-green-200; // Used for the text of a success badge when static or the default state when linked.
605
+ $gl-badge-warning-background-color-active: $gl-color-orange-200; // Used for the background of a warning badge in the active state.
606
+ $gl-badge-warning-background-color-default: $gl-color-orange-300; // Used for the background of a warning badge when static or the default state when linked.
607
+ $gl-badge-success-icon-color-active: $gl-color-green-950; // Used for the icon of a success badge in the active state.
608
+ $gl-badge-success-icon-color-hover: $gl-color-green-950; // Used for the icon of a success badge in the hover state.
609
+ $gl-badge-success-icon-color-default: $gl-color-green-950; // Used for the icon of a success badge when static or the default state when linked.
610
+ $gl-badge-success-text-color-active: $gl-color-green-950; // Used for the text of a success badge in the active state.
611
+ $gl-badge-success-text-color-hover: $gl-color-green-950; // Used for the text of a success badge in the hover state.
612
+ $gl-badge-success-text-color-default: $gl-color-green-950; // Used for the text of a success badge when static or the default state when linked.
617
613
  $gl-badge-success-border-color-active: $gl-color-alpha-0; // Used for the border of a success badge in the active state.
618
614
  $gl-badge-success-border-color-focus: $gl-color-alpha-0; // Used for the border of a success badge in the focus state.
619
- $gl-badge-success-border-color-hover: $gl-color-green-700; // Used for the border of a success badge in the hover state.
615
+ $gl-badge-success-border-color-hover: $gl-color-green-200; // Used for the border of a success badge in the hover state.
620
616
  $gl-badge-success-border-color-default: $gl-color-alpha-0; // Used for the border of a success badge when static or the default state when linked.
621
- $gl-badge-success-background-color-active: $gl-color-green-700; // Used for the background of a success badge in the active state.
622
- $gl-badge-success-background-color-default: $gl-color-green-800; // Used for the background of a success badge when static or the default state when linked.
623
- $gl-badge-info-icon-color-active: $gl-color-blue-200; // Used for the icon of an informational badge in the active state.
624
- $gl-badge-info-icon-color-hover: $gl-color-blue-300; // Used for the icon of an informational badge in the hover state.
625
- $gl-badge-info-icon-color-default: $gl-color-blue-400; // Used for the icon of an informational badge when static or the default state when linked.
626
- $gl-badge-info-text-color-active: $gl-color-blue-50; // Used for the text of an informational badge in the active state.
627
- $gl-badge-info-text-color-hover: $gl-color-blue-100; // Used for the text of an informational badge in the hover state.
628
- $gl-badge-info-text-color-default: $gl-color-blue-200; // Used for the text of an informational badge when static or the default state when linked.
617
+ $gl-badge-success-background-color-active: $gl-color-green-200; // Used for the background of a success badge in the active state.
618
+ $gl-badge-success-background-color-default: $gl-color-green-300; // Used for the background of a success badge when static or the default state when linked.
619
+ $gl-badge-info-icon-color-active: $gl-color-blue-950; // Used for the icon of an informational badge in the active state.
620
+ $gl-badge-info-icon-color-hover: $gl-color-blue-950; // Used for the icon of an informational badge in the hover state.
621
+ $gl-badge-info-icon-color-default: $gl-color-blue-950; // Used for the icon of an informational badge when static or the default state when linked.
622
+ $gl-badge-info-text-color-active: $gl-color-blue-950; // Used for the text of an informational badge in the active state.
623
+ $gl-badge-info-text-color-hover: $gl-color-blue-950; // Used for the text of an informational badge in the hover state.
624
+ $gl-badge-info-text-color-default: $gl-color-blue-950; // Used for the text of an informational badge when static or the default state when linked.
629
625
  $gl-badge-info-border-color-active: $gl-color-alpha-0; // Used for the border of an informational badge in the active state.
630
626
  $gl-badge-info-border-color-focus: $gl-color-alpha-0; // Used for the border of an informational badge in the focus state.
631
- $gl-badge-info-border-color-hover: $gl-color-blue-700; // Used for the border of an informational badge in the hover state.
627
+ $gl-badge-info-border-color-hover: $gl-color-blue-200; // Used for the border of an informational badge in the hover state.
632
628
  $gl-badge-info-border-color-default: $gl-color-alpha-0; // Used for the border of an informational badge when static or the default state when linked.
633
- $gl-badge-info-background-color-active: $gl-color-blue-700; // Used for the background of an informational badge in the active state.
634
- $gl-badge-info-background-color-default: $gl-color-blue-800; // Used for the background of an informational badge when static or the default state when linked.
635
- $gl-badge-neutral-icon-color-active: $gl-color-neutral-200; // Used for the icon of a neutral badge in the active state.
636
- $gl-badge-neutral-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a neutral badge in the hover state.
637
- $gl-badge-neutral-icon-color-default: $gl-color-neutral-400; // Used for the icon of a neutral badge when static or the default state when linked.
638
- $gl-badge-neutral-text-color-active: $gl-color-neutral-50; // Used for the text of a neutral badge in the active state.
639
- $gl-badge-neutral-text-color-hover: $gl-color-neutral-100; // Used for the text of a neutral badge in the hover state.
640
- $gl-badge-neutral-text-color-default: $gl-color-neutral-200; // Used for the text of a neutral badge when static or the default state when linked.
629
+ $gl-badge-info-background-color-active: $gl-color-blue-200; // Used for the background of an informational badge in the active state.
630
+ $gl-badge-info-background-color-default: $gl-color-blue-300; // Used for the background of an informational badge when static or the default state when linked.
631
+ $gl-badge-neutral-icon-color-active: $gl-color-neutral-950; // Used for the icon of a neutral badge in the active state.
632
+ $gl-badge-neutral-icon-color-hover: $gl-color-neutral-950; // Used for the icon of a neutral badge in the hover state.
633
+ $gl-badge-neutral-icon-color-default: $gl-color-neutral-950; // Used for the icon of a neutral badge when static or the default state when linked.
634
+ $gl-badge-neutral-text-color-active: $gl-color-neutral-950; // Used for the text of a neutral badge in the active state.
635
+ $gl-badge-neutral-text-color-hover: $gl-color-neutral-950; // Used for the text of a neutral badge in the hover state.
636
+ $gl-badge-neutral-text-color-default: $gl-color-neutral-950; // Used for the text of a neutral badge when static or the default state when linked.
641
637
  $gl-badge-neutral-border-color-active: $gl-color-alpha-0; // Used for the border of a neutral badge in the active state.
642
638
  $gl-badge-neutral-border-color-focus: $gl-color-alpha-0; // Used for the border of a neutral badge in the focus state.
643
- $gl-badge-neutral-border-color-hover: $gl-color-neutral-700; // Used for the border of a neutral badge in the hover state.
639
+ $gl-badge-neutral-border-color-hover: $gl-color-neutral-200; // Used for the border of a neutral badge in the hover state.
644
640
  $gl-badge-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a neutral badge when static or the default state when linked.
645
- $gl-badge-neutral-background-color-active: $gl-color-neutral-700; // Used for the background of a neutral badge in the active state.
646
- $gl-badge-neutral-background-color-default: $gl-color-neutral-800; // Used for the background of a neutral badge when static or the default state when linked.
647
- $gl-badge-muted-icon-color-active: $gl-color-neutral-200; // Used for the icon of a muted badge in the active state.
648
- $gl-badge-muted-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a muted badge in the hover state.
649
- $gl-badge-muted-icon-color-default: $gl-color-neutral-400; // Used for the icon of a muted badge when static or the default state when linked.
650
- $gl-badge-muted-text-color-active: $gl-color-neutral-100; // Used for the text of a muted badge in the active state.
651
- $gl-badge-muted-text-color-hover: $gl-color-neutral-200; // Used for the text of a muted badge in the hover state.
652
- $gl-badge-muted-text-color-default: $gl-color-neutral-300; // Used for the text of a muted badge when static or the default state when linked.
641
+ $gl-badge-neutral-background-color-active: $gl-color-neutral-200; // Used for the background of a neutral badge in the active state.
642
+ $gl-badge-neutral-background-color-default: $gl-color-neutral-300; // Used for the background of a neutral badge when static or the default state when linked.
643
+ $gl-badge-muted-icon-color-active: $gl-color-neutral-950; // Used for the icon of a muted badge in the active state.
644
+ $gl-badge-muted-icon-color-hover: $gl-color-neutral-950; // Used for the icon of a muted badge in the hover state.
645
+ $gl-badge-muted-icon-color-default: $gl-color-neutral-950; // Used for the icon of a muted badge when static or the default state when linked.
646
+ $gl-badge-muted-text-color-active: $gl-color-neutral-950; // Used for the text of a muted badge in the active state.
647
+ $gl-badge-muted-text-color-hover: $gl-color-neutral-950; // Used for the text of a muted badge in the hover state.
648
+ $gl-badge-muted-text-color-default: $gl-color-neutral-950; // Used for the text of a muted badge when static or the default state when linked.
653
649
  $gl-badge-muted-border-color-active: $gl-color-alpha-0; // Used for the border of a muted badge in the active state.
654
650
  $gl-badge-muted-border-color-focus: $gl-color-alpha-0; // Used for the border of a muted badge in the focus state.
655
- $gl-badge-muted-border-color-hover: $gl-color-neutral-700; // Used for the border of a muted badge in the hover state.
651
+ $gl-badge-muted-border-color-hover: $gl-color-neutral-300; // Used for the border of a muted badge in the hover state.
656
652
  $gl-badge-muted-border-color-default: $gl-color-alpha-0; // Used for the border of a muted badge when static or the default state when linked.
657
- $gl-badge-muted-background-color-active: $gl-color-neutral-800; // Used for the background of a muted badge in the active state.
658
- $gl-badge-muted-background-color-default: $gl-color-neutral-900; // Used for the background of a muted badge when static or the default state when linked.
653
+ $gl-badge-muted-background-color-active: $gl-color-neutral-300; // Used for the background of a muted badge in the active state.
654
+ $gl-badge-muted-background-color-default: $gl-color-neutral-400; // Used for the background of a muted badge when static or the default state when linked.
659
655
  $gl-avatar-fallback-text-color-neutral: $gl-color-neutral-200; // Neutral text color for avatar fallback with no particular meaning.
660
656
  $gl-avatar-fallback-text-color-orange: $gl-color-orange-200; // Orange text color for avatar fallback with no particular meaning.
661
657
  $gl-avatar-fallback-text-color-green: $gl-color-green-200; // Green text color for avatar fallback with no particular meaning.
@@ -673,6 +669,16 @@ $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disa
673
669
  $gl-background-color-strong: $gl-color-neutral-800; // Used to make the background easily stand out from the default.
674
670
  $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.
675
671
  $gl-background-color-default: $gl-color-neutral-950; // Used for the default background color.
672
+ $gl-action-strong-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a strong neutral action in the default state.
673
+ $gl-action-strong-neutral-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a strong neutral action in the default state.
674
+ $gl-action-strong-neutral-background-color-active: $gl-color-neutral-100; // Used for the background of a strong neutral action in the active state.
675
+ $gl-action-strong-neutral-background-color-hover: $gl-color-neutral-200; // Used for the background of a strong neutral action in the hover state.
676
+ $gl-action-strong-neutral-background-color-default: $gl-color-neutral-300; // Used for the background of a strong neutral action in the default state.
677
+ $gl-action-strong-confirm-border-color-default: $gl-color-alpha-0; // Used for the border of a strong confirm action in the default state.
678
+ $gl-action-strong-confirm-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a strong confirm action in the default state.
679
+ $gl-action-strong-confirm-background-color-active: $gl-color-blue-200; // Used for the background of a strong confirm action in the active state.
680
+ $gl-action-strong-confirm-background-color-hover: $gl-color-blue-300; // Used for the background of a strong confirm action in the hover state.
681
+ $gl-action-strong-confirm-background-color-default: $gl-color-blue-400; // Used for the background of a strong confirm action in the default state.
676
682
  $gl-action-danger-border-color-default: $gl-color-alpha-0; // Used for the border of a danger action in the default state.
677
683
  $gl-action-danger-background-color-focus: $gl-action-danger-background-color-hover; // Used for the background of a danger (destructive) action in the focus state.
678
684
  $gl-action-danger-foreground-color-active: $gl-color-red-50; // Used for the foreground of a danger (destructive) action in the active state.
@@ -725,10 +731,10 @@ $gl-button-confirm-secondary-border-color-focus: $gl-button-confirm-secondary-bo
725
731
  $gl-button-confirm-secondary-background-color-focus: $gl-button-confirm-secondary-background-color-hover; // Used for the background of an outlined confirm (positive) button in the focus state.
726
732
  $gl-button-confirm-secondary-foreground-color-focus: $gl-button-confirm-secondary-foreground-color-hover; // Used for the foreground of a confirm (positive) button in the focus state.
727
733
  $gl-button-confirm-primary-border-color-focus: $gl-button-confirm-primary-border-color-hover; // Used for the border of a confirm (positive) primary button in the focus state.
728
- $gl-button-confirm-primary-background-color-focus: $gl-button-confirm-primary-background-color-hover; // Used for the background of a confirm (positive) primary button in the focus state.
729
- $gl-button-confirm-primary-foreground-color-active: $gl-button-confirm-primary-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the active state.
730
- $gl-button-confirm-primary-foreground-color-focus: $gl-button-confirm-primary-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the focus state.
731
- $gl-button-confirm-primary-foreground-color-hover: $gl-button-confirm-primary-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the hover state.
734
+ $gl-button-confirm-primary-background-color-active: $gl-action-strong-confirm-background-color-active; // Used for the background of a confirm (positive) primary button in the active state.
735
+ $gl-button-confirm-primary-background-color-hover: $gl-action-strong-confirm-background-color-hover; // Used for the background of a confirm (positive) primary button in the hover state.
736
+ $gl-button-confirm-primary-background-color-default: $gl-action-strong-confirm-background-color-default; // Used for the background of a confirm (positive) primary button in the default state.
737
+ $gl-button-confirm-primary-foreground-color-default: $gl-action-strong-confirm-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the default state.
732
738
  $gl-button-default-tertiary-border-color-default: $gl-action-neutral-border-color-default; // Used for the border of a default borderless, tertiary button in the default state.
733
739
  $gl-button-default-tertiary-background-color-focus: $gl-action-neutral-background-color-focus; // Used for the background of a default borderless, tertiary button in the focus state.
734
740
  $gl-button-default-tertiary-foreground-color-default: $gl-action-neutral-foreground-color-default; // Used for the foreground of a default borderless, tertiary button in the default state.
@@ -758,6 +764,12 @@ $gl-badge-neutral-background-color-hover: $gl-badge-neutral-background-color-def
758
764
  $gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a muted badge in the focus state.
759
765
  $gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a muted badge in the focus state.
760
766
  $gl-badge-muted-background-color-hover: $gl-badge-muted-background-color-default; // Used for the background of a muted badge in the hover state.
767
+ $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
768
+ $gl-action-strong-neutral-foreground-color-hover: $gl-action-strong-neutral-foreground-color-default; // Used for the foreground of a strong neutral action in the hover state.
769
+ $gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.
770
+ $gl-action-strong-confirm-border-color-hover: $gl-action-strong-confirm-border-color-default; // Used for the border of a strong confirm action in the hover state.
771
+ $gl-action-strong-confirm-foreground-color-hover: $gl-action-strong-confirm-foreground-color-default; // Used for the foreground of a strong confirm action in the hover state.
772
+ $gl-action-strong-confirm-background-color-focus: $gl-action-strong-confirm-background-color-hover; // Used for the background of a strong confirm action in the focus state.
761
773
  $gl-action-danger-border-color-active: $gl-action-danger-border-color-default; // Used for the border of a danger action in the active state.
762
774
  $gl-action-danger-border-color-focus: $gl-action-danger-border-color-default; // Used for the border of a danger action in the focus state.
763
775
  $gl-action-danger-border-color-hover: $gl-action-danger-border-color-default; // Used for the border of a danger action in the hover state.
@@ -789,6 +801,8 @@ $gl-button-confirm-tertiary-border-color-active: $gl-action-confirm-border-color
789
801
  $gl-button-confirm-tertiary-border-color-focus: $gl-action-confirm-border-color-focus; // Used for the border of a borderless, tertiary confirm (positive) button in the focus state.
790
802
  $gl-button-confirm-tertiary-border-color-hover: $gl-action-confirm-border-color-hover; // Used for the border of a borderless, tertiary confirm (positive) button in the hover state.
791
803
  $gl-button-confirm-tertiary-foreground-color-focus: $gl-action-confirm-foreground-color-focus; // Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state.
804
+ $gl-button-confirm-primary-background-color-focus: $gl-action-strong-confirm-background-color-focus; // Used for the background of a confirm (positive) primary button in the focus state.
805
+ $gl-button-confirm-primary-foreground-color-hover: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a confirm (positive) primary button in the hover state.
792
806
  $gl-button-default-tertiary-border-color-active: $gl-action-neutral-border-color-active; // Used for the border of a default borderless, tertiary button in the active state.
793
807
  $gl-button-default-tertiary-border-color-focus: $gl-action-neutral-border-color-focus; // Used for the border of a default borderless, tertiary button in the focus state.
794
808
  $gl-button-default-tertiary-border-color-hover: $gl-action-neutral-border-color-hover; // Used for the border of a default borderless, tertiary button in the hover state.
@@ -802,3 +816,13 @@ $gl-badge-success-background-color-focus: $gl-badge-success-background-color-hov
802
816
  $gl-badge-info-background-color-focus: $gl-badge-info-background-color-hover; // Used for the background of an informational badge in the focus state.
803
817
  $gl-badge-neutral-background-color-focus: $gl-badge-neutral-background-color-hover; // Used for the background of a neutral badge in the focus state.
804
818
  $gl-badge-muted-background-color-focus: $gl-badge-muted-background-color-hover; // Used for the background of a muted badge in the focus state.
819
+ $gl-action-strong-neutral-border-color-focus: $gl-action-strong-neutral-border-color-hover; // Used for the border of a strong neutral action in the focus state.
820
+ $gl-action-strong-neutral-foreground-color-focus: $gl-action-strong-neutral-foreground-color-hover; // Used for the foreground of a strong neutral action in the focus state.
821
+ $gl-action-strong-confirm-border-color-focus: $gl-action-strong-confirm-border-color-hover; // Used for the border of a strong confirm action in the focus state.
822
+ $gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a strong confirm action in the focus state.
823
+ $gl-button-confirm-primary-foreground-color-focus: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a confirm (positive) primary button in the focus state.
824
+ $gl-action-strong-neutral-border-color-active: $gl-action-strong-neutral-border-color-focus; // Used for the border of a strong neutral action in the active state.
825
+ $gl-action-strong-neutral-foreground-color-active: $gl-action-strong-neutral-foreground-color-focus; // Used for the foreground of a strong neutral action in the active state.
826
+ $gl-action-strong-confirm-border-color-active: $gl-action-strong-confirm-border-color-focus; // Used for the border of a strong confirm action in the active state.
827
+ $gl-action-strong-confirm-foreground-color-active: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a strong confirm action in the active state.
828
+ $gl-button-confirm-primary-foreground-color-active: $gl-action-strong-confirm-foreground-color-active; // Used for the foreground of a confirm (positive) primary button in the active state.
package/src/tokens/build/scss/_tokens.scss CHANGED
@@ -555,10 +555,6 @@ $gl-button-confirm-secondary-foreground-color-default: $gl-color-blue-500; // Us
555
555
  $gl-button-confirm-primary-border-color-active: $gl-color-blue-900; // Used for the border of a confirm (positive) primary button in the active state.
556
556
  $gl-button-confirm-primary-border-color-hover: $gl-color-blue-800; // Used for the border of a confirm (positive) primary button in the hover state.
557
557
  $gl-button-confirm-primary-border-color-default: $gl-color-blue-600; // Used for the border of a confirm (positive) primary button in the default state.
558
- $gl-button-confirm-primary-background-color-active: $gl-color-blue-700; // Used for the background of a confirm (positive) primary button in the active state.
559
- $gl-button-confirm-primary-background-color-hover: $gl-color-blue-600; // Used for the background of a confirm (positive) primary button in the hover state.
560
- $gl-button-confirm-primary-background-color-default: $gl-color-blue-500; // Used for the background of a confirm (positive) primary button in the default state.
561
- $gl-button-confirm-primary-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a confirm (positive) primary button in the default state.
562
558
  $gl-button-default-tertiary-background-color-active: $gl-action-neutral-background-color-active; // Used for the background of a default borderless, tertiary button in the active state.
563
559
  $gl-button-default-tertiary-background-color-hover: $gl-action-neutral-background-color-hover; // Used for the background of a default borderless, tertiary button in the hover state.
564
560
  $gl-button-default-tertiary-background-color-default: $gl-action-neutral-background-color-default; // Used for the background of a default borderless, tertiary button in the default state.
@@ -572,9 +568,9 @@ $gl-button-default-primary-foreground-color-default: $gl-color-neutral-800; // U
572
568
  $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
573
569
  $gl-banner-promo-background-color: $gl-color-neutral-10; // Used as background for the default banner type.
574
570
  $gl-banner-intro-border-color: $gl-color-blue-300; // Used to compliment the info banner.
575
- $gl-badge-tier-icon-color-active: $gl-color-purple-700; // Used for the icon of a tier related badge in the active state.
576
- $gl-badge-tier-icon-color-hover: $gl-color-purple-600; // Used for the icon of a tier related badge in the hover state.
577
- $gl-badge-tier-icon-color-default: $gl-color-purple-500; // Used for the icon of a tier related badge when static or the default state when linked.
571
+ $gl-badge-tier-icon-color-active: $gl-color-purple-900; // Used for the icon of a tier related badge in the active state.
572
+ $gl-badge-tier-icon-color-hover: $gl-color-purple-800; // Used for the icon of a tier related badge in the hover state.
573
+ $gl-badge-tier-icon-color-default: $gl-color-purple-700; // Used for the icon of a tier related badge when static or the default state when linked.
578
574
  $gl-badge-tier-text-color-active: $gl-color-purple-900; // Used for the text of a tier related badge in the active state.
579
575
  $gl-badge-tier-text-color-hover: $gl-color-purple-800; // Used for the text of a tier related badge in the hover state.
580
576
  $gl-badge-tier-text-color-default: $gl-color-purple-700; // Used for the text of a tier related badge when static or the default state when linked.
@@ -584,9 +580,9 @@ $gl-badge-tier-border-color-hover: $gl-color-purple-200; // Used for the border
584
580
  $gl-badge-tier-border-color-default: $gl-color-alpha-0; // Used for the border of a tier related badge when static or the default state when linked.
585
581
  $gl-badge-tier-background-color-active: $gl-color-purple-200; // Used for the background of a tier related badge in the active state.
586
582
  $gl-badge-tier-background-color-default: $gl-color-purple-100; // Used for the background of a tier related badge when static or the default state when linked.
587
- $gl-badge-danger-icon-color-active: $gl-color-red-700; // Used for the icon of a danger badge in the active state.
588
- $gl-badge-danger-icon-color-hover: $gl-color-red-600; // Used for the icon of a danger badge in the hover state.
589
- $gl-badge-danger-icon-color-default: $gl-color-red-500; // Used for the icon of a danger badge when static or the default state when linked.
583
+ $gl-badge-danger-icon-color-active: $gl-color-red-900; // Used for the icon of a danger badge in the active state.
584
+ $gl-badge-danger-icon-color-hover: $gl-color-red-800; // Used for the icon of a danger badge in the hover state.
585
+ $gl-badge-danger-icon-color-default: $gl-color-red-700; // Used for the icon of a danger badge when static or the default state when linked.
590
586
  $gl-badge-danger-text-color-active: $gl-color-red-900; // Used for the text of a danger badge in the active state.
591
587
  $gl-badge-danger-text-color-hover: $gl-color-red-800; // Used for the text of a danger badge in the hover state.
592
588
  $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.
@@ -673,6 +669,16 @@ $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disab
673
669
  $gl-background-color-strong: $gl-color-neutral-50; // Used to make the background easily stand out from the default.
674
670
  $gl-background-color-subtle: $gl-color-neutral-10; // Used to slightly differentiate the background from the default.
675
671
  $gl-background-color-default: $gl-color-neutral-0; // Used for the default background color.
672
+ $gl-action-strong-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a strong neutral action in the default state.
673
+ $gl-action-strong-neutral-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a strong neutral action in the default state.
674
+ $gl-action-strong-neutral-background-color-active: $gl-color-neutral-800; // Used for the background of a strong neutral action in the active state.
675
+ $gl-action-strong-neutral-background-color-hover: $gl-color-neutral-700; // Used for the background of a strong neutral action in the hover state.
676
+ $gl-action-strong-neutral-background-color-default: $gl-color-neutral-600; // Used for the background of a strong neutral action in the default state.
677
+ $gl-action-strong-confirm-border-color-default: $gl-color-alpha-0; // Used for the border of a strong confirm action in the default state.
678
+ $gl-action-strong-confirm-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a strong confirm action in the default state.
679
+ $gl-action-strong-confirm-background-color-active: $gl-color-blue-700; // Used for the background of a strong confirm action in the active state.
680
+ $gl-action-strong-confirm-background-color-hover: $gl-color-blue-600; // Used for the background of a strong confirm action in the hover state.
681
+ $gl-action-strong-confirm-background-color-default: $gl-color-blue-500; // Used for the background of a strong confirm action in the default state.
676
682
  $gl-action-danger-border-color-default: $gl-color-alpha-0; // Used for the border of a danger action in the default state.
677
683
  $gl-action-danger-background-color-focus: $gl-action-danger-background-color-hover; // Used for the background of a danger (destructive) action in the focus state.
678
684
  $gl-action-danger-foreground-color-active: $gl-color-red-900; // Used for the foreground of a danger (destructive) action in the active state.
@@ -725,10 +731,10 @@ $gl-button-confirm-secondary-border-color-focus: $gl-button-confirm-secondary-bo
725
731
  $gl-button-confirm-secondary-background-color-focus: $gl-button-confirm-secondary-background-color-hover; // Used for the background of an outlined confirm (positive) button in the focus state.
726
732
  $gl-button-confirm-secondary-foreground-color-focus: $gl-button-confirm-secondary-foreground-color-hover; // Used for the foreground of a confirm (positive) button in the focus state.
727
733
  $gl-button-confirm-primary-border-color-focus: $gl-button-confirm-primary-border-color-hover; // Used for the border of a confirm (positive) primary button in the focus state.
728
- $gl-button-confirm-primary-background-color-focus: $gl-button-confirm-primary-background-color-hover; // Used for the background of a confirm (positive) primary button in the focus state.
729
- $gl-button-confirm-primary-foreground-color-active: $gl-button-confirm-primary-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the active state.
730
- $gl-button-confirm-primary-foreground-color-focus: $gl-button-confirm-primary-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the focus state.
731
- $gl-button-confirm-primary-foreground-color-hover: $gl-button-confirm-primary-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the hover state.
734
+ $gl-button-confirm-primary-background-color-active: $gl-action-strong-confirm-background-color-active; // Used for the background of a confirm (positive) primary button in the active state.
735
+ $gl-button-confirm-primary-background-color-hover: $gl-action-strong-confirm-background-color-hover; // Used for the background of a confirm (positive) primary button in the hover state.
736
+ $gl-button-confirm-primary-background-color-default: $gl-action-strong-confirm-background-color-default; // Used for the background of a confirm (positive) primary button in the default state.
737
+ $gl-button-confirm-primary-foreground-color-default: $gl-action-strong-confirm-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the default state.
732
738
  $gl-button-default-tertiary-border-color-default: $gl-action-neutral-border-color-default; // Used for the border of a default borderless, tertiary button in the default state.
733
739
  $gl-button-default-tertiary-background-color-focus: $gl-action-neutral-background-color-focus; // Used for the background of a default borderless, tertiary button in the focus state.
734
740
  $gl-button-default-tertiary-foreground-color-default: $gl-action-neutral-foreground-color-default; // Used for the foreground of a default borderless, tertiary button in the default state.
@@ -758,6 +764,12 @@ $gl-badge-neutral-background-color-hover: $gl-badge-neutral-background-color-def
758
764
  $gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a muted badge in the focus state.
759
765
  $gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a muted badge in the focus state.
760
766
  $gl-badge-muted-background-color-hover: $gl-badge-muted-background-color-default; // Used for the background of a muted badge in the hover state.
767
+ $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
768
+ $gl-action-strong-neutral-foreground-color-hover: $gl-action-strong-neutral-foreground-color-default; // Used for the foreground of a strong neutral action in the hover state.
769
+ $gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.
770
+ $gl-action-strong-confirm-border-color-hover: $gl-action-strong-confirm-border-color-default; // Used for the border of a strong confirm action in the hover state.
771
+ $gl-action-strong-confirm-foreground-color-hover: $gl-action-strong-confirm-foreground-color-default; // Used for the foreground of a strong confirm action in the hover state.
772
+ $gl-action-strong-confirm-background-color-focus: $gl-action-strong-confirm-background-color-hover; // Used for the background of a strong confirm action in the focus state.
761
773
  $gl-action-danger-border-color-active: $gl-action-danger-border-color-default; // Used for the border of a danger action in the active state.
762
774
  $gl-action-danger-border-color-focus: $gl-action-danger-border-color-default; // Used for the border of a danger action in the focus state.
763
775
  $gl-action-danger-border-color-hover: $gl-action-danger-border-color-default; // Used for the border of a danger action in the hover state.
@@ -789,6 +801,8 @@ $gl-button-confirm-tertiary-border-color-active: $gl-action-confirm-border-color
789
801
  $gl-button-confirm-tertiary-border-color-focus: $gl-action-confirm-border-color-focus; // Used for the border of a borderless, tertiary confirm (positive) button in the focus state.
790
802
  $gl-button-confirm-tertiary-border-color-hover: $gl-action-confirm-border-color-hover; // Used for the border of a borderless, tertiary confirm (positive) button in the hover state.
791
803
  $gl-button-confirm-tertiary-foreground-color-focus: $gl-action-confirm-foreground-color-focus; // Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state.
804
+ $gl-button-confirm-primary-background-color-focus: $gl-action-strong-confirm-background-color-focus; // Used for the background of a confirm (positive) primary button in the focus state.
805
+ $gl-button-confirm-primary-foreground-color-hover: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a confirm (positive) primary button in the hover state.
792
806
  $gl-button-default-tertiary-border-color-active: $gl-action-neutral-border-color-active; // Used for the border of a default borderless, tertiary button in the active state.
793
807
  $gl-button-default-tertiary-border-color-focus: $gl-action-neutral-border-color-focus; // Used for the border of a default borderless, tertiary button in the focus state.
794
808
  $gl-button-default-tertiary-border-color-hover: $gl-action-neutral-border-color-hover; // Used for the border of a default borderless, tertiary button in the hover state.
@@ -802,3 +816,13 @@ $gl-badge-success-background-color-focus: $gl-badge-success-background-color-hov
802
816
  $gl-badge-info-background-color-focus: $gl-badge-info-background-color-hover; // Used for the background of an informational badge in the focus state.
803
817
  $gl-badge-neutral-background-color-focus: $gl-badge-neutral-background-color-hover; // Used for the background of a neutral badge in the focus state.
804
818
  $gl-badge-muted-background-color-focus: $gl-badge-muted-background-color-hover; // Used for the background of a muted badge in the focus state.
819
+ $gl-action-strong-neutral-border-color-focus: $gl-action-strong-neutral-border-color-hover; // Used for the border of a strong neutral action in the focus state.
820
+ $gl-action-strong-neutral-foreground-color-focus: $gl-action-strong-neutral-foreground-color-hover; // Used for the foreground of a strong neutral action in the focus state.
821
+ $gl-action-strong-confirm-border-color-focus: $gl-action-strong-confirm-border-color-hover; // Used for the border of a strong confirm action in the focus state.
822
+ $gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a strong confirm action in the focus state.
823
+ $gl-button-confirm-primary-foreground-color-focus: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a confirm (positive) primary button in the focus state.
824
+ $gl-action-strong-neutral-border-color-active: $gl-action-strong-neutral-border-color-focus; // Used for the border of a strong neutral action in the active state.
825
+ $gl-action-strong-neutral-foreground-color-active: $gl-action-strong-neutral-foreground-color-focus; // Used for the foreground of a strong neutral action in the active state.
826
+ $gl-action-strong-confirm-border-color-active: $gl-action-strong-confirm-border-color-focus; // Used for the border of a strong confirm action in the active state.
827
+ $gl-action-strong-confirm-foreground-color-active: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a strong confirm action in the active state.
828
+ $gl-button-confirm-primary-foreground-color-active: $gl-action-strong-confirm-foreground-color-active; // Used for the foreground of a confirm (positive) primary button in the active state.
package/src/tokens/build/scss/_tokens_custom_properties.scss CHANGED
@@ -42,6 +42,30 @@ $gl-action-danger-border-color-default: var(--gl-action-danger-border-color-defa
42
42
  $gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-hover);
43
43
  $gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-focus);
44
44
  $gl-action-danger-border-color-active: var(--gl-action-danger-border-color-active);
45
+ $gl-action-strong-confirm-background-color-default: var(--gl-action-strong-confirm-background-color-default);
46
+ $gl-action-strong-confirm-background-color-hover: var(--gl-action-strong-confirm-background-color-hover);
47
+ $gl-action-strong-confirm-background-color-focus: var(--gl-action-strong-confirm-background-color-focus);
48
+ $gl-action-strong-confirm-background-color-active: var(--gl-action-strong-confirm-background-color-active);
49
+ $gl-action-strong-confirm-foreground-color-default: var(--gl-action-strong-confirm-foreground-color-default);
50
+ $gl-action-strong-confirm-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-hover);
51
+ $gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus);
52
+ $gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-active);
53
+ $gl-action-strong-confirm-border-color-default: var(--gl-action-strong-confirm-border-color-default);
54
+ $gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-hover);
55
+ $gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-focus);
56
+ $gl-action-strong-confirm-border-color-active: var(--gl-action-strong-confirm-border-color-active);
57
+ $gl-action-strong-neutral-background-color-default: var(--gl-action-strong-neutral-background-color-default);
58
+ $gl-action-strong-neutral-background-color-hover: var(--gl-action-strong-neutral-background-color-hover);
59
+ $gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-focus);
60
+ $gl-action-strong-neutral-background-color-active: var(--gl-action-strong-neutral-background-color-active);
61
+ $gl-action-strong-neutral-foreground-color-default: var(--gl-action-strong-neutral-foreground-color-default);
62
+ $gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-hover);
63
+ $gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-focus);
64
+ $gl-action-strong-neutral-foreground-color-active: var(--gl-action-strong-neutral-foreground-color-active);
65
+ $gl-action-strong-neutral-border-color-default: var(--gl-action-strong-neutral-border-color-default);
66
+ $gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-hover);
67
+ $gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-focus);
68
+ $gl-action-strong-neutral-border-color-active: var(--gl-action-strong-neutral-border-color-active);
45
69
  $gl-background-color-default: var(--gl-background-color-default);
46
70
  $gl-background-color-subtle: var(--gl-background-color-subtle);
47
71
  $gl-background-color-strong: var(--gl-background-color-strong);