语义 / 颜色
状态颜色
信息、成功、警告和危险状态。
展示
系统样例
status.info.foreground信息前景
status.info.subtle信息弱背景
status.info.subtleHover信息弱背景悬停
status.info.subtlePressed信息弱背景按下
status.info.strong信息强背景
status.info.strongHover信息强背景悬停
status.info.strongPressed信息强背景按下
status.success.foreground成功前景
status.success.subtle成功弱背景
status.success.subtleHover成功弱背景悬停
status.success.subtlePressed成功弱背景按下
status.success.strong成功强背景
status.success.strongHover成功强背景悬停
status.success.strongPressed成功强背景按下
status.warning.foreground警告前景
status.warning.subtle警告弱背景
status.warning.subtleHover警告弱背景悬停
status.warning.subtlePressed警告弱背景按下
status.warning.strong警告强背景
status.warning.strongHover警告强背景悬停
status.warning.strongPressed警告强背景按下
status.danger.foreground危险前景
status.danger.subtle危险弱背景
status.danger.subtleHover危险弱背景悬停
status.danger.subtlePressed危险弱背景按下
status.danger.strong危险强背景
status.danger.strongHover危险强背景悬停
status.danger.strongPressed危险强背景按下
Token
1 个分类
| 名称 | 类型 | 浅色 | 深色 | 预览 |
|---|---|---|---|---|
semantic.color.status.info.foreground信息前景 | color | oklch(0.368 0.161 261.395) | oklch(0.82 0.052 261.395) | |
semantic.color.status.info.subtle信息弱背景 | color | oklch(0.95 0.006 261.395) | oklch(0.29 0.058 261.395) | |
semantic.color.status.info.subtleHover信息弱背景悬停 | color | oklch(0.9 0.019 261.395) | oklch(0.368 0.161 261.395) | |
semantic.color.status.info.subtlePressed信息弱背景按下 | color | oklch(0.82 0.052 261.395) | oklch(0.47 0.167 261.395) | |
semantic.color.status.info.strong信息强背景 | color | oklch(0.368 0.161 261.395) | oklch(0.82 0.052 261.395) | |
semantic.color.status.info.strongHover信息强背景悬停 | color | oklch(0.29 0.058 261.395) | oklch(0.9 0.019 261.395) | |
semantic.color.status.info.strongPressed信息强背景按下 | color | oklch(0.2 0.022 261.395) | oklch(0.95 0.006 261.395) | |
semantic.color.status.success.foreground成功前景 | color | oklch(0.38 0.059 150) | oklch(0.82 0.113 150) | |
semantic.color.status.success.subtle成功弱背景 | color | oklch(0.95 0.017 150) | oklch(0.29 0.031 150) | |
semantic.color.status.success.subtleHover成功弱背景悬停 | color | oklch(0.9 0.062 150) | oklch(0.38 0.059 150) | |
semantic.color.status.success.subtlePressed成功弱背景按下 | color | oklch(0.82 0.113 150) | oklch(0.47 0.089 150) | |
semantic.color.status.success.strong成功强背景 | color | oklch(0.38 0.059 150) | oklch(0.82 0.113 150) | |
semantic.color.status.success.strongHover成功强背景悬停 | color | oklch(0.29 0.031 150) | oklch(0.9 0.062 150) | |
semantic.color.status.success.strongPressed成功强背景按下 | color | oklch(0.2 0.012 150) | oklch(0.95 0.017 150) | |
semantic.color.status.warning.foreground警告前景 | color | oklch(0.38 0.055 55) | oklch(0.82 0.061 55) | |
semantic.color.status.warning.subtle警告弱背景 | color | oklch(0.95 0.006 55) | oklch(0.29 0.029 55) | |
semantic.color.status.warning.subtleHover警告弱背景悬停 | color | oklch(0.9 0.022 55) | oklch(0.38 0.055 55) | |
semantic.color.status.warning.subtlePressed警告弱背景按下 | color | oklch(0.82 0.061 55) | oklch(0.47 0.084 55) | |
semantic.color.status.warning.strong警告强背景 | color | oklch(0.38 0.055 55) | oklch(0.82 0.061 55) | |
semantic.color.status.warning.strongHover警告强背景悬停 | color | oklch(0.29 0.029 55) | oklch(0.9 0.022 55) | |
semantic.color.status.warning.strongPressed警告强背景按下 | color | oklch(0.2 0.011 55) | oklch(0.95 0.006 55) | |
semantic.color.status.danger.foreground危险前景 | color | oklch(0.38 0.095 25) | oklch(0.82 0.056 25) | |
semantic.color.status.danger.subtle危险弱背景 | color | oklch(0.95 0.006 25) | oklch(0.29 0.05 25) | |
semantic.color.status.danger.subtleHover危险弱背景悬停 | color | oklch(0.9 0.02 25) | oklch(0.38 0.095 25) | |
semantic.color.status.danger.subtlePressed危险弱背景按下 | color | oklch(0.82 0.056 25) | oklch(0.47 0.145 25) | |
semantic.color.status.danger.strong危险强背景 | color | oklch(0.38 0.095 25) | oklch(0.82 0.056 25) | |
semantic.color.status.danger.strongHover危险强背景悬停 | color | oklch(0.29 0.05 25) | oklch(0.9 0.02 25) | |
semantic.color.status.danger.strongPressed危险强背景按下 | color | oklch(0.2 0.019 25) | oklch(0.95 0.006 25) |
使用
使用规则
可以使用强调色
- 主要操作
- 链接
- 复选框、单选框与开关
- 可见焦点
- 语义状态
默认保持中性
- 分段控制
- 标签页
- 侧边导航
- 分页
- 卡片、列表与表格的选中状态