@gitlab/ui 89.3.0 → 89.5.0

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

@@ -555,10 +555,6 @@ $gl-button-confirm-secondary-foreground-color-default: $gl-color-blue-400; // Us
 $gl-button-confirm-primary-border-color-active: $gl-color-blue-50; // Used for the border of a confirm (positive) primary button in the active state.
 $gl-button-confirm-primary-border-color-hover: $gl-color-blue-100; // Used for the border of a confirm (positive) primary button in the hover state.
 $gl-button-confirm-primary-border-color-default: $gl-color-blue-300; // Used for the border of a confirm (positive) primary button in the default state.
-$gl-button-confirm-primary-background-color-active: $gl-color-blue-200; // Used for the background of a confirm (positive) primary button in the active state.
-$gl-button-confirm-primary-background-color-hover: $gl-color-blue-300; // Used for the background of a confirm (positive) primary button in the hover state.
-$gl-button-confirm-primary-background-color-default: $gl-color-blue-400; // Used for the background of a confirm (positive) primary button in the default state.
-$gl-button-confirm-primary-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a confirm (positive) primary button in the default state.
 $gl-button-default-tertiary-background-color-active: $gl-action-neutral-background-color-active; // Used for the background of a default borderless, tertiary button in the active state.
 $gl-button-default-tertiary-background-color-hover: $gl-action-neutral-background-color-hover; // Used for the background of a default borderless, tertiary button in the hover state.
 $gl-button-default-tertiary-background-color-default: $gl-action-neutral-background-color-default; // Used for the background of a default borderless, tertiary button in the default state.
@@ -673,6 +669,16 @@ $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disa
 $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-strong-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a strong neutral action in the default state.
+$gl-action-strong-neutral-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a strong neutral action in the default state.
+$gl-action-strong-neutral-background-color-active: $gl-color-neutral-100; // Used for the background of a strong neutral action in the active state.
+$gl-action-strong-neutral-background-color-hover: $gl-color-neutral-200; // Used for the background of a strong neutral action in the hover state.
+$gl-action-strong-neutral-background-color-default: $gl-color-neutral-300; // Used for the background of a strong neutral action in the default state.
+$gl-action-strong-confirm-border-color-default: $gl-color-alpha-0; // Used for the border of a strong confirm action in the default state.
+$gl-action-strong-confirm-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a strong confirm action in the default state.
+$gl-action-strong-confirm-background-color-active: $gl-color-blue-200; // Used for the background of a strong confirm action in the active state.
+$gl-action-strong-confirm-background-color-hover: $gl-color-blue-300; // Used for the background of a strong confirm action in the hover state.
+$gl-action-strong-confirm-background-color-default: $gl-color-blue-400; // Used for the background of a strong confirm action in the default state.
 $gl-action-danger-border-color-default: $gl-color-alpha-0; // Used for the border of a danger action in the default state.
 $gl-action-danger-background-color-focus: $gl-action-danger-background-color-hover; // Used for the background of a danger (destructive) action in the focus state.
 $gl-action-danger-foreground-color-active: $gl-color-red-50; // Used for the foreground of a danger (destructive) action in the active state.
@@ -725,10 +731,10 @@ $gl-button-confirm-secondary-border-color-focus: $gl-button-confirm-secondary-bo
 $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-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-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-primary-background-color-focus: $gl-button-confirm-primary-background-color-hover; // Used for the background of a confirm (positive) primary button in the focus state.
-$gl-button-confirm-primary-foreground-color-active: $gl-button-confirm-primary-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the active state.
-$gl-button-confirm-primary-foreground-color-focus: $gl-button-confirm-primary-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the focus state.
-$gl-button-confirm-primary-foreground-color-hover: $gl-button-confirm-primary-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the hover state.
+$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-background-color-hover: $gl-action-strong-confirm-background-color-hover; // Used for the background of a confirm (positive) primary button in the hover state.
+$gl-button-confirm-primary-background-color-default: $gl-action-strong-confirm-background-color-default; // Used for the background of a confirm (positive) primary button in the default state.
+$gl-button-confirm-primary-foreground-color-default: $gl-action-strong-confirm-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the default state.
 $gl-button-default-tertiary-border-color-default: $gl-action-neutral-border-color-default; // Used for the border 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.
 $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.
@@ -758,6 +764,12 @@ $gl-badge-neutral-background-color-hover: $gl-badge-neutral-background-color-def
 $gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a muted badge in the focus 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.
 $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-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-action-strong-neutral-foreground-color-hover: $gl-action-strong-neutral-foreground-color-default; // Used for the foreground of a strong neutral 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-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-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-background-color-focus: $gl-action-strong-confirm-background-color-hover; // Used for the background of a strong confirm action in the focus state.
 $gl-action-danger-border-color-active: $gl-action-danger-border-color-default; // Used for the border of a danger action in the active state.
 $gl-action-danger-border-color-focus: $gl-action-danger-border-color-default; // Used for the border of a danger action in the focus state.
 $gl-action-danger-border-color-hover: $gl-action-danger-border-color-default; // Used for the border of a danger action in the hover state.
@@ -789,6 +801,8 @@ $gl-button-confirm-tertiary-border-color-active: $gl-action-confirm-border-color
 $gl-button-confirm-tertiary-border-color-focus: $gl-action-confirm-border-color-focus; // Used for the border of a borderless, tertiary confirm (positive) button in the focus state.
 $gl-button-confirm-tertiary-border-color-hover: $gl-action-confirm-border-color-hover; // Used for the border of a borderless, tertiary confirm (positive) button in the hover state.
 $gl-button-confirm-tertiary-foreground-color-focus: $gl-action-confirm-foreground-color-focus; // Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state.
+$gl-button-confirm-primary-background-color-focus: $gl-action-strong-confirm-background-color-focus; // Used for the background of a confirm (positive) primary button in the focus state.
+$gl-button-confirm-primary-foreground-color-hover: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a confirm (positive) primary button in the hover state.
 $gl-button-default-tertiary-border-color-active: $gl-action-neutral-border-color-active; // Used for the border of a default borderless, tertiary button in the active state.
 $gl-button-default-tertiary-border-color-focus: $gl-action-neutral-border-color-focus; // Used for the border of a default borderless, tertiary button in the focus state.
 $gl-button-default-tertiary-border-color-hover: $gl-action-neutral-border-color-hover; // Used for the border of a default borderless, tertiary button in the hover state.
@@ -802,3 +816,13 @@ $gl-badge-success-background-color-focus: $gl-badge-success-background-color-hov
 $gl-badge-info-background-color-focus: $gl-badge-info-background-color-hover; // Used for the background of an informational badge in the focus state.
 $gl-badge-neutral-background-color-focus: $gl-badge-neutral-background-color-hover; // Used for the background of a neutral badge in the focus state.
 $gl-badge-muted-background-color-focus: $gl-badge-muted-background-color-hover; // Used for the background of a muted badge 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-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-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-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-button-confirm-primary-foreground-color-focus: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a confirm (positive) primary button in the focus 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-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-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-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-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

@@ -555,10 +555,6 @@ $gl-button-confirm-secondary-foreground-color-default: $gl-color-blue-500; // Us
 $gl-button-confirm-primary-border-color-active: $gl-color-blue-900; // Used for the border of a confirm (positive) primary button in the active state.
 $gl-button-confirm-primary-border-color-hover: $gl-color-blue-800; // Used for the border of a confirm (positive) primary button in the hover state.
 $gl-button-confirm-primary-border-color-default: $gl-color-blue-600; // Used for the border of a confirm (positive) primary button in the default state.
-$gl-button-confirm-primary-background-color-active: $gl-color-blue-700; // Used for the background of a confirm (positive) primary button in the active state.
-$gl-button-confirm-primary-background-color-hover: $gl-color-blue-600; // Used for the background of a confirm (positive) primary button in the hover state.
-$gl-button-confirm-primary-background-color-default: $gl-color-blue-500; // Used for the background of a confirm (positive) primary button in the default state.
-$gl-button-confirm-primary-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a confirm (positive) primary button in the default state.
 $gl-button-default-tertiary-background-color-active: $gl-action-neutral-background-color-active; // Used for the background of a default borderless, tertiary button in the active state.
 $gl-button-default-tertiary-background-color-hover: $gl-action-neutral-background-color-hover; // Used for the background of a default borderless, tertiary button in the hover state.
 $gl-button-default-tertiary-background-color-default: $gl-action-neutral-background-color-default; // Used for the background of a default borderless, tertiary button in the default state.
