193 lines
8.8 KiB
CSS
193 lines
8.8 KiB
CSS
/**
|
||
* 备考通 · Design Tokens (CSS 变量)
|
||
* =====================================================================
|
||
* 版本：v1.0.0 · 2026-08-26
|
||
* 来源：设计规范-备考通-20260826.md（Ardot 文件 718570750880145 真实变量校准）
|
||
* 说明：本文件与 design-tokens.json 数值完全一致，是前端唯一颜色/排印/
|
||
* 圆角/阴影/间距来源。前端必须引用这些变量，禁止硬编码颜色值。
|
||
*
|
||
* 使用方式：前端在 `styles/tokens.css` 中 import 本文件或复制 :root 节，
|
||
* 组件内一律 `var(--token-name)` 引用。
|
||
* =====================================================================
|
||
*/
|
||
|
||
:root {
|
||
/* ------------------------------------------------------------------
|
||
* 1. 颜色 Color
|
||
* ------------------------------------------------------------------ */
|
||
|
||
/* 中性底色 Neutral */
|
||
--bg-canvas: #F7F6F2; /* 画布/页面背景（浅米白） */
|
||
--bg-card: #FFFFFF; /* 卡片/面板背景 */
|
||
--bg-soft: #EFEFF5; /* 图标底、次级填充、标签底、进度条轨道 */
|
||
--border-subtle: #E8E6E0; /* 卡片描边、分隔线（中性浅暖） */
|
||
|
||
/* 品牌主色 Brand（深蓝系） */
|
||
--primary: #2B4C8F; /* 主按钮、主色、选中态高亮底、进度填充 */
|
||
--primary-deep: #1B2D5B; /* 渐变深端、页面主标题强调、深蓝 hero 底 */
|
||
--primary-bright: #3A6BD8; /* 渐变亮端、hero 卡片、active 图标 */
|
||
|
||
/* 文字色 Text */
|
||
--text-primary: #1A1F2E; /* 主标题、正文主色 */
|
||
--text-secondary: #6B7280; /* 副标题、描述文字、图标默认色 */
|
||
--text-muted: #9CA2AD; /* 弱提示、占位、次要标记 */
|
||
|
||
/* 语义色 Semantic（状态反馈） */
|
||
--success: #1B9266; /* 正向趋势、正确率、达标 */
|
||
--success-soft: #E0F5EB; /* 正向标签底、打卡徽章底 */
|
||
--warning: #DC9A1E; /* 提醒、中等状态 */
|
||
--warning-soft: #FEF0D1; /* 提醒标签底 */
|
||
--danger: #D14C55; /* 负向、错误、待复习错题数 */
|
||
--danger-soft: #FCE5E7; /* 危险标签底、错误提示底 */
|
||
|
||
/* 前景/辅助 Foreground */
|
||
--on-accent: #FFFFFF; /* 主色/深蓝底上的前景色（按钮文字、深蓝 hero 文字） */
|
||
--white: #FFFFFF; /* 纯白（唯一允许的裸色值） */
|
||
|
||
/* 渐变 Gradients（仅 hero 大卡 / 置顶卡使用） */
|
||
--gradient-hero-deep: linear-gradient(135deg, #1B2D5B 0%, #3A6BD8 100%); /* 首页 hero 卡 / 要闻置顶卡 */
|
||
--gradient-hero-primary: linear-gradient(180deg, #2B4C8F 0%, #1B2D5B 100%); /* 移动首页深蓝 hero */
|
||
|
||
|
||
/* ------------------------------------------------------------------
|
||
* 2. 字体 Font
|
||
* ------------------------------------------------------------------ */
|
||
--font-sans: 'Sarasa Gothic SC', 'PingFang SC', sans-serif; /* 中文正文/标题/标签 */
|
||
--font-num: 'Inter', 'SF Pro', sans-serif; /* 统计数字/时间/单价/代码标识 */
|
||
|
||
|
||
/* ------------------------------------------------------------------
|
||
* 3. 排印 Typography
|
||
* role = 用途界定；部分 token 的可变字段（如趋势色）由语义色覆盖
|
||
* ------------------------------------------------------------------ */
|
||
--fs-h1: 24px; --fw-h1: 700; --lh-h1: 1.2; --ff-h1: var(--font-sans); /* H1 页面标题 */
|
||
--fs-data-num: 22px; --fw-data-num: 700; --lh-data-num: 1.2; --ff-data-num: var(--font-num); /* 数据大字（Inter Bold） */
|
||
--fs-card-title:15px; --fw-card-title: 600; --lh-card-title: 1.4; --ff-card-title: var(--font-sans); /* 卡标题 */
|
||
--fs-label: 12px; --fw-label: 400; --lh-label: 1.4; --ff-label: var(--font-sans); /* 标签 */
|
||
--fs-label-bold:12px; --fw-label-bold: 600; --lh-label-bold: 1.4; --ff-label-bold: var(--font-sans); /* 强标签/徽章 */
|
||
--fs-subtitle: 13px; --fw-subtitle: 400; --lh-subtitle: 1.5; --ff-subtitle: var(--font-sans); /* 副标题 */
|
||
--fs-button: 13px; --fw-button: 600; --lh-button: 1.4; --ff-button: var(--font-sans); /* 按钮文字 */
|
||
--fs-trend: 11px; --fw-trend: 500; --lh-trend: 1.4; --ff-trend: var(--font-sans); /* 趋势指数 */
|
||
--fs-body: 14px; --fw-body: 400; --lh-body: 1.5; --ff-body: var(--font-sans); /* 正文/题干 */
|
||
|
||
|
||
/* ------------------------------------------------------------------
|
||
* 4. 圆角 Radius
|
||
* ------------------------------------------------------------------ */
|
||
--radius-sm: 8px;
|
||
--radius-md: 12px;
|
||
--radius-lg: 16px; /* 标准卡片（默认） */
|
||
--radius-xl: 24px; /* Hero 渐变大卡 */
|
||
--radius-pill: 999px; /* 头像、胶囊按钮、天数徽章 */
|
||
--radius-btn: 10px; /* 主/次按钮圆角 */
|
||
|
||
|
||
/* ------------------------------------------------------------------
|
||
* 5. 阴影 Shadow
|
||
* 默认以「白底 + 细描边(border-subtle)」表达卡片，不用重阴影。
|
||
* ------------------------------------------------------------------ */
|
||
--shadow-level-0: none;
|
||
--shadow-level-1: 0 1px 2px rgba(0, 0, 0, 0.04); /* 悬浮态轻投影 */
|
||
--shadow-level-2: 0 4px 12px rgba(27, 45, 91, 0.08); /* 弹层、浮起卡片、TabBar */
|
||
--shadow-level-3: 0 8px 24px rgba(27, 45, 91, 0.14); /* 模态、下拉菜单 */
|
||
|
||
|
||
/* ------------------------------------------------------------------
|
||
* 6. 间距 Spacing（4px 网格）
|
||
* ------------------------------------------------------------------ */
|
||
--space-1: 4px;
|
||
--space-2: 8px;
|
||
--space-3: 12px;
|
||
--space-4: 16px;
|
||
--space-5: 20px;
|
||
--space-6: 24px;
|
||
--space-8: 32px;
|
||
|
||
|
||
/* ------------------------------------------------------------------
|
||
* 7. 布局 Layout
|
||
* ------------------------------------------------------------------ */
|
||
--sidebar-width-desktop: 220px;
|
||
--content-max-width: 1220px;
|
||
--padding-desktop: 32px; /* 桌面左右 padding */
|
||
--padding-mobile: 24px; /* 移动左右 padding */
|
||
--card-padding-desktop: 24px;
|
||
--card-padding-mobile: 16px;
|
||
--card-gap-desktop: 20px;
|
||
--card-gap-mobile: 12px;
|
||
--tabbar-height-mobile: 120px; /* 移动 TabBar 高度 */
|
||
--btn-height: 40px;
|
||
--btn-height-pill: 44px;
|
||
|
||
|
||
/* ------------------------------------------------------------------
|
||
* 8. 断点 Breakpoint
|
||
* ------------------------------------------------------------------ */
|
||
--bp-mobile: 390px;
|
||
--bp-desktop: 1440px;
|
||
|
||
|
||
/* ------------------------------------------------------------------
|
||
* 9. 动效 Motion
|
||
* ------------------------------------------------------------------ */
|
||
--motion-hover-fast: 120ms; /* 按钮 hover 背景过渡 */
|
||
--motion-card-hover: 160ms; /* 卡片 hover 投影过渡 */
|
||
--motion-switch: 250ms; /* 切换/展开 */
|
||
--motion-tab-fade: 200ms; /* 移动 Tab 切换淡入 */
|
||
--ease-default: ease;
|
||
}
|
||
|
||
|
||
/* =====================================================================
|
||
* 10. 组件级预设预设（Typographic & Component recipe）
|
||
* —— 前端不直接硬编码上述，按此处 recipe 组装组件。
|
||
* ===================================================================== */
|
||
|
||
/* Hero 数据卡（首页 5 要素卡 / 深蓝大卡） */
|
||
.hub-card-hero {
|
||
color: var(--on-accent);
|
||
background: var(--gradient-hero-deep);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--card-padding-desktop);
|
||
}
|
||
|
||
/* 标准白卡（默认卡片） */
|
||
.hub-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--card-padding-desktop);
|
||
}
|
||
|
||
/* 主按钮 */
|
||
.hub-btn-primary {
|
||
background: var(--primary);
|
||
color: var(--on-accent);
|
||
border-radius: var(--radius-btn);
|
||
height: var(--btn-height);
|
||
font: var(--fw-button) var(--fs-button) / var(--lh-button) var(--ff-button);
|
||
transition: background var(--motion-hover-fast) var(--ease-default);
|
||
}
|
||
.hub-btn-primary:hover { background: color-mix(in srgb, var(--primary) 92%, #000); }
|
||
|
||
/* 次按钮（透明 + primary 描边） */
|
||
.hub-btn-secondary {
|
||
background: transparent;
|
||
color: var(--primary);
|
||
border: 1px solid var(--primary);
|
||
border-radius: var(--radius-btn);
|
||
height: var(--btn-height);
|
||
font: var(--fw-button) var(--fs-button) / var(--lh-button) var(--ff-button);
|
||
}
|
||
|
||
/* 语义标签 / 徽章（主色 + 浅底成对） */
|
||
.hub-badge {
|
||
font: var(--fw-label-bold) var(--fs-label) / var(--lh-label) var(--ff-label);
|
||
border-radius: var(--radius-sm);
|
||
padding: 2px var(--space-2);
|
||
}
|
||
.hub-badge--success { color: var(--success); background: var(--success-soft); }
|
||
.hub-badge--warning { color: var(--warning); background: var(--warning-soft); }
|
||
.hub-badge--danger { color: var(--danger); background: var(--danger-soft); }
|
||
.hub-badge--soft { color: var(--text-secondary); background: var(--bg-soft); }
|