所有颜色、间距、字号、圆角、阴影、层级、过渡都来自 src/css/base/tokens.css 的 CSS 自定义属性。改令牌就能改全站，不需要重写组件。
| 层 | 写什么 | 举例 |
|---|---|---|
| 1. 原始层 raw | 具体值，写死 | --plui-color-gray-100: #f3f4f6; |
| 2. 语义层 semantic | 语义别名，引用原始层 | --plui-color-text: var(--plui-color-black); |
| 3. 组件层 component | 组件专用参数 | --plui-control-height: 2.5rem; |
| 4. 主题层 theme | 预留，覆盖语义层 | 深色模式（见下） |
工具类引用的是语义层与原始层，组件引用的是组件层。组件里不写死具体色值，因此换主题时组件不需要改。
| 令牌 | 用途 | 默认值 |
|---|---|---|
--plui-color-bg | 页面底色 | white |
--plui-color-bg-soft | 次级底色（表头、卡片头） | gray-100 |
--plui-color-bg-inverse | 反色底 | black |
--plui-color-text | 正文色 | black |
--plui-color-text-strong | 强调正文色 | black |
--plui-color-text-muted | 次级文字 | gray-600 |
--plui-color-text-faint | 弱化文字、占位符 | gray-400 |
--plui-color-text-inverse | 反色文字 | white |
--plui-color-inverse | 反色前景（图标等） | white |
--plui-color-border | 主边框 | black |
--plui-color-border-muted | 弱化边框、表格线 | gray-300 |
--plui-color-border-strong | 强调边框 | black |
--plui-color-focus | 焦点环 | black |
--plui-color-backdrop | 模态遮罩 | rgba(255,255,255,.86) |
src/css/base/dark.css 里已经写好了暗色主题：覆盖语义层令牌，组件与工具类自动跟随，不需要改任何组件样式。
两种启用方式：
<!-- 手动指定主题（data-plui-theme="light" 可强制浅色，覆盖系统设置） -->
<html data-plui-theme="dark"><!-- 不加属性时自动跟随系统 prefers-color-scheme -->如果要把暗色主题拆到自己的样式表里，也可以只覆盖语义层：
[data-plui-theme="dark"] {
--plui-color-bg: #111827;
--plui-color-bg-soft: #1f2937;
--plui-color-text: #ffffff;
--plui-color-text-strong: #ffffff;
--plui-color-text-muted: #9ca3af;
--plui-color-text-faint: #6b7280;
--plui-color-border: #ffffff;
--plui-color-border-muted: #374151;
--plui-color-backdrop: rgba(0, 0, 0, 0.86);
}注意工具类里的 bg-gray-100 这类原始色阶不会跟着变，深色适配请用语义类（bg-soft、text-muted、text-faint、bg-inverse、text-inverse）。暗色下语义色（红绿蓝黄）会自动提亮一档，保证边框与文字的对比度达标。
极简风格要求不做大面积色块，所以语义色只出现在文字与 1px 边框上：
| 组件 | 表现 |
|---|---|
.plui-btn-success / danger / warning / info | 白底，文字与边框用语义色 |
.plui-btn-primary | 黑底白字 |
.plui-btn-secondary | 白底黑边 |
.plui-alert-success 等 | 白底，左侧 4px 语义色竖条 |
.plui-card-danger 等 | 只改卡片边框色 |
.plui-badge-success 等 | 白底，语义色边框与文字 |
.plui-progress-bar-success 等 | 进度条填充色（面积小，可接受） |
需要自定义语义色时，改 tokens.css 里的 --plui-color-green-600 这类原始令牌即可，全部组件同步变化。
字号与行高成对定义，工具类里 text-lg 同时带上字号与行高：
| 类 | 字号 | 行高 |
|---|---|---|
text-xs | 0.75rem | 1rem |
text-sm | 0.875rem | 1.25rem |
text-base | 1rem | 1.5rem |
text-lg | 1.125rem | 1.75rem |
text-xl | 1.25rem | 2rem |
text-2xl | 1.5rem | 2rem |
text-3xl | 1.875rem | 2.25rem |
text-4xl | 2.25rem | 2.5rem |
leading-* 可以单独覆盖行高。
本页由 build/build-docs.mjs 从同名 Markdown 生成，请修改 .md 后重新生成，不要手工编辑本文件。