@@ -673,6 +669,16 @@ $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disab
 $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-strong-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a strong neutral action in the default state.
+$gl-action-strong-neutral-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a strong neutral action in the default state.
+$gl-action-strong-neutral-background-color-active: $gl-color-neutral-800; // Used for the background of a strong neutral action in the active state.
+$gl-action-strong-neutral-background-color-hover: $gl-color-neutral-700; // Used for the background of a strong neutral action in the hover state.
+$gl-action-strong-neutral-background-color-default: $gl-color-neutral-600; // Used for the background of a strong neutral action in the default state.
+$gl-action-strong-confirm-border-color-default: $gl-color-alpha-0; // Used for the border of a strong confirm action in the default state.
+$gl-action-strong-confirm-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a strong confirm action in the default state.
+$gl-action-strong-confirm-background-color-active: $gl-color-blue-700; // Used for the background of a strong confirm action in the active state.
+$gl-action-strong-confirm-background-color-hover: $gl-color-blue-600; // Used for the background of a strong confirm action in the hover state.
+$gl-action-strong-confirm-background-color-default: $gl-color-blue-500; // Used for the background of a strong confirm action in the default state.
 $gl-action-danger-border-color-default: $gl-color-alpha-0; // Used for the border of a danger action in the default state.
 $gl-action-danger-background-color-focus: $gl-action-danger-background-color-hover; // Used for the background of a danger (destructive) action in the focus state.
 $gl-action-danger-foreground-color-active: $gl-color-red-900; // Used for the foreground of a danger (destructive) action in the active state.
@@ -725,10 +731,10 @@ $gl-button-confirm-secondary-border-color-focus: $gl-button-confirm-secondary-bo
 $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-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-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-primary-background-color-focus: $gl-button-confirm-primary-background-color-hover; // Used for the background of a confirm (positive) primary button in the focus state.
-$gl-button-confirm-primary-foreground-color-active: $gl-button-confirm-primary-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the active state.
-$gl-button-confirm-primary-foreground-color-focus: $gl-button-confirm-primary-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the focus state.
-$gl-button-confirm-primary-foreground-color-hover: $gl-button-confirm-primary-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the hover state.
+$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-background-color-hover: $gl-action-strong-confirm-background-color-hover; // Used for the background of a confirm (positive) primary button in the hover state.
+$gl-button-confirm-primary-background-color-default: $gl-action-strong-confirm-background-color-default; // Used for the background of a confirm (positive) primary button in the default state.
+$gl-button-confirm-primary-foreground-color-default: $gl-action-strong-confirm-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the default state.
 $gl-button-default-tertiary-border-color-default: $gl-action-neutral-border-color-default; // Used for the border 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.
 $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.
@@ -758,6 +764,12 @@ $gl-badge-neutral-background-color-hover: $gl-badge-neutral-background-color-def
 $gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a muted badge in the focus 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.
 $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-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-action-strong-neutral-foreground-color-hover: $gl-action-strong-neutral-foreground-color-default; // Used for the foreground of a strong neutral 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-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-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-background-color-focus: $gl-action-strong-confirm-background-color-hover; // Used for the background of a strong confirm action in the focus state.
 $gl-action-danger-border-color-active: $gl-action-danger-border-color-default; // Used for the border of a danger action in the active state.
 $gl-action-danger-border-color-focus: $gl-action-danger-border-color-default; // Used for the border of a danger action in the focus state.
 $gl-action-danger-border-color-hover: $gl-action-danger-border-color-default; // Used for the border of a danger action in the hover state.
