安装

使用 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设计系统字体默认为鸿蒙字体（HarmonyOS Sans SC），支持 250、300、400、500、600、700、900 七档字重。使用时需要两步：先引入字体文件加载字体资源，再通过字体变量应用到元素。

1. 引入字体文件

引入后会注册 'HarmonyOS Sans SC'（中文）与 'HarmonyOS Sans'（拉丁）字体族（仅按需加载实际用到的字符）。

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

若只需某一字重，可按需引入以减小体积（sc- 为中文字体，sans- 为拉丁字体）：

import '@opensig/opendesign-token/fonts/sc-regular/font.min.css';  // 400

2. 通过变量应用字体

字体相关变量定义在皮肤 token 文件中，需先引入任意一套皮肤 token（见上文「调用皮肤变量」）。引入后即可使用以下变量：

字体族

| 变量 | 值 | 说明 | | ---- | --- | ---- | | --o-font_family | 'HarmonyOS Sans', 'HarmonyOS Sans SC', Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC','Microsoft YaHei',Arial,sans-serif | 常规字体，拉丁文优先鸿蒙拉丁体（含真斜体），中文用鸿蒙中文字体，未安装时回退到系统字体 | | --o-font_family-code | SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace | 代码字体 |

字体族自动分流：--o-font_family 将 'HarmonyOS Sans'（拉丁族）排在 'HarmonyOS Sans SC'（中文族）之前。浏览器逐族匹配：拉丁字符命中 'HarmonyOS Sans'（有独立 italic 面，font-style: italic 可直接渲染真斜体）；中文字符因拉丁族 unicode-range 不覆盖 CJK 而自动穿透到 'HarmonyOS Sans SC'。中文无源文件斜体，font-style: italic 会合成伪斜体。

字重

| 变量 | 值 | 说明 | | ---- | --- | ---- | | --o-font_weight-thin | 250 | 极细 | | --o-font_weight-light | 300 | 细体 | | --o-font_weight-regular | 400 | 常规 | | --o-font_weight-medium | 500 | 中等 | | --o-font_weight-semibold | 600 | 半粗 | | --o-font_weight-bold | 700 | 加粗 | | --o-font_weight-black | 900 | 超粗 |

字重说明：字重变量共七档，与鸿蒙字体 @font-face 注册的七个字面一一对应——250（thin）、300（light）、400（regular）、500（medium）、600（semibold）、700（bold）、900（black）。CSS font-weight 数值与 @font-face 字面精确匹配，无需就近匹配。

实际开发：日常使用以 --o-font_weight-regular（400）和 --o-font_weight-semibold（600）两档为主，前者用于正文，后者用于标题、强调等场景。

3. 使用示例

全局应用鸿蒙字体（推荐在根容器设置）：

:root {
  font-family: var(--o-font_family);
}

code {
  font-family: var(--o-font_family-code);
}

调用响应式变量

引入任意皮肤 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 许可证书。