psa-systems/lets-chat
Watch
9
0
Fork
You've already forked lets-chat
 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions

feat(ui): semantic typography scale + spacing rhythm (LC-365) #375

Merged
longjacksonle merged 1 commit from feat/lc-365-design-tokens into main 2026-06-19 15:01:00 +02:00
Conversation 0 Commits 1 Files changed 3 +52 -1
longjacksonle commented 2026-06-19 15:00:03 +02:00
Owner
Copy link

Closes LC-365. First piece of the LC-364 frontend redesign - the design-token foundation the rest builds on.

What

  • Typography scale in server/assets/main.css: lc-display, lc-h1, lc-h2, lc-h3, lc-body, lc-small, lc-caption, and lc-section-label (the uppercase muted group label for sidebar/list sections). Each pairs font-size + weight + line-height (+ tracking).
  • Defined as plain CSS (not a Tailwind @layer) so the classes are always present for the redesign work and never purged; sizes mirror Tailwind's rem scale so they read familiarly. Color stays with the caller (text-content / text-content-muted), except caption/section-label which imply muted.
  • Docs: docs/ui-conventions.md gains a Typography scale table and a Spacing rhythm section (4px scale: gaps, section padding, dividers, row height).
  • First adoption: lc-display on the welcome heading. The message body (.lc-md) keeps its own per-device-scaled size and is untouched.

Notes

  • main.css is served raw (not Tailwind-processed), so no build step gates these classes.
  • cargo check clean, just build-css succeeds, just test + just test-saas green.
  • The rail / sidebar / list / welcome / header / message issues (LC-366..374) will adopt these classes as they land.
Closes LC-365. First piece of the LC-364 frontend redesign - the design-token foundation the rest builds on. ## What - **Typography scale** in `server/assets/main.css`: `lc-display`, `lc-h1`, `lc-h2`, `lc-h3`, `lc-body`, `lc-small`, `lc-caption`, and `lc-section-label` (the uppercase muted group label for sidebar/list sections). Each pairs font-size + weight + line-height (+ tracking). - Defined as **plain CSS** (not a Tailwind `@layer`) so the classes are always present for the redesign work and never purged; sizes mirror Tailwind's rem scale so they read familiarly. Color stays with the caller (`text-content` / `text-content-muted`), except caption/section-label which imply muted. - **Docs**: `docs/ui-conventions.md` gains a Typography scale table and a Spacing rhythm section (4px scale: gaps, section padding, dividers, row height). - **First adoption**: `lc-display` on the welcome heading. The message body (`.lc-md`) keeps its own per-device-scaled size and is untouched. ## Notes - `main.css` is served raw (not Tailwind-processed), so no build step gates these classes. - `cargo check` clean, `just build-css` succeeds, `just test` + `just test-saas` green. - The rail / sidebar / list / welcome / header / message issues (LC-366..374) will adopt these classes as they land.
feat(ui): add a semantic typography scale + spacing rhythm (LC-365)
All checks were successful
Check / clippy + fmt + tests (pull_request) Successful in 3m20s
Details
check-secrets / TruffleHog (pull_request) Successful in 4s
Details
check-secrets / Kingfisher (push) Successful in 4s
Details
check-secrets / Nosey parker (pull_request) Successful in 6s
Details
check-secrets / TruffleHog (push) Successful in 11s
Details
check-secrets / Nosey parker (push) Successful in 8s
Details
check-secrets / Kingfisher (pull_request) Successful in 10s
Details
Create release / Create release from merged PR (pull_request) Has been skipped
Details
29fcd5c565 
Foundation for the LC-364 frontend redesign. The chrome currently hand-rolls `text-2xl font-semibold` style combos per template, so headings and labels drift.

Add a small, documented typography scale as plain CSS classes in main.css (lc-display / lc-h1 / lc-h2 / lc-h3 / lc-body / lc-small / lc-caption / lc-section-label), each pairing font-size + weight + line-height (+ tracking). Defined as raw CSS (not a Tailwind `@layer`) so the classes are always present for the redesign work and never purged; sizes mirror Tailwind's rem scale. Document the scale and the 4px spacing rhythm (gaps, section padding, dividers, row height) in docs/ui-conventions.md, and adopt `lc-display` on the welcome heading as the first use. The message body (.lc-md) keeps its own per-device-scaled size and is untouched.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
longjacksonle deleted branch feat/lc-365-design-tokens 2026-06-19 15:01:01 +02:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
psa-systems/lets-chat!375
No description provided.