refactor(ui): one type scale of five steps, and stop squeezing Chinese - #131
Merged
Merged
Conversation
「这个页面太乱了，有的字体小，有的字体大」 — measured before changing anything: the content workspace alone carried **82 font-size declarations across 15 distinct values** (10 / 10.5 / 11 / 11.3 / 11.5 / 12 / 12.5 / 13 / 13.5 / 14 / 15 / 17 / 18 / 20 / 21 / 24px). Most were neighbours 0.5–1px apart, so no step read as a step, and the floor was 10px — the "some text is too small" half of the complaint. Now there are five steps, defined once in tokens.css and referenced everywhere: | token | px | what it is | |---|---|---| | --fs-display | 24 | page title | | --fs-title | 20 | section headline | | --fs-subtitle | 16 | card / panel heading | | --fs-body | 14 | body, field values, buttons | | --fs-meta | 12 | eyebrows, meta, helper text (the new floor) | Every raw px font-size in the CSS (82 in the workspace file, 73 in lumen.css, 36 across the other page sheets) now points at one of the five. The legacy --text-* names stay as aliases to the same steps so new code cannot grow a sixth value. Three sources of stray sizes went with it: the MUI theme's own heading scale and its 13px buttons, the shell's hard-coded 15px body base (which coexisted with --text-base 14px, giving two body sizes on one screen), and unclassed h2/h3 falling back to browser defaults (1.5em ≈ 22.5px orphans). Also: Chinese text had negative letter-spacing on headings (-0.02em in the theme, -0.8/-1.4px in CSS), copied from Latin display type. CJK glyphs are full-width; squeezing them makes the title look cramped rather than tight. Those are now 0. And MUI's floating field labels shrank to 0.75× (14px → 10.5px); they scale 0.86 now, landing on the 12px floor. Measured after: the workspace renders 4 sizes (20 / 16 / 14 / 12) — the display step is used by list pages. Both viewports checked for overflow across content list, workspace, shelf, urgent and opportunities: none (frontend/scripts/type-scale-audit.mjs prints the distribution for any route; the double-viewport shots come from taxonomy-step3-shots.mjs). Verification: frontend 280 tests in 43 files pass, tsc and eslint clean.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
线上走查反馈的第一条：「这个页面太乱了，有的字体小，有的字体大，总体都不好看」。
先量，再改
只内容工作台这一个页面就有 82 处 font-size 声明、15 种取值：10 / 10.5 / 11 / 11.3 / 11.5 / 12 / 12.5 / 13 / 13.5 / 14 / 15 / 17 / 18 / 20 / 21 / 24px。相邻差 0.5–1px，所以"每一步都不像一步"；地板还是 10px，正是"有的字体太小"那一半。
改成五档，只在一处定义
--fs-display--fs-title--fs-subtitle--fs-body--fs-meta所有散落的 px 字号（工作台 82 处、lumen.css 73 处、其余页面 36 处）都改为引用这五档；旧的
--text-*名字保留为指向同一批档位的别名，避免以后又长出第六档。顺带清掉三个游离来源：MUI 主题自带的标题阶梯与 13px 按钮、外壳写死的 15px 正文基准（它与--text-base的 14px 并存，同屏两种正文字号）、以及没有 class 的 h2/h3 落回浏览器默认（1.5em ≈ 22.5px 的孤儿档）。另外：中文标题一直带着负字距（主题里 -0.02em、CSS 里 -0.8/-1.4px），那是照搬西文展示体的规则——汉字是等宽方块，压缩只会显得挤。现在归零。MUI 浮动标签原本缩到 0.75×（14→10.5px），改为 0.86×，落在 12px 地板上。
验证
改后实测工作台只剩 4 档（20 / 16 / 14 / 12；display 档用于列表页标题）。1280 与 390 双视口复查内容列表 / 工作台 / 产出架 / 急稿 / 机会，无溢出、无越界。
frontend/scripts/type-scale-audit.mjs可对任意路由打印字号分布（本次的量化依据就是它）。前端 280 测试全过、tsc 与 eslint 干净。截图我会在消息里贴出来；这一步是纯排版，没有改任何交互或数据。