From 4c9428b7a63c8faa40ced590c1b95f26926bc84d Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Wed, 26 Mar 2025 19:05:57 +0800
Subject: [PATCH 01/27] feat: new theme color

---
 src/model/globalDefault.ts | 13 ++-----------
 src/visual/tokens.ts       | 15 +++++++++++++++
 2 files changed, 17 insertions(+), 11 deletions(-)
 create mode 100644 src/visual/tokens.ts

diff --git a/src/model/globalDefault.ts b/src/model/globalDefault.ts
index 304a550121..a0445e11a7 100644
--- a/src/model/globalDefault.ts
+++ b/src/model/globalDefault.ts
@@ -17,6 +17,7 @@
 * under the License.
 */
 
+import tokens from '../visual/tokens';
 
 let platform = '';
 // Navigator not exists in node
@@ -34,17 +35,7 @@ export default {
 
     colorBy: 'series',
 
-    color: [
-        '#5470c6',
-        '#91cc75',
-        '#fac858',
-        '#ee6666',
-        '#73c0de',
-        '#3ba272',
-        '#fc8452',
-        '#9a60b4',
-        '#ea7ccc'
-    ],
+    color: tokens.color.theme,
 
     gradientColor: ['#f6efa6', '#d88273', '#bf444c'],
 
diff --git a/src/visual/tokens.ts b/src/visual/tokens.ts
new file mode 100644
index 0000000000..8fd531497e
--- /dev/null
+++ b/src/visual/tokens.ts
@@ -0,0 +1,15 @@
+export default {
+    color: {
+        theme: [
+            '#597bff',
+            '#b1da1f',
+            '#505372',
+            '#ff994d',
+            '#44d4cf',
+            '#fec43e',
+            '#6b5cda',
+            '#eb6a81',
+            '#52d098'
+        ]
+    }
+};

From 1b19b82311341c74125a6463b16cc1bbe33103ab Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Thu, 27 Mar 2025 19:35:47 +0800
Subject: [PATCH 02/27] design: gray tokens

---
 src/component/title/install.ts |  5 +--
 src/visual/tokens.ts           | 57 ++++++++++++++++++++++++++++------
 2 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/src/component/title/install.ts b/src/component/title/install.ts
index 54fbb0e6eb..41e9c73170 100644
--- a/src/component/title/install.ts
+++ b/src/component/title/install.ts
@@ -37,6 +37,7 @@ import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../core/ExtensionAPI';
 import {windowOpen} from '../../util/format';
 import { EChartsExtensionInstallRegisters } from '../../extension';
+import tokens from '../../visual/tokens';
 
 
 export interface TitleOption extends ComponentOption, BoxLayoutOptionMixin, BorderOptionMixin {
@@ -121,11 +122,11 @@ class TitleModel extends ComponentModel<TitleOption> {
         textStyle: {
             fontSize: 18,
             fontWeight: 'bold',
-            color: '#464646'
+            color: tokens.color.foreground.primary
         },
         subtextStyle: {
             fontSize: 12,
-            color: '#6E7079'
+            color: tokens.color.foreground.quaternary
         }
     };
 }
diff --git a/src/visual/tokens.ts b/src/visual/tokens.ts
index 8fd531497e..d42dcfc5a6 100644
--- a/src/visual/tokens.ts
+++ b/src/visual/tokens.ts
@@ -1,15 +1,54 @@
-export default {
+const tokens = {
     color: {
         theme: [
-            '#597bff',
-            '#b1da1f',
+            '#5978e3',
+            '#b6d634',
             '#505372',
             '#ff994d',
-            '#44d4cf',
-            '#fec43e',
-            '#6b5cda',
-            '#eb6a81',
-            '#52d098'
-        ]
+            '#52d098',
+            '#ffd82c',
+            '#e76991',
+            '#6854aa',
+            '#52c4d0'
+        ],
+
+        neutral00: '#fff',
+        neutral05: '#eaedf5',
+        neutral10: '#dee1e9',
+        neutral15: '#d3d5dd',
+        neutral20: '#c7c9d1',
+        neutral25: '#bbbdc5',
+        neutral30: '#afb2b8',
+        neutral35: '#a4a6ac',
+        neutral40: '#989aa0',
+        neutral45: '#8c8e94',
+        neutral50: '#818288',
+        neutral55: '#75767c',
+        neutral60: '#696a70',
+        neutral65: '#5d5e64',
+        neutral70: '#525258',
+        neutral75: '#46474b',
+        neutral80: '#3a3b3f',
+        neutral85: '#2e2f33',
+        neutral90: '#232327',
+        neutral95: '#232327',
+        neutral100: '#000',
+
+        // Dynamic colors
+        foreground: {
+            primary: '',
+            secondary: '',
+            tertiary: '',
+            quaternary: ''
+        }
     }
 };
+
+tokens.color.foreground = {
+    primary: tokens.color.neutral80,
+    secondary: tokens.color.neutral70,
+    tertiary: tokens.color.neutral60,
+    quaternary: tokens.color.neutral50
+};
+
+export default tokens;

From 6fdd2bee847a963241b2848848743a4015bccb3e Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Fri, 28 Mar 2025 17:19:30 +0800
Subject: [PATCH 03/27] design: colors using tokens

---
 src/chart/bar/BarSeries.ts                    |  3 +-
 src/chart/bar/PictorialBarSeries.ts           |  3 +-
 src/chart/boxplot/BoxplotSeries.ts            |  5 +-
 src/chart/custom/CustomView.ts                |  3 +-
 src/chart/funnel/FunnelSeries.ts              |  5 +-
 src/chart/gauge/GaugeSeries.ts                | 21 +++---
 src/chart/graph/GraphSeries.ts                |  6 +-
 src/chart/graph/Thumbnail.ts                  | 11 ++--
 src/chart/heatmap/HeatmapLayer.ts             |  3 +-
 src/chart/heatmap/HeatmapSeries.ts            |  3 +-
 src/chart/helper/LargeLineDraw.ts             |  3 +-
 src/chart/helper/Line.ts                      |  3 +-
 src/chart/helper/LinePath.ts                  |  3 +-
 src/chart/line/LineSeries.ts                  |  3 +-
 src/chart/line/poly.ts                        |  3 +-
 src/chart/map/MapSeries.ts                    | 17 ++---
 src/chart/sankey/SankeySeries.ts              |  5 +-
 src/chart/scatter/ScatterSeries.ts            |  3 +-
 src/chart/tree/TreeSeries.ts                  |  5 +-
 src/chart/tree/TreeView.ts                    |  5 +-
 src/chart/treemap/TreemapSeries.ts            | 11 ++--
 src/component/axisPointer/AxisPointerModel.ts | 13 ++--
 src/component/brush/BrushModel.ts             |  7 +-
 src/component/dataZoom/SliderZoomModel.ts     | 31 ++++-----
 src/component/dataZoom/SliderZoomView.ts      |  3 +-
 src/component/legend/LegendModel.ts           |  3 +-
 src/component/timeline/SliderTimelineModel.ts |  3 +-
 src/component/title/install.ts                |  6 +-
 src/component/visualMap/ContinuousModel.ts    |  5 +-
 src/component/visualMap/VisualMapModel.ts     |  3 +-
 src/coord/cartesian/GridModel.ts              |  3 +-
 src/visual/tokens.ts                          | 64 +++++++++++++------
 src/visual/visualDefault.ts                   |  3 +-
 33 files changed, 162 insertions(+), 106 deletions(-)

diff --git a/src/chart/bar/BarSeries.ts b/src/chart/bar/BarSeries.ts
index 2be64628a4..123e854b49 100644
--- a/src/chart/bar/BarSeries.ts
+++ b/src/chart/bar/BarSeries.ts
@@ -36,6 +36,7 @@ import type Polar from '../../coord/polar/Polar';
 import { inheritDefaultOption } from '../../util/component';
 import SeriesData from '../../data/SeriesData';
 import { BrushCommonSelectorsForSeries } from '../../component/brush/selector';
+import tokens from '../../visual/tokens';
 
 export type PolarBarLabelPosition = SeriesLabelOption['position']
     | 'start' | 'insideStart' | 'middle' | 'end' | 'insideEnd';
@@ -157,7 +158,7 @@ class BarSeriesModel extends BaseBarSeriesModel<BarSeriesOption> {
 
         select: {
             itemStyle: {
-                borderColor: '#212121'
+                borderColor: tokens.color.primary
             }
         },
 
diff --git a/src/chart/bar/PictorialBarSeries.ts b/src/chart/bar/PictorialBarSeries.ts
index 95fbdd230f..37ba25a99c 100644
--- a/src/chart/bar/PictorialBarSeries.ts
+++ b/src/chart/bar/PictorialBarSeries.ts
@@ -31,6 +31,7 @@ import {
 } from '../../util/types';
 import type Cartesian2D from '../../coord/cartesian/Cartesian2D';
 import { inheritDefaultOption } from '../../util/component';
+import tokens from '../../visual/tokens';
 
 export interface PictorialBarStateOption {
     itemStyle?: ItemStyleOption
@@ -169,7 +170,7 @@ class PictorialBarSeriesModel extends BaseBarSeriesModel<PictorialBarSeriesOptio
 
         select: {
             itemStyle: {
-                borderColor: '#212121'
+                borderColor: tokens.color.primary
             }
         }
     });
diff --git a/src/chart/boxplot/BoxplotSeries.ts b/src/chart/boxplot/BoxplotSeries.ts
index 69c7c1c20b..7fba2a79fb 100644
--- a/src/chart/boxplot/BoxplotSeries.ts
+++ b/src/chart/boxplot/BoxplotSeries.ts
@@ -34,6 +34,7 @@ import {
 import type Axis2D from '../../coord/cartesian/Axis2D';
 import Cartesian2D from '../../coord/cartesian/Cartesian2D';
 import { mixin } from 'zrender/src/core/util';
+import tokens from '../../visual/tokens';
 
 // [min,  Q1,  median (or Q2),  Q3,  max]
 type BoxplotDataValue = OptionDataValueNumeric[];
@@ -111,7 +112,7 @@ class BoxplotSeriesModel extends SeriesModel<BoxplotSeriesOption> {
         boxWidth: [7, 50],
 
         itemStyle: {
-            color: '#fff',
+            color: tokens.color.neutral00,
             borderWidth: 1
         },
 
@@ -123,7 +124,7 @@ class BoxplotSeriesModel extends SeriesModel<BoxplotSeriesOption> {
                 shadowBlur: 5,
                 shadowOffsetX: 1,
                 shadowOffsetY: 1,
-                shadowColor: 'rgba(0,0,0,0.2)'
+                shadowColor: tokens.color.shadow
             }
         },
 
diff --git a/src/chart/custom/CustomView.ts b/src/chart/custom/CustomView.ts
index c0950845b4..dbdd8f069b 100644
--- a/src/chart/custom/CustomView.ts
+++ b/src/chart/custom/CustomView.ts
@@ -103,6 +103,7 @@ import {
 } from '../../animation/customGraphicKeyframeAnimation';
 import type SeriesModel from '../../model/Series';
 import { getCustomSeries } from './customSeriesRegister';
+import tokens from '../../visual/tokens';
 
 const EMPHASIS = 'emphasis' as const;
 const NORMAL = 'normal' as const;
@@ -809,7 +810,7 @@ function makeRenderItem(
         visualColor != null && (itemStyle.fill = visualColor);
         opacity != null && (itemStyle.opacity = opacity);
 
-        const opt = {inheritColor: isString(visualColor) ? visualColor : '#000'};
+        const opt = {inheritColor: isString(visualColor) ? visualColor : tokens.color.neutral99};
         const labelModel = getLabelModel(dataIndexInside, NORMAL);
         // Now that the feature of "auto adjust text fill/stroke" has been migrated to zrender
         // since ec5, we should set `isAttached` as `false` here and make compat in
diff --git a/src/chart/funnel/FunnelSeries.ts b/src/chart/funnel/FunnelSeries.ts
index 152cdb37da..123c9f551e 100644
--- a/src/chart/funnel/FunnelSeries.ts
+++ b/src/chart/funnel/FunnelSeries.ts
@@ -42,6 +42,7 @@ import {
 } from '../../util/types';
 import GlobalModel from '../../model/Global';
 import SeriesData from '../../data/SeriesData';
+import tokens from '../../visual/tokens';
 
 type FunnelLabelOption = Omit<SeriesLabelOption, 'position'> & {
     position?: LabelOption['position']
@@ -182,7 +183,7 @@ class FunnelSeriesModel extends SeriesModel<FunnelSeriesOption> {
         },
         itemStyle: {
             // color: 各异,
-            borderColor: '#fff',
+            borderColor: tokens.color.neutral00,
             borderWidth: 1
         },
         emphasis: {
@@ -192,7 +193,7 @@ class FunnelSeriesModel extends SeriesModel<FunnelSeriesOption> {
         },
         select: {
             itemStyle: {
-                borderColor: '#212121'
+                borderColor: tokens.color.primary
             }
         }
     };
diff --git a/src/chart/gauge/GaugeSeries.ts b/src/chart/gauge/GaugeSeries.ts
index 7ffb508376..f34b48aea4 100644
--- a/src/chart/gauge/GaugeSeries.ts
+++ b/src/chart/gauge/GaugeSeries.ts
@@ -34,6 +34,7 @@ import {
 } from '../../util/types';
 import GlobalModel from '../../model/Global';
 import SeriesData from '../../data/SeriesData';
+import tokens from '../../visual/tokens';
 
 // [percent, color]
 type GaugeColorStop = [number, ColorString];
@@ -218,7 +219,7 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
             show: true,
             roundCap: false,
             lineStyle: {       // 属性lineStyle控制线条样式
-                color: [[1, '#E6EBF8']],
+                color: [[1, tokens.color.neutral05]],
                 width: 10
             }
         },
@@ -240,7 +241,7 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
             distance: 10,
             // 属性lineStyle（详见lineStyle）控制线条样式
             lineStyle: {
-                color: '#63677A',
+                color: tokens.color.axisTick,
                 width: 3,
                 type: 'solid'
             }
@@ -256,7 +257,7 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
             distance: 10,
             // 属性lineStyle控制线条样式
             lineStyle: {
-                color: '#63677A',
+                color: tokens.color.axisTickMinor,
                 width: 1,
                 type: 'solid'
             }
@@ -265,7 +266,7 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
             show: true,
             distance: 15,
             // formatter: null,
-            color: '#464646',
+            color: tokens.color.axisLabel,
             fontSize: 12,
             rotate: 0
         },
@@ -286,9 +287,9 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
             offsetCenter: [0, 0],
             keepAspect: false,
             itemStyle: {
-                color: '#fff',
+                color: tokens.color.neutral00,
                 borderWidth: 0,
-                borderColor: '#5470c6'
+                borderColor: tokens.color.theme[0]
             }
         },
 
@@ -297,15 +298,15 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
             // x, y，单位px
             offsetCenter: [0, '20%'],
             // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-            color: '#464646',
+            color: tokens.color.secondary,
             fontSize: 16,
             valueAnimation: false
         },
         detail: {
             show: true,
-            backgroundColor: 'rgba(0,0,0,0)',
+            backgroundColor: tokens.color.transparent,
             borderWidth: 0,
-            borderColor: '#ccc',
+            borderColor: tokens.color.border,
             width: 100,
             height: null, // self-adaption
             padding: [5, 10],
@@ -313,7 +314,7 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
             offsetCenter: [0, '40%'],
             // formatter: null,
             // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-            color: '#464646',
+            color: tokens.color.primary,
             fontSize: 30,
             fontWeight: 'bold',
             lineHeight: 30,
diff --git a/src/chart/graph/GraphSeries.ts b/src/chart/graph/GraphSeries.ts
index 9f8fc7c3a2..1c3c8fe628 100644
--- a/src/chart/graph/GraphSeries.ts
+++ b/src/chart/graph/GraphSeries.ts
@@ -55,6 +55,7 @@ import { createTooltipMarkup } from '../../component/tooltip/tooltipMarkup';
 import { defaultSeriesFormatTooltip } from '../../component/tooltip/seriesFormatTooltip';
 import {initCurvenessList, createEdgeMapForCurveness} from '../helper/multipleGraphEdgeHelper';
 import Thumbnail, { ThumbnailOption } from './Thumbnail';
+import tokens from '../../visual/tokens';
 
 
 type GraphDataValue = OptionDataValue | OptionDataValue[];
@@ -496,7 +497,8 @@ class GraphSeriesModel extends SeriesModel<GraphSeriesOption> {
         itemStyle: {},
 
         lineStyle: {
-            color: '#aaa',
+            // Don't use tokens.color.border because of the opacity
+            color: tokens.color.neutral50,
             width: 1,
             opacity: 0.5
         },
@@ -509,7 +511,7 @@ class GraphSeriesModel extends SeriesModel<GraphSeriesOption> {
 
         select: {
             itemStyle: {
-                borderColor: '#212121'
+                borderColor: tokens.color.primary
             }
         },
 
diff --git a/src/chart/graph/Thumbnail.ts b/src/chart/graph/Thumbnail.ts
index f478584377..02c04a1b2f 100644
--- a/src/chart/graph/Thumbnail.ts
+++ b/src/chart/graph/Thumbnail.ts
@@ -11,6 +11,7 @@ import SeriesModel from '../../model/Series';
 import { BoxLayoutOptionMixin, ItemStyleOption } from '../../util/types';
 import RoamController, { RoamEventDefinition, RoamType } from '../../component/helper/RoamController';
 import Eventful from 'zrender/src/core/Eventful';
+import tokens from '../../visual/tokens';
 
 
 // TODO:
@@ -82,7 +83,7 @@ class Thumbnail extends Eventful<Pick<RoamEventDefinition, 'zoom' | 'pan'>> {
         const cursor = opt.roamType ? 'pointer' : 'default';
         const itemStyleModel = thumbnailModel.getModel('itemStyle');
         const itemStyle = itemStyleModel.getItemStyle();
-        itemStyle.fill = seriesModel.ecModel.get('backgroundColor') || '#fff';
+        itemStyle.fill = seriesModel.ecModel.get('backgroundColor') || tokens.color.neutral00;
 
         // Try to use border-box in thumbnail, see https://github.com/apache/echarts/issues/18022
         const boxBorderWidth = itemStyle.lineWidth || 0;
@@ -250,14 +251,14 @@ class Thumbnail extends Eventful<Pick<RoamEventDefinition, 'zoom' | 'pan'>> {
 
         itemStyle: {
             // Use echarts option.backgorundColor by default.
-            borderColor: '#555',
-            borderWidth: 2
+            borderColor: tokens.color.border,
+            borderWidth: 1
         },
 
         windowStyle: {
             borderWidth: 1,
-            color: 'green',
-            borderColor: '#000',
+            color: tokens.color.neutral30,
+            borderColor: tokens.color.neutral40,
             opacity: 0.3
         }
     };
diff --git a/src/chart/heatmap/HeatmapLayer.ts b/src/chart/heatmap/HeatmapLayer.ts
index b5506d1e39..ca224f1b19 100644
--- a/src/chart/heatmap/HeatmapLayer.ts
+++ b/src/chart/heatmap/HeatmapLayer.ts
@@ -20,6 +20,7 @@
 /* global Uint8ClampedArray */
 
 import { platformApi } from 'zrender/src/core/platform';
+import tokens from '../../visual/tokens';
 
 const GRADIENT_LEVELS = 256;
 
@@ -144,7 +145,7 @@ class HeatmapLayer {
         ctx.shadowBlur = this.blurSize;
         // draw the shadow in black, and use alpha and shadow blur to generate
         // color in color map
-        ctx.shadowColor = '#000';
+        ctx.shadowColor = tokens.color.neutral99;
 
         // draw circle in the left to the canvas
         ctx.beginPath();
diff --git a/src/chart/heatmap/HeatmapSeries.ts b/src/chart/heatmap/HeatmapSeries.ts
index df68efdeb6..9202603f36 100644
--- a/src/chart/heatmap/HeatmapSeries.ts
+++ b/src/chart/heatmap/HeatmapSeries.ts
@@ -38,6 +38,7 @@ import SeriesData from '../../data/SeriesData';
 import type Geo from '../../coord/geo/Geo';
 import type Cartesian2D from '../../coord/cartesian/Cartesian2D';
 import type Calendar from '../../coord/calendar/Calendar';
+import tokens from '../../visual/tokens';
 
 type HeatmapDataValue = OptionDataValue[];
 
@@ -126,7 +127,7 @@ class HeatmapSeriesModel extends SeriesModel<HeatmapSeriesOption> {
 
         select: {
             itemStyle: {
-                borderColor: '#212121'
+                borderColor: tokens.color.primary
             }
         }
     };
diff --git a/src/chart/helper/LargeLineDraw.ts b/src/chart/helper/LargeLineDraw.ts
index 88afd6b4c0..e963f32022 100644
--- a/src/chart/helper/LargeLineDraw.ts
+++ b/src/chart/helper/LargeLineDraw.ts
@@ -28,6 +28,7 @@ import { StageHandlerProgressParams, LineStyleOption, ColorString } from '../../
 import Model from '../../model/Model';
 import { getECData } from '../../util/innerStore';
 import Element from 'zrender/src/Element';
+import tokens from '../../visual/tokens';
 
 class LargeLinesPathShape {
     polyline = false;
@@ -74,7 +75,7 @@ class LargeLinesPath extends graphic.Path {
 
     getDefaultStyle() {
         return {
-            stroke: '#000',
+            stroke: tokens.color.neutral99,
             fill: null as ColorString
         };
     }
diff --git a/src/chart/helper/Line.ts b/src/chart/helper/Line.ts
index bbfb774ba5..e15fdae76f 100644
--- a/src/chart/helper/Line.ts
+++ b/src/chart/helper/Line.ts
@@ -39,6 +39,7 @@ import type { LineDrawSeriesScope, LineDrawModelOption } from './LineDraw';
 import { TextStyleProps } from 'zrender/src/graphic/Text';
 import { LineDataVisual } from '../../visual/commonVisualTypes';
 import Model from '../../model/Model';
+import tokens from '../../visual/tokens';
 
 const SYMBOL_CATEGORIES = ['fromSymbol', 'toSymbol'] as const;
 
@@ -295,7 +296,7 @@ class Line extends graphic.Group {
                     return seriesModel.getFormattedLabel(dataIndex, stateName, lineData.dataType);
                 }
             },
-            inheritColor: visualColor as ColorString || '#000',
+            inheritColor: visualColor as ColorString || tokens.color.neutral99,
             defaultOpacity: lineStyle.opacity,
             defaultText: (rawVal == null
                 ? lineData.getName(idx)
diff --git a/src/chart/helper/LinePath.ts b/src/chart/helper/LinePath.ts
index af7b2ca024..d5d40126eb 100644
--- a/src/chart/helper/LinePath.ts
+++ b/src/chart/helper/LinePath.ts
@@ -25,6 +25,7 @@ import * as graphic from '../../util/graphic';
 import * as vec2 from 'zrender/src/core/vector';
 import { PathProps } from 'zrender/src/graphic/Path';
 import { ColorString } from '../../util/types';
+import tokens from '../../visual/tokens';
 
 const straightLineProto = graphic.Line.prototype;
 const bezierCurveProto = graphic.BezierCurve.prototype;
@@ -64,7 +65,7 @@ class ECLinePath extends graphic.Path<ECLineProps> {
 
     getDefaultStyle() {
         return {
-            stroke: '#000',
+            stroke: tokens.color.neutral99,
             fill: null as ColorString
         };
     }
diff --git a/src/chart/line/LineSeries.ts b/src/chart/line/LineSeries.ts
index 9faf5c5175..001a32220a 100644
--- a/src/chart/line/LineSeries.ts
+++ b/src/chart/line/LineSeries.ts
@@ -42,6 +42,7 @@ import type Polar from '../../coord/polar/Polar';
 import {createSymbol, ECSymbol} from '../../util/symbol';
 import {Group} from '../../util/graphic';
 import {LegendIconParams} from '../../component/legend/LegendModel';
+import tokens from '../../visual/tokens';
 
 type LineDataValue = OptionDataValue | OptionDataValue[];
 
@@ -257,7 +258,7 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
 
         if (symbolType.indexOf('empty') > -1) {
             symbol.style.stroke = symbol.style.fill;
-            symbol.style.fill = '#fff';
+            symbol.style.fill = tokens.color.neutral00;
             symbol.style.lineWidth = 2;
         }
 
diff --git a/src/chart/line/poly.ts b/src/chart/line/poly.ts
index 181c215696..aa6826de8d 100644
--- a/src/chart/line/poly.ts
+++ b/src/chart/line/poly.ts
@@ -22,6 +22,7 @@
 import Path, { PathProps } from 'zrender/src/graphic/Path';
 import PathProxy from 'zrender/src/core/PathProxy';
 import { cubicRootAt, cubicAt } from 'zrender/src/core/curve';
+import tokens from '../../visual/tokens';
 
 const mathMin = Math.min;
 const mathMax = Math.max;
@@ -235,7 +236,7 @@ export class ECPolyline extends Path<ECPolylineProps> {
 
     getDefaultStyle() {
         return {
-            stroke: '#000',
+            stroke: tokens.color.neutral99,
             fill: null as string
         };
     }
diff --git a/src/chart/map/MapSeries.ts b/src/chart/map/MapSeries.ts
index a2c937519a..1258d63e06 100644
--- a/src/chart/map/MapSeries.ts
+++ b/src/chart/map/MapSeries.ts
@@ -46,6 +46,7 @@ import {createSymbol, ECSymbol} from '../../util/symbol';
 import {LegendIconParams} from '../../component/legend/LegendModel';
 import {Group} from '../../util/graphic';
 import { GeoJSONRegion } from '../../coord/geo/Region';
+import tokens from '../../visual/tokens';
 
 export interface MapStateOption<TCbParams = never> {
     itemStyle?: GeoItemStyleOption<TCbParams>
@@ -260,7 +261,7 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
 
         if (iconType.indexOf('empty') > -1) {
             icon.style.stroke = icon.style.fill;
-            icon.style.fill = '#fff';
+            icon.style.fill = tokens.color.neutral00;
             icon.style.lineWidth = 2;
         }
         return icon;
@@ -322,32 +323,32 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
 
         label: {
             show: false,
-            color: '#000'
+            color: tokens.color.tertiary
         },
         // scaleLimit: null,
         itemStyle: {
             borderWidth: 0.5,
-            borderColor: '#444',
-            areaColor: '#eee'
+            borderColor: tokens.color.border,
+            areaColor: tokens.color.backgroundTint
         },
 
         emphasis: {
             label: {
                 show: true,
-                color: 'rgb(100,0,0)'
+                color: tokens.color.primary
             },
             itemStyle: {
-                areaColor: 'rgba(255,215,0,0.8)'
+                areaColor: tokens.color.background
             }
         },
 
         select: {
             label: {
                 show: true,
-                color: 'rgb(100,0,0)'
+                color: tokens.color.primary
             },
             itemStyle: {
-                color: 'rgba(255,215,0,0.8)'
+                color: tokens.color.backgroundShade
             }
         },
 
diff --git a/src/chart/sankey/SankeySeries.ts b/src/chart/sankey/SankeySeries.ts
index c9b215bfec..ebaf49e2f6 100644
--- a/src/chart/sankey/SankeySeries.ts
+++ b/src/chart/sankey/SankeySeries.ts
@@ -42,6 +42,7 @@ import SeriesData from '../../data/SeriesData';
 import { LayoutRect } from '../../util/layout';
 import { createTooltipMarkup } from '../../component/tooltip/tooltipMarkup';
 import type View from '../../coord/View';
+import tokens from '../../visual/tokens';
 
 
 type FocusNodeAdjacency = boolean | 'inEdges' | 'outEdges' | 'allEdges';
@@ -331,7 +332,7 @@ class SankeySeriesModel extends SeriesModel<SankeySeriesOption> {
         nodeAlign: 'justify',
 
         lineStyle: {
-            color: '#314656',
+            color: tokens.color.neutral50,
             opacity: 0.2,
             curveness: 0.5
         },
@@ -347,7 +348,7 @@ class SankeySeriesModel extends SeriesModel<SankeySeriesOption> {
 
         select: {
             itemStyle: {
-                borderColor: '#212121'
+                borderColor: tokens.color.primary
             }
         },
 
diff --git a/src/chart/scatter/ScatterSeries.ts b/src/chart/scatter/ScatterSeries.ts
index 5e2995ecad..f95b8d6769 100644
--- a/src/chart/scatter/ScatterSeries.ts
+++ b/src/chart/scatter/ScatterSeries.ts
@@ -41,6 +41,7 @@ import {
 import GlobalModel from '../../model/Global';
 import SeriesData from '../../data/SeriesData';
 import { BrushCommonSelectorsForSeries } from '../../component/brush/selector';
+import tokens from '../../visual/tokens';
 
 interface ScatterStateOption<TCbParams = never> {
     itemStyle?: ItemStyleOption<TCbParams>
@@ -151,7 +152,7 @@ class ScatterSeriesModel extends SeriesModel<ScatterSeriesOption> {
 
         select: {
             itemStyle: {
-                borderColor: '#212121'
+                borderColor: tokens.color.primary
             }
         },
 
diff --git a/src/chart/tree/TreeSeries.ts b/src/chart/tree/TreeSeries.ts
index 820c3c99ba..c69205f46e 100644
--- a/src/chart/tree/TreeSeries.ts
+++ b/src/chart/tree/TreeSeries.ts
@@ -39,6 +39,7 @@ import { LayoutRect } from '../../util/layout';
 import Model from '../../model/Model';
 import { createTooltipMarkup } from '../../component/tooltip/tooltipMarkup';
 import { wrapTreePathInfo } from '../helper/treeHelper';
+import tokens from '../../visual/tokens';
 
 interface CurveLineStyleOption extends LineStyleOption{
     curveness?: number
@@ -287,13 +288,13 @@ class TreeSeriesModel extends SeriesModel<TreeSeriesOption> {
         initialTreeDepth: 2,
 
         lineStyle: {
-            color: '#ccc',
+            color: tokens.color.borderTint,
             width: 1.5,
             curveness: 0.5
         },
 
         itemStyle: {
-            color: 'lightsteelblue',
+            // color: 'lightsteelblue',
             // borderColor: '#c23531',
             borderWidth: 1.5
         },
diff --git a/src/chart/tree/TreeView.ts b/src/chart/tree/TreeView.ts
index 62dfbba541..86110326fe 100644
--- a/src/chart/tree/TreeView.ts
+++ b/src/chart/tree/TreeView.ts
@@ -36,6 +36,7 @@ import { TreeNode } from '../../data/Tree';
 import SeriesData from '../../data/SeriesData';
 import { setStatesStylesFromModel, setStatesFlag, setDefaultStateProxy, HOVER_STATE_BLUR } from '../../util/states';
 import { AnimationOption, ECElement } from '../../util/types';
+import tokens from '../../visual/tokens';
 
 type TreeSymbol = SymbolClz & {
     __edge: graphic.BezierCurve | TreePath
@@ -75,7 +76,7 @@ class TreePath extends Path<TreeEdgePathProps> {
 
     getDefaultStyle() {
         return {
-            stroke: '#000',
+            stroke: tokens.color.neutral99,
             fill: null as string
         };
     }
@@ -348,7 +349,7 @@ function updateNode(
     const itemModel = node.getModel<TreeSeriesNodeItemOption>();
     const visualColor = (node.getVisual('style') as PathStyleProps).fill;
     const symbolInnerColor = node.isExpand === false && node.children.length !== 0
-            ? visualColor : '#fff';
+            ? visualColor : tokens.color.neutral00;
 
     const virtualRoot = data.tree.root;
 
diff --git a/src/chart/treemap/TreemapSeries.ts b/src/chart/treemap/TreemapSeries.ts
index a38446ed85..e0a222ad11 100644
--- a/src/chart/treemap/TreemapSeries.ts
+++ b/src/chart/treemap/TreemapSeries.ts
@@ -45,6 +45,7 @@ import SeriesData from '../../data/SeriesData';
 import { normalizeToArray } from '../../util/model';
 import { createTooltipMarkup } from '../../component/tooltip/tooltipMarkup';
 import enableAriaDecalForTree from '../helper/enableAriaDecalForTree';
+import tokens from '../../visual/tokens';
 
 // Only support numeric value.
 type TreemapSeriesDataValue = number | number[];
@@ -275,14 +276,14 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
             // bottom
             emptyItemWidth: 25,             // Width of empty node.
             itemStyle: {
-                color: 'rgba(0,0,0,0.7)', // '#5793f3',
+                color: tokens.color.backgroundShade,
                 textStyle: {
-                    color: '#fff'
+                    color: tokens.color.secondary
                 }
             },
             emphasis: {
                 itemStyle: {
-                    color: 'rgba(0,0,0,0.9)' // '#5793f3',
+                    color: tokens.color.background
                 }
             }
         },
@@ -293,7 +294,7 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
             padding: 5,
             position: 'inside', // Can be [5, '5%'] or position string like 'insideTopLeft', ...
             // formatter: null,
-            color: '#fff',
+            color: tokens.color.neutral00,
             overflow: 'truncate'
             // align
             // verticalAlign
@@ -314,7 +315,7 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
             colorSaturation: null,  // Can be 'none' if not necessary.
             borderWidth: 0,
             gapWidth: 0,
-            borderColor: '#fff',
+            borderColor: tokens.color.neutral00,
             borderColorSaturation: null // If specified, borderColor will be ineffective, and the
                                         // border color is evaluated by color of current node and
                                         // borderColorSaturation.
diff --git a/src/component/axisPointer/AxisPointerModel.ts b/src/component/axisPointer/AxisPointerModel.ts
index 8f81891025..43d41f3281 100644
--- a/src/component/axisPointer/AxisPointerModel.ts
+++ b/src/component/axisPointer/AxisPointerModel.ts
@@ -23,6 +23,7 @@ import {
     ScaleDataValue,
     CommonAxisPointerOption
 } from '../../util/types';
+import tokens from '../../visual/tokens';
 
 interface MapperParamAxisInfo {
     axisIndex: number
@@ -101,13 +102,13 @@ class AxisPointerModel extends ComponentModel<AxisPointerOption> {
         animationDurationUpdate: 200,
 
         lineStyle: {
-            color: '#B9BEC9',
+            color: tokens.color.border,
             width: 1,
             type: 'dashed'
         },
 
         shadowStyle: {
-            color: 'rgba(210,219,238,0.2)'
+            color: tokens.color.shadowTint
         },
 
         label: {
@@ -115,7 +116,7 @@ class AxisPointerModel extends ComponentModel<AxisPointerOption> {
             formatter: null, // string | Function
             precision: 'auto', // Or a number like 0, 1, 2 ...
             margin: 3,
-            color: '#fff',
+            color: tokens.color.neutral00,
             padding: [5, 7, 5, 7],
             backgroundColor: 'auto', // default: axis line color
             borderColor: null,
@@ -132,11 +133,7 @@ class AxisPointerModel extends ComponentModel<AxisPointerOption> {
             margin: 50,
             // color: '#1b8bbd'
             // color: '#2f4554'
-            color: '#333',
-            shadowBlur: 3,
-            shadowColor: '#aaa',
-            shadowOffsetX: 0,
-            shadowOffsetY: 2,
+            color: tokens.color.quaternary,
 
             // For mobile performance
             throttle: 40
diff --git a/src/component/brush/BrushModel.ts b/src/component/brush/BrushModel.ts
index e3721af3b8..b364fd01b7 100644
--- a/src/component/brush/BrushModel.ts
+++ b/src/component/brush/BrushModel.ts
@@ -29,8 +29,9 @@ import {
     BrushAreaRange, BrushTypeUncertain, BrushType
 } from '../helper/BrushController';
 import { ModelFinderObject } from '../../util/model';
+import tokens from '../../visual/tokens';
 
-const DEFAULT_OUT_OF_BRUSH_COLOR = '#ddd';
+const DEFAULT_OUT_OF_BRUSH_COLOR = tokens.color.disabled;
 
 /**
  * The input to define brush areas.
@@ -136,8 +137,8 @@ class BrushModel extends ComponentModel<BrushOption> {
         transformable: true,
         brushStyle: {
             borderWidth: 1,
-            color: 'rgba(210,219,238,0.3)',
-            borderColor: '#D2DBEE'
+            color: tokens.color.backgroundTint,
+            borderColor: tokens.color.borderTint
         },
         throttleType: 'fixRate',
         throttleDelay: 0,
diff --git a/src/component/dataZoom/SliderZoomModel.ts b/src/component/dataZoom/SliderZoomModel.ts
index e5b1e85724..728a4a7d15 100644
--- a/src/component/dataZoom/SliderZoomModel.ts
+++ b/src/component/dataZoom/SliderZoomModel.ts
@@ -27,6 +27,7 @@ import {
     LabelOption
 } from '../../util/types';
 import { inheritDefaultOption } from '../../util/component';
+import tokens from '../../visual/tokens';
 
 interface SliderHandleLabelOption {
     show?: boolean
@@ -147,30 +148,30 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
         left: null,   // Default align to grid rect.
         bottom: null, // Default align to grid rect.
 
-        borderColor: '#d2dbee',
-        borderRadius: 3,
+        borderColor: tokens.color.borderTint,
+        borderRadius: 0,
 
-        backgroundColor: 'rgba(47,69,84,0)',    // Background of slider zoom component.
+        backgroundColor: tokens.color.transparent, // Background of slider zoom component.
 
         // dataBackgroundColor: '#ddd',
         dataBackground: {
             lineStyle: {
-                color: '#d2dbee',
+                color: tokens.color.border,
                 width: 0.5
             },
             areaStyle: {
-                color: '#d2dbee',
+                color: tokens.color.neutral30,
                 opacity: 0.2
             }
         },
 
         selectedDataBackground: {
             lineStyle: {
-                color: '#8fb0f7',
+                color: tokens.color.border,
                 width: 0.5
             },
             areaStyle: {
-                color: '#8fb0f7',
+                color: tokens.color.neutral30,
                 opacity: 0.2
             }
         },
@@ -182,15 +183,15 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
         handleSize: '100%',
 
         handleStyle: {
-            color: '#fff',
-            borderColor: '#ACB8D1'
+            color: tokens.color.neutral00,
+            borderColor: tokens.color.border
         },
 
         moveHandleSize: 7,
         moveHandleIcon: 'path://M-320.9-50L-320.9-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-348-41-339-50-320.9-50z M-212.3-50L-212.3-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-239.4-41-230.4-50-212.3-50z M-103.7-50L-103.7-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-130.9-41-121.8-50-103.7-50z',
         moveHandleStyle: {
-            color: '#D2DBEE',
-            opacity: 0.7
+            color: tokens.color.quaternary,
+            opacity: 0.3
         },
 
         showDetail: true,
@@ -199,12 +200,12 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
         zoomLock: false,                        // Whether disable zoom.
 
         textStyle: {
-            color: '#6E7079'
+            color: tokens.color.quaternary
         },
 
         brushSelect: true,
         brushStyle: {
-            color: 'rgba(135,175,274,0.15)'
+            color: tokens.color.backgroundTint
         },
 
         emphasis: {
@@ -212,10 +213,10 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
                 show: true
             },
             handleStyle: {
-                borderColor: '#8FB0F7'
+                borderColor: tokens.color.neutral30
             },
             moveHandleStyle: {
-                color: '#8FB0F7'
+                opacity: 0.8
             }
         }
     } as SliderDataZoomOption);
diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts
index 142c13d215..e95490262d 100644
--- a/src/component/dataZoom/SliderZoomView.ts
+++ b/src/component/dataZoom/SliderZoomView.ts
@@ -43,6 +43,7 @@ import { PointLike } from 'zrender/src/core/Point';
 import Displayable from 'zrender/src/graphic/Displayable';
 import {createTextStyle} from '../../label/labelStyle';
 import SeriesData from '../../data/SeriesData';
+import tokens from '../../visual/tokens';
 
 const Rect = graphic.Rect;
 
@@ -565,7 +566,7 @@ class SliderZoomView extends DataZoomView {
                 stroke: dataZoomModel.get('dataBackgroundColor' as any)
                     || dataZoomModel.get('borderColor'),
                 lineWidth: DEFAULT_FRAME_BORDER_WIDTH,
-                fill: 'rgba(0,0,0,0)'
+                fill: tokens.color.transparent
             }
         }));
 
diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts
index 70a6fd59ff..d63981a6d2 100644
--- a/src/component/legend/LegendModel.ts
+++ b/src/component/legend/LegendModel.ts
@@ -37,6 +37,7 @@ import GlobalModel from '../../model/Global';
 import { ItemStyleProps } from '../../model/mixin/itemStyle';
 import { LineStyleProps } from './../../model/mixin/lineStyle';
 import {PathStyleProps} from 'zrender/src/graphic/Path';
+import tokens from '../../visual/tokens';
 
 type LegendDefaultSelectorOptionsProps = {
     type: string;
@@ -457,7 +458,7 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
 
         align: 'auto',
 
-        backgroundColor: 'rgba(0,0,0,0)',
+        backgroundColor: tokens.color.transparent,
         borderColor: '#ccc',
         borderRadius: 0,
         borderWidth: 0,
diff --git a/src/component/timeline/SliderTimelineModel.ts b/src/component/timeline/SliderTimelineModel.ts
index ec20bc948b..aa21ec9d09 100644
--- a/src/component/timeline/SliderTimelineModel.ts
+++ b/src/component/timeline/SliderTimelineModel.ts
@@ -22,6 +22,7 @@ import { DataFormatMixin } from '../../model/mixin/dataFormat';
 import { mixin } from 'zrender/src/core/util';
 import SeriesData from '../../data/SeriesData';
 import { inheritDefaultOption } from '../../util/component';
+import tokens from '../../visual/tokens';
 
 export interface SliderTimelineOption extends TimelineOption {
 }
@@ -36,7 +37,7 @@ class SliderTimelineModel extends TimelineModel {
      */
     static defaultOption: SliderTimelineOption = inheritDefaultOption(TimelineModel.defaultOption, {
 
-        backgroundColor: 'rgba(0,0,0,0)',   // 时间轴背景颜色
+        backgroundColor: tokens.color.transparent,   // 时间轴背景颜色
         borderColor: '#ccc',               // 时间轴边框颜色
         borderWidth: 0,                    // 时间轴边框线宽，单位px，默认为0（无边框）
 
diff --git a/src/component/title/install.ts b/src/component/title/install.ts
index 41e9c73170..7aa5471219 100644
--- a/src/component/title/install.ts
+++ b/src/component/title/install.ts
@@ -110,7 +110,7 @@ class TitleModel extends ComponentModel<TitleOption> {
         left: 0,
         top: 0,
 
-        backgroundColor: 'rgba(0,0,0,0)',
+        backgroundColor: tokens.color.transparent,
 
         borderColor: '#ccc',
 
@@ -122,11 +122,11 @@ class TitleModel extends ComponentModel<TitleOption> {
         textStyle: {
             fontSize: 18,
             fontWeight: 'bold',
-            color: tokens.color.foreground.primary
+            color: tokens.color.primary
         },
         subtextStyle: {
             fontSize: 12,
-            color: tokens.color.foreground.quaternary
+            color: tokens.color.quaternary
         }
     };
 }
diff --git a/src/component/visualMap/ContinuousModel.ts b/src/component/visualMap/ContinuousModel.ts
index d8281bcec8..496a2591a8 100644
--- a/src/component/visualMap/ContinuousModel.ts
+++ b/src/component/visualMap/ContinuousModel.ts
@@ -23,6 +23,7 @@ import * as numberUtil from '../../util/number';
 import { VisualMappingOption } from '../../visual/VisualMapping';
 import { inheritDefaultOption } from '../../util/component';
 import { ItemStyleOption } from '../../util/types';
+import tokens from '../../visual/tokens';
 
 // Constant
 const DEFAULT_BAR_BOUND = [20, 140];
@@ -296,14 +297,14 @@ class ContinuousModel extends VisualMapModel<ContinousVisualMapOption> {
             shadowBlur: 2,
             shadowOffsetX: 1,
             shadowOffsetY: 1,
-            shadowColor: 'rgba(0,0,0,0.2)'
+            shadowColor: tokens.color.shadow
         }
         // emphasis: {
         //     handleStyle: {
         //         shadowBlur: 3,
         //         shadowOffsetX: 1,
         //         shadowOffsetY: 1,
-        //         shadowColor: 'rgba(0,0,0,0.2)'
+        //         shadowColor: tokens.color.shadow
         //     }
         // }
     }) as ContinousVisualMapOption;
diff --git a/src/component/visualMap/VisualMapModel.ts b/src/component/visualMap/VisualMapModel.ts
index 85b3162e51..d099f276cb 100644
--- a/src/component/visualMap/VisualMapModel.ts
+++ b/src/component/visualMap/VisualMapModel.ts
@@ -39,6 +39,7 @@ import Model from '../../model/Model';
 import GlobalModel from '../../model/Global';
 import SeriesModel from '../../model/Series';
 import SeriesData from '../../data/SeriesData';
+import tokens from '../../visual/tokens';
 
 const mapVisual = VisualMapping.mapVisual;
 const eachVisual = VisualMapping.eachVisual;
@@ -620,7 +621,7 @@ class VisualMapModel<Opts extends VisualMapOption = VisualMapOption> extends Com
         inverse: false,
         orient: 'vertical',        // 'horizontal' ¦ 'vertical'
 
-        backgroundColor: 'rgba(0,0,0,0)',
+        backgroundColor: tokens.color.transparent,
         borderColor: '#ccc',       // 值域边框颜色
         contentColor: '#5793f3',
         inactiveColor: '#aaa',
diff --git a/src/coord/cartesian/GridModel.ts b/src/coord/cartesian/GridModel.ts
index 5e2f438608..85624551f8 100644
--- a/src/coord/cartesian/GridModel.ts
+++ b/src/coord/cartesian/GridModel.ts
@@ -22,6 +22,7 @@ import ComponentModel from '../../model/Component';
 import { ComponentOption, BoxLayoutOptionMixin, ZRColor, ShadowOptionMixin } from '../../util/types';
 import Grid from './Grid';
 import { CoordinateSystemHostModel } from '../CoordinateSystem';
+import tokens from '../../visual/tokens';
 
 export interface GridOption extends ComponentOption, BoxLayoutOptionMixin, ShadowOptionMixin {
     mainType?: 'grid';
@@ -60,7 +61,7 @@ class GridModel extends ComponentModel<GridOption> implements CoordinateSystemHo
         containLabel: false,
         // width: {totalWidth} - left - right,
         // height: {totalHeight} - top - bottom,
-        backgroundColor: 'rgba(0,0,0,0)',
+        backgroundColor: tokens.color.transparent,
         borderWidth: 1,
         borderColor: '#ccc'
     };
diff --git a/src/visual/tokens.ts b/src/visual/tokens.ts
index d42dcfc5a6..3678bc98ac 100644
--- a/src/visual/tokens.ts
+++ b/src/visual/tokens.ts
@@ -5,7 +5,7 @@ const tokens = {
             '#b6d634',
             '#505372',
             '#ff994d',
-            '#52d098',
+            '#5acb92',
             '#ffd82c',
             '#e76991',
             '#6854aa',
@@ -31,24 +31,52 @@ const tokens = {
         neutral80: '#3a3b3f',
         neutral85: '#2e2f33',
         neutral90: '#232327',
-        neutral95: '#232327',
-        neutral100: '#000',
-
-        // Dynamic colors
-        foreground: {
-            primary: '',
-            secondary: '',
-            tertiary: '',
-            quaternary: ''
+        neutral95: '#17171b',
+        neutral99: '#000',
+
+        transparent: 'rgba(0,0,0,0)',
+
+        primary: '@neutral80',
+        secondary: '@neutral70',
+        tertiary: '@neutral60',
+        quaternary: '@neutral50',
+        disabled: '@neutral20',
+
+        border: '@neutral30',
+        borderTint: '@neutral20',
+        borderShade: '@neutral40',
+
+        background: '@neutral05',
+        backgroundTint: 'rgba(234,237,245,0.5)',
+        backgroundShade: '@neutral10',
+
+        shadow: 'rgba(0,0,0,0.2)',
+        shadowTint: 'rgba(129,130,136,0.2)',
+
+        axisLine: '@neutral70',
+        axisTick: '@axisLine',
+        axisTickMinor: '@neutral60',
+        axisLabel: '@axisLine'
+    }
+} as const;
+
+function decodeTokens() {
+    const color = tokens.color as {
+        [key: string]: string | readonly string[]
+    };
+    for (const key in color) {
+        if (Object.prototype.hasOwnProperty.call(color, key)) {
+            const value = color[key];
+            if (typeof value === 'string' && value.startsWith('@')) {
+                const refKey = value.slice(1);
+                if (refKey in color) {
+                    color[key] = color[refKey];
+                }
+            }
         }
     }
-};
-
-tokens.color.foreground = {
-    primary: tokens.color.neutral80,
-    secondary: tokens.color.neutral70,
-    tertiary: tokens.color.neutral60,
-    quaternary: tokens.color.neutral50
-};
+}
+
+decodeTokens();
 
 export default tokens;
diff --git a/src/visual/visualDefault.ts b/src/visual/visualDefault.ts
index ab51470628..9eb10dec40 100644
--- a/src/visual/visualDefault.ts
+++ b/src/visual/visualDefault.ts
@@ -22,6 +22,7 @@
  */
 
 import * as zrUtil from 'zrender/src/core/util';
+import tokens from './tokens';
 
 const visualDefault = {
     /**
@@ -45,7 +46,7 @@ const defaultOption: {[key: string]: {
 
     color: {
         active: ['#006edd', '#e0ffff'],
-        inactive: ['rgba(0,0,0,0)']
+        inactive: [tokens.color.transparent]
     },
 
     colorHue: {

From 294ed78c27865c52b495019d041445b072146afc Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Mon, 31 Mar 2025 14:33:49 +0800
Subject: [PATCH 04/27] feat: update theme

---
 src/chart/tree/TreeSeries.ts                  |  2 +-
 src/component/dataZoom/SliderZoomView.ts      |  2 +-
 src/component/legend/LegendModel.ts           | 17 ++++++++---------
 src/component/legend/LegendView.ts            |  3 ++-
 src/component/legend/ScrollableLegendModel.ts |  7 ++++---
 src/component/marker/MarkAreaView.ts          |  3 ++-
 src/component/timeline/SliderTimelineModel.ts |  3 +--
 src/component/timeline/TimelineModel.ts       |  3 ++-
 src/component/title/install.ts                |  2 +-
 src/component/toolbox/ToolboxModel.ts         |  7 ++++---
 src/component/toolbox/ToolboxView.ts          |  3 ++-
 src/component/toolbox/feature/DataView.ts     | 15 ++++++++-------
 src/component/toolbox/feature/SaveAsImage.ts  |  3 ++-
 src/visual/tokens.ts                          | 10 ++++++++++
 14 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/src/chart/tree/TreeSeries.ts b/src/chart/tree/TreeSeries.ts
index c69205f46e..3a8a8da883 100644
--- a/src/chart/tree/TreeSeries.ts
+++ b/src/chart/tree/TreeSeries.ts
@@ -294,7 +294,7 @@ class TreeSeriesModel extends SeriesModel<TreeSeriesOption> {
         },
 
         itemStyle: {
-            // color: 'lightsteelblue',
+            color: 'lightsteelblue',
             // borderColor: '#c23531',
             borderWidth: 1.5
         },
diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts
index e95490262d..6fd9bcdf55 100644
--- a/src/component/dataZoom/SliderZoomView.ts
+++ b/src/component/dataZoom/SliderZoomView.ts
@@ -656,7 +656,7 @@ class SliderZoomView extends DataZoomView {
             const moveHandleIcon = displayables.moveHandleIcon = createSymbol(
                 dataZoomModel.get('moveHandleIcon'),
                 -iconSize / 2, -iconSize / 2, iconSize, iconSize,
-                '#fff',
+                tokens.color.neutral00,
                 true
             );
             moveHandleIcon.silent = true;
diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts
index d63981a6d2..5c462db3fc 100644
--- a/src/component/legend/LegendModel.ts
+++ b/src/component/legend/LegendModel.ts
@@ -459,7 +459,7 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
         align: 'auto',
 
         backgroundColor: tokens.color.transparent,
-        borderColor: '#ccc',
+        borderColor: tokens.color.border,
         borderRadius: 0,
         borderWidth: 0,
         padding: 5,
@@ -469,8 +469,8 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
         symbolRotate: 'inherit',
         symbolKeepAspect: true,
 
-        inactiveColor: '#ccc',
-        inactiveBorderColor: '#ccc',
+        inactiveColor: tokens.color.disabled,
+        inactiveBorderColor: tokens.color.disabled,
         inactiveBorderWidth: 'auto',
 
         itemStyle: {
@@ -487,7 +487,7 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
         lineStyle: {
             width: 'auto',
             color: 'inherit',
-            inactiveColor: '#ccc',
+            inactiveColor: tokens.color.disabled,
             inactiveWidth: 2,
             opacity: 'inherit',
             type: 'inherit',
@@ -498,7 +498,7 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
         },
 
         textStyle: {
-            color: '#333'
+            color: tokens.color.secondary
         },
         selectedMode: true,
 
@@ -510,16 +510,15 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
             padding: [3, 5, 3, 5],
             fontSize: 12,
             fontFamily: 'sans-serif',
-            color: '#666',
+            color: tokens.color.tertiary,
             borderWidth: 1,
-            borderColor: '#666'
+            borderColor: tokens.color.border
         },
 
         emphasis: {
             selectorLabel: {
                 show: true,
-                color: '#eee',
-                backgroundColor: '#666'
+                color: tokens.color.quaternary
             }
         },
 
diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts
index 9016468240..362d1c90bb 100644
--- a/src/component/legend/LegendView.ts
+++ b/src/component/legend/LegendView.ts
@@ -51,6 +51,7 @@ import {createSymbol, ECSymbol} from '../../util/symbol';
 import SeriesModel from '../../model/Series';
 import { createOrUpdatePatternFromDecal } from '../../util/decal';
 import { getECData } from '../../util/innerStore';
+import tokens from '../../visual/tokens';
 
 const curry = zrUtil.curry;
 const each = zrUtil.each;
@@ -668,7 +669,7 @@ function getDefaultLegendIcon(opt: LegendIconParams): ECSymbol {
 
     if (symboType.indexOf('empty') > -1) {
         icon.style.stroke = icon.style.fill;
-        icon.style.fill = '#fff';
+        icon.style.fill = tokens.color.neutral00;
         icon.style.lineWidth = 2;
     }
 
diff --git a/src/component/legend/ScrollableLegendModel.ts b/src/component/legend/ScrollableLegendModel.ts
index 7db50321cb..dfd2dd30a8 100644
--- a/src/component/legend/ScrollableLegendModel.ts
+++ b/src/component/legend/ScrollableLegendModel.ts
@@ -26,6 +26,7 @@ import { ZRColor, LabelOption } from '../../util/types';
 import Model from '../../model/Model';
 import GlobalModel from '../../model/Global';
 import { inheritDefaultOption } from '../../util/component';
+import tokens from '../../visual/tokens';
 
 export interface ScrollableLegendOption extends LegendOption {
     scrollDataIndex?: number
@@ -95,11 +96,11 @@ class ScrollableLegendModel extends LegendModel<ScrollableLegendOption> {
             horizontal: ['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z'],
             vertical: ['M0,0L20,0L10,-20z', 'M0,0L20,0L10,20z']
         },
-        pageIconColor: '#2f4554',
-        pageIconInactiveColor: '#aaa',
+        pageIconColor: tokens.color.tertiary,
+        pageIconInactiveColor: tokens.color.disabled,
         pageIconSize: 15, // Can be [10, 3], which represents [width, height]
         pageTextStyle: {
-            color: '#333'
+            color: tokens.color.tertiary
         },
 
         animationDurationUpdate: 800
diff --git a/src/component/marker/MarkAreaView.ts b/src/component/marker/MarkAreaView.ts
index 9ecf7d32ee..ac6c497bb1 100644
--- a/src/component/marker/MarkAreaView.ts
+++ b/src/component/marker/MarkAreaView.ts
@@ -42,6 +42,7 @@ import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
 import { getECData } from '../../util/innerStore';
 import Axis2D from '../../coord/cartesian/Axis2D';
 import { parseDataValue } from '../../data/helper/dataValueHelper';
+import tokens from '../../visual/tokens';
 
 interface MarkAreaDrawGroup {
     group: graphic.Group
@@ -374,7 +375,7 @@ class MarkAreaView extends MarkerView {
                     labelDataIndex: idx,
                     defaultText: areaData.getName(idx) || '',
                     inheritColor: isString(style.fill)
-                        ? colorUtil.modifyAlpha(style.fill, 1) : '#000'
+                        ? colorUtil.modifyAlpha(style.fill, 1) : tokens.color.neutral99
                 }
             );
 
diff --git a/src/component/timeline/SliderTimelineModel.ts b/src/component/timeline/SliderTimelineModel.ts
index aa21ec9d09..ec20bc948b 100644
--- a/src/component/timeline/SliderTimelineModel.ts
+++ b/src/component/timeline/SliderTimelineModel.ts
@@ -22,7 +22,6 @@ import { DataFormatMixin } from '../../model/mixin/dataFormat';
 import { mixin } from 'zrender/src/core/util';
 import SeriesData from '../../data/SeriesData';
 import { inheritDefaultOption } from '../../util/component';
-import tokens from '../../visual/tokens';
 
 export interface SliderTimelineOption extends TimelineOption {
 }
@@ -37,7 +36,7 @@ class SliderTimelineModel extends TimelineModel {
      */
     static defaultOption: SliderTimelineOption = inheritDefaultOption(TimelineModel.defaultOption, {
 
-        backgroundColor: tokens.color.transparent,   // 时间轴背景颜色
+        backgroundColor: 'rgba(0,0,0,0)',   // 时间轴背景颜色
         borderColor: '#ccc',               // 时间轴边框颜色
         borderWidth: 0,                    // 时间轴边框线宽，单位px，默认为0（无边框）
 
diff --git a/src/component/timeline/TimelineModel.ts b/src/component/timeline/TimelineModel.ts
index 0df8f4cf02..6d2c2e7470 100644
--- a/src/component/timeline/TimelineModel.ts
+++ b/src/component/timeline/TimelineModel.ts
@@ -38,6 +38,7 @@ import Model from '../../model/Model';
 import GlobalModel, { GlobalModelSetOptionOpts } from '../../model/Global';
 import { each, isObject, clone } from 'zrender/src/core/util';
 import { convertOptionIdName, getDataItemValue } from '../../util/model';
+import tokens from '../../visual/tokens';
 
 
 export interface TimelineControlStyle extends ItemStyleOption {
@@ -327,7 +328,7 @@ class TimelineModel extends ComponentModel<TimelineOption> {
 
         itemStyle: {},
         label: {
-            color: '#000'
+            color: tokens.color.secondary
         },
 
         data: []
diff --git a/src/component/title/install.ts b/src/component/title/install.ts
index 7aa5471219..fed4ac717f 100644
--- a/src/component/title/install.ts
+++ b/src/component/title/install.ts
@@ -112,7 +112,7 @@ class TitleModel extends ComponentModel<TitleOption> {
 
         backgroundColor: tokens.color.transparent,
 
-        borderColor: '#ccc',
+        borderColor: tokens.color.primary,
 
         borderWidth: 0,
 
diff --git a/src/component/toolbox/ToolboxModel.ts b/src/component/toolbox/ToolboxModel.ts
index 6aee37a79a..b28e0c3202 100644
--- a/src/component/toolbox/ToolboxModel.ts
+++ b/src/component/toolbox/ToolboxModel.ts
@@ -31,6 +31,7 @@ import {
     CommonTooltipOption,
     Dictionary
 } from '../../util/types';
+import tokens from '../../visual/tokens';
 
 
 export interface ToolboxTooltipFormatterParams {
@@ -120,7 +121,7 @@ class ToolboxModel extends ComponentModel<ToolboxOption> {
 
         backgroundColor: 'transparent',
 
-        borderColor: '#ccc',
+        borderColor: tokens.color.border,
 
         borderRadius: 0,
 
@@ -135,12 +136,12 @@ class ToolboxModel extends ComponentModel<ToolboxOption> {
         showTitle: true,
 
         iconStyle: {
-            borderColor: '#666',
+            borderColor: tokens.color.accent50,
             color: 'none'
         },
         emphasis: {
             iconStyle: {
-                borderColor: '#3E98C5'
+                borderColor: tokens.color.accent40
             }
         },
         // textStyle: {},
diff --git a/src/component/toolbox/ToolboxView.ts b/src/component/toolbox/ToolboxView.ts
index 071c009bd5..9c751218d5 100644
--- a/src/component/toolbox/ToolboxView.ts
+++ b/src/component/toolbox/ToolboxView.ts
@@ -40,6 +40,7 @@ import { getUID } from '../../util/component';
 import Displayable from 'zrender/src/graphic/Displayable';
 import ZRText from 'zrender/src/graphic/Text';
 import { getFont } from '../../label/labelStyle';
+import tokens from '../../visual/tokens';
 
 type IconPath = ToolboxFeatureModel['iconPaths'][string];
 
@@ -263,7 +264,7 @@ class ToolboxView extends ComponentView {
                           );
                     textContent.setStyle({
                         fill: (iconStyleEmphasisModel.get('textFill')
-                            || hoverStyle.fill || hoverStyle.stroke || '#000') as string,
+                            || hoverStyle.fill || hoverStyle.stroke || tokens.color.neutral99) as string,
                         backgroundColor: iconStyleEmphasisModel.get('textBackgroundColor')
                     });
                     path.setTextConfig({
diff --git a/src/component/toolbox/feature/DataView.ts b/src/component/toolbox/feature/DataView.ts
index 6efd570432..300417a7b3 100644
--- a/src/component/toolbox/feature/DataView.ts
+++ b/src/component/toolbox/feature/DataView.ts
@@ -30,6 +30,7 @@ import { addEventListener } from 'zrender/src/core/event';
 import Axis from '../../../coord/Axis';
 import Cartesian2D from '../../../coord/cartesian/Cartesian2D';
 import { warn } from '../../../util/log';
+import tokens from '../../../visual/tokens';
 
 /* global document */
 
@@ -334,7 +335,7 @@ class DataView extends ToolboxFeature<ToolboxDataViewFeatureOption> {
         const root = document.createElement('div');
         // use padding to avoid 5px whitespace
         root.style.cssText = 'position:absolute;top:0;bottom:0;left:0;right:0;padding:5px';
-        root.style.backgroundColor = model.get('backgroundColor') || '#fff';
+        root.style.backgroundColor = model.get('backgroundColor') || tokens.color.neutral00;
 
         // Create elements
         const header = document.createElement('h4');
@@ -464,12 +465,12 @@ class DataView extends ToolboxFeature<ToolboxDataViewFeatureOption> {
             icon: 'M17.5,17.3H33 M17.5,17.3H33 M45.4,29.5h-28 M11.5,2v56H51V14.8L38.4,2H11.5z M38.4,2.2v12.7H51 M45.4,41.7h-28',
             title: ecModel.getLocaleModel().get(['toolbox', 'dataView', 'title']),
             lang: ecModel.getLocaleModel().get(['toolbox', 'dataView', 'lang']),
-            backgroundColor: '#fff',
-            textColor: '#000',
-            textareaColor: '#fff',
-            textareaBorderColor: '#333',
-            buttonColor: '#c23531',
-            buttonTextColor: '#fff'
+            backgroundColor: tokens.color.background,
+            textColor: tokens.color.primary,
+            textareaColor: tokens.color.background,
+            textareaBorderColor: tokens.color.border,
+            buttonColor: tokens.color.accent50,
+            buttonTextColor: tokens.color.neutral00
         };
 
         return defaultOption;
diff --git a/src/component/toolbox/feature/SaveAsImage.ts b/src/component/toolbox/feature/SaveAsImage.ts
index b40c9fdbc8..b244625b44 100644
--- a/src/component/toolbox/feature/SaveAsImage.ts
+++ b/src/component/toolbox/feature/SaveAsImage.ts
@@ -24,6 +24,7 @@ import { ToolboxFeature, ToolboxFeatureOption } from '../featureManager';
 import { ZRColor } from '../../../util/types';
 import GlobalModel from '../../../model/Global';
 import ExtensionAPI from '../../../core/ExtensionAPI';
+import tokens from '../../../visual/tokens';
 
 export interface ToolboxSaveAsImageFeatureOption extends ToolboxFeatureOption {
     icon?: string
@@ -132,7 +133,7 @@ class SaveAsImage extends ToolboxFeature<ToolboxSaveAsImageFeatureOption> {
             type: 'png',
             // Default use option.backgroundColor
             // backgroundColor: '#fff',
-            connectedBackgroundColor: '#fff',
+            connectedBackgroundColor: tokens.color.neutral00,
             name: '',
             excludeComponents: ['toolbox'],
             // use current pixel ratio of device by default
diff --git a/src/visual/tokens.ts b/src/visual/tokens.ts
index 3678bc98ac..0355edf74b 100644
--- a/src/visual/tokens.ts
+++ b/src/visual/tokens.ts
@@ -34,6 +34,16 @@ const tokens = {
         neutral95: '#17171b',
         neutral99: '#000',
 
+        accent10: '#dee4f9',
+        accent20: '#bdc9f4',
+        accent30: '#9baeee',
+        accent40: '#7a93e9',
+        accent50: '#5978e3',
+        accent60: '#4c65bb',
+        accent70: '#3f5193',
+        accent80: '#313e6b',
+        accent90: '#242a43',
+
         transparent: 'rgba(0,0,0,0)',
 
         primary: '@neutral80',

From 17a3bad3538abbc635e69d468f0fee2dd4b8f00f Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Tue, 1 Apr 2025 19:31:48 +0800
Subject: [PATCH 05/27] feat: first round color all changed

---
 src/component/helper/BrushController.ts      |  5 ++-
 src/component/toolbox/feature/DataZoom.ts    |  3 +-
 src/component/toolbox/feature/SaveAsImage.ts |  2 +-
 src/component/tooltip/TooltipModel.ts        |  7 ++--
 src/component/tooltip/TooltipView.ts         |  3 +-
 src/component/tooltip/tooltipMarkup.ts       |  7 ++--
 src/component/visualMap/ContinuousModel.ts   |  4 +-
 src/component/visualMap/VisualMapModel.ts    |  8 ++--
 src/coord/axisDefault.ts                     | 15 ++++---
 src/coord/calendar/CalendarModel.ts          | 13 +++---
 src/coord/cartesian/GridModel.ts             |  2 +-
 src/coord/geo/GeoModel.ts                    | 15 +++----
 src/coord/radar/RadarModel.ts                |  3 +-
 src/loading/default.ts                       |  7 ++--
 src/model/globalDefault.ts                   |  2 +-
 src/util/styleCompat.ts                      |  7 ++--
 src/util/symbol.ts                           |  3 +-
 src/visual/tokens.ts                         | 44 +++++++++++---------
 src/visual/visualDefault.ts                  |  2 +-
 19 files changed, 87 insertions(+), 65 deletions(-)

diff --git a/src/component/helper/BrushController.ts b/src/component/helper/BrushController.ts
index 38cf197499..09022330a7 100644
--- a/src/component/helper/BrushController.ts
+++ b/src/component/helper/BrushController.ts
@@ -29,6 +29,7 @@ import { ElementEvent } from 'zrender/src/Element';
 import * as matrix from 'zrender/src/core/matrix';
 import Displayable from 'zrender/src/graphic/Displayable';
 import { PathStyleProps } from 'zrender/src/graphic/Path';
+import tokens from '../../visual/tokens';
 
 
 /**
@@ -155,8 +156,8 @@ const CURSOR_MAP = {
 const DEFAULT_BRUSH_OPT = {
     brushStyle: {
         lineWidth: 2,
-        stroke: 'rgba(210,219,238,0.3)',
-        fill: '#D2DBEE'
+        stroke: tokens.color.backgroundTint,
+        fill: tokens.color.borderTint
     },
     transformable: true,
     brushMode: 'single',
diff --git a/src/component/toolbox/feature/DataZoom.ts b/src/component/toolbox/feature/DataZoom.ts
index 09366771b4..e51ace23cf 100644
--- a/src/component/toolbox/feature/DataZoom.ts
+++ b/src/component/toolbox/feature/DataZoom.ts
@@ -45,6 +45,7 @@ import {
 import ToolboxModel from '../ToolboxModel';
 import { registerInternalOptionCreator } from '../../../model/internalComponentCreator';
 import ComponentModel from '../../../model/Component';
+import tokens from '../../../visual/tokens';
 
 
 const each = zrUtil.each;
@@ -213,7 +214,7 @@ class DataZoomFeature extends ToolboxFeature<ToolboxDataZoomFeatureOption> {
             title: ecModel.getLocaleModel().get(['toolbox', 'dataZoom', 'title']),
             brushStyle: {
                 borderWidth: 0,
-                color: 'rgba(210,219,238,0.2)'
+                color: tokens.color.backgroundTint
             }
         };
 
diff --git a/src/component/toolbox/feature/SaveAsImage.ts b/src/component/toolbox/feature/SaveAsImage.ts
index b244625b44..815d4c1755 100644
--- a/src/component/toolbox/feature/SaveAsImage.ts
+++ b/src/component/toolbox/feature/SaveAsImage.ts
@@ -52,7 +52,7 @@ class SaveAsImage extends ToolboxFeature<ToolboxSaveAsImageFeatureOption> {
         const url = api.getConnectedDataURL({
             type: type,
             backgroundColor: model.get('backgroundColor', true)
-                || ecModel.get('backgroundColor') || '#fff',
+                || ecModel.get('backgroundColor') || tokens.color.neutral00,
             connectedBackgroundColor: model.get('connectedBackgroundColor'),
             excludeComponents: model.get('excludeComponents'),
             pixelRatio: model.get('pixelRatio')
diff --git a/src/component/tooltip/TooltipModel.ts b/src/component/tooltip/TooltipModel.ts
index 351cc0549b..3c747a89ac 100644
--- a/src/component/tooltip/TooltipModel.ts
+++ b/src/component/tooltip/TooltipModel.ts
@@ -27,6 +27,7 @@ import {
     CallbackDataParams,
     TooltipOrderMode
 } from '../../util/types';
+import tokens from '../../visual/tokens';
 import {AxisPointerOption} from '../axisPointer/AxisPointerModel';
 
 
@@ -124,7 +125,7 @@ class TooltipModel extends ComponentModel<TooltipOption> {
 
         enterable: false,
 
-        backgroundColor: '#fff',
+        backgroundColor: tokens.color.neutral00,
 
         // box shadow
         shadowBlur: 10,
@@ -163,7 +164,7 @@ class TooltipModel extends ComponentModel<TooltipOption> {
             animationEasingUpdate: 'exponentialOut',
 
             crossStyle: {
-                color: '#999',
+                color: tokens.color.borderShade,
                 width: 1,
                 type: 'dashed',
 
@@ -175,7 +176,7 @@ class TooltipModel extends ComponentModel<TooltipOption> {
             // otherwise it will always override those styles on option.axisPointer.
         },
         textStyle: {
-            color: '#666',
+            color: tokens.color.tertiary,
             fontSize: 14
         }
     };
diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts
index d5bf5d8f21..c2f1a29a70 100644
--- a/src/component/tooltip/TooltipView.ts
+++ b/src/component/tooltip/TooltipView.ts
@@ -57,6 +57,7 @@ import { normalizeTooltipFormatResult } from '../../model/mixin/dataFormat';
 import { createTooltipMarkup, buildTooltipMarkup, TooltipMarkupStyleCreator } from './tooltipMarkup';
 import { findEventDispatcher } from '../../util/event';
 import { clear, createOrUpdate } from '../../util/throttle';
+import tokens from '../../visual/tokens';
 
 const proxyRect = new Rect({
     shape: { x: -1, y: -1, width: 2, height: 2 }
@@ -871,7 +872,7 @@ class TooltipView extends ComponentView {
     } {
         if (trigger === 'axis' || isArray(tooltipDataParams)) {
             return {
-                color: borderColor || (this._renderMode === 'html' ? '#fff' : 'none')
+                color: borderColor || (this._renderMode === 'html' ? tokens.color.neutral00 : 'none')
             };
         }
 
diff --git a/src/component/tooltip/tooltipMarkup.ts b/src/component/tooltip/tooltipMarkup.ts
index 10017645bf..b51fe55ca9 100644
--- a/src/component/tooltip/tooltipMarkup.ts
+++ b/src/component/tooltip/tooltipMarkup.ts
@@ -31,6 +31,7 @@ import SeriesModel from '../../model/Series';
 import { getRandomIdBase } from '../../util/number';
 import Model from '../../model/Model';
 import { TooltipOption } from './TooltipModel';
+import tokens from '../../visual/tokens';
 
 type RichTextStyle = {
     fontSize: number | string,
@@ -61,10 +62,10 @@ function getTooltipTextStyle(
     nameStyle: TextStyle
     valueStyle: TextStyle
 } {
-    const nameFontColor = textStyle.color || '#6e7079';
+    const nameFontColor = textStyle.color || tokens.color.tertiary;
     const nameFontSize = textStyle.fontSize || 12;
     const nameFontWeight = textStyle.fontWeight || '400';
-    const valueFontColor = textStyle.color || '#464646';
+    const valueFontColor = textStyle.color || tokens.color.secondary;
     const valueFontSize = textStyle.fontSize || 14;
     const valueFontWeight = textStyle.fontWeight || '900';
 
@@ -338,7 +339,7 @@ function buildNameValue(
         ? ''
         : ctx.markupStyleCreator.makeTooltipMarker(
             fragment.markerType,
-            fragment.markerColor || '#333',
+            fragment.markerColor || tokens.color.secondary,
             renderMode
         );
     const readableName = noName
diff --git a/src/component/visualMap/ContinuousModel.ts b/src/component/visualMap/ContinuousModel.ts
index 496a2591a8..29c3e617e8 100644
--- a/src/component/visualMap/ContinuousModel.ts
+++ b/src/component/visualMap/ContinuousModel.ts
@@ -285,14 +285,14 @@ class ContinuousModel extends VisualMapModel<ContinousVisualMapOption> {
         handleSize: '120%',
 
         handleStyle: {
-            borderColor: '#fff',
+            borderColor: tokens.color.neutral00,
             borderWidth: 1
         },
 
         indicatorIcon: 'circle',
         indicatorSize: '50%',
         indicatorStyle: {
-            borderColor: '#fff',
+            borderColor: tokens.color.neutral00,
             borderWidth: 2,
             shadowBlur: 2,
             shadowOffsetX: 1,
diff --git a/src/component/visualMap/VisualMapModel.ts b/src/component/visualMap/VisualMapModel.ts
index d099f276cb..b8f744d380 100644
--- a/src/component/visualMap/VisualMapModel.ts
+++ b/src/component/visualMap/VisualMapModel.ts
@@ -622,9 +622,9 @@ class VisualMapModel<Opts extends VisualMapOption = VisualMapOption> extends Com
         orient: 'vertical',        // 'horizontal' ¦ 'vertical'
 
         backgroundColor: tokens.color.transparent,
-        borderColor: '#ccc',       // 值域边框颜色
-        contentColor: '#5793f3',
-        inactiveColor: '#aaa',
+        borderColor: tokens.color.borderTint,       // 值域边框颜色
+        contentColor: tokens.color.theme[0],
+        inactiveColor: tokens.color.disabled,
         borderWidth: 0,
         padding: 5,
                                     // 接受数组分别设定上右下左边距，同css
@@ -632,7 +632,7 @@ class VisualMapModel<Opts extends VisualMapOption = VisualMapOption> extends Com
         precision: 0,              // 小数精度，默认为0，无小数点
 
         textStyle: {
-            color: '#333'          // 值域文字颜色
+            color: tokens.color.secondary          // 值域文字颜色
         }
     };
 }
diff --git a/src/coord/axisDefault.ts b/src/coord/axisDefault.ts
index ae589f365a..086c224a1e 100644
--- a/src/coord/axisDefault.ts
+++ b/src/coord/axisDefault.ts
@@ -18,6 +18,7 @@
 */
 
 import * as zrUtil from 'zrender/src/core/util';
+import tokens from '../visual/tokens';
 import { AxisBaseOption } from './axisCommonTypes';
 
 
@@ -60,7 +61,7 @@ const defaultOption: AxisBaseOption = {
         onZero: true,
         onZeroAxisIndex: null,
         lineStyle: {
-            color: '#6E7079',
+            color: tokens.color.axisLine,
             width: 1,
             type: 'solid'
         },
@@ -89,14 +90,15 @@ const defaultOption: AxisBaseOption = {
         showMaxLabel: null,
         margin: 8,
         // formatter: null,
-        fontSize: 12
+        fontSize: 12,
+        color: tokens.color.axisLabel
     },
     splitLine: {
         show: true,
         showMinLine: true,
         showMaxLine: true,
         lineStyle: {
-            color: ['#E0E6F1'],
+            color: tokens.color.axisSplitLine,
             width: 1,
             type: 'solid'
         }
@@ -104,7 +106,10 @@ const defaultOption: AxisBaseOption = {
     splitArea: {
         show: false,
         areaStyle: {
-            color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)']
+            color: [
+                tokens.color.backgroundTint,
+                tokens.color.backgroundTransparent
+            ]
         }
     }
 };
@@ -166,7 +171,7 @@ const valueAxis: AxisBaseOption = zrUtil.merge({
         show: false,
 
         lineStyle: {
-            color: '#F4F7FD',
+            color: tokens.color.axisMinorSplitLine,
             width: 1
         }
     }
diff --git a/src/coord/calendar/CalendarModel.ts b/src/coord/calendar/CalendarModel.ts
index 98e9049346..e5eb51778b 100644
--- a/src/coord/calendar/CalendarModel.ts
+++ b/src/coord/calendar/CalendarModel.ts
@@ -36,6 +36,7 @@ import {
 } from '../../util/types';
 import GlobalModel from '../../model/Global';
 import Model from '../../model/Model';
+import tokens from '../../visual/tokens';
 
 export interface CalendarMonthLabelFormatterCallbackParams {
     nameMap: string
@@ -198,7 +199,7 @@ class CalendarModel extends ComponentModel<CalendarOption> {
         splitLine: {
             show: true,
             lineStyle: {
-                color: '#000',
+                color: tokens.color.axisLineTint,
                 width: 1,
                 type: 'solid'
             }
@@ -206,9 +207,9 @@ class CalendarModel extends ComponentModel<CalendarOption> {
 
         // rect style  temporarily unused emphasis
         itemStyle: {
-            color: '#fff',
+            color: tokens.color.neutral00,
             borderWidth: 1,
-            borderColor: '#ccc'
+            borderColor: tokens.color.neutral10
         },
 
         // week text style
@@ -220,7 +221,7 @@ class CalendarModel extends ComponentModel<CalendarOption> {
             // start end
             position: 'start',
             margin: '50%', // 50% of cellSize
-            color: '#000'
+            color: tokens.color.tertiary
         },
 
         // month text style
@@ -235,7 +236,7 @@ class CalendarModel extends ComponentModel<CalendarOption> {
             align: 'center',
 
             formatter: null,
-            color: '#000'
+            color: tokens.color.secondary
         },
 
         // year text style
@@ -246,7 +247,7 @@ class CalendarModel extends ComponentModel<CalendarOption> {
             position: null,
             margin: 30,
             formatter: null,
-            color: '#ccc',
+            color: tokens.color.neutral40,
             fontFamily: 'sans-serif',
             fontWeight: 'bolder',
             fontSize: 20
diff --git a/src/coord/cartesian/GridModel.ts b/src/coord/cartesian/GridModel.ts
index 85624551f8..046e307e90 100644
--- a/src/coord/cartesian/GridModel.ts
+++ b/src/coord/cartesian/GridModel.ts
@@ -63,7 +63,7 @@ class GridModel extends ComponentModel<GridOption> implements CoordinateSystemHo
         // height: {totalHeight} - top - bottom,
         backgroundColor: tokens.color.transparent,
         borderWidth: 1,
-        borderColor: '#ccc'
+        borderColor: tokens.color.neutral30
     };
 }
 
diff --git a/src/coord/geo/GeoModel.ts b/src/coord/geo/GeoModel.ts
index 00ceaffe0c..a34a5267b0 100644
--- a/src/coord/geo/GeoModel.ts
+++ b/src/coord/geo/GeoModel.ts
@@ -41,6 +41,7 @@ import {
 import { GeoProjection, NameMap } from './geoTypes';
 import GlobalModel from '../../model/Global';
 import geoSourceManager from './geoSourceManager';
+import tokens from '../../visual/tokens';
 
 
 export interface GeoItemStyleOption<TCbParams = never> extends ItemStyleOption<TCbParams> {
@@ -188,12 +189,12 @@ class GeoModel extends ComponentModel<GeoOption> {
 
         label: {
             show: false,
-            color: '#000'
+            color: tokens.color.secondary
         },
 
         itemStyle: {
             borderWidth: 0.5,
-            borderColor: '#444'
+            borderColor: tokens.color.borderShade,
             // Default color:
             // + geoJSON: #eee
             // + geoSVG: null (use SVG original `fill`)
@@ -203,20 +204,20 @@ class GeoModel extends ComponentModel<GeoOption> {
         emphasis: {
             label: {
                 show: true,
-                color: 'rgb(100,0,0)'
+                color: tokens.color.primary
             },
             itemStyle: {
-                color: 'rgba(255,215,0,0.8)'
+                areaColor: tokens.color.background
             }
         },
 
         select: {
             label: {
                 show: true,
-                color: 'rgb(100,0,0)'
+                color: tokens.color.primary
             },
             itemStyle: {
-                color: 'rgba(255,215,0,0.8)'
+                color: tokens.color.backgroundShade
             }
         },
 
@@ -232,7 +233,7 @@ class GeoModel extends ComponentModel<GeoOption> {
         if (source && source.type === 'geoJSON') {
             const itemStyle = option.itemStyle = option.itemStyle || {};
             if (!('color' in itemStyle)) {
-                itemStyle.color = '#eee';
+                itemStyle.color = tokens.color.backgroundTint;
             }
         }
 
diff --git a/src/coord/radar/RadarModel.ts b/src/coord/radar/RadarModel.ts
index e3728c1108..dbf9b7a460 100644
--- a/src/coord/radar/RadarModel.ts
+++ b/src/coord/radar/RadarModel.ts
@@ -32,6 +32,7 @@ import { AxisBaseOption, CategoryAxisBaseOption, ValueAxisBaseOption } from '../
 import { AxisBaseModel } from '../AxisBaseModel';
 import Radar from './Radar';
 import {CoordinateSystemHostModel} from '../../coord/CoordinateSystem';
+import tokens from '../../visual/tokens';
 
 const valueAxisDefault = axisDefault.value;
 
@@ -206,7 +207,7 @@ class RadarModel extends ComponentModel<RadarOption> implements CoordinateSystem
         axisLine: zrUtil.merge(
             {
                 lineStyle: {
-                    color: '#bbb'
+                    color: tokens.color.axisSplitLine
                 }
             },
             valueAxisDefault.axisLine
diff --git a/src/loading/default.ts b/src/loading/default.ts
index f0ebc55af6..a6bcb499f0 100644
--- a/src/loading/default.ts
+++ b/src/loading/default.ts
@@ -21,6 +21,7 @@ import * as zrUtil from 'zrender/src/core/util';
 import * as graphic from '../util/graphic';
 import { LoadingEffect } from '../util/types';
 import ExtensionAPI from '../core/ExtensionAPI';
+import tokens from '../visual/tokens';
 
 const PI = Math.PI;
 
@@ -52,14 +53,14 @@ export default function defaultLoading(
     opts = opts || {};
     zrUtil.defaults(opts, {
         text: 'loading',
-        textColor: '#000',
+        textColor: tokens.color.primary,
         fontSize: 12,
         fontWeight: 'normal',
         fontStyle: 'normal',
         fontFamily: 'sans-serif',
-        maskColor: 'rgba(255, 255, 255, 0.8)',
+        maskColor: tokens.color.backgroundTint,
         showSpinner: true,
-        color: '#5470c6',
+        color: tokens.color.theme[0],
         spinnerRadius: 10,
         lineWidth: 5,
         zlevel: 0
diff --git a/src/model/globalDefault.ts b/src/model/globalDefault.ts
index a0445e11a7..58c7e867b2 100644
--- a/src/model/globalDefault.ts
+++ b/src/model/globalDefault.ts
@@ -37,7 +37,7 @@ export default {
 
     color: tokens.color.theme,
 
-    gradientColor: ['#f6efa6', '#d88273', '#bf444c'],
+    gradientColor: tokens.color.visualGradient,
 
     aria: {
         decal: {
diff --git a/src/util/styleCompat.ts b/src/util/styleCompat.ts
index 32bf54bdcd..d69499ad65 100644
--- a/src/util/styleCompat.ts
+++ b/src/util/styleCompat.ts
@@ -22,6 +22,7 @@ import { ElementTextConfig } from 'zrender/src/Element';
 import { TextStyleProps, TextStylePropsPart, TextProps } from 'zrender/src/graphic/Text';
 import { each, hasOwn } from 'zrender/src/core/util';
 import { ItemStyleProps } from '../model/mixin/itemStyle';
+import tokens from '../visual/tokens';
 
 export interface LegacyStyleProps {
     legacy?: boolean
@@ -180,14 +181,14 @@ export function convertToEC4StyleForCustomSerise(
     txCfg.distance != null && (out.textDistance = txCfg.distance);
 
     const isInside = (out.textPosition as string).indexOf('inside') >= 0;
-    const hostFill = itemStl.fill || '#000';
+    const hostFill = itemStl.fill || tokens.color.neutral99;
 
     convertToEC4RichItem(out, txStl);
 
     const textFillNotSet = out.textFill == null;
     if (isInside) {
         if (textFillNotSet) {
-            out.textFill = txCfg.insideFill || '#fff';
+            out.textFill = txCfg.insideFill || tokens.color.neutral00;
             !out.textStroke && txCfg.insideStroke && (out.textStroke = txCfg.insideStroke);
             !out.textStroke && (out.textStroke = hostFill);
             out.textStrokeWidth == null && (out.textStrokeWidth = 2);
@@ -195,7 +196,7 @@ export function convertToEC4StyleForCustomSerise(
     }
     else {
         if (textFillNotSet) {
-            out.textFill = itemStl.fill || txCfg.outsideFill || '#000';
+            out.textFill = itemStl.fill || txCfg.outsideFill || tokens.color.neutral00;
         }
         !out.textStroke && txCfg.outsideStroke && (out.textStroke = txCfg.outsideStroke);
     }
diff --git a/src/util/symbol.ts b/src/util/symbol.ts
index fed92641e5..9d88810378 100644
--- a/src/util/symbol.ts
+++ b/src/util/symbol.ts
@@ -26,6 +26,7 @@ import { calculateTextPosition } from 'zrender/src/contain/text';
 import { Dictionary } from 'zrender/src/core/types';
 import { SymbolOptionMixin, ZRColor } from './types';
 import { parsePercent } from './number';
+import tokens from '../visual/tokens';
 
 export type ECSymbol = graphic.Path & {
     __isEmptyBrush?: boolean
@@ -312,7 +313,7 @@ function symbolPathSetColor(this: ECSymbol, color: ZRColor, innerColor?: ZRColor
         const symbolStyle = this.style;
         if (this.__isEmptyBrush) {
             symbolStyle.stroke = color;
-            symbolStyle.fill = innerColor || '#fff';
+            symbolStyle.fill = innerColor || tokens.color.neutral00;
             // TODO Same width with lineStyle in LineView
             symbolStyle.lineWidth = 2;
         }
diff --git a/src/visual/tokens.ts b/src/visual/tokens.ts
index 0355edf74b..060164039e 100644
--- a/src/visual/tokens.ts
+++ b/src/visual/tokens.ts
@@ -13,24 +13,24 @@ const tokens = {
         ],
 
         neutral00: '#fff',
-        neutral05: '#eaedf5',
-        neutral10: '#dee1e9',
-        neutral15: '#d3d5dd',
-        neutral20: '#c7c9d1',
-        neutral25: '#bbbdc5',
-        neutral30: '#afb2b8',
-        neutral35: '#a4a6ac',
-        neutral40: '#989aa0',
-        neutral45: '#8c8e94',
-        neutral50: '#818288',
-        neutral55: '#75767c',
-        neutral60: '#696a70',
-        neutral65: '#5d5e64',
-        neutral70: '#525258',
-        neutral75: '#46474b',
-        neutral80: '#3a3b3f',
-        neutral85: '#2e2f33',
-        neutral90: '#232327',
+        neutral05: '#f4f7fd',
+        neutral10: '#e8ebf0',
+        neutral15: '#dbdee4',
+        neutral20: '#cfd2d7',
+        neutral25: '#c3c5cb',
+        neutral30: '#b7b9be',
+        neutral35: '#aaacb2',
+        neutral40: '#9ea0a5',
+        neutral45: '#929399',
+        neutral50: '#86878c',
+        neutral55: '#797b7f',
+        neutral60: '#6d6e73',
+        neutral65: '#616266',
+        neutral70: '#54555a',
+        neutral75: '#48494d',
+        neutral80: '#3c3c41',
+        neutral85: '#303034',
+        neutral90: '#232328',
         neutral95: '#17171b',
         neutral99: '#000',
 
@@ -44,6 +44,8 @@ const tokens = {
         accent80: '#313e6b',
         accent90: '#242a43',
 
+        visualGradient: ['#f05252', '#ffbc85', '#fff5c5'],
+
         transparent: 'rgba(0,0,0,0)',
 
         primary: '@neutral80',
@@ -58,15 +60,19 @@ const tokens = {
 
         background: '@neutral05',
         backgroundTint: 'rgba(234,237,245,0.5)',
+        backgroundTransparent: 'rgba(255,255,255,0)',
         backgroundShade: '@neutral10',
 
         shadow: 'rgba(0,0,0,0.2)',
         shadowTint: 'rgba(129,130,136,0.2)',
 
         axisLine: '@neutral70',
+        axisLineTint: '@neutral40',
         axisTick: '@axisLine',
         axisTickMinor: '@neutral60',
-        axisLabel: '@axisLine'
+        axisLabel: '@axisLine',
+        axisSplitLine: '@neutral15',
+        axisMinorSplitLine: '@neutral05'
     }
 } as const;
 
diff --git a/src/visual/visualDefault.ts b/src/visual/visualDefault.ts
index 9eb10dec40..d3e32f326b 100644
--- a/src/visual/visualDefault.ts
+++ b/src/visual/visualDefault.ts
@@ -45,7 +45,7 @@ const defaultOption: {[key: string]: {
 }} = {
 
     color: {
-        active: ['#006edd', '#e0ffff'],
+        active: [tokens.color.accent70, tokens.color.accent20],
         inactive: [tokens.color.transparent]
     },
 

From 6629fb2cd98d7b09a23a176cb12ddcec48c354f1 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Wed, 9 Apr 2025 19:09:55 +0800
Subject: [PATCH 06/27] feat: update dataZoom theme

---
 src/component/dataZoom/SliderZoomModel.ts | 18 +++++++++---------
 src/component/toolbox/ToolboxModel.ts     |  4 ++--
 src/visual/tokens.ts                      | 18 ++++++++++++++----
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/component/dataZoom/SliderZoomModel.ts b/src/component/dataZoom/SliderZoomModel.ts
index 728a4a7d15..e33a5999f8 100644
--- a/src/component/dataZoom/SliderZoomModel.ts
+++ b/src/component/dataZoom/SliderZoomModel.ts
@@ -148,7 +148,7 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
         left: null,   // Default align to grid rect.
         bottom: null, // Default align to grid rect.
 
-        borderColor: tokens.color.borderTint,
+        borderColor: tokens.color.accent10,
         borderRadius: 0,
 
         backgroundColor: tokens.color.transparent, // Background of slider zoom component.
@@ -156,22 +156,22 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
         // dataBackgroundColor: '#ddd',
         dataBackground: {
             lineStyle: {
-                color: tokens.color.border,
+                color: tokens.color.accent30,
                 width: 0.5
             },
             areaStyle: {
-                color: tokens.color.neutral30,
+                color: tokens.color.accent20,
                 opacity: 0.2
             }
         },
 
         selectedDataBackground: {
             lineStyle: {
-                color: tokens.color.border,
+                color: tokens.color.accent50,
                 width: 0.5
             },
             areaStyle: {
-                color: tokens.color.neutral30,
+                color: tokens.color.accent30,
                 opacity: 0.2
             }
         },
@@ -184,14 +184,14 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
 
         handleStyle: {
             color: tokens.color.neutral00,
-            borderColor: tokens.color.border
+            borderColor: tokens.color.accent20
         },
 
         moveHandleSize: 7,
         moveHandleIcon: 'path://M-320.9-50L-320.9-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-348-41-339-50-320.9-50z M-212.3-50L-212.3-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-239.4-41-230.4-50-212.3-50z M-103.7-50L-103.7-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-130.9-41-121.8-50-103.7-50z',
         moveHandleStyle: {
-            color: tokens.color.quaternary,
-            opacity: 0.3
+            color: tokens.color.accent30,
+            opacity: 0.5
         },
 
         showDetail: true,
@@ -213,7 +213,7 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
                 show: true
             },
             handleStyle: {
-                borderColor: tokens.color.neutral30
+                borderColor: tokens.color.accent30
             },
             moveHandleStyle: {
                 opacity: 0.8
diff --git a/src/component/toolbox/ToolboxModel.ts b/src/component/toolbox/ToolboxModel.ts
index b28e0c3202..9847692604 100644
--- a/src/component/toolbox/ToolboxModel.ts
+++ b/src/component/toolbox/ToolboxModel.ts
@@ -136,12 +136,12 @@ class ToolboxModel extends ComponentModel<ToolboxOption> {
         showTitle: true,
 
         iconStyle: {
-            borderColor: tokens.color.accent50,
+            borderColor: tokens.color.neutral50,
             color: 'none'
         },
         emphasis: {
             iconStyle: {
-                borderColor: tokens.color.accent40
+                borderColor: tokens.color.neutral40
             }
         },
         // textStyle: {},
diff --git a/src/visual/tokens.ts b/src/visual/tokens.ts
index 060164039e..624ae70fb0 100644
--- a/src/visual/tokens.ts
+++ b/src/visual/tokens.ts
@@ -34,15 +34,25 @@ const tokens = {
         neutral95: '#17171b',
         neutral99: '#000',
 
+        accent05: '#eef2fc',
         accent10: '#dee4f9',
+        accent15: '#cdd7f7',
         accent20: '#bdc9f4',
+        accent25: '#acbcf1',
         accent30: '#9baeee',
+        accent35: '#8ba1eb',
         accent40: '#7a93e9',
+        accent45: '#6a86e6',
         accent50: '#5978e3',
-        accent60: '#4c65bb',
-        accent70: '#3f5193',
-        accent80: '#313e6b',
-        accent90: '#242a43',
+        accent55: '#506ccc',
+        accent60: '#4760b6',
+        accent65: '#3e549f',
+        accent70: '#354888',
+        accent75: '#2d3c72',
+        accent80: '#24305b',
+        accent85: '#1b2444',
+        accent90: '#12182d',
+        accent95: '#090c17',
 
         visualGradient: ['#f05252', '#ffbc85', '#fff5c5'],
 

From c88e9f73cfe6b6280f850d5a8654f4bf79c9c6d4 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Thu, 24 Apr 2025 18:17:35 +0800
Subject: [PATCH 07/27] feat: update themes

---
 src/chart/funnel/FunnelSeries.ts              |   2 +-
 src/chart/line/LineSeries.ts                  |   4 +-
 src/chart/map/MapSeries.ts                    |   4 +-
 src/chart/pie/PieSeries.ts                    |   6 +-
 src/chart/sunburst/sunburstVisual.ts          |   6 +
 src/chart/treemap/TreemapSeries.ts            |  10 +-
 src/component/dataZoom/SliderZoomModel.ts     |   8 +-
 src/component/dataZoom/SliderZoomView.ts      |   2 +-
 src/component/legend/LegendModel.ts           |   4 +-
 src/component/timeline/SliderTimelineModel.ts |  54 +--
 src/component/timeline/TimelineModel.ts       |   2 +-
 src/component/title/install.ts                |   4 +-
 src/component/toolbox/ToolboxModel.ts         |   8 +-
 src/component/visualMap/VisualMapModel.ts     |   2 +-
 src/coord/axisDefault.ts                      |   6 +-
 src/coord/calendar/CalendarModel.ts           |  10 +-
 src/coord/cartesian/GridModel.ts              |   8 +-
 src/model/globalDefault.ts                    |   2 +-
 src/visual/tokens.ts                          |  22 +-
 test/theme-list.html                          | 448 ++++++++++++++++++
 20 files changed, 535 insertions(+), 77 deletions(-)
 create mode 100644 test/theme-list.html

diff --git a/src/chart/funnel/FunnelSeries.ts b/src/chart/funnel/FunnelSeries.ts
index 123c9f551e..6de44d5c10 100644
--- a/src/chart/funnel/FunnelSeries.ts
+++ b/src/chart/funnel/FunnelSeries.ts
@@ -155,7 +155,7 @@ class FunnelSeriesModel extends SeriesModel<FunnelSeriesOption> {
         left: 80,
         top: 60,
         right: 80,
-        bottom: 60,
+        bottom: 65,
         // width: {totalWidth} - left - right,
         // height: {totalHeight} - top - bottom,
 
diff --git a/src/chart/line/LineSeries.ts b/src/chart/line/LineSeries.ts
index 001a32220a..99417fc817 100644
--- a/src/chart/line/LineSeries.ts
+++ b/src/chart/line/LineSeries.ts
@@ -167,7 +167,7 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
         },
 
         lineStyle: {
-            width: 2,
+            width: 3,
             type: 'solid'
         },
 
@@ -188,7 +188,7 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
         smooth: false,
         smoothMonotone: null,
         symbol: 'emptyCircle',
-        symbolSize: 4,
+        symbolSize: 8,
         symbolRotate: null,
 
         showSymbol: true,
diff --git a/src/chart/map/MapSeries.ts b/src/chart/map/MapSeries.ts
index 1258d63e06..cb49bc4464 100644
--- a/src/chart/map/MapSeries.ts
+++ b/src/chart/map/MapSeries.ts
@@ -329,7 +329,7 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
         itemStyle: {
             borderWidth: 0.5,
             borderColor: tokens.color.border,
-            areaColor: tokens.color.backgroundTint
+            areaColor: tokens.color.background
         },
 
         emphasis: {
@@ -338,7 +338,7 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
                 color: tokens.color.primary
             },
             itemStyle: {
-                areaColor: tokens.color.background
+                areaColor: tokens.color.backgroundShade
             }
         },
 
diff --git a/src/chart/pie/PieSeries.ts b/src/chart/pie/PieSeries.ts
index 13e220dc58..43ac8f7ce9 100644
--- a/src/chart/pie/PieSeries.ts
+++ b/src/chart/pie/PieSeries.ts
@@ -216,7 +216,7 @@ class PieSeriesModel extends SeriesModel<PieSeriesOption> {
         colorBy: 'data',
         // 默认全局居中
         center: ['50%', '50%'],
-        radius: [0, '75%'],
+        radius: [0, '50%'],
         // 默认顺时针
         clockwise: true,
         startAngle: 90,
@@ -278,13 +278,13 @@ class PieSeriesModel extends SeriesModel<PieSeriesOption> {
             // 引导线两段中的第一段长度
             length: 15,
             // 引导线两段中的第二段长度
-            length2: 15,
+            length2: 30,
             smooth: false,
             minTurnAngle: 90,
             maxSurfaceAngle: 90,
             lineStyle: {
                 // color: 各异,
-                width: 1,
+                width: 2,
                 type: 'solid'
             }
         },
diff --git a/src/chart/sunburst/sunburstVisual.ts b/src/chart/sunburst/sunburstVisual.ts
index 134fc14531..0113cd56fc 100644
--- a/src/chart/sunburst/sunburstVisual.ts
+++ b/src/chart/sunburst/sunburstVisual.ts
@@ -23,6 +23,7 @@ import GlobalModel from '../../model/Global';
 import SunburstSeriesModel, { SunburstSeriesNodeItemOption } from './SunburstSeries';
 import { Dictionary, ColorString } from '../../util/types';
 import { TreeNode } from '../../data/Tree';
+import tokens from '../../visual/tokens';
 
 export default function sunburstVisual(ecModel: GlobalModel) {
 
@@ -30,6 +31,11 @@ export default function sunburstVisual(ecModel: GlobalModel) {
 
     // Default color strategy
     function pickColor(node: TreeNode, seriesModel: SunburstSeriesModel, treeHeight: number) {
+        if (node.depth === 0) {
+            // Don't use palette color for the root node, because it's displayed only when drilling down.
+            return tokens.color.neutral50;
+        }
+
         // Choose color from palette based on the first level.
         let current = node;
         while (current && current.depth > 1) {
diff --git a/src/chart/treemap/TreemapSeries.ts b/src/chart/treemap/TreemapSeries.ts
index e0a222ad11..b12f7a0578 100644
--- a/src/chart/treemap/TreemapSeries.ts
+++ b/src/chart/treemap/TreemapSeries.ts
@@ -245,10 +245,10 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
         // Disable progressive rendering
         progressive: 0,
         // size: ['80%', '80%'],            // deprecated, compatible with ec2.
-        left: 'center',
-        top: 'middle',
-        width: '80%',
-        height: '80%',
+        left: tokens.size.l,
+        top: tokens.size.xxxl,
+        right: tokens.size.l,
+        bottom: tokens.size.xxxl,
         sort: true,
 
         clipWindow: 'origin',
@@ -271,7 +271,7 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
             show: true,
             height: 22,
             left: 'center',
-            top: 'bottom',
+            bottom: tokens.size.m,
             // right
             // bottom
             emptyItemWidth: 25,             // Width of empty node.
diff --git a/src/component/dataZoom/SliderZoomModel.ts b/src/component/dataZoom/SliderZoomModel.ts
index e33a5999f8..69d87327c3 100644
--- a/src/component/dataZoom/SliderZoomModel.ts
+++ b/src/component/dataZoom/SliderZoomModel.ts
@@ -172,7 +172,7 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
             },
             areaStyle: {
                 color: tokens.color.accent30,
-                opacity: 0.2
+                opacity: 0.5
             }
         },
 
@@ -190,7 +190,7 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
         moveHandleSize: 7,
         moveHandleIcon: 'path://M-320.9-50L-320.9-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-348-41-339-50-320.9-50z M-212.3-50L-212.3-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-239.4-41-230.4-50-212.3-50z M-103.7-50L-103.7-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-130.9-41-121.8-50-103.7-50z',
         moveHandleStyle: {
-            color: tokens.color.accent30,
+            color: tokens.color.accent40,
             opacity: 0.5
         },
 
@@ -200,7 +200,7 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
         zoomLock: false,                        // Whether disable zoom.
 
         textStyle: {
-            color: tokens.color.quaternary
+            color: tokens.color.tertiary
         },
 
         brushSelect: true,
@@ -213,7 +213,7 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
                 show: true
             },
             handleStyle: {
-                borderColor: tokens.color.accent30
+                borderColor: tokens.color.accent50
             },
             moveHandleStyle: {
                 opacity: 0.8
diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts
index 6fd9bcdf55..e3fb149c63 100644
--- a/src/component/dataZoom/SliderZoomView.ts
+++ b/src/component/dataZoom/SliderZoomView.ts
@@ -48,7 +48,7 @@ import tokens from '../../visual/tokens';
 const Rect = graphic.Rect;
 
 // Constants
-const DEFAULT_LOCATION_EDGE_GAP = 7;
+const DEFAULT_LOCATION_EDGE_GAP = 15;
 const DEFAULT_FRAME_BORDER_WIDTH = 1;
 const DEFAULT_FILLER_SIZE = 30;
 const DEFAULT_MOVE_HANDLE_SIZE = 7;
diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts
index 5c462db3fc..76a6f1a8e5 100644
--- a/src/component/legend/LegendModel.ts
+++ b/src/component/legend/LegendModel.ts
@@ -453,8 +453,8 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
 
         left: 'center',
         // right: 'center',
-        top: 0,
-        // bottom: null,
+        // top: 0,
+        bottom: tokens.size.m,
 
         align: 'auto',
 
diff --git a/src/component/timeline/SliderTimelineModel.ts b/src/component/timeline/SliderTimelineModel.ts
index ec20bc948b..91429e8e30 100644
--- a/src/component/timeline/SliderTimelineModel.ts
+++ b/src/component/timeline/SliderTimelineModel.ts
@@ -22,6 +22,7 @@ import { DataFormatMixin } from '../../model/mixin/dataFormat';
 import { mixin } from 'zrender/src/core/util';
 import SeriesData from '../../data/SeriesData';
 import { inheritDefaultOption } from '../../util/component';
+import tokens from '../../visual/tokens';
 
 export interface SliderTimelineOption extends TimelineOption {
 }
@@ -37,7 +38,7 @@ class SliderTimelineModel extends TimelineModel {
     static defaultOption: SliderTimelineOption = inheritDefaultOption(TimelineModel.defaultOption, {
 
         backgroundColor: 'rgba(0,0,0,0)',   // 时间轴背景颜色
-        borderColor: '#ccc',               // 时间轴边框颜色
+        borderColor: tokens.color.border,     // 时间轴边框颜色
         borderWidth: 0,                    // 时间轴边框线宽，单位px，默认为0（无边框）
 
         orient: 'horizontal',              // 'vertical'
@@ -53,7 +54,7 @@ class SliderTimelineModel extends TimelineModel {
         lineStyle: {
             show: true,
             width: 2,
-            color: '#DAE1F5'
+            color: tokens.color.accent10
         },
         label: {                            // 文本标签
             position: 'auto',           // auto left right top bottom
@@ -65,23 +66,23 @@ class SliderTimelineModel extends TimelineModel {
             rotate: 0,
             // formatter: null,
             // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-            color: '#A4B1D7'
+            color: tokens.color.tertiary
         },
         itemStyle: {
-            color: '#A4B1D7',
-            borderWidth: 1
+            color: tokens.color.accent20,
+            borderWidth: 0
         },
 
         checkpointStyle: {
             symbol: 'circle',
             symbolSize: 15,
-            color: '#316bf3',
-            borderColor: '#fff',
-            borderWidth: 2,
-            shadowBlur: 2,
-            shadowOffsetX: 1,
-            shadowOffsetY: 1,
-            shadowColor: 'rgba(0, 0, 0, 0.3)',
+            color: tokens.color.accent50,
+            borderColor: tokens.color.accent50,
+            borderWidth: 0,
+            shadowBlur: 0,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowColor: 'rgba(0, 0, 0, 0)',
             // borderColor: 'rgba(194,53,49, 0.5)',
             animation: true,
             animationDuration: 300,
@@ -99,47 +100,42 @@ class SliderTimelineModel extends TimelineModel {
 
             position: 'left',  // 'left' 'right' 'top' 'bottom'
 
-            playIcon: 'path://M31.6,53C17.5,53,6,41.5,6,27.4S17.5,1.8,31.6,1.8C45.7,1.8,57.2,13.3,57.2,27.4S45.7,53,31.6,53z M31.6,3.3 C18.4,3.3,7.5,14.1,7.5,27.4c0,13.3,10.8,24.1,24.1,24.1C44.9,51.5,55.7,40.7,55.7,27.4C55.7,14.1,44.9,3.3,31.6,3.3z M24.9,21.3 c0-2.2,1.6-3.1,3.5-2l10.5,6.1c1.899,1.1,1.899,2.9,0,4l-10.5,6.1c-1.9,1.1-3.5,0.2-3.5-2V21.3z', // jshint ignore:line
-            stopIcon: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z', // jshint ignore:line
+            playIcon: 'path://M15 0C23.2843 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15C0 6.71573 6.71573 0 15 0ZM15 3C8.37258 3 3 8.37258 3 15C3 21.6274 8.37258 27 15 27C21.6274 27 27 21.6274 27 15C27 8.37258 21.6274 3 15 3ZM11.5 10.6699C11.5 9.90014 12.3333 9.41887 13 9.80371L20.5 14.1338C21.1667 14.5187 21.1667 15.4813 20.5 15.8662L13 20.1963C12.3333 20.5811 11.5 20.0999 11.5 19.3301V10.6699Z', // jshint ignore:line
+            stopIcon: 'path://M15 0C23.2843 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15C0 6.71573 6.71573 0 15 0ZM15 3C8.37258 3 3 8.37258 3 15C3 21.6274 8.37258 27 15 27C21.6274 27 27 21.6274 27 15C27 8.37258 21.6274 3 15 3ZM11.5 10C12.3284 10 13 10.6716 13 11.5V18.5C13 19.3284 12.3284 20 11.5 20C10.6716 20 10 19.3284 10 18.5V11.5C10 10.6716 10.6716 10 11.5 10ZM18.5 10C19.3284 10 20 10.6716 20 11.5V18.5C20 19.3284 19.3284 20 18.5 20C17.6716 20 17 19.3284 17 18.5V11.5C17 10.6716 17.6716 10 18.5 10Z', // jshint ignore:line
             // eslint-disable-next-line max-len
-            nextIcon: 'M2,18.5A1.52,1.52,0,0,1,.92,18a1.49,1.49,0,0,1,0-2.12L7.81,9.36,1,3.11A1.5,1.5,0,1,1,3,.89l8,7.34a1.48,1.48,0,0,1,.49,1.09,1.51,1.51,0,0,1-.46,1.1L3,18.08A1.5,1.5,0,0,1,2,18.5Z', // jshint ignore:line
+            nextIcon: 'path://M0.838834 18.7383C0.253048 18.1525 0.253048 17.2028 0.838834 16.617L7.55635 9.89949L0.838834 3.18198C0.253048 2.59619 0.253048 1.64645 0.838834 1.06066C1.42462 0.474874 2.37437 0.474874 2.96015 1.06066L10.7383 8.83883L10.8412 8.95277C11.2897 9.50267 11.2897 10.2963 10.8412 10.8462L10.7383 10.9602L2.96015 18.7383C2.37437 19.3241 1.42462 19.3241 0.838834 18.7383Z', // jshint ignore:line
             // eslint-disable-next-line max-len
-            prevIcon: 'M10,.5A1.52,1.52,0,0,1,11.08,1a1.49,1.49,0,0,1,0,2.12L4.19,9.64,11,15.89a1.5,1.5,0,1,1-2,2.22L1,10.77A1.48,1.48,0,0,1,.5,9.68,1.51,1.51,0,0,1,1,8.58L9,.92A1.5,1.5,0,0,1,10,.5Z', // jshint ignore:line
+            prevIcon: 'path://M10.9602 1.06066C11.5459 1.64645 11.5459 2.59619 10.9602 3.18198L4.24264 9.89949L10.9602 16.617C11.5459 17.2028 11.5459 18.1525 10.9602 18.7383C10.3744 19.3241 9.42462 19.3241 8.83883 18.7383L1.06066 10.9602L0.957771 10.8462C0.509245 10.2963 0.509245 9.50267 0.957771 8.95277L1.06066 8.83883L8.83883 1.06066C9.42462 0.474874 10.3744 0.474874 10.9602 1.06066Z', // jshint ignore:line
 
             prevBtnSize: 18,
             nextBtnSize: 18,
 
-            color: '#A4B1D7',
-            borderColor: '#A4B1D7',
-            borderWidth: 1
+            color: tokens.color.accent30,
+            borderColor: tokens.color.accent30,
+            borderWidth: 0
         },
         emphasis: {
             label: {
                 show: true,
                 // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                color: '#6f778d'
+                color: tokens.color.accent60
             },
 
             itemStyle: {
-                color: '#316BF3'
+                color: tokens.color.accent40
             },
 
             controlStyle: {
-                color: '#316BF3',
-                borderColor: '#316BF3',
-                borderWidth: 2
+                color: tokens.color.accent40
             }
         },
 
         progress: {
             lineStyle: {
-                color: '#316BF3'
+                color: tokens.color.accent20
             },
             itemStyle: {
-                color: '#316BF3'
-            },
-            label: {
-                color: '#6f778d'
+                color: tokens.color.accent40
             }
         },
 
diff --git a/src/component/timeline/TimelineModel.ts b/src/component/timeline/TimelineModel.ts
index 6d2c2e7470..3027dcedc0 100644
--- a/src/component/timeline/TimelineModel.ts
+++ b/src/component/timeline/TimelineModel.ts
@@ -316,7 +316,7 @@ class TimelineModel extends ComponentModel<TimelineOption> {
         bottom: 0,
         width: null,
         height: 40,
-        padding: 5,
+        padding: tokens.size.m,
 
         controlPosition: 'left',           // 'left' 'right' 'top' 'bottom' 'none'
         autoPlay: false,
diff --git a/src/component/title/install.ts b/src/component/title/install.ts
index fed4ac717f..f0afc95fa7 100644
--- a/src/component/title/install.ts
+++ b/src/component/title/install.ts
@@ -107,8 +107,8 @@ class TitleModel extends ComponentModel<TitleOption> {
 
         subtarget: 'blank',
 
-        left: 0,
-        top: 0,
+        left: 'center',
+        top: tokens.size.m,
 
         backgroundColor: tokens.color.transparent,
 
diff --git a/src/component/toolbox/ToolboxModel.ts b/src/component/toolbox/ToolboxModel.ts
index 9847692604..eebd045416 100644
--- a/src/component/toolbox/ToolboxModel.ts
+++ b/src/component/toolbox/ToolboxModel.ts
@@ -127,21 +127,21 @@ class ToolboxModel extends ComponentModel<ToolboxOption> {
 
         borderWidth: 0,
 
-        padding: 5,
+        padding: tokens.size.m,
 
         itemSize: 15,
 
-        itemGap: 8,
+        itemGap: tokens.size.s,
 
         showTitle: true,
 
         iconStyle: {
-            borderColor: tokens.color.neutral50,
+            borderColor: tokens.color.accent30,
             color: 'none'
         },
         emphasis: {
             iconStyle: {
-                borderColor: tokens.color.neutral40
+                borderColor: tokens.color.accent50
             }
         },
         // textStyle: {},
diff --git a/src/component/visualMap/VisualMapModel.ts b/src/component/visualMap/VisualMapModel.ts
index b8f744d380..62821439bc 100644
--- a/src/component/visualMap/VisualMapModel.ts
+++ b/src/component/visualMap/VisualMapModel.ts
@@ -626,7 +626,7 @@ class VisualMapModel<Opts extends VisualMapOption = VisualMapOption> extends Com
         contentColor: tokens.color.theme[0],
         inactiveColor: tokens.color.disabled,
         borderWidth: 0,
-        padding: 5,
+        padding: tokens.size.m,
                                     // 接受数组分别设定上右下左边距，同css
         textGap: 10,               //
         precision: 0,              // 小数精度，默认为0，无小数点
diff --git a/src/coord/axisDefault.ts b/src/coord/axisDefault.ts
index 9e2df54ec1..fbb4380526 100644
--- a/src/coord/axisDefault.ts
+++ b/src/coord/axisDefault.ts
@@ -70,7 +70,7 @@ const defaultOption: AxisBaseOption = {
         breakLine: true,
     },
     axisTick: {
-        show: true,
+        show: false,
         // Whether axisTick is inside the grid or outside the grid.
         inside: false,
         // The length of axisTick.
@@ -121,10 +121,10 @@ const defaultOption: AxisBaseOption = {
     breakArea: {
         show: true,
         itemStyle: {
-            color: '#fff',
+            color: tokens.color.neutral00,
             // Break border color should be darker than the splitLine
             // because it has opacity and should be more prominent
-            borderColor: '#C2CADA',
+            borderColor: tokens.color.border,
             borderWidth: 1,
             borderType: [3, 3],
             opacity: 0.6
diff --git a/src/coord/calendar/CalendarModel.ts b/src/coord/calendar/CalendarModel.ts
index e5eb51778b..bae545a0a5 100644
--- a/src/coord/calendar/CalendarModel.ts
+++ b/src/coord/calendar/CalendarModel.ts
@@ -199,7 +199,7 @@ class CalendarModel extends ComponentModel<CalendarOption> {
         splitLine: {
             show: true,
             lineStyle: {
-                color: tokens.color.axisLineTint,
+                color: tokens.color.neutral60,
                 width: 1,
                 type: 'solid'
             }
@@ -220,7 +220,7 @@ class CalendarModel extends ComponentModel<CalendarOption> {
 
             // start end
             position: 'start',
-            margin: '50%', // 50% of cellSize
+            margin: tokens.size.s,
             color: tokens.color.tertiary
         },
 
@@ -230,7 +230,7 @@ class CalendarModel extends ComponentModel<CalendarOption> {
 
             // start end
             position: 'start',
-            margin: 5,
+            margin: tokens.size.s,
 
             // center or left
             align: 'center',
@@ -245,9 +245,9 @@ class CalendarModel extends ComponentModel<CalendarOption> {
 
             // top bottom left right
             position: null,
-            margin: 30,
+            margin: tokens.size.xl,
             formatter: null,
-            color: tokens.color.neutral40,
+            color: tokens.color.secondary,
             fontFamily: 'sans-serif',
             fontWeight: 'bolder',
             fontSize: 20
diff --git a/src/coord/cartesian/GridModel.ts b/src/coord/cartesian/GridModel.ts
index 046e307e90..306661af6e 100644
--- a/src/coord/cartesian/GridModel.ts
+++ b/src/coord/cartesian/GridModel.ts
@@ -53,12 +53,12 @@ class GridModel extends ComponentModel<GridOption> implements CoordinateSystemHo
         show: false,
         // zlevel: 0,
         z: 0,
-        left: '10%',
+        left: tokens.size.xl,
         top: 60,
-        right: '10%',
-        bottom: 70,
+        right: tokens.size.xl,
+        bottom: 65,
         // If grid size contain label
-        containLabel: false,
+        containLabel: true,
         // width: {totalWidth} - left - right,
         // height: {totalHeight} - top - bottom,
         backgroundColor: tokens.color.transparent,
diff --git a/src/model/globalDefault.ts b/src/model/globalDefault.ts
index 58c7e867b2..e5cff9ceb4 100644
--- a/src/model/globalDefault.ts
+++ b/src/model/globalDefault.ts
@@ -37,7 +37,7 @@ export default {
 
     color: tokens.color.theme,
 
-    gradientColor: tokens.color.visualGradient,
+    gradientColor: [tokens.color.accent50, tokens.color.accent10],
 
     aria: {
         decal: {
diff --git a/src/visual/tokens.ts b/src/visual/tokens.ts
index 624ae70fb0..cd13335e86 100644
--- a/src/visual/tokens.ts
+++ b/src/visual/tokens.ts
@@ -5,11 +5,11 @@ const tokens = {
             '#b6d634',
             '#505372',
             '#ff994d',
-            '#5acb92',
-            '#ffd82c',
-            '#e76991',
-            '#6854aa',
-            '#52c4d0'
+            '#4dbbe1',
+            '#ffd10a',
+            '#fb628b',
+            '#785db0',
+            '#3fbe95'
         ],
 
         neutral00: '#fff',
@@ -54,8 +54,6 @@ const tokens = {
         accent90: '#12182d',
         accent95: '#090c17',
 
-        visualGradient: ['#f05252', '#ffbc85', '#fff5c5'],
-
         transparent: 'rgba(0,0,0,0)',
 
         primary: '@neutral80',
@@ -83,6 +81,16 @@ const tokens = {
         axisLabel: '@axisLine',
         axisSplitLine: '@neutral15',
         axisMinorSplitLine: '@neutral05'
+    },
+    size: {
+        xxs: 2,
+        xs: 5,
+        s: 10,
+        m: 15,
+        l: 20,
+        xl: 30,
+        xxl: 40,
+        xxxl: 50
     }
 } as const;
 
diff --git a/test/theme-list.html b/test/theme-list.html
new file mode 100644
index 0000000000..9c5fd6941f
--- /dev/null
+++ b/test/theme-list.html
@@ -0,0 +1,448 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/simpleRequire.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
+        <!-- <script src="lib/testHelper.js"></script> -->
+        <!-- <script src="ut/lib/canteen.js"></script> -->
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+          h1, h2, h3 {
+            margin-left: 15px;
+          }
+
+          #main0 {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            overflow-x: auto;
+            width: 100%;
+          }
+
+          .section {
+            width: 500px;
+            flex-shrink: 0;
+            margin-right: 30px;
+            padding-bottom: 30px;
+          }
+
+          .chart-item {
+            width: 100%;
+            height: 400px;
+            border: 1px solid #ccc;
+            margin: 10px;
+            flex-shrink: 0;
+          }
+
+          #main1, #main0 {
+            width: 4800px;
+          }
+
+          .chart-item-h {
+            width: 500px;
+            height: 400px;
+            border: 1px solid #ccc;
+            margin: 10px 20px 10px 10px;
+            display: inline-block;
+          }
+        </style>
+
+          <h2>Typical charts of different series count</h2>
+          <div id="main0"></div>
+
+          <h2>Components</h2>
+          <div id="main1">
+          </div>
+
+
+
+
+
+
+        <script>
+        require([
+            'echarts',
+            './data/usa.json'
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts, geojson) {
+          echarts.registerMap('USA', geojson, {
+            Alaska: {
+              left: -131,
+              top: 25,
+              width: 15
+            },
+            Hawaii: {
+              left: -110,
+              top: 28,
+              width: 5
+            },
+            'Puerto Rico': {
+              left: -76,
+              top: 26,
+              width: 2
+            }
+          });
+
+          for (let maxSeriesCount = 1; maxSeriesCount <= 9; maxSeriesCount++) {
+
+            const cases = [
+              {
+                type: 'bar',
+                data: 'data2d'
+              },
+              {
+                type: 'line',
+                data: 'data2d'
+              },
+              {
+                type: 'pie',
+                data: 'data1d'
+              },
+              {
+                type: 'scatter',
+                data: 'data2d'
+              },
+              {
+                type: 'funnel',
+                data: 'data1d'
+              },
+              {
+                type: 'treemap',
+                data: 'dataTree'
+              },
+              {
+                type: 'sunburst',
+                data: 'dataTree'
+              },
+              {
+                type: 'themeRiver',
+                data: 'data3d'
+              }
+            ];
+
+            function getData3d() {
+              const data = [];
+              for (let s = 0; s < maxSeriesCount; s++) {
+                for (let i = 0; i < 5; ++i) {
+                  data.push([i, Math.random() * 100, 'S' + s]);
+                }
+              }
+              return data;
+            }
+
+            function getData2d(base) {
+              return [
+                ['Q1', Math.random() * 100 + base],
+                ['Q2', Math.random() * 100 + base],
+                ['Q3', Math.random() * 100 + base],
+                ['Q4', Math.random() * 100 + base]
+              ];
+            }
+
+            function getData1d() {
+              const data = [];
+              for (let i = 0; i < maxSeriesCount; i++) {
+                data.push({
+                  name: `Data ${i + 1}`,
+                  value: (Math.random() + maxSeriesCount - i) * 100,
+                });
+              }
+              return data;
+            }
+
+            function getNodesData() {
+              const data = [];
+              // 2 levels
+              for (let i = 0; i < maxSeriesCount; i++) {
+                const children = [];
+                for (let j = 0; j < 3; j++) {
+                  const grandChildren = [];
+                  for (let k = 0; k < 3; k++) {
+                    grandChildren.push({
+                      name: `Data ${i + 1}-${j + 1}-${k + 1}`,
+                      value: Math.random() * 100,
+                    });
+                  }
+                  children.push({
+                    name: `Data ${i + 1}-${j + 1}`,
+                    children: grandChildren,
+                  });
+                }
+                data.push({
+                  name: `Data ${i + 1}`,
+                  children
+                });
+              }
+              return data;
+            }
+
+            const section = document.createElement('div');
+            section.className = 'section';
+            document.getElementById('main0').appendChild(section);
+            const sectionTitle = document.createElement('h3');
+            sectionTitle.textContent = `Count: ${maxSeriesCount}`;
+            section.appendChild(sectionTitle);
+
+            for (const c of cases) {
+              const div = document.createElement('div');
+              div.className = 'chart-item';
+              section.appendChild(div);
+
+              const chart = echarts.init(div, null, {
+                renderer: 'svg'
+              });
+
+              const series = [];
+              switch (c.data) {
+                case 'data1d':
+                  series.push({
+                    type: c.type,
+                    data: getData1d(),
+                  });
+                  break;
+
+                case 'data2d':
+                  for (let i = 0; i < maxSeriesCount; i++) {
+                    series.push({
+                      type: c.type,
+                      data: getData2d((maxSeriesCount - i) * 100),
+                      name: `Series ${i + 1}`,
+                    });
+                  }
+                  break;
+
+                case 'data3d':
+                  series.push({
+                    type: c.type,
+                    data: getData3d()
+                  });
+                  break;
+
+                case 'dataTree':
+                  series.push({
+                    type: c.type,
+                    data: getNodesData()
+                  });
+                  break;
+              }
+
+              const option = {
+                title: {
+                  text: `A ${c.type} chart`,
+                },
+                series: series,
+                legend: {
+                  show: true
+                }
+              };
+
+              if (['line', 'bar', 'scatter'].includes(c.type)) {
+                option.xAxis = {
+                  type: 'category'
+                };
+                option.yAxis = {
+                  type: 'value'
+                };
+                option.tooltip = {
+                  trigger: 'axis',
+                };
+              }
+              else if (['sunburst'].includes(c.type)) {
+                option.series[0].label = {
+                  show: false
+                };
+              }
+              else if (['themeRiver'].includes(c.type)) {
+                option.singleAxis = {
+                  type: 'value',
+                  axisLine: {
+                    show: false
+                  },
+                  axisTick: {
+                    show: false
+                  },
+                  axisLabel: {
+                    show: false
+                  }
+                };
+              }
+
+              chart.setOption(option);
+            }
+          }
+
+          // Components
+          const options = [
+          {
+              title: {
+                text: 'timeline'
+              },
+              xAxis: {
+                type: 'category',
+                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+              },
+              yAxis: {
+                type: 'value'
+              },
+              options: [
+              {
+                series: [{
+                data: [130, 200, 150, 80, 70, 110, 130],
+                type: 'bar'
+                }],
+              }, {
+                series: [{
+                data: [140, 200, 150, 80, 70, 110, 130],
+                type: 'bar'
+                }],
+              }, {
+                series: [{
+                data: [90, 200, 150, 80, 70, 110, 130],
+                type: 'bar'
+                }],
+              }, {
+                series: [{
+                data: [50, 200, 150, 80, 70, 110, 130],
+                type: 'bar'
+                }],
+              }],
+              timeline: {
+                data: ['2010', '2011', '2012', '2013'],
+              }
+            },
+            {
+              title: {
+                text: 'dataZoom & toolbox',
+              },
+              toolbox: {
+                feature: {
+                  dataZoom: {
+                    yAxisIndex: 'none'
+                  },
+                  restore: {},
+                  saveAsImage: {}
+                },
+              },
+              tooltip: {
+                trigger: 'axis',
+              },
+              dataZoom: [
+                {
+                  show: true,
+                  realtime: true,
+                  start: 30,
+                  end: 70
+                }
+              ],
+              xAxis: {
+                type: 'time',
+              },
+              yAxis: {
+                type: 'value'
+              },
+              series: [{
+                name: 'data',
+                type: 'line',
+                data: (function () {
+                  const data = [];
+                  const date = new Date();
+                  for (let i = 0; i < 100; i++) {
+                    date.setHours(date.getHours() + 1);
+                    data.push([date.toLocaleString(), Math.sin(i / 5) * 100 + 200]);
+                  }
+                  return data;
+                })()
+              }]
+            },
+            {
+              title: {
+                text: 'visualMap & calendar',
+              },
+              calendar: {
+                orient: 'vertical',
+                range: ['2025-01', '2025-03'],
+                cellSize: 25,
+                top: 120,
+                left: 'center'
+              },
+              visualMap: {
+                min: 0,
+                max: 1000,
+                calculable: true
+              },
+              series: [{
+                type: 'heatmap',
+                coordinateSystem: 'calendar',
+                data: (function () {
+                  const date = +echarts.time.parse('2025-01-06');
+                  const end = +echarts.time.parse('2025-02-20');
+                  const dayTime = 3600 * 24 * 1000;
+                  const data = [];
+                  for (let time = date; time < end; time += dayTime) {
+                    data.push([
+                      echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
+                      Math.floor(Math.random() * 1000)
+                    ]);
+                  }
+                  return data;
+                })()
+              }]
+            }, {
+              title: {
+                text: 'map'
+              },
+              series: [{
+                type: 'map',
+                mapType: 'USA',
+                data: [],
+                label: {
+                  show: true
+                }
+              }],
+            }
+          ];
+
+          const main1 = document.getElementById('main1');
+          for (const option of options) {
+            const div = document.createElement('div');
+            div.className = 'chart-item-h';
+            main1.appendChild(div);
+
+            const chart = echarts.init(div, null, {
+              renderer: 'svg'
+            });
+            chart.setOption(option);
+          }
+
+        });
+        </script>
+    </body>
+</html>
+

From 74ddbde65c7ff8d90116788a4f307c10b2f98fe8 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Fri, 25 Apr 2025 11:17:13 +0800
Subject: [PATCH 08/27] fix: fix unit test cases

---
 src/chart/treemap/TreemapSeries.ts                 | 5 ++++-
 src/component/toolbox/ToolboxModel.ts              | 2 +-
 src/coord/calendar/CalendarModel.ts                | 2 +-
 src/visual/tokens.ts                               | 2 +-
 test/ut/spec/api/containPixel.test.ts              | 6 ++++--
 test/ut/spec/api/converter.test.ts                 | 6 ++++--
 test/ut/spec/component/visualMap/setOption.test.ts | 3 ++-
 test/ut/spec/series/custom.test.ts                 | 7 +++++++
 8 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/chart/treemap/TreemapSeries.ts b/src/chart/treemap/TreemapSeries.ts
index b12f7a0578..0c99655c55 100644
--- a/src/chart/treemap/TreemapSeries.ts
+++ b/src/chart/treemap/TreemapSeries.ts
@@ -260,7 +260,10 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
 
         zoomToNodeRatio: 0.32 * 0.32,
 
-        scaleLimit: null,
+        scaleLimit: {
+            max: 5,
+            min: 0.2
+        },
 
         roam: true,
         nodeClick: 'zoomToNode',
diff --git a/src/component/toolbox/ToolboxModel.ts b/src/component/toolbox/ToolboxModel.ts
index eebd045416..ba3786f01e 100644
--- a/src/component/toolbox/ToolboxModel.ts
+++ b/src/component/toolbox/ToolboxModel.ts
@@ -136,7 +136,7 @@ class ToolboxModel extends ComponentModel<ToolboxOption> {
         showTitle: true,
 
         iconStyle: {
-            borderColor: tokens.color.accent30,
+            borderColor: tokens.color.accent50,
             color: 'none'
         },
         emphasis: {
diff --git a/src/coord/calendar/CalendarModel.ts b/src/coord/calendar/CalendarModel.ts
index bae545a0a5..3cce27c9fd 100644
--- a/src/coord/calendar/CalendarModel.ts
+++ b/src/coord/calendar/CalendarModel.ts
@@ -199,7 +199,7 @@ class CalendarModel extends ComponentModel<CalendarOption> {
         splitLine: {
             show: true,
             lineStyle: {
-                color: tokens.color.neutral60,
+                color: tokens.color.axisLine,
                 width: 1,
                 type: 'solid'
             }
diff --git a/src/visual/tokens.ts b/src/visual/tokens.ts
index cd13335e86..00b7cd5b31 100644
--- a/src/visual/tokens.ts
+++ b/src/visual/tokens.ts
@@ -5,7 +5,7 @@ const tokens = {
             '#b6d634',
             '#505372',
             '#ff994d',
-            '#4dbbe1',
+            '#0ca8df',
             '#ffd10a',
             '#fb628b',
             '#785db0',
diff --git a/test/ut/spec/api/containPixel.test.ts b/test/ut/spec/api/containPixel.test.ts
index 0eee5f0a40..900042afe3 100755
--- a/test/ut/spec/api/containPixel.test.ts
+++ b/test/ut/spec/api/containPixel.test.ts
@@ -209,14 +209,16 @@ describe('api/containPixel', function () {
                     left: 10,
                     right: '50%',
                     top: 30,
-                    bottom: 40
+                    bottom: 40,
+                    containLabel: false
                 },
                 {
                     id: 'g1',
                     left: '50%',
                     right: 20,
                     top: 30,
-                    bottom: 40
+                    bottom: 40,
+                    containLabel: false
                 }
             ],
             xAxis: [
diff --git a/test/ut/spec/api/converter.test.ts b/test/ut/spec/api/converter.test.ts
index 0e7def4bb3..702568f0a7 100755
--- a/test/ut/spec/api/converter.test.ts
+++ b/test/ut/spec/api/converter.test.ts
@@ -235,14 +235,16 @@ describe('api/converter', function () {
                     left: 10,
                     right: '50%',
                     top: 30,
-                    bottom: 40
+                    bottom: 40,
+                    containLabel: false
                 },
                 {
                     id: 'g1',
                     left: '50%',
                     right: 20,
                     top: 30,
-                    bottom: 40
+                    bottom: 40,
+                    containLabel: false
                 }
             ],
             xAxis: [
diff --git a/test/ut/spec/component/visualMap/setOption.test.ts b/test/ut/spec/component/visualMap/setOption.test.ts
index 0911af0073..d132385eac 100755
--- a/test/ut/spec/component/visualMap/setOption.test.ts
+++ b/test/ut/spec/component/visualMap/setOption.test.ts
@@ -24,6 +24,7 @@ import { EChartsOption } from '../../../../../src/export/option';
 import { ContinousVisualMapOption } from '../../../../../src/component/visualMap/ContinuousModel';
 import { PiecewiseVisualMapOption } from '../../../../../src/component/visualMap/PiecewiseModel';
 import VisualMapModel from '../../../../../src/component/visualMap/VisualMapModel';
+import globalDefault from '../../../../../src/model/globalDefault';
 
 
 describe('vsiaulMap_setOption', function () {
@@ -215,7 +216,7 @@ describe('vsiaulMap_setOption', function () {
         }
         const inRangeColor = visualMapOptionGotten[0].target.inRange.color;
         expect(onlyColor).toEqual(true);
-        expect(inRangeColor).toEqual(['#f6efa6', '#d88273', '#bf444c']);
+        expect(inRangeColor).toEqual(globalDefault.gradientColor);
         expect(visualMapOptionGotten[0].controller.outOfRange.symbol).toEqual(['diamond']);
         done();
     });
diff --git a/test/ut/spec/series/custom.test.ts b/test/ut/spec/series/custom.test.ts
index 76ecd099be..6a2b88a2e2 100644
--- a/test/ut/spec/series/custom.test.ts
+++ b/test/ut/spec/series/custom.test.ts
@@ -80,6 +80,13 @@ describe('custom_series', function () {
         const option = {
             xAxis: { scale: true },
             yAxis: {},
+            grid: {
+                containLabel: false,
+                left: '10%',
+                right: '10%',
+                top: 60,
+                bottom: 70
+            },
             series: [
                 {
                     type: 'custom',

From e23ed44425fdec8f95540c4bbaf417ab8fa7b1ef Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Thu, 8 May 2025 12:30:04 +0800
Subject: [PATCH 09/27] feat(theme): use containDataZoom to avoid overlap

---
 src/component/dataZoom/SliderZoomView.ts | 13 ++--
 src/coord/cartesian/Grid.ts              | 48 +++++++++++-
 src/coord/cartesian/GridModel.ts         |  5 ++
 src/model/globalDefault.ts               |  2 +-
 test/theme-list.html                     | 94 ++++++++++++++++++++++++
 5 files changed, 151 insertions(+), 11 deletions(-)

diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts
index e3fb149c63..5b1b51094a 100644
--- a/src/component/dataZoom/SliderZoomView.ts
+++ b/src/component/dataZoom/SliderZoomView.ts
@@ -48,9 +48,9 @@ import tokens from '../../visual/tokens';
 const Rect = graphic.Rect;
 
 // Constants
-const DEFAULT_LOCATION_EDGE_GAP = 15;
+export const DEFAULT_SLIDER_MARGIN = 15;
 const DEFAULT_FRAME_BORDER_WIDTH = 1;
-const DEFAULT_FILLER_SIZE = 30;
+export const DEFAULT_SLIDER_SIZE = 30;
 const DEFAULT_MOVE_HANDLE_SIZE = 7;
 const HORIZONTAL = 'horizontal';
 const VERTICAL = 'vertical';
@@ -228,6 +228,7 @@ class SliderZoomView extends DataZoomView {
         // If some of x/y/width/height are not specified,
         // auto-adapt according to target grid.
         const coordRect = this._findCoordRect();
+        console.log(this);
         const ecSize = {width: api.getWidth(), height: api.getHeight()};
         // Default align by coordinate system rect.
         const positionInfo = this._orient === HORIZONTAL
@@ -235,14 +236,14 @@ class SliderZoomView extends DataZoomView {
                 // Why using 'right', because right should be used in vertical,
                 // and it is better to be consistent for dealing with position param merge.
                 right: ecSize.width - coordRect.x - coordRect.width,
-                top: (ecSize.height - DEFAULT_FILLER_SIZE - DEFAULT_LOCATION_EDGE_GAP - moveHandleSize),
+                top: coordRect.y + coordRect.height + DEFAULT_SLIDER_MARGIN + moveHandleSize,
                 width: coordRect.width,
-                height: DEFAULT_FILLER_SIZE
+                height: DEFAULT_SLIDER_SIZE
             }
             : { // vertical
-                right: DEFAULT_LOCATION_EDGE_GAP,
+                right: ecSize.width - coordRect.x - coordRect.width - DEFAULT_SLIDER_MARGIN - DEFAULT_SLIDER_SIZE,
                 top: coordRect.y,
-                width: DEFAULT_FILLER_SIZE,
+                width: DEFAULT_SLIDER_SIZE,
                 height: coordRect.height
             };
 
diff --git a/src/coord/cartesian/Grid.ts b/src/coord/cartesian/Grid.ts
index 2c10825aa4..219c8c2172 100644
--- a/src/coord/cartesian/Grid.ts
+++ b/src/coord/cartesian/Grid.ts
@@ -58,6 +58,9 @@ import { alignScaleTicks } from '../axisAlignTicks';
 import IntervalScale from '../../scale/Interval';
 import LogScale from '../../scale/Log';
 import { BoundingRect } from 'zrender';
+import type DataZoomModel from '../../component/dataZoom/DataZoomModel';
+import SliderZoomModel from '../../component/dataZoom/SliderZoomModel';
+import { DEFAULT_SLIDER_MARGIN, DEFAULT_SLIDER_SIZE } from '../../component/dataZoom/SliderZoomView';
 
 
 type Cartesian2DDimensionName = 'x' | 'y';
@@ -176,6 +179,7 @@ class Grid implements CoordinateSystemMaster {
 
         const boxLayoutParams = gridModel.getBoxLayoutParams();
         const isContainLabel = !ignoreContainLabel && gridModel.get('containLabel');
+        const isContainDataZoom = !ignoreContainLabel && gridModel.get('containDataZoom');
 
         const gridRect = getLayoutRect(
             boxLayoutParams, {
@@ -186,12 +190,16 @@ class Grid implements CoordinateSystemMaster {
         this._rect = gridRect;
 
         const axesList = this._axesList;
+        const ecModel = gridModel.ecModel;
 
         adjustAxes();
 
         // Minus label, name, and nameGap size
         if (isContainLabel) {
             const reservedSpacePerAxis: ReservedSpace[] = [];
+
+            let dataZoomReservedSpace = {left: 0, top: 0, right: 0, bottom: 0};
+
             each(axesList, function (axis) {
                 const nameBoundingRect = computeNameBoundingRect(axis);
 
@@ -200,6 +208,32 @@ class Grid implements CoordinateSystemMaster {
                     labelUnionRect = estimateLabelUnionRect(axis);
                 }
 
+                const dataZoomModels = ecModel.findComponents({
+                    mainType: 'dataZoom',
+                    filter: (dataZoomModel: DataZoomModel) => {
+                        if (dataZoomModel.type !== SliderZoomModel.type) {
+                            return false;
+                        }
+                        const sliderModel = dataZoomModel as SliderZoomModel;
+                        const targetAxis = sliderModel.getFirstTargetAxisModel();
+                        return targetAxis.axis === axis && sliderModel.get('show');
+                    }
+                }) as SliderZoomModel[];
+
+                each(dataZoomModels, function (dataZoomModel) {
+                    const isHorizontal = axis.isHorizontal();
+                    // Extract the height from grid to slider dataZoom
+                    // only if uses 'ph', which means align to the grid rect.
+                    if (dataZoomModel.get(isHorizontal ? 'height' : 'width') === 'ph') {
+                        const left = dataZoomModel.get('left');
+                        const top = dataZoomModel.get('top');
+                        const side = isHorizontal
+                            ? ((top === 'ph' || top == null) ? 'bottom' : 'top')
+                            : ((left === 'ph' || left == null) ? 'right' : 'left');
+                        dataZoomReservedSpace[side] = DEFAULT_SLIDER_SIZE + DEFAULT_SLIDER_MARGIN;
+                    }
+                });
+
                 reservedSpacePerAxis.push(computeReservedSpace(axis, labelUnionRect, nameBoundingRect));
             });
 
@@ -218,13 +252,19 @@ class Grid implements CoordinateSystemMaster {
                     maxLabelSpace[reservedSpacePerAxis[axisIndex].namePositionCurrAxis];
             });
 
-            const maxReservedSpaceLeft = maxLabelSpace.left + maxNameAndNameGapSpace.left;
-            const maxReservedSpaceTop = maxLabelSpace.top + maxNameAndNameGapSpace.top;
+            const maxReservedSpaceLeft = maxLabelSpace.left + maxNameAndNameGapSpace.left
+                + dataZoomReservedSpace.left;
+            const maxReservedSpaceTop = maxLabelSpace.top + maxNameAndNameGapSpace.top
+                + dataZoomReservedSpace.top;
 
             gridRect.x += maxReservedSpaceLeft;
             gridRect.y += maxReservedSpaceTop;
-            gridRect.width -= maxReservedSpaceLeft + maxLabelSpace.right + maxNameAndNameGapSpace.right;
-            gridRect.height -= maxReservedSpaceTop + maxLabelSpace.bottom + maxNameAndNameGapSpace.bottom;
+            gridRect.width -= maxReservedSpaceLeft + maxLabelSpace.right
+                + maxNameAndNameGapSpace.right
+                + dataZoomReservedSpace.right;
+            gridRect.height -= maxReservedSpaceTop + maxLabelSpace.bottom
+                + maxNameAndNameGapSpace.bottom
+                + dataZoomReservedSpace.bottom;
 
             adjustAxes();
         }
diff --git a/src/coord/cartesian/GridModel.ts b/src/coord/cartesian/GridModel.ts
index 306661af6e..3b2989b140 100644
--- a/src/coord/cartesian/GridModel.ts
+++ b/src/coord/cartesian/GridModel.ts
@@ -32,6 +32,9 @@ export interface GridOption extends ComponentOption, BoxLayoutOptionMixin, Shado
     // Whether grid size contain label.
     containLabel?: boolean;
 
+    // Whether grid size contain dataZoom.
+    containDataZoom?: boolean;
+
     backgroundColor?: ZRColor;
     borderWidth?: number;
     borderColor?: ZRColor;
@@ -59,6 +62,8 @@ class GridModel extends ComponentModel<GridOption> implements CoordinateSystemHo
         bottom: 65,
         // If grid size contain label
         containLabel: true,
+        // If grid size contain dataZoom
+        containDataZoom: true,
         // width: {totalWidth} - left - right,
         // height: {totalHeight} - top - bottom,
         backgroundColor: tokens.color.transparent,
diff --git a/src/model/globalDefault.ts b/src/model/globalDefault.ts
index e5cff9ceb4..da152bcb54 100644
--- a/src/model/globalDefault.ts
+++ b/src/model/globalDefault.ts
@@ -37,7 +37,7 @@ export default {
 
     color: tokens.color.theme,
 
-    gradientColor: [tokens.color.accent50, tokens.color.accent10],
+    gradientColor: [tokens.color.accent10, tokens.color.accent50],
 
     aria: {
         decal: {
diff --git a/test/theme-list.html b/test/theme-list.html
index 9c5fd6941f..01b616d1d2 100644
--- a/test/theme-list.html
+++ b/test/theme-list.html
@@ -381,6 +381,100 @@ <h2>Components</h2>
                 })()
               }]
             },
+            {
+              title: {
+                text: 'dataZoom & legend (right/bottom)'
+              },
+              legend: {
+                show: true
+              },
+              tooltip: {
+                trigger: 'axis',
+              },
+              dataZoom: [
+                {
+                  show: true,
+                  realtime: true,
+                  start: 30,
+                  end: 70
+                },
+                {
+                  show: true,
+                  realtime: true,
+                  yAxisIndex: 0
+                },
+                {
+                  type: 'inside'
+                }
+              ],
+              xAxis: {
+                type: 'time',
+              },
+              yAxis: {
+                type: 'value'
+              },
+              series: [{
+                name: 'data',
+                type: 'line',
+                data: (function () {
+                  const data = [];
+                  const date = new Date();
+                  for (let i = 0; i < 100; i++) {
+                    date.setHours(date.getHours() + 1);
+                    data.push([date.toLocaleString(), Math.sin(i / 5) * 100 + 200]);
+                  }
+                  return data;
+                })()
+              }]
+            },
+            {
+              title: {
+                text: 'dataZoom & legend (left/top)'
+              },
+              legend: {
+                show: true
+              },
+              tooltip: {
+                trigger: 'axis',
+              },
+              dataZoom: [
+                {
+                  show: true,
+                  realtime: true,
+                  start: 30,
+                  end: 70,
+                  top: 50
+                },
+                {
+                  show: true,
+                  realtime: true,
+                  yAxisIndex: 0,
+                  left: 25
+                },
+                {
+                  type: 'inside'
+                }
+              ],
+              xAxis: {
+                type: 'time',
+              },
+              yAxis: {
+                type: 'value'
+              },
+              series: [{
+                name: 'data',
+                type: 'line',
+                data: (function () {
+                  const data = [];
+                  const date = new Date();
+                  for (let i = 0; i < 100; i++) {
+                    date.setHours(date.getHours() + 1);
+                    data.push([date.toLocaleString(), Math.sin(i / 5) * 100 + 200]);
+                  }
+                  return data;
+                })()
+              }]
+            },
             {
               title: {
                 text: 'visualMap & calendar',

From 230ca049a611046d335b6902c0253adb3192e07c Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Thu, 8 May 2025 15:49:55 +0800
Subject: [PATCH 10/27] fix(theme): adjust grid, legend, tokens

---
 src/chart/map/MapSeries.ts               |   2 +-
 src/component/dataZoom/SliderZoomView.ts |   1 -
 src/component/legend/LegendModel.ts      |   2 +-
 src/coord/cartesian/Grid.ts              |  56 ++---
 src/coord/cartesian/GridModel.ts         |   4 +-
 src/layout/barGrid.ts                    |   2 +-
 src/visual/tokens.ts                     | 273 ++++++++++++++---------
 test/theme-list.html                     |  20 +-
 8 files changed, 216 insertions(+), 144 deletions(-)

diff --git a/src/chart/map/MapSeries.ts b/src/chart/map/MapSeries.ts
index cb49bc4464..977eb4a5b4 100644
--- a/src/chart/map/MapSeries.ts
+++ b/src/chart/map/MapSeries.ts
@@ -338,7 +338,7 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
                 color: tokens.color.primary
             },
             itemStyle: {
-                areaColor: tokens.color.backgroundShade
+                areaColor: tokens.color.neutral20
             }
         },
 
diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts
index 5b1b51094a..231abad77c 100644
--- a/src/component/dataZoom/SliderZoomView.ts
+++ b/src/component/dataZoom/SliderZoomView.ts
@@ -228,7 +228,6 @@ class SliderZoomView extends DataZoomView {
         // If some of x/y/width/height are not specified,
         // auto-adapt according to target grid.
         const coordRect = this._findCoordRect();
-        console.log(this);
         const ecSize = {width: api.getWidth(), height: api.getHeight()};
         // Default align by coordinate system rect.
         const positionInfo = this._orient === HORIZONTAL
diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts
index 76a6f1a8e5..fc192ab471 100644
--- a/src/component/legend/LegendModel.ts
+++ b/src/component/legend/LegendModel.ts
@@ -463,7 +463,7 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
         borderRadius: 0,
         borderWidth: 0,
         padding: 5,
-        itemGap: 10,
+        itemGap: 8,
         itemWidth: 25,
         itemHeight: 14,
         symbolRotate: 'inherit',
diff --git a/src/coord/cartesian/Grid.ts b/src/coord/cartesian/Grid.ts
index 219c8c2172..7a7b2482b0 100644
--- a/src/coord/cartesian/Grid.ts
+++ b/src/coord/cartesian/Grid.ts
@@ -198,7 +198,7 @@ class Grid implements CoordinateSystemMaster {
         if (isContainLabel) {
             const reservedSpacePerAxis: ReservedSpace[] = [];
 
-            let dataZoomReservedSpace = {left: 0, top: 0, right: 0, bottom: 0};
+            const dataZoomReservedSpace = {left: 0, top: 0, right: 0, bottom: 0};
 
             each(axesList, function (axis) {
                 const nameBoundingRect = computeNameBoundingRect(axis);
@@ -208,33 +208,35 @@ class Grid implements CoordinateSystemMaster {
                     labelUnionRect = estimateLabelUnionRect(axis);
                 }
 
-                const dataZoomModels = ecModel.findComponents({
-                    mainType: 'dataZoom',
-                    filter: (dataZoomModel: DataZoomModel) => {
-                        if (dataZoomModel.type !== SliderZoomModel.type) {
-                            return false;
-                        }
-                        const sliderModel = dataZoomModel as SliderZoomModel;
-                        const targetAxis = sliderModel.getFirstTargetAxisModel();
-                        return targetAxis.axis === axis && sliderModel.get('show');
-                    }
-                }) as SliderZoomModel[];
-
-                each(dataZoomModels, function (dataZoomModel) {
-                    const isHorizontal = axis.isHorizontal();
-                    // Extract the height from grid to slider dataZoom
-                    // only if uses 'ph', which means align to the grid rect.
-                    if (dataZoomModel.get(isHorizontal ? 'height' : 'width') === 'ph') {
-                        const left = dataZoomModel.get('left');
-                        const top = dataZoomModel.get('top');
-                        const side = isHorizontal
-                            ? ((top === 'ph' || top == null) ? 'bottom' : 'top')
-                            : ((left === 'ph' || left == null) ? 'right' : 'left');
-                        dataZoomReservedSpace[side] = DEFAULT_SLIDER_SIZE + DEFAULT_SLIDER_MARGIN;
-                    }
-                });
-
                 reservedSpacePerAxis.push(computeReservedSpace(axis, labelUnionRect, nameBoundingRect));
+
+                if (isContainDataZoom) {
+                    const dataZoomModels = ecModel.findComponents({
+                        mainType: 'dataZoom',
+                        filter: (dataZoomModel: DataZoomModel) => {
+                            if (dataZoomModel.type !== SliderZoomModel.type) {
+                                return false;
+                            }
+                            const sliderModel = dataZoomModel as SliderZoomModel;
+                            const targetAxis = sliderModel.getFirstTargetAxisModel();
+                            return targetAxis.axis === axis && sliderModel.get('show');
+                        }
+                    }) as SliderZoomModel[];
+
+                    each(dataZoomModels, function (dataZoomModel) {
+                        const isHorizontal = axis.isHorizontal();
+                        // Extract the height from grid to slider dataZoom
+                        // only if uses 'ph', which means align to the grid rect.
+                        if (dataZoomModel.get(isHorizontal ? 'height' : 'width') === 'ph') {
+                            const left = dataZoomModel.get('left');
+                            const top = dataZoomModel.get('top');
+                            const side = isHorizontal
+                                ? ((top === 'ph' || top == null) ? 'bottom' : 'top')
+                                : ((left === 'ph' || left == null) ? 'right' : 'left');
+                            dataZoomReservedSpace[side] = DEFAULT_SLIDER_SIZE + DEFAULT_SLIDER_MARGIN;
+                        }
+                    });
+                }
             });
 
             const maxLabelSpace: CartesianAxisPositionMargins = { left: 0, top: 0, right: 0, bottom: 0};
diff --git a/src/coord/cartesian/GridModel.ts b/src/coord/cartesian/GridModel.ts
index 3b2989b140..5527046d59 100644
--- a/src/coord/cartesian/GridModel.ts
+++ b/src/coord/cartesian/GridModel.ts
@@ -57,9 +57,9 @@ class GridModel extends ComponentModel<GridOption> implements CoordinateSystemHo
         // zlevel: 0,
         z: 0,
         left: tokens.size.xl,
-        top: 60,
+        top: 65,
         right: tokens.size.xl,
-        bottom: 65,
+        bottom: 60,
         // If grid size contain label
         containLabel: true,
         // If grid size contain dataZoom
diff --git a/src/layout/barGrid.ts b/src/layout/barGrid.ts
index 3f6aeb4fb6..7f4af8f80f 100644
--- a/src/layout/barGrid.ts
+++ b/src/layout/barGrid.ts
@@ -273,7 +273,7 @@ function doCalBarWidthAndOffset(seriesInfoList: LayoutSeriesInfo[]) {
             remainedWidth: bandWidth,
             autoWidthCount: 0,
             categoryGap: null,
-            gap: '20%',
+            gap: '10%',
             stacks: {}
         };
         const stacks = columnsOnAxis.stacks;
diff --git a/src/visual/tokens.ts b/src/visual/tokens.ts
index 00b7cd5b31..db58bf1f57 100644
--- a/src/visual/tokens.ts
+++ b/src/visual/tokens.ts
@@ -1,116 +1,183 @@
-const tokens = {
+import { extend } from 'zrender/src/core/util';
+
+interface Tokens {
     color: {
-        theme: [
-            '#5978e3',
-            '#b6d634',
-            '#505372',
-            '#ff994d',
-            '#0ca8df',
-            '#ffd10a',
-            '#fb628b',
-            '#785db0',
-            '#3fbe95'
-        ],
+        theme: string[];
+        neutral00: string;
+        neutral05: string;
+        neutral10: string;
+        neutral15: string;
+        neutral20: string;
+        neutral25: string;
+        neutral30: string;
+        neutral35: string;
+        neutral40: string;
+        neutral45: string;
+        neutral50: string;
+        neutral55: string;
+        neutral60: string;
+        neutral65: string;
+        neutral70: string;
+        neutral75: string;
+        neutral80: string;
+        neutral85: string;
+        neutral90: string;
+        neutral95: string;
+        neutral99: string;
+        accent05: string;
+        accent10: string;
+        accent15: string;
+        accent20: string;
+        accent25: string;
+        accent30: string;
+        accent35: string;
+        accent40: string;
+        accent45: string;
+        accent50: string;
+        accent55: string;
+        accent60: string;
+        accent65: string;
+        accent70: string;
+        accent75: string;
+        accent80: string;
+        accent85: string;
+        accent90: string;
+        accent95: string;
+        transparent: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+        disabled: string;
+        border: string;
+        borderTint: string;
+        borderShade: string;
+        background: string;
+        backgroundTint: string;
+        backgroundTransparent: string;
+        backgroundShade: string;
+        shadow: string;
+        shadowTint: string;
+        axisLine: string;
+        axisLineTint: string;
+        axisTick: string;
+        axisTickMinor: string;
+        axisLabel: string;
+        axisSplitLine: string;
+        axisMinorSplitLine: string;
+    };
+    size: {
+        xxs: number;
+        xs: number;
+        s: number;
+        m: number;
+        l: number;
+        xl: number;
+        xxl: number;
+        xxxl: number;
+    };
+}
 
-        neutral00: '#fff',
-        neutral05: '#f4f7fd',
-        neutral10: '#e8ebf0',
-        neutral15: '#dbdee4',
-        neutral20: '#cfd2d7',
-        neutral25: '#c3c5cb',
-        neutral30: '#b7b9be',
-        neutral35: '#aaacb2',
-        neutral40: '#9ea0a5',
-        neutral45: '#929399',
-        neutral50: '#86878c',
-        neutral55: '#797b7f',
-        neutral60: '#6d6e73',
-        neutral65: '#616266',
-        neutral70: '#54555a',
-        neutral75: '#48494d',
-        neutral80: '#3c3c41',
-        neutral85: '#303034',
-        neutral90: '#232328',
-        neutral95: '#17171b',
-        neutral99: '#000',
+const tokens: Tokens = {
+    color: {} as Tokens['color'],
+    size: {} as Tokens['size']
+};
 
-        accent05: '#eef2fc',
-        accent10: '#dee4f9',
-        accent15: '#cdd7f7',
-        accent20: '#bdc9f4',
-        accent25: '#acbcf1',
-        accent30: '#9baeee',
-        accent35: '#8ba1eb',
-        accent40: '#7a93e9',
-        accent45: '#6a86e6',
-        accent50: '#5978e3',
-        accent55: '#506ccc',
-        accent60: '#4760b6',
-        accent65: '#3e549f',
-        accent70: '#354888',
-        accent75: '#2d3c72',
-        accent80: '#24305b',
-        accent85: '#1b2444',
-        accent90: '#12182d',
-        accent95: '#090c17',
+const color = tokens.color = {
+    theme: [
+        '#5978e3',
+        '#b6d634',
+        '#505372',
+        '#ff994d',
+        '#0ca8df',
+        '#ffd10a',
+        '#fb628b',
+        '#785db0',
+        '#3fbe95'
+    ],
 
-        transparent: 'rgba(0,0,0,0)',
+    neutral00: '#fff',
+    neutral05: '#f4f7fd',
+    neutral10: '#e8ebf0',
+    neutral15: '#dbdee4',
+    neutral20: '#cfd2d7',
+    neutral25: '#c3c5cb',
+    neutral30: '#b7b9be',
+    neutral35: '#aaacb2',
+    neutral40: '#9ea0a5',
+    neutral45: '#929399',
+    neutral50: '#86878c',
+    neutral55: '#797b7f',
+    neutral60: '#6d6e73',
+    neutral65: '#616266',
+    neutral70: '#54555a',
+    neutral75: '#48494d',
+    neutral80: '#3c3c41',
+    neutral85: '#303034',
+    neutral90: '#232328',
+    neutral95: '#17171b',
+    neutral99: '#000',
 
-        primary: '@neutral80',
-        secondary: '@neutral70',
-        tertiary: '@neutral60',
-        quaternary: '@neutral50',
-        disabled: '@neutral20',
+    accent05: '#eef2fc',
+    accent10: '#dee4f9',
+    accent15: '#cdd7f7',
+    accent20: '#bdc9f4',
+    accent25: '#acbcf1',
+    accent30: '#9baeee',
+    accent35: '#8ba1eb',
+    accent40: '#7a93e9',
+    accent45: '#6a86e6',
+    accent50: '#5978e3',
+    accent55: '#506ccc',
+    accent60: '#4760b6',
+    accent65: '#3e549f',
+    accent70: '#354888',
+    accent75: '#2d3c72',
+    accent80: '#24305b',
+    accent85: '#1b2444',
+    accent90: '#12182d',
+    accent95: '#090c17',
 
-        border: '@neutral30',
-        borderTint: '@neutral20',
-        borderShade: '@neutral40',
+    transparent: 'rgba(0,0,0,0)',
+} as Tokens['color'];
 
-        background: '@neutral05',
-        backgroundTint: 'rgba(234,237,245,0.5)',
-        backgroundTransparent: 'rgba(255,255,255,0)',
-        backgroundShade: '@neutral10',
+extend(color, {
+    primary: color.neutral80,
+    secondary: color.neutral70,
+    tertiary: color.neutral60,
+    quaternary: color.neutral50,
+    disabled: color.neutral20,
 
-        shadow: 'rgba(0,0,0,0.2)',
-        shadowTint: 'rgba(129,130,136,0.2)',
+    border: color.neutral30,
+    borderTint: color.neutral20,
+    borderShade: color.neutral40,
 
-        axisLine: '@neutral70',
-        axisLineTint: '@neutral40',
-        axisTick: '@axisLine',
-        axisTickMinor: '@neutral60',
-        axisLabel: '@axisLine',
-        axisSplitLine: '@neutral15',
-        axisMinorSplitLine: '@neutral05'
-    },
-    size: {
-        xxs: 2,
-        xs: 5,
-        s: 10,
-        m: 15,
-        l: 20,
-        xl: 30,
-        xxl: 40,
-        xxxl: 50
-    }
-} as const;
+    background: color.neutral05,
+    backgroundTint: 'rgba(234,237,245,0.5)',
+    backgroundTransparent: 'rgba(255,255,255,0)',
+    backgroundShade: color.neutral10,
 
-function decodeTokens() {
-    const color = tokens.color as {
-        [key: string]: string | readonly string[]
-    };
-    for (const key in color) {
-        if (Object.prototype.hasOwnProperty.call(color, key)) {
-            const value = color[key];
-            if (typeof value === 'string' && value.startsWith('@')) {
-                const refKey = value.slice(1);
-                if (refKey in color) {
-                    color[key] = color[refKey];
-                }
-            }
-        }
-    }
-}
+    shadow: 'rgba(0,0,0,0.2)',
+    shadowTint: 'rgba(129,130,136,0.2)',
+
+    axisLine: color.neutral70,
+    axisLineTint: color.neutral40,
+    axisTick: color.neutral70,
+    axisTickMinor: color.neutral60,
+    axisLabel: color.neutral70,
+    axisSplitLine: color.neutral15,
+    axisMinorSplitLine: color.neutral05,
+} as Tokens['color']);
 
-decodeTokens();
+tokens.size = {
+    xxs: 2,
+    xs: 5,
+    s: 10,
+    m: 15,
+    l: 20,
+    xl: 30,
+    xxl: 40,
+    xxxl: 50
+};
 
 export default tokens;
diff --git a/test/theme-list.html b/test/theme-list.html
index 01b616d1d2..0f03fedb34 100644
--- a/test/theme-list.html
+++ b/test/theme-list.html
@@ -314,23 +314,27 @@ <h2>Components</h2>
               options: [
               {
                 series: [{
-                data: [130, 200, 150, 80, 70, 110, 130],
-                type: 'bar'
+                  data: [130, 200, 150, 80, 70, 110, 130],
+                  type: 'bar',
+                  label: {
+                    show: true,
+                    position: 'inside'
+                  }
                 }],
               }, {
                 series: [{
-                data: [140, 200, 150, 80, 70, 110, 130],
-                type: 'bar'
+                  data: [140, 200, 150, 80, 70, 110, 130],
+                  type: 'bar'
                 }],
               }, {
                 series: [{
-                data: [90, 200, 150, 80, 70, 110, 130],
-                type: 'bar'
+                  data: [90, 200, 150, 80, 70, 110, 130],
+                  type: 'bar'
                 }],
               }, {
                 series: [{
-                data: [50, 200, 150, 80, 70, 110, 130],
-                type: 'bar'
+                  data: [50, 200, 150, 80, 70, 110, 130],
+                  type: 'bar'
                 }],
               }],
               timeline: {

From f3c93a62327b381add52ca543953f86429ff35c4 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Thu, 8 May 2025 20:00:02 +0800
Subject: [PATCH 11/27] fix(theme): revert containDataZoom and update theme

---
 src/chart/funnel/FunnelSeries.ts         |  2 +-
 src/chart/funnel/FunnelView.ts           |  5 +--
 src/chart/map/MapSeries.ts               |  6 ++-
 src/component/axis/CartesianAxisView.ts  |  5 +++
 src/component/dataZoom/SliderZoomView.ts | 12 +++---
 src/coord/axisDefault.ts                 |  5 ++-
 src/coord/cartesian/Grid.ts              | 50 ++----------------------
 src/coord/cartesian/GridModel.ts         |  5 ---
 src/visual/tokens.ts                     |  2 +-
 9 files changed, 26 insertions(+), 66 deletions(-)

diff --git a/src/chart/funnel/FunnelSeries.ts b/src/chart/funnel/FunnelSeries.ts
index 6de44d5c10..586019eb31 100644
--- a/src/chart/funnel/FunnelSeries.ts
+++ b/src/chart/funnel/FunnelSeries.ts
@@ -178,7 +178,7 @@ class FunnelSeriesModel extends SeriesModel<FunnelSeriesOption> {
             length: 20,
             lineStyle: {
                 // color: 各异,
-                width: 1
+                width: 2
             }
         },
         itemStyle: {
diff --git a/src/chart/funnel/FunnelView.ts b/src/chart/funnel/FunnelView.ts
index e4a922afca..67cce4826b 100644
--- a/src/chart/funnel/FunnelView.ts
+++ b/src/chart/funnel/FunnelView.ts
@@ -131,9 +131,8 @@ class FunnelPiece extends graphic.Polygon {
         polygon.setTextConfig({
             local: true,
             inside: !!labelLayout.inside,
-            insideStroke: visualColor,
-            // insideFill: 'auto',
-            outsideFill: visualColor
+            // Remove insideStroke and outsideFill
+            // insideFill: 'auto'
         });
 
         const linePoints = labelLayout.linePoints;
diff --git a/src/chart/map/MapSeries.ts b/src/chart/map/MapSeries.ts
index 977eb4a5b4..3b187d9f5e 100644
--- a/src/chart/map/MapSeries.ts
+++ b/src/chart/map/MapSeries.ts
@@ -94,6 +94,8 @@ export interface MapSeriesOption extends
     nameProperty?: string;
 }
 
+const highlightColor = '#FFE782';
+
 class MapSeries extends SeriesModel<MapSeriesOption> {
 
     static type = 'series.map' as const;
@@ -338,7 +340,7 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
                 color: tokens.color.primary
             },
             itemStyle: {
-                areaColor: tokens.color.neutral20
+                areaColor: highlightColor
             }
         },
 
@@ -348,7 +350,7 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
                 color: tokens.color.primary
             },
             itemStyle: {
-                color: tokens.color.backgroundShade
+                color: highlightColor
             }
         },
 
diff --git a/src/component/axis/CartesianAxisView.ts b/src/component/axis/CartesianAxisView.ts
index 2e44150bf0..b03269d253 100644
--- a/src/component/axis/CartesianAxisView.ts
+++ b/src/component/axis/CartesianAxisView.ts
@@ -72,6 +72,11 @@ class CartesianAxisView extends AxisView {
                 const cartesians = gridModel.coordinateSystem.getCartesians();
                 for (let i = 0; i < cartesians.length; i++) {
                     if (isIntervalOrLogScale(cartesians[i].getOtherAxis(axisModel.axis).scale)) {
+                        if (elementType === 'axisTick' && axisModel.axis.type === 'category'
+                            && axisModel.axis.onBand
+                        ) {
+                            return false;
+                        }
                         // Still show axis tick or axisLine if other axis is value / log
                         return true;
                     }
diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts
index 231abad77c..e3fb149c63 100644
--- a/src/component/dataZoom/SliderZoomView.ts
+++ b/src/component/dataZoom/SliderZoomView.ts
@@ -48,9 +48,9 @@ import tokens from '../../visual/tokens';
 const Rect = graphic.Rect;
 
 // Constants
-export const DEFAULT_SLIDER_MARGIN = 15;
+const DEFAULT_LOCATION_EDGE_GAP = 15;
 const DEFAULT_FRAME_BORDER_WIDTH = 1;
-export const DEFAULT_SLIDER_SIZE = 30;
+const DEFAULT_FILLER_SIZE = 30;
 const DEFAULT_MOVE_HANDLE_SIZE = 7;
 const HORIZONTAL = 'horizontal';
 const VERTICAL = 'vertical';
@@ -235,14 +235,14 @@ class SliderZoomView extends DataZoomView {
                 // Why using 'right', because right should be used in vertical,
                 // and it is better to be consistent for dealing with position param merge.
                 right: ecSize.width - coordRect.x - coordRect.width,
-                top: coordRect.y + coordRect.height + DEFAULT_SLIDER_MARGIN + moveHandleSize,
+                top: (ecSize.height - DEFAULT_FILLER_SIZE - DEFAULT_LOCATION_EDGE_GAP - moveHandleSize),
                 width: coordRect.width,
-                height: DEFAULT_SLIDER_SIZE
+                height: DEFAULT_FILLER_SIZE
             }
             : { // vertical
-                right: ecSize.width - coordRect.x - coordRect.width - DEFAULT_SLIDER_MARGIN - DEFAULT_SLIDER_SIZE,
+                right: DEFAULT_LOCATION_EDGE_GAP,
                 top: coordRect.y,
-                width: DEFAULT_SLIDER_SIZE,
+                width: DEFAULT_FILLER_SIZE,
                 height: coordRect.height
             };
 
diff --git a/src/coord/axisDefault.ts b/src/coord/axisDefault.ts
index fbb4380526..4bf8a707d6 100644
--- a/src/coord/axisDefault.ts
+++ b/src/coord/axisDefault.ts
@@ -70,7 +70,7 @@ const defaultOption: AxisBaseOption = {
         breakLine: true,
     },
     axisTick: {
-        show: false,
+        show: true,
         // Whether axisTick is inside the grid or outside the grid.
         inside: false,
         // The length of axisTick.
@@ -155,7 +155,8 @@ const categoryAxis: AxisBaseOption = zrUtil.merge({
     axisTick: {
         // If tick is align with label when boundaryGap is true
         alignWithLabel: false,
-        interval: 'auto'
+        interval: 'auto',
+        show: 'auto'
     },
     axisLabel: {
         interval: 'auto'
diff --git a/src/coord/cartesian/Grid.ts b/src/coord/cartesian/Grid.ts
index 7a7b2482b0..2c10825aa4 100644
--- a/src/coord/cartesian/Grid.ts
+++ b/src/coord/cartesian/Grid.ts
@@ -58,9 +58,6 @@ import { alignScaleTicks } from '../axisAlignTicks';
 import IntervalScale from '../../scale/Interval';
 import LogScale from '../../scale/Log';
 import { BoundingRect } from 'zrender';
-import type DataZoomModel from '../../component/dataZoom/DataZoomModel';
-import SliderZoomModel from '../../component/dataZoom/SliderZoomModel';
-import { DEFAULT_SLIDER_MARGIN, DEFAULT_SLIDER_SIZE } from '../../component/dataZoom/SliderZoomView';
 
 
 type Cartesian2DDimensionName = 'x' | 'y';
@@ -179,7 +176,6 @@ class Grid implements CoordinateSystemMaster {
 
         const boxLayoutParams = gridModel.getBoxLayoutParams();
         const isContainLabel = !ignoreContainLabel && gridModel.get('containLabel');
-        const isContainDataZoom = !ignoreContainLabel && gridModel.get('containDataZoom');
 
         const gridRect = getLayoutRect(
             boxLayoutParams, {
@@ -190,16 +186,12 @@ class Grid implements CoordinateSystemMaster {
         this._rect = gridRect;
 
         const axesList = this._axesList;
-        const ecModel = gridModel.ecModel;
 
         adjustAxes();
 
         // Minus label, name, and nameGap size
         if (isContainLabel) {
             const reservedSpacePerAxis: ReservedSpace[] = [];
-
-            const dataZoomReservedSpace = {left: 0, top: 0, right: 0, bottom: 0};
-
             each(axesList, function (axis) {
                 const nameBoundingRect = computeNameBoundingRect(axis);
 
@@ -209,34 +201,6 @@ class Grid implements CoordinateSystemMaster {
                 }
 
                 reservedSpacePerAxis.push(computeReservedSpace(axis, labelUnionRect, nameBoundingRect));
-
-                if (isContainDataZoom) {
-                    const dataZoomModels = ecModel.findComponents({
-                        mainType: 'dataZoom',
-                        filter: (dataZoomModel: DataZoomModel) => {
-                            if (dataZoomModel.type !== SliderZoomModel.type) {
-                                return false;
-                            }
-                            const sliderModel = dataZoomModel as SliderZoomModel;
-                            const targetAxis = sliderModel.getFirstTargetAxisModel();
-                            return targetAxis.axis === axis && sliderModel.get('show');
-                        }
-                    }) as SliderZoomModel[];
-
-                    each(dataZoomModels, function (dataZoomModel) {
-                        const isHorizontal = axis.isHorizontal();
-                        // Extract the height from grid to slider dataZoom
-                        // only if uses 'ph', which means align to the grid rect.
-                        if (dataZoomModel.get(isHorizontal ? 'height' : 'width') === 'ph') {
-                            const left = dataZoomModel.get('left');
-                            const top = dataZoomModel.get('top');
-                            const side = isHorizontal
-                                ? ((top === 'ph' || top == null) ? 'bottom' : 'top')
-                                : ((left === 'ph' || left == null) ? 'right' : 'left');
-                            dataZoomReservedSpace[side] = DEFAULT_SLIDER_SIZE + DEFAULT_SLIDER_MARGIN;
-                        }
-                    });
-                }
             });
 
             const maxLabelSpace: CartesianAxisPositionMargins = { left: 0, top: 0, right: 0, bottom: 0};
@@ -254,19 +218,13 @@ class Grid implements CoordinateSystemMaster {
                     maxLabelSpace[reservedSpacePerAxis[axisIndex].namePositionCurrAxis];
             });
 
-            const maxReservedSpaceLeft = maxLabelSpace.left + maxNameAndNameGapSpace.left
-                + dataZoomReservedSpace.left;
-            const maxReservedSpaceTop = maxLabelSpace.top + maxNameAndNameGapSpace.top
-                + dataZoomReservedSpace.top;
+            const maxReservedSpaceLeft = maxLabelSpace.left + maxNameAndNameGapSpace.left;
+            const maxReservedSpaceTop = maxLabelSpace.top + maxNameAndNameGapSpace.top;
 
             gridRect.x += maxReservedSpaceLeft;
             gridRect.y += maxReservedSpaceTop;
-            gridRect.width -= maxReservedSpaceLeft + maxLabelSpace.right
-                + maxNameAndNameGapSpace.right
-                + dataZoomReservedSpace.right;
-            gridRect.height -= maxReservedSpaceTop + maxLabelSpace.bottom
-                + maxNameAndNameGapSpace.bottom
-                + dataZoomReservedSpace.bottom;
+            gridRect.width -= maxReservedSpaceLeft + maxLabelSpace.right + maxNameAndNameGapSpace.right;
+            gridRect.height -= maxReservedSpaceTop + maxLabelSpace.bottom + maxNameAndNameGapSpace.bottom;
 
             adjustAxes();
         }
diff --git a/src/coord/cartesian/GridModel.ts b/src/coord/cartesian/GridModel.ts
index 5527046d59..9de723a271 100644
--- a/src/coord/cartesian/GridModel.ts
+++ b/src/coord/cartesian/GridModel.ts
@@ -32,9 +32,6 @@ export interface GridOption extends ComponentOption, BoxLayoutOptionMixin, Shado
     // Whether grid size contain label.
     containLabel?: boolean;
 
-    // Whether grid size contain dataZoom.
-    containDataZoom?: boolean;
-
     backgroundColor?: ZRColor;
     borderWidth?: number;
     borderColor?: ZRColor;
@@ -62,8 +59,6 @@ class GridModel extends ComponentModel<GridOption> implements CoordinateSystemHo
         bottom: 60,
         // If grid size contain label
         containLabel: true,
-        // If grid size contain dataZoom
-        containDataZoom: true,
         // width: {totalWidth} - left - right,
         // height: {totalHeight} - top - bottom,
         backgroundColor: tokens.color.transparent,
diff --git a/src/visual/tokens.ts b/src/visual/tokens.ts
index db58bf1f57..32176eb773 100644
--- a/src/visual/tokens.ts
+++ b/src/visual/tokens.ts
@@ -85,7 +85,7 @@ const tokens: Tokens = {
 
 const color = tokens.color = {
     theme: [
-        '#5978e3',
+        '#5070dd',
         '#b6d634',
         '#505372',
         '#ff994d',

From 8fd6cd4bc77cdce98bc4eaa9a0ea91784b474f90 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Fri, 9 May 2025 14:30:45 +0800
Subject: [PATCH 12/27] fix(theme): remove comment

---
 src/chart/funnel/FunnelView.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/chart/funnel/FunnelView.ts b/src/chart/funnel/FunnelView.ts
index 67cce4826b..6511f1a894 100644
--- a/src/chart/funnel/FunnelView.ts
+++ b/src/chart/funnel/FunnelView.ts
@@ -130,9 +130,7 @@ class FunnelPiece extends graphic.Polygon {
 
         polygon.setTextConfig({
             local: true,
-            inside: !!labelLayout.inside,
-            // Remove insideStroke and outsideFill
-            // insideFill: 'auto'
+            inside: !!labelLayout.inside
         });
 
         const linePoints = labelLayout.linePoints;

From 731aac477e42892629d5e92bcc5a1c46e6722543 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Mon, 12 May 2025 16:10:11 +0800
Subject: [PATCH 13/27] feat(theme): add dark theme

---
 src/component/tooltip/TooltipModel.ts |   1 +
 src/core/echarts.ts                   |   3 +-
 src/theme/dark.ts                     | 176 +++++++++++++++++---------
 src/visual/tokens.ts                  | 155 +++++++++++++----------
 test/theme-list.html                  |  42 +++++-
 5 files changed, 246 insertions(+), 131 deletions(-)

diff --git a/src/component/tooltip/TooltipModel.ts b/src/component/tooltip/TooltipModel.ts
index 3c747a89ac..b4e27662f5 100644
--- a/src/component/tooltip/TooltipModel.ts
+++ b/src/component/tooltip/TooltipModel.ts
@@ -138,6 +138,7 @@ class TooltipModel extends ComponentModel<TooltipOption> {
 
         // tooltip border width, unit is px, default is 0 (no border)
         borderWidth: 1,
+        borderColor: tokens.color.borderShade,
 
         // Tooltip inside padding, default is 5 for all direction
         // Array is allowed to set up, right, bottom, left, same with css
diff --git a/src/core/echarts.ts b/src/core/echarts.ts
index 0a12506f17..adffe0a58c 100644
--- a/src/core/echarts.ts
+++ b/src/core/echarts.ts
@@ -88,7 +88,6 @@ import {throttle} from '../util/throttle';
 import {seriesStyleTask, dataStyleTask, dataColorPaletteTask} from '../visual/style';
 import loadingDefault from '../loading/default';
 import Scheduler from './Scheduler';
-import lightTheme from '../theme/light';
 import darkTheme from '../theme/dark';
 import {CoordinateSystemMaster, CoordinateSystemCreator, CoordinateSystemHostModel} from '../coord/CoordinateSystem';
 import { parseClassType } from '../util/clazz';
@@ -3231,7 +3230,7 @@ function makeSelectChangedEvent(
 }
 
 // Default theme
-registerTheme('light', lightTheme);
+registerTheme('light', {});
 registerTheme('dark', darkTheme);
 
 // For backward compatibility, where the namespace `dataTool` will
diff --git a/src/theme/dark.ts b/src/theme/dark.ts
index 78e97bf44e..ded52e9043 100644
--- a/src/theme/dark.ts
+++ b/src/theme/dark.ts
@@ -17,159 +17,163 @@
 * under the License.
 */
 
-const contrastColor = '#B9B8CE';
-const backgroundColor = '#100C2A';
+import tokens from '../visual/tokens';
+
+const color = tokens.darkColor;
+const backgroundColor = color.background;
+const mapHighlightColor = 'rgba(255,231,130,0.4)';
+
 const axisCommon = function () {
     return {
         axisLine: {
             lineStyle: {
-                color: contrastColor
+                color: color.axisLine
             }
         },
         splitLine: {
             lineStyle: {
-                color: '#484753'
+                color: color.axisSplitLine
             }
         },
         splitArea: {
             areaStyle: {
-                color: ['rgba(255,255,255,0.02)', 'rgba(255,255,255,0.05)']
+                color: [
+                    color.backgroundTint,
+                    color.backgroundTransparent
+                ]
             }
         },
         minorSplitLine: {
             lineStyle: {
-                color: '#20203B'
+                color: color.axisMinorSplitLine
             }
+        },
+        axisLabel: {
+            color: color.axisLabel
         }
     };
 };
 
-const colorPalette = [
-    '#4992ff',
-    '#7cffb2',
-    '#fddd60',
-    '#ff6e76',
-    '#58d9f9',
-    '#05c091',
-    '#ff8a45',
-    '#8d48e3',
-    '#dd79ff'
-];
 const theme = {
     darkMode: true,
 
-    color: colorPalette,
+    color: color.theme,
     backgroundColor: backgroundColor,
     axisPointer: {
         lineStyle: {
-            color: '#817f91'
+            color: color.border
         },
         crossStyle: {
-            color: '#817f91'
+            color: color.borderShade
         },
         label: {
-            // TODO Contrast of label backgorundColor
-            color: '#fff'
+            color: color.tertiary
         }
     },
     legend: {
         textStyle: {
-            color: contrastColor
+            color: color.secondary
         },
         pageTextStyle: {
-            color: contrastColor
+            color: color.tertiary
         }
     },
     textStyle: {
-        color: contrastColor
+        color: color.secondary
     },
     title: {
         textStyle: {
-            color: '#EEF1FA'
+            color: color.primary
         },
         subtextStyle: {
-            color: '#B9B8CE'
+            color: color.quaternary
         }
     },
     toolbox: {
         iconStyle: {
-            borderColor: contrastColor
+            borderColor: color.accent50
+        }
+    },
+    tooltip: {
+        backgroundColor: color.neutral20,
+        borderColor: color.border,
+        textStyle: {
+            color: color.tertiary
         }
     },
     dataZoom: {
-        borderColor: '#71708A',
+        borderColor: color.accent10,
         textStyle: {
-            color: contrastColor
+            color: color.tertiary
         },
         brushStyle: {
-            color: 'rgba(135,163,206,0.3)'
+            color: color.backgroundTint
         },
         handleStyle: {
-            color: '#353450',
-            borderColor: '#C5CBE3'
+            color: color.neutral00,
+            borderColor: color.accent20
         },
         moveHandleStyle: {
-            color: '#B0B6C3',
-            opacity: 0.3
+            color: color.accent40
         },
-        fillerColor: 'rgba(135,163,206,0.2)',
         emphasis: {
             handleStyle: {
-                borderColor: '#91B7F2',
-                color: '#4D587D'
-            },
-            moveHandleStyle: {
-                color: '#636D9A',
-                opacity: 0.7
+                borderColor: color.accent50
             }
         },
         dataBackground: {
             lineStyle: {
-                color: '#71708A',
-                width: 1
+                color: color.accent30
             },
             areaStyle: {
-                color: '#71708A'
+                color: color.accent20
             }
         },
         selectedDataBackground: {
             lineStyle: {
-                color: '#87A3CE'
+                color: color.accent50
             },
             areaStyle: {
-                color: '#87A3CE'
+                color: color.accent30
             }
         }
     },
     visualMap: {
         textStyle: {
-            color: contrastColor
+            color: color.secondary
+        },
+        inRange: {
+            color: [color.neutral10, color.theme[0]]
+        },
+        handleStyle: {
+            borderColor: color.neutral30
         }
     },
     timeline: {
         lineStyle: {
-            color: contrastColor
+            color: color.accent10
         },
         label: {
-            color: contrastColor
+            color: color.tertiary
         },
         controlStyle: {
-            color: contrastColor,
-            borderColor: contrastColor
+            color: color.accent30,
+            borderColor: color.accent30
         }
     },
     calendar: {
         itemStyle: {
-            color: backgroundColor
+            color: color.neutral00,
+            borderColor: color.neutral20
         },
         dayLabel: {
-            color: contrastColor
+            color: color.tertiary
         },
         monthLabel: {
-            color: contrastColor
+            color: color.secondary
         },
         yearLabel: {
-            color: contrastColor
+            color: color.secondary
         }
     },
     timeAxis: axisCommon(),
@@ -181,22 +185,22 @@ const theme = {
         symbol: 'circle'
     },
     graph: {
-        color: colorPalette
+        color: color.theme
     },
     gauge: {
         title: {
-            color: contrastColor
+            color: color.secondary
         },
         axisLine: {
             lineStyle: {
-                color: [[1, 'rgba(207,212,219,0.2)']]
+                color: [[1, color.neutral05]]
             }
         },
         axisLabel: {
-            color: contrastColor
+            color: color.axisLabel
         },
         detail: {
-            color: '#EEF1FA'
+            color: color.primary
         }
     },
     candlestick: {
@@ -208,6 +212,56 @@ const theme = {
             // borderColor: '#ca2824',
             // borderColor0: '#09a443'
         }
+    },
+    funnel: {
+        itemStyle: {
+            borderColor: color.background
+        }
+    },
+    treemap: {
+        breadcrumb: {
+            itemStyle: {
+                color: color.neutral20,
+                textStyle: {
+                    color: color.secondary
+                }
+            },
+            emphasis: {
+                itemStyle: {
+                    color: color.neutral30
+                }
+            }
+        }
+    },
+    sunburst: {
+        itemStyle: {
+            borderColor: color.background
+        }
+    },
+    map: {
+        itemStyle: {
+            borderColor: color.border,
+            areaColor: color.neutral10
+        },
+        label: {
+            color: color.tertiary
+        },
+        emphasis: {
+            label: {
+                color: color.primary
+            },
+            itemStyle: {
+                areaColor: mapHighlightColor
+            }
+        },
+        select: {
+            label: {
+                color: color.primary
+            },
+            itemStyle: {
+                areaColor: mapHighlightColor
+            }
+        }
     }
 };
 (theme.categoryAxis.splitLine as any).show = false;
diff --git a/src/visual/tokens.ts b/src/visual/tokens.ts
index 32176eb773..e047b23249 100644
--- a/src/visual/tokens.ts
+++ b/src/visual/tokens.ts
@@ -1,71 +1,75 @@
 import { extend } from 'zrender/src/core/util';
+import { modifyHSL } from 'zrender/src/tool/color';
+
+interface ColorToken {
+    theme: string[];
+    neutral00: string;
+    neutral05: string;
+    neutral10: string;
+    neutral15: string;
+    neutral20: string;
+    neutral25: string;
+    neutral30: string;
+    neutral35: string;
+    neutral40: string;
+    neutral45: string;
+    neutral50: string;
+    neutral55: string;
+    neutral60: string;
+    neutral65: string;
+    neutral70: string;
+    neutral75: string;
+    neutral80: string;
+    neutral85: string;
+    neutral90: string;
+    neutral95: string;
+    neutral99: string;
+    accent05: string;
+    accent10: string;
+    accent15: string;
+    accent20: string;
+    accent25: string;
+    accent30: string;
+    accent35: string;
+    accent40: string;
+    accent45: string;
+    accent50: string;
+    accent55: string;
+    accent60: string;
+    accent65: string;
+    accent70: string;
+    accent75: string;
+    accent80: string;
+    accent85: string;
+    accent90: string;
+    accent95: string;
+    transparent: string;
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    quaternary: string;
+    disabled: string;
+    border: string;
+    borderTint: string;
+    borderShade: string;
+    background: string;
+    backgroundTint: string;
+    backgroundTransparent: string;
+    backgroundShade: string;
+    shadow: string;
+    shadowTint: string;
+    axisLine: string;
+    axisLineTint: string;
+    axisTick: string;
+    axisTickMinor: string;
+    axisLabel: string;
+    axisSplitLine: string;
+    axisMinorSplitLine: string;
+}
 
 interface Tokens {
-    color: {
-        theme: string[];
-        neutral00: string;
-        neutral05: string;
-        neutral10: string;
-        neutral15: string;
-        neutral20: string;
-        neutral25: string;
-        neutral30: string;
-        neutral35: string;
-        neutral40: string;
-        neutral45: string;
-        neutral50: string;
-        neutral55: string;
-        neutral60: string;
-        neutral65: string;
-        neutral70: string;
-        neutral75: string;
-        neutral80: string;
-        neutral85: string;
-        neutral90: string;
-        neutral95: string;
-        neutral99: string;
-        accent05: string;
-        accent10: string;
-        accent15: string;
-        accent20: string;
-        accent25: string;
-        accent30: string;
-        accent35: string;
-        accent40: string;
-        accent45: string;
-        accent50: string;
-        accent55: string;
-        accent60: string;
-        accent65: string;
-        accent70: string;
-        accent75: string;
-        accent80: string;
-        accent85: string;
-        accent90: string;
-        accent95: string;
-        transparent: string;
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        quaternary: string;
-        disabled: string;
-        border: string;
-        borderTint: string;
-        borderShade: string;
-        background: string;
-        backgroundTint: string;
-        backgroundTransparent: string;
-        backgroundShade: string;
-        shadow: string;
-        shadowTint: string;
-        axisLine: string;
-        axisLineTint: string;
-        axisTick: string;
-        axisTickMinor: string;
-        axisLabel: string;
-        axisSplitLine: string;
-        axisMinorSplitLine: string;
-    };
+    color: ColorToken;
+    darkColor: ColorToken;
     size: {
         xxs: number;
         xs: number;
@@ -80,6 +84,7 @@ interface Tokens {
 
 const tokens: Tokens = {
     color: {} as Tokens['color'],
+    darkColor: {} as Tokens['darkColor'],
     size: {} as Tokens['size']
 };
 
@@ -169,6 +174,26 @@ extend(color, {
     axisMinorSplitLine: color.neutral05,
 } as Tokens['color']);
 
+for (const key in color) {
+    if (color.hasOwnProperty(key)) {
+        const hex = color[key as keyof ColorToken] as string;
+        if (key === 'theme') {
+            // Don't modify theme colors.
+            tokens.darkColor.theme = color.theme.slice();
+        }
+        else if (key.indexOf('accent') === 0) {
+            // Desaturate and lighten accent colors.
+            // @ts-ignore-next-line
+            tokens.darkColor[key] = modifyHSL(hex, null, s => s * 0.5, l => Math.min(1, 1.3 - l));
+        }
+        else {
+            // @ts-ignore-next-line
+            tokens.darkColor[key] = modifyHSL(hex, null, s => s * 0.9, l => 1 - l);
+        }
+    }
+}
+
+
 tokens.size = {
     xxs: 2,
     xs: 5,
diff --git a/test/theme-list.html b/test/theme-list.html
index 0f03fedb34..186a0d59cc 100644
--- a/test/theme-list.html
+++ b/test/theme-list.html
@@ -33,7 +33,7 @@
     </head>
     <body>
         <style>
-          h1, h2, h3 {
+          h1, h2, h3, p {
             margin-left: 15px;
           }
 
@@ -71,7 +71,22 @@
             margin: 10px 20px 10px 10px;
             display: inline-block;
           }
+
+          @media (prefers-color-scheme: dark) {
+            body {
+              background-color: #000;
+              color: #ccc;
+            }
+            h1, h2, h3 {
+              color: #fff;
+            }
+
+            .chart-item-h, .chart-item {
+              border-color: #444;
+            }
+          }
         </style>
+          <p>Set system dark mode to see dark mode charts.</p>
 
           <h2>Typical charts of different series count</h2>
           <div id="main0"></div>
@@ -92,6 +107,23 @@ <h2>Components</h2>
             // 'map/js/china',
             // './data/nutrients.json'
         ], function (echarts, geojson) {
+          const charts = [];
+
+          let wasDarkMode = false;
+          function updateDarkMode() {
+            const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            if (isDarkMode !== wasDarkMode) {
+              for (const chart of charts) {
+                chart.setTheme(isDarkMode ? 'dark' : 'light');
+              }
+              wasDarkMode = isDarkMode;
+            }
+          }
+          const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+          darkModeMediaQuery.addEventListener('change', () => {
+            updateDarkMode();
+          });
+
           echarts.registerMap('USA', geojson, {
             Alaska: {
               left: -131,
@@ -216,8 +248,9 @@ <h2>Components</h2>
               section.appendChild(div);
 
               const chart = echarts.init(div, null, {
-                renderer: 'svg'
+                // renderer: 'svg'
               });
+              charts.push(chart);
 
               const series = [];
               switch (c.data) {
@@ -534,11 +567,14 @@ <h2>Components</h2>
             main1.appendChild(div);
 
             const chart = echarts.init(div, null, {
-              renderer: 'svg'
+              // renderer: 'svg'
             });
+            charts.push(chart);
+
             chart.setOption(option);
           }
 
+          updateDarkMode();
         });
         </script>
     </body>

From 0882eddc7a5e47af3ec4b3c37d93a9966a91b1c0 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Mon, 12 May 2025 16:23:35 +0800
Subject: [PATCH 14/27] feat(theme): remove light colorLayer

---
 src/theme/light.ts | 35 -----------------------------------
 1 file changed, 35 deletions(-)
 delete mode 100644 src/theme/light.ts

diff --git a/src/theme/light.ts b/src/theme/light.ts
deleted file mode 100644
index 8b28ea82a7..0000000000
--- a/src/theme/light.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-*
-*   http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing,
-* software distributed under the License is distributed on an
-* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-* KIND, either express or implied.  See the License for the
-* specific language governing permissions and limitations
-* under the License.
-*/
-
-const colorAll = [
-    '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
-    '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
-
-export default {
-
-    color: colorAll,
-
-    colorLayer: [
-        ['#37A2DA', '#ffd85c', '#fd7b5f'],
-        ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
-        ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
-        colorAll
-    ]
-};
\ No newline at end of file

From 7b34b192369f3da84a55f35b19f5c1c468db0697 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Tue, 20 May 2025 16:18:36 +0800
Subject: [PATCH 15/27] fix(theme): update according to the pr review

---
 src/chart/bar/BarSeries.ts                |  3 +-
 src/chart/funnel/FunnelSeries.ts          |  2 +-
 src/chart/gauge/GaugeSeries.ts            |  4 +-
 src/chart/line/LineSeries.ts              |  4 +-
 src/chart/pie/PieSeries.ts                |  2 +-
 src/component/dataZoom/SliderZoomModel.ts | 11 ++--
 src/component/tooltip/TooltipModel.ts     |  2 +-
 src/coord/calendar/CalendarModel.ts       |  4 +-
 src/core/echarts.ts                       |  5 +-
 src/model/globalDefault.ts                |  6 ++-
 src/theme/rainbow.ts                      |  0
 src/visual/tokens.ts                      | 48 ++++++++---------
 test/theme-list.html                      |  2 +-
 theme/rainbow.js                          | 63 +++++++++++++++++++++++
 14 files changed, 113 insertions(+), 43 deletions(-)
 create mode 100644 src/theme/rainbow.ts
 create mode 100644 theme/rainbow.js

diff --git a/src/chart/bar/BarSeries.ts b/src/chart/bar/BarSeries.ts
index 123e854b49..2610a1d2d4 100644
--- a/src/chart/bar/BarSeries.ts
+++ b/src/chart/bar/BarSeries.ts
@@ -158,7 +158,8 @@ class BarSeriesModel extends BaseBarSeriesModel<BarSeriesOption> {
 
         select: {
             itemStyle: {
-                borderColor: tokens.color.primary
+                borderColor: tokens.color.primary,
+                borderWidth: 2
             }
         },
 
diff --git a/src/chart/funnel/FunnelSeries.ts b/src/chart/funnel/FunnelSeries.ts
index 586019eb31..6de44d5c10 100644
--- a/src/chart/funnel/FunnelSeries.ts
+++ b/src/chart/funnel/FunnelSeries.ts
@@ -178,7 +178,7 @@ class FunnelSeriesModel extends SeriesModel<FunnelSeriesOption> {
             length: 20,
             lineStyle: {
                 // color: 各异,
-                width: 2
+                width: 1
             }
         },
         itemStyle: {
diff --git a/src/chart/gauge/GaugeSeries.ts b/src/chart/gauge/GaugeSeries.ts
index f34b48aea4..1d05e31e6e 100644
--- a/src/chart/gauge/GaugeSeries.ts
+++ b/src/chart/gauge/GaugeSeries.ts
@@ -219,7 +219,7 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
             show: true,
             roundCap: false,
             lineStyle: {       // 属性lineStyle控制线条样式
-                color: [[1, tokens.color.neutral05]],
+                color: [[1, tokens.color.neutral10]],
                 width: 10
             }
         },
@@ -306,7 +306,7 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
             show: true,
             backgroundColor: tokens.color.transparent,
             borderWidth: 0,
-            borderColor: tokens.color.border,
+            borderColor: tokens.color.neutral40,
             width: 100,
             height: null, // self-adaption
             padding: [5, 10],
diff --git a/src/chart/line/LineSeries.ts b/src/chart/line/LineSeries.ts
index 99417fc817..bf1a6cb82f 100644
--- a/src/chart/line/LineSeries.ts
+++ b/src/chart/line/LineSeries.ts
@@ -167,7 +167,7 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
         },
 
         lineStyle: {
-            width: 3,
+            width: 2,
             type: 'solid'
         },
 
@@ -188,7 +188,7 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
         smooth: false,
         smoothMonotone: null,
         symbol: 'emptyCircle',
-        symbolSize: 8,
+        symbolSize: 6,
         symbolRotate: null,
 
         showSymbol: true,
diff --git a/src/chart/pie/PieSeries.ts b/src/chart/pie/PieSeries.ts
index 43ac8f7ce9..3845a8e470 100644
--- a/src/chart/pie/PieSeries.ts
+++ b/src/chart/pie/PieSeries.ts
@@ -284,7 +284,7 @@ class PieSeriesModel extends SeriesModel<PieSeriesOption> {
             maxSurfaceAngle: 90,
             lineStyle: {
                 // color: 各异,
-                width: 2,
+                width: 1,
                 type: 'solid'
             }
         },
diff --git a/src/component/dataZoom/SliderZoomModel.ts b/src/component/dataZoom/SliderZoomModel.ts
index 69d87327c3..1232d9ee7e 100644
--- a/src/component/dataZoom/SliderZoomModel.ts
+++ b/src/component/dataZoom/SliderZoomModel.ts
@@ -167,12 +167,12 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
 
         selectedDataBackground: {
             lineStyle: {
-                color: tokens.color.accent50,
+                color: tokens.color.accent40,
                 width: 0.5
             },
             areaStyle: {
-                color: tokens.color.accent30,
-                opacity: 0.5
+                color: tokens.color.accent20,
+                opacity: 0.3
             }
         },
 
@@ -205,7 +205,8 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
 
         brushSelect: true,
         brushStyle: {
-            color: tokens.color.backgroundTint
+            color: tokens.color.accent30,
+            opacity: 0.3
         },
 
         emphasis: {
@@ -213,7 +214,7 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
                 show: true
             },
             handleStyle: {
-                borderColor: tokens.color.accent50
+                borderColor: tokens.color.accent40
             },
             moveHandleStyle: {
                 opacity: 0.8
diff --git a/src/component/tooltip/TooltipModel.ts b/src/component/tooltip/TooltipModel.ts
index b4e27662f5..89a036d4ec 100644
--- a/src/component/tooltip/TooltipModel.ts
+++ b/src/component/tooltip/TooltipModel.ts
@@ -138,7 +138,7 @@ class TooltipModel extends ComponentModel<TooltipOption> {
 
         // tooltip border width, unit is px, default is 0 (no border)
         borderWidth: 1,
-        borderColor: tokens.color.borderShade,
+        // borderColor: 'auto',
 
         // Tooltip inside padding, default is 5 for all direction
         // Array is allowed to set up, right, bottom, left, same with css
diff --git a/src/coord/calendar/CalendarModel.ts b/src/coord/calendar/CalendarModel.ts
index 3cce27c9fd..57b878e63b 100644
--- a/src/coord/calendar/CalendarModel.ts
+++ b/src/coord/calendar/CalendarModel.ts
@@ -221,7 +221,7 @@ class CalendarModel extends ComponentModel<CalendarOption> {
             // start end
             position: 'start',
             margin: tokens.size.s,
-            color: tokens.color.tertiary
+            color: tokens.color.secondary
         },
 
         // month text style
@@ -247,7 +247,7 @@ class CalendarModel extends ComponentModel<CalendarOption> {
             position: null,
             margin: tokens.size.xl,
             formatter: null,
-            color: tokens.color.secondary,
+            color: tokens.color.quaternary,
             fontFamily: 'sans-serif',
             fontWeight: 'bolder',
             fontSize: 20
diff --git a/src/core/echarts.ts b/src/core/echarts.ts
index adffe0a58c..ba2c677436 100644
--- a/src/core/echarts.ts
+++ b/src/core/echarts.ts
@@ -3229,8 +3229,9 @@ function makeSelectChangedEvent(
     };
 }
 
-// Default theme
-registerTheme('light', {});
+// Default theme, so that we can use `chart.setTheme('default')` to revert to
+// the default theme after changing to other themes.
+registerTheme('default', {});
 registerTheme('dark', darkTheme);
 
 // For backward compatibility, where the namespace `dataTool` will
diff --git a/src/model/globalDefault.ts b/src/model/globalDefault.ts
index da152bcb54..fd7e9fbe09 100644
--- a/src/model/globalDefault.ts
+++ b/src/model/globalDefault.ts
@@ -17,6 +17,7 @@
 * under the License.
 */
 
+import { modifyHSL } from 'zrender/src/tool/color';
 import tokens from '../visual/tokens';
 
 let platform = '';
@@ -28,6 +29,9 @@ if (typeof navigator !== 'undefined') {
 
 const decalColor = 'rgba(0, 0, 0, 0.2)';
 
+const themeColor = tokens.color.theme[0];
+const lightThemeColor = modifyHSL(themeColor, null, null, 0.9);
+
 export default {
 
     darkMode: 'auto',
@@ -37,7 +41,7 @@ export default {
 
     color: tokens.color.theme,
 
-    gradientColor: [tokens.color.accent10, tokens.color.accent50],
+    gradientColor: [lightThemeColor, themeColor],
 
     aria: {
         decal: {
diff --git a/src/theme/rainbow.ts b/src/theme/rainbow.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/visual/tokens.ts b/src/visual/tokens.ts
index e047b23249..acda28d6b6 100644
--- a/src/visual/tokens.ts
+++ b/src/visual/tokens.ts
@@ -123,25 +123,25 @@ const color = tokens.color = {
     neutral95: '#17171b',
     neutral99: '#000',
 
-    accent05: '#eef2fc',
-    accent10: '#dee4f9',
-    accent15: '#cdd7f7',
-    accent20: '#bdc9f4',
-    accent25: '#acbcf1',
-    accent30: '#9baeee',
-    accent35: '#8ba1eb',
-    accent40: '#7a93e9',
-    accent45: '#6a86e6',
-    accent50: '#5978e3',
-    accent55: '#506ccc',
-    accent60: '#4760b6',
-    accent65: '#3e549f',
-    accent70: '#354888',
-    accent75: '#2d3c72',
-    accent80: '#24305b',
-    accent85: '#1b2444',
-    accent90: '#12182d',
-    accent95: '#090c17',
+    accent05: '#eff1f9',
+    accent10: '#e0e4f2',
+    accent15: '#d0d6ec',
+    accent20: '#c0c9e6',
+    accent25: '#b1bbdf',
+    accent30: '#a1aed9',
+    accent35: '#91a0d3',
+    accent40: '#8292cc',
+    accent45: '#7285c6',
+    accent50: '#6578ba',
+    accent55: '#5c6da9',
+    accent60: '#536298',
+    accent65: '#4a5787',
+    accent70: '#404c76',
+    accent75: '#374165',
+    accent80: '#2e3654',
+    accent85: '#252b43',
+    accent90: '#1b2032',
+    accent95: '#121521',
 
     transparent: 'rgba(0,0,0,0)',
 } as Tokens['color'];
@@ -176,19 +176,19 @@ extend(color, {
 
 for (const key in color) {
     if (color.hasOwnProperty(key)) {
-        const hex = color[key as keyof ColorToken] as string;
+        const hex = color[key as keyof ColorToken];
         if (key === 'theme') {
             // Don't modify theme colors.
             tokens.darkColor.theme = color.theme.slice();
         }
         else if (key.indexOf('accent') === 0) {
             // Desaturate and lighten accent colors.
-            // @ts-ignore-next-line
-            tokens.darkColor[key] = modifyHSL(hex, null, s => s * 0.5, l => Math.min(1, 1.3 - l));
+            tokens.darkColor[key as keyof Omit<ColorToken, 'theme'>] =
+                modifyHSL(hex as string, null, s => s * 0.5, l => Math.min(1, 1.3 - l));
         }
         else {
-            // @ts-ignore-next-line
-            tokens.darkColor[key] = modifyHSL(hex, null, s => s * 0.9, l => 1 - l);
+            tokens.darkColor[key as keyof Omit<ColorToken, 'theme'>] =
+                modifyHSL(hex as string, null, s => s * 0.9, l => 1 - l);
         }
     }
 }
diff --git a/test/theme-list.html b/test/theme-list.html
index 186a0d59cc..bc969f0f11 100644
--- a/test/theme-list.html
+++ b/test/theme-list.html
@@ -114,7 +114,7 @@ <h2>Components</h2>
             const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
             if (isDarkMode !== wasDarkMode) {
               for (const chart of charts) {
-                chart.setTheme(isDarkMode ? 'dark' : 'light');
+                chart.setTheme(isDarkMode ? 'dark' : 'default');
               }
               wasDarkMode = isDarkMode;
             }
diff --git a/theme/rainbow.js b/theme/rainbow.js
new file mode 100644
index 0000000000..e7bd31d1a7
--- /dev/null
+++ b/theme/rainbow.js
@@ -0,0 +1,63 @@
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+(function(root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports', 'echarts'], factory);
+    } else if (
+        typeof exports === 'object' &&
+        typeof exports.nodeName !== 'string'
+    ) {
+        // CommonJS
+        factory(exports, require('echarts/lib/echarts'));
+    } else {
+        // Browser globals
+        factory({}, root.echarts);
+    }
+})(this, function(exports, echarts) {
+    var log = function(msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    };
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+
+    var colorAll = [
+        '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
+        '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
+    ];
+
+    var theme = {
+        color: colorAll,
+
+        colorLayer: [
+            ['#37A2DA', '#ffd85c', '#fd7b5f'],
+            ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
+            ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
+            colorAll
+        ]
+    };
+
+    echarts.registerTheme('rainbow', theme);
+});

From 77826be83114cef02510b9c451a599fb064e8b9b Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Fri, 23 May 2025 16:02:33 +0800
Subject: [PATCH 16/27] fix: update styles

---
 src/chart/map/MapSeries.ts                    |  6 +-
 src/component/axisPointer/AxisPointerModel.ts |  4 +-
 src/component/legend/ScrollableLegendModel.ts |  4 +-
 src/component/timeline/SliderTimelineModel.ts | 12 ++--
 src/component/tooltip/TooltipModel.ts         |  1 -
 src/component/tooltip/TooltipView.ts          |  4 +-
 src/coord/cartesian/GridModel.ts              |  6 +-
 src/coord/geo/GeoModel.ts                     |  8 +--
 src/theme/dark.ts                             | 29 ++++++++--
 src/visual/tokens.ts                          |  6 ++
 test/theme-list.html                          | 56 +++++++++++++++++++
 11 files changed, 109 insertions(+), 27 deletions(-)

diff --git a/src/chart/map/MapSeries.ts b/src/chart/map/MapSeries.ts
index 3b187d9f5e..89975368a9 100644
--- a/src/chart/map/MapSeries.ts
+++ b/src/chart/map/MapSeries.ts
@@ -94,8 +94,6 @@ export interface MapSeriesOption extends
     nameProperty?: string;
 }
 
-const highlightColor = '#FFE782';
-
 class MapSeries extends SeriesModel<MapSeriesOption> {
 
     static type = 'series.map' as const;
@@ -340,7 +338,7 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
                 color: tokens.color.primary
             },
             itemStyle: {
-                areaColor: highlightColor
+                areaColor: tokens.color.highlight
             }
         },
 
@@ -350,7 +348,7 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
                 color: tokens.color.primary
             },
             itemStyle: {
-                color: highlightColor
+                color: tokens.color.highlight
             }
         },
 
diff --git a/src/component/axisPointer/AxisPointerModel.ts b/src/component/axisPointer/AxisPointerModel.ts
index 43d41f3281..9ff16f84f1 100644
--- a/src/component/axisPointer/AxisPointerModel.ts
+++ b/src/component/axisPointer/AxisPointerModel.ts
@@ -118,7 +118,7 @@ class AxisPointerModel extends ComponentModel<AxisPointerOption> {
             margin: 3,
             color: tokens.color.neutral00,
             padding: [5, 7, 5, 7],
-            backgroundColor: 'auto', // default: axis line color
+            backgroundColor: tokens.color.accent60, // default: axis line color
             borderColor: null,
             borderWidth: 0,
             borderRadius: 3
@@ -133,7 +133,7 @@ class AxisPointerModel extends ComponentModel<AxisPointerOption> {
             margin: 50,
             // color: '#1b8bbd'
             // color: '#2f4554'
-            color: tokens.color.quaternary,
+            color: tokens.color.accent40,
 
             // For mobile performance
             throttle: 40
diff --git a/src/component/legend/ScrollableLegendModel.ts b/src/component/legend/ScrollableLegendModel.ts
index dfd2dd30a8..6d1aa218e5 100644
--- a/src/component/legend/ScrollableLegendModel.ts
+++ b/src/component/legend/ScrollableLegendModel.ts
@@ -96,8 +96,8 @@ class ScrollableLegendModel extends LegendModel<ScrollableLegendOption> {
             horizontal: ['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z'],
             vertical: ['M0,0L20,0L10,-20z', 'M0,0L20,0L10,20z']
         },
-        pageIconColor: tokens.color.tertiary,
-        pageIconInactiveColor: tokens.color.disabled,
+        pageIconColor: tokens.color.accent50,
+        pageIconInactiveColor: tokens.color.accent10,
         pageIconSize: 15, // Can be [10, 3], which represents [width, height]
         pageTextStyle: {
             color: tokens.color.tertiary
diff --git a/src/component/timeline/SliderTimelineModel.ts b/src/component/timeline/SliderTimelineModel.ts
index 91429e8e30..edec5eca0e 100644
--- a/src/component/timeline/SliderTimelineModel.ts
+++ b/src/component/timeline/SliderTimelineModel.ts
@@ -110,8 +110,8 @@ class SliderTimelineModel extends TimelineModel {
             prevBtnSize: 18,
             nextBtnSize: 18,
 
-            color: tokens.color.accent30,
-            borderColor: tokens.color.accent30,
+            color: tokens.color.accent50,
+            borderColor: tokens.color.accent50,
             borderWidth: 0
         },
         emphasis: {
@@ -122,17 +122,17 @@ class SliderTimelineModel extends TimelineModel {
             },
 
             itemStyle: {
-                color: tokens.color.accent40
+                color: tokens.color.accent60
             },
 
             controlStyle: {
-                color: tokens.color.accent40
-            }
+                color: tokens.color.accent70
+            },
         },
 
         progress: {
             lineStyle: {
-                color: tokens.color.accent20
+                color: tokens.color.accent30
             },
             itemStyle: {
                 color: tokens.color.accent40
diff --git a/src/component/tooltip/TooltipModel.ts b/src/component/tooltip/TooltipModel.ts
index 89a036d4ec..3c747a89ac 100644
--- a/src/component/tooltip/TooltipModel.ts
+++ b/src/component/tooltip/TooltipModel.ts
@@ -138,7 +138,6 @@ class TooltipModel extends ComponentModel<TooltipOption> {
 
         // tooltip border width, unit is px, default is 0 (no border)
         borderWidth: 1,
-        // borderColor: 'auto',
 
         // Tooltip inside padding, default is 5 for all direction
         // Array is allowed to set up, right, bottom, left, same with css
diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts
index 0d05ff67d7..917d1bd356 100644
--- a/src/component/tooltip/TooltipView.ts
+++ b/src/component/tooltip/TooltipView.ts
@@ -874,8 +874,10 @@ class TooltipView extends ComponentView {
         color: ZRColor;
     } {
         if (trigger === 'axis' || isArray(tooltipDataParams)) {
+            const isDark = this._api.getZr().isDarkMode();
+            const defaultColor = isDark ? tokens.darkColor.border : tokens.color.border;
             return {
-                color: borderColor || (this._renderMode === 'html' ? tokens.color.neutral00 : 'none')
+                color: borderColor || defaultColor
             };
         }
 
diff --git a/src/coord/cartesian/GridModel.ts b/src/coord/cartesian/GridModel.ts
index 9de723a271..048cbdcb09 100644
--- a/src/coord/cartesian/GridModel.ts
+++ b/src/coord/cartesian/GridModel.ts
@@ -53,12 +53,12 @@ class GridModel extends ComponentModel<GridOption> implements CoordinateSystemHo
         show: false,
         // zlevel: 0,
         z: 0,
-        left: tokens.size.xl,
+        left: '15%',
         top: 65,
-        right: tokens.size.xl,
+        right: '10%',
         bottom: 60,
         // If grid size contain label
-        containLabel: true,
+        containLabel: false,
         // width: {totalWidth} - left - right,
         // height: {totalHeight} - top - bottom,
         backgroundColor: tokens.color.transparent,
diff --git a/src/coord/geo/GeoModel.ts b/src/coord/geo/GeoModel.ts
index a34a5267b0..ba1b3b9e1d 100644
--- a/src/coord/geo/GeoModel.ts
+++ b/src/coord/geo/GeoModel.ts
@@ -189,12 +189,12 @@ class GeoModel extends ComponentModel<GeoOption> {
 
         label: {
             show: false,
-            color: tokens.color.secondary
+            color: tokens.color.tertiary
         },
 
         itemStyle: {
             borderWidth: 0.5,
-            borderColor: tokens.color.borderShade,
+            borderColor: tokens.color.border,
             // Default color:
             // + geoJSON: #eee
             // + geoSVG: null (use SVG original `fill`)
@@ -207,7 +207,7 @@ class GeoModel extends ComponentModel<GeoOption> {
                 color: tokens.color.primary
             },
             itemStyle: {
-                areaColor: tokens.color.background
+                areaColor: tokens.color.highlight
             }
         },
 
@@ -217,7 +217,7 @@ class GeoModel extends ComponentModel<GeoOption> {
                 color: tokens.color.primary
             },
             itemStyle: {
-                color: tokens.color.backgroundShade
+                color: tokens.color.highlight
             }
         },
 
diff --git a/src/theme/dark.ts b/src/theme/dark.ts
index ded52e9043..99b053c175 100644
--- a/src/theme/dark.ts
+++ b/src/theme/dark.ts
@@ -21,7 +21,6 @@ import tokens from '../visual/tokens';
 
 const color = tokens.darkColor;
 const backgroundColor = color.background;
-const mapHighlightColor = 'rgba(255,231,130,0.4)';
 
 const axisCommon = function () {
     return {
@@ -96,7 +95,7 @@ const theme = {
     },
     tooltip: {
         backgroundColor: color.neutral20,
-        borderColor: color.border,
+        // borderColor: color.border,
         textStyle: {
             color: color.tertiary
         }
@@ -251,7 +250,7 @@ const theme = {
                 color: color.primary
             },
             itemStyle: {
-                areaColor: mapHighlightColor
+                areaColor: color.highlight
             }
         },
         select: {
@@ -259,7 +258,29 @@ const theme = {
                 color: color.primary
             },
             itemStyle: {
-                areaColor: mapHighlightColor
+                areaColor: color.highlight
+            }
+        }
+    },
+    geo: {
+        itemStyle: {
+            borderColor: color.border,
+            areaColor: color.neutral10
+        },
+        emphasis: {
+            label: {
+                color: color.primary
+            },
+            itemStyle: {
+                areaColor: color.highlight
+            }
+        },
+        select: {
+            label: {
+                color: color.primary
+            },
+            itemStyle: {
+                color: color.highlight
             }
         }
     }
diff --git a/src/visual/tokens.ts b/src/visual/tokens.ts
index acda28d6b6..68a49afe75 100644
--- a/src/visual/tokens.ts
+++ b/src/visual/tokens.ts
@@ -49,6 +49,7 @@ interface ColorToken {
     tertiary: string;
     quaternary: string;
     disabled: string;
+    highlight: string;
     border: string;
     borderTint: string;
     borderShade: string;
@@ -144,6 +145,8 @@ const color = tokens.color = {
     accent95: '#121521',
 
     transparent: 'rgba(0,0,0,0)',
+
+    highlight: 'rgba(255,231,130,0.8)'
 } as Tokens['color'];
 
 extend(color, {
@@ -181,6 +184,9 @@ for (const key in color) {
             // Don't modify theme colors.
             tokens.darkColor.theme = color.theme.slice();
         }
+        else if (key === 'highlight') {
+            tokens.darkColor.highlight = 'rgba(255,231,130,0.4)';
+        }
         else if (key.indexOf('accent') === 0) {
             // Desaturate and lighten accent colors.
             tokens.darkColor[key as keyof Omit<ColorToken, 'theme'>] =
diff --git a/test/theme-list.html b/test/theme-list.html
index bc969f0f11..8eba155bc8 100644
--- a/test/theme-list.html
+++ b/test/theme-list.html
@@ -344,6 +344,9 @@ <h2>Components</h2>
               yAxis: {
                 type: 'value'
               },
+              grid: {
+                bottom: 90
+              },
               options: [
               {
                 series: [{
@@ -378,6 +381,9 @@ <h2>Components</h2>
               title: {
                 text: 'dataZoom & toolbox',
               },
+              grid: {
+                bottom: 90
+              },
               toolbox: {
                 feature: {
                   dataZoom: {
@@ -422,6 +428,9 @@ <h2>Components</h2>
               title: {
                 text: 'dataZoom & legend (right/bottom)'
               },
+              grid: {
+                bottom: 90
+              },
               legend: {
                 show: true
               },
@@ -557,9 +566,56 @@ <h2>Components</h2>
                   show: true
                 }
               }],
+            }, {
+              title: {
+                text: 'geo'
+              },
+              geo: [{
+                map: 'test1',
+                zoom: 1,
+                roam: true
+              }],
+              series: [{
+                type: 'scatter',
+                coordinateSystem: 'geo',
+                symbol: 'roundRect',
+                symbolSize: 30,
+                data: (() => {
+                  const data = [];
+                  const step = 500;
+                  const lngStart = 1000;
+                  const latStart = 2000;
+                  for (let i = 0; i < 10; i++) {
+                    for (let j = 0; j < 10; j++) {
+                      data.push({
+                        value: [lngStart + j * step, latStart + i * step],
+                        symbolSize: 5 + j * 5
+                      });
+                    }
+                  }
+                  return data;
+                })()
+              }]
             }
           ];
 
+          const testGeoJson1 = {
+            type: 'FeatureCollection',
+            features: [{
+              geometry: {
+                type: 'Polygon',
+                coordinates: [
+                  [[2000, 3000], [5000, 3000], [5000, 8000], [2000, 8000]]
+                ]
+              },
+              properties: {
+                name: 'Some Area',
+                childNum: 1
+              }
+            }]
+          };
+          echarts.registerMap('test1', testGeoJson1);
+
           const main1 = document.getElementById('main1');
           for (const option of options) {
             const div = document.createElement('div');

From f9b2a821f293b2fa702c2891db0cc93f357b2c04 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Mon, 26 May 2025 15:27:01 +0800
Subject: [PATCH 17/27] chore(theme): support theme in visual test

---
 src/component/timeline/SliderTimelineModel.ts |  9 ++-
 src/coord/cartesian/GridModel.ts              |  2 +-
 test/lib/config.js                            |  3 +
 test/lib/testHelper.js                        | 20 +++++--
 test/runTest/cli.js                           |  6 +-
 test/runTest/client/client.js                 | 12 +++-
 test/runTest/client/index.html                |  7 +++
 test/runTest/server.js                        |  4 ++
 test/runTest/store.js                         | 14 +++--
 test/theme-list.html                          |  9 ---
 theme/v5.js                                   | 59 +++++++++++++++++++
 11 files changed, 119 insertions(+), 26 deletions(-)
 create mode 100644 theme/v5.js

diff --git a/src/component/timeline/SliderTimelineModel.ts b/src/component/timeline/SliderTimelineModel.ts
index edec5eca0e..866932b293 100644
--- a/src/component/timeline/SliderTimelineModel.ts
+++ b/src/component/timeline/SliderTimelineModel.ts
@@ -70,7 +70,8 @@ class SliderTimelineModel extends TimelineModel {
         },
         itemStyle: {
             color: tokens.color.accent20,
-            borderWidth: 0
+            borderWidth: 0,
+            borderColor: tokens.color.accent20
         },
 
         checkpointStyle: {
@@ -122,11 +123,13 @@ class SliderTimelineModel extends TimelineModel {
             },
 
             itemStyle: {
-                color: tokens.color.accent60
+                color: tokens.color.accent60,
+                borderColor: tokens.color.accent60
             },
 
             controlStyle: {
-                color: tokens.color.accent70
+                color: tokens.color.accent70,
+                borderColor: tokens.color.accent70
             },
         },
 
diff --git a/src/coord/cartesian/GridModel.ts b/src/coord/cartesian/GridModel.ts
index 048cbdcb09..cb3b7e92d3 100644
--- a/src/coord/cartesian/GridModel.ts
+++ b/src/coord/cartesian/GridModel.ts
@@ -56,7 +56,7 @@ class GridModel extends ComponentModel<GridOption> implements CoordinateSystemHo
         left: '15%',
         top: 65,
         right: '10%',
-        bottom: 60,
+        bottom: 80,
         // If grid size contain label
         containLabel: false,
         // width: {totalWidth} - left - right,
diff --git a/test/lib/config.js b/test/lib/config.js
index f277873066..5fe747461b 100644
--- a/test/lib/config.js
+++ b/test/lib/config.js
@@ -48,6 +48,9 @@
     if (params.__USE_DIRTY_RECT__) {
         window.__ECHARTS__DEFAULT__USE_DIRTY_RECT__ = params.__USE_DIRTY_RECT__ === 'true';
     }
+    if (params.__THEME__) {
+        window.__ECHARTS__DEFAULT__THEME__ = params.__THEME__;
+    }
 
     // Set echarts source code.
     var ecDistPath;
diff --git a/test/lib/testHelper.js b/test/lib/testHelper.js
index 224c2a1334..53187d0785 100644
--- a/test/lib/testHelper.js
+++ b/test/lib/testHelper.js
@@ -155,7 +155,7 @@
      * @param {boolean} [opt.recordVideo]
      * @param {string} [opt.renderer] 'canvas' or 'svg'
      */
-    testHelper.create = function (echarts, domOrId, opt) {
+    testHelper.create = async function (echarts, domOrId, opt) {
         var dom = getDom(domOrId);
 
         if (!dom) {
@@ -229,7 +229,7 @@
                 + '</div>';
         }
 
-        chart = testHelper.createChart(echarts, chartContainer, opt.option, opt, opt.setOptionOpts, errMsgPrefix);
+        chart = await testHelper.createChart(echarts, chartContainer, opt.option, opt, opt.setOptionOpts, errMsgPrefix);
 
         var dataTables = opt.dataTables;
         if (!dataTables && opt.dataTable) {
@@ -793,7 +793,7 @@
      * @param {string} opt.renderer 'canvas' or 'svg'
      * @param {string} errMsgPrefix
      */
-    testHelper.createChart = function (echarts, domOrId, option, opt, errMsgPrefix) {
+    testHelper.createChart = async function (echarts, domOrId, option, opt, errMsgPrefix) {
         if (typeof opt === 'number') {
             opt = {height: opt};
         }
@@ -811,7 +811,19 @@
                 dom.style.height = opt.height + 'px';
             }
 
-            var chart = echarts.init(dom, null, {
+            var theme = opt.theme && opt.theme !== 'none' ? opt.theme : null;
+            if (theme == null && window.__ECHARTS__DEFAULT__THEME__) {
+                theme = window.__ECHARTS__DEFAULT__THEME__;
+            }
+            if (theme) {
+                await new Promise((resolve) => {
+                    require([`theme/${theme}`], function() {
+                        resolve();
+                    });
+                });
+            }
+
+            var chart = echarts.init(dom, theme, {
                 renderer: opt.renderer,
                 useCoarsePointer: opt.useCoarsePointer,
                 pointerSize: opt.pointerSize
diff --git a/test/runTest/cli.js b/test/runTest/cli.js
index cbc40ac5ac..59f54b384a 100644
--- a/test/runTest/cli.js
+++ b/test/runTest/cli.js
@@ -45,6 +45,7 @@ program
     .option('--renderer <renderer>', 'svg/canvas renderer')
     .option('--use-coarse-pointer <useCoarsePointer>', '"auto" (by default) or "true" or "false"')
     .option('--threads <threads>', 'How many threads to run concurrently')
+    .option('--theme <theme>', 'Theme to use)')
     .option('--no-save', 'Don\'t save result')
     .option('--dir <dir>', 'Out dir');
 
@@ -55,6 +56,8 @@ program.actual = program.actual || 'local';
 program.threads = +program.threads || 1;
 program.renderer = (program.renderer || 'canvas').toLowerCase();
 program.useCoarsePointer = (program.useCoarsePointer || 'auto').toLowerCase();
+program.theme = program.theme || 'none';
+console.log('CLI theme parameter:', program.theme);
 program.dir = program.dir || (__dirname + '/tmp');
 
 if (!program.tests) {
@@ -300,7 +303,7 @@ async function runTestPage(browser, testOpt, source, version, runtimeCode, isExp
             width: 800,
             height: 600,
         });
-        await page.goto(`${origin}/test/${fileUrl}?__RENDERER__=${program.renderer}&__COARSE__POINTER__=${program.useCoarsePointer}`, {
+        await page.goto(`${origin}/test/${fileUrl}?__RENDERER__=${program.renderer}&__COARSE__POINTER__=${program.useCoarsePointer}&__THEME__=${program.theme}`, {
             waitUntil: 'networkidle2',
             timeout: 10000,
             // timeout: 0
@@ -431,6 +434,7 @@ async function runTest(browser, testOpt, runtimeCode, expectedSource, expectedVe
         testOpt.expectedVersion = expectedVersion;
         testOpt.useSVG = program.renderer === 'svg';
         testOpt.useCoarsePointer = program.useCoarsePointer;
+        testOpt.theme = program.theme;
         testOpt.lastRun = Date.now();
     }
     else {
diff --git a/test/runTest/client/client.js b/test/runTest/client/client.js
index 9241f39edc..88576794a1 100644
--- a/test/runTest/client/client.js
+++ b/test/runTest/client/client.js
@@ -156,13 +156,14 @@ const app = new Vue({
 
         runConfig: Object.assign({
             sortBy: 'name',
-            actualVersion: null,
+            actualVersion: 'local',
             expectedVersion: null,
             expectedSource: 'release',
-            actualSource: 'local',
+            actualSource: 'release',
             renderer: 'canvas',
             useCoarsePointer: 'auto',
-            threads: 4
+            threads: 4,
+            theme: 'none'
         }, urlRunConfig)
     },
 
@@ -483,6 +484,9 @@ const app = new Vue({
             if (test.useCoarsePointer) {
                 searches.push('__COARSE__POINTER__=true');
             }
+            if (test.theme && test.theme !== 'none') {
+                searches.push('__THEME__=' + test.theme);
+            }
             let src = test.fileUrl;
             if (searches.length) {
                 src = src + '?' + searches.join('&');
@@ -504,6 +508,7 @@ const app = new Vue({
             // TODO
             this.runConfig.renderer = runResult.renderer;
             this.runConfig.useCoarsePointer = runResult.useCoarsePointer;
+            this.runConfig.theme = runResult.theme || 'none';
 
             this.showRunsDialog = false;
         },
@@ -570,6 +575,7 @@ function runTests(tests, noHeadless) {
         threads: app.runConfig.threads,
         renderer: app.runConfig.renderer,
         useCoarsePointer: app.runConfig.useCoarsePointer,
+        theme: app.runConfig.theme,
         noHeadless,
         replaySpeed: noHeadless ? 5 : 5
     });
diff --git a/test/runTest/client/index.html b/test/runTest/client/index.html
index f5270a90a5..7e7f927759 100644
--- a/test/runTest/client/index.html
+++ b/test/runTest/client/index.html
@@ -219,6 +219,13 @@ <h1>Visual Regression Testing Tool</h1>
                             </el-select>
                             <!-- <el-slider style="width: 100px;" v-model="runConfig.threads" :step="1" :min="1" :max="8" show-stops></el-slider> -->
                         </div>
+                        <div class="run-config-item">
+                            <span class="label">Theme</span>
+                            <el-select :disabled="running" size="mini" style="width: 100px;" v-model="runConfig.theme" placeholder="none">
+                                <el-option key="none" label="none" value="none"></el-option>
+                                <el-option key="v5" label="v5" value="v5"></el-option>
+                            </el-select>
+                        </div>
                     </div>
                 </div>
 
diff --git a/test/runTest/server.js b/test/runTest/server.js
index a6f7e29337..322fbcaa46 100644
--- a/test/runTest/server.js
+++ b/test/runTest/server.js
@@ -153,6 +153,7 @@ function startTests(testsNameList, socket, {
     expectedVersion,
     renderer,
     useCoarsePointer,
+    theme,
     noSave
 }) {
     console.log('Received: ', testsNameList.join(','));
@@ -215,6 +216,7 @@ function startTests(testsNameList, socket, {
                 '--expected-source', expectedSource,
                 '--renderer', renderer || '',
                 '--use-coarse-pointer', useCoarsePointer,
+                '--theme', theme || 'none',
                 '--threads', Math.min(threadsCount, CLI_FIXED_THREADS_COUNT),
                 '--dir', getResultBaseDir(),
                 ...(noHeadless ? ['--no-headless'] : []),
@@ -375,6 +377,7 @@ async function start() {
                     expectedVersion: data.expectedVersion,
                     renderer: data.renderer,
                     useCoarsePointer: data.useCoarsePointer,
+                    theme: data.theme,
                     noSave: false
                 }
             );
@@ -432,6 +435,7 @@ async function start() {
                     expectedVersion: data.expectedVersion,
                     renderer: data.renderer || '',
                     useCoarsePointer: data.useCoarsePointer,
+                    theme: data.theme || 'none',
                     noSave: true
                 });
             }
diff --git a/test/runTest/store.js b/test/runTest/store.js
index 21d1d2d49e..a87655964f 100644
--- a/test/runTest/store.js
+++ b/test/runTest/store.js
@@ -91,7 +91,8 @@ function getRunHash(params) {
         params.actualSource,
         actualVersion,
         params.renderer,
-        params.useCoarsePointer
+        params.useCoarsePointer,
+        params.theme || 'none'
     ].join(TEST_HASH_SPLITTER);
 }
 
@@ -114,7 +115,8 @@ function parseRunHash(str) {
         actualSource: parts[2],
         actualVersion: actualVersion,
         renderer: parts[4],
-        useCoarsePointer: parts[5]
+        useCoarsePointer: parts[5],
+        theme: parts[6] || 'none'
     };
 }
 
@@ -123,12 +125,12 @@ function getResultBaseDir() {
 }
 
 module.exports.clearStaledResults = async function () {
-    // If split by __ and there is no 6 parts, it is staled.
+    // If split by __ and there is no 7 parts, it is staled.
     try {
         const dirs = await globby('*', { cwd: RESULTS_ROOT_DIR, onlyDirectories: true });
         for (let dir of dirs) {
             const parts = dir.split(TEST_HASH_SPLITTER);
-            if (parts.length !== 6) {
+            if (parts.length !== 7) {
                 await module.exports.delTestsRun(dir);
             }
         }
@@ -152,7 +154,8 @@ module.exports.checkStoreVersion = function (runParams) {
         && storeParams.actualSource === runParams.actualSource
         && storeParams.actualVersion === runParams.actualVersion
         && storeParams.renderer === runParams.renderer
-        && storeParams.useCoarsePointer === runParams.useCoarsePointer;
+        && storeParams.useCoarsePointer === runParams.useCoarsePointer
+        && storeParams.theme === (runParams.theme || 'none');
 }
 
 function getResultFilePath() {
@@ -346,6 +349,7 @@ module.exports.getAllTestsRuns = async function () {
             actualVersion: params.actualVersion,
             renderer: params.renderer,
             useCoarsePointer: params.useCoarsePointer,
+            theme: params.theme || 'none',
             lastRunTime: lastRunTime > 0 ? formatDate(lastRunTime) : 'N/A',
             total: total,
             passed: passedCount,
diff --git a/test/theme-list.html b/test/theme-list.html
index 8eba155bc8..65b2a8fcfa 100644
--- a/test/theme-list.html
+++ b/test/theme-list.html
@@ -344,9 +344,6 @@ <h2>Components</h2>
               yAxis: {
                 type: 'value'
               },
-              grid: {
-                bottom: 90
-              },
               options: [
               {
                 series: [{
@@ -381,9 +378,6 @@ <h2>Components</h2>
               title: {
                 text: 'dataZoom & toolbox',
               },
-              grid: {
-                bottom: 90
-              },
               toolbox: {
                 feature: {
                   dataZoom: {
@@ -428,9 +422,6 @@ <h2>Components</h2>
               title: {
                 text: 'dataZoom & legend (right/bottom)'
               },
-              grid: {
-                bottom: 90
-              },
               legend: {
                 show: true
               },
diff --git a/theme/v5.js b/theme/v5.js
new file mode 100644
index 0000000000..0317cefe0c
--- /dev/null
+++ b/theme/v5.js
@@ -0,0 +1,59 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+(function(root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports', 'echarts'], factory);
+    } else if (
+        typeof exports === 'object' &&
+        typeof exports.nodeName !== 'string'
+    ) {
+        // CommonJS
+        factory(exports, require('echarts/lib/echarts'));
+    } else {
+        // Browser globals
+        factory({}, root.echarts);
+    }
+})(this, function(exports, echarts) {
+    var log = function(msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    };
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+    var colorPalette = [
+        '#5470c6',
+        '#91cc75',
+        '#fac858',
+        '#ee6666',
+        '#73c0de',
+        '#3ba272',
+        '#fc8452',
+        '#9a60b4',
+        '#ea7ccc'
+    ];
+    echarts.registerTheme('v5', {
+        color: colorPalette,
+        gradientColor: ['#f6efa6', '#d88273', '#bf444c'],
+    });
+});

From 8005bc3d41a24d06e7508d47e7b480f172ab6b1b Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Tue, 27 May 2025 15:56:15 +0800
Subject: [PATCH 18/27] test: support using theme in visual test

---
 test/lib/config.js            | 60 ++++++++++++++++++++++++++++++++---
 test/runTest/cli.js           |  9 +++++-
 test/runTest/client/client.js |  2 +-
 3 files changed, 65 insertions(+), 6 deletions(-)

diff --git a/test/lib/config.js b/test/lib/config.js
index 5fe747461b..b03498c442 100644
--- a/test/lib/config.js
+++ b/test/lib/config.js
@@ -1,4 +1,3 @@
-
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -56,8 +55,6 @@
     var ecDistPath;
     if (params.__ECDIST__ && !params.__CASE_FRAME__) {
         ecDistPath = ({
-            'dist': '../dist/echarts',
-            'dist/echarts.simple': '../dist/echarts.simple',
             'webpack-req-ec': '../../echarts-boilerplate/echarts-webpack/dist/webpack-req-ec',
             'webpack-req-eclibec': '../../echarts-boilerplate/echarts-webpack/dist/webpack-req-eclibec',
             'webpackold-req-ec': '../../echarts-boilerplate/echarts-webpackold/dist/webpackold-req-ec',
@@ -88,8 +85,63 @@
                 'i18n': '../i18n',
                 'extension': '../dist/extension',
                 'ssrClient': '../ssr/client/dist/index.js'
-            }
+            },
         });
+
+        decorateGlobalRequire();
+    }
+
+    async function decorateGlobalRequire() {
+        if (window.__ECHARTS__DEFAULT__THEME__ == null) {
+            return;
+        }
+
+        var global = new Function('return this')();
+        var originalRequire = global.require;
+        global.require = function (depsIds, cb) {
+            if (typeof depsIds === 'string') {
+                depsIds = [depsIds];
+            }
+            function newCb() {
+                var args = Array.prototype.slice.call(arguments);
+                for (var i = 0; i < depsIds.length; i++) {
+                    var depId = depsIds[i];
+                    if (depId === 'echarts') {
+                        args[i] = decorateEChartsInit(args[i]);
+                    }
+                }
+
+                return originalRequire(['theme/' + window.__ECHARTS__DEFAULT__THEME__], function () {
+                    if (cb) {
+                        return cb.apply(null, args);
+                    }
+                });
+            }
+            return originalRequire.call(this, depsIds, newCb);
+        };
+    }
+
+    function decorateEChartsInit(echarts) {
+        if (echarts && echarts.init) {
+            var newEC = {};
+            // The original echarts object is configurable: false, thus clone.
+            for (var key in echarts) {
+                if (echarts.hasOwnProperty(key)) {
+                    newEC[key] = echarts[key];
+                }
+            }
+            var originalInit = echarts.init;
+            newEC.init = function () {
+                var args = Array.prototype.slice.call(arguments);
+                // Set default renderer in dev mode.
+                if (window.__ECHARTS__DEFAULT__THEME__ != null) {
+                    args[1] = window.__ECHARTS__DEFAULT__THEME__;
+                }
+                return originalInit.apply(this, args);
+            };
+            return newEC;
+        }
+        return echarts
     }
 
     // Not let scrollbar affect page size.
diff --git a/test/runTest/cli.js b/test/runTest/cli.js
index 59f54b384a..12b3f803bc 100644
--- a/test/runTest/cli.js
+++ b/test/runTest/cli.js
@@ -303,7 +303,14 @@ async function runTestPage(browser, testOpt, source, version, runtimeCode, isExp
             width: 800,
             height: 600,
         });
-        await page.goto(`${origin}/test/${fileUrl}?__RENDERER__=${program.renderer}&__COARSE__POINTER__=${program.useCoarsePointer}&__THEME__=${program.theme}`, {
+
+        let url = `${origin}/test/${fileUrl}?__RENDERER__=${program.renderer}&__COARSE__POINTER__=${program.useCoarsePointer}`;
+
+        if (program.theme && program.theme !== 'none' && version === 'local') {
+            url += `&__THEME__=${program.theme}`;
+        }
+
+        await page.goto(url, {
             waitUntil: 'networkidle2',
             timeout: 10000,
             // timeout: 0
diff --git a/test/runTest/client/client.js b/test/runTest/client/client.js
index 88576794a1..119dfd07f3 100644
--- a/test/runTest/client/client.js
+++ b/test/runTest/client/client.js
@@ -484,7 +484,7 @@ const app = new Vue({
             if (test.useCoarsePointer) {
                 searches.push('__COARSE__POINTER__=true');
             }
-            if (test.theme && test.theme !== 'none') {
+            if (test.theme && test.theme !== 'none' && ecVersion === 'local') {
                 searches.push('__THEME__=' + test.theme);
             }
             let src = test.fileUrl;

From f74b153af030a1620f6afdb4602898794ab69c4e Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Tue, 27 May 2025 17:42:59 +0800
Subject: [PATCH 19/27] feat(theme): WIP v5 theme

---
 src/component/dataZoom/SliderZoomModel.ts |   9 +-
 src/component/dataZoom/SliderZoomView.ts  |   6 +-
 src/component/tooltip/TooltipModel.ts     |   7 +
 src/component/tooltip/TooltipView.ts      |  10 +-
 src/coord/radar/RadarModel.ts             |   7 +-
 src/loading/default.ts                    |   2 +-
 src/theme/dark.ts                         |  13 +-
 test/theme-list.html                      |  38 +-
 theme/v5.js                               | 508 ++++++++++++++++++++++
 9 files changed, 583 insertions(+), 17 deletions(-)

diff --git a/src/component/dataZoom/SliderZoomModel.ts b/src/component/dataZoom/SliderZoomModel.ts
index 1232d9ee7e..76c767637f 100644
--- a/src/component/dataZoom/SliderZoomModel.ts
+++ b/src/component/dataZoom/SliderZoomModel.ts
@@ -127,7 +127,10 @@ export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMix
         handleLabel: SliderHandleLabelOption
         handleStyle?: ItemStyleOption
         moveHandleStyle?: ItemStyleOption
-    }
+    },
+
+    // Distance between the slider and the edge of the chart.
+    defaultLocationEdgeGap?: number
 }
 
 
@@ -219,7 +222,9 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
             moveHandleStyle: {
                 opacity: 0.8
             }
-        }
+        },
+
+        defaultLocationEdgeGap: 15
     } as SliderDataZoomOption);
 }
 
diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts
index e3fb149c63..38686678ec 100644
--- a/src/component/dataZoom/SliderZoomView.ts
+++ b/src/component/dataZoom/SliderZoomView.ts
@@ -48,7 +48,6 @@ import tokens from '../../visual/tokens';
 const Rect = graphic.Rect;
 
 // Constants
-const DEFAULT_LOCATION_EDGE_GAP = 15;
 const DEFAULT_FRAME_BORDER_WIDTH = 1;
 const DEFAULT_FILLER_SIZE = 30;
 const DEFAULT_MOVE_HANDLE_SIZE = 7;
@@ -229,18 +228,19 @@ class SliderZoomView extends DataZoomView {
         // auto-adapt according to target grid.
         const coordRect = this._findCoordRect();
         const ecSize = {width: api.getWidth(), height: api.getHeight()};
+        const edgeGap = dataZoomModel.get('defaultLocationEdgeGap', true) || 0;
         // Default align by coordinate system rect.
         const positionInfo = this._orient === HORIZONTAL
             ? {
                 // Why using 'right', because right should be used in vertical,
                 // and it is better to be consistent for dealing with position param merge.
                 right: ecSize.width - coordRect.x - coordRect.width,
-                top: (ecSize.height - DEFAULT_FILLER_SIZE - DEFAULT_LOCATION_EDGE_GAP - moveHandleSize),
+                top: (ecSize.height - DEFAULT_FILLER_SIZE - edgeGap - moveHandleSize),
                 width: coordRect.width,
                 height: DEFAULT_FILLER_SIZE
             }
             : { // vertical
-                right: DEFAULT_LOCATION_EDGE_GAP,
+                right: edgeGap,
                 top: coordRect.y,
                 width: DEFAULT_FILLER_SIZE,
                 height: coordRect.height
diff --git a/src/component/tooltip/TooltipModel.ts b/src/component/tooltip/TooltipModel.ts
index 3c747a89ac..7cf87afd75 100644
--- a/src/component/tooltip/TooltipModel.ts
+++ b/src/component/tooltip/TooltipModel.ts
@@ -79,6 +79,11 @@ export interface TooltipOption extends CommonTooltipOption<TopLevelFormatterPara
      */
     className?: string
 
+    /**
+     * Default border color to use when there are multiple series
+     */
+    defaultBorderColor?: string
+
     order?: TooltipOrderMode
 }
 
@@ -139,6 +144,8 @@ class TooltipModel extends ComponentModel<TooltipOption> {
         // tooltip border width, unit is px, default is 0 (no border)
         borderWidth: 1,
 
+        defaultBorderColor: tokens.color.border,
+
         // Tooltip inside padding, default is 5 for all direction
         // Array is allowed to set up, right, bottom, left, same with css
         // The default value: See `tooltip/tooltipMarkup.ts#getPaddingFromTooltipModel`.
diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts
index 917d1bd356..ce8d0cb06d 100644
--- a/src/component/tooltip/TooltipView.ts
+++ b/src/component/tooltip/TooltipView.ts
@@ -825,7 +825,8 @@ class TooltipView extends ComponentView {
             [x, y],
             params,
             tooltipModel.get('trigger'),
-            tooltipModel.get('borderColor')
+            tooltipModel.get('borderColor'),
+            tooltipModel.get('defaultBorderColor', true)
         );
         const nearPointColor = nearPoint.color;
 
@@ -869,15 +870,14 @@ class TooltipView extends ComponentView {
         point: number[],
         tooltipDataParams: TooltipCallbackDataParams | TooltipCallbackDataParams[],
         trigger: TooltipOption['trigger'],
-        borderColor: ZRColor
+        borderColor: ZRColor,
+        defaultBorderColor: ZRColor
     ): {
         color: ZRColor;
     } {
         if (trigger === 'axis' || isArray(tooltipDataParams)) {
-            const isDark = this._api.getZr().isDarkMode();
-            const defaultColor = isDark ? tokens.darkColor.border : tokens.color.border;
             return {
-                color: borderColor || defaultColor
+                color: borderColor || defaultBorderColor
             };
         }
 
diff --git a/src/coord/radar/RadarModel.ts b/src/coord/radar/RadarModel.ts
index dbf9b7a460..4723a34541 100644
--- a/src/coord/radar/RadarModel.ts
+++ b/src/coord/radar/RadarModel.ts
@@ -183,12 +183,13 @@ class RadarModel extends ComponentModel<RadarOption> implements CoordinateSystem
 
         center: ['50%', '50%'],
 
-        radius: '75%',
+        radius: '50%',
 
         startAngle: 90,
 
         axisName: {
-            show: true
+            show: true,
+            color: tokens.color.axisLabel
             // formatter: null
             // textStyle: {}
         },
@@ -207,7 +208,7 @@ class RadarModel extends ComponentModel<RadarOption> implements CoordinateSystem
         axisLine: zrUtil.merge(
             {
                 lineStyle: {
-                    color: tokens.color.axisSplitLine
+                    color: tokens.color.neutral20
                 }
             },
             valueAxisDefault.axisLine
diff --git a/src/loading/default.ts b/src/loading/default.ts
index a6bcb499f0..98fe963ef1 100644
--- a/src/loading/default.ts
+++ b/src/loading/default.ts
@@ -58,7 +58,7 @@ export default function defaultLoading(
         fontWeight: 'normal',
         fontStyle: 'normal',
         fontFamily: 'sans-serif',
-        maskColor: tokens.color.backgroundTint,
+        maskColor: 'rgba(255,255,255,0.8)',
         showSpinner: true,
         color: tokens.color.theme[0],
         spinnerRadius: 10,
diff --git a/src/theme/dark.ts b/src/theme/dark.ts
index 99b053c175..c486b43916 100644
--- a/src/theme/dark.ts
+++ b/src/theme/dark.ts
@@ -49,7 +49,8 @@ const axisCommon = function () {
         },
         axisLabel: {
             color: color.axisLabel
-        }
+        },
+        axisName: {}
     };
 };
 
@@ -95,7 +96,7 @@ const theme = {
     },
     tooltip: {
         backgroundColor: color.neutral20,
-        // borderColor: color.border,
+        defaultBorderColor: color.border,
         textStyle: {
             color: color.tertiary
         }
@@ -217,6 +218,14 @@ const theme = {
             borderColor: color.background
         }
     },
+    radar: (() => {
+        const radar = axisCommon();
+        radar.axisName = {
+            color: color.axisLabel
+        };
+        radar.axisLine.lineStyle.color = color.neutral20;
+        return radar;
+    })(),
     treemap: {
         breadcrumb: {
             itemStyle: {
diff --git a/test/theme-list.html b/test/theme-list.html
index 65b2a8fcfa..0c4abb625c 100644
--- a/test/theme-list.html
+++ b/test/theme-list.html
@@ -165,6 +165,10 @@ <h2>Components</h2>
                 type: 'funnel',
                 data: 'data1d'
               },
+              {
+                type: 'radar',
+                data: 'data1d'
+              },
               {
                 type: 'treemap',
                 data: 'dataTree'
@@ -326,6 +330,35 @@ <h2>Components</h2>
                   }
                 };
               }
+              else if (['radar'].includes(c.type)) {
+                const indicators = 6;
+                const indicator = [];
+                for (let i = 0; i < indicators; i++) {
+                  indicator.push({
+                    name: `Indicator ${i + 1}`,
+                    max: 100
+                  });
+                }
+                option.radar = {
+                  indicator: indicator
+                };
+
+                const data = [];
+                for (let i = 0; i < maxSeriesCount; i++) {
+                  const value = [];
+                  for (let j = 0; j < indicators; j++) {
+                    value.push(Math.min(Math.round(Math.random() * 50 + i * 10), 100));
+                  }
+                  data.push({
+                    name: `Series ${i + 1}`,
+                    value: value
+                  });
+                }
+                option.series = [{
+                  type: 'radar',
+                  data: data
+                }]
+              }
 
               chart.setOption(option);
             }
@@ -342,7 +375,10 @@ <h2>Components</h2>
                 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
               },
               yAxis: {
-                type: 'value'
+                type: 'value',
+                splitArea: {
+                  show: true
+                }
               },
               options: [
               {
diff --git a/theme/v5.js b/theme/v5.js
index 0317cefe0c..58e4a85d17 100644
--- a/theme/v5.js
+++ b/theme/v5.js
@@ -52,8 +52,516 @@
         '#9a60b4',
         '#ea7ccc'
     ];
+
+    var axisCommon = function() {
+        return {
+            axisLine: {
+                lineStyle: {
+                    color: '#6E7079'
+                }
+            },
+            axisLabel: {
+                color: null
+            },
+            splitLine: {
+                lineStyle: {
+                    color: ['#E0E6F1']
+                }
+            },
+            splitArea: {
+                areaStyle: {
+                    color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)']
+                }
+            },
+            minorSplitLine: {
+                color: '#F4F7FD'
+            }
+        };
+    };
+
     echarts.registerTheme('v5', {
         color: colorPalette,
         gradientColor: ['#f6efa6', '#d88273', '#bf444c'],
+
+        loading: {
+            textColor: 'red'
+        },
+
+        // Series
+
+        bar: {
+            barGap: '20%',
+            select: {
+                itemStyle: {
+                    borderColor: '#212121',
+                    borderWidth: 1
+                }
+            }
+        },
+
+        boxplot: {
+            emphasis: {
+                itemStyle: {
+                    shadowColor: 'rgba(0,0,0,0.2)'
+                }
+            }
+        },
+
+        funnel: {
+            bottom: 60,
+            select: {
+                itemStyle: {
+                    borderColor: '#212121',
+                    borderWidth: 1
+                }
+            }
+        },
+
+        gauge: {
+            axisLine: {
+                lineStyle: {
+                    color: [[1, '#E6EBF8']]
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#63677A'
+                }
+            },
+            axisLabel: {
+                borderColor: '#5470c6'
+            },
+            detail: {
+                backgroundColor: 'rgba(0,0,0,0)',
+                borderColor: '#ccc',
+                color: '#464646'
+            }
+        },
+
+        graph: {
+            lineStyle: {
+                color: '#aaa'
+            },
+            select: {
+                itemStyle: {
+                    borderColor: '#212121'
+                }
+            }
+        },
+
+        heatmap: {
+            select: {
+                itemStyle: {
+                    borderColor: '#212121'
+                }
+            }
+        },
+
+        line: {
+            symbolSize: 4
+        },
+
+        pictorialBar: {
+            select: {
+                itemStyle: {
+                    borderColor: '#212121',
+                    borderWidth: 1
+                }
+            }
+        },
+
+        pie: {
+            radius: [0, '75%'],
+            labelLine: {
+                length2: 15
+            }
+        },
+
+        map: {
+            label: {
+                color: '#000'
+            },
+            itemStyle: {
+                borderColor: '#444',
+                areaColor: '#eee'
+            },
+            emphasis: {
+                label: {
+                    color: 'rgb(100,0,0)'
+                },
+                itemStyle: {
+                    areaColor: 'rgba(255,215,0,0.8)'
+                }
+            },
+            select: {
+                label: {
+                    color: 'rgb(100,0,0)'
+                },
+                itemStyle: {
+                    color: 'rgba(255,215,0,0.8)'
+                }
+            },
+        },
+
+        sankey: {
+            lineStyle: {
+                color: '#314656'
+            },
+            select: {
+                itemStyle: {
+                    borderColor: '#212121'
+                }
+            },
+        },
+
+        scatter: {
+            select: {
+                itemStyle: {
+                    borderColor: '#212121'
+                }
+            }
+        },
+
+        tree: {
+            lineStyle: {
+                color: '#ccc'
+            }
+        },
+
+        treemap: {
+            left: 'center',
+            top: 'middle',
+            width: '80%',
+            height: '80%',
+            scaleLimit: {
+                max: null,
+                min: null
+            },
+            breadcrumb: {
+                top: 'bottom',
+                bottom: null
+            },
+            itemStyle: {
+                color: 'rgba(0,0,0,0.7)', // '#5793f3',
+                textStyle: {
+                    color: '#fff'
+                }
+            },
+            emphasis: {
+                itemStyle: {
+                    color: 'rgba(0,0,0,0.9)' // '#5793f3',
+                }
+            }
+        },
+
+        // Components
+
+        timeAxis: axisCommon(),
+        logAxis: axisCommon(),
+        valueAxis: axisCommon(),
+        categoryAxis: (() => {
+            const axis = axisCommon();
+            axis.axisTick = {
+                show: true
+            };
+            return axis;
+        })(),
+
+        axisPointer: {
+            lineStyle: {
+                color: '#B9BEC9'
+            },
+            shadowStyle: {
+                color: 'rgba(210,219,238,0.2)'
+            },
+            label: {
+                backgroundColor: 'auto',
+                color: '#fff'
+            }
+        },
+
+        brush: {
+            brushStyle: {
+                color: 'rgba(210,219,238,0.3)',
+                borderColor: '#D2DBEE'
+            },
+            outOfBrush: {
+                color: '#ddd'
+            }
+        },
+
+        calendar: {
+            splitLine: {
+                lineStyle: {
+                    color: '#000'
+                }
+            },
+            itemStyle: {
+                borderColor: '#ccc'
+            },
+            dayLabel: {
+                margin: '50%',
+                color: '#000'
+            },
+            monthLabel: {
+                margin: 5,
+                color: '#000'
+            },
+            yearLabel: {
+                margin: 30,
+                color: '#ccc'
+            }
+        },
+
+        dataZoom: {
+            borderColor: '#d2dbee',
+            borderRadius: 3,
+            backgroundColor: 'rgba(47,69,84,0)',    // Background of slider zoom component.
+            // dataBackgroundColor: '#ddd',
+            dataBackground: {
+                lineStyle: {
+                    color: '#d2dbee',
+                    width: 0.5
+                },
+                areaStyle: {
+                    color: '#d2dbee',
+                    opacity: 0.2
+                }
+            },
+            selectedDataBackground: {
+                lineStyle: {
+                    color: '#8fb0f7',
+                    width: 0.5
+                },
+                areaStyle: {
+                    color: '#8fb0f7',
+                    opacity: 0.2
+                }
+            },
+            handleStyle: {
+                color: '#fff',
+                borderColor: '#ACB8D1'
+            },
+            moveHandleStyle: {
+                color: '#D2DBEE',
+                opacity: 0.7
+            },
+            textStyle: {
+                color: '#6E7079'
+            },
+            brushStyle: {
+                color: 'rgba(135,175,274,0.15)'
+            },
+            emphasis: {
+                handleStyle: {
+                    borderColor: '#8FB0F7'
+                },
+                moveHandleStyle: {
+                    color: '#8FB0F7'
+                }
+            },
+            defaultLocationEdgeGap: 7
+        },
+
+        geo: {
+            label: {
+                color: '#000'
+            },
+            itemStyle: {
+                borderColor: '#444'
+            },
+            emphasis: {
+                label: {
+                    color: 'rgb(100,0,0)'
+                },
+                itemStyle: {
+                    color: 'rgba(255,215,0,0.8)'
+                }
+            },
+            select: {
+                label: {
+                    color: 'rgb(100,0,0)'
+                },
+                itemStyle: {
+                    color: 'rgba(255,215,0,0.8)'
+                }
+            }
+        },
+
+        grid: {
+            left: '10%',
+            top: 60,
+            bottom: 70,
+            borderColor: '#ccc'
+        },
+
+        legend: {
+            top: 0,
+            bottom: null,
+            backgroundColor: 'rgba(0,0,0,0)',
+            borderColor: '#ccc',
+            itemGap: 10,
+            inactiveColor: '#ccc',
+            inactiveBorderColor: '#ccc',
+            lineStyle: {
+                inactiveColor: '#ccc',
+            },
+            textStyle: {
+                color: '#333'
+            },
+            selectorLabel: {
+                color: '#666',
+                borderColor: '#666'
+            },
+            emphasis: {
+                selectorLabel: {
+                    color: '#eee',
+                    backgroundColor: '#666'
+                }
+            },
+            pageIconColor: '#2f4554',
+            pageIconInactiveColor: '#aaa',
+            pageTextStyle: {
+                color: '#333'
+            }
+        },
+
+        radar: (() => {
+            const radar = axisCommon();
+            radar.radius = '75%';
+            radar.axisName = {
+                color: '#bbb'
+            };
+            radar.axisLine.lineStyle.color = '#bbb';
+            return radar;
+        })(),
+
+        timeline: {
+            borderColor: '#ccc',
+            lineStyle: {
+                color: '#DAE1F5'
+            },
+            label: {
+                color: '#A4B1D7'
+            },
+            itemStyle: {
+                color: '#A4B1D7',
+                borderWidth: 1
+            },
+            checkpointStyle: {
+                color: '#316bf3',
+                borderColor: '#fff',
+                borderWidth: 2,
+                shadowBlur: 2,
+                shadowOffsetX: 1,
+                shadowOffsetY: 1,
+                shadowColor: 'rgba(0, 0, 0, 0.3)',
+            },
+            playIcon: 'path://M31.6,53C17.5,53,6,41.5,6,27.4S17.5,1.8,31.6,1.8C45.7,1.8,57.2,13.3,57.2,27.4S45.7,53,31.6,53z M31.6,3.3 C18.4,3.3,7.5,14.1,7.5,27.4c0,13.3,10.8,24.1,24.1,24.1C44.9,51.5,55.7,40.7,55.7,27.4C55.7,14.1,44.9,3.3,31.6,3.3z M24.9,21.3 c0-2.2,1.6-3.1,3.5-2l10.5,6.1c1.899,1.1,1.899,2.9,0,4l-10.5,6.1c-1.9,1.1-3.5,0.2-3.5-2V21.3z', // jshint ignore:line
+            stopIcon: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z', // jshint ignore:line
+            // eslint-disable-next-line max-len
+            nextIcon: 'M2,18.5A1.52,1.52,0,0,1,.92,18a1.49,1.49,0,0,1,0-2.12L7.81,9.36,1,3.11A1.5,1.5,0,1,1,3,.89l8,7.34a1.48,1.48,0,0,1,.49,1.09,1.51,1.51,0,0,1-.46,1.1L3,18.08A1.5,1.5,0,0,1,2,18.5Z', // jshint ignore:line
+            // eslint-disable-next-line max-len
+            prevIcon: 'M10,.5A1.52,1.52,0,0,1,11.08,1a1.49,1.49,0,0,1,0,2.12L4.19,9.64,11,15.89a1.5,1.5,0,1,1-2,2.22L1,10.77A1.48,1.48,0,0,1,.5,9.68,1.51,1.51,0,0,1,1,8.58L9,.92A1.5,1.5,0,0,1,10,.5Z', // jshint ignore:line
+            color: '#A4B1D7',
+            borderColor: '#A4B1D7',
+            borderWidth: 1,
+            emphasis: {
+                label: {
+                    color: '#6f778d'
+                },
+                itemStyle: {
+                    color: '#316BF3'
+                },
+                controlStyle: {
+                    color: '#316BF3',
+                    borderColor: '#316BF3',
+                    borderWidth: 2
+                }
+            },
+            progress: {
+                lineStyle: {
+                    color: '#316BF3'
+                },
+                itemStyle: {
+                    color: '#316BF3'
+                },
+                label: {
+                    color: '#6f778d'
+                }
+            },
+        },
+
+        title: {
+            left: 0,
+            top: 0,
+            backgroundColor: 'rgba(0,0,0,0)',
+            borderColor: '#ccc',
+            textStyle: {
+                color: '#464646'
+            },
+            subtextStyle: {
+                color: '#6E7079'
+            }
+        },
+
+        toolbox: {
+            borderColor: '#ccc',
+            padding: 5,
+            itemGap: 8,
+            iconStyle: {
+                borderColor: '#666',
+            },
+            emphasis: {
+                iconStyle: {
+                    borderColor: '#3E98C5'
+                }
+            },
+            feature: {
+                dataView: {
+                    backgroundColor: '#fff',
+                    textColor: '#000',
+                    textareaColor: '#fff',
+                    textareaBorderColor: '#333',
+                    buttonColor: '#c23531',
+                    buttonTextColor: '#fff'
+                },
+                dataZoom: {
+                    brushStyle: {
+                        color: 'rgba(210,219,238,0.2)'
+                    }
+                }
+            }
+        },
+
+        tooltip: {
+            axisPointer: {
+                crossStyle: {
+                    color: '#999'
+                }
+            },
+            textStyle: {
+                color: '#666'
+            },
+            backgroundColor: '#fff',
+            borderWidth: 1,
+            defaultBorderColor: '#fff'
+        },
+
+        visualMap: {
+            color: ['#006edd', '#e0ffff'],
+            inactive: ['rgba(0,0,0,0)'],
+            indicatorStyle: {
+                shadowColor: 'rgba(0,0,0,0.2)'
+            },
+            backgroundColor: 'rgba(0,0,0,0)',
+            borderColor: '#ccc',
+            contentColor: '#5793f3',
+            inactiveColor: '#aaa',
+            padding: 5,
+            textStyle: {
+                color: '#333'
+            }
+        }
     });
 });

From 88d658aa8d5b8f9655ee0c33ef357de61c61c7b3 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Wed, 28 May 2025 16:43:22 +0800
Subject: [PATCH 20/27] fix(theme): update v5 theme

---
 src/chart/funnel/FunnelView.ts | 10 +++++-
 test/axis-extrema.html         | 10 ++++--
 test/lib/testHelper.js         | 12 +++----
 test/pie-label.html            |  4 ++-
 theme/v5.js                    | 63 +++++++++++++++++++++-------------
 5 files changed, 62 insertions(+), 37 deletions(-)

diff --git a/src/chart/funnel/FunnelView.ts b/src/chart/funnel/FunnelView.ts
index 6511f1a894..6649ef7c9a 100644
--- a/src/chart/funnel/FunnelView.ts
+++ b/src/chart/funnel/FunnelView.ts
@@ -128,9 +128,17 @@ class FunnelPiece extends graphic.Polygon {
             } }
         );
 
+        const labelModel = itemModel.getModel('label');
+        const labelColor = labelModel.get('color');
+        const overrideColor = labelColor === 'inherit'
+            ? visualColor
+            : null;
+
         polygon.setTextConfig({
             local: true,
-            inside: !!labelLayout.inside
+            inside: !!labelLayout.inside,
+            insideStroke: overrideColor,
+            outsideFill: overrideColor
         });
 
         const linePoints = labelLayout.linePoints;
diff --git a/test/axis-extrema.html b/test/axis-extrema.html
index 4a0777a38c..3d92a452dd 100644
--- a/test/axis-extrema.html
+++ b/test/axis-extrema.html
@@ -22,7 +22,9 @@
 <html>
     <head>
         <meta charset="utf-8">
-        <script src="../dist/echarts.js"></script>
+        <script src="lib/simpleRequire.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/facePrint.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/facePrint.js"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -98,7 +100,8 @@ <h2>single category axis | singleAxis: {min: function, max: function}</h2>
 
         <script>
 
-            function makeChart(id, option, noDataZoom) {
+        function makeChart(id, option, noDataZoom) {
+            require(['echarts'], function (echarts) {
                 var main = document.getElementById(id);
                 if (main) {
                     var chartMain = document.createElement('div');
@@ -127,7 +130,8 @@ <h2>single category axis | singleAxis: {min: function, max: function}</h2>
                         });
                     }
                 }
-            }
+            });
+        }
 
         </script>
 
diff --git a/test/lib/testHelper.js b/test/lib/testHelper.js
index 53187d0785..b005a99fb9 100644
--- a/test/lib/testHelper.js
+++ b/test/lib/testHelper.js
@@ -155,7 +155,7 @@
      * @param {boolean} [opt.recordVideo]
      * @param {string} [opt.renderer] 'canvas' or 'svg'
      */
-    testHelper.create = async function (echarts, domOrId, opt) {
+    testHelper.create = function (echarts, domOrId, opt) {
         var dom = getDom(domOrId);
 
         if (!dom) {
@@ -229,7 +229,7 @@
                 + '</div>';
         }
 
-        chart = await testHelper.createChart(echarts, chartContainer, opt.option, opt, opt.setOptionOpts, errMsgPrefix);
+        chart = testHelper.createChart(echarts, chartContainer, opt.option, opt, opt.setOptionOpts, errMsgPrefix);
 
         var dataTables = opt.dataTables;
         if (!dataTables && opt.dataTable) {
@@ -793,7 +793,7 @@
      * @param {string} opt.renderer 'canvas' or 'svg'
      * @param {string} errMsgPrefix
      */
-    testHelper.createChart = async function (echarts, domOrId, option, opt, errMsgPrefix) {
+    testHelper.createChart = function (echarts, domOrId, option, opt, errMsgPrefix) {
         if (typeof opt === 'number') {
             opt = {height: opt};
         }
@@ -816,11 +816,7 @@
                 theme = window.__ECHARTS__DEFAULT__THEME__;
             }
             if (theme) {
-                await new Promise((resolve) => {
-                    require([`theme/${theme}`], function() {
-                        resolve();
-                    });
-                });
+                require([`theme/${theme}`]);
             }
 
             var chart = echarts.init(dom, theme, {
diff --git a/test/pie-label.html b/test/pie-label.html
index 048a703110..1ef8792d8a 100644
--- a/test/pie-label.html
+++ b/test/pie-label.html
@@ -394,7 +394,9 @@
                 }, {
                     type: 'pie',
                     label: {
-                        position: 'inside'
+                        position: 'inside',
+                        textBorderColor: '#f00',
+                        // textBorderWidth: 1
                     },
                     center: ['75%', 150],
                     radius: [30, 60],
diff --git a/theme/v5.js b/theme/v5.js
index 58e4a85d17..55dc001a7c 100644
--- a/theme/v5.js
+++ b/theme/v5.js
@@ -79,9 +79,11 @@
         };
     };
 
+    var gradientColor = ['#f6efa6', '#d88273', '#bf444c'];
+
     echarts.registerTheme('v5', {
         color: colorPalette,
-        gradientColor: ['#f6efa6', '#d88273', '#bf444c'],
+        gradientColor: gradientColor,
 
         loading: {
             textColor: 'red'
@@ -114,6 +116,9 @@
                     borderColor: '#212121',
                     borderWidth: 1
                 }
+            },
+            label: {
+                color: 'inherit'
             }
         },
 
@@ -239,17 +244,17 @@
             },
             breadcrumb: {
                 top: 'bottom',
-                bottom: null
-            },
-            itemStyle: {
-                color: 'rgba(0,0,0,0.7)', // '#5793f3',
-                textStyle: {
-                    color: '#fff'
-                }
-            },
-            emphasis: {
+                bottom: null,
                 itemStyle: {
-                    color: 'rgba(0,0,0,0.9)' // '#5793f3',
+                    color: 'rgba(0,0,0,0.7)', // '#5793f3',
+                    textStyle: {
+                        color: '#fff'
+                    }
+                },
+                emphasis: {
+                    itemStyle: {
+                        color: 'rgba(0,0,0,0.9)' // '#5793f3',
+                    }
                 }
             }
         },
@@ -277,6 +282,13 @@
             label: {
                 backgroundColor: 'auto',
                 color: '#fff'
+            },
+            handle: {
+                color: '#333',
+                shadowBlur: 3,
+                shadowColor: '#aaa',
+                shadowOffsetX: 0,
+                shadowOffsetY: 2,
             }
         },
 
@@ -316,8 +328,7 @@
         dataZoom: {
             borderColor: '#d2dbee',
             borderRadius: 3,
-            backgroundColor: 'rgba(47,69,84,0)',    // Background of slider zoom component.
-            // dataBackgroundColor: '#ddd',
+            backgroundColor: 'rgba(47,69,84,0)',
             dataBackground: {
                 lineStyle: {
                     color: '#d2dbee',
@@ -357,7 +368,8 @@
                     borderColor: '#8FB0F7'
                 },
                 moveHandleStyle: {
-                    color: '#8FB0F7'
+                    color: '#8FB0F7',
+                    opacity: 0.7
                 }
             },
             defaultLocationEdgeGap: 7
@@ -437,6 +449,7 @@
         })(),
 
         timeline: {
+            padding: 5,
             borderColor: '#ccc',
             lineStyle: {
                 color: '#DAE1F5'
@@ -457,15 +470,17 @@
                 shadowOffsetY: 1,
                 shadowColor: 'rgba(0, 0, 0, 0.3)',
             },
-            playIcon: 'path://M31.6,53C17.5,53,6,41.5,6,27.4S17.5,1.8,31.6,1.8C45.7,1.8,57.2,13.3,57.2,27.4S45.7,53,31.6,53z M31.6,3.3 C18.4,3.3,7.5,14.1,7.5,27.4c0,13.3,10.8,24.1,24.1,24.1C44.9,51.5,55.7,40.7,55.7,27.4C55.7,14.1,44.9,3.3,31.6,3.3z M24.9,21.3 c0-2.2,1.6-3.1,3.5-2l10.5,6.1c1.899,1.1,1.899,2.9,0,4l-10.5,6.1c-1.9,1.1-3.5,0.2-3.5-2V21.3z', // jshint ignore:line
-            stopIcon: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z', // jshint ignore:line
-            // eslint-disable-next-line max-len
-            nextIcon: 'M2,18.5A1.52,1.52,0,0,1,.92,18a1.49,1.49,0,0,1,0-2.12L7.81,9.36,1,3.11A1.5,1.5,0,1,1,3,.89l8,7.34a1.48,1.48,0,0,1,.49,1.09,1.51,1.51,0,0,1-.46,1.1L3,18.08A1.5,1.5,0,0,1,2,18.5Z', // jshint ignore:line
-            // eslint-disable-next-line max-len
-            prevIcon: 'M10,.5A1.52,1.52,0,0,1,11.08,1a1.49,1.49,0,0,1,0,2.12L4.19,9.64,11,15.89a1.5,1.5,0,1,1-2,2.22L1,10.77A1.48,1.48,0,0,1,.5,9.68,1.51,1.51,0,0,1,1,8.58L9,.92A1.5,1.5,0,0,1,10,.5Z', // jshint ignore:line
-            color: '#A4B1D7',
-            borderColor: '#A4B1D7',
-            borderWidth: 1,
+            controlStyle: {
+                playIcon: 'path://M31.6,53C17.5,53,6,41.5,6,27.4S17.5,1.8,31.6,1.8C45.7,1.8,57.2,13.3,57.2,27.4S45.7,53,31.6,53z M31.6,3.3 C18.4,3.3,7.5,14.1,7.5,27.4c0,13.3,10.8,24.1,24.1,24.1C44.9,51.5,55.7,40.7,55.7,27.4C55.7,14.1,44.9,3.3,31.6,3.3z M24.9,21.3 c0-2.2,1.6-3.1,3.5-2l10.5,6.1c1.899,1.1,1.899,2.9,0,4l-10.5,6.1c-1.9,1.1-3.5,0.2-3.5-2V21.3z', // jshint ignore:line
+                stopIcon: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z', // jshint ignore:line
+                // eslint-disable-next-line max-len
+                nextIcon: 'M2,18.5A1.52,1.52,0,0,1,.92,18a1.49,1.49,0,0,1,0-2.12L7.81,9.36,1,3.11A1.5,1.5,0,1,1,3,.89l8,7.34a1.48,1.48,0,0,1,.49,1.09,1.51,1.51,0,0,1-.46,1.1L3,18.08A1.5,1.5,0,0,1,2,18.5Z', // jshint ignore:line
+                // eslint-disable-next-line max-len
+                prevIcon: 'M10,.5A1.52,1.52,0,0,1,11.08,1a1.49,1.49,0,0,1,0,2.12L4.19,9.64,11,15.89a1.5,1.5,0,1,1-2,2.22L1,10.77A1.48,1.48,0,0,1,.5,9.68,1.51,1.51,0,0,1,1,8.58L9,.92A1.5,1.5,0,0,1,10,.5Z', // jshint ignore:line
+                color: '#A4B1D7',
+                borderColor: '#A4B1D7',
+                borderWidth: 1
+            },
             emphasis: {
                 label: {
                     color: '#6f778d'
@@ -549,7 +564,7 @@
         },
 
         visualMap: {
-            color: ['#006edd', '#e0ffff'],
+            color: [gradientColor[2], gradientColor[1], gradientColor[0]],
             inactive: ['rgba(0,0,0,0)'],
             indicatorStyle: {
                 shadowColor: 'rgba(0,0,0,0.2)'

From e7867e15a98b7d91e5248abcb5423995c23518eb Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Thu, 29 May 2025 14:23:12 +0800
Subject: [PATCH 21/27] chore(test): support mark diff as expected

---
 test/runTest/client/client.css       | 117 +++++++-
 test/runTest/client/client.js        | 418 ++++++++++++++++++++++++++-
 test/runTest/client/index.html       |  91 +++++-
 test/runTest/marks/axis-break-2.json |  10 +
 test/runTest/marks/axis-break-3.json |  10 +
 test/runTest/marks/axis-break-4.json |  10 +
 test/runTest/marks/axis-break.json   |  10 +
 test/runTest/server.js               | 120 +++++++-
 test/runTest/store.js                | 182 +++++++++++-
 test/runTest/util.js                 |   8 +
 theme/v5.js                          |  15 -
 11 files changed, 957 insertions(+), 34 deletions(-)
 create mode 100644 test/runTest/marks/axis-break-2.json
 create mode 100644 test/runTest/marks/axis-break-3.json
 create mode 100644 test/runTest/marks/axis-break-4.json
 create mode 100644 test/runTest/marks/axis-break.json

diff --git a/test/runTest/client/client.css b/test/runTest/client/client.css
index 63ec88c424..d0aa304916 100644
--- a/test/runTest/client/client.css
+++ b/test/runTest/client/client.css
@@ -168,17 +168,15 @@
 .test-list li a.menu-link i {
     font-size: 16px;
     margin-left: 10px;
-    color: #ccc;
+    color: #aaa;
 }
 
 .test-list li.active {
-    background: #5470C6;
-}
-.test-list li.active a {
-    color: #fff;
+    background: #e8e8ff;
 }
 .test-list li:hover {
-    border-right: 4px solid #5470C6
+    border-right: 4px solid #545dc6;
+    background: #cfcfff;
 }
 .test-list li>* {
     vertical-align: middle;
@@ -197,6 +195,10 @@
     color: #F56C6C;
     -webkit-text-stroke: 1px #F56C6C;
 }
+.el-progress.is-markedAsExpected .el-progress__text {
+    color: #00ADE6;
+    -webkit-text-stroke: 1px #00ADE6;
+}
 
 .no-result {
     text-align: center;
@@ -327,3 +329,106 @@ iframe {
 ::-webkit-scrollbar-thumb:hover {
     background: rgba(0,0,0,0.5) !important
 }
+
+/* Add styles for the markAsExpected dialog */
+.mark-as-expected-dialog .el-message-box__header {
+    padding-bottom: 10px;
+}
+
+.mark-as-expected-dialog .el-message-box__content {
+    padding-top: 10px;
+}
+
+.mark-as-expected-dialog .el-message-box__input {
+    margin-top: 0;
+}
+
+.mark-expected-form .form-item {
+    margin-bottom: 15px;
+}
+
+.mark-expected-form .form-label {
+    font-size: 14px;
+    color: #606266;
+    margin-bottom: 8px;
+    display: block;
+}
+
+.mark-expected-form .radio-group {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.mark-expected-form .radio-label {
+    margin-right: 15px;
+    cursor: pointer;
+}
+
+.mark-expected-form .radio-label input {
+    margin-right: 5px;
+    cursor: pointer;
+}
+
+.mark-expected-form input.el-input__inner,
+.mark-expected-form textarea.el-textarea__inner {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* Add styles for the marked as expected section */
+.marked-as-expected {
+    margin-top: 30px;
+    padding: 0 20px;
+}
+
+.marked-as-expected .el-table {
+    margin-top: 10px;
+}
+
+.marked-as-expected .el-table a {
+    color: #409EFF;
+    text-decoration: none;
+}
+
+.marked-as-expected .el-table a:hover {
+    text-decoration: underline;
+}
+
+.marked-as-expected .el-tag {
+    margin-right: 5px;
+}
+
+.marked-as-expected .el-table td {
+    padding: 5px 0;
+}
+
+.marked-as-expected .mark-info {
+    margin-top: 10px;
+}
+
+.marked-as-expected .mark-header {
+    margin: 10px 0;
+    color: #606266;
+}
+
+.marked-as-expected .mark-info p {
+    margin: 5px 0;
+}
+
+.marked-as-expected .mark-info a {
+    color: #409EFF;
+    text-decoration: none;
+}
+
+.marked-as-expected .mark-info a:hover {
+    text-decoration: underline;
+}
+
+.mark-as-expected-dialog .comment-header {
+    margin-bottom: 5px;
+}
+
+.faded-row td {
+    opacity: 0.5 !important;
+}
+
diff --git a/test/runTest/client/client.js b/test/runTest/client/client.js
index 119dfd07f3..05d3c2b8c8 100644
--- a/test/runTest/client/client.js
+++ b/test/runTest/client/client.js
@@ -55,7 +55,23 @@ function assembleParams(paramsObj) {
     return paramsArr.join('&');
 }
 
-function processTestsData(tests, oldTestsData) {
+function shouldShowMarkAsExpected(test, expectedSource, expectedVersion) {
+    if (expectedSource !== 'release'
+        || expectedVersion !== test.expectedVersion
+        || !test.markedAsExpected
+    ) {
+        return false;
+    }
+
+    for (let i = 0; i < test.markedAsExpected.length; i++) {
+        if (test.markedAsExpected[i].lastVersion === expectedVersion) {
+            return true;
+        }
+    }
+    return false;
+}
+
+function processTestsData(tests, oldTestsData, expectedSource, expectedVersion) {
     tests.forEach((test, idx) => {
         let passed = 0;
         test.index = idx;
@@ -73,6 +89,9 @@ function processTestsData(tests, oldTestsData) {
         if (test.percentage === 100) {
             test.summary = 'success';
         }
+        else if (shouldShowMarkAsExpected(test, expectedSource, expectedVersion)) {
+            test.summary = 'markedAsExpected';
+        }
         else if (test.percentage < 50) {
             test.summary = 'exception';
         }
@@ -82,12 +101,32 @@ function processTestsData(tests, oldTestsData) {
 
         // To simplify the condition in sort
         test.actualErrors = test.actualErrors || [];
+
+        // Format date for marks display
+        if (test.markedAsExpected) {
+            test.markedAsExpected.forEach(mark => {
+                if (mark.markTime && !mark.markTimeFormatted) {
+                    mark.markTimeFormatted = formatDate(mark.markTime);
+                }
+            });
+        }
+
         // Keep select status not change.
         if (oldTestsData && oldTestsData[idx]) {
             test.selected = oldTestsData[idx].selected;
             // Keep source information
             test.expectedSource = oldTestsData[idx].expectedSource;
             test.actualSource = oldTestsData[idx].actualSource;
+
+            // 如果旧数据有 markedAsExpected 而新数据没有，保留旧数据的 markedAsExpected
+            if (oldTestsData[idx].markedAsExpected && !test.markedAsExpected) {
+                test.markedAsExpected = oldTestsData[idx].markedAsExpected;
+            }
+
+            // 确保 markedAsExpected 为空时设置为 null 而非空数组
+            if (test.markedAsExpected && Array.isArray(test.markedAsExpected) && test.markedAsExpected.length === 0) {
+                test.markedAsExpected = null;
+            }
         }
         else {
             test.selected = false;
@@ -164,10 +203,21 @@ const app = new Vue({
             useCoarsePointer: 'auto',
             threads: 4,
             theme: 'none'
-        }, urlRunConfig)
+        }, urlRunConfig),
+
+        userMeta: null
     },
 
     async mounted() {
+        socket.on('userMeta', meta => {
+            this.userMeta = meta;
+        });
+        socket.emit('getUserMeta');
+
+        socket.on('updateTestsList', testsList => {
+            this.updateTestsList(testsList);
+        });
+
         // Add call to fetch branches
         await this.fetchBranchVersions();
 
@@ -179,6 +229,7 @@ const app = new Vue({
             forceSet: Object.keys(urlRunConfig).length > 0
         });
         socket.on('syncRunConfig_return', res => {
+            console.log('syncRunConfig_return', res.runConfig.expectedSource, res.runConfig.expectedVersion);
             this.versions = res.versions || [];
             this.nightlyVersions = res.nightlyVersions || [];
             this.prVersions = res.prVersions || [];
@@ -187,11 +238,13 @@ const app = new Vue({
             handlingSourceChange = true;
             this.$nextTick(() => {
                 if (!this.runConfig.expectedVersion) {
+                    console.log('this.runConfig.expectedVersion null');
                     this.runConfig.expectedVersion = getVersionFromSource(
                         this.runConfig.expectedSource,
                         this.versions,
                         this.nightlyVersions
                     );
+                    console.log('this.runConfig.expectedVersion', this.runConfig.expectedVersion);
                 }
 
                 if (!this.runConfig.actualVersion) {
@@ -402,6 +455,32 @@ const app = new Vue({
     },
 
     methods: {
+        validateMarkExpected(lastVersion) {
+            if (this.runConfig.expectedSource !== 'release') {
+                return {
+                    valid: false,
+                    reason: 'Only valid when the expected version is release'
+                }
+            }
+            if (lastVersion !== this.runConfig.expectedVersion) {
+                return {
+                    valid: false,
+                    reason: 'Only valid when the expected version is ' + lastVersion
+                };
+            }
+            return {
+                valid: true,
+                reason: 'Valid'
+            };
+        },
+
+        getMarkRowClass(data) {
+            if (this.validateMarkExpected(data.row.lastVersion).valid) {
+                return '';
+            }
+            return 'faded-row';
+        },
+
         scrollToCurrent() {
             const el = document.querySelector(`.test-list>li[title="${this.currentTestName}"]`);
             if (el) {
@@ -462,6 +541,309 @@ const app = new Vue({
             }
             runTests(tests.map(test => test.name), false);
         },
+        markAsExpected() {
+            if (!this.currentTest) {
+                return;
+            }
+            this.showMarkAsExpectedDialog();
+        },
+        deleteMark(mark) {
+            this.$confirm('Are you sure you want to delete this mark? This action cannot be undone.', 'Warning', {
+                confirmButtonText: 'Delete',
+                cancelButtonText: 'Cancel',
+                type: 'warning'
+            }).then(() => {
+                socket.emit('deleteMark', {
+                    testName: this.currentTest.name,
+                    markTime: mark.markTime
+                }, (err) => {
+                    if (err) {
+                        this.$message.error('Failed to delete: ' + err);
+                        return;
+                    }
+
+                    if (this.currentTest && this.currentTest.markedAsExpected) {
+                        if (Array.isArray(this.currentTest.markedAsExpected)) {
+                            this.currentTest.markedAsExpected = this.currentTest.markedAsExpected.filter(
+                                item => item.markTime !== mark.markTime
+                            );
+
+                            if (this.currentTest.markedAsExpected.length === 0) {
+                                this.currentTest.markedAsExpected = null;
+                            }
+                        } else if (this.currentTest.markedAsExpected.markTime === mark.markTime) {
+                            this.currentTest.markedAsExpected = null;
+                        }
+                    }
+
+                    this.$message.success('Mark deleted successfully');
+                });
+            }).catch(() => {
+                // User canceled
+            });
+        },
+        showMarkAsExpectedDialog() {
+            // Reset input values each time the dialog is opened
+            let linkValue = '';
+            let commentValue = '';
+            let selectedType = 'New Feature';
+            // Only initialize identity fields from user meta
+            let markedBy = this.userMeta?.myGitHubId || '';
+            let lastVersion = this.userMeta?.lastEChartsVersion || '';
+
+            // Create our own custom dialog without using $prompt
+            const h = this.$createElement;
+
+            this.$msgbox({
+                title: 'Mark Difference as Expected',
+                message: h('div', { class: 'mark-expected-form' }, [
+                    h('div', { class: 'form-item' }, [
+                        h('div', { class: 'form-label' }, [
+                            'Your GitHub ID: ',
+                            h('span', { style: { color: '#F56C6C' } }, '*')
+                        ]),
+                        h('input', {
+                            class: 'el-input__inner',
+                            attrs: {
+                                type: 'text',
+                                placeholder: ''
+                            },
+                            domProps: {
+                                value: markedBy
+                            },
+                            on: {
+                                input: (e) => {
+                                    markedBy = e.target.value;
+                                    if (!this.userMeta) {
+                                        this.userMeta = {
+                                            myGitHubId: markedBy
+                                        };
+                                    }
+                                    else {
+                                        this.userMeta.myGitHubId = markedBy;
+                                    }
+                                }
+                            }
+                        })
+                    ]),
+                    h('div', { class: 'form-item' }, [
+                        h('div', { class: 'form-label' }, [
+                            'Last Version: ',
+                            h('span', { style: { color: '#F56C6C' } }, '*')
+                        ]),
+                        h('input', {
+                            class: 'el-input__inner',
+                            attrs: {
+                                type: 'text',
+                                placeholder: '5.6.0'
+                            },
+                            domProps: {
+                                value: lastVersion
+                            },
+                            on: {
+                                input: (e) => {
+                                        lastVersion = e.target.value;
+                                    if (!this.userMeta) {
+                                        this.userMeta = {
+                                            lastEChartsVersion: lastVersion
+                                        };
+                                    }
+                                    else {
+                                        this.userMeta.lastEChartsVersion = lastVersion;
+                                    }
+                                }
+                            }
+                        })
+                    ]),
+                    h('div', { class: 'form-item type-selection' }, [
+                        h('div', { class: 'form-label' }, [
+                            'Type: ',
+                            h('span', { style: { color: '#F56C6C' } }, '*')
+                        ]),
+                        h('div', { class: 'radio-group' }, [
+                            h('label', { class: 'radio-label' }, [
+                                h('input', {
+                                    attrs: {
+                                        type: 'radio',
+                                        name: 'mark-type',
+                                        value: 'New Feature',
+                                        checked: selectedType === 'New Feature'
+                                    },
+                                    on: {
+                                        change: (e) => {
+                                            selectedType = e.target.value;
+                                        }
+                                    }
+                                }),
+                                ' New Feature'
+                            ]),
+                            h('label', { class: 'radio-label' }, [
+                                h('input', {
+                                    attrs: {
+                                        type: 'radio',
+                                        name: 'mark-type',
+                                        value: 'Bug Fixing',
+                                        checked: selectedType === 'Bug Fixing'
+                                    },
+                                    on: {
+                                        change: (e) => {
+                                            selectedType = e.target.value;
+                                        }
+                                    }
+                                }),
+                                ' Bug Fixing'
+                            ]),
+                            h('label', { class: 'radio-label' }, [
+                                h('input', {
+                                    attrs: {
+                                        type: 'radio',
+                                        name: 'mark-type',
+                                        value: 'Others',
+                                        checked: selectedType === 'Others'
+                                    },
+                                    on: {
+                                        change: (e) => {
+                                            selectedType = e.target.value;
+                                        }
+                                    }
+                                }),
+                                ' Others'
+                            ])
+                        ])
+                    ]),
+                    h('div', { class: 'form-item' }, [
+                        h('div', { class: 'form-label' }, 'PR or commit link (optional but recommended):'),
+                        h('input', {
+                            class: 'el-input__inner link-input',
+                            attrs: {
+                                type: 'text',
+                                placeholder: 'https://github.com/apache/echarts/pull/xxx'
+                            },
+                            on: {
+                                input: (e) => {
+                                    linkValue = e.target.value;
+                                }
+                            }
+                        })
+                    ]),
+                    h('div', { class: 'form-item' }, [
+                        h('div', { class: 'form-label' }, 'Comment (optional):'),
+                        h('textarea', {
+                            class: 'el-textarea__inner comment-input',
+                            style: { minHeight: '60px' },
+                            on: {
+                                input: (e) => {
+                                    commentValue = e.target.value;
+                                }
+                            }
+                        })
+                    ])
+                ]),
+                showCancelButton: true,
+                confirmButtonText: 'Confirm',
+                cancelButtonText: 'Cancel',
+                customClass: 'mark-as-expected-dialog',
+                beforeClose: (action, instance, done) => {
+                    if (action === 'confirm') {
+                        if (!selectedType) {
+                            this.$message({
+                                message: 'Please select a type',
+                                type: 'error'
+                            });
+                            // Don't close the dialog
+                            done(false);
+                            return;
+                        }
+
+                        if (!markedBy) {
+                            this.$message({
+                                message: 'Please enter your GitHub ID',
+                                type: 'error'
+                            });
+                            done(false);
+                            return;
+                        }
+
+                        if (!lastVersion) {
+                            this.$message({
+                                message: 'Please enter the last version',
+                                type: 'error'
+                            });
+                            done(false);
+                            return;
+                        }
+
+                        if (linkValue && !(linkValue.startsWith('http://') || linkValue.startsWith('https://'))) {
+                            this.$message({
+                                message: 'Link must start with http:// or https://',
+                                type: 'error'
+                            });
+                            done(false);
+                            return;
+                        }
+
+                        // Use a variable to track if the callback has been called
+                        let callbackCalled = false;
+
+                        // Create a callback function with proper error handling
+                        const handleMarkAsExpectedResponse = function(err) {
+                            callbackCalled = true;
+
+                            if (err) {
+                                app.$notify({
+                                    title: 'Error',
+                                    message: err,
+                                    type: 'error',
+                                    duration: 5000
+                                });
+                                done(false);
+                                return;
+                            }
+
+                            app.$notify({
+                                title: 'Success',
+                                message: 'Marked as expected',
+                                type: 'success',
+                                duration: 3000
+                            });
+                            done();
+                        };
+
+                        // Save user meta info for future use
+                        socket.emit('saveUserMeta', {
+                            myGitHubId: markedBy,
+                            lastEChartsVersion: lastVersion
+                        });
+
+                        socket.emit('markAsExpected', {
+                            testName: this.currentTest.name,
+                            link: linkValue,
+                            comment: commentValue,
+                            type: selectedType,
+                            markedBy: markedBy,
+                            lastVersion: lastVersion,
+                            markTime: new Date().getTime()
+                        }, handleMarkAsExpectedResponse);
+
+                        // Add a timeout to ensure the dialog closes even if callback is not called
+                        setTimeout(() => {
+                            if (!callbackCalled) {
+                                console.error('Socket callback was not called after 5 seconds');
+                                app.$notify({
+                                    title: 'Warning',
+                                    message: 'Operation may not have completed properly',
+                                    type: 'warning',
+                                    duration: 5000
+                                });
+                                done();
+                            }
+                        }, 5000);
+                    } else {
+                        done();
+                    }
+                }
+            });
+        },
         stopTests() {
             this.running = false;
             socket.emit('stop');
@@ -546,7 +928,22 @@ const app = new Vue({
                 console.error('Failed to fetch branches:', error);
                 this.branchVersions = [];
             }
-        }
+        },
+
+        updateTestsList(testsList) {
+            this.fullTests = processTestsData(testsList, this.fullTests, this.runConfig.expectedSource, this.runConfig.expectedVersion);
+
+            if (!this.currentTestName && this.fullTests.length > 0) {
+                this.currentTestName = this.fullTests[0].name;
+            }
+
+            if (this.currentTestName) {
+                const currentTest = this.fullTests.find(test => test.name === this.currentTestName);
+                if (!currentTest && this.fullTests.length > 0) {
+                    this.currentTestName = this.fullTests[0].name;
+                }
+            }
+        },
     }
 });
 
@@ -604,7 +1001,12 @@ socket.on('update', msg => {
 
     // TODO
     app.running = !!msg.running;
-    app.fullTests = processTestsData(msg.tests, app.fullTests);
+    app.fullTests = processTestsData(
+        msg.tests,
+        app.fullTests,
+        app.runConfig.expectedSource,
+        app.runConfig.expectedVersion
+    );
 
     if (!app.currentTestName) {
         app.currentTestName = app.fullTests[0].name;
@@ -665,4 +1067,10 @@ app.$watch('runConfig', (newVal, oldVal) => {
             }
         });
     }
-}, { deep: true });
\ No newline at end of file
+}, { deep: true });
+
+function formatDate(timestamp) {
+    const date = new Date(timestamp);
+    const pad = num => (num < 10 ? '0' + num : num);
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+}
\ No newline at end of file
diff --git a/test/runTest/client/index.html b/test/runTest/client/index.html
index 7e7f927759..8b341250b7 100644
--- a/test/runTest/client/index.html
+++ b/test/runTest/client/index.html
@@ -78,8 +78,11 @@ <h1>Visual Regression Testing Tool</h1>
                                     :width="20"
                                     :stroke-width="2"
                                     :percentage="test.percentage"
-                                    :status="test.summary"
-                                ></el-progress>
+                                    :status="test.summary === 'markedAsExpected' ? 'success' : test.summary"
+                                    :class="{'is-markedAsExpected': test.summary === 'markedAsExpected'}"
+                                    :color="test.summary === 'markedAsExpected' ? '#00ADE6' : undefined"
+                                >
+                                </el-progress>
                             </el-tooltip>
                         </template>
                         <el-tooltip
@@ -238,9 +241,12 @@ <h1>Visual Regression Testing Tool</h1>
                             :width="30"
                             :stroke-width="4"
                             :percentage="currentTest.percentage"
-                            :status="currentTest.summary"
+                            :status="currentTest.summary === 'markedAsExpected' ? 'success' : currentTest.summary"
+                            :class="{'is-markedAsExpected': currentTest.summary === 'markedAsExpected'}"
+                            :color="currentTest.summary === 'markedAsExpected' ? '#00ADE6' : undefined"
                             style="margin-top: 5px;"
-                        ></el-progress>
+                        >
+                        </el-progress>
                         <h3>{{currentTest.name}}</h3>
                     </div>
                     <div class="single-test-ops">
@@ -250,6 +256,83 @@ <h3>{{currentTest.name}}</h3>
                         </el-button-group>
                         <el-button size="mini" @click="open(currentTestUrl, '_blank')" icon="el-icon-link">Open Demo</el-button>
                         <el-button size="mini" @click="open(currentTestRecordUrl, '_blank')" icon="el-icon-video-camera">Record Interaction</el-button>
+                        <el-button size="mini" @click="markAsExpected" icon="el-icon-edit">
+                            <el-tooltip content="Mark the diff as the expected change due to bug fixing or a new feature and the diff should be ignored" placement="top">
+                                <span>Mark Diff As Expected</span>
+                            </el-tooltip>
+                        </el-button>
+                    </div>
+
+                    <!-- Display mark as expected info if available -->
+                    <div v-if="currentTest.markedAsExpected && currentTest.markedAsExpected.length > 0" class="marked-as-expected">
+                        <h4>Marked As Expected History</h4>
+                        <el-table
+                            :data="currentTest.markedAsExpected"
+                            style="width: 100%"
+                            size="small"
+                            :row-class-name="getMarkRowClass">
+                            <el-table-column
+                                label="Time"
+                                width="180">
+                                <template slot-scope="scope">
+                                    <span>{{ scope.row.markTimeFormatted }}</span>
+                                </template>
+                            </el-table-column>
+                            <el-table-column
+                                prop="type"
+                                label="Type"
+                                width="120">
+                                <template slot-scope="scope">
+                                    <span>{{ scope.row.type }}</span>
+                                </template>
+                            </el-table-column>
+                            <el-table-column
+                                prop="markedBy"
+                                label="Marked By"
+                                width="120">
+                                <template slot-scope="scope">
+                                    <span>{{ scope.row.markedBy || '-' }}</span>
+                                </template>
+                            </el-table-column>
+                            <el-table-column
+                                prop="lastVersion"
+                                label="Last Version"
+                                width="120">
+                                <template slot-scope="scope">
+                                    <span>{{ scope.row.lastVersion || '-' }}</span>
+                                    <el-tooltip
+                                        :content="validateMarkExpected(scope.row.lastVersion).reason"
+                                        placement="top"
+                                        v-if="!validateMarkExpected(scope.row.lastVersion).valid"
+                                    >
+                                        <el-tag size="mini" type="warning" style="margin-left: 5px">
+                                            Staled
+                                        </el-tag>
+                                    </el-tooltip>
+                                </template>
+                            </el-table-column>
+                            <el-table-column
+                                label="Link">
+                                <template slot-scope="scope">
+                                    <a v-if="scope.row.link" :href="scope.row.link" target="_blank">{{scope.row.link}}</a>
+                                    <span v-else>-</span>
+                                </template>
+                            </el-table-column>
+                            <el-table-column
+                                label="Comment">
+                                <template slot-scope="scope">
+                                    <span v-if="scope.row.comment">{{scope.row.comment}}</span>
+                                    <span v-else>-</span>
+                                </template>
+                            </el-table-column>
+                            <el-table-column
+                                label="Operations"
+                                width="100">
+                                <template slot-scope="scope">
+                                    <el-button type="danger" size="mini" plain @click="deleteMark(scope.row)">Delete</el-button>
+                                </template>
+                            </el-table-column>
+                        </el-table>
                     </div>
 
                     <div v-if="currentTest.results.length > 0">
diff --git a/test/runTest/marks/axis-break-2.json b/test/runTest/marks/axis-break-2.json
new file mode 100644
index 0000000000..66fb563259
--- /dev/null
+++ b/test/runTest/marks/axis-break-2.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "https://github.com/apache/echarts/pull/19459",
+    "comment": "",
+    "type": "New Feature",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748488750868
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/axis-break-3.json b/test/runTest/marks/axis-break-3.json
new file mode 100644
index 0000000000..89117802c3
--- /dev/null
+++ b/test/runTest/marks/axis-break-3.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "https://github.com/apache/echarts/pull/19459",
+    "comment": "",
+    "type": "New Feature",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748488756180
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/axis-break-4.json b/test/runTest/marks/axis-break-4.json
new file mode 100644
index 0000000000..3daa6c60f7
--- /dev/null
+++ b/test/runTest/marks/axis-break-4.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "https://github.com/apache/echarts/pull/19459",
+    "comment": "",
+    "type": "New Feature",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748488760577
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/axis-break.json b/test/runTest/marks/axis-break.json
new file mode 100644
index 0000000000..8c095c637c
--- /dev/null
+++ b/test/runTest/marks/axis-break.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "https://github.com/apache/echarts/pull/19459",
+    "comment": "",
+    "type": "New Feature",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748429849494
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/server.js b/test/runTest/server.js
index 322fbcaa46..62c832ceb0 100644
--- a/test/runTest/server.js
+++ b/test/runTest/server.js
@@ -49,9 +49,11 @@ const {
     delTestsRun,
     RESULTS_ROOT_DIR,
     checkStoreVersion,
-    clearStaledResults
+    clearStaledResults,
+    getUserMeta,
+    saveUserMeta
 } = require('./store');
-const {prepareEChartsLib, getActionsFullPath, fetchVersions, cleanBranchDirectory, fetchRecentPRs} = require('./util');
+const {prepareEChartsLib, getActionsFullPath, fetchVersions} = require('./util');
 const fse = require('fs-extra');
 const fs = require('fs');
 const open = require('open');
@@ -397,6 +399,120 @@ async function start() {
         });
 
         socket.on('stop', abortTests);
+
+        socket.on('markAsExpected', function(data, callback) {
+            console.log('Mark as expected:', data.testName, data.type);
+            const store = require('./store');
+            try {
+                store.markTestAsExpected({
+                    testName: data.testName,
+                    link: data.link || '',
+                    comment: data.comment || '',
+                    type: data.type,
+                    markedBy: data.markedBy || '',
+                    lastVersion: data.lastVersion || '',
+                    markTime: data.markTime
+                });
+                // Send the updated list
+                socket.emit('updateTestsList', store.getTestsList());
+                if (typeof callback === 'function') {
+                    callback();
+                }
+            }
+            catch (e) {
+                console.error(e);
+                if (typeof callback === 'function') {
+                    callback(e.toString());
+                }
+            }
+        });
+
+        socket.on('saveUserMeta', function(data) {
+            saveUserMeta(data);
+        });
+
+        socket.on('getUserMeta', function() {
+            const userMeta = getUserMeta();
+            socket.emit('userMeta', userMeta);
+        });
+
+        socket.on('deleteMarks', function(data, callback) {
+            try {
+                const { testName } = data;
+                if (!testName) {
+                    throw new Error('Test name is required');
+                }
+
+                console.log(`Deleting all marks for test "${testName}"`);
+
+                // 使用 getMarkedAsExpectedFullPath 获取标记文件路径
+                const store = require('./store');
+                const util = require('./util');
+                const fs = require('fs');
+                const marksFilePath = util.getMarkedAsExpectedFullPath(testName);
+
+                // 检查文件是否存在
+                if (fs.existsSync(marksFilePath)) {
+                    // 删除文件
+                    fs.unlinkSync(marksFilePath);
+                    console.log(`Deleted marks file for test "${testName}"`);
+
+                    // 更新内存中的测试对象
+                    const test = store.getTestsList().find(test => test.name === testName);
+                    if (test) {
+                        test.markedAsExpected = null;
+                    }
+
+                    // 更新客户端的测试列表
+                    socket.emit('updateTestsList', store.getTestsList());
+                    if (typeof callback === 'function') {
+                        callback();
+                    }
+                } else {
+                    console.log(`No marks file found for test "${testName}"`);
+                    if (typeof callback === 'function') {
+                        callback();
+                    }
+                }
+            }
+            catch (e) {
+                console.error('Failed to delete marks:', e);
+                if (typeof callback === 'function') {
+                    callback(e.toString());
+                }
+            }
+        });
+
+        socket.on('deleteMark', function(data, callback) {
+            try {
+                const { testName, markTime } = data;
+                if (!testName) {
+                    throw new Error('Test name is required');
+                }
+                if (!markTime) {
+                    throw new Error('Mark time is required');
+                }
+
+                console.log(`Deleting mark for test "${testName}" at time ${markTime}`);
+                const success = require('./store').deleteMark(testName, markTime);
+
+                if (success) {
+                    // 更新客户端的测试列表
+                    socket.emit('updateTestsList', require('./store').getTestsList());
+                    if (typeof callback === 'function') {
+                        callback();
+                    }
+                } else {
+                    throw new Error(`Failed to delete mark for test "${testName}" at time ${markTime}`);
+                }
+            }
+            catch (e) {
+                console.error('Failed to delete mark:', e);
+                if (typeof callback === 'function') {
+                    callback(e.toString());
+                }
+            }
+        });
     });
 
     io.of('/recorder').on('connect', async socket => {
diff --git a/test/runTest/store.js b/test/runTest/store.js
index a87655964f..d145a69bc9 100644
--- a/test/runTest/store.js
+++ b/test/runTest/store.js
@@ -21,8 +21,9 @@ const path = require('path');
 const fse = require('fs-extra');
 const fs = require('fs');
 const globby = require('globby');
-const {testNameFromFile} = require('./util');
+const {testNameFromFile, getUserMetaFullPath} = require('./util');
 const {blacklist, SVGBlacklist} = require('./blacklist');
+const {getMarkedAsExpectedFullPath} = require('./util');
 
 let _tests = [];
 let _testsMap = {};
@@ -238,6 +239,18 @@ module.exports.updateTestsList = async function (
 
     _tests.forEach(testOpt => {
         testOpt.actions = actionsMetaData[testOpt.name] || 0;
+
+        // Load marks for each test
+        try {
+            const marksPath = require('./util').getMarkedAsExpectedFullPath(testOpt.name);
+            if (fs.existsSync(marksPath)) {
+                // Always load as an array
+                testOpt.markedAsExpected = JSON.parse(fs.readFileSync(marksPath, 'utf-8'));
+            }
+        } catch (e) {
+            console.error(`Error loading marks for ${testOpt.name}:`, e);
+            // Ignore errors when loading marks
+        }
     });
 
     // Save once.
@@ -365,4 +378,169 @@ module.exports.getAllTestsRuns = async function () {
 
 module.exports.delTestsRun = async function (hash) {
     fse.removeSync(path.join(RESULTS_ROOT_DIR, hash));
-}
\ No newline at end of file
+}
+
+module.exports.markTestAsExpected = function (testData) {
+    const testName = testData.testName;
+    const mark = {
+        link: testData.link || '',
+        comment: testData.comment || '',
+        type: testData.type,
+        markedBy: testData.markedBy || '',
+        lastVersion: testData.lastVersion || '',
+        markTime: testData.markTime || new Date().getTime()
+    };
+
+    console.log('Saving mark data:', mark);
+
+    // Find the test
+    const test = _tests.find(test => test.name === testName);
+    if (!test) {
+        throw new Error(`Test ${testName} not found`);
+    }
+
+    // Get existing marks or initialize an empty array
+    let marks = [];
+    const markFilePath = require('./util').getMarkedAsExpectedFullPath(testName);
+
+    // Check if the marks file exists and load existing marks
+    if (fs.existsSync(markFilePath)) {
+        try {
+            marks = JSON.parse(fs.readFileSync(markFilePath, 'utf-8'));
+            if (!Array.isArray(marks)) {
+                // Convert to array if it's a single object
+                marks = [marks];
+            }
+        } catch (e) {
+            console.error('Error reading existing marks file:', e);
+            // Continue with empty array if there was an error
+        }
+    }
+
+    // Add the new mark to the beginning of the array
+    marks.unshift(mark);
+
+    // Update test with marks array
+    test.markedAsExpected = marks;
+
+    // Save marks
+    try {
+        // Ensure directory exists
+        const dirname = path.dirname(markFilePath);
+        fse.ensureDirSync(dirname);
+
+        // Write marks array to file
+        fs.writeFileSync(markFilePath, JSON.stringify(marks, null, 2));
+        console.log('Marks saved to', markFilePath);
+        return true;
+    }
+    catch (e) {
+        console.error('Failed to save marks:', e);
+        throw e;
+    }
+}
+
+module.exports.getUserMeta = function () {
+    const metaPath = getUserMetaFullPath();
+    if (fs.existsSync(metaPath)) {
+        try {
+            return JSON.parse(fs.readFileSync(metaPath, 'utf-8'));
+        }
+        catch (e) {
+            console.error('Failed to read user meta:', e);
+            return {};
+        }
+    }
+    return {};
+}
+
+module.exports.saveUserMeta = function (data) {
+    const metaPath = getUserMetaFullPath();
+    // Read existing data if exists
+    let existingData = {};
+    if (fs.existsSync(metaPath)) {
+        try {
+            existingData = JSON.parse(fs.readFileSync(metaPath, 'utf-8'));
+        }
+        catch (e) {
+            console.error('Failed to read existing meta file:', e);
+        }
+    }
+
+    // Merge new data with existing
+    const updatedData = Object.assign({}, existingData, data);
+
+    try {
+        fs.writeFileSync(metaPath, JSON.stringify(updatedData, null, 2), 'utf-8');
+        console.log('User meta saved successfully');
+        return true;
+    }
+    catch (e) {
+        console.error('Failed to save user meta:', e);
+        return false;
+    }
+}
+
+/**
+ * Delete a specific mark for a test by its timestamp
+ * @param {string} testName The name of the test
+ * @param {number} markTime The timestamp of the mark to delete
+ * @return {boolean} Whether the operation was successful
+ */
+module.exports.deleteMark = function(testName, markTime) {
+    try {
+        // Get the file path for the marks
+        const marksFilePath = getMarkedAsExpectedFullPath(testName);
+
+        // Check if the file exists
+        if (!fs.existsSync(marksFilePath)) {
+            console.log(`No marks file found for test "${testName}"`);
+            return true; // Consider it successful if there was no file to delete
+        }
+
+        // Read the current marks
+        const marksContent = fs.readFileSync(marksFilePath, 'utf-8');
+        let marks;
+
+        try {
+            marks = JSON.parse(marksContent);
+            // Ensure marks is an array
+            if (!Array.isArray(marks)) {
+                marks = [marks];
+            }
+        } catch (e) {
+            console.error(`Error parsing marks file for test "${testName}":`, e);
+            return false;
+        }
+
+        // Filter out the mark with the given timestamp
+        const filteredMarks = marks.filter(mark => mark.markTime !== markTime);
+
+        // If no marks were removed, return false
+        if (filteredMarks.length === marks.length) {
+            console.log(`No mark found with timestamp ${markTime} for test "${testName}"`);
+            return false;
+        }
+
+        // Update the test object in memory
+        const test = _tests.find(test => test.name === testName);
+        if (test) {
+            if (filteredMarks.length === 0) {
+                test.markedAsExpected = null;
+                // Remove the file if there are no marks left
+                fs.unlinkSync(marksFilePath);
+                console.log(`Deleted marks file for test "${testName}"`);
+            } else {
+                test.markedAsExpected = filteredMarks;
+                // Write the filtered marks back to the file
+                fs.writeFileSync(marksFilePath, JSON.stringify(filteredMarks, null, 2), 'utf-8');
+                console.log(`Deleted mark with timestamp ${markTime} for test "${testName}"`);
+            }
+        }
+
+        return true;
+    } catch (e) {
+        console.error(`Error deleting mark for test "${testName}" at time ${markTime}:`, e);
+        return false;
+    }
+}
diff --git a/test/runTest/util.js b/test/runTest/util.js
index 751b6a1bb3..a66263bd6c 100644
--- a/test/runTest/util.js
+++ b/test/runTest/util.js
@@ -57,6 +57,14 @@ module.exports.getActionsFullPath = function (testName) {
     return path.join(__dirname, 'actions', testName + '.json');
 };
 
+module.exports.getMarkedAsExpectedFullPath = function (testName) {
+    return path.join(__dirname, 'marks', testName + '.json');
+};
+
+module.exports.getUserMetaFullPath = function () {
+    return path.join(__dirname, 'tmp', 'meta.json');
+};
+
 module.exports.getEChartsTestFileName = function () {
     return `echarts.test-${config.testVersion}.js`;
 };
diff --git a/theme/v5.js b/theme/v5.js
index 55dc001a7c..d82a380a51 100644
--- a/theme/v5.js
+++ b/theme/v5.js
@@ -531,21 +531,6 @@
                 iconStyle: {
                     borderColor: '#3E98C5'
                 }
-            },
-            feature: {
-                dataView: {
-                    backgroundColor: '#fff',
-                    textColor: '#000',
-                    textareaColor: '#fff',
-                    textareaBorderColor: '#333',
-                    buttonColor: '#c23531',
-                    buttonTextColor: '#fff'
-                },
-                dataZoom: {
-                    brushStyle: {
-                        color: 'rgba(210,219,238,0.2)'
-                    }
-                }
             }
         },
 

From c4481090e1a228c883bede102599fc14962e556a Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Fri, 30 May 2025 18:06:44 +0800
Subject: [PATCH 22/27] test(theme): fix test cases of v6

---
 src/chart/bar/BaseBarSeries.ts                |   9 +-
 src/component/brush/BrushModel.ts             |  14 +-
 src/component/dataZoom/SliderZoomModel.ts     |   5 +-
 src/component/timeline/SliderTimelineModel.ts |   3 +-
 src/coord/geo/GeoModel.ts                     |  13 +-
 src/layout/barGrid.ts                         |   5 +-
 src/model/Global.ts                           |   4 +-
 src/visual/visualDefault.ts                   |   2 +-
 test/areaLineUpdate.html                      |   4 +-
 test/bar-markArea.html                        |   1 +
 test/check-build.html                         |   5 +-
 test/circle-packing-with-d3.compat.html       |   7 +-
 test/circle-packing-with-d3.html              |   9 +-
 test/custom-shape-morphing2.html              |   6 +-
 test/custom-shape-morphing3.html              |   1 -
 test/custom-transition-ecStat.html            |   1 -
 test/dataZoom-action.html                     |  18 +-
 test/ie-svg-export.html                       |   9 +-
 test/ios13-z-bug.html                         |   6 +-
 test/lib/config.js                            |   4 +-
 test/lines-ny.html                            |   7 +-
 test/runTest/client/client.js                 |  69 +++--
 test/runTest/genReport.js                     | 265 ++++++++++++++++--
 test/runTest/marks/brush2.json                |  10 +
 test/runTest/marks/dataSelect.json            |  10 +
 test/runTest/marks/decal.json                 |  10 +
 test/runTest/marks/emphasis-disabled.json     |  10 +
 .../marks/force-edge-ignoreLayout.json        |  10 +
 test/runTest/marks/gauge.json                 |  10 +
 test/runTest/marks/graph-edge-highlight.json  |  10 +
 test/runTest/marks/graph-grid.json            |  10 +
 test/runTest/marks/graph-thumbnail.json       |  10 +
 test/runTest/marks/graph.json                 |  10 +
 test/runTest/marks/hoverFocus.json            |  10 +
 test/runTest/marks/loading.json               |  10 +
 test/runTest/marks/sankey-labelValue.json     |  10 +
 test/runTest/marks/sunburst-book.json         |  10 +
 .../marks/sunburst-emphasis-focus.json        |  10 +
 test/runTest/marks/sunburst-label-align.json  |  10 +
 test/runTest/marks/sunburst-label-rotate.json |  10 +
 test/runTest/marks/sunburst-label.json        |  10 +
 test/runTest/marks/sunburst-simple.json       |  10 +
 test/runTest/marks/theme-list.json            |  10 +
 test/runTest/marks/theme.json                 |  10 +
 test/runTest/marks/universalTransition3.json  |  10 +
 test/timeScale-value-bandwidth.html           | 188 +++++++++++++
 theme/v5.js                                   |  24 +-
 47 files changed, 795 insertions(+), 104 deletions(-)
 create mode 100644 test/runTest/marks/brush2.json
 create mode 100644 test/runTest/marks/dataSelect.json
 create mode 100644 test/runTest/marks/decal.json
 create mode 100644 test/runTest/marks/emphasis-disabled.json
 create mode 100644 test/runTest/marks/force-edge-ignoreLayout.json
 create mode 100644 test/runTest/marks/gauge.json
 create mode 100644 test/runTest/marks/graph-edge-highlight.json
 create mode 100644 test/runTest/marks/graph-grid.json
 create mode 100644 test/runTest/marks/graph-thumbnail.json
 create mode 100644 test/runTest/marks/graph.json
 create mode 100644 test/runTest/marks/hoverFocus.json
 create mode 100644 test/runTest/marks/loading.json
 create mode 100644 test/runTest/marks/sankey-labelValue.json
 create mode 100644 test/runTest/marks/sunburst-book.json
 create mode 100644 test/runTest/marks/sunburst-emphasis-focus.json
 create mode 100644 test/runTest/marks/sunburst-label-align.json
 create mode 100644 test/runTest/marks/sunburst-label-rotate.json
 create mode 100644 test/runTest/marks/sunburst-label.json
 create mode 100644 test/runTest/marks/sunburst-simple.json
 create mode 100644 test/runTest/marks/theme-list.json
 create mode 100644 test/runTest/marks/theme.json
 create mode 100644 test/runTest/marks/universalTransition3.json
 create mode 100644 test/timeScale-value-bandwidth.html

diff --git a/src/chart/bar/BaseBarSeries.ts b/src/chart/bar/BaseBarSeries.ts
index caebce271e..5096bb3980 100644
--- a/src/chart/bar/BaseBarSeries.ts
+++ b/src/chart/bar/BaseBarSeries.ts
@@ -67,6 +67,11 @@ export interface BaseBarSeriesOption<StateOption, ExtraStateOption extends State
      */
     barGap?: string | number
 
+    /**
+     * @private
+     */
+    defaultBarGap?: string | number
+
     /**
      * Gap between each category. Default to be 20%. can be an absolute pixel value.
      */
@@ -199,7 +204,9 @@ class BaseBarSeriesModel<Opts extends BaseBarSeriesOption<unknown> = BaseBarSeri
         large: false,
         largeThreshold: 400,
         progressive: 3e3,
-        progressiveChunkMode: 'mod'
+        progressiveChunkMode: 'mod',
+
+        defaultBarGap: '10%'
     };
 }
 
diff --git a/src/component/brush/BrushModel.ts b/src/component/brush/BrushModel.ts
index b364fd01b7..4bf87b566c 100644
--- a/src/component/brush/BrushModel.ts
+++ b/src/component/brush/BrushModel.ts
@@ -21,7 +21,7 @@
 import * as zrUtil from 'zrender/src/core/util';
 import * as visualSolution from '../../visual/visualSolution';
 import Model from '../../model/Model';
-import { ComponentOption, ZRColor, VisualOptionFixed } from '../../util/types';
+import type { ComponentOption, ZRColor, VisualOptionFixed, ColorString } from '../../util/types';
 import ComponentModel from '../../model/Component';
 import BrushTargetManager from '../helper/BrushTargetManager';
 import {
@@ -31,8 +31,6 @@ import {
 import { ModelFinderObject } from '../../util/model';
 import tokens from '../../visual/tokens';
 
-const DEFAULT_OUT_OF_BRUSH_COLOR = tokens.color.disabled;
-
 /**
  * The input to define brush areas.
  * (1) Can be created by user when calling dispatchAction.
@@ -121,6 +119,11 @@ export interface BrushOption extends ComponentOption, ModelFinderObject {
     transformable?: boolean;
     brushMode?: BrushMode;
     removeOnClick?: boolean;
+
+    /**
+     * @private
+     */
+    defaultOutOfBrushColor?: ColorString;
 }
 
 class BrushModel extends ComponentModel<BrushOption> {
@@ -143,7 +146,8 @@ class BrushModel extends ComponentModel<BrushOption> {
         throttleType: 'fixRate',
         throttleDelay: 0,
         removeOnClick: true,
-        z: 10000
+        z: 10000,
+        defaultOutOfBrushColor: tokens.color.disabled
     };
 
     /**
@@ -178,7 +182,7 @@ class BrushModel extends ComponentModel<BrushOption> {
 
         const inBrush = thisOption.inBrush = thisOption.inBrush || {};
         // Always give default visual, consider setOption at the second time.
-        thisOption.outOfBrush = thisOption.outOfBrush || {color: DEFAULT_OUT_OF_BRUSH_COLOR};
+        thisOption.outOfBrush = thisOption.outOfBrush || {color: this.option.defaultOutOfBrushColor};
 
         if (!inBrush.hasOwnProperty('liftZ')) {
             // Bigger than the highlight z lift, otherwise it will
diff --git a/src/component/dataZoom/SliderZoomModel.ts b/src/component/dataZoom/SliderZoomModel.ts
index 76c767637f..75c9d51ea6 100644
--- a/src/component/dataZoom/SliderZoomModel.ts
+++ b/src/component/dataZoom/SliderZoomModel.ts
@@ -129,7 +129,10 @@ export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMix
         moveHandleStyle?: ItemStyleOption
     },
 
-    // Distance between the slider and the edge of the chart.
+    /**
+     * @private
+     * Distance between the slider and the edge of the chart.
+     */
     defaultLocationEdgeGap?: number
 }
 
diff --git a/src/component/timeline/SliderTimelineModel.ts b/src/component/timeline/SliderTimelineModel.ts
index 866932b293..f84a935874 100644
--- a/src/component/timeline/SliderTimelineModel.ts
+++ b/src/component/timeline/SliderTimelineModel.ts
@@ -70,8 +70,7 @@ class SliderTimelineModel extends TimelineModel {
         },
         itemStyle: {
             color: tokens.color.accent20,
-            borderWidth: 0,
-            borderColor: tokens.color.accent20
+            borderWidth: 0
         },
 
         checkpointStyle: {
diff --git a/src/coord/geo/GeoModel.ts b/src/coord/geo/GeoModel.ts
index ba1b3b9e1d..215c47e208 100644
--- a/src/coord/geo/GeoModel.ts
+++ b/src/coord/geo/GeoModel.ts
@@ -133,6 +133,11 @@ export interface GeoOption extends
     selectedMap?: Dictionary<boolean>
 
     tooltip?: CommonTooltipOption<GeoTooltipFormatterParams>
+
+    /**
+     * @private
+     */
+    defaultItemStyleColor?: ZRColor;
 }
 
 class GeoModel extends ComponentModel<GeoOption> {
@@ -207,7 +212,7 @@ class GeoModel extends ComponentModel<GeoOption> {
                 color: tokens.color.primary
             },
             itemStyle: {
-                areaColor: tokens.color.highlight
+                color: tokens.color.highlight
             }
         },
 
@@ -229,16 +234,16 @@ class GeoModel extends ComponentModel<GeoOption> {
     };
 
     init(option: GeoOption, parentModel: Model, ecModel: GlobalModel): void {
+        this.mergeDefaultAndTheme(option, ecModel);
+
         const source = geoSourceManager.getGeoResource(option.map);
         if (source && source.type === 'geoJSON') {
             const itemStyle = option.itemStyle = option.itemStyle || {};
             if (!('color' in itemStyle)) {
-                itemStyle.color = tokens.color.backgroundTint;
+                itemStyle.color = option.defaultItemStyleColor || tokens.color.backgroundTint;
             }
         }
 
-        this.mergeDefaultAndTheme(option, ecModel);
-
         // Default label emphasis `show`
         modelUtil.defaultEmphasis(option, 'label', ['show']);
     }
diff --git a/src/layout/barGrid.ts b/src/layout/barGrid.ts
index 7f4af8f80f..cb979216fd 100644
--- a/src/layout/barGrid.ts
+++ b/src/layout/barGrid.ts
@@ -44,6 +44,7 @@ interface LayoutSeriesInfo {
     barMaxWidth: number
     barMinWidth: number
     barGap: number | string
+    defaultBarGap?: number | string
     barCategoryGap: number | string
     axisKey: string
     stackId: string
@@ -236,6 +237,7 @@ export function makeColumnLayout(barSeries: BarSeriesModel[]) {
         );
         const barGap = seriesModel.get('barGap');
         const barCategoryGap = seriesModel.get('barCategoryGap');
+        const defaultBarGap = seriesModel.get('defaultBarGap');
 
         seriesInfoList.push({
             bandWidth: bandWidth,
@@ -244,6 +246,7 @@ export function makeColumnLayout(barSeries: BarSeriesModel[]) {
             barMinWidth: barMinWidth,
             barGap: barGap,
             barCategoryGap: barCategoryGap,
+            defaultBarGap: defaultBarGap,
             axisKey: getAxisKey(baseAxis),
             stackId: getSeriesStackId(seriesModel)
         });
@@ -273,7 +276,7 @@ function doCalBarWidthAndOffset(seriesInfoList: LayoutSeriesInfo[]) {
             remainedWidth: bandWidth,
             autoWidthCount: 0,
             categoryGap: null,
-            gap: '10%',
+            gap: seriesInfo.defaultBarGap || 0,
             stacks: {}
         };
         const stacks = columnsOnAxis.stacks;
diff --git a/src/model/Global.ts b/src/model/Global.ts
index add0aac637..1150635a25 100644
--- a/src/model/Global.ts
+++ b/src/model/Global.ts
@@ -1016,7 +1016,9 @@ function mergeTheme(option: ECUnitOption, theme: ThemeOption): void {
     const notMergeColorLayer = option.color && !option.colorLayer;
 
     each(theme, function (themeItem, name) {
-        if (name === 'colorLayer' && notMergeColorLayer) {
+        if (name === 'colorLayer' && notMergeColorLayer
+            || name === 'color' && option.color
+        ) {
             return;
         }
 
diff --git a/src/visual/visualDefault.ts b/src/visual/visualDefault.ts
index d3e32f326b..9eb10dec40 100644
--- a/src/visual/visualDefault.ts
+++ b/src/visual/visualDefault.ts
@@ -45,7 +45,7 @@ const defaultOption: {[key: string]: {
 }} = {
 
     color: {
-        active: [tokens.color.accent70, tokens.color.accent20],
+        active: ['#006edd', '#e0ffff'],
         inactive: [tokens.color.transparent]
     },
 
diff --git a/test/areaLineUpdate.html b/test/areaLineUpdate.html
index eb0a6adfd1..2ab5abb286 100644
--- a/test/areaLineUpdate.html
+++ b/test/areaLineUpdate.html
@@ -24,6 +24,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <script src="lib/simpleRequire.js"></script>
         <script src="lib/config.js"></script>
+        <script src="lib/testHelper.js"></script>
         <script src="lib/facePrint.js"></script>
     </head>
     <body>
@@ -239,7 +240,6 @@
                 if (!main) {
                     return;
                 }
-                var chart = echarts.init(main);
 
                 var xAxisData = [];
                 var data1 = [];
@@ -300,7 +300,7 @@
                     }
                 };
 
-                chart.setOption({
+                var chart = testHelper.create(echarts, 'main2', {
                     legend: {
                         data: ['line', 'line2', 'line3']
                     },
diff --git a/test/bar-markArea.html b/test/bar-markArea.html
index 8473f0a43c..fc2eefe9f0 100644
--- a/test/bar-markArea.html
+++ b/test/bar-markArea.html
@@ -62,6 +62,7 @@
                 {
                   data: [120, 200, 150, 80, 70, 110, 130],
                   type: 'bar',
+                  barGap: '30%',
                   markArea: {
                     data: [
                       [
diff --git a/test/check-build.html b/test/check-build.html
index d81585d1f8..f11ed16ce6 100644
--- a/test/check-build.html
+++ b/test/check-build.html
@@ -22,7 +22,8 @@
 <html>
     <head>
         <meta charset="utf-8">
-        <script src="../dist/echarts.js"></script>
+        <script src="lib/simpleRequire.js"></script>
+        <script src="lib/config.js"></script>
     </head>
     <body>
         <style>
@@ -33,6 +34,7 @@
         </style>
         <div id="main"></div>
         <script>
+        require(['echarts'], function (echarts) {
             function makeChart () {
                 var main = document.getElementById('main');
                 var div = document.createElement('div');
@@ -608,6 +610,7 @@
             setTimeout(function () {
                 makeGraph();
             }, 350);
+        });
         </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/test/circle-packing-with-d3.compat.html b/test/circle-packing-with-d3.compat.html
index c4a300669b..aacc0d388e 100644
--- a/test/circle-packing-with-d3.compat.html
+++ b/test/circle-packing-with-d3.compat.html
@@ -44,10 +44,10 @@
 
 <svg width="960" height="960"><g transform="translate(1,1)"></g></svg>
 <script src="https://d3js.org/d3.v4.min.js"></script>
-<script src="../dist/echarts.js"></script>
-<script src="./lib/config.js"></script>
+<script src="lib/simpleRequire.js"></script>
+<script src="lib/config.js"></script>
 <script>
-
+require(['echarts'], function (echarts) {
 var stratify = d3.stratify()
     .parentId(function(d) {
         return d.id.substring(0, d.id.lastIndexOf("."));
@@ -157,4 +157,5 @@
 
 });
 
+});
 </script>
diff --git a/test/circle-packing-with-d3.html b/test/circle-packing-with-d3.html
index 519a3edf12..7123b14498 100644
--- a/test/circle-packing-with-d3.html
+++ b/test/circle-packing-with-d3.html
@@ -44,11 +44,11 @@
 
 <svg width="960" height="960"><g transform="translate(1,1)"></g></svg>
 <script src="https://d3js.org/d3.v4.min.js"></script>
-<script src="../dist/echarts.js"></script>
-<script src="./lib/testHelper.js"></script>
-<script src="./lib/config.js"></script>
+<script src="lib/simpleRequire.js"></script>
+<script src="lib/config.js"></script>
+<script src="lib/testHelper.js"></script>
 <script>
-
+require(['echarts'], function (echarts) {
 var stratify = d3.stratify()
     .parentId(function(d) {
         return d.id.substring(0, d.id.lastIndexOf("."));
@@ -182,4 +182,5 @@
 
 });
 
+});
 </script>
diff --git a/test/custom-shape-morphing2.html b/test/custom-shape-morphing2.html
index 8b5d2bcdff..b5f0fbbe80 100644
--- a/test/custom-shape-morphing2.html
+++ b/test/custom-shape-morphing2.html
@@ -25,7 +25,8 @@
         <script src="lib/simpleRequire.js"></script>
         <script src="lib/config.js"></script>
         <script src='lib/jquery.min.js'></script>
-        <script src="../dist/echarts.js"></script>
+        <script src="lib/simpleRequire.js"></script>
+        <script src="lib/config.js"></script>
         <script src="lib/testHelper.js"></script>
         <link rel="stylesheet" href="lib/reset.css" />
     </head>
@@ -38,7 +39,7 @@
 
 
         <script>
-
+        require(['echarts'], function (echarts) {
             function initRawData(count) {
                 var M_TAG_LIST = ['MA', 'MB', 'MC', 'MD'];
                 var Z_TAG_LIST = ['ZA', 'ZB', 'ZC', 'ZD', 'ZE'];
@@ -68,6 +69,7 @@
 
                 return data;
             }
+        });
         </script>
 
 
diff --git a/test/custom-shape-morphing3.html b/test/custom-shape-morphing3.html
index a5765f0fdf..75c382fdf7 100644
--- a/test/custom-shape-morphing3.html
+++ b/test/custom-shape-morphing3.html
@@ -25,7 +25,6 @@
         <script src="lib/simpleRequire.js"></script>
         <script src="lib/config.js"></script>
         <script src='lib/jquery.min.js'></script>
-        <script src="../dist/echarts.js"></script>
         <script src="lib/testHelper.js"></script>
         <link rel="stylesheet" href="lib/reset.css" />
     </head>
diff --git a/test/custom-transition-ecStat.html b/test/custom-transition-ecStat.html
index e2c01547a0..18991504bf 100644
--- a/test/custom-transition-ecStat.html
+++ b/test/custom-transition-ecStat.html
@@ -25,7 +25,6 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <script src="lib/simpleRequire.js"></script>
         <script src="lib/config.js"></script>
-        <script src="../dist/echarts.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/facePrint.js"></script>
         <script src="lib/testHelper.js"></script>
diff --git a/test/dataZoom-action.html b/test/dataZoom-action.html
index d9be2d11c4..6c7d8993b5 100644
--- a/test/dataZoom-action.html
+++ b/test/dataZoom-action.html
@@ -22,7 +22,6 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <script src="../dist/echarts.js"></script>
         <script src="lib/testHelper.js"></script>
         <script src="lib/facePrint.js"></script>
         <script src="lib/jquery.min.js"></script>
@@ -57,7 +56,7 @@
 
 
         <script>
-
+        require(['echarts'], function (echarts) {
             function makeButtons(ctx) {
 
                 function printStates() {
@@ -148,6 +147,7 @@
                     end: 41
                 }];
             }
+        });
         </script>
 
 
@@ -162,7 +162,7 @@
         <script>
 
 
-        require(['./data/ec-star.json'], function (data) {
+        require(['./data/ec-star.json', 'echarts'], function (data, echarts) {
 
             var minStartValue = '2013-06-06';
             var maxEndValue = '2017-10-17';
@@ -312,7 +312,7 @@
 
 
         <script>
-
+        require(['echarts'], function (echarts) {
             var option;
 
             var base = +new Date(1990, 9, 3);
@@ -424,7 +424,7 @@
                 height: 200,
                 buttons: makeButtons(ctx)
             });
-
+        });
         </script>
 
 
@@ -435,7 +435,7 @@
 
 
         <script>
-
+        require(['echarts'], function (echarts) {
             var option;
 
             var base = +new Date(1990, 9, 3);
@@ -545,7 +545,7 @@
                 height: 200,
                 buttons: makeButtons(ctx)
             });
-
+        });
         </script>
 
 
@@ -564,7 +564,7 @@
 
 
         <script>
-
+        require(['echarts'], function (echarts) {
             var option;
 
             var base = +new Date(1990, 9, 3);
@@ -649,7 +649,7 @@
                 height: 200,
                 buttons: makeButtons(ctx)
             });
-
+        });
         </script>
 
 
diff --git a/test/ie-svg-export.html b/test/ie-svg-export.html
index 8f1de0b3cf..4b8adafe7b 100644
--- a/test/ie-svg-export.html
+++ b/test/ie-svg-export.html
@@ -33,11 +33,10 @@
     <body>
         <div id="main0"></div>
 
-        <!-- please run npm run build/watch -->
-        <script src="../dist/echarts.js"></script>
-        <!-- compare with rc1 -->
-        <!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0-rc.1/dist/echarts.js"></script> -->
+        <script src="lib/simpleRequire.js"></script>
+        <script src="lib/config.js"></script>
         <script>
+        require(['echarts'], function (echarts) {
             var container = document.getElementById('main0');
             var chart = echarts.init(container, null, {
                 renderer: 'svg',
@@ -70,9 +69,9 @@
             };
 
             chart.setOption(option);
+        });
         </script>
 
 
     </body>
 </html>
-
diff --git a/test/ios13-z-bug.html b/test/ios13-z-bug.html
index 358ea04853..7eabf26622 100644
--- a/test/ios13-z-bug.html
+++ b/test/ios13-z-bug.html
@@ -23,6 +23,8 @@
     <title>css</title>
     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
     <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
+    <script src="lib/simpleRequire.js"></script>
+    <script src="lib/config.js"></script>
 
     <style>
         #main {
@@ -156,9 +158,9 @@
     </div>
 
 
-    <script src="../dist/echarts.js?_v_=123"></script>
 
     <script>
+    require(['echarts'], function (echarts) {
     var option = {
         "legend": {
             "left": "right",
@@ -342,7 +344,7 @@
 
     var chart = echarts.init(document.getElementById('aaa'));
     chart.setOption(option);
-
+});
     </script>
 
 
diff --git a/test/lib/config.js b/test/lib/config.js
index b03498c442..caa9826d66 100644
--- a/test/lib/config.js
+++ b/test/lib/config.js
@@ -134,7 +134,9 @@
             newEC.init = function () {
                 var args = Array.prototype.slice.call(arguments);
                 // Set default renderer in dev mode.
-                if (window.__ECHARTS__DEFAULT__THEME__ != null) {
+                if ((args[1] == null || args[1] === '')
+                    && window.__ECHARTS__DEFAULT__THEME__ != null
+                ) {
                     args[1] = window.__ECHARTS__DEFAULT__THEME__;
                 }
                 return originalInit.apply(this, args);
diff --git a/test/lines-ny.html b/test/lines-ny.html
index ec19c789e3..51a5d97ff2 100644
--- a/test/lines-ny.html
+++ b/test/lines-ny.html
@@ -21,7 +21,8 @@
 <html>
     <head>
         <meta charset='utf-8'>
-        <script src='../dist/echarts.js'></script>
+        <script src="lib/simpleRequire.js"></script>
+        <script src="lib/config.js"></script>
         <script src="../../echarts-gl/dist/echarts-gl.js"></script>
         <script src='./data/map/js/world.js'></script>
         <meta name='viewport' content='width=device-width, initial-scale=1' />
@@ -36,7 +37,7 @@
         </style>
         <div id='main'></div>
         <script>
-
+        require(['echarts'], function (echarts) {
             var CHUNK_COUNT = 32;
 
             var dataCount = 0;
@@ -131,7 +132,7 @@
 
                 chart.setOption(option);
             }
-
+        });
 
         </script>
     </body>
diff --git a/test/runTest/client/client.js b/test/runTest/client/client.js
index 05d3c2b8c8..791ed65303 100644
--- a/test/runTest/client/client.js
+++ b/test/runTest/client/client.js
@@ -56,12 +56,14 @@ function assembleParams(paramsObj) {
 }
 
 function shouldShowMarkAsExpected(test, expectedSource, expectedVersion) {
-    if (expectedSource !== 'release'
-        || expectedVersion !== test.expectedVersion
+    if (expectedSource === 'release' && (expectedVersion !== test.expectedVersion)
         || !test.markedAsExpected
     ) {
         return false;
     }
+    if (expectedSource !== 'release' && test.markedAsExpected.length > 0) {
+        return true;
+    }
 
     for (let i = 0; i < test.markedAsExpected.length; i++) {
         if (test.markedAsExpected[i].lastVersion === expectedVersion) {
@@ -205,7 +207,12 @@ const app = new Vue({
             theme: 'none'
         }, urlRunConfig),
 
-        userMeta: null
+        userMeta: null,
+
+        // Mark as expected form values
+        linkValue: '',
+        commentValue: '',
+        selectedType: 'New Feature'
     },
 
     async mounted() {
@@ -229,7 +236,6 @@ const app = new Vue({
             forceSet: Object.keys(urlRunConfig).length > 0
         });
         socket.on('syncRunConfig_return', res => {
-            console.log('syncRunConfig_return', res.runConfig.expectedSource, res.runConfig.expectedVersion);
             this.versions = res.versions || [];
             this.nightlyVersions = res.nightlyVersions || [];
             this.prVersions = res.prVersions || [];
@@ -238,13 +244,11 @@ const app = new Vue({
             handlingSourceChange = true;
             this.$nextTick(() => {
                 if (!this.runConfig.expectedVersion) {
-                    console.log('this.runConfig.expectedVersion null');
                     this.runConfig.expectedVersion = getVersionFromSource(
                         this.runConfig.expectedSource,
                         this.versions,
                         this.nightlyVersions
                     );
-                    console.log('this.runConfig.expectedVersion', this.runConfig.expectedVersion);
                 }
 
                 if (!this.runConfig.actualVersion) {
@@ -306,6 +310,12 @@ const app = new Vue({
             let sortFunc = this.runConfig.sortBy === 'name'
                 ? (a, b) => a.name.localeCompare(b.name)
                 : (a, b) => {
+                    if (a.summary === 'markedAsExpected' && b.summary !== 'markedAsExpected') {
+                        return -1;
+                    }
+                    if (a.summary !== 'markedAsExpected' && b.summary === 'markedAsExpected') {
+                        return 1;
+                    }
                     if (a.actualErrors.length === b.actualErrors.length) {
                         if (a.percentage === b.percentage) {
                             return a.name.localeCompare(b.name);
@@ -458,8 +468,8 @@ const app = new Vue({
         validateMarkExpected(lastVersion) {
             if (this.runConfig.expectedSource !== 'release') {
                 return {
-                    valid: false,
-                    reason: 'Only valid when the expected version is release'
+                    valid: true,
+                    reason: 'Valid'
                 }
             }
             if (lastVersion !== this.runConfig.expectedVersion) {
@@ -583,10 +593,6 @@ const app = new Vue({
             });
         },
         showMarkAsExpectedDialog() {
-            // Reset input values each time the dialog is opened
-            let linkValue = '';
-            let commentValue = '';
-            let selectedType = 'New Feature';
             // Only initialize identity fields from user meta
             let markedBy = this.userMeta?.myGitHubId || '';
             let lastVersion = this.userMeta?.lastEChartsVersion || '';
@@ -667,11 +673,11 @@ const app = new Vue({
                                         type: 'radio',
                                         name: 'mark-type',
                                         value: 'New Feature',
-                                        checked: selectedType === 'New Feature'
+                                        checked: this.selectedType === 'New Feature'
                                     },
                                     on: {
                                         change: (e) => {
-                                            selectedType = e.target.value;
+                                            this.selectedType = e.target.value;
                                         }
                                     }
                                 }),
@@ -683,11 +689,11 @@ const app = new Vue({
                                         type: 'radio',
                                         name: 'mark-type',
                                         value: 'Bug Fixing',
-                                        checked: selectedType === 'Bug Fixing'
+                                        checked: this.selectedType === 'Bug Fixing'
                                     },
                                     on: {
                                         change: (e) => {
-                                            selectedType = e.target.value;
+                                            this.selectedType = e.target.value;
                                         }
                                     }
                                 }),
@@ -699,11 +705,11 @@ const app = new Vue({
                                         type: 'radio',
                                         name: 'mark-type',
                                         value: 'Others',
-                                        checked: selectedType === 'Others'
+                                        checked: this.selectedType === 'Others'
                                     },
                                     on: {
                                         change: (e) => {
-                                            selectedType = e.target.value;
+                                            this.selectedType = e.target.value;
                                         }
                                     }
                                 }),
@@ -719,9 +725,12 @@ const app = new Vue({
                                 type: 'text',
                                 placeholder: 'https://github.com/apache/echarts/pull/xxx'
                             },
+                            domProps: {
+                                value: this.linkValue
+                            },
                             on: {
                                 input: (e) => {
-                                    linkValue = e.target.value;
+                                    this.linkValue = e.target.value;
                                 }
                             }
                         })
@@ -731,9 +740,12 @@ const app = new Vue({
                         h('textarea', {
                             class: 'el-textarea__inner comment-input',
                             style: { minHeight: '60px' },
+                            domProps: {
+                                value: this.commentValue
+                            },
                             on: {
                                 input: (e) => {
-                                    commentValue = e.target.value;
+                                    this.commentValue = e.target.value;
                                 }
                             }
                         })
@@ -745,7 +757,7 @@ const app = new Vue({
                 customClass: 'mark-as-expected-dialog',
                 beforeClose: (action, instance, done) => {
                     if (action === 'confirm') {
-                        if (!selectedType) {
+                        if (!this.selectedType) {
                             this.$message({
                                 message: 'Please select a type',
                                 type: 'error'
@@ -773,7 +785,7 @@ const app = new Vue({
                             return;
                         }
 
-                        if (linkValue && !(linkValue.startsWith('http://') || linkValue.startsWith('https://'))) {
+                        if (this.linkValue && !(this.linkValue.startsWith('http://') || this.linkValue.startsWith('https://'))) {
                             this.$message({
                                 message: 'Link must start with http:// or https://',
                                 type: 'error'
@@ -817,9 +829,9 @@ const app = new Vue({
 
                         socket.emit('markAsExpected', {
                             testName: this.currentTest.name,
-                            link: linkValue,
-                            comment: commentValue,
-                            type: selectedType,
+                            link: this.linkValue,
+                            comment: this.commentValue,
+                            type: this.selectedType,
                             markedBy: markedBy,
                             lastVersion: lastVersion,
                             markTime: new Date().getTime()
@@ -923,7 +935,12 @@ const app = new Vue({
             try {
                 const response = await fetch('https://api.github.com/repos/apache/echarts/branches?per_page=100');
                 const branches = await response.json();
-                this.branchVersions = branches.map(branch => branch.name);
+                if (branches.length > 0) {
+                    this.branchVersions = branches.map(branch => branch.name);
+                }
+                else {
+                    this.branchVersions = [];
+                }
             } catch (error) {
                 console.error('Failed to fetch branches:', error);
                 this.branchVersions = [];
diff --git a/test/runTest/genReport.js b/test/runTest/genReport.js
index e9960bca77..25d88f4710 100644
--- a/test/runTest/genReport.js
+++ b/test/runTest/genReport.js
@@ -53,6 +53,65 @@ async function inlineImage(imageUrl) {
 
 }
 
+function shouldShowMarkAsExpected(test, expectedSource, expectedVersion) {
+    if (expectedSource === 'release' && (expectedVersion !== test.expectedVersion)
+        || !test.markedAsExpected
+    ) {
+        return false;
+    }
+    if (expectedSource !== 'release' && test.markedAsExpected.length > 0) {
+        return true;
+    }
+
+    for (let i = 0; i < test.markedAsExpected.length; i++) {
+        if (test.markedAsExpected[i].lastVersion === expectedVersion) {
+            return true;
+        }
+    }
+    return false;
+}
+
+function generateMarkDetails(test) {
+    if (!test.markedAsExpected || test.markedAsExpected.length === 0) {
+        return '';
+    }
+
+    let markDetailsHtml = `
+<div class="mark-details">
+<h3>Marked As Expected Details</h3>
+<table>
+    <tr>
+        <th>Time</th>
+        <th>Type</th>
+        <th>Marked By</th>
+        <th>Version</th>
+        <th>Comment</th>
+        <th>Link</th>
+    </tr>
+`;
+
+    test.markedAsExpected.forEach((mark) => {
+        const timeStr = mark.markTime ? new Date(mark.markTime).toLocaleString() : '-';
+        markDetailsHtml += `
+    <tr>
+        <td>${timeStr}</td>
+        <td>${mark.type || '-'}</td>
+        <td>${mark.markedBy || '-'}</td>
+        <td>${mark.lastVersion || '-'}</td>
+        <td>${mark.comment || '-'}</td>
+        <td>
+            ${mark.link ? `<a href="${mark.link}" target="_blank">${mark.link}</a>` : '-'}
+        </td>
+    </tr>`;
+    });
+
+    markDetailsHtml += `
+</table>
+</div>`;
+
+    return markDetailsHtml;
+}
+
 async function genDetail(test) {
     let shotDetail = '';
     let prevShotDesc = '';
@@ -78,17 +137,17 @@ async function genDetail(test) {
             // resolveImagePath(shot.diff)
         ]);
         shotDetail += `
-<div style="margin-top:10px">
-<figure style="width: 30%;display:inline-block;margin:0 10px;">
-  <img src="${expectedUrl}" style="width:100%" />
+<div class="diff-container">
+<figure class="diff-figure">
+  <img src="${expectedUrl}" />
   <figcaption>Expected ${test.expectedVersion}</figcaption>
 </figure>
-<figure style="width: 30%;display:inline-block;margin:0 10px;">
-  <img src="${actualUrl}" style="width:100%" />
+<figure class="diff-figure">
+  <img src="${actualUrl}" />
   <figcaption>Actual ${test.actualVersion}</figcaption>
 </figure>
-<figure style="width: 30%;display:inline-block;margin:0 10px;">
-  <img src="${diffUrl}" style="width:100%" />
+<figure class="diff-figure">
+  <img src="${diffUrl}" />
   <figcaption>Diff(${shot.diffRatio && shot.diffRatio.toFixed(3)})</figcaption>
 </figure>
 </div>
@@ -103,23 +162,53 @@ async function genDetail(test) {
 
 module.exports = async function(testDir) {
     let sections = [];
+    let markedSections = [];
 
     let failedTest = 0;
+    let markedTests = 0;
 
     const tests = JSON.parse(fs.readFileSync(
         path.join(testDir, RESULT_FILE_NAME), 'utf-8'
     ));
 
+    // 从测试中提取expectedSource和expectedVersion信息
+    const expectedSource = tests.length > 0 ? tests[0].expectedSource || 'local' : 'local';
+    const expectedVersion = tests.length > 0 ? tests[0].expectedVersion || 'local' : 'local';
+
     for (let test of tests) {
         let detail = await genDetail(test);
 
         if (detail.failed > 0) {
-            failedTest++;
-            let title = `${failedTest}. ${test.name} (Failed ${detail.failed} / ${detail.total})`;
-            console.log(title);
+            // 检查是否被标记为预期的测试
+            if (shouldShowMarkAsExpected(test, expectedSource, expectedVersion)) {
+                markedTests++;
+                let title = `${markedTests}. ${test.name}`;
+
+                let markContent = generateMarkDetails(test);
+                let sectionText = `
+<div class="section-divider"></div>
+<a id="marked-${test.name}"></a>
+
+<h2>${title}</h2>
+
+${markContent}
 
-            let sectionText = `
-<div style="margin-top: 100px;height: 20px;border-top: 1px solid #aaa"></div>
+${detail.content}
+`;
+
+                markedSections.push({
+                    content: sectionText,
+                    title,
+                    id: `marked-${test.name}`
+                });
+            }
+            else {
+                failedTest++;
+                let title = `${failedTest}. ${test.name} (Failed ${detail.failed} / ${detail.total})`;
+                console.log(title);
+
+                let sectionText = `
+<div class="section-divider"></div>
 <a id="${test.name}"></a>
 
 <h2>${title}</h2>
@@ -127,24 +216,154 @@ module.exports = async function(testDir) {
 ${detail.content}
     `;
 
-            sections.push({
-                content: sectionText,
-                title,
-                id: test.name
-            });
+                sections.push({
+                    content: sectionText,
+                    title,
+                    id: test.name
+                });
+            }
+        }
+    }
+
+    let htmlText = `
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Visual Regression Test Report</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            line-height: 1.6;
+            margin: 0;
+            padding: 0;
+        }
+        h1, h2, h3, h4 {
+            margin-top: 20px;
+        }
+        .sidebar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 280px;
+            height: 100%;
+            background-color: #f8f8f8;
+            padding: 20px;
+            overflow-y: auto;
+            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
+        }
+        .main-content {
+            margin-left: 320px;
+            padding: 20px;
+        }
+        .section-divider {
+            margin-top: 100px;
+            height: 20px;
+            border-top: 1px solid #aaa;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 10px;
+        }
+        th, td {
+            padding: 8px;
+            text-align: left;
+            border: 1px solid #ddd;
+        }
+        th {
+            background-color: #f2f2f2;
+        }
+        tr:nth-child(even) {
+            background-color: #f9f9f9;
+        }
+        .diff-container {
+            margin-top: 10px;
+        }
+        .diff-figure {
+            width: 30%;
+            display: inline-block;
+            margin: 0 10px;
+        }
+        .diff-figure img {
+            width: 100%;
+        }
+        .mark-details {
+            margin-top: 20px;
+        }
+        .nav-section {
+            margin-top: 20px;
         }
+        .nav-section h3 {
+            margin-bottom: 10px;
+            padding-bottom: 5px;
+            border-bottom: 1px solid #ddd;
+        }
+        .nav-list {
+            list-style-type: none;
+            padding-left: 5px;
+        }
+        .nav-list li {
+            margin-bottom: 8px;
+        }
+        .nav-list a {
+            text-decoration: none;
+            color: #333;
+        }
+        .nav-list a:hover {
+            color: #0066cc;
+            text-decoration: underline;
+        }
+        .summary {
+            margin-bottom: 20px;
+        }
+    </style>
+</head>
+<body>
+<div class="sidebar">
+    <h2>Test Report</h2>
+    <div class="summary">
+        <p>Total: ${tests.length}</p>
+        <p>Failed: ${failedTest}</p>
+        <p>Marked As Expected: ${markedTests}</p>
+    </div>
+`;
+
+    if (markedTests > 0) {
+        htmlText += `
+    <div class="nav-section">
+        <h3>Marked As Expected Tests</h3>
+        <ul class="nav-list">
+            ${markedSections.map(section => {
+                return `<li><a href="#${section.id}">${section.title}</a></li>`;
+            }).join('\n')}
+        </ul>
+    </div>`;
+    }
+
+    if (failedTest > 0) {
+        htmlText += `
+    <div class="nav-section">
+        <h3>Failed Tests</h3>
+        <ul class="nav-list">
+            ${sections.map(section => {
+                return `<li><a href="#${section.id}">${section.title}</a></li>`;
+            }).join('\n')}
+        </ul>
+    </div>`;
     }
 
-    let htmlText = '<h1> Visual Regression Test Report</h1>\n';
     htmlText += `
-<p>Total: ${tests.length}</p>
-<p>Failed: ${failedTest}</p>
+</div>
+<div class="main-content">
+<h1>Visual Regression Test Report</h1>
 `;
-    htmlText += '<ul>\n' + sections.map(section => {
-        return `<li><a href="${section.id}">${section.title}</a></li>`;
-    }).join('\n') + '</ul>';
+
+    htmlText += markedSections.map(section => section.content).join('\n\n');
     htmlText += sections.map(section => section.content).join('\n\n');
 
+    htmlText += '\n</div>\n</body>\n</html>';
+
     const file = path.join(testDir, 'report.html');
     fs.writeFileSync(file, htmlText, 'utf-8');
     return file;
diff --git a/test/runTest/marks/brush2.json b/test/runTest/marks/brush2.json
new file mode 100644
index 0000000000..4c5be120f2
--- /dev/null
+++ b/test/runTest/marks/brush2.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "",
+    "comment": "Expected to have diff because explict theme is used in this case so v5.js is not merged with the explict theme so legend position is changed.",
+    "type": "Others",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748518880894
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/dataSelect.json b/test/runTest/marks/dataSelect.json
new file mode 100644
index 0000000000..4d90ff8899
--- /dev/null
+++ b/test/runTest/marks/dataSelect.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "https://github.com/apache/echarts/pull/20865",
+    "comment": "Sunburst use the first color for the \"Back Button\" after drilling down so it starts with the second theme color. v6 fixed this problem.",
+    "type": "Bug Fixing",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748598827060
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/decal.json b/test/runTest/marks/decal.json
new file mode 100644
index 0000000000..18f4dec0d5
--- /dev/null
+++ b/test/runTest/marks/decal.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "https://github.com/apache/echarts/pull/20865",
+    "comment": "Sunburst use the first color for the \"Back Button\" after drilling down so it starts with the second theme color. v6 fixed this problem.",
+    "type": "Bug Fixing",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748598861473
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/emphasis-disabled.json b/test/runTest/marks/emphasis-disabled.json
new file mode 100644
index 0000000000..411507ad5c
--- /dev/null
+++ b/test/runTest/marks/emphasis-disabled.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "https://github.com/apache/echarts/pull/20865",
+    "comment": "Sunburst use the first color for the \"Back Button\" after drilling down so it starts with the second theme color. v6 fixed this problem.",
+    "type": "Bug Fixing",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748598848975
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/force-edge-ignoreLayout.json b/test/runTest/marks/force-edge-ignoreLayout.json
new file mode 100644
index 0000000000..2a8a6e3cd8
--- /dev/null
+++ b/test/runTest/marks/force-edge-ignoreLayout.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "",
+    "comment": "Expected to have diff because explict theme is used in this case so v5.js is not merged with the explict theme so legend position is changed.",
+    "type": "Others",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748597953612
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/gauge.json b/test/runTest/marks/gauge.json
new file mode 100644
index 0000000000..c6046c4100
--- /dev/null
+++ b/test/runTest/marks/gauge.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "",
+    "comment": "When dark theme is used, v6 dark theme is used instead of v5.",
+    "type": "Others",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748520163540
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/graph-edge-highlight.json b/test/runTest/marks/graph-edge-highlight.json
new file mode 100644
index 0000000000..abdb9cc2f7
--- /dev/null
+++ b/test/runTest/marks/graph-edge-highlight.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "",
+    "comment": "Expected to have diff because explict theme is used in this case so v5.js is not merged with the explict theme so legend position is changed.",
+    "type": "Others",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748598046761
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/graph-grid.json b/test/runTest/marks/graph-grid.json
new file mode 100644
index 0000000000..eb09b7bfc3
--- /dev/null
+++ b/test/runTest/marks/graph-grid.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "",
+    "comment": "Expected to have diff because explict theme is used in this case so v5.js is not merged with the explict theme so legend position is changed.",
+    "type": "Others",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748598037047
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/graph-thumbnail.json b/test/runTest/marks/graph-thumbnail.json
new file mode 100644
index 0000000000..e2b76a5f49
--- /dev/null
+++ b/test/runTest/marks/graph-thumbnail.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "https://github.com/apache/echarts/pull/17471",
+    "comment": "Thumbnail is a new feature not yet released to it's fine.",
+    "type": "New Feature",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748598278394
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/graph.json b/test/runTest/marks/graph.json
new file mode 100644
index 0000000000..bb0d6c9efc
--- /dev/null
+++ b/test/runTest/marks/graph.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "",
+    "comment": "Expected to have diff because explict theme is used in this case so v5.js is not merged with the explict theme so legend position is changed.",
+    "type": "Others",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748597976742
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/hoverFocus.json b/test/runTest/marks/hoverFocus.json
new file mode 100644
index 0000000000..996130e62f
--- /dev/null
+++ b/test/runTest/marks/hoverFocus.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "https://github.com/apache/echarts/pull/20865",
+    "comment": "Sunburst use the first color for the \"Back Button\" after drilling down so it starts with the second theme color. v6 fixed this problem.",
+    "type": "Bug Fixing",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748598890623
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/loading.json b/test/runTest/marks/loading.json
new file mode 100644
index 0000000000..db90e59b27
--- /dev/null
+++ b/test/runTest/marks/loading.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "",
+    "comment": "Loading style cannot use theme. But it seems OK to change a little.",
+    "type": "Others",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748598374100
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/sankey-labelValue.json b/test/runTest/marks/sankey-labelValue.json
new file mode 100644
index 0000000000..10d0313ef3
--- /dev/null
+++ b/test/runTest/marks/sankey-labelValue.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "",
+    "comment": "Expected to have diff because explict theme is used in this case so v5.js is not merged with the explict theme so legend position is changed.",
+    "type": "Others",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748598421856
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/sunburst-book.json b/test/runTest/marks/sunburst-book.json
new file mode 100644
index 0000000000..cf0d43114f
--- /dev/null
+++ b/test/runTest/marks/sunburst-book.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "https://github.com/apache/echarts/pull/20865",
+    "comment": "Sunburst use the first color for the \"Back Button\" after drilling down so it starts with the second theme color. v6 fixed this problem.",
+    "type": "Bug Fixing",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748598509863
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/sunburst-emphasis-focus.json b/test/runTest/marks/sunburst-emphasis-focus.json
new file mode 100644
index 0000000000..ae216eed8d
--- /dev/null
+++ b/test/runTest/marks/sunburst-emphasis-focus.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "https://github.com/apache/echarts/pull/20865",
+    "comment": "Sunburst use the first color for the \"Back Button\" after drilling down so it starts with the second theme color. v6 fixed this problem.",
+    "type": "Bug Fixing",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748598517931
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/sunburst-label-align.json b/test/runTest/marks/sunburst-label-align.json
new file mode 100644
index 0000000000..31948203c9
--- /dev/null
+++ b/test/runTest/marks/sunburst-label-align.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "https://github.com/apache/echarts/pull/20865",
+    "comment": "Sunburst use the first color for the \"Back Button\" after drilling down so it starts with the second theme color. v6 fixed this problem.",
+    "type": "Bug Fixing",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748598616190
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/sunburst-label-rotate.json b/test/runTest/marks/sunburst-label-rotate.json
new file mode 100644
index 0000000000..ac12d5f145
--- /dev/null
+++ b/test/runTest/marks/sunburst-label-rotate.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "https://github.com/apache/echarts/pull/20865",
+    "comment": "Sunburst use the first color for the \"Back Button\" after drilling down so it starts with the second theme color. v6 fixed this problem.",
+    "type": "Bug Fixing",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748598535947
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/sunburst-label.json b/test/runTest/marks/sunburst-label.json
new file mode 100644
index 0000000000..e0c7092a55
--- /dev/null
+++ b/test/runTest/marks/sunburst-label.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "https://github.com/apache/echarts/pull/20865",
+    "comment": "Sunburst use the first color for the \"Back Button\" after drilling down so it starts with the second theme color. v6 fixed this problem.",
+    "type": "Bug Fixing",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748598526431
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/sunburst-simple.json b/test/runTest/marks/sunburst-simple.json
new file mode 100644
index 0000000000..a0feb9d7d8
--- /dev/null
+++ b/test/runTest/marks/sunburst-simple.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "https://github.com/apache/echarts/pull/20865",
+    "comment": "Sunburst use the first color for the \"Back Button\" after drilling down so it starts with the second theme color. v6 fixed this problem.",
+    "type": "Bug Fixing",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748598542604
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/theme-list.json b/test/runTest/marks/theme-list.json
new file mode 100644
index 0000000000..127648e369
--- /dev/null
+++ b/test/runTest/marks/theme-list.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "https://github.com/apache/echarts/pull/20865",
+    "comment": "Sunburst use the first color for the \"Back Button\" after drilling down so it starts with the second theme color. v6 fixed this problem.",
+    "type": "Bug Fixing",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748598599366
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/theme.json b/test/runTest/marks/theme.json
new file mode 100644
index 0000000000..dbdcc215d9
--- /dev/null
+++ b/test/runTest/marks/theme.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "",
+    "comment": "Expected to have diff because explict theme is used in this case so v5.js is not merged with the explict theme so legend position is changed.",
+    "type": "Others",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748598562728
+  }
+]
\ No newline at end of file
diff --git a/test/runTest/marks/universalTransition3.json b/test/runTest/marks/universalTransition3.json
new file mode 100644
index 0000000000..685dfe5f4d
--- /dev/null
+++ b/test/runTest/marks/universalTransition3.json
@@ -0,0 +1,10 @@
+[
+  {
+    "link": "https://github.com/apache/echarts/pull/20865",
+    "comment": "Sunburst use the first color for the \"Back Button\" after drilling down so it starts with the second theme color. v6 fixed this problem.",
+    "type": "Bug Fixing",
+    "markedBy": "Ovilia",
+    "lastVersion": "5.6.0",
+    "markTime": 1748598681455
+  }
+]
\ No newline at end of file
diff --git a/test/timeScale-value-bandwidth.html b/test/timeScale-value-bandwidth.html
new file mode 100644
index 0000000000..b8ad25242e
--- /dev/null
+++ b/test/timeScale-value-bandwidth.html
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/simpleRequire.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <!-- <script src="ut/lib/canteen.js"></script> -->
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+        </style>
+
+
+
+        <div id="main0"></div>
+
+
+        <div id="main1"></div>
+
+
+
+
+
+
+        <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+
+            option = {
+                xAxis: {
+                    type: 'value'
+                },
+                yAxis: {
+                    type: 'time'
+                },
+                series: [
+                    {
+                        id: 'Classic Cars',
+                        name: 'Classic Cars',
+                        data: [
+                            [366, 1041379200000],
+                            [442, 1072915200000],
+                            [159, 1104537600000]
+                        ],
+                        type: 'bar',
+                        stack: 'obs'
+                        },
+                        {
+                        id: 'Vintage Cars',
+                        name: 'Vintage Cars',
+                        data: [
+                            [221, 1041379200000],
+                            [284, 1072915200000],
+                            [102, 1104537600000]
+                        ],
+                        type: 'bar',
+                        stack: 'obs'
+                        },
+                        {
+                        id: 'Motorcycles',
+                        name: 'Motorcycles',
+                        data: [
+                            [109, 1041379200000],
+                            [164, 1072915200000],
+                            [58, 1104537600000]
+                        ],
+                        type: 'bar',
+                        stack: 'obs'
+                    }
+                ]
+                };
+
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Time axis and value axis',
+                    'without inverse'
+                ],
+                option: option
+                // height: 300,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+        });
+        </script>
+
+
+
+
+
+        <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+            option = {
+                xAxis: {
+                    type: 'value'
+                },
+                yAxis: {
+                    type: 'time',
+                    inverse: true
+                },
+                series: [
+                    {
+                        id: 'Classic Cars',
+                        name: 'Classic Cars',
+                        data: [
+                            [366, 1041379200000],
+                            [442, 1072915200000],
+                            [159, 1104537600000]
+                        ],
+                        type: 'bar',
+                        stack: 'obs'
+                        },
+                        {
+                        id: 'Vintage Cars',
+                        name: 'Vintage Cars',
+                        data: [
+                            [221, 1041379200000],
+                            [284, 1072915200000],
+                            [102, 1104537600000]
+                        ],
+                        type: 'bar',
+                        stack: 'obs'
+                        },
+                        {
+                        id: 'Motorcycles',
+                        name: 'Motorcycles',
+                        data: [
+                            [109, 1041379200000],
+                            [164, 1072915200000],
+                            [58, 1104537600000]
+                        ],
+                        type: 'bar',
+                        stack: 'obs'
+                    }
+                ]
+                };
+
+            var chart = testHelper.create(echarts, 'main1', {
+                title: [
+                    'Time axis and value axis',
+                    'with inverse'
+                ],
+                option: option
+                // height: 300,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+        });
+        </script>
+
+
+    </body>
+</html>
+
diff --git a/theme/v5.js b/theme/v5.js
index d82a380a51..2344d359a9 100644
--- a/theme/v5.js
+++ b/theme/v5.js
@@ -92,7 +92,7 @@
         // Series
 
         bar: {
-            barGap: '20%',
+            defaultBarGap: '20%',
             select: {
                 itemStyle: {
                     borderColor: '#212121',
@@ -133,8 +133,22 @@
                     color: '#63677A'
                 }
             },
+            axisTick: {
+                lineStyle: {
+                    color: '#63677A'
+                }
+            },
             axisLabel: {
-                borderColor: '#5470c6'
+                color: '#464646'
+            },
+            anchor: {
+                itemStyle: {
+                    color: '#fff',
+                    borderColor: '#5470c6'
+                }
+            },
+            title: {
+                color: '#464646',
             },
             detail: {
                 backgroundColor: 'rgba(0,0,0,0)',
@@ -183,6 +197,7 @@
         },
 
         map: {
+            defaultItemStyleColor: '#eee',
             label: {
                 color: '#000'
             },
@@ -297,9 +312,7 @@
                 color: 'rgba(210,219,238,0.3)',
                 borderColor: '#D2DBEE'
             },
-            outOfBrush: {
-                color: '#ddd'
-            }
+            defaultOutOfBrushColor: '#ddd'
         },
 
         calendar: {
@@ -376,6 +389,7 @@
         },
 
         geo: {
+            defaultItemStyleColor: '#eee',
             label: {
                 color: '#000'
             },

From acf99c7894a45c182519a43175f52b375a43a893 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Wed, 4 Jun 2025 10:23:13 +0800
Subject: [PATCH 23/27] chore: fix visual test

---
 test/runTest/client/client.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/runTest/client/client.js b/test/runTest/client/client.js
index 791ed65303..505da8f352 100644
--- a/test/runTest/client/client.js
+++ b/test/runTest/client/client.js
@@ -197,7 +197,7 @@ const app = new Vue({
 
         runConfig: Object.assign({
             sortBy: 'name',
-            actualVersion: 'local',
+            actualVersion: null,
             expectedVersion: null,
             expectedSource: 'release',
             actualSource: 'release',

From 21d4124f247fc9e5d6383f12c94b9bbb30dd8f1f Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Wed, 4 Jun 2025 11:09:47 +0800
Subject: [PATCH 24/27] fix: remove an unintentionally added test case

---
 test/timeScale-value-bandwidth.html | 188 ----------------------------
 1 file changed, 188 deletions(-)
 delete mode 100644 test/timeScale-value-bandwidth.html

diff --git a/test/timeScale-value-bandwidth.html b/test/timeScale-value-bandwidth.html
deleted file mode 100644
index b8ad25242e..0000000000
--- a/test/timeScale-value-bandwidth.html
+++ /dev/null
@@ -1,188 +0,0 @@
-<!DOCTYPE html>
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-   http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <script src="lib/simpleRequire.js"></script>
-        <script src="lib/config.js"></script>
-        <script src="lib/jquery.min.js"></script>
-        <script src="lib/facePrint.js"></script>
-        <script src="lib/testHelper.js"></script>
-        <!-- <script src="ut/lib/canteen.js"></script> -->
-        <link rel="stylesheet" href="lib/reset.css" />
-    </head>
-    <body>
-        <style>
-        </style>
-
-
-
-        <div id="main0"></div>
-
-
-        <div id="main1"></div>
-
-
-
-
-
-
-        <script>
-        require([
-            'echarts',
-            // 'map/js/china',
-            // './data/nutrients.json'
-        ], function (echarts) {
-            var option;
-
-            option = {
-                xAxis: {
-                    type: 'value'
-                },
-                yAxis: {
-                    type: 'time'
-                },
-                series: [
-                    {
-                        id: 'Classic Cars',
-                        name: 'Classic Cars',
-                        data: [
-                            [366, 1041379200000],
-                            [442, 1072915200000],
-                            [159, 1104537600000]
-                        ],
-                        type: 'bar',
-                        stack: 'obs'
-                        },
-                        {
-                        id: 'Vintage Cars',
-                        name: 'Vintage Cars',
-                        data: [
-                            [221, 1041379200000],
-                            [284, 1072915200000],
-                            [102, 1104537600000]
-                        ],
-                        type: 'bar',
-                        stack: 'obs'
-                        },
-                        {
-                        id: 'Motorcycles',
-                        name: 'Motorcycles',
-                        data: [
-                            [109, 1041379200000],
-                            [164, 1072915200000],
-                            [58, 1104537600000]
-                        ],
-                        type: 'bar',
-                        stack: 'obs'
-                    }
-                ]
-                };
-
-
-            var chart = testHelper.create(echarts, 'main0', {
-                title: [
-                    'Time axis and value axis',
-                    'without inverse'
-                ],
-                option: option
-                // height: 300,
-                // buttons: [{text: 'btn-txt', onclick: function () {}}],
-                // recordCanvas: true,
-            });
-        });
-        </script>
-
-
-
-
-
-        <script>
-        require([
-            'echarts',
-            // 'map/js/china',
-            // './data/nutrients.json'
-        ], function (echarts) {
-            var option;
-            option = {
-                xAxis: {
-                    type: 'value'
-                },
-                yAxis: {
-                    type: 'time',
-                    inverse: true
-                },
-                series: [
-                    {
-                        id: 'Classic Cars',
-                        name: 'Classic Cars',
-                        data: [
-                            [366, 1041379200000],
-                            [442, 1072915200000],
-                            [159, 1104537600000]
-                        ],
-                        type: 'bar',
-                        stack: 'obs'
-                        },
-                        {
-                        id: 'Vintage Cars',
-                        name: 'Vintage Cars',
-                        data: [
-                            [221, 1041379200000],
-                            [284, 1072915200000],
-                            [102, 1104537600000]
-                        ],
-                        type: 'bar',
-                        stack: 'obs'
-                        },
-                        {
-                        id: 'Motorcycles',
-                        name: 'Motorcycles',
-                        data: [
-                            [109, 1041379200000],
-                            [164, 1072915200000],
-                            [58, 1104537600000]
-                        ],
-                        type: 'bar',
-                        stack: 'obs'
-                    }
-                ]
-                };
-
-            var chart = testHelper.create(echarts, 'main1', {
-                title: [
-                    'Time axis and value axis',
-                    'with inverse'
-                ],
-                option: option
-                // height: 300,
-                // buttons: [{text: 'btn-txt', onclick: function () {}}],
-                // recordCanvas: true,
-            });
-        });
-        </script>
-
-
-    </body>
-</html>
-

From 72f92ba3d796b3b9d6f4741739cc4d7a57bad197 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Wed, 4 Jun 2025 14:18:02 +0800
Subject: [PATCH 25/27] chore(test): fix default actual source

---
 test/runTest/client/client.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/runTest/client/client.js b/test/runTest/client/client.js
index 505da8f352..caf496d557 100644
--- a/test/runTest/client/client.js
+++ b/test/runTest/client/client.js
@@ -120,12 +120,12 @@ function processTestsData(tests, oldTestsData, expectedSource, expectedVersion)
             test.expectedSource = oldTestsData[idx].expectedSource;
             test.actualSource = oldTestsData[idx].actualSource;
 
-            // 如果旧数据有 markedAsExpected 而新数据没有，保留旧数据的 markedAsExpected
+            // If old data has markedAsExpected but new data doesn't, keep the old data.
             if (oldTestsData[idx].markedAsExpected && !test.markedAsExpected) {
                 test.markedAsExpected = oldTestsData[idx].markedAsExpected;
             }
 
-            // 确保 markedAsExpected 为空时设置为 null 而非空数组
+            // Ensure markedAsExpected is null when it's empty
             if (test.markedAsExpected && Array.isArray(test.markedAsExpected) && test.markedAsExpected.length === 0) {
                 test.markedAsExpected = null;
             }
@@ -200,7 +200,7 @@ const app = new Vue({
             actualVersion: null,
             expectedVersion: null,
             expectedSource: 'release',
-            actualSource: 'release',
+            actualSource: 'local',
             renderer: 'canvas',
             useCoarsePointer: 'auto',
             threads: 4,

From 3c33ba59823321baff100ef7d6a750bd30f4ea88 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Wed, 4 Jun 2025 15:24:21 +0800
Subject: [PATCH 26/27] chore: remove unintentionally added files

---
 src/theme/rainbow.ts | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 src/theme/rainbow.ts

diff --git a/src/theme/rainbow.ts b/src/theme/rainbow.ts
deleted file mode 100644
index e69de29bb2..0000000000

From a1d61c2234bfa415f937020f80967ab6957d7cc6 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Wed, 4 Jun 2025 15:26:45 +0800
Subject: [PATCH 27/27] chore: remove unintentionally added import

---
 src/component/tooltip/TooltipView.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts
index d2682a479f..2d259799ac 100644
--- a/src/component/tooltip/TooltipView.ts
+++ b/src/component/tooltip/TooltipView.ts
@@ -57,7 +57,6 @@ import { normalizeTooltipFormatResult } from '../../model/mixin/dataFormat';
 import { createTooltipMarkup, buildTooltipMarkup, TooltipMarkupStyleCreator } from './tooltipMarkup';
 import { findEventDispatcher } from '../../util/event';
 import { clear, createOrUpdate } from '../../util/throttle';
-import tokens from '../../visual/tokens';
 
 const proxyRect = new Rect({
     shape: { x: -1, y: -1, width: 2, height: 2 }