/* ========================================================================== 设计语言令牌 · design tokens 真相源:docs/DESIGN_LANGUAGE_2026_08_29.md §3(本文件只搬运,不自创数值) 来源:docs/design_demo/tokens.css(演示页版本) 只含:令牌 + 深色选择器 + prefers-reduced-motion + html[data-pinching]。 不含任何组件样式。 与演示页版本的唯一差异(2026-08-30 落地时按规范 §3.2 修正,不改任何数值): 深色令牌的作用域。规范 §3.2:「全站 data-theme 当前被 data-global-theme-locked 锁死浅色,深色令牌只对阅读器的 html.theme-dark 生效」。 ① 深色选择器加上 `html.theme-dark`(阅读器暗色的真实开关,见 theme-controller.js); ② 删掉演示页的 `@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) }` —— viewer.html 的 上没有 data-theme 属性(它走 class 制),该选择器会在 系统深色下无条件命中阅读器,把锁定浅色的页面整片翻黑。 ========================================================================== */ :root { /* ---- §3.1 颜色 · 浅色 ---------------------------------------------- */ --dl-surface: #FFFFFF; --dl-surface-2: #F3F3F4; /* 2026-09-17 上线反馈第 1 轮 A5:墨色去蓝。旧值 #0B1220 是带海军蓝调的近黑, 用户在「考研英语真题」品牌字与黑按钮上都看得出偏蓝。改中性黑 #0d0d0d, 派生的三档透明墨同步换成同一基色。 */ --dl-ink: #0d0d0d; --dl-ink-2: rgba(13, 13, 13, .64); --dl-ink-3: rgba(13, 13, 13, .44); --dl-ink-disabled: rgba(13, 13, 13, .38); --dl-line: rgba(13, 13, 13, .08); /* 浅色下与 --dl-line 同值系有意(实测「压内容」用量 8%);语义与深色值仍分开 */ --dl-line-strong: rgba(13, 13, 13, .08); /* 浮层轮廓线:与 --dl-sh-menu 第一层 ring 同值。箭头(::before)要用 border 画出 朝外两条边,必须能取到这个值,故单列成令牌 */ --dl-line-pop: rgba(13, 13, 13, .12); --dl-hover-strong: rgba(0, 0, 0, .125); /* 32px 紧凑行悬停 · 白底上 = #E0E0E0 */ --dl-hover: rgba(0, 0, 0, .06); /* 40px 舒适行 / 图标钮 · 白底上 = #F0F0F0 */ --dl-pressed: rgba(0, 0, 0, .16); --dl-accent: #3182CE; --dl-tint-select: rgba(49, 130, 206, .30); --dl-tint-sentence: rgba(49, 130, 206, .15); --dl-tint-mark: rgba(255, 214, 10, .30); /* 值得记住的句子 · 纸上荧光笔 */ /* 焦点环 2026-09-17 A4/A5 去蓝:旧的站内蓝环叠在墨色边框上 = 用户说的 「蓝色和黑色重叠」。改中性墨 40%(与 A5 给按钮定的 rgba(0,0,0,.4) 同一档)。 */ --dl-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(13, 13, 13, .40); /* 输入控件聚焦的柔环(A4):贴着边框的 3px 墨色 8%,与上面的键盘焦点环分工 —— 边框变墨说明「这里在输入」,柔环给一点厚度,不再有第二种颜色。 */ --dl-focus-ring-soft: 0 0 0 3px rgba(13, 13, 13, .08); /* 送出钮 = 全面板唯一的「下一步」,定站内蓝;深色同用,不做白底黑箭头变体 */ --dl-send-bg: var(--dl-accent); --dl-send-fg: #FFFFFF; /* 空态 = 整钮降透明,底色不换(全部状态落在一根 opacity 轴:.35 空 → .7 排队 → .85 悬停 → 1 满) */ --dl-send-disabled-op: .35; /* 排队态:框里有字、华生还在说的那一刻。按下去有效(这一句会排到后面),只是不会立刻有回答; 框里空着时仍走上面的空态 .35,两者不会同时出现 */ --dl-send-queueing-op: .7; --dl-avatar-bg: #0d0d0d; --dl-avatar-fg: #FFFFFF; /* 「已作答 / 答对」绿 —— 全站唯一一种绿(§3.11 T-8)。 选择器已选回显、题号热区已答、答题卡 cmp-correct、答案标记答对四处共用这三枚; 旧的那枚青色语义色(#0d9488)不再出现在这四处。 2026-09-05 定值(§3.27-4):旧 #15803D 偏艳偏亮,与玫瑰红不在同一饱和层级; 改墨绿 #2D7652(白底对比度 5.5,玫瑰 6.2),底/描边同色相同 alpha 重算。 */ --dl-ok-bg: rgba(45, 118, 82, .12); --dl-ok-ring: rgba(45, 118, 82, .30); --dl-ok-ink: #2D7652; /* 「答错」淡红 —— 只在精读批改语境出现(2026-09-04 定案,取代 §6.3 A-05 的「不用红」)。 三色各一义:墨 = 参考答案、绿 = 你答对了、红 = 你答错了。 2026-09-04 会话 6 裁定玫瑰 #A63D4A(§3.24):既不艳丽也不死板,与墨绿同一饱和层级。 */ --dl-err-bg: rgba(166, 61, 74, .10); --dl-err-ring: rgba(166, 61, 74, .26); --dl-err-ink: #A63D4A; /* 顺序色阶(UX_DESIGN_2026_09_08 §1.1-1)：只表「同一个量的深浅」,不表对错。 消费者 = 试卷难度方块、复习热力日历、记忆分布。色相与 --dl-ok-ink 同族(150°), 明度差每档 ≥ 12,保证 12px 见方也能分辨。取代 style.css 旧的 --color-scale-1..5。 */ --dl-seq-1: #D6E7DF; --dl-seq-2: #A3C7B5; --dl-seq-3: #6F9E88; --dl-seq-4: #477660; --dl-seq-5: #244E3D; /* 手写勾（§3.27-3）：全站只有一种勾。页边批改标记直接内联这三段路径, 答题卡格子等只能用背景的地方贴这枚 mask（background-color: currentColor 上色）。 路径与 answer-preview.js 的 CHECK_MARK 逐字一致,改一处必须同改另一处。 */ --dl-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.3 6.4 L3.2 8.3' stroke-width='1.15'/%3E%3Cpath d='M2.6 7.7 L4.9 9.6 Q8.4 4.8 12.6 1.4' stroke-width='1.85'/%3E%3Cpath d='M10.2 3.4 Q11.9 2.1 13.3 0.9' stroke-width='1.05'/%3E%3C/svg%3E"); /* ---- §3.3 圆角 ------------------------------------------------------ */ --dl-r-item: 5px; /* 32px 紧凑行悬停块 */ --dl-r-item-lg: 8px; /* 36px 舒适行 / 图标钮 / 答案选项 / 浮条项 */ --dl-r-pop: 12px; /* 仅 Edge 材质:右键菜单 / 词弹窗 / 句译弹窗 /「+」菜单 */ --dl-r-panel: 16px; /* 舒适材质面板:账户菜单 / 华生面板容器 / 解析面板 */ --dl-r-bar: 12px; /* 选区浮条 */ --dl-r-composer: 28px; /* 输入胶囊 · 定值:52 高时视觉即全圆,多行仍保持 28 */ --dl-r-pill: 9999px; /* 深想小胶囊 / 头像 */ --dl-r-bubble: 20px; /* 用户气泡 */ /* ---- §3.4 阴影 ------------------------------------------------------ */ /* 第一层 `0 0 0 1px` = 1px 发丝描边(ring):不用 border,不占布局盒; 其后为模糊层(近距定形 + 远距大晕定深) */ /* 2026-09-03 P-05:浅色原先缺 ring 层,上边缘融进白纸。补 12% 墨色发丝线 + 近距定形 4 + 远距 28 大晕定深(深色同构,见下) */ --dl-sh-menu: 0 0 0 1px rgba(11, 18, 32, .12), 0 2px 4px rgba(0, 0, 0, .04), 0 12px 28px rgba(0, 0, 0, .10); --dl-sh-1: 0 0 0 1px rgba(11, 18, 32, .08), 0 2px 8px rgba(0, 0, 0, .06); --dl-sh-2: 0 0 0 1px rgba(11, 18, 32, .08), 0 4px 16px rgba(0, 0, 0, .06), 0 12px 48px 4px rgba(0, 0, 0, .05); /* ---- §3.5 字号与字体 ------------------------------------------------ */ --dl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif; --dl-font-serif: "Times New Roman", Georgia, Cambria, Times, serif; --dl-fs-body: 14px; --dl-lh-body: 20px; --dl-fs-caption: 12px; --dl-lh-caption: 16px; --dl-fs-headword: 16px; --dl-lh-headword: 20px; --dl-fw-headword: 600; --dl-fs-translation: 15px; --dl-lh-translation: 1.7; --dl-fw-emphasis: 500; /* 置顶义项 / 用户名 */ /* 单词子系统的字号阶梯补档(VOCABULARY_SYSTEM_DESIGN §18.6.2)。 数值全部取自既有实现的现值,不自创: micro 11 = §17.6 定的 A-Z 跳转条; section 20/28 = 原 .vocab-title; word-md 28/34 = 原 .vocab-d-w 详情词头; word-xl 36/44 = 复习卡词头 2.2rem(35.2) 与学习卡 2.4rem(38.4) 收敛到偶数,行高按 28/34 的比例推。 配合本次定案:整个单词子系统只用 11/12/14/15/16/20/28/36 八档,13px 全删,复习页的 rem 全部换掉。 */ --dl-fs-micro: 11px; --dl-lh-micro: 14px; --dl-fs-section: 20px; --dl-lh-section: 28px; --dl-fs-word-md: 28px; --dl-lh-word-md: 34px; --dl-fs-word-xl: 36px; --dl-lh-word-xl: 44px; /* ---- §3.6 间距与尺寸尺 ---------------------------------------------- */ --dl-sp-4: 4px; --dl-sp-8: 8px; --dl-sp-12: 12px; --dl-sp-16: 16px; --dl-sp-20: 20px; --dl-sp-24: 24px; --dl-sp-32: 32px; --dl-pad-panel: 8px; --dl-row: 32px; --dl-row-lg: 36px; --dl-item-pad: 0 10px 0 12px; --dl-icon: 16px; --dl-icon-lg: 18px; --dl-icon-gap: 10px; /* Edge 材质:16 图标 → 文字 */ --dl-icon-gap-lg: 8px; /* 舒适材质:18 图标 → 文字 */ --dl-sep-h: 1px; --dl-sep-margin: 7px 1px 8px; /* Edge 材质分隔线:上 7 下 8、左右内缩 1 */ --dl-sep-lg: 8px 16px; /* 舒适材质分隔线 margin(高同 --dl-sep-h):左右内缩 16 */ --dl-pop-w: 260px; --dl-gap-anchor: 8px; --dl-vp-margin: 16px; --dl-ctl: 36px; --dl-ctl-sm: 28px; --dl-composer-h: 52px; /* §5.4 华生桌宠宽度(高按 SVG 原比例 48/58 推,不写死);面板让位值由它算出 */ --dl-watson-w: 88px; /* ---- §3.7 动效 ------------------------------------------------------ */ /* 工具层浮层(菜单 / 弹窗 / 浮条)瞬时出现、瞬时消失、悬停瞬时换色; 动效预算只剩两档:面板开合 200ms --dl-ease-out、状态翻转 120ms 裸 ease */ --dl-ease-out: cubic-bezier(.2, 0, 0, 1); /* 消费者只剩华生面板开合 */ --dl-t-hover: 0ms; --dl-t-enter: 0ms; --dl-t-exit: 0ms; /* 非指针跟随的状态翻转:送出钮空↔满、深想开关、聚焦描边加深、加载态行进出 */ --dl-t-state: 120ms; --dl-t-panel: 200ms; /* 唯一保留的入场位移:华生面板 translateY(8→0);reduced-motion 下归零 */ --dl-shift-panel: 8px; /* ---- §3.8 z-index(沿用现站尺,不新增层) --------------------------- */ --dl-z-word-tooltip: 3100; --dl-z-sentence-tooltip: 3200; --dl-z-answer-selector: 5000; --dl-z-watson-panel: 5002; --dl-z-context-menu: 5100; --dl-z-account-menu: 1000; } /* ==== §3.2 颜色 · 深色 =================================================== 作用域:阅读器暗色 `html.theme-dark`(theme-controller.js 加的类) + 全站 `html[data-theme="dark"]`(base.html 的 data-global-theme-locked 当前锁死 light, 留作解锁后的钩子)。 护眼态 `html.theme-eye-care` 按规范 §3.2 走浅色令牌 + 其自身底色叠加,不另起一套。 */ html[data-theme="dark"], html.theme-dark { --dl-surface: #1E293B; --dl-surface-2: #0F172A; --dl-ink: #E2E8F0; --dl-ink-2: rgba(226, 232, 240, .66); --dl-ink-3: rgba(226, 232, 240, .46); --dl-ink-disabled: rgba(226, 232, 240, .38); --dl-line: rgba(255, 255, 255, .10); --dl-line-strong: rgba(255, 255, 255, .14); --dl-line-pop: rgba(255, 255, 255, .14); --dl-hover: rgba(255, 255, 255, .07); --dl-hover-strong: rgba(255, 255, 255, .13); --dl-pressed: rgba(255, 255, 255, .18); --dl-tint-select: rgba(96, 165, 250, .38); --dl-tint-sentence: rgba(96, 165, 250, .20); /* 深色批改色(§3.27-4 / §3.24):同色相提亮,不用浅色值的反向明度关系。 */ --dl-ok-bg: rgba(148, 209, 179, .14); --dl-ok-ring: rgba(148, 209, 179, .32); --dl-ok-ink: #94D1B3; --dl-err-bg: rgba(228, 160, 168, .14); --dl-err-ring: rgba(228, 160, 168, .32); --dl-err-ink: #E4A0A8; /* 顺序色阶 · 深色(§1.1-1)：深底上明度方向反转,最浅档仍要压得住 #1E293B */ --dl-seq-1: #2A3F36; --dl-seq-2: #3B5A4C; --dl-seq-3: #56806B; --dl-seq-4: #7FAA93; --dl-seq-5: #B5D6C4; /* 焦点环内圈的隔离色跟随浮层底色(浅色是 #FFFFFF) */ --dl-focus-ring: 0 0 0 2px #1E293B, 0 0 0 4px rgba(49, 130, 206, .55); /* 送出钮深浅同用站内蓝(--dl-send-bg / -fg 不在深色重定义) */ /* 深色下阴影本身几乎不可见,分层靠白 ring 层;模糊层 alpha 加重 */ --dl-sh-menu: 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 4px rgba(0, 0, 0, .30), 0 12px 28px rgba(0, 0, 0, .45); --dl-sh-1: 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 8px rgba(0, 0, 0, .12); --dl-sh-2: 0 0 0 1px rgba(255, 255, 255, .14), 0 4px 16px rgba(0, 0, 0, .12), 0 12px 48px 4px rgba(0, 0, 0, .10); } /* ==== §3.7 prefers-reduced-motion:全部退化成 opacity 1ms ============== */ @media (prefers-reduced-motion: reduce) { :root { /* 工具层三档本已是 0;作用域只剩面板与状态两档 */ --dl-t-state: 1ms; --dl-t-panel: 1ms; --dl-shift-panel: 0px; } } /* ==== §3.7 缩放 / 捏合过程中:不做任何过渡 ============================= */ html[data-pinching] *, html[data-pinching] *::before, html[data-pinching] *::after { transition: none !important; animation: none !important; }