GithubBackup/MyGoNavi
1
0
Fork 0
mirror of https://github.com/Syngnat/GoNavi.git synced 2026-08-09 16:23:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

🎨 style(theme): 修复主要操作按钮交互态在各主题下几乎不可辨

Browse Source 
根因在 token 层：--gn-ant-primary-hover 与 --gn-ant-primary-active 都直接取 palette.accent2，
两者取值完全相同，hover 与按下态在视觉上无任何区别；而 accent2 又是 accent 的近邻色
（内置主题的强调色刻意低饱和），实测 base→hover 对比度仅 1.05–1.29，
其中 Deep Ocean 的 accent2 甚至比 accent 更亮（调色板方向反了）。

- 新增 mixHex 与 --gn-accent-hover / --gn-accent-active，按 82% / 60% 派生逐级加深的三态，
  并让 --gn-ant-primary-hover/active 指向它。该链路经 customTheme.ts:read →
  App.tsx colorPrimaryHover/Active 传给 antd，全站主要操作按钮一并受益
- 混合锚点按模式区分：深色主题向面板底色混合；浅色主题的面板比强调色更亮，
  向面板混合会把按钮冲淡成禁用观感，改为向纯黑混合（用 fg1 只能到 1.19–1.22 不达阈值）
- 提交事务按钮（DataGrid 与 SQL 编辑器两处）拆分 :hover 与 :active，
  此前两者共用同一条规则、点击无反馈；回退值保留 accent-2 兼容旧自定义主题
- 补 4 项不变式测试：三态互不相同、两段对比度均达 1.25、亮度单调递减不反向。
  该用例已实测抓住浅色主题的方向反转与阈值不足

实测：深色主题 base→hover 1.31–1.39、hover→active 1.43–1.55；浅色 1.35 / 1.45。

未处理：默认 v2 深色主题未定义 --gn-on-accent 而回退 #fff，白字压在 #22c55e 上仅 2.28、
禁用态文字 2.05，均不满足 WCAG AA；按本次确认范围未纳入。
This commit is contained in:
Syngnat
2026-07-26 21:39:26 +08:00
parent b8af7bede8
commit 75660ef3db
3 changed files with 192 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/v2-theme.css
View File

@@ -4057,16 +4057,28 @@ body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-commit-button {
font-weight: 750 !important;
}
/* hover/focus 与 active 必须用不同的派生色：原先两者都取 --gn-accent-2，
而 accent-2 是 accent 的近邻色（内置主题强调色刻意低饱和），
实测 base→hover 对比度仅 1.05–1.29，Deep Ocean 的 accent-2 甚至比 accent 更亮，
导致"有待提交变更"这一关键状态的交互反馈几乎不可见。
--gn-accent-hover / --gn-accent-active 由 customThemePresets 按固定比例向面板底色派生，
回退值保留 accent-2 以兼容未提供这两个 token 的旧自定义主题。 */
body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-commit-button:hover,
body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-commit-button:focus,
body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-commit-button:focus-visible,
body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-commit-button:active {
border-color: var(--gn-accent-2) !important;
background: var(--gn-accent-2) !important;
body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-commit-button:focus-visible {
border-color: var(--gn-accent-hover, var(--gn-accent-2)) !important;
background: var(--gn-accent-hover, var(--gn-accent-2)) !important;
color: var(--gn-on-accent, #fff) !important;
box-shadow: var(--gn-shadow-sm), inset 0 0.5px 0 rgba(255, 255, 255, 0.15) !important;
}
body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-commit-button:active {
border-color: var(--gn-accent-active, var(--gn-accent-2)) !important;
background: var(--gn-accent-active, var(--gn-accent-2)) !important;
color: var(--gn-on-accent, #fff) !important;
box-shadow: none !important;
}
body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-commit-button:disabled {
opacity: 1;
border-color: var(--gn-br-2) !important;