@gitlab/ui 108.5.0 → 108.7.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 (29) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/components/charts/stacked_column/stacked_column.js +37 -27
  3. package/dist/index.css +2 -2
  4. package/dist/index.css.map +1 -1
  5. package/dist/tokens/build/js/tokens.dark.js +12 -12
  6. package/dist/tokens/build/js/tokens.js +1 -1
  7. package/dist/tokens/css/tokens.css +1 -1
  8. package/dist/tokens/css/tokens.dark.css +11 -11
  9. package/dist/tokens/js/tokens.dark.js +12 -12
  10. package/dist/tokens/js/tokens.js +1 -1
  11. package/dist/tokens/json/tokens.dark.json +47 -23
  12. package/dist/tokens/json/tokens.json +36 -12
  13. package/dist/tokens/scss/_tokens.dark.scss +11 -11
  14. package/dist/tokens/scss/_tokens.scss +1 -1
  15. package/dist/utils/charts/config.js +2 -1
  16. package/package.json +1 -1
  17. package/src/components/base/button/button.scss +32 -1
  18. package/src/components/base/button_group/button_group.scss +7 -7
  19. package/src/components/charts/stacked_column/stacked_column.vue +36 -34
  20. package/src/tokens/build/css/tokens.css +1 -1
  21. package/src/tokens/build/css/tokens.dark.css +11 -11
  22. package/src/tokens/build/js/tokens.dark.js +12 -12
  23. package/src/tokens/build/js/tokens.js +1 -1
  24. package/src/tokens/build/json/tokens.dark.json +47 -23
  25. package/src/tokens/build/json/tokens.json +36 -12
  26. package/src/tokens/build/scss/_tokens.dark.scss +11 -11
  27. package/src/tokens/build/scss/_tokens.scss +1 -1
  28. package/src/tokens/contextual/button.tokens.json +35 -11
  29. package/src/utils/charts/config.js +2 -1
package/src/tokens/build/json/tokens.json CHANGED
@@ -12983,7 +12983,10 @@
12983
12983
  "filePath": "src/tokens/contextual/button.tokens.json",
12984
12984
  "isSource": true,
12985
12985
  "original": {
12986
- "$value": "{button.default.primary.foreground.color.default}",
12986
+ "$value": {
12987
+ "default": "{button.default.primary.foreground.color.default}",
12988
+ "dark": "{color.neutral.900}"
12989
+ },
12987
12990
  "$type": "color",
12988
12991
  "$description": "Used for the foreground of a selected button in the default state."
12989
12992
  },
@@ -13004,7 +13007,10 @@
13004
13007
  "filePath": "src/tokens/contextual/button.tokens.json",
13005
13008
  "isSource": true,
13006
13009
  "original": {
13007
- "$value": "{button.default.primary.foreground.color.hover}",
13010
+ "$value": {
13011
+ "default": "{button.default.primary.foreground.color.hover}",
13012
+ "dark": "{color.neutral.950}"
13013
+ },
13008
13014
  "$type": "color",
13009
13015
  "$description": "Used for the foreground of a selected button in the hover state."
13010
13016
  },
@@ -13025,7 +13031,10 @@
13025
13031
  "filePath": "src/tokens/contextual/button.tokens.json",
13026
13032
  "isSource": true,
13027
13033
  "original": {
13028
- "$value": "{button.default.primary.foreground.color.focus}",
13034
+ "$value": {
13035
+ "default": "{button.default.primary.foreground.color.focus}",
13036
+ "dark": "{color.neutral.950}"
13037
+ },
13029
13038
  "$type": "color",
13030
13039
  "$description": "Used for the foreground of a selected button in the focus state."
13031
13040
  },
@@ -13046,7 +13055,10 @@
13046
13055
  "filePath": "src/tokens/contextual/button.tokens.json",
13047
13056
  "isSource": true,
13048
13057
  "original": {
13049
- "$value": "{button.default.primary.foreground.color.active}",
13058
+ "$value": {
13059
+ "default": "{button.default.primary.foreground.color.active}",
13060
+ "dark": "{color.neutral.950}"
13061
+ },
13050
13062
  "$type": "color",
13051
13063
  "$description": "Used for the foreground of a selected button in the active state."
13052
13064
  },
@@ -13065,13 +13077,16 @@
13065
13077
  "background": {
13066
13078
  "color": {
13067
13079
  "default": {
13068
- "$value": "#fff",
13080
+ "$value": "#ececef",
13069
13081
  "$type": "color",
13070
13082
  "$description": "Used for the background of a selected button in the default state.",
13071
13083
  "filePath": "src/tokens/contextual/button.tokens.json",
13072
13084
  "isSource": true,
13073
13085
  "original": {
13074
- "$value": "{button.default.primary.background.color.default}",
13086
+ "$value": {
13087
+ "default": "{color.neutral.50}",
13088
+ "dark": "{color.neutral.300}"
13089
+ },
13075
13090
  "$type": "color",
13076
13091
  "$description": "Used for the background of a selected button in the default state."
13077
13092
  },
@@ -13092,7 +13107,10 @@
13092
13107
  "filePath": "src/tokens/contextual/button.tokens.json",
13093
13108
  "isSource": true,
13094
13109
  "original": {
13095
- "$value": "{button.default.primary.background.color.hover}",
13110
+ "$value": {
13111
+ "default": "{button.default.primary.background.color.hover}",
13112
+ "dark": "{color.neutral.200}"
13113
+ },
13096
13114
  "$type": "color",
13097
13115
  "$description": "Used for the background of a selected button in the hover state."
13098
13116
  },
@@ -13113,7 +13131,10 @@
13113
13131
  "filePath": "src/tokens/contextual/button.tokens.json",
13114
13132
  "isSource": true,
13115
13133
  "original": {
13116
- "$value": "{button.default.primary.background.color.focus}",
13134
+ "$value": {
13135
+ "default": "{button.default.primary.background.color.focus}",
13136
+ "dark": "{color.neutral.200}"
13137
+ },
13117
13138
  "$type": "color",
13118
13139
  "$description": "Used for the background of a selected button in the focus state."
13119
13140
  },
@@ -13134,7 +13155,10 @@
13134
13155
  "filePath": "src/tokens/contextual/button.tokens.json",
13135
13156
  "isSource": true,
13136
13157
  "original": {
13137
- "$value": "{button.default.primary.background.color.active}",
13158
+ "$value": {
13159
+ "default": "{button.default.primary.background.color.active}",
13160
+ "dark": "{color.neutral.400}"
13161
+ },
13138
13162
  "$type": "color",
13139
13163
  "$description": "Used for the background of a selected button in the active state."
13140
13164
  },
@@ -13161,7 +13185,7 @@
13161
13185
  "original": {
13162
13186
  "$value": {
13163
13187
  "default": "{color.neutral.300}",
13164
- "dark": "{color.neutral.600}"
13188
+ "dark": "{color.alpha.0}"
13165
13189
  },
13166
13190
  "$type": "color",
13167
13191
  "$description": "Used for the border of a selected button in the default state."
@@ -13185,7 +13209,7 @@
13185
13209
  "original": {
13186
13210
  "$value": {
13187
13211
  "default": "{color.neutral.400}",
13188
- "dark": "{color.neutral.500}"
13212
+ "dark": "{color.alpha.0}"
13189
13213
  },
13190
13214
  "$type": "color",
13191
13215
  "$description": "Used for the border of a selected button in the hover state."
@@ -13230,7 +13254,7 @@
13230
13254
  "original": {
13231
13255
  "$value": {
13232
13256
  "default": "{color.neutral.600}",
13233
- "dark": "{color.neutral.300}"
13257
+ "dark": "{color.alpha.0}"
13234
13258
  },
13235
13259
  "$type": "color",
13236
13260
  "$description": "Used for the border of a selected button in the active state."
package/src/tokens/build/scss/_tokens.dark.scss CHANGED
@@ -741,9 +741,10 @@ $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-300; // Used for the border of a dashed button in the active state.
744
- $gl-button-selected-border-color-default: $gl-color-neutral-600; // Used for the border of a selected button in the default state.
745
- $gl-button-selected-border-color-hover: $gl-color-neutral-500; // Used for the border of a selected button in the hover state.
746
- $gl-button-selected-border-color-active: $gl-color-neutral-300; // Used for the border of a selected button in the active state.
744
+ $gl-button-selected-background-color-default: $gl-color-neutral-300; // Used for the background of a selected button in the default state.
745
+ $gl-button-selected-border-color-default: $gl-color-alpha-0; // Used for the border of a selected button in the default state.
746
+ $gl-button-selected-border-color-hover: $gl-color-alpha-0; // Used for the border of a selected button in the hover state.
747
+ $gl-button-selected-border-color-active: $gl-color-alpha-0; // Used for the border of a selected button in the active state.
747
748
  $gl-button-disabled-foreground-color: $gl-color-neutral-400; // Used for the foreground of a disabled button.
748
749
  $gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); // Used for the background of a disabled button.
749
750
  $gl-button-disabled-border-color: $gl-color-alpha-0; // Used for the border of a disabled button.
@@ -954,10 +955,9 @@ $gl-button-danger-tertiary-border-color-default: $gl-action-danger-border-color-
954
955
  $gl-button-dashed-border-color-hover: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the hover state.
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
- $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
- $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
- $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.
958
+ $gl-button-selected-foreground-color-default: $gl-color-neutral-900; // Used for the foreground of a selected button in the default state.
959
+ $gl-button-selected-background-color-hover: $gl-color-neutral-200; // Used for the background of a selected button in the hover state.
960
+ $gl-button-selected-background-color-active: $gl-color-neutral-400; // 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.
962
962
  $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
963
963
  $gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
@@ -1021,10 +1021,10 @@ $gl-button-danger-tertiary-border-color-active: $gl-action-danger-border-color-a
1021
1021
  $gl-button-link-text-color-hover: $gl-button-link-text-color-default; // Used for the text of a link button in the hover state.
1022
1022
  $gl-button-link-text-color-focus: $gl-button-link-text-color-default; // Used for the text of a link button in the focus state.
1023
1023
  $gl-button-link-text-color-active: $gl-button-link-text-color-default; // Used for the text of a link button in the active state.
1024
- $gl-button-selected-foreground-color-hover: $gl-button-default-primary-foreground-color-hover; // Used for the foreground of a selected button in the hover state.
1025
- $gl-button-selected-foreground-color-focus: $gl-button-default-primary-foreground-color-focus; // Used for the foreground of a selected button in the focus state.
1026
- $gl-button-selected-foreground-color-active: $gl-button-default-primary-foreground-color-active; // Used for the foreground of a selected button in the active state.
1027
- $gl-button-selected-background-color-focus: $gl-button-default-primary-background-color-focus; // Used for the background of a selected button in the focus state.
1024
+ $gl-button-selected-foreground-color-hover: $gl-color-neutral-950; // Used for the foreground of a selected button in the hover state.
1025
+ $gl-button-selected-foreground-color-focus: $gl-color-neutral-950; // Used for the foreground of a selected button in the focus state.
1026
+ $gl-button-selected-foreground-color-active: $gl-color-neutral-950; // Used for the foreground of a selected button in the active state.
1027
+ $gl-button-selected-background-color-focus: $gl-color-neutral-200; // Used for the background of a selected button in the focus state.
1028
1028
  $gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
1029
1029
  $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
1030
1030
  $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
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."
package/src/utils/charts/config.js CHANGED
@@ -469,7 +469,8 @@ export const getTooltipContent = (params = null, valueAxisName = null) => {
469
469
  };
470
470
  }
471
471
 
472
- return seriesData.reduce((acc, { value: [, yValue], seriesName, color }) => {
472
+ return seriesData.reduce((acc, { value, seriesName, color }) => {
473
+ const yValue = value[1];
473
474
  acc[seriesName] = { value: yValue, color };
474
475
  return acc;
475
476
  }, {});