@gitlab/ui 133.0.0 → 134.1.0

package/src/components/base/button/button.vue

@@ -9,7 +9,7 @@ import {
 import { logWarning, stopEvent } from '../../../utils/utils';
 import { isSlotEmpty } from '../../../utils/is_slot_empty';
 import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
-import { isEvent } from '../../../vendor/bootstrap-vue/src/utils/inspect';
+import { glButtonConfig } from '../../../config';
 import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 import { ENTER, SPACE } from '../new_dropdowns/constants';
@@ -122,6 +122,14 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Keep the button accessible while `disabled` is `true`. Uses `aria-disabled` so the element remains focusable and is announced by assistive technology.
+     */
+    accessibleDisabled: {
+      type: Boolean,
+      required: false,
+      default: () => glButtonConfig.accessibleDisabledButton,
+    },
     /**
      * Denotes the target URL of the link for standard links.
      */
@@ -237,9 +245,20 @@ export default {
     hasIconOnly() {
       return isSlotEmpty(this, 'default') && this.hasIcon && this.count == null;
     },
-    isButtonAriaDisabled() {
+    isDisabledOrLoading() {
+      if (this.accessibleDisabled) {
+        return this.disabled || (this.isButton && this.loading);
+      }
       return this.isButton && this.loading;
     },
+    ariaDisabled() {
+      if (this.isDisabledOrLoading) return 'true';
+      // Non-standard tags need an explicit aria-disabled value to convey interactive state.
+      if (this.isNonStandardTag) {
+        return this.accessibleDisabled ? 'false' : String(this.disabled);
+      }
+      return null;
+    },
     buttonClasses() {
       const classes = ['btn', 'gl-button', `btn-${this.variant}`, `btn-${this.buttonSize}`];
 
@@ -252,7 +271,7 @@ export default {
         'button-ellipsis-horizontal': this.hasIconOnly && this.icon === 'ellipsis_h',
         selected: this.selected,
         'btn-block': this.displayBlock,
-        disabled: this.disabled || this.isButtonAriaDisabled,
+        disabled: this.disabled || this.isDisabledOrLoading,
       });
 
       if (this.label) {
@@ -284,27 +303,24 @@ export default {
       return !this.isLink && !this.isButton;
     },
     tabindex() {
-      // When disabled remove links and non-standard tags from tab order
-      if (this.disabled) {
+      // Legacy: remove disabled links and non-standard tags from tab order.
+      if (!this.accessibleDisabled && this.disabled) {
         return this.isLink || this.isNonStandardTag ? '-1' : this.$attrs.tabindex;
       }
-
-      // Add hash links and non-standard tags to tab order
+      // Inactive elements stay in tab order so assistive technology can discover them;
+      // aria-disabled communicates the inactive state instead of removing the element.
       return this.isNonStandardTag || this.isHashLink ? '0' : this.$attrs.tabindex;
     },
     computedPropsAndAttributes() {
       const base = {
         // Type only used for "real" buttons
         type: this.isButton ? this.type : null,
-        // Disabled only set on "real" buttons
-        disabled: this.isButton ? this.disabled : null,
+        // Legacy: native disabled attribute on real buttons.
+        ...(!this.accessibleDisabled && this.isButton ? { disabled: this.disabled } : {}),
         // We add a role of button when the tag is not a link or button or when link has `href` of `#`
         role: this.isNonStandardTag || this.isHashLink ? 'button' : this.$attrs?.role,
-        // We set the `aria-disabled` state for non-standard tags
-        ...(this.isNonStandardTag ? { 'aria-disabled': String(this.disabled) } : {}),
         tabindex: this.tabindex,
-        // We set the `aria-disabled` state for buttons while loading
-        ...(this.isButtonAriaDisabled ? { 'aria-disabled': 'true' } : {}),
+        ...(this.ariaDisabled !== null ? { 'aria-disabled': this.ariaDisabled } : {}),
       };
 
       if (this.isLink) {
@@ -333,7 +349,7 @@ export default {
         ...this.$listeners,
       };
 
-      if (this.isButtonAriaDisabled) {
+      if (this.isDisabledOrLoading) {
         delete listeners.click;
       }
       return listeners;
@@ -366,7 +382,11 @@ export default {
       // Skip if disabled
       // Add SPACE keydown handler for link has `href` of `#`
       // Add ENTER handler for non-standard tags
-      if (!this.disabled && (this.isNonStandardTag || this.isHashLink)) {
+      if (
+        !this.disabled &&
+        !this.isDisabledOrLoading &&
+        (this.isNonStandardTag || this.isHashLink)
+      ) {
         const { code } = event;
 
         if (code === SPACE || (code === ENTER && this.isNonStandardTag)) {
@@ -377,7 +397,8 @@ export default {
       }
     },
     maybeStopEvent(event) {
-      if (this.isButtonAriaDisabled && isEvent(event)) {
+      const eventIsEvent = event instanceof Event;
+      if (this.isDisabledOrLoading && eventIsEvent) {
         stopEvent(event);
       }
     },

package/src/components/utilities/sprintf/sprintf.vue

@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable no-continue */
 import { has, isString } from 'lodash-es';
 
 const PREFIX = '%{';

package/src/config.js

@@ -6,6 +6,8 @@ export const defaultConfig = {
   firstDayOfWeek: 0, // Defaults to 0 (Sunday)
 };
 
+export const glButtonConfig = {};
+
 let configured = false;
 
 /**
@@ -15,10 +17,10 @@ let configured = false;
  * @template TValue=string
  * @property {undefined | Object} translations Generic translations for component labels to fall back to.
  * @property {undefined | Number} firstDayOfWeek Configured first day of the week, from 0 (Sunday) to 6 (Saturday).
- * @property {boolean} [accessibleLoadingButton] Temporary flag to enable accessible loading button.
+ * @property {boolean} [accessibleDisabledButton] Temporary flag to enable the accessible disabled button.
  *
  */
-const setConfigs = ({ translations, firstDayOfWeek } = {}) => {
+const setConfigs = ({ translations, firstDayOfWeek, accessibleDisabledButton = false } = {}) => {
   if (configured) {
     if (process.env.NODE_ENV === 'development') {
       throw new Error('GitLab UI can only be configured once!');
@@ -52,6 +54,23 @@ const setConfigs = ({ translations, firstDayOfWeek } = {}) => {
 
     Object.assign(i18n, translations);
   }
+
+  // Temporary flag to enable the accessible disabled button feature.
+  // This flag allows the feature to be opt-in during the rollout phase,
+  // giving us the flexibility to test and validate its impact on user experience.
+
+  // The global variable `accessibleDisabledButton` is set to a boolean value
+  // to indicate whether the button should use aria-disabled while disabled.
+
+  // Future Plan:
+  // Once the accessible disabled button feature is validated and stable,
+  // we will remove this temporary flag and make the feature the default behavior.
+  // At that point, there will be no need for opt-in or opt-out mechanisms for this feature.
+  if (typeof accessibleDisabledButton === 'boolean') {
+    Object.assign(glButtonConfig, {
+      accessibleDisabledButton,
+    });
+  }
 };
 
 export default setConfigs;

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

@@ -158,78 +158,6 @@
   --gl-color-red-800: #812713;
   --gl-color-red-900: #582014;
   --gl-color-red-950: #3e1a14;
-  --gl-color-theme-indigo-10: #f8f8ff;
-  --gl-color-theme-indigo-50: #f1f1ff;
-  --gl-color-theme-indigo-100: #dbdbf8;
-  --gl-color-theme-indigo-200: #c7c7f2;
-  --gl-color-theme-indigo-300: #a2a2e6;
-  --gl-color-theme-indigo-400: #8181d7;
-  --gl-color-theme-indigo-500: #6666c4;
-  --gl-color-theme-indigo-600: #5252b5;
-  --gl-color-theme-indigo-700: #41419f;
-  --gl-color-theme-indigo-800: #303083;
-  --gl-color-theme-indigo-900: #222261;
-  --gl-color-theme-indigo-950: #14143d;
-  --gl-color-theme-blue-10: #e6ecf0;
-  --gl-color-theme-blue-50: #cdd8e3;
-  --gl-color-theme-blue-100: #b9cadc;
-  --gl-color-theme-blue-200: #a6bdd5;
-  --gl-color-theme-blue-300: #81a5c9;
-  --gl-color-theme-blue-400: #628eb9;
-  --gl-color-theme-blue-500: #4977a5;
-  --gl-color-theme-blue-600: #346596;
-  --gl-color-theme-blue-700: #235180;
-  --gl-color-theme-blue-800: #153c63;
-  --gl-color-theme-blue-900: #0b2640;
-  --gl-color-theme-blue-950: #04101c;
-  --gl-color-theme-light-blue-10: #eef3f7;
-  --gl-color-theme-light-blue-50: #dde6ee;
-  --gl-color-theme-light-blue-100: #c1d4e6;
-  --gl-color-theme-light-blue-200: #a0bedc;
-  --gl-color-theme-light-blue-300: #74a3d3;
-  --gl-color-theme-light-blue-400: #4f8bc7;
-  --gl-color-theme-light-blue-500: #3476b9;
-  --gl-color-theme-light-blue-600: #2268ae;
-  --gl-color-theme-light-blue-700: #145aa1;
-  --gl-color-theme-light-blue-800: #0e4d8d;
-  --gl-color-theme-light-blue-900: #0c4277;
-  --gl-color-theme-light-blue-950: #0a3764;
-  --gl-color-theme-green-10: #eef4ef;
-  --gl-color-theme-green-50: #dde9de;
-  --gl-color-theme-green-100: #b1d6b5;
-  --gl-color-theme-green-200: #8cc497;
-  --gl-color-theme-green-300: #69af7d;
-  --gl-color-theme-green-400: #499767;
-  --gl-color-theme-green-500: #308258;
-  --gl-color-theme-green-600: #25744c;
-  --gl-color-theme-green-700: #1b653f;
-  --gl-color-theme-green-800: #155635;
-  --gl-color-theme-green-900: #0e4328;
-  --gl-color-theme-green-950: #052e19;
-  --gl-color-theme-red-10: #faf4f3;
-  --gl-color-theme-red-50: #f4e9e7;
-  --gl-color-theme-red-100: #ecd3d0;
-  --gl-color-theme-red-200: #e3bab5;
-  --gl-color-theme-red-300: #d59086;
-  --gl-color-theme-red-400: #c66e60;
-  --gl-color-theme-red-500: #ad4a3b;
-  --gl-color-theme-red-600: #a13322;
-  --gl-color-theme-red-700: #8f2110;
-  --gl-color-theme-red-800: #761405;
-  --gl-color-theme-red-900: #580d02;
-  --gl-color-theme-red-950: #380700;
-  --gl-color-theme-light-red-10: #fdf9f8;
-  --gl-color-theme-light-red-50: #faf2f1;
-  --gl-color-theme-light-red-100: #f6d9d5;
-  --gl-color-theme-light-red-200: #ebada2;
-  --gl-color-theme-light-red-300: #e07f6f;
-  --gl-color-theme-light-red-400: #d36250;
-  --gl-color-theme-light-red-500: #c24b38;
-  --gl-color-theme-light-red-600: #b53a26;
-  --gl-color-theme-light-red-700: #a02e1c;
-  --gl-color-theme-light-red-800: #8b2212;
-  --gl-color-theme-light-red-900: #751709;
-  --gl-color-theme-light-red-950: #5c1105;
   --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. */
@@ -321,6 +249,22 @@
   --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-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. */
+  --gl-broadcast-banner-background-color-indigo: #41419f; /** Used for the background for the indigo banner type. */
+  --gl-broadcast-banner-background-color-lightblue: #4977a5; /** Used for the background for the lightblue banner type. */
+  --gl-broadcast-banner-background-color-lightgreen: #308258; /** Used for the background for the lightgreen banner type. */
+  --gl-broadcast-banner-background-color-lightindigo: #6666c4; /** Used for the background for the lightindigo banner type. */
+  --gl-broadcast-banner-background-color-lightred: #ad4a3b; /** Used for the background for the lightred banner type. */
+  --gl-broadcast-banner-background-color-red: #8f2110; /** Used for the background for the red banner type. */
+  --gl-broadcast-banner-border-color-blue: #0b2640; /** Used for the border for the blue banner type. */
+  --gl-broadcast-banner-border-color-green: #0e4328; /** Used for the border for the green banner type. */
+  --gl-broadcast-banner-border-color-indigo: #222261; /** Used for the border for the indigo banner type. */
+  --gl-broadcast-banner-border-color-lightblue: #235180; /** Used for the border for the lightblue banner type. */
+  --gl-broadcast-banner-border-color-lightgreen: #1b653f; /** Used for the border for the lightgreen banner type. */
+  --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-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. */
@@ -409,78 +353,6 @@
   --data-viz-orange-800: #6f3500;
   --data-viz-orange-900: #5e2f05;
   --data-viz-orange-950: #4b2707;
-  --theme-indigo-10: #f8f8ff;
-  --theme-indigo-50: #f1f1ff;
-  --theme-indigo-100: #dbdbf8;
-  --theme-indigo-200: #c7c7f2;
-  --theme-indigo-300: #a2a2e6;
-  --theme-indigo-400: #8181d7;
-  --theme-indigo-500: #6666c4;
-  --theme-indigo-600: #5252b5;
-  --theme-indigo-700: #41419f;
-  --theme-indigo-800: #303083;
-  --theme-indigo-900: #222261;
-  --theme-indigo-950: #14143d;
-  --theme-blue-10: #e6ecf0;
-  --theme-blue-50: #cdd8e3;
-  --theme-blue-100: #b9cadc;
-  --theme-blue-200: #a6bdd5;
-  --theme-blue-300: #81a5c9;
-  --theme-blue-400: #628eb9;
-  --theme-blue-500: #4977a5;
-  --theme-blue-600: #346596;
-  --theme-blue-700: #235180;
-  --theme-blue-800: #153c63;
-  --theme-blue-900: #0b2640;
-  --theme-blue-950: #04101c;
-  --theme-light-blue-10: #eef3f7;
-  --theme-light-blue-50: #dde6ee;
-  --theme-light-blue-100: #c1d4e6;
-  --theme-light-blue-200: #a0bedc;
-  --theme-light-blue-300: #74a3d3;
-  --theme-light-blue-400: #4f8bc7;
-  --theme-light-blue-500: #3476b9;
-  --theme-light-blue-600: #2268ae;
-  --theme-light-blue-700: #145aa1;
-  --theme-light-blue-800: #0e4d8d;
-  --theme-light-blue-900: #0c4277;
-  --theme-light-blue-950: #0a3764;
-  --theme-green-10: #eef4ef;
-  --theme-green-50: #dde9de;
-  --theme-green-100: #b1d6b5;
-  --theme-green-200: #8cc497;
-  --theme-green-300: #69af7d;
-  --theme-green-400: #499767;
-  --theme-green-500: #308258;
-  --theme-green-600: #25744c;
-  --theme-green-700: #1b653f;
-  --theme-green-800: #155635;
-  --theme-green-900: #0e4328;
-  --theme-green-950: #052e19;
-  --theme-red-10: #faf4f3;
-  --theme-red-50: #f4e9e7;
-  --theme-red-100: #ecd3d0;
-  --theme-red-200: #e3bab5;
-  --theme-red-300: #d59086;
-  --theme-red-400: #c66e60;
-  --theme-red-500: #ad4a3b;
-  --theme-red-600: #a13322;
-  --theme-red-700: #8f2110;
-  --theme-red-800: #761405;
-  --theme-red-900: #580d02;
-  --theme-red-950: #380700;
-  --theme-light-red-10: #fdf9f8;
-  --theme-light-red-50: #faf2f1;
-  --theme-light-red-100: #f6d9d5;
-  --theme-light-red-200: #ebada2;
-  --theme-light-red-300: #e07f6f;
-  --theme-light-red-400: #d36250;
-  --theme-light-red-500: #c24b38;
-  --theme-light-red-600: #b53a26;
-  --theme-light-red-700: #a02e1c;
-  --theme-light-red-800: #8b2212;
-  --theme-light-red-900: #751709;
-  --theme-light-red-950: #5c1105;
   --brand-charcoal: #171321; /** Use color.brand-charcoal instead. */
   --brand-orange-01: #fca326; /** Use color.brand-orange.01p instead. */
   --brand-orange-02: #fc6d26; /** Use color.brand-orange.02p instead. */
@@ -662,26 +534,10 @@
   --gl-banner-promo-background-color: var(--gl-color-purple-50); /** Used for the background of a promo banner. */
   --gl-banner-promo-border-color: var(--gl-color-purple-200); /** Used for the border of a promo banner. */
   --gl-breadcrumb-separator-color: var(--gl-color-neutral-400); /** Used for the breadcrumb level separator. */
-  --gl-broadcast-banner-background-color-blue: var(--gl-color-theme-blue-700); /** Used for the background for the blue banner type. */
   --gl-broadcast-banner-background-color-dark: var(--gl-color-neutral-500); /** Used for the background for the dark banner type. */
-  --gl-broadcast-banner-background-color-green: var(--gl-color-theme-green-700); /** Used for the background for the green banner type. */
-  --gl-broadcast-banner-background-color-indigo: var(--gl-color-theme-indigo-700); /** Used for the background for the indigo banner type. */
   --gl-broadcast-banner-background-color-light: var(--gl-color-neutral-50); /** Used for the background for the light banner type. */
-  --gl-broadcast-banner-background-color-lightblue: var(--gl-color-theme-blue-500); /** Used for the background for the lightblue banner type. */
-  --gl-broadcast-banner-background-color-lightgreen: var(--gl-color-theme-green-500); /** Used for the background for the lightgreen banner type. */
-  --gl-broadcast-banner-background-color-lightindigo: var(--gl-color-theme-indigo-500); /** Used for the background for the lightindigo banner type. */
-  --gl-broadcast-banner-background-color-lightred: var(--gl-color-theme-red-500); /** Used for the background for the lightred banner type. */
-  --gl-broadcast-banner-background-color-red: var(--gl-color-theme-red-700); /** Used for the background for the red banner type. */
-  --gl-broadcast-banner-border-color-blue: var(--gl-color-theme-blue-900); /** Used for the border for the blue banner type. */
   --gl-broadcast-banner-border-color-dark: var(--gl-color-neutral-700); /** Used for the border for the dark banner type. */
-  --gl-broadcast-banner-border-color-green: var(--gl-color-theme-green-900); /** Used for the border for the green banner type. */
-  --gl-broadcast-banner-border-color-indigo: var(--gl-color-theme-indigo-900); /** Used for the border for the indigo banner type. */
   --gl-broadcast-banner-border-color-light: var(--gl-color-neutral-100); /** Used for the border for the light banner type. */
-  --gl-broadcast-banner-border-color-lightblue: var(--gl-color-theme-blue-700); /** Used for the border for the lightblue banner type. */
-  --gl-broadcast-banner-border-color-lightgreen: var(--gl-color-theme-green-700); /** Used for the border for the lightgreen banner type. */
-  --gl-broadcast-banner-border-color-lightindigo: var(--gl-color-theme-indigo-700); /** Used for the border for the lightindigo banner type. */
-  --gl-broadcast-banner-border-color-lightred: var(--gl-color-theme-red-700); /** Used for the border for the lightred banner type. */
-  --gl-broadcast-banner-border-color-red: var(--gl-color-theme-red-900); /** Used for the border for the red banner type. */
   --gl-broadcast-banner-icon-color-blue: var(--gl-color-neutral-0); /** Used for the icon for the blue banner type. */
   --gl-broadcast-banner-icon-color-dark: var(--gl-color-neutral-0); /** Used for the icon for the dark banner type. */
   --gl-broadcast-banner-icon-color-green: var(--gl-color-neutral-0); /** Used for the icon for the green banner type. */

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

@@ -158,78 +158,6 @@
   --gl-color-red-800: #812713;
   --gl-color-red-900: #582014;
   --gl-color-red-950: #3e1a14;
-  --gl-color-theme-indigo-10: #f8f8ff;
-  --gl-color-theme-indigo-50: #f1f1ff;
-  --gl-color-theme-indigo-100: #dbdbf8;
-  --gl-color-theme-indigo-200: #c7c7f2;
-  --gl-color-theme-indigo-300: #a2a2e6;
-  --gl-color-theme-indigo-400: #8181d7;
-  --gl-color-theme-indigo-500: #6666c4;
-  --gl-color-theme-indigo-600: #5252b5;
-  --gl-color-theme-indigo-700: #41419f;
-  --gl-color-theme-indigo-800: #303083;
-  --gl-color-theme-indigo-900: #222261;
-  --gl-color-theme-indigo-950: #14143d;
-  --gl-color-theme-blue-10: #e6ecf0;
-  --gl-color-theme-blue-50: #cdd8e3;
-  --gl-color-theme-blue-100: #b9cadc;
-  --gl-color-theme-blue-200: #a6bdd5;
-  --gl-color-theme-blue-300: #81a5c9;
-  --gl-color-theme-blue-400: #628eb9;
-  --gl-color-theme-blue-500: #4977a5;
-  --gl-color-theme-blue-600: #346596;
-  --gl-color-theme-blue-700: #235180;
-  --gl-color-theme-blue-800: #153c63;
-  --gl-color-theme-blue-900: #0b2640;
-  --gl-color-theme-blue-950: #04101c;
-  --gl-color-theme-light-blue-10: #eef3f7;
-  --gl-color-theme-light-blue-50: #dde6ee;
-  --gl-color-theme-light-blue-100: #c1d4e6;
-  --gl-color-theme-light-blue-200: #a0bedc;
-  --gl-color-theme-light-blue-300: #74a3d3;
-  --gl-color-theme-light-blue-400: #4f8bc7;
-  --gl-color-theme-light-blue-500: #3476b9;
-  --gl-color-theme-light-blue-600: #2268ae;
-  --gl-color-theme-light-blue-700: #145aa1;
-  --gl-color-theme-light-blue-800: #0e4d8d;
-  --gl-color-theme-light-blue-900: #0c4277;
-  --gl-color-theme-light-blue-950: #0a3764;
-  --gl-color-theme-green-10: #eef4ef;
-  --gl-color-theme-green-50: #dde9de;
-  --gl-color-theme-green-100: #b1d6b5;
-  --gl-color-theme-green-200: #8cc497;
-  --gl-color-theme-green-300: #69af7d;
-  --gl-color-theme-green-400: #499767;
-  --gl-color-theme-green-500: #308258;
-  --gl-color-theme-green-600: #25744c;
-  --gl-color-theme-green-700: #1b653f;
-  --gl-color-theme-green-800: #155635;
-  --gl-color-theme-green-900: #0e4328;
-  --gl-color-theme-green-950: #052e19;
-  --gl-color-theme-red-10: #faf4f3;
-  --gl-color-theme-red-50: #f4e9e7;
-  --gl-color-theme-red-100: #ecd3d0;
-  --gl-color-theme-red-200: #e3bab5;
-  --gl-color-theme-red-300: #d59086;
-  --gl-color-theme-red-400: #c66e60;
-  --gl-color-theme-red-500: #ad4a3b;
-  --gl-color-theme-red-600: #a13322;
-  --gl-color-theme-red-700: #8f2110;
-  --gl-color-theme-red-800: #761405;
-  --gl-color-theme-red-900: #580d02;
-  --gl-color-theme-red-950: #380700;
-  --gl-color-theme-light-red-10: #fdf9f8;
-  --gl-color-theme-light-red-50: #faf2f1;
-  --gl-color-theme-light-red-100: #f6d9d5;
-  --gl-color-theme-light-red-200: #ebada2;
-  --gl-color-theme-light-red-300: #e07f6f;
-  --gl-color-theme-light-red-400: #d36250;
-  --gl-color-theme-light-red-500: #c24b38;
-  --gl-color-theme-light-red-600: #b53a26;
-  --gl-color-theme-light-red-700: #a02e1c;
-  --gl-color-theme-light-red-800: #8b2212;
-  --gl-color-theme-light-red-900: #751709;
-  --gl-color-theme-light-red-950: #5c1105;
   --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. */
@@ -321,6 +249,22 @@
   --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-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. */
+  --gl-broadcast-banner-background-color-indigo: #41419f; /** Used for the background for the indigo banner type. */
+  --gl-broadcast-banner-background-color-lightblue: #4977a5; /** Used for the background for the lightblue banner type. */
+  --gl-broadcast-banner-background-color-lightgreen: #308258; /** Used for the background for the lightgreen banner type. */
+  --gl-broadcast-banner-background-color-lightindigo: #6666c4; /** Used for the background for the lightindigo banner type. */
+  --gl-broadcast-banner-background-color-lightred: #ad4a3b; /** Used for the background for the lightred banner type. */
+  --gl-broadcast-banner-background-color-red: #8f2110; /** Used for the background for the red banner type. */
+  --gl-broadcast-banner-border-color-blue: #0b2640; /** Used for the border for the blue banner type. */
+  --gl-broadcast-banner-border-color-green: #0e4328; /** Used for the border for the green banner type. */
+  --gl-broadcast-banner-border-color-indigo: #222261; /** Used for the border for the indigo banner type. */
+  --gl-broadcast-banner-border-color-lightblue: #235180; /** Used for the border for the lightblue banner type. */
+  --gl-broadcast-banner-border-color-lightgreen: #1b653f; /** Used for the border for the lightgreen banner type. */
+  --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-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. */
@@ -419,78 +363,6 @@
   --data-viz-orange-800: #eebd8c;
   --data-viz-orange-900: #f5d6b3;
   --data-viz-orange-950: #fae8d1;
-  --theme-indigo-10: #14143d;
-  --theme-indigo-50: #222261;
-  --theme-indigo-100: #303083;
-  --theme-indigo-200: #41419f;
-  --theme-indigo-300: #5252b5;
-  --theme-indigo-400: #6666c4;
-  --theme-indigo-500: #8181d7;
-  --theme-indigo-600: #a2a2e6;
-  --theme-indigo-700: #c7c7f2;
-  --theme-indigo-800: #dbdbf8;
-  --theme-indigo-900: #f1f1ff;
-  --theme-indigo-950: #f8f8ff;
-  --theme-blue-10: #04101c;
-  --theme-blue-50: #0b2640;
-  --theme-blue-100: #153c63;
-  --theme-blue-200: #235180;
-  --theme-blue-300: #346596;
-  --theme-blue-400: #4977a5;
-  --theme-blue-500: #628eb9;
-  --theme-blue-600: #81a5c9;
-  --theme-blue-700: #a6bdd5;
-  --theme-blue-800: #b9cadc;
-  --theme-blue-900: #cdd8e3;
-  --theme-blue-950: #e6ecf0;
-  --theme-light-blue-10: #0a3764;
-  --theme-light-blue-50: #0c4277;
-  --theme-light-blue-100: #0e4d8d;
-  --theme-light-blue-200: #145aa1;
-  --theme-light-blue-300: #2268ae;
-  --theme-light-blue-400: #3476b9;
-  --theme-light-blue-500: #4f8bc7;
-  --theme-light-blue-600: #74a3d3;
-  --theme-light-blue-700: #a0bedc;
-  --theme-light-blue-800: #c1d4e6;
-  --theme-light-blue-900: #dde6ee;
-  --theme-light-blue-950: #eef3f7;
-  --theme-green-10: #052e19;
-  --theme-green-50: #0e4328;
-  --theme-green-100: #155635;
-  --theme-green-200: #1b653f;
-  --theme-green-300: #25744c;
-  --theme-green-400: #308258;
-  --theme-green-500: #499767;
-  --theme-green-600: #69af7d;
-  --theme-green-700: #8cc497;
-  --theme-green-800: #b1d6b5;
-  --theme-green-900: #dde9de;
-  --theme-green-950: #eef4ef;
-  --theme-red-10: #380700;
-  --theme-red-50: #580d02;
-  --theme-red-100: #761405;
-  --theme-red-200: #8f2110;
-  --theme-red-300: #a13322;
-  --theme-red-400: #ad4a3b;
-  --theme-red-500: #c66e60;
-  --theme-red-600: #d59086;
-  --theme-red-700: #e3bab5;
-  --theme-red-800: #ecd3d0;
-  --theme-red-900: #f4e9e7;
-  --theme-red-950: #faf4f3;
-  --theme-light-red-10: #5c1105;
-  --theme-light-red-50: #751709;
-  --theme-light-red-100: #8b2212;
-  --theme-light-red-200: #a02e1c;
-  --theme-light-red-300: #b53a26;
-  --theme-light-red-400: #c24b38;
-  --theme-light-red-500: #d36250;
-  --theme-light-red-600: #e07f6f;
-  --theme-light-red-700: #ebada2;
-  --theme-light-red-800: #f6d9d5;
-  --theme-light-red-900: #faf2f1;
-  --theme-light-red-950: #fdf9f8;
   --blue-950: #f2f9ff;
   --green-950: #f1fdf6;
   --orange-950: #fff4e1;
@@ -681,26 +553,10 @@
   --gl-banner-promo-background-color: var(--gl-color-purple-950); /** Used for the background of a promo banner. */
   --gl-banner-promo-border-color: var(--gl-color-purple-700); /** Used for the border of a promo banner. */
   --gl-breadcrumb-separator-color: var(--gl-color-neutral-400); /** Used for the breadcrumb level separator. */
-  --gl-broadcast-banner-background-color-blue: var(--gl-color-theme-blue-700); /** Used for the background for the blue banner type. */
   --gl-broadcast-banner-background-color-dark: var(--gl-color-neutral-500); /** Used for the background for the dark banner type. */
-  --gl-broadcast-banner-background-color-green: var(--gl-color-theme-green-700); /** Used for the background for the green banner type. */
-  --gl-broadcast-banner-background-color-indigo: var(--gl-color-theme-indigo-700); /** Used for the background for the indigo banner type. */
   --gl-broadcast-banner-background-color-light: var(--gl-color-neutral-50); /** Used for the background for the light banner type. */
-  --gl-broadcast-banner-background-color-lightblue: var(--gl-color-theme-blue-500); /** Used for the background for the lightblue banner type. */
-  --gl-broadcast-banner-background-color-lightgreen: var(--gl-color-theme-green-500); /** Used for the background for the lightgreen banner type. */
-  --gl-broadcast-banner-background-color-lightindigo: var(--gl-color-theme-indigo-500); /** Used for the background for the lightindigo banner type. */
-  --gl-broadcast-banner-background-color-lightred: var(--gl-color-theme-red-500); /** Used for the background for the lightred banner type. */
-  --gl-broadcast-banner-background-color-red: var(--gl-color-theme-red-700); /** Used for the background for the red banner type. */
-  --gl-broadcast-banner-border-color-blue: var(--gl-color-theme-blue-900); /** Used for the border for the blue banner type. */
   --gl-broadcast-banner-border-color-dark: var(--gl-color-neutral-700); /** Used for the border for the dark banner type. */
-  --gl-broadcast-banner-border-color-green: var(--gl-color-theme-green-900); /** Used for the border for the green banner type. */
-  --gl-broadcast-banner-border-color-indigo: var(--gl-color-theme-indigo-900); /** Used for the border for the indigo banner type. */
   --gl-broadcast-banner-border-color-light: var(--gl-color-neutral-100); /** Used for the border for the light banner type. */
-  --gl-broadcast-banner-border-color-lightblue: var(--gl-color-theme-blue-700); /** Used for the border for the lightblue banner type. */
-  --gl-broadcast-banner-border-color-lightgreen: var(--gl-color-theme-green-700); /** Used for the border for the lightgreen banner type. */
-  --gl-broadcast-banner-border-color-lightindigo: var(--gl-color-theme-indigo-700); /** Used for the border for the lightindigo banner type. */
-  --gl-broadcast-banner-border-color-lightred: var(--gl-color-theme-red-700); /** Used for the border for the lightred banner type. */
-  --gl-broadcast-banner-border-color-red: var(--gl-color-theme-red-900); /** Used for the border for the red banner type. */
   --gl-broadcast-banner-icon-color-blue: var(--gl-color-neutral-0); /** Used for the icon for the blue banner type. */
   --gl-broadcast-banner-icon-color-dark: var(--gl-color-neutral-0); /** Used for the icon for the dark banner type. */
   --gl-broadcast-banner-icon-color-green: var(--gl-color-neutral-0); /** Used for the icon for the green banner type. */