设计 Token（Design Tokens）

OAS-UI 的全部视觉语言都由 CSS 变量（语义 token）驱动。组件样式只引用语义 token，不硬编码任何色值/字号/间距——因此换肤 = 覆盖 CSS 变量，改主题不碰组件。

语义色板

组件只引用语义 token。下表为 light / dark 两套取值（随当前主题实时变化）。

主色

--oas-color-primary

成功

--oas-color-success

警告

--oas-color-warning

危险

--oas-color-danger

主文本

--oas-color-text-primary

次级文本

--oas-color-text-secondary

边框

--oas-color-border

背景

--oas-color-bg

背景 hover

--oas-color-bg-hover

遮罩

--oas-color-overlay

字号阶梯

xs · 12px示例--oas-font-size-xs

sm · 13px示例--oas-font-size-sm

md · 14px示例--oas-font-size-md

lg · 16px示例--oas-font-size-lg

xl · 20px示例--oas-font-size-xl

间距 · 圆角 · 控件高度

间距（4px 基准）

1 · 4

--oas-space-1

2 · 8

--oas-space-2

3 · 12

--oas-space-3

4 · 16

--oas-space-4

5 · 24

--oas-space-5

6 · 32

--oas-space-6

圆角

--oas-radius-sm

--oas-radius-md

--oas-radius-lg

控件高度

sm · 24

--oas-control-height-sm

md · 32

--oas-control-height-md

lg · 40

--oas-control-height-lg

xl · 48

--oas-control-height-xl

实时换肤

下方编辑的 token 与预览组件实际消费的一一对应：主色（按钮/标签/复选框）、圆角 sm（标签）与 md（按钮/输入框）、字号 xs（标签）sm（进度条）md（按钮/输入框）。改即生效。

一键主题色

点击上方色卡立即换肤；或调整下方 token 微调。

--oas-color-primary

--oas-radius-sm

--oas-radius-md

--oas-font-size-xs

--oas-font-size-sm

--oas-font-size-md

主行动

primary

success

warning

danger

同意条款

代码自定义主题

:root {
  --oas-color-primary: #7c3aed;
  --oas-radius-md: 8px;
  --oas-control-height-md: 36px;
}

三套内置主题

在根元素（<html> 或任意容器）设置 data-theme 切换：

`data-theme`	说明
`light`（默认）	浅色
`dark`	深色
`high-contrast`	高对比（WCAG AAA 友好，边框/文字对比更强）

html

<html data-theme="dark">
  …
</html>

document.documentElement.dataset.theme = 'high-contrast'

覆盖语义 token 定制品牌

css

:root {
  /* 品牌色 */
  --oas-color-primary: #7c3aed;
  --oas-color-primary-hover: #8b5cf6;
  --oas-color-primary-active: #6d28d9;

  /* 尺寸 */
  --oas-radius-md: 8px;
  --oas-control-height-md: 36px;
}

Token 分组一览

组	变量
品牌	`--oas-color-primary(-hover/-active)`、`--oas-color-success`、`--oas-color-warning`、`--oas-color-danger`
文本	`--oas-color-text-primary/-secondary/-disabled`
边框/背景	`--oas-color-border`、`--oas-color-bg(-hover/-disabled)`、`--oas-color-overlay`
字号	`--oas-font-size-xs/sm/md/lg/xl`
间距	`--oas-space-1…6`（4px 基准）
圆角	`--oas-radius-sm/md/lg`
控件	`--oas-control-height-xs/sm/md/lg/xl`
动效	`--oas-transition-fast/base`、`--oas-ease-out/in-out`
层级	`--oas-z-dropdown/sticky/fixed/overlay/modal/message/toast/tooltip`
焦点环	`--oas-focus-ring`

减弱动效

库内置 prefers-reduced-motion 支持，系统开启"减弱动效"后所有过渡/动画自动缩短。

规范依据：docs/ui-spec.md §1 设计 token 体系。

设计 Token（Design Tokens） ​