From 96be536a345433aa017b4f55907ae786be958039 Mon Sep 17 00:00:00 2001 From: Ernest Tien Date: Fri, 26 Jun 2026 11:10:55 -0700 Subject: [PATCH] fix(docsite): extend article body readability to changelog, blog, component pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Follow-up to #3085, which bumped docs article body text to 16px / 1.75 line-height (and semantic

) 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

. - 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 --- apps/docsite/src/components/ChangelogView.tsx | 13 ++++++++++++- apps/docsite/src/components/blog/BlogArticle.tsx | 8 ++++++++ .../component-detail/ComponentDetailClient.tsx | 13 ++++++++++++- 3 files changed, 32 insertions(+), 2 deletions(-) diff --git a/apps/docsite/src/components/ChangelogView.tsx b/apps/docsite/src/components/ChangelogView.tsx index e36a99ecf52fa..dec207e234c68 100644 --- a/apps/docsite/src/components/ChangelogView.tsx +++ b/apps/docsite/src/components/ChangelogView.tsx @@ -10,6 +10,7 @@ import {VStack} from '@astryxdesign/core/Layout'; import {Section} from '@astryxdesign/core/Section'; import {TabList, Tab} from '@astryxdesign/core/TabList'; import {Carousel} from '@astryxdesign/core/Carousel'; +import {typeScaleVars} from '@astryxdesign/core/theme/tokens.stylex'; import {GITHUB_REPO} from '../constants'; import {layout} from '../layout.stylex'; @@ -61,6 +62,13 @@ interface ChangelogViewProps { const styles = stylex.create({ section: { marginInline: 'auto', + // Match the docs article body treatment (16px / 1.75) from DocPageLayout. + // The release-notes body renders via Markdown, whose root reads these + // tokens; re-assigning them here scopes the larger/airier body to the + // changelog article only. The title (display-1), subtitle (large), and + // tab labels use different tokens, so they're unaffected. + [typeScaleVars['--text-body-size']]: '1rem', // 16px + [typeScaleVars['--text-body-leading']]: '1.75', // 28px line box }, }); @@ -72,7 +80,10 @@ export function ChangelogView({ const active = changelogs.find(c => c.pkg === activeTab); return ( -

+
diff --git a/apps/docsite/src/components/blog/BlogArticle.tsx b/apps/docsite/src/components/blog/BlogArticle.tsx index 39b4272441575..f82954f01f5a0 100644 --- a/apps/docsite/src/components/blog/BlogArticle.tsx +++ b/apps/docsite/src/components/blog/BlogArticle.tsx @@ -17,6 +17,7 @@ import {Badge} from '@astryxdesign/core/Badge'; import {Breadcrumbs, BreadcrumbItem} from '@astryxdesign/core/Breadcrumbs'; import {Divider} from '@astryxdesign/core/Divider'; import {ClickableCard} from '@astryxdesign/core/ClickableCard'; +import {typeScaleVars} from '@astryxdesign/core/theme/tokens.stylex'; import type {BlogPost} from '../../lib/blog/schema'; import {POST_TYPE_LABELS} from '../../lib/blog/schema'; import {AuthorByline} from './AuthorByline'; @@ -25,6 +26,13 @@ import {layout} from '../../layout.stylex'; const styles = stylex.create({ section: { marginInline: 'auto', + // Match the docs article body treatment (16px / 1.75) from DocPageLayout. + // The post body renders via Markdown, whose root reads these tokens; + // re-assigning them here scopes the larger/airier body to the blog + // article only. The title (display-1) and subtitle/description (large) + // use different tokens, so they're unaffected. + [typeScaleVars['--text-body-size']]: '1rem', // 16px + [typeScaleVars['--text-body-leading']]: '1.75', // 28px line box }, cover: { borderRadius: 'var(--radius-container)', diff --git a/apps/docsite/src/components/component-detail/ComponentDetailClient.tsx b/apps/docsite/src/components/component-detail/ComponentDetailClient.tsx index c4ba1cc7908fa..028cadb42a0fa 100644 --- a/apps/docsite/src/components/component-detail/ComponentDetailClient.tsx +++ b/apps/docsite/src/components/component-detail/ComponentDetailClient.tsx @@ -10,6 +10,7 @@ import {VStack} from '@astryxdesign/core/Layout'; import {Section} from '@astryxdesign/core/Section'; import {Card} from '@astryxdesign/core/Card'; import {Divider} from '@astryxdesign/core'; +import {typeScaleVars} from '@astryxdesign/core/theme/tokens.stylex'; import {CodeExampleBlock} from '../CodeExampleBlock'; import {TabList, Tab} from '@astryxdesign/core/TabList'; import {ShowcasePreview} from './ShowcasePreview'; @@ -33,6 +34,16 @@ const styles = stylex.create({ section: { marginInline: 'auto', }, + // Match the docs article body treatment (16px / 1.75) from DocPageLayout, + // scoped to the Overview prose only — the dense Properties props table keeps + // its compact body size. Live previews in the Overview are isolated inside + // ComponentPreviewTheme (a nested Theme that re-declares the type-scale + // tokens), so this override never leaks into them. The Usage/Examples + // descriptions (large) use different tokens and are unaffected. + overviewProse: { + [typeScaleVars['--text-body-size']]: '1rem', // 16px + [typeScaleVars['--text-body-leading']]: '1.75', // 28px line box + }, previewStage: { position: 'sticky', top: 44, @@ -66,7 +77,7 @@ function OverviewContent({ const importPath = `import {${comp.moduleName}} from '${importFrom}'`; return ( - + {hasShowcase && (