@@ -789,6 +801,8 @@ $gl-button-confirm-tertiary-border-color-active: $gl-action-confirm-border-color
 $gl-button-confirm-tertiary-border-color-focus: $gl-action-confirm-border-color-focus; // Used for the border of a borderless, tertiary confirm (positive) button in the focus state.
 $gl-button-confirm-tertiary-border-color-hover: $gl-action-confirm-border-color-hover; // Used for the border of a borderless, tertiary confirm (positive) button in the hover state.
 $gl-button-confirm-tertiary-foreground-color-focus: $gl-action-confirm-foreground-color-focus; // Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state.
+$gl-button-confirm-primary-background-color-focus: $gl-action-strong-confirm-background-color-focus; // Used for the background of a confirm (positive) primary button in the focus state.
+$gl-button-confirm-primary-foreground-color-hover: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a confirm (positive) primary button in the hover state.
 $gl-button-default-tertiary-border-color-active: $gl-action-neutral-border-color-active; // Used for the border of a default borderless, tertiary button in the active state.
 $gl-button-default-tertiary-border-color-focus: $gl-action-neutral-border-color-focus; // Used for the border of a default borderless, tertiary button in the focus state.
 $gl-button-default-tertiary-border-color-hover: $gl-action-neutral-border-color-hover; // Used for the border of a default borderless, tertiary button in the hover state.
@@ -802,3 +816,13 @@ $gl-badge-success-background-color-focus: $gl-badge-success-background-color-hov
 $gl-badge-info-background-color-focus: $gl-badge-info-background-color-hover; // Used for the background of an informational badge in the focus state.
 $gl-badge-neutral-background-color-focus: $gl-badge-neutral-background-color-hover; // Used for the background of a neutral badge in the focus state.
 $gl-badge-muted-background-color-focus: $gl-badge-muted-background-color-hover; // Used for the background of a muted badge 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-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-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-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-button-confirm-primary-foreground-color-focus: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a confirm (positive) primary button in the focus 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-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-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-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-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_custom_properties.scss

@@ -42,6 +42,30 @@ $gl-action-danger-border-color-default: var(--gl-action-danger-border-color-defa
 $gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-hover);
 $gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-focus);
 $gl-action-danger-border-color-active: var(--gl-action-danger-border-color-active);
+$gl-action-strong-confirm-background-color-default: var(--gl-action-strong-confirm-background-color-default);
+$gl-action-strong-confirm-background-color-hover: var(--gl-action-strong-confirm-background-color-hover);
+$gl-action-strong-confirm-background-color-focus: var(--gl-action-strong-confirm-background-color-focus);
+$gl-action-strong-confirm-background-color-active: var(--gl-action-strong-confirm-background-color-active);
+$gl-action-strong-confirm-foreground-color-default: var(--gl-action-strong-confirm-foreground-color-default);
+$gl-action-strong-confirm-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-hover);
+$gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus);
+$gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-active);
+$gl-action-strong-confirm-border-color-default: var(--gl-action-strong-confirm-border-color-default);
+$gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-hover);
+$gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-focus);
+$gl-action-strong-confirm-border-color-active: var(--gl-action-strong-confirm-border-color-active);
+$gl-action-strong-neutral-background-color-default: var(--gl-action-strong-neutral-background-color-default);
+$gl-action-strong-neutral-background-color-hover: var(--gl-action-strong-neutral-background-color-hover);
+$gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-focus);
+$gl-action-strong-neutral-background-color-active: var(--gl-action-strong-neutral-background-color-active);
+$gl-action-strong-neutral-foreground-color-default: var(--gl-action-strong-neutral-foreground-color-default);
+$gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-hover);
+$gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-focus);
+$gl-action-strong-neutral-foreground-color-active: var(--gl-action-strong-neutral-foreground-color-active);
+$gl-action-strong-neutral-border-color-default: var(--gl-action-strong-neutral-border-color-default);
+$gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-hover);
+$gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-focus);
+$gl-action-strong-neutral-border-color-active: var(--gl-action-strong-neutral-border-color-active);
 $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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "89.3.0",
+  "version": "89.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -111,10 +111,10 @@
     "@babel/preset-env": "^7.25.3",
     "@babel/preset-react": "^7.24.7",
     "@cypress/grep": "^4.0.1",
-    "@gitlab/eslint-plugin": "19.6.1",
+    "@gitlab/eslint-plugin": "20.0.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.2.1",
-    "@gitlab/svgs": "3.112.0",
+    "@gitlab/svgs": "3.113.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -148,7 +148,7 @@
     "babel-loader": "^8.0.5",
     "bootstrap": "4.6.2",
     "cobertura-merge": "^1.0.4",
-    "cypress": "13.13.2",
+    "cypress": "13.13.3",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.1.2",

package/src/scss/body.scss

@@ -0,0 +1,4 @@
+body {
+  background-color: var(--gl-background-color-default);
+  color: var(--gl-text-color-default);
+}

package/src/scss/gitlab_ui.scss

@@ -12,5 +12,8 @@
 @import 'utility-mixins/index';
 @import 'typescale/index';
 
+// Body
+@import 'body';
+
 // Components
 @import 'components';

package/src/scss/storybook.scss

@@ -14,6 +14,7 @@
 
 @import 'fonts';
 
+@import 'body';
 @import 'components';
 
 @import 'storybook_dark_mode';

package/src/scss/storybook_dark_mode.scss

@@ -18,10 +18,4 @@
   --gray-600: #{$gray-300};
 
   color-scheme: dark;
-
-  &,
-  body {
-    background-color: var(--gl-background-color-default);
-    color: var(--gl-text-color-default);
-  }
 }

package/src/tokens/action.tokens.json

@@ -79,7 +79,7 @@
             "$description": "Used for the background of a neutral action in the hover state."
           },
           "focus": {
-            "$value":  "{action.neutral.background.color.hover}",
+            "$value": "{action.neutral.background.color.hover}",
             "$type": "color",
             "$description": "Used for the background of a neutral action in the focus state."
           },
@@ -171,7 +171,7 @@
             "$description": "Used for the background of a confirm (positive) action in the hover state."
           },
           "focus": {
-            "$value":  "{action.confirm.background.color.hover}",
+            "$value": "{action.confirm.background.color.hover}",
             "$type": "color",
             "$description": "Used for the background of a confirm (positive) action in the focus state."
           },
@@ -301,6 +301,174 @@
           }
         }
       }
