139 lines
4.1 KiB
CSS
139 lines
4.1 KiB
CSS
/* ============================================================
|
|
水木东方医疗器械 AI 协同工作台 — 核心设计变量系统 (Tokens)
|
|
============================================================ */
|
|
|
|
:root {
|
|
/* 浅色主题 Tokens (Default fallback) */
|
|
--bg-app: #F4F6FA;
|
|
--bg-panel: #FFFFFF;
|
|
--bg-subtle: #F7F8FB;
|
|
--bg-hover: #EFF1F7;
|
|
--bg-active: #E9EDF7;
|
|
--bg-card: #FFFFFF;
|
|
|
|
--border: #E4E7F0;
|
|
--border-strong: #D4D9E5;
|
|
--border-light: #EEF0F7;
|
|
|
|
--text-strong: #1A2233;
|
|
--text: #3A4356;
|
|
--text-muted: #7A8299;
|
|
--text-faint: #A8AFC2;
|
|
--text-inverse: #FFFFFF;
|
|
|
|
--brand-50: #EEF2FF;
|
|
--brand-100: #DDE5FF;
|
|
--brand-500: #4F6BFF;
|
|
--brand-600: #3D55E8;
|
|
--brand-grad: linear-gradient(135deg, #5A75FF 0%, #3D55E8 100%);
|
|
|
|
--amber-50: #FFF7E8;
|
|
--amber-500: #F2A93B;
|
|
--amber-600: #DE9420;
|
|
|
|
--success: #21A66A;
|
|
--success-bg: #E8F7F0;
|
|
--danger: #E4574B;
|
|
--danger-bg: #FDEBEA;
|
|
--info: #2B6CC9;
|
|
--info-bg: #E8F0FE;
|
|
|
|
--shadow-xs: 0 1px 2px rgba(26, 34, 51, 0.04);
|
|
--shadow-sm: 0 1px 3px rgba(26, 34, 51, 0.06), 0 1px 2px rgba(26, 34, 51, 0.04);
|
|
--shadow-md: 0 6px 20px rgba(26, 34, 51, 0.08), 0 2px 6px rgba(26, 34, 51, 0.05);
|
|
--shadow-lg: 0 16px 40px rgba(26, 34, 51, 0.12), 0 4px 12px rgba(26, 34, 51, 0.06);
|
|
|
|
--ease: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--font-sans: "Inter", "HarmonyOS Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
--font-mono: "JetBrains Mono", "SF Mono", monospace;
|
|
|
|
--r-sm: 6px;
|
|
--r-md: 10px;
|
|
--r-lg: 14px;
|
|
--r-pill: 999px;
|
|
|
|
/* 交互卡片生命周期与印章 Tokens */
|
|
--card-resolved-border: var(--success);
|
|
--card-resolved-bg: var(--success-bg);
|
|
--card-resolved-text: var(--success);
|
|
--card-outdated-border: var(--amber-500);
|
|
--card-outdated-bg: var(--amber-50);
|
|
--card-outdated-text: var(--amber-600);
|
|
--card-expired-border: var(--border-strong);
|
|
--card-expired-bg: var(--bg-subtle);
|
|
--card-stamp-shadow: 0 2px 8px rgba(33, 166, 106, 0.2);
|
|
|
|
/* 语义化组件色彩兼容别名 (防透明穿透兜底) */
|
|
--color-bg-surface: var(--bg-panel);
|
|
--color-bg-canvas: var(--bg-subtle);
|
|
--color-border-subtle: var(--border);
|
|
--color-text-primary: var(--text-strong);
|
|
--color-text-secondary: var(--text);
|
|
--color-text-muted: var(--text-muted);
|
|
--color-brand-primary: var(--brand-500);
|
|
--shadow-xl: var(--shadow-lg);
|
|
}
|
|
|
|
/* 深色主题 Tokens */
|
|
[data-theme="dark"] {
|
|
--bg-app: #0B0E14;
|
|
--bg-panel: #131820;
|
|
--bg-subtle: #1A212C;
|
|
--bg-hover: #212A37;
|
|
--bg-active: #27303F;
|
|
--bg-card: #151B25;
|
|
|
|
--border: #242E3F;
|
|
--border-strong: #334052;
|
|
--border-light: #1E2735;
|
|
|
|
--text-strong: #E7EBF3;
|
|
--text: #B9C1D0;
|
|
--text-muted: #8993A7;
|
|
--text-faint: #5D687C;
|
|
--text-inverse: #0B0E14;
|
|
|
|
--brand-50: #202A4D;
|
|
--brand-100: #27345E;
|
|
--brand-500: #6B84FF;
|
|
--brand-600: #8498FF;
|
|
--brand-grad: linear-gradient(135deg, #7B92FF 0%, #5A75FF 100%);
|
|
|
|
--amber-50: #33290F;
|
|
--amber-500: #F5B94C;
|
|
--amber-600: #E5A73A;
|
|
|
|
--success: #35C77E;
|
|
--success-bg: #10301F;
|
|
--danger: #F06B5F;
|
|
--danger-bg: #3A1B18;
|
|
--info: #6FA3F5;
|
|
--info-bg: #11263F;
|
|
|
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
|
|
--shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
|
|
/* 交互卡片生命周期与印章 Tokens */
|
|
--card-resolved-border: var(--success);
|
|
--card-resolved-bg: var(--success-bg);
|
|
--card-resolved-text: var(--success);
|
|
--card-outdated-border: var(--amber-500);
|
|
--card-outdated-bg: var(--amber-50);
|
|
--card-outdated-text: var(--amber-500);
|
|
--card-expired-border: var(--border-strong);
|
|
--card-expired-bg: var(--bg-subtle);
|
|
--card-stamp-shadow: 0 2px 10px rgba(53, 199, 126, 0.25);
|
|
|
|
/* 语义化组件色彩兼容别名 (防透明穿透兜底) */
|
|
--color-bg-surface: var(--bg-panel);
|
|
--color-bg-canvas: var(--bg-subtle);
|
|
--color-border-subtle: var(--border);
|
|
--color-text-primary: var(--text-strong);
|
|
--color-text-secondary: var(--text);
|
|
--color-text-muted: var(--text-muted);
|
|
--color-brand-primary: var(--brand-500);
|
|
--shadow-xl: var(--shadow-lg);
|
|
}
|