Skip to content

Design Tokens

Design tokens 是以标准化的方式定义样式(如颜色、排版、间距或高度)的值,取代px、hex等编码,并赋予其语义化的命名。Design tokens 系统使企业内部所有设计师、开发工程师能够通过一种共同的语言,确保跨平台和学科的一致设计。

层级

在 Pangea Design 体系下,我们推荐使用两层 token 来完整定义整个设计系统,并在最终实现的 css 或 less 中时优先使用 token 来定义样式。

全局变量(Global Token)

首先,全局变量(Global Token)与上下文无关,并存储原始值,如颜色的十六进制代码。此外全局变量还存储排版、边框半径、行高、动画等信息。

别名变量(Alias Token)

别名变量(Alias Token)是 Pangea Design 的第二个token层,它为存储的值添加了语义含义。

主题化

Design tokens 是为灵活性和可访问性而构建的。这意味着,只要设计者、开发者遵循 Design tokens 的设计与开发模式,就可以很好的支持以下场景:

  1. 进行设计系统的快速持续迭代
  2. 支持操作系统主题的浅色、深色切换
  3. 支持品牌元素的快速切换定制

主题配置工具

为了更好的支撑海信多品牌的主题定制能力,我们支持用户使用设计系统配置工具配置符合子品牌要求的系统主题,例如在 Vidda 品牌下,可以将主题色配置成 Vidda 蓝色以替代默认的海信绿。

目前 Pangea 针对 Vue 3 版本发布了 2 套官方主题包,可以按需安装。

版本官方主题包包名
Pangea Vue 3默认主题包@arco-themes/vue-hisense-pangea
Pangea Vue 3线性主题包@arco-themes/vue-hisense-pangea-linear