93c77c5857
- 新增 $white 语义变量 + --tk-font-display Token - 44 处 #fff → $white，2 处 background: #fff → $card - 14 处 border-radius 硬编码统一为 $r-xs/$r-lg/$r - 3 处 TSX inline 颜色提取为 SCSS 类（exchange/orders/action-inbox） - ErrorBoundary 重构：6 个 inline style → SCSS 类 + Design Token - 2 处离调色板颜色修正（#0284C7→$tx2, #94A3B8→$tx3） - 2 处静默 catch 块添加状态清理（article/health） - 趋势页补 Loading/EmptyState；咨询页 GuestGuard 统一 - 4 处 #FFFFFF → $white（mixins/index/exchange/variables）
52 lines
2.1 KiB
SCSS
52 lines
2.1 KiB
SCSS
// Design Token — CSS 自定义属性（校准后）
|
||
// 基于全量审计：600+ font-size 声明的频率分布
|
||
// 页面样式应引用 var(--tk-*) 而非硬编码 px 值
|
||
// 关怀模式通过 .elder-mode 覆盖 token 值自动生效
|
||
|
||
// ═══════════════════════════════════════
|
||
// 正常模式 Token
|
||
// ═══════════════════════════════════════
|
||
page {
|
||
// ─── 字号（11 级，覆盖 92.5% 场景）───
|
||
--tk-font-display: 72px; // 大型装饰数值（积分余额、空状态图标）
|
||
--tk-font-hero: 48px; // 装饰图标、空状态字符
|
||
--tk-font-h1: 26px; // 页面/区块标题
|
||
--tk-font-h2: 24px; // 副标题、日期、菜单组
|
||
--tk-font-body-lg: 28px; // 大正文、按钮（页面默认字号）
|
||
--tk-font-body: 22px; // 正文、标签
|
||
--tk-font-body-sm: 16px; // 中等正文、列表项
|
||
--tk-font-num: 30px; // 数值
|
||
--tk-font-num-lg: 34px; // 大数值、统计
|
||
--tk-font-cap: 13px; // 说明文字、时间戳
|
||
--tk-font-micro: 11px; // 角标、标签
|
||
|
||
// ─── 结构 ───
|
||
--tk-line-height: 1.5;
|
||
--tk-touch-min: 48px;
|
||
--tk-btn-primary-h: 56px;
|
||
--tk-text-secondary: #78716C; // $tx3 — 关怀模式提升对比度
|
||
}
|
||
|
||
// ═══════════════════════════════════════
|
||
// 关怀模式 Token（非线性放大）
|
||
// 标题 ×1.15 / 正文 ×1.35 / 辅助 ×1.55
|
||
// ═══════════════════════════════════════
|
||
.elder-mode {
|
||
--tk-font-display: 80px;
|
||
--tk-font-hero: 56px;
|
||
--tk-font-h1: 30px;
|
||
--tk-font-h2: 28px;
|
||
--tk-font-body-lg: 34px;
|
||
--tk-font-body: 30px;
|
||
--tk-font-body-sm: 22px;
|
||
--tk-font-num: 34px;
|
||
--tk-font-num-lg: 40px;
|
||
--tk-font-cap: 18px;
|
||
--tk-font-micro: 17px;
|
||
|
||
--tk-line-height: 1.7;
|
||
--tk-touch-min: 56px;
|
||
--tk-btn-primary-h: 64px;
|
||
--tk-text-secondary: #5A554F; // $tx2 — 对比度提升
|
||
}
|