@gitlab/ui 89.1.0 → 89.3.0

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

@@ -404,6 +404,7 @@ $gl-color-alpha-light-8: rgba(255, 255, 255, 0.08);
 $gl-color-alpha-light-6: rgba(255, 255, 255, 0.06);
 $gl-color-alpha-light-4: rgba(255, 255, 255, 0.04);
 $gl-color-alpha-light-2: rgba(255, 255, 255, 0.02);
+$gl-color-alpha-dark-40: rgba(05, 05, 06, 0.4);
 $gl-color-alpha-dark-24: rgba(05, 05, 06, 0.24);
 $gl-color-alpha-dark-16: rgba(05, 05, 06, 0.16);
 $gl-color-alpha-dark-8: rgba(05, 05, 06, 0.08);
@@ -477,23 +478,22 @@ $gl-feedback-strong-icon-color: $gl-color-neutral-900; // Used for an icon on a
 $gl-feedback-strong-text-color: $gl-color-neutral-900; // Used for text on a strong feedback background.
 $gl-feedback-strong-background-color: $gl-color-neutral-10; // Used for a background associated with strong feedback like a tooltip or toast message.
 $gl-control-indicator-color-disabled: $gl-color-neutral-400; // Used for disabled checkbox and radio button state indicators.
-$gl-control-indicator-color-selected: $gl-color-neutral-900; // Used for checkbox and radio button state indicators.
-$gl-control-placeholder-color: $gl-color-neutral-500; // Used for placeholder text within inputs.
-$gl-control-text-color-valid: $gl-color-green-400; // Used for the helper text when the input is valid.
-$gl-control-text-color-error: $gl-color-red-400; // Used for the helper text when the input is invalid.
+$gl-control-indicator-color-selected: $gl-color-neutral-950; // Used for checkbox and radio button state indicators.
 $gl-control-border-color-selected-focus: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
 $gl-control-border-color-selected-hover: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
 $gl-control-border-color-selected-default: $gl-color-blue-400; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
-$gl-control-border-color-error: $gl-color-red-400; // Used for invalid form control (input, textarea) border.
+$gl-control-border-color-error: $gl-color-red-300; // Used for invalid form control (input, textarea) border.
 $gl-control-border-color-disabled: $gl-color-neutral-800; // Used for disabled form control (input, radio button, checkbox, textarea) border.
 $gl-control-border-color-focus: $gl-color-neutral-50; // Used for form control (input, radio button, checkbox, textarea) border on focus.
 $gl-control-border-color-hover: $gl-color-neutral-300; // Used for form control (input, radio button, checkbox, textarea) border on hover.
 $gl-control-border-color-default: $gl-color-neutral-500; // Used for form control (input, radio button, checkbox, textarea) default border.
 $gl-control-background-color-selected-focus: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 $gl-control-background-color-selected-hover: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
-$gl-control-background-color-selected-default: $gl-color-blue-400; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
-$gl-control-background-color-disabled: $gl-color-neutral-950; // Used for disabled form control (checkbox, input, radio button, textarea) background.
-$gl-control-background-color-default: $gl-color-neutral-900; // Used for form control (input, radio button, checkbox, textarea) default background.
+$gl-control-background-color-selected-default: $gl-color-blue-300; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
+$gl-control-background-color-readonly: $gl-color-neutral-900; // Used for the background of static content that prepends or appends a text input.
+$gl-control-background-color-concatenation: $gl-color-alpha-light-4; // Used for the background of static content that prepends or appends a text input.
+$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-default: $gl-color-alpha-dark-40; // Used for form control (input, radio button, checkbox, textarea) default background.
 $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
 $gl-spinner-segment-color-default: $gl-color-neutral-200; // Used for the animated segment of a loading spinner.
 $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner on a dark background.
@@ -513,6 +513,7 @@ $gl-label-light-button-icon-color-default: $gl-color-neutral-950; // Used for th
 $gl-label-light-button-background-color-hover: $gl-color-neutral-950; // Used for the label remove button background on a light background color in the hover state.
 $gl-label-light-button-background-color-default: $gl-color-alpha-0; // Used for the label remove button background on a light background color in the default state.
 $gl-label-light-text-color: $gl-color-neutral-950; // Used for the label text color on a light background color.
+$gl-datepicker-background-color: $gl-color-neutral-900; // Used for the background color of datepicker.
 $gl-button-disabled-border-color: $gl-color-neutral-800; // Used for the border of a disabled button.
 $gl-button-disabled-background-color: $gl-color-neutral-950; // Used for the background of a disabled button.
 $gl-button-disabled-foreground-color: $gl-color-neutral-400; // Used for the foreground of a disabled button.
@@ -571,90 +572,90 @@ $gl-button-default-primary-foreground-color-default: $gl-color-neutral-50; // Us
 $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
 $gl-banner-promo-background-color: $gl-color-neutral-900; // Used as background for the default banner type.
 $gl-banner-intro-border-color: $gl-color-blue-600; // Used to compliment the info banner.
-$gl-badge-tier-icon-color-active: $gl-color-purple-300; // Used for the icon of a tier related badge in the active state.
-$gl-badge-tier-icon-color-hover: $gl-color-purple-400; // Used for the icon of a tier related badge in the hover state.
-$gl-badge-tier-icon-color-default: $gl-color-purple-500; // Used for the icon of a tier related badge when static or the default state when linked.
-$gl-badge-tier-text-color-active: $gl-color-purple-100; // Used for the text of a tier related badge in the active state.
-$gl-badge-tier-text-color-hover: $gl-color-purple-200; // Used for the text of a tier related badge in the hover state.
-$gl-badge-tier-text-color-default: $gl-color-purple-300; // Used for the text of a tier related badge when static or the default state when linked.
+$gl-badge-tier-icon-color-active: $gl-color-purple-950; // Used for the icon of a tier related badge in the active state.
+$gl-badge-tier-icon-color-hover: $gl-color-purple-950; // Used for the icon of a tier related badge in the hover state.
+$gl-badge-tier-icon-color-default: $gl-color-purple-950; // Used for the icon of a tier related badge when static or the default state when linked.
+$gl-badge-tier-text-color-active: $gl-color-purple-950; // Used for the text of a tier related badge in the active state.
+$gl-badge-tier-text-color-hover: $gl-color-purple-950; // Used for the text of a tier related badge in the hover state.
+$gl-badge-tier-text-color-default: $gl-color-purple-950; // Used for the text of a tier related badge when static or the default state when linked.
 $gl-badge-tier-border-color-active: $gl-color-alpha-0; // Used for the border of a tier related badge in the active state.
 $gl-badge-tier-border-color-focus: $gl-color-alpha-0; // Used for the border of a tier related badge in the focus state.
-$gl-badge-tier-border-color-hover: $gl-color-purple-800; // Used for the border of a tier related badge in the hover state.
+$gl-badge-tier-border-color-hover: $gl-color-purple-200; // Used for the border of a tier related badge in the hover state.
 $gl-badge-tier-border-color-default: $gl-color-alpha-0; // Used for the border of a tier related badge when static or the default state when linked.
-$gl-badge-tier-background-color-active: $gl-color-purple-800; // Used for the background of a tier related badge in the active state.
-$gl-badge-tier-background-color-default: $gl-color-purple-900; // Used for the background of a tier related badge when static or the default state when linked.
-$gl-badge-danger-icon-color-active: $gl-color-red-200; // Used for the icon of a danger badge in the active state.
-$gl-badge-danger-icon-color-hover: $gl-color-red-300; // Used for the icon of a danger badge in the hover state.
-$gl-badge-danger-icon-color-default: $gl-color-red-400; // Used for the icon of a danger badge when static or the default state when linked.
-$gl-badge-danger-text-color-active: $gl-color-red-50; // Used for the text of a danger badge in the active state.
-$gl-badge-danger-text-color-hover: $gl-color-red-100; // Used for the text of a danger badge in the hover state.
-$gl-badge-danger-text-color-default: $gl-color-red-200; // Used for the text of a danger badge when static or the default state when linked.
+$gl-badge-tier-background-color-active: $gl-color-purple-200; // Used for the background of a tier related badge in the active state.
+$gl-badge-tier-background-color-default: $gl-color-purple-300; // Used for the background of a tier related badge when static or the default state when linked.
+$gl-badge-danger-icon-color-active: $gl-color-red-950; // Used for the icon of a danger badge in the active state.
+$gl-badge-danger-icon-color-hover: $gl-color-red-950; // Used for the icon of a danger badge in the hover state.
+$gl-badge-danger-icon-color-default: $gl-color-red-950; // Used for the icon of a danger badge when static or the default state when linked.
+$gl-badge-danger-text-color-active: $gl-color-red-950; // Used for the text of a danger badge in the active state.
+$gl-badge-danger-text-color-hover: $gl-color-red-950; // Used for the text of a danger badge in the hover state.
+$gl-badge-danger-text-color-default: $gl-color-red-950; // Used for the text of a danger badge when static or the default state when linked.
 $gl-badge-danger-border-color-active: $gl-color-alpha-0; // Used for the border of a danger badge in the active state.
 $gl-badge-danger-border-color-focus: $gl-color-alpha-0; // Used for the border of a danger badge in the focus state.
-$gl-badge-danger-border-color-hover: $gl-color-red-700; // Used for the border of a danger badge in the hover state.
+$gl-badge-danger-border-color-hover: $gl-color-red-200; // Used for the border of a danger badge in the hover state.
 $gl-badge-danger-border-color-default: $gl-color-alpha-0; // Used for the border of a danger badge when static or the default state when linked.
-$gl-badge-danger-background-color-active: $gl-color-red-700; // Used for the background of a danger badge in the active state.
-$gl-badge-danger-background-color-default: $gl-color-red-800; // Used for the background of a danger badge when static or the default state when linked.
-$gl-badge-warning-icon-color-active: $gl-color-orange-200; // Used for the icon of a warning badge in the active state.
-$gl-badge-warning-icon-color-hover: $gl-color-orange-300; // Used for the icon of a warning badge in the hover state.
-$gl-badge-warning-icon-color-default: $gl-color-orange-400; // Used for the icon of a warning badge when static or the default state when linked.
-$gl-badge-warning-text-color-active: $gl-color-orange-50; // Used for the text of a warning badge in the active state.
-$gl-badge-warning-text-color-hover: $gl-color-orange-100; // Used for the text of a warning badge in the hover state.
-$gl-badge-warning-text-color-default: $gl-color-orange-200; // Used for the text of a warning badge when static or the default state when linked.
+$gl-badge-danger-background-color-active: $gl-color-red-200; // Used for the background of a danger badge in the active state.
+$gl-badge-danger-background-color-default: $gl-color-red-300; // Used for the background of a danger badge when static or the default state when linked.
+$gl-badge-warning-icon-color-active: $gl-color-orange-950; // Used for the icon of a warning badge in the active state.
+$gl-badge-warning-icon-color-hover: $gl-color-orange-950; // Used for the icon of a warning badge in the hover state.
+$gl-badge-warning-icon-color-default: $gl-color-orange-950; // Used for the icon of a warning badge when static or the default state when linked.
+$gl-badge-warning-text-color-active: $gl-color-orange-950; // Used for the text of a warning badge in the active state.
+$gl-badge-warning-text-color-hover: $gl-color-orange-950; // Used for the text of a warning badge in the hover state.
+$gl-badge-warning-text-color-default: $gl-color-orange-950; // Used for the text of a warning badge when static or the default state when linked.
 $gl-badge-warning-border-color-active: $gl-color-alpha-0; // Used for the border of a warning badge in the active state.
 $gl-badge-warning-border-color-focus: $gl-color-alpha-0; // Used for the border of a warning badge in the focus state.
-$gl-badge-warning-border-color-hover: $gl-color-orange-700; // Used for the border of a warning badge in the hover state.
+$gl-badge-warning-border-color-hover: $gl-color-orange-200; // Used for the border of a warning badge in the hover state.
 $gl-badge-warning-border-color-default: $gl-color-alpha-0; // Used for the border of a warning badge when static or the default state when linked.
-$gl-badge-warning-background-color-active: $gl-color-orange-700; // Used for the background of a warning badge in the active state.
-$gl-badge-warning-background-color-default: $gl-color-orange-800; // Used for the background of a warning badge when static or the default state when linked.
-$gl-badge-success-icon-color-active: $gl-color-green-200; // Used for the icon of a success badge in the active state.
-$gl-badge-success-icon-color-hover: $gl-color-green-300; // Used for the icon of a success badge in the hover state.
-$gl-badge-success-icon-color-default: $gl-color-green-400; // Used for the icon of a success badge when static or the default state when linked.
-$gl-badge-success-text-color-active: $gl-color-green-50; // Used for the text of a success badge in the active state.
-$gl-badge-success-text-color-hover: $gl-color-green-100; // Used for the text of a success badge in the hover state.
-$gl-badge-success-text-color-default: $gl-color-green-200; // Used for the text of a success badge when static or the default state when linked.
+$gl-badge-warning-background-color-active: $gl-color-orange-200; // Used for the background of a warning badge in the active state.
+$gl-badge-warning-background-color-default: $gl-color-orange-300; // Used for the background of a warning badge when static or the default state when linked.
+$gl-badge-success-icon-color-active: $gl-color-green-950; // Used for the icon of a success badge in the active state.
+$gl-badge-success-icon-color-hover: $gl-color-green-950; // Used for the icon of a success badge in the hover state.
+$gl-badge-success-icon-color-default: $gl-color-green-950; // Used for the icon of a success badge when static or the default state when linked.
+$gl-badge-success-text-color-active: $gl-color-green-950; // Used for the text of a success badge in the active state.
+$gl-badge-success-text-color-hover: $gl-color-green-950; // Used for the text of a success badge in the hover state.
+$gl-badge-success-text-color-default: $gl-color-green-950; // Used for the text of a success badge when static or the default state when linked.
 $gl-badge-success-border-color-active: $gl-color-alpha-0; // Used for the border of a success badge in the active state.
 $gl-badge-success-border-color-focus: $gl-color-alpha-0; // Used for the border of a success badge in the focus state.
-$gl-badge-success-border-color-hover: $gl-color-green-700; // Used for the border of a success badge in the hover state.
+$gl-badge-success-border-color-hover: $gl-color-green-200; // Used for the border of a success badge in the hover state.
 $gl-badge-success-border-color-default: $gl-color-alpha-0; // Used for the border of a success badge when static or the default state when linked.
-$gl-badge-success-background-color-active: $gl-color-green-700; // Used for the background of a success badge in the active state.
-$gl-badge-success-background-color-default: $gl-color-green-800; // Used for the background of a success badge when static or the default state when linked.
-$gl-badge-info-icon-color-active: $gl-color-blue-200; // Used for the icon of an informational badge in the active state.
-$gl-badge-info-icon-color-hover: $gl-color-blue-300; // Used for the icon of an informational badge in the hover state.
-$gl-badge-info-icon-color-default: $gl-color-blue-400; // Used for the icon of an informational badge when static or the default state when linked.
-$gl-badge-info-text-color-active: $gl-color-blue-50; // Used for the text of an informational badge in the active state.
-$gl-badge-info-text-color-hover: $gl-color-blue-100; // Used for the text of an informational badge in the hover state.
-$gl-badge-info-text-color-default: $gl-color-blue-200; // Used for the text of an informational badge when static or the default state when linked.
+$gl-badge-success-background-color-active: $gl-color-green-200; // Used for the background of a success badge in the active state.
+$gl-badge-success-background-color-default: $gl-color-green-300; // Used for the background of a success badge when static or the default state when linked.
+$gl-badge-info-icon-color-active: $gl-color-blue-950; // Used for the icon of an informational badge in the active state.
+$gl-badge-info-icon-color-hover: $gl-color-blue-950; // Used for the icon of an informational badge in the hover state.
+$gl-badge-info-icon-color-default: $gl-color-blue-950; // Used for the icon of an informational badge when static or the default state when linked.
+$gl-badge-info-text-color-active: $gl-color-blue-950; // Used for the text of an informational badge in the active state.
+$gl-badge-info-text-color-hover: $gl-color-blue-950; // Used for the text of an informational badge in the hover state.
+$gl-badge-info-text-color-default: $gl-color-blue-950; // Used for the text of an informational badge when static or the default state when linked.
 $gl-badge-info-border-color-active: $gl-color-alpha-0; // Used for the border of an informational badge in the active state.
 $gl-badge-info-border-color-focus: $gl-color-alpha-0; // Used for the border of an informational badge in the focus state.
