安装

使用 npm/pnpm 安装。

# npm
npm i @opensig/opendesign-token

#pnpm
pnpm add @opensig/opendesign-token

调用皮肤变量

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

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

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

// 浅色皮肤 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 |

调用鸿蒙字体

opendesign设计系统字体默认为鸿蒙字体，支持400、600字重，可以引入对应字体文件

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

许可

opendesign 使用 MIT license 许可证书。

变更日志

0.0.8

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

0.0.7

• 新增字体、字重变量

0.0.3

• 新增鸿蒙字体定义

0.0.2

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

0.0.1

• 新增皮肤变量