@gitlab/ui 98.1.0 → 98.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "98.1.0",
+  "version": "98.1.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -174,8 +174,8 @@
     "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
-    "playwright": "^1.48.0",
-    "playwright-core": "^1.48.0",
+    "playwright": "^1.48.1",
+    "playwright-core": "^1.48.1",
     "plop": "^2.5.4",
     "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",
@@ -191,7 +191,6 @@
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.6",
     "sass": "^1.49.9",
-    "sass-export": "^2.1.2",
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -205,10 +205,10 @@ export default {
         />
       </li>
 
-      <!-- eslint-disable-next-line vue/valid-v-for (for @vue/compat) -->
       <gl-breadcrumb-item
         v-for="(item, index) in fittingItems"
         ref="breadcrumbs"
+        :key="index"
         :text="item.text"
         :href="item.href"
         :style="itemStyle"

package/src/tokens/action.tokens.json

@@ -210,7 +210,7 @@
           "default": {
             "$value": {
               "default": "{color.blue.500}",
-              "dark": "{color.blue.200}"
+              "dark": "{color.blue.400}"
             },
             "$type": "color",
             "$description": "Used for the foreground of a confirm (positive) action in the default state."
@@ -218,7 +218,7 @@
           "hover": {
             "$value": {
               "default": "{color.blue.700}",
-              "dark": "{color.blue.100}"
+              "dark": "{color.blue.200}"
             },
             "$type": "color",
             "$description": "Used for the foreground of a confirm (positive) action in the hover state."
@@ -231,7 +231,7 @@
           "active": {
             "$value": {
               "default": "{color.blue.900}",
-              "dark": "{color.blue.100}"
+              "dark": "{color.blue.50}"
             },
             "$type": "color",
             "$description": "Used for the foreground of a confirm (positive) action in the active state."
@@ -302,7 +302,7 @@
           "default": {
             "$value": {
               "default": "{color.red.500}",
-              "dark": "{color.red.200}"
+              "dark": "{color.red.400}"
             },
             "$type": "color",
             "$description": "Used for the foreground of a danger (destructive) action in the default state."
@@ -310,7 +310,7 @@
           "hover": {
             "$value": {
               "default": "{color.red.700}",
-              "dark": "{color.red.100}"
+              "dark": "{color.red.200}"
             },
             "$type": "color",
             "$description": "Used for the foreground of a danger (destructive) action in the hover state."
@@ -323,7 +323,7 @@
           "active": {
             "$value": {
               "default": "{color.red.900}",
-              "dark": "{color.red.100}"
+              "dark": "{color.red.50}"
             },
             "$type": "color",
             "$description": "Used for the foreground of a danger (destructive) action in the active state."
@@ -395,7 +395,7 @@
             "default": {
               "$value": {
                 "default": "{color.blue.500}",
-                "dark": "{color.blue.300}"
+                "dark": "{color.blue.400}"
               },
               "$type": "color",
               "$description": "Used for the background of a strong confirm action in the default state."
@@ -403,7 +403,7 @@
             "hover": {
               "$value": {
                 "default": "{color.blue.600}",
-                "dark": "{color.blue.200}"
+                "dark": "{color.blue.300}"
               },
               "$type": "color",
               "$description": "Used for the background of a strong confirm action in the hover state."
@@ -416,7 +416,7 @@
             "active": {
               "$value": {
                 "default": "{color.blue.700}",
-                "dark": "{color.blue.400}"
+                "dark": "{color.blue.200}"
               },
               "$type": "color",
               "$description": "Used for the background of a strong confirm action in the active state."
@@ -520,26 +520,17 @@
               "$description": "Used for the foreground of a strong neutral action in the default state."
             },
             "hover": {
-              "$value": {
-                "default": "{action.strong.neutral.foreground.color.default}",
-                "dark": "{color.neutral.0}"
-              },
+              "$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": {
-                "default": "{action.strong.neutral.foreground.color.hover}",
-                "dark": "{color.neutral.0}"
-              },
+              "$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": {
-                "default": "{action.strong.neutral.foreground.color.focus}",
-                "dark": "{color.neutral.0}"
-              },
+              "$value": "{action.strong.neutral.foreground.color.focus}",
               "$type": "color",
               "$description": "Used for the foreground of a strong neutral action in the active state."
             }

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

@@ -579,7 +579,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-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. */
@@ -836,6 +835,7 @@
   --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. */

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

@@ -538,8 +538,8 @@
   --gl-dropdown-option-indicator-color-selected-active: var(--gl-color-neutral-100); /* Used for the dropdown selected option indicator in the active state. */
   --gl-dropdown-border-color: var(--gl-color-neutral-700); /* Used for the border of a dropdown. */
   --gl-datepicker-background-color: var(--gl-color-neutral-900); /* Used for the background color of datepicker. */
-  --gl-button-disabled-border-color: var(--gl-color-alpha-0); /* Used for the border of a disabled button. */
-  --gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); /* Used for the background of a disabled button. */
+  --gl-button-disabled-border-color: var(--gl-color-neutral-800); /* Used for the border of a disabled button. */
+  --gl-button-disabled-background-color: var(--gl-color-neutral-950); /* Used for the background of a disabled button. */
   --gl-button-disabled-foreground-color: var(--gl-color-neutral-400); /* Used for the foreground of a disabled button. */
   --gl-button-selected-border-color-active: var(--gl-color-neutral-300); /* Used for the border of a selected button in the active state. */
   --gl-button-selected-border-color-hover: var(--gl-color-neutral-500); /* Used for the border of a selected button in the hover state. */
@@ -548,47 +548,46 @@
   --gl-button-danger-tertiary-background-color-active: var(--gl-action-danger-background-color-active); /* Used for the background of a borderless, tertiary danger (destructive) button in the active state. */
   --gl-button-danger-tertiary-background-color-hover: var(--gl-action-danger-background-color-hover); /* Used for the background of a borderless, tertiary danger (destructive) button in the hover state. */
   --gl-button-danger-tertiary-background-color-default: var(--gl-action-danger-background-color-default); /* Used for the background of a borderless, tertiary danger (destructive) button in the default state. */
-  --gl-button-danger-secondary-border-color-active: var(--gl-color-alpha-0); /* Used for the border of an outlined danger (destructive) button in the active state. */
-  --gl-button-danger-secondary-border-color-hover: var(--gl-color-alpha-0); /* Used for the border of an outlined danger (destructive) button in the hover state. */
-  --gl-button-danger-secondary-border-color-default: var(--gl-color-alpha-0); /* Used for the border of an outlined danger (destructive) button in the default state. */
-  --gl-button-danger-secondary-background-color-active: rgba(236, 89, 65, 0.32); /* Used for the background of an outlined danger (destructive) button in the active state. */
-  --gl-button-danger-secondary-background-color-hover: rgba(236, 89, 65, 0.64); /* Used for the background of an outlined danger (destructive) button in the hover state. */
-  --gl-button-danger-secondary-background-color-default: rgba(236, 89, 65, 0.40); /* Used for the background of an outlined danger (destructive) button in the default state. */
-  --gl-button-danger-secondary-foreground-color-active: var(--gl-button-danger-secondary-foreground-color-focus); /* Used for the foreground of a danger (destructive) button in the active state. */
-  --gl-button-danger-secondary-foreground-color-hover: var(--gl-color-red-50); /* Used for the foreground of a danger (destructive) button in the hover state. */
-  --gl-button-danger-secondary-foreground-color-default: var(--gl-color-red-100); /* Used for the foreground of a danger (destructive) button in the default state. */
-  --gl-button-danger-primary-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a danger (destructive) primary button in the active state. */
-  --gl-button-danger-primary-border-color-hover: var(--gl-color-alpha-0); /* Used for the border of a danger (destructive) primary button in the hover state. */
-  --gl-button-danger-primary-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a danger (destructive) primary button in the default state. */
-  --gl-button-danger-primary-background-color-active: var(--gl-color-red-400); /* Used for the background of a danger (destructive) primary button in the active state. */
-  --gl-button-danger-primary-background-color-hover: var(--gl-color-red-200); /* Used for the background of a danger (destructive) primary button in the hover state. */
-  --gl-button-danger-primary-background-color-default: var(--gl-color-red-300); /* Used for the background of a danger (destructive) primary button in the default state. */
-  --gl-button-danger-primary-foreground-color-default: var(--gl-color-neutral-950); /* Used for the foreground of a danger (destructive) primary button in the default state. */
+  --gl-button-danger-secondary-border-color-active: var(--gl-color-red-50); /* Used for the border of an outlined danger (destructive) button in the active state. */
+  --gl-button-danger-secondary-border-color-hover: var(--gl-color-red-200); /* Used for the border of an outlined danger (destructive) button in the hover state. */
+  --gl-button-danger-secondary-border-color-default: var(--gl-color-red-400); /* Used for the border of an outlined danger (destructive) button in the default state. */
+  --gl-button-danger-secondary-background-color-active: var(--gl-color-red-800); /* Used for the background of an outlined danger (destructive) button in the active state. */
+  --gl-button-danger-secondary-background-color-hover: var(--gl-color-red-900); /* Used for the background of an outlined danger (destructive) button in the hover state. */
+  --gl-button-danger-secondary-background-color-default: var(--gl-color-neutral-900); /* Used for the background of an outlined danger (destructive) button in the default state. */
+  --gl-button-danger-secondary-foreground-color-active: var(--gl-color-red-50); /* Used for the foreground of a danger (destructive) button in the active state. */
+  --gl-button-danger-secondary-foreground-color-hover: var(--gl-color-red-200); /* Used for the foreground of a danger (destructive) button in the hover state. */
+  --gl-button-danger-secondary-foreground-color-default: var(--gl-color-red-400); /* Used for the foreground of a danger (destructive) button in the default state. */
+  --gl-button-danger-primary-border-color-active: var(--gl-color-red-50); /* Used for the border of a danger (destructive) primary button in the active state. */
+  --gl-button-danger-primary-border-color-hover: var(--gl-color-red-100); /* Used for the border of a danger (destructive) primary button in the hover state. */
+  --gl-button-danger-primary-border-color-default: var(--gl-color-red-300); /* Used for the border of a danger (destructive) primary button in the default state. */
+  --gl-button-danger-primary-background-color-active: var(--gl-color-red-100); /* Used for the background of a danger (destructive) primary button in the active state. */
+  --gl-button-danger-primary-background-color-hover: var(--gl-color-red-300); /* Used for the background of a danger (destructive) primary button in the hover state. */
+  --gl-button-danger-primary-background-color-default: var(--gl-color-red-400); /* Used for the background of a danger (destructive) primary button in the default state. */
+  --gl-button-danger-primary-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a danger (destructive) primary button in the default state. */
   --gl-button-confirm-tertiary-background-color-active: var(--gl-action-confirm-background-color-active); /* Used for the background of a borderless, tertiary confirm (positive) button in the active state. */
   --gl-button-confirm-tertiary-background-color-hover: var(--gl-action-confirm-background-color-hover); /* Used for the background of a borderless, tertiary confirm (positive) button in the hover state. */
   --gl-button-confirm-tertiary-background-color-default: var(--gl-action-confirm-background-color-default); /* Used for the background of a borderless, tertiary confirm (positive) button in the default state. */
-  --gl-button-confirm-secondary-border-color-active: var(--gl-color-alpha-0); /* Used for the border of an outlined confirm (positive) button in the active state. */
-  --gl-button-confirm-secondary-border-color-hover: var(--gl-color-alpha-0); /* Used for the border of an outlined confirm (positive) button in the hover state. */
-  --gl-button-confirm-secondary-border-color-default: var(--gl-color-alpha-0); /* Used for the border of an outlined confirm (positive) button in the default state. */
-  --gl-button-confirm-secondary-background-color-active: rgba(66, 143, 220, 0.32); /* Used for the background of an outlined confirm (positive) button in the active state. */
-  --gl-button-confirm-secondary-background-color-hover: rgba(66, 143, 220, 0.64); /* Used for the background of an outlined confirm (positive) button in the hover state. */
-  --gl-button-confirm-secondary-background-color-default: rgba(66, 143, 220, 0.4); /* Used for the background of an outlined confirm (positive) button in the default state. */
-  --gl-button-confirm-secondary-foreground-color-active: var(--gl-color-blue-100); /* Used for the foreground of a confirm (positive) button in the active state. */
-  --gl-button-confirm-secondary-foreground-color-hover: var(--gl-color-blue-100); /* Used for the foreground of a confirm (positive) button in the hover state. */
-  --gl-button-confirm-secondary-foreground-color-default: var(--gl-color-blue-100); /* Used for the foreground of a confirm (positive) button in the default state. */
-  --gl-button-confirm-primary-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a confirm (positive) primary button in the active state. */
-  --gl-button-confirm-primary-border-color-hover: var(--gl-color-alpha-0); /* Used for the border of a confirm (positive) primary button in the hover state. */
-  --gl-button-confirm-primary-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a confirm (positive) primary button in the default state. */
-  --gl-button-confirm-primary-foreground-color-default: var(--gl-color-neutral-950); /* Used for the foreground of a confirm (positive) primary button in the default state. */
+  --gl-button-confirm-secondary-border-color-active: var(--gl-color-blue-50); /* Used for the border of an outlined confirm (positive) button in the active state. */
+  --gl-button-confirm-secondary-border-color-hover: var(--gl-color-blue-200); /* Used for the border of an outlined confirm (positive) button in the hover state. */
+  --gl-button-confirm-secondary-border-color-default: var(--gl-color-blue-400); /* Used for the border of an outlined confirm (positive) button in the default state. */
+  --gl-button-confirm-secondary-background-color-active: var(--gl-color-blue-800); /* Used for the background of an outlined confirm (positive) button in the active state. */
+  --gl-button-confirm-secondary-background-color-hover: var(--gl-color-blue-900); /* Used for the background of an outlined confirm (positive) button in the hover state. */
+  --gl-button-confirm-secondary-background-color-default: var(--gl-color-neutral-900); /* Used for the background of an outlined confirm (positive) button in the default state. */
+  --gl-button-confirm-secondary-foreground-color-active: var(--gl-color-blue-50); /* Used for the foreground of a confirm (positive) button in the active state. */
+  --gl-button-confirm-secondary-foreground-color-hover: var(--gl-color-blue-200); /* Used for the foreground of a confirm (positive) button in the hover state. */
+  --gl-button-confirm-secondary-foreground-color-default: var(--gl-color-blue-400); /* Used for the foreground of a confirm (positive) button in the default state. */
+  --gl-button-confirm-primary-border-color-active: var(--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: var(--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: var(--gl-color-blue-300); /* Used for the border 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. */
-  --gl-button-default-primary-border-color-active: var(--gl-color-alpha-0); /* Used for the border of an default primary button in the active state. */
-  --gl-button-default-primary-border-color-hover: var(--gl-color-alpha-0); /* Used for the border of an default primary button in the hover state. */
-  --gl-button-default-primary-border-color-default: var(--gl-color-alpha-0); /* Used for the border of an default primary button in the default state. */
-  --gl-button-default-primary-background-color-active: rgba(137, 136, 141, 0.32); /* Used for the background of an default primary button in the active state. */
-  --gl-button-default-primary-background-color-hover: rgba(137, 136, 141, 0.64); /* Used for the background of an default primary button in the hover state. */
-  --gl-button-default-primary-background-color-default: rgba(137, 136, 141, 0.4); /* Used for the background of an default primary button in the default state. */
+  --gl-button-default-primary-border-color-active: var(--gl-color-neutral-300); /* Used for the border of an default primary button in the active state. */
+  --gl-button-default-primary-border-color-hover: var(--gl-color-neutral-500); /* Used for the border of an default primary button in the hover state. */
+  --gl-button-default-primary-border-color-default: var(--gl-color-neutral-700); /* Used for the border of an default primary button in the default state. */
+  --gl-button-default-primary-background-color-active: var(--gl-color-neutral-800); /* Used for the background of an default primary button in the active state. */
+  --gl-button-default-primary-background-color-hover: var(--gl-color-neutral-900); /* Used for the background of an default primary button in the hover state. */
+  --gl-button-default-primary-background-color-default: var(--gl-color-neutral-900); /* Used for the background of an default primary button in the default state. */
   --gl-button-default-primary-foreground-color-default: var(--gl-color-neutral-50); /* Used for the foreground of a default primary button in the default state. */
   --gl-broadcast-banner-text-color-red: var(--gl-color-neutral-0); /* Used for the text for the red banner type. */
   --gl-broadcast-banner-text-color-lightred: var(--gl-color-neutral-0); /* Used for the text for the lightred banner type. */
@@ -754,19 +753,19 @@
   --gl-action-strong-neutral-background-color-default: var(--gl-color-neutral-700); /* 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-950); /* Used for the foreground of a strong confirm action in the default state. */
-  --gl-action-strong-confirm-background-color-active: var(--gl-color-blue-400); /* Used for the background of a strong confirm action in the active state. */
-  --gl-action-strong-confirm-background-color-hover: var(--gl-color-blue-200); /* Used for the background of a strong confirm action in the hover state. */
-  --gl-action-strong-confirm-background-color-default: var(--gl-color-blue-300); /* Used for the background of a strong confirm action in the default state. */
+  --gl-action-strong-confirm-background-color-active: var(--gl-color-blue-200); /* Used for the background of a strong confirm action in the active state. */
+  --gl-action-strong-confirm-background-color-hover: var(--gl-color-blue-300); /* Used for the background of a strong confirm action in the hover state. */
+  --gl-action-strong-confirm-background-color-default: var(--gl-color-blue-400); /* 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-100); /* Used for the foreground of a danger (destructive) action in the active state. */
-  --gl-action-danger-foreground-color-hover: var(--gl-color-red-100); /* Used for the foreground of a danger (destructive) action in the hover state. */
-  --gl-action-danger-foreground-color-default: var(--gl-color-red-200); /* Used for the foreground of a danger (destructive) action in the default state. */
+  --gl-action-danger-foreground-color-active: var(--gl-color-red-50); /* Used for the foreground of a danger (destructive) action in the active state. */
+  --gl-action-danger-foreground-color-hover: var(--gl-color-red-200); /* Used for the foreground of a danger (destructive) action in the hover state. */
+  --gl-action-danger-foreground-color-default: var(--gl-color-red-400); /* Used for the foreground of a danger (destructive) action in the default state. */
   --gl-action-confirm-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a confirm action in the default state. */
   --gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-hover); /* Used for the background of a confirm (positive) action in the focus state. */
-  --gl-action-confirm-foreground-color-active: var(--gl-color-blue-100); /* Used for the foreground of a confirm (positive) action in the active state. */
-  --gl-action-confirm-foreground-color-hover: var(--gl-color-blue-100); /* Used for the foreground of a confirm (positive) action in the hover state. */
-  --gl-action-confirm-foreground-color-default: var(--gl-color-blue-200); /* Used for the foreground of a confirm (positive) action in the default state. */
+  --gl-action-confirm-foreground-color-active: var(--gl-color-blue-50); /* Used for the foreground of a confirm (positive) action in the active state. */
+  --gl-action-confirm-foreground-color-hover: var(--gl-color-blue-200); /* Used for the foreground of a confirm (positive) action in the hover state. */
+  --gl-action-confirm-foreground-color-default: var(--gl-color-blue-400); /* Used for the foreground of a confirm (positive) action in the default state. */
   --gl-action-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a neutral action in the default state. */
   --gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-hover); /* Used for the background of a neutral action in the focus state. */
   --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-50); /* Used for the foreground of a neutral action in the default state. */
@@ -836,6 +835,7 @@
   --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. */
@@ -877,7 +877,7 @@
   --gl-alert-neutral-title-color: var(--gl-text-color-heading); /* Used for the title color of a neutral alert. */
   --gl-border-color-section: var(--gl-background-color-default); /* Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
   --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-color-neutral-0); /* Used for the foreground 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. */