@gitlab/ui 137.3.0 → 138.0.0

package/dist/vendor/bootstrap-vue/src/components/popover/helpers/bv-popover-template.js

@@ -42,10 +42,12 @@ const BVPopoverTemplate = /*#__PURE__*/extend({
         attrs: {
           role: 'presentation'
         }
-      }, [$title]), isUndefinedOrNull($content) || $content === '' ? /* istanbul ignore next */h() : h('div', {
+      },
+      // `innerHTML` overrides children, so avoid passing both — Vue 3 warns otherwise
+      titleDomProps.innerHTML ? [] : [$title]), isUndefinedOrNull($content) || $content === '' ? /* istanbul ignore next */h() : h('div', {
         staticClass: 'popover-body',
         domProps: contentDomProps
-      }, [$content])]);
+      }, contentDomProps.innerHTML ? [] : [$content])]);
     }
   }
 });

package/dist/vendor/bootstrap-vue/src/components/tooltip/helpers/bv-tooltip-template.js

@@ -113,7 +113,9 @@ const BVTooltipTemplate = /*#__PURE__*/extend({
       }), h('div', {
         staticClass: 'tooltip-inner',
         domProps
-      }, [$title])]);
+      },
+      // `innerHTML` overrides children, so avoid passing both — Vue 3 warns otherwise
+      domProps.innerHTML ? [] : [$title])]);
     }
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "137.3.0",
+  "version": "138.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -109,6 +109,7 @@
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/hybrid-vue": "npm:@vue/compat@3.5.34",
     "@gitlab/svgs": "*",
+    "@gitlab/vue-router-vue3": "npm:vue-router@^4.6.4",
     "@jest/test-sequencer": "30.5.2",
     "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-node-resolve": "^16.0.3",
@@ -169,7 +170,7 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.104.1",
+    "sass": "^1.105.0",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
     "start-server-and-test": "^2.1.5",

package/src/components/base/alert/alert.scss

