opendesign 设计系统变量Token

已包含多套皮肤Token

安装

使用 npm/pnpm 安装。

``bash


npm

`

调用皮肤变量

- 选择一套皮肤，引入对应 token 文件

`js
import '@opensig/opendesign-token/themes/e.token.css';
`

- 如果需要使用深色、浅色皮肤，或深浅模式切换，可导入对应 token 文件。 并通过 在根容器（一般为根 html 或 body）添加data-o-theme="[light|x-dark]"属性 控制

`js
// 浅色皮肤 data-o-theme=“e.light”
import "@opensig/opendesign-token/themes/e.light.token.css";
// 深色皮肤 data-o-theme=“e.dark
import "@opensig/opendesign-token/themes/e.dark.token.css";
`
data-o-theme取值如下：
| 皮肤 | 浅色 | 深色 |
| --------- | ------- | ------ |
| Ascend | a-light | a-dark |
| Kunpneg | k-light | k-dark |
| OpenEuler | e-light | e-dark |
| Mindspore | m-light | m-dark |
| openUBMC | u-light | u-dark |
| openGauss | u-light | u-dark |

调用鸿蒙字体

`js
import '@opensig/opendesign-token/fonts/css';
`

许可

opendesign 使用 MIT license 许可证书。

变更日志

$3

- fix：修复openeuler皮肤变量命名拼写错误：o-color-mian1 -> o-color-main1`

$3

- 新增字体、字重变量

$3

- 新增鸿蒙字体定义

$3

- 新增-o-color-main2 渐变色变量，同时新增-o-color-main2-angle，可定制渐变方向

$3

- 新增皮肤变量