Skip to content

fix: 修复玻璃浮窗内次级文字与 hover 提示的可读性 - #71

Merged
Aswellle merged 1 commit into
mainfrom
fix/popup-glass-text-contrast
Oct 22, 2026
Merged

Aswellle merged 1 commit into
mainfrom
fix/popup-glass-text-contrast

Conversation

@Aswellle

Copy link
Copy Markdown
Owner

背景

浮窗的标题栏与底部操作栏直接压在 Acrylic 玻璃上,可读性只由极薄的 --popup-glass-tint(浅 0.10 / 深 0.16)保证。而 --text-secondary 是按「压在实色面板上」选的中间灰,在玻璃的亮暗调制下失效。

实机采样(6 类背景 × 浅深 × normal/reduce)确认:修复前 normal 模式下语言方向标签、复制按钮、快捷键提示、provider 名四处全部低于 4.5:1,最差 2.09:1。

改动

1. 浮窗作用域内提级 --text-secondary

改前 改后
浅色 #515154(最差 2.57:1) #262628(最差 4.92:1)
深色 #C0C0C5(最差 2.09:1) #EDEDF0(最差 2.92:1)

用 :root:where(:not(.reduce-transparency)) 收窄,:where() 把特异性压回 (0,1,0),与本文件既有的 token 覆盖约定一致(直接写 :not() 是 (0,2,0),会让将来照约定补的规则被静默压掉)。reduce 媒体查询路径在 reduce 块内显式还原基值——系统偏好不改变 class,两边的 :not() 都成立。

2. 新增 --copy-hover-text

CopyButton 的 hover 原先直接读全局 --text-primary,深色下是 #F5F5F7 而非浮窗的 #FFFFFF。次级文字提级后 hover 与静止态撞色(ΔE76 2.81,贴着 JND)。

抽成独立 token 后浮窗内指向 --popup-text-primary,深色 hover 恢复到 ΔE76 6.37;history 窗口无 .popup-container 祖先,token 保持全局值,行为一字不变。

3. 浮窗内提级 --hover-bg / --active-bg

玻璃把 hover 背景稀释掉了:

不透明窗口 玻璃浮窗(旧值) 玻璃浮窗(新值)
浅 hover ΔE76 3.46 2.30 5.79
深 hover ΔE76 6.79 2.69 5.36

旧值正好落在 JND 上,等于不存在。reduce 路径还原成全局值——那里的衬底是 0.94/0.92 近实色,没有稀释,沿用提级值会变成 ΔE76 8.46 / 11.22 的重压块。

验证

  • Chromium(Edge 155 headless + CDP):4 种组合(浅/深 × normal/reduce)token 全部解析正确;history 场景确认 token 未被浮窗覆盖污染
  • jsdom:8/8 组合(系统偏好 × 应用开关 × 浅深)层叠正确
  • 编译产物:dist 中 token 定义与 hover:text-[var(--copy-hover-text)] 规则均在
  • npx tsc --noEmit exit 0
  • npm test 5 文件 / 33 测试全过

已知未解决

--text-tertiary 在 normal 模式下仍约 1.19:1(深)/ 1.65:1(浅),折叠态箭头叠加 opacity: 0.55 后 ΔE76 仅 3.2。逐 token 调色是死路(深色纯白也只有 3.41:1),需局部衬底或登记为已知缺口,另行决策。

浮窗的标题栏与操作栏直接压在 Acrylic 玻璃上,可读性只由极薄的
--popup-glass-tint 保证,而 --text-secondary 是按「压在实色面板上」
选的中间灰,在玻璃的亮暗调制下失效。

- 浮窗作用域内提级 --text-secondary:浅色 #515154 → #262628,
  深色 #C0C0C5 → #EDEDF0。浅色侧最低对比度 2.57:1 → 4.92:1,全部
  达标;深色侧 2.09:1 → 2.92:1。用 :root:where(:not(.reduce-transparency))
  收窄,特异性保持 (0,1,0) 与本文件既有 token 覆盖约定一致;reduce
  媒体查询路径在 reduce 块内显式还原基值。
- 新增 --copy-hover-text,浮窗内指向 --popup-text-primary。原先
  CopyButton 的 hover 直接读全局 --text-primary,深色下是 #F5F5F7
  而非浮窗的 #FFFFFF,次级文字提级后 hover 与静止态撞色(ΔE76 2.81)。
  改用独立 token 后深色 hover 恢复到 ΔE76 6.37,history 窗口不受影响。
- 浮窗内提级 --hover-bg / --active-bg:同样的 4%/6% 叠加,压在不透明
  底上是 ΔE76 3.46/6.79,压在玻璃上只剩 2.30/2.69,正好落在 JND 上。
  提级到 0.10/0.12 后恢复到不透明窗口的提示强度;reduce 路径还原成
  全局值,避免在近实色衬底上变成过重的压块。

八种组合(系统偏好 × 应用开关 × 浅深)已在 Chromium 与 jsdom 双引擎
验证,history 窗口无 .popup-container 祖先时 token 保持全局值。
@Aswellle
Aswellle merged commit e2d1b98 into main Oct 22, 2026
12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant