docs(ui): BUG-1079 progress, design, bug history, changelog, device checklist, contrast harness
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017eEAG8HD3mm8gsKXgk8uU8
This commit is contained in:
co-authored by
Claude Opus 5.5
parent
12aac87bde
commit
fa58df16eb
@@ -14513,3 +14513,20 @@
|
||||
- 相关记录:BUG-738(action 两档对比度)、BUG-1018 / 1019(分块导出);`TASK-chart-types-and-report-buttons-20260928` T7。
|
||||
- 复发自:无
|
||||
- 修复版本:`873fac8a` + `36fae8fa`(分支原 SHA `9f5b4f50` / `72b62759`),随 `6a4e312c` 部署 staging。
|
||||
|
||||
## BUG-1079 | 全站实心按钮:层外 `button { color: inherit }` 压掉组件文字色,`.button-primary` 浅色 3.14:1,禁用态整体淡化
|
||||
|
||||
- 状态:待验收(分支 `codex/site-button-contrast-20260928` 本地提交,未推 staging、未部署;真机未走)
|
||||
- 首次发现 / 最近更新:2026-09-28 / 2026-09-28
|
||||
- 影响面:用户页面全部渲染为 `<button>` 的实心 `<Button>`(点数 / 订阅面板、星历、生时校正对话、输入框发送 / 停止键;报告页已由 BUG-1078 局部修过)、全部 `.button-primary`(登录、首次引导、人物档案、首页、生时校正各卡、兑换码付费墙、星盘资料表单、首页错误屏,共 30 个)、日期选择器选中日;全部实心按钮的禁用态。后台管理路由不加载 `globals.css`(只有字体、`antd/dist/reset.css` 与 `admin.css`),其中 52 个 shadcn `<Button>` 本来就没有任何 Tailwind 样式,不在本条影响面内(见下「另发现」)。
|
||||
- 现象:产品在 BUG-1078 验收后要求全站扫一遍。Claude 用 AST 列出 213 个按钮,并用 staging 线上 CSS 在无头 Chrome 实测:实心 `<Button>` 浅色 #1d1d1f 在 #a9583e 上 3.33:1、深色 #f2f0ea 在 #d78064 上 2.57:1;`.button-primary` 与发送键浅色 #fbfaf7 在 #cc785c 上 3.14:1;禁用态 45% 透明,1.49–2.30:1。
|
||||
- 触发条件:任意用户页面上渲染为 `<button>` 的实心主按钮;禁用时更明显。
|
||||
- 根因:① `globals.css` 顶部未分层的 `button { color: inherit; }` 与 `button:disabled { cursor: default; opacity: .45; }` 压过 Tailwind v4 `@layer utilities` 里的 `text-primary-foreground` / `disabled:opacity-50`(未分层声明总是赢分层声明,与权重无关);Tailwind preflight 在 `@layer base` 里本来就有 `button { color: inherit }`,这条是重复的。② `.button-primary` 与发送 / 停止键底色用品牌珊瑚 `--color-action-strong`(#cc785c),字用 `--color-on-dark`(深色主题翻成 #241f1c),浅色 3.14:1 是 DESIGN 曾接受的已知缺口。③ 两套实心按钮各自取色,同一个主操作在不同页面两种颜色。④ BUG-1078 只在报告作用域覆盖,根因 ① 未动,所以其余 60 多处同病没被拦住。
|
||||
- 修复(产品 2026-09-28 选 A:全站一种实心按钮,推翻 DESIGN「已知缺口」):删掉层外 `button { color: inherit; }`;禁用淡化改为 `button:disabled:where(:not([data-slot="button"]))`(原权重不变,只作用于原生 `<button>`),`<Button>` 的禁用由自身工具类决定,基础淡化改 `disabled:opacity-45`(与旧全局值相同,非实心按钮外观不变)。新增按钮专用 token 对 `--color-action-fill` / `--color-on-action-fill`(浅 #a9583e / #fbfaf7,深 #8f4a33 / #f2f0ea)及 hover、disabled 两对,登记进 `@theme inline`;`<Button>` 默认变体、`.button-primary`、输入框发送 / 停止键、`calendar.tsx` 选中日改用它;实心禁用 = `--color-canvas-strong` 底 + `--color-ink-tertiary` 字、opacity 1。`.danger-primary` 显式保留 `--color-on-dark` 标签色(浅 7.13、深 6.04)。`--color-primary` 映射不动(`text-primary` 图标仍用它)。删 BUG-1078 报告作用域覆盖与 `.report-center-generate`、`birth-date-picker.tsx` 选中日 `text-primary-foreground!` 补丁。
|
||||
- 验证:`docs/testing/button-contrast-harness.cjs`(读源码类名 + 新 build CSS、无头 Chrome、深浅两主题,含悬停)前后对照:全部实心按钮 ≥ 4.5(浅 4.85、深 5.77、悬停 6.52 / 5.10),实心禁用 opacity 1 灰底;描边 / 幽灵 / 次要按钮及其禁用、悬停数值逐项相同;`.danger-primary` 7.13 / 6.04 不变。`frontend/tests/report-buttons-scope-20260928.test.ts` 改为全站合同(6 条);`session-conversation-layout.test.ts` 停止键断言改为新 token(三栏见 PROGRESS);`dark-theme-contract` 通过。
|
||||
- 防复发:不得再写层外的 `button` 元素颜色 / 禁用规则;实心主按钮只读 `--color-action-fill` 这组 token;harness 随仓库留在 `docs/testing/`,改按钮样式后跑一遍(只读新 build 的 CSS,用户页默认跳过 antd reset)。
|
||||
- 另发现(不在本条修复内):① 后台管理路由不加载 Tailwind,52 个 shadcn `<Button>` 渲染为 antd reset 下的无样式按钮;② 层外 `button, input, textarea, select { font: inherit; }` 同理压掉 `<Button>` 的 `text-sm`,用户页 `<Button>` 实际是 16px。两条都写进 `BLOCKED.md` 待产品决定是否立单。
|
||||
- 相关记录:BUG-1078(报告页局部修复,本条取代其覆盖)、BUG-738(action 两档对比度);`TASK-site-button-contrast-20260928`。
|
||||
- 复发自:BUG-1078(同一根因,1078 只修了报告作用域)
|
||||
- 修复版本:待推送
|
||||
|
||||
|
||||
Reference in New Issue
Block a user