+    },
+    "strong": {
+      "confirm": {
+        "background": {
+          "color": {
+            "default": {
+              "$value": {
+                "default": "{color.blue.500}",
+                "dark": "{color.blue.400}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a strong confirm action in the default state."
+            },
+            "hover": {
+              "$value": {
+                "default": "{color.blue.600}",
+                "dark": "{color.blue.300}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a strong confirm action in the hover state."
+            },
+            "focus": {
+              "$value": "{action.strong.confirm.background.color.hover}",
+              "$type": "color",
+              "$description": "Used for the background of a strong confirm action in the focus state."
+            },
+            "active": {
+              "$value": {
+                "default": "{color.blue.700}",
+                "dark": "{color.blue.200}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a strong confirm action in the active state."
+            }
+          }
+        },
+        "foreground": {
+          "color": {
+            "default": {
+              "$value": "{color.neutral.0}",
+              "$type": "color",
+              "$description": "Used for the foreground of a strong confirm action in the default state."
+            },
+            "hover": {
+              "$value": "{action.strong.confirm.foreground.color.default}",
+              "$type": "color",
+              "$description": "Used for the foreground of a strong confirm action in the hover state."
+            },
+            "focus": {
+              "$value": "{action.strong.confirm.foreground.color.hover}",
+              "$type": "color",
+              "$description": "Used for the foreground of a strong confirm action in the focus state."
+            },
+            "active": {
+              "$value": "{action.strong.confirm.foreground.color.focus}",
+              "$type": "color",
+              "$description": "Used for the foreground of a strong confirm action in the active state."
+            }
+          }
+        },
+        "border": {
+          "color": {
+            "default": {
+              "$value": "{color.alpha.0}",
+              "$type": "color",
+              "$description": "Used for the border of a strong confirm action in the default state."
+            },
+            "hover": {
+              "$value": "{action.strong.confirm.border.color.default}",
+              "$type": "color",
+              "$description": "Used for the border of a strong confirm action in the hover state."
+            },
+            "focus": {
+              "$value": "{action.strong.confirm.border.color.hover}",
+              "$type": "color",
+              "$description": "Used for the border of a strong confirm action in the focus state."
+            },
+            "active": {
+              "$value": "{action.strong.confirm.border.color.focus}",
+              "$type": "color",
+              "$description": "Used for the border of a strong confirm action in the active state."
+            }
+          }
+        }
+      },
+      "neutral": {
+        "background": {
+          "color": {
+            "default": {
+              "$value": {
+                "default": "{color.neutral.600}",
+                "dark": "{color.neutral.300}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a strong neutral action in the default state."
+            },
+            "hover": {
+              "$value": {
+                "default": "{color.neutral.700}",
+                "dark": "{color.neutral.200}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a strong neutral action in the hover state."
+            },
+            "focus": {
+              "$value": "{action.strong.neutral.background.color.hover}",
+              "$type": "color",
+              "$description": "Used for the background of a strong neutral action in the focus state."
+            },
+            "active": {
+              "$value": {
+                "default": "{color.neutral.800}",
+                "dark": "{color.neutral.100}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a strong neutral action in the active state."
+            }
+          }
+        },
+        "foreground": {
+          "color": {
+            "default": {
+              "$value": "{color.neutral.0}",
+              "$type": "color",
+              "$description": "Used for the foreground of a strong neutral action in the default state."
+            },
+            "hover": {
+              "$value": "{action.strong.neutral.foreground.color.default}",
+              "$type": "color",
+              "$description": "Used for the foreground of a strong neutral action in the hover state."
+            },
+            "focus": {
+              "$value": "{action.strong.neutral.foreground.color.hover}",
+              "$type": "color",
+              "$description": "Used for the foreground of a strong neutral action in the focus state."
+            },
+            "active": {
+              "$value": "{action.strong.neutral.foreground.color.focus}",
+              "$type": "color",
+              "$description": "Used for the foreground of a strong neutral action in the active state."
+            }
+          }
+        },
+        "border": {
+          "color": {
+            "default": {
+              "$value": "{color.alpha.0}",
+              "$type": "color",
+              "$description": "Used for the border of a strong neutral action in the default state."
+            },
+            "hover": {
+              "$value": "{action.strong.neutral.border.color.default}",
+              "$type": "color",
+              "$description": "Used for the border of a strong neutral action in the hover state."
+            },
+            "focus": {
+              "$value": "{action.strong.neutral.border.color.hover}",
+              "$type": "color",
+              "$description": "Used for the border of a strong neutral action in the focus state."
+            },
+            "active": {
+              "$value": "{action.strong.neutral.border.color.focus}",
+              "$type": "color",
+              "$description": "Used for the border of a strong neutral action in the active state."
+            }
+          }
+        }
+      }
     }
   }
-}
+}

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

@@ -557,10 +557,6 @@
   --gl-button-confirm-primary-border-color-active: var(--gl-color-blue-900); /* Used for the border of a confirm (positive) primary button in the active state. */
   --gl-button-confirm-primary-border-color-hover: var(--gl-color-blue-800); /* Used for the border of a confirm (positive) primary button in the hover state. */
   --gl-button-confirm-primary-border-color-default: var(--gl-color-blue-600); /* Used for the border of a confirm (positive) primary button in the default state. */
-  --gl-button-confirm-primary-background-color-active: var(--gl-color-blue-700); /* Used for the background of a confirm (positive) primary button in the active state. */
-  --gl-button-confirm-primary-background-color-hover: var(--gl-color-blue-600); /* Used for the background of a confirm (positive) primary button in the hover state. */
-  --gl-button-confirm-primary-background-color-default: var(--gl-color-blue-500); /* Used for the background of a confirm (positive) primary button in the default state. */
-  --gl-button-confirm-primary-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a confirm (positive) primary button in the default state. */
   --gl-button-default-tertiary-background-color-active: var(--gl-action-neutral-background-color-active); /* Used for the background of a default borderless, tertiary button in the active state. */
   --gl-button-default-tertiary-background-color-hover: var(--gl-action-neutral-background-color-hover); /* Used for the background of a default borderless, tertiary button in the hover state. */
   --gl-button-default-tertiary-background-color-default: var(--gl-action-neutral-background-color-default); /* Used for the background of a default borderless, tertiary button in the default state. */
@@ -675,6 +671,16 @@
   --gl-background-color-strong: var(--gl-color-neutral-50); /* Used to make the background easily stand out from the default. */
   --gl-background-color-subtle: var(--gl-color-neutral-10); /* Used to slightly differentiate the background from the default. */
   --gl-background-color-default: var(--gl-color-neutral-0); /* Used for the default background color. */
+  --gl-action-strong-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a strong neutral action in the default state. */
+  --gl-action-strong-neutral-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a strong neutral action in the default state. */
+  --gl-action-strong-neutral-background-color-active: var(--gl-color-neutral-800); /* Used for the background of a strong neutral action in the active state. */
+  --gl-action-strong-neutral-background-color-hover: var(--gl-color-neutral-700); /* Used for the background of a strong neutral action in the hover state. */
+  --gl-action-strong-neutral-background-color-default: var(--gl-color-neutral-600); /* Used for the background of a strong neutral action in the default state. */
+  --gl-action-strong-confirm-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a strong confirm action in the default state. */
+  --gl-action-strong-confirm-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a strong confirm action in the default state. */
+  --gl-action-strong-confirm-background-color-active: var(--gl-color-blue-700); /* Used for the background of a strong confirm action in the active state. */
+  --gl-action-strong-confirm-background-color-hover: var(--gl-color-blue-600); /* Used for the background of a strong confirm action in the hover state. */
+  --gl-action-strong-confirm-background-color-default: var(--gl-color-blue-500); /* Used for the background of a strong confirm action in the default state. */
   --gl-action-danger-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a danger action in the default state. */
   --gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-hover); /* Used for the background of a danger (destructive) action in the focus state. */
   --gl-action-danger-foreground-color-active: var(--gl-color-red-900); /* Used for the foreground of a danger (destructive) action in the active state. */
@@ -727,10 +733,10 @@
   --gl-button-confirm-secondary-background-color-focus: var(--gl-button-confirm-secondary-background-color-hover); /* Used for the background of an outlined confirm (positive) button in the focus state. */
   --gl-button-confirm-secondary-foreground-color-focus: var(--gl-button-confirm-secondary-foreground-color-hover); /* Used for the foreground of a confirm (positive) button in the focus state. */
   --gl-button-confirm-primary-border-color-focus: var(--gl-button-confirm-primary-border-color-hover); /* Used for the border of a confirm (positive) primary button in the focus state. */
-  --gl-button-confirm-primary-background-color-focus: var(--gl-button-confirm-primary-background-color-hover); /* Used for the background of a confirm (positive) primary button in the focus state. */
-  --gl-button-confirm-primary-foreground-color-active: var(--gl-button-confirm-primary-foreground-color-default); /* Used for the foreground of a confirm (positive) primary button in the active state. */
-  --gl-button-confirm-primary-foreground-color-focus: var(--gl-button-confirm-primary-foreground-color-default); /* Used for the foreground of a confirm (positive) primary button in the focus state. */
-  --gl-button-confirm-primary-foreground-color-hover: var(--gl-button-confirm-primary-foreground-color-default); /* Used for the foreground of a confirm (positive) primary button in the hover state. */
+  --gl-button-confirm-primary-background-color-active: var(--gl-action-strong-confirm-background-color-active); /* Used for the background of a confirm (positive) primary button in the active state. */
+  --gl-button-confirm-primary-background-color-hover: var(--gl-action-strong-confirm-background-color-hover); /* Used for the background of a confirm (positive) primary button in the hover state. */
+  --gl-button-confirm-primary-background-color-default: var(--gl-action-strong-confirm-background-color-default); /* Used for the background of a confirm (positive) primary button in the default state. */
+  --gl-button-confirm-primary-foreground-color-default: var(--gl-action-strong-confirm-foreground-color-default); /* Used for the foreground of a confirm (positive) primary button in the default state. */
   --gl-button-default-tertiary-border-color-default: var(--gl-action-neutral-border-color-default); /* Used for the border of a default borderless, tertiary button in the default state. */
   --gl-button-default-tertiary-background-color-focus: var(--gl-action-neutral-background-color-focus); /* Used for the background of a default borderless, tertiary button in the focus state. */
   --gl-button-default-tertiary-foreground-color-default: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a default borderless, tertiary button in the default state. */
@@ -760,6 +766,12 @@
   --gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-hover); /* Used for the icon of a muted badge in the focus state. */
   --gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /* Used for the text of a muted badge in the focus state. */
   --gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-default); /* Used for the background of a muted badge in the hover state. */
+  --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /* Used for the border of a strong neutral action in the hover state. */
+  --gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-default); /* Used for the foreground of a strong neutral action in the hover state. */
+  --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /* Used for the background of a strong neutral action in the focus state. */
+  --gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-default); /* Used for the border of a strong confirm action in the hover state. */
+  --gl-action-strong-confirm-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-default); /* Used for the foreground of a strong confirm action in the hover state. */
+  --gl-action-strong-confirm-background-color-focus: var(--gl-action-strong-confirm-background-color-hover); /* Used for the background of a strong confirm action in the focus state. */
   --gl-action-danger-border-color-active: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the active state. */
   --gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the focus state. */
   --gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the hover state. */
@@ -791,6 +803,8 @@
   --gl-button-confirm-tertiary-border-color-focus: var(--gl-action-confirm-border-color-focus); /* Used for the border of a borderless, tertiary confirm (positive) button in the focus state. */
   --gl-button-confirm-tertiary-border-color-hover: var(--gl-action-confirm-border-color-hover); /* Used for the border of a borderless, tertiary confirm (positive) button in the hover state. */
   --gl-button-confirm-tertiary-foreground-color-focus: var(--gl-action-confirm-foreground-color-focus); /* Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state. */
+  --gl-button-confirm-primary-background-color-focus: var(--gl-action-strong-confirm-background-color-focus); /* Used for the background of a confirm (positive) primary button in the focus state. */
+  --gl-button-confirm-primary-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-hover); /* Used for the foreground of a confirm (positive) primary button in the hover state. */
   --gl-button-default-tertiary-border-color-active: var(--gl-action-neutral-border-color-active); /* Used for the border of a default borderless, tertiary button in the active state. */
   --gl-button-default-tertiary-border-color-focus: var(--gl-action-neutral-border-color-focus); /* Used for the border of a default borderless, tertiary button in the focus state. */
   --gl-button-default-tertiary-border-color-hover: var(--gl-action-neutral-border-color-hover); /* Used for the border of a default borderless, tertiary button in the hover state. */
