/* ============================================================ W2 Design System — Core Tokens (项目无关 · 可跨项目复用) 冷蓝 + 琥珀金主按钮 + 多彩柔色 + 大圆角 + 柔阴影 + 单皮肤(明/暗) 已含 AA 对比度修复。组件零硬编码,只引用这些变量。用法: 再 link core.css 暗色: 在或加 data-theme="dark" 亮色: 属性缺席即亮色; 需要在暗色子树里开一座"亮岛"时写 data-theme="light" ============================================================ */ /* ⭐ Dalton 唯一改动（R2-01，2026-08-04）: 亮色块的选择器**多了一个成员** （`[data-theme='light']`）,块体一个字节没动。为什么必须改在这里: 亮色原来只声明在 `:root` 上,而 `[data-theme='dark']` 声明在同一个 `` 元素上并覆盖了它 —— 于是自定义属性一路以**暗色值** 继承下去,子树上写 `data-theme="light"` 没有任何东西能把它们翻回来。亮色若只是"属性缺席",它就是一个**表达不出来的主题**,而契约允许 `theme:{mode:'light'}` 的报表存在(见 theme-provider.tsx 的 R2-01 注释)。为什么不写在增强层: 复制一份亮色值到 `styles/dalton.css` 会同时踩两条红线 —— 仓库的硬编码颜色闸(no-hardcoded-color.test.ts)与"同一个值两个副本"的漂移。给选择器加一个成员是零复制的那条路,升级时 diff 就是这两行。 ⚠️ **`:root` 必须留在选择器列表的末位**,不能写成 `:root, [data-theme='light']`。导出物那一侧有一道同步闸(`apps/api/test/engines/w2-export-tokens.test.ts`) 按「冒号 root 空格左花括号」这个**字面量**切出本块、与 API 内联的快照 **逐字节**比对(导出的 HTML `@import` 不到应用样式表,只能内联一份)。把 `:root` 挪到前面,那道闸会以「找不到选择器」当场判红 —— 本轮实测, pre-commit 抓到的就是它。选择器列表的顺序不影响特异性与级联, 于是这里让两件事同时成立: 亮岛能表达,导出物的同步闸照旧比对同一个块体。 ⚠️ 同理,本注释里也不能出现那个字面量本身(它会被 indexOf 先命中)。 */ [data-theme='light'], :root { /* ---- 品牌 / 动作 ---- */ --accent: #0875e1; /* 链接/激活/聚焦/选中/主蓝 */ --accent-hover: #005cb9; --accent-700: #005cb9; /* 可点文字(白底 ≥4.5:1) */ --accent-soft: #e7f0fe; /* 浅蓝底:激活行/chip/头像 */ --accent-ring: rgba(8, 117, 225, 0.32); --btn-primary: #f59000; /* 主按钮填充(招牌琥珀金) */ --btn-primary-hover: #e07e00; --btn-primary-text: #3a2400; /* 琥珀上深棕字 → AA ≥6:1 */ --ink: #005cb9; /* 数据强调读数(配 tabular-nums) */ /* ---- 文字 / 表面 ---- */ --text: #243244; --text-2: #5a6b82; --text-3: #9aa8bc; /* text-3 仅作占位/弱化,不承载关键文本 */ --bg-app: #f6f9fd; --surface: #ffffff; --shell: #fcfdff; --shell-2: #eef3fa; --hairline: rgba(20, 52, 102, 0.09); --hairline-2: rgba(20, 52, 102, 0.05); /* ---- 语义色(双编码:色+图标/文字,≥4.5:1) ---- */ --ok: #217a37; --ok-bg: #e6f5ea; --warn: #9a5b00; --warn-bg: #ffefd6; --bad: #a31b12; --bad-bg: #fbe3e1; --info: #005cb9; --info-bg: #d7eafc; --neutral: #4a5561; --neutral-bg: #ebedef; /* ---- 多彩柔色(KPI/卡/分区/图表系列) ---- */ /* --t-* = 图标/填充/大色块/图表; --t-*-text = 浅底上的小文本(AA) */ --t-blue: #0875e1; --t-blue-bg: #eaf2fe; --t-blue-text: #005cb9; --t-teal: #0e9384; --t-teal-bg: #e2f5f2; --t-teal-text: #0a6e63; --t-violet: #7c5cff; --t-violet-bg: #efebfe; --t-violet-text: #5b34cc; --t-amber: #e07e00; --t-amber-bg: #fdf1df; --t-amber-text: #9a5b00; --t-green: #1f9254; --t-green-bg: #e6f6ec; --t-green-text: #17703c; --t-rose: #e8618c; --t-rose-bg: #fdeaf1; --t-rose-text: #c12e66; /* 实体分类色(可选,通用版替代行业领域色) */ --cat-a: #4338ca; --cat-a-bg: #eef0ff; /* 标准/主类 */ --cat-b: #0e7490; --cat-b-bg: #e0f4f8; /* 自定义/次类 */ --cat-ai: #7c3aed; --cat-ai-bg: #f3ebfe; /* AI */ /* 图表序列(顺序固定,不跳序) */ --c1: #0875e1; --c2: #0e9384; --c3: #7c5cff; --c4: #e07e00; --c5: #1f9254; --c6: #e8618c; --c7: #5a6b82; /* ---- 字体 ---- */ --font-sans: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace; /* ---- 圆角 / 阴影 ---- */ --r-sm: 8px; --r-md: 10px; --r-lg: 18px; --r-xl: 22px; --r-pill: 999px; --e0: 0 1px 2px rgba(20, 52, 102, 0.04); --e1: 0 1px 3px rgba(20, 52, 102, 0.045), 0 6px 20px rgba(20, 52, 102, 0.05); --e2: 0 4px 14px rgba(20, 52, 102, 0.07), 0 12px 32px rgba(20, 52, 102, 0.06); --e3: 0 16px 44px rgba(20, 52, 102, 0.13), 0 4px 12px rgba(20, 52, 102, 0.07); /* ---- 间距(4px 基) / 布局 / 动效 ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --topbar-h: 56px; --subnav-h: 46px; --page-max: 1520px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-1: 80ms; --dur-2: 160ms; --dur-3: 240ms; } /* ============================================================ 暗色主题 (data-theme="dark") — 结构色翻转;组件靠变量自动适配 ============================================================ */ [data-theme='dark'] { --accent: #3b92f2; --accent-hover: #5ba8ff; --accent-700: #7cbaff; --accent-soft: rgba(59, 146, 242, 0.16); --accent-ring: rgba(59, 146, 242, 0.4); --btn-primary: #f59000; --btn-primary-hover: #ffa526; --btn-primary-text: #2a1800; --ink: #7cbaff; --text: #e6edf6; --text-2: #a6b6cc; --text-3: #6f8097; --bg-app: #0d1422; --surface: #151e2e; --shell: #111a28; --shell-2: #1b2536; --hairline: rgba(255, 255, 255, 0.1); --hairline-2: rgba(255, 255, 255, 0.06); --ok: #5bd08a; --ok-bg: rgba(33, 122, 55, 0.22); --warn: #f0b45c; --warn-bg: rgba(154, 91, 0, 0.24); --bad: #f5837a; --bad-bg: rgba(163, 27, 18, 0.26); --info: #7cbaff; --info-bg: rgba(8, 117, 225, 0.22); --neutral: #a6b6cc; --neutral-bg: rgba(255, 255, 255, 0.08); --t-blue: #4ba0f5; --t-blue-bg: rgba(8, 117, 225, 0.18); --t-blue-text: #8fc4ff; --t-teal: #3fb9ac; --t-teal-bg: rgba(14, 147, 132, 0.18); --t-teal-text: #6fd6c9; --t-violet: #a78bff; --t-violet-bg: rgba(124, 92, 255, 0.2); --t-violet-text: #c3aeff; --t-amber: #f5a93d; --t-amber-bg: rgba(224, 126, 0, 0.2); --t-amber-text: #f5c57a; --t-green: #56c281; --t-green-bg: rgba(31, 146, 84, 0.2); --t-green-text: #84d6a4; --t-rose: #f083ac; --t-rose-bg: rgba(232, 97, 140, 0.2); --t-rose-text: #f5a8c6; --cat-a: #8b82f2; --cat-a-bg: rgba(67, 56, 202, 0.22); --cat-b: #3fb3c9; --cat-b-bg: rgba(14, 116, 144, 0.22); --cat-ai: #a78bff; --cat-ai-bg: rgba(124, 58, 237, 0.22); --e0: 0 1px 2px rgba(0, 0, 0, 0.4); --e1: 0 1px 3px rgba(0, 0, 0, 0.45), 0 6px 20px rgba(0, 0, 0, 0.4); --e2: 0 4px 14px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45); --e3: 0 16px 44px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.5); }