refactor(miniprogram): 全面接入 Design Token — 68 SCSS 文件 px→var(--tk-*)
- 重写 tokens.scss：校准 10 级字号 + 4 结构 token 匹配实际设计值 - 更新 mixins.scss：4 个 mixin 引用 token 替代硬编码 - 68 SCSS 文件全面迁移：font-size px → var(--tk-font-*)，辅助文字色 → var(--tk-text-secondary) - 清理 12 个页面的本地 mixin 重复定义 - elder-mode.scss 从 530 行缩减至 ~120 行：删除所有字号/颜色覆写，仅保留结构布局 - Token 覆盖率：634 引用 / 仅 3 个特殊硬编码值（72px/80px/21px） 关怀模式通过 CSS 变量级联自动生效，消除"打地鼠"问题。
This commit is contained in:
iven
@@ -26,7 +26,7 @@
|
||||
}
|
||||
|
||||
.alerts-tab-text {
|
||||
font-size: 26px;
|
||||
font-size: var(--tk-font-h1);
|
||||
color: $tx2;
|
||||
}
|
||||
|
||||
@@ -75,12 +75,12 @@
|
||||
}
|
||||
|
||||
.alert-badge-text {
|
||||
font-size: 22px;
|
||||
font-size: var(--tk-font-body);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.alert-badge.sev-info .alert-badge-text {
|
||||
color: $tx3;
|
||||
color: var(--tk-text-secondary);
|
||||
}
|
||||
|
||||
.alert-badge.sev-warning .alert-badge-text {
|
||||
@@ -96,12 +96,12 @@
|
||||
}
|
||||
|
||||
.alert-time {
|
||||
font-size: 24px;
|
||||
color: $tx3;
|
||||
font-size: var(--tk-font-h2);
|
||||
color: var(--tk-text-secondary);
|
||||
}
|
||||
|
||||
.alert-title {
|
||||
font-size: 28px;
|
||||
font-size: var(--tk-font-body-lg);
|
||||
color: $tx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -115,14 +115,14 @@
|
||||
}
|
||||
|
||||
.alerts-empty-text {
|
||||
font-size: 30px;
|
||||
color: $tx3;
|
||||
font-size: var(--tk-font-num);
|
||||
color: var(--tk-text-secondary);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.alerts-empty-hint {
|
||||
font-size: 26px;
|
||||
color: $tx3;
|
||||
font-size: var(--tk-font-h1);
|
||||
color: var(--tk-text-secondary);
|
||||
}
|
||||
|
||||
.alerts-empty-action {
|
||||
@@ -134,5 +134,5 @@
|
||||
|
||||
.alerts-empty-action-text {
|
||||
color: $card;
|
||||
font-size: 28px;
|
||||
font-size: var(--tk-font-body-lg);
|
||||
}
|
||||
|
||||
@@ -26,20 +26,20 @@
|
||||
|
||||
.dm-hero-icon-text {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: 40px;
|
||||
font-size: var(--tk-font-hero);
|
||||
font-weight: bold;
|
||||
color: $pri;
|
||||
}
|
||||
|
||||
.dm-hero-title {
|
||||
@include section-title;
|
||||
font-size: 36px;
|
||||
font-size: var(--tk-font-num-lg);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.dm-hero-sub {
|
||||
font-size: 24px;
|
||||
color: $tx3;
|
||||
font-size: var(--tk-font-h2);
|
||||
color: var(--tk-text-secondary);
|
||||
}
|
||||
|
||||
/* ── card (standalone, used for date picker) ── */
|
||||
@@ -60,14 +60,14 @@
|
||||
|
||||
.dm-card-title {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: 28px;
|
||||
font-size: var(--tk-font-body-lg);
|
||||
font-weight: bold;
|
||||
color: $tx;
|
||||
}
|
||||
|
||||
.dm-card-badge {
|
||||
@include tag($acc-l, $acc);
|
||||
font-size: 22px;
|
||||
font-size: var(--tk-font-body);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@@ -82,7 +82,7 @@
|
||||
}
|
||||
|
||||
.dm-date-value {
|
||||
font-size: 28px;
|
||||
font-size: var(--tk-font-body-lg);
|
||||
color: $pri;
|
||||
@include serif-number;
|
||||
font-weight: bold;
|
||||
@@ -90,8 +90,8 @@
|
||||
|
||||
.dm-date-arrow {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: 22px;
|
||||
color: $tx3;
|
||||
font-size: var(--tk-font-body);
|
||||
color: var(--tk-text-secondary);
|
||||
transform: rotate(180deg);
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -118,14 +118,14 @@
|
||||
|
||||
.dm-group-title {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: 28px;
|
||||
font-size: var(--tk-font-body-lg);
|
||||
font-weight: 600;
|
||||
color: $tx;
|
||||
}
|
||||
|
||||
.dm-group-arrow {
|
||||
font-size: 24px;
|
||||
color: $tx3;
|
||||
font-size: var(--tk-font-h2);
|
||||
color: var(--tk-text-secondary);
|
||||
transition: transform 0.2s ease;
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -163,7 +163,7 @@
|
||||
}
|
||||
|
||||
.dm-field-label {
|
||||
font-size: 22px;
|
||||
font-size: var(--tk-font-body);
|
||||
color: $tx2;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
@@ -185,14 +185,14 @@
|
||||
|
||||
.dm-bp-slash {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: 36px;
|
||||
color: $tx3;
|
||||
font-size: var(--tk-font-num-lg);
|
||||
color: var(--tk-text-secondary);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.dm-field-unit {
|
||||
font-size: 22px;
|
||||
color: $tx3;
|
||||
font-size: var(--tk-font-body);
|
||||
color: var(--tk-text-secondary);
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-style: italic;
|
||||
@@ -210,8 +210,8 @@
|
||||
}
|
||||
|
||||
.dm-unit-inline {
|
||||
font-size: 26px;
|
||||
color: $tx3;
|
||||
font-size: var(--tk-font-h1);
|
||||
color: var(--tk-text-secondary);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -221,7 +221,7 @@
|
||||
background: $bg;
|
||||
border-radius: $r-sm;
|
||||
padding: 20px 24px;
|
||||
font-size: 28px;
|
||||
font-size: var(--tk-font-body-lg);
|
||||
color: $tx;
|
||||
@include serif-number;
|
||||
box-sizing: border-box;
|
||||
@@ -238,7 +238,7 @@
|
||||
}
|
||||
|
||||
.dm-field-warning {
|
||||
font-size: 22px;
|
||||
font-size: var(--tk-font-body);
|
||||
color: $wrn;
|
||||
margin-top: 8px;
|
||||
display: block;
|
||||
@@ -269,7 +269,7 @@
|
||||
}
|
||||
|
||||
.dm-submit-text {
|
||||
font-size: 32px;
|
||||
font-size: var(--tk-font-num);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
@@ -283,6 +283,6 @@
|
||||
}
|
||||
|
||||
.dm-reset-text {
|
||||
font-size: 26px;
|
||||
color: $tx3;
|
||||
font-size: var(--tk-font-h1);
|
||||
color: var(--tk-text-secondary);
|
||||
}
|
||||
|
||||
@@ -26,20 +26,20 @@
|
||||
|
||||
.input-hero-icon-text {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: 40px;
|
||||
font-size: var(--tk-font-hero);
|
||||
font-weight: bold;
|
||||
color: $pri;
|
||||
}
|
||||
|
||||
.input-hero-title {
|
||||
@include section-title;
|
||||
font-size: 36px;
|
||||
font-size: var(--tk-font-num-lg);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.input-hero-sub {
|
||||
font-size: 24px;
|
||||
color: $tx3;
|
||||
font-size: var(--tk-font-h2);
|
||||
color: var(--tk-text-secondary);
|
||||
}
|
||||
|
||||
/* ── sync entry ── */
|
||||
@@ -60,14 +60,14 @@
|
||||
}
|
||||
|
||||
.input-sync-entry-text {
|
||||
font-size: 28px;
|
||||
font-size: var(--tk-font-body-lg);
|
||||
font-weight: 600;
|
||||
color: $pri;
|
||||
}
|
||||
|
||||
.input-sync-entry-hint {
|
||||
font-size: 22px;
|
||||
color: $tx3;
|
||||
font-size: var(--tk-font-body);
|
||||
color: var(--tk-text-secondary);
|
||||
}
|
||||
|
||||
/* ── card ── */
|
||||
@@ -96,14 +96,14 @@
|
||||
|
||||
.input-card-indicator-char {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: 24px;
|
||||
font-size: var(--tk-font-h2);
|
||||
font-weight: bold;
|
||||
color: $acc;
|
||||
}
|
||||
|
||||
.input-card-label {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: 28px;
|
||||
font-size: var(--tk-font-body-lg);
|
||||
font-weight: bold;
|
||||
color: $tx;
|
||||
}
|
||||
@@ -119,15 +119,15 @@
|
||||
}
|
||||
|
||||
.input-picker-value {
|
||||
font-size: 28px;
|
||||
font-size: var(--tk-font-body-lg);
|
||||
color: $tx;
|
||||
@include serif-number;
|
||||
}
|
||||
|
||||
.input-picker-arrow {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: 22px;
|
||||
color: $tx3;
|
||||
font-size: var(--tk-font-body);
|
||||
color: var(--tk-text-secondary);
|
||||
transform: rotate(180deg);
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -135,7 +135,7 @@
|
||||
/* ── section title ── */
|
||||
.input-section-title {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: 28px;
|
||||
font-size: var(--tk-font-body-lg);
|
||||
font-weight: bold;
|
||||
color: $tx;
|
||||
margin-bottom: 16px;
|
||||
@@ -154,7 +154,7 @@
|
||||
}
|
||||
|
||||
.input-field-label {
|
||||
font-size: 22px;
|
||||
font-size: var(--tk-font-body);
|
||||
color: $tx2;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
@@ -176,8 +176,8 @@
|
||||
|
||||
.input-bp-slash {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: 36px;
|
||||
color: $tx3;
|
||||
font-size: var(--tk-font-num-lg);
|
||||
color: var(--tk-text-secondary);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@@ -186,7 +186,7 @@
|
||||
background: $bg;
|
||||
border-radius: $r-sm;
|
||||
padding: 20px 24px;
|
||||
font-size: 28px;
|
||||
font-size: var(--tk-font-body-lg);
|
||||
color: $tx;
|
||||
@include serif-number;
|
||||
box-sizing: border-box;
|
||||
@@ -197,8 +197,8 @@
|
||||
}
|
||||
|
||||
.input-field-unit {
|
||||
font-size: 22px;
|
||||
color: $tx3;
|
||||
font-size: var(--tk-font-body);
|
||||
color: var(--tk-text-secondary);
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-style: italic;
|
||||
@@ -225,7 +225,7 @@
|
||||
}
|
||||
|
||||
.input-submit-text {
|
||||
font-size: 32px;
|
||||
font-size: var(--tk-font-num);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
|
||||
@@ -26,14 +26,14 @@
|
||||
|
||||
.trend-hero-icon-text {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: 40px;
|
||||
font-size: var(--tk-font-hero);
|
||||
font-weight: bold;
|
||||
color: $pri;
|
||||
}
|
||||
|
||||
.trend-hero-title {
|
||||
@include section-title;
|
||||
font-size: 36px;
|
||||
font-size: var(--tk-font-num-lg);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
}
|
||||
|
||||
.trange-tab-text {
|
||||
font-size: 24px;
|
||||
font-size: var(--tk-font-h2);
|
||||
color: $tx2;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -91,13 +91,13 @@
|
||||
}
|
||||
|
||||
.trend-ref-label {
|
||||
font-size: 24px;
|
||||
font-size: var(--tk-font-h2);
|
||||
color: $acc;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.trend-ref-value {
|
||||
font-size: 26px;
|
||||
font-size: var(--tk-font-h1);
|
||||
color: $acc;
|
||||
@include serif-number;
|
||||
font-weight: 500;
|
||||
@@ -110,7 +110,7 @@
|
||||
|
||||
.trend-list-title {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: 28px;
|
||||
font-size: var(--tk-font-body-lg);
|
||||
font-weight: bold;
|
||||
color: $tx;
|
||||
display: block;
|
||||
@@ -146,7 +146,7 @@
|
||||
}
|
||||
|
||||
.trend-item-date {
|
||||
font-size: 26px;
|
||||
font-size: var(--tk-font-h1);
|
||||
color: $tx2;
|
||||
}
|
||||
|
||||
@@ -159,7 +159,7 @@
|
||||
}
|
||||
|
||||
.trend-item-value {
|
||||
font-size: 28px;
|
||||
font-size: var(--tk-font-body-lg);
|
||||
color: $pri;
|
||||
@include serif-number;
|
||||
font-weight: bold;
|
||||
|
||||
Reference in New Issue
Block a user