语义 / 颜色
背景颜色
页面、分组、浮层、交互和选中背景。
展示
系统样例
background.canvas页面背景
background.transparent透明背景
background.base基础表面
background.secondary次级表面
background.tertiary三级表面
background.grouped分组背景
background.raised浮起表面
background.elevated浮层表面
background.overlay覆盖表面
background.inverse反色背景
background.inverseHover反色背景悬停
background.inversePressed反色背景按下
background.hover中性悬停
background.pressed中性按下
background.selectedNeutral中性选中
background.selectedAccent强调选中
background.disabled禁用背景
background.accent主要强调背景
background.accentHover主要强调悬停
background.accentPressed主要强调按下
background.accentSubtle弱强调背景
background.accentSubtleHover弱强调悬停
background.accentSubtlePressed弱强调按下
Token
1 个分类
| 名称 | 类型 | 浅色 | 深色 | 预览 |
|---|---|---|---|---|
semantic.color.background.canvas页面背景 | color | oklch(0.98 0 255) | oklch(0.2 0.001 255) | |
semantic.color.background.transparent透明背景 | color | oklch(0 0 0 / 0) | oklch(0 0 0 / 0) | |
semantic.color.background.base基础表面 | color | oklch(1 0 0) | oklch(0.29 0.003 255) | |
semantic.color.background.secondary次级表面 | color | oklch(0.95 0 255) | oklch(0.38 0.007 255) | |
semantic.color.background.tertiary三级表面 | color | oklch(0.9 0.002 255) | oklch(0.47 0.01 255) | |
semantic.color.background.grouped分组背景 | color | oklch(0.95 0 255) | oklch(0.2 0.001 255) | |
semantic.color.background.raised浮起表面 | color | oklch(1 0 0) | oklch(0.29 0.003 255) | |
semantic.color.background.elevated浮层表面 | color | oklch(1 0 0) | oklch(0.38 0.007 255) | |
semantic.color.background.overlay覆盖表面 | color | oklch(1 0 0) | oklch(0.29 0.003 255) | |
semantic.color.background.inverse反色背景 | color | oklch(0.2 0.001 255) | oklch(0.98 0 255) | |
semantic.color.background.inverseHover反色背景悬停 | color | oklch(0.38 0.007 255) | oklch(0.95 0 255) | |
semantic.color.background.inversePressed反色背景按下 | color | oklch(0.47 0.01 255) | oklch(0.9 0.002 255) | |
semantic.color.background.hover中性悬停 | color | oklch(0.95 0 255) | oklch(0.38 0.007 255) | |
semantic.color.background.pressed中性按下 | color | oklch(0.9 0.002 255) | oklch(0.47 0.01 255) | |
semantic.color.background.selectedNeutral中性选中 | color | oklch(0.9 0.002 255) | oklch(0.47 0.01 255) | |
semantic.color.background.selectedAccent强调选中 | color | oklch(0.368 0.161 261.395) | oklch(0.82 0.052 261.395) | |
semantic.color.background.disabled禁用背景 | color | oklch(0.95 0 255) | oklch(0.38 0.007 255) | |
semantic.color.background.accent主要强调背景 | color | oklch(0.368 0.161 261.395) | oklch(0.82 0.052 261.395) | |
semantic.color.background.accentHover主要强调悬停 | color | oklch(0.29 0.058 261.395) | oklch(0.9 0.019 261.395) | |
semantic.color.background.accentPressed主要强调按下 | color | oklch(0.2 0.022 261.395) | oklch(0.95 0.006 261.395) | |
semantic.color.background.accentSubtle弱强调背景 | color | oklch(0.95 0.006 261.395) | oklch(0.29 0.058 261.395) | |
semantic.color.background.accentSubtleHover弱强调悬停 | color | oklch(0.9 0.019 261.395) | oklch(0.368 0.161 261.395) | |
semantic.color.background.accentSubtlePressed弱强调按下 | color | oklch(0.82 0.052 261.395) | oklch(0.47 0.167 261.395) |
使用
使用规则
可以使用强调色
- 主要操作
- 链接
- 复选框、单选框与开关
- 可见焦点
- 语义状态
默认保持中性
- 分段控制
- 标签页
- 侧边导航
- 分页
- 卡片、列表与表格的选中状态