/* ============================================================ 设计令牌 · 单一真值源 (Single Source of Truth) ============================================================ ⚠️ 本文件由 设计规范.md 自动同步生成，是所有页面的唯一令牌来源。 ⚠️ 修改设计令牌请改 设计规范.md 后重新生成，不要直接手改本文件。 ⚠️ 各页面一律用 引用， 严禁在页面内重复定义这些令牌 —— 重复定义即产生分叉。 生成方式：python3 tokens.sync.py ============================================================ */ :root { /* ==== 第一层：Primitive 原子物理色阶 ==== */ /* 物理基础色，业务样式严禁直接引用 */ --c-amber-200 : #fef08a; --c-amber-300 : #fde68a; --c-amber-400 : #f0b429; --c-amber-500 : #f59e0b; --c-amber-600 : #d97706; --c-amber-700 : #b45309; --c-amber-950 : #1a1409; --c-amber-bright : #fbbf24; --c-black : #000000; --c-emerald-100 : #d1fae5; --c-emerald-200 : #a7f3d0; --c-emerald-300 : #7ce9a8; --c-emerald-400 : #34d399; --c-emerald-500 : #22c55e; --c-emerald-600 : #16a34a; --c-emerald-700 : #15803d; --c-emerald-950 : #101f18; --c-flir-dark : #18032b; --c-flir-magenta : #a21caf; --c-flir-orange : #f97316; --c-flir-purple : #581c87; --c-flir-violet : #3b0764; --c-flir-yellow : #facc15; --c-green-400 : #4ade80; --c-map-bg-deep : #06080e; --c-map-floor-bottom : #090d16; --c-map-floor-top : #162030; --c-map-glass : rgba(10, 15, 26, 0.88); --c-map-island : #182541; --c-map-panel : #06090f; --c-map-sky-bottom : #1b2a45; --c-map-sky-top : #0a1220; --c-red-300 : #fca5a5; --c-red-400 : #f87171; --c-red-500 : #ef4444; --c-red-600 : #dc2626; --c-red-700 : #b91c1c; --c-red-800 : #7f1d1d; --c-red-900 : #450a0a; --c-sky-100 : #e0f2fe; --c-sky-200 : #bae6fd; --c-sky-300 : #7dd3fc; --c-sky-400 : #38bdf8; --c-sky-500 : #0ea5e9; --c-sky-600 : #0284c7; --c-sky-700 : #0369a1; --c-slate-200 : #e2e8f0; --c-slate-400 : #94a3b8; --c-slate-50 : #f8fafc; --c-slate-500 : #64748b; --c-slate-600 : #475569; --c-slate-650 : #273752; --c-slate-700 : #334155; --c-slate-750 : #172235; --c-slate-800 : #1e293b; --c-slate-850 : #0d131f; --c-slate-900 : #0f172a; --c-slate-920 : #070b12; --c-slate-940 : #04060a; --c-slate-950 : #080b11; --c-white : #ffffff; /* ==== 第二层：Semantic 业务语义层 ==== */ /* 全站样式只准引用本层变量 */ --color-bg-base : var(--c-slate-950); --color-border-active : rgba(56, 189, 248, 0.45); --color-border-dim : rgba(255, 255, 255, 0.05); --color-border-mid : rgba(148, 163, 184, 0.22); --color-border-subtle : rgba(148, 163, 184, 0.16); --color-danger-estop-only : var(--c-red-500); --color-panel : var(--c-slate-900); --color-primary : var(--c-sky-400); --color-primary-action : var(--c-sky-600); --color-primary-focus : var(--c-sky-300); --color-primary-sky : var(--c-sky-500); --color-success : var(--c-emerald-400); --color-surface-card : rgba(12, 17, 26, 0.72); --color-surface-card2 : rgba(16, 22, 33, 0.86); --color-surface-panel : rgba(10, 16, 28, 0.76); --color-surface-panel-hi : rgba(19, 27, 42, 0.88); --color-surface-panel-lo : rgba(7, 9, 14, 0.88); --color-text-dark : var(--c-slate-600); --color-text-dim : var(--c-slate-500); --color-text-main : var(--c-slate-50); --color-text-muted : var(--c-slate-400); --color-warning : var(--c-amber-400); /* ==== 第三层：Component 组件 / 兼容别名层 ==== */ /* 既有类名与历史别名的无损透传 */ --amber : var(--color-warning); --blue-btn : var(--color-primary-action); --blue-focus : var(--color-primary-focus); --blue-primary : var(--color-primary); --card : var(--color-surface-card); --card2 : var(--color-surface-card2); --glow : rgba(56, 189, 248, 0.35); --glow-primary : var(--color-border-active); --green : var(--color-success); --ink : var(--color-text-main); --ink2 : var(--color-text-muted); --ink3 : var(--color-text-dim); --ink4 : var(--color-text-dark); --joy-deadzone : 0.08; --line-dim : var(--color-border-subtle); --line-hot : var(--color-border-active); --line-mid : var(--color-border-mid); --red-border : rgba(252, 165, 165, 0.45); --red-estop : var(--color-danger-estop-only); --stage : var(--color-bg-base); --white-hover : rgba(255, 255, 255, 0.06); --white-sep : rgba(255, 255, 255, 0.13); /* ==== 尺寸 · 圆角系统 ==== */ /* 7 档圆角阶梯 */ --r-badge : 4px; --r-btn : 8px; --r-cam : 10px; --r-card : 12px; --r-item : 6px; --r-pill : 999px; --r-stage : 14px; /* ==== 字体体系 ==== */ /* 系统字体栈，零网络依赖 */ --ff-cn : var(--ff-sans); --ff-hud : "Microsoft YaHei", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif; --ff-sans : "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Heiti SC", sans-serif; /* ==== 间距阶梯 ==== */ /* 8px 空间节奏；--sp-0(2px) 为唯一合法的网格外发丝档，仅用于描边与图标基线微调 */ --sp-0 : 2px; --sp-1 : 4px; --sp-2 : 8px; --sp-3 : 12px; --sp-4 : 16px; --sp-5 : 24px; --sp-6 : 32px; --sp-7 : 48px; /* ==== 字号与行高阶梯 ==== */ /* 7 档字号 + 成对行高。⚠️ 改字号只改此处，勿在各页写死 */ --fs-body : 14px; --fs-h1 : 21px; --fs-h2 : 15px; --fs-pill : 11px; --fs-tab : 12px; --fs-tag : 10px; --fs-ui : 12.5px; --lh-body : 1.4; --lh-h1 : 1.2; --lh-h2 : 1.3; --lh-pill : 1.2; --lh-tab : 1.2; --lh-tag : 1.0; --lh-ui : 1.3; /* ==== 阴影梯级 ==== */ /* 分段定义（投影/光晕/内衬/焦点环），用逗号组合使用 */ --sh-drop-1 : 0 2px 6px rgba(0, 0, 0, 0.35); --sh-drop-2 : 0 8px 20px -6px rgba(0, 0, 0, 0.65); --sh-drop-3 : 0 24px 64px -12px rgba(0, 0, 0, 0.95); --sh-drop-4 : 0 50px 110px -50px #000; --sh-focus-ring : 0 0 0 2px rgba(56, 189, 248, 0.5); --sh-glow-dim : 0 0 12px -3px var(--color-border-active); --sh-glow-ok-soft : 0 0 8px -2px rgba(52, 211, 153, 0.30); --sh-glow-ok-strong : 0 0 10px rgba(16, 185, 129, 0.90); --sh-glow-soft : 0 0 16px -2px rgba(56, 189, 248, 0.16); --sh-glow-strong : 0 0 24px -2px rgba(56, 189, 248, 0.35); --sh-inset-hi : inset 0 1px 0 rgba(255, 255, 255, 0.05); --sh-inset-hi-strong : inset 0 1px 0 rgba(255, 255, 255, 0.10); --sh-none : none; /* ==== 层级梯级 ==== */ /* 9 档固定梯级；严禁 999/9999/99999/100000 等哨兵值 */ --z-banner : 70; --z-base : 0; --z-content : 1; --z-drawer : 40; --z-hud : 20; --z-map-overlay : 10; --z-modal : 60; --z-popover : 30; --z-toast : 50; /* ==== 动效体系 ==== */ /* ⚠️ 时长一律为「纯时长」，必须与曲线令牌组成两段式 transition */ --e-in : cubic-bezier(0.4, 0, 0.7, 0.2); --e-out : cubic-bezier(0.16, 1, 0.3, 1); --e-spring : cubic-bezier(0.34, 1.36, 0.5, 1); --e-spring-hi : cubic-bezier(0.34, 1.56, 0.64, 1); --e-std : cubic-bezier(0.4, 0, 0.2, 1); --e-std-sym : cubic-bezier(0.65, 0, 0.35, 1); --t-1 : .13s; --t-2 : .2s; --t-3 : .34s; --t-4 : .58s; }