Repository navigation
feat(core): use typography roles in components - #628
Merged
Merged
Conversation
Value-identical swaps for 209 places, plus the decisions agreed on 2026-10-18/19: text below 12px moves to 12px, line heights outside the allowed modifiers move to the role, and the section labels (chat history, tool, filter rail legend, ActivityCard day label, Menu group label) use label-sm at weight 500. code-sm adds 2px of line height (16 to 18px). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Titles, descriptions, captions, messages, error text and key/value display in core components now use Text. Controls, cva strings and containers keep the role class. Base UI parts and elements that differ from the role's default tag are passed with render; the existing data-slot moves to the render element. Text now passes children only when given, so a render part that supplies its own content (Base UI Field.Error with the validation message) keeps it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…l-sm The indicator inherited weight 500 from the column header. body-sm set 400. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…alue pairs DescriptionCard values 500 -> 400; AppInfo, DocumentProgressCard and CsvImporter summary keys 400 -> 500; CsvImporter summary values 500 -> 400. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ebar app title Both are h3/h1 elements. Empty state title 500 -> 600, sidebar app title 400 -> 600 (the same as the GlobalHeader title). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…no size Alert.Title renders with Text label-md and drops tracking-tight (-0.025em -> 0). Table head and footer cells, the CsvImporter table head, the tool name and the DataTable filter chip field and value take label roles; their values do not change. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Emphasis uses font-semibold only, so the selected item moves from 500 to 600 with its background, as Primer NavList/ActionList and Polaris Navigation do (chat history, DataTable filter panel, sidebar). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…aw sizes The decision record gets a third-change section, the component rules say when to render Text and when to use the role utility, and the styling and Text docs drop "figures in a table" from label-md and pair numbers with body-md. tests/typography-usage.test.ts fails on a raw text size, an unknown role name, or text-code-sm without font-mono. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…e heights to roles Review follow-up. DescriptionCard and CsvImporter values render span as before (body-md defaults to p). Alert.Description paragraphs use body-md-relaxed instead of leading-relaxed, and the chain-of-thought step label uses Text. The guard test also rejects line heights outside the roles, and a DescriptionCard test checks the value elements. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…Text children fix Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Contributor
IzumiSy
approved these changes
Oct 21, 2026
…-in-components # Conflicts: # docs-manifest.json # packages/core/__snapshots__/src__components__alert__alert.test.tsx.snap # packages/core/src/components/alert/alert.tsx
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
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.
Motivation
The third change for tailor-inc/platform-planning#1580. #572 added the typography roles and #594 added
Text; this PR uses them in AppShell's own components. Core components had 231 raw size classes and no roles.Design Decision
Content text (titles, descriptions, captions, messages, key and value display) renders with
Text. Controls (buttons, inputs, menu items, badges, table cells), cva strings, and containers use the role class.Base UI parts are passed with
render, and the existingdata-slotstays on the render element. Element types do not change.Summary
Textin 78 places, the role class in 153. The visual changes are listed in the changeset (text below 12px moves to 12px, section labels move to weight 500, selected items move tofont-semibold, and a few line heights move to the role).Textpasseschildrenonly when given, soField.ErrorinsideTextkeeps its validation message.tests/typography-usage.test.ts, which fails on a raw size or an unknown role name.Computed text styles match
mainon all 33 example routes and in 184 opened popups, except for the listed changes.Screenshots
Left:
main. Right: this PR.🤖 Generated with Claude Code