898e22c715
测试: - secure-storage: 26 tests (AES 加解密/明文 fallback/迁移/Base64 边界) - request.ts: 16 tests (扩展 ResponseCache/patientId 隔离/requestUnlimited) - mock-api: 修复 getCachedPatientId 缺失导致 health 测试失败 UX 无障碍 (10 组件): - SegmentTabs/DoctorTabBar: role=tablist/tab + aria-selected - PrimaryButton/SecondaryButton: role=button + aria-disabled/aria-busy - Loading/LoadingCard: role=status + aria-live=polite - EmptyState: role=status + aria-live=polite - ErrorState: role=alert + aria-live=assertive - TrendChart tooltip: role=tooltip + aria-live=polite - FormInput: aria-invalid + aria-label 焦点管理: - 新增 _focus-ring.scss mixin (focus + focus-visible) - 5 组件 SCSS 应用 focus-ring
74 lines
2.6 KiB
SCSS
74 lines
2.6 KiB
SCSS
// 温润东方风设计系统 — Warm Eastern Design
|
||
// 赤土橙 #C4623A 贯穿全场，米底留白呼吸
|
||
|
||
// ─── 色彩 ───
|
||
$pri: #C4623A; // 赤土橙 (accent)
|
||
$pri-l: #F0DDD4; // 赤土浅
|
||
$pri-d: #8B3E1F; // 赤土深
|
||
$pri-surface: #F5F0EB; // 温润米底
|
||
$acc: #5B7A5E; // 鼠尾草绿 (success)
|
||
$acc-l: #E8F0E8; // 成功浅
|
||
$acc-d: #3D5A40; // 成功深（渐变中间色）
|
||
$bg: #F5F0EB; // 主背景 (warm cream)
|
||
$card: #FFFFFF; // 卡片白
|
||
$white: #FFFFFF; // 纯白（文字/图标在彩色底上）
|
||
$surface-alt: #EDE8E2; // 辅助底
|
||
$tx: #2D2A26; // 主文字 (warm black)
|
||
$tx2: #5A554F; // 次文字 (warm gray) — AA 正文对比度 ~5.5:1
|
||
$tx3: #78716C; // 淡文字 — AA 正文对比度 ~4.6:1（仅 ≥24px）
|
||
$bd: #E8E2DC; // 边框
|
||
$bd-l: #F0EBE5; // 浅边框
|
||
$dan: #B54A4A; // 危险 (muted red)
|
||
$dan-l: #FDEAEA; // 危险浅
|
||
$wrn: #C4873A; // 警告 (warm amber)
|
||
$wrn-l: #FFF3E0; // 警告浅
|
||
$wrn-d: #8B6F4E; // 警告深（渐变中间色）
|
||
|
||
// ─── 医生端色彩（靛蓝系）───
|
||
$doc-pri: #3A6B8C; // 医生端主色
|
||
$doc-pri-l: #D4E5F0; // 医生端浅色
|
||
$doc-pri-d: #2A4F6A; // 医生端深色
|
||
|
||
// ─── 功能色 ───
|
||
$wechat: #07C160; // 微信绿
|
||
|
||
// ─── 圆角（对齐原型 T.r:16, T.rSm:12, T.rXs:8）───
|
||
$r: 16px;
|
||
$r-sm: 12px;
|
||
$r-xs: 8px;
|
||
$r-lg: 20px;
|
||
$r-pill: 999px;
|
||
|
||
// ─── 老年友好触控参数 ───
|
||
$touch-min: 48px;
|
||
$btn-primary-h: 52px; // 对齐原型 height:52
|
||
$menu-item-h: 64px;
|
||
$tab-h: 56px;
|
||
$font-min: 22px;
|
||
$input-h: 56px;
|
||
|
||
// ─── 间距阶梯（SCSS 编译时变量，与 CSS Token 对应）───
|
||
$sp-2xs: 4px;
|
||
$sp-xs: 8px;
|
||
$sp-sm: 12px;
|
||
$sp-md: 16px;
|
||
$sp-section: 20px;
|
||
$sp-lg: 24px;
|
||
$sp-xl: 32px;
|
||
$sp-2xl: 48px;
|
||
|
||
// ─── TabBar 底部安全区 ───
|
||
$tabbar-space: 100px;
|
||
|
||
// ─── 阴影（原型 boxShadow 参数，略增可见度）───
|
||
$shadow-sm: 0 1px 4px rgba(45, 42, 38, 0.06);
|
||
$shadow-md: 0 2px 12px rgba(45, 42, 38, 0.10);
|
||
$shadow-lg: 0 8px 32px rgba(45, 42, 38, 0.15);
|
||
$shadow-btn: 0 4px 16px rgba(196, 98, 58, 0.3); // 主按钮阴影
|
||
$shadow-tab: 0 2px 8px rgba(196, 98, 58, 0.25); // 选中Tab阴影
|
||
$shadow-btn-doc: 0 4px 16px rgba(58, 107, 140, 0.3); // 医生端按钮阴影
|
||
$shadow-tab-doc: 0 2px 8px rgba(58, 107, 140, 0.25); // 医生端Tab阴影
|
||
|
||
// ─── 焦点环（无障碍）───
|
||
@import 'focus-ring';
|