@gitlab/ui 123.6.1 → 123.8.0

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

@@ -228,6 +228,17 @@ $gl-color-brand-gray-03: #74717a;
 $gl-color-brand-gray-04: #45424d;
 $gl-color-brand-gray-05: #2b2838;
 $gl-color-brand-pink-01g: #ffb9c9;
+$gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
+$gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
+$gl-font-size-xs: 0.625rem;
+$gl-font-size-sm: 0.75rem;
+$gl-font-size-md: 0.875rem;
+$gl-font-size-lg: 1rem;
+$gl-font-weight-100: 100;
+$gl-font-weight-300: 300;
+$gl-font-weight-normal: 400;
+$gl-font-weight-semibold: 500;
+$gl-font-weight-bold: 600;
 $gl-line-height-12: 0.75rem;
 $gl-line-height-16: 1rem;
 $gl-line-height-20: 1.25rem;
@@ -294,6 +305,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 +577,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.
@@ -571,15 +593,20 @@ $gl-border-color-default: $gl-color-neutral-700; // Used for the default border
 $gl-border-color-subtle: $gl-color-neutral-800; // Used for a subtle border in combination with the default background.
 $gl-border-color-strong: $gl-color-neutral-600; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
+$gl-font-size-base: $gl-font-size-md;
 $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 +746,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 +760,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 +777,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 +786,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 +872,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 +882,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 +958,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 +987,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 +996,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 +1008,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 +1017,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 +1069,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 +1110,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 +1124,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 +1131,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/dist/tokens/scss/_tokens.scss

@@ -228,6 +228,17 @@ $gl-color-brand-gray-03: #74717a;
 $gl-color-brand-gray-04: #45424d;
 $gl-color-brand-gray-05: #2b2838;
 $gl-color-brand-pink-01g: #ffb9c9;
+$gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
+$gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
+$gl-font-size-xs: 0.625rem;
+$gl-font-size-sm: 0.75rem;
+$gl-font-size-md: 0.875rem;
+$gl-font-size-lg: 1rem;
+$gl-font-weight-100: 100;
+$gl-font-weight-300: 300;
+$gl-font-weight-normal: 400;
+$gl-font-weight-semibold: 500;
+$gl-font-weight-bold: 600;
 $gl-line-height-12: 0.75rem;
 $gl-line-height-16: 1rem;
 $gl-line-height-20: 1.25rem;
@@ -571,6 +582,7 @@ $gl-border-color-default: $gl-color-neutral-100; // Used for the default border
 $gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
 $gl-border-color-strong: $gl-color-neutral-200; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
+$gl-font-size-base: $gl-font-size-md;
 $gl-shadow-color-default: $gl-color-alpha-dark-16; // Used for the default shadow color.
 $gl-alert-neutral-border-top-color: $gl-color-alpha-0; // 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.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -243,6 +243,18 @@ $gl-color-brand-gray-03: var(--gl-color-brand-gray-03);
 $gl-color-brand-gray-04: var(--gl-color-brand-gray-04);
 $gl-color-brand-gray-05: var(--gl-color-brand-gray-05);
 $gl-color-brand-pink-01g: var(--gl-color-brand-pink-01g);
+$gl-font-family-regular: var(--gl-font-family-regular);
+$gl-font-family-monospace: var(--gl-font-family-monospace);
+$gl-font-size-xs: var(--gl-font-size-xs);
+$gl-font-size-sm: var(--gl-font-size-sm);
+$gl-font-size-md: var(--gl-font-size-md);
+$gl-font-size-lg: var(--gl-font-size-lg);
+$gl-font-size-base: var(--gl-font-size-base);
+$gl-font-weight-100: var(--gl-font-weight-100);
+$gl-font-weight-300: var(--gl-font-weight-300);
+$gl-font-weight-normal: var(--gl-font-weight-normal);
+$gl-font-weight-semibold: var(--gl-font-weight-semibold);
+$gl-font-weight-bold: var(--gl-font-weight-bold);
 $gl-line-height-12: var(--gl-line-height-12);
 $gl-line-height-16: var(--gl-line-height-16);
 $gl-line-height-20: var(--gl-line-height-20);

package/dist/tokens/tailwind/tokens.cjs

