@gitlab/ui 137.1.2 → 137.2.1

package/dist/tokens/color_mode.js

@@ -0,0 +1,17 @@
+/**
+ * The classes that decide which set of token values applies to an element.
+ *
+ * Dark mode is applied either to the whole document, by putting `gl-dark` on the root, or to a
+ * subtree, by putting `gl-dark-scope` on any ancestor. `gl-light-scope` flips a subtree back.
+ *
+ * These are the single source of truth: `bin/build_tokens.mjs` builds the CSS selectors from them,
+ * so the stylesheets and any JavaScript that has to reason about the colour mode cannot drift
+ * apart. Changing a name here changes both.
+ */
+const DARK_ROOT_CLASS = 'gl-dark';
+const DARK_SCOPE_CLASS = 'gl-dark-scope';
+const LIGHT_SCOPE_CLASS = 'gl-light-scope';
+const LIGHT_SELECTOR = `:root, .${LIGHT_SCOPE_CLASS}`;
+const DARK_SELECTOR = `:root.${DARK_ROOT_CLASS}, .${DARK_SCOPE_CLASS}`;
+
+export { DARK_ROOT_CLASS, DARK_SCOPE_CLASS, DARK_SELECTOR, LIGHT_SCOPE_CLASS, LIGHT_SELECTOR };

package/dist/utils/charts/color_mode.js

@@ -0,0 +1,95 @@
+import { LIGHT_SCOPE_CLASS, DARK_SCOPE_CLASS, DARK_ROOT_CLASS } from '../../tokens/color_mode';
+
+const SCOPE_CLASSES = [DARK_SCOPE_CLASS, LIGHT_SCOPE_CLASS, DARK_ROOT_CLASS];
+const SCOPE_SELECTOR = SCOPE_CLASSES.map(scopeClass => `.${scopeClass}`).join(', ');
+
+/**
+ * Whether the given element sits in dark mode.
+ *
+ * Colour mode is not a document-wide fact. Tokens are declared for the root dark class and for a
+ * dark scope class, so any subtree can be flipped independently, and a light scope can flip one
+ * back inside a dark document. The nearest scope wins, which is what `closest` gives us.
+ *
+ * This lives under `charts` rather than in the general utilities because charts are the only thing
+ * in the package that needs it. Everywhere else, colour follows tokens and CSS re-resolves them on
+ * its own. Charts cannot always do that: ECharts parses colours numerically for its visual maps,
+ * and canvas cannot read custom properties at all, so those values have to be chosen in JavaScript
+ * and re-chosen when the mode changes.
+ */
+const isDarkMode = element => {
+  var _element$closest;
+  const scope = element === null || element === void 0 ? void 0 : (_element$closest = element.closest) === null || _element$closest === void 0 ? void 0 : _element$closest.call(element, SCOPE_SELECTOR);
+  return Boolean(scope) && !scope.classList.contains(LIGHT_SCOPE_CLASS);
+};
+
+// Keyed by subscription so that each subscribed element's last known mode is tracked separately.
+const subscriptions = new Map();
+let observer = null;
+
+// Most class mutations (hover states, dropdowns opening and closing) have nothing to do with the
+// colour mode. Only mutations that added or removed a scope class can change it, so anything else
+// can be dismissed with this cheap check instead of re-checking every subscriber.
+const touchesColorMode = _ref => {
+  let target = _ref.target,
+    oldValue = _ref.oldValue;
+  return SCOPE_CLASSES.some(scopeClass => {
+    var _target$classList;
+    return ((_target$classList = target.classList) === null || _target$classList === void 0 ? void 0 : _target$classList.contains(scopeClass)) || (oldValue === null || oldValue === void 0 ? void 0 : oldValue.includes(scopeClass));
+  });
+};
+const notify = () => {
+  subscriptions.forEach((_ref2, key) => {
+    let element = _ref2.element,
+      subscriber = _ref2.subscriber,
+      mode = _ref2.mode;
+    const current = isDarkMode(element);
+    if (current !== mode) {
+      subscriptions.set(key, {
+        element,
+        subscriber,
+        mode: current
+      });
+      subscriber(current);
+    }
+  });
+};
+
+/**
+ * Calls back when the colour mode of `element` changes, and returns a function that unsubscribes.
+ *
+ * Most colour can be left to CSS, which re-resolves custom properties on its own. This exists for
+ * the places that cannot: colours ECharts parses numerically, such as the interpolated stops of a
+ * continuous `visualMap`, and colours handed to a canvas context. Both need a concrete value picked
+ * in JavaScript, so both need telling when the mode flips.
+ *
+ * Because a scope class can live on any ancestor, this watches the whole document for class
+ * changes, then re-checks each subscribed element and only calls back when its own mode changed.
+ */
+const onColorModeChange = (element, subscriber) => {
+  if (!subscriptions.size && typeof MutationObserver !== 'undefined') {
+    observer = new MutationObserver(mutations => {
+      if (mutations.some(mutation => touchesColorMode(mutation))) notify();
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: ['class'],
+      attributeOldValue: true,
+      subtree: true
+    });
+  }
+  const key = Symbol('colorModeSubscription');
+  subscriptions.set(key, {
+    element,
+    subscriber,
+    mode: isDarkMode(element)
+  });
+  return () => {
+    subscriptions.delete(key);
+    if (!subscriptions.size) {
+      var _observer;
+      (_observer = observer) === null || _observer === void 0 ? void 0 : _observer.disconnect();
+      observer = null;
+    }
+  };
+};
+
+export { isDarkMode, onColorModeChange };

