From 76ef69e7b48514177d854452bef271871f49d8e8 Mon Sep 17 00:00:00 2001 From: Howard Zhang Date: Thu, 18 Jan 2024 21:49:13 +0800 Subject: [PATCH] feat: update theme concept docs --- .../Theme/Theme_Concept_and_Design_Rules.md | 2850 +++++++++++++---- .../Theme/Theme_Concept_and_Design_Rules.md | 2850 +++++++++++++---- 2 files changed, 4406 insertions(+), 1294 deletions(-) diff --git a/docs/assets/guide/en/tutorial_docs/Theme/Theme_Concept_and_Design_Rules.md b/docs/assets/guide/en/tutorial_docs/Theme/Theme_Concept_and_Design_Rules.md index 40e8722a66..2dcd2d6af0 100644 --- a/docs/assets/guide/en/tutorial_docs/Theme/Theme_Concept_and_Design_Rules.md +++ b/docs/assets/guide/en/tutorial_docs/Theme/Theme_Concept_and_Design_Rules.md @@ -52,22 +52,19 @@ VChart 默认主题定义了一套语义色板，用于描述可以复用的颜
分类
序号
-
token（默认主题的语义色板）
-
描述、应用范围和默认色值
+
token、描述、应用范围和默认色值
实际 case（截图来自默认主题真实图表）
图表层级样式
1
-
backgroundColor
- - +
backgroundColor
背景色
用于图表背景、图元描边。
-
-
light
+
+
light
-
#ffffff
+
色值：#ffffff
-
-
dark
+
+
dark
-
#202226
+
色值：#202226
+
+
+
+
+
semiDesignLight
+
+
色值：#ffffff
+
CSS变量：--semi-color-bg-0
+
+
+
semiDesignDark
+
+
色值：#16161a
+
CSS变量：--semi-color-bg-0
+
+
+
+
+
arcoDesignLight
+
+
色值：#ffffff
+
CSS变量：--color-bg-1
+
+
+
arcoDesignDark
+
+
色值：#17171a
+
CSS变量：--color-bg-1
@@ -121,14 +178,12 @@ VChart 默认主题定义了一套语义色板，用于描述可以复用的颜
2
-
borderColor
- - +
borderColor
图表边框色
用于图表边框（图表内暂时没有实际应用，仅有指导意义）。
-
-
light
+
+
light
-
#e3e5e8
+
色值：#e3e5e8
-
-
dark
+
+
dark
-
#404349
+
色值：#404349
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,0.08)
+
CSS变量：--semi-color-border
+
+
+
semiDesignDark
+
+
色值：rgba(255,255,255,0.08)
+
CSS变量：--semi-color-border
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(229,230,235,1)
+
CSS变量：--color-border
+
+
+
arcoDesignDark
+
+
色值：#333335
+
CSS变量：--color-border
@@ -167,14 +282,12 @@ VChart 默认主题定义了一套语义色板，用于描述可以复用的颜
公共
3
-
shadowColor
- - +
shadowColor
默认阴影颜色
用于浮层、滑块等带高度属性的图元阴影。
-
-
light
+
+
light
-
rgba(33,37,44,0.1)
+
色值：rgba(33,37,44,0.1)
-
-
dark
+
+
dark
-
rgba(0,0,0,0.1)
+
色值：rgba(0,0,0,0.1)
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(0,0,0,0.1)
+
+
+
semiDesignDark
+
+
色值：rgba(0,0,0,0.25)
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(0,0,0,0.1)
+
+
+
arcoDesignDark
+
+
色值：rgba(0,0,0,0.1)
@@ -223,14 +392,12 @@ VChart 默认主题定义了一套语义色板，用于描述可以复用的颜
4
-
hoverBackgroundColor
- - +
hoverBackgroundColor
鼠标 Hover 背景颜色
用于元素在鼠标 hover 状态的背景颜色。
-
-
light
+
+
light
-
#f1f2f5
+
色值：#f1f2f5
-
-
dark
+
+
dark
-
#404349
+
色值：#404349
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(46,50,56,0.05)
+
CSS变量：--semi-color-fill-0
+
+
+
semiDesignDark
+
+
色值：rgba(255,255,255,0.12)
+
CSS变量：--semi-color-fill-0
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(229,230,235,1)
+
CSS变量：--color-secondary-hover
+
+
+
arcoDesignDark
+
+
色值：rgba(197,197,197,0.16)
+
CSS变量：--color-secondary-hover
@@ -269,14 +496,12 @@ VChart 默认主题定义了一套语义色板，用于描述可以复用的颜
5
-
sliderRailColor
- - +
sliderRailColor
滑块类组件背景条填充颜色
用于滑块类组件背景条的填充颜色。
-
-
light
+
+
light
-
#f1f3f4
+
色值：#f1f3f4
-
-
dark
+
+
dark
-
#404349
+
色值：#404349
- - -
缩略轴背景区域颜色
-
- light - dark -
-
播放器未播放轨道颜色
-
- light - dark -
-
颜色图例轨道颜色
-
- light - dark -
-
尺寸图例轨道颜色
-
- light - dark -
- - - - -
6
- -
sliderHandleColor
- - -
滑块类组件滑块填充颜色
-
用于滑块类组件滑块的填充颜色。
-
-
light
+
+
semiDesignLight
-
#ffffff
+
色值：rgba(46,50,56,0.05)
+
CSS变量：--semi-color-fill-0
-
-
dark
+
+
semiDesignDark
-
#202226
+
色值：rgba(255,255,255,0.12)
+
CSS变量：--semi-color-fill-0
- - -
缩略轴滑块填充颜色
-
- light - dark -
-
尺寸图例滑块填充颜色
-
- light - dark -
- - - - -
7
- -
sliderTrackColor
- - -
滑块类组件已选范围填充颜色
-
用于滑块类组件已选范围的填充颜色。
-
-
light
+
+
arcoDesignLight
-
#0040ff
+
色值：rgba(229,230,235,1)
+
CSS变量：--color-fill-3
-
-
dark
+
+
arcoDesignDark
-
#4284FF
+
色值：hsla(0,0%,100%,0.12)
+
CSS变量：--color-fill-3
-
缩略轴选择区域颜色
+
缩略轴背景区域颜色
light dark
-
播放器已播放轨道颜色
+
播放器未播放轨道颜色
light dark
-
尺寸图例选中部分轨道颜色
+
颜色图例轨道颜色
+
+ light + dark +
+
尺寸图例轨道颜色
light dark @@ -435,16 +613,14 @@ VChart 默认主题定义了一套语义色板，用于描述可以复用的颜 -
8
- -
popupBackgroundColor
- +
6
-
浮层背景区域颜色
-
用于浮层的背景区域颜色。
+
sliderHandleColor
+
滑块类组件滑块填充颜色
+
用于滑块类组件滑块的填充颜色。
-
-
light
+
+
light
-
#ffffff
+
色值：#ffffff
-
-
dark
+
+
dark
-
#404349
+
色值：#202226
- - -
提示信息背景框颜色
-
- light - dark -
-
poptip 背景框颜色
-
- light - dark +
+
+
semiDesignLight
+
+
色值：rgba(255,255,255,1)
+
CSS变量：--semi-white
+
+
+
semiDesignDark
+
+
色值：#e4e7f5
+
CSS变量：--semi-white
+
- - - -
字体颜色
-
9
- -
primaryFontColor
- - -
主要字色
-
颜色和背景色差异最大的字色，用于最显要的信息展示。
-
-
light
+
+
arcoDesignLight
-
#21252c
+
色值：#ffffff
+
CSS变量：--color-bg-2
-
-
dark
+
+
arcoDesignDark
-
#fdfdfd
+
色值：#232324
+
CSS变量：--color-bg-2
-
图表主标题字色
-
- light - dark -
-
指标卡主要字色
-
- light - dark -
-
poptip 标题字色
-
- light - dark -
-
poptip 内容字色
-
- light - dark -
-
提示信息标题字色
-
- light - dark -
-
Mark-line 标签字色
-
- light - dark -
-
Mark-area 标签字色
+
缩略轴滑块填充颜色
- light - dark + light + dark
-
图例标题字色
+
尺寸图例滑块填充颜色
- light - dark + light + dark
-
10
- -
secondaryFontColor
- +
7
-
次要字色
-
颜色和背景色差异较小的字色，用于次要的信息展示。
+
sliderTrackColor
+
滑块类组件已选范围填充颜色
+
用于滑块类组件已选范围的填充颜色。
-
-
light
+
+
light
-
#606773
+
色值：#0040ff
-
-
dark
+
+
dark
-
#888c93
+
色值：#4284FF
- - -
轴标题字色
-
- light - dark -
-
图例标签字色
-
- light - dark -
-
提示信息数据 key 字色
-
- light - dark -
-
缩略轴标签字色
-
- light - dark +
+
+
semiDesignLight
+
+
色值：rgba(0,100,250,1)
+
CSS变量：--semi-color-primary
+
+
+
semiDesignDark
+
+
色值：rgba(84,169,255,1)
+
CSS变量：--semi-color-primary
+
- - - - -
11
- -
tertiaryFontColor
- - -
第三字色
-
颜色和背景色差异更小的字色，用于更次要的信息展示。
-
-
light
+
+
arcoDesignLight
-
#89909d
+
色值：rgba(22,93,255,1)
+
CSS变量：--primary-6
-
-
dark
+
+
arcoDesignDark
-
#bbbdc3
+
色值：rgba(60,126,255,1)
+
CSS变量：--primary-6
-
图表副标题字色
+
缩略轴选择区域颜色
- light - dark + light + dark
-
指标卡次要字色
+
播放器已播放轨道颜色
- light - dark + light + dark +
+
尺寸图例选中部分轨道颜色
+
+ light + dark
-
12
- -
axisLabelFontColor
- +
8
-
轴标签字色
-
用于轴标签字色，默认与第三字色颜色相同。
+
popupBackgroundColor
+
浮层背景区域颜色
+
用于浮层的背景区域颜色。
-
-
light
+
+
light
-
#89909d
+
色值：#ffffff
-
-
dark
+
+
dark
-
#bbbdc3
+
色值：#404349
- - -
轴标签字色
-
- light - dark -
- - - - -
13
- -
disableFontColor
- - -
禁用字色
-
用于禁用状态字色或非激活态字色。
-
-
light
+
+
semiDesignLight
-
#bcc1cb
+
色值：rgba(255,255,255,1)
+
CSS变量：--semi-color-bg-3
-
-
dark
+
+
semiDesignDark
-
#55595f
+
色值：#43444a
+
CSS变量：--semi-color-bg-3
- - -
非激活态图例标签字色
-
- light - dark -
- - - - -
14
- -
axisMarkerFontColor
- - -
轴高亮标记字色
-
用于轴标签上的高亮标记字色。
-
-
light
+
+
arcoDesignLight
-
#ffffff
+
色值：rgba(255,255,255,1)
+
CSS变量：--color-bg-popup
-
-
dark
+
+
arcoDesignDark
-
#202226
+
色值：#373739
+
CSS变量：--color-bg-popup
-
十字准星标签字色
+
提示信息背景框颜色
light dark
+
poptip 背景框颜色
+
+ light + dark +
-
轴样式
-
15
- -
axisGridColor
- +
字体颜色
+
9
-
轴网格线颜色
-
用于轴网格线颜色以及同级的颜色。
+
primaryFontColor
+
主要字色
+
颜色和背景色差异最大的字色，用于最显要的信息展示。
+
+
+
light
+
+
色值：#21252c
+
+
+
dark
+
+
色值：#fdfdfd
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,1)
+
CSS变量：--semi-color-text-0
+
+
+
semiDesignDark
+
+
色值：rgba(249,249,249,1)
+
CSS变量：--semi-color-text-0
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(29,33,41,1)
+
CSS变量：--color-text-1
+
+
+
arcoDesignDark
+
+
色值：hsla(0,0%,100%,0.9)
+
CSS变量：--color-text-1
+
+
+ + +
图表主标题字色
+
+ light + dark +
+
指标卡主要字色
+
+ light + dark +
+
poptip 标题字色
+
+ light + dark +
+
poptip 内容字色
+
+ light + dark +
+
提示信息标题字色
+
+ light + dark +
+
Mark-line 标签字色
+
+ light + dark +
+
Mark-area 标签字色
+
+ light + dark +
+
图例标题字色
+
+ light + dark +
+ + + + +
10
+ +
secondaryFontColor
+
次要字色
+
颜色和背景色差异较小的字色，用于次要的信息展示。
+
+
+
light
+
+
色值：#606773
+
+
+
dark
+
+
色值：#888c93
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,0.8)
+
CSS变量：--semi-color-text-1
+
+
+
semiDesignDark
+
+
色值：rgba(249,249,249,0.8)
+
CSS变量：--semi-color-text-1
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(78,89,105,1)
+
CSS变量：--color-text-2
+
+
+
arcoDesignDark
+
+
色值：hsla(0,0%,100%,0.7)
+
CSS变量：--color-text-2
+
+
+ + +
轴标题字色
+
+ light + dark +
+
图例标签字色
+
+ light + dark +
+
提示信息数据 key 字色
+
+ light + dark +
+
缩略轴标签字色
+
+ light + dark +
+ + + + +
11
+ +
tertiaryFontColor
+
第三字色
+
颜色和背景色差异更小的字色，用于更次要的信息展示。
+
+
+
light
+
+
色值：#89909d
+
+
+
dark
+
+
色值：#bbbdc3
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,0.62)
+
CSS变量：--semi-color-text-2
+
+
+
semiDesignDark
+
+
色值：rgba(249,249,249,0.6)
+
CSS变量：--semi-color-text-2
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(134,144,156,1)
+
CSS变量：--color-text-3
+
+
+
arcoDesignDark
+
+
色值：hsla(0,0%,100%,0.5)
+
CSS变量：--color-text-3
+
+
+ + +
图表副标题字色
+
+ light + dark +
+
指标卡次要字色
+
+ light + dark +
+ + + + +
12
+ +
axisLabelFontColor
+
轴标签字色
+
用于轴标签字色，默认与第三字色颜色相同。
+
+
+
light
+
+
色值：#89909d
+
+
+
dark
+
+
色值：#bbbdc3
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,0.62)
+
CSS变量：--semi-color-text-2
+
+
+
semiDesignDark
+
+
色值：rgba(249,249,249,0.6)
+
CSS变量：--semi-color-text-2
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(134,144,156,1)
+
CSS变量：--color-text-3
+
+
+
arcoDesignDark
+
+
色值：hsla(0,0%,100%,0.5)
+
CSS变量：--color-text-3
+
+
+ + +
轴标签字色
+
+ light + dark +
+ + + + +
13
+ +
disableFontColor
+
禁用字色
+
用于禁用状态字色或非激活态字色。
+
+
+
light
+
+
色值：#bcc1cb
+
+
+
dark
+
+
色值：#55595f
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,0.35)
+
CSS变量：--semi-color-disabled-text
+
+
+
semiDesignDark
+
+
色值：rgba(249,249,249,0.35)
+
CSS变量：--semi-color-disabled-text
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(201,205,212,1)
+
CSS变量：--color-text-4
+
+
+
arcoDesignDark
+
+
色值：hsla(0,0%,100%,0.3)
+
CSS变量：--color-text-4
+
+
+ + +
非激活态图例标签字色
+
+ light + dark +
+ + + + +
14
+ +
axisMarkerFontColor
+
轴高亮标记字色
+
用于轴标签上的高亮标记字色。
+
+
+
light
+
+
色值：#ffffff
+
+
+
dark
+
+
色值：#202226
+
+
+
+
+
semiDesignLight
+
+
色值：#ffffff
+
CSS变量：--semi-color-bg-0
+
+
+
semiDesignDark
+
+
色值：#16161a
+
CSS变量：--semi-color-bg-0
+
+
+
+
+
arcoDesignLight
+
+
色值：#ffffff
+
CSS变量：--color-bg-1
+
+
+
arcoDesignDark
+
+
色值：#17171a
+
CSS变量：--color-bg-1
+
+
+ + +
十字准星标签字色
+
+ light + dark +
+ + + +
轴样式
+
15
+ +
axisGridColor
+
轴网格线颜色
+
用于轴网格线颜色以及同级的颜色。
+
+
+
light
+
+
色值：#f1f2f5
+
+
+
dark
+
+
色值：#404349
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,0.08)
+
CSS变量：--semi-color-border
+
+
+
semiDesignDark
+
+
色值：rgba(255,255,255,0.08)
+
CSS变量：--semi-color-border
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(229,230,235,1)
+
CSS变量：--color-border
+
+
+
arcoDesignDark
+
+
色值：#333335
+
CSS变量：--color-border
+
+
+ + +
轴网格线颜色
+
+ light + dark +
+
十字准星矩形颜色
+
+ light + dark +
+ + + + +
16
+ +
axisDomainColor
+
轴线颜色
+
用于轴线颜色以及同级的颜色。
+
+
+
light
+
+
色值：#d9dde4
+
+
+
dark
+
+
色值：#4b4f54
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,0.15)
+
CSS变量：--semi-grey-9
+
+
+
semiDesignDark
+
+
色值：rgba(255,255,255,0.08)
+
CSS变量：--semi-color-border
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(229,230,235,1)
+
CSS变量：--color-neutral-3
+
+
+
arcoDesignDark
+
+
色值：rgba(72,72,73,1)
+
CSS变量：--color-neutral-3
+
+
+ + +
轴线颜色
+
+ light + dark +
+ + + +
缩略轴
+
17
+ +
dataZoomHandlerStrokeColor
+
缩略轴滑块描边颜色
+
用于缩略轴滑块描边颜色以及同级的颜色。
+
+
+
light
+
+
色值：#aeb5be
+
+
+
dark
+
+
色值：#888c93
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(46,50,56,0.13)
+
CSS变量：--semi-color-fill-2
+
+
+
semiDesignDark
+
+
色值：rgba(46,50,56,0.13)
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(169,174,184,1)
+
CSS变量：--color-neutral-5
+
+
+
arcoDesignDark
+
+
色值：rgba(120,120,122,1)
+
CSS变量：--color-neutral-5
+
+
+ + +
缩略轴滑块描边颜色
+
+ light + dark +
+ + + + +
18
+ +
dataZoomChartColor
+
缩略轴图表区域颜色
+
用于缩略轴预览图表的颜色以及同级的颜色。
+
+
+
light
+
+
色值：#c9ced8
+
+
+
dark
+
+
色值：#55595F
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(46,50,56,0.09)
+
CSS变量：--semi-color-fill-1
+
+
+
semiDesignDark
+
+
色值：rgba(255,255,255,0.16)
+
CSS变量：--semi-color-fill-1
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(201,205,212,1)
+
CSS变量：--color-fill-4
+
+
+
arcoDesignDark
+
+
色值：hsla(0,0%,100%,0.16)
+
CSS变量：--color-fill-4
+
+
+ + +
缩略轴图表区域颜色
+
+ light + dark +
+
尺寸图例尺寸标识颜色
+
+ light + dark +
+ + + +
播放器
+
19
+ +
playerControllerColor
+
播放器控制器填充颜色
+
用于播放器控制器的填充颜色。
+
+
+
light
+
+
色值：#0040ff
+
+
+
dark
+
+
色值：#0040ff
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(0,100,250,1)
+
CSS变量：--semi-color-primary
+
+
+
semiDesignDark
+
+
色值：rgba(84,169,255,1)
+
CSS变量：--semi-color-primary
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(22,93,255,1)
+
CSS变量：--primary-6
+
+
+
arcoDesignDark
+
+
色值：rgba(60,126,255,1)
+
CSS变量：--primary-6
+
+
+ + +
播放器按钮颜色
+
+ light + dark +
+
播放器滑块颜色
+
+ light + dark +
+ + + +
滚动条
+
20
+ +
scrollBarSliderColor
+
滚动条滑块颜色
+
用于滚动条滑块的填充颜色。
+
+
+
light
+
+
色值：rgba(0,0,0,0.3)
+
+
+
dark
+
+
色值：rgba(255,255,255,0.3)
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(0,0,0,0.3)
+
+
+
semiDesignDark
+
+
色值：rgba(255,255,255,0.3)
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(0,0,0,0.3)
+
+
+
arcoDesignDark
+
+
色值：rgba(255,255,255,0.3)
+
+
+ + +
滚动条滑块颜色
+
+ light + dark +
+ + + +
标注
+
21
+ +
axisMarkerBackgroundColor
+
轴高亮标记背景色
+
用于轴标签上的高亮标记背景色。
+
+
+
light
+
+
色值：#21252c
+
+
+
dark
+
+
色值：#fdfdfd
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,1)
+
CSS变量：--semi-color-text-0
+
+
+
semiDesignDark
+
+
色值：rgba(249,249,249,1)
+
CSS变量：--semi-color-text-0
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(29,33,41,1)
+
CSS变量：--color-text-1
+
+
+
arcoDesignDark
+
+
色值：hsla(0,0%,100%,0.9)
+
CSS变量：--color-text-1
+
+
+ + +
十字准星标签背景色
+
+ light + dark +
+ + + + +
22
+ +
markLabelBackgroundColor
+
标注标签背景颜色
+
用于普通标注标签的背景颜色。
+
+
+
light
+
+
色值：#f1f2f5
+
+
+
dark
+
+
色值：#404349
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,0.08)
+
CSS变量：--semi-color-border
+
+
+
semiDesignDark
+
+
色值：rgba(255,255,255,0.08)
+
CSS变量：--semi-color-border
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(229,230,235,1)
+
CSS变量：--color-border
+
+
+
arcoDesignDark
+
+
色值：#333335
+
CSS变量：--color-border
+
+
+ + +
Mark-line 标签背景色
+
+ light + dark +
+
Mark-area 标签背景色
+
+ light + dark +
+ + + + +
23
+ +
markLineStrokeColor
+
标注线颜色
+
用于普通标注线的颜色。
+
+
+
light
+
+
色值：#606773
+
+
+
dark
+
+
色值：#888c93
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,0.8)
+
CSS变量：--semi-color-text-1
+
+
+
semiDesignDark
+
+
色值：rgba(249,249,249,0.8)
+
CSS变量：--semi-color-text-1
+
+
-
-
light
+
+
arcoDesignLight
-
#f1f2f5
+
色值：rgba(78,89,105,1)
+
CSS变量：--color-text-2
-
-
dark
+
+
arcoDesignDark
-
#404349
+
色值：hsla(0,0%,100%,0.7)
+
CSS变量：--color-text-2
-
轴网格线颜色
+
Mark-line 线条颜色
- light - dark + light + dark
-
十字准星矩形颜色
+
十字准星线形颜色
light dark
+
Mark-point 线条颜色
+
+ light + dark +
- -
16
- -
axisDomainColor
- +
功能色
+
24
-
轴线颜色
-
用于轴线颜色以及同级的颜色。
+
dangerColor
+
危险色
+
危险、错误、失败、盈利、上升、女性。
-
-
light
+
+
light
-
#d9dde4
+
色值：#e33232
-
-
dark
+
+
dark
-
#4b4f54
+
色值：#eb4b4b
- - -
轴线颜色
-
- light - dark -
- - - -
缩略轴
-
17
- -
dataZoomHandlerStrokeColor
- - -
缩略轴滑块描边颜色
-
用于缩略轴滑块描边颜色以及同级的颜色。
-
-
light
+
+
semiDesignLight
-
#aeb5be
+
色值：rgba(249,57,32,1)
+
CSS变量：--semi-color-danger
-
-
dark
+
+
semiDesignDark
-
#888c93
+
色值：rgba(252,114,90,1)
+
CSS变量：--semi-color-danger
- - -
缩略轴滑块描边颜色
-
- light - dark -
- - - - -
18
- -
dataZoomChartColor
- - -
缩略轴图表区域颜色
-
用于缩略轴预览图表的颜色以及同级的颜色。
-
-
light
+
+
arcoDesignLight
-
#c9ced8
+
色值：rgba(245,63,63,1)
+
CSS变量：--danger-6
-
-
dark
+
+
arcoDesignDark
-
#55595F
+
色值：rgba(247,105,101,1)
+
CSS变量：--danger-6
- -
缩略轴图表区域颜色
-
- light - dark -
-
尺寸图例尺寸标识颜色
-
- light - dark -
- +
无内置应用场景
-
播放器
-
19
- -
playerControllerColor
- + +
25
-
播放器控制器填充颜色
-
用于播放器控制器的填充颜色。
+
warningColor
+
警告色
+
预警、警示。
-
-
light
+
+
light
-
#0040ff
+
色值：#ffc528
-
-
dark
+
+
dark
-
#0040ff
+
色值：#f0bd30
- - -
播放器按钮颜色
-
- light - dark -
-
播放器滑块颜色
-
- light - dark -
- - - -
滚动条
-
20
- -
scrollBarSliderColor
- - -
滚动条滑块颜色
-
用于滚动条滑块的填充颜色。
-
-
light
+
+
semiDesignLight
-
rgba(0,0,0,0.3)
+
色值：rgba(252,136,0,1)
+
CSS变量：--semi-color-warning
-
-
dark
+
+
semiDesignDark
-
rgba(255,255,255,0.3)
+
色值：rgba(255,174,67,1)
+
CSS变量：--semi-color-warning
- - -
滚动条滑块颜色
-
- light - dark -
- - - -
标注
-
21
- -
axisMarkerBackgroundColor
- - -
轴高亮标记背景色
-
用于轴标签上的高亮标记背景色。
-
-
light
+
+
arcoDesignLight
-
#21252c
+
色值：rgba(255,125,0,1)
+
CSS变量：--warning-6
-
-
dark
+
+
arcoDesignDark
-
#fdfdfd
+
色值：rgba(255,150,38,1)
+
CSS变量：--warning-6
- -
十字准星标签背景色
-
- light - dark -
- +
无内置应用场景
-
22
- -
markLabelBackgroundColor
- +
26
-
标注标签背景颜色
-
用于普通标注标签的背景颜色。
+
successColor
+
成功色
+
安全、正确、成功、亏损、下降。
-
-
light
+
+
light
-
#f1f2f5
+
色值：#07a35a
-
-
dark
+
+
dark
-
#404349
+
色值：#14b267
- - -
Mark-line 标签背景色
-
- light - dark -
-
Mark-area 标签背景色
-
- light - dark -
- - - - -
23
- -
markLineStrokeColor
- - -
标注线颜色
-
用于普通标注线的颜色。
-
-
light
+
+
semiDesignLight
-
#606773
+
色值：rgba(59,179,70,1)
+
CSS变量：--semi-color-success
-
-
dark
+
+
semiDesignDark
-
#888c93
+
色值：rgba(93,194,100,1)
+
CSS变量：--semi-color-success
- - -
Mark-line 线条颜色
-
- light - dark -
-
十字准星线形颜色
-
- light - dark -
-
Mark-point 线条颜色
-
- light - dark -
- - - -
功能色
-
24
- -
dangerColor
- - -
危险色
-
危险、错误、失败、盈利、上升、女性。
-
-
light
+
+
arcoDesignLight
-
#e33232
+
色值：rgba(0,180,42,1)
+
CSS变量：--success-6
-
-
dark
+
+
arcoDesignDark
-
#eb4b4b
+
色值：rgba(39,195,70,1)
+
CSS变量：--success-6
@@ -1301,119 +2879,97 @@ VChart 默认主题定义了一套语义色板，用于描述可以复用的颜 -
25
- -
warningColor
- +
27
-
警告色
-
预警、警示。
+
infoColor
+
信息色
+
正常、寒冷、男性。
-
-
light
+
+
light
-
#ffc528
+
色值：#3073f2
-
-
dark
+
+
dark
-
#f0bd30
+
色值：#4284ff
- -
无内置应用场景
- - - -
26
- -
successColor
- - -
成功色
-
安全、正确、成功、亏损、下降。
-
-
light
+
+
semiDesignLight
-
#07a35a
+
色值：rgba(0,100,250,1)
+
CSS变量：--semi-color-info
-
-
dark
+
+
semiDesignDark
-
#14b267
+
色值：rgba(84,169,255,1)
+
CSS变量：--semi-color-info
- -
无内置应用场景
- - - -
27
- -
infoColor
- - -
信息色
-
正常、寒冷、男性。
-
-
light
+
+
arcoDesignLight
-
#3073f2
+
色值：rgba(22,93,255,1)
+
CSS变量：--arcoblue-6
-
-
dark
+
+
arcoDesignDark
-
#4284ff
+
色值：rgba(60,126,255,1)
+
CSS变量：--arcoblue-6
@@ -1636,7 +3192,7 @@ VChart 主题模块支持自定义语义色板，同时可以定义新的 token
无
-
20 20 20 20
+
20 20 20 20
@@ -1653,7 +3209,7 @@ VChart 主题模块支持自定义语义色板，同时可以定义新的 token
top，左对齐
-
4 0 20 0
+
4 0 20 0
@@ -1665,7 +3221,7 @@ VChart 主题模块支持自定义语义色板，同时可以定义新的 token
bottom，居中对齐
-
16 24 16 24
+
16 24 16 24
@@ -1677,7 +3233,7 @@ VChart 主题模块支持自定义语义色板，同时可以定义新的 token
跟随轴
-
12 0 12 0
+
12 0 12 0
@@ -1694,7 +3250,7 @@ VChart 主题模块支持自定义语义色板，同时可以定义新的 token
right，竖直居中对齐
-
16 24 16 24
+
16 24 16 24
@@ -1711,7 +3267,7 @@ VChart 主题模块支持自定义语义色板，同时可以定义新的 token
right，竖直居中对齐
-
16 24 16 24
+
16 24 16 24
@@ -1728,7 +3284,7 @@ VChart 主题模块支持自定义语义色板，同时可以定义新的 token
bottom，左对齐
-
20 0 20 0
+
20 0 20 0
diff --git a/docs/assets/guide/zh/tutorial_docs/Theme/Theme_Concept_and_Design_Rules.md b/docs/assets/guide/zh/tutorial_docs/Theme/Theme_Concept_and_Design_Rules.md index c0071bcb55..874fe8adf3 100644 --- a/docs/assets/guide/zh/tutorial_docs/Theme/Theme_Concept_and_Design_Rules.md +++ b/docs/assets/guide/zh/tutorial_docs/Theme/Theme_Concept_and_Design_Rules.md @@ -50,22 +50,19 @@ VChart 默认主题定义了一套语义色板，用于描述可以复用的颜
分类
序号
-
token（默认主题的语义色板）
-
描述、应用范围和默认色值
+
token、描述、应用范围和默认色值
实际 case（截图来自默认主题真实图表）
图表层级样式
1
-
backgroundColor
- - +
backgroundColor
背景色
用于图表背景、图元描边。
-
-
light
+
+
light
-
#ffffff
+
色值：#ffffff
-
-
dark
+
+
dark
-
#202226
+
色值：#202226
+
+
+
+
+
semiDesignLight
+
+
色值：#ffffff
+
CSS变量：--semi-color-bg-0
+
+
+
semiDesignDark
+
+
色值：#16161a
+
CSS变量：--semi-color-bg-0
+
+
+
+
+
arcoDesignLight
+
+
色值：#ffffff
+
CSS变量：--color-bg-1
+
+
+
arcoDesignDark
+
+
色值：#17171a
+
CSS变量：--color-bg-1
@@ -119,14 +176,12 @@ VChart 默认主题定义了一套语义色板，用于描述可以复用的颜
2
-
borderColor
- - +
borderColor
图表边框色
用于图表边框（图表内暂时没有实际应用，仅有指导意义）。
-
-
light
+
+
light
-
#e3e5e8
+
色值：#e3e5e8
-
-
dark
+
+
dark
-
#404349
+
色值：#404349
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,0.08)
+
CSS变量：--semi-color-border
+
+
+
semiDesignDark
+
+
色值：rgba(255,255,255,0.08)
+
CSS变量：--semi-color-border
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(229,230,235,1)
+
CSS变量：--color-border
+
+
+
arcoDesignDark
+
+
色值：#333335
+
CSS变量：--color-border
@@ -165,14 +280,12 @@ VChart 默认主题定义了一套语义色板，用于描述可以复用的颜
公共
3
-
shadowColor
- - +
shadowColor
默认阴影颜色
用于浮层、滑块等带高度属性的图元阴影。
-
-
light
+
+
light
-
rgba(33,37,44,0.1)
+
色值：rgba(33,37,44,0.1)
-
-
dark
+
+
dark
-
rgba(0,0,0,0.1)
+
色值：rgba(0,0,0,0.1)
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(0,0,0,0.1)
+
+
+
semiDesignDark
+
+
色值：rgba(0,0,0,0.25)
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(0,0,0,0.1)
+
+
+
arcoDesignDark
+
+
色值：rgba(0,0,0,0.1)
@@ -221,14 +390,12 @@ VChart 默认主题定义了一套语义色板，用于描述可以复用的颜
4
-
hoverBackgroundColor
- - +
hoverBackgroundColor
鼠标 Hover 背景颜色
用于元素在鼠标 hover 状态的背景颜色。
-
-
light
+
+
light
-
#f1f2f5
+
色值：#f1f2f5
-
-
dark
+
+
dark
-
#404349
+
色值：#404349
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(46,50,56,0.05)
+
CSS变量：--semi-color-fill-0
+
+
+
semiDesignDark
+
+
色值：rgba(255,255,255,0.12)
+
CSS变量：--semi-color-fill-0
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(229,230,235,1)
+
CSS变量：--color-secondary-hover
+
+
+
arcoDesignDark
+
+
色值：rgba(197,197,197,0.16)
+
CSS变量：--color-secondary-hover
@@ -267,14 +494,12 @@ VChart 默认主题定义了一套语义色板，用于描述可以复用的颜
5
-
sliderRailColor
- - +
sliderRailColor
滑块类组件背景条填充颜色
用于滑块类组件背景条的填充颜色。
-
-
light
+
+
light
-
#f1f3f4
+
色值：#f1f3f4
-
-
dark
+
+
dark
-
#404349
+
色值：#404349
- - -
缩略轴背景区域颜色
-
- light - dark -
-
播放器未播放轨道颜色
-
- light - dark -
-
颜色图例轨道颜色
-
- light - dark -
-
尺寸图例轨道颜色
-
- light - dark -
- - - - -
6
- -
sliderHandleColor
- - -
滑块类组件滑块填充颜色
-
用于滑块类组件滑块的填充颜色。
-
-
light
+
+
semiDesignLight
-
#ffffff
+
色值：rgba(46,50,56,0.05)
+
CSS变量：--semi-color-fill-0
-
-
dark
+
+
semiDesignDark
-
#202226
+
色值：rgba(255,255,255,0.12)
+
CSS变量：--semi-color-fill-0
- - -
缩略轴滑块填充颜色
-
- light - dark -
-
尺寸图例滑块填充颜色
-
- light - dark -
- - - - -
7
- -
sliderTrackColor
- - -
滑块类组件已选范围填充颜色
-
用于滑块类组件已选范围的填充颜色。
-
-
light
+
+
arcoDesignLight
-
#0040ff
+
色值：rgba(229,230,235,1)
+
CSS变量：--color-fill-3
-
-
dark
+
+
arcoDesignDark
-
#4284FF
+
色值：hsla(0,0%,100%,0.12)
+
CSS变量：--color-fill-3
-
缩略轴选择区域颜色
+
缩略轴背景区域颜色
light dark
-
播放器已播放轨道颜色
+
播放器未播放轨道颜色
light dark
-
尺寸图例选中部分轨道颜色
+
颜色图例轨道颜色
+
+ light + dark +
+
尺寸图例轨道颜色
light dark @@ -433,16 +611,14 @@ VChart 默认主题定义了一套语义色板，用于描述可以复用的颜 -
8
- -
popupBackgroundColor
- +
6
-
浮层背景区域颜色
-
用于浮层的背景区域颜色。
+
sliderHandleColor
+
滑块类组件滑块填充颜色
+
用于滑块类组件滑块的填充颜色。
-
-
light
+
+
light
-
#ffffff
+
色值：#ffffff
-
-
dark
+
+
dark
-
#404349
+
色值：#202226
- - -
提示信息背景框颜色
-
- light - dark -
-
poptip 背景框颜色
-
- light - dark +
+
+
semiDesignLight
+
+
色值：rgba(255,255,255,1)
+
CSS变量：--semi-white
+
+
+
semiDesignDark
+
+
色值：#e4e7f5
+
CSS变量：--semi-white
+
- - - -
字体颜色
-
9
- -
primaryFontColor
- - -
主要字色
-
颜色和背景色差异最大的字色，用于最显要的信息展示。
-
-
light
+
+
arcoDesignLight
-
#21252c
+
色值：#ffffff
+
CSS变量：--color-bg-2
-
-
dark
+
+
arcoDesignDark
-
#fdfdfd
+
色值：#232324
+
CSS变量：--color-bg-2
-
图表主标题字色
-
- light - dark -
-
指标卡主要字色
-
- light - dark -
-
poptip 标题字色
-
- light - dark -
-
poptip 内容字色
-
- light - dark -
-
提示信息标题字色
-
- light - dark -
-
Mark-line 标签字色
-
- light - dark -
-
Mark-area 标签字色
+
缩略轴滑块填充颜色
- light - dark + light + dark
-
图例标题字色
+
尺寸图例滑块填充颜色
- light - dark + light + dark
-
10
- -
secondaryFontColor
- +
7
-
次要字色
-
颜色和背景色差异较小的字色，用于次要的信息展示。
+
sliderTrackColor
+
滑块类组件已选范围填充颜色
+
用于滑块类组件已选范围的填充颜色。
-
-
light
+
+
light
-
#606773
+
色值：#0040ff
-
-
dark
+
+
dark
-
#888c93
+
色值：#4284FF
- - -
轴标题字色
-
- light - dark -
-
图例标签字色
-
- light - dark -
-
提示信息数据 key 字色
-
- light - dark -
-
缩略轴标签字色
-
- light - dark +
+
+
semiDesignLight
+
+
色值：rgba(0,100,250,1)
+
CSS变量：--semi-color-primary
+
+
+
semiDesignDark
+
+
色值：rgba(84,169,255,1)
+
CSS变量：--semi-color-primary
+
- - - - -
11
- -
tertiaryFontColor
- - -
第三字色
-
颜色和背景色差异更小的字色，用于更次要的信息展示。
-
-
light
+
+
arcoDesignLight
-
#89909d
+
色值：rgba(22,93,255,1)
+
CSS变量：--primary-6
-
-
dark
+
+
arcoDesignDark
-
#bbbdc3
+
色值：rgba(60,126,255,1)
+
CSS变量：--primary-6
-
图表副标题字色
+
缩略轴选择区域颜色
- light - dark + light + dark
-
指标卡次要字色
+
播放器已播放轨道颜色
- light - dark + light + dark +
+
尺寸图例选中部分轨道颜色
+
+ light + dark
-
12
- -
axisLabelFontColor
- +
8
-
轴标签字色
-
用于轴标签字色，默认与第三字色颜色相同。
+
popupBackgroundColor
+
浮层背景区域颜色
+
用于浮层的背景区域颜色。
-
-
light
+
+
light
-
#89909d
+
色值：#ffffff
-
-
dark
+
+
dark
-
#bbbdc3
+
色值：#404349
- - -
轴标签字色
-
- light - dark -
- - - - -
13
- -
disableFontColor
- - -
禁用字色
-
用于禁用状态字色或非激活态字色。
-
-
light
+
+
semiDesignLight
-
#bcc1cb
+
色值：rgba(255,255,255,1)
+
CSS变量：--semi-color-bg-3
-
-
dark
+
+
semiDesignDark
-
#55595f
+
色值：#43444a
+
CSS变量：--semi-color-bg-3
- - -
非激活态图例标签字色
-
- light - dark -
- - - - -
14
- -
axisMarkerFontColor
- - -
轴高亮标记字色
-
用于轴标签上的高亮标记字色。
-
-
light
+
+
arcoDesignLight
-
#ffffff
+
色值：rgba(255,255,255,1)
+
CSS变量：--color-bg-popup
-
-
dark
+
+
arcoDesignDark
-
#202226
+
色值：#373739
+
CSS变量：--color-bg-popup
-
十字准星标签字色
+
提示信息背景框颜色
light dark
+
poptip 背景框颜色
+
+ light + dark +
-
轴样式
-
15
- -
axisGridColor
- +
字体颜色
+
9
-
轴网格线颜色
-
用于轴网格线颜色以及同级的颜色。
+
primaryFontColor
+
主要字色
+
颜色和背景色差异最大的字色，用于最显要的信息展示。
+
+
+
light
+
+
色值：#21252c
+
+
+
dark
+
+
色值：#fdfdfd
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,1)
+
CSS变量：--semi-color-text-0
+
+
+
semiDesignDark
+
+
色值：rgba(249,249,249,1)
+
CSS变量：--semi-color-text-0
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(29,33,41,1)
+
CSS变量：--color-text-1
+
+
+
arcoDesignDark
+
+
色值：hsla(0,0%,100%,0.9)
+
CSS变量：--color-text-1
+
+
+ + +
图表主标题字色
+
+ light + dark +
+
指标卡主要字色
+
+ light + dark +
+
poptip 标题字色
+
+ light + dark +
+
poptip 内容字色
+
+ light + dark +
+
提示信息标题字色
+
+ light + dark +
+
Mark-line 标签字色
+
+ light + dark +
+
Mark-area 标签字色
+
+ light + dark +
+
图例标题字色
+
+ light + dark +
+ + + + +
10
+ +
secondaryFontColor
+
次要字色
+
颜色和背景色差异较小的字色，用于次要的信息展示。
+
+
+
light
+
+
色值：#606773
+
+
+
dark
+
+
色值：#888c93
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,0.8)
+
CSS变量：--semi-color-text-1
+
+
+
semiDesignDark
+
+
色值：rgba(249,249,249,0.8)
+
CSS变量：--semi-color-text-1
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(78,89,105,1)
+
CSS变量：--color-text-2
+
+
+
arcoDesignDark
+
+
色值：hsla(0,0%,100%,0.7)
+
CSS变量：--color-text-2
+
+
+ + +
轴标题字色
+
+ light + dark +
+
图例标签字色
+
+ light + dark +
+
提示信息数据 key 字色
+
+ light + dark +
+
缩略轴标签字色
+
+ light + dark +
+ + + + +
11
+ +
tertiaryFontColor
+
第三字色
+
颜色和背景色差异更小的字色，用于更次要的信息展示。
+
+
+
light
+
+
色值：#89909d
+
+
+
dark
+
+
色值：#bbbdc3
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,0.62)
+
CSS变量：--semi-color-text-2
+
+
+
semiDesignDark
+
+
色值：rgba(249,249,249,0.6)
+
CSS变量：--semi-color-text-2
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(134,144,156,1)
+
CSS变量：--color-text-3
+
+
+
arcoDesignDark
+
+
色值：hsla(0,0%,100%,0.5)
+
CSS变量：--color-text-3
+
+
+ + +
图表副标题字色
+
+ light + dark +
+
指标卡次要字色
+
+ light + dark +
+ + + + +
12
+ +
axisLabelFontColor
+
轴标签字色
+
用于轴标签字色，默认与第三字色颜色相同。
+
+
+
light
+
+
色值：#89909d
+
+
+
dark
+
+
色值：#bbbdc3
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,0.62)
+
CSS变量：--semi-color-text-2
+
+
+
semiDesignDark
+
+
色值：rgba(249,249,249,0.6)
+
CSS变量：--semi-color-text-2
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(134,144,156,1)
+
CSS变量：--color-text-3
+
+
+
arcoDesignDark
+
+
色值：hsla(0,0%,100%,0.5)
+
CSS变量：--color-text-3
+
+
+ + +
轴标签字色
+
+ light + dark +
+ + + + +
13
+ +
disableFontColor
+
禁用字色
+
用于禁用状态字色或非激活态字色。
+
+
+
light
+
+
色值：#bcc1cb
+
+
+
dark
+
+
色值：#55595f
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,0.35)
+
CSS变量：--semi-color-disabled-text
+
+
+
semiDesignDark
+
+
色值：rgba(249,249,249,0.35)
+
CSS变量：--semi-color-disabled-text
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(201,205,212,1)
+
CSS变量：--color-text-4
+
+
+
arcoDesignDark
+
+
色值：hsla(0,0%,100%,0.3)
+
CSS变量：--color-text-4
+
+
+ + +
非激活态图例标签字色
+
+ light + dark +
+ + + + +
14
+ +
axisMarkerFontColor
+
轴高亮标记字色
+
用于轴标签上的高亮标记字色。
+
+
+
light
+
+
色值：#ffffff
+
+
+
dark
+
+
色值：#202226
+
+
+
+
+
semiDesignLight
+
+
色值：#ffffff
+
CSS变量：--semi-color-bg-0
+
+
+
semiDesignDark
+
+
色值：#16161a
+
CSS变量：--semi-color-bg-0
+
+
+
+
+
arcoDesignLight
+
+
色值：#ffffff
+
CSS变量：--color-bg-1
+
+
+
arcoDesignDark
+
+
色值：#17171a
+
CSS变量：--color-bg-1
+
+
+ + +
十字准星标签字色
+
+ light + dark +
+ + + +
轴样式
+
15
+ +
axisGridColor
+
轴网格线颜色
+
用于轴网格线颜色以及同级的颜色。
+
+
+
light
+
+
色值：#f1f2f5
+
+
+
dark
+
+
色值：#404349
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,0.08)
+
CSS变量：--semi-color-border
+
+
+
semiDesignDark
+
+
色值：rgba(255,255,255,0.08)
+
CSS变量：--semi-color-border
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(229,230,235,1)
+
CSS变量：--color-border
+
+
+
arcoDesignDark
+
+
色值：#333335
+
CSS变量：--color-border
+
+
+ + +
轴网格线颜色
+
+ light + dark +
+
十字准星矩形颜色
+
+ light + dark +
+ + + + +
16
+ +
axisDomainColor
+
轴线颜色
+
用于轴线颜色以及同级的颜色。
+
+
+
light
+
+
色值：#d9dde4
+
+
+
dark
+
+
色值：#4b4f54
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,0.15)
+
CSS变量：--semi-grey-9
+
+
+
semiDesignDark
+
+
色值：rgba(255,255,255,0.08)
+
CSS变量：--semi-color-border
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(229,230,235,1)
+
CSS变量：--color-neutral-3
+
+
+
arcoDesignDark
+
+
色值：rgba(72,72,73,1)
+
CSS变量：--color-neutral-3
+
+
+ + +
轴线颜色
+
+ light + dark +
+ + + +
缩略轴
+
17
+ +
dataZoomHandlerStrokeColor
+
缩略轴滑块描边颜色
+
用于缩略轴滑块描边颜色以及同级的颜色。
+
+
+
light
+
+
色值：#aeb5be
+
+
+
dark
+
+
色值：#888c93
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(46,50,56,0.13)
+
CSS变量：--semi-color-fill-2
+
+
+
semiDesignDark
+
+
色值：rgba(46,50,56,0.13)
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(169,174,184,1)
+
CSS变量：--color-neutral-5
+
+
+
arcoDesignDark
+
+
色值：rgba(120,120,122,1)
+
CSS变量：--color-neutral-5
+
+
+ + +
缩略轴滑块描边颜色
+
+ light + dark +
+ + + + +
18
+ +
dataZoomChartColor
+
缩略轴图表区域颜色
+
用于缩略轴预览图表的颜色以及同级的颜色。
+
+
+
light
+
+
色值：#c9ced8
+
+
+
dark
+
+
色值：#55595F
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(46,50,56,0.09)
+
CSS变量：--semi-color-fill-1
+
+
+
semiDesignDark
+
+
色值：rgba(255,255,255,0.16)
+
CSS变量：--semi-color-fill-1
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(201,205,212,1)
+
CSS变量：--color-fill-4
+
+
+
arcoDesignDark
+
+
色值：hsla(0,0%,100%,0.16)
+
CSS变量：--color-fill-4
+
+
+ + +
缩略轴图表区域颜色
+
+ light + dark +
+
尺寸图例尺寸标识颜色
+
+ light + dark +
+ + + +
播放器
+
19
+ +
playerControllerColor
+
播放器控制器填充颜色
+
用于播放器控制器的填充颜色。
+
+
+
light
+
+
色值：#0040ff
+
+
+
dark
+
+
色值：#0040ff
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(0,100,250,1)
+
CSS变量：--semi-color-primary
+
+
+
semiDesignDark
+
+
色值：rgba(84,169,255,1)
+
CSS变量：--semi-color-primary
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(22,93,255,1)
+
CSS变量：--primary-6
+
+
+
arcoDesignDark
+
+
色值：rgba(60,126,255,1)
+
CSS变量：--primary-6
+
+
+ + +
播放器按钮颜色
+
+ light + dark +
+
播放器滑块颜色
+
+ light + dark +
+ + + +
滚动条
+
20
+ +
scrollBarSliderColor
+
滚动条滑块颜色
+
用于滚动条滑块的填充颜色。
+
+
+
light
+
+
色值：rgba(0,0,0,0.3)
+
+
+
dark
+
+
色值：rgba(255,255,255,0.3)
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(0,0,0,0.3)
+
+
+
semiDesignDark
+
+
色值：rgba(255,255,255,0.3)
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(0,0,0,0.3)
+
+
+
arcoDesignDark
+
+
色值：rgba(255,255,255,0.3)
+
+
+ + +
滚动条滑块颜色
+
+ light + dark +
+ + + +
标注
+
21
+ +
axisMarkerBackgroundColor
+
轴高亮标记背景色
+
用于轴标签上的高亮标记背景色。
+
+
+
light
+
+
色值：#21252c
+
+
+
dark
+
+
色值：#fdfdfd
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,1)
+
CSS变量：--semi-color-text-0
+
+
+
semiDesignDark
+
+
色值：rgba(249,249,249,1)
+
CSS变量：--semi-color-text-0
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(29,33,41,1)
+
CSS变量：--color-text-1
+
+
+
arcoDesignDark
+
+
色值：hsla(0,0%,100%,0.9)
+
CSS变量：--color-text-1
+
+
+ + +
十字准星标签背景色
+
+ light + dark +
+ + + + +
22
+ +
markLabelBackgroundColor
+
标注标签背景颜色
+
用于普通标注标签的背景颜色。
+
+
+
light
+
+
色值：#f1f2f5
+
+
+
dark
+
+
色值：#404349
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,0.08)
+
CSS变量：--semi-color-border
+
+
+
semiDesignDark
+
+
色值：rgba(255,255,255,0.08)
+
CSS变量：--semi-color-border
+
+
+
+
+
arcoDesignLight
+
+
色值：rgba(229,230,235,1)
+
CSS变量：--color-border
+
+
+
arcoDesignDark
+
+
色值：#333335
+
CSS变量：--color-border
+
+
+ + +
Mark-line 标签背景色
+
+ light + dark +
+
Mark-area 标签背景色
+
+ light + dark +
+ + + + +
23
+ +
markLineStrokeColor
+
标注线颜色
+
用于普通标注线的颜色。
+
+
+
light
+
+
色值：#606773
+
+
+
dark
+
+
色值：#888c93
+
+
+
+
+
semiDesignLight
+
+
色值：rgba(28,31,35,0.8)
+
CSS变量：--semi-color-text-1
+
+
+
semiDesignDark
+
+
色值：rgba(249,249,249,0.8)
+
CSS变量：--semi-color-text-1
+
+
-
-
light
+
+
arcoDesignLight
-
#f1f2f5
+
色值：rgba(78,89,105,1)
+
CSS变量：--color-text-2
-
-
dark
+
+
arcoDesignDark
-
#404349
+
色值：hsla(0,0%,100%,0.7)
+
CSS变量：--color-text-2
-
轴网格线颜色
+
Mark-line 线条颜色
- light - dark + light + dark
-
十字准星矩形颜色
+
十字准星线形颜色
light dark
+
Mark-point 线条颜色
+
+ light + dark +
- -
16
- -
axisDomainColor
- +
功能色
+
24
-
轴线颜色
-
用于轴线颜色以及同级的颜色。
+
dangerColor
+
危险色
+
危险、错误、失败、盈利、上升、女性。
-
-
light
+
+
light
-
#d9dde4
+
色值：#e33232
-
-
dark
+
+
dark
-
#4b4f54
+
色值：#eb4b4b
- - -
轴线颜色
-
- light - dark -
- - - -
缩略轴
-
17
- -
dataZoomHandlerStrokeColor
- - -
缩略轴滑块描边颜色
-
用于缩略轴滑块描边颜色以及同级的颜色。
-
-
light
+
+
semiDesignLight
-
#aeb5be
+
色值：rgba(249,57,32,1)
+
CSS变量：--semi-color-danger
-
-
dark
+
+
semiDesignDark
-
#888c93
+
色值：rgba(252,114,90,1)
+
CSS变量：--semi-color-danger
- - -
缩略轴滑块描边颜色
-
- light - dark -
- - - - -
18
- -
dataZoomChartColor
- - -
缩略轴图表区域颜色
-
用于缩略轴预览图表的颜色以及同级的颜色。
-
-
light
+
+
arcoDesignLight
-
#c9ced8
+
色值：rgba(245,63,63,1)
+
CSS变量：--danger-6
-
-
dark
+
+
arcoDesignDark
-
#55595F
+
色值：rgba(247,105,101,1)
+
CSS变量：--danger-6
- -
缩略轴图表区域颜色
-
- light - dark -
-
尺寸图例尺寸标识颜色
-
- light - dark -
- +
无内置应用场景
-
播放器
-
19
- -
playerControllerColor
- + +
25
-
播放器控制器填充颜色
-
用于播放器控制器的填充颜色。
+
warningColor
+
警告色
+
预警、警示。
-
-
light
+
+
light
-
#0040ff
+
色值：#ffc528
-
-
dark
+
+
dark
-
#0040ff
+
色值：#f0bd30
- - -
播放器按钮颜色
-
- light - dark -
-
播放器滑块颜色
-
- light - dark -
- - - -
滚动条
-
20
- -
scrollBarSliderColor
- - -
滚动条滑块颜色
-
用于滚动条滑块的填充颜色。
-
-
light
+
+
semiDesignLight
-
rgba(0,0,0,0.3)
+
色值：rgba(252,136,0,1)
+
CSS变量：--semi-color-warning
-
-
dark
+
+
semiDesignDark
-
rgba(255,255,255,0.3)
+
色值：rgba(255,174,67,1)
+
CSS变量：--semi-color-warning
- - -
滚动条滑块颜色
-
- light - dark -
- - - -
标注
-
21
- -
axisMarkerBackgroundColor
- - -
轴高亮标记背景色
-
用于轴标签上的高亮标记背景色。
-
-
light
+
+
arcoDesignLight
-
#21252c
+
色值：rgba(255,125,0,1)
+
CSS变量：--warning-6
-
-
dark
+
+
arcoDesignDark
-
#fdfdfd
+
色值：rgba(255,150,38,1)
+
CSS变量：--warning-6
- -
十字准星标签背景色
-
- light - dark -
- +
无内置应用场景
-
22
- -
markLabelBackgroundColor
- +
26
-
标注标签背景颜色
-
用于普通标注标签的背景颜色。
+
successColor
+
成功色
+
安全、正确、成功、亏损、下降。
-
-
light
+
+
light
-
#f1f2f5
+
色值：#07a35a
-
-
dark
+
+
dark
-
#404349
+
色值：#14b267
- - -
Mark-line 标签背景色
-
- light - dark -
-
Mark-area 标签背景色
-
- light - dark -
- - - - -
23
- -
markLineStrokeColor
- - -
标注线颜色
-
用于普通标注线的颜色。
-
-
light
+
+
semiDesignLight
-
#606773
+
色值：rgba(59,179,70,1)
+
CSS变量：--semi-color-success
-
-
dark
+
+
semiDesignDark
-
#888c93
+
色值：rgba(93,194,100,1)
+
CSS变量：--semi-color-success
- - -
Mark-line 线条颜色
-
- light - dark -
-
十字准星线形颜色
-
- light - dark -
-
Mark-point 线条颜色
-
- light - dark -
- - - -
功能色
-
24
- -
dangerColor
- - -
危险色
-
危险、错误、失败、盈利、上升、女性。
-
-
light
+
+
arcoDesignLight
-
#e33232
+
色值：rgba(0,180,42,1)
+
CSS变量：--success-6
-
-
dark
+
+
arcoDesignDark
-
#eb4b4b
+
色值：rgba(39,195,70,1)
+
CSS变量：--success-6
@@ -1299,119 +2877,97 @@ VChart 默认主题定义了一套语义色板，用于描述可以复用的颜 -
25
- -
warningColor
- +
27
-
警告色
-
预警、警示。
+
infoColor
+
信息色
+
正常、寒冷、男性。
-
-
light
+
+
light
-
#ffc528
+
色值：#3073f2
-
-
dark
+
+
dark
-
#f0bd30
+
色值：#4284ff
- -
无内置应用场景
- - - -
26
- -
successColor
- - -
成功色
-
安全、正确、成功、亏损、下降。
-
-
light
+
+
semiDesignLight
-
#07a35a
+
色值：rgba(0,100,250,1)
+
CSS变量：--semi-color-info
-
-
dark
+
+
semiDesignDark
-
#14b267
+
色值：rgba(84,169,255,1)
+
CSS变量：--semi-color-info
- -
无内置应用场景
- - - -
27
- -
infoColor
- - -
信息色
-
正常、寒冷、男性。
-
-
light
+
+
arcoDesignLight
-
#3073f2
+
色值：rgba(22,93,255,1)
+
CSS变量：--arcoblue-6
-
-
dark
+
+
arcoDesignDark
-
#4284ff
+
色值：rgba(60,126,255,1)
+
CSS变量：--arcoblue-6
@@ -1634,7 +3190,7 @@ VChart 主题模块支持自定义语义色板，同时可以定义新的 token
无
-
20 20 20 20
+
20 20 20 20
@@ -1651,7 +3207,7 @@ VChart 主题模块支持自定义语义色板，同时可以定义新的 token
top，左对齐
-
4 0 20 0
+
4 0 20 0
@@ -1663,7 +3219,7 @@ VChart 主题模块支持自定义语义色板，同时可以定义新的 token
bottom，居中对齐
-
16 24 16 24
+
16 24 16 24
@@ -1675,7 +3231,7 @@ VChart 主题模块支持自定义语义色板，同时可以定义新的 token
跟随轴
-
12 0 12 0
+
12 0 12 0
@@ -1692,7 +3248,7 @@ VChart 主题模块支持自定义语义色板，同时可以定义新的 token
right，竖直居中对齐
-
16 24 16 24
+
16 24 16 24
@@ -1709,7 +3265,7 @@ VChart 主题模块支持自定义语义色板，同时可以定义新的 token
right，竖直居中对齐
-
16 24 16 24
+
16 24 16 24
@@ -1726,7 +3282,7 @@ VChart 主题模块支持自定义语义色板，同时可以定义新的 token
bottom，左对齐
-
20 0 20 0
+
20 0 20 0