@@ -804,4 +818,14 @@
   --gl-badge-info-background-color-focus: var(--gl-badge-info-background-color-hover); /* Used for the background of an informational badge in the focus state. */
   --gl-badge-neutral-background-color-focus: var(--gl-badge-neutral-background-color-hover); /* Used for the background of a neutral badge in the focus state. */
   --gl-badge-muted-background-color-focus: var(--gl-badge-muted-background-color-hover); /* Used for the background of a muted badge in the focus state. */
+  --gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-hover); /* Used for the border of a strong neutral action in the focus state. */
+  --gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-hover); /* Used for the foreground of a strong neutral action in the focus state. */
+  --gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-hover); /* Used for the border of a strong confirm action in the focus state. */
+  --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /* Used for the foreground of a strong confirm action in the focus state. */
+  --gl-button-confirm-primary-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus); /* Used for the foreground of a confirm (positive) primary button in the focus state. */
+  --gl-action-strong-neutral-border-color-active: var(--gl-action-strong-neutral-border-color-focus); /* Used for the border of a strong neutral action in the active state. */
+  --gl-action-strong-neutral-foreground-color-active: var(--gl-action-strong-neutral-foreground-color-focus); /* Used for the foreground of a strong neutral action in the active state. */
+  --gl-action-strong-confirm-border-color-active: var(--gl-action-strong-confirm-border-color-focus); /* Used for the border of a strong confirm action in the active state. */
+  --gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-focus); /* Used for the foreground of a strong confirm action in the active state. */
+  --gl-button-confirm-primary-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-active); /* Used for the foreground of a confirm (positive) primary button in the active state. */
 }