@@ -25,6 +25,10 @@
   const opacity = {"0":"var(--gl-opacity-0)","1":"var(--gl-opacity-1)","2":"var(--gl-opacity-2)","3":"var(--gl-opacity-3)","4":"var(--gl-opacity-4)","5":"var(--gl-opacity-5)","6":"var(--gl-opacity-6)","7":"var(--gl-opacity-7)","8":"var(--gl-opacity-8)","9":"var(--gl-opacity-9)","10":"var(--gl-opacity-10)"};
   const zindexes = {"0":"var(--gl-zindex-0)","1":"var(--gl-zindex-1)","2":"var(--gl-zindex-2)","3":"var(--gl-zindex-3)","4":"var(--gl-zindex-4)","200":"var(--gl-zindex-200)","9999":"var(--gl-zindex-9999)"};
   const boxShadow = {"sm":"var(--gl-shadow-sm)","md":"var(--gl-shadow-md)","lg":"var(--gl-shadow-lg)"};
+  const lineHeight = {"12":"var(--gl-line-height-12)","16":"var(--gl-line-height-16)","20":"var(--gl-line-height-20)","24":"var(--gl-line-height-24)","28":"var(--gl-line-height-28)","32":"var(--gl-line-height-32)","36":"var(--gl-line-height-36)","42":"var(--gl-line-height-42)","44":"var(--gl-line-height-44)","52":"var(--gl-line-height-52)"};
+  const fontFamily = {"regular":"var(--gl-font-family-regular)","monospace":"var(--gl-font-family-monospace)"};
+  const fontSize = {"xs":"var(--gl-font-size-xs)","sm":"var(--gl-font-size-sm)","md":"var(--gl-font-size-md)","lg":"var(--gl-font-size-lg)","base":"var(--gl-font-size-base)"};
+  const fontWeight = {"100":"var(--gl-font-weight-100)","300":"var(--gl-font-weight-300)","normal":"var(--gl-font-weight-normal)","semibold":"var(--gl-font-weight-semibold)","bold":"var(--gl-font-weight-bold)"};
 
   const colors = {
     inherit: 'inherit',
@@ -109,5 +113,9 @@
     opacity,
     zIndex: zindexes,
     boxShadow,
+    lineHeight,
+    fontFamily,
+    fontSize,
+    fontWeight,
   }
   

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "123.6.1",
+  "version": "123.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -104,7 +104,7 @@
     "@gitlab/svgs": "3.147.0",
     "@jest/test-sequencer": "30.2.0",
     "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-node-resolve": "^16.0.2",
     "@rollup/plugin-replace": "^6.0.2",
     "@storybook/addon-a11y": "^7.6.20",
     "@storybook/addon-docs": "^7.6.20",

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/scss/variables.scss

@@ -111,9 +111,6 @@ $gl-text-wrap-heading: pretty;
 
 // default (min-width: 0)
 $gl-font-size: px-to-rem(14px);
-$gl-font-size-xs: px-to-rem(10px);
-$gl-font-size-sm: px-to-rem(12px);
-$gl-font-size-lg: px-to-rem(16px);
 
 $gl-font-size-h-display: px-to-rem(28px);
 $gl-font-size-h1: px-to-rem(23px);

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

@@ -230,6 +230,17 @@
   --gl-color-brand-gray-04: #45424d;
   --gl-color-brand-gray-05: #2b2838;
   --gl-color-brand-pink-01g: #ffb9c9;
+  --gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
+  --gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
+  --gl-font-size-xs: 0.625rem;
+  --gl-font-size-sm: 0.75rem;
+  --gl-font-size-md: 0.875rem;
+  --gl-font-size-lg: 1rem;
+  --gl-font-weight-100: 100;
+  --gl-font-weight-300: 300;
+  --gl-font-weight-normal: 400;
+  --gl-font-weight-semibold: 500;
+  --gl-font-weight-bold: 600;
   --gl-line-height-12: 0.75rem;
   --gl-line-height-16: 1rem;
   --gl-line-height-20: 1.25rem;
@@ -573,6 +584,7 @@
   --gl-border-color-subtle: var(--gl-color-neutral-50); /** Used for a subtle border in combination with the default background. */
   --gl-border-color-strong: var(--gl-color-neutral-200); /** Used for a distinct border that emphasizes an edge or boundaries. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */
+  --gl-font-size-base: var(--gl-font-size-md);
   --gl-shadow-color-default: var(--gl-color-alpha-dark-16); /** Used for the default shadow color. */
   --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /** 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. */