/* ========================================================================== 达播工作台 Design Tokens — 浅色主题 三层结构：Primitive(A1) → Semantic(A2) → Component(B/C) 主色 #0064E0（Meta 钴蓝，替换原 TDesign 腾讯蓝 #0052D9） 规则：全站禁用裸 hex（仅 #fff/#000 例外），一律引用本文件 CSS 变量。 2026-09-06 底座重构（第十七轮）： 1) 色彩统一为 TDesign 官方单一色板 —— 清除 Apple iOS 系统色、Tailwind 图表色 2) 字号基准 13px → 14px（对齐 TDesign fontBodyMedium），全站正文不再发虚 3) 字重 510/590 → 500/600（PingFang/Noto SC 真实字重，消除合成加粗） 4) 阴影重做三档可感知层级，卡片不再只靠 1px 边框 ========================================================================== */ :root { /* ------------------------------------------------------------------ 一、Primitive（A1-identity / A1-structure）—— 原始值，不直接用于组件 ------------------------------------------------------------------ */ /* 主色 · Meta 钴蓝（500=主色 #0064E0；600=hover 深、700=active 更深） */ --color-primary-50: #E5EEFE; /* 激活底 / 选中 tint / 行 hover / KPI 蓝卡 ⚠️ 2026-09-25 UI 美化试妆（方向 A · 品牌化清新）：由 #EDF4FE 加深。 **加深幅度受对比度硬约束**：本令牌作底时会与 --color-accent-text （= primary-500 #0064E0）同框（base.css 的 .nav-item.is-active、 layout.css 的页标签、pages-finance 的 fin-chain__lab 等）， 故必须满足「主色字 on 本底 ≥ 4.5:1」。 沿色相扫描后取最深合规值：本值 4.61:1（原 #EDF4FE 为 4.87:1， 更深的 #DEEBFE 会掉到 4.47:1 → 不合规，已否决）。 可见度：Δ通道 25（原 17）、L 94.7%（原 96.3%）—— 从"几乎看不出是蓝的" 变为明确的品牌浅蓝，一处改动作用于 49 处引用。 */ --color-primary-100: #DBE8FE; --color-primary-200: #B9D3FD; --color-primary-300: #94BBFB; --color-primary-400: #5E9BF8; --color-primary-500: #0064E0; /* 基准主色（Meta 钴蓝） */ --color-primary-600: #0457CB; /* hover（比主色深） */ --color-primary-700: #0040A3; /* active（更深） */ --color-primary-800: #002B73; --color-primary-900: #001B4D; /* 品牌青（2026-09-25 UI 美化 · 方向 A 新增）—— 与 --color-chart-2 同值但**语义独立**：它是品牌色族的第二色，专供「蓝→青」渐变与点缀， 不要用它替代图表分类色（图表色有自己的一套成对维护规则）。 */ --color-brand-cyan: #029CD4; /* 品牌渐变（方向 A「品牌化清新」的核心资产，2026-09-25 新增） 三档：主渐变（蓝→青）/ hover 深一档 / active 更深一档 / 柔底渐变（浅蓝→浅青，可铺大面积而不压内容）。 ⚠️ 历史红线：只允许**同族**渐变（蓝→青，色相差约 18°，属相邻色），禁止跨色相（尤其 Indigo→Pink）。 ⚠️ 渐变只用于「块级装饰」（横幅 / 主 CTA / 强调卡），**不得**用于正文文字（可读性）。 ⚠️ 像素门禁 `tests/ui-token-standards.test.js` 对裸 hex 的例外只覆盖本文件 —— 故渐变的 三个色标全部写在这里，业务 CSS 一律 `var(--gradient-*)` 引用。 */ --gradient-brand: linear-gradient(120deg, var(--color-primary-500) 0%, var(--color-brand-cyan) 100%); --gradient-brand-hover: linear-gradient(120deg, var(--color-primary-600) 0%, #0189BE 100%); --gradient-brand-active: linear-gradient(120deg, var(--color-primary-700) 0%, #0177A6 100%); --gradient-brand-soft: linear-gradient(120deg, var(--color-primary-50) 0%, #E4F4FB 100%); /* 中性色 · TDesign Gray1-14（14 阶，CIELab 亮度均分） */ --color-gray-0: #FFFFFF; --color-gray-50: #F3F3F3; /* Gray1 页面底 / hover 底 */ --color-gray-100: #EEEEEE; /* Gray2 */ --color-gray-200: #E8E8E8; /* Gray3 弱分隔线 */ --color-gray-300: #DDDDDD; /* Gray4 默认边框 */ --color-gray-400: #C6C6C6; /* Gray5 输入框描边 */ --color-gray-500: #A6A6A6; /* Gray6 禁用文字 */ --color-gray-600: #8B8B8B; /* Gray7 */ --color-gray-700: #777777; /* Gray8 */ --color-gray-800: #5E5E5E; /* Gray9 */ --color-gray-900: #4B4B4B; /* Gray10 */ /* 字体栈（全站唯一） */ --font-family-body: "Noto Sans SC", "PingFang SC", "Inter", -apple-system, sans-serif; --font-family-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* 字号阶梯（对齐 TDesign：12 / 14 / 16 / 20 / 24 / 30 / 36） 正文基准 14px —— 中文在 12px 以下会发虚，禁止再降到 13px。 */ --font-size-xs: 12px; /* 辅助 / 徽章 / 时间戳 / 表头小字 */ --font-size-sm: 14px; /* 表格正文 / 次级正文（原 13px，2026-09-06 提升） */ --font-size-base: 14px; /* 正文 / 表单基准（TDesign fontBodyMedium） */ --font-size-lg: 16px; /* 卡片标题 / 强调（TDesign fontBodyLarge） */ --font-size-xl: 20px; /* 模块标题 */ --font-size-2xl: 24px; /* 页面标题 */ --font-size-3xl: 30px; /* KPI 数字 */ --font-size-4xl: 36px; /* 看板大数字（极少用） */ /* 字重三级体系 注意：必须是 400 / 500 / 600 —— PingFang SC 与 Noto Sans SC 只有这三档， 用 510/590 会触发浏览器合成加粗，Mac/Windows 粗细不一致、字形边缘发毛。 */ --font-weight-regular: 400; /* Read */ --font-weight-medium: 500; /* Emphasize */ --font-weight-semibold: 600; /* Announce */ /* 行高 */ --font-line-height-body: 1.5; --font-line-height-tight: 1.2; /* 字距 */ --font-letter-spacing-body: 0; --font-letter-spacing-display: -0.02em; /* ≥30px 标题 */ --font-letter-spacing-caps: 0.06em; /* ALL CAPS */ /* 间距（4px 网格，禁止 5/7/11/13 等离网格野值） */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ══════════════════════════════════════════════════════════════════════ 控件高度 · **两档制**（2026-09-26 乐哥拍板「两档制」+「令牌化全局兜底」） ══════════════════════════════════════════════════════════════════════ ⛔ 改前的乱象（真机实测 9 页）：输入框 3 档（28/34/44）、选择框 4 档 （28/30/34/44）、按钮 9 档（28/30/32/36/44/46/48/57/123）—— 同一排里 28 / 30 / 44 三种高度并排（业绩总表工具栏最明显）。 ⛔ 根因：2026-09-25 建了这三个令牌，但**几乎没用** （--control-height 使用 0 处、-sm 5 处、-touch 1 处，而硬编码有 65 处）， 且"紧凑档"只写在 4 个具体选择器里（`.toolbar--list` 等）—— **不是全局规则** ⇒ 任何新页面/新容器漏掉就回落 44px。 ✅ 现在全站**只有两档**（内容区）： · 标准档 44px —— 表单页 / 弹窗 / 页面头部主按钮（输入类操作，从容） · 紧凑档 34px —— 列表工具栏 / 表格行内 / 分页区（信息密度高，34 刚好） ⚠️ 顶栏与侧栏**自成一套**、不在此两档内（顶栏 48 胶囊、侧栏 46 菜单行）—— 它们由各自的作用域规则（`.page-tabs-bar .icon-btn` 等）自保，本令牌管不到。 ⚠️ 用法纪律（避免又退回散写）： · 控件高度**一律**写 `var(--control-height)` / `var(--control-height-sm)` · 新增页面若把控件放进 `.toolbar`，**自动**是 34px（全局兜底已覆盖） · 真要第三种高度时，先说明理由再加令牌，别就地写 px（那是乱象的起点） ══════════════════════════════════════════════════════════════════════ */ --control-height: 44px; /* 标准档：表单 / 弹窗 / 页面头部主按钮 */ --control-height-sm: 34px; /* 紧凑档：列表工具栏 / 表格行内 / 分页区 */ --control-height-touch: 40px; /* 历史遗留（手机端最小触摸目标）—— 见下方说明 */ /* 圆角阶梯（TDesign：3 / 6 / 9 / 12 / 9999，严格递增） ⭐ 2026-09-25 Gashora 像素级试妆：卡片 12 → **16px**、弹窗 12 → **20px**。 参考图（Gashora）卡片圆角实测 ≈16-20px——大圆角是"柔和、有呼吸感"的直接来源。 ⚠️ 与表格内嵌改造配套：表头背景已去、表格不再贴卡片边 ⇒ 大圆角不会顶破表头。 */ --radius-none: 0; --radius-sm: 4px; /* 徽章 / 小标签 */ --radius-seg: 6px; /* 分段控件 / 筛选 / Tab 项 */ --radius-md: 10px; /* 按钮 / 输入框 / 菜单行（2026-09-25：8 → 10，与卡片 16 协调） */ --radius-lg: 16px; /* 卡片（2026-09-25：12 → 16，Gashora 风） */ --radius-xl: 20px; /* 弹窗 / 抽屉（2026-09-25：12 → 20） */ --radius-pill: 9999px; /* 头像 / 状态胶囊 */ --radius-full: var(--radius-pill); /* 兼容别名，勿再新增 50% / 999px 写法 */ /* ⭐ 2026-09-26「内容分组 Tab」的托盘 —— 2026-09-28 全站升级为**白底胶囊 + 外框** （乐哥：「所有页面 tab 胶囊这个 ui 不统一，有的有外框，有的没有，需要补进去」）： 原「灰托盘 + 选中白块」在**白底卡片/页头内**套灰底，与卡片语言割裂； 统一为「白底 + 1px 边框 + 圆角 16 + 选中渐变蓝胶囊」，与详情页 Tab 行 / 页头胶囊 / .seg 同一套语言（全站内容分组切换只此一套）。 用于：业绩总表「直播业绩/私域业绩」、达人详情、达人表单、新建排期/排期详情、 签约公司详情/表单、成本下钻弹窗、新增用户弹窗（共 11 处）。 ⚠️ 令牌名保持 `--tab-tray-*`（改名会波及多处引用，收益低）；语义已更新为"胶囊容器"。 ⚠️ 圆角 12 → 16（跟 --radius-lg 走）：白底卡形态下与卡片圆角同档才不突兀 （原 12 是"灰托盘"形态的取值 —— 那时它是独立的小控件，不与卡片并列）。 */ --tab-tray-bg: var(--color-surface); --tab-tray-hover-bg: var(--color-surface-2); /* 未选中项 hover：浅灰块（白底上可见） */ --tab-tray-active-bg: var(--color-surface); /* 保留：ink 指示块用（现已全站隐藏） */ --tab-tray-radius: var(--radius-lg); /* 12 → 16（与卡片圆角同档） */ --tab-tray-item-radius: 8px; /* ⭐⭐⭐ 2026-09-28「克制玻璃」统一语言（乐哥：「顶栏透明度、左侧菜单栏、浮岛、 tab玻璃效果，看能不能统一同一套效果」）—— 之前四处各自写值（顶栏 .72 单色 / 侧栏纯白不透明 / 浮岛 .70→.44 / Tab .66→.40）， 数值漂移、观感不统一。现抽出四个令牌，**四处引用同一套**： · --glass-hi / --glass-lo：透白渐变（上实下透 —— 光源从上来，玻璃上缘更亮） · --glass-blur：模糊 + 饱和度（saturate 让穿过的色彩"活"起来，是玻璃质感的关键） · --glass-lit / --glass-lift：上缘 1px 高光 + 外投影（浮起的"光边"） ⚠️ 透明度取 0.70→0.46：比"白 82%"透（能看出底下内容在动）， 又比全液态玻璃（0.5→0.24）克制 —— 文字区仍清晰可读（管理后台的硬约束）。 ⚠️ 玻璃只用于"浮在内容之上的层"（顶栏/侧栏岛/浮岛/吸顶 Tab）—— 静态的卡片、表格**不许**用（它们不是浮层，加了会糊）。 */ --glass-hi: rgba(255, 255, 255, 0.70); --glass-lo: rgba(255, 255, 255, 0.46); --glass-blur: blur(20px) saturate(180%); --glass-lit: inset 0 1px 0 rgba(255, 255, 255, 0.95); --glass-lift: 0 8px 26px rgba(16, 24, 40, 0.14); --glass-bg: linear-gradient(180deg, var(--glass-hi) 0%, var(--glass-lo) 100%); /* ⭐⭐⭐ 2026-09-28「液态玻璃」（Liquid Glass，乐哥拍板选 **L3 浓液态** 档） ───────────────────────────────────────────────────────────────────────────── 用途：**全站 tab 条吸顶那一刻**的质感 —— 比上面的"克制玻璃"明显更强。 乐哥原话：「这个透白毛玻璃不行，做能液态玻璃那种」+ 三档里选了 L3。 ▸ 与克制玻璃的差别（为什么另起一套而不是改 --glass-*）： · 克制玻璃是**多个浮层共用**的日常语言（顶栏/侧栏/浮岛），0.70→0.46 很轻； · 液态玻璃只在**"贴顶"这一个时刻**出现（乐哥：「刚进来应该没那么重的阴影吧， 是不是和其他内容叠加才有」）⇒ 它是"临时状态"的质感，两者语义不同，不能混用。 · 改 --glass-* 会连带改顶栏/侧栏/浮岛（那是乐哥已验收的形态）。 ▸ 四层构造（液态玻璃的关键在**边缘**，不在模糊本身）： ① 斜向渐变底（135deg）—— 模拟光在玻璃里折射的走向（180deg 直下会显"塑料"） ② blur + saturate —— 让穿过的内容"活"起来 ③ **四边内高光**（上/下/左/右各一条 inset）—— 这是"厚玻璃"的立边 （只做上缘 = 普通高光条；四边都做才有"一块玻璃"的实体感） ④ 内发光带（上下各一道大半径 inset 白）—— 玻璃的"厚度透光" ⑤ 双层外投影（近密 + 远疏）—— 浮起的量感 ⚠️ 只在**吸顶态**挂载（`is-stuck`），静态页面零开销、零视觉影响。 ⭐⭐ 2026-09-28 晚 调「真的看得出透」（乐哥：「这个悬浮 tab 透明度几乎不可见， 看不出是透明的，得能看得出来」）—— 改前三项叠加把玻璃做成了"纯白"：alpha 平均 ~0.4 + blur(40) + **brightness(1.10)**， 而 tab 底下滚过的多是**白色卡片**（白+白+提亮）⇒ 与不吸顶的白底**几乎无差别**。 改后（三处同改，缺一不可）： · alpha 0.52/0.26/0.42 → **0.40/0.15/0.30**（白色覆盖少一档，底下内容能透出来） · blur 40 → **22**（40 会把穿过的一切抹成均匀一片，看不出"有东西在下面"） · **去掉 brightness(1.10)**（它是"看着像纯白"的主因；提亮只该由内高光负责） · saturate 220% → 150%（白底上高饱和无收益，降一档更稳） ⚠️ 可读性底线：玻璃上还要压 tab 文字，alpha 不能无限降 —— 实测 0.40/0.15/0.30 + blur22 下，深色文字仍清晰（真机渲染确认过）。 再往下调（如 ≤0.25/0.08）会开始与背景内容"打架"。 ⚠️ 改的是令牌 ⇒ `.tabs` / `.sf-tabs__track` / `.page-header--has-tabs` 三处吸顶态**同时**生效。 */ --liquid-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.15) 48%, rgba(255, 255, 255, 0.30) 100%); --liquid-blur: blur(22px) saturate(150%); --liquid-edge: rgba(255, 255, 255, 0.85); --liquid-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 1), inset 0 -2px 1px -1px rgba(255, 255, 255, 0.70), inset 2px 0 2px -2px rgba(255, 255, 255, 0.85), inset -2px 0 2px -2px rgba(255, 255, 255, 0.85), inset 0 -20px 28px -14px rgba(255, 255, 255, 0.65), inset 0 18px 26px -16px rgba(255, 255, 255, 0.50), 0 16px 44px rgba(16, 24, 40, 0.22), 0 3px 10px rgba(16, 24, 40, 0.10); /* 内层小框（装胶囊的那圈）在液态玻璃上的形态 —— 乐哥：「内层小框做」： 白卡变玻璃后，小框如果还是**不透明白底**，就像"玻璃上贴了张白纸"（实测踩到）。 这里给它**更透的白 + 更亮的边**，与外层玻璃形成两层玻璃的层次。 */ --liquid-tray-bg: rgba(255, 255, 255, 0.30); --liquid-tray-edge: rgba(255, 255, 255, 0.62); /* 顶部区（第一行）的高度。 ▸ 2026-09-19 结构重排后，**全页顶部只有一行**（面包屑那行已撤，标签栏升为第一行）， 所以本值与 --header-height 相等，二者都指"顶部那一行"。 ⚠️ 为什么仍保留两个令牌：`--header-height` 还被 analytics.js 的 headerHeight() 读来当**吸顶高度**（它只关心"顶部占多高"，不关心归谁）； 而本令牌描述"标签栏 / 品牌区这一行多高"。两者当前同值、语义不同，别合并。 ▸ 高度按下述三次调整，**每次都要连着标签体量一起改**（只改栏高会让标签显小）： ① 2026-09-19 晚 56 → 60（乐哥：「顶栏要不再高一点点？现在感觉有点挤」）。 ⭐ 实测："挤"的主因**不是栏高而是间距** —— 工具按钮间只有 2px、标签间 4px。 那次是**三处一起调**才见效：栏高 56→60、标签 36→40、间距 2/4→6/6。 ② 2026-09-20 60 → 52（乐哥：「最上面的标签，是不是太大，太占位置了」）。 ⭐ 本轮实测出的客观依据（这才是"太大"的硬证据，不是感觉）： · 标签 40px **比全站所有按钮都大** —— `.btn`=36、`.btn--sm`=30； · 标签栏内图标钮 40px **比全站 `.icon-btn` 基准 36 大**（100 处在复用它）， 标签栏是**全站唯一**把它放大到 40 的地方； · 栏高 60px 是全站最高的横条。 ⇒ 收回高度、**间距 6px 一个字不动**（上一条已证间距才是治"挤"的药）。 栏 52 / 标签 34 / 图标钮 36：标签上下各留 9px，仍比图标钮大一圈、不显小， 量级与 Chrome 浏览器页签相当。内容区起点 84 → 76，**每屏净赚 8px**。 ③ 2026-09-26 96 → 84（乐哥：「顶部的菜单高度，稍微矮一点点吧」）。 ⭐ 收到 84 的依据是**实测内部最高元素**（不是拍数字）： 顶栏内最高的可交互元素 = `.page-tabs-bar__tools`（含「我的」胶囊）**58px**、 logo 46px ⇒ 96px 时上下留白各 19px，明显偏松（顶栏像"一条厚带子"）。 收到 84 ⇒ 上下留白各 13px，仍比"贴边"宽裕，但顶栏不再压住首屏。 ⚠️ 为什么只减 12 而不是减更多：**58px 内容 + 2×13px 是这套内容的舒适下限**—— 再往下（如 76）留白只剩 9px，搜索胶囊/头像几乎顶到上下边缘，会重新变成 2026-09-19 那次"挤"的观感（乐哥当时反馈过）。 ④ 2026-09-26 84 → **72**（顶栏 A6 定稿，乐哥逐轮拍板：原型 .tmp-check/topbar-proto/）。 ⭐ 这次不是孤立收高度，是**整套重构**，内容物全部重排（详见 layout.css 顶栏段）： · 多标签导航恢复（9-25 隐藏的那套 DOM/逻辑原样启用，只删 display:none）； · 搜索 300px 胶囊 → 40×40 图标盒（乐哥：「搜索改成图标吧，不要输入框了」）； · 「我的」胶囊 → 40px 纯圆头像（乐哥：「改成一个圆圈，里面只有头像」）； · 铃铛/搜索/头像统一 40×40「有框无底」（1px 描边、透明底）； · 栏体改半透明毛玻璃（乐哥：「顶栏做一点透明，正文内容滚上去时更好看」）。 ⭐ 高度的依据同样是**实测**：原型先在 64px 上验证（乐哥：太矮不协调）， 加到 72 ⇒ 控件 40px 上下各留 16px（与 84/58 的 13px 同档，不挤不空）。 ⚠️ 历史调过的"挤/空"两个方向仍由 tests/page-tabs.test.js 的 H1/H2 锁着， 本值再调时不需要改断言（它们锁关系不锁数值）。 ⚠️⚠️ 改本值**必须同时**改 `--header-height`（下方 137 行）—— 两处不同值会让 分析页 `/analytics` 的目录条 sticky 错位（它读 --header-height 当吸顶高度： `top: var(--header-height)`，而它要贴在标签栏下沿）。 ⇒ 两值同源，改一个必须改另一个。公式：`--header-height = --frame-gap + --tabs-bar-height` （由 tests/restruct-topbar.test.js 的 C1 静态锁住，漏改会立刻红）。 ⚠️ 侧栏 top / 内容区 margin-top / 品牌区高度 / 标签栏高度**四处都是 `calc()` 或 `var()` 引用本令牌**，改一处自动全跟 —— **不要**去动那四处（它们本来就该跟着变）。 */ --tabs-bar-height: 72px; /* ⭐ 2026-09-26：84 → 72（顶栏 A6 定稿：标签恢复+搜索图标化+纯圆头像， 控件统一 40×40，栏 72 上下各留 16px；依据与拍板链见上方 ④）。 历史：56→60（09-19 加高）→52（09-20 收回）→76→88→96（09-25 加高）→84→72。 作顶栏高度的唯一来源。 */ /* 阴影三档（可感知层级：卡片 md、悬浮/下拉 lg、描边 ring） ⭐ 2026-09-25 Gashora 像素级试妆：全面**调柔调散**——参考图卡片阴影极淡但分明浮起， 旧值 opacity 偏高、偏移偏小 ⇒ 阴影"贴"在卡片下缘显脏。改为低透明度 + 大扩散。 */ --shadow-flat: none; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.03), 0 1px 3px rgba(16, 24, 40, 0.04); --shadow-md: 0 2px 4px rgba(16, 24, 40, 0.03), 0 8px 20px rgba(16, 24, 40, 0.05); --shadow-lg: 0 4px 8px rgba(16, 24, 40, 0.04), 0 16px 40px rgba(16, 24, 40, 0.07); --shadow-ring: 0 0 0 1px var(--color-border); --shadow-raised: var(--shadow-lg); /* 旧名兼容别名 */ /* 卡片浮起（苹果式）：0.5px 发丝线 + 大而散的柔影。用在纯白底弹层内的模块卡—— 白底上没有明暗差可用，只能靠这一层影把卡片"托"起来（浅灰底不适用，会显脏）。 */ --shadow-card-float: 0 0 0 0.5px rgba(16, 24, 40, 0.12), 0 1px 3px rgba(16, 24, 40, 0.04), 0 10px 22px rgba(16, 24, 40, 0.08); /* ══════════════════════════════════════════════════════════════════════════ 动效（2026-09-26 全站升级 · 乐哥：「要求轻盈灵动，看着自然舒服， 不要那种傻快傻快的效果」） ────────────────────────────────────────────────────────────────────────── ⭐ 「傻快」的根因不是时长不够，是**曲线**：原来只有一条 `cubic-bezier(0.2, 0, 0, 1)`，进出共用 —— 它头尾都偏"硬"， 动起来像"被推着走完"，所以显得机械。 ⭐⭐ 现在按**用途**分三条曲线（这是"轻盈"的主要来源）： ┌────────────────┬──────────────────────────────┬──────────────────────┐ │ 用途 │ 曲线 │ 为什么 │ ├────────────────┼──────────────────────────────┼──────────────────────┤ │ 进场 / hover │ cubic-bezier(.22, 1, .36, 1) │ 开头快、尾巴长： │ │ --motion-ease │ = easeOutQuint │ 立刻有反应，落地是 │ │ │ │ "滑进去"而不是"刹住" │ │ 位移 / 形变 │ cubic-bezier(.65, 0, .35, 1) │ 两端都缓：位置在变 │ │ --motion-ease- │ = easeInOutQuad │ 的东西（指示块、宽度）│ │ in-out │ │ 起停不吃力 │ │ 退场 │ cubic-bezier(.4, 0, 1, 1) │ 干脆收走 —— 离场拖泥 │ │ --motion-ease- │ = easeInQuad │ 带水会让人觉得"卡" │ │ exit │ │ │ └────────────────┴──────────────────────────────┴──────────────────────┘ ⚠️ 时长只从 150/200/300 微调到 **160/240/340**（+7%~13%）—— 不是靠"变慢"来显得柔和（那会变成迟钝），而是靠曲线 + 位移量 + 错峰（见 --motion-stagger）。慢一点点的同时"尾巴"更长，观感才轻。 ⚠️ `--motion-ease-standard` 是**兼容别名**（全站 133 处在用，几乎全是**颜色类**过渡： background-color / color / border-color / box-shadow）。⛔ 不要删它： 删了那些地方会静默回退成浏览器默认的 `ease`（无报错）。 ⛔⛔ **它不能指向带过冲的曲线**（2026-09-26 修，乐哥实报）——见下方专节。 */ --motion-fast: 110ms; /* hover / active / 选中 */ --motion-base: 155ms; /* 菜单展开 / 抽屉滑入 / 弹窗 */ --motion-slow: 220ms; /* 跨屏 / 大面板 */ /* ⭐⭐⭐ 2026-09-26 第三版：**C 档「活泼」定稿**（乐哥：「动画用 c」）───────────── 定稿过程（两轮调参 → 三档在线试用 → 老板拍板）： v1 150/200/300 + 单曲线 → 乐哥：「不要那种傻快傻快的效果」 v2 160/240/340 + 三条曲线 → 乐哥：「**还是不够灵动**」 ⛔ 那次误诊了：把"不灵动"归因于时长，于是**拉长**到 240ms。 真因是**位移曲线慢起步**（`cubic-bezier(.65,0,.35,1)` 的 y1=0）—— 逐帧实测前 2 帧只走了 1px。**加长时长只会让"糊"更明显。** v3（本版）= B 档「灵动」 + C 档「活泼」，在真实系统里用 `?motion=` 现场对比 ⇒ 乐哥选了 **C**（更短时长 + 更大的落位过冲）。 ⚠️⚠️ **两条曲线的分工是本版的核心**，别把它们合并成一个： · 位移（`--motion-ease-in-out`，y1=1.34 / 过冲 **3.85%**） 用于"滑过去"的元素（tab 指示块、抽屉）—— 真机实测：86px 行程上过冲 **3.3px**，读作"落位时轻咬一下"，不读作"没对准"。 · 弹入（`--motion-ease-pop`，y1=1.68 / 过冲 **13.61%**） 用于"从无到有"的元素（卡片入场、列表行、开关滑块、弹窗缩放）—— 它们没有"对准"语义，过冲大一点才生动。 真机实测：弹窗缩放峰值 1.0078（880px 宽上 ≈ 7px），温和。 ⇒ 实测依据：两组过冲都是"肉眼刚好读出生命力"的量级； 再往上（位移 y1≥1.45 / 弹入 y1≥1.85）就会被 tests/motion-system.test.js 抓红。 ⚠️ 过冲**只在落位段**，起手段仍是"立刻走"（t=0.25 时已走 91%）—— 这是"灵动"的来源，别为了"稳"把起步改慢。 */ --motion-ease: cubic-bezier(0.2, 1.34, 0.4, 1); /* 进场 / hover（快起 + 过冲）——**只给位移用** */ --motion-ease-in-out: cubic-bezier(0.2, 1.34, 0.4, 1); /* 位移 / 形变（同源，保证语言统一） */ --motion-ease-exit: cubic-bezier(0.5, 0, 0.9, 0.6); /* 退场（**慢起**快收，不抢戏） */ /* ⭐⭐⭐ 2026-09-26 **颜色类专用曲线（无过冲）** —— 乐哥实报「鼠标移到菜单上， 选中框会快速闪好几次」的修复。 ────────────────────────────────────────────────────────────────────────────── 🐞 事故链：v3 定稿时把本别名指向了 `--motion-ease`（带过冲 y1=1.34）， 本意是让历史那 133 处 hover/选中态"自动升级、更灵动"。 ⛔ 但**过冲曲线用在颜色上 = 闪**：颜色分量会冲过目标色再回落。 逐帧实测（hover 侧栏菜单项，.tmp-check 对照实验）： · 过冲版：bg 冲到 **rgb(249,254,255)**（比目标 241,245,249 还亮）→ 再回落； 文字色冲到 **rgb(27,29,31)**（比目标更黑）→ 再回 —— 人眼读作"闪一下"； 鼠标滑过几个菜单项就连闪几次。 · 无过冲版：全程**单调趋近**目标色，不冲过头。 ⇒ 颜色的"过冲"没有任何视觉意义（不像位移有"落位"语义），只会闪。 ⭐ 本值 `cubic-bezier(0.2, 0, 0.2, 1)`（easeOutQuad 类）：无过冲 + 快起缓收， 与 --motion-ease 共享 x1=0.2 的起手节奏（语言统一）。 ✅ 分工（记住这三条，别再合并）： · 颜色 / 状态 / 布局尺寸（本值）—— **绝不过冲** · 位移 / 形变（--motion-ease-in-out，过冲 3.85%）—— 滑过去的元素 · 弹入（--motion-ease-pop，过冲 13.6%）—— 从无到有的元素 ⚠️ 由 tests/motion-system.test.js 静态锁住"本值必须无过冲"（反向注入有牙）， 想用过冲请显式引用 --motion-ease / --motion-ease-pop。 */ --motion-ease-standard: cubic-bezier(0.2, 0, 0.2, 1); --motion-ease-pop: cubic-bezier(0.34, 1.68, 0.5, 1); /* 弹入（落位回弹，约 13.6%） */ /* 进场位移量。12px（C 档）：配合"快起"曲线，进场有明确的"从下长出来"。 ⚠️ 真机实测（页面区块 translateY 逐帧）：12 → 6.28 → 2.06 → **-1.48** → 0 —— 落位时越过终点 1.5px 再收回，肉眼读作"落定"，不晃。 ⚠️ 别再加大：超过 16px 在表格式密集页面会读成"整页在跳"。 */ --motion-rise: 12px; /* 按压缩放。0.96 = 缩小 4%。 ⚠️ 原型里的 C 档写的是 0.955 —— 定稿时**收到 0.96**：0.955 离"按钮在躲你的手指" 那条线（0.95）只差 0.005，在"C 档已经很快"的前提下再加深度按压， 会从"有咬合感"滑向"廉价"（按压深度与时长无关，不该跟着档位一起激进）。 ⚠️ 到 0.95 就是廉价感的来源，别试探那条线。 */ --motion-press: 0.96; /* 列表 / 卡片逐块进场的错峰间隔。30~40ms 是人眼能读出"依次"的最小差。 ⚠️ 原型里的 C 档写的是 26ms —— 定稿时**回到 30ms**：低于 30ms 就退化成 "一起出现"，错峰的意义消失（错峰是"灵动"里最省力的一笔，不该被砍）。 ⚠️ 总时长必须封顶（见 base.css 里用 `:nth-child(-n+6)` 限帽）， 否则 20 行的表会跑到 600ms，用户等数据时反而觉得慢。 */ --motion-stagger: 30ms; /* 图标（Lucide 内联 SVG，三档尺寸，stroke-width 2） */ --icon-size-sm: 16px; --icon-size-md: 20px; --icon-size-lg: 24px; --icon-stroke-width: 2; /* 布局 */ --container-max: 1440px; /* ⭐ 2026-09-28 乐哥拍板放宽：「页面是不是可以整体宽一点，当前宽度不够， 内容被压缩了，得不偿失」⇒ 表单/档案页的内容上限 1120 → **1280**。 ──────────────────────────────────────────────────────────────────────── ⚠️⚠️ 这个令牌与 `layout.css` 的 `.page--narrow` 是**两个来源取小**的关系 （实测：窄档 1144 生效时内容区 1064 < 1120，令牌其实没起作用）。 ⇒ **必须两处同步改**：只改档位不改本令牌 ⇒ 表单页被 1120 卡住， 只从 1064 涨到 1120（+56px），而不是预期的 1280（+216px）。 本次两处一起放：窄档 1144→1360、本令牌 1120→1280，取小后恰好都是 1280。 ⚠️ 为什么取 1280 而不是跟着窄档放到 1360：表单页的**卡片**外侧还要留出 与页面左右 padding 的呼吸（内容 1280 = 卡片实宽，页面 padding 各 40 在外）。 ⚠️ 上限依据（乐哥屏 1920 实测）：可用内容区 1666-80=1586。 放宽后表单页内容 1280、左右各留 153；明细页 1440、左右各留 73。 再宽（C 档 1543）就是 2026-09-19 乐哥否掉的"字段被拉到两端、视线来回跑"。 */ --form-max-width: 1280px; --sidebar-width: 240px; /* 设计稿侧边栏 240（Meta 折叠式） */ --sidebar-width-icon: 64px; --sidebar-offset: 14px; /* ⭐ 2026-09-25 Gashora 骨架落地新增：**浮岛缝隙**。 骨架由三块浮起白卡组成（顶栏卡 / 侧栏岛 / 内容区白大卡），它们之间、以及它们与视口边缘 之间的缝隙**必须全等** —— 否则会读成"没对齐"。 ⚠️ 这是 2026-09-19「悬浮版」踩过的坑（当时左/中/右 2px、上/下 8px，差 4 倍）。 本令牌就是用来消灭那种不对等的：所有缝隙一律 var(--frame-gap)，不许各写各的数值。 */ --frame-gap: 14px; --page-padding: var(--space-8); /* 32px 灰色 gutter（设计稿内容区左右留白） */ /* ⭐ 2026-09-25 Gashora 骨架落地：本令牌语义**变了**（不再是"与 --tabs-bar-height 同值"）： 以前 = "顶部那一行的高度"（与 --tabs-bar-height 同值，52）； 现在 = "**吸顶高度**" —— 即"贴到顶栏下沿"该用多少。给两处用： · analytics.js 的 headerHeight()（分析页目录条算吸附位置） · 分析页目录条 `top: var(--header-height)` ⚠️ 值 = **上缝 + 顶栏高** = `--frame-gap + --tabs-bar-height`。 ⛔ 不是"上缝 + 顶栏高 + 下缝"（那是内容区顶边，124→现在 112）—— 目录条要贴在**顶栏下沿**，不是内容区顶边。 ⚠️ 两令牌的关系（= frame-gap + tabs-bar-height）由 tests/restruct-topbar.test.js 的 C1 静态锁住，改 --tabs-bar-height 却漏改这里会**立刻变红**。 ▸ 2026-09-26：96 → 84 ⇒ 本值 110 → 98（14 + 84）。 ▸ 2026-09-26：84 → 72（A6 定稿）⇒ 本值 98 → **86**（14 + 72）。 */ --header-height: 86px; --section-y: var(--space-8); --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* 层级 z-index */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1100; --z-modal: 1200; --z-toast: 1300; /* ------------------------------------------------------------------ 二、Semantic（A2）—— 语义别名，组件层引用的唯一入口 ------------------------------------------------------------------ */ /* 前景 · TDesign 文字灰阶（font-gray-1/2/3/4 = 黑 90%/60%/40%/26%） 对比度（白底）：primary 17.5:1 / secondary 5.7:1 / tertiary 2.85:1 tertiary 仅供占位符与禁用态，不得用于正文。 */ --color-fg: #1C1E21; /* 主文字 */ --color-fg-2: #3F4753; /* 正文 */ /* ⚠️ 2026-09-25 UI 美化试妆：次级文字由「紫调灰」转「冷调蓝灰」并加深一档 —— muted #5D6C7B → #546579（白底对比度 6.5:1），meta #8595A4 → #7C8DA3（3.6:1）。 理由：全站 323 + 102 处次级文字是"灰感"的最大来源；转冷调后与主色同族， 白底可读性不降反升。 */ --color-muted: #546579; /* 次级 / 副标题 */ --color-meta: #7C8DA3; /* 辅助 / 时间戳 */ /* ⚠️ 历史变量补齐（2026-09-13）：`--color-fg-3` 早年被 4 处引用但**从未定义** （table.css 的 .kw-scope__sep、pages-influencer.css 一处、sample-distributions.js 圆点两处）。 其中 2 处没写 fallback → `color` 声明**静默失效**（继承父级色，长期无人发现）； 另 2 处写了 `var(--color-fg-3,#C7C7CC)` → 一直显示 fallback 值。 语义上它就是「第三级前景 = 辅助灰」，与 --color-meta 同级，故就地定义（而不是改 4 处调用点）—— 这样 4 处同时恢复正确，也不再有"引用了不存在的变量"这一隐患。 */ --color-fg-3: #7C8DA3; /* 三级前景（兼容历史命名，等价 --color-meta；试妆同步转冷） */ --color-placeholder: #B9C1CC; /* 占位符 */ --color-disabled: #C4CBD4; /* 禁用 */ /* 表面（TDesign Gray1 / White：卡片与页面底有明确分层） ⚠️⚠️ 2026-09-25 UI 美化试妆 **v2 修正**（乐哥反馈：「背景这个我存疑，因为这样看着也不简洁清新」）： · v1 把页面底改成 #F0F5FB（饱和度 58% 的明确蓝）——**方向错了**。 实测全屏约 40% 面积铺这块蓝 ⇒ 大面积冷色 = 沉闷；且它与白卡只差 3.7% 明度 ⇒ 卡片像"贴纸浮在蓝布上"⇒ 块状感强 ⇒ 反而更不简洁。这是"用大面积带色去凑彩色占比指标"的误判。 · v2 定调：**背景要近白（几乎看不出颜色），彩色只出现在小面积元素上**。 这正是 Notion / Linear / Vercel 的做法（底色饱和度 <15%，靠"极浅底 + 弱边框 + 留白"出透气质感）。 · ⭐ 关键认识：像素指标里的「纯灰」不等于"脏"——**明亮的近白**会被算作纯灰，但它恰恰是"简洁"的来源。 真正要打的是"暗、闷、无层次"，不是"有没有色相"。故 v2 不再追求降低纯灰占比。 三色同源（同色相、等差明度），保证不出现"两种白"的脏感。 */ --color-bg: #F6F6F6; /* 页面底（⭐ 2026-09-25 Gashora 骨架落地：#F8FAFC → #F8F8F8 → **#F6F6F6**。 参考图实测底色 #F8F8F8——**中性灰白、不带蓝调**； 旧值 #F8FAFC 带一丝冷蓝，与"克制、干净"的目标气质不符。 明度几乎不变（97.3%），仅去掉色相 ⇒ 卡片仍靠阴影而非底色反差区分。 再调 #F6F6F6：参考图实测的**界面灰底**值——比 #F8F8F8 略深一档， 才能让「侧栏浮岛 / 顶栏卡 / 内容区白大卡」浮起的层次读得出来 （三块白卡之间的缝隙就是露这条灰底）。 */ --color-surface: #FFFFFF; /* 卡片（纯白，始终不变） */ --color-surface-2: #F1F5F9; /* hover / 次级底 / 表头底（v1 #EEF3FA → v2 调浅） ⚠️ 表头底仍比页面底**深一档**（Δ通道 8 vs 8，但明度低 1.3%）， 使表头在近白页面上仍是清晰的"标题行"——乐哥已认可表头效果，保持该层次关系。 这是全站引用最多的表面令牌（183 处，含 --table-header-bg / --input-disabled-bg）。 */ /* 边框（同色相冷调，与主色同族） ⚠️ 试妆：由中性灰 #E5E8EC/#EDEFF1 微调为蓝灰 —— 347 处引用， 整体边界从"冷灰"变"蓝灰"，与底色/主色形成同一色彩体系。 */ --color-border: #E1E8F2; --color-border-soft: #EDF0F4; /* 卡片描边（⭐ 2026-09-25 Gashora 试妆：#E8EEF7 → #EDF0F4， 更淡且去蓝调——参考图卡片几乎看不到描边，靠柔和阴影区分） */ /* 强调（每屏可见使用 ≤ 2 处：主 CTA + 激活态） */ --color-accent: var(--color-primary-500); --color-accent-hover: var(--color-primary-600); --color-accent-active: var(--color-primary-700); --color-accent-on: #FFFFFF; --color-accent-text: var(--color-primary-500); /* 主色文字/图标（链接、激活态） */ --color-accent-border: var(--color-primary-200); /* 主色描边（2026-09-25 补：权限页 perm-chip 等此前引用不存在的令牌，一直走兜底值） */ --color-accent-bg: var(--color-primary-50); /* 语义色（Meta 功能色：成功 / 告警 / 危险，浅底成对） */ --color-success: #31A24C; --color-success-bg: #EAF6EF; --color-warning: #F2A918; --color-warning-bg: #FEF5E7; --color-danger: #E41E3F; --color-danger-bg: #FDE8EB; --color-danger-soft: #FDE8EB; --color-price: var(--color-danger); /* 价格：与危险色同源，避免多一套红 */ --color-info: #0064E0; --color-info-bg: #EDF4FE; --color-info-soft: #EDF4FE; /* 语义文字色（无底色场景专用）：--color-success/--color-warning 是给「浅底+同色字」配对的， 单独当正文文字放在白底上小字可读性不足，故各深一档；仍属同色系，不引入新色相 */ --color-success-text: #1B7F3B; /* 白底上的成功文字（对比度 ≈5.0:1） */ --color-warning-text: #B25C0C; /* 白底上的警示文字（对比度 ≈4.8:1） */ /* 语义「描边 / 整行底」变体（2026-09-14 补，把散落在 pages.css 的硬编码色收进令牌） 用途：① 描边比 --color-warning 浅，边框上更柔和；② 整行警示底比 --color-warning-bg 更浅， 避免与行内内容抢视觉。--color-danger-strong / -border 同理，用于深底文字与危险描边。 */ --color-warning-border: #F2C879; /* 警示描边（如"待结算"卡片外框） */ --color-warning-bg-soft: #FFFBF0; /* 警示整行底（比 --color-warning-bg 更浅） */ --color-warning-bg-hover: #FFF6E3; /* 上者 hover */ --color-warning-accent: #E8A33D; /* 强调描边（行首色条） */ --color-danger-strong: #D93025; /* 白底危险文字（比 --color-danger 更深，对比更足） */ --color-danger-border: #F5B5AE; /* 危险描边 */ /* 统一「提示 / 警示条」规格（2026-09-14 乐哥定稿） ------------------------------------------------------------------ 乐哥原话：「所有的警示提醒，应该做成（截图）这种，**不需要右边清楚的叉**， 不要做成现在提成总览里那种**白底**的」 起因：提成总览 / 达人结算 / 华大对账 的说明条原为「近白底 + 左竖线」（--color-surface-2， 几乎与卡片同色）→ 不够醒目、且与看板页的「透明底 + 左竖线」形态各不相同。 定稿形态：**浅色底 + 圆角 + 左侧图标**（TDesign Alert 形态），**不带关闭叉**。 语义色**分两档保留**（不合并）： · 说明类（info）→ 浅蓝底 + 蓝图标 · 警示类（warn）→ 浅橙底 + 橙图标 ⚠️ 不把警示类也改成蓝色：那会让"警告"失去辨识度（乐哥要的是**形态统一**， 不是把所有提示都降级成同一种语义）。 用法：各页面自有类名（.an-banner / .st-rule__inner / .st-pending-bar …） 统一引用下面这组变量，保证以后新增提示条自动同规格。 */ --notice-radius: var(--radius-md); --notice-pad-y: var(--space-2); --notice-pad-x: var(--space-3); --notice-gap: var(--space-2); --notice-bg: var(--color-info-bg); --notice-border: var(--color-primary-100); --notice-ico: var(--color-info); --notice-fg: var(--color-fg-2); --notice-warn-bg: var(--color-warning-bg); --notice-warn-border: var(--color-warning-border); --notice-warn-ico: var(--color-warning); /* KPI 徽章色调（柔和色块：图标底 + 同色系深字。2026-09-14 立 —— 原先这套 5 色 在 dashboard.js 与 influencer-detail.js **各写一份**，改一处另一处不跟随； 收进令牌后成为唯一来源，JS 侧用 UI.cssVar() 读取。 */ --color-tone-blue-bg: var(--color-primary-50); --color-tone-blue-fg: var(--color-primary-500); --color-tone-teal-bg: #DCF3E9; --color-tone-teal-fg: #0F6E56; --color-tone-orange-bg: #FBEDD9; --color-tone-orange-fg: #854F0B; --color-tone-green-bg: #E9F3DB; --color-tone-green-fg: #3B6D11; --color-tone-purple-bg: #DDD9FB; --color-tone-purple-fg: #534AB7; /* KPI 图标块（2026-09-25 Gashora 像素级试妆：参考图的彩色实心圆角方块 + 白图标）。 色值取自参考图实测（紫/橙/粉/蓝），绿补一个同明度的标准绿。 ⚠️ 与 --color-tone-*-fg 是两套：tone-fg 是"浅底上的深字"（字色），本组是"实心方块"（底色）。 只用于看板 KPI 卡（pages.css 的 .kpi-card__icon--*），别挪作正文/表头色。 */ --kpi-icon-blue: #6090E0; --kpi-icon-green: #34A853; --kpi-icon-orange: #F2781C; --kpi-icon-purple: #9050D0; --kpi-icon-pink: #F03070; /* ── 侧栏一级菜单图标 · 业务域色（2026-09-25 乐哥选定「业务域分色」方案）────────── 用途：给 11 个业务分组的**图标**上色，让人**靠颜色找菜单** —— 人找菜单是按业务想（"我要看钱 → 往绿色那一片找"），不是按第几个找。 ⚠️ 为什么是「按业务域」而不是「每个分组一个颜色」： 6 个业务域配 6 色 ⇒ **颜色本身在说"这是哪一类活"**；11 色全彩是纯装饰、花哨无规律。 ⚠️ 协调性依据：色值**优先复用既有资产**（--kpi-icon-*，已经在看板里用了 5 个）， 只有「商品青」「工具灰」是新登记的，且这两个也按"中饱和中明度"对齐既有色系的彩度 （不引入酸亮色）。 ⚠️ **只给图标上色、文字仍用正文灰**（.nav-group-text 不动）⇒ 彩色面积小、不抢内容。 ⚠️ 上色规则在 base.css（按 [data-domain] 选择器），domain 值由 app.js 的 NAV_DOMAIN 映射集中产出（**不按中文组名选择器** —— 组名改过一次， 按中文名写 CSS 会在改名时静默失效）。 */ --nav-domain-analysis: var(--kpi-icon-blue); /* 经营数据类：经营分析 / 业绩管理 / 月度汇报 */ --nav-domain-ops: var(--kpi-icon-orange); /* 运营执行类：达人信息 / 直播排期 */ --nav-domain-goods: #0FA3A3; /* 商品类：货品与佣金（新登记，青） */ --nav-domain-finance: var(--kpi-icon-green); /* 财务钱款类：结算与对账 / 成本管理 / 单据与票据 / 付款与台账 */ --nav-domain-risk: var(--kpi-icon-pink); /* 风险异常类：售后分析 */ --nav-domain-tool: #8A94A6; /* 工具类：系统设置 / 门户（新登记，中性灰蓝 —— 刻意最不抢眼） */ --nav-domain-personal: var(--kpi-icon-purple); /* 个人类：我的 */ /* 标签 / 头像缺色兜底 + 品牌色（2026-09-14 收进令牌，原先散在 ui.js 里硬编码） */ --color-tag-fallback: #A6ADBC; /* 标签未指定颜色时的兜底灰 */ --color-brand-starmedia: #2F6BFF; /* 星盟品牌蓝（仓库标签专用，非 TDesign 色板） */ --color-tag-location: #B45309; /* 排期日历「地点」标签（暖琥珀，刻意区别于达人/平台色） */ /* 页面水印 / 顶部横幅（watermark.js 专用；原先硬编码在 JS 里） */ --color-watermark: #7C8BA1; /* 平铺水印文字色（低透明度叠加） */ --color-watermark-strong: #64748B; /* 水印文字色（高透明度档） */ /* ── Gashora 骨架令牌（2026-09-25 落地，乐哥指定参考图）────────────────── 用途：把"顶栏浮起卡"这一套骨架用到的颜色收进令牌 （项目规范：CSS 里不许写裸 hex，一律引令牌 —— 见 tests/ui-token-standards.test.js）。 命名按"用在哪"而非"是什么色"：同一个 #F4F4F6 若以后要调，只需改这一处。 ⚠️ 2026-09-27：`--color-surface-canvas`（内容区白大卡底 #FCFCFC）**已删除** —— 乐哥给了 PMS 参考图后拍板去掉那层白卡（详见 layout.css 的 .page-stack 注释）。 它是死令牌的直接原因：删掉后**不要再引用**，否则 var() 取不到值会静默失效。 */ --color-frame-border: #EBECEF; /* 模块卡的描边色（.card / .module-card）—— 在页面灰底上替代阴影划界（卡片 vs 底差 9 阶 + 细边框） */ --color-topbar-field-bg: #F4F4F6; /* 顶栏搜索胶囊底色 */ --color-topbar-chip-border: #E8E8EC; /* 顶栏头像胶囊的边框 */ --color-topbar-chip-hover: #F7F7F9; /* 顶栏头像胶囊 hover 底 */ --color-banner-danger: #D43A38; /* 页面顶部红色提示条底色 */ /* 模块标题栏状态底（全局通用，2026-09-10 立） 用途：带「开启/关闭」状态开关的模块，标题栏整条底色随状态切换。 黄 = 开启（单独维护 / 偏离默认，需留意）；绿 = 关闭（跟随体系 / 默认正常态）。 用法：标题栏容器加 .is-on / .is-off → background 取 --color-head-on-bg / --color-head-off-bg， 标题文字取对应 --color-head-on-fg / --color-head-off-fg。 */ --color-head-on-bg: var(--color-warning-bg); /* 开启态标题底：浅黄 */ --color-head-on-fg: var(--color-warning-text); /* 开启态标题字：深橙 */ --color-head-off-bg: var(--color-success-bg); /* 关闭态标题底：浅绿 */ --color-head-off-fg: var(--color-success-text); /* 关闭态标题字：深绿 */ /* 图表分类色（TDesign 官方扩展色板，定性色板顺序：品牌蓝 → 天蓝 → 绿 → 黄 → 橙 → 红 → 紫 → 粉） 严禁再使用 Tailwind 默认色板。 */ --color-chart-1: #0064E0; /* 品牌蓝 */ --color-chart-2: #029CD4; /* Cyan5 */ --color-chart-3: #2BA471; /* Green5 */ --color-chart-4: #F5BA18; /* Yellow4 */ --color-chart-5: #E37318; /* Orange5 */ --color-chart-6: #D54941; /* Red6 */ --color-chart-7: #8E56DD; /* Purple6 */ --color-chart-8: #E851B3; /* Pink5 */ /* 事项类型色（TDesign 官方色板，全站统一，勿改） 2026-09-06：由 Apple iOS 系统色迁移至 TDesign 同族色 */ --color-item-arrival: #8B8B8B; /* 到达 Gray7 */ --color-item-trace: #2BA471; /* 溯源拍摄 Green5 */ --color-item-source-live: #008858; /* 溯源直播 Green6（深绿，区分溯源拍摄） */ --color-item-course: #0064E0; /* 小课堂 品牌蓝 */ --color-item-interview: #8E56DD; /* 博士访谈 Purple6 */ --color-item-live: #D54941; /* 带货直播 Red6 */ --color-item-departure: #A6A6A6; /* 离开 Gray6 */ --color-item-custom: #8B8B8B; /* 自定义事项 Gray7（统一、不显眼，与到达同灰） */ /* 事项类型浅底（TDesign 对应色阶 1-2，随主色成对维护） */ --color-item-arrival-soft: #EEEEEE; /* Gray2 */ --color-item-trace-soft: #E3F9E9; /* Green1 */ --color-item-source-live-soft: #C6F3D7; /* Green2 */ --color-item-course-soft: #EDF4FE; /* 主色浅底 */ --color-item-interview-soft: #FBF0FF; /* Purple1 */ --color-item-live-soft: #FFF0ED; /* Red1 */ --color-item-departure-soft: #F3F3F3; /* Gray1 */ --color-item-custom-soft: #EEEEEE; /* Gray2 */ /* ------------------------------------------------------------------ 三、Component（B-slot / C-extension）—— 组件专用 token ------------------------------------------------------------------ */ /* 聚焦环 */ --focus-ring: 0 0 0 3px rgba(0, 100, 224, 0.22); /* 按钮 */ --button-primary-bg: var(--color-accent); --button-primary-fg: var(--color-accent-on); --button-primary-hover: var(--color-accent-hover); --button-primary-active: var(--color-accent-active); /* 主按钮渐变（2026-09-25 UI 美化第二刀「组件层」启用）—— 全站 185 处 `.btn--primary` 同时生效，是「品牌化清新」最高杠杆的一处改动。 ⚠️ 三态各一档：hover 深一档、active 更深一档 —— 若某态不写，会回落成纯色造成"闪变"。 ⚠️ 语义按钮不走这里：`.btn--danger`（危险）必须保持纯红，红色渐变会被读成"警示升级"。 */ --button-primary-image: var(--gradient-brand); --button-primary-image-hover: var(--gradient-brand-hover); --button-primary-image-active: var(--gradient-brand-active); --button-secondary-bg: transparent; --button-secondary-fg: var(--color-accent-text); --button-secondary-border: var(--color-gray-400); --button-ghost-bg: transparent; --button-ghost-fg: var(--color-fg); --button-danger-bg: var(--color-danger); --button-danger-fg: #FFFFFF; /* ⭐ 2026-09-26「软蓝按钮」：浅蓝底 + 蓝字，用于**表格行内的业务动作** （入库 / 维护 / 确认 / 查看 等，见 table.css 的操作列统一段）。 为什么需要它：这些动作原先直接用 `.btn--primary`（主按钮同款蓝实心块）， 一屏 20 行 = 20 个蓝块，比页面右上角真正的 CTA（新增 / 导出）还抢眼 —— 而它只是"这一行的次级动作"。主按钮权重要留给页面级动作。 ⚠️ 三态：hover 深一档（primary-200），与 `.btn--primary` 的"hover 深一档"同规律。 */ --button-soft-bg: var(--color-primary-100); --button-soft-bg-hover: var(--color-primary-200); --button-soft-fg: var(--color-accent-text); /* 输入框 */ --input-bg: var(--color-surface); /* ⭐ 2026-09-25 UI 美化第二刀：由硬编码 `#E6E8EB`（中性灰）改为引用 `--color-border` （蓝灰族 #E1E8F2）。原因：全站边框已统一转冷调蓝灰，输入框描边若仍是中性灰， 会在一排控件里"偏黄/偏脏"（乐哥要调的「那些框」之一）。改引用后与其它框同族， 且以后调边框色一处生效。 */ --input-border: var(--color-border); --input-focus-border: var(--color-accent); --input-error-border: var(--color-danger); --input-disabled-bg: var(--color-surface-2); --input-disabled-text: var(--color-disabled); /* 开关：激活态轨道色。模块需换色时**只覆盖这个变量**，不要去重写 .switch 的选择器 （重写选择器会与组件默认规则同特异性、靠加载顺序生效，极易静默失效） */ --switch-active-bg: var(--color-accent); /* 表格 ⭐ 2026-09-25 Gashora 像素级试妆：表头由「冷调浅蓝底 + 品牌深蓝字」改为「白底 + 灰字」—— 参考图（Gashora）的表头**没有底色**，靠底部一条细分隔线与数据区分，字是中性灰。 这推翻了同日上午「方向 A 品牌化」定的品牌蓝表头 —— 是乐哥看参考图后的新方向。 ⚠️ 影响面：全站所有表格（table.css 的 .table thead th）与日历周历行 （pages-schedule.css .calendar__weekdays）共用本条，改一处全站表头同时换装。 ⚠️ 表头白底后，flush 卡片（.module-card--flush 有 overflow:hidden）会把大圆角裁切干净， 不存在"表头背景顶破圆角"的问题。 */ --table-header-bg: var(--color-surface); --table-header-fg: var(--color-fg-2); --table-header-line: #EFEFEF; /* 表头下分隔线（Gashora 落地新增：中性浅灰，见 table.css）*/ --table-row-hover: var(--color-primary-50); --table-row-alt: var(--color-bg); /* 隔行底色（斑马纹）：比主指标行 --color-surface-2 稍深，看得出差异但不喧宾 */ /* ⭐ 2026-09-25 Gashora 骨架落地：行分隔线由 --color-border-soft(#EDF0F4) 改为**独立中性灰**。 参考图实测的表格行线是 #F2F2F2（比卡片描边更淡）——行线是"最轻"的一级线， 不能与卡片描边同色同重，否则表格内部看着和卡片边界一样重。 */ --table-divider: #F2F2F2; /* 徽章（状态「深字 + 浅底」成对） ⭐ 2026-09-25 UI 美化第三刀：字色改为**徽章专用的加深值**（下方注释说明）， 不再直接引用 `--color-warning` / `--color-danger` —— 那两个令牌被 9 个 CSS 文件 100+ 处引用（图表、成本、财务…）， 动它们会波及无关模块；而 `--badge-*-fg` **只被 `.badge--*` 使用**（已核对）， 改这里 = 只影响徽章文字，是可控的最小面。 ⚠️ 为什么必须加深（实测对比度，非审美偏好）： 徽章底色是一层**近白的浅色**，而 `--color-warning`(#F2A918) 与 `--color-success`(#31A24C) 自身亮度偏高 —— 亮字压在浅底上，对比度实测只有 **1.86:1**（橙）/ 3.28:1（绿）， **远低于 WCAG 正文 4.5:1**，12px 小字几乎糊成一片（这是既有问题，非本次引入）。 ⇒ 取「同色相、深一档」的值，**语义不变**（未授权仍是橙色系、通过仍是绿色系）， 只是让人看得清。实测：橙 5.23:1 / 绿 5.09:1 / 红 5.62:1 —— 全部达标。 ⚠️ 这三条只用于**文字色**；底色（`--badge-*-bg`）保持原样不动。 */ --badge-success-fg: #0B7A55; /* 原 var(--color-success) 3.28:1 → 5.09:1 */ --badge-success-bg: var(--color-success-bg); --badge-warning-fg: #9A5B00; /* 原 var(--color-warning) 1.86:1 → 5.23:1（提升最显著） */ --badge-warning-bg: var(--color-warning-bg); --badge-danger-fg: #C4142F; /* 原 var(--color-danger) 4.30:1 → 5.62:1 */ --badge-danger-bg: var(--color-danger-bg); --badge-info-fg: var(--color-info); --badge-info-bg: var(--color-info-bg); /* KPI 大数字（2026-09-25 UI 美化第二刀）—— 诊断结论里「彩色点占比 0.5%~2.1%」「品牌蓝存在感 1%~2%」的最大单一来源就是它： 30px 的大数字此前一律 `--color-fg`（近黑），是屏幕上最大的"无彩色块"。 改为品牌蓝后，每个含 KPI 的页面都自带一处主色强调（17 个页面受益）。 ⚠️ 取 primary-600 而非 500：#0457CB 在彩色柔底卡上对比度 5.57:1， 比 #0064E0 的 4.61:1 更稳（柔底卡有 5 种色调，必须按最差配对取值）。 ⚠️ **利润 / 亏损类 KPI 不受本令牌影响** —— pages.css 里 `.num-pos` / `.num-neg` 有更高特异性，仍显示红/绿（语义色优先级高于品牌色，这是算钱相关，不能改）。 */ --kpi-value-fg: var(--color-primary-600); } /* 手机端：整体字号下调约 1px，让一屏显示更多内容（团队视力均无问题） */ @media (max-width: 768px) { :root { --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 13px; --font-size-lg: 15px; --font-size-xl: 18px; --font-size-2xl: 21px; --font-size-3xl: 26px; --font-size-4xl: 32px; } } /* 无障碍：偏好减少动效时关闭位移/缩放，仅保留透明度变化 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }