@gitlab/ui 137.2.0 → 137.2.1

package/dist/components/charts/chart/chart.js

@@ -2,6 +2,8 @@ import * as echarts from 'echarts';
 import { merge } from 'lodash-es';
 import { validRenderers, toolboxHeight, defaultWidth, defaultHeight } from '../../../utils/charts/config';
 import { themeName, createTheme } 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';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -126,32 +128,91 @@ var script = {
   },
   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() {
+    var _this$unsubscribeColo;
     if (!this.chart) return;
     this.chart.off('click', this.handleClick);
+    (_this$unsubscribeColo = this.unsubscribeColorMode) === null || _this$unsubscribeColo === void 0 ? void 0 : _this$unsubscribeColo.call(this);
   },
   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 _this$chart$getOption = this.chart.getOption(),
+        _this$chart$getOption2 = _this$chart$getOption.legend,
+        legend = _this$chart$getOption2 === void 0 ? [] : _this$chart$getOption2,
+        _this$chart$getOption3 = _this$chart$getOption.dataZoom,
+        dataZoom = _this$chart$getOption3 === void 0 ? [] : _this$chart$getOption3;
+      return {
+        legend: legend.map(_ref => {
+          let selected = _ref.selected;
+          return {
+            selected
+          };
+        }),
+        dataZoom: dataZoom.map(_ref2 => {
+          let start = _ref2.start,
+            end = _ref2.end;
+          return {
+            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);
       /**

package/dist/components/charts/gauge/gauge.js

@@ -1,13 +1,9 @@
 import { merge, uniq, sortBy } from 'lodash-es';
-import { gaugeSafeHues, gaugeWarningHue, gaugeNeutralHues } from '../../../utils/charts/theme';
+import { gaugeSafeHues, gaugeWarningHue } from '../../../utils/charts/theme';
 import Chart from '../chart/chart';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-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;
 const gaugeChartSeries = _ref => {
@@ -24,17 +20,11 @@ const gaugeChartSeries = _ref => {
       formatter: () => {
         const currentValue = Number.isFinite(value) ? value : null;
         return text || (currentValue !== null && currentValue !== void 0 ? 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]}`
+      formatter: theValue => Number.isFinite(theValue) ? theValue : '--'
     },
     axisLine: {
       lineStyle: {

package/dist/components/charts/heatmap/heatmap.js

@@ -1,8 +1,8 @@
 import { merge } from 'lodash-es';
-import { GL_COLOR_NEUTRAL_100, GL_COLOR_NEUTRAL_0 } 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 { heatmapHuesDark, heatmapHues, heatmapSurfaceDark, heatmapSurface } 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';
 import Chart from '../chart/chart';
@@ -61,10 +61,7 @@ function _unsupportedIterableToArray(r, a) {
 
 const defaultOptions = {
   visualMap: {
-    show: false,
-    inRange: {
-      color: heatmapHues
-    }
+    show: false
   },
   series: {
     type: 'heatmap'
@@ -201,10 +198,20 @@ var script = {
         left: '0',
         top: '0'
       },
-      selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
+      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 _getRange = getRange(this.dataSeries),
         min = _getRange.min,
@@ -219,11 +226,14 @@ var script = {
           right: '32px',
           show: true,
           borderWidth: 0,
-          backgroundColor: GL_COLOR_NEUTRAL_100
+          backgroundColor: this.surface.plate
         },
         visualMap: {
           min,
-          max
+          max,
+          inRange: {
+            color: this.hues
+          }
         },
         xAxis: {
           data: this.xAxisLabels,
@@ -243,7 +253,7 @@ var script = {
             show: true,
             interval: 0,
             lineStyle: {
-              color: GL_COLOR_NEUTRAL_0,
+              color: this.surface.separator,
               width: 2
             }
           },
@@ -270,7 +280,7 @@ var script = {
             show: true,
             interval: 0,
             lineStyle: {
-              color: GL_COLOR_NEUTRAL_0,
+              color: this.surface.separator,
               width: 2
             }
           }
@@ -290,8 +300,8 @@ var script = {
       const _getRange2 = getRange(this.dataSeries),
         min = _getRange2.min,
         max = _getRange2.max;
-      const step = (max - min) / heatmapHues.length;
-      return heatmapHues.map((color, index) => {
+      const step = (max - min) / this.hues.length;
+      return this.hues.map((color, index) => {
         const lowerBound = engineeringNotation(min + step * index);
         const upperBound = engineeringNotation(min + step * (index + 1));
         return {
@@ -305,6 +315,16 @@ var script = {
       return this.height === 'auto';
     }
   },
+  mounted() {
+    this.isDark = isDarkMode(this.$el);
+    this.unsubscribeColorMode = onColorModeChange(this.$el, isDark => {
+      this.isDark = isDark;
+    });
+  },
+  beforeDestroy() {
+    var _this$unsubscribeColo;
+    (_this$unsubscribeColo = this.unsubscribeColorMode) === null || _this$unsubscribeColo === void 0 ? void 0 : _this$unsubscribeColo.call(this);
+  },
   methods: {
     defaultFormatTooltipText(params) {
       this.tooltip.title = getTooltipTitle(params, this.computedOptions.xAxis.name);

package/dist/components/charts/legend/legend.js

@@ -1,5 +1,6 @@
 import * as echarts from 'echarts';
 import { defaultFontSize } from '../../../utils/charts/config';
+import { defaultFontFamily } from '../../../utils/charts/theme';
 import { LEGEND_AVERAGE_TEXT, LEGEND_CURRENT_TEXT, LEGEND_MIN_TEXT, LEGEND_MAX_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '../../../utils/charts/constants';
 import { engineeringNotation, average } from '../../../utils/number_utils';
 import GlTruncate from '../../utilities/truncate/truncate';
@@ -144,7 +145,7 @@ var script = {
   computed: {
     fontStyle() {
       return {
-        fontFamily: this.textStyle.fontFamily || 'sans-serif',
+        fontFamily: this.textStyle.fontFamily || defaultFontFamily,
         fontSize: `${this.textStyle.fontSize || defaultFontSize}px`
       };
     },
@@ -152,6 +153,17 @@ var script = {
       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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "137.2.0",
+  "version": "137.2.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -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",
@@ -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/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);
       /**

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/tokens/color_mode.js

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ */
+export const DARK_ROOT_CLASS = 'gl-dark';
+export const DARK_SCOPE_CLASS = 'gl-dark-scope';
+export const LIGHT_SCOPE_CLASS = 'gl-light-scope';
+
+export const LIGHT_SELECTOR = `:root, .${LIGHT_SCOPE_CLASS}`;
+export const DARK_SELECTOR = `:root.${DARK_ROOT_CLASS}, .${DARK_SCOPE_CLASS}`;

package/src/utils/charts/color_mode.js

@@ -0,0 +1,83 @@
+import { DARK_ROOT_CLASS, DARK_SCOPE_CLASS, LIGHT_SCOPE_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.
+ */
+export const isDarkMode = (element) => {
+  const scope = element?.closest?.(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 = ({ target, oldValue }) =>
+  SCOPE_CLASSES.some(
+    (scopeClass) => target.classList?.contains(scopeClass) || oldValue?.includes(scopeClass),
+  );
+
+const notify = () => {
+  subscriptions.forEach(({ element, subscriber, mode }, key) => {
+    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.
+ */
+export 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) {
+      observer?.disconnect();
+      observer = null;
+    }
+  };
+};

package/src/utils/charts/css_values.js

@@ -0,0 +1,59 @@
+import { mapValues } from 'lodash-es';
+
+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 [, name, fallback] = match;
+  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.
+ */
+export 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);
+};

package/src/utils/charts/theme.js

@@ -1,8 +1,9 @@
 import {
+  GL_COLOR_NEUTRAL_0,
   GL_COLOR_NEUTRAL_50,
   GL_COLOR_NEUTRAL_100,
-  GL_COLOR_NEUTRAL_500,
-  GL_COLOR_NEUTRAL_900,
+  GL_COLOR_NEUTRAL_800,
+  GL_COLOR_NEUTRAL_950,
   GL_COLOR_DATA_AQUA_50,
   GL_COLOR_DATA_AQUA_100,
   GL_COLOR_DATA_AQUA_200,
@@ -58,6 +59,7 @@ import {
   GL_COLOR_DATA_ORANGE_800,
   GL_COLOR_DATA_ORANGE_950,
   GL_COLOR_DATA_ORANGE_900,
+  GL_FONT_FAMILY_REGULAR,
 } from '../../tokens/build/js/tokens';
 import {
   scrollHandleSvgPath,
@@ -66,20 +68,45 @@ import {
   clearAllSvgPath,
   downloadSvgPath,
 } from '../svgs/svg_paths';
+import { defaultFontSize } from './config';
 
 const GL_BORDER_RADIUS_BASE = '0.25rem';
 
 export const themeName = 'gitlab';
 
+/**
+ * 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
+ */
 export const heatmapHues = [
   GL_COLOR_NEUTRAL_100,
-  GL_COLOR_DATA_BLUE_200,
-  GL_COLOR_DATA_BLUE_400,
+  GL_COLOR_DATA_BLUE_500,
   GL_COLOR_DATA_BLUE_600,
   GL_COLOR_DATA_BLUE_800,
+  GL_COLOR_DATA_BLUE_950,
 ];
 
-export const gaugeNeutralHues = [GL_COLOR_NEUTRAL_900, GL_COLOR_NEUTRAL_500];
+export 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
+ */
+export const heatmapSurface = { plate: GL_COLOR_NEUTRAL_100, separator: GL_COLOR_NEUTRAL_0 };
+export const heatmapSurfaceDark = { plate: GL_COLOR_NEUTRAL_800, separator: GL_COLOR_NEUTRAL_950 };
+
 export const gaugeSafeHues = [GL_COLOR_DATA_BLUE_500, GL_COLOR_DATA_BLUE_900];
 export const gaugeWarningHue = GL_COLOR_DATA_ORANGE_500;
 
@@ -159,12 +186,33 @@ export const colorPaletteDark = [
 
 export 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.
+export 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,
+    fontSize: defaultFontSize,
   },
   axisLine: {
     show: false,
@@ -188,6 +236,7 @@ const axes = {
   nameGap: 30,
   nameTextStyle: {
     fontWeight: 'bold',
+    fontSize: defaultFontSize,
   },
   splitLine: {
     lineStyle: {
@@ -208,6 +257,24 @@ export const createTheme = (options = {}) => ({
   backgroundColor: 'transparent',
   textStyle: {
     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,