charles/claude-hooks

Fork 0

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

Merged

code-lead merged 3 commits from dev/209 into main

2026-04-21 12:24:15 +00:00

dev commented

2026-04-21 11:50:24 +00:00

Collaborator

Summary

Replace all 234 hardcoded text-[Npx] classes across 36 files in apps/web/src/** with semantic Tailwind utilities from the token system introduced in #208
text-[11px] → text-meta, text-[12px] → text-small, text-[13px] → text-body, text-[10px] → text-caption, text-[14px] → text-h3
Edge cases: text-[9px] bumped to text-caption (10px) in Gantt labels; text-[15px] bumped to text-body-lg (16px) for dialog title — both have inline comments explaining the choice

Test plan

bun x biome check apps/web/src — clean
Visual spot-check: routes/agents.tsx, routes/stats.tsx, components/pipeline-list.tsx, components/spec-editor/issue-card.tsx
Playwright Monitor e2e passes

Closes #209

## Summary - Replace all 234 hardcoded `text-[Npx]` classes across 36 files in `apps/web/src/**` with semantic Tailwind utilities from the token system introduced in #208 - `text-[11px]` → `text-meta`, `text-[12px]` → `text-small`, `text-[13px]` → `text-body`, `text-[10px]` → `text-caption`, `text-[14px]` → `text-h3` - Edge cases: `text-[9px]` bumped to `text-caption` (10px) in Gantt labels; `text-[15px]` bumped to `text-body-lg` (16px) for dialog title — both have inline comments explaining the choice ## Test plan - [ ] `bun x biome check apps/web/src` — clean - [ ] Visual spot-check: `routes/agents.tsx`, `routes/stats.tsx`, `components/pipeline-list.tsx`, `components/spec-editor/issue-card.tsx` - [ ] Playwright Monitor e2e passes Closes #209

dev added 1 commit

2026-04-21 11:50:24 +00:00

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

qa / qa (pull_request) Failing after 2m52s

Details

qa / dockerfile (pull_request) Successful in 8s

Details

e9ce0e3b3b

Replace all hardcoded text-[Npx] Tailwind classes with semantic utilities
defined in the token system (#208):
- text-[11px] → text-meta (101 occurrences)
- text-[12px] → text-small (81 occurrences)
- text-[13px] → text-body (23 occurrences)
- text-[10px] → text-caption (26 occurrences)
- text-[14px] → text-h3 (3 occurrences)

Edge cases bumped to closest token:
- text-[9px] → text-caption (10px) in pipeline-gantt.tsx Gantt labels
- text-[15px] → text-body-lg (16px) in issue-card.tsx dialog title

Closes #209

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dev added 1 commit

2026-04-21 11:54:06 +00:00

fix(ci): collapse multi-line JSX div to satisfy Biome formatter in pipeline-gantt

qa / qa (pull_request) Failing after 2m51s

Details

qa / dockerfile (pull_request) Successful in 10s

Details

bfca140300

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dev added 1 commit

2026-04-21 12:00:49 +00:00

fix(ci): collapse multi-line span to satisfy Biome formatter in issue-card

qa / qa (pull_request) Successful in 3m54s

Details

qa / dockerfile (pull_request) Successful in 9s

Details

f66eb52a24

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dev requested review from reviewer

2026-04-21 12:08:39 +00:00

reviewer approved these changes

2026-04-21 12:12:02 +00:00

reviewer left a comment

✅ Approved

CI green. All acceptance criteria from #209 met.

What I checked

In-scope replacements (234 total): Full scan of all 36 changed files on the PR head (f66eb52) — zero surviving text-[10px] through text-[15px] literals in any of them.

Edge case text-[9px] → text-caption (pipeline-gantt.tsx): Both occurrences (annotation span, x-axis tick container) carry the explanatory comment {/* text-caption (10px) is the closest token to the original 9px */} exactly as the issue requested. ✓

Edge case text-[15px] → text-body-lg (issue-card.tsx): The single Dialog.Title carries {/* text-body-lg (16px) is the closest token to the original 15px */}. ✓

Surviving literals (text-[16px] in sessions-pane.tsx, text-[18px] in several route files, text-[28px] in usage.tsx): Confirmed pre-existing on the base commit e2534efa — not in scope for this PR per the explicit size list in #209. No action needed.

Scope: all changes contained within apps/web/src/**. No server-side or shared-package files touched. ✓

## ✅ Approved CI green. All acceptance criteria from #209 met. ### What I checked **In-scope replacements (234 total):** Full scan of all 36 changed files on the PR head (`f66eb52`) — zero surviving `text-[10px]` through `text-[15px]` literals in any of them. **Edge case `text-[9px]` → `text-caption` (pipeline-gantt.tsx):** Both occurrences (annotation span, x-axis tick container) carry the explanatory comment `{/* text-caption (10px) is the closest token to the original 9px */}` exactly as the issue requested. ✓ **Edge case `text-[15px]` → `text-body-lg` (issue-card.tsx):** The single `Dialog.Title` carries `{/* text-body-lg (16px) is the closest token to the original 15px */}`. ✓ **Surviving literals (`text-[16px]` in sessions-pane.tsx, `text-[18px]` in several route files, `text-[28px]` in usage.tsx):** Confirmed pre-existing on the base commit `e2534efa` — not in scope for this PR per the explicit size list in #209. No action needed. **Scope:** all changes contained within `apps/web/src/**`. No server-side or shared-package files touched. ✓

dev force-pushed dev/209 from f66eb52a24

qa / qa (pull_request) Successful in 3m54s

Details

qa / dockerfile (pull_request) Successful in 9s

Details

to 6b10ff2ff7

qa / qa (pull_request) Successful in 3m55s

Details

qa / dockerfile (pull_request) Successful in 8s

Details

2026-04-21 12:13:22 +00:00

Compare