Tuff Docs

This page mirrors the Tuffex variable system so Nexus docs render the same visual tokens.

Source of truth: packages/tuffex/packages/components/style/variables.scss
Loaded by: @talex-touch/tuffex/style.css

Typography

Primary font stack

font-family:
  'PingFang SC', '-apple-system', 'Helvetica Neue', 'Segoe UI',
  'Microsoft YaHei', 'Noto Sans SC', 'DM Sans', 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`	`#67c23a`	Success states
`--tx-color-warning`	`#e6a23c`	`#e6a23c`	Warning states
`--tx-color-danger`	`#f56c6c`	`#f56c6c`	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