@gitlab/ui 108.5.0 → 108.7.0

package/dist/tokens/build/js/tokens.dark.js

@@ -609,18 +609,18 @@ const GL_BUTTON_LINK_TEXT_COLOR_DEFAULT = '#9dc7f1';
 const GL_BUTTON_LINK_TEXT_COLOR_HOVER = '#9dc7f1';
 const GL_BUTTON_LINK_TEXT_COLOR_FOCUS = '#9dc7f1';
 const GL_BUTTON_LINK_TEXT_COLOR_ACTIVE = '#9dc7f1';
-const GL_BUTTON_SELECTED_FOREGROUND_COLOR_DEFAULT = '#ececef';
-const GL_BUTTON_SELECTED_FOREGROUND_COLOR_HOVER = '#ececef';
-const GL_BUTTON_SELECTED_FOREGROUND_COLOR_FOCUS = '#ececef';
-const GL_BUTTON_SELECTED_FOREGROUND_COLOR_ACTIVE = '#ececef';
-const GL_BUTTON_SELECTED_BACKGROUND_COLOR_DEFAULT = 'rgba(137, 136, 141, 0.4)';
-const GL_BUTTON_SELECTED_BACKGROUND_COLOR_HOVER = 'rgba(137, 136, 141, 0.64)';
-const GL_BUTTON_SELECTED_BACKGROUND_COLOR_FOCUS = 'rgba(137, 136, 141, 0.64)';
-const GL_BUTTON_SELECTED_BACKGROUND_COLOR_ACTIVE = 'rgba(137, 136, 141, 0.32)';
-const GL_BUTTON_SELECTED_BORDER_COLOR_DEFAULT = '#626168';
-const GL_BUTTON_SELECTED_BORDER_COLOR_HOVER = '#737278';
-const GL_BUTTON_SELECTED_BORDER_COLOR_FOCUS = '#737278';
-const GL_BUTTON_SELECTED_BORDER_COLOR_ACTIVE = '#a4a3a8';
+const GL_BUTTON_SELECTED_FOREGROUND_COLOR_DEFAULT = '#28272d';
+const GL_BUTTON_SELECTED_FOREGROUND_COLOR_HOVER = '#18171d';
+const GL_BUTTON_SELECTED_FOREGROUND_COLOR_FOCUS = '#18171d';
+const GL_BUTTON_SELECTED_FOREGROUND_COLOR_ACTIVE = '#18171d';
+const GL_BUTTON_SELECTED_BACKGROUND_COLOR_DEFAULT = '#a4a3a8';
+const GL_BUTTON_SELECTED_BACKGROUND_COLOR_HOVER = '#bfbfc3';
+const GL_BUTTON_SELECTED_BACKGROUND_COLOR_FOCUS = '#bfbfc3';
+const GL_BUTTON_SELECTED_BACKGROUND_COLOR_ACTIVE = '#89888d';
+const GL_BUTTON_SELECTED_BORDER_COLOR_DEFAULT = 'transparent';
+const GL_BUTTON_SELECTED_BORDER_COLOR_HOVER = 'transparent';
+const GL_BUTTON_SELECTED_BORDER_COLOR_FOCUS = 'transparent';
+const GL_BUTTON_SELECTED_BORDER_COLOR_ACTIVE = 'transparent';
 const GL_BUTTON_DISABLED_FOREGROUND_COLOR = '#89888d';
 const GL_BUTTON_DISABLED_BACKGROUND_COLOR = 'rgba(137, 136, 141, 0.16)';
 const GL_BUTTON_DISABLED_BORDER_COLOR = 'transparent';

package/dist/tokens/build/js/tokens.js

@@ -613,7 +613,7 @@ const GL_BUTTON_SELECTED_FOREGROUND_COLOR_DEFAULT = '#3a383f';
 const GL_BUTTON_SELECTED_FOREGROUND_COLOR_HOVER = '#3a383f';
 const GL_BUTTON_SELECTED_FOREGROUND_COLOR_FOCUS = '#3a383f';
 const GL_BUTTON_SELECTED_FOREGROUND_COLOR_ACTIVE = '#3a383f';
-const GL_BUTTON_SELECTED_BACKGROUND_COLOR_DEFAULT = '#fff';
+const GL_BUTTON_SELECTED_BACKGROUND_COLOR_DEFAULT = '#ececef';
 const GL_BUTTON_SELECTED_BACKGROUND_COLOR_HOVER = '#ececef';
 const GL_BUTTON_SELECTED_BACKGROUND_COLOR_FOCUS = '#ececef';
 const GL_BUTTON_SELECTED_BACKGROUND_COLOR_ACTIVE = '#dcdcde';

package/dist/tokens/css/tokens.css

@@ -743,6 +743,7 @@
   --gl-button-danger-tertiary-background-color-active: var(--gl-action-danger-background-color-active); /* Used for the background of a borderless, tertiary danger (destructive) button in the active state. */
   --gl-button-dashed-border-color-default: var(--gl-color-neutral-400); /* Used for the border of a dashed button in the default state. */
   --gl-button-dashed-border-color-active: var(--gl-color-neutral-600); /* Used for the border of a dashed button in the active state. */
+  --gl-button-selected-background-color-default: var(--gl-color-neutral-50); /* Used for the background of a selected button in the default state. */
   --gl-button-selected-border-color-default: var(--gl-color-neutral-300); /* Used for the border of a selected button in the default state. */
   --gl-button-selected-border-color-hover: var(--gl-color-neutral-400); /* Used for the border of a selected button in the hover state. */
   --gl-button-selected-border-color-active: var(--gl-color-neutral-600); /* Used for the border of a selected button in the active state. */
@@ -957,7 +958,6 @@
   --gl-button-dashed-border-color-focus: var(--gl-button-dashed-border-color-default); /* Used for the border of a dashed button in the focus state. */
   --gl-button-link-text-color-default: var(--gl-text-color-link); /* Used for the text of a link button in the default state. */
   --gl-button-selected-foreground-color-default: var(--gl-button-default-primary-foreground-color-default); /* Used for the foreground of a selected button in the default state. */
-  --gl-button-selected-background-color-default: var(--gl-button-default-primary-background-color-default); /* Used for the background of a selected button in the default state. */
   --gl-button-selected-background-color-hover: var(--gl-button-default-primary-background-color-hover); /* Used for the background of a selected button in the hover state. */
   --gl-button-selected-background-color-active: var(--gl-button-default-primary-background-color-active); /* Used for the background of a selected button in the active state. */
   --gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-hover); /* Used for the border of a selected button in the focus state. */

package/dist/tokens/css/tokens.dark.css

@@ -743,9 +743,10 @@
   --gl-button-danger-tertiary-background-color-active: var(--gl-action-danger-background-color-active); /* Used for the background of a borderless, tertiary danger (destructive) button in the active state. */
   --gl-button-dashed-border-color-default: var(--gl-color-neutral-400); /* Used for the border of a dashed button in the default state. */
   --gl-button-dashed-border-color-active: var(--gl-color-neutral-300); /* Used for the border of a dashed button in the active state. */
-  --gl-button-selected-border-color-default: var(--gl-color-neutral-600); /* Used for the border of a selected button in the default state. */
-  --gl-button-selected-border-color-hover: var(--gl-color-neutral-500); /* Used for the border of a selected button in the hover state. */
-  --gl-button-selected-border-color-active: var(--gl-color-neutral-300); /* Used for the border of a selected button in the active state. */
+  --gl-button-selected-background-color-default: var(--gl-color-neutral-300); /* Used for the background of a selected button in the default state. */
+  --gl-button-selected-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a selected button in the default state. */
+  --gl-button-selected-border-color-hover: var(--gl-color-alpha-0); /* Used for the border of a selected button in the hover state. */
+  --gl-button-selected-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a selected button in the active state. */
   --gl-button-disabled-foreground-color: var(--gl-color-neutral-400); /* Used for the foreground of a disabled button. */
   --gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); /* Used for the background of a disabled button. */
   --gl-button-disabled-border-color: var(--gl-color-alpha-0); /* Used for the border of a disabled button. */
@@ -956,10 +957,9 @@
   --gl-button-dashed-border-color-hover: var(--gl-button-dashed-border-color-default); /* Used for the border of a dashed button in the hover state. */
   --gl-button-dashed-border-color-focus: var(--gl-button-dashed-border-color-default); /* Used for the border of a dashed button in the focus state. */
   --gl-button-link-text-color-default: var(--gl-text-color-link); /* Used for the text of a link button in the default state. */
-  --gl-button-selected-foreground-color-default: var(--gl-button-default-primary-foreground-color-default); /* Used for the foreground of a selected button in the default state. */
-  --gl-button-selected-background-color-default: var(--gl-button-default-primary-background-color-default); /* Used for the background of a selected button in the default state. */
-  --gl-button-selected-background-color-hover: var(--gl-button-default-primary-background-color-hover); /* Used for the background of a selected button in the hover state. */
-  --gl-button-selected-background-color-active: var(--gl-button-default-primary-background-color-active); /* Used for the background of a selected button in the active state. */
+  --gl-button-selected-foreground-color-default: var(--gl-color-neutral-900); /* Used for the foreground of a selected button in the default state. */
+  --gl-button-selected-background-color-hover: var(--gl-color-neutral-200); /* Used for the background of a selected button in the hover state. */
+  --gl-button-selected-background-color-active: var(--gl-color-neutral-400); /* Used for the background of a selected button in the active state. */
   --gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-hover); /* Used for the border of a selected button in the focus state. */
   --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /* Used for the datepicker date text color state indicators. */
   --gl-dropdown-background-color: var(--gl-background-color-overlap); /* Used for the background of a dropdown. */
@@ -1023,10 +1023,10 @@
   --gl-button-link-text-color-hover: var(--gl-button-link-text-color-default); /* Used for the text of a link button in the hover state. */
   --gl-button-link-text-color-focus: var(--gl-button-link-text-color-default); /* Used for the text of a link button in the focus state. */
   --gl-button-link-text-color-active: var(--gl-button-link-text-color-default); /* Used for the text of a link button in the active state. */
-  --gl-button-selected-foreground-color-hover: var(--gl-button-default-primary-foreground-color-hover); /* Used for the foreground of a selected button in the hover state. */
-  --gl-button-selected-foreground-color-focus: var(--gl-button-default-primary-foreground-color-focus); /* Used for the foreground of a selected button in the focus state. */
-  --gl-button-selected-foreground-color-active: var(--gl-button-default-primary-foreground-color-active); /* Used for the foreground of a selected button in the active state. */
-  --gl-button-selected-background-color-focus: var(--gl-button-default-primary-background-color-focus); /* Used for the background of a selected button in the focus state. */
+  --gl-button-selected-foreground-color-hover: var(--gl-color-neutral-950); /* Used for the foreground of a selected button in the hover state. */
+  --gl-button-selected-foreground-color-focus: var(--gl-color-neutral-950); /* Used for the foreground of a selected button in the focus state. */
+  --gl-button-selected-foreground-color-active: var(--gl-color-neutral-950); /* Used for the foreground of a selected button in the active state. */
+  --gl-button-selected-background-color-focus: var(--gl-color-neutral-200); /* Used for the background of a selected button in the focus state. */
   --gl-dropdown-option-text-color-hover: var(--gl-action-neutral-foreground-color-hover); /* Used for the text of a dropdown option in the hover state. */
   --gl-dropdown-option-text-color-focus: var(--gl-action-neutral-foreground-color-focus); /* Used for the text of a dropdown option in the focus state. */
   --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /* Used for the text of a dropdown option in the active state. */

package/dist/tokens/js/tokens.dark.js

@@ -609,18 +609,18 @@ export const GL_BUTTON_LINK_TEXT_COLOR_DEFAULT = '#9dc7f1';
 export const GL_BUTTON_LINK_TEXT_COLOR_HOVER = '#9dc7f1';
 export const GL_BUTTON_LINK_TEXT_COLOR_FOCUS = '#9dc7f1';
 export const GL_BUTTON_LINK_TEXT_COLOR_ACTIVE = '#9dc7f1';
-export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_DEFAULT = '#ececef';
-export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_HOVER = '#ececef';
-export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_FOCUS = '#ececef';
-export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_ACTIVE = '#ececef';
-export const GL_BUTTON_SELECTED_BACKGROUND_COLOR_DEFAULT = 'rgba(137, 136, 141, 0.4)';
-export const GL_BUTTON_SELECTED_BACKGROUND_COLOR_HOVER = 'rgba(137, 136, 141, 0.64)';
-export const GL_BUTTON_SELECTED_BACKGROUND_COLOR_FOCUS = 'rgba(137, 136, 141, 0.64)';
-export const GL_BUTTON_SELECTED_BACKGROUND_COLOR_ACTIVE = 'rgba(137, 136, 141, 0.32)';
-export const GL_BUTTON_SELECTED_BORDER_COLOR_DEFAULT = '#626168';
-export const GL_BUTTON_SELECTED_BORDER_COLOR_HOVER = '#737278';
-export const GL_BUTTON_SELECTED_BORDER_COLOR_FOCUS = '#737278';
-export const GL_BUTTON_SELECTED_BORDER_COLOR_ACTIVE = '#a4a3a8';
+export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_DEFAULT = '#28272d';
+export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_HOVER = '#18171d';
+export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_FOCUS = '#18171d';
+export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_ACTIVE = '#18171d';
+export const GL_BUTTON_SELECTED_BACKGROUND_COLOR_DEFAULT = '#a4a3a8';
+export const GL_BUTTON_SELECTED_BACKGROUND_COLOR_HOVER = '#bfbfc3';
+export const GL_BUTTON_SELECTED_BACKGROUND_COLOR_FOCUS = '#bfbfc3';
+export const GL_BUTTON_SELECTED_BACKGROUND_COLOR_ACTIVE = '#89888d';
+export const GL_BUTTON_SELECTED_BORDER_COLOR_DEFAULT = 'transparent';
+export const GL_BUTTON_SELECTED_BORDER_COLOR_HOVER = 'transparent';
+export const GL_BUTTON_SELECTED_BORDER_COLOR_FOCUS = 'transparent';
+export const GL_BUTTON_SELECTED_BORDER_COLOR_ACTIVE = 'transparent';
 export const GL_BUTTON_DISABLED_FOREGROUND_COLOR = '#89888d';
 export const GL_BUTTON_DISABLED_BACKGROUND_COLOR = 'rgba(137, 136, 141, 0.16)';
 export const GL_BUTTON_DISABLED_BORDER_COLOR = 'transparent';

package/dist/tokens/js/tokens.js

@@ -613,7 +613,7 @@ export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_DEFAULT = '#3a383f';
 export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_HOVER = '#3a383f';
 export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_FOCUS = '#3a383f';
 export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_ACTIVE = '#3a383f';
-export const GL_BUTTON_SELECTED_BACKGROUND_COLOR_DEFAULT = '#fff';
+export const GL_BUTTON_SELECTED_BACKGROUND_COLOR_DEFAULT = '#ececef';
 export const GL_BUTTON_SELECTED_BACKGROUND_COLOR_HOVER = '#ececef';
 export const GL_BUTTON_SELECTED_BACKGROUND_COLOR_FOCUS = '#ececef';
 export const GL_BUTTON_SELECTED_BACKGROUND_COLOR_ACTIVE = '#dcdcde';

package/dist/tokens/json/tokens.dark.json

@@ -12977,13 +12977,16 @@
       "foreground": {
         "color": {
           "default": {
-            "$value": "#ececef",
+            "$value": "#28272d",
             "$type": "color",
             "$description": "Used for the foreground of a selected button in the default state.",
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{button.default.primary.foreground.color.default}",
+              "$value": {
+                "default": "{button.default.primary.foreground.color.default}",
+                "dark": "{color.neutral.900}"
+              },
               "$type": "color",
               "$description": "Used for the foreground of a selected button in the default state."
             },
@@ -12998,13 +13001,16 @@
             ]
           },
           "hover": {
-            "$value": "#ececef",
+            "$value": "#18171d",
             "$type": "color",
             "$description": "Used for the foreground of a selected button in the hover state.",
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{button.default.primary.foreground.color.hover}",
+              "$value": {
+                "default": "{button.default.primary.foreground.color.hover}",
+                "dark": "{color.neutral.950}"
+              },
               "$type": "color",
               "$description": "Used for the foreground of a selected button in the hover state."
             },
@@ -13019,13 +13025,16 @@
             ]
           },
           "focus": {
-            "$value": "#ececef",
+            "$value": "#18171d",
             "$type": "color",
             "$description": "Used for the foreground of a selected button in the focus state.",
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{button.default.primary.foreground.color.focus}",
+              "$value": {
+                "default": "{button.default.primary.foreground.color.focus}",
+                "dark": "{color.neutral.950}"
+              },
               "$type": "color",
               "$description": "Used for the foreground of a selected button in the focus state."
             },
@@ -13040,13 +13049,16 @@
             ]
           },
           "active": {
-            "$value": "#ececef",
+            "$value": "#18171d",
             "$type": "color",
             "$description": "Used for the foreground of a selected button in the active state.",
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{button.default.primary.foreground.color.active}",
+              "$value": {
+                "default": "{button.default.primary.foreground.color.active}",
+                "dark": "{color.neutral.950}"
+              },
               "$type": "color",
               "$description": "Used for the foreground of a selected button in the active state."
             },
@@ -13065,13 +13077,16 @@
       "background": {
         "color": {
           "default": {
-            "$value": "rgba(137, 136, 141, 0.4)",
+            "$value": "#a4a3a8",
             "$type": "color",
             "$description": "Used for the background of a selected button in the default state.",
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{button.default.primary.background.color.default}",
+              "$value": {
+                "default": "{color.neutral.50}",
+                "dark": "{color.neutral.300}"
+              },
               "$type": "color",
               "$description": "Used for the background of a selected button in the default state."
             },
@@ -13086,13 +13101,16 @@
             ]
           },
           "hover": {
-            "$value": "rgba(137, 136, 141, 0.64)",
+            "$value": "#bfbfc3",
             "$type": "color",
             "$description": "Used for the background of a selected button in the hover state.",
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{button.default.primary.background.color.hover}",
+              "$value": {
+                "default": "{button.default.primary.background.color.hover}",
+                "dark": "{color.neutral.200}"
+              },
               "$type": "color",
               "$description": "Used for the background of a selected button in the hover state."
             },
@@ -13107,13 +13125,16 @@
             ]
           },
           "focus": {
-            "$value": "rgba(137, 136, 141, 0.64)",
+            "$value": "#bfbfc3",
             "$type": "color",
             "$description": "Used for the background of a selected button in the focus state.",
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{button.default.primary.background.color.focus}",
+              "$value": {
+                "default": "{button.default.primary.background.color.focus}",
+                "dark": "{color.neutral.200}"
+              },
               "$type": "color",
               "$description": "Used for the background of a selected button in the focus state."
             },
@@ -13128,13 +13149,16 @@
             ]
           },
           "active": {
-            "$value": "rgba(137, 136, 141, 0.32)",
+            "$value": "#89888d",
             "$type": "color",
             "$description": "Used for the background of a selected button in the active state.",
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{button.default.primary.background.color.active}",
+              "$value": {
+                "default": "{button.default.primary.background.color.active}",
+                "dark": "{color.neutral.400}"
+              },
               "$type": "color",
               "$description": "Used for the background of a selected button in the active state."
             },
