Semantic / 颜色
Border Color
分隔、结构、焦点、选中和状态边框。
展示
系统样例
border.separator分隔线
border.subtle弱边框
border.default默认边框
border.strong强边框
border.focus焦点边框
border.selectedNeutral中性选中边框
border.selectedAccent强调选中边框
border.disabled禁用边框
border.inverse反色边框
Token
1 个分类
| 名称 | 类型 | 浅色 | 深色 | 预览 |
|---|---|---|---|---|
semantic.color.border.separator分隔线 | color | oklch(0.9 0.002 255) | oklch(0.38 0.007 255) | |
semantic.color.border.subtle弱边框 | color | oklch(0.9 0.002 255) | oklch(0.38 0.007 255) | |
semantic.color.border.default默认边框 | color | oklch(0.82 0.004 255) | oklch(0.47 0.01 255) | |
semantic.color.border.strong强边框 | color | oklch(0.47 0.01 255) | oklch(0.82 0.004 255) | |
semantic.color.border.focus焦点边框 | color | oklch(0.368 0.161 261.395) | oklch(0.82 0.052 261.395) | |
semantic.color.border.selectedNeutral中性选中边框 | color | oklch(0.64 0.013 255) | oklch(0.64 0.013 255) | |
semantic.color.border.selectedAccent强调选中边框 | color | oklch(0.368 0.161 261.395) | oklch(0.82 0.052 261.395) | |
semantic.color.border.disabled禁用边框 | color | oklch(0.9 0.002 255) | oklch(0.38 0.007 255) | |
semantic.color.border.inverse反色边框 | color | oklch(0.98 0 255) | oklch(0.2 0.001 255) |
使用
使用规则
可以使用强调色
- 主要操作
- 链接
- 复选框、单选框与开关
- 可见焦点
- 语义状态
默认保持中性
- 分段控制
- 标签页
- 侧边导航
- 分页
- 卡片、列表与表格的选中状态