Skip to content

fix(docsite): improve docs article body readability#3085

Merged
ernestt merged 2 commits into
mainfrom
docsite-article-theme-update
Jun 25, 2026
Merged

fix(docsite): improve docs article body readability#3085
ernestt merged 2 commits into
mainfrom
docsite-article-theme-update

Conversation

@ernestt

@ernestt ernestt commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

Summary

Addresses reader feedback on docs article readability (Workplace comment):

Small nit: The text in the docs would be more readable with 1.7 line-height (matching the subtitle) instead of 1.5. 1.5 is a bit low for body text. (would be good to get <p>s for the paragraphs instead of <span>s too!)

  • Larger, airier body text: bump article body to 16px with a 1.75 line-height. The leading follows the type scale's convention (a unitless ratio = a 4px-grid-snapped line box ÷ font size, per expandTypeScale's computeLeading) — the grid-aligned value closest to the requested ~1.7 is 28px ÷ 16px = 1.75.
  • Semantic paragraphs: ProseBlock now renders <p> (as="p" + display="block") instead of the default <span>; the <p> UA margin is zeroed so it doesn't double up with the existing VStack gap.
  • Isolated to the article area: the size/leading changes are applied by re-assigning the body size/leading tokens on the DocPageLayout Section container, so they cascade only to body-typed text inside an article. The title (display-1), section headings (display-3), subtitle (large), and all site chrome (sidebar/top-nav) are unaffected.

Files changed

  • apps/docsite/src/components/docs/DocPageLayout.tsx — scoped body --text-body-size (16px) + --text-body-leading (1.75) overrides.
  • apps/docsite/src/components/docs/ProseBlock.tsx — render paragraphs as <p>, zero block margin.

Test plan

  • Visit /docs/getting-started (and other guide topics) — body paragraphs are 16px with noticeably more line spacing.
  • Inspect a paragraph — it renders as <p>, not <span>, with no extra vertical gap.
  • Confirm article title, section headings, and subtitle sizes are unchanged.
  • Confirm sidebar / top nav / rest of site text is unchanged.

Made with Cursor

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Jun 24, 2026
@vercel

vercel Bot commented Jun 24, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
astryx Ignored Ignored Jun 25, 2026 12:22am

Request Review

Bump article body text to 16px with a 1.75 line-height (type-scale
consistent: a 4px-grid-snapped 28px line box) and render paragraphs as
<p> instead of <span>. Scoped to the article container via the body
size/leading tokens, so headings, subtitle, and site chrome are
unaffected.

Addresses reader feedback:
https://fb.workplace.com/groups/xdsfyi/posts/2426457761173540/?comment_id=2427223827763600&reply_comment_id=2427226201096696

Co-authored-by: Cursor <cursoragent@cursor.com>
@ernestt ernestt force-pushed the docsite-article-theme-update branch from 47f3193 to 1ddcfd4 Compare June 24, 2026 22:14
@github-actions

github-actions Bot commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

🚀 Vercel Preview Deployment

Status ✅ Deployed
Preview Open Preview
Commit 3b7137f
Inspect Vercel Dashboard
Workflow View Logs

No authentication required — anyone with the link can view the preview.

…kdown)

Merge origin/main into docsite-article-theme-update. The conflict in
ProseBlock.tsx is resolved by keeping our as="p" + display="block" +
marginBlock:0 changes while adopting main's renamed renderInlineMarkdown
import.

Co-authored-by: Navi <navi@navibot.dev>
@github-actions

Copy link
Copy Markdown
Contributor

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

No new or modified components detected.

Bundle Size Summary

Package Size (ESM) Size (CJS) Gzipped
@astryxdesign/core N/A 4.6KB 0B

Accessibility Audit

Status: No accessibility violations detected.


Generated by PR Enrichment workflow | Storybook | Sandbox | View full report

github-actions Bot added a commit that referenced this pull request Jun 25, 2026
@ernestt ernestt merged commit f94dd07 into main Jun 25, 2026
17 checks passed
ernestt added a commit that referenced this pull request Jun 26, 2026
…ponent pages (#3179)

Follow-up to #3085, which bumped docs article body text to 16px / 1.75
line-height (and semantic <p>) via DocPageLayout. A few article-style
pages have their own Section wrapper and so missed the update.

Re-assign the body size/leading tokens (--text-body-size / --text-body-leading)
on each page's container, exactly as #3085 did for DocPageLayout. The
Markdown root and body-typed Text read these tokens, so the larger/airier
body cascades to article prose only; titles (display-1) and subtitles
(large) use different tokens and are unaffected.

- ChangelogView (What's New): override on the Section — release notes
  render via Markdown, which already emits semantic <p>.
- BlogArticle: override on the Section — post body renders via Markdown.
- ComponentDetailClient: override scoped to the Overview prose only (not
  the page Section), so the dense Properties props table keeps its compact
  body size. Live previews are isolated inside ComponentPreviewTheme, so
  the override never leaks into them.

Co-authored-by: Cursor <cursoragent@cursor.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Meta Open Source bot.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants