@gitlab/ui 123.6.1 → 123.7.0

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

@@ -294,6 +294,16 @@ $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for ava
 $gl-avatar-fallback-background-color-green: #91d4a83d; // Green background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-orange: #e9be743d; // Orange background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral background for avatar fallback with no particular meaning.
+$gl-button-default-primary-background-color-default: rgba(137, 136, 141, 0.4); // Used for the background of an default primary button in the default state.
+$gl-button-default-primary-background-color-hover: rgba(137, 136, 141, 0.64); // Used for the background of an default primary button in the hover state.
+$gl-button-default-primary-background-color-active: rgba(137, 136, 141, 0.32); // Used for the background of an default primary button in the active state.
+$gl-button-confirm-secondary-background-color-default: rgba(66, 143, 220, 0.4); // Used for the background of an outlined confirm (positive) button in the default state.
+$gl-button-confirm-secondary-background-color-hover: rgba(66, 143, 220, 0.64); // Used for the background of an outlined confirm (positive) button in the hover state.
+$gl-button-confirm-secondary-background-color-active: rgba(66, 143, 220, 0.32); // Used for the background of an outlined confirm (positive) button in the active state.
+$gl-button-danger-secondary-background-color-default: rgba(236, 89, 65, 0.40); // Used for the background of an outlined danger (destructive) button in the default state.
+$gl-button-danger-secondary-background-color-hover: rgba(236, 89, 65, 0.64); // Used for the background of an outlined danger (destructive) button in the hover state.
+$gl-button-danger-secondary-background-color-active: rgba(236, 89, 65, 0.32); // Used for the background of an outlined danger (destructive) button in the active state.
+$gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); // Used for the background of a disabled button.
 $gl-chart-threshold-area-color: rgba(221,43,14,0.1); // Used in charts to delineate a threshold area in a chart.
 $gl-illustration-stroke-color-default: #e3e3e8; // Default stroke color to define shape and provide essential detail.
 $gl-illustration-stroke-width-default: 1.5; // Default stroke width to define shape and provide essential detail.
@@ -556,6 +566,7 @@ $gl-action-confirm-background-color-active: rgba(66, 143, 220, 0.16); // Used fo
 $gl-action-danger-background-color-default: rgba(236, 89, 65, 0.0); // Used for the background of a danger (destructive) action in the default state.
 $gl-action-danger-background-color-hover: rgba(236, 89, 65, 0.4); // Used for the background of a danger (destructive) action in the hover state.
 $gl-action-danger-background-color-active: rgba(236, 89, 65, 0.16); // Used for the background of a danger (destructive) action in the active state.
+$gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
 $gl-text-primary: #ececef; // Use text.color.default instead.
 $gl-text-secondary: #89888d; // Use text.color.subtle instead.
 $gl-text-tertiary: #737278; // Use text.color.disabled instead.
@@ -574,12 +585,16 @@ $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to
 $gl-shadow-color-default: $gl-color-alpha-dark-40; // Used for the default shadow color.
 $gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert.
 $gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
+$gl-alert-info-title-color: $gl-color-blue-300; // Used for the title color of an info alert.
 $gl-alert-info-border-top-color: $gl-color-blue-400; // Used for the border color of an info alert.
 $gl-alert-info-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of an info alert.
+$gl-alert-success-title-color: $gl-color-green-300; // Used for the title color of a success alert.
 $gl-alert-success-border-top-color: $gl-color-green-400; // Used for the border color of a success alert.
 $gl-alert-success-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a success alert.
+$gl-alert-warning-title-color: $gl-color-orange-300; // Used for the title color of a warning alert.
 $gl-alert-warning-border-top-color: $gl-color-orange-400; // Used for the border color of a warning alert.
 $gl-alert-warning-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a warning alert.
+$gl-alert-danger-title-color: $gl-color-red-300; // Used for the title color of a danger alert.
 $gl-alert-danger-border-top-color: $gl-color-red-400; // Used for the border color of a danger alert.
 $gl-alert-danger-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a danger alert.
 $gl-avatar-border-color-default: $gl-color-alpha-light-8; // Used to define the edge of an avatar.
@@ -719,9 +734,7 @@ $gl-broadcast-banner-text-color-lightindigo: $gl-color-neutral-0; // Used for th
 $gl-broadcast-banner-text-color-lightred: $gl-color-neutral-0; // Used for the text for the lightred banner type.
 $gl-broadcast-banner-text-color-red: $gl-color-neutral-0; // Used for the text for the red banner type.
 $gl-button-default-primary-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a default primary button in the default state.
-$gl-button-default-primary-background-color-default: rgba(137, 136, 141, 0.4); // Used for the background of an default primary button in the default state.
-$gl-button-default-primary-background-color-hover: rgba(137, 136, 141, 0.64); // Used for the background of an default primary button in the hover state.
-$gl-button-default-primary-background-color-active: rgba(137, 136, 141, 0.32); // Used for the background of an default primary button in the active state.
+$gl-button-default-primary-background-color-focus: $gl-button-default-primary-background-color-hover; // Used for the background of an default primary button in the focus state.
 $gl-button-default-primary-border-color-default: $gl-color-alpha-0; // Used for the border of an default primary button in the default state.
 $gl-button-default-primary-border-color-hover: $gl-color-alpha-0; // Used for the border of an default primary button in the hover state.
 $gl-button-default-primary-border-color-active: $gl-color-alpha-0; // Used for the border of an default primary button in the active state.
@@ -735,9 +748,7 @@ $gl-button-confirm-primary-border-color-active: $gl-color-alpha-0; // Used for t
 $gl-button-confirm-secondary-foreground-color-default: $gl-color-blue-100; // Used for the foreground of a confirm (positive) button in the default state.
 $gl-button-confirm-secondary-foreground-color-hover: $gl-color-blue-100; // Used for the foreground of a confirm (positive) button in the hover state.
 $gl-button-confirm-secondary-foreground-color-active: $gl-color-blue-100; // Used for the foreground of a confirm (positive) button in the active state.
-$gl-button-confirm-secondary-background-color-default: rgba(66, 143, 220, 0.4); // Used for the background of an outlined confirm (positive) button in the default state.
-$gl-button-confirm-secondary-background-color-hover: rgba(66, 143, 220, 0.64); // Used for the background of an outlined confirm (positive) button in the hover state.
-$gl-button-confirm-secondary-background-color-active: rgba(66, 143, 220, 0.32); // Used for the background of an outlined confirm (positive) button in the active state.
+$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.
 $gl-button-confirm-secondary-border-color-default: $gl-color-alpha-0; // Used for the border of an outlined confirm (positive) button in the default state.
 $gl-button-confirm-secondary-border-color-hover: $gl-color-alpha-0; // Used for the border of an outlined confirm (positive) button in the hover state.
 $gl-button-confirm-secondary-border-color-active: $gl-color-alpha-0; // Used for the border of an outlined confirm (positive) button in the active state.
@@ -754,9 +765,7 @@ $gl-button-danger-primary-border-color-active: $gl-color-alpha-0; // Used for th
 $gl-button-danger-secondary-foreground-color-default: $gl-color-red-100; // Used for the foreground of a danger (destructive) button in the default state.
 $gl-button-danger-secondary-foreground-color-hover: $gl-color-red-50; // Used for the foreground of a danger (destructive) button in the hover state.
 $gl-button-danger-secondary-foreground-color-active: $gl-color-red-50; // Used for the foreground of a danger (destructive) button in the active state.
-$gl-button-danger-secondary-background-color-default: rgba(236, 89, 65, 0.40); // Used for the background of an outlined danger (destructive) button in the default state.
-$gl-button-danger-secondary-background-color-hover: rgba(236, 89, 65, 0.64); // Used for the background of an outlined danger (destructive) button in the hover state.
-$gl-button-danger-secondary-background-color-active: rgba(236, 89, 65, 0.32); // Used for the background of an outlined danger (destructive) button in the active state.
+$gl-button-danger-secondary-background-color-focus: $gl-button-danger-secondary-background-color-hover; // Used for the background of an outlined danger (destructive) button in the focus state.
 $gl-button-danger-secondary-border-color-default: $gl-color-alpha-0; // Used for the border of an outlined danger (destructive) button in the default state.
 $gl-button-danger-secondary-border-color-hover: $gl-color-alpha-0; // Used for the border of an outlined danger (destructive) button in the hover state.
 $gl-button-danger-secondary-border-color-active: $gl-color-alpha-0; // Used for the border of an outlined danger (destructive) button in the active state.
@@ -765,12 +774,18 @@ $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-foreground-color-default: $gl-color-neutral-900; // Used for the foreground of a selected button in the default 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-default: $gl-color-neutral-300; // Used for the background 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-focus: $gl-color-neutral-200; // Used for the background of a selected button in the focus 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-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.
 $gl-button-count-background-color: $gl-color-alpha-light-16; // Used for the background of a button count element.
 $gl-chart-axis-line-color: $gl-color-neutral-700; // Used in charts for axis line color.
@@ -845,6 +860,9 @@ $gl-action-strong-neutral-background-color-default: $gl-color-neutral-700; // Us
 $gl-action-strong-neutral-background-color-hover: $gl-color-neutral-600; // Used for the background of a strong neutral action in the hover state.
 $gl-action-strong-neutral-background-color-active: $gl-color-neutral-500; // Used for the background of a strong neutral action in the active state.
 $gl-action-strong-neutral-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a strong neutral action in the default state.
+$gl-action-strong-neutral-foreground-color-hover: $gl-color-neutral-0; // Used for the foreground of a strong neutral action in the hover state.
+$gl-action-strong-neutral-foreground-color-focus: $gl-color-neutral-0; // Used for the foreground of a strong neutral action in the focus state.
+$gl-action-strong-neutral-foreground-color-active: $gl-color-neutral-0; // Used for the foreground of a strong neutral action in the active state.
 $gl-action-strong-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a strong neutral action in the default state.
 $gl-background-color-default: $gl-color-neutral-950; // Used for the default background color.
 $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.
@@ -852,7 +870,6 @@ $gl-background-color-strong: $gl-color-neutral-800; // Used to make the backgrou
 $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disabled section.
 $gl-background-color-overlap: $gl-color-neutral-900; // Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.
 $gl-background-color-section: $gl-color-neutral-800; // Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.
-$gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
 $gl-control-background-color-default: $gl-color-alpha-dark-40; // Used for form control (input, radio button, checkbox, textarea) default background.
 $gl-control-background-color-disabled: $gl-color-alpha-light-4; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-concatenation: $gl-color-alpha-light-4; // Used for the background of static content that prepends or appends a text input.
@@ -929,14 +946,10 @@ $gl-shadow-md: 0 0 1px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-defaul
 $gl-shadow-lg: 0 0 2px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 4px 12px $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.
 $gl-alert-border-radius: $gl-border-radius-lg; // Used for alert border radius.
 $gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
-$gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
-$gl-alert-info-title-color: $gl-color-blue-300; // Used for the title color of an info alert.
+$gl-alert-neutral-background-color: $gl-background-color-subtle; // Used for the background color of a neutral alert.
 $gl-alert-info-background-color: $gl-background-color-subtle; // Used for the background color of an info alert.
-$gl-alert-success-title-color: $gl-color-green-300; // Used for the title color of a success alert.
 $gl-alert-success-background-color: $gl-background-color-subtle; // Used for the background color of a success alert.
-$gl-alert-warning-title-color: $gl-color-orange-300; // Used for the title color of a warning alert.
 $gl-alert-warning-background-color: $gl-background-color-subtle; // Used for the background color of a warning alert.
-$gl-alert-danger-title-color: $gl-color-red-300; // Used for the title color of a danger alert.
 $gl-alert-danger-background-color: $gl-background-color-subtle; // Used for the background color of a danger alert.
 $gl-badge-muted-background-color-hover: $gl-badge-muted-background-color-default; // Used for the background of a muted badge in the hover state.
 $gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a muted badge in the focus state.
@@ -962,7 +975,6 @@ $gl-badge-tier-icon-color-focus: $gl-badge-tier-icon-color-hover; // Used for th
 $gl-button-default-primary-foreground-color-hover: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a default primary button in the hover state.
 $gl-button-default-primary-foreground-color-focus: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a default primary button in the focus state.
 $gl-button-default-primary-foreground-color-active: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a default primary button in the active state.
-$gl-button-default-primary-background-color-focus: $gl-button-default-primary-background-color-hover; // Used for the background of an default primary button in the focus state.
 $gl-button-default-primary-border-color-focus: $gl-button-default-primary-border-color-hover; // Used for the border of an default primary button in the focus state.
 $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.
 $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.
@@ -972,7 +984,6 @@ $gl-button-confirm-primary-background-color-hover: $gl-action-strong-confirm-bac
 $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.
 $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.
 $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.
-$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.
 $gl-button-confirm-secondary-border-color-focus: $gl-button-confirm-secondary-border-color-hover; // Used for the border of an outlined confirm (positive) button in the focus state.
 $gl-button-confirm-tertiary-foreground-color-default: $gl-action-confirm-foreground-color-default; // Used for the foreground of a borderless, tertiary confirm (positive) button in the default state.
 $gl-button-confirm-tertiary-foreground-color-hover: $gl-action-confirm-foreground-color-hover; // Used for the foreground of a borderless, tertiary confirm (positive) button in the hover state.
@@ -985,7 +996,6 @@ $gl-button-danger-primary-foreground-color-active: $gl-button-danger-primary-for
 $gl-button-danger-primary-background-color-focus: $gl-button-danger-primary-background-color-hover; // Used for the background of a danger (destructive) primary button in the focus state.
 $gl-button-danger-primary-border-color-focus: $gl-button-danger-primary-border-color-hover; // Used for the border of a danger (destructive) primary button in the focus state.
 $gl-button-danger-secondary-foreground-color-focus: $gl-button-danger-secondary-foreground-color-hover; // Used for the foreground of a danger (destructive) button in the focus state.
-$gl-button-danger-secondary-background-color-focus: $gl-button-danger-secondary-background-color-hover; // Used for the background of an outlined danger (destructive) button in the focus state.
 $gl-button-danger-secondary-border-color-focus: $gl-button-danger-secondary-border-color-hover; // Used for the border of an outlined danger (destructive) button in the focus state.
 $gl-button-danger-tertiary-foreground-color-default: $gl-action-danger-foreground-color-default; // Used for the foreground of a borderless, tertiary danger (destructive) button in the default state.
 $gl-button-danger-tertiary-foreground-color-hover: $gl-action-danger-foreground-color-hover; // Used for the foreground of a borderless, tertiary danger (destructive) button in the hover state.
@@ -995,9 +1005,6 @@ $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-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-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text color of axis titles and labels.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
@@ -1050,7 +1057,6 @@ $gl-action-strong-confirm-background-color-focus: $gl-action-strong-confirm-back
 $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.
 $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.
 $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.
-$gl-action-strong-neutral-foreground-color-hover: $gl-color-neutral-0; // Used for the foreground of a strong neutral action in the hover state.
 $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.
 $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
@@ -1092,10 +1098,6 @@ $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-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-card-border-radius: $gl-border-radius-default; // Used for card border radius.
 $gl-chart-axis-pointer-color: $gl-icon-color-subtle; // Used in charts for the color of the reference line and axis value under mouse pointer.
 $gl-chart-zoom-handle-color: $gl-icon-color-subtle; // Used in charts for the handle color when zooming in on a specific area of data.
@@ -1110,7 +1112,6 @@ $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color
 $gl-action-selected-border-color-focus: $gl-action-selected-background-color-focus; // Used for the border of a selected action in the focus state.
 $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.
 $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.
-$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.
 $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.
 $gl-control-border-radius: $gl-border-radius-default; // Used for form control (input, radio button, checkbox, textarea) default border radius.
 $gl-button-border-radius: $gl-action-border-radius; // Used for button border radius.
@@ -1118,6 +1119,5 @@ $gl-button-confirm-primary-foreground-color-focus: $gl-action-strong-confirm-for
 $gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
 $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.
 $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.
-$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.
 $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.
 $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/package.json

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

package/src/components/base/filtered_search/filtered_search.vue

@@ -70,7 +70,7 @@ export default {
         }
 
         // eslint-disable-next-line no-underscore-dangle
-        const isOk = Array.isArray(value) && value.every(({ token }) => token.__v_skip);
+        const isOk = Array.isArray(value) && value.every(({ token }) => !token || token.__v_skip);
         if (!isOk) {
           // eslint-disable-next-line no-console
           console.warn(

package/src/components/base/filtered_search/filtered_search_suggestion.vue

@@ -55,14 +55,12 @@ export default {
 
 <template>
   <li
-    role="presentation"
     class="gl-dropdown-item gl-filtered-search-suggestion"
     :class="{ 'gl-filtered-search-suggestion-active': isActive }"
   >
     <button
       data-testid="filtered-search-suggestion"
       tabindex="-1"
-      role="menuitem"
       class="dropdown-item"
       @mousedown.prevent="emitValue"
     >

package/src/components/base/filtered_search/filtered_search_suggestion_list.vue

@@ -97,6 +97,7 @@ export default {
       ) {
         // The user wants to move past the end of the list, so ensure nothing is selected.
         this.activeIdx = NO_ACTIVE_ITEM;
+        this.$refs.top.scrollIntoView();
       } else {
         const index =
           this.activeIdx === DEFER_TO_INITIAL_VALUE
@@ -116,6 +117,7 @@ export default {
 </script>
 <template>
   <ul :class="listClasses">
+    <li ref="top"></li>
     <!-- @slot The suggestions (implemented with GlFilteredSearchSuggestion). -->
     <slot></slot>
   </ul>

package/src/components/base/filtered_search/filtered_search_term.vue

@@ -104,7 +104,18 @@ export default {
         return [];
       }
 
-      const tokens = this.availableTokens.filter((token) => match(token.title, this.value.data));
+      const tokens = this.availableTokens.filter((token) => {
+        if (typeof token.match === 'function') {
+          return token.match.call(null, {
+            query: this.value.data,
+            title: token.title,
+            defaultMatcher: match,
+          });
+        }
+
+        return match(token.title, this.value.data);
+      });
+
       if (this.termsAsTokens() && this.value.data) {
         tokens.push({
           ...termTokenDefinition,

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -344,7 +344,7 @@ export default {
 
     <gl-filtered-search-token-segment
       key="title-segment"
-      :value="config.title"
+      :value="config.segmentTitle || config.title"
       :active="isSegmentActive($options.segments.SEGMENT_TITLE)"
       :cursor-position="intendedCursorPosition"
       :options="availableTokensWithSelf"

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -330,6 +330,10 @@ export default {
       }
     },
 
+    showHeader(option) {
+      return option.value?.toString().startsWith('gl-filtered-search-suggestion-group-');
+    },
+
     handleInputKeydown(e) {
       const { key } = e;
       const { suggestions, input } = this.$refs;
@@ -450,25 +454,42 @@ export default {
           v-if="hasOptionsOrSuggestions"
           :key="`operator-${_uid}`"
           ref="suggestions"
+          role="list"
+          tabindex="0"
           :initial-value="defaultSuggestedValue"
           @suggestion="applySuggestion"
         >
           <template v-if="options">
-            <gl-filtered-search-suggestion
-              v-for="(option, idx) in options"
-              :key="`${option.value}-${idx}`"
-              :value="option.value"
-              :icon-name="option.icon"
-            >
-              <slot name="option" v-bind="{ option }">
-                <template v-if="option.component">
-                  <component :is="option.component" :option="option" />
-                </template>
-                <template v-else>
-                  {{ option[optionTextField] }}
-                </template>
-              </slot>
-            </gl-filtered-search-suggestion>
+            <template v-for="(option, idx) in options">
+              <template v-if="showHeader(option)">
+                <li v-if="idx > 0" :key="`separator-${idx}`">
+                  <hr class="gl-border-t -gl-mx-2 gl-my-2" />
+                </li>
+                <li
+                  :key="`header-${idx}`"
+                  role="presentation"
+                  data-testid="filtered-search-section-header"
+                  class="gl-mx-0 gl-pb-2 gl-pl-5 gl-pt-3 gl-text-sm gl-font-bold gl-text-strong"
+                >
+                  {{ option.title }}
+                </li>
+              </template>
+              <gl-filtered-search-suggestion
+                v-else
+                :key="`${option.value}-${idx}`"
+                :value="option.value"
+                :icon-name="option.icon"
+              >
+                <slot name="option" v-bind="{ option }">
+                  <template v-if="option.component">
+                    <component :is="option.component" :option="option" />
+                  </template>
+                  <template v-else>
+                    {{ option[optionTextField] }}
+                  </template>
+                </slot>
+              </gl-filtered-search-suggestion>
+            </template>
           </template>
 
           <slot v-else name="suggestions"></slot>

package/src/tokens/build/css/tokens.dark.css

@@ -296,6 +296,16 @@
   --gl-avatar-fallback-background-color-green: #91d4a83d; /** Green background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-orange: #e9be743d; /** Orange background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-neutral: #bfbfc33d; /** Neutral background for avatar fallback with no particular meaning. */
+  --gl-button-default-primary-background-color-default: rgba(137, 136, 141, 0.4); /** Used for the background of an default primary button in the default state. */
+  --gl-button-default-primary-background-color-hover: rgba(137, 136, 141, 0.64); /** Used for the background of an default primary button in the hover state. */
+  --gl-button-default-primary-background-color-active: rgba(137, 136, 141, 0.32); /** Used for the background of an default primary button in the active state. */
+  --gl-button-confirm-secondary-background-color-default: rgba(66, 143, 220, 0.4); /** Used for the background of an outlined confirm (positive) button in the default state. */
+  --gl-button-confirm-secondary-background-color-hover: rgba(66, 143, 220, 0.64); /** Used for the background of an outlined confirm (positive) button in the hover state. */
+  --gl-button-confirm-secondary-background-color-active: rgba(66, 143, 220, 0.32); /** Used for the background of an outlined confirm (positive) button in the active state. */
+  --gl-button-danger-secondary-background-color-default: rgba(236, 89, 65, 0.40); /** Used for the background of an outlined danger (destructive) button in the default state. */
+  --gl-button-danger-secondary-background-color-hover: rgba(236, 89, 65, 0.64); /** Used for the background of an outlined danger (destructive) button in the hover state. */
+  --gl-button-danger-secondary-background-color-active: rgba(236, 89, 65, 0.32); /** Used for the background of an outlined danger (destructive) button in the active state. */
+  --gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); /** Used for the background of a disabled button. */
   --gl-chart-threshold-area-color: rgba(221,43,14,0.1); /** Used in charts to delineate a threshold area in a chart. */
   --gl-illustration-stroke-color-default: #e3e3e8; /** Default stroke color to define shape and provide essential detail. */
   --gl-illustration-stroke-width-default: 1.5; /** Default stroke width to define shape and provide essential detail. */
@@ -558,6 +568,7 @@
   --gl-action-danger-background-color-default: rgba(236, 89, 65, 0.0); /** Used for the background of a danger (destructive) action in the default state. */
   --gl-action-danger-background-color-hover: rgba(236, 89, 65, 0.4); /** Used for the background of a danger (destructive) action in the hover state. */
   --gl-action-danger-background-color-active: rgba(236, 89, 65, 0.16); /** Used for the background of a danger (destructive) action in the active state. */
+  --gl-background-color-overlay: rgba(0,0,0,0.64); /** Used for an overlay that covers other content. */
   --gl-text-primary: #ececef; /** Use text.color.default instead. */
   --gl-text-secondary: #89888d; /** Use text.color.subtle instead. */
   --gl-text-tertiary: #737278; /** Use text.color.disabled instead. */
@@ -576,12 +587,16 @@
   --gl-shadow-color-default: var(--gl-color-alpha-dark-40); /** Used for the default shadow color. */
   --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /** Used for the border center color of a neutral alert. */
   --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */
+  --gl-alert-info-title-color: var(--gl-color-blue-300); /** Used for the title color of an info alert. */
   --gl-alert-info-border-top-color: var(--gl-color-blue-400); /** Used for the border color of an info alert. */
   --gl-alert-info-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of an info alert. */
+  --gl-alert-success-title-color: var(--gl-color-green-300); /** Used for the title color of a success alert. */
   --gl-alert-success-border-top-color: var(--gl-color-green-400); /** Used for the border color of a success alert. */
   --gl-alert-success-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a success alert. */
+  --gl-alert-warning-title-color: var(--gl-color-orange-300); /** Used for the title color of a warning alert. */
   --gl-alert-warning-border-top-color: var(--gl-color-orange-400); /** Used for the border color of a warning alert. */
   --gl-alert-warning-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a warning alert. */
+  --gl-alert-danger-title-color: var(--gl-color-red-300); /** Used for the title color of a danger alert. */
   --gl-alert-danger-border-top-color: var(--gl-color-red-400); /** Used for the border color of a danger alert. */
   --gl-alert-danger-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a danger alert. */
   --gl-avatar-border-color-default: var(--gl-color-alpha-light-8); /** Used to define the edge of an avatar. */
@@ -721,9 +736,7 @@
   --gl-broadcast-banner-text-color-lightred: var(--gl-color-neutral-0); /** Used for the text for the lightred banner type. */
   --gl-broadcast-banner-text-color-red: var(--gl-color-neutral-0); /** Used for the text for the red banner type. */
   --gl-button-default-primary-foreground-color-default: var(--gl-color-neutral-50); /** Used for the foreground of a default primary button in the default state. */
-  --gl-button-default-primary-background-color-default: rgba(137, 136, 141, 0.4); /** Used for the background of an default primary button in the default state. */
-  --gl-button-default-primary-background-color-hover: rgba(137, 136, 141, 0.64); /** Used for the background of an default primary button in the hover state. */
-  --gl-button-default-primary-background-color-active: rgba(137, 136, 141, 0.32); /** Used for the background of an default primary button in the active state. */
+  --gl-button-default-primary-background-color-focus: var(--gl-button-default-primary-background-color-hover); /** Used for the background of an default primary button in the focus state. */
   --gl-button-default-primary-border-color-default: var(--gl-color-alpha-0); /** Used for the border of an default primary button in the default state. */
   --gl-button-default-primary-border-color-hover: var(--gl-color-alpha-0); /** Used for the border of an default primary button in the hover state. */
   --gl-button-default-primary-border-color-active: var(--gl-color-alpha-0); /** Used for the border of an default primary button in the active state. */
@@ -737,9 +750,7 @@
   --gl-button-confirm-secondary-foreground-color-default: var(--gl-color-blue-100); /** Used for the foreground of a confirm (positive) button in the default state. */
   --gl-button-confirm-secondary-foreground-color-hover: var(--gl-color-blue-100); /** Used for the foreground of a confirm (positive) button in the hover state. */
   --gl-button-confirm-secondary-foreground-color-active: var(--gl-color-blue-100); /** Used for the foreground of a confirm (positive) button in the active state. */
-  --gl-button-confirm-secondary-background-color-default: rgba(66, 143, 220, 0.4); /** Used for the background of an outlined confirm (positive) button in the default state. */
-  --gl-button-confirm-secondary-background-color-hover: rgba(66, 143, 220, 0.64); /** Used for the background of an outlined confirm (positive) button in the hover state. */
-  --gl-button-confirm-secondary-background-color-active: rgba(66, 143, 220, 0.32); /** Used for the background of an outlined confirm (positive) button in the active state. */
+  --gl-button-confirm-secondary-background-color-focus: var(--gl-button-confirm-secondary-background-color-hover); /** Used for the background of an outlined confirm (positive) button in the focus state. */
   --gl-button-confirm-secondary-border-color-default: var(--gl-color-alpha-0); /** Used for the border of an outlined confirm (positive) button in the default state. */
   --gl-button-confirm-secondary-border-color-hover: var(--gl-color-alpha-0); /** Used for the border of an outlined confirm (positive) button in the hover state. */
   --gl-button-confirm-secondary-border-color-active: var(--gl-color-alpha-0); /** Used for the border of an outlined confirm (positive) button in the active state. */
@@ -756,9 +767,7 @@
   --gl-button-danger-secondary-foreground-color-default: var(--gl-color-red-100); /** Used for the foreground of a danger (destructive) button in the default state. */
   --gl-button-danger-secondary-foreground-color-hover: var(--gl-color-red-50); /** Used for the foreground of a danger (destructive) button in the hover state. */
   --gl-button-danger-secondary-foreground-color-active: var(--gl-color-red-50); /** Used for the foreground of a danger (destructive) button in the active state. */
-  --gl-button-danger-secondary-background-color-default: rgba(236, 89, 65, 0.40); /** Used for the background of an outlined danger (destructive) button in the default state. */
-  --gl-button-danger-secondary-background-color-hover: rgba(236, 89, 65, 0.64); /** Used for the background of an outlined danger (destructive) button in the hover state. */
-  --gl-button-danger-secondary-background-color-active: rgba(236, 89, 65, 0.32); /** Used for the background of an outlined danger (destructive) button in the active state. */
+  --gl-button-danger-secondary-background-color-focus: var(--gl-button-danger-secondary-background-color-hover); /** Used for the background of an outlined danger (destructive) button in the focus state. */
   --gl-button-danger-secondary-border-color-default: var(--gl-color-alpha-0); /** Used for the border of an outlined danger (destructive) button in the default state. */
   --gl-button-danger-secondary-border-color-hover: var(--gl-color-alpha-0); /** Used for the border of an outlined danger (destructive) button in the hover state. */
   --gl-button-danger-secondary-border-color-active: var(--gl-color-alpha-0); /** Used for the border of an outlined danger (destructive) button in the active state. */
@@ -767,12 +776,18 @@
   --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-foreground-color-default: var(--gl-color-neutral-900); /** Used for the foreground of a selected button in the default 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-default: var(--gl-color-neutral-300); /** Used for the background 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-focus: var(--gl-color-neutral-200); /** Used for the background of a selected button in the focus 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-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. */
   --gl-button-count-background-color: var(--gl-color-alpha-light-16); /** Used for the background of a button count element. */
   --gl-chart-axis-line-color: var(--gl-color-neutral-700); /** Used in charts for axis line color. */
@@ -847,6 +862,9 @@
   --gl-action-strong-neutral-background-color-hover: var(--gl-color-neutral-600); /** Used for the background of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-background-color-active: var(--gl-color-neutral-500); /** Used for the background of a strong neutral action in the active state. */
   --gl-action-strong-neutral-foreground-color-default: var(--gl-color-neutral-50); /** Used for the foreground of a strong neutral action in the default state. */
+  --gl-action-strong-neutral-foreground-color-hover: var(--gl-color-neutral-0); /** Used for the foreground of a strong neutral action in the hover state. */
+  --gl-action-strong-neutral-foreground-color-focus: var(--gl-color-neutral-0); /** Used for the foreground of a strong neutral action in the focus state. */
+  --gl-action-strong-neutral-foreground-color-active: var(--gl-color-neutral-0); /** Used for the foreground of a strong neutral action in the active state. */
   --gl-action-strong-neutral-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a strong neutral action in the default state. */
   --gl-background-color-default: var(--gl-color-neutral-950); /** Used for the default background color. */
   --gl-background-color-subtle: var(--gl-color-neutral-900); /** Used to slightly differentiate the background from the default. */
@@ -854,7 +872,6 @@
   --gl-background-color-disabled: var(--gl-color-neutral-900); /** Used to identify a disabled section. */
   --gl-background-color-overlap: var(--gl-color-neutral-900); /** Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content. */
   --gl-background-color-section: var(--gl-color-neutral-800); /** Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
-  --gl-background-color-overlay: rgba(0,0,0,0.64); /** Used for an overlay that covers other content. */
   --gl-control-background-color-default: var(--gl-color-alpha-dark-40); /** Used for form control (input, radio button, checkbox, textarea) default background. */
   --gl-control-background-color-disabled: var(--gl-color-alpha-light-4); /** Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-concatenation: var(--gl-color-alpha-light-4); /** Used for the background of static content that prepends or appends a text input. */
@@ -931,14 +948,10 @@
   --gl-shadow-lg: 0 0 2px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 4px 12px var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */
   --gl-alert-border-radius: var(--gl-border-radius-lg); /** Used for alert border radius. */
   --gl-alert-neutral-title-color: var(--gl-text-color-heading); /** Used for the title color of a neutral alert. */
-  --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /** Used for the background color of a neutral alert. */
-  --gl-alert-info-title-color: var(--gl-color-blue-300); /** Used for the title color of an info alert. */
+  --gl-alert-neutral-background-color: var(--gl-background-color-subtle); /** Used for the background color of a neutral alert. */
   --gl-alert-info-background-color: var(--gl-background-color-subtle); /** Used for the background color of an info alert. */
-  --gl-alert-success-title-color: var(--gl-color-green-300); /** Used for the title color of a success alert. */
   --gl-alert-success-background-color: var(--gl-background-color-subtle); /** Used for the background color of a success alert. */
-  --gl-alert-warning-title-color: var(--gl-color-orange-300); /** Used for the title color of a warning alert. */
   --gl-alert-warning-background-color: var(--gl-background-color-subtle); /** Used for the background color of a warning alert. */
-  --gl-alert-danger-title-color: var(--gl-color-red-300); /** Used for the title color of a danger alert. */
   --gl-alert-danger-background-color: var(--gl-background-color-subtle); /** Used for the background color of a danger alert. */
   --gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-default); /** Used for the background of a muted badge in the hover state. */
   --gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /** Used for the text of a muted badge in the focus state. */
@@ -964,7 +977,6 @@
   --gl-button-default-primary-foreground-color-hover: var(--gl-button-default-primary-foreground-color-default); /** Used for the foreground of a default primary button in the hover state. */
   --gl-button-default-primary-foreground-color-focus: var(--gl-button-default-primary-foreground-color-default); /** Used for the foreground of a default primary button in the focus state. */
   --gl-button-default-primary-foreground-color-active: var(--gl-button-default-primary-foreground-color-default); /** Used for the foreground of a default primary button in the active state. */
-  --gl-button-default-primary-background-color-focus: var(--gl-button-default-primary-background-color-hover); /** Used for the background of an default primary button in the focus state. */
   --gl-button-default-primary-border-color-focus: var(--gl-button-default-primary-border-color-hover); /** Used for the border of an default primary button in the focus state. */
   --gl-button-default-tertiary-foreground-color-default: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a default borderless, tertiary button in the default state. */
   --gl-button-default-tertiary-background-color-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of a default borderless, tertiary button in the focus state. */
@@ -974,7 +986,6 @@
   --gl-button-confirm-primary-background-color-active: var(--gl-action-strong-confirm-background-color-active); /** Used for the background of a confirm (positive) primary button in the active state. */
   --gl-button-confirm-primary-border-color-focus: var(--gl-button-confirm-primary-border-color-hover); /** Used for the border of a confirm (positive) primary button in the focus state. */
   --gl-button-confirm-secondary-foreground-color-focus: var(--gl-button-confirm-secondary-foreground-color-hover); /** Used for the foreground of a confirm (positive) button in the focus state. */
-  --gl-button-confirm-secondary-background-color-focus: var(--gl-button-confirm-secondary-background-color-hover); /** Used for the background of an outlined confirm (positive) button in the focus state. */
   --gl-button-confirm-secondary-border-color-focus: var(--gl-button-confirm-secondary-border-color-hover); /** Used for the border of an outlined confirm (positive) button in the focus state. */
   --gl-button-confirm-tertiary-foreground-color-default: var(--gl-action-confirm-foreground-color-default); /** Used for the foreground of a borderless, tertiary confirm (positive) button in the default state. */
   --gl-button-confirm-tertiary-foreground-color-hover: var(--gl-action-confirm-foreground-color-hover); /** Used for the foreground of a borderless, tertiary confirm (positive) button in the hover state. */
@@ -987,7 +998,6 @@
   --gl-button-danger-primary-background-color-focus: var(--gl-button-danger-primary-background-color-hover); /** Used for the background of a danger (destructive) primary button in the focus state. */
   --gl-button-danger-primary-border-color-focus: var(--gl-button-danger-primary-border-color-hover); /** Used for the border of a danger (destructive) primary button in the focus state. */
   --gl-button-danger-secondary-foreground-color-focus: var(--gl-button-danger-secondary-foreground-color-hover); /** Used for the foreground of a danger (destructive) button in the focus state. */
-  --gl-button-danger-secondary-background-color-focus: var(--gl-button-danger-secondary-background-color-hover); /** Used for the background of an outlined danger (destructive) button in the focus state. */
   --gl-button-danger-secondary-border-color-focus: var(--gl-button-danger-secondary-border-color-hover); /** Used for the border of an outlined danger (destructive) button in the focus state. */
   --gl-button-danger-tertiary-foreground-color-default: var(--gl-action-danger-foreground-color-default); /** Used for the foreground of a borderless, tertiary danger (destructive) button in the default state. */
   --gl-button-danger-tertiary-foreground-color-hover: var(--gl-action-danger-foreground-color-hover); /** Used for the foreground of a borderless, tertiary danger (destructive) button in the hover state. */
@@ -997,9 +1007,6 @@
   --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-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-chart-axis-text-color: var(--gl-text-color-subtle); /** Used in charts for the text color of axis titles and labels. */
   --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /** Used for the datepicker date text color state indicators. */
@@ -1052,7 +1059,6 @@
   --gl-action-strong-confirm-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-default); /** Used for the foreground of a strong confirm action in the hover state. */
   --gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-default); /** Used for the border of a strong confirm action in the hover state. */
   --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /** Used for the background of a strong neutral action in the focus state. */
-  --gl-action-strong-neutral-foreground-color-hover: var(--gl-color-neutral-0); /** Used for the foreground of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /** Used for the border of a strong neutral action in the hover state. */
   --gl-control-text-color-error: var(--gl-text-color-danger); /** Used for the helper text when the input is invalid. */
   --gl-control-text-color-valid: var(--gl-text-color-success); /** Used for the helper text when the input is valid. */
@@ -1094,10 +1100,6 @@
   --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-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-card-border-radius: var(--gl-border-radius-default); /** Used for card border radius. */
   --gl-chart-axis-pointer-color: var(--gl-icon-color-subtle); /** Used in charts for the color of the reference line and axis value under mouse pointer. */
   --gl-chart-zoom-handle-color: var(--gl-icon-color-subtle); /** Used in charts for the handle color when zooming in on a specific area of data. */
@@ -1112,7 +1114,6 @@
   --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /** Used for the border of a selected action in the focus state. */
   --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /** Used for the foreground of a strong confirm action in the focus state. */
   --gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-hover); /** Used for the border of a strong confirm action in the focus state. */
-  --gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-hover); /** Used for the foreground of a strong neutral action in the focus state. */
   --gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-hover); /** Used for the border of a strong neutral action in the focus state. */
   --gl-control-border-radius: var(--gl-border-radius-default); /** Used for form control (input, radio button, checkbox, textarea) default border radius. */
   --gl-button-border-radius: var(--gl-action-border-radius); /** Used for button border radius. */
@@ -1120,7 +1121,6 @@
   --gl-action-selected-foreground-color-active: var(--gl-action-selected-foreground-color-focus); /** Used for the foreground of a selected action in the active state. */
   --gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a strong confirm action in the active state. */
   --gl-action-strong-confirm-border-color-active: var(--gl-action-strong-confirm-border-color-focus); /** Used for the border of a strong confirm action in the active state. */
-  --gl-action-strong-neutral-foreground-color-active: var(--gl-action-strong-neutral-foreground-color-focus); /** Used for the foreground of a strong neutral action in the active state. */
   --gl-action-strong-neutral-border-color-active: var(--gl-action-strong-neutral-border-color-focus); /** Used for the border of a strong neutral action in the active state. */
   --gl-button-confirm-primary-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-active); /** Used for the foreground of a confirm (positive) primary button in the active state. */
 }