refactor(website): substrate migration batch 3 — docs components off inline styles - #850
Merged
Conversation
…(pure cut-paste) Relocates every .docs-prose rule, the code-figure rules ([data-rehype-pretty-code-*], .shiki), .docs-diagram/heading-anchor rules, the .ag-ui-arch-grid block, and the --docs-* local-constants block from global.css into docs.css. Zero edits — verified byte-identical via git diff HEAD~1 (pure relocation, no content change). Part of the inline-style substrate migration (Batch 3).
Migrates Callout, Steps, Card, Tabs, CodeBlock, CodeGroup, and FeatureChips (components/docs/mdx) off inline style props onto data-mdx/.mdx-* classes in docs.css. Callout's tone map becomes data-tone rules on its existing attribute; Tabs/CodeGroup active-tab state and CodeBlock's copied state become data-active/data-copied modifiers; the 5 presentation-only hover handlers across Card, Tabs, CodeGroup, and FeatureChips become :hover rules. headings.tsx has no style sites (skipped); MdxRenderer's --tw-prose-* custom-property object is the documented escape hatch and stays inline. Part of the inline-style substrate migration (Batch 3).
Migrates DocsSidebar, DocsSearch, DocsTOC, DocsBreadcrumb, DocsPageHeader,
PageActions, and LibraryMark off inline style props onto .docs-* classes
and data-* modifiers in docs.css.
- DocsSidebar's embedded <style> tag (the [data-docs-navlink] rules) is
hoisted verbatim into docs.css, replacing each ${tokens.X.Y} interpolation
with its CSS var.
- DocsSearch's keyboard-selected row and DocsTOC's active link become
data-selected/data-active modifiers.
- DocsBreadcrumb's crumb/sep style variables (shape D) become
.docs-crumb-link/.docs-crumb-sep classes, migrated verbatim including
the existing inconsistent li/separator typography — not fixed here.
- LibraryMark's size prop is an unbounded number, so width/height stay
dynamic via a --size/--inner-size custom-property escape hatch while
the rest of its presentation (radius, kind-based background/border)
moves to a data-kind-modified class.
Part of the inline-style substrate migration (Batch 3).
Migrates ApiDocRenderer, ApiRefTable, ArchFlowDiagram, AgUiArchDiagram, CopyPromptButton, CopyButton, and DocsPrevNext off inline style props onto .api-doc-*/.api-ref-*/.arch-flow-*/.ag-ui-arch-*/.docs-* classes and data-* modifiers in docs.css. - ArchFlowDiagram's embedded <style> tag (plain @Keyframes, no token interpolations) is hoisted verbatim; its per-log-source colors (SOURCE_COLORS bg/text) become data-source rules, keeping only the label text in JS. - AgUiArchDiagram's Box tone and ArrowLabel's base layout are migrated; the arrow's base declarations are reunited with the pre-existing .ag-ui-arch-arrow mobile-rotate rule already in docs.css. - CopyPromptButton's hero/docs variant and copied state become data-variant/data-copied modifiers; its hover handler (docs variant only) becomes a :hover rule — the last of the 5 documented hover pairs. - CopyButton's copied state becomes a data-copied modifier. Part of the inline-style substrate migration (Batch 3).
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
blove
enabled auto-merge (squash)
August 29, 2026 21:13
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Contributor
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.
What
Batch 3 of the substrate migration (plan, Task 3) — the largest batch, and the one that unblocks the docs polish project: 22
components/docsfiles move tosrc/styles/docs.css, and every existing docs rule leavesglobal.cssin a pure cut-paste commit, so docs styling now has exactly one home.<style>tags hoisted (DocsSidebar's[data-docs-navlink]rules with${tokens.*}→var(--*);ArchFlowDiagram's keyframes verbatim).:hoverrules.data-*modifiers: search resultdata-selected, TOCdata-active, tabsdata-active, copy buttonsdata-copied, callout rules on the existingdata-tone.Verified: 1238/1238 elements identical to production
The densest docs page (
/docs/chat/components/chat) was hashed element-by-element against the live site at a pinned 1280×900 — sidebar, breadcrumb, article (all prose/tables/code figures), TOC, and prev/next: 1238 elements × 26 computed properties, zero mismatches.Plus: vitest at the pre-existing baseline (
5 failed | 341 passed), 0 lint errors, prod build green.Migrated verbatim, NOT fixed — on purpose
The known docs defects ride through unchanged so the migration diff stays reviewable: the breadcrumb's inconsistent separator typography,
paddingTop: 80, the docs shell'soverflow-x-hidden, Steps' dangling connector, and the tablemin-widthgap. They are called out in code comments and belong to the polish arc (findings).What stayed inline:
MdxRenderer's--tw-prose-*object (the documented escape hatch),LibraryMark's unbounded numeric size (now a--sizecustom property),CardGroup'scols-dependent grid template, and the rehype-supplied<pre>style passthrough.🤖 Generated with Claude Code