Shadcn: migrate the docs pages to Tailwind and shadcn - #747
Open
hdprajwal wants to merge 2 commits into
Open
Conversation
Rebuild the /about page family on Tailwind utilities and shadcn components. Every inline style in pages/docs and widgets/docs is gone except ColorSwatch's background, which stays dynamic because it paints whichever variable it documents. - DocsCard is now a shadcn Card. The old component had no card chrome at all, so both the navigation tiles and the prose sections gain a background and a ring. - The component example table in LinkComponents is now a shadcn Table. - DocsCardGrid had `gap: -0.5em 0`. A negative gap is invalid CSS and was dropped by the browser, so the grid had no gap; it now has a real one. - InternalLink accepts a className, so a linked DocsCard can be styled without falling back to inline styles. Additive: style still works. - The Data Coverage table breaks out of the 800px prose column from 2xl up, so it centers instead of overflowing to the right. Below that it stays in the column and scrolls horizontally. The components demoed on /code-style (Hoverable, Modal, PopupCard, Selector) are deliberately untouched; they belong to later layers.
--foreground and its card, popover, secondary, accent and sidebar variants were #04355c, a dark navy that gave all body text a blue cast. They now use #171717 (neutral-900), matching the neutral baseColor already set in components.json. Contrast against white is about 17:1. Dark mode already used #f1f1f1 and is unchanged. This is a global theme change rather than one scoped to the docs pages, so it affects every page and will move every screenshot baseline.
Contributor
Cloudflare Pages preview
|
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.
Stacked on #746.
Rebuilds the
/aboutpage family on Tailwind utilities and shadcn components. Every inline style inpages/docsandwidgets/docsis gone, exceptColorSwatch's background, which stays dynamic because it paints whichever variable it documents.Pages covered
/about,/team,/privacy-policy,/terms-of-use,/data-coverage,/data-sources,/code-style— all now render zero inline styles, no legacy.cssimports, and no raw HTML with a shadcn equivalent.Notable changes
DocsCardis now a shadcnCard. The old component had no card chrome at all — just padding and a flex column — so both the navigation tiles and the prose sections gain a background and a ring. This is the largest visual change in the PR.LinkComponentsis now a shadcnTable.DocsCardGridhadgap: -0.5em 0. A negative gap is invalid CSS and was dropped by the browser, so the grid had no gap at all. It now has a real one.InternalLinkaccepts aclassName, so a linkedDocsCardcan be styled without falling back to inline styles. Additive —stylestill works for its other callers.2xlup, so it centers rather than overflowing to the right. Below that breakpoint it stays in the column and scrolls horizontally.Second commit is separable
Shadcn: use a grayscale foreground instead of navychanges--foregroundand its card/popover/secondary/accent/sidebar variants from#04355cto#171717(neutral-900), matching theneutralbaseColor already incomponents.json. Dark mode already used#f1f1f1and is unchanged.This one is global, not scoped to the docs pages — it affects every page and will move every screenshot baseline. It is a separate commit so it can be reviewed or dropped on its own.
Deliberately out of scope
The components demoed on
/code-style—Hoverable,HoverableButton,ModalButton,PopupCard,Selector— are untouched and still render as legacy inside the examples. Same forFieldCoverageTableon/data-coverage; only the page shell around it changed. Those belong to later layers.ColorStylesstill documents the legacy--color-*bridge variables, which are scheduled for deletion. Updating that list is a content change rather than a styling one, so it is left for a follow-up.Screenshot baselines will need regenerating.