/* ============================================================================ tokens.css · 设计令牌（唯一真源） ---------------------------------------------------------------------------- 规则（写在这里就是法律，后面所有 CSS 都必须遵守）： ① 这个文件**只放变量**，不放任何选择器规则 （除了 :root 和 [data-theme] 上的变量声明） ② 任何 CSS 文件里**不准出现**硬编码的颜色/字号/间距/时长 必须写 var(--xxx)。判据：grep 一下 # 开头的十六进制， 如果出现在 app.css 里而不是这里，就是违规。 ③ 子网站的个性色只在 `--accent` / `--accent2` 上覆盖， 不许另起一套颜色变量 —— 否则暗色/亮色适配要做 8 遍。 为什么这么严： 8 个子网站 × 2 个主题 = 16 套配色。如果每个 app 各自硬编码， 改一次主色要改 16 处，而且必然有漏的。集中到这里就只有 2 处。 ========================================================================= */ :root { /* ── 颜色：暗色（默认）────────────────────────────────────── */ --bg: #07120d; --bg-elev: #0c1a13; --surface: rgba(20, 45, 30, .55); --surface-2: rgba(12, 32, 22, .72); --hover: rgba(255, 255, 255, .045); --line: rgba(158, 229, 107, .10); --line2: rgba(158, 229, 107, .17); --line-strong: rgba(158, 229, 107, .28); --ink: #f2f8ef; --soft: #c4d6bd; --muted: #93a88c; --faint: #6b7d68; --dim: #52614f; --accentInk: #06210f; --danger: #ff8d83; --dangerSoft: rgba(255, 141, 131, .13); --warn: #edbf69; --warnSoft: rgba(237, 191, 105, .13); --gold: #edbf69; --goldSoft: rgba(237, 191, 105, .13); --aqua: #78d6b0; /* ── 主题色（子网站会覆盖这两个）────────────────────────── */ --accent: #9ee56b; --accent2: #78d6b0; --accentSoft: rgba(158, 229, 107, .16); --dom-line: rgba(158, 229, 107, .30); /* ── 排版 ─────────────────────────────────────────────────── */ --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --f-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; --t-xs: 10.5px; --t-sm: 11.5px; --t-base: 12.5px; --t-md: 13.5px; --t-lg: 16px; --t-xl: 20px; --t-2xl: 27px; --t-3xl: 38px; /* 大屏数字用 */ --t-4xl: 56px; /* 大屏头条数字 */ /* ── 间距（4 的倍数，不要再发明别的值）───────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 44px; /* ── 圆角 ─────────────────────────────────────────────────── */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px; /* ── 阴影 ─────────────────────────────────────────────────── */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, .18); --shadow: 0 8px 32px rgba(0, 0, 0, .28); --shadow-lg: 0 20px 60px rgba(0, 0, 0, .40); /* ── 动效（丝滑的关键在这里，不在各处写死）───────────────── */ --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms; --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); /* ── 布局 ─────────────────────────────────────────────────── */ --shell-max: 1440px; --shell-pad: 28px; --rail-w: 72px; --topbar-h: 64px; /* ── 层级 ─────────────────────────────────────────────────── */ --z-canvas: 1; --z-panel: 10; --z-float: 40; --z-overlay: 60; --z-toast: 90; } /* ── 亮色主题：只翻转颜色，不动尺寸和动效 ───────────────────── */ [data-theme="light"] { --bg: #f4f7ef; --bg-elev: #ffffff; --surface: rgba(255, 255, 253, .86); --surface-2: rgba(242, 248, 239, .92); --hover: rgba(20, 60, 30, .04); --line: rgba(40, 90, 50, .12); --line2: rgba(40, 90, 50, .20); --line-strong: rgba(40, 90, 50, .34); --ink: #10241a; --soft: #2f4a38; /* ⚠️ 亮色下的次要/最弱文字要压深（第 7 轮 · 用户报障"日间模式看不清"）： 原来 --muted #5a7060 / --faint #7d9183，而 --faint 压在页面底色 #f4f7ef 上 实测只有 3.1:1，低于 WCAG AA 对正文要求的 4.5:1 —— 全站 200 多处这种小字都不达标。 现在 --muted ≈ 5.9:1、--faint ≈ 4.6:1，都过关，且两级之间仍看得出层次。 --dim 只用于圆点/分隔这类非文字元素，保持浅色不动。 */ --muted: #4d6355; --faint: #5f7365; --dim: #9aab9f; --accentInk: #ffffff; --danger: #c0392b; --dangerSoft: rgba(192, 57, 43, .10); --warn: #92650e; --warnSoft: rgba(146, 101, 14, .10); --gold: #92650e; --goldSoft: rgba(146, 101, 14, .10); --aqua: #1f6b62; --shadow-sm: 0 2px 8px rgba(20, 50, 30, .07); --shadow: 0 8px 32px rgba(20, 50, 30, .10); --shadow-lg: 0 20px 60px rgba(20, 50, 30, .16); } /* ── 子网站主题：每个 app 在 上覆盖这两个色 ── ⚠️ 只准覆盖 --accent / --accent2 / --accentSoft / --dom-line。 覆盖别的颜色变量会导致亮色主题失效。 */ [data-app="launcher"] { --accent:#9ee56b; --accent2:#78d6b0; --accentSoft:rgba(158,229,107,.16); --dom-line:rgba(158,229,107,.30); } [data-app="map"] { --accent:#7fc4a0; --accent2:#5fa8c8; --accentSoft:rgba(127,196,160,.16); --dom-line:rgba(127,196,160,.30); } [data-app="screen"] { --accent:#6ec8e0; --accent2:#4a9fd8; --accentSoft:rgba(110,200,224,.16); --dom-line:rgba(110,200,224,.30); } [data-app="chat"] { --accent:#a89ee5; --accent2:#8f8fd8; --accentSoft:rgba(168,158,229,.16); --dom-line:rgba(168,158,229,.30); } [data-app="work"] { --accent:#e0a75e; --accent2:#d98f6a; --accentSoft:rgba(224,167,94,.16); --dom-line:rgba(224,167,94,.30); } [data-app="records"] { --accent:#c2b06a; --accent2:#a8a06e; --accentSoft:rgba(194,176,106,.16); --dom-line:rgba(194,176,106,.30); } [data-app="insight"] { --accent:#5fc9b8; --accent2:#63b8d6; --accentSoft:rgba(95,201,184,.16); --dom-line:rgba(95,201,184,.30); } [data-app="knowledge"] { --accent:#d99a8a; --accent2:#c98f7e; --accentSoft:rgba(217,154,138,.16); --dom-line:rgba(217,154,138,.30); } /* dt（数字孪生大屏）第 18 轮补上。 它加进 APPS 时只登记了 registry，忘了这三处（--acc-dt / [data-app="dt"] / 亮色覆盖）， 后果有两个：启动器上它的卡片回退到 registry 里的**深色亮色值**， 日间模式下变成浅青压浅底（实测 1.84:1，等于看不清）； 大屏页自己则一直用着启动器的绿色。 */ [data-app="dt"] { --accent:#3ec9c0; --accent2:#4aa8c8; --accentSoft:rgba(62,201,192,.16); --dom-line:rgba(62,201,192,.30); } /* flow（生产流水线）：一条龙是导师给的项目名，给它一个"麦穗金"， 在应用切换器里一眼能认出来，也和 work（同样偏暖的 #e0a75e）拉开一点。 */ [data-app="flow"] { --accent:#e8b45e; --accent2:#d99a5e; --accentSoft:rgba(232,180,94,.16); --dom-line:rgba(232,180,94,.30); } [data-app="plots"] { --accent:#a8c8e0; --accent2:#8fb4d8; --accentSoft:rgba(168,200,224,.16); --dom-line:rgba(168,200,224,.30); } [data-app="trace"] { --accent:#8fb4a0; --accent2:#7aa8c8; --accentSoft:rgba(143,180,160,.16); --dom-line:rgba(143,180,160,.30); } /* ── 启动器专用：一页里要同时展示 8 个 app / 6 个领域的主题色 ────────── 为什么不能直接用 registry.js 里的 accent： 那些色号是**深色主题**的亮色值，当文字色放在日间模式的浅底上 实测只有 1.4:1（浅绿压浅底）和 1.76:1（浅蓝压浅底），根本看不清。 这里按主题各给一套：深色用亮色值，亮色压深到通过 WCAG AA。 用法（见 launcher/index.html）：style="--card-accent:var(--acc-, 兜底色)" */ :root { --acc-launcher:#9ee56b; --acc2-launcher:#78d6b0; --acc-map:#7fc4a0; --acc2-map:#5fa8c8; --acc-screen:#6ec8e0; --acc2-screen:#4a9fd8; --acc-chat:#a89ee5; --acc2-chat:#8f8fd8; --acc-work:#e0a75e; --acc2-work:#d98f6a; --acc-records:#c2b06a; --acc2-records:#a8a06e; --acc-insight:#5fc9b8; --acc2-insight:#63b8d6; --acc-knowledge:#d99a8a; --acc2-knowledge:#c98f7e; --acc-dt:#3ec9c0; --acc2-dt:#4aa8c8; --acc-flow:#e8b45e; --acc2-flow:#d99a5e; --acc-plots:#a8c8e0; --acc2-plots:#8fb4d8; --acc-trace:#8fb4a0; --acc2-trace:#7aa8c8; --dom-farm:#9ee56b; --dom-forest:#7fbf6a; --dom-livestock:#e0a75e; --dom-fishery:#5fc9b8; --dom-side:#d99a8a; --dom-platform:#8fd4e8; } [data-theme="light"] { --acc-launcher:#3e7d34; --acc2-launcher:#367532; --acc-map:#2b6b52; --acc2-map:#1f5f78; --acc-screen:#1a5f78; --acc2-screen:#164f80; --acc-chat:#4a3f8a; --acc2-chat:#41398a; --acc-work:#8a5a1c; --acc2-work:#7d4f1a; --acc-records:#6d5f14; --acc2-records:#5f5a1a; --acc-insight:#256b60; --acc2-insight:#1f5f78; --acc-knowledge:#8a4a38; --acc2-knowledge:#7d4636; --acc-dt:#0f5f5c; --acc2-dt:#1b5a78; --acc-flow:#8a5a12; --acc2-flow:#7d4f1a; --acc-plots:#26506b; --acc2-plots:#254a70; --acc-trace:#2b5f45; --acc2-trace:#1f5070; --dom-farm:#3e7d34; --dom-forest:#3c6f2c; --dom-livestock:#8a5a1c; --dom-fishery:#256b60; --dom-side:#8a4a38; --dom-platform:#1a5f78; } /* 亮色下主色要压深，否则对比度不够（这是踩过的坑，别再犯） */[data-theme="light"][data-app="launcher"] { --accent:#3e7d34; --accent2:#367532; --accentSoft:rgba(62,125,52,.11); } [data-theme="light"][data-app="map"] { --accent:#2b6b52; --accent2:#1f5f78; --accentSoft:rgba(43,107,82,.11); } [data-theme="light"][data-app="screen"] { --accent:#1a5f78; --accent2:#164f80; --accentSoft:rgba(26,95,120,.11); } [data-theme="light"][data-app="chat"] { --accent:#4a3f8a; --accent2:#41398a; --accentSoft:rgba(74,63,138,.11); } [data-theme="light"][data-app="work"] { --accent:#8a5a1c; --accent2:#7d4f1a; --accentSoft:rgba(138,90,28,.11); } [data-theme="light"][data-app="records"] { --accent:#6b5f24; --accent2:#5f5722; --accentSoft:rgba(107,95,36,.11); } [data-theme="light"][data-app="insight"] { --accent:#1f6b62; --accent2:#1c5f70; --accentSoft:rgba(31,107,98,.11); } [data-theme="light"][data-app="knowledge"] { --accent:#8a4f43; --accent2:#7d4a3f; --accentSoft:rgba(138,79,67,.11); } /* 亮色下 #0f5f5c 压 #f4f7ef ≈ 7.0:1，标签字号 10.5px 也够（需 4.5:1） */ [data-theme="light"][data-app="dt"] { --accent:#0f5f5c; --accent2:#1b5a78; --accentSoft:rgba(15,95,92,.11); } [data-theme="light"][data-app="flow"] { --accent:#8a5a12; --accent2:#7d4f1a; --accentSoft:rgba(138,90,18,.11); } [data-theme="light"][data-app="plots"] { --accent:#26506b; --accent2:#254a70; --accentSoft:rgba(38,80,107,.11); } [data-theme="light"][data-app="trace"] { --accent:#2b5f45; --accent2:#1f5070; --accentSoft:rgba(43,95,69,.11); } /* ── 无障碍：尊重系统的"减少动态效果" ─────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } }