Design Tokens 表

vika 定义了一套命名模式，它可以跨令牌创建可预测的行为。例如，可以通过向任何文本、图标或背景颜色添加-二级或-三级来创建其他层次，并且可以通过添加悬停、选定、禁用来指定交互行为。

命名结构

vika 令牌遵循以下格式：

--{type}-{colorRole}-{prominence}-{interaction}

Type (required)

这是必需的参数，它指定我们要为哪种类型的对象赋予颜色。我们的四种类型是背景 bg、文本&图标 text、边框 border 和阴影 shadow。为了方便使用，文本和图标共用 text。

示例
--bg-common-default
--text-common-primary

Color Role (required)

这是必需的参数，我们的用户界面中的颜色有特定的含义，所以我们根据使用方式来组织颜色，而不是颜色本身。比如主题色是 brand，它可能会根据主题在紫色和其他色彩之间切换。

示例
--bg-brand-default
--text-common-primary
--bg-warn-default

Prominence (optional)

可选参数，创建视觉的层次结构，背景、文本和图标支持一级，二级，三级和四级。

示例
--text-common-secondary
--bg-common-lowest

Interaction (optional)

可选参数。一些 token 支持悬停和按下等交互状态。

示例
--bg-brand-active
--text-link-hover

字体、图标文本颜色 Text

默认主题

暗色主题

Text-Common-Primary

第一层级的文本色，用于主要文本和图标，如标题、正文等

colors.textCommonPrimary

var(--textCommonPrimary)

Text-Common-Secondary

第二层级的文本色，用于次要文本和图标，如正文、副文本等

colors.textCommonSecondary

var(--textCommonSecondary)

Text-Common-Tertiary

第三层级的文本色，用于不重要文本和图标，如描述、标签、小标题等

colors.textCommonTertiary

var(--textCommonTertiary)

Text-Common-Quaternary

第四层级的文本色，用于非常不重要的文本和图标，如输入框占位符等

colors.textCommonQuaternary

var(--textCommonQuaternary)

Text-Brand-Default

品牌色的文本色

colors.textBrandDefault

var(--textBrandDefault)

Text-Brand-Hover

品牌颜色的文字颜色悬停状态

colors.textBrandHover

var(--textBrandHover)

Text-Brand-Active

品牌色的文本色的 active 态

colors.textBrandActive

var(--textBrandActive)

Text-Selected-Primary

只在 --bg-selected-primary 上使用，用于处在被选中态的文本上

colors.textSelectedPrimary

var(--textSelectedPrimary)

Text-Selected-Secondary

只在 --bg-selected-secondary 上使用，用于处在被选中态的文本上

colors.textSelectedSecondary

var(--textSelectedSecondary)

Text-Danger-Default

危险色的文本色，表达危险、错误、失败等状态

colors.textDangerDefault

var(--textDangerDefault)

Text-Danger-Hover

危险色文本的 hover 态

colors.textDangerHover

var(--textDangerHover)

Text-Danger-Active

危险色文本的 active 态

colors.textDangerActive

var(--textDangerActive)

Text-Success-Default

安全色的文本色，表达成功、安全、正确、完成等状态

colors.textSuccessDefault

var(--textSuccessDefault)

Text-Success-Hover

安全色文本的 hover 态

colors.textSuccessHover

var(--textSuccessHover)

Text-Success-Active

安全色文本的 active 态

colors.textSuccessActive

var(--textSuccessActive)

Text-Warn-Default

警示色的文本色，表达提醒、警示、不安全等状态

colors.textWarnDefault

var(--textWarnDefault)

Text-Warn-Hover

警示色文本的 hover 态

colors.textWarnHover

var(--textWarnHover)

Text-Warn-Active

警示色文本的 active 态

colors.textWarnActive

var(--textWarnActive)

Text-Link-Default

链接文本色

colors.textLinkDefault

var(--textLinkDefault)

Text-Link-Hover

链接文本色的 hover 态

colors.textLinkHover

var(--textLinkHover)

Text-Link-Active

链接文本色的 active 态

colors.textLinkActive

var(--textLinkActive)

Text-Link-Visted

已访问过的链接文本色

colors.textLinkVisted

var(--textLinkVisted)

Text-Static-Primary

固有的第一层级文本色，一般用于深色背景，不跟随主题变化，如按钮内文本色

colors.textStaticPrimary

var(--textStaticPrimary)

Text-Static-Secondary

固有的第二层级文本色，一般用于深色背景，不跟随主题变化，如按钮内文本色

colors.textStaticSecondary

var(--textStaticSecondary)

Text-Static-Tertiary

固有的第三层级文本色，一般用于深色背景，不跟随主题变化，如按钮内文本色

colors.textStaticTertiary

var(--textStaticTertiary)

Text-Reverse-Default

在不同主题下呈相反的文本色，一般用于 tooltips 内文本

colors.textReverseDefault

var(--textReverseDefault)

背景

默认主题

暗色主题

Bg-Common-Lower

最低层级的背景色

colors.bgCommonLower

var(--bgCommonLower)

Bg-Common-Default

中等层级的背景色，默认使用

colors.bgCommonDefault

var(--bgCommonDefault)

Bg-Common-High

较高层级的背景色，一般用于位于 bg-common-Default 上方浮层的背景

colors.bgCommonHigh

var(--bgCommonHigh)

Bg-Common-Highest

最高层级的背景色，一般用于下拉/右键菜单、通知提醒、无遮罩的模态窗等

colors.bgCommonHighest

var(--bgCommonHighest)

Bg-Bgless-Hover

无背景元素的 hover 态，如目录树节点 Item、右键菜单 Item 等

colors.bgBglessHover

var(--bgBglessHover)

Bg-Bgless-Active

无背景元素的 active 态，如目录树节点 Item、右键菜单 Item 等

colors.bgBglessActive

var(--bgBglessActive)

Bg-Controls-Default

常规控件的背景色，如输入框、选择器、次要按钮等

colors.bgControlsDefault

var(--bgControlsDefault)

Bg-Controls-Hover

常规控件的背景色的 hover 态，如输入框、选择器、次要按钮等

colors.bgControlsHover

var(--bgControlsHover)

Bg-Controls-Active

常规控件的背景色的 active 态，如输入框、选择器、次要按钮等

colors.bgControlsActive

var(--bgControlsActive)

Bg-Controls-Elevate

常规控件的内层级需要提升的元素

colors.bgControlsElevate

var(--bgControlsElevate)

Bg-Tag-Default

常规标签组件（如双向关联、神奇引用、成员标签等）的背景色

colors.bgTagDefault

var(--bgTagDefault)

Bg-Tag-Hover

常规标签组件（如双向关联、神奇引用、成员标签等）背景色的悬停状态

colors.bgTagHover

var(--bgTagHover)

Bg-Scrollbar-Default

滚动条的背景色

colors.bgScrollbarDefault

var(--bgScrollbarDefault)

Bg-Mask-Default

模态窗遮罩层的背景色

colors.bgMaskDefault

var(--bgMaskDefault)

Bg-Selected-Primary-Default

处于已选中状态的背景色，如选中目录节点、工具栏按钮激活，选中行等

colors.bgSelectedPrimaryDefault

var(--bgSelectedPrimaryDefault)

Bg-Selected-Primary-Hover

处于已选中状态的背景色的 hover 态，如选中目录节点、工具栏按钮激活，选中行等

colors.bgSelectedPrimaryHover

var(--bgSelectedPrimaryHover)

Bg-Selected-Primary-Active

处于已选中状态的背景色的 active 态，如选中目录节点、工具栏按钮激活，选中行等

colors.bgSelectedPrimaryActive

var(--bgSelectedPrimaryActive)

Bg-Selected-Secondary-Default

处于已选中状态的背景色，如选中文件夹时内部文件节点的状态

colors.bgSelectedSecondaryDefault

var(--bgSelectedSecondaryDefault)

Bg-Selected-Secondary-Hover

处于已选中状态的背景色的 hover 态，如选中文件夹时内部文件节点的状态

colors.bgSelectedSecondaryHover

