@hsu-react/ui 2.4.0 → 2.4.1

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

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 {