@hsu-react/ui 2.3.0 → 2.4.1

package/es/build/webpack.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 给消费方 webpack 配置用的工具。**构建期模块，不要从应用代码里引**
+ * —— 它不依赖 React，也不该进运行时产物。
+ *
+ * ```js
+ * // webpack.config.js（CJS）
+ * const { excludeNodeModulesExceptHsuUi } = require("@hsu-react/ui/lib/build/webpack");
+ *
+ * { test: /\.scss$/, exclude: excludeNodeModulesExceptHsuUi, use: [...] }
+ * ```
+ */
+/**
+ * 判断一个模块路径「是否该被 loader 排除」：node_modules 一律排除，但放行本库。
+ *
+ * ## 为什么需要它
+ *
+ * 本库的 es / lib 产物里带着**未编译的 `.module.scss`** 和图片资源，要由消费方自己的
+ * loader 处理（这样 CSS Module 的类名哈希、`getLocalIdent` 等策略才由消费方说了算）。
+ * 于是每个 webpack 项目都得在 scss / 图片规则上开一个「排除 node_modules，但放行
+ * @hsu-react/ui」的例外。
+ *
+ * ## 为什么不能用正则
+ *
+ * 手写的版本几乎都是 `/node_modules\/(?!@hsu-react\/ui\/)/`。它只看**第一个**
+ * node_modules 后面跟着什么——扁平安装（yarn / npm）下确实是 `@hsu-react/ui/`，
+ * 但 pnpm 的真实路径是
+ *
+ * ```
+ * node_modules/.pnpm/@hsu-react+ui@<版本>/node_modules/@hsu-react/ui/es/...
+ * ```
+ *
+ * 跟着的是 `.pnpm/`，否定前瞻立刻失败，本库的 scss 与图片会被**全部排除**，
+ * 报「no loaders are configured to process this file」。这个坑在四个下游项目里
+ * 各踩过一次，所以把判定收进库里导出，消费方引用而不是各抄一份。
+ *
+ * 改按「整条路径里有没有 @hsu-react/ui」判断，扁平与嵌套两种布局都成立；
+ * 路径分隔符同时接受 `/` 与 `\`，Windows 下同样有效。
+ */
+export declare const excludeNodeModulesExceptHsuUi: (modulePath: string) => boolean;
+export default excludeNodeModulesExceptHsuUi;

package/es/build/webpack.js

@@ -0,0 +1,43 @@
+/**
+ * 给消费方 webpack 配置用的工具。**构建期模块，不要从应用代码里引**
+ * —— 它不依赖 React，也不该进运行时产物。
+ *
+ * ```js
+ * // webpack.config.js（CJS）
+ * const { excludeNodeModulesExceptHsuUi } = require("@hsu-react/ui/lib/build/webpack");
+ *
+ * { test: /\.scss$/, exclude: excludeNodeModulesExceptHsuUi, use: [...] }
+ * ```
+ */
+
+/**
+ * 判断一个模块路径「是否该被 loader 排除」：node_modules 一律排除，但放行本库。
+ *
+ * ## 为什么需要它
+ *
+ * 本库的 es / lib 产物里带着**未编译的 `.module.scss`** 和图片资源，要由消费方自己的
+ * loader 处理（这样 CSS Module 的类名哈希、`getLocalIdent` 等策略才由消费方说了算）。
+ * 于是每个 webpack 项目都得在 scss / 图片规则上开一个「排除 node_modules，但放行
+ * @hsu-react/ui」的例外。
+ *
+ * ## 为什么不能用正则
+ *
+ * 手写的版本几乎都是 `/node_modules\/(?!@hsu-react\/ui\/)/`。它只看**第一个**
+ * node_modules 后面跟着什么——扁平安装（yarn / npm）下确实是 `@hsu-react/ui/`，
+ * 但 pnpm 的真实路径是
+ *
+ * ```
+ * node_modules/.pnpm/@hsu-react+ui@<版本>/node_modules/@hsu-react/ui/es/...
+ * ```
+ *
+ * 跟着的是 `.pnpm/`，否定前瞻立刻失败，本库的 scss 与图片会被**全部排除**，
+ * 报「no loaders are configured to process this file」。这个坑在四个下游项目里
+ * 各踩过一次，所以把判定收进库里导出，消费方引用而不是各抄一份。
+ *
+ * 改按「整条路径里有没有 @hsu-react/ui」判断，扁平与嵌套两种布局都成立；
+ * 路径分隔符同时接受 `/` 与 `\`，Windows 下同样有效。
+ */
+export var excludeNodeModulesExceptHsuUi = function excludeNodeModulesExceptHsuUi(modulePath) {
+  return /node_modules/.test(modulePath) && !/@hsu-react[\\/]ui[\\/]/.test(modulePath);
+};
+export default excludeNodeModulesExceptHsuUi;

package/es/components/Chart/Bar/index.js

@@ -13,6 +13,8 @@ import styles from "../index.module.scss";
 import { autoScrollLegend } from "../_utils/autoScrollLegend";
 import { autoScrollByItem } from "../_utils/autoSmooth";
 import { buildCartesianSeriesOptions, createDefaultCategoryXAxis, createDefaultValueYAxis, getSliderShow, percentWindowToIndexWindow, resolveScrollConfig } from "../_utils/cartesian";
