@gitlab/ui 89.3.0 → 89.5.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 +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 +25 -1
  5. package/dist/tokens/build/js/tokens.js +25 -1
  6. package/dist/tokens/css/tokens.css +32 -8
  7. package/dist/tokens/css/tokens.dark.css +32 -8
  8. package/dist/tokens/js/tokens.dark.js +24 -0
  9. package/dist/tokens/js/tokens.js +24 -0
  10. package/dist/tokens/json/tokens.dark.json +584 -17
  11. package/dist/tokens/json/tokens.json +584 -17
  12. package/dist/tokens/scss/_tokens.dark.scss +32 -8
  13. package/dist/tokens/scss/_tokens.scss +32 -8
  14. package/dist/tokens/scss/_tokens_custom_properties.scss +24 -0
  15. package/package.json +4 -4
  16. package/src/scss/body.scss +4 -0
  17. package/src/scss/gitlab_ui.scss +3 -0
  18. package/src/scss/storybook.scss +1 -0
  19. package/src/scss/storybook_dark_mode.scss +0 -6
  20. package/src/tokens/action.tokens.json +171 -3
  21. package/src/tokens/build/css/tokens.css +32 -8
  22. package/src/tokens/build/css/tokens.dark.css +32 -8
  23. package/src/tokens/build/js/tokens.dark.js +24 -0
  24. package/src/tokens/build/js/tokens.js +24 -0
  25. package/src/tokens/build/json/tokens.dark.json +584 -17
  26. package/src/tokens/build/json/tokens.json +584 -17
  27. package/src/tokens/build/scss/_tokens.dark.scss +32 -8
  28. package/src/tokens/build/scss/_tokens.scss +32 -8
  29. package/src/tokens/build/scss/_tokens_custom_properties.scss +24 -0
  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.
@@ -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.
@@ -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);
package/src/tokens/contextual/button.tokens.json CHANGED
@@ -176,22 +176,22 @@
176
176
  "foreground": {
177
177
  "color": {
178
178
  "default": {
179
- "$value": "{color.neutral.0}",
179
+ "$value": "{action.strong.confirm.foreground.color.default}",
180
180
  "$type": "color",
181
181
  "$description": "Used for the foreground of a confirm (positive) primary button in the default state."
182
182
  },
183
183
  "hover": {
184
- "$value": "{button.confirm.primary.foreground.color.default}",
184
+ "$value": "{action.strong.confirm.foreground.color.hover}",
185
185
  "$type": "color",
186
186
  "$description": "Used for the foreground of a confirm (positive) primary button in the hover state."
187
187
  },
188
188
  "focus": {
189
- "$value": "{button.confirm.primary.foreground.color.default}",
189
+ "$value": "{action.strong.confirm.foreground.color.focus}",
190
190
  "$type": "color",
191
191
  "$description": "Used for the foreground of a confirm (positive) primary button in the focus state."
192
192
  },
193
193
  "active": {
194
- "$value": "{button.confirm.primary.foreground.color.default}",
194
+ "$value": "{action.strong.confirm.foreground.color.active}",
195
195
  "$type": "color",
196
196
  "$description": "Used for the foreground of a confirm (positive) primary button in the active state."
197
197
  }
@@ -200,31 +200,22 @@
200
200
  "background": {
201
201
  "color": {
202
202
  "default": {
203
- "$value": {
204
- "default": "{color.blue.500}",
205
- "dark": "{color.blue.400}"
206
- },
203
+ "$value": "{action.strong.confirm.background.color.default}",
207
204
  "$type": "color",
208
205
  "$description": "Used for the background of a confirm (positive) primary button in the default state."
209
206
  },
210
207
  "hover": {
211
- "$value": {
212
- "default": "{color.blue.600}",
213
- "dark": "{color.blue.300}"
214
- },
208
+ "$value": "{action.strong.confirm.background.color.hover}",
215
209
  "$type": "color",
216
210
  "$description": "Used for the background of a confirm (positive) primary button in the hover state."
217
211
  },
218
212
  "focus": {
219
- "$value": "{button.confirm.primary.background.color.hover}",
213
+ "$value": "{action.strong.confirm.background.color.focus}",
220
214
  "$type": "color",
221
215
  "$description": "Used for the background of a confirm (positive) primary button in the focus state."
222
216
  },
223
217
  "active": {
224
- "$value": {
225
- "default": "{color.blue.700}",
226
- "dark": "{color.blue.200}"
227
- },
218
+ "$value": "{action.strong.confirm.background.color.active}",
228
219
  "$type": "color",
229
220
  "$description": "Used for the background of a confirm (positive) primary button in the active state."
230
221
  }