Text Color颜色

Semantic / 颜色

Text Color

正文、辅助、反色、链接和状态文字。

展示

系统样例

text.primary主文字
text.secondary次级文字
text.tertiary辅助文字
text.quaternary最弱文字
text.placeholder占位文字
text.disabled禁用文字
text.inverse反色文字
text.link链接文字
text.linkHover链接悬停
text.onAccent强调表面文字
text.info信息文字
text.success成功文字
text.warning警告文字
text.danger危险文字

Token

1 个分类

名称类型浅色深色预览
semantic.color.text.primary主文字coloroklch(0.2 0.001 255)oklch(0.98 0 255)
semantic.color.text.secondary次级文字coloroklch(0.47 0.01 255)oklch(0.82 0.004 255)
semantic.color.text.tertiary辅助文字coloroklch(0.56 0.013 255)oklch(0.73 0.008 255)
semantic.color.text.quaternary最弱文字coloroklch(0.64 0.013 255)oklch(0.64 0.013 255)
semantic.color.text.placeholder占位文字coloroklch(0.56 0.013 255)oklch(0.73 0.008 255)
semantic.color.text.disabled禁用文字coloroklch(0.64 0.013 255)oklch(0.56 0.013 255)
semantic.color.text.inverse反色文字coloroklch(0.98 0 255)oklch(0.2 0.001 255)
semantic.color.text.link链接文字coloroklch(0.368 0.161 261.395)oklch(0.82 0.052 261.395)
semantic.color.text.linkHover链接悬停coloroklch(0.29 0.058 261.395)oklch(0.9 0.019 261.395)
semantic.color.text.onAccent强调表面文字coloroklch(1 0 0)oklch(0.2 0.001 255)
semantic.color.text.info信息文字coloroklch(0.368 0.161 261.395)oklch(0.82 0.052 261.395)
semantic.color.text.success成功文字coloroklch(0.38 0.059 150)oklch(0.82 0.113 150)
semantic.color.text.warning警告文字coloroklch(0.29 0.029 55)oklch(0.82 0.061 55)
semantic.color.text.danger危险文字coloroklch(0.38 0.095 25)oklch(0.82 0.056 25)

使用

使用规则

可以使用强调色

  • 主要操作
  • 链接
  • 复选框、单选框与开关
  • 可见焦点
  • 语义状态

默认保持中性

  • 分段控制
  • 标签页
  • 侧边导航
  • 分页
  • 卡片、列表与表格的选中状态
Design system