WAPER / UI
颜色
按用途组织的颜色变量、亮暗色值，以及文字与页面背景的对比度。
亮色
正在加载预览…
暗色
正在加载预览…
WaperDesign底色层级
--surface-sidebar…侧栏
--surface-base…对话区、设置、右侧面板、页面的默认底
--surface-pane…「纸」：文档、编辑器、阅读区
--surface-inset…页面里嵌进去的一块：代码块、提示条、表头、缩略图占位
--surface-l2…头像占位、缩略图底、骨架屏
--surface-elevated…菜单、对话框、tooltip、toast、卡片
--surface-elevated-hover…elevated 上的悬停
--bubble-agent…Agent 的气泡
--bubble-user…你的消息（亮色墨色实底，暗色白 18%）
--bubble-user-fg…你的消息里的字
--overlay…对话框后面的遮罩（不模糊）
文字
Aa
--fg-primary…正文、实心按钮
Aa
--fg-secondary…说明、幽灵按钮、主 Agent 的名字
Aa
--fg-tertiary…元信息与数量（在各层底与 Agent 气泡上 AA）
Aa
--fg-quaternary…只用于占位与装饰
Aa
--fg-disabled…禁用的字
Aa
--fg-accent-text…链接与强调文字
Aa
--fg-danger…出错、危险操作的字
Aa
--fg-success…完成的字
Aa
--fg-warning…注意的字
Aa
--code-inline-fg…行内代码的字
图标
--icon-primary…悬停或选中时的图标、浮起按钮的图标
--icon-secondary…默认的图标
--icon-tertiary…箭头、放大镜
--icon-quaternary…分隔、装饰
填充
--fill-hover…幽灵悬停
--fill-active…选中的行
--fill-secondary…次按钮、筛选片、当前的分段标签
--fill-secondary-hover…次按钮悬停
--fill-tertiary…安静的块
--fill-quaternary…最安静的块、禁用的次按钮
--code-inline…行内代码的底
--scrollbar-thumb…滚动条（悬停滚动区域时出现）
--fg-accent…开关打开、勾选、进度
--fg-accent-hover…强调色悬停
--focus…键盘焦点框
--success-solid…成功的状态点与图标
--warning-solid…警告的状态点与图标
--danger-solid…危险的状态点与图标
边框
--border-primary…输入框聚焦、勾选框边
--border-secondary…输入框平时、菜单与对话框的边
--border-tertiary…浮起来的控件与卡片
--border-quaternary…分隔线
--border-edge…浮起来的控件与卡片
--border-input…输入类控件平时
--border-input-focus…输入类控件聚焦（只深一档，没有外圈）
--border-overlay…菜单、弹层、tooltip、对话框
按钮
--button-filled…主按钮
--button-filled-hover…主按钮悬停
--button-filled-active…主按钮按下（按钮外的用处）
--button-filled-fg…主按钮的字
--button-filled-disabled…禁用的主按钮
--button-secondary-fill…次按钮
--button-secondary-hover…次按钮悬停
--button-secondary-active…次按钮按下（按钮外的用处）
--button-ghost-hover…幽灵按钮悬停
--button-ghost-active…幽灵按钮展开
--button-accent…强调色实心按钮
--button-accent-hover…强调色实心按钮悬停
--accent-soft-hover…强调色浅底按钮悬停
--accent-disabled…禁用的强调色按钮
--button-danger…实心危险按钮
--button-danger-hover…实心危险按钮悬停
--danger-soft-hover…危险浅底按钮悬停
--danger-disabled…禁用的危险按钮
--chrome-fill…压在图片上的按钮（加模糊）
--chrome-fill-hover…chrome 悬停
信号色
--signal…信号色：需要你
--on-signal…信号色上的字
--on-accent…强调色上的字
--signal-soft…信号徽章的底
--signal-foreground…信号徽章的字
状态色：浅底 + 字成对
提示 · 12 个信源有更新
--accent-soft / --accent-on-soft完成 · 12 个信源有更新
--success-soft / --success-on-soft注意 · 12 个信源有更新
--warning-soft / --warning-on-soft失败 · 12 个信源有更新
--danger-soft / --danger-on-soft需要你 · 12 个信源有更新
--signal-soft / --signal-foregroundAgent 身体色
每种颜色另有名字用的字色和悬停名字时的浅底（把鼠标移上去看）。
--agent-coral…
--agent-orange…
--agent-sun…
--agent-lime…
--agent-mint…
--agent-teal…
--agent-sky…
--agent-lavender…
--agent-pink…
--agent-cocoa…
--agent-stone…
--agent-ink…
底色层级
--surface-sidebar…侧栏
--surface-base…对话区、设置、右侧面板、页面的默认底
--surface-pane…「纸」：文档、编辑器、阅读区
--surface-inset…页面里嵌进去的一块：代码块、提示条、表头、缩略图占位
--surface-l2…头像占位、缩略图底、骨架屏
--surface-elevated…菜单、对话框、tooltip、toast、卡片
--surface-elevated-hover…elevated 上的悬停
--bubble-agent…Agent 的气泡
--bubble-user…你的消息（亮色墨色实底，暗色白 18%）
--bubble-user-fg…你的消息里的字
--overlay…对话框后面的遮罩（不模糊）
文字
Aa
--fg-primary…正文、实心按钮
Aa
--fg-secondary…说明、幽灵按钮、主 Agent 的名字
Aa
--fg-tertiary…元信息与数量（在各层底与 Agent 气泡上 AA）
Aa
--fg-quaternary…只用于占位与装饰
Aa
--fg-disabled…禁用的字
Aa
--fg-accent-text…链接与强调文字
Aa
--fg-danger…出错、危险操作的字
Aa
--fg-success…完成的字
Aa
--fg-warning…注意的字
Aa
--code-inline-fg…行内代码的字
图标
--icon-primary…悬停或选中时的图标、浮起按钮的图标
--icon-secondary…默认的图标
--icon-tertiary…箭头、放大镜
--icon-quaternary…分隔、装饰
填充
--fill-hover…幽灵悬停
--fill-active…选中的行
--fill-secondary…次按钮、筛选片、当前的分段标签
--fill-secondary-hover…次按钮悬停
--fill-tertiary…安静的块
--fill-quaternary…最安静的块、禁用的次按钮
--code-inline…行内代码的底
--scrollbar-thumb…滚动条（悬停滚动区域时出现）
--fg-accent…开关打开、勾选、进度
--fg-accent-hover…强调色悬停
--focus…键盘焦点框
--success-solid…成功的状态点与图标
--warning-solid…警告的状态点与图标
--danger-solid…危险的状态点与图标
边框
--border-primary…输入框聚焦、勾选框边
--border-secondary…输入框平时、菜单与对话框的边
--border-tertiary…浮起来的控件与卡片
--border-quaternary…分隔线
--border-edge…浮起来的控件与卡片
--border-input…输入类控件平时
--border-input-focus…输入类控件聚焦（只深一档，没有外圈）
--border-overlay…菜单、弹层、tooltip、对话框
按钮
--button-filled…主按钮
--button-filled-hover…主按钮悬停
--button-filled-active…主按钮按下（按钮外的用处）
--button-filled-fg…主按钮的字
--button-filled-disabled…禁用的主按钮
--button-secondary-fill…次按钮
--button-secondary-hover…次按钮悬停
--button-secondary-active…次按钮按下（按钮外的用处）
--button-ghost-hover…幽灵按钮悬停
--button-ghost-active…幽灵按钮展开
--button-accent…强调色实心按钮
--button-accent-hover…强调色实心按钮悬停
--accent-soft-hover…强调色浅底按钮悬停
--accent-disabled…禁用的强调色按钮
--button-danger…实心危险按钮
--button-danger-hover…实心危险按钮悬停
--danger-soft-hover…危险浅底按钮悬停
--danger-disabled…禁用的危险按钮
--chrome-fill…压在图片上的按钮（加模糊）
--chrome-fill-hover…chrome 悬停
信号色
--signal…信号色：需要你
--on-signal…信号色上的字
--on-accent…强调色上的字
--signal-soft…信号徽章的底
--signal-foreground…信号徽章的字
状态色：浅底 + 字成对
提示 · 12 个信源有更新
--accent-soft / --accent-on-soft完成 · 12 个信源有更新
--success-soft / --success-on-soft注意 · 12 个信源有更新
--warning-soft / --warning-on-soft失败 · 12 个信源有更新
--danger-soft / --danger-on-soft需要你 · 12 个信源有更新
--signal-soft / --signal-foregroundAgent 身体色
每种颜色另有名字用的字色和悬停名字时的浅底（把鼠标移上去看）。
--agent-coral…
--agent-orange…
--agent-sun…
--agent-lime…
--agent-mint…
--agent-teal…
--agent-sky…
--agent-lavender…
--agent-pink…
--agent-cocoa…
--agent-stone…
--agent-ink…