package/dist/utils/charts/css_values.js

@@ -0,0 +1,105 @@
+import { mapValues } from 'lodash-es';
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+const CSS_VAR = /^var\(\s*(--[\w-]+)\s*(?:,\s*([\s\S]*?)\s*)?\)$/;
+const resolveString = (value, styles) => {
+  if (value.toLowerCase() === 'currentcolor') {
+    return styles.color;
+  }
+  const match = CSS_VAR.exec(value);
+  if (!match) {
+    return value;
+  }
+  const _match = _slicedToArray(match, 3),
+    name = _match[1],
+    fallback = _match[2];
+  const resolved = styles.getPropertyValue(name).trim();
+  if (resolved) {
+    return resolved;
+  }
+  return fallback ? resolveString(fallback, styles) : value;
+};
+
+/**
+ * Deeply replaces `var(--token)` and `currentcolor` strings with the values they resolve to for the
+ * given element.
+ *
+ * The SVG renderer needs none of this: it emits both forms into the DOM, where the browser resolves
+ * them and keeps them live across a colour-mode change. Canvas has no such context. `fillStyle` is
+ * a plain string setter, so an unparseable `var(--token)` is dropped on the floor and leaves the
+ * previous fill in place, while `currentcolor` has no element to inherit from and is defined to
+ * resolve to opaque black. Either way a canvas-rendered chart silently loses its themed colours.
+ *
+ * Resolution is relative to `element` rather than the document root so that `.gl-dark-scope`
+ * ancestors are honoured.
+ *
+ * Values are resolved once, so callers are responsible for resolving again when the colour mode
+ * changes.
+ */
+const resolveCssValues = (input, element) => {
+  const styles = window.getComputedStyle(element);
+  const walk = value => {
+    if (typeof value === 'string') {
+      return resolveString(value, styles);
+    }
+    if (Array.isArray(value)) {
+      return value.map(item => walk(item));
+    }
+    // Themes carry functions (formatters) which must pass through untouched.
+    if (value !== null && typeof value === 'object') {
+      return mapValues(value, walk);
+    }
+    return value;
+  };
+  return walk(input);
+};
+
+export { resolveCssValues };

package/dist/utils/charts/theme.js

