feat(tokens): add editorial typography family#1940
Conversation
Adds a Sora-based editorial typography token family for brand-themed
surfaces (empty states, hero moments, announcements) that need the
marketing-site type system rather than the utility scale.
- New `fontFamily.sora` with Inter fallback
- New `fontSize.editorial.{14..80}` rungs (pixel-named to match size
primitives; avoids style-dictionary CSS font-shorthand emitter
mis-tokenizing 4-digit rung names)
- New `fontWeight.editorial.{medium,semibold,bold}` namespace
- New unitless `lineHeight.editorial.{tight,snug,close,default,relaxed}`
- New top-level `letterSpacing` group with `editorial.*` sub-namespace
(consumers apply alongside the typography shorthand since CSS font
shorthand does not include letter-spacing)
- 7 new `text.editorial.*` compositions: display, h1, h1-alt, h2, h2-alt,
h2-medium, h3 — Sora-only; Söhne mixins deferred pending licensing
- Adds `size.30` and `size.50` primitives required by the new scale
Source of truth: `_typography.scss` and `Text/index.tsx` DEFAULT_WEIGHT
map in launchdarkly-nextjs/ai-refresh.
Phase 2 (gonfalon Sora global preload + fairytale rollout) lands in a
separate PR — see Editorial Typography Tokens proposal.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
commit: |
nhironaka
left a comment
nhironaka
left a comment
There was a problem hiding this comment.
do we need to update storybook to demonstrate the new font?
Replaces the single Typography story with two stories so each section renders with its own heading and description above its own canvas. Custom docs page (Title + Description + Stories with includePrimary and no section title) skips the default Primary canvas and removes the "Stories" separator heading. Editorial label rendering: getDisplayText now handles editorial keys by expanding h1/h2/h3 to "Heading 1/2/3" with alt and medium kept as variant suffixes. Component description mentions the two type sets and links to the Utility & Editorial Type System proposal. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 1316c55. Configure here.
|
|
||
| if (weight) { | ||
| return `${category.charAt(0).toUpperCase() + category.slice(1)} ${size} - ${weight.charAt(0).toUpperCase() + weight.slice(1)}`; | ||
| return `${capitalize(category)} ${size} - ${capitalize(weight)}`; |
There was a problem hiding this comment.
Editorial tokens use div elements
Low Severity
The typography story adds editorial-h1, editorial-h2, and editorial-h3 tokens, but getSemanticElement still keys off the first segment only. Those keys resolve to the editorial category, which falls through to a generic div, so samples and the copy-to-clipboard snippet use div instead of the matching heading tags.
Reviewed by Cursor Bugbot for commit 1316c55. Configure here.
2 participants
Summary
Adds a Sora-based editorial typography token family for brand-themed surfaces (empty states, hero moments, announcements) that need the marketing-site type system rather than the utility scale.
Proposal: Editorial Typography Tokens — LaunchPad proposal (Phase 1 only; Phase 2 is a separate gonfalon PR for the Sora global preload).
What's in
fontFamily.sorawith an Inter fallback so surfaces rendering before the Sora@font-faceresolves (or in the authenticated bundle before Phase 2 ships) drop cleanly to LaunchPad's base sans-serif.fontSize.editorial.{14..80}rungs — pixel-named to match the size primitives. The original proposal used 100/200/.../1300 step rungs but style-dictionary's CSS font-shorthand emitter mis-tokenizes 4-digit rung names starting with1(it splits e.g.1300into a synthetic line-height reference + trailing digits). Pixel-value names avoid the bug and are self-documenting.fontWeight.editorial.{medium,semibold,bold}namespace — 500/600/700 mirroring the brandDEFAULT_WEIGHTmap inai-refresh/components/Text/index.tsx.lineHeight.editorial.{tight,snug,close,default,relaxed}— unitless multipliers (1, 1.05, 1.1, 1.15, 1.5) per_typography.scss.letterSpacing— brand-new top-level token group witheditorial.*sub-namespace. Consumers apply this alongside the--lp-text-editorial-*shorthand since CSS font shorthand does not include letter-spacing.text.editorial.*compositions — display, h1, h1-alt, h2, h2-alt, h2-medium, h3. Sora-only; Söhne mixins deferred pending Klim licensing.size.30andsize.50primitives added tosize.json.Source of truth
All numeric values mirror
_typography.scssand theDEFAULT_WEIGHTmap fromlaunchdarkly-nextjs/ai-refresh.Verification
pnpm buildpasses--lp-text-editorial-display: var(--lp-font-weight-editorial-bold) var(--lp-font-size-editorial-80)/var(--lp-line-height-editorial-tight) var(--lp-font-family-sora);)stories/typography.stories.tsxis data-driven viaflatten(vars.text)— editorial tokens appear automatically in Storybook with no code changeTest plan
var(--lp-text-editorial-h1)+var(--lp-letter-spacing-editorial-tight-em-05)renders at 64px Sora Bold with -0.05em trackingtext.heading.*,text.body.*,text.display.*compositions (no token references changed)Follow-ups (not in this PR)
via LD Research 🤖
Note
Low Risk
Additive token and documentation changes only; no changes to existing utility typography references or runtime application logic in this PR.
Overview
Introduces a Sora-based editorial typography family alongside existing utility tokens, aimed at brand moments (empty states, announcements, hero copy). New primitives include
fontFamily.sora(with Inter/system fallbacks), pixel-namedfontSize.editorial.*,fontWeight.editorial.*, unitlesslineHeight.editorial.*, and a new top-levelletterSpacing.editorial.*group—letter-spacing is referenced on compositions but must still be applied separately in CSS because font shorthand omits it. Seventext.editorial.*compositions (display through h3 variants) wire those primitives together;size.30andsize.50were added to support editorial sizes.Storybook
Tokens/Typographyis split into Utility and Editorial stories with framework copy and docs layout updates; editorial token labels get dedicated display-name handling. Existing utilitytext.*definitions are not modified.Reviewed by Cursor Bugbot for commit 1316c55. Bugbot is set up for automated code reviews on this repo. Configure here.