-$gl-badge-info-border-color-hover: $gl-color-blue-700; // Used for the border of an informational badge in the hover state.
+$gl-badge-info-border-color-hover: $gl-color-blue-200; // Used for the border of an informational badge in the hover state.
 $gl-badge-info-border-color-default: $gl-color-alpha-0; // Used for the border of an informational badge when static or the default state when linked.
-$gl-badge-info-background-color-active: $gl-color-blue-700; // Used for the background of an informational badge in the active state.
-$gl-badge-info-background-color-default: $gl-color-blue-800; // Used for the background of an informational badge when static or the default state when linked.
-$gl-badge-neutral-icon-color-active: $gl-color-neutral-200; // Used for the icon of a neutral badge in the active state.
-$gl-badge-neutral-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a neutral badge in the hover state.
-$gl-badge-neutral-icon-color-default: $gl-color-neutral-400; // Used for the icon of a neutral badge when static or the default state when linked.
-$gl-badge-neutral-text-color-active: $gl-color-neutral-50; // Used for the text of a neutral badge in the active state.
-$gl-badge-neutral-text-color-hover: $gl-color-neutral-100; // Used for the text of a neutral badge in the hover state.
-$gl-badge-neutral-text-color-default: $gl-color-neutral-200; // Used for the text of a neutral badge when static or the default state when linked.
+$gl-badge-info-background-color-active: $gl-color-blue-200; // Used for the background of an informational badge in the active state.
+$gl-badge-info-background-color-default: $gl-color-blue-300; // Used for the background of an informational badge when static or the default state when linked.
+$gl-badge-neutral-icon-color-active: $gl-color-neutral-950; // Used for the icon of a neutral badge in the active state.
+$gl-badge-neutral-icon-color-hover: $gl-color-neutral-950; // Used for the icon of a neutral badge in the hover state.
+$gl-badge-neutral-icon-color-default: $gl-color-neutral-950; // Used for the icon of a neutral badge when static or the default state when linked.
+$gl-badge-neutral-text-color-active: $gl-color-neutral-950; // Used for the text of a neutral badge in the active state.
+$gl-badge-neutral-text-color-hover: $gl-color-neutral-950; // Used for the text of a neutral badge in the hover state.
+$gl-badge-neutral-text-color-default: $gl-color-neutral-950; // Used for the text of a neutral badge when static or the default state when linked.
 $gl-badge-neutral-border-color-active: $gl-color-alpha-0; // Used for the border of a neutral badge in the active state.
 $gl-badge-neutral-border-color-focus: $gl-color-alpha-0; // Used for the border of a neutral badge in the focus state.
-$gl-badge-neutral-border-color-hover: $gl-color-neutral-700; // Used for the border of a neutral badge in the hover state.
+$gl-badge-neutral-border-color-hover: $gl-color-neutral-200; // Used for the border of a neutral badge in the hover state.
 $gl-badge-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a neutral badge when static or the default state when linked.
-$gl-badge-neutral-background-color-active: $gl-color-neutral-700; // Used for the background of a neutral badge in the active state.
-$gl-badge-neutral-background-color-default: $gl-color-neutral-800; // Used for the background of a neutral badge when static or the default state when linked.
-$gl-badge-muted-icon-color-active: $gl-color-neutral-200; // Used for the icon of a muted badge in the active state.
-$gl-badge-muted-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a muted badge in the hover state.
-$gl-badge-muted-icon-color-default: $gl-color-neutral-400; // Used for the icon of a muted badge when static or the default state when linked.
-$gl-badge-muted-text-color-active: $gl-color-neutral-100; // Used for the text of a muted badge in the active state.
-$gl-badge-muted-text-color-hover: $gl-color-neutral-200; // Used for the text of a muted badge in the hover state.
-$gl-badge-muted-text-color-default: $gl-color-neutral-300; // Used for the text of a muted badge when static or the default state when linked.
+$gl-badge-neutral-background-color-active: $gl-color-neutral-200; // Used for the background of a neutral badge in the active state.
+$gl-badge-neutral-background-color-default: $gl-color-neutral-300; // Used for the background of a neutral badge when static or the default state when linked.
+$gl-badge-muted-icon-color-active: $gl-color-neutral-950; // Used for the icon of a muted badge in the active state.
+$gl-badge-muted-icon-color-hover: $gl-color-neutral-950; // Used for the icon of a muted badge in the hover state.
+$gl-badge-muted-icon-color-default: $gl-color-neutral-950; // Used for the icon of a muted badge when static or the default state when linked.
+$gl-badge-muted-text-color-active: $gl-color-neutral-950; // Used for the text of a muted badge in the active state.
+$gl-badge-muted-text-color-hover: $gl-color-neutral-950; // Used for the text of a muted badge in the hover state.
+$gl-badge-muted-text-color-default: $gl-color-neutral-950; // Used for the text of a muted badge when static or the default state when linked.
 $gl-badge-muted-border-color-active: $gl-color-alpha-0; // Used for the border of a muted badge in the active state.
 $gl-badge-muted-border-color-focus: $gl-color-alpha-0; // Used for the border of a muted badge in the focus state.
-$gl-badge-muted-border-color-hover: $gl-color-neutral-700; // Used for the border of a muted badge in the hover state.
+$gl-badge-muted-border-color-hover: $gl-color-neutral-300; // Used for the border of a muted badge in the hover state.
 $gl-badge-muted-border-color-default: $gl-color-alpha-0; // Used for the border of a muted badge when static or the default state when linked.
-$gl-badge-muted-background-color-active: $gl-color-neutral-800; // Used for the background of a muted badge in the active state.
-$gl-badge-muted-background-color-default: $gl-color-neutral-900; // Used for the background of a muted badge when static or the default state when linked.
+$gl-badge-muted-background-color-active: $gl-color-neutral-300; // Used for the background of a muted badge in the active state.
+$gl-badge-muted-background-color-default: $gl-color-neutral-400; // Used for the background of a muted badge when static or the default state when linked.
 $gl-avatar-fallback-text-color-neutral: $gl-color-neutral-200; // Neutral text color for avatar fallback with no particular meaning.
 $gl-avatar-fallback-text-color-orange: $gl-color-orange-200; // Orange text color for avatar fallback with no particular meaning.
 $gl-avatar-fallback-text-color-green: $gl-color-green-200; // Green text color for avatar fallback with no particular meaning.
@@ -689,6 +690,9 @@ $gl-action-disabled-border-color: $gl-color-neutral-800; // Used for the border
 $gl-action-disabled-background-color: $gl-color-neutral-900; // Used for the background of a disabled action.
 $gl-action-disabled-foreground-color: $gl-color-neutral-500; // Used for the foreground of a disabled action.
 $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
+$gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs.
+$gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
+$gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.

package/dist/tokens/scss/_tokens.scss

@@ -404,6 +404,7 @@ $gl-color-alpha-light-8: rgba(255, 255, 255, 0.08);
 $gl-color-alpha-light-6: rgba(255, 255, 255, 0.06);
 $gl-color-alpha-light-4: rgba(255, 255, 255, 0.04);
 $gl-color-alpha-light-2: rgba(255, 255, 255, 0.02);
+$gl-color-alpha-dark-40: rgba(05, 05, 06, 0.4);
 $gl-color-alpha-dark-24: rgba(05, 05, 06, 0.24);
 $gl-color-alpha-dark-16: rgba(05, 05, 06, 0.16);
 $gl-color-alpha-dark-8: rgba(05, 05, 06, 0.08);
@@ -478,9 +479,6 @@ $gl-feedback-strong-text-color: $gl-color-neutral-0; // Used for text on a stron
 $gl-feedback-strong-background-color: $gl-color-neutral-950; // Used for a background associated with strong feedback like a tooltip or toast message.
 $gl-control-indicator-color-disabled: $gl-color-neutral-500; // Used for disabled checkbox and radio button state indicators.
 $gl-control-indicator-color-selected: $gl-color-neutral-0; // Used for checkbox and radio button state indicators.
-$gl-control-placeholder-color: $gl-color-neutral-400; // Used for placeholder text within inputs.
-$gl-control-text-color-valid: $gl-color-green-500; // Used for the helper text when the input is valid.
-$gl-control-text-color-error: $gl-color-red-500; // Used for the helper text when the input is invalid.
 $gl-control-border-color-selected-focus: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
 $gl-control-border-color-selected-hover: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
 $gl-control-border-color-selected-default: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
@@ -492,6 +490,8 @@ $gl-control-border-color-default: $gl-color-neutral-400; // Used for form contro
 $gl-control-background-color-selected-focus: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 $gl-control-background-color-selected-hover: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 $gl-control-background-color-selected-default: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
+$gl-control-background-color-readonly: $gl-color-neutral-10; // Used for the background of static content that prepends or appends a text input.
+$gl-control-background-color-concatenation: $gl-color-neutral-10; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-disabled: $gl-color-neutral-10; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-default: $gl-color-neutral-0; // Used for form control (input, radio button, checkbox, textarea) default background.
 $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
@@ -513,6 +513,7 @@ $gl-label-light-button-icon-color-default: $gl-color-neutral-950; // Used for th
 $gl-label-light-button-background-color-hover: $gl-color-neutral-950; // Used for the label remove button background on a light background color in the hover state.
 $gl-label-light-button-background-color-default: $gl-color-alpha-0; // Used for the label remove button background on a light background color in the default state.
 $gl-label-light-text-color: $gl-color-neutral-950; // Used for the label text color on a light background color.
+$gl-datepicker-background-color: $gl-color-neutral-0; // Used for the background color of datepicker.
 $gl-button-disabled-border-color: $gl-color-neutral-100; // Used for the border of a disabled button.
 $gl-button-disabled-background-color: $gl-color-neutral-10; // Used for the background of a disabled button.
 $gl-button-disabled-foreground-color: $gl-color-neutral-500; // Used for the foreground of a disabled button.
@@ -571,9 +572,9 @@ $gl-button-default-primary-foreground-color-default: $gl-color-neutral-800; // U
 $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
 $gl-banner-promo-background-color: $gl-color-neutral-10; // Used as background for the default banner type.
 $gl-banner-intro-border-color: $gl-color-blue-300; // Used to compliment the info banner.
-$gl-badge-tier-icon-color-active: $gl-color-purple-700; // Used for the icon of a tier related badge in the active state.
-$gl-badge-tier-icon-color-hover: $gl-color-purple-600; // Used for the icon of a tier related badge in the hover state.
-$gl-badge-tier-icon-color-default: $gl-color-purple-500; // Used for the icon of a tier related badge when static or the default state when linked.
+$gl-badge-tier-icon-color-active: $gl-color-purple-900; // Used for the icon of a tier related badge in the active state.
+$gl-badge-tier-icon-color-hover: $gl-color-purple-800; // Used for the icon of a tier related badge in the hover state.
+$gl-badge-tier-icon-color-default: $gl-color-purple-700; // Used for the icon of a tier related badge when static or the default state when linked.
 $gl-badge-tier-text-color-active: $gl-color-purple-900; // Used for the text of a tier related badge in the active state.
 $gl-badge-tier-text-color-hover: $gl-color-purple-800; // Used for the text of a tier related badge in the hover state.
 $gl-badge-tier-text-color-default: $gl-color-purple-700; // Used for the text of a tier related badge when static or the default state when linked.
@@ -583,9 +584,9 @@ $gl-badge-tier-border-color-hover: $gl-color-purple-200; // Used for the border
 $gl-badge-tier-border-color-default: $gl-color-alpha-0; // Used for the border of a tier related badge when static or the default state when linked.
 $gl-badge-tier-background-color-active: $gl-color-purple-200; // Used for the background of a tier related badge in the active state.
 $gl-badge-tier-background-color-default: $gl-color-purple-100; // Used for the background of a tier related badge when static or the default state when linked.
-$gl-badge-danger-icon-color-active: $gl-color-red-700; // Used for the icon of a danger badge in the active state.
-$gl-badge-danger-icon-color-hover: $gl-color-red-600; // Used for the icon of a danger badge in the hover state.
-$gl-badge-danger-icon-color-default: $gl-color-red-500; // Used for the icon of a danger badge when static or the default state when linked.
+$gl-badge-danger-icon-color-active: $gl-color-red-900; // Used for the icon of a danger badge in the active state.
+$gl-badge-danger-icon-color-hover: $gl-color-red-800; // Used for the icon of a danger badge in the hover state.
+$gl-badge-danger-icon-color-default: $gl-color-red-700; // Used for the icon of a danger badge when static or the default state when linked.
 $gl-badge-danger-text-color-active: $gl-color-red-900; // Used for the text of a danger badge in the active state.
 $gl-badge-danger-text-color-hover: $gl-color-red-800; // Used for the text of a danger badge in the hover state.
 $gl-badge-danger-text-color-default: $gl-color-red-700; // Used for the text of a danger badge when static or the default state when linked.
@@ -689,6 +690,9 @@ $gl-action-disabled-border-color: $gl-color-neutral-100; // Used for the border
 $gl-action-disabled-background-color: $gl-color-neutral-50; // Used for the background of a disabled action.
 $gl-action-disabled-foreground-color: $gl-color-neutral-400; // Used for the foreground of a disabled action.
 $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
+$gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs.
+$gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
+$gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -58,6 +58,7 @@ $gl-color-alpha-dark-6: var(--gl-color-alpha-dark-6);
 $gl-color-alpha-dark-8: var(--gl-color-alpha-dark-8);
 $gl-color-alpha-dark-16: var(--gl-color-alpha-dark-16);
 $gl-color-alpha-dark-24: var(--gl-color-alpha-dark-24);
+$gl-color-alpha-dark-40: var(--gl-color-alpha-dark-40);
 $gl-color-alpha-light-2: var(--gl-color-alpha-light-2);
 $gl-color-alpha-light-4: var(--gl-color-alpha-light-4);
 $gl-color-alpha-light-6: var(--gl-color-alpha-light-6);
@@ -524,6 +525,7 @@ $gl-button-selected-border-color-active: var(--gl-button-selected-border-color-a
 $gl-button-disabled-foreground-color: var(--gl-button-disabled-foreground-color);
 $gl-button-disabled-background-color: var(--gl-button-disabled-background-color);
 $gl-button-disabled-border-color: var(--gl-button-disabled-border-color);
+$gl-datepicker-background-color: var(--gl-datepicker-background-color);
 $gl-datepicker-date-text-color-selected: var(--gl-datepicker-date-text-color-selected);
 $gl-label-light-text-color: var(--gl-label-light-text-color);
 $gl-label-light-button-background-color-default: var(--gl-label-light-button-background-color-default);
@@ -548,6 +550,8 @@ $gl-table-row-background-color-hover: var(--gl-table-row-background-color-hover)
 $gl-table-sorting-icon-color: var(--gl-table-sorting-icon-color);
 $gl-control-background-color-default: var(--gl-control-background-color-default);
 $gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
+$gl-control-background-color-concatenation: var(--gl-control-background-color-concatenation);
+$gl-control-background-color-readonly: var(--gl-control-background-color-readonly);
 $gl-control-background-color-selected-default: var(--gl-control-background-color-selected-default);
 $gl-control-background-color-selected-hover: var(--gl-control-background-color-selected-hover);
 $gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-focus);

package/dist/tokens/tailwind/tokens.cjs

@@ -245,6 +245,7 @@ const alphaDarkColors = {
   8: 'var(--gl-color-alpha-dark-8, rgba(05, 05, 06, 0.08))',
   16: 'var(--gl-color-alpha-dark-16, rgba(05, 05, 06, 0.16))',
   24: 'var(--gl-color-alpha-dark-24, rgba(05, 05, 06, 0.24))',
+  40: 'var(--gl-color-alpha-dark-40, rgba(05, 05, 06, 0.4))',
 };
 const alphaLightColors = {
   2: 'var(--gl-color-alpha-light-2, rgba(255, 255, 255, 0.02))',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "89.1.0",
+  "version": "89.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -111,7 +111,7 @@
     "@babel/preset-env": "^7.25.3",
     "@babel/preset-react": "^7.24.7",
     "@cypress/grep": "^4.0.1",
-    "@gitlab/eslint-plugin": "19.6.0",
+    "@gitlab/eslint-plugin": "19.6.1",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.2.1",
     "@gitlab/svgs": "3.112.0",
@@ -156,7 +156,7 @@
     "esbuild": "^0.18.0",
     "eslint": "8.57.0",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "3.4.0",
+    "eslint-plugin-cypress": "3.5.0",
     "eslint-plugin-storybook": "0.8.0",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "10.3.3",

package/src/components/base/badge/badge.scss

@@ -5,19 +5,24 @@ $badge-min-width: $gl-spacing-scale-3;
   $variant,
   $color,
   $icon-color,
-  $bg,
+  $background-color,
   $hover-color,
   $hover-icon-color,
-  $border-color,
+  $hover-background-color,
+  $hover-border-color,
+  $focus-color,
+  $focus-icon-color,
+  $focus-background-color,
   $active-color,
   $active-icon-color,
-  $active-bg
+  $active-background-color
 ) {
   .gl-badge.badge-#{$variant} {
-    background-color: $bg;
+    background-color: $background-color;
     color: $color;
 
     .gl-badge-icon {
+      color: $icon-color;
       transition: inherit;
     }
   }