@@ -1,10 +1,35 @@
-import { GL_COLOR_NEUTRAL_100, GL_COLOR_DATA_BLUE_200, GL_COLOR_DATA_BLUE_400, GL_COLOR_DATA_BLUE_600, GL_COLOR_DATA_BLUE_800, GL_COLOR_NEUTRAL_900, GL_COLOR_NEUTRAL_500, GL_COLOR_DATA_BLUE_500, GL_COLOR_DATA_BLUE_900, GL_COLOR_DATA_ORANGE_500, GL_COLOR_DATA_ORANGE_600, GL_COLOR_DATA_AQUA_500, GL_COLOR_DATA_GREEN_600, GL_COLOR_DATA_MAGENTA_500, GL_COLOR_DATA_BLUE_700, GL_COLOR_DATA_ORANGE_800, GL_COLOR_DATA_AQUA_700, GL_COLOR_DATA_GREEN_800, GL_COLOR_DATA_MAGENTA_700, GL_COLOR_DATA_ORANGE_950, GL_COLOR_DATA_AQUA_900, GL_COLOR_DATA_GREEN_950, GL_COLOR_DATA_MAGENTA_900, GL_COLOR_DATA_ORANGE_700, GL_COLOR_DATA_AQUA_600, GL_COLOR_DATA_GREEN_700, GL_COLOR_DATA_MAGENTA_600, GL_COLOR_DATA_ORANGE_900, GL_COLOR_DATA_AQUA_800, GL_COLOR_DATA_GREEN_900, GL_COLOR_DATA_MAGENTA_800, GL_COLOR_DATA_BLUE_950, GL_COLOR_DATA_AQUA_950, GL_COLOR_DATA_GREEN_500, GL_COLOR_DATA_MAGENTA_950, GL_COLOR_DATA_ORANGE_400, GL_COLOR_DATA_GREEN_400, GL_COLOR_DATA_BLUE_300, GL_COLOR_DATA_ORANGE_200, GL_COLOR_DATA_AQUA_300, GL_COLOR_DATA_GREEN_200, GL_COLOR_DATA_MAGENTA_300, GL_COLOR_DATA_BLUE_100, GL_COLOR_DATA_ORANGE_50, GL_COLOR_DATA_AQUA_100, GL_COLOR_DATA_GREEN_50, GL_COLOR_DATA_MAGENTA_100, GL_COLOR_DATA_ORANGE_300, GL_COLOR_DATA_AQUA_400, GL_COLOR_DATA_GREEN_300, GL_COLOR_DATA_MAGENTA_400, GL_COLOR_DATA_ORANGE_100, GL_COLOR_DATA_AQUA_200, GL_COLOR_DATA_GREEN_100, GL_COLOR_DATA_MAGENTA_200, GL_COLOR_DATA_BLUE_50, GL_COLOR_DATA_AQUA_50, GL_COLOR_DATA_MAGENTA_50, GL_COLOR_NEUTRAL_50 } from '../../tokens/build/js/tokens';
+import { GL_FONT_FAMILY_REGULAR, GL_COLOR_NEUTRAL_100, GL_COLOR_DATA_BLUE_500, GL_COLOR_DATA_BLUE_600, GL_COLOR_DATA_BLUE_800, GL_COLOR_DATA_BLUE_950, GL_COLOR_NEUTRAL_800, GL_COLOR_DATA_BLUE_400, GL_COLOR_DATA_BLUE_200, GL_COLOR_NEUTRAL_0, GL_COLOR_NEUTRAL_950, GL_COLOR_DATA_BLUE_900, GL_COLOR_DATA_ORANGE_500, GL_COLOR_DATA_ORANGE_600, GL_COLOR_DATA_AQUA_500, GL_COLOR_DATA_GREEN_600, GL_COLOR_DATA_MAGENTA_500, GL_COLOR_DATA_BLUE_700, GL_COLOR_DATA_ORANGE_800, GL_COLOR_DATA_AQUA_700, GL_COLOR_DATA_GREEN_800, GL_COLOR_DATA_MAGENTA_700, GL_COLOR_DATA_ORANGE_950, GL_COLOR_DATA_AQUA_900, GL_COLOR_DATA_GREEN_950, GL_COLOR_DATA_MAGENTA_900, GL_COLOR_DATA_ORANGE_700, GL_COLOR_DATA_AQUA_600, GL_COLOR_DATA_GREEN_700, GL_COLOR_DATA_MAGENTA_600, GL_COLOR_DATA_ORANGE_900, GL_COLOR_DATA_AQUA_800, GL_COLOR_DATA_GREEN_900, GL_COLOR_DATA_MAGENTA_800, GL_COLOR_DATA_AQUA_950, GL_COLOR_DATA_GREEN_500, GL_COLOR_DATA_MAGENTA_950, GL_COLOR_DATA_ORANGE_400, GL_COLOR_DATA_GREEN_400, GL_COLOR_DATA_BLUE_300, GL_COLOR_DATA_ORANGE_200, GL_COLOR_DATA_AQUA_300, GL_COLOR_DATA_GREEN_200, GL_COLOR_DATA_MAGENTA_300, GL_COLOR_DATA_BLUE_100, GL_COLOR_DATA_ORANGE_50, GL_COLOR_DATA_AQUA_100, GL_COLOR_DATA_GREEN_50, GL_COLOR_DATA_MAGENTA_100, GL_COLOR_DATA_ORANGE_300, GL_COLOR_DATA_AQUA_400, GL_COLOR_DATA_GREEN_300, GL_COLOR_DATA_MAGENTA_400, GL_COLOR_DATA_ORANGE_100, GL_COLOR_DATA_AQUA_200, GL_COLOR_DATA_GREEN_100, GL_COLOR_DATA_MAGENTA_200, GL_COLOR_DATA_BLUE_50, GL_COLOR_DATA_AQUA_50, GL_COLOR_DATA_MAGENTA_50, GL_COLOR_NEUTRAL_50 } from '../../tokens/build/js/tokens';
 import { scrollHandleSvgPath, marqueeSelectionSvgPath, redoSvgPath, clearAllSvgPath, downloadSvgPath } from '../svgs/svg_paths';
