chore(web): migrate text-[Npx] literals to semantic font-size utilities #209

New issue

Closed

opened 2026-04-21 10:29:03 +00:00 by claude-desktop · 1 comment

claude-desktop commented

2026-04-21 10:29:03 +00:00

Collaborator

User story

As a dashboard operator, I want every text-[Npx] literal in apps/web/src/** replaced with a semantic Tailwind utility (text-meta, text-small, text-body, text-h3, text-caption), so that typography scales uniformly with the token system and the zoom: 1.2 workaround can eventually be dropped.

Dependencies

Blocked by #208 — foundation introduces text-meta/text-small/text-body/text-h3/text-caption utilities via @theme, plus the missing --ch-font-size-caption + --ch-font-size-h3 tokens. This ticket cannot start until that lands.

Acceptance criteria

Replacements (mechanical)

Replace all 101 occurrences of text-[11px] → text-meta across apps/web/src/**.
Replace all 81 occurrences of text-[12px] → text-small.
Replace all 23 occurrences of text-[13px] → text-body.
Replace all 26 occurrences of text-[10px] → text-caption.
Replace all 3 occurrences of text-[14px] → text-h3.

Edge cases

Audit the 2 occurrences of text-[9px] and 1 of text-[15px] — bump to the closest token, add a new token (flag for discussion), or document in a code comment why they stay literal.

Verification

bun run build clean, bun run qa clean (biome + typecheck).
Visual spot-check the four worst-offender files post-migration: routes/agents.tsx, routes/stats.tsx, components/pipeline-list.tsx, components/spec-editor/issue-card.tsx.
Playwright Monitor e2e still passes.

Out of scope

Dropping zoom: 1.2 from index.css → separate ticket (depends on this).
Adding the text-* utilities to @theme + the missing tokens → handled by #208.
Card radius / button hierarchy cleanup → separate tickets.

References

Styling audit report (2026-04-21) — 235 hardcoded text-[Npx] across 36 files; worst offenders listed.
apps/web/src/styles/index.css:71-79 — the zoom block this migration unlocks removing.

## User story As a dashboard operator, I want every `text-[Npx]` literal in `apps/web/src/**` replaced with a semantic Tailwind utility (`text-meta`, `text-small`, `text-body`, `text-h3`, `text-caption`), so that typography scales uniformly with the token system and the `zoom: 1.2` workaround can eventually be dropped. ## Dependencies - **Blocked by #208** — foundation introduces `text-meta`/`text-small`/`text-body`/`text-h3`/`text-caption` utilities via `@theme`, plus the missing `--ch-font-size-caption` + `--ch-font-size-h3` tokens. This ticket cannot start until that lands. ## Acceptance criteria ### Replacements (mechanical) - [ ] Replace all **101** occurrences of `text-[11px]` → `text-meta` across `apps/web/src/**`. - [ ] Replace all **81** occurrences of `text-[12px]` → `text-small`. - [ ] Replace all **23** occurrences of `text-[13px]` → `text-body`. - [ ] Replace all **26** occurrences of `text-[10px]` → `text-caption`. - [ ] Replace all **3** occurrences of `text-[14px]` → `text-h3`. ### Edge cases - [ ] Audit the 2 occurrences of `text-[9px]` and 1 of `text-[15px]` — bump to the closest token, add a new token (flag for discussion), or document in a code comment why they stay literal. ### Verification - [ ] `bun run build` clean, `bun run qa` clean (biome + typecheck). - [ ] Visual spot-check the four worst-offender files post-migration: `routes/agents.tsx`, `routes/stats.tsx`, `components/pipeline-list.tsx`, `components/spec-editor/issue-card.tsx`. - [ ] Playwright Monitor e2e still passes. ## Out of scope - Dropping `zoom: 1.2` from `index.css` → separate ticket (depends on this). - Adding the `text-*` utilities to `@theme` + the missing tokens → handled by #208. - Card radius / button hierarchy cleanup → separate tickets. ## References - Styling audit report (2026-04-21) — 235 hardcoded `text-[Npx]` across 36 files; worst offenders listed. - `apps/web/src/styles/index.css:71-79` — the `zoom` block this migration unlocks removing.

claude-desktop referenced this issue

2026-04-21 10:29:42 +00:00

chore(web): drop zoom: 1.2 hack from index.css #212

claude-desktop added the

area:dashboard

type:chore

labels

2026-04-21 10:29:43 +00:00