Skip to content

style: improve UI readability and fix sidebar toggle#4

Merged
rogerdigital merged 1 commit intomainfrom
style/improve-readability
Apr 14, 2026
Merged

style: improve UI readability and fix sidebar toggle#4
rogerdigital merged 1 commit intomainfrom
style/improve-readability

Conversation

@rogerdigital
Copy link
Copy Markdown
Owner

Summary

  • 提升全局文字对比度,--text/--muted/--muted-strong 三级色值全面调亮,主体文字对比度达到 WCAG AA 标准
  • 拉开面板与画布的层次差值(--panel 整体上移),边框可见度提升约 2x(--line opacity 0.10→0.22)
  • 全量将次要标签(eyebrow、tile-label、toolbar-kicker、metric span、th、log-copy 等)从 --muted 升为 --muted-strong
  • 修复侧边栏折叠按钮被裁剪的问题:sidebar overflow: hidden → visible,sidebarToggle z-index: 10 → 50
  • 补充中文字体回退链(PingFang SC / Noto Sans SC / Microsoft YaHei),避免 CJK 文字降级到等宽字体
  • 同步修复 ConsoleChrome.css.ts 中硬编码的旧背景色值

Test plan

  • npm run verify 全部通过(134 API + 20 Worker + 62 Web 测试,typecheck,build)
  • 视觉回归:在 Vercel Preview 中确认侧边栏、工具栏、面板文字可读性

- Raise text contrast: --text #b8cde8→#d8eaf8, --muted opacity 0.65→0.82,
  --muted-strong opacity 0.82→0.95 to meet WCAG AA across the board
- Lift panel backgrounds: --panel #04091a→#091224, --panel-2/3 in proportion,
  creating clearer three-level depth separation from the canvas
- Strengthen border visibility: --line opacity 0.10→0.22, --line-strong 0.24→0.40
- Promote muted→muted-strong on secondary labels (eyebrow, tile-label,
  toolbar-kicker, metric spans, log-copy, th headers, etc.)
- Add Chinese font fallbacks: PingFang SC / Noto Sans SC / Microsoft YaHei
  on --font-display and --font-ui to prevent CJK text falling back to monospace
- Enable antialiased font rendering on body
- Fix sidebar toggle button clipped by overflow:hidden: change sidebar to
  overflow:visible and raise sidebarToggle z-index 10→50 (above globalToolbar z:40)
- Sync all hardcoded rgba background values in ConsoleChrome.css.ts,
  layout.css.ts, panels.css.ts and tables.css.ts to the new palette
@rogerdigital rogerdigital merged commit 84aed3e into main Apr 14, 2026
9 checks passed
@rogerdigital rogerdigital deleted the style/improve-readability branch April 14, 2026 09:51
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