theme.css 与主题 token
使用方式
import '@patab/widget-sdk/theme.css'
样式表基于宿主注入的 --pt-* token 定义语义类，并内置 @media (prefers-reduced-motion: reduce) 全局降动效规则。不导入也可以——直接在自己的 CSS 中引用 var(--pt-*) 即可。
语义类
| 类名 | 用途 |
|---|---|
.pt-surface | 常规容器背景与文字色 |
.pt-surface-strong | 强调容器（更高对比的表面） |
.pt-text | 正文文字色 |
.pt-text-strong | 标题/强调文字色 |
.pt-text-muted | 次要/弱化文字色 |
.pt-button | 按钮（含 hover/active 态） |
.pt-input | 输入框 |
.pt-focus-ring | 焦点环 |
.pt-danger | 危险/破坏性操作色 |
以上是 theme.css 提供的全部契约类。官方示例中出现的 pt-card、pt-title、pt-muted 类名不属于 SDK 契约（theme.css 中没有这些类），如需卡片样式请用 .pt-surface 等契约类或自行定义。
组件样式展示
下面的展示直接渲染 theme.css 的全部契约类与 20 个主题 token（演示取值取自宿主回退主题表，与组件实际运行环境一致），可交互体验 hover、active 与焦点环效果：
语义类
.pt-surface正文 .pt-text
弱化文字 .pt-text-muted
.pt-surface-strong标题文字 .pt-text-strong
.pt-text / .pt-text-strong / .pt-text-muted标题文字 .pt-text-strong
正文文字 .pt-text
次要说明文字 .pt-text-muted
.pt-button（hover / active / focus-visible）.pt-input.pt-focus-ring点击我，或用 Tab 聚焦查看焦点环.pt-danger危险操作文字.pt-surface正文 .pt-text
弱化文字 .pt-text-muted
.pt-surface-strong标题文字 .pt-text-strong
.pt-text / .pt-text-strong / .pt-text-muted标题文字 .pt-text-strong
正文文字 .pt-text
次要说明文字 .pt-text-muted
.pt-button（hover / active / focus-visible）.pt-input.pt-focus-ring点击我，或用 Tab 聚焦查看焦点环.pt-danger危险操作文字主题 token 取值
| Token | 用途 | 预览 | 亮色取值 | 暗色取值 |
|---|---|---|---|---|
--pt-surface | 常规表面背景 | rgb(255 255 255 / 0.45) | rgb(255 255 255 / 0.08) | |
--pt-surface-strong | 强调表面背景 | rgb(255 255 255 / 0.8) | rgb(24 24 27 / 0.88) | |
--pt-text | 正文文字 | rgb(64 64 64) | rgb(229 229 229) | |
--pt-text-strong | 强调文字 | rgb(38 38 38) | rgb(245 245 245) | |
--pt-text-muted | 弱化文字 | rgb(115 115 115) | rgb(161 161 170) | |
--pt-accent | 主题强调色 | rgb(2 132 199) | rgb(56 189 248) | |
--pt-accent-contrast | 强调色上的对比文字色 | rgb(255 255 255) | rgb(8 47 73) | |
--pt-accent-hover | 强调色 hover 态 | rgb(3 105 161) | rgb(125 211 252) | |
--pt-border | 边框 | rgb(255 255 255 / 0.45) | rgb(255 255 255 / 0.14) | |
--pt-input | 输入控件背景 | rgb(255 255 255 / 0.7) | rgb(255 255 255 / 0.14) | |
--pt-danger | 危险色 | rgb(220 38 38) | rgb(252 165 165) | |
--pt-focus-ring | 焦点环 | rgb(2 132 199) | rgb(125 211 252) | |
--pt-radius-sm | 圆角（小） | 0.75rem | 0.75rem | |
--pt-radius-md | 圆角（中） | 1rem | 1rem | |
--pt-radius-lg | 圆角（大） | 1.5rem | 1.5rem | |
--pt-shadow | 阴影 | 0 10px 15px -3px rgb(0 0 0 / 0.1) | 0 10px 15px -3px rgb(0 0 0 / 0.32) | |
--pt-font-sans | 正文字体族 | 字体示例 Aa 中文字体 | Inter, PingFang SC, Microsoft YaHei, system-ui, sans-serif | Inter, PingFang SC, Microsoft YaHei, system-ui, sans-serif |
--pt-motion-duration | 动效时长 | — | 150ms | 150ms |
--pt-motion-easing | 动效缓动 | — | ease | ease |
--pt-color-scheme | color-scheme 值 | — | light | dark |
展示内容与 SDK 源码保持同步：语义类规则镜像 packages/widget-sdk/src/theme.css，token 取值镜像宿主的 createFallbackTokens，由 pnpm --filter docs-site verify:theme-css 自动校验完整性。
主题 token（20 个）
token 名称属于 API v1 契约，由宿主注入到 sandbox 文档 :root，主题切换时同步更新：
| token | 用途 |
|---|---|
--pt-surface | 常规表面背景 |
--pt-surface-strong | 强调表面背景 |
--pt-text | 正文文字 |
--pt-text-strong | 强调文字 |
--pt-text-muted | 弱化文字 |
--pt-accent | 主题强调色 |
--pt-accent-contrast | 强调色上的对比文字色 |
--pt-accent-hover | 强调色 hover 态 |
--pt-border | 边框 |
--pt-input | 输入控件背景 |
--pt-danger | 危险色 |
--pt-focus-ring | 焦点环 |
--pt-radius-sm / --pt-radius-md / --pt-radius-lg | 圆角 |
--pt-shadow | 阴影 |
--pt-font-sans | 正文字体族 |
--pt-motion-duration / --pt-motion-easing | 动效时长与缓动 |
--pt-color-scheme | color-scheme 值（light/dark） |
对应的 TypeScript 联合类型为 WidgetThemeTokenName；themeChanged 事件可携带 WidgetThemeTokens（{ version: 1; values: Record<WidgetThemeTokenName, string> }）快照。
不要引用宿主内部的 --theme-* 变量或宿主 UI 框架的工具类——它们不是公开契约。宿主通过显式映射表把内部变量翻译成 --pt-*，未映射的内部变量永远不会暴露给组件。