Skip to content

fix(desktop): unify font tokens + set Noto Sans SC as default font + small text size#4041

Closed
Li-Charles-One wants to merge 2 commits into
esengine:main-v2from
Li-Charles-One:fix/unify-font-tokens
Closed

fix(desktop): unify font tokens + set Noto Sans SC as default font + small text size#4041
Li-Charles-One wants to merge 2 commits into
esengine:main-v2from
Li-Charles-One:fix/unify-font-tokens

Conversation

@Li-Charles-One

@Li-Charles-One Li-Charles-One commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

改动内容

统一桌面端字体系统,修复字体变量错误,调整默认字体和字号。

1. 修复字体变量错误

  • --font-mono -> --mono--font-sans -> --sans
  • 这两个变量名写错了,导致 CSS 找不到值、回退到硬编码字体,用户设置的字体偏好完全失效
  • 清理 var(--mono) 上多余的 fallback(变量本身已定义完整字体栈)

2. 默认字体改为思源黑体(Noto Sans SC)

  • 原来 base --sansPingFang SC, Microsoft YaHei 开头,不同系统渲染差异大
  • 思源黑体是 Google 和 Adobe 联合开发的开源字体,Windows/macOS/Linux 都能安装,跨平台一致性最好
  • 设置里仍然可以切换微软雅黑/苹方/Noto,只是默认值改了

3. 默认字号改为「小」

  • --font-scale1(14px 基准)改为 0.94(约 13px 基准)
  • 桌面端信息密度高,小一号更紧凑,减少视觉疲劳

4. 新增字体粗细语义化 Token

  • 新增 --fw-normal(400)、--fw-medium(500)、--fw-semibold(600)、--fw-bold(700)
  • 把 CSS 里 18 种不同的硬编码 font-weight 统一归到这 4 个 token
  • 好处: 以后改粗细只改一处,不用逐行找;主题切换时也能统一调整

5. 新增字号 Token + 替换硬编码

  • 新增 --text-2xl(22px)、--text-3xl(28px) 用于大标题
  • 把 CSS 里 26 种不同的硬编码 font-size(9.5px ~ 30px,含 em 单位)全部对齐到已有的 --text-* scale
  • 好处: 用户调字号时(小/默认/大/特大),所有元素按比例缩放,不会出现「有的地方变了有的没变」的情况

6. 状态栏清理

  • 去掉竖线 | 分隔符,改用统一的 gap 间距
  • 去掉 max-width: 940px 居中,状态栏铺满可用宽度
  • 响应式间距:宽屏 20px -> 中屏 12px -> 窄屏 8px
  • 内容溢出时横向滚动(滚动条隐藏)
  • footer 左右 padding 从 32px 缩到 12px,给状态栏腾空间

为什么字体统一很重要

  1. 用户设置失效: --font-mono--font-sans 这两个变量名不存在,CSS 直接 fallback 到硬编码字体。用户在设置里选「微软雅黑」或「苹方」,这些元素完全不受影响,等于白设。
  2. 跨平台不一致: 不同系统默认字体不同(Windows 用微软雅黑,macOS 用苹方),同一个 UI 在不同平台上看起来不一样。思源黑体是跨平台统一方案。
  3. 字号缩放断裂: 用户调字号时,硬编码的 font-size: 12.5px 不会跟着 --font-scale 变,导致「有的地方大了有的地方没变」,视觉上很割裂。
  4. 维护成本高: 18 种 font-weight、26 种 font-size,后续想统一调整(比如主题切换、可访问性改进)需要逐行修改,容易遗漏。

验证

  • check:css ✅(语法 + z-index token 检查通过)
  • test ✅(181 passed,2 个 pre-existing failures 与本次改动无关)

影响范围

只改了 styles.cssfontFamily.tstextSize.ts 和对应的测试文件,不涉及任何组件逻辑变更

@github-actions github-actions Bot added v2 Go rewrite (1.x) — main-v2 branch, active development desktop Wails desktop app (desktop/**) labels Jun 11, 2026

@SivanCola SivanCola left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

感谢整理这次字体/字号统一。整体方向我认可,但现在先 request changes,主要有两个需要修完再合并的问题:

  1. 这个分支现在和最新 main-v2styles.css 冲突,GitHub 也显示 DIRTY。请先 rebase 到最新 main-v2 并解决冲突,注意保留最新 base 里已经加入的 .tool__summary.reasoning__body.copybtn transition 等样式改动。

  2. system 字体选项现在会失效。PR 把 DEFAULT_FONT_FAMILY 改成了 noto,但 FONT_FAMILIES 里仍然保留 systemapplyFontFamily("system") 会写入 data-font-family="system"。当前 CSS 没有这个 selector,根默认又已经变成 Noto stack,所以旧用户保存的 reasonix-font-family=system 或设置页里选择“系统默认”时,实际还是会渲染成 Noto。请补一个 :root[data-font-family="system"] 使用旧的系统字体栈,或者调整默认值/attribute 映射,保证“系统默认”选项真的生效。

我本地验证过:pnpm check:csstext-size 单测通过;pnpm test 里的两个 command palette CSS 失败在 PR base 上也存在,不算这次新增问题。

麻烦修完这两个点后 ping 我,我会再复查,没问题就 merge。

…small text size

Font family unification:
- Fix broken CSS variable references: --font-mono → --mono, --font-sans → --sans
  These undefined variables bypass user font-family preferences.
- Clean redundant fallbacks on var(--mono) (already defined with full stack).
- Change default font to Noto Sans SC (思源黑体) for consistent cross-platform
  rendering. Update base :root --sans and DEFAULT_FONT_FAMILY accordingly.
- Fix statusbar font-family: was var(--mono), now var(--sans).

Font weight tokens:
- Add semantic font-weight tokens: --fw-normal(400), --fw-medium(500),
  --fw-semibold(600), --fw-bold(700). Collapse 18 distinct hardcoded weights
  (400-800) to 4 tokens.

Font size tokens:
- Add --text-2xl(22px) and --text-3xl(28px) for display sizes.
- Replace all hardcoded font-size values (9.5px-30px, em units) with
  existing --text-* scale tokens.
- Change default text size to 'small' (--font-scale: 0.94).
- Add [data-text-size='default'] CSS rule for scale 1.0.

Statusbar cleanup:
- Remove pipe character separators; use uniform gap for all items.
- Remove max-width centering; statusbar fills available width.
- Add responsive breakpoints: 20px → 12px → 8px gap.
- Horizontal scroll on overflow (scrollbar hidden).

Before: 2 broken font-family vars, 18 font-weight values, 26 font-size values,
        system-font default (varies by OS), default text size, pipe separators.
After:  0 broken vars, 4 font-weight tokens, 9 font-size tokens,
        Noto Sans SC default, small text size, clean gap-based statusbar.

Verification: check:css ✅ test ✅ (181 passed, 2 pre-existing failures)
@Li-Charles-One Li-Charles-One force-pushed the fix/unify-font-tokens branch from e454e2b to 9aeb0fc Compare June 12, 2026 11:07
@Li-Charles-One

Copy link
Copy Markdown
Contributor Author

Rebased onto latest main-v2 (was 4c5fec6 → now f48a241, +25 commits) and resolved the styles.css conflicts. 6 conflict zones; in all of them I kept main-v2's new styles and only kept our font-token substitutions on the lines we were already touching:

  • .reasoning__body → kept font-size: var(--text-md) (matches main-v2's new theme-style override)
  • .copybtn → kept var(--text-xs) + restored main-v2's transition: color 0.12s, border-color 0.12s, gap 0.12s
  • .notice__body → kept our var(--font-caption)
  • .tool__summary block → fully preserved (the new outcome-line styles from main-v2)
  • :root[data-theme-style] .reasoning__body and .tool__body theme overrides → fully preserved
  • .context-panel__metric strongvar(--text-xl) + font-variant-numeric: tabular-nums (combined our token + main-v2's tabular-nums)

For the "system" 字体选项失效 issue, I added a new CSS rule:

:root[data-font-family="system"] {
  --sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

This is exactly the system font stack that was the :root default on main-v2 before this PR changed the default to noto. So users with saved reasonix-font-family=system (or who pick 系统默认 in settings) will now get the real system stack, distinct from noto. The applyFontFamily('system') code path is untouched (it still writes data-font-family="system"), so the option is wired up correctly end-to-end.

Verification on this branch HEAD (9aeb0fc):

  • pnpm check:css — passed
  • pnpm exec tsx src/__tests__/text-size.test.ts — 8/8 passed
  • pnpm test — all suites passed (including command-palette-css, which you noted was previously flaky on base)
  • pnpm typecheck and pnpm test:typecheck — one pre-existing bridge.ts(288,42) error that is identical on main-v2 HEAD (verified by git diff upstream/main-v2 HEAD -- desktop/frontend/src/lib/bridge.ts = empty); not introduced by this PR

PR is now MERGEABLE. Please take another look — @SivanCola whenever you have a moment, thanks!

@Li-Charles-One Li-Charles-One closed this by deleting the head repository Jun 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

desktop Wails desktop app (desktop/**) v2 Go rewrite (1.x) — main-v2 branch, active development

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants