Uh oh!
There was an error while loading. Please reload this page.
feat(landing): shared DS-aligned library landing template + brand/type DS work - #1040
Merged
Abeuty merged 1 commit intoJul 11, 2026
Merged
Conversation
…e DS work Replace the copy-pasted per-library landing pages with a single config-driven LibraryLanding component, and convert Query (rich) and Ranger (lean) as the first POC pages. Landing: - Shared LibraryLanding template (hero, why-grid, split sections, testimonials, ecosystem, CTA) driven by a per-library config + demo-panel slots - De-noise: one exclamation-free CTA, drop superlative taglines, small TanStack mark stacked over a large product wordmark - Repackage typography onto DS text-ds-* roles (drop font-black) - ~30% more section padding, gutters, and column gap Design system: - Eyebrow component: mono-caps role, brand-by-category via --color-lib-* tokens, with a /ds/eyebrow style book - Logos brand page (/ds/logos) with per-variant SVG downloads; Brand entry merged into a "Brand & Styles" nav section - Button: add polymorphic `as` prop so it can render as a Link/anchor - Lighten body type tokens (body xl/lg/md -> weight 300) + style-book labels - Navbar library wordmark -> DS heading-4 in the display font Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Deploying with |
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs | tanstack-com | 0388bfd | Commit Preview URL Branch Preview URL | Jul 11 2026, 10:07 PM |
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Uh oh!
There was an error while loading. Please reload this page.
Abeuty added a commit
that referenced
this pull request
Jul 14, 2026
tannerlinsley pushed a commit
that referenced
this pull request
Jul 28, 2026
…e DS work (#1040) Replace the copy-pasted per-library landing pages with a single config-driven LibraryLanding component, and convert Query (rich) and Ranger (lean) as the first POC pages. Landing: - Shared LibraryLanding template (hero, why-grid, split sections, testimonials, ecosystem, CTA) driven by a per-library config + demo-panel slots - De-noise: one exclamation-free CTA, drop superlative taglines, small TanStack mark stacked over a large product wordmark - Repackage typography onto DS text-ds-* roles (drop font-black) - ~30% more section padding, gutters, and column gap Design system: - Eyebrow component: mono-caps role, brand-by-category via --color-lib-* tokens, with a /ds/eyebrow style book - Logos brand page (/ds/logos) with per-variant SVG downloads; Brand entry merged into a "Brand & Styles" nav section - Button: add polymorphic `as` prop so it can render as a Link/anchor - Lighten body type tokens (body xl/lg/md -> weight 300) + style-book labels - Navbar library wordmark -> DS heading-4 in the display font Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
tannerlinsley pushed a commit
that referenced
this pull request
Jul 28, 2026
tannerlinsley added a commit
that referenced
this pull request
Jul 29, 2026
* feat(ds): design system, rebrand styles, and lucide→Phosphor icon migration Build out the /ds design system as the source of truth for the site and apply its tokens, type, and icons across the app. Design system (/ds): - Rendered style book with tree nav: Styles (Colors, Typography, Iconography, Icon Migration, Shadows, Effects), Figma Tokens (Palette, Semantic Tokens), and Components (Buttons, Badges, Inputs, Dropdown, Avatar, Spinner, Collapsible, Breadcrumbs, Cards). - Figma token layer in app.css (@theme static): primitives (--color-ds-*), library (--color-lib-*), and semantic tokens (text/background/border/icon/ action/status/accent) with html.dark overrides. - New-system component kit (src/components/ds/ui) on the semantic tokens. Site-wide rebrand application: - Global type: h1..h6 → Bricolage Grotesque, mono → IBM Plex Mono, fonts loaded globally from __root.tsx. Editing --font-ds-* propagates everywhere. - Navbar swapped to the new rebrand landscape logo (light/dark variants) with centered nav; mega menu centered. - Palm-tree pixel-art spinner (PalmSpinner) that sways at the trunk base. Icon migration (lucide-react → @phosphor-icons/react), 155 files: - 218 distinct icons (85 kept name, 133 renamed) at regular weight. - Props translated: dropped strokeWidth/absoluteStrokeWidth, fill→weight="fill", LucideIcon type → Phosphor Icon type; aliases and same-target collisions handled. - /ds/icon-migration review page renders old→new glyphs side by side so maintainers can flag any swap that doesn't fit its context. lucide-react is kept installed (the review page renders the "before" glyphs); it can be removed once that page is retired. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * Add rebrand announcement post * Restructure "Why TanStack?" section to match rebrand design - Centered header (PRINCIPLES eyebrow + display title + subtitle) over a single bordered container with 4 full-width stacked principle cards - Adopt DS rebrand tokens: Bricolage Grotesque display, IBM Plex Mono, ds color/type semantic tokens (theme-aware, works light + dark) - Per-card eyebrow accents (terracotta/green/blue/purple) matching Figma - Keep the proof visualizations; float them (no surface box) and scale them up to fill the media slot's footprint - Drop the now-unused per-card icons and iconClassName field Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(ds): propagate palette, extract MegaMenuItem, expand /ds pages Design-system follow-ups on top of the rebrand: - Palette: bridge legacy gray/twine to the warm DS neutral ramp in app.css so the whole site adopts the new palette; migrate the shared primitives (Button, Badge, FormInput, Tooltip) to semantic tokens. - Typography: add semantic .h1-.h6 classes; move Font families to the top of /ds/typography and make the family cards minimal. - MegaMenuItem: extract the mega-menu row into a reusable component matched to the Figma "Mega Menu Item" (bordered 44px icon, Bricolage-bold title, #aba594 description, adaptive hover/press); wire it into the Navbar with 8px spacing between items. - /ds/navbar: new Navbar DS page - anatomy preview with a device-size toggle (Auto/Mobile/iPad/Desktop) driven by container queries, plus a MegaMenuItem showcase. Add a "Design System" nav item under Support. - Home: remove the "Browse the stack" section; restructure "Why TanStack" into four centered principle sections. Refine navbar spacing. - Icons: finish the lucide->Phosphor migration (CheckCircleIcon->CheckCircle, CogsIcon->Gear); remove the orphaned custom icons. - Spinner: remove the Palm spinner demo from /ds/spinner. - Add @figma/code-connect dev dependency. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(ds): widen /ds page content to 1280px Bump the shared DsPage wrapper from max-w-5xl (1024px) to max-w-7xl (1280px) so all design-system pages use more horizontal space on wide screens (e.g. the icon-migration grid no longer truncates names). Header stays left-aligned. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(libraries): rebrand libraries browse as an app-launcher overlay Migrate the libraries page to the rebrand design and turn it into a temporary, navigational overlay opened over the current page instead of its own route. - New LibraryGridCard: dark rebrand cards, per-category Phosphor icon tint (icon brightens one DS shade on hover), squircle corners, instant (transition-less) hover, mono copy from each library's real description. - LibrariesOverlay (Radix Dialog) + LibrariesOverlayContext: glass modal opened from the nav "Libraries" trigger, the "All Libraries" mega-menu item (now desktop too), and the home/404/breadcrumb CTAs. Backdrop click, Escape, and the close button dismiss it; it auto-closes on navigation. - Framework pills filter the grid in place; selecting one shows the framework header/description inline. - Staggered grid reveal animation. - Remove the /libraries route and the /libraries/$framework sub-route (and now-unused LibraryCard); drop /libraries from the sitemap. Move browse utils to ~/libraries/browse-utils. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * style(libraries): overlay glass, motion, and dropdown filter polish - Match overlay tint to the mega-menu glass, as a reverse vignette (dark centre → ~60% rim) over the mega-menu blur. - 150ms glass fade-in, then a row-staggered card reveal. - Replace the wrapping framework pills with a DS Dropdown beside the title (default "All frameworks"; each framework as a menu item with a monochrome icon + count). Guard the dialog so selecting an item filters instead of dismissing the overlay. - Move the close button to the fixed top-right corner (24px inset, 40px light-weight icon); soften card borders; monochrome framework icons. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * chore: add design-motion-principles skill Installed via `npx skills add kylezantos/design-motion-principles`. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * chore(brand): swap remaining old logos to rebrand assets; add emblem-only SVGs Continue the rebrand rollout by replacing the leftover old TanStack logos with the new brand assets, and remove the unreferenced 193MB hero video. - Extract emblem-only SVGs from the stacked logo's island path into public/images/brand/tanstack-emblem-{black,white,charcoal,cream}.svg (the rebrand set only shipped stacked/landscape, both with the wordmark). - SearchModal AI-message avatar → emblem (theme-swapped black/white). - Game coin texture → emblem-black. - BrandContextMenu download menu → Landscape / Stacked / Emblem (black + white). - brand-guide asset sections → Landscape / Stacked / Emblem in brand colors. - login + oauth/authorize splash → emblem (theme-swapped). - Remove unreferenced public/videos/hero.mp4 (193MB, never committed). - launch.json: autoPort so the dev server falls back off a busy port 3000. Left intentionally (separate follow-ups): homepage hero (redesign scope), ShopHero3D 3D textures, and favicons/OG images (need PNG rasterization + a mono-vs-color decision). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * style(libraries): apply design-critique polish to the browse overlay - Brighten resting card name (70% -> 90%) so it reads as the headline without hover; use the short tagline (2-line clamp) instead of the full description; persistent "Docs ->" affordance + keyboard focus ring. - Group cards under tinted category headers (Framework / Data & State / UI & UX / Performance / Tooling); stagger the reveal per section. - Framework filter moves to a dropdown beside the title (stacks below on mobile); 20% translucent card fill across all breakpoints. - Responsive: wider side margins on tablet-down, 16px card gutter, and a mobile "unified list" — each category a bordered, rounded squircle box with dividers between rows (standalone cards restored at sm+). - Tighten the icon-to-name gap to 4px. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * ci: apply automated fixes * chore(launch): autoPort for the web dev server Lets the preview harness pick a free port (Vite honors PORT) instead of colliding on 3000 with other worktrees/sessions. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * style(libraries): formatting normalization in the browse overlay Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * style(brand-guide): wrap long asset description strings Formatting-only reflow of two description lines (matches CI fix bb0fe1e). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(landing): shared DS-aligned library landing template + brand/type DS work (#1040) Replace the copy-pasted per-library landing pages with a single config-driven LibraryLanding component, and convert Query (rich) and Ranger (lean) as the first POC pages. Landing: - Shared LibraryLanding template (hero, why-grid, split sections, testimonials, ecosystem, CTA) driven by a per-library config + demo-panel slots - De-noise: one exclamation-free CTA, drop superlative taglines, small TanStack mark stacked over a large product wordmark - Repackage typography onto DS text-ds-* roles (drop font-black) - ~30% more section padding, gutters, and column gap Design system: - Eyebrow component: mono-caps role, brand-by-category via --color-lib-* tokens, with a /ds/eyebrow style book - Logos brand page (/ds/logos) with per-variant SVG downloads; Brand entry merged into a "Brand & Styles" nav section - Button: add polymorphic `as` prop so it can render as a Link/anchor - Lighten body type tokens (body xl/lg/md -> weight 300) + style-book labels - Navbar library wordmark -> DS heading-4 in the display font Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> * feat(landing): shared DS-aligned library landing template + brand/type DS work Replace the copy-pasted per-library landing pages with a single config-driven LibraryLanding component, and convert Query (rich) and Ranger (lean) as the first POC pages. Landing: - Shared LibraryLanding template (hero, why-grid, split sections, testimonials, ecosystem, CTA) driven by a per-library config + demo-panel slots - De-noise: one exclamation-free CTA, drop superlative taglines, small TanStack mark stacked over a large product wordmark - Repackage typography onto DS text-ds-* roles (drop font-black) - ~30% more section padding, gutters, and column gap Design system: - Eyebrow component: mono-caps role, brand-by-category via --color-lib-* tokens, with a /ds/eyebrow style book - Logos brand page (/ds/logos) with per-variant SVG downloads; Brand entry merged into a "Brand & Styles" nav section - Button: add polymorphic `as` prop so it can render as a Link/anchor - Lighten body type tokens (body xl/lg/md -> weight 300) + style-book labels - Navbar library wordmark -> DS heading-4 in the display font Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * Fix libraries browse test import * Tighten rebrand announcement * Apply rebrand to library landing pages * Make library landings bespoke * Restore the AI hero graph * Restore light and dark landing themes * Align landing typography and category colors * Mobile-optimize libraries nav + overlay; on-system category eyebrows - Mobile navbar: "Libraries" opens the browse overlay directly instead of expanding a tall inline list, keeping the drawer scannable. - Overlay: compact single-line library rows on mobile (icon + name + caret), full cards preserved at sm+; tighter mobile section spacing. - Use the DS <Eyebrow> component for category labels; add a first-class "category" prop (--color-category-* tokens) mirroring "library". - Fix stale test import (src/routes/-libraries-utils -> src/libraries/browse-utils). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * Session work: DS stats section, homepage promotion, partners bands, mega-menu polish Bundles this session's work prior to inheriting taren/library-landings-rebrand: - DS StatsSection component + /ds/stats workshop; homepage & library stats now render through it (OpenSourceStats, LibraryDownloadsMicro). - Partners section rebuilt as full-bleed category bands + OSS Sponsors fold-in. - Homepage promoted to DS components (Eyebrow, Button, Card); neutral Button default. - Mega-menu: category-colored icon hover, --color-category-* tokens, hover-bridge fix. - MegaMenuItem borderless top-aligned icon; brand-guide route removed (migrated to /ds/logos). - npm stats 429 cooldown/backoff fix. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * chore: apply formatter (oxfmt) to session work Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(theme): unify library theming on a single-source category palette Establishes --color-category-* (app.css) as the single source of truth for per-category color, flowing coherently to the mega-menu, docs pages, and library landings: - Add mode-stable role tokens (--color-category-<cat>-{accent,bright,deep,tint, ink,glow}); the landing theme map now references these instead of raw --color-ds-* so one edit propagates everywhere. - Align the palette to Tanner's landings: performance purple→amber, tooling amber→neutral (mode-aware, contrast-tuned per mode). - Remove hardcoded bypasses: tooling docs blue accent (categories.ts), the four black/white bgRadial overrides (ranger/config/devtools/mcp), devtools.tsx and query.tsx per-library hue overrides — all now derive from the category. Verified: mega-menu label == landing accent == docs gradient per category; devtools/tooling reads neutral; performance reads amber. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(theme): derive every per-library config color from its category Removes the last hardcoded hue overrides in src/libraries/*.tsx so each library inherits its category color through the ...<lib> spread and the category text token — no more per-library literals that diverge from the mega-menu / docs / landing theme: - Drop the top-level bgRadial + textColor overrides (ai/db/store/hotkeys/ form/table/pacer/virtual/router/start): they now come from categoryStyles.<cat> via the base library object. - Point each file's `textStyles` const (feature-highlight icons + emphasis) at text-category-<cat> instead of raw Tailwind hues. - Replace inline icon literals (config/ranger text-black, form text-yellow, virtual text-purple) with the category token. Verified live (dark + light): --color-category-* resolve framework=green, data=terracotta, ui=blue, performance=amber, tooling=neutral; the text-category-* utilities resolve to those tokens in both modes; the Virtual landing reads amber end-to-end. tsc + pnpm test green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * style(navbar): set mega-menu panel padding to 40/36/32px The shared nav-dropdown panel (Libraries, Blog, Community, Tools, Support) used a uniform p-4. Set top 40 (pt-10), sides 36 (px-9), bottom 32 (pb-8) per spec. Verified: computed 40/36/32. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(ds,navbar): true up tokens to Figma + refine Support mega menu Tokens (adopt Figma "Tanstack.com" values into the DS primitives — site-wide): - terracotta 100/200/300 → #f9d8c4 / #edaa8d / #e06e49; neutral 100/200/300 → #eeebd4 / #aea691 / #756c5b (all literals + dark-mode mappings updated). - New primitive --color-ds-neutral-tint-200 (#c5c3bf) + semantic --color-text-menu-title (light: neutral-400; dark: tint-200) for menu titles. MegaMenuItem (Figma node 407:659, rest/hover/pressed): - Row pl-12 pr-16 py-12, gap-10, items-center, rounded-12 (14 on hover). - Icon in a 44px box (rounded-6, 6px pad) around a 32px glyph. - Title rest = text-menu-title (#c5c3bf) → text-primary on hover/pressed. Support menu: - Mono section eyebrows (mono-sm) instead of sans black. - Glyph swaps: Support Overview=Lifebuoy, Enterprise=Briefcase, Contact=Mailbox, Tenets=Infinity. - PARTNERS rail redesigned to Figma: inset-shadow well panel, terracotta eyebrow, "Work with" + landscape lockup, bordered "Get in touch" button. Verified live (light + dark): computed row 12/16/12/12, gap 10, icon box 44/icon 32, title #c5c3bf; tokens resolve to the Figma values. tsc + tests green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(home): replace hero with Figma palm/gradient design (802:2027) Full-bleed photographic hero card: bottom-left headline ("open source" underlined) + bottom-right description and a "Browse the Stack" CTA. - DS tokens throughout: text-ds-display-xl headline (stepping down the display scale responsively), text-ds-body-xl copy, mode-stable text-ds-neutral-500 (the photo is always light), DS Button for the CTA. - Plain <img> for the new asset (the OptimizedImage Cloudflare transform resolves against prod, which 404s until the image is deployed); source pre-sized to 2400px/q80 (~485KB). - Mobile: nudged crop + soft scrim for legibility over the palm; both removed at xl where the copy splits around the centered palm (matches Figma). - Removed the now-unused HomeSplashLogo, OpenSourceGradientText, and the ClientOnly/BrandContextMenu imports. Verified live (desktop + mobile): renders correctly, no console errors, tsc + tests green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(home): make the hero fill the full screen Hero card goes full-bleed (drop the max-w-[1021px]/px wrapper + rounded corners) and full-height (min-h calc(100dvh - navbar-height)), so the palm/gradient photo fills the viewport below the navbar with the copy anchored at the bottom. Verified: card height == viewport - navbar, full width, legible on desktop + mobile. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(home): constrain hero to 640px, DS button CTAs, overlay + prompt - Cap hero height at 640px (min-h-[640px], xl:h-[640px]) instead of full screen. - Replace the custom pills with DS components (size md): primary Button for 'Browse the Stack' (opens the libraries overlay via useLibrariesOverlay), and a link Button 'Start with a prompt' (color pinned to a mode-stable dark token for the always-light photo) that scrolls to the app starter (#start-with-a-prompt). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(navbar): lighter mega-menu icons + solid badge - Thin the Phosphor icon strokes via IconContext weight='light' (custom SVG icons ignore it). - Badge (New/Alpha/Beta) becomes a solid status-success fill with inverse text instead of an outline. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * docs(ds): add leading/trailing icon + split-button examples to Buttons - 'Leading & trailing icons' section: icons before and after the label across variants/colors. - 'Split button' section: a primary action + Dropdown selector combo, showing the dropdown menu. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(home): mobile hero layout (headline top, copy bottom), 720px, no scrim - Match the mobile design (Frame 262): headline anchored top, description + CTAs anchored bottom (justify-between below xl); desktop split unchanged. - Remove the legibility scrim — the top/bottom split clears the centered palm, so the image shows at native opacity. - Default hero height 720px (min-h-[720px] / xl:h-[720px]). - Description steps down to text-ds-body-md on mobile (xl:text-ds-body-xl). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(ds): add gradient Button variant (library-landing CTA) Promote the library-landing primary CTA into a managed Button variant: - variant='gradient' paints an accent→bright gradient with an inner highlight, a colored glow, ink text, and a hover lift, via --btn-grad-* vars. - gradientColorStyles maps each color to the category role tokens (accent/bright/ tint/ink/glow in app.css); purple falls back to the ds-purple ramp. - Add a 'xl' rounded option; gradient defaults to size lg + rounded xl. - Showcase 'Gradient (landing CTA)' section on /ds/buttons. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * fix(navbar): clip horizontal overflow so the mobile menu fits the viewport The homepage adapter graph (w-320px scale-1.35 => 432px) pushed the page's scroll width past the viewport, so the fixed mobile menu sized to the overflow and its panels + Log In button were clipped off the right edge. Add overflow-x-clip to the site-content wrapper so nothing widens the page. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(home): bold hero headline, 40px desktop margin, prompt CTA scroll+focus - Headline is bold at every breakpoint (font-bold — the display-sm/md tokens are weight 500). - Desktop hero inset 40px on the sides (xl:px-10) with rounded-2xl corners. - 'Start with a prompt' link button gains a right arrow and, on click, smooth- scrolls to the app starter and focuses/selects its prompt field (polling for the lazily-hydrated textarea). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * style(home): inset hero image 8px with rounded corners Give the hero photo 8px padding on all sides (absolute inset-2 + rounded-xl) so it reads as a framed image within the card. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(navbar): swap nav-trigger underline hover for subtle bg fill Remove the .ts-mega-trigger::after underline; nav triggers now use the same subtle hover fill as the mega-menu items (hover:bg-text-primary/[0.04]). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(navbar): widen mega-menu items to 330px, no wrapping subtext Descriptions previously wrapped in the 260px items (15/18 overflowed), which broke the visual balance. Widen the item + section-grid columns to 330px and force single-line subtext (whitespace-nowrap on desktop title + description). Shortened the descriptions that still overflowed 330px so nothing wraps: - Workshops: "Remote and in-person sessions from maintainers." → "Live sessions from the maintainers." - Discord: "Community support and real-time discussion." → "Real-time community support." - Showcase: "Products and teams building with TanStack." → "Teams building with TanStack." - Ethos: "How we think about open source and products." → "How we approach open source." - Design System: "Logos, tokens, and components for TanStack surfaces." → "Logos, tokens, and UI components." Verified live: 0/18 descriptions overflow at 330px (248px text column). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * style(home): hero image squircle corners, fix inset clipping The card's overflow-hidden + rounded-2xl clipped the inset image's corners. Drop them; the image now carries the shape: 8px inset (inset-2), rounded-[2rem] with corner-shape:squircle. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(navbar): library menu item hover/pressed states + spacing - Add the subtle overlay states used by the other mega menus to the Libraries rows: hover white/4%, pressed white/12% (mode-adaptive via text-primary). Replaces the dead `surface-state-hover` class, which was never a defined token, so rows previously had no hover background at all. - Space library rows 4px apart (gap-1) for a less cramped column. - Center the "Browse all libraries" button in the menu footer. Verified live: rows gap 4px, hover/pressed classes applied, button centered. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(home): rotating prompt placeholder + Shift+Enter (drop preset chips) Replace the starter preset chips with a placeholder that rotates through the suggestions in the empty prompt field. Shift+Enter accepts the shown suggestion (or submits typed text) and reveals the builder options. submitCurrentInput now takes an optional override so the placeholder can be submitted without a state race. Applies to the home (full) layout; the compact layout keeps its chips. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * style(home): remove hero desktop side margin (full-bleed) Drop xl:px-10 so the hero spans full width; the 8px squircle image frame remains on all sides. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * style(navbar): remove bottom border Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * fix(home): hero image right-edge clip + responsive height - Wrap the hero <img> in an inset-2 div so the 8px frame is symmetric; the intrinsic-sized <img> was positioned at left:8 but kept full width, pushing its right edge 8px past the card (clipped). - Height now scales with the viewport (h calc(100dvh - navbar)) capped at 720px (max-h) with a 560px floor, instead of a rigid 720px. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(home): stack-builder iteration 1 — heading + gradient Go CTA Toward the Figma StackBuilder progressive-disclosure design (809:2114): - Heading reads 'Whatcha want to build?' on the home starter. - Submit is now the TanStack brand rainbow-gradient 'Go ->' button (dark ink) instead of the emerald 'Next'. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(home): stack-builder iteration 2 — gradient Copy Prompt + Go disabled state - 'Copy Prompt' results CTA now uses the brand rainbow gradient (matching the Figma 'Copy Prompt to build this stack'). - Go button reads disabled (grayscale) until there's real input. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(home): stack-builder iteration 3 — dark minimal resting field Home starter now matches the Figma StackBuilder resting look: - Dark #0a0a0a surface with a terracotta glow; no header bar / PROMPT label / inner borders (all gated to context='home' so the builder page is unchanged). - Centered Bricolage-light heading above the field. - Prompt field starts empty so the rotating suggestion placeholder shows, with a quiet 'Press Shift + Enter' hint that yields to the gradient Go CTA on input. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(home): stack-builder iteration 4 — heading floats out, squircle box, dissolving prompts - Heading now floats above the box (Figma StackBuilder), not in a header bar. - Box: 24px full-squircle corners + the Figma terracotta glow (0/21/39.2/-28). - Rotating placeholder uses the short labels (Blank starter, Build a blog, …) in an animated overlay that gently dissolves out, then reveals the next left-to-right (CSS keyframes; sequenced so the previous is fully gone first; respects prefers-reduced-motion). Shift+Enter still submits the full prompt. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(home): stack-builder iteration 5 — subtle bg, lateral hint/Go, larger text - Box background is the subtle surface (#171717) instead of #0a0a0a. - 'Press Shift + Enter' hint sits lateral to the prompt text (top-right); once the user types, the gradient 'Go ->' CTA replaces it in that spot. - Bump the prompt text to 16px and the hint to 14px (one level up). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * wip: in-progress ds-rebrand-phosphor-icons work * Make every library landing page bespoke (#1058) * Apply rebrand to library landing pages * Make library landings bespoke * Restore the AI hero graph * Restore light and dark landing themes * Align landing typography and category colors * Fix nested homepage hydration * Fix libraries overlay contrast * Integrate latest libraries with rebrand * Redesign OSS sponsors and restore rebrand navbar * Refine OSS sponsor layout * feat(rebrand): refine landing pages and stack builder * chore: ignore local pnpm store * Prepare rebrand for main --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com> Co-authored-by: Tanner Linsley <tannerlinsley@gmail.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
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 freeto 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.
Targets
ds-rebrand-phosphor-icons(notmain) — this is the DS/rebrand work meant to land on that branch before it merges up.Merge is conflict-free against the current
ds-rebrand-phosphor-iconstip (verified withgit merge-tree).Landing
LibraryLandingtemplate replacing the copy-pasted per-library pages; Query (rich) and Ranger (lean) converted as the first POC pagestext-ds-*roles (no morefont-black)Design system
mono-capsrole, brand-by-category via--color-lib-*tokens — with a/ds/eyebrowstyle book (incl. an interactive brand selector)/ds/logos) with per-variant SVG downloads; new Brand entry merged into a Brand & Styles nav sectionasprop so it can render as aLink/anchor (unblocks a future site-wide button migration; no live buttons changed)body xl/lg/md→ weight 300) + updated style-book labelsheading-4in the display font (all libraries)Verification
pnpm testgreen — tsc clean, oxlint 0/0, unit tests 23 passed / 1 skipped / 0 failed. POC pages verified in the browser preview.🤖 Generated with Claude Code