@gitlab/ui 108.5.0 → 108.6.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 (25) hide show
  1. package/CHANGELOG.md +7 -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 +12 -12
  5. package/dist/tokens/build/js/tokens.js +1 -1
  6. package/dist/tokens/css/tokens.css +1 -1
  7. package/dist/tokens/css/tokens.dark.css +11 -11
  8. package/dist/tokens/js/tokens.dark.js +12 -12
  9. package/dist/tokens/js/tokens.js +1 -1
  10. package/dist/tokens/json/tokens.dark.json +47 -23
  11. package/dist/tokens/json/tokens.json +36 -12
  12. package/dist/tokens/scss/_tokens.dark.scss +11 -11
  13. package/dist/tokens/scss/_tokens.scss +1 -1
  14. package/package.json +1 -1
  15. package/src/components/base/button/button.scss +32 -1
  16. package/src/components/base/button_group/button_group.scss +7 -7
  17. package/src/tokens/build/css/tokens.css +1 -1
  18. package/src/tokens/build/css/tokens.dark.css +11 -11
  19. package/src/tokens/build/js/tokens.dark.js +12 -12
  20. package/src/tokens/build/js/tokens.js +1 -1
  21. package/src/tokens/build/json/tokens.dark.json +47 -23
  22. package/src/tokens/build/json/tokens.json +36 -12
  23. package/src/tokens/build/scss/_tokens.dark.scss +11 -11
  24. package/src/tokens/build/scss/_tokens.scss +1 -1
  25. package/src/tokens/contextual/button.tokens.json +35 -11
package/src/tokens/build/scss/_tokens.scss CHANGED
@@ -741,6 +741,7 @@ $gl-button-danger-tertiary-background-color-hover: $gl-action-danger-background-
741
741
  $gl-button-danger-tertiary-background-color-active: $gl-action-danger-background-color-active; // Used for the background of a borderless, tertiary danger (destructive) button in the active state.
742
742
  $gl-button-dashed-border-color-default: $gl-color-neutral-400; // Used for the border of a dashed button in the default state.
743
743
  $gl-button-dashed-border-color-active: $gl-color-neutral-600; // Used for the border of a dashed button in the active state.
744
+ $gl-button-selected-background-color-default: $gl-color-neutral-50; // Used for the background of a selected button in the default state.
744
745
  $gl-button-selected-border-color-default: $gl-color-neutral-300; // Used for the border of a selected button in the default state.
745
746
  $gl-button-selected-border-color-hover: $gl-color-neutral-400; // Used for the border of a selected button in the hover state.
746
747
  $gl-button-selected-border-color-active: $gl-color-neutral-600; // Used for the border of a selected button in the active state.
@@ -955,7 +956,6 @@ $gl-button-dashed-border-color-hover: $gl-button-dashed-border-color-default; //
955
956
  $gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the focus state.
956
957
  $gl-button-link-text-color-default: $gl-text-color-link; // Used for the text of a link button in the default state.
957
958
  $gl-button-selected-foreground-color-default: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a selected button in the default state.
958
- $gl-button-selected-background-color-default: $gl-button-default-primary-background-color-default; // Used for the background of a selected button in the default state.
959
959
  $gl-button-selected-background-color-hover: $gl-button-default-primary-background-color-hover; // Used for the background of a selected button in the hover state.
960
960
  $gl-button-selected-background-color-active: $gl-button-default-primary-background-color-active; // Used for the background of a selected button in the active state.
961
961
  $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
package/src/tokens/contextual/button.tokens.json CHANGED
@@ -768,22 +768,34 @@
768
768
  "foreground": {
769
769
  "color": {
770
770
  "default": {
771
- "$value": "{button.default.primary.foreground.color.default}",
771
+ "$value": {
772
+ "default": "{button.default.primary.foreground.color.default}",
773
+ "dark": "{color.neutral.900}"
774
+ },
772
775
  "$type": "color",
773
776
  "$description": "Used for the foreground of a selected button in the default state."
774
777
  },
775
778
  "hover": {
776
- "$value": "{button.default.primary.foreground.color.hover}",
779
+ "$value": {
780
+ "default": "{button.default.primary.foreground.color.hover}",
781
+ "dark": "{color.neutral.950}"
782
+ },
777
783
  "$type": "color",
778
784
  "$description": "Used for the foreground of a selected button in the hover state."
779
785
  },
780
786
  "focus": {
781
- "$value": "{button.default.primary.foreground.color.focus}",
787
+ "$value": {
788
+ "default": "{button.default.primary.foreground.color.focus}",
789
+ "dark": "{color.neutral.950}"
790
+ },
782
791
  "$type": "color",
783
792
  "$description": "Used for the foreground of a selected button in the focus state."
784
793
  },
785
794
  "active": {
786
- "$value": "{button.default.primary.foreground.color.active}",
795
+ "$value": {
796
+ "default": "{button.default.primary.foreground.color.active}",
797
+ "dark": "{color.neutral.950}"
798
+ },
787
799
  "$type": "color",
788
800
  "$description": "Used for the foreground of a selected button in the active state."
789
801
  }
@@ -792,22 +804,34 @@
792
804
  "background": {
793
805
  "color": {
794
806
  "default": {
795
- "$value": "{button.default.primary.background.color.default}",
807
+ "$value": {
808
+ "default": "{color.neutral.50}",
809
+ "dark": "{color.neutral.300}"
810
+ },
796
811
  "$type": "color",
797
812
  "$description": "Used for the background of a selected button in the default state."
798
813
  },
799
814
  "hover": {
800
- "$value": "{button.default.primary.background.color.hover}",
815
+ "$value": {
816
+ "default": "{button.default.primary.background.color.hover}",
817
+ "dark": "{color.neutral.200}"
818
+ },
801
819
  "$type": "color",
802
820
  "$description": "Used for the background of a selected button in the hover state."
803
821
  },
804
822
  "focus": {
805
- "$value": "{button.default.primary.background.color.focus}",
823
+ "$value": {
824
+ "default": "{button.default.primary.background.color.focus}",
825
+ "dark": "{color.neutral.200}"
826
+ },
806
827
  "$type": "color",
807
828
  "$description": "Used for the background of a selected button in the focus state."
808
829
  },
809
830
  "active": {
810
- "$value": "{button.default.primary.background.color.active}",
831
+ "$value": {
832
+ "default": "{button.default.primary.background.color.active}",
833
+ "dark": "{color.neutral.400}"
834
+ },
811
835
  "$type": "color",
812
836
  "$description": "Used for the background of a selected button in the active state."
813
837
  }
@@ -818,7 +842,7 @@
818
842
  "default": {
819
843
  "$value": {
820
844
  "default": "{color.neutral.300}",
821
- "dark": "{color.neutral.600}"
845
+ "dark": "{color.alpha.0}"
822
846
  },
823
847
  "$type": "color",
824
848
  "$description": "Used for the border of a selected button in the default state."
@@ -826,7 +850,7 @@
826
850
  "hover": {
827
851
  "$value": {
828
852
  "default": "{color.neutral.400}",
829
- "dark": "{color.neutral.500}"
853
+ "dark": "{color.alpha.0}"
830
854
  },
831
855
  "$type": "color",
832
856
  "$description": "Used for the border of a selected button in the hover state."
@@ -839,7 +863,7 @@
839
863
  "active": {
840
864
  "$value": {
841
865
  "default": "{color.neutral.600}",
842
- "dark": "{color.neutral.300}"
866
+ "dark": "{color.alpha.0}"
843
867
  },
844
868
  "$type": "color",
845
869
  "$description": "Used for the border of a selected button in the active state."