CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Adopt remaining typography token classes #65

Merged
an.di merged 1 commits from adilallo/fix/CR-24-typography-tokens into main 2026-08-17 20:09:54 +00:00
Conversation 0 Commits 1 Files Changed 75
+229 -252
an.di commented 2026-08-17 20:09:23 +00:00
Owner
Copy Link
Copy Source

Overview

Exact size/weight/line-height combos now use existing @theme text-{size}-{role} utilities (text-small-label, text-medium-paragraph, etc.) instead of hardcoded font-inter text-[Npx] font-medium leading-[…].

Inter stays the body default via --font-inter. No tokens were added or changed in app/tailwind.css. Unmappable combos stay hardcoded for design review.

Includes Button / MenuItem / NavigationItem fontStyles

Changes

  • Mapped exact combos onto token classes across cards, sections, navigation, modals, controls, create-flow, profile, and marketing.
  • Dropped redundant font-inter where Inter is already the body font; kept font-bricolage-grotesque / font-space-grotesk / font-sans where family is not Inter.
  • Button medium → text-small-label (14/16/500), matching the CSS token, not Figma Small/Label 14/18.
  • Updated class-string tests (ContentBanner, ContentContainer, QuoteBlock, blog, Rule).

Counts in app/ (excluding tailwind.css family decls):

Ticket baseline After batch 1 This PR
Token typography classes ~30 / 6 files 57 226 / 71 files
font-inter utilities 210 149 0
text-[Npx] 209 175 64 (justified leftovers)

How to Test

  1. npx tsc --noEmit — clean.
  2. npx vitest run — 200 files / 1264 tests passed.
  3. npx next build — compiled successfully.
  4. Storybook visual pass (the merge gate): Button, Rule, Footer, Accordion, QuoteBlock, ContentBanner, create-flow footer, Alert, Chip, Select/Text inputs. Check sm / md / lg / xl.

Notes

Unmappable leftovers (do not invent tokens):

  1. 14/18/500 Inter (Figma Small/Label vs CSS small-label 14/16) — Alert S titles, Accordion S title + M subhead, AddCustomField, CustomMethodCard wizard, TextBlock, Incrementer, Checkbox/Radio, TripleStep CTA below md.
  2. 12/16/500 — TextInput small label, Toggle label.
  3. 14/20/500 — TextInput medium label, SelectInput / InputWithCounter labels.
  4. 12/12/500 — ToggleGroup.
  5. No 32px display token — ContentContainer / ContentBanner / RelatedArticles / ContentLockup / PageHeader / TripleTextBlock still use text-[32px] at some breakpoints.
  6. 18/22/500 Bricolage — ContentLockup, TripleStep, ContentContainer XS title.
  7. 24/32/500 and 24/24/500 Bricolage — Step card.
  8. Quote compact / extended — odd display sizes (16/120%, 20/120%, 40/60/72).
  9. Accordion L panel 18/26/400; PageHeader description 18/28/400 below lg; ContentLockup description ramps 16/140% → 18/150% → 20/160%.
  10. Keep: TextInput text-[16px] md:text-[14px] (iOS Safari focus-zoom), Chip × glyph text-[10px], --font-inter wiring.
## Overview Exact size/weight/line-height combos now use existing `@theme` `text-{size}-{role}` utilities (`text-small-label`, `text-medium-paragraph`, etc.) instead of hardcoded `font-inter text-[Npx] font-medium leading-[…]`. Inter stays the body default via `--font-inter`. No tokens were added or changed in `app/tailwind.css`. Unmappable combos stay hardcoded for design review. Includes Button / MenuItem / NavigationItem `fontStyles` ## Changes - Mapped exact combos onto token classes across cards, sections, navigation, modals, controls, create-flow, profile, and marketing. - Dropped redundant `font-inter` where Inter is already the body font; kept `font-bricolage-grotesque` / `font-space-grotesk` / `font-sans` where family is not Inter. - Button medium → `text-small-label` (14/16/500), matching the CSS token, not Figma Small/Label 14/18. - Updated class-string tests (ContentBanner, ContentContainer, QuoteBlock, blog, Rule). Counts in `app/` (excluding `tailwind.css` family decls): | | Ticket baseline | After batch 1 | This PR | | -- | -- | -- | -- | | Token typography classes | ~30 / 6 files | 57 | **226 / 71 files** | | `font-inter` utilities | 210 | 149 | **0** | | `text-[Npx]` | 209 | 175 | **64** (justified leftovers) | ## How to Test 1. `npx tsc --noEmit` — clean. 2. `npx vitest run` — 200 files / 1264 tests passed. 3. `npx next build` — compiled successfully. 4. Storybook visual pass (the merge gate): Button, Rule, Footer, Accordion, QuoteBlock, ContentBanner, create-flow footer, Alert, Chip, Select/Text inputs. Check `sm` / `md` / `lg` / `xl`. ## Notes Unmappable leftovers (do not invent tokens): 1. **14/18/500 Inter** (Figma Small/Label vs CSS `small-label` 14/16) — Alert S titles, Accordion S title + M subhead, AddCustomField, CustomMethodCard wizard, TextBlock, Incrementer, Checkbox/Radio, TripleStep CTA below `md`. 2. **12/16/500** — TextInput small label, Toggle label. 3. **14/20/500** — TextInput medium label, SelectInput / InputWithCounter labels. 4. **12/12/500** — ToggleGroup. 5. **No 32px display token** — ContentContainer / ContentBanner / RelatedArticles / ContentLockup / PageHeader / TripleTextBlock still use `text-[32px]` at some breakpoints. 6. **18/22/500 Bricolage** — ContentLockup, TripleStep, ContentContainer XS title. 7. **24/32/500 and 24/24/500 Bricolage** — Step card. 8. **Quote compact / extended** — odd display sizes (16/120%, 20/120%, 40/60/72). 9. **Accordion L panel 18/26/400**; **PageHeader description 18/28/400** below `lg`; ContentLockup description ramps 16/140% → 18/150% → 20/160%. 10. **Keep:** TextInput `text-[16px] md:text-[14px]` (iOS Safari focus-zoom), Chip `×` glyph `text-[10px]`, `--font-inter` wiring.
an.di added 1 commit 2026-08-17 20:09:23 +00:00
Adopt remaining typography token classes (CR-24) 2321a1e761 
Map exact size/weight/line-height combos onto existing text-* utilities across cards, sections, navigation, modals, controls, and create-flow. Leave unmappable combos hardcoded for design review.

Co-authored-by: Cursor <cursoragent@cursor.com>
an.di self-assigned this 2026-08-17 20:09:45 +00:00
an.di merged commit 705fa428ce into main 2026-08-17 20:09:54 +00:00
an.di deleted branch adilallo/fix/CR-24-typography-tokens 2026-08-17 20:09:54 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
an.di (Andy DiLallo) ntnsndr (Nathan Schneider)
No Assignees an.di
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#65