@gitlab/ui 137.3.1 → 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.1",
+  "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.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() {

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.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';

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. */

package/src/tokens/build/css/tokens.dark.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. */
@@ -269,11 +269,11 @@
   --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-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-active: rgba(137, 136, 141, 0.32); /** Used for the background of an default primary button in the active state. */
-  --gl-button-danger-secondary-background-color-default: rgba(236, 89, 65, 0.4); /** Used for the background of an outlined danger (destructive) button in the default 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-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-default: rgba(241, 81, 104, 0.4); /** Used for the background of an outlined danger (destructive) button in the default state. */
+  --gl-button-danger-secondary-background-color-hover: rgba(241, 81, 104, 0.64); /** Used for the background of an outlined danger (destructive) button in the hover state. */
+  --gl-button-danger-secondary-background-color-active: rgba(241, 81, 104, 0.32); /** Used for the background of an outlined danger (destructive) button in the active state. */
   --gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); /** Used for the background of a disabled button. */
-  --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: #e3e3e8; /** Default stroke color to define shape and provide essential detail. */
   --gl-illustration-stroke-width-default: 1.5; /** Default stroke width to define shape and provide essential detail. */
   --gl-illustration-fill-color-default: #423f4f; /** Default fill color for an element where specific meaning or emphasis is not required. */
@@ -390,9 +390,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(236, 89, 65, 0); /** Used for the background of a danger (destructive) action in the default state. */
-  --gl-action-danger-background-color-hover: rgba(236, 89, 65, 0.4); /** Used for the background of a danger (destructive) action in the hover state. */
-  --gl-action-danger-background-color-active: rgba(236, 89, 65, 0.16); /** Used for the background of a danger (destructive) action in the active state. */
+  --gl-action-danger-background-color-default: rgba(241, 81, 104, 0); /** Used for the background of a danger (destructive) action in the default state. */
+  --gl-action-danger-background-color-hover: rgba(241, 81, 104, 0.4); /** Used for the background of a danger (destructive) action in the hover state. */
+  --gl-action-danger-background-color-active: rgba(241, 81, 104, 0.16); /** Used for the background of a danger (destructive) action in the active state. */
   --gl-background-color-overlay: rgba(0, 0, 0, 0.64); /** Used for an overlay that covers other content. */
   --gl-letter-spacing-heading: -0.01em;
   --gl-heading-3-letter-spacing: inherit;
@@ -591,9 +591,9 @@
   --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-active: var(--gl-color-alpha-0); /** 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-950); /** 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-300); /** 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-200); /** 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-400); /** Used for the background of a danger (destructive) primary button in the active 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-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-active: var(--gl-color-red-200); /** Used for the background of a danger (destructive) primary button in the active 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-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-active: var(--gl-color-alpha-0); /** Used for the border of a danger (destructive) primary button in the active state. */