Primary font stack
--tx-font-family:
"Inter", "PingFang SC", "Microsoft YaHei",
"Helvetica Neue", Arial, sans-serif;
Sizing + weight
--tx-font-size-base: 14px;
--tx-font-size-small: 12px;
--tx-font-size-large: 16px;
--tx-font-weight-primary: 500;
| Token | Light | Dark | Usage |
|---|
--tx-color-primary | #409eff | #409eff | Primary actions |
--tx-color-success | #67c23a | #4ade80 | Success states |
--tx-color-warning | #e6a23c | #fbbf24 | Warning states |
--tx-color-danger | #f56c6c | #f87171 | Error states |
--tx-color-info | #909399 | #909399 | Informational states |
| Token | Light | Dark | Usage |
|---|
--tx-color-primary-light-3 | #79bbff | #3375b9 | Hover / focus tint |
--tx-color-primary-light-5 | #a0cfff | #2a598a | Soft tint |
--tx-color-primary-light-7 | #c6e2ff | #213d5b | Subtle tint |
--tx-color-primary-light-9 | #ecf5ff | #18222c | Surface tint |
--tx-color-primary-dark-2 | #337ecc | #66b1ff | Active tint |
| Token | Light | Dark | Usage |
|---|
--tx-text-color-primary | #303133 | #e5eaf3 | Primary text |
--tx-text-color-regular | #606266 | #cfd3dc | Body text |
--tx-text-color-secondary | #909399 | #a3a6ad | Secondary text |
--tx-text-color-placeholder | #a8abb2 | #8d9095 | Placeholder text |
--tx-text-color-disabled | #c0c4cc | #6c6e72 | Disabled text |
| Token | Light | Dark | Usage |
|---|
--tx-bg-color | #ffffff | #141414 | App background |
--tx-bg-color-page | #f2f3f5 | #0a0a0a | Page canvas |
--tx-bg-color-overlay | #ffffff | #1d1e1f | Overlays |
--tx-fill-color | #f0f2f5 | #303030 | Subtle fills |
--tx-fill-color-light | #f5f7fa | #262727 | Lighter fill |
--tx-fill-color-lighter | #fafafa | #1d1d1d | Lightest fill |
--tx-fill-color-darker | #ebeef5 | #3a3a3a | Darker fill |
--tx-fill-color-blank | #ffffff | transparent | Blank fill |
--tx-border-color | #dcdfe6 | #4c4d4f | Default borders |
--tx-border-color-light | #e4e7ed | #414243 | Light borders |
--tx-border-color-lighter | #ebeef5 | #363637 | Lighter borders |
--tx-border-color-extra-light | #f2f6fc | #2b2b2c | Extra light borders |
- Tokens follow the Tuffex default palette.
- Dark mode uses
[data-theme='dark'] or .dark.
- Token note: The tables document the default light/dark variables from
variables.scss. High-contrast mixins define alternate values and should be documented separately when Nexus exposes that mode. - Import note: New pages should use
@talex-touch/tuffex/base.css plus per-component style imports. The full @talex-touch/tuffex/style.css bundle remains a migration compatibility entry, not the preferred docs pattern. - Verified coverage: This page was manually checked against
variables.scss; docs smoke coverage is provided by the component-docs coverage test and demo lazy/client-boundary tests.
- Token source:
packages/tuffex/packages/components/style/variables.scss. - Runtime entry:
@talex-touch/tuffex/base.css for variables/base styles, and @talex-touch/tuffex/<component>/style.css for component-level CSS. - Coverage:
apps/nexus/test/docs/tuffex-component-docs-coverage.test.ts verifies component doc registration; apps/nexus/app/components/content/demo-lazy.test.ts and demo-client-boundary.test.ts verify demo loading boundaries.