feat(theme): new theme for ECharts 6.0

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';
@@ -155,7 +156,8 @@ class BarSeriesModel extends BaseBarSeriesModel<BarSeriesOption> {
 
         select: {
             itemStyle: {
-                borderColor: '#212121'
+                borderColor: tokens.color.primary,
+                borderWidth: 2
             }
         },
 

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%'
     };
 }
 

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
             }
         }
     });

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
             }
         },
 

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

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']
@@ -154,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,
 
@@ -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
             }
         }
     };

src/chart/funnel/FunnelView.ts

@@ -128,12 +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,
-            insideStroke: visualColor,
-            // insideFill: 'auto',
-            outsideFill: visualColor
+            insideStroke: overrideColor,
+            outsideFill: overrideColor
         });
 
         const linePoints = labelLayout.linePoints;

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.neutral10]],
                 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,23 +298,23 @@ 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.neutral40,
             width: 100,
             height: null, // self-adaption
             padding: [5, 10],
             // x, y，单位px
             offsetCenter: [0, '40%'],
             // formatter: null,
             // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-            color: '#464646',
+            color: tokens.color.primary,
             fontSize: 30,
             fontWeight: 'bold',
             lineHeight: 30,

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
             }
         },
 

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
         }
     };

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();

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
             }
         }
     };

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
         };
     }

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;
 
@@ -297,7 +298,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)

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
         };
     }