feat(frontend): Heading/Typography primitives and migrate renewed surfaces#492
Merged
Conversation
…enewed surfaces (#491) Adds two CVA-based primitives under `app/components/ui/` and routes every `<h*>` / `<p>` in the renewed composite, layout, and route surfaces through them so font scale lives in one place instead of being copied across call sites as `text-[15px]`, `text-2xl`, `text-[clamp(...)]`, etc. Heading variants: display / hero / h1 / h2 / h3 / h4 / h5 / h6 / eyebrow, with a `level` prop that decouples semantic level from visual size. Typography variants: display / statLg / statMd / lead / body / bodySm / caption / micro / label / mono, with `tone`, `weight`, `truncate`, and `as` props. Out of scope: the old-Chakra `$treeId._index.tsx` (renewed copy is WIP on #433 and will be migrated as part of that PR) and the rest of the unrenewed routes. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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.
Summary
HeadingandTypographyprimitives underapp/components/ui/(with Ladle stories) so every renewed surface declares font size via a variant instead of inlinetext-[…]classes.<h*>/<p>in the renewedcomposite/,layout/, and routes (_index,login,signupviaAuthHero,workspace._index,workspace.newviaAuthHero/ shared components) through the new primitives. Font-size Tailwind classes on the migrated call sites are gone.Closes #491.
Notes
$treeId._index.tsx) is currently still the old Chakra version onmain; the renewed copy is WIP on [Phase 3] ホーム画面のリニューアル #433 and will pick up these primitives as part of that PR. Everything else in scope of [Phase 3] Heading / Typography プリミティブの導入と既存刷新済みコードへの移行 #491 is covered here.text-sm14px collapses intobodySm13px) — that's the point.field.tsxfrom [Phase 2-1] デザインシステム (1/3) — トークンとアトミックプリミティブ #426.Test plan
UI / HeadingandUI / Typographystories render the full variant ladder.pnpm frontend devand visually verify landing (/), login (/login), signup (/signup), workspace list (/workspace), workspace create (/workspace/new) — copy hierarchy should be unchanged.AppHeader,ScreenHeader,TopBar,Sidebar,AccountMenu,WorkspaceSwitcherMenurender correctly across mobile + desktop breakpoints.🤖 Generated with Claude Code