+import { defaultFontSize } from './config';
 
 const GL_BORDER_RADIUS_BASE = '0.25rem';
 const themeName = 'gitlab';
-const heatmapHues = [GL_COLOR_NEUTRAL_100, GL_COLOR_DATA_BLUE_200, GL_COLOR_DATA_BLUE_400, GL_COLOR_DATA_BLUE_600, GL_COLOR_DATA_BLUE_800];
-const gaugeNeutralHues = [GL_COLOR_NEUTRAL_900, GL_COLOR_NEUTRAL_500];
+
+/**
+ * Sequential scales step away from the surface so that higher values gain contrast against it:
+ * darker on a light surface, lighter on a dark one. The lowest step is neutral rather than blue, so
+ * that "no data" reads as absence instead of as the bottom of the data range.
+ *
+ * https://design.gitlab.com/data-visualization/color#sequential-data
+ */
+const heatmapHues = [GL_COLOR_NEUTRAL_100, GL_COLOR_DATA_BLUE_500, GL_COLOR_DATA_BLUE_600, GL_COLOR_DATA_BLUE_800, GL_COLOR_DATA_BLUE_950];
+const heatmapHuesDark = [GL_COLOR_NEUTRAL_800, GL_COLOR_DATA_BLUE_600, GL_COLOR_DATA_BLUE_500, GL_COLOR_DATA_BLUE_400, GL_COLOR_DATA_BLUE_200];
+
+/**
+ * The plate behind the cells, and the separators between them. Separators match the surface so that
+ * neighbouring cells, which are only guaranteed to contrast with the surface and not with each
+ * other, stay distinguishable.
+ *
+ * https://design.gitlab.com/data-visualization/color#visual-separators
+ */
+const heatmapSurface = {
+  plate: GL_COLOR_NEUTRAL_100,
+  separator: GL_COLOR_NEUTRAL_0
+};
+const heatmapSurfaceDark = {
+  plate: GL_COLOR_NEUTRAL_800,
+  separator: GL_COLOR_NEUTRAL_950
+};
 const gaugeSafeHues = [GL_COLOR_DATA_BLUE_500, GL_COLOR_DATA_BLUE_900];
 const gaugeWarningHue = GL_COLOR_DATA_ORANGE_500;
 
@@ -18,12 +43,32 @@ const colorPaletteDefault = [GL_COLOR_DATA_BLUE_500, GL_COLOR_DATA_ORANGE_600, G
 const colorFromDefaultPalette = index => colorPaletteDefault[index % colorPaletteDefault.length];
 const colorPaletteDark = [GL_COLOR_DATA_BLUE_500, GL_COLOR_DATA_ORANGE_400, GL_COLOR_DATA_AQUA_500, GL_COLOR_DATA_GREEN_400, GL_COLOR_DATA_MAGENTA_500, GL_COLOR_DATA_BLUE_300, GL_COLOR_DATA_ORANGE_200, GL_COLOR_DATA_AQUA_300, GL_COLOR_DATA_GREEN_200, GL_COLOR_DATA_MAGENTA_300, GL_COLOR_DATA_BLUE_100, GL_COLOR_DATA_ORANGE_50, GL_COLOR_DATA_AQUA_100, GL_COLOR_DATA_GREEN_50, GL_COLOR_DATA_MAGENTA_100, GL_COLOR_DATA_BLUE_400, GL_COLOR_DATA_ORANGE_300, GL_COLOR_DATA_AQUA_400, GL_COLOR_DATA_GREEN_300, GL_COLOR_DATA_MAGENTA_400, GL_COLOR_DATA_BLUE_200, GL_COLOR_DATA_ORANGE_100, GL_COLOR_DATA_AQUA_200, GL_COLOR_DATA_GREEN_100, GL_COLOR_DATA_MAGENTA_200, GL_COLOR_DATA_BLUE_50, GL_COLOR_DATA_ORANGE_500, GL_COLOR_DATA_AQUA_50, GL_COLOR_DATA_GREEN_500, GL_COLOR_DATA_MAGENTA_50];
 const colorFromDarkPalette = index => colorPaletteDark[index % colorPaletteDark.length];
+
+// ECharts lays out text by assigning a CSS font shorthand to a canvas context and calling
+// `measureText`, even under the SVG renderer. Canvas does not substitute CSS custom properties,
+// and an unparseable shorthand is rejected wholesale, leaving text measured at the canvas default
+// of 10px sans-serif. So the chart font stack must be concrete: drop the leading
+// `var(--default-regular-font, 'GitLab Sans')` consumer override, whose own fallback is the
+// 'GitLab Sans' that follows it.
+const defaultFontFamily = GL_FONT_FAMILY_REGULAR.filter(family => !family.startsWith('var(')).join(', ');
+
+/**
+ * Chart font sizes are concrete pixel numbers rather than the rem-based font.size tokens they
+ * mirror. zrender measures text on a detached canvas, which always resolves 1rem as 16px however
+ * the document root is set, so rem sizes render scaled while being laid out at the wrong width.
+ *
+ * `defaultFontSize` (12, font.size.100) is set per component in the theme below, because ECharts
+ * pins fontSize in its own component defaults (axis labels at 12, title at 18, gauge detail at 30)
+ * and those shadow `textStyle`.
+ */
+
 const axes = {
   axisLabel: {
     margin: 8,
     show: true,
     color: 'var(--gl-chart-axis-text-color)',
-    hideOverlap: true
+    hideOverlap: true,
+    fontSize: defaultFontSize
   },
   axisLine: {
     show: false
@@ -46,7 +91,8 @@ const axes = {
   },
   nameGap: 30,
   nameTextStyle: {
-    fontWeight: 'bold'
+    fontWeight: 'bold',
+    fontSize: defaultFontSize
   },
   splitLine: {
     lineStyle: {
@@ -64,7 +110,26 @@ const createTheme = function () {
     color: colorPaletteDefault,
     backgroundColor: 'transparent',
     textStyle: {
-      color: 'var(--gl-text-color-default)'
+      color: 'var(--gl-text-color-default)',
+      fontFamily: defaultFontFamily,
+      fontSize: defaultFontSize
+    },
+    title: {
+      textStyle: {
+        fontSize: 18 // font.size.500-fixed, 1.125rem
+      }
+    },
+    gauge: {
+      axisLabel: {
+        fontSize: 14,
+        // font.size.300, 0.875rem, the default body size
+        color: 'var(--gl-chart-axis-text-color)'
+      },
+      detail: {
+        fontSize: 30,
+        fontWeight: 'bold',
+        color: 'var(--gl-text-color-default)'
+      }
     },
     markLine: {
       silent: true,
@@ -197,4 +262,4 @@ const createTheme = function () {
   };
 };
 
-export { colorFromDarkPalette, colorFromDefaultPalette, colorPaletteDark, colorPaletteDefault, createTheme, gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue, heatmapHues, themeName };
+export { colorFromDarkPalette, colorFromDefaultPalette, colorPaletteDark, colorPaletteDefault, createTheme, defaultFontFamily, gaugeSafeHues, gaugeWarningHue, heatmapHues, heatmapHuesDark, heatmapSurface, heatmapSurfaceDark, themeName };

package/dist/utils/constants.js

@@ -337,23 +337,23 @@ const themes = [{
   value: 'default',
   title: 'Default'
 }, {
-  class: 'tint-neutral-indigo',
+  class: 'ui-indigo',
   value: 'indigo',
   title: 'Indigo'
 }, {
-  class: 'tint-neutral-blue',
+  class: 'ui-blue',
   value: 'blue',
   title: 'Blue'
 }, {
-  class: 'tint-neutral-green',
+  class: 'ui-green',
   value: 'green',
   title: 'Green'
 }, {
-  class: 'tint-neutral-red',
+  class: 'ui-red',
   value: 'red',
   title: 'Red'
 }, {
-  class: 'tint-neutral-gray',
+  class: 'ui-gray',
   value: 'gray',
   title: 'Gray'
 }];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "137.1.2",
+  "version": "137.2.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -93,7 +93,7 @@
     "chokidar": "^4.0.3",
     "sane": "^5.0.1",
     "jackspeak": "2.3.6",
-    "postcss": "8.5.26",
+    "postcss": "8.5.28",
     "json5": "2.2.3",
     "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "3.3.1"
   },
@@ -109,7 +109,7 @@
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/hybrid-vue": "npm:@vue/compat@3.5.34",
     "@gitlab/svgs": "*",
-    "@jest/test-sequencer": "30.4.1",
+    "@jest/test-sequencer": "30.5.1",
     "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
@@ -137,7 +137,7 @@
     "@yarnpkg/lockfile": "^1.1.0",
     "acorn": "^8.18.0",
     "acorn-walk": "^8.3.5",
-    "autoprefixer": "10.5.4",
+    "autoprefixer": "10.5.5",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
     "cypress": "15.21.1",
@@ -158,7 +158,7 @@
     "pikaday": "^1.8.0",
     "playwright": "^1.62.1",
     "playwright-core": "^1.62.1",
-    "postcss": "8.5.26",
+    "postcss": "8.5.28",
     "postcss-loader": "8.2.1",
     "postcss-scss": "4.0.9",
     "react": "18.3.1",
@@ -175,7 +175,7 @@
     "start-server-and-test": "^2.1.5",
     "storybook": "^7.6.24",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.5.2",
+    "style-dictionary": "^5.5.3",
     "style-loader": "^4",
     "tailwindcss": "3.4.19",
     "vue": "2.7.16",

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

@@ -7,28 +7,11 @@
  */
 // stylelint-disable length-zero-no-unit
 $gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
-$gl-alert-top-border-size: 2px;
-
-@mixin gl-alert-variant(
-  $variant,
-  $background-color,
-  $title-color,
-  $border-top-color,
-  $border-bottom-color,
-  $icon-color
-) {
+
+@mixin gl-alert-variant($variant, $background-color, $title-color, $border-color, $icon-color) {
   .gl-alert-#{$variant} {
     background-color: $background-color;
-    border-bottom: 1px solid $border-bottom-color;
-
-    &::before {
-      background: linear-gradient(
-        to right,
-        transparent 0%,
-        $border-top-color 50%,
-        transparent 100%
-      );
-    }
+    border-color: $border-color;
 
     .gl-alert-title {
       color: $title-color;
@@ -48,20 +31,7 @@ $gl-alert-top-border-size: 2px;
   border-radius: var(--gl-alert-border-radius);
   padding-inline: calc(#{$gl-spacing-scale-9} + #{$gl-alert-padding-x});
   position: relative;
-
-  @media (forced-colors: active) {
-    border: 1px solid transparent;
-  }
-
-  &::before {
-    content: "";
-    display: block;
-    width: 100%;
-    height: $gl-alert-top-border-size;
-    position: absolute;
-    top: -1px; // To accumilate for the border width
-    left: 0;
-  }
+  border: 1px solid;
 
   &-not-dismissible {
     padding-right: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
@@ -83,14 +53,14 @@ $gl-alert-top-border-size: 2px;
 
 .gl-alert-icon-container {
   position: absolute;
-  top: $gl-spacing-scale-5;
+  top: #{$gl-spacing-scale-4 + $gl-spacing-scale-1};
   left: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
   @apply gl-flex;
   @apply gl-items-center;
-  height: $gl-line-height-20;
+  height: $gl-line-height-24;
 
   .gl-alert-has-title & {
-    top: calc(#{$gl-spacing-scale-4} + #{$gl-alert-top-border-size});
+    top: $gl-spacing-scale-4;
   }
 }
 
@@ -119,7 +89,7 @@ $gl-alert-top-border-size: 2px;
 // This is the replacement for .gl-alert-dismiss
 .gl-dismiss-btn {
   position: absolute;
-  top: calc(#{$gl-spacing-scale-4} + #{$gl-alert-top-border-size});
+  top: $gl-spacing-scale-4;
   right: calc(#{$gl-spacing-scale-4} + #{$gl-alert-padding-x});
 
   .gl-alert-has-title & {
@@ -133,8 +103,7 @@ $gl-alert-top-border-size: 2px;
   $variant: danger,
   $background-color: var(--gl-alert-danger-background-color),
   $title-color: var(--gl-alert-danger-title-color),
-  $border-top-color: var(--gl-alert-danger-border-top-color),
-  $border-bottom-color: var(--gl-alert-danger-border-bottom-color),
+  $border-color: var(--gl-alert-danger-border-color),
   $icon-color: var(--gl-feedback-danger-icon-color)
 );
 
@@ -142,8 +111,7 @@ $gl-alert-top-border-size: 2px;
   $variant: warning,
   $background-color: var(--gl-alert-warning-background-color),
   $title-color: var(--gl-alert-warning-title-color),
-  $border-top-color: var(--gl-alert-warning-border-top-color),
-  $border-bottom-color: var(--gl-alert-warning-border-bottom-color),
+  $border-color: var(--gl-alert-warning-border-color),
   $icon-color: var(--gl-feedback-warning-icon-color)
 );
 
@@ -151,8 +119,7 @@ $gl-alert-top-border-size: 2px;
   $variant: tip,
   $background-color: var(--gl-alert-neutral-background-color),
   $title-color: var(--gl-alert-neutral-title-color),
-  $border-top-color: var(--gl-alert-neutral-border-top-color),
-  $border-bottom-color: var(--gl-alert-neutral-border-bottom-color),
+  $border-color: var(--gl-alert-neutral-border-color),
   $icon-color: var(--gl-feedback-neutral-icon-color)
 );
 
@@ -160,8 +127,7 @@ $gl-alert-top-border-size: 2px;
   $variant: info,
   $background-color: var(--gl-alert-info-background-color),
   $title-color: var(--gl-alert-info-title-color),
-  $border-top-color: var(--gl-alert-info-border-top-color),
-  $border-bottom-color: var(--gl-alert-info-border-bottom-color),
+  $border-color: var(--gl-alert-info-border-color),
   $icon-color: var(--gl-feedback-info-icon-color)
 );
 
@@ -169,7 +135,6 @@ $gl-alert-top-border-size: 2px;
   $variant: success,
   $background-color: var(--gl-alert-success-background-color),
   $title-color: var(--gl-alert-success-title-color),
-  $border-top-color: var(--gl-alert-success-border-top-color),
-  $border-bottom-color: var(--gl-alert-success-border-bottom-color),
+  $border-color: var(--gl-alert-success-border-color),
   $icon-color: var(--gl-feedback-success-icon-color)
 );

package/src/components/charts/chart/chart.vue

@@ -8,6 +8,8 @@ import {
   toolboxHeight,
 } from '../../../utils/charts/config';
 import { createTheme, themeName } from '../../../utils/charts/theme';
+import { resolveCssValues } from '../../../utils/charts/css_values';
+import { onColorModeChange } from '../../../utils/charts/color_mode';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { debounceByAnimationFrame } from '../../../utils/utils';
 
@@ -122,35 +124,79 @@ export default {
   async mounted() {
     await this.$nextTick();
 
-    const chart = echarts.init(this.$refs.chart, themeName, {
-      renderer: this.renderer,
-      width: defaultWidth,
-      height: defaultHeight,
-    });
-    // FIXME: temporary workaround to ensure compatibility with @vue/compat
-    // eslint-disable-next-line no-underscore-dangle
-    chart.__v_skip = true;
-    this.chart = chart;
-
-    if (this.groupId.length) {
-      this.chart.group = this.groupId;
-      echarts.connect(this.groupId);
-    }
-
-    this.chart.on('click', this.handleClick);
-    /**
-     * Emitted after calling `echarts.init`
-     */
-    this.$emit('created', this.chart);
-    this.draw();
-    this.setChartSize();
+    this.initChart();
+    this.observeColorMode();
   },
   beforeDestroy() {
     if (!this.chart) return;
 
     this.chart.off('click', this.handleClick);
+    this.unsubscribeColorMode?.();
   },
   methods: {
+    initChart() {
+      const chart = echarts.init(this.$refs.chart, this.theme(), {
+        renderer: this.renderer,
+        width: defaultWidth,
+        height: defaultHeight,
+      });
+      // FIXME: temporary workaround to ensure compatibility with @vue/compat
+      // eslint-disable-next-line no-underscore-dangle
+      chart.__v_skip = true;
+      this.chart = chart;
+
+      if (this.groupId.length) {
+        this.chart.group = this.groupId;
+        echarts.connect(this.groupId);
+      }
+
+      this.chart.on('click', this.handleClick);
+      /**
+       * Emitted after calling `echarts.init`
+       */
+      this.$emit('created', this.chart);
+      this.draw();
+      this.setChartSize();
+    },
+    /**
+     * The SVG renderer consumes the registered theme as-is, leaving its `var(--token)` colours for
+     * the browser to resolve. Canvas cannot, so it gets a copy resolved against this element.
+     */
+    theme() {
+      if (this.renderer !== 'canvas') {
+        return themeName;
+      }
+
+      return resolveCssValues(createTheme(this.options), this.$refs.chart);
+    },
+    /**
+     * Rebuilding the chart discards its interaction state, so the legend selection and zoom range
+     * are carried over. Only these stateful fields are copied: the full option from getOption()
+     * holds colours resolved against the old colour mode.
+     */
+    preservedState() {
+      const { legend = [], dataZoom = [] } = this.chart.getOption();
+      return {
+        legend: legend.map(({ selected }) => ({ selected })),
+        dataZoom: dataZoom.map(({ start, end }) => ({ start, end })),
+      };
+    },
+    /**
+     * Colours resolved for canvas are frozen at init, so the chart has to be rebuilt when the
+     * colour mode changes. SVG re-resolves on its own and needs no subscription.
+     */
+    observeColorMode() {
+      if (this.renderer !== 'canvas') {
+        return;
+      }
+
+      this.unsubscribeColorMode = onColorModeChange(this.$refs.chart, () => {
+        const state = this.preservedState();
+        this.chart.dispose();
+        this.initChart();
+        this.chart.setOption(state);
+      });
+    },
     draw() {
       this.chart.setOption(this.modifiedOptions);
       /**