跳到主要内容

主题与 Token

名词解释​

  • token：由设计师命名，指代一些基础样式（如字号，字体，颜色，尺寸等）的字面量，如$font-size 就是字号，$color-warn 就是警告色，其值为字符串（暂定），可视化图表开发与设计人员者可以在设计和开发时预设图标元素所对应的 token 的值，或是对 token 所代表的值进行修改和组合，形成某一业务的主题（如手炒主题，海外主题），主题就是以 token 为键的键值对的集合，通过主题的切换，可以让图表组件更直观地切换外观主题。

  • 主题：以 token 为键的键值对的集合（以下简称 token 的集合），是一个对象，如手炒主题、海外主题等。

  • token 解析函数（ Parser ）：token 的集合的解析器，由可视化维护，入参为 token 的集合，出参为预设主题配置。

  • 预设主题：我们已经编写的预解析函数的集合，目前有 5 个（mobile-app-light、mobile-app-dark、pc-wencai-light、pc-app-light、pc-app-dark）。

  • 预解析函数：对 play 方法接收到的 option 进行处理的函数，可以理解成 pipeline。

  • 默认预设主题配置：预设主题所依赖的基本的样式属性，如字号、字体、颜色等等，是一个对象，其每一个属性的值都是范式给的

  • 预设主题配置：预设主题所依赖的基本的样式属性，如字号、字体、颜色等等，是由 token 解析函数接收 token 的集合后输出的对象，若未传入 token 的集合则输出默认预设主题配置。

业务背景​

由于现在的可视化范式组件开发需要统一设计与业务之间样式问题，所以我们需要设置主题来统一视觉风格和开发规范。其中 token 的设计就是为了方便配置自定义的主题和调整具体的元素样式，并且支持针对于新的设计元素添加新的 token 从而提升可扩展性。

Token 主题机制流程​

token

在范式组件图表中使用 token​

目前我们统一了在图表中使用 token 设置的主题与原先主题的设置样式，只需要按照原先使用主题的方法进行设置就可以了。

代码调用示例

import * as standardChart from '../../../../build/bundle.esm.js';

// 此处我们使用 mobileAppLight 主题对这个图表进行初始化
const chart = standardChart.init('main', standardChart.mobileAppLight.name);