- 变量全部以 Tuffex 默认值为准。
- 暗色模式支持
[data-theme='dark'] 与 .dark 两种选择器。
主字体栈
--tx-font-family:
"Inter", "PingFang SC", "Microsoft YaHei",
"Helvetica Neue", Arial, 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 | #4ade80 | 成功状态 |
--tx-color-warning | #e6a23c | #fbbf24 | 警告状态 |
--tx-color-danger | #f56c6c | #f87171 | 错误状态 |
--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 | 最浅边框 |
- Token 说明: 表格记录的是
variables.scss 中默认 light/dark 变量。高对比 mixin 定义了另一组值；Tuff 暴露该模式时应单独补充文档。 - 导入说明: 新页面应使用
@talex-touch/tuffex/base.css 加按组件的 style import。完整 @talex-touch/tuffex/style.css bundle 只是迁移兼容入口，不是文档推荐模式。 - 实测覆盖: 本页已按
variables.scss 人工核对；docs smoke 覆盖由 component-docs coverage 测试与 demo lazy/client-boundary 测试提供。 - Token source:
packages/tuffex/packages/components/style/variables.scss。 - Runtime entry:
@talex-touch/tuffex/base.css 提供变量/基础样式，@talex-touch/tuffex/<component>/style.css 提供组件级 CSS。 - Coverage:
apps/nexus/test/docs/tuffex-component-docs-coverage.test.ts 校验组件文档注册；apps/nexus/app/components/content/demo-lazy.test.ts 与 demo-client-boundary.test.ts 校验 demo 加载边界。