jianf/MailUI4Agents
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): 补齐强调色的 CSS 变量 —— 红/绿/橙/黄按钮此前不可见但可点

Browse Source 
## 症状

所有界面的「确认」类按钮看不见，但对应位置点击照样生效。
归档确认、删除、危险操作、状态徽标全部受影响；蓝色主按钮正常。

## 根因

`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) —— 层次关系两模式一致
This commit is contained in:
JianFeeeee
2026-09-04 11:57:42 +08:00
parent 255c799a40
commit 390fef8941
5 changed files with 528 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
web/src/index.css
View File

@ -64,6 +64,138 @@
--c-chrome-800: 30 41 59;
--c-chrome-900: 15 23 42;
/*
* ─── 强调色（浅色）───
*
* 值就是 Tailwind 的官方色阶，浅色模式下视觉零变化。
*
* 这条色阶与灰阶一样是**语义色阶**，而且两段的用途相反：
* - 50–300 = 表面（chip 底、提示条底、徽标底、边框）→ 深色下变暗
* - 400–900 = 前景（文字、图标） → 深色下变亮
*
* 上一版把它们写成 tailwind.config.js 里的固定 hex，同时又留了一份
* accent() 定义 —— JS 对象字面量重复键后者胜出，而当时 index.css 里
* 没有对应的 --c-red-* 等变量。`rgb(var(--c-red-600) / 1)` 里变量未定义会让
* **整条声明失效**，于是 bg-red-600 退回透明、白字落在白卡片上：
* 按钮看不见但点得动（生产实测，32 个变量全部缺失）。
*/
/* blue */
--c-blue-50: 239 246 255;
--c-blue-100: 219 234 254;
--c-blue-200: 191 219 254;
--c-blue-300: 147 197 253;
--c-blue-400: 96 165 250;
--c-blue-500: 59 130 246;
--c-blue-600: 37 99 235;
--c-blue-700: 29 78 216;
--c-blue-800: 30 64 175;
--c-blue-900: 30 58 138;
/* red */
--c-red-50: 254 242 242;
--c-red-100: 254 226 226;
--c-red-200: 254 202 202;
--c-red-300: 252 165 165;
--c-red-400: 248 113 113;
--c-red-500: 239 68 68;
/* 比 Tailwind 官方的 220 38 38 略暗：官方值落在 red-50 上只有 4.41:1，
而 `bg-red-50 text-red-600` 正是错误提示条 —— 差 2% 也是差。
这一档同时用在白卡片上（4.83 → 5.10），压暗后两处都过线。 */
--c-red-600: 213 37 37;
--c-red-700: 185 28 28;
--c-red-800: 153 27 27;
--c-red-900: 127 29 29;
/* green */
--c-green-50: 240 253 244;
--c-green-100: 220 252 231;
--c-green-200: 187 247 208;
--c-green-300: 134 239 172;
--c-green-400: 74 222 128;
--c-green-500: 34 197 94;
--c-green-600: 22 163 74;
--c-green-700: 21 128 61;
--c-green-800: 22 101 52;
--c-green-900: 20 83 45;
/* amber */
--c-amber-50: 255 251 235;
--c-amber-100: 254 243 199;
--c-amber-200: 253 230 138;
--c-amber-300: 252 211 77;
--c-amber-400: 251 191 36;
--c-amber-500: 245 158 11;
--c-amber-600: 217 119 6;
--c-amber-700: 180 83 9;
--c-amber-800: 146 64 14;
--c-amber-900: 120 53 15;
/* orange */
--c-orange-50: 255 247 237;
--c-orange-100: 255 237 213;
--c-orange-200: 254 215 170;
--c-orange-300: 253 186 116;
--c-orange-400: 251 146 60;
--c-orange-500: 249 115 22;
--c-orange-600: 234 88 12;
--c-orange-700: 194 65 12;
--c-orange-800: 154 52 18;
--c-orange-900: 124 45 18;
/* yellow */
--c-yellow-50: 254 252 232;
--c-yellow-100: 254 249 195;
--c-yellow-200: 254 240 138;
--c-yellow-300: 253 224 71;
--c-yellow-400: 250 204 21;
--c-yellow-500: 234 179 8;
--c-yellow-600: 202 138 4;
--c-yellow-700: 161 98 7;
--c-yellow-800: 133 77 14;
--c-yellow-900: 113 63 18;
/*
* ─── 实心按钮/徽标的底色 ───
*
* 与上面 --c-* 的 400–900 **同值，但两种模式下都不变**。
*
* 为什么要单独一组：那六档在深色模式下被提亮成了浅色（red-600 →
* rgb(246,141,141)），因为 `text-red-600` 得在深底上读得动。而
* `bg-red-600 text-white` 的白字落在那个浅红上只有 1.6:1。
* 一个名字服务两种语义就必然坏掉一头 —— 与 text-white/bg-white 那次同理。
*
* 只有 backgroundColor 走这组（见 tailwind.config.js）。
*/
--s-blue-400: 96 165 250;
--s-blue-500: 59 130 246;
--s-blue-600: 37 99 235;
--s-blue-700: 29 78 216;
--s-blue-800: 30 64 175;
--s-blue-900: 30 58 138;
--s-red-400: 248 113 113;
--s-red-500: 239 68 68;
--s-red-600: 220 38 38;
--s-red-700: 185 28 28;
--s-red-800: 153 27 27;
--s-red-900: 127 29 29;
--s-green-400: 74 222 128;
--s-green-500: 34 197 94;
--s-green-600: 22 163 74;
--s-green-700: 21 128 61;
--s-green-800: 22 101 52;
--s-green-900: 20 83 45;
--s-amber-400: 251 191 36;
--s-amber-500: 245 158 11;
--s-amber-600: 217 119 6;
--s-amber-700: 180 83 9;
--s-amber-800: 146 64 14;
--s-amber-900: 120 53 15;
--s-orange-400: 251 146 60;
--s-orange-500: 249 115 22;
--s-orange-600: 234 88 12;
--s-orange-700: 194 65 12;
--s-orange-800: 154 52 18;
--s-orange-900: 124 45 18;
--s-yellow-400: 250 204 21;
--s-yellow-500: 234 179 8;
--s-yellow-600: 202 138 4;
--s-yellow-700: 161 98 7;
--s-yellow-800: 133 77 14;
--s-yellow-900: 113 63 18;
color-scheme: light;
}
@ -121,6 +253,88 @@
--c-chrome-800: 30 35 44;
--c-chrome-900: 12 14 18;
/*
* ─── 强调色（深色）───
*
* 两段走向相反，理由都是实测出来的：
*
* **表面段 50–300 变暗**（朝色相方向偏移卡片色）。照搬浅色值的话
* red-50 (#fef2f2) 在深色页面上是一块近白亮斑 —— 那是「错误提示条」的底，
* 结果比正文还抢眼，而它上面的红字反而读不动。
*
* **前景段 400–900 变亮**。照搬浅色值时 red-700 (#b91c1c) 落在深色卡片上
* 只有 2.67:1、amber-900 只有 1.90:1 —— 远低于 WCAG AA 的 4.5:1。
* 这里每一档都拉到 ≥4.5（实测最低 red-400 = 5.93），
* 由 test/theme.test.mjs 逐档断言。
*
* 实心按钮底不在这里 —— 那组是 --s-*，定义在 :root 且两种模式同值。
*/
/* blue */
--c-blue-50: 28 37 54;
--c-blue-100: 30 43 67;
--c-blue-200: 32 52 84;
--c-blue-300: 36 62 105;
--c-blue-400: 92 152 247;
--c-blue-500: 108 162 248;
--c-blue-600: 128 175 249;
--c-blue-700: 154 191 250;
--c-blue-800: 183 210 251;
--c-blue-900: 213 228 253;
/* red */
--c-red-50: 46 31 37;
--c-red-100: 58 34 39;
--c-red-200: 76 37 41;
--c-red-300: 97 41 45;
--c-red-400: 243 109 109;
--c-red-500: 244 124 124;
--c-red-600: 246 141 141;
--c-red-700: 248 164 164;
--c-red-800: 250 191 191;
--c-red-900: 252 217 217;
/* green */
--c-green-50: 25 44 39;
--c-green-100: 26 54 43;
--c-green-200: 26 68 48;
--c-green-300: 27 85 54;
--c-green-400: 34 197 94;
--c-green-500: 56 203 110;
--c-green-600: 83 210 129;
--c-green-700: 118 219 155;
--c-green-800: 158 229 184;
--c-green-900: 198 240 213;
/* amber */
--c-amber-50: 46 40 31;
--c-amber-100: 59 48 29;
--c-amber-200: 77 58 28;
--c-amber-300: 99 72 26;
--c-amber-400: 245 158 11;
--c-amber-500: 246 168 35;
--c-amber-600: 247 179 65;
--c-amber-700: 249 195 104;
--c-amber-800: 251 212 148;
--c-amber-900: 252 230 192;
/* orange */
--c-orange-50: 47 36 32;
--c-orange-100: 60 41 31;
--c-orange-200: 78 48 30;
--c-orange-300: 101 57 29;
--c-orange-400: 249 115 22;
--c-orange-500: 250 129 45;
--c-orange-600: 250 146 73;
--c-orange-700: 251 168 111;
--c-orange-800: 252 193 152;
--c-orange-900: 253 219 194;
/* yellow */
--c-yellow-50: 45 42 31;
--c-yellow-100: 58 51 29;
--c-yellow-200: 74 63 27;
--c-yellow-300: 95 79 25;
--c-yellow-400: 234 179 8;
--c-yellow-500: 236 187 33;
--c-yellow-600: 239 196 62;
--c-yellow-700: 242 208 102;
--c-yellow-800: 246 222 146;
--c-yellow-900: 250 235 191;
/* 让浏览器把滚动条、表单控件、autofill 一并切深色 */
color-scheme: dark;
}