设计基础 | Tuff Docs

本页与 Tuffex 变量体系保持一致，确保 Nexus 文档渲染出来的视觉与 Tuffex 相同。

单一来源：packages/tuffex/packages/components/style/variables.scss
加载入口：@talex-touch/tuffex/style.css

字体

主字体栈

font-family:
  'PingFang SC', '-apple-system', 'Helvetica Neue', 'Segoe UI',
  'Microsoft YaHei', 'Noto Sans SC', 'DM Sans', sans-serif;

字号与字重

--tx-font-size-base: 14px;
--tx-font-size-small: 12px;
--tx-font-size-large: 16px;
--tx-font-weight-primary: 500;

Token	Light	Dark	用途
`--tx-color-primary`	`#409eff`	`#409eff`	主操作
`--tx-color-success`	`#67c23a`	`#67c23a`	成功状态
`--tx-color-warning`	`#e6a23c`	`#e6a23c`	警告状态
`--tx-color-danger`	`#f56c6c`	`#f56c6c`	错误状态
`--tx-color-info`	`#909399`	`#909399`	信息提示

Token	Light	Dark	用途
`--tx-color-primary-light-3`	`#79bbff`	`#3375b9`	悬停/聚焦
`--tx-color-primary-light-5`	`#a0cfff`	`#2a598a`	轻度背景
`--tx-color-primary-light-7`	`#c6e2ff`	`#213d5b`	微弱背景
`--tx-color-primary-light-9`	`#ecf5ff`	`#18222c`	面层底色
`--tx-color-primary-dark-2`	`#337ecc`	`#66b1ff`	激活态

Token	Light	Dark	用途
`--tx-text-color-primary`	`#303133`	`#e5eaf3`	主文本
`--tx-text-color-regular`	`#606266`	`#cfd3dc`	正文
`--tx-text-color-secondary`	`#909399`	`#a3a6ad`	次级文本
`--tx-text-color-placeholder`	`#a8abb2`	`#8d9095`	占位文本
`--tx-text-color-disabled`	`#c0c4cc`	`#6c6e72`	禁用文本

Token	Light	Dark	用途
`--tx-bg-color`	`#ffffff`	`#141414`	应用背景
`--tx-bg-color-page`	`#f2f3f5`	`#0a0a0a`	页面画布
`--tx-bg-color-overlay`	`#ffffff`	`#1d1e1f`	浮层
`--tx-fill-color`	`#f0f2f5`	`#303030`	弱填充
`--tx-fill-color-light`	`#f5f7fa`	`#262727`	更浅填充
`--tx-fill-color-lighter`	`#fafafa`	`#1d1d1d`	最浅填充
`--tx-fill-color-darker`	`#ebeef5`	`#3a3a3a`	更深填充
`--tx-fill-color-blank`	`#ffffff`	`transparent`	透明填充
`--tx-border-color`	`#dcdfe6`	`#4c4d4f`	默认边框
`--tx-border-color-light`	`#e4e7ed`	`#414243`	浅边框
`--tx-border-color-lighter`	`#ebeef5`	`#363637`	更浅边框
`--tx-border-color-extra-light`	`#f2f6fc`	`#2b2b2c`	最浅边框