/* 悟垣·启明 —— 语义层 (语义名 → wx token 的映射) ================================================================ 值全部来自 /static/wutrix-tokens.css, 那个文件是**唯一色源** (《悟垣设计系统手册 v1.5》定版)。这一层只做「语义名 → wx token」的 映射, 一个字面色值都不写(少数几个例外都在原地注明了理由)。 要改颜色去改 tokens.css, 不要改这里。 **为什么是独立文件, 而不是内联在 base.html 里** 登录页 login.html 不继承 base.html —— 它是独立的一整页。以前这层映射 在两边各写了一份, 于是必然漂移, 而且漂移了没人看得见: · login 缺 `[data-theme="light"].wx-tinted`, 浅色主题下 --wx-ink 卡在 深色 #141114, 而 --paper 已经换成深色字 —— 实测对比度 1.14, 整个登录页在浅色主题下是看不见的; · login 的 --muted 也没跟着换, 浅底上只有 3.23; · login 的 --font-display 少了 Noto Serif CJK SC / Source Han Serif SC 两档内网兜底。 合成一份之后这类漂移不可能再发生。 **加载顺序: 必须排在 tokens.css 与 components.css 之后。** 下面 `[data-theme="light"].wx-tinted` 的权重是 (0,2,0), 跟 components.css 里的 `.wx-tinted.is-story` 完全相同 —— 靠源码顺序取胜。 顺序反了浅色主题会顶着深色着色底渲染, 整页深字压深底。 tests/test_static_checks.py 盯着这个顺序。 */ :root { /* 为什么保留这层旧名: 44 个模板和 3 个 css 都在用 --ink / --card / --ember 这套名字, 直接全局改名等于把每个模板都动一遍。映射一层, 换底色就只动这三十行。 */ /* 中性 · N3 中性墨。四个产品色横跨 17°/186°/252°/332°, 底必须近中性, 否则会偏袒某条线。 */ --ink: var(--wx-ink); /* 主背景 */ --surface: var(--wx-surface); /* 顶栏 · 输入框 */ --card: var(--wx-card); /* 卡片底 */ --card-2: var(--wx-card); --card-soft: var(--wx-card-soft); --border: var(--wx-border); --border-soft:var(--wx-border-soft); /* 行动色恒为品牌金 —— 铁律一: 识别色说「你在哪」, 金色说「点这里」, 两件事不能共用一个信号。所以 --ember 不随产品线变。 */ --ember: var(--wx-gold); --ember-deep: var(--wx-gold-dk); /* hover */ --ember-dim: #2A1F10; /* 批注卡浅染 · 深底专用 */ --ember-grad-from: var(--wx-gold-lt); --ember-grad-to: var(--wx-gold-dk); --paper: var(--wx-paper); /* 主文字 */ --paper-soft: var(--wx-paper-soft); /* 说明文字。**不用 --wx-muted(#7A8A98) 的原值** —— 4% 着色底把卡片从 #1B2029 抬到 #24232A, 正好把它挤到 4.39, 掉出 AA。手册量着色底时 量的是正文(16.00-16.27), 没量说明文字这一档。 #82919E 只抬了明度、色相与饱和没动, 在最难的着色卡片上 4.81。 取 4.8 不取 4.5 是跟手册浅色主题一个道理: 贴着线走, 抗锯齿和屏幕 伽马很容易把实际观感推到线下。 */ --muted: #82919E; /* 身份色 · 启明朱。铁律二: 身份色只表「属于哪条线」, 绝不表状态。 状态一律走下面的语义色。 */ --pc: var(--wx-story); --pc-soft: rgba(var(--wx-story-rgb), .14); --pc-line: rgba(var(--wx-story-rgb), .30); /* 语义色 —— 与身份色分开, 不可混用 */ --success: var(--wx-ok); --warn: var(--wx-warn); --danger: var(--wx-danger); --info: #8CA5BE; /* 石板蓝 · 中性信息提示, 不是身份色 */ --gold: #C8A96E; /* review 状态色（旧版致敬）*/ /* Logo SVG fills follow the theme. */ --logo-ink: var(--paper); /* 左半 W —— Dark 用浅色 */ --logo-honey-from: var(--ember-grad-from); --logo-honey-to: var(--ember-grad-to); /* 主行动按钮前景。深底是金底深字; 浅底见 [data-theme=light]。 */ --btn-primary-fg: #1C1303; /* **身份色底上的文字**, 跟 --btn-primary-fg 同一个道理: 底色随主题变, 前景色也得跟着变, 单一颜色两个主题满足不了。实测: 深色主题 朱 #F0703C —— 近黑 6.67 ✓ / 白 2.96 ✗ 浅色主题 朱 #C2430F —— 近黑 3.86 ✗ / 白 5.12 ✓ 以前这里各处写死 #0a0a0f, 深色下没问题, 一切浅色就掉到 3.86。 */ --on-pc: #0a0a0f; /* **语义色底上的文字** —— 跟 --on-pc / --btn-primary-fg 同一个道理, 只是 这一个把三个语义色一起覆盖了: 深色主题的 ok/warn/danger 都是亮填充, 浅色主题的都是压暗填充, 于是"该配什么字"在同一个主题里三个色是一致的。 实测(深色亮填充配近黑 / 浅色暗填充配白): 深色近黑 深色白 浅色白 浅色近黑 danger 5.70 ✓ 3.47 ✗ 4.81 ✓ 4.11 ✗ success 7.57 ✓ 2.61 ✗ 4.80 ✓ 4.11 ✗ warn 8.92 ✓ 2.21 ✗ 4.83 ✓ 4.09 ✗ 六个"✗"就是以前写死 white / #0a0a0f 的那些地方, 每处都恰好错一半主题。 */ --on-semantic: #0a0a0f; /* ── 语义色的「染底 + 同色文字」一族 ──────────────────────────── 状态徽章那种 `浅色染底 + 同色系文字` 的排法, 两个主题得分开给值, 而且**浅色主题的文字不能直接用语义色原值**: 浅色一族(#338059 / #C74545 / #996819)是照**白底**定到 4.8 的, 一旦 压到自己同色系的 12% 染底上就只剩 4.08~4.14, 全部掉出 AA。 试过靠调低 alpha 补救 —— 要压到 4% 才够, 那时候染底已经几乎看不见了, 徽章就不成其为徽章。所以改成压暗文字(只动明度, 色相与饱和不变, ×0.85), 染底保持 12% 的可见度。实测: 深色(染底/文字) 浅色(染底/文字) ok #1A2A1A / #5FBF8F 6.72 #E7F0EB / #2B6D4C 5.31 warn #2A2A1A / #E0A340 7.03 #F3EDE3 / #825815 5.37 danger #2A1A1A / #D47272 5.11 #F8E9E9 / #AF3535 5.26 以前这些底是**写死的深色字面值**(#1a2a1a 一类), 而文字用的是随主题翻的 var(--success) —— 浅色主题下深绿字压深底, 实测只有 3.15。 */ --ok-tint: #1A2A1A; --warn-tint: #2A2A1A; --danger-tint: #2A1A1A; --ok-ink: var(--success); --warn-ink: var(--warn); --danger-ink: var(--danger); /* 实体徽章(角色 / 世界观 / 对白)。以前三处写死 #c89dc8 / #6ec8c8 / #c8c86e, 浅色主题下 1.97 —— 借产品线的身份色: 角色用工作室紫, 世界观用流程青, 都自带 -on-light 翻转。深底上紫要用 -lt(原值 3.7 不过 AA), 见浅色块。 */ /* -lt 压在着色卡底上实测 4.27, 差一点不过 AA(徽章字只有 10px)。往纸色 混 22% 提到 ~6.2, 仍是从 token 派生, 不另开一个色值。 */ --tag-character: color-mix(in srgb, var(--wx-studio-lt) 78%, var(--wx-paper)); --tag-character-tint: rgba(var(--wx-studio-rgb), .14); --tag-world: var(--wx-flow); --tag-world-tint: rgba(var(--wx-flow-rgb), .14); /* 探索线侧栏的人头徽章: 色相按用户名散开(--u-h 由模板按人给, thread_access.hue_of), 明度 / 饱和度在这里定 —— 深底上暗底浅字, 浅底上反过来, 任一色相都过 AA。 只给饱和度 / 明度, 不在这里拼 hsl(): 自定义属性在**定义处**求值, 在 :root 上拼 的话 --u-h 永远是没定义, 每个人都成了同一个色(踩过)。组件自己拼。 */ --avatar-bg-sl: 40% 30%; --avatar-fg-sl: 70% 90%; /* **抬亮一档危险色 —— 手册量的是纯底, 没量着色底。** 手册原值 #D26B6B 压在 4% 着色的卡片(#24232A)上只有 4.49, 差 0.01 掉出 AA。 跟 --muted 当初那次是同一类问题, 处理办法也一样: 只动明度, 色相与饱和 不变。#D47272 在着色卡上 4.78(贴着 4.8 走, 不贴着 4.5 —— 抗锯齿和屏幕 伽马很容易把观感推到线下), 近黑字压它 6.07, 两头都留了余量。 */ --danger: #D47272; /* Compat aliases */ --bg: var(--ink); --text: var(--paper); /* **--accent 指身份色, 不是行动金。** 全仓库 157 处 var(--accent), 其中 123 处是 color —— 链接、代码、 卡片标题、hover 边框这一类, 全是"这块归启明"的装饰, 没有一个是 主行动(主按钮走的是 --ember-grad-*, 跟这个别名无关, 核对过)。 以前 --accent 和 --ember 都指向金, 两个名字漂成了同一个颜色, 于是 每屏 5-7 个金, 违反铁律一「主行动色每屏至多一个」, 金也就不"主"了。 重新分开: --ember 行动(金) / --accent 身份(朱)。 */ --accent: var(--pc); --accent2: var(--info); /* 圆角四档 —— 新代码只准用这四个 */ --radius: var(--wx-radius-sm); /* 6px · 小控件（历史默认名）*/ --radius-card: var(--wx-radius); /* 12px · 卡片 */ --radius-panel:var(--wx-radius-lg); /* 16px · 面板 */ --radius-pill: var(--wx-radius-pill); /* 药丸 */ /* "wx-marks" 只供 ✓ ✕ ✗ ⚠ 四个字形(见 wutrix-fonts.css), 靠 unicode-range 排在最前也不会抢别的字符。tokens.css 是手册原文不能改, 所以在这层插。 */ --font: "wx-marks", var(--wx-font-body); --font-mono: "wx-marks", var(--wx-font-mono); /* 展示体 —— 拉丁 Sora + 中文思源宋, **一条栈搞定**: Sora 没有汉字, 汉字自然落到后面的思源宋; 拉丁走 Sora。 字体回退是逐字进行的, 不用给中英各写一条规则。 字重写 700: 拉丁拿 Sora 700; 思源宋只请求了 900 这一档, 浏览器会 匹配到它 —— 拿到的是**真 900**, 不是合成加粗。手册特意交代过这件事: 只请求 700 的话浏览器会用合成加粗顶上, 那个假粗会把宋体的横细竖粗 一起糊掉, 比不加粗还难看。 **Helvetica / Arial 那两档是故意插在宋体前面的, 别"顺手清理"。** 这个应用是私有化部署的, 客户内网未必通 Google Fonts。Sora 取不到时, 如果紧接着就是思源宋, **汉字宋体会把拉丁字母也一起接管** —— 思源宋 和 Songti SC 都自带拉丁字形。结果就是标题的拉丁变衬线、正文还是无 衬线, 一页里两种气质打架, 比不换字体还糟。实测量过: 那种排法下 "Projects" 渲染成 184px, 而无衬线是 158px。 Helvetica / Arial **不含汉字**, 所以拉丁停在这一档(无衬线, 跟 Sora 同属性), 汉字直接穿过去落到宋体 —— 正好就是想要的中宋 + 西黑。 在末尾加 sans-serif 是没用的, 宋体排在前面, 根本轮不到它。 真要彻底稳, 得自托管字体 —— 见 docs/deployment.md。 */ --font-display: "wx-marks", "Sora", "Helvetica Neue", Arial, "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", sans-serif; --font-head: var(--font-display); /* 旧名, 保留兼容 */ /* 中文展示体。tokens.css 是手册原文(有校验和守着, 不能改), 所以在这层 补一档 **Noto Serif CJK SC** —— 它和思源宋是同一套字(Source Han Serif 就是 Noto Serif CJK), Linux 发行版里极常见, 比 Songti SC 更贴近原样。 Google Fonts 取不到时(私有化客户内网), 这一档能接住。 */ --font-cn: "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", serif; } /* ── Light theme override · Slate Honey · Light ──────────── */ /* **浅色主题下不着色。** 手册把「浅色主题下的着色底」明确列在未做清单里 (4% 混入在浅底会不会显脏没实测过), 所以浅色一律回纯中性。 不显式关掉会出事: `.wx-tinted.is-story` 的权重是 (0,2,0), 压得过 `[data-theme="light"]` 的 (0,1,0) —— 浅色主题会顶着**深色**着色底渲染, 而文字已经换成深色了, 整页深字压深底, 什么都看不见。实测踩过, 见截图。 这条选择器同为 (0,2,0) 但排在 tokens/components 之后, 靠源码顺序取胜。 */ [data-theme="light"].wx-tinted { --wx-ink: #F7F8FB; --wx-surface: #FFFFFF; --wx-card: #FFFFFF; --wx-card-soft: #F1F3F8; --wx-border: #DDE1EA; --wx-border-soft: #E9ECF3; } /* 浅色主题。深色是默认, 浅色用于打印、外发文档、系统偏好为 light。 中性一族的值来自 tokens.css 的 [data-theme="light"] 块, 这里不重复; 只映射本层的语义名 + 处理那件浅底特有的事(见下)。 */ [data-theme="light"] { --card-2: var(--wx-card-soft); --ember-dim: rgba(var(--wx-gold-rgb), .14); /* **五个品牌色在浅底上一个都不过 AA** —— 不是有一个不达标, 是一个 都不达标。品牌金最惨: #F8B450 对白底只有 1.70。所以浅底要用压暗过的 -on-light 一族(只压明度, 色相与饱和不动, 还是同一个颜色)。 */ --ember: var(--wx-gold-on-light); /* 9D6006 · 4.81 */ --ember-deep: #7E4C04; --ember-grad-from: var(--wx-gold); /* 按钮底仍用亮金, 见下 */ --ember-grad-to: var(--wx-gold-dk); /* 上面 :root 里的 --muted 是**深色专用**的抬亮值(为了压过 4% 着色底), 浅底上它只有 3.23 —— 浅色必须换回手册的浅色 muted #666E7D(白底 5.28)。 */ --muted: var(--wx-muted); /* **三个语义色在浅底上一个都不过 AA** —— 跟品牌金同一个问题: 手册的浅色一族给四个身份色做了 -on-light, 但语义色和金都没做。 实测原值对白底: ok 2.25 / warn 2.21 / danger 3.47, 无一及格。 压暗到 4.8(不是贴着 4.5 走 —— 抗锯齿和屏幕伽马很容易把观感推到线下), 只动明度, 色相与饱和不变, 还是同一个颜色。 */ --success: #338059; /* 4.80 */ --warn: #996819; /* 4.83 */ --danger: #C74545; /* 4.81 */ --info: #4A6E94; /* 深石板蓝 */ --gold: #A88340; /* Logo: Light 模式左半用深色，右半同样蜂蜜渐变 */ --logo-ink: var(--wx-paper); --logo-honey-from: #E8A040; --logo-honey-to: #C8761F; /* 浅色下主行动按钮**不能是「金字白底」**: 品牌金对白底只有 1.70 的对比, 按钮整个找不着。必须是**金底**, 靠填充承担对比。 手册正文那句写的是「白字金底」, 但字**不能真用白色** —— 实测白字压 金底只有 1.6(#FCC368) ~ 2.28(#E89C2C), 比它要解决的 1.70 还差, 直接违反手册自己的可达性一章。手册配套的 components.css 里 .wx-btn--action 写的也是 color:#1C1303 —— 代码是对的, 那句话说的是 「靠底色而不是靠文字承担对比」, 不是字面上的白字。 深墨字压金底实测 8.06 ~ 11.49, 深浅两个主题用同一个值就行。 */ --btn-primary-fg: #1C1303; /* 浅底的朱压暗成 #C2430F, 近黑字只剩 3.86 —— 换白字, 5.12。 */ --on-pc: #FFFFFF; /* 浅底的三个语义色都是压暗填充, 白字 4.80~4.83, 近黑字 4.09~4.11 —— 反过来。 */ --on-semantic: #FFFFFF; /* 见 :root 里那段注释 —— 浅色的染底是浅的, 文字要比语义色原值再压暗一档。 */ --ok-tint: #E7F0EB; --warn-tint: #F3EDE3; --danger-tint: #F8E9E9; --ok-ink: #2B6D4C; --warn-ink: #825815; --danger-ink: #AF3535; /* 浅底: --wx-studio / --wx-flow 在 tokens 里已翻成 -on-light, 直接用 */ --tag-character: var(--wx-studio); --tag-character-tint: rgba(var(--wx-studio-rgb), .10); --tag-world: var(--wx-flow); --tag-world-tint: rgba(var(--wx-flow-rgb), .12); --avatar-bg-sl: 55% 88%; --avatar-fg-sl: 65% 28%; } /* ── 字标锁版的浅色: 这里**不再**覆盖 ────────────────────────────── v1.5 时这里有一条 `[data-theme="light"] .wx-lockup__lat b { color: var(--wx-gold-on-light) }`: 浅底上字标的 wutrix 那半只有 1.8, 手册没给办法, 只能在语义层把金压暗。 手册 v1.7 把这件事收回去了, 而且结论不是压暗的金: 暗金 #9D6006 和启明的朱 色相只差 18°、ΔE 29.9, 「wutrixstory」在 14px 上糊成一整块棕 —— 这套字标的 全部表达就是那一笔颜色分割。扫了一遍只有正墨 #141821 对四条线全部 ≥ 40。 于是 lockup.css 的 `.wx-lockup__lat b` 改引 token --wx-lockup-master, 由 tokens.css 切换: 深底 = 品牌金, 浅底 = 正墨(--wx-paper)。两个页面(顶栏、 登录页)共用 tokens.css, 自动都对。 **不要在这里、也不要在 base.html 里再给 .wx-lockup__lat b 上色** —— 写了就压过 token, 浅底又回到金/棕。 */