@gitlab/ui 98.1.2 → 98.3.0

package/src/components/base/datepicker/datepicker.vue

@@ -243,7 +243,7 @@ export default {
     datepickerClasses() {
       return [
         'gl-datepicker',
-        'd-inline-block',
+        'gl-inline-block',
         'gl-w-full',
         // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
         `gl-form-input-${this.computedWidth}`,

package/src/components/base/form/input_group_text/input_group_text.scss

@@ -0,0 +1,7 @@
+.input-group-text {
+    background-color: var(--gl-control-background-color-concatenation);
+    border-color: var(--gl-control-border-color-default);
+    color: var(--gl-text-color-default);
+    @apply gl-text-base;
+    @apply gl-leading-normal;
+}

package/src/components/charts/area/area.vue

@@ -316,7 +316,7 @@ export default {
 </script>
 
 <template>
-  <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
+  <div class="gl-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
     <chart
       v-bind="$attrs"
       :class="{ 'gl-grow': autoHeight }"

package/src/components/charts/bar/bar.vue

@@ -218,7 +218,7 @@ export default {
 </script>
 
 <template>
-  <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
+  <div class="gl-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
     <chart
       v-bind="$attrs"
       :class="{ 'gl-grow': autoHeight }"

package/src/components/charts/column/column.vue

@@ -175,7 +175,7 @@ export default {
 };
 </script>
 <template>
-  <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
+  <div class="gl-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
     <chart
       v-bind="$attrs"
       :class="{ 'gl-grow': autoHeight }"

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -180,7 +180,7 @@ export default {
 };
 </script>
 <template>
-  <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
+  <div class="gl-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
     <chart
       v-bind="$attrs"
       :class="{ 'gl-grow': autoHeight }"

package/src/components/charts/legend/legend.vue

@@ -198,7 +198,7 @@ export default {
           :key="key"
           :class="{
             'text-muted': disabledSeries[key],
-            'w-100': seriesNameIsLong(series.name),
+            'gl-w-full': seriesNameIsLong(series.name),
             'hover:!gl-cursor-not-allowed':
               hasOneSeriesElement || isToggleDisabled(series.name, series.disabled),
           }"
@@ -214,7 +214,7 @@ export default {
             :color="getColor(series.color, key)"
             :type="series.type"
             class="gl-legend-inline-series-label"
-            :class="{ 'w-75': seriesNameIsLong(series.name) }"
+            :class="{ 'gl-w-3/4': seriesNameIsLong(series.name) }"
           >
             <gl-truncate class="gl-font-bold" :text="series.name" />
           </gl-chart-series-label>
@@ -242,7 +242,8 @@ export default {
             v-for="(series, key) in seriesInfo"
             :key="key"
             :class="{
-              'text-muted': disabledSeries[key],
+              'gl-text-subtle': disabledSeries[key],
+              'gl-text-strong': !disabledSeries[key],
               'hover:!gl-cursor-not-allowed':
                 hasOneSeriesElement || isToggleDisabled(series.name, series.disabled),
             }"

package/src/components/charts/line/line.vue

@@ -312,7 +312,7 @@ export default {
 </script>
 
 <template>
-  <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
+  <div class="gl-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
     <chart
       v-bind="$attrs"
       :class="{ 'gl-grow': autoHeight }"

package/src/components/charts/stacked_column/stacked_column.vue

@@ -296,7 +296,7 @@ export default {
 };
 </script>
 <template>
-  <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
+  <div class="gl-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
     <chart
       v-bind="$attrs"
       :class="{ 'gl-grow': autoHeight }"

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items_loading.vue

@@ -29,6 +29,6 @@ export default {
       </div>
       <div class="gl-animate-skeleton-loader gl-h-4 gl-w-1/2 gl-rounded-base"></div>
     </div>
-    <span class="sr-only">{{ $options.i18n.loadingMessage }}</span>
+    <span class="gl-sr-only">{{ $options.i18n.loadingMessage }}</span>
   </div>
 </template>

package/src/scss/components.scss

@@ -45,6 +45,7 @@
 @import '../components/base/form/form_radio_group/form_radio_group';
 @import '../components/base/form/form_select/form_select';
 @import '../components/base/form/form_combobox/form_combobox';
+@import '../components/base/form/input_group_text/input_group_text';
 @import '../components/base/icon/icon';
 @import '../components/base/infinite_scroll/infinite_scroll';
 @import '../components/base/label/label';

package/src/tokens/action.tokens.json

@@ -210,7 +210,7 @@
           "default": {
             "$value": {
               "default": "{color.blue.500}",
-              "dark": "{color.blue.400}"
+              "dark": "{color.blue.200}"
             },
             "$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.200}"
+              "dark": "{color.blue.100}"
             },
             "$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.50}"
+              "dark": "{color.blue.100}"
             },
             "$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.400}"
+              "dark": "{color.red.200}"
             },
             "$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.200}"
+              "dark": "{color.red.100}"
             },
             "$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.50}"
+              "dark": "{color.red.100}"
             },
             "$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.400}"
+                "dark": "{color.blue.300}"
               },
               "$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.300}"
+                "dark": "{color.blue.200}"
               },
               "$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.200}"
+                "dark": "{color.blue.400}"
               },
               "$type": "color",
               "$description": "Used for the background of a strong confirm action in the active state."
@@ -520,17 +520,26 @@
               "$description": "Used for the foreground of a strong neutral action in the default state."
             },
             "hover": {
-              "$value": "{action.strong.neutral.foreground.color.default}",
+              "$value": {
+                "default": "{action.strong.neutral.foreground.color.default}",
+                "dark": "{color.neutral.0}"
+              },
               "$type": "color",
               "$description": "Used for the foreground of a strong neutral action in the hover state."
             },
             "focus": {
-              "$value": "{action.strong.neutral.foreground.color.hover}",
+              "$value": {
+                "default": "{action.strong.neutral.foreground.color.hover}",
+                "dark": "{color.neutral.0}"
+              },
               "$type": "color",
               "$description": "Used for the foreground of a strong neutral action in the focus state."
             },
             "active": {
-              "$value": "{action.strong.neutral.foreground.color.focus}",
+              "$value": {
+                "default": "{action.strong.neutral.foreground.color.focus}",
+                "dark": "{color.neutral.0}"
+              },
               "$type": "color",
               "$description": "Used for the foreground of a strong neutral action in the active state."
             }

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

@@ -579,6 +579,7 @@
   --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. */
@@ -835,7 +836,6 @@
   --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-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-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-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,46 +548,47 @@
   --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-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-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-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-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-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-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-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-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-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-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-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. */
@@ -753,19 +754,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-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-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-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-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-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-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-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-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-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. */
@@ -835,7 +836,6 @@
   --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-action-strong-neutral-foreground-color-default); /* Used for the foreground 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-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. */