@@ -26,20 +26,24 @@ $gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
 }
 
 .gl-alert {
-  @apply gl-py-5;
+  @apply gl-py-3;
   @apply gl-text-base;
   border-radius: var(--gl-alert-border-radius);
-  padding-inline: calc(#{$gl-spacing-scale-9} + #{$gl-alert-padding-x});
+  padding-inline: calc(#{$gl-spacing-scale-7} + #{$gl-alert-padding-x});
   position: relative;
   border: 1px solid;
 
   &-not-dismissible {
-    padding-right: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
+    padding-right: calc(#{$gl-spacing-scale-4} + #{$gl-alert-padding-x});
   }
 
   .gl-link:not(.gl-label-link) {
     @apply gl-underline;
   }
+
+  &.gl-alert-has-actions {
+    @apply gl-pb-4;
+  }
 }
 
 .gl-alert-sticky {
@@ -48,20 +52,19 @@ $gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
 }
 
 .gl-alert-title {
-  @apply gl-heading-scale-400 -gl-mt-1 gl-mb-2;
+  @apply gl-heading-scale-300;
+  @apply gl-mb-2;
+  @apply gl-leading-20;
 }
 
 .gl-alert-icon-container {
-  position: absolute;
-  top: #{$gl-spacing-scale-4 + $gl-spacing-scale-1};
-  left: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
+  @apply gl-absolute;
+  @apply gl-top-3;
+  left: calc(#{$gl-spacing-scale-3} + #{$gl-alert-padding-x});
   @apply gl-flex;
   @apply gl-items-center;
-  height: $gl-line-height-24;
-
-  .gl-alert-has-title & {
-    top: $gl-spacing-scale-4;
-  }
+  // Match line-height on first line of title or slot text content
+  height: $gl-line-height-20;
 }
 
 .gl-alert-body {
@@ -89,12 +92,9 @@ $gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
 // This is the replacement for .gl-alert-dismiss
 .gl-dismiss-btn {
   position: absolute;
-  top: $gl-spacing-scale-4;
-  right: calc(#{$gl-spacing-scale-4} + #{$gl-alert-padding-x});
-
-  .gl-alert-has-title & {
-    top: $gl-spacing-scale-4;
-  }
+  // Pull the button up by half its overhang so it aligns with first line title or slot text content
+  top: calc(#{$gl-spacing-scale-3} - (#{$gl-button-small-size} - #{$gl-line-height-20}) / 2);
+  right: calc(#{$gl-spacing-scale-2} + #{$gl-alert-padding-x});
 }
 
 /* Variants */

package/src/components/base/alert/alert.vue

@@ -147,7 +147,6 @@ export default {
       return alertVariantIconMap[this.variant];
     },
     shouldRenderActions() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots.actions || this.actionButtons.length);
     },
     actionButtons() {
@@ -239,6 +238,7 @@ export default {
       { 'gl-alert-sticky': sticky },
       { 'gl-alert-not-dismissible': !dismissible },
       { 'gl-alert-has-title': !!title },
+      { 'gl-alert-has-actions': shouldRenderActions },
       { 'gl-focus': hasProgrammaticFocus },
       variantClass,
     ]"
@@ -263,6 +263,7 @@ export default {
             v-for="(actionButton, index) in actionButtons"
             :key="index"
             class="gl-alert-action"
+            size="small"
             v-bind="actionButton.attrs"
             v-on="actionButton.listeners"
           >

package/src/components/base/drawer/drawer.vue

@@ -72,7 +72,6 @@ export default {
       };
     },
     shouldRenderFooter() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots.footer);
     },
     variantClass() {

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -212,7 +212,6 @@ export default {
     },
 
     hasOptionsOrSuggestions() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return this.options?.length || isSlotNotEmpty(this.$slots.suggestions);
     },
 

package/src/components/base/form/form_group/form_group.vue

@@ -70,7 +70,6 @@ export default {
       return defaultClass;
     },
     hasLabelDescription() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.labelDescription || this.$slots['label-description']);
     },
   },
@@ -95,7 +94,6 @@ export default {
       </div>
     </template>
 
-    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>
     </template>

package/src/components/base/form/form_select/form_select.vue

@@ -60,7 +60,6 @@ export default {
 <template>
   <span class="gl-form-select-wrapper" :class="cssClasses">
     <b-form-select class="gl-form-select" v-bind="$attrs" :class="selectClass" v-on="$listeners">
-      <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
       <template v-for="slot in Object.keys($slots)" #[slot]>
         <slot :name="slot"></slot>
       </template>

package/src/components/base/modal/modal.vue

@@ -146,11 +146,9 @@ export default {
   },
   computed: {
     shouldRenderModalOk() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots['modal-ok']);
     },
     shouldRenderModalCancel() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots['modal-cancel']);
     },
     shouldRenderModalFooter() {
@@ -158,7 +156,6 @@ export default {
         this.actionCancel ||
         this.actionSecondary ||
         this.actionPrimary ||
-        // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
         this.$slots['modal-footer'],
       );
     },

package/src/components/base/new_dropdowns/base_dropdown/dropdown_container.js

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-default-export */
+/* eslint-disable import-x/no-default-export */
 import { MountingPortal } from 'portal-vue';
 import { POSITION_ABSOLUTE, POSITION_FIXED } from '../constants';
 

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.scss

@@ -6,7 +6,8 @@
 
     .gl-new-dropdown-item-content {
       &:disabled,
-      &[disabled] {
+      &[disabled],
+      &.disabled {
         color: var(--gl-dropdown-option-text-color-disabled);
         cursor: not-allowed;
         background: none;

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -247,7 +247,6 @@ export default {
     disclosureTag() {
       if (
         this.items?.length ||
-        // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
         hasOnlyListItems(this.$scopedSlots.default || this.$slots.default)
       ) {
         return 'ul';
@@ -378,6 +377,9 @@ export default {
         this.closeAndFocus();
       }
     },
+    isDisabled(item) {
+      return item.disabled;
+    },
     uniqueItemId() {
       return uniqueId(`disclosure-item-`);
     },
@@ -443,6 +445,7 @@ export default {
               :key="uniqueItemId()"
               :siblings-have-icons="siblingsHaveIcons"
               :item="item"
+              :disabled="isDisabled(item)"
               @action="handleAction"
             >
               <template v-if="'list-item' in $scopedSlots" #list-item>

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue

@@ -50,6 +50,15 @@ export default {
       default: false,
       required: false,
     },
+
+    /**
+     * Is the item able to be selected
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   computed: {
     isLink() {
@@ -108,6 +117,7 @@ export default {
           ? // eslint-disable-next-line @gitlab/tailwind-no-interpolation
             `gl-new-dropdown-item-${this.itemVariant}`
           : '',
+        this.disabled ? 'disabled' : '',
       ];
     },
     iconName() {
@@ -125,22 +135,24 @@ export default {
   },
   methods: {
     onKeydown(event) {
-      const { code } = event;
+      if (!this.disabled) {
+        const { code } = event;
 
-      if (code === ENTER || code === SPACE) {
-        if (this.isCustomContent) {
-          this.action();
-        } else {
-          stopEvent(event);
-          /** Instead of simply navigating or calling the action, we want
-           * the `a/button` to be the target of the event as it might have additional attributes.
-           * E.g. `a` might have `target` attribute.
-           */
-          const e = new MouseEvent('click', { bubbles: true, cancelable: true });
-          if (this.isLink) {
-            this.$refs.item.$el.dispatchEvent(e);
+        if (code === ENTER || code === SPACE) {
+          if (this.isCustomContent) {
+            this.action();
           } else {
-            this.$refs.item?.dispatchEvent(e);
+            stopEvent(event);
+            /** Instead of simply navigating or calling the action, we want
+             * the `a/button` to be the target of the event as it might have additional attributes.
+             * E.g. `a` might have `target` attribute.
+             */
+            const e = new MouseEvent('click', { bubbles: true, cancelable: true });
+            if (this.isLink) {
+              this.$refs.item.$el.dispatchEvent(e);
+            } else {
+              this.$refs.item?.dispatchEvent(e);
+            }
           }
         }
       }
@@ -148,6 +160,11 @@ export default {
     action() {
       this.$emit('action', this.item);
     },
+    handleClick(event) {
+      if (this.disabled) {
+        stopEvent(event);
+      }
+    },
   },
 };
 </script>
@@ -157,6 +174,7 @@ export default {
     :tabindex="listIndex"
     :class="classes"
     data-testid="disclosure-dropdown-item"
+    :aria-disabled="disabled"
     v-on="wrapperListeners"
   >
     <slot>
@@ -167,6 +185,7 @@ export default {
         class="gl-new-dropdown-item-content"
         :tabindex="componentIndex"
         v-on="itemComponent.listeners"
+        @click="handleClick"
       >
         <span class="gl-new-dropdown-item-text-wrapper">
           <slot name="list-item">

package/src/components/base/tabs/tabs/scrollable_tabs.vue

@@ -125,7 +125,6 @@ export default {
     v-bind="passthroughAttrs"
     v-on="$listeners"
   >
-    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>
     </template>

package/src/components/base/tabs/tabs/tabs.vue

@@ -238,7 +238,6 @@ export default {
     v-bind="$attrs"
     v-on="listeners"
   >
-    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>
     </template>

package/src/components/base/toast/index.js

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-default-export */
+/* eslint-disable import-x/no-default-export */
 import Vue from 'vue';
 import { createNewChildComponent } from '../../../vendor/bootstrap-vue/src/utils/create-new-child-component';
 import GlToaster from './toaster.vue';

package/src/components/base/toggle/toggle.vue

@@ -97,7 +97,6 @@ export default {
       return Boolean(this.$scopedSlots.description || this.description) && this.isVerticalLayout;
     },
     shouldRenderHelp() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots.help || this.help) && this.isVerticalLayout;
     },
     toggleClasses() {

package/src/components/charts/heatmap/index.js

@@ -1,4 +1,4 @@
 import Heatmap from './heatmap.vue';
 
-// eslint-disable-next-line import/no-default-export
+// eslint-disable-next-line import-x/no-default-export
 export default Heatmap;

package/src/components/mixins/tooltip_mixin.js

@@ -1,6 +1,6 @@
 import { tooltipActionEvents } from '../../utils/constants';
 
-// eslint-disable-next-line import/no-default-export
+// eslint-disable-next-line import-x/no-default-export
 export default (tooltipRefName) => ({
   mounted() {
     /**

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

@@ -20,17 +20,17 @@
   --gl-color-alpha-light-24: rgba(255, 255, 255, 0.24);
   --gl-color-alpha-light-36: rgba(255, 255, 255, 0.36);
   --gl-color-alpha-light-40: rgba(255, 255, 255, 0.4);
-  --gl-color-blue-50: #e9f3fc;
-  --gl-color-blue-100: #cbe2f9;
-  --gl-color-blue-200: #9dc7f1;
-  --gl-color-blue-300: #63a6e9;
-  --gl-color-blue-400: #428fdc;
-  --gl-color-blue-500: #1f75cb;
-  --gl-color-blue-600: #2f68b4;
-  --gl-color-blue-700: #2f5ca0;
-  --gl-color-blue-800: #284779;
-  --gl-color-blue-900: #213454;
-  --gl-color-blue-950: #1d283e;
+  --gl-color-blue-50: #e8f2fd;
+  --gl-color-blue-100: #c8e0f9;
+  --gl-color-blue-200: #9dc8f2;
+  --gl-color-blue-300: #64a7e9;
+  --gl-color-blue-400: #3f8edd;
+  --gl-color-blue-500: #1f73ca;
+  --gl-color-blue-600: #2566b5;
+  --gl-color-blue-700: #27599f;
+  --gl-color-blue-800: #254581;
+  --gl-color-blue-900: #1f3166;
+  --gl-color-blue-950: #1d2153;
   --gl-color-brand-white: #fff;
   --gl-color-brand-charcoal: #171321;
   --gl-color-brand-orange-01g: #ffd1bf;
@@ -101,17 +101,17 @@
   --gl-color-data-orange-800: #6f3500;
   --gl-color-data-orange-900: #5e2f05;
   --gl-color-data-orange-950: #4b2707;
-  --gl-color-green-50: #ecf4ee;
-  --gl-color-green-100: #c3e6cd;
-  --gl-color-green-200: #91d4a8;
-  --gl-color-green-300: #52b87a;
-  --gl-color-green-400: #2da160;
-  --gl-color-green-500: #108548;
-  --gl-color-green-600: #2f7549;
-  --gl-color-green-700: #306440;
-  --gl-color-green-800: #225131;
-  --gl-color-green-900: #1e3e28;
-  --gl-color-green-950: #17291c;
+  --gl-color-green-50: #e6f5ea;
+  --gl-color-green-100: #bee6d0;
+  --gl-color-green-200: #84d4b6;
+  --gl-color-green-300: #35b597;
+  --gl-color-green-400: #129c84;
+  --gl-color-green-500: #0d8070;
+  --gl-color-green-600: #0c7265;
+  --gl-color-green-700: #0b645a;
+  --gl-color-green-800: #075048;
+  --gl-color-green-900: #003c36;
+  --gl-color-green-950: #002c26;
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #f7f7f5;
   --gl-color-neutral-50: #ecebea;
@@ -126,39 +126,39 @@
   --gl-color-neutral-900: #28272d;
   --gl-color-neutral-950: #18171d;
   --gl-color-neutral-1000: #050408;
-  --gl-color-orange-50: #fdf1dd;
-  --gl-color-orange-100: #f5d9a8;
-  --gl-color-orange-200: #e9be74;
-  --gl-color-orange-300: #d99530;
-  --gl-color-orange-400: #c17d10;
-  --gl-color-orange-500: #ab6100;
-  --gl-color-orange-600: #995715;
-  --gl-color-orange-700: #894b16;
-  --gl-color-orange-800: #693c14;
-  --gl-color-orange-900: #532e16;
-  --gl-color-orange-950: #382315;
-  --gl-color-purple-50: #f4f0ff;
-  --gl-color-purple-100: #e1d8f9;
-  --gl-color-purple-200: #cbbbf2;
-  --gl-color-purple-300: #ac93e6;
-  --gl-color-purple-400: #9475db;
-  --gl-color-purple-500: #7b58cf;
-  --gl-color-purple-600: #6a4fb4;
-  --gl-color-purple-700: #5c47a6;
-  --gl-color-purple-800: #493c83;
-  --gl-color-purple-900: #342d59;
-  --gl-color-purple-950: #27243e;
-  --gl-color-red-50: #fcf1ef;
-  --gl-color-red-100: #fdd4cd;
-  --gl-color-red-200: #fcb5aa;
-  --gl-color-red-300: #f6806d;
-  --gl-color-red-400: #ec5941;
-  --gl-color-red-500: #dd2b0e;
-  --gl-color-red-600: #c02f12;
-  --gl-color-red-700: #a32c12;
-  --gl-color-red-800: #812713;
-  --gl-color-red-900: #582014;
-  --gl-color-red-950: #3e1a14;
+  --gl-color-orange-50: #fdf0d5;
+  --gl-color-orange-100: #fada9c;
+  --gl-color-orange-200: #f7b951;
+  --gl-color-orange-300: #fb8017;
+  --gl-color-orange-400: #e95f21;
+  --gl-color-orange-500: #c74816;
+  --gl-color-orange-600: #b34013;
+  --gl-color-orange-700: #9e3811;
+  --gl-color-orange-800: #7d2d0e;
+  --gl-color-orange-900: #5d220d;
+  --gl-color-orange-950: #461807;
+  --gl-color-purple-50: #f4f0fc;
+  --gl-color-purple-100: #e1daf7;
+  --gl-color-purple-200: #c9beef;
+  --gl-color-purple-300: #a997e1;
+  --gl-color-purple-400: #927cd7;
+  --gl-color-purple-500: #7862c8;
+  --gl-color-purple-600: #6a54c0;
+  --gl-color-purple-700: #5b46b8;
+  --gl-color-purple-800: #483698;
+  --gl-color-purple-900: #362676;
+  --gl-color-purple-950: #291a5c;
+  --gl-color-red-50: #feeef0;
+  --gl-color-red-100: #ffd3d7;
+  --gl-color-red-200: #ffafb8;
+  --gl-color-red-300: #fc7988;
+  --gl-color-red-400: #f15168;
+  --gl-color-red-500: #de1d4b;
+  --gl-color-red-600: #c52042;
+  --gl-color-red-700: #ac203a;
+  --gl-color-red-800: #891c2f;
+  --gl-color-red-900: #641925;
+  --gl-color-red-950: #48151d;
   --gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),'GitLab Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
   --gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'GitLab Mono','JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
   --gl-font-size-100: 0.75rem; /** Used for meta text and small labels. */
@@ -244,11 +244,11 @@
   --gl-zindex-4: 4;
   --gl-zindex-200: 200;
   --gl-zindex-9999: 9999;
-  --gl-avatar-fallback-background-color-red: rgba(252, 181, 170, 0.23921568627450981); /** Red background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-purple: rgba(203, 187, 242, 0.23921568627450981); /** Purple background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-blue: rgba(157, 199, 241, 0.23921568627450981); /** Blue background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-green: rgba(145, 212, 168, 0.23921568627450981); /** Green background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-orange: rgba(233, 190, 116, 0.23921568627450981); /** Orange background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-red: rgba(255, 175, 184, 0.23921568627450981); /** Red background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-purple: rgba(201, 190, 239, 0.23921568627450981); /** Purple background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-blue: rgba(157, 200, 242, 0.23921568627450981); /** Blue background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-green: rgba(132, 212, 182, 0.23921568627450981); /** Green background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-orange: rgba(247, 185, 81, 0.23921568627450981); /** Orange background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-neutral: rgba(191, 191, 195, 0.23921568627450981); /** Neutral background for avatar fallback with no particular meaning. */
   --gl-broadcast-banner-background-color-blue: #235180; /** Used for the background for the blue banner type. */
   --gl-broadcast-banner-background-color-green: #1b653f; /** Used for the background for the green banner type. */
@@ -266,7 +266,7 @@
   --gl-broadcast-banner-border-color-lightindigo: #41419f; /** Used for the border for the lightindigo banner type. */
   --gl-broadcast-banner-border-color-lightred: #8f2110; /** Used for the border for the lightred banner type. */
   --gl-broadcast-banner-border-color-red: #580d02; /** Used for the border for the red banner type. */
-  --gl-chart-threshold-area-color: rgba(221, 43, 14, 0.1); /** Used in charts to delineate a threshold area in a chart. */
+  --gl-chart-threshold-area-color: rgba(222, 29, 75, 0.1); /** Used in charts to delineate a threshold area in a chart. */
   --gl-illustration-stroke-color-default: #171321; /** Default stroke color to define shape and provide essential detail. */
   --gl-illustration-stroke-width-default: 2; /** Default stroke width to define shape and provide essential detail. */
   --gl-illustration-fill-color-default: #fff; /** Default fill color for an element where specific meaning or emphasis is not required. */
@@ -379,9 +379,9 @@
   --t-white-a-04: rgba(255, 255, 255, 0.04); /** Use color.alpha.light.4 instead. */
   --t-white-a-06: rgba(255, 255, 255, 0.06); /** Use color.alpha.light.6 instead. */
   --t-white-a-08: rgba(255, 255, 255, 0.08); /** Use color.alpha.light.8 instead. */
-  --gl-action-danger-background-color-default: rgba(245, 127, 108, 0); /** Used for the background of a danger (destructive) action in the default state. */
-  --gl-action-danger-background-color-hover: rgba(245, 127, 108, 0.16); /** Used for the background of a danger (destructive) action in the hover state. */
-  --gl-action-danger-background-color-active: rgba(174, 24, 0, 0.24); /** Used for the background of a danger (destructive) action in the active state. */
+  --gl-action-danger-background-color-default: rgba(222, 29, 75, 0); /** Used for the background of a danger (destructive) action in the default state. */
+  --gl-action-danger-background-color-hover: rgba(222, 29, 75, 0.16); /** Used for the background of a danger (destructive) action in the hover state. */
+  --gl-action-danger-background-color-active: rgba(172, 32, 58, 0.24); /** Used for the background of a danger (destructive) action in the active state. */
   --gl-letter-spacing-heading: -0.01em;
   --gl-heading-3-letter-spacing: inherit;
   --gl-heading-4-letter-spacing: inherit;
@@ -577,20 +577,20 @@
   --gl-button-confirm-secondary-border-color-hover: var(--gl-color-neutral-950); /** Used for the border of an outlined confirm (positive) button in the hover state. */
   --gl-button-confirm-secondary-border-color-active: var(--gl-color-neutral-1000); /** Used for the border of an outlined confirm (positive) button in the active 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-primary-background-color-default: var(--gl-color-red-500); /** Used for the background of a danger (destructive) primary button in the default state. */
-  --gl-button-danger-primary-background-color-hover: var(--gl-color-red-600); /** Used for the background of a danger (destructive) primary button in the hover state. */
-  --gl-button-danger-primary-background-color-active: var(--gl-color-red-800); /** Used for the background of a danger (destructive) primary button in the active state. */
-  --gl-button-danger-primary-border-color-default: var(--gl-color-red-600); /** Used for the border of a danger (destructive) primary button in the default state. */
-  --gl-button-danger-primary-border-color-hover: var(--gl-color-red-800); /** Used for the border of a danger (destructive) primary button in the hover state. */
-  --gl-button-danger-primary-border-color-active: var(--gl-color-red-900); /** Used for the border of a danger (destructive) primary button in the active state. */
-  --gl-button-danger-secondary-foreground-color-default: var(--gl-color-red-500); /** Used for the foreground of a danger (destructive) button in the default state. */
-  --gl-button-danger-secondary-foreground-color-hover: var(--gl-color-red-700); /** Used for the foreground of a danger (destructive) button in the hover state. */
+  --gl-button-danger-primary-background-color-default: var(--gl-color-red-600); /** Used for the background of a danger (destructive) primary button in the default state. */
+  --gl-button-danger-primary-background-color-hover: var(--gl-color-red-700); /** Used for the background of a danger (destructive) primary button in the hover state. */
+  --gl-button-danger-primary-background-color-active: var(--gl-color-red-900); /** Used for the background of a danger (destructive) primary button in the active state. */
+  --gl-button-danger-primary-border-color-default: var(--gl-color-red-700); /** Used for the border of a danger (destructive) primary button in the default state. */
+  --gl-button-danger-primary-border-color-hover: var(--gl-color-red-900); /** Used for the border of a danger (destructive) primary button in the hover state. */
+  --gl-button-danger-primary-border-color-active: var(--gl-color-red-950); /** Used for the border of a danger (destructive) primary button in the active state. */
+  --gl-button-danger-secondary-foreground-color-default: var(--gl-color-red-600); /** Used for the foreground of a danger (destructive) button in the default state. */
+  --gl-button-danger-secondary-foreground-color-hover: var(--gl-color-red-800); /** Used for the foreground of a danger (destructive) button in the hover state. */
   --gl-button-danger-secondary-foreground-color-active: var(--gl-color-red-900); /** Used for the foreground of a danger (destructive) button in the active state. */
   --gl-button-danger-secondary-background-color-default: var(--gl-color-neutral-0); /** Used for the background of an outlined danger (destructive) button in the default state. */
   --gl-button-danger-secondary-background-color-hover: var(--gl-color-red-50); /** Used for the background of an outlined danger (destructive) button in the hover state. */
   --gl-button-danger-secondary-background-color-active: var(--gl-color-red-100); /** Used for the background of an outlined danger (destructive) button in the active state. */
-  --gl-button-danger-secondary-border-color-default: var(--gl-color-red-500); /** Used for the border of an outlined danger (destructive) button in the default state. */
-  --gl-button-danger-secondary-border-color-hover: var(--gl-color-red-700); /** 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-600); /** Used for the border of an outlined danger (destructive) button in the default state. */
+  --gl-button-danger-secondary-border-color-hover: var(--gl-color-red-800); /** Used for the border of an outlined danger (destructive) button in the hover state. */
   --gl-button-danger-secondary-border-color-active: var(--gl-color-red-900); /** Used for the border of an outlined danger (destructive) button in the active 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-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. */