assistant-widget.tsx
6.46 KB
-
fix(web): 全局 border 规则放进 @layer base —— 全站 258 处彩色 border 类此前一个都没生效 · 4eb9d804
globals.css 里那条 `* { border-color: hsl(var(--border)) }` **不在任何 @layer 里**。 无层级样式整体胜过 `@layer utilities`(与优先级无关),于是它压过了 Tailwind **全部** border 颜色工具类:写 `border-l-brand-400` / `border-rose-300` 不报错、 也不生效,算出来永远是那个灰 #D6DDE6。实测登录框 91 个有边框的元素,91 个都是灰的。 被吃掉的不只是"某处颜色不对": - `border-t-transparent` —— 两处转圈 loading 的缺口被填成灰,整圈同色,转了看不出来 - `border-current` —— 本该跟随文字色调,恒为灰 - ~32 处 hover:/focus: 边框反馈全哑,配着 `transition-colors` 动画一个空 - chain-viz / facts-timeline 整套语义色板的 border 分支形同虚设 改法:把这条规则包进 `@layer base`。⚠ ️ Tailwind v4 没有 `--default-border-color` 主题变量(v3 的 borderColor.DEFAULT 已移除,preflight 改成 `border: 0 solid`),分层的 `*` 规则就是 v4 官方写法。 同时删掉 147 处中性 `border-slate-*` / `divide-slate-*` 类(31 个文件): 它们此前零效果,而分层后会**开始**生效 —— `border-slate-100`(114 处)会从 #D6DDE6 变 #F1F5F9(对白底对比度 1.30→1.06,发丝线几乎消失),`slate-50` 直接看不见。 这些类当初就是对着灰写的(该 `*` 规则从首次提交就在),删掉后落回 base 层默认灰, **构造上保证零像素变化**。三个页面实测:中性边框数量与颜色与改前逐一对齐, 彩色边框恢复(brand-600 = rgb(0,50,160)、brand-400 = rgb(59,118,247))。 batch-tracking 那条竖轨收回工具类(`border-l-2 border-l-brand-400`), 连同解释这条地雷的注释一起删;`past` 保留 2px 透明边以维持两组首列对齐。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>luoqi committed