- Values are the defaults; to override them, see Theming.
- The Dark column applies under
[data-theme='dark'] or .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 | 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 |
- Source:
packages/tuffex/packages/components/style/variables.scss, shipped as @talex-touch/tuffex/base.css. - The high-contrast palette has its own values; see Theming.