安装

使用 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';

调用响应式变量

引入任意皮肤 token 后，响应式变量（--o-r-*, 其中的 r 指的是 responsive）会自动生效，无需额外导入。变量会根据视口宽度在不同断点自动切换取值。

数据源：tokens/responsive-token.json（字号、行高、间距）、tokens/grid-token.json（栅格系统）。

字号 / 行高

.title {
  font-size: var(--o-r-font_size-h1);
  line-height: var(--o-r-line_height-h1);
}

间距

.section {
  padding: var(--o-r-gap-6) var(--o-r-gap-4);
}

栅格

使用内置的栅格容器类：

<template>
  <div class="o-r-grid-container">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
  </div>
</template>

<style>
  .child1 {
    width: var(--o-r-grid-3); // 占据3栅格
  }
</style>

许可

opendesign 使用 MIT license 许可证书。

变更日志

0.0.11

• 增加响应式栅格楼层正文宽度(--o-r-grid-section-width)、楼层左右留白(--o-r-grid-section-padding)变量

0.0.10

• 增加响应式字号、行高、间距、栅格变量

0.0.9

• 默认字体刷新为Harmony snas sc

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

• 新增皮肤变量