@gitlab/ui 89.2.0 → 89.4.0

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

@@ -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;

package/src/components/base/toggle/toggle.scss

@@ -18,6 +18,10 @@
 *  </button>
 */
 
+$toggle-width: 4.5 * $grid-size;
+$toggle-translate-width: 2 * $grid-size;
+$toggle-height: 2.5 * $grid-size;
+
 .gl-toggle-wrapper {
   @include gl-line-height-normal;
   @include gl-font-weight-normal;
@@ -83,10 +87,9 @@
   @apply gl-border-0;
   @include gl-cursor-pointer;
   @include gl-bg-gray-600;
-  @include gl-p-1;
   position: relative;
-  @include gl-w-9;
-  @include gl-h-6;
+  width: $toggle-width;
+  height: $toggle-height;
   @include gl-outline-none;
   user-select: none;
   @include gl-rounded-pill;
@@ -126,7 +129,7 @@
     top: $gl-spacing-scale-1;
     @include gl-transition-medium;
     @include gl-justify-content-center;
-    @include gl-p-2;
+    @include gl-p-1;
 
     > svg {
       @include gl-w-4;
@@ -147,7 +150,7 @@
     }
 
     .toggle-icon {
-      transform: translateX($gl-spacing-scale-6);
+      transform: translateX($toggle-translate-width);
 
       > svg {
         @include gl-fill-blue-500;

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. */
@@ -574,9 +570,9 @@
   --gl-breadcrumb-separator-color: var(--gl-color-neutral-400); /* Used for the breadcrumb level separator. */
   --gl-banner-promo-background-color: var(--gl-color-neutral-10); /* Used as background for the default banner type. */
   --gl-banner-intro-border-color: var(--gl-color-blue-300); /* Used to compliment the info banner. */
-  --gl-badge-tier-icon-color-active: var(--gl-color-purple-700); /* Used for the icon of a tier related badge in the active state. */
-  --gl-badge-tier-icon-color-hover: var(--gl-color-purple-600); /* Used for the icon of a tier related badge in the hover state. */
-  --gl-badge-tier-icon-color-default: var(--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: var(--gl-color-purple-900); /* Used for the icon of a tier related badge in the active state. */
+  --gl-badge-tier-icon-color-hover: var(--gl-color-purple-800); /* Used for the icon of a tier related badge in the hover state. */
+  --gl-badge-tier-icon-color-default: var(--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: var(--gl-color-purple-900); /* Used for the text of a tier related badge in the active state. */
   --gl-badge-tier-text-color-hover: var(--gl-color-purple-800); /* Used for the text of a tier related badge in the hover state. */
   --gl-badge-tier-text-color-default: var(--gl-color-purple-700); /* Used for the text of a tier related badge when static or the default state when linked. */
@@ -586,9 +582,9 @@
   --gl-badge-tier-border-color-default: var(--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: var(--gl-color-purple-200); /* Used for the background of a tier related badge in the active state. */
   --gl-badge-tier-background-color-default: var(--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: var(--gl-color-red-700); /* Used for the icon of a danger badge in the active state. */
-  --gl-badge-danger-icon-color-hover: var(--gl-color-red-600); /* Used for the icon of a danger badge in the hover state. */
-  --gl-badge-danger-icon-color-default: var(--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: var(--gl-color-red-900); /* Used for the icon of a danger badge in the active state. */
+  --gl-badge-danger-icon-color-hover: var(--gl-color-red-800); /* Used for the icon of a danger badge in the hover state. */
+  --gl-badge-danger-icon-color-default: var(--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: var(--gl-color-red-900); /* Used for the text of a danger badge in the active state. */
   --gl-badge-danger-text-color-hover: var(--gl-color-red-800); /* Used for the text of a danger badge in the hover state. */
   --gl-badge-danger-text-color-default: var(--gl-color-red-700); /* Used for the text of a danger badge when static or the default state when linked. */
@@ -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. */
 }