+import { resolveChartChrome } from "../_utils/chartTheme";
+import useIsDark from "../../../hooks/useIsDark";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ChartBar = function ChartBar(props) {
   var className = props.className,
@@ -50,12 +52,18 @@ var ChartBar = function ChartBar(props) {
   var normalizedScroll = useMemo(function () {
     return resolveScrollConfig(scrollConfig);
   }, [scrollConfig]);
+  // echarts options are plain JS and cannot read the `--vita-*` variables, so the axis and
+  // legend colours have to be resolved against the active appearance here
+  var isDark = useIsDark();
+  var chrome = useMemo(function () {
+    return resolveChartChrome(isDark);
+  }, [isDark]);
 
   // Cache the chart option with useMemo
   var chartOption = useMemo(function () {
     var _xAxisData$length, _ref, _ref2;
-    var def_xAxis = createDefaultCategoryXAxis(xAxisData);
-    var def_yAxis = createDefaultValueYAxis("bar");
+    var def_xAxis = createDefaultCategoryXAxis(xAxisData, chrome);
+    var def_yAxis = createDefaultValueYAxis("bar", chrome);
 
     // Process xAxis config
     var processedXAxis = Array.isArray(xAxis) ? xAxis === null || xAxis === void 0 ? void 0 : xAxis.map(function (item) {
@@ -150,8 +158,7 @@ var ChartBar = function ChartBar(props) {
           data: legendData,
           icon: "circle",
           textStyle: {
-            color: "#373D48",
-            fontSize: 16
+            color: chrome.text
           },
           itemWidth: 8,
           itemHeight: 8
@@ -175,7 +182,7 @@ var ChartBar = function ChartBar(props) {
       series: buildCartesianSeriesOptions("bar", seriesData, series)
     }, coreOption);
     return option;
-  }, [xAxisData, xAxis, yAxis, grid, chartTitle, dataZoom, normalizedScroll, insideDataZoom, sliderDataZoom, title, tooltip, legendData, legend, seriesData, series, enableLegendAutoScroll, coreOption]);
+  }, [xAxisData, xAxis, yAxis, grid, chartTitle, dataZoom, normalizedScroll, insideDataZoom, sliderDataZoom, title, tooltip, legendData, legend, seriesData, series, enableLegendAutoScroll, coreOption, chrome]);
 
   // Callback for handling chart resize
   var handleResize = useCallback(function () {

package/es/components/Chart/Heatmap/index.js

@@ -17,6 +17,8 @@ import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import styles from "../index.module.scss";
 import * as echarts from "echarts";
 import { createDefaultHeatmapXAxis, createDefaultHeatmapYAxis } from "../_utils/heatmap";
+import { resolveChartChrome } from "../_utils/chartTheme";
+import useIsDark from "../../../hooks/useIsDark";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Heatmap = function Heatmap(props) {
   var className = props.className,
@@ -41,6 +43,12 @@ var Heatmap = function Heatmap(props) {
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   var resizeObserverRef = useRef(null);
+  // echarts options are plain JS and cannot read the `--vita-*` variables, so the axis and legend
+  // colours have to be resolved against the active appearance here
+  var isDark = useIsDark();
+  var chrome = useMemo(function () {
+    return resolveChartChrome(isDark);
+  }, [isDark]);
 
   // Process the data and generate the chart option
   var chartOption = useMemo(function () {
@@ -85,7 +93,7 @@ var Heatmap = function Heatmap(props) {
       left: "right",
       top: "center",
       textStyle: {
-        color: "#373D48"
+        color: chrome.text
       },
       inRange: {
         color: inRangeColor
@@ -93,7 +101,7 @@ var Heatmap = function Heatmap(props) {
     };
 
     // Process xAxis config
-    var def_xAxis = createDefaultHeatmapXAxis(xAxisData);
+    var def_xAxis = createDefaultHeatmapXAxis(xAxisData, chrome);
     var processedXAxis = Array.isArray(xAxis) ? xAxis === null || xAxis === void 0 ? void 0 : xAxis.map(function (item) {
       return _objectSpread(_objectSpread({}, def_xAxis), {}, {
         data: (item === null || item === void 0 ? void 0 : item.type) === "value" ? undefined : xAxisData
@@ -103,7 +111,7 @@ var Heatmap = function Heatmap(props) {
     }, xAxis);
 
     // Process yAxis config
-    var def_yAxis = createDefaultHeatmapYAxis(yAxisData);
+    var def_yAxis = createDefaultHeatmapYAxis(yAxisData, chrome);
     var processedYAxis = Array.isArray(yAxis) ? yAxis === null || yAxis === void 0 ? void 0 : yAxis.map(function (item) {
       return _objectSpread(_objectSpread({}, def_yAxis), {}, {
         data: (item === null || item === void 0 ? void 0 : item.type) === "value" ? undefined : yAxisData
@@ -170,7 +178,7 @@ var Heatmap = function Heatmap(props) {
       }, series)]
     }, coreOption);
     return option;
-  }, [data, inRangeColor, xAxisData, xAxis, yAxisData, yAxis, propVisualMap, grid, chartTitle, title, tooltip, series, coreOption, zeroColor]);
+  }, [data, inRangeColor, xAxisData, xAxis, yAxisData, yAxis, propVisualMap, grid, chartTitle, title, tooltip, series, coreOption, zeroColor, chrome]);
 
   // Callback for handling chart resize
   var handleResize = useCallback(function () {

package/es/components/Chart/Line/index.js

@@ -13,6 +13,8 @@ import styles from "../index.module.scss";
 import { autoScrollLegend } from "../_utils/autoScrollLegend";
 import { autoScrollByItem } from "../_utils/autoSmooth";
 import { buildCartesianSeriesOptions, createDefaultCategoryXAxis, createDefaultValueYAxis, getSliderShow, percentWindowToIndexWindow, resolveScrollConfig } from "../_utils/cartesian";
+import { resolveChartChrome } from "../_utils/chartTheme";
+import useIsDark from "../../../hooks/useIsDark";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ChartLine = function ChartLine(props) {
   var className = props.className,
@@ -50,12 +52,18 @@ var ChartLine = function ChartLine(props) {
   var normalizedScroll = useMemo(function () {
     return resolveScrollConfig(scrollConfig);
   }, [scrollConfig]);
+  // echarts options are plain JS and cannot read the `--vita-*` variables, so the axis and
+  // legend colours have to be resolved against the active appearance here
+  var isDark = useIsDark();
+  var chrome = useMemo(function () {
+    return resolveChartChrome(isDark);
+  }, [isDark]);
 
   // Cache the chart option with useMemo
   var chartOption = useMemo(function () {
     var _xAxisData$length, _ref, _ref2;
-    var def_xAxis = createDefaultCategoryXAxis(xAxisData);
-    var def_yAxis = createDefaultValueYAxis("line");
+    var def_xAxis = createDefaultCategoryXAxis(xAxisData, chrome);
+    var def_yAxis = createDefaultValueYAxis("line", chrome);
 
     // Process xAxis config
     var processedXAxis = Array.isArray(xAxis) ? xAxis === null || xAxis === void 0 ? void 0 : xAxis.map(function (item) {
@@ -144,7 +152,7 @@ var ChartLine = function ChartLine(props) {
           top: "5%",
           icon: "circle",
           textStyle: {
-            color: "#373D48"
+            color: chrome.text
           },
           itemWidth: 8,
           itemHeight: 8
@@ -171,7 +179,7 @@ var ChartLine = function ChartLine(props) {
       series: buildCartesianSeriesOptions("line", seriesData, series)
     }, coreOption);
     return option;
-  }, [xAxisData, xAxis, yAxis, grid, chartTitle, dataZoom, normalizedScroll, insideDataZoom, sliderDataZoom, title, legendData, legend, tooltip, seriesData, series, enableLegendAutoScroll, coreOption]);
+  }, [xAxisData, xAxis, yAxis, grid, chartTitle, dataZoom, normalizedScroll, insideDataZoom, sliderDataZoom, title, legendData, legend, tooltip, seriesData, series, enableLegendAutoScroll, coreOption, chrome]);
 
   // Callback for handling chart resize
   var handleResize = useCallback(function () {

package/es/components/Chart/_utils/cartesian.d.ts

@@ -1,5 +1,6 @@
 import * as echarts from "echarts";
 import { ChartOptionType, SeriesDataType } from "..";
+import { ChartChrome } from "./chartTheme";
 export interface ChartScrollConfig {
     enabled?: boolean;
     autoScroll?: boolean;
@@ -29,8 +30,8 @@ export interface DataZoomIndexWindow {
  * percentages produced by native echarts interactions are rounded outward, so each boundary may include at most one extra item, without affecting the axis magnitude.
  */
 export declare const percentWindowToIndexWindow: (startPercent: number, endPercent: number, total: number) => DataZoomIndexWindow;
-export declare const createDefaultCategoryXAxis: (xAxisData?: Array<string>) => ChartOptionType;
-export declare const createDefaultValueYAxis: (mode?: "bar" | "line") => ChartOptionType;
+export declare const createDefaultCategoryXAxis: (xAxisData: Array<string> | undefined, chrome: ChartChrome) => ChartOptionType;
+export declare const createDefaultValueYAxis: (mode: "bar" | "line" | undefined, chrome: ChartChrome) => ChartOptionType;
 export declare const buildCartesianSeriesOptions: (mode: "bar" | "line", seriesData?: SeriesDataType, series?: echarts.SeriesOption | echarts.SeriesOption[]) => echarts.SeriesOption[];
 export declare const getSliderShow: (zoom?: echarts.DataZoomComponentOption | Record<string, unknown>) => boolean | undefined;
 export declare const resolveScrollConfig: (scrollConfig?: ChartScrollConfig) => NormalizedScrollConfig;

package/es/components/Chart/_utils/cartesian.js

@@ -23,7 +23,7 @@ export var percentWindowToIndexWindow = function percentWindowToIndexWindow(star
     endIndex: endIndex
   };
 };
-export var createDefaultCategoryXAxis = function createDefaultCategoryXAxis(xAxisData) {
+export var createDefaultCategoryXAxis = function createDefaultCategoryXAxis(xAxisData, chrome) {
   return {
     type: "category",
     boundaryGap: true,
@@ -31,10 +31,10 @@ export var createDefaultCategoryXAxis = function createDefaultCategoryXAxis(xAxi
     axisLabel: {
       interval: 0,
       hideOverlap: true,
-      textStyle: {
-        fontSize: 14,
-        color: "#373D48"
-      }
+      // echarts removed the `textStyle` nesting under `axisLabel` in v4: keeping it means both
+      // properties are silently dropped *and* a deprecation warning is logged on every render.
+      fontSize: chrome.fontSize,
+      color: chrome.axis
     },
     axisTick: {
       show: false
@@ -43,17 +43,16 @@ export var createDefaultCategoryXAxis = function createDefaultCategoryXAxis(xAxi
 };
 export var createDefaultValueYAxis = function createDefaultValueYAxis() {
   var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "bar";
+  var chrome = arguments.length > 1 ? arguments[1] : undefined;
   return {
     type: "value",
     axisLabel: {
-      textStyle: {
-        fontSize: 14,
-        color: "#373D48"
-      }
+      fontSize: chrome.fontSize,
+      color: chrome.axis
     },
     splitLine: mode === "line" ? {
       lineStyle: {
-        color: "#C9CED6",
+        color: chrome.splitLine,
         type: "dashed"
       }
     } : {

package/es/components/Chart/_utils/chartTheme.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Colours for the chart *chrome* — axis ticks, split lines, legend labels.
+ *
+ * echarts options are plain JS, so they cannot read the `--vita-*` CSS variables the rest of the
+ * library styles itself with; the literal values have to be resolved here instead. These used to
+ * be hard-coded to a light-mode slate (`#373D48` / `#C9CED6`), which left every axis and legend
+ * nearly invisible once the page switched to the dark palette.
+ *
+ * The plotted data is deliberately *not* covered here: series colours come from echarts' own
+ * palette or from whatever the caller passes as `color`, and both read fine on either background.
+ */
+export interface ChartChrome {
+    /** Legend labels — a real label, so it sits on the foreground ramp */
+    text: string;
+    /** Axis tick labels — secondary information, one step down */
+    axis: string;
+    /** Split lines behind the plot area */
+    splitLine: string;
+    /** Base font size, same scale the rest of the library uses */
+    fontSize: number;
+}
+export declare const resolveChartChrome: (dark: boolean) => ChartChrome;

package/es/components/Chart/_utils/chartTheme.js

@@ -0,0 +1,23 @@
+import { darkTokens, fontTokens, lightTokens } from "../../../styles/tokens";
+
+/**
+ * Colours for the chart *chrome* — axis ticks, split lines, legend labels.
+ *
+ * echarts options are plain JS, so they cannot read the `--vita-*` CSS variables the rest of the
+ * library styles itself with; the literal values have to be resolved here instead. These used to
+ * be hard-coded to a light-mode slate (`#373D48` / `#C9CED6`), which left every axis and legend
+ * nearly invisible once the page switched to the dark palette.
+ *
+ * The plotted data is deliberately *not* covered here: series colours come from echarts' own
+ * palette or from whatever the caller passes as `color`, and both read fine on either background.
+ */
+
+export var resolveChartChrome = function resolveChartChrome(dark) {
+  var t = dark ? darkTokens : lightTokens;
+  return {
+    text: t.foreground,
+    axis: t.mutedForeground,
+    splitLine: t.border,
+    fontSize: fontTokens.size
+  };
+};

package/es/components/Chart/_utils/heatmap.d.ts

@@ -1,3 +1,4 @@
 import { ChartOptionType } from "..";
-export declare const createDefaultHeatmapXAxis: (xAxisData?: string[]) => ChartOptionType;
-export declare const createDefaultHeatmapYAxis: (yAxisData?: string[]) => ChartOptionType;
+import { ChartChrome } from "./chartTheme";
+export declare const createDefaultHeatmapXAxis: (xAxisData: string[] | undefined, chrome: ChartChrome) => ChartOptionType;
+export declare const createDefaultHeatmapYAxis: (yAxisData: string[] | undefined, chrome: ChartChrome) => ChartOptionType;

package/es/components/Chart/_utils/heatmap.js

@@ -1,4 +1,4 @@
-export var createDefaultHeatmapXAxis = function createDefaultHeatmapXAxis(xAxisData) {
+export var createDefaultHeatmapXAxis = function createDefaultHeatmapXAxis(xAxisData, chrome) {
   return {
     type: "category",
     data: xAxisData,
@@ -8,17 +8,16 @@ export var createDefaultHeatmapXAxis = function createDefaultHeatmapXAxis(xAxisD
     axisLabel: {
       interval: 0,
       hideOverlap: true,
-      textStyle: {
-        fontSize: 14,
-        color: "#373D48"
-      }
+      // See the note in `cartesian.ts`: `axisLabel.textStyle` has been deprecated since echarts 4
+      fontSize: chrome.fontSize,
+      color: chrome.axis
     },
     axisTick: {
       show: false
     }
   };
 };
-export var createDefaultHeatmapYAxis = function createDefaultHeatmapYAxis(yAxisData) {
+export var createDefaultHeatmapYAxis = function createDefaultHeatmapYAxis(yAxisData, chrome) {
   return {
     type: "category",
     data: yAxisData,
@@ -26,10 +25,8 @@ export var createDefaultHeatmapYAxis = function createDefaultHeatmapYAxis(yAxisD
       show: true
     },
     axisLabel: {
-      textStyle: {
-        fontSize: 14,
-        color: "#373D48"
-      }
+      fontSize: chrome.fontSize,
+      color: chrome.axis
     },
     axisTick: {
       show: false

package/es/components/Panel/ListPanel/ListModalPanel/index.module.scss

@@ -21,8 +21,18 @@
 
   height: 100%;
 
+  // Inside a modal the Search must not keep its card chrome. On a page it is an outlined white
+  // card standing on the grey page background; in a modal the body is already `--vita-surface`,
+  // so the same treatment paints a white card on white and only the border survives — a stray
+  // outline around the search row. The padding was already being cleared here; the background and
+  // border are the other half of the same intent, and `.tableContainer` below is flush for
+  // exactly this reason.
   .search {
     padding: 0px;
+
+    background: transparent;
+
+    border: none;
   }
 
   .tableContainer {

package/lib/build/webpack.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 给消费方 webpack 配置用的工具。**构建期模块，不要从应用代码里引**
+ * —— 它不依赖 React，也不该进运行时产物。
+ *
+ * ```js
+ * // webpack.config.js（CJS）
+ * const { excludeNodeModulesExceptHsuUi } = require("@hsu-react/ui/lib/build/webpack");
+ *
+ * { test: /\.scss$/, exclude: excludeNodeModulesExceptHsuUi, use: [...] }
+ * ```
+ */
+/**
+ * 判断一个模块路径「是否该被 loader 排除」：node_modules 一律排除，但放行本库。
+ *
+ * ## 为什么需要它
+ *
+ * 本库的 es / lib 产物里带着**未编译的 `.module.scss`** 和图片资源，要由消费方自己的
+ * loader 处理（这样 CSS Module 的类名哈希、`getLocalIdent` 等策略才由消费方说了算）。
+ * 于是每个 webpack 项目都得在 scss / 图片规则上开一个「排除 node_modules，但放行
+ * @hsu-react/ui」的例外。
+ *
+ * ## 为什么不能用正则
+ *
+ * 手写的版本几乎都是 `/node_modules\/(?!@hsu-react\/ui\/)/`。它只看**第一个**
+ * node_modules 后面跟着什么——扁平安装（yarn / npm）下确实是 `@hsu-react/ui/`，
+ * 但 pnpm 的真实路径是
+ *
+ * ```
+ * node_modules/.pnpm/@hsu-react+ui@<版本>/node_modules/@hsu-react/ui/es/...
+ * ```
+ *
+ * 跟着的是 `.pnpm/`，否定前瞻立刻失败，本库的 scss 与图片会被**全部排除**，
+ * 报「no loaders are configured to process this file」。这个坑在四个下游项目里
+ * 各踩过一次，所以把判定收进库里导出，消费方引用而不是各抄一份。
+ *
+ * 改按「整条路径里有没有 @hsu-react/ui」判断，扁平与嵌套两种布局都成立；
+ * 路径分隔符同时接受 `/` 与 `\`，Windows 下同样有效。
+ */
+export declare const excludeNodeModulesExceptHsuUi: (modulePath: string) => boolean;
+export default excludeNodeModulesExceptHsuUi;

package/lib/build/webpack.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.excludeNodeModulesExceptHsuUi = exports.default = void 0;
+/**
+ * 给消费方 webpack 配置用的工具。**构建期模块，不要从应用代码里引**
+ * —— 它不依赖 React，也不该进运行时产物。
+ *
+ * ```js
+ * // webpack.config.js（CJS）
+ * const { excludeNodeModulesExceptHsuUi } = require("@hsu-react/ui/lib/build/webpack");
+ *
+ * { test: /\.scss$/, exclude: excludeNodeModulesExceptHsuUi, use: [...] }
+ * ```
+ */
+
+/**
+ * 判断一个模块路径「是否该被 loader 排除」：node_modules 一律排除，但放行本库。
+ *
+ * ## 为什么需要它
+ *
+ * 本库的 es / lib 产物里带着**未编译的 `.module.scss`** 和图片资源，要由消费方自己的
+ * loader 处理（这样 CSS Module 的类名哈希、`getLocalIdent` 等策略才由消费方说了算）。
+ * 于是每个 webpack 项目都得在 scss / 图片规则上开一个「排除 node_modules，但放行
+ * @hsu-react/ui」的例外。
+ *
+ * ## 为什么不能用正则
+ *
+ * 手写的版本几乎都是 `/node_modules\/(?!@hsu-react\/ui\/)/`。它只看**第一个**
+ * node_modules 后面跟着什么——扁平安装（yarn / npm）下确实是 `@hsu-react/ui/`，
+ * 但 pnpm 的真实路径是
+ *
+ * ```
+ * node_modules/.pnpm/@hsu-react+ui@<版本>/node_modules/@hsu-react/ui/es/...
+ * ```
+ *
+ * 跟着的是 `.pnpm/`，否定前瞻立刻失败，本库的 scss 与图片会被**全部排除**，
+ * 报「no loaders are configured to process this file」。这个坑在四个下游项目里
+ * 各踩过一次，所以把判定收进库里导出，消费方引用而不是各抄一份。
+ *
+ * 改按「整条路径里有没有 @hsu-react/ui」判断，扁平与嵌套两种布局都成立；
+ * 路径分隔符同时接受 `/` 与 `\`，Windows 下同样有效。
+ */
+const excludeNodeModulesExceptHsuUi = modulePath => /node_modules/.test(modulePath) && !/@hsu-react[\\/]ui[\\/]/.test(modulePath);
+exports.excludeNodeModulesExceptHsuUi = excludeNodeModulesExceptHsuUi;
+var _default = exports.default = excludeNodeModulesExceptHsuUi;

package/lib/components/Chart/Bar/index.js

@@ -10,6 +10,8 @@ var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 var _autoScrollLegend = require("../_utils/autoScrollLegend");
 var _autoSmooth = require("../_utils/autoSmooth");
 var _cartesian = require("../_utils/cartesian");
+var _chartTheme = require("../_utils/chartTheme");
+var _useIsDark = _interopRequireDefault(require("../../../hooks/useIsDark"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -47,11 +49,15 @@ const ChartBar = props => {
   const prevXAxisKeyRef = (0, _react.useRef)(null);
   const legendScrollRef = (0, _react.useRef)(null);
   const normalizedScroll = (0, _react.useMemo)(() => (0, _cartesian.resolveScrollConfig)(scrollConfig), [scrollConfig]);
+  // echarts options are plain JS and cannot read the `--vita-*` variables, so the axis and
+  // legend colours have to be resolved against the active appearance here
+  const isDark = (0, _useIsDark.default)();
+  const chrome = (0, _react.useMemo)(() => (0, _chartTheme.resolveChartChrome)(isDark), [isDark]);
 
   // Cache the chart option with useMemo
   const chartOption = (0, _react.useMemo)(() => {
-    const def_xAxis = (0, _cartesian.createDefaultCategoryXAxis)(xAxisData);
-    const def_yAxis = (0, _cartesian.createDefaultValueYAxis)("bar");
+    const def_xAxis = (0, _cartesian.createDefaultCategoryXAxis)(xAxisData, chrome);
+    const def_yAxis = (0, _cartesian.createDefaultValueYAxis)("bar", chrome);
 
     // Process xAxis config
     const processedXAxis = Array.isArray(xAxis) ? xAxis?.map(item => ({
@@ -155,8 +161,7 @@ const ChartBar = props => {
           data: legendData,
           icon: "circle",
           textStyle: {
-            color: "#373D48",
-            fontSize: 16
+            color: chrome.text
           },
           itemWidth: 8,
           itemHeight: 8,
@@ -183,7 +188,7 @@ const ChartBar = props => {
       ...coreOption
     };
     return option;
-  }, [xAxisData, xAxis, yAxis, grid, chartTitle, dataZoom, normalizedScroll, insideDataZoom, sliderDataZoom, title, tooltip, legendData, legend, seriesData, series, enableLegendAutoScroll, coreOption]);
+  }, [xAxisData, xAxis, yAxis, grid, chartTitle, dataZoom, normalizedScroll, insideDataZoom, sliderDataZoom, title, tooltip, legendData, legend, seriesData, series, enableLegendAutoScroll, coreOption, chrome]);
 
   // Callback for handling chart resize
   const handleResize = (0, _react.useCallback)(() => {

package/lib/components/Chart/Heatmap/index.js

@@ -8,6 +8,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 var echarts = _interopRequireWildcard(require("echarts"));
 var _heatmap = require("../_utils/heatmap");
+var _chartTheme = require("../_utils/chartTheme");
+var _useIsDark = _interopRequireDefault(require("../../../hooks/useIsDark"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -36,6 +38,10 @@ const Heatmap = props => {
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   const resizeObserverRef = (0, _react.useRef)(null);
+  // echarts options are plain JS and cannot read the `--vita-*` variables, so the axis and legend
+  // colours have to be resolved against the active appearance here
+  const isDark = (0, _useIsDark.default)();
+  const chrome = (0, _react.useMemo)(() => (0, _chartTheme.resolveChartChrome)(isDark), [isDark]);
 
   // Process the data and generate the chart option
   const chartOption = (0, _react.useMemo)(() => {
@@ -76,7 +82,7 @@ const Heatmap = props => {
       left: "right",
       top: "center",
       textStyle: {
-        color: "#373D48"
+        color: chrome.text
       },
       inRange: {
         color: inRangeColor
@@ -84,7 +90,7 @@ const Heatmap = props => {
     };
 
     // Process xAxis config
-    const def_xAxis = (0, _heatmap.createDefaultHeatmapXAxis)(xAxisData);
+    const def_xAxis = (0, _heatmap.createDefaultHeatmapXAxis)(xAxisData, chrome);
     const processedXAxis = Array.isArray(xAxis) ? xAxis?.map(item => ({
       ...def_xAxis,
       data: item?.type === "value" ? undefined : xAxisData,
@@ -96,7 +102,7 @@ const Heatmap = props => {
     };
 
     // Process yAxis config
-    const def_yAxis = (0, _heatmap.createDefaultHeatmapYAxis)(yAxisData);
+    const def_yAxis = (0, _heatmap.createDefaultHeatmapYAxis)(yAxisData, chrome);
     const processedYAxis = Array.isArray(yAxis) ? yAxis?.map(item => ({
       ...def_yAxis,
       data: item?.type === "value" ? undefined : yAxisData,
@@ -172,7 +178,7 @@ const Heatmap = props => {
       ...coreOption
     };
     return option;
-  }, [data, inRangeColor, xAxisData, xAxis, yAxisData, yAxis, propVisualMap, grid, chartTitle, title, tooltip, series, coreOption, zeroColor]);
+  }, [data, inRangeColor, xAxisData, xAxis, yAxisData, yAxis, propVisualMap, grid, chartTitle, title, tooltip, series, coreOption, zeroColor, chrome]);
 
   // Callback for handling chart resize
   const handleResize = (0, _react.useCallback)(() => {

package/lib/components/Chart/Line/index.js

@@ -10,6 +10,8 @@ var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 var _autoScrollLegend = require("../_utils/autoScrollLegend");
 var _autoSmooth = require("../_utils/autoSmooth");
 var _cartesian = require("../_utils/cartesian");
+var _chartTheme = require("../_utils/chartTheme");
+var _useIsDark = _interopRequireDefault(require("../../../hooks/useIsDark"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -47,11 +49,15 @@ const ChartLine = props => {
   const prevXAxisKeyRef = (0, _react.useRef)(null);
   const legendScrollRef = (0, _react.useRef)(null);
   const normalizedScroll = (0, _react.useMemo)(() => (0, _cartesian.resolveScrollConfig)(scrollConfig), [scrollConfig]);
+  // echarts options are plain JS and cannot read the `--vita-*` variables, so the axis and
+  // legend colours have to be resolved against the active appearance here
+  const isDark = (0, _useIsDark.default)();
+  const chrome = (0, _react.useMemo)(() => (0, _chartTheme.resolveChartChrome)(isDark), [isDark]);
 
   // Cache the chart option with useMemo
   const chartOption = (0, _react.useMemo)(() => {
-    const def_xAxis = (0, _cartesian.createDefaultCategoryXAxis)(xAxisData);
-    const def_yAxis = (0, _cartesian.createDefaultValueYAxis)("line");
+    const def_xAxis = (0, _cartesian.createDefaultCategoryXAxis)(xAxisData, chrome);
+    const def_yAxis = (0, _cartesian.createDefaultValueYAxis)("line", chrome);
 
     // Process xAxis config
     const processedXAxis = Array.isArray(xAxis) ? xAxis?.map(item => ({
@@ -148,7 +154,7 @@ const ChartLine = props => {
           top: "5%",
           icon: "circle",
           textStyle: {
-            color: "#373D48"
+            color: chrome.text
           },
           itemWidth: 8,
           itemHeight: 8,
@@ -179,7 +185,7 @@ const ChartLine = props => {
       ...coreOption
     };
     return option;
-  }, [xAxisData, xAxis, yAxis, grid, chartTitle, dataZoom, normalizedScroll, insideDataZoom, sliderDataZoom, title, legendData, legend, tooltip, seriesData, series, enableLegendAutoScroll, coreOption]);
+  }, [xAxisData, xAxis, yAxis, grid, chartTitle, dataZoom, normalizedScroll, insideDataZoom, sliderDataZoom, title, legendData, legend, tooltip, seriesData, series, enableLegendAutoScroll, coreOption, chrome]);
 
   // Callback for handling chart resize
   const handleResize = (0, _react.useCallback)(() => {

package/lib/components/Chart/_utils/cartesian.d.ts

@@ -1,5 +1,6 @@
 import * as echarts from "echarts";
 import { ChartOptionType, SeriesDataType } from "..";
+import { ChartChrome } from "./chartTheme";
 export interface ChartScrollConfig {
     enabled?: boolean;
     autoScroll?: boolean;
@@ -29,8 +30,8 @@ export interface DataZoomIndexWindow {
  * percentages produced by native echarts interactions are rounded outward, so each boundary may include at most one extra item, without affecting the axis magnitude.
  */
 export declare const percentWindowToIndexWindow: (startPercent: number, endPercent: number, total: number) => DataZoomIndexWindow;
-export declare const createDefaultCategoryXAxis: (xAxisData?: Array<string>) => ChartOptionType;
-export declare const createDefaultValueYAxis: (mode?: "bar" | "line") => ChartOptionType;
+export declare const createDefaultCategoryXAxis: (xAxisData: Array<string> | undefined, chrome: ChartChrome) => ChartOptionType;
+export declare const createDefaultValueYAxis: (mode: "bar" | "line" | undefined, chrome: ChartChrome) => ChartOptionType;
 export declare const buildCartesianSeriesOptions: (mode: "bar" | "line", seriesData?: SeriesDataType, series?: echarts.SeriesOption | echarts.SeriesOption[]) => echarts.SeriesOption[];
 export declare const getSliderShow: (zoom?: echarts.DataZoomComponentOption | Record<string, unknown>) => boolean | undefined;
 export declare const resolveScrollConfig: (scrollConfig?: ChartScrollConfig) => NormalizedScrollConfig;

package/lib/components/Chart/_utils/cartesian.js

@@ -24,34 +24,32 @@ const percentWindowToIndexWindow = (startPercent, endPercent, total) => {
   };
 };
 exports.percentWindowToIndexWindow = percentWindowToIndexWindow;
-const createDefaultCategoryXAxis = xAxisData => ({
+const createDefaultCategoryXAxis = (xAxisData, chrome) => ({
   type: "category",
   boundaryGap: true,
   data: xAxisData,
   axisLabel: {
     interval: 0,
     hideOverlap: true,
-    textStyle: {
-      fontSize: 14,
-      color: "#373D48"
-    }
+    // echarts removed the `textStyle` nesting under `axisLabel` in v4: keeping it means both
+    // properties are silently dropped *and* a deprecation warning is logged on every render.
+    fontSize: chrome.fontSize,
+    color: chrome.axis
   },
   axisTick: {
     show: false
   }
 });
 exports.createDefaultCategoryXAxis = createDefaultCategoryXAxis;
-const createDefaultValueYAxis = (mode = "bar") => ({
+const createDefaultValueYAxis = (mode = "bar", chrome) => ({
   type: "value",
   axisLabel: {
-    textStyle: {
-      fontSize: 14,
-      color: "#373D48"
-    }
+    fontSize: chrome.fontSize,
+    color: chrome.axis
   },
   splitLine: mode === "line" ? {
     lineStyle: {
-      color: "#C9CED6",
+      color: chrome.splitLine,
       type: "dashed"
     }
   } : {

package/lib/components/Chart/_utils/chartTheme.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Colours for the chart *chrome* — axis ticks, split lines, legend labels.
+ *
+ * echarts options are plain JS, so they cannot read the `--vita-*` CSS variables the rest of the
+ * library styles itself with; the literal values have to be resolved here instead. These used to
+ * be hard-coded to a light-mode slate (`#373D48` / `#C9CED6`), which left every axis and legend
+ * nearly invisible once the page switched to the dark palette.
+ *
+ * The plotted data is deliberately *not* covered here: series colours come from echarts' own
+ * palette or from whatever the caller passes as `color`, and both read fine on either background.
+ */
+export interface ChartChrome {
+    /** Legend labels — a real label, so it sits on the foreground ramp */
+    text: string;
+    /** Axis tick labels — secondary information, one step down */
+    axis: string;
+    /** Split lines behind the plot area */
+    splitLine: string;
+    /** Base font size, same scale the rest of the library uses */
+    fontSize: number;
+}
+export declare const resolveChartChrome: (dark: boolean) => ChartChrome;

package/lib/components/Chart/_utils/chartTheme.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolveChartChrome = void 0;
+var _tokens = require("../../../styles/tokens");
+/**
+ * Colours for the chart *chrome* — axis ticks, split lines, legend labels.
+ *
+ * echarts options are plain JS, so they cannot read the `--vita-*` CSS variables the rest of the
+ * library styles itself with; the literal values have to be resolved here instead. These used to
+ * be hard-coded to a light-mode slate (`#373D48` / `#C9CED6`), which left every axis and legend
+ * nearly invisible once the page switched to the dark palette.
+ *
+ * The plotted data is deliberately *not* covered here: series colours come from echarts' own
+ * palette or from whatever the caller passes as `color`, and both read fine on either background.
+ */
+
+const resolveChartChrome = dark => {
+  const t = dark ? _tokens.darkTokens : _tokens.lightTokens;
+  return {
+    text: t.foreground,
+    axis: t.mutedForeground,
+    splitLine: t.border,
+    fontSize: _tokens.fontTokens.size
+  };
+};
+exports.resolveChartChrome = resolveChartChrome;

package/lib/components/Chart/_utils/heatmap.d.ts

@@ -1,3 +1,4 @@
 import { ChartOptionType } from "..";
-export declare const createDefaultHeatmapXAxis: (xAxisData?: string[]) => ChartOptionType;
-export declare const createDefaultHeatmapYAxis: (yAxisData?: string[]) => ChartOptionType;
+import { ChartChrome } from "./chartTheme";
+export declare const createDefaultHeatmapXAxis: (xAxisData: string[] | undefined, chrome: ChartChrome) => ChartOptionType;
+export declare const createDefaultHeatmapYAxis: (yAxisData: string[] | undefined, chrome: ChartChrome) => ChartOptionType;

package/lib/components/Chart/_utils/heatmap.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createDefaultHeatmapYAxis = exports.createDefaultHeatmapXAxis = void 0;
-const createDefaultHeatmapXAxis = xAxisData => ({
+const createDefaultHeatmapXAxis = (xAxisData, chrome) => ({
   type: "category",
   data: xAxisData,
   splitArea: {
@@ -13,27 +13,24 @@ const createDefaultHeatmapXAxis = xAxisData => ({
   axisLabel: {
     interval: 0,
     hideOverlap: true,
-    textStyle: {
-      fontSize: 14,
-      color: "#373D48"
-    }
+    // See the note in `cartesian.ts`: `axisLabel.textStyle` has been deprecated since echarts 4
+    fontSize: chrome.fontSize,
+    color: chrome.axis
   },
   axisTick: {
     show: false
   }
 });
 exports.createDefaultHeatmapXAxis = createDefaultHeatmapXAxis;
-const createDefaultHeatmapYAxis = yAxisData => ({
+const createDefaultHeatmapYAxis = (yAxisData, chrome) => ({
   type: "category",
   data: yAxisData,
   splitArea: {
     show: true
   },
   axisLabel: {
-    textStyle: {
-      fontSize: 14,
-      color: "#373D48"
-    }
+    fontSize: chrome.fontSize,
+    color: chrome.axis
   },
   axisTick: {
     show: false

package/lib/components/Panel/ListPanel/ListModalPanel/index.module.scss

@@ -21,8 +21,18 @@
 
   height: 100%;
 
+  // Inside a modal the Search must not keep its card chrome. On a page it is an outlined white
+  // card standing on the grey page background; in a modal the body is already `--vita-surface`,
+  // so the same treatment paints a white card on white and only the border survives — a stray
+  // outline around the search row. The padding was already being cleared here; the background and
+  // border are the other half of the same intent, and `.tableContainer` below is flush for
+  // exactly this reason.
   .search {
     padding: 0px;
+
+    background: transparent;
+
+    border: none;
   }
 
   .tableContainer {

package/lib/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",
@@ -41,8 +41,8 @@
     "dev": "dumi dev",
     "docs:build": "dumi build",
     "docs:preview": "dumi preview",
-    "build": "node scripts/clean-dist.cjs && node scripts/gen-tokens-scss.cjs && father build && node scripts/check-heavy-deps.cjs",
-    "prepublishOnly": "node scripts/clean-dist.cjs && node scripts/gen-tokens-scss.cjs --check && father build && node scripts/check-heavy-deps.cjs",
+    "build": "node scripts/clean-dist.cjs && node scripts/gen-tokens-scss.cjs && father build && node scripts/mark-cjs.cjs && node scripts/check-heavy-deps.cjs",
+    "prepublishOnly": "node scripts/clean-dist.cjs && node scripts/gen-tokens-scss.cjs --check && father build && node scripts/mark-cjs.cjs && node scripts/check-heavy-deps.cjs",
     "check:deps": "node scripts/check-heavy-deps.cjs",
     "tokens": "node scripts/gen-tokens-scss.cjs",
     "check:tokens": "node scripts/gen-tokens-scss.cjs --check"

package/src/build/webpack.ts

@@ -0,0 +1,44 @@
+/**
+ * 给消费方 webpack 配置用的工具。**构建期模块，不要从应用代码里引**
+ * —— 它不依赖 React，也不该进运行时产物。
+ *
+ * ```js
+ * // webpack.config.js（CJS）
+ * const { excludeNodeModulesExceptHsuUi } = require("@hsu-react/ui/lib/build/webpack");
+ *
+ * { test: /\.scss$/, exclude: excludeNodeModulesExceptHsuUi, use: [...] }
+ * ```
+ */
+
+/**
+ * 判断一个模块路径「是否该被 loader 排除」：node_modules 一律排除，但放行本库。
+ *
+ * ## 为什么需要它
+ *
+ * 本库的 es / lib 产物里带着**未编译的 `.module.scss`** 和图片资源，要由消费方自己的
+ * loader 处理（这样 CSS Module 的类名哈希、`getLocalIdent` 等策略才由消费方说了算）。
+ * 于是每个 webpack 项目都得在 scss / 图片规则上开一个「排除 node_modules，但放行
+ * @hsu-react/ui」的例外。
+ *
+ * ## 为什么不能用正则
+ *
+ * 手写的版本几乎都是 `/node_modules\/(?!@hsu-react\/ui\/)/`。它只看**第一个**
+ * node_modules 后面跟着什么——扁平安装（yarn / npm）下确实是 `@hsu-react/ui/`，
+ * 但 pnpm 的真实路径是
+ *
+ * ```
+ * node_modules/.pnpm/@hsu-react+ui@<版本>/node_modules/@hsu-react/ui/es/...
+ * ```
+ *
+ * 跟着的是 `.pnpm/`，否定前瞻立刻失败，本库的 scss 与图片会被**全部排除**，
+ * 报「no loaders are configured to process this file」。这个坑在四个下游项目里
+ * 各踩过一次，所以把判定收进库里导出，消费方引用而不是各抄一份。
+ *
+ * 改按「整条路径里有没有 @hsu-react/ui」判断，扁平与嵌套两种布局都成立；
+ * 路径分隔符同时接受 `/` 与 `\`，Windows 下同样有效。
+ */
+export const excludeNodeModulesExceptHsuUi = (modulePath: string): boolean =>
+  /node_modules/.test(modulePath) &&
+  !/@hsu-react[\\/]ui[\\/]/.test(modulePath);
+
+export default excludeNodeModulesExceptHsuUi;

package/src/components/Chart/Bar/index.tsx

@@ -21,6 +21,8 @@ import {
   percentWindowToIndexWindow,
   resolveScrollConfig,
 } from "../_utils/cartesian";
+import { resolveChartChrome } from "../_utils/chartTheme";
+import useIsDark from "../../../hooks/useIsDark";
 
 export interface ChartBarProps extends ChartCommonProps {
   chartTitle?: string;
@@ -79,11 +81,15 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     () => resolveScrollConfig(scrollConfig),
     [scrollConfig],
   );
+  // echarts options are plain JS and cannot read the `--vita-*` variables, so the axis and
+  // legend colours have to be resolved against the active appearance here
+  const isDark = useIsDark();
+  const chrome = useMemo(() => resolveChartChrome(isDark), [isDark]);
 
   // Cache the chart option with useMemo
   const chartOption = useMemo(() => {
-    const def_xAxis = createDefaultCategoryXAxis(xAxisData);
-    const def_yAxis = createDefaultValueYAxis("bar");
+    const def_xAxis = createDefaultCategoryXAxis(xAxisData, chrome);
+    const def_yAxis = createDefaultValueYAxis("bar", chrome);
 
     // Process xAxis config
     const processedXAxis = Array.isArray(xAxis)
@@ -212,8 +218,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
           data: legendData,
           icon: "circle",
           textStyle: {
-            color: "#373D48",
-            fontSize: 16,
+            color: chrome.text,
           },
           itemWidth: 8,
           itemHeight: 8,
@@ -259,6 +264,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     series,
     enableLegendAutoScroll,
     coreOption,
+    chrome,
   ]);
 
   // Callback for handling chart resize

package/src/components/Chart/Heatmap/index.tsx

@@ -6,6 +6,8 @@ import {
   createDefaultHeatmapXAxis,
   createDefaultHeatmapYAxis,
 } from "../_utils/heatmap";
+import { resolveChartChrome } from "../_utils/chartTheme";
+import useIsDark from "../../../hooks/useIsDark";
 
 export interface HeatmapDataItem {
   /** X-axis index or name */
@@ -73,6 +75,10 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
+  // echarts options are plain JS and cannot read the `--vita-*` variables, so the axis and legend
+  // colours have to be resolved against the active appearance here
+  const isDark = useIsDark();
+  const chrome = useMemo(() => resolveChartChrome(isDark), [isDark]);
 
   // Process the data and generate the chart option
   const chartOption = useMemo(() => {
@@ -120,7 +126,7 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
       left: "right",
       top: "center",
       textStyle: {
-        color: "#373D48",
+        color: chrome.text,
       },
       inRange: {
         color: inRangeColor,
@@ -128,7 +134,7 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
     };
 
     // Process xAxis config
-    const def_xAxis = createDefaultHeatmapXAxis(xAxisData);
+    const def_xAxis = createDefaultHeatmapXAxis(xAxisData, chrome);
     const processedXAxis = Array.isArray(xAxis)
       ? xAxis?.map((item) => ({
           ...def_xAxis,
@@ -142,7 +148,7 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
         };
 
     // Process yAxis config
-    const def_yAxis = createDefaultHeatmapYAxis(yAxisData);
+    const def_yAxis = createDefaultHeatmapYAxis(yAxisData, chrome);
     const processedYAxis = Array.isArray(yAxis)
       ? yAxis?.map((item) => ({
           ...def_yAxis,
@@ -244,6 +250,7 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
     series,
     coreOption,
     zeroColor,
+    chrome,
   ]);
 
   // Callback for handling chart resize

package/src/components/Chart/Line/index.tsx

@@ -21,6 +21,8 @@ import {
   percentWindowToIndexWindow,
   resolveScrollConfig,
 } from "../_utils/cartesian";
+import { resolveChartChrome } from "../_utils/chartTheme";
+import useIsDark from "../../../hooks/useIsDark";
 
 export interface ChartLineProps extends ChartCommonProps {
   chartTitle?: string;
@@ -80,11 +82,15 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     () => resolveScrollConfig(scrollConfig),
     [scrollConfig],
   );
+  // echarts options are plain JS and cannot read the `--vita-*` variables, so the axis and
+  // legend colours have to be resolved against the active appearance here
+  const isDark = useIsDark();
+  const chrome = useMemo(() => resolveChartChrome(isDark), [isDark]);
 
   // Cache the chart option with useMemo
   const chartOption = useMemo(() => {
-    const def_xAxis = createDefaultCategoryXAxis(xAxisData);
-    const def_yAxis = createDefaultValueYAxis("line");
+    const def_xAxis = createDefaultCategoryXAxis(xAxisData, chrome);
+    const def_yAxis = createDefaultValueYAxis("line", chrome);
 
     // Process xAxis config
     const processedXAxis = Array.isArray(xAxis)
@@ -206,7 +212,7 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
           top: "5%",
           icon: "circle",
           textStyle: {
-            color: "#373D48",
+            color: chrome.text,
           },
           itemWidth: 8,
           itemHeight: 8,
@@ -256,6 +262,7 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     series,
     enableLegendAutoScroll,
     coreOption,
+    chrome,
   ]);
 
   // Callback for handling chart resize

package/src/components/Chart/_utils/cartesian.ts

@@ -1,5 +1,6 @@
 import * as echarts from "echarts";
 import { ChartOptionType, SeriesData, SeriesDataType } from "..";
+import { ChartChrome } from "./chartTheme";
 
 export interface ChartScrollConfig {
   enabled?: boolean;
@@ -50,7 +51,8 @@ export const percentWindowToIndexWindow = (
 };
 
 export const createDefaultCategoryXAxis = (
-  xAxisData?: Array<string>,
+  xAxisData: Array<string> | undefined,
+  chrome: ChartChrome,
 ): ChartOptionType => ({
   type: "category",
   boundaryGap: true,
@@ -58,10 +60,10 @@ export const createDefaultCategoryXAxis = (
   axisLabel: {
     interval: 0,
     hideOverlap: true,
-    textStyle: {
-      fontSize: 14,
-      color: "#373D48",
-    },
+    // echarts removed the `textStyle` nesting under `axisLabel` in v4: keeping it means both
+    // properties are silently dropped *and* a deprecation warning is logged on every render.
+    fontSize: chrome.fontSize,
+    color: chrome.axis,
   },
   axisTick: {
     show: false,
@@ -70,19 +72,18 @@ export const createDefaultCategoryXAxis = (
 
 export const createDefaultValueYAxis = (
   mode: "bar" | "line" = "bar",
+  chrome: ChartChrome,
 ): ChartOptionType => ({
   type: "value",
   axisLabel: {
-    textStyle: {
-      fontSize: 14,
-      color: "#373D48",
-    },
+    fontSize: chrome.fontSize,
+    color: chrome.axis,
   },
   splitLine:
     mode === "line"
       ? {
           lineStyle: {
-            color: "#C9CED6",
+            color: chrome.splitLine,
             type: "dashed",
           },
         }

package/src/components/Chart/_utils/chartTheme.ts

@@ -0,0 +1,34 @@
+import { darkTokens, fontTokens, lightTokens } from "../../../styles/tokens";
+
+/**
+ * Colours for the chart *chrome* — axis ticks, split lines, legend labels.
+ *
+ * echarts options are plain JS, so they cannot read the `--vita-*` CSS variables the rest of the
+ * library styles itself with; the literal values have to be resolved here instead. These used to
+ * be hard-coded to a light-mode slate (`#373D48` / `#C9CED6`), which left every axis and legend
+ * nearly invisible once the page switched to the dark palette.
+ *
+ * The plotted data is deliberately *not* covered here: series colours come from echarts' own
+ * palette or from whatever the caller passes as `color`, and both read fine on either background.
+ */
+export interface ChartChrome {
+  /** Legend labels — a real label, so it sits on the foreground ramp */
+  text: string;
+  /** Axis tick labels — secondary information, one step down */
+  axis: string;
+  /** Split lines behind the plot area */
+  splitLine: string;
+  /** Base font size, same scale the rest of the library uses */
+  fontSize: number;
+}
+
+export const resolveChartChrome = (dark: boolean): ChartChrome => {
+  const t = dark ? darkTokens : lightTokens;
+
+  return {
+    text: t.foreground,
+    axis: t.mutedForeground,
+    splitLine: t.border,
+    fontSize: fontTokens.size,
+  };
+};

package/src/components/Chart/_utils/heatmap.ts

@@ -1,7 +1,9 @@
 import { ChartOptionType } from "..";
+import { ChartChrome } from "./chartTheme";
 
 export const createDefaultHeatmapXAxis = (
-  xAxisData?: string[],
+  xAxisData: string[] | undefined,
+  chrome: ChartChrome,
 ): ChartOptionType => ({
   type: "category",
   data: xAxisData,
@@ -11,10 +13,9 @@ export const createDefaultHeatmapXAxis = (
   axisLabel: {
     interval: 0,
     hideOverlap: true,
-    textStyle: {
-      fontSize: 14,
-      color: "#373D48",
-    },
+    // See the note in `cartesian.ts`: `axisLabel.textStyle` has been deprecated since echarts 4
+    fontSize: chrome.fontSize,
+    color: chrome.axis,
   },
   axisTick: {
     show: false,
@@ -22,7 +23,8 @@ export const createDefaultHeatmapXAxis = (
 });
 
 export const createDefaultHeatmapYAxis = (
-  yAxisData?: string[],
+  yAxisData: string[] | undefined,
+  chrome: ChartChrome,
 ): ChartOptionType => ({
   type: "category",
   data: yAxisData,
@@ -30,10 +32,8 @@ export const createDefaultHeatmapYAxis = (
     show: true,
   },
   axisLabel: {
-    textStyle: {
-      fontSize: 14,
-      color: "#373D48",
-    },
+    fontSize: chrome.fontSize,
+    color: chrome.axis,
   },
   axisTick: {
     show: false,

package/src/components/Panel/ListPanel/ListModalPanel/index.module.scss

@@ -21,8 +21,18 @@
 
   height: 100%;
 
+  // Inside a modal the Search must not keep its card chrome. On a page it is an outlined white
+  // card standing on the grey page background; in a modal the body is already `--vita-surface`,
+  // so the same treatment paints a white card on white and only the border survives — a stray
+  // outline around the search row. The padding was already being cleared here; the background and
+  // border are the other half of the same intent, and `.tableContainer` below is flush for
+  // exactly this reason.
   .search {
     padding: 0px;
+
+    background: transparent;
+
+    border: none;
   }
 
   .tableContainer {