SuperAPI AI 工具集

opendesign-tokens

设计与创作

查看项目

更新于 10-15 23:47

技能介绍

用途:为使用 @opensig/opendesign-token 的项目提供 design token 参考,覆盖六套主题(openEuler/Ascend/Kunpeng/Mindspore/openGauss/openUBMC),每个社区项目在初始化时选定一套,运行时只在浅色/深色间切换。最低依赖 ≥0.1.1。

主要能力:语义颜色 token(primary/success/warning/danger/info/fill/control/link/mask/base)、响应式 token(--o-r-*,四断点 Phone≤840、Pad 841–1200、Laptop 1201–1680、Desktop>1680,按视口自动缩放字号/行高/间距)、静态 gap/font_size token、24 列响应式栅格、内容与控件圆角、字体 token(默认 HarmonyOS Sans SC 与 HarmonyOS Sans,含七档字重与按需引入)。

用法:在 main.ts 主题 CSS 之前引入组件样式,例如 import '@opensig/opendesign-token/themes/e.token.css';切换模式用 document.documentElement.setAttribute('data-o-theme','e.light') 或 'e.dark'。其他主题对应 a/k/m/g/u 前缀。字体需在主题 CSS 之后引入 '@opensig/opendesign-token/fonts/css',且 0.1.1 起仅注册 @font-face,不自动应用,需自行设置 :root { font-family: var(--o-font_family); }。栅格容器可用 .o-r-grid-container,列宽用 var(--o-r-grid-N),水槽用 var(--o-r-grid-column-gutter)。

适用场景:页面级布局的字号、间距、栅格分配及 Pixso 设计稿数值到 token 的映射,替换硬编码值。

限制:颜色值仅为示例,其他主题品牌色不同;圆角实际值因主题而异,需查对应主题 reference;调色板 token 属内部实现,应优先用语义 token;bg* 命名不存在,背景统一用 fill*;不存在 --o-r-radius-* 圆角响应式变量;低于 0.1.1 的部分 token 可能不存在。