|
|
390fef8941
|
fix(web): 补齐强调色的 CSS 变量 —— 红/绿/橙/黄按钮此前不可见但可点
## 症状
所有界面的「确认」类按钮看不见，但对应位置点击照样生效。
归档确认、删除、危险操作、状态徽标全部受影响；蓝色主按钮正常。
## 根因
`tailwind.config.js` 的 `colors` 里对 red/green/amber/orange/yellow
**同时写了两份定义**：先是固定 hex，紧接着又是 `accent('red')`。
JS 对象字面量重复键**后者胜出**，不报错、不警告 —— 读代码的人看到上面那份
hex 以为在用它，实际生效的是下面那份变量引用。
而 `index.css` 里当时只有 20 个变量（white / on-accent / gray / chrome），
没有任何 `--c-red-*`。CSS 里变量未定义会让**整条声明失效**：
.bg-red-600 { background-color: rgb(var(--c-red-600) / 1) } ← 整条被丢弃
于是 `bg-red-600` 退回透明，而 `text-white`（走 `--c-on-accent`，浅色下是纯白）
照常生效 → 白字落在白卡片上。按钮的盒子、padding、点击区域全都在。
实测部署产物里 32 个变量被引用但从未定义。blue 逃过一劫只因为它没有第二份
`accent('blue')` 定义，编译成了固定值。
## 修法（用户选 B：补齐变量，让强调色也参与主题）
`index.css` 新增 96 个变量，`tailwind.config.js` 去掉重复定义。
**强调色是两段语义色阶，深色下走向相反**：
- `50`–`300` = 表面（chip 底、提示条底、边框）→ 深色下**变暗**。
照搬浅色值的话 red-50 (#fef2f2) 在深色页面上是一块近白亮斑 ——
那是错误提示条的底，结果比正文还抢眼，上面的红字反而读不动。
- `400`–`900` = 前景（文字、图标）→ 深色下**变亮**。
照搬时 red-700 只有 2.67:1、amber-900 只有 1.90:1。现在每档 ≥4.5
（最低 red-400 = 5.93）。
**实心按钮底另立一组 `--s-*`，两种模式同值。**
那六档在深色下被提亮是为了 `text-red-600` 读得动，而 `bg-red-600 text-white`
的白字落在提亮后的浅红上只有 1.6:1。一个名字服务两种语义必然坏掉一头 ——
与此前 text-white/bg-white 那次同理。只覆盖 `backgroundColor`，
`text-*`/`border-*`/`ring-*` 仍走 `accent()`。
顺带把浅色 red-600 从官方的 220 38 38 压到 213 37 37：官方值落在 red-50 上
只有 4.41:1，而 `bg-red-50 text-red-600` 正是错误提示条。
## 防复发
`test/theme.test.mjs` 20 → 26 条，新增 6 条针对这次的：
- **Tailwind 实际使用的每个变量都在 index.css 有定义**。判据走 resolveConfig
而不是正则扫配置文本：出问题的变量名是 `accent('red')` 模板拼出来的，
源码里没有 `--c-red-600` 这个字面量，扫文本会漏掉正是要防的那一类
- colors 里没有重复的颜色名（这次 bug 的成因）
- 表面段深色下变暗 / 前景段在深色卡片上 ≥4.5:1（逐档断言，72 项）
- 实心底走 `--s-*` 且未被 `.dark` 覆盖
- 白字在实心底上 ≥3:1
新增 `test/manual/accent-verify.mjs`：真浏览器渲染 17 组配色 × 两模式，
读 `getComputedStyle` 量实际值，**把「背景透明」单独判为失败**（那正是本次
bug 的指纹）。只以 `hover:` 变体出现的档不能放进探针 —— Tailwind 不生成
未使用的基础类，探它必然透明，是假阳性。
## 验收
- theme.test.mjs 26 条全过；web 160 例；tsc 无错
- accent-verify 两模式各 17 项全过（浅色最低 4.51、深色最低 3.05）
- theme-verify 9 项全过；wide-regression 5 项全过
- 截图逐像素核对：浅色侧栏 (15,23,42) / 卡片 (255,255,255) / 页面底 (249,250,251)；
深色 (12,14,18) / (24,27,33) / (17,19,24) —— 层次关系两模式一致
|
2026-09-04 11:57:42 +08:00 |
|
|
|
d74f356f41
|
feat(web): 深色主题 —— 反转灰阶而非逐处 dark: 前缀
**逐处加 dark: 前缀的方案在这里必然失败**：约 700 处颜色散在 21 个组件里，
漏一处就是深色下的白底白字，而它不报错、不影响构建、只有肉眼能发现，
且往往只出现在某个不常开的页面。此后每加一个组件都要记得写两遍，
那种约定活不过三次改动。
改法是把颜色下沉到 CSS 变量，深色模式**反转灰阶**。这套代码的灰阶本身
就是语义色阶（white/gray-50 = 表面层次，gray-200/300 = 分隔线，
gray-900→400 = 文字主次），反转之后 `bg-white text-gray-900` 自动变成
深色卡片 + 浅色文字。零组件改动，新组件照常写浅色类名也自动适配。
变量存 **RGB 三元组**而非 #hex：代码里有 bg-blue-50/70 这类透明度修饰符，
Tailwind 生成 rgb(var(--x) / 0.7)，而 rgb(#f9fafb / 0.7) 是无效 CSS ——
那些半透明高亮会静默失效（不报错，只是不透明）。
---
实测撞了三个必须分离的语义，每一个共用变量就坏：
**1. text-white 不能跟 bg-white 走。**
`white` 服务两种冲突用途：卡片表面（深色下要变暗）与彩色按钮上的文字
（深色下必须保持浅色）。共用时后者跟着变暗 —— 激活导航项的「收件」在
bg-chrome-700 上只剩 **1.34:1**，几乎消失。拆出 --c-on-accent。
**2. 侧栏与底部导航不能跟 gray 走。**
它们在浅色模式下**本来就是深色的**（深色侧栏配浅色内容区是原本设计）。
并入反转灰阶后深色模式下变成近白色（实测 rgb(243,245,248)），比内容区
（rgb(17,19,24)）还亮，整个层次翻过来。独立成 chrome 色阶，深色下只微调、
保持「框架比内容更沉」。
**3. 强调色不能反转。**
blue/red 跟着变会让主按钮在深色页面上失去「这是主操作」的视觉重量，
而且白字落在变暗的 blue-600 上对比度掉到 3:1 以下。改成固定值。
---
顺带修的三处真实对比度不足（实测量出来的，不是猜的）：
- 待决策橙徽标：orange-500 上白字 2.80:1 → orange-700 5.18:1
（保留橙色语义，不能改成灰 —— 它与未读的红色是两种紧急）
- 空状态文案：gray-400 2.43:1 → gray-500。这类文字是**页面上唯一的内容**，
不是次要装饰，读不动等于页面空白
- 列表头计数：同上
---
主题是**三态**而非开关：system 不是 light 的别名 —— 只给开关的话，
白天设浅色之后晚上系统切深色应用不会跟着变。且只有 pref 为 system 时
才跟随系统，显式选了的人不该因为日落被切换。
index.html 加同步内联脚本消除首帧闪屏：bundle 有 430KB，从 HTML 解析完到
React 挂载之间页面是 body 默认色，深色用户每次刷新都被闪一下白屏。
外链或 defer 都晚于首次绘制。它与 themeStore 共用同一个 localStorage 键
（不一致会导致首帧按 A 键渲染、挂载后按 B 键重渲染，闪一下再变回去）。
body 显式设底色：移动端橡皮筋回弹露出的是 body 背景。
入口两处：侧栏单按钮快速翻转，「我的」页三选一设定偏好。单按钮不足以
表达三态，但只给单按钮的话用户一旦点过就永久脱离「跟随系统」——
那是个回不去的单向门。
测试：test/theme.test.mjs 20 条结构性断言（已进 npm test），
test/manual/theme-verify.mjs 真实渲染对比度验收（遍历可见文本节点算 WCAG
比值，往上找第一个不透明背景）。两种模式各 4 项全过。
|
2026-09-04 06:30:26 +08:00 |
|
