feat(ds): propagate palette, extract MegaMenuItem, expand /ds pages

[Abeuty]

Design-system follow-ups stacked on the rebrand branch (ds-rebrand-phosphor-icons). Targets that branch, not main, so the diff stays focused on this work rather than re-including the rebrand commit.

What changed

Color palette propagation

• Bridge the legacy --color-gray-* / --color-twine-* scale to the warm DS neutral ramp in app.css, so the whole site adopts the new palette with zero component edits (anchored to the DS neutral steps, lightness preserved across all 11 for contrast, works in light + dark).
• Migrate the shared primitives — Button, Badge, FormInput, Tooltip — to semantic tokens (text-text-*, bg-background-*, border-border-*), shedding their hardcoded dark: pairs.

MegaMenuItem (new component)

• Extract the mega-menu row into src/components/MegaMenuItem.tsx, matched to the Figma "Mega Menu Item" (44px bordered icon, Bricolage-bold heading-5 title, #aba594 body-xs description, mode-adaptive hover/press).
• Navbar's MenuItemLink now delegates to it (all mega menus updated), with a standard 8px gap between items.
• Fixes a twMerge bug that was silently dropping the description color.

/ds pages

• New /ds/navbar page: navbar anatomy with a device-size toggle (Auto / Mobile / iPad / Desktop) driven by container queries + scale-to-fit, plus a MegaMenuItem showcase.
• Widen all DS page content to 1280px (max-w-5xl → max-w-7xl), header stays left-aligned.
• Typography: add semantic .h1–.h6 classes; move Font families to the top and slim the cards.
• Add a "Design System" nav item under Support; remove the Palm-spinner demo from /ds/spinner.

Home + icon cleanup

• Remove the "Browse the stack" section; restructure "Why TanStack" into four centered principle sections; refine navbar spacing.
• Finish the lucide→Phosphor migration (CheckCircleIcon→CheckCircle, CogsIcon→Gear) and delete the orphaned custom icons.

Tooling

• Add @figma/code-connect dev dependency.

Notes for reviewers

• Base branch: this stacks on ds-rebrand-phosphor-icons. Merge/rebase that first, or retarget to main only after the rebrand lands.
• The palette shift is intentionally warm (the DS neutrals replace cool gray) — verify key pages in both light and dark.
• MegaMenuItem description uses text-text-secondary (exact Figma #aba594 in dark); it resolves darker in light mode — easy to switch to text-text-muted if preferred.
• Checks pass locally: tsc, oxlint (0/0), unit tests (12/12).

🤖 Generated with Claude Code

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	tanstack-com	4908ce2	Commit Preview URL Branch Preview URL	Jul 08 2026, 05:53 PM

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ddcc3c37-1fc3-48ab-a3da-c2aa818e2df4

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch ds-rebrand-followups

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[socket-security]

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert  (click "▶" to expand/collapse)
Warn		Obfuscated code: npm data-urls is 90.0% likely obfuscated Confidence: 0.90 Location: Package overview From: pnpm-lock.yaml → npm/@figma/code-connect@1.4.8 → npm/data-urls@5.0.0 ℹ Read more on: This package | This alert | What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/data-urls@5.0.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Obfuscated code: npm rrweb-cssom is 90.0% likely obfuscated Confidence: 0.90 Location: Package overview From: pnpm-lock.yaml → npm/@figma/code-connect@1.4.8 → npm/rrweb-cssom@0.7.1 ℹ Read more on: This package | This alert | What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/rrweb-cssom@0.7.1. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Obfuscated code: npm rrweb-cssom is 90.0% likely obfuscated Confidence: 0.90 Location: Package overview From: pnpm-lock.yaml → npm/@figma/code-connect@1.4.8 → npm/rrweb-cssom@0.8.0 ℹ Read more on: This package | This alert | What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/rrweb-cssom@0.8.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

[Abeuty]

Marking these as acceptable — they're false-positive "obfuscated code" flags on legitimate (minified) transitive jsdom dependencies of the @figma/code-connect dev dependency, not malicious code.

@SocketSecurity ignore npm/data-urls@5.0.0
@SocketSecurity ignore npm/rrweb-cssom@0.7.1
@SocketSecurity ignore npm/rrweb-cssom@0.8.0

🤖 Addressed by Claude Code

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​figma/​code-connect@​1.4.8

View full report