/* ============================================================================ 设计令牌 · tokens.css（2026-11-07，D33） 【这个文件是什么】 整个 v2 界面的**唯一令牌来源**。所有颜色、字号、间距、圆角、阴影、动效时长、 层级都从这里取。组件的 CSS 里出现裸值（#3568F0 / 13px / 9px / 0.2s）， 就是规范违规 —— 由 `app/scripts/check-design.js` 在 `npm run check` 里把关。 【为什么这样分层，以及为什么语义层必须写在 body 上】 第 1 层「语义色」不写死颜色，而是引用 app.css 的应用变量（--bg / --text / --accent …）， 这样皮肤与 iOS 主题改一次应用变量，语义令牌就跟着变。 ⚠ 关键（2026-11-07 踩过的坑，见 GOTCHAS G99）： CSS 自定义属性里的 var() 是在**声明它的元素上**完成替换的，不是在最终使用它的元素上。 如果把 --ds-color-bg: var(--bg) 写在 :root（html）上，它会在 html 上就取定 --bg 的值； 之后 body[data-skin="ink"] 把 --bg 改成暗色，html 上那份已经算完的 --ds-color-bg 不会变 → 换皮肤时卡片、正文色全部不跟随，而界面看起来"只是没变色"，毫无报错。 所以：**凡是引用应用变量的令牌（第 1 层 + 第 3 层里带颜色引用的），一律定义在 body 上**， 而皮肤与 iOS 主题的覆盖也都作用在 body，替换才发生在同一个元素上。 第 2 层「尺寸/字体/层级」是纯数值，与主题无关，放 :root。 第 3 层「组件令牌」把常用组合固化成名字（如 --ds-btn-h），改一处全站生效。 结果：body 上两块（语义色 / 组件），:root 一块（度量）。新增令牌时按"是否依赖主题"选位置。 【改动规则】 1. 加新令牌：先判断能不能用既有的。能复用就复用，不要造近义词。 2. 改既有令牌的值：等于改全站视觉，必须先跑 `npm run check` 并在 docs/DESIGN.md「变更记录」里写清楚影响面。 3. 令牌只允许被引用，不允许在组件里覆盖成裸值。 4. 单据渲染器（src/docs/*.js）与 _render.html 是**独立文档，不加载本文件** —— 单据版式 1:1 复刻不受任何令牌影响，这一点不能改。 依据：WCAG 2.2 AA（对比度 4.5:1 / 非文本 3:1 / 焦点可见 / 目标尺寸 24px）、 Apple HIG 触控 44pt（桌面取 32px 起）、Material 3 48dp、 Ant Design 与 Fluent 的桌面控件 32/36/40 三档分级。 校验：node scripts/check-design.js（check.js 的一步） ========================================================================== */ body { /* ========================================================================== 第 1 层 · 语义色（Surface / Text / Border / Status） 全部用 var() 引用应用变量，皮肤与主题自动联动。 ========================================================================== */ /* ---- 表面：从最底到最高 ---- */ --ds-color-bg: var(--bg); /* 应用底色 */ --ds-color-bg-subtle: var(--bg-soft); /* 次级底色（分组区） */ --ds-color-surface: var(--surface); /* 卡片 / 面板 */ --ds-color-surface-raised: var(--surface); /* 浮层（弹窗/下拉），配 --ds-shadow-lg */ --ds-color-overlay: rgba(8, 20, 37, .38); /* 遮罩，深海军蓝 38% */ /* ---- 文本：四级层次，对比度见 docs/DESIGN.md §2.3 ---- */ --ds-color-text: var(--text); /* 正文 / 主数据 */ --ds-color-text-secondary: var(--text-2); /* 次要说明 */ --ds-color-text-tertiary: var(--muted); /* 辅助 / 占位 / 表头 */ --ds-color-text-disabled: var(--faint); /* 禁用 */ --ds-color-text-inverse: #FFFFFF; /* 深色底上的字（侧栏/实心按钮） */ /* ---- 描边：三级 ---- */ --ds-color-border: var(--line); /* 常规分隔 */ --ds-color-border-soft: var(--line-soft); /* 极轻分隔（表格行内） */ --ds-color-border-strong: var(--faint); /* 控件描边（输入框/次要按钮） */ /* ---- 品牌强调（主操作）---- 注意：classic 皮肤下 --accent 与 --ds-primary 同值 #3568F0； 4 套新皮肤都用 color-mix 或同值覆盖，切皮肤时按钮跟着变色是**预期行为**。 */ --ds-color-accent: var(--accent); --ds-color-accent-strong: var(--accent-2); /* 高亮/渐变第二色 */ --ds-color-accent-ink: var(--accent-ink); /* 强调色文字（白底上取更深的那个） */ --ds-color-accent-subtle: var(--accent-soft); /* 浅底（选中行/标签底） */ --ds-color-accent-border: var(--accent-line); /* 浅底上的描边 */ /* ---- 状态色：每个状态四件套（实色 / 文字 / 浅底 / 浅底描边）---- */ --ds-color-success: var(--ok); --ds-color-success-subtle: var(--ok-soft); --ds-color-success-border: var(--ok-line); --ds-color-warning: var(--warn); --ds-color-warning-subtle: var(--warn-soft); --ds-color-warning-border: var(--warn-line); --ds-color-danger: var(--danger); --ds-color-danger-subtle: var(--danger-soft); --ds-color-danger-border: var(--danger-line); --ds-color-info: var(--accent); --ds-color-purple: var(--purple); --ds-color-purple-subtle: var(--purple-soft); /* ---- 焦点环（键盘可见性，WCAG 2.4.7）---- */ --ds-color-focus: var(--ds-primary); --ds-color-focus-ring: var(--ds-focus-ring); /* ========================================================================== 第 1 层 · 组件实色（engine tokens） 直接吃实色的按钮令牌。皮肤会覆盖这一组（skins.css），所以不要在这里写语义别名， 否则皮肤覆盖会失效。 ========================================================================== */ --ds-primary: var(--accent); --ds-primary-hover: var(--accent-ink); --ds-danger: #D92D20; /* 危险按钮实色：比 --ds-color-danger 略深，保证白字 5.1:1 */ --ds-danger-hover: #B42318; --ds-on-solid: #FFFFFF; /* 实色按钮上的字 */ --ds-shadow-solid: 0 1px 2px rgba(16, 24, 40, .10); /* 焦点环底色：32% 透明，叠在白底约等于 #C3D3FB。绝不能删 —— 删掉会让 design-system.css 的 :focus-visible 环一起失效（2026-11-07 迁移时漏过一次，被 check-design 逮到） */ --ds-focus-ring: rgba(53, 104, 240, .32); } :root { /* ========================================================================== 第 2 层 · 间距（4px 基数，8px 节奏） 用法：组件内部 gap/padding 用 1–4；区块之间用 5–7；页面级留白用 8–9。 ========================================================================== */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-7: 32px; --ds-space-8: 40px; --ds-space-9: 48px; /* ========================================================================== 第 2 层 · 字体 桌面软件基准 13px（比 Web 的 16px 小一档，信息密度高但不低于 11px）。 阶梯只允许这 8 档；半像素档（10.5 / 11.5 / 12.5 / 13.5）是历史遗留，新增代码禁用。 ========================================================================== */ --ds-font-family: "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; --ds-font-family-mono: "Cascadia Mono", "Consolas", "SF Mono", ui-monospace, monospace; --ds-font-2xs: 11px; /* 角标 / 辅助字：CJK 在 96dpi 下 10px 辨识成本过高，2026-11-08 提到 11px */ --ds-font-xs: 11px; /* 表格辅助、字段说明 */ --ds-font-sm: 12px; /* 表格正文、次要按钮 */ --ds-font-base: 13px; /* 正文基准 */ --ds-font-md: 14px; /* 表单重点、小标题 */ --ds-font-lg: 16px; /* 区块标题 */ --ds-font-xl: 20px; /* 页面标题 */ --ds-font-2xl: 25px; /* 统计大数字 */ --ds-font-regular: 400; --ds-font-medium: 500; --ds-font-semibold: 600; --ds-font-bold: 700; --ds-leading-tight: 1.25; /* 标题 / 单行数据 */ --ds-leading-snug: 1.45; /* 表格单元格 */ --ds-leading-base: 1.55; /* 正文（与 body 一致）*/ --ds-leading-relaxed: 1.7; /* 长说明 / 提示条 */ /* ========================================================================== 第 2 层 · 圆角 6 档 + 全圆。9px 是历史最常用值，统一并入 8px 或 10px（见 DESIGN-PLAN 映射表）。 ========================================================================== */ --ds-radius-xs: 4px; /* 角标 / 键帽 */ --ds-radius-sm: 6px; /* 输入框 / 小按钮 */ --ds-radius-md: 8px; /* 按钮 / 单元格高亮 */ --ds-radius-lg: 10px; /* 卡片 / 提示条 */ --ds-radius-xl: 12px; /* 大卡片 / 弹窗 */ --ds-radius-2xl: 16px; /* iOS 风格卡片 */ --ds-radius-pill: 999px; /* ========================================================================== 第 2 层 · 阴影（四级，全部冷色投影，不用纯黑） ========================================================================== */ --ds-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05); --ds-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04); --ds-shadow-md: 0 8px 24px rgba(16, 24, 40, .10); --ds-shadow-lg: 0 24px 60px rgba(8, 20, 37, .22); --ds-shadow-focus: 0 0 0 3px var(--ds-focus-ring); /* ========================================================================== 第 2 层 · 动效 三档时长 + 三条曲线。所有动画必须能被 body.ui-no-anim 与 prefers-reduced-motion 关闭（规范硬要求，见 DESIGN.md §7）。 ========================================================================== */ --ds-dur-1: 120ms; /* 按压 / 微交互 */ --ds-dur-2: 200ms; /* hover / 颜色 / 阴影 */ --ds-dur-3: 320ms; /* 入场 / 皮肤切换 */ --ds-dur-4: 520ms; /* 涟漪等扩散型反馈：比入场慢，否则水波还没散完就消失 */ --ds-dur-fast: var(--ds-dur-1); /* 兼容旧引用 */ --ds-dur: 180ms; /* 兼容旧引用：原值就是 180ms，不并轨到 200ms 档，避免全站动效变慢 */ --ds-ease: cubic-bezier(.2, .8, .2, 1); /* 标准 */ --ds-ease-out: cubic-bezier(.4, 0, .2, 1); /* 出场 */ --ds-ease-spring: cubic-bezier(.22, 1.12, .36, 1); /* 回弹 */ /* ========================================================================== 第 2 层 · 层级（z-index） 只有这 7 档。禁止在组件里写裸数字（现有 99999 的是历史遗留，见 DESIGN-PLAN）。 ========================================================================== */ --ds-z-base: 0; --ds-z-sticky: 50; /* 吸顶表头 / 工具条 */ --ds-z-dropdown: 60; /* 下拉 / 自动补全 */ --ds-z-overlay: 100; /* 弹窗遮罩 */ --ds-z-modal: 110; /* 弹窗本体 */ --ds-z-toast: 120; /* 全局提示 */ --ds-z-tooltip: 130; /* 气泡提示（最高）*/ /* ========================================================================== 第 2 层 · 控件尺寸（桌面三档） ⚠ 产品覆盖（2026-11-07 整合时修正）：本项目 2026-10-27 有明确用户要求—— 「重点按钮与同组按钮同高，只靠颜色/字重区分」，.btn / .btn.lg 统一 38px。 因此这里 md 与 lg 同取 38px（不是 HIG 的 32/36/40），sm 保持 32px。 若把 lg 单独设成 40px，会出现「保存修改」比同排「取消」高 2px 的回归。 ========================================================================== */ --ds-control-sm: 32px; --ds-control-md: 38px; --ds-control-lg: 38px; --ds-tap-min: 32px; --ds-icon: 16px; --ds-icon-lg: 20px; } body { /* ========================================================================== 第 3 层 · 组件令牌 组件 CSS 只引用这一层或第 1/2 层，不再自己算。 ========================================================================== */ --ds-btn-h: var(--ds-control-md); --ds-btn-h-sm: var(--ds-control-sm); --ds-btn-h-lg: var(--ds-control-lg); --ds-btn-px: 14px; --ds-btn-px-sm: 10px; --ds-btn-px-lg: 18px; --ds-btn-radius: var(--ds-radius-md); --ds-btn-font: var(--ds-font-base); --ds-field-h: var(--ds-control-md); /* 新表单/弹窗默认 36；既有 .inp 保持 32（密度优先，见 DESIGN.md §7） */ --ds-field-radius: var(--ds-radius-sm); --ds-field-border: var(--ds-color-border-strong); --ds-field-bg: var(--ds-color-surface); --ds-card-radius: var(--ds-radius-lg); --ds-card-border: var(--ds-color-border); --ds-card-pad: var(--ds-space-3); --ds-table-row-h: 34px; /* 单行表格基准；带副行的行按内容撑开（实测 52–57），不要压 padding 去凑 */ --ds-table-head-font: var(--ds-font-2xs); --ds-table-cell-pad: 6px 10px; --ds-modal-radius: var(--ds-radius-xl); --ds-modal-pad: var(--ds-space-4); --ds-tag-radius: var(--ds-radius-xs); --ds-tag-font: var(--ds-font-2xs); --ds-tag-pad: 1px 6px; }