配置托肯斯
@aleph-alpha/ 配置键
Aleph Alpha 前端的设计符,由Figma库出自Tokens Studio和样式词典. 以JSON的形式将所处理的符文曝光,所以其他包可以消耗.
UnoCSS 预设将这些令牌转换为工具类, CSS 变量位于其中 @aleph-alpha/config-unocss嵌入式网络字体(Raleway、Roboto、蒙特塞拉特、Inter) @aleph-alpha/config-fonts。 。 。 .
安装
pnpm add @aleph-alpha/config-tokens
使用量
导入令牌直接设定为 JSON :
import lightModeSet from '@aleph-alpha/config-tokens/sd-output/light-mode.json';
import darkModeSet from '@aleph-alpha/config-tokens/sd-output/dark-mode.json';
import spacingsSet from '@aleph-alpha/config-tokens/sd-output/spacings.json';
import boxShadowsSet from '@aleph-alpha/config-tokens/sd-output/box-shadows.json';
import typographySet from '@aleph-alpha/config-tokens/sd-output/typography.json';
对UnoCSS消费者,使用 @aleph-alpha/config-unocss 相反的——它已经把这些JSON文件接入一个预设的堆栈,其中包含CSS自定义属性,主题映射,以及网页字体.
托肯管线
包裹的目的是把Figma Tokens带过 托肯斯工作室 并把它们转换为下游包可以消耗的JSON文件(UnoCSS预设,MUI调色板,.
建设步骤是:
- 设计师将符号更改从 Figma 推到
tokens.json打开一个MR. - MR合并后,管道会运行并触发建设过程.
- 来自
tokens.json被转换,分为不同类别,并储存在transformed-tokens目录为 符号转换器 因此样式词典可以读取. 类别是:light-mode, (中文(简体) ),dark-mode,以及global。 。 。 . - 转换后的信使用 样式词典 生成符号集
sd-output/。 。 。 . - 消费者(例如:.
@aleph-alpha/config-unocss阅读sd-output/JSON通过子路径导入.
graph TD
A[Designer pushes token changes from Figma to tokens.json] --> B[Open MR]
B --> C{MR merged?}
C -->|Yes| D[Pipeline runs]
D --> E[Trigger build process]
E --> F[Transform and split tokens with token-transformer]
F --> G[Store transformed tokens in transformed-tokens directory]
G --> H[Process tokens with style-dictionary]
H --> I[Store processed tokens in sd-output directory]
C -->|No| B
subgraph Token Categories
F --> F1[light-mode]
F --> F2[dark-mode]
F --> F3[global]
end
发展
pnpm install
pnpm build