@@ -13153,7 +13177,7 @@
       "border": {
         "color": {
           "default": {
-            "$value": "#626168",
+            "$value": "transparent",
             "$type": "color",
             "$description": "Used for the border of a selected button in the default state.",
             "filePath": "src/tokens/contextual/button.tokens.json",
@@ -13161,7 +13185,7 @@
             "original": {
               "$value": {
                 "default": "{color.neutral.300}",
-                "dark": "{color.neutral.600}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of a selected button in the default state."
@@ -13177,7 +13201,7 @@
             ]
           },
           "hover": {
-            "$value": "#737278",
+            "$value": "transparent",
             "$type": "color",
             "$description": "Used for the border of a selected button in the hover state.",
             "filePath": "src/tokens/contextual/button.tokens.json",
@@ -13185,7 +13209,7 @@
             "original": {
               "$value": {
                 "default": "{color.neutral.400}",
-                "dark": "{color.neutral.500}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of a selected button in the hover state."
@@ -13201,7 +13225,7 @@
             ]
           },
           "focus": {
-            "$value": "#737278",
+            "$value": "transparent",
             "$type": "color",
             "$description": "Used for the border of a selected button in the focus state.",
             "filePath": "src/tokens/contextual/button.tokens.json",
@@ -13222,7 +13246,7 @@
             ]
           },
           "active": {
-            "$value": "#a4a3a8",
+            "$value": "transparent",
             "$type": "color",
             "$description": "Used for the border of a selected button in the active state.",
             "filePath": "src/tokens/contextual/button.tokens.json",
@@ -13230,7 +13254,7 @@
             "original": {
               "$value": {
                 "default": "{color.neutral.600}",
-                "dark": "{color.neutral.300}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of a selected button in the active state."

package/dist/tokens/json/tokens.json

@@ -12983,7 +12983,10 @@
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{button.default.primary.foreground.color.default}",
+              "$value": {
+                "default": "{button.default.primary.foreground.color.default}",
+                "dark": "{color.neutral.900}"
+              },
               "$type": "color",
               "$description": "Used for the foreground of a selected button in the default state."
             },
@@ -13004,7 +13007,10 @@
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{button.default.primary.foreground.color.hover}",
+              "$value": {
+                "default": "{button.default.primary.foreground.color.hover}",
+                "dark": "{color.neutral.950}"
+              },
               "$type": "color",
               "$description": "Used for the foreground of a selected button in the hover state."
             },
@@ -13025,7 +13031,10 @@
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{button.default.primary.foreground.color.focus}",
+              "$value": {
+                "default": "{button.default.primary.foreground.color.focus}",
+                "dark": "{color.neutral.950}"
+              },
               "$type": "color",
               "$description": "Used for the foreground of a selected button in the focus state."
             },
@@ -13046,7 +13055,10 @@
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{button.default.primary.foreground.color.active}",
+              "$value": {
+                "default": "{button.default.primary.foreground.color.active}",
+                "dark": "{color.neutral.950}"
+              },
               "$type": "color",
               "$description": "Used for the foreground of a selected button in the active state."
             },
@@ -13065,13 +13077,16 @@
       "background": {
         "color": {
           "default": {
-            "$value": "#fff",
+            "$value": "#ececef",
             "$type": "color",
             "$description": "Used for the background of a selected button in the default state.",
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{button.default.primary.background.color.default}",
+              "$value": {
+                "default": "{color.neutral.50}",
+                "dark": "{color.neutral.300}"
+              },
               "$type": "color",
               "$description": "Used for the background of a selected button in the default state."
             },
@@ -13092,7 +13107,10 @@
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{button.default.primary.background.color.hover}",
+              "$value": {
+                "default": "{button.default.primary.background.color.hover}",
+                "dark": "{color.neutral.200}"
+              },
               "$type": "color",
               "$description": "Used for the background of a selected button in the hover state."
             },
@@ -13113,7 +13131,10 @@
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{button.default.primary.background.color.focus}",
+              "$value": {
+                "default": "{button.default.primary.background.color.focus}",
+                "dark": "{color.neutral.200}"
+              },
               "$type": "color",
               "$description": "Used for the background of a selected button in the focus state."
             },
@@ -13134,7 +13155,10 @@
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{button.default.primary.background.color.active}",
+              "$value": {
+                "default": "{button.default.primary.background.color.active}",
+                "dark": "{color.neutral.400}"
+              },
               "$type": "color",
               "$description": "Used for the background of a selected button in the active state."
             },
@@ -13161,7 +13185,7 @@
             "original": {
               "$value": {
                 "default": "{color.neutral.300}",
-                "dark": "{color.neutral.600}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of a selected button in the default state."
@@ -13185,7 +13209,7 @@
             "original": {
               "$value": {
                 "default": "{color.neutral.400}",
-                "dark": "{color.neutral.500}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of a selected button in the hover state."
@@ -13230,7 +13254,7 @@
             "original": {
               "$value": {
                 "default": "{color.neutral.600}",
-                "dark": "{color.neutral.300}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of a selected button in the active state."

package/dist/tokens/scss/_tokens.dark.scss

@@ -741,9 +741,10 @@ $gl-button-danger-tertiary-background-color-hover: $gl-action-danger-background-
 $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.
 $gl-button-dashed-border-color-default: $gl-color-neutral-400; // Used for the border of a dashed button in the default state.
 $gl-button-dashed-border-color-active: $gl-color-neutral-300; // Used for the border of a dashed button in the active state.
-$gl-button-selected-border-color-default: $gl-color-neutral-600; // Used for the border of a selected button in the default state.
-$gl-button-selected-border-color-hover: $gl-color-neutral-500; // Used for the border of a selected button in the hover state.
-$gl-button-selected-border-color-active: $gl-color-neutral-300; // Used for the border of a selected button in the active state.
+$gl-button-selected-background-color-default: $gl-color-neutral-300; // Used for the background of a selected button in the default state.
+$gl-button-selected-border-color-default: $gl-color-alpha-0; // Used for the border of a selected button in the default state.
+$gl-button-selected-border-color-hover: $gl-color-alpha-0; // Used for the border of a selected button in the hover state.
+$gl-button-selected-border-color-active: $gl-color-alpha-0; // Used for the border of a selected button in the active state.
 $gl-button-disabled-foreground-color: $gl-color-neutral-400; // Used for the foreground of a disabled button.
 $gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); // Used for the background of a disabled button.
 $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-
 $gl-button-dashed-border-color-hover: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the hover state.
 $gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the focus state.
 $gl-button-link-text-color-default: $gl-text-color-link; // Used for the text of a link button in the default state.
-$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.
-$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.
-$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.
-$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.
+$gl-button-selected-foreground-color-default: $gl-color-neutral-900; // Used for the foreground of a selected button in the default state.
+$gl-button-selected-background-color-hover: $gl-color-neutral-200; // Used for the background of a selected button in the hover state.
+$gl-button-selected-background-color-active: $gl-color-neutral-400; // Used for the background of a selected button in the active state.
 $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $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
 $gl-button-link-text-color-hover: $gl-button-link-text-color-default; // Used for the text of a link button in the hover state.
 $gl-button-link-text-color-focus: $gl-button-link-text-color-default; // Used for the text of a link button in the focus state.
 $gl-button-link-text-color-active: $gl-button-link-text-color-default; // Used for the text of a link button in the active state.
-$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.
-$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.
-$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.
-$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.
+$gl-button-selected-foreground-color-hover: $gl-color-neutral-950; // Used for the foreground of a selected button in the hover state.
+$gl-button-selected-foreground-color-focus: $gl-color-neutral-950; // Used for the foreground of a selected button in the focus state.
+$gl-button-selected-foreground-color-active: $gl-color-neutral-950; // Used for the foreground of a selected button in the active state.
+$gl-button-selected-background-color-focus: $gl-color-neutral-200; // Used for the background of a selected button in the focus state.
 $gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
 $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
 $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/dist/tokens/scss/_tokens.scss

@@ -741,6 +741,7 @@ $gl-button-danger-tertiary-background-color-hover: $gl-action-danger-background-
 $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.
 $gl-button-dashed-border-color-default: $gl-color-neutral-400; // Used for the border of a dashed button in the default state.
 $gl-button-dashed-border-color-active: $gl-color-neutral-600; // Used for the border of a dashed button in the active state.
+$gl-button-selected-background-color-default: $gl-color-neutral-50; // Used for the background of a selected button in the default state.
 $gl-button-selected-border-color-default: $gl-color-neutral-300; // Used for the border of a selected button in the default state.
 $gl-button-selected-border-color-hover: $gl-color-neutral-400; // Used for the border of a selected button in the hover state.
 $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; //
 $gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the focus state.
 $gl-button-link-text-color-default: $gl-text-color-link; // Used for the text of a link button in the default state.
 $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.
-$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.
 $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.
 $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.
 $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/dist/utils/charts/config.js

@@ -500,10 +500,11 @@ const getTooltipContent = function () {
   }
   return seriesData.reduce((acc, _ref7) => {
     let {
-      value: [, yValue],
+      value,
       seriesName,
       color
     } = _ref7;
+    const yValue = value[1];
     acc[seriesName] = {
       value: yValue,
       color

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "108.5.0",
+  "version": "108.7.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",