var(--bgSelectedSecondaryHover)

Bg-Selected-Secondary-Active

处于已选中状态的背景色的 active 态，如选中文件夹时内部文件节点的状态

colors.bgSelectedSecondaryActive

var(--bgSelectedSecondaryActive)

Bg-Brand-Default

品牌色的背景色

colors.bgBrandDefault

var(--bgBrandDefault)

Bg-Brand-Hover

品牌色的背景色的 hover 态

colors.bgBrandHover

var(--bgBrandHover)

Bg-Brand-Active

品牌色的背景色的 active 态

colors.bgBrandActive

var(--bgBrandActive)

Bg-Brand-Light-Default

品牌色背景的浅色版

colors.bgBrandLightDefault

var(--bgBrandLightDefault)

Bg-Brand-Light-Hover

品牌色背景的浅色版的 hover 态

colors.bgBrandLightHover

var(--bgBrandLightHover)

Bg-Brand-Light-Active

品牌色背景的浅色版的 active 态

colors.bgBrandLightActive

var(--bgBrandLightActive)

Bg-Danger-Default

危险色的背景色，表达危险、错误、失败等状态

colors.bgDangerDefault

var(--bgDangerDefault)

Bg-Danger-Hover

危险色的背景的 hover 态

colors.bgDangerHover

var(--bgDangerHover)

Bg-Danger-Active

危险色的背景的 active 态

colors.bgDangerActive

var(--bgDangerActive)

Bg-Danger-Light-Default

浅版危险色，表达危险、错误、失败等状态

colors.bgDangerLightDefault

var(--bgDangerLightDefault)

Bg-Danger-Light-Hover

浅版危险色的 hover 态

colors.bgDangerLightHover

var(--bgDangerLightHover)

Bg-Danger-Light-Active

浅版危险色的 active 态

colors.bgDangerLightActive

var(--bgDangerLightActive)

Bg-Success-Default

安全色的背景色，表达成功、安全、正确、完成等状态

colors.bgSuccessDefault

var(--bgSuccessDefault)

Bg-Success-Hover

安全色的背景的 hover 态

colors.bgSuccessHover

var(--bgSuccessHover)

Bg-Success-Active

安全色的背景的 active 态

colors.bgSuccessActive

var(--bgSuccessActive)

Bg-Success-Light-Default

浅版安全色，表达成功、安全、正确、完成等状态

colors.bgSuccessLightDefault

var(--bgSuccessLightDefault)

Bg-Success-Light-Hover

浅版安全色的 hover 态

colors.bgSuccessLightHover

var(--bgSuccessLightHover)

Bg-Success-Light-Active

浅版安全色的 active 态

colors.bgSuccessLightActive

var(--bgSuccessLightActive)

Bg-Warn-Default

警示色的背景色，表达提醒、警示、不安全等状态

colors.bgWarnDefault

var(--bgWarnDefault)

Bg-Warn-Hover

警示色的背景的 hover 态

colors.bgWarnHover

var(--bgWarnHover)

Bg-Warn-Active

警示色的背景的 active 态

colors.bgWarnActive

var(--bgWarnActive)

Bg-Warn-Light-Default

浅版警示色，表达提醒、警示、不安全等状态

colors.bgWarnLightDefault

var(--bgWarnLightDefault)

Bg-Warn-Light-Hover

浅版警示色的 hover 态

colors.bgWarnLightHover

var(--bgWarnLightHover)

Bg-Warn-Light-Active

浅版警示色的 active 态

colors.bgWarnLightActive

var(--bgWarnLightActive)

Bg-Static-Light

明亮的固有色，不跟随主题变化

colors.bgStaticLight

var(--bgStaticLight)

Bg-Static-Dark-Primary

深色的第一层级的固有色，不跟随主题变化，目前用于 API 页面和模板中心

colors.bgStaticDarkPrimary

var(--bgStaticDarkPrimary)

Bg-Static-Dark-Secondary

深色的第二层级的固有色，不跟随主题变化，目前用于 API 页面和模板中心

colors.bgStaticDarkSecondary

var(--bgStaticDarkSecondary)

Bg-Static-Dark-Tertiary

深色的第三层级的固有色，不跟随主题变化，目前用于 API 页面和模板中心

colors.bgStaticDarkTertiary

var(--bgStaticDarkTertiary)

Bg-Reverse-Default

在不同主题下呈相反的文本色，一般用于 tooltips 的背景色

colors.bgReverseDefault

var(--bgReverseDefault)

Bg-Extralight-Deeppurple

极浅的品牌紫色，一般用于装饰元素背景

colors.bgExtralightDeeppurple

var(--bgExtralightDeeppurple)

Bg-Extralight-Red

极浅的红色，一般用于装饰元素背景

colors.bgExtralightRed

var(--bgExtralightRed)

Bg-Extralight-Teal

极浅的青色，一般用于装饰元素背景

colors.bgExtralightTeal

var(--bgExtralightTeal)

Bg-Extralight-Orange

极浅的橙色，一般用于装饰元素背景

colors.bgExtralightOrange

var(--bgExtralightOrange)

Bg-Extralight-Indigo

极浅的蓝色，一般用于装饰元素背景

colors.bgExtralightIndigo

var(--bgExtralightIndigo)

Bg-Extralight-Gray

极浅的橙色，一般用于装饰元素背景和日历视图、甘特视图周末的背景色

colors.bgExtralightGray

var(--bgExtralightGray)

Bg-Gradient-Horizontal

水平方向的渐变背景色，一般用于上层容器遮挡下层元素的过渡效果

colors.bgGradientHorizontal

var(--bgGradientHorizontal)

Bg-Gradient-Vertical

垂直方向的渐变背景色，一般用于上层容器遮挡下层元素的过渡效果

colors.bgGradientVertical

var(--bgGradientVertical)

描边

默认主题

暗色主题

Border-Common

用于一般的分割线、描边

colors.borderCommon

var(--borderCommon)

Border-Grid-Vertical

维格视图垂直方向的网格线条

colors.borderGridVertical

var(--borderGridVertical)

Border-Grid-Horizontal

维格视图水平方向的网格线条

colors.borderGridHorizontal

var(--borderGridHorizontal)

Border-Brand

品牌色的描边

colors.borderBrand

var(--borderBrand)

Border-Onbrand-Default

用于背景为品牌色的元素的描边

colors.borderOnbrandDefault

var(--borderOnbrandDefault)

Border-Onbrand-Light

用于背景为浅版品牌色的元素上的描边

colors.borderOnbrandLight

var(--borderOnbrandLight)

Border-Danger

危险色的描边，表达危险、错误、失败等状态

colors.borderDanger

var(--borderDanger)

Border-Ondanger-Default

用于背景为危险色的元素上的描边

colors.borderOndangerDefault

var(--borderOndangerDefault)

Border-Ondanger-Light

用于背景为浅版危险色的元素上的描边

colors.borderOndangerLight

var(--borderOndangerLight)

Border-Success

安全色的描边，表达成功、安全、正确、完成等状态

colors.borderSuccess

var(--borderSuccess)

Border-Onsuccess-Default

用于背景为安全色的元素上的描边

colors.borderOnsuccessDefault

var(--borderOnsuccessDefault)

Border-Onsuccess-Light

用于背景为浅版安全色的元素上的描边

colors.borderOnsuccessLight

var(--borderOnsuccessLight)

Border-Warn

警示色的描边，表达提醒、警示、不安全等状态

colors.borderWarn

var(--borderWarn)

Border-Onwarn-Default

用于背景为警示色的元素上的描边

colors.borderOnwarnDefault

var(--borderOnwarnDefault)

Border-Onwarn-Light

用于背景为浅版警示色的元素上的描边

colors.borderOnwarnLight

var(--borderOnwarnLight)

命名结构​

Type (required)​

Color Role (required)​

Prominence (optional)​

Interaction (optional)​

字体、图标文本颜色 Text​

背景​

描边​

命名结构

Type (required)

Color Role (required)

Prominence (optional)

Interaction (optional)

字体、图标文本颜色 Text

背景

描边