@gitlab/ui 85.9.0 → 85.11.0

package/src/tokens/build/scss/_tokens.dark.scss

@@ -514,6 +514,8 @@ $gl-control-background-color-selected-hover: $gl-color-blue-200; // Used for che
 $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-skeleton-loader-shimmer-color: $gl-color-neutral-700; // Used for the animated shimmer effect in a skeleton loader.
+$gl-skeleton-loader-background-color: $gl-color-neutral-800; // Used for the skeleton loader background color.
 $gl-popover-background-color: $gl-color-neutral-900; // Used for the background color of popover.
 $gl-breadcrumb-separator-color: $gl-color-neutral-700; // Used for the breadcrumb level separator.
 $gl-banner-promo-background-color: $gl-color-neutral-900; // Used as background for the default banner type.
@@ -530,10 +532,43 @@ $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-subtle: $gl-color-neutral-900; // Used for a border that has a little more definition, or is used in combination with a subtle background.
 $gl-border-color-default: $gl-color-neutral-800; // Used for the default border color.
+$gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
 $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-800; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.
 $gl-background-color-default: $gl-color-neutral-950; // Used for the default background color.
+$gl-action-confirm-icon-color-strong: $gl-color-neutral-900; // Used for the icon on a solid, strong confirm (positive) action background.
+$gl-action-confirm-icon-color-active: $gl-color-blue-50; // Used for the icon of a confirm (positive) action in the active state.
+$gl-action-confirm-icon-color-focus: $gl-color-blue-200; // Used for the icon of a confirm (positive) action in the focus state.
+$gl-action-confirm-icon-color-hover: $gl-color-blue-200; // Used for the icon of a confirm (positive) action in the hover state.
+$gl-action-confirm-icon-color-default: $gl-color-blue-400; // Used for the icon of a confirm (positive) action in the default state.
+$gl-action-confirm-text-color-strong: $gl-color-neutral-900; // Used for the text on a solid, strong confirm (positive) action background.
+$gl-action-confirm-text-color-active: $gl-color-blue-50; // Used for the text of a confirm (positive) action in the active state.
+$gl-action-confirm-text-color-focus: $gl-color-blue-200; // Used for the text of a confirm (positive) action in the focus state.
+$gl-action-confirm-text-color-hover: $gl-color-blue-200; // Used for the text of a confirm (positive) action in the hover state.
+$gl-action-confirm-text-color-default: $gl-color-blue-400; // Used for the text of a confirm (positive) action in the default state.
+$gl-action-confirm-border-color-strong-selected: $gl-color-blue-300; // Used for the border of a solid, strong confirm (positive) action when in a selected or current state.
+$gl-action-confirm-border-color-strong-active: $gl-color-blue-50; // Used for the border of a solid, strong confirm (positive) action in the active state.
+$gl-action-confirm-border-color-strong-focus: $gl-color-blue-100; // Used for the border of a solid, strong confirm (positive) action in the focus state.
+$gl-action-confirm-border-color-strong-hover: $gl-color-blue-100; // Used for the border of a solid, strong confirm (positive) action in the hover state.
+$gl-action-confirm-border-color-strong-default: $gl-color-blue-300; // Used for the border of a solid, strong confirm (positive) action in the default state.
+$gl-action-confirm-border-color-active: $gl-color-blue-50; // Used for the border of an outlined confirm (positive) action in the active state.
+$gl-action-confirm-border-color-focus: $gl-color-blue-200; // Used for the border of an outlined confirm (positive) action in the focus state.
+$gl-action-confirm-border-color-hover: $gl-color-blue-200; // Used for the border of an outlined confirm (positive) action in the hover state.
+$gl-action-confirm-border-color-default: $gl-color-blue-400; // Used for the border of an outlined confirm (positive) action in the default state.
+$gl-action-confirm-background-color-strong-selected: $gl-color-blue-400; // Used for the background of a solid, strong confirm (positive) action when in a selected or current state.
+$gl-action-confirm-background-color-strong-active: $gl-color-blue-200; // Used for the background of a solid, strong confirm (positive) action in the active state.
+$gl-action-confirm-background-color-strong-focus: $gl-color-blue-300; // Used for the background of a solid, strong confirm (positive) action in the focus state.
+$gl-action-confirm-background-color-strong-hover: $gl-color-blue-300; // Used for the background of a solid, strong confirm (positive) action in the hover state.
+$gl-action-confirm-background-color-strong-default: $gl-color-blue-400; // Used for the background of a solid, strong confirm (positive) action in the default state.
+$gl-action-confirm-background-color-subtle-active: $gl-color-blue-800; // Used for the background of a borderless, subtle confirm (positive) action in the active state.
+$gl-action-confirm-background-color-subtle-focus: $gl-color-blue-900; // Used for the background of a borderless, subtle confirm (positive) action in the focus state.
+$gl-action-confirm-background-color-subtle-hover: $gl-color-blue-900; // Used for the background of a borderless, subtle confirm (positive) action in the hover state.
+$gl-action-confirm-background-color-subtle-default: $gl-color-alpha-0; // Used for the background of a borderless, subtle confirm (positive) action in the default state.
+$gl-action-confirm-background-color-active: $gl-color-blue-800; // Used for the background of an outlined confirm (positive) action in the active state.
+$gl-action-confirm-background-color-focus: $gl-color-blue-900; // Used for the background of an outlined confirm (positive) action in the focus state.
+$gl-action-confirm-background-color-hover: $gl-color-blue-900; // Used for the background of an outlined confirm (positive) action in the hover state.
+$gl-action-confirm-background-color-default: $gl-color-neutral-900; // Used for the background of an outlined confirm (positive) action in the default state.
 $gl-action-neutral-icon-color-strong: $gl-color-neutral-900; // Used for the icon on a solid, strong neutral action background.
 $gl-action-neutral-icon-color-active: $gl-color-neutral-50; // Used for the icon of outlined and borderless neutral actions in the active state.
 $gl-action-neutral-icon-color-focus: $gl-color-neutral-200; // Used for the icon of outlined and borderless neutral actions in the focus state.

package/src/tokens/build/scss/_tokens.scss

@@ -514,6 +514,8 @@ $gl-control-background-color-selected-hover: $gl-color-blue-700; // Used for che
 $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-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-skeleton-loader-shimmer-color: $gl-color-neutral-50; // Used for the animated shimmer effect in a skeleton loader.
+$gl-skeleton-loader-background-color: $gl-color-neutral-100; // Used for the skeleton loader background color.
 $gl-popover-background-color: $gl-color-neutral-0; // Used for the background color of popover.
 $gl-breadcrumb-separator-color: $gl-color-neutral-200; // Used for the breadcrumb level separator.
 $gl-banner-promo-background-color: $gl-color-neutral-10; // Used as background for the default banner type.
@@ -530,10 +532,43 @@ $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-subtle: $gl-color-neutral-50; // Used for a border that has a little more definition, or is used in combination with a subtle background.
 $gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
+$gl-background-color-overlay: $gl-color-alpha-dark-24; // Used for an overlay that covers other content.
 $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-50; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-10; // Used to slightly differentiate the background from the default.
 $gl-background-color-default: $gl-color-neutral-0; // Used for the default background color.
+$gl-action-confirm-icon-color-strong: $gl-color-neutral-0; // Used for the icon on a solid, strong confirm (positive) action background.
+$gl-action-confirm-icon-color-active: $gl-color-blue-900; // Used for the icon of a confirm (positive) action in the active state.
+$gl-action-confirm-icon-color-focus: $gl-color-blue-700; // Used for the icon of a confirm (positive) action in the focus state.
+$gl-action-confirm-icon-color-hover: $gl-color-blue-700; // Used for the icon of a confirm (positive) action in the hover state.
+$gl-action-confirm-icon-color-default: $gl-color-blue-500; // Used for the icon of a confirm (positive) action in the default state.
+$gl-action-confirm-text-color-strong: $gl-color-neutral-0; // Used for the text on a solid, strong confirm (positive) action background.
+$gl-action-confirm-text-color-active: $gl-color-blue-900; // Used for the text of a confirm (positive) action in the active state.
+$gl-action-confirm-text-color-focus: $gl-color-blue-700; // Used for the text of a confirm (positive) action in the focus state.
+$gl-action-confirm-text-color-hover: $gl-color-blue-700; // Used for the text of a confirm (positive) action in the hover state.
+$gl-action-confirm-text-color-default: $gl-color-blue-500; // Used for the text of a confirm (positive) action in the default state.
+$gl-action-confirm-border-color-strong-selected: $gl-color-blue-600; // Used for the border of a solid, strong confirm (positive) action when in a selected or current state.
+$gl-action-confirm-border-color-strong-active: $gl-color-blue-900; // Used for the border of a solid, strong confirm (positive) action in the active state.
+$gl-action-confirm-border-color-strong-focus: $gl-color-blue-800; // Used for the border of a solid, strong confirm (positive) action in the focus state.
+$gl-action-confirm-border-color-strong-hover: $gl-color-blue-800; // Used for the border of a solid, strong confirm (positive) action in the hover state.
+$gl-action-confirm-border-color-strong-default: $gl-color-blue-600; // Used for the border of a solid, strong confirm (positive) action in the default state.
+$gl-action-confirm-border-color-active: $gl-color-blue-900; // Used for the border of an outlined confirm (positive) action in the active state.
+$gl-action-confirm-border-color-focus: $gl-color-blue-700; // Used for the border of an outlined confirm (positive) action in the focus state.
+$gl-action-confirm-border-color-hover: $gl-color-blue-700; // Used for the border of an outlined confirm (positive) action in the hover state.
+$gl-action-confirm-border-color-default: $gl-color-blue-500; // Used for the border of an outlined confirm (positive) action in the default state.
+$gl-action-confirm-background-color-strong-selected: $gl-color-blue-500; // Used for the background of a solid, strong confirm (positive) action when in a selected or current state.
+$gl-action-confirm-background-color-strong-active: $gl-color-blue-700; // Used for the background of a solid, strong confirm (positive) action in the active state.
+$gl-action-confirm-background-color-strong-focus: $gl-color-blue-600; // Used for the background of a solid, strong confirm (positive) action in the focus state.
+$gl-action-confirm-background-color-strong-hover: $gl-color-blue-600; // Used for the background of a solid, strong confirm (positive) action in the hover state.
+$gl-action-confirm-background-color-strong-default: $gl-color-blue-500; // Used for the background of a solid, strong confirm (positive) action in the default state.
+$gl-action-confirm-background-color-subtle-active: $gl-color-blue-100; // Used for the background of a borderless, subtle confirm (positive) action in the active state.
+$gl-action-confirm-background-color-subtle-focus: $gl-color-blue-50; // Used for the background of a borderless, subtle confirm (positive) action in the focus state.
+$gl-action-confirm-background-color-subtle-hover: $gl-color-blue-50; // Used for the background of a borderless, subtle confirm (positive) action in the hover state.
+$gl-action-confirm-background-color-subtle-default: $gl-color-alpha-0; // Used for the background of a borderless, subtle confirm (positive) action in the default state.
+$gl-action-confirm-background-color-active: $gl-color-blue-100; // Used for the background of an outlined confirm (positive) action in the active state.
+$gl-action-confirm-background-color-focus: $gl-color-blue-50; // Used for the background of an outlined confirm (positive) action in the focus state.
+$gl-action-confirm-background-color-hover: $gl-color-blue-50; // Used for the background of an outlined confirm (positive) action in the hover state.
+$gl-action-confirm-background-color-default: $gl-color-neutral-0; // Used for the background of an outlined confirm (positive) action in the default state.
 $gl-action-neutral-icon-color-strong: $gl-color-neutral-0; // Used for the icon on a solid, strong neutral action background.
 $gl-action-neutral-icon-color-active: $gl-color-neutral-900; // Used for the icon of outlined and borderless neutral actions in the active state.
 $gl-action-neutral-icon-color-focus: $gl-color-neutral-700; // Used for the icon of outlined and borderless neutral actions in the focus state.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -38,10 +38,43 @@ $gl-action-neutral-icon-color-hover: var(--gl-action-neutral-icon-color-hover);
 $gl-action-neutral-icon-color-focus: var(--gl-action-neutral-icon-color-focus);
 $gl-action-neutral-icon-color-active: var(--gl-action-neutral-icon-color-active);
 $gl-action-neutral-icon-color-strong: var(--gl-action-neutral-icon-color-strong);