@@ -26,8 +31,8 @@ $badge-min-width: $gl-spacing-scale-3;
     &:hover {
       color: $hover-color;
       // Needed to override bootstrap's badge variant background
-      background-color: $bg;
-      box-shadow: inset 0 0 0 $gl-border-size-1 $border-color;
+      background-color: $hover-background-color;
+      box-shadow: inset 0 0 0 $gl-border-size-1 $hover-border-color;
       @include gl-text-decoration-none;
 
       .gl-badge-icon {
@@ -35,20 +40,20 @@ $badge-min-width: $gl-spacing-scale-3;
       }
     }
 
+
     &:focus {
-      color: $hover-color;
-      // Needed to override bootstrap's badge variant background
-      background-color: $bg;
+      color: $focus-color;
+      background-color: $focus-background-color;
 
       .gl-badge-icon {
-        color: $hover-icon-color;
+        color: $focus-icon-color;
       }
     }
 
     &.active,
     &:active {
       color: $active-color;
-      background-color: $active-bg;
+      background-color: $active-background-color;
 
       .gl-badge-icon {
         color: $active-icon-color;
@@ -118,91 +123,119 @@ $badge-min-width: $gl-spacing-scale-3;
   $variant: muted,
   $color: var(--gl-badge-muted-text-color-default),
   $icon-color: var(--gl-badge-muted-icon-color-default),
-  $bg: var(--gl-badge-muted-background-color-default),
+  $background-color: var(--gl-badge-muted-background-color-default),
   $hover-color: var(--gl-badge-muted-text-color-hover),
   $hover-icon-color: var(--gl-badge-muted-icon-color-hover),
-  $border-color: var(--gl-badge-muted-border-color-hover),
+  $hover-background-color: var(--gl-badge-muted-background-color-hover),
+  $hover-border-color: var(--gl-badge-muted-border-color-hover),
+  $focus-color: var(--gl-badge-muted-text-color-focus),
+  $focus-icon-color:var(--gl-badge-muted-icon-color-focus),
+  $focus-background-color: var(--gl-badge-muted-background-color-focus),
   $active-color: var(--gl-badge-muted-text-color-active),
   $active-icon-color:var(--gl-badge-muted-icon-color-active),
-  $active-bg: var(--gl-badge-muted-background-color-active)
+  $active-background-color: var(--gl-badge-muted-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: neutral,
   $color: var(--gl-badge-neutral-text-color-default),
   $icon-color: var(--gl-badge-neutral-icon-color-default),
-  $bg: var(--gl-badge-neutral-background-color-default),
+  $background-color: var(--gl-badge-neutral-background-color-default),
   $hover-color: var(--gl-badge-neutral-text-color-hover),
   $hover-icon-color: var(--gl-badge-neutral-icon-color-hover),
-  $border-color: var(--gl-badge-neutral-border-color-hover),
+  $hover-background-color: var(--gl-badge-neutral-background-color-hover),
+  $hover-border-color: var(--gl-badge-neutral-border-color-hover),
+  $focus-color: var(--gl-badge-neutral-text-color-focus),
+  $focus-icon-color:var(--gl-badge-neutral-icon-color-focus),
+  $focus-background-color: var(--gl-badge-neutral-background-color-focus),
   $active-color: var(--gl-badge-neutral-text-color-active),
   $active-icon-color:var(--gl-badge-neutral-icon-color-active),
-  $active-bg: var(--gl-badge-neutral-background-color-active)
+  $active-background-color: var(--gl-badge-neutral-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: info,
   $color: var(--gl-badge-info-text-color-default),
   $icon-color: var(--gl-badge-info-icon-color-default),
-  $bg: var(--gl-badge-info-background-color-default),
+  $background-color: var(--gl-badge-info-background-color-default),
   $hover-color: var(--gl-badge-info-text-color-hover),
   $hover-icon-color: var(--gl-badge-info-icon-color-hover),
-  $border-color: var(--gl-badge-info-border-color-hover),
+  $hover-background-color: var(--gl-badge-info-background-color-hover),
+  $hover-border-color: var(--gl-badge-info-border-color-hover),
+  $focus-color: var(--gl-badge-info-text-color-focus),
+  $focus-icon-color:var(--gl-badge-info-icon-color-focus),
+  $focus-background-color: var(--gl-badge-info-background-color-focus),
   $active-color: var(--gl-badge-info-text-color-active),
   $active-icon-color:var(--gl-badge-info-icon-color-active),
-  $active-bg: var(--gl-badge-info-background-color-active)
+  $active-background-color: var(--gl-badge-info-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: success,
   $color: var(--gl-badge-success-text-color-default),
   $icon-color: var(--gl-badge-success-icon-color-default),
-  $bg: var(--gl-badge-success-background-color-default),
+  $background-color: var(--gl-badge-success-background-color-default),
   $hover-color: var(--gl-badge-success-text-color-hover),
   $hover-icon-color: var(--gl-badge-success-icon-color-hover),
-  $border-color: var(--gl-badge-success-border-color-hover),
+  $hover-background-color: var(--gl-badge-success-background-color-hover),
+  $hover-border-color: var(--gl-badge-success-border-color-hover),
+  $focus-color: var(--gl-badge-success-text-color-focus),
+  $focus-icon-color:var(--gl-badge-success-icon-color-focus),
+  $focus-background-color: var(--gl-badge-success-background-color-focus),
   $active-color: var(--gl-badge-success-text-color-active),
   $active-icon-color:var(--gl-badge-success-icon-color-active),
-  $active-bg: var(--gl-badge-success-background-color-active)
+  $active-background-color: var(--gl-badge-success-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: warning,
   $color: var(--gl-badge-warning-text-color-default),
   $icon-color: var(--gl-badge-warning-icon-color-default),
-  $bg: var(--gl-badge-warning-background-color-default),
+  $background-color: var(--gl-badge-warning-background-color-default),
   $hover-color: var(--gl-badge-warning-text-color-hover),
   $hover-icon-color: var(--gl-badge-warning-icon-color-hover),
-  $border-color: var(--gl-badge-warning-border-color-hover),
+  $hover-background-color: var(--gl-badge-warning-background-color-hover),
+  $hover-border-color: var(--gl-badge-warning-border-color-hover),
+  $focus-color: var(--gl-badge-warning-text-color-focus),
+  $focus-icon-color:var(--gl-badge-warning-icon-color-focus),
+  $focus-background-color: var(--gl-badge-warning-background-color-focus),
   $active-color: var(--gl-badge-warning-text-color-active),
   $active-icon-color:var(--gl-badge-warning-icon-color-active),
-  $active-bg: var(--gl-badge-warning-background-color-active)
+  $active-background-color: var(--gl-badge-warning-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: danger,
   $color: var(--gl-badge-danger-text-color-default),
   $icon-color: var(--gl-badge-danger-icon-color-default),
-  $bg: var(--gl-badge-danger-background-color-default),
+  $background-color: var(--gl-badge-danger-background-color-default),
   $hover-color: var(--gl-badge-danger-text-color-hover),
   $hover-icon-color: var(--gl-badge-danger-icon-color-hover),
-  $border-color: var(--gl-badge-danger-border-color-hover),
+  $hover-background-color: var(--gl-badge-danger-background-color-hover),
+  $hover-border-color: var(--gl-badge-danger-border-color-hover),
+  $focus-color: var(--gl-badge-danger-text-color-focus),
+  $focus-icon-color:var(--gl-badge-danger-icon-color-focus),
+  $focus-background-color: var(--gl-badge-danger-background-color-focus),
   $active-color: var(--gl-badge-danger-text-color-active),
   $active-icon-color:var(--gl-badge-danger-icon-color-active),
-  $active-bg: var(--gl-badge-danger-background-color-active)
+  $active-background-color: var(--gl-badge-danger-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: tier,
   $color: var(--gl-badge-tier-text-color-default),
   $icon-color: var(--gl-badge-tier-icon-color-default),
-  $bg: var(--gl-badge-tier-background-color-default),
+  $background-color: var(--gl-badge-tier-background-color-default),
   $hover-color: var(--gl-badge-tier-text-color-hover),
   $hover-icon-color: var(--gl-badge-tier-icon-color-hover),
-  $border-color: var(--gl-badge-tier-border-color-hover),
+  $hover-background-color: var(--gl-badge-tier-background-color-hover),
+  $hover-border-color: var(--gl-badge-tier-border-color-hover),
+  $focus-color: var(--gl-badge-tier-text-color-focus),
+  $focus-icon-color:var(--gl-badge-tier-icon-color-focus),
+  $focus-background-color: var(--gl-badge-tier-background-color-focus),
   $active-color: var(--gl-badge-tier-text-color-active),
   $active-icon-color:var(--gl-badge-tier-icon-color-active),
-  $active-bg: var(--gl-badge-tier-background-color-active)
+  $active-background-color: var(--gl-badge-tier-background-color-active)
 );
 
 // overriding Bootstap's `.btn .badge {top: -1px}` as the badge is not vertically centered otherwise

package/src/components/base/datepicker/datepicker.scss

@@ -2,7 +2,7 @@
 $pd-text-color: var(--gl-text-color-default);
 $pd-title-color: var(--gl-action-neutral-foreground-color-default);
 $pd-title-bg: var(--gl-action-neutral-background-color-default);
-$pd-picker-bg: var(--gl-control-background-color-default);
+$pd-picker-bg: var(--gl-datepicker-background-color);
 $pd-picker-border: var(--gl-border-color-default);
 $pd-picker-border-bottom: var(--gl-border-color-default);
 $pd-th-color: var(--gl-text-color-subtle);
@@ -41,7 +41,7 @@ $pd-week-color: var(--gl-text-color-subtle);
   @apply gl-border-none;
   @apply gl-rounded-base;
   @include gl-mt-3;
-  background-color: var(--gl-control-background-color-default);
+  background-color: var(--gl-datepicker-background-color);
 
   &.is-bound {
     @include gl-shadow-md;
@@ -82,6 +82,11 @@ $pd-week-color: var(--gl-text-color-subtle);
       opacity: 100%;
 
       &::before {
+        /* Apply a slightly larger border-radius to the ::before pseudo-element
+        to prevent background color shimmer issue in Safari.
+        This is necessary because the parent element (which already has a border-radius)
+        requires the ::before element to extend beyond its edges to ensure proper coverage. */
+        @apply gl-rounded-lg;
         content: '';
         position: absolute;
         top: 0;