@gitlab/ui 137.1.2 → 137.2.1

package/src/components/charts/gauge/gauge.vue

@@ -1,14 +1,9 @@
 <script>
 import { merge, uniq, sortBy } from 'lodash-es';
-import { gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue } from '../../../utils/charts/theme';
+import { gaugeSafeHues, gaugeWarningHue } from '../../../utils/charts/theme';
 import Chart from '../chart/chart.vue';
 
-const AXIS_LABEL_FONT_SIZE_PX = 14;
-
 const ARC_RADIUS = '80%';
-const DETAIL_FONT_SIZE_PX = 30;
-const DETAIL_FONT_FAMILY = 'sans-serif';
-const DETAIL_FONT_WEIGHT = 'bold';
 const POINTER_LENGTH = '65%';
 const POINTER_WIDTH_PX = 5;
 
@@ -22,16 +17,10 @@ const gaugeChartSeries = ({ value, text, min, max, splitNumber, axisColor }) =>
 
         return text || (currentValue ?? '--');
       },
-      color: `${gaugeNeutralHues[0]}`,
-      fontSize: DETAIL_FONT_SIZE_PX,
-      fontFamily: DETAIL_FONT_FAMILY,
-      fontWeight: DETAIL_FONT_WEIGHT,
     },
     axisLabel: {
       show: true,
-      fontSize: AXIS_LABEL_FONT_SIZE_PX,
       formatter: (theValue) => (Number.isFinite(theValue) ? theValue : '--'),
-      color: `${gaugeNeutralHues[1]}`,
     },
     axisLine: {
       lineStyle: {

package/src/components/charts/heatmap/heatmap.vue

@@ -1,9 +1,14 @@
 <script>
 import { merge } from 'lodash-es';
-import { GL_COLOR_NEUTRAL_0, GL_COLOR_NEUTRAL_100 } from '../../../tokens/build/js/tokens';
 import { getTooltipTitle, getTooltipContent } from '../../../utils/charts/config';
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
-import { heatmapHues } from '../../../utils/charts/theme';
+import {
+  heatmapHues,
+  heatmapHuesDark,
+  heatmapSurface,
+  heatmapSurfaceDark,
+} from '../../../utils/charts/theme';
+import { isDarkMode, onColorModeChange } from '../../../utils/charts/color_mode';
 import { engineeringNotation } from '../../../utils/number_utils';
 import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
@@ -13,9 +18,6 @@ import ChartTooltip from '../shared/tooltip/tooltip.vue';
 const defaultOptions = {
   visualMap: {
     show: false,
-    inRange: {
-      color: heatmapHues,
-    },
   },
   series: {
     type: 'heatmap',
@@ -154,9 +156,19 @@ export default {
         top: '0',
       },
       selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText,
+      // ECharts interpolates the visualMap stops numerically, so these colours cannot be CSS
+      // custom properties and have to be picked for the current colour mode instead. Resolved on
+      // mount, because the mode depends on where this chart sits in the document.
+      isDark: false,
     };
   },
   computed: {
+    hues() {
+      return this.isDark ? heatmapHuesDark : heatmapHues;
+    },
+    surface() {
+      return this.isDark ? heatmapSurfaceDark : heatmapSurface;
+    },
     computedOptions() {
       const { min, max } = getRange(this.dataSeries);
       return merge(
@@ -172,11 +184,14 @@ export default {
             right: '32px',
             show: true,
             borderWidth: 0,
-            backgroundColor: GL_COLOR_NEUTRAL_100,
+            backgroundColor: this.surface.plate,
           },
           visualMap: {
             min,
             max,
+            inRange: {
+              color: this.hues,
+            },
           },
           xAxis: {
             data: this.xAxisLabels,
@@ -196,7 +211,7 @@ export default {
               show: true,
               interval: 0,
               lineStyle: {
-                color: GL_COLOR_NEUTRAL_0,
+                color: this.surface.separator,
                 width: 2,
               },
             },
@@ -223,7 +238,7 @@ export default {
               show: true,
               interval: 0,
               lineStyle: {
-                color: GL_COLOR_NEUTRAL_0,
+                color: this.surface.separator,
                 width: 2,
               },
             },
@@ -240,9 +255,9 @@ export default {
     },
     seriesInfo() {
       const { min, max } = getRange(this.dataSeries);
-      const step = (max - min) / heatmapHues.length;
+      const step = (max - min) / this.hues.length;
 
-      return heatmapHues.map((color, index) => {
+      return this.hues.map((color, index) => {
         const lowerBound = engineeringNotation(min + step * index);
         const upperBound = engineeringNotation(min + step * (index + 1));
 
@@ -257,6 +272,15 @@ export default {
       return this.height === 'auto';
     },
   },
+  mounted() {
+    this.isDark = isDarkMode(this.$el);
+    this.unsubscribeColorMode = onColorModeChange(this.$el, (isDark) => {
+      this.isDark = isDark;
+    });
+  },
+  beforeDestroy() {
+    this.unsubscribeColorMode?.();
+  },
   methods: {
     defaultFormatTooltipText(params) {
       this.tooltip.title = getTooltipTitle(params, this.computedOptions.xAxis.name);

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

@@ -1,6 +1,7 @@
 <script>
 import * as echarts from 'echarts';
 import { defaultFontSize } from '../../../utils/charts/config';
+import { defaultFontFamily } from '../../../utils/charts/theme';
 import {
   LEGEND_LAYOUT_INLINE,
   LEGEND_LAYOUT_TABLE,
@@ -102,7 +103,7 @@ export default {
   computed: {
     fontStyle() {
       return {
-        fontFamily: this.textStyle.fontFamily || 'sans-serif',
+        fontFamily: this.textStyle.fontFamily || defaultFontFamily,
         fontSize: `${this.textStyle.fontSize || defaultFontSize}px`,
       };
     },
@@ -110,6 +111,17 @@ export default {
       return this.seriesInfo.length === 1;
     },
   },
+  watch: {
+    /**
+     * When the canvas renderer rebuilds the chart on a colour-mode change it disposes the old
+     * ECharts instance and creates a new one. The parent emits `created` with the new instance and
+     * updates this prop, so we must rebind our persistent listener to the new instance.
+     */
+    chart(newChart, oldChart) {
+      oldChart.off('legendselectchanged', this.suppressLastActiveSeriesLabelToggle);
+      newChart.on('legendselectchanged', this.suppressLastActiveSeriesLabelToggle);
+    },
+  },
   created() {
     this.chart.on('legendselectchanged', this.suppressLastActiveSeriesLabelToggle);
   },

package/src/scss/themes.scss

@@ -1,4 +1,22 @@
-:root.tint-neutral-indigo,
+:root.ui-neutral,
+.ui-neutral-scope {
+  --gl-color-neutral-0: #fff;
+  --gl-color-neutral-10: #fbfafd;
+  --gl-color-neutral-50: #ececef;
+  --gl-color-neutral-100: #dcdcde;
+  --gl-color-neutral-200: #bfbfc3;
+  --gl-color-neutral-300: #a4a3a8;
+  --gl-color-neutral-400: #89888d;
+  --gl-color-neutral-500: #737278;
+  --gl-color-neutral-600: #626168;
+  --gl-color-neutral-700: #4c4b51;
+  --gl-color-neutral-800: #3a383f;
+  --gl-color-neutral-900: #28272d;
+  --gl-color-neutral-950: #18171d;
+  --gl-color-neutral-1000: #050506;
+}
+
+:root.ui-indigo,
 .ui-indigo-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #f9f8fa;
@@ -16,7 +34,7 @@
   --gl-color-neutral-1000: #09030e;
 }
 
-:root.tint-neutral-blue,
+:root.ui-blue,
 .ui-blue-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #f8f8fa;
@@ -34,7 +52,7 @@
   --gl-color-neutral-1000: #03050d;
 }
 
-:root.tint-neutral-green,
+:root.ui-green,
 .ui-green-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #f7f9f8;
@@ -52,7 +70,7 @@
   --gl-color-neutral-1000: #010705;
 }
 
-:root.tint-neutral-red,
+:root.ui-red,
 .ui-red-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #fbf7f9;
@@ -70,7 +88,7 @@
   --gl-color-neutral-1000: #0b0306;
 }
 
-:root.tint-neutral-gray,
+:root.ui-gray,
 .ui-gray-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #f8f8f8;

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

@@ -113,19 +113,19 @@
   --gl-color-green-900: #1e3e28;
   --gl-color-green-950: #17291c;
   --gl-color-neutral-0: #fff;
-  --gl-color-neutral-10: #fbfafd;
-  --gl-color-neutral-50: #ececef;
-  --gl-color-neutral-100: #dcdcde;
-  --gl-color-neutral-200: #bfbfc3;
-  --gl-color-neutral-300: #a4a3a8;
-  --gl-color-neutral-400: #89888d;
-  --gl-color-neutral-500: #737278;
-  --gl-color-neutral-600: #626168;
-  --gl-color-neutral-700: #4c4b51;
-  --gl-color-neutral-800: #3a383f;
+  --gl-color-neutral-10: #f7f7f5;
+  --gl-color-neutral-50: #ecebea;
+  --gl-color-neutral-100: #dcdbd9;
+  --gl-color-neutral-200: #c1bfbe;
+  --gl-color-neutral-300: #a5a3a3;
+  --gl-color-neutral-400: #8a8888;
+  --gl-color-neutral-500: #747273;
+  --gl-color-neutral-600: #646163;
+  --gl-color-neutral-700: #4d4b4e;
+  --gl-color-neutral-800: #3a383d;
   --gl-color-neutral-900: #28272d;
   --gl-color-neutral-950: #18171d;
-  --gl-color-neutral-1000: #050506;
+  --gl-color-neutral-1000: #050408;
   --gl-color-orange-50: #fdf1dd;
   --gl-color-orange-100: #f5d9a8;
   --gl-color-orange-200: #e9be74;
@@ -423,7 +423,7 @@
   --gl-heading-default-margin-top: var(--gl-spacing-scale-0);
   --gl-heading-default-margin-bottom: var(--gl-spacing-scale-5);
   --gl-shadow-color-default: var(--gl-color-alpha-dark-16); /** Used for the default shadow color. */
-  --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /** Used for the border center color of a neutral alert. */
+  --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /** Used for the border color of a neutral alert. */
   --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */
   --gl-alert-info-border-top-color: var(--gl-color-alpha-0); /** Used for the border color of an info alert. */
   --gl-alert-info-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of an info alert. */
@@ -743,9 +743,9 @@
   --gl-action-confirm-background-color-hover: var(--gl-color-alpha-dark-6); /** Used for the background of a confirm (positive) action in the hover state. */
   --gl-action-confirm-background-color-active: var(--gl-color-alpha-dark-16); /** Used for the background of a confirm (positive) action in the active state. */
   --gl-action-confirm-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a confirm action in the default state. */
-  --gl-action-danger-foreground-color-default: var(--gl-color-red-500); /** Used for the foreground of a danger (destructive) action in the default state. */
-  --gl-action-danger-foreground-color-hover: var(--gl-color-red-700); /** Used for the foreground of a danger (destructive) action in the hover state. */
-  --gl-action-danger-foreground-color-active: var(--gl-color-red-900); /** Used for the foreground of a danger (destructive) action in the active state. */
+  --gl-action-danger-foreground-color-default: var(--gl-color-red-600); /** Used for the foreground of a danger (destructive) action in the default state. */
+  --gl-action-danger-foreground-color-hover: var(--gl-color-red-800); /** Used for the foreground of a danger (destructive) action in the hover state. */
+  --gl-action-danger-foreground-color-active: var(--gl-color-red-950); /** Used for the foreground of a danger (destructive) action in the active state. */
   --gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-hover); /** Used for the background of a danger (destructive) action in the focus state. */
   --gl-action-danger-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a danger action in the default state. */
   --gl-action-strong-confirm-background-color-default: var(--gl-color-blue-500); /** Used for the background of a strong confirm action in the default state. */
@@ -916,14 +916,19 @@
   --gl-alert-border-radius: var(--gl-border-radius-lg); /** Used for alert border radius. */
   --gl-alert-neutral-title-color: var(--gl-text-color-heading); /** Used for the title color of a neutral alert. */
   --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /** Used for the background color of a neutral alert. */
+  --gl-alert-neutral-border-color: var(--gl-feedback-neutral-border-color); /** Used for the border color of a neutral alert. */
   --gl-alert-info-title-color: var(--gl-text-color-heading); /** Used for the title color of an info alert. */
   --gl-alert-info-background-color: var(--gl-feedback-info-background-color); /** Used for the background color of an info alert. */
+  --gl-alert-info-border-color: var(--gl-feedback-info-border-color); /** Used for the border color of an info alert. */
   --gl-alert-success-title-color: var(--gl-text-color-heading); /** Used for the title color of a success alert. */
   --gl-alert-success-background-color: var(--gl-feedback-success-background-color); /** Used for the background color of a success alert. */
+  --gl-alert-success-border-color: var(--gl-feedback-success-border-color); /** Used for the border color of a success alert. */
   --gl-alert-warning-title-color: var(--gl-text-color-heading); /** Used for the title color of a warning alert. */
   --gl-alert-warning-background-color: var(--gl-feedback-warning-background-color); /** Used for the background color of a warning alert. */
+  --gl-alert-warning-border-color: var(--gl-feedback-warning-border-color); /** Used for the border color of a warning alert. */
   --gl-alert-danger-title-color: var(--gl-text-color-heading); /** Used for the title color of a danger alert. */
   --gl-alert-danger-background-color: var(--gl-feedback-danger-background-color); /** Used for the background color of a danger alert. */
+  --gl-alert-danger-border-color: var(--gl-feedback-danger-border-color); /** Used for the border color of a danger alert. */
   --gl-avatar-square-border-radius-lg: var(--gl-border-radius-lg); /** Border radius for square avatars at larger sizes (48px, 64px, 96px). */
   --gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-default); /** Used for the background of a muted badge in the hover state. */
   --gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /** Used for the text of a muted badge in the focus state. */

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

@@ -113,19 +113,19 @@
   --gl-color-green-900: #1e3e28;
   --gl-color-green-950: #17291c;
   --gl-color-neutral-0: #fff;
-  --gl-color-neutral-10: #fbfafd;
-  --gl-color-neutral-50: #ececef;
-  --gl-color-neutral-100: #dcdcde;
-  --gl-color-neutral-200: #bfbfc3;
-  --gl-color-neutral-300: #a4a3a8;
-  --gl-color-neutral-400: #89888d;
-  --gl-color-neutral-500: #737278;
-  --gl-color-neutral-600: #626168;
-  --gl-color-neutral-700: #4c4b51;
-  --gl-color-neutral-800: #3a383f;
+  --gl-color-neutral-10: #f7f7f5;
+  --gl-color-neutral-50: #ecebea;
+  --gl-color-neutral-100: #dcdbd9;
+  --gl-color-neutral-200: #c1bfbe;
+  --gl-color-neutral-300: #a5a3a3;
+  --gl-color-neutral-400: #8a8888;
+  --gl-color-neutral-500: #747273;
+  --gl-color-neutral-600: #646163;
+  --gl-color-neutral-700: #4d4b4e;
+  --gl-color-neutral-800: #3a383d;
   --gl-color-neutral-900: #28272d;
   --gl-color-neutral-950: #18171d;
-  --gl-color-neutral-1000: #050506;
+  --gl-color-neutral-1000: #050408;
   --gl-color-orange-50: #fdf1dd;
   --gl-color-orange-100: #f5d9a8;
   --gl-color-orange-200: #e9be74;
@@ -435,18 +435,18 @@
   --gl-heading-default-margin-top: var(--gl-spacing-scale-0);
   --gl-heading-default-margin-bottom: var(--gl-spacing-scale-5);
   --gl-shadow-color-default: var(--gl-color-alpha-dark-40); /** Used for the default shadow color. */
-  --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /** Used for the border center color of a neutral alert. */
+  --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /** Used for the border color of a neutral alert. */
   --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */
-  --gl-alert-info-title-color: var(--gl-color-blue-300); /** Used for the title color of an info alert. */
+  --gl-alert-info-title-color: var(--gl-color-blue-200); /** Used for the title color of an info alert. */
   --gl-alert-info-border-top-color: var(--gl-color-blue-400); /** Used for the border color of an info alert. */
   --gl-alert-info-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of an info alert. */
-  --gl-alert-success-title-color: var(--gl-color-green-300); /** Used for the title color of a success alert. */
+  --gl-alert-success-title-color: var(--gl-color-green-200); /** Used for the title color of a success alert. */
   --gl-alert-success-border-top-color: var(--gl-color-green-400); /** Used for the border color of a success alert. */
   --gl-alert-success-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a success alert. */
-  --gl-alert-warning-title-color: var(--gl-color-orange-300); /** Used for the title color of a warning alert. */
+  --gl-alert-warning-title-color: var(--gl-color-orange-200); /** Used for the title color of a warning alert. */
   --gl-alert-warning-border-top-color: var(--gl-color-orange-400); /** Used for the border color of a warning alert. */
   --gl-alert-warning-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a warning alert. */
-  --gl-alert-danger-title-color: var(--gl-color-red-300); /** Used for the title color of a danger alert. */
+  --gl-alert-danger-title-color: var(--gl-color-red-200); /** Used for the title color of a danger alert. */
   --gl-alert-danger-border-top-color: var(--gl-color-red-400); /** Used for the border color of a danger alert. */
   --gl-alert-danger-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a danger alert. */
   --gl-application-chrome-background-color: var(--gl-color-neutral-1000); /** Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation. */
@@ -802,27 +802,27 @@
   --gl-feedback-neutral-background-color: var(--gl-color-neutral-900); /** Used for the background of a neutral feedback item when there isn't a specific meaning or urgency. */
   --gl-feedback-neutral-border-color: var(--gl-color-neutral-600); /** Used for the border of a neutral feedback item when there isn't a specific meaning or urgency. */
   --gl-feedback-neutral-text-color: var(--gl-color-neutral-200); /** Used for the text of a neutral feedback item when there isn't a specific meaning or urgency. */
-  --gl-feedback-neutral-icon-color: var(--gl-color-neutral-300); /** Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency. */
+  --gl-feedback-neutral-icon-color: var(--gl-color-neutral-200); /** Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency. */
   --gl-feedback-info-background-color: var(--gl-color-blue-950); /** Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
   --gl-feedback-info-border-color: var(--gl-color-blue-600); /** Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
   --gl-feedback-info-text-color: var(--gl-color-blue-200); /** Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
-  --gl-feedback-info-icon-color: var(--gl-color-blue-300); /** Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
+  --gl-feedback-info-icon-color: var(--gl-color-blue-200); /** Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
   --gl-feedback-success-background-color: var(--gl-color-green-900); /** Used for the background of a success feedback item when confirming the successful completion of a user-initiated action. */
   --gl-feedback-success-border-color: var(--gl-color-green-600); /** Used for the border of a success feedback item when confirming the successful completion of a user-initiated action. */
   --gl-feedback-success-text-color: var(--gl-color-green-200); /** Used for the text of a success feedback item when confirming the successful completion of a user-initiated action. */
-  --gl-feedback-success-icon-color: var(--gl-color-green-300); /** Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action. */
+  --gl-feedback-success-icon-color: var(--gl-color-green-200); /** Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action. */
   --gl-feedback-warning-background-color: var(--gl-color-orange-900); /** Used for the background of a warning feedback item when notifying about a potential issue or sensitive information. */
   --gl-feedback-warning-border-color: var(--gl-color-orange-600); /** Used for the border of a warning feedback item when notifying about a potential issue or sensitive information. */
   --gl-feedback-warning-text-color: var(--gl-color-orange-200); /** Used for the text of a warning feedback item when notifying about a potential issue or sensitive information. */
-  --gl-feedback-warning-icon-color: var(--gl-color-orange-300); /** Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information. */
+  --gl-feedback-warning-icon-color: var(--gl-color-orange-200); /** Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information. */
   --gl-feedback-danger-background-color: var(--gl-color-red-900); /** Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
   --gl-feedback-danger-border-color: var(--gl-color-red-300); /** Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
   --gl-feedback-danger-text-color: var(--gl-color-red-200); /** Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
-  --gl-feedback-danger-icon-color: var(--gl-color-red-300); /** Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
+  --gl-feedback-danger-icon-color: var(--gl-color-red-200); /** Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
   --gl-feedback-brand-background-color: var(--gl-color-purple-950); /** Used for the background of a brand-related feedback item when highlighting information that pertains to GitLab. */
   --gl-feedback-brand-border-color: var(--gl-color-purple-600); /** Used for the border of a brand-related feedback item when highlighting information that pertains to GitLab. */
   --gl-feedback-brand-text-color: var(--gl-color-purple-200); /** Used for the text of a brand-related feedback item when highlighting information that pertains to GitLab. */
-  --gl-feedback-brand-icon-color: var(--gl-color-purple-300); /** Used for the icon of a brand-related feedback item when highlighting information that pertains to GitLab. */
+  --gl-feedback-brand-icon-color: var(--gl-color-purple-200); /** Used for the icon of a brand-related feedback item when highlighting information that pertains to GitLab. */
   --gl-focus-ring-outer-color: var(--gl-color-blue-400); /** Used for the outer color portion of the focus ring. */
   --gl-highlight-match-background-color: var(--gl-color-orange-200); /** Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning. */
   --gl-highlight-match-text-color: var(--gl-color-neutral-950); /** Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status. */
@@ -931,11 +931,16 @@
   --gl-shadow-lg: 0 0 2px 0 var(--gl-shadow-color-default), 0 0 2px 0 var(--gl-shadow-color-default), 0 4px 12px 0 var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */
   --gl-alert-border-radius: var(--gl-border-radius-lg); /** Used for alert border radius. */
   --gl-alert-neutral-title-color: var(--gl-text-color-heading); /** Used for the title color of a neutral alert. */
-  --gl-alert-neutral-background-color: var(--gl-background-color-subtle); /** Used for the background color of a neutral alert. */
-  --gl-alert-info-background-color: var(--gl-background-color-subtle); /** Used for the background color of an info alert. */
-  --gl-alert-success-background-color: var(--gl-background-color-subtle); /** Used for the background color of a success alert. */
-  --gl-alert-warning-background-color: var(--gl-background-color-subtle); /** Used for the background color of a warning alert. */
-  --gl-alert-danger-background-color: var(--gl-background-color-subtle); /** Used for the background color of a danger alert. */
+  --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /** Used for the background color of a neutral alert. */
+  --gl-alert-neutral-border-color: var(--gl-feedback-neutral-border-color); /** Used for the border color of a neutral alert. */
+  --gl-alert-info-background-color: var(--gl-feedback-info-background-color); /** Used for the background color of an info alert. */
+  --gl-alert-info-border-color: var(--gl-feedback-info-border-color); /** Used for the border color of an info alert. */
+  --gl-alert-success-background-color: var(--gl-feedback-success-background-color); /** Used for the background color of a success alert. */
+  --gl-alert-success-border-color: var(--gl-feedback-success-border-color); /** Used for the border color of a success alert. */
+  --gl-alert-warning-background-color: var(--gl-feedback-warning-background-color); /** Used for the background color of a warning alert. */
+  --gl-alert-warning-border-color: var(--gl-feedback-warning-border-color); /** Used for the border color of a warning alert. */
+  --gl-alert-danger-background-color: var(--gl-feedback-danger-background-color); /** Used for the background color of a danger alert. */
+  --gl-alert-danger-border-color: var(--gl-feedback-danger-border-color); /** Used for the border color of a danger alert. */
   --gl-avatar-square-border-radius-lg: var(--gl-border-radius-lg); /** Border radius for square avatars at larger sizes (48px, 64px, 96px). */
   --gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-default); /** Used for the background of a muted badge in the hover state. */
   --gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /** Used for the text of a muted badge in the focus state. */