+$gl-action-confirm-background-color-default: var(--gl-action-confirm-background-color-default);
+$gl-action-confirm-background-color-hover: var(--gl-action-confirm-background-color-hover);
+$gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-focus);
+$gl-action-confirm-background-color-active: var(--gl-action-confirm-background-color-active);
+$gl-action-confirm-background-color-subtle-default: var(--gl-action-confirm-background-color-subtle-default);
+$gl-action-confirm-background-color-subtle-hover: var(--gl-action-confirm-background-color-subtle-hover);
+$gl-action-confirm-background-color-subtle-focus: var(--gl-action-confirm-background-color-subtle-focus);
+$gl-action-confirm-background-color-subtle-active: var(--gl-action-confirm-background-color-subtle-active);
+$gl-action-confirm-background-color-strong-default: var(--gl-action-confirm-background-color-strong-default);
+$gl-action-confirm-background-color-strong-hover: var(--gl-action-confirm-background-color-strong-hover);
+$gl-action-confirm-background-color-strong-focus: var(--gl-action-confirm-background-color-strong-focus);
+$gl-action-confirm-background-color-strong-active: var(--gl-action-confirm-background-color-strong-active);
+$gl-action-confirm-background-color-strong-selected: var(--gl-action-confirm-background-color-strong-selected);
+$gl-action-confirm-border-color-default: var(--gl-action-confirm-border-color-default);
+$gl-action-confirm-border-color-hover: var(--gl-action-confirm-border-color-hover);
+$gl-action-confirm-border-color-focus: var(--gl-action-confirm-border-color-focus);
+$gl-action-confirm-border-color-active: var(--gl-action-confirm-border-color-active);
+$gl-action-confirm-border-color-strong-default: var(--gl-action-confirm-border-color-strong-default);
+$gl-action-confirm-border-color-strong-hover: var(--gl-action-confirm-border-color-strong-hover);
+$gl-action-confirm-border-color-strong-focus: var(--gl-action-confirm-border-color-strong-focus);
+$gl-action-confirm-border-color-strong-active: var(--gl-action-confirm-border-color-strong-active);
+$gl-action-confirm-border-color-strong-selected: var(--gl-action-confirm-border-color-strong-selected);
+$gl-action-confirm-text-color-default: var(--gl-action-confirm-text-color-default);
+$gl-action-confirm-text-color-hover: var(--gl-action-confirm-text-color-hover);
+$gl-action-confirm-text-color-focus: var(--gl-action-confirm-text-color-focus);
+$gl-action-confirm-text-color-active: var(--gl-action-confirm-text-color-active);
+$gl-action-confirm-text-color-strong: var(--gl-action-confirm-text-color-strong);
+$gl-action-confirm-icon-color-default: var(--gl-action-confirm-icon-color-default);
+$gl-action-confirm-icon-color-hover: var(--gl-action-confirm-icon-color-hover);
+$gl-action-confirm-icon-color-focus: var(--gl-action-confirm-icon-color-focus);
+$gl-action-confirm-icon-color-active: var(--gl-action-confirm-icon-color-active);
+$gl-action-confirm-icon-color-strong: var(--gl-action-confirm-icon-color-strong);
 $gl-background-color-default: var(--gl-background-color-default);
 $gl-background-color-subtle: var(--gl-background-color-subtle);
 $gl-background-color-strong: var(--gl-background-color-strong);
 $gl-background-color-disabled: var(--gl-background-color-disabled);
+$gl-background-color-overlay: var(--gl-background-color-overlay);
 $gl-border-color-default: var(--gl-border-color-default);
 $gl-border-color-subtle: var(--gl-border-color-subtle);
 $gl-border-color-strong: var(--gl-border-color-strong);
@@ -433,6 +466,8 @@ $gl-banner-intro-border-color: var(--gl-banner-intro-border-color);
 $gl-banner-promo-background-color: var(--gl-banner-promo-background-color);
 $gl-breadcrumb-separator-color: var(--gl-breadcrumb-separator-color);
 $gl-popover-background-color: var(--gl-popover-background-color);
+$gl-skeleton-loader-background-color: var(--gl-skeleton-loader-background-color);
+$gl-skeleton-loader-shimmer-color: var(--gl-skeleton-loader-shimmer-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-selected-default: var(--gl-control-background-color-selected-default);

package/src/tokens/build/tailwind/tokens.cjs

@@ -223,6 +223,8 @@ const backgroundColors = {
     'var(--gl-background-color-strong, var(--gl-color-neutral-50, #ececef))',
   disabled:
     'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
+  overlay:
+    'var(--gl-background-color-overlay, var(--gl-color-alpha-dark-24, rgba(31, 30, 36, 0.24)))',
 };
 const borderColors = {
   default:

package/src/tokens/contextual/skeleton-loader.tokens.json

@@ -0,0 +1,24 @@
+{
+  "skeleton-loader": {
+    "background": {
+      "color": {
+        "$value": {
+          "default": "{color.neutral.100}",
+          "dark": "{color.neutral.800}"
+        },
+        "$type": "color",
+        "$description": "Used for the skeleton loader background color."
+      }
+    },
+    "shimmer": {
+      "color": {
+        "$value": {
+          "default": "{color.neutral.50}",
+          "dark": "{color.neutral.700}"
+        },
+        "$type": "color",
+        "$description": "Used for the animated shimmer effect in a skeleton loader."
+      }
+    }
+  }
+}