chore(design-system): upgrade to 3.41.1 + adopt primary token (#989)

* chore(design-system): upgrade to 3.41.1 + adopt primary token across docs

Bumps @arcadeai/design-system from 3.39.1 to 3.41.1 and reconciles the
docs with two breaking API/visual changes shipped in that range:

- 3.40.0 removed the Radix-style `asChild` prop on Button, PopoverTrigger,
  and DropdownMenuTrigger in favor of Base UI's `render={<Element/>}` API.
  Migrates 9 call sites across landing-page, references, faq, not-found,
  challenge-solution, glossary-term, and filters-bar.
- 3.41.1 changed `--primary` from Arcade pink to a bright lime. Replaces
  the 11 hardcoded `#ee175e` / `#ff6b8a` sites with `var(--primary)` via
  Tailwind utilities (`bg-primary/X`, `text-primary`, `border-primary/X`)
  so future primary changes propagate without a code edit.

Also adopts the design system more broadly:

- Migrates several custom `<button>` styles to `<Button variant="…">`
  where the classes were a clean match (toggle-content → outline, enhanced
  code block copy → ghost xs). Leaves bespoke ones (search trigger, dark
  terminal copy, badge X-icons, card a11y wrappers) untouched.
- Replaces the half-migrated `buttonVariants({…})`-on-`<Link>` pattern in
  toolkits-client.tsx and 3 sites in not-found.tsx with proper
  `<Button render={<Link/>}>` wrappers.
- Drops the `text-white` override on every `bg-primary` button — the
  default variant's `text-primary-foreground` already provides correct
  near-black contrast against the lime, restoring accessibility on the
  hero CTA, references CTAs, and FAQ CTA.
- Removes the hardcoded blue override on the integrations
  "Learn how to build a MCP Server" button so the default variant takes
  over (black-text-on-blue + lime hover bleed-through both fixed).
- Replaces `#9089fc` purple in the landing-page decorative gradients and
  LLM-friendly banner with `primary` at varying alpha for a monochrome
  lime treatment.

Adds two CSS-level wiring fixes in globals.css:

- A new `--color-brand-accent` token (registered via `@theme inline`)
  resolves to `var(--primary)` in dark mode and `oklch(from var(--primary)
  0.45 c h)` in light mode, giving a saturated dark green that's readable
  as text/icons/borders on light surfaces. Used in place of `text-primary`
  on 9 light-bg sites (quick-start card, footer, references links, LLM
  banner, landing-page quick links, analytics SignupLink).
- An override of Nextra's primary scale (`--x-color-primary-100…800`)
  that derives every shade from `var(--primary)` via `color-mix`, so the
  sidebar active state, TOC highlight, accent links, and focus rings
  follow the design-system primary instead of the stale pink HSL config.

Verified: `tsc --noEmit` clean, `pnpm test` 601/601 passing.

* fix(design-system): point card hover shadow at --primary

Three Framer Motion `whileHover.boxShadow` values were still using the
old pink `rgba(238, 23, 94, 0.1)` while the CSS hover border on the same
cards now uses `var(--primary)` (lime). On hover, the border glowed lime
but the shadow glowed pink — a visible color mismatch.

Replaces the literal rgba with `oklch(from var(--primary) l c h / 0.1)`
so the glow follows the design-system primary in both light and dark
modes. Affects:

- app/_components/challenge-solution.tsx
- app/_components/quick-start-card.tsx
- app/_components/sample-app-card.tsx

* style: apply Ultracite formatting to toolkits-client.tsx

Inline the @arcadeai/design-system import (fits on one line) and break
the inline `render={<Link/>}` JSX across multiple lines per Biome's
multi-attribute formatting rule. Fixes the CI lint format check.

* fix(logo): drop invert filter, use text-foreground for theme-aware color

The new `ArcadeLogo` SVG in @arcadeai/design-system 3.41.x uses
`fill="currentColor"`, where the previous version had a hardcoded white
fill. The `invert dark:invert-0` filter assumed the latter — flipping
white → black in light mode, no-op in dark mode.

With currentColor, `invert` rotates whatever color is inherited from the
parent, producing an invisible near-white logo on the light-mode
navbar's white background.

Replaces the filter with `text-foreground`, the design-system token
that's already themed (near-black light, near-white dark). The logo
now renders correctly in both modes without filter trickery.

* fix(cards): move hover shadow from Framer Motion to CSS

Framer Motion's color parser decomposes box-shadow values in JS for
interpolation and cannot resolve `var()` references or relative-color
syntax (`oklch(from …)`) — those are browser-only. The previous commit
swapped the rgba pink for `oklch(from var(--primary) l c h / 0.1)` to
follow the design-system token, which left the shadow snapping on/off
on hover instead of smoothly fading.

Moves the shadow to a Tailwind arbitrary-value `hover:shadow-[…]` class
on the same motion.div, with `transition-shadow` for a smooth CSS fade.
Framer Motion keeps the scale spring on hover/tap — color stays in CSS
where it belongs.

Affects:
- app/_components/quick-start-card.tsx
- app/_components/sample-app-card.tsx
- app/_components/challenge-solution.tsx

Author: sdserranog

app/_components/analytics.tsx

@@ -40,7 +40,7 @@ export const SignupLink = ({
 
   return (
     <Link
-      className={cn("text-primary", className)}
+      className={cn("text-brand-accent", className)}
       href={buildRegisterHref(utmCampaign, utmMedium)}
       onClick={() => trackSignupClick(linkLocation)}
     >

app/_components/challenge-solution.tsx

@@ -31,11 +31,8 @@ export function ChallengeSolution({
 }: ChallengeSolutionProps) {
   return (
     <motion.div
-      className="group"
-      whileHover={{
-        scale: 1.01,
-        boxShadow: "0 0 20px 0 rgba(238, 23, 94, 0.1)",
-      }}
+      className="group transition-shadow hover:shadow-[0_0_20px_0_oklch(from_var(--primary)_l_c_h_/_0.1)]"
+      whileHover={{ scale: 1.01 }}
       whileTap={{ scale: 0.98 }}
     >
       <Card className="h-full overflow-hidden border-zinc-700 bg-[rgba(17,17,17,0.8)] backdrop-blur-xs">
@@ -78,16 +75,16 @@ export function ChallengeSolution({
                 {solution.description}
               </p>
               <Button
-                asChild
                 className="h-auto p-0 pt-1.5 text-zinc-400 hover:text-zinc-300"
+                render={
+                  <Link
+                    className="flex items-center gap-1.5"
+                    href={solution.href}
+                  />
+                }
                 variant="link"
               >
-                <Link
-                  className="flex items-center gap-1.5"
-                  href={solution.href}
-                >
-                  Learn more <ExternalLink className="h-4 w-4" />
-                </Link>
+                Learn more <ExternalLink className="h-4 w-4" />
               </Button>
             </div>
           </div>

app/_components/enhanced-code-block.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@arcadeai/design-system";
 import { Copy, FileText } from "lucide-react";
 import type React from "react";
 
@@ -62,8 +63,7 @@ const EnhancedCodeBlock: React.FC<EnhancedCodeBlockProps> = ({
             {displayName}
           </span>
         </div>
-        <button
-          className="flex cursor-pointer items-center gap-1 rounded px-2 py-1 text-gray-600 text-xs transition-colors hover:bg-gray-200 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+        <Button
           onClick={async () => {
             try {
               await navigator.clipboard.writeText(children);
@@ -81,11 +81,12 @@ const EnhancedCodeBlock: React.FC<EnhancedCodeBlockProps> = ({
               document.body.removeChild(textArea);
             }
           }}
-          type="button"
+          size="xs"
+          variant="ghost"
         >
-          <Copy className="h-3 w-3" />
+          <Copy />
           Copy
-        </button>
+        </Button>
       </div>
 
       {/* Code Content */}

app/_components/footer.tsx

@@ -85,7 +85,7 @@ const ResourceCol: React.FC<ResourceColProps> = ({ title, resources }) => (
       {resources?.map((resource) => (
         <li key={resource.url}>
           <a
-            className="text-gray-500 no-underline transition-colors duration-150 ease-in-out hover:text-primary"
+            className="text-gray-500 no-underline transition-colors duration-150 ease-in-out hover:text-brand-accent"
             href={resource.url}
             rel="noreferrer"
             target={resource.external ? "_blank" : "_self"}

app/_components/glossary-term.tsx

@@ -36,15 +36,13 @@ export function GlossaryTerm({
 
   return (
     <Popover onOpenChange={setOpen} open={open}>
-      <PopoverTrigger asChild>
-        <button
-          className="cursor-help border-gray-400 border-b border-dotted bg-transparent p-0 font-inherit text-inherit transition-colors hover:border-gray-600 dark:border-gray-600 dark:hover:border-gray-400"
-          onMouseEnter={() => setOpen(true)}
-          onMouseLeave={() => setOpen(false)}
-          type="button"
-        >
-          {displayText}
-        </button>
+      <PopoverTrigger
+        className="cursor-help border-gray-400 border-b border-dotted bg-transparent p-0 font-inherit text-inherit transition-colors hover:border-gray-600 dark:border-gray-600 dark:hover:border-gray-400"
+        onMouseEnter={() => setOpen(true)}
+        onMouseLeave={() => setOpen(false)}
+        type="button"
+      >
+        {displayText}
       </PopoverTrigger>
       <PopoverContent
         align="center"

app/_components/logo.tsx

@@ -7,7 +7,7 @@ export function Logo() {
   return (
     <>
       <div className="mr-2 hidden w-40 flex-row lg:flex lg:items-end lg:gap-2.5">
-        <ArcadeLogo className="h-7 w-auto invert dark:invert-0" />
+        <ArcadeLogo className="h-7 w-auto text-foreground" />
         {/* <Badge
           className="relative top-0.5 font-medium font-mono text-xs"
           variant="outline"

app/_components/quick-start-card.tsx

@@ -49,8 +49,8 @@ export function QuickStartCard({
   const content = (
     <>
       <CardHeader className="flex flex-row items-center gap-3 p-4 min-[1062px]:p-6">
-        <div className="rounded-full bg-[#ee175e]/10 p-2">
-          <Icon className="h-5 w-5 text-[#ee175e]" />
+        <div className="rounded-full bg-brand-accent/10 p-2">
+          <Icon className="h-5 w-5 text-brand-accent" />
         </div>
         <CardTitle className="text-gray-900 text-xl tracking-tight dark:text-white">
           {title}
@@ -102,7 +102,7 @@ export function QuickStartCard({
           </pre>
         )}
         {isClickable && (
-          <div className="mt-4 flex items-center justify-end font-medium text-[#ee175e] text-sm">
+          <div className="mt-4 flex items-center justify-end font-medium text-brand-accent text-sm">
             Learn more
             <ArrowRight className="ml-1 h-4 w-4 transition-transform group-hover:translate-x-1" />
           </div>
@@ -143,14 +143,11 @@ export function QuickStartCard({
 
   return (
     <motion.div
-      className="h-full"
-      whileHover={{
-        scale: 1.02,
-        boxShadow: "0 0 20px 0 rgba(238, 23, 94, 0.1)",
-      }}
+      className="h-full transition-shadow hover:shadow-[0_0_20px_0_oklch(from_var(--primary)_l_c_h_/_0.1)]"
+      whileHover={{ scale: 1.02 }}
       whileTap={{ scale: 0.98 }}
     >
-      <Card className="h-full border-gray-200 bg-white/80 backdrop-blur-xs transition-all hover:border-[#ee175e]/30 dark:border-gray-700 dark:bg-[rgba(17,17,17,0.8)]">
+      <Card className="h-full border-gray-200 bg-white/80 backdrop-blur-xs transition-all hover:border-primary/30 dark:border-gray-700 dark:bg-[rgba(17,17,17,0.8)]">
         {wrapper}
       </Card>
     </motion.div>

app/_components/sample-app-card.tsx

@@ -34,10 +34,8 @@ export function SampleAppCard({
 
   return (
     <motion.div
-      whileHover={{
-        scale: 1.02,
-        boxShadow: "0 0 20px 0 rgba(238, 23, 94, 0.1)",
-      }}
+      className="transition-shadow hover:shadow-[0_0_20px_0_oklch(from_var(--primary)_l_c_h_/_0.1)]"
+      whileHover={{ scale: 1.02 }}
       whileTap={{ scale: 0.98 }}
     >
       <Link
@@ -46,7 +44,7 @@ export function SampleAppCard({
         onClick={handleClick}
         target={blank ? "_blank" : undefined}
       >
-        <Card className="h-full border-gray-200 bg-white/80 backdrop-blur-xs transition-all hover:border-[#ee175e]/30 dark:border-gray-700 dark:bg-[rgba(17,17,17,0.8)]">
+        <Card className="h-full border-gray-200 bg-white/80 backdrop-blur-xs transition-all hover:border-primary/30 dark:border-gray-700 dark:bg-[rgba(17,17,17,0.8)]">
           <CardContent className="p-0">
             {image && (
               <div className="relative aspect-video w-full overflow-hidden rounded-t-lg bg-gray-100 dark:bg-gray-800">

app/_components/toggle-content.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { Button } from "@arcadeai/design-system";
 import { useState } from "react";
 
 type ToggleContentProps = {
@@ -20,13 +21,9 @@ const ToggleContent: React.FC<ToggleContentProps> = ({
 
   return (
     <div>
-      <button
-        className="mb-4 cursor-pointer rounded-md border border-border bg-card px-3 py-2 font-normal text-card-foreground transition-colors duration-200 ease-in-out hover:bg-muted hover:text-muted-foreground"
-        onClick={handleToggle}
-        type="button"
-      >
+      <Button className="mb-4" onClick={handleToggle} variant="outline">
         {isExpanded ? hideText : showText}
-      </button>
+      </Button>
       {isExpanded && <div>{children}</div>}
     </div>
   );

app/en/home/landing-page.tsx

@@ -214,7 +214,7 @@ export function LandingPage() {
           className="-top-24 -z-10 sm:-top-40 absolute inset-x-0 transform-gpu overflow-hidden blur-3xl"
         >
           <div
-            className="-translate-x-1/2 relative left-[calc(50%-11rem)] aspect-1155/678 w-sm rotate-30 bg-linear-to-tr from-[#ee175e] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-3xl"
+            className="-translate-x-1/2 relative left-[calc(50%-11rem)] aspect-1155/678 w-sm rotate-30 bg-linear-to-tr from-primary to-primary/30 opacity-20 sm:left-[calc(50%-30rem)] sm:w-3xl"
             style={{
               clipPath:
                 "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
@@ -254,37 +254,37 @@ export function LandingPage() {
               }}
             >
               <Button
-                asChild
-                className="h-12 bg-primary px-6 text-white hover:bg-primary/90"
+                className="h-12 px-6"
+                render={
+                  <Link
+                    href="/get-started/quickstarts/call-tool-agent"
+                    onClick={trackClick(
+                      "hero_get_started_clicked",
+                      "/get-started/quickstarts/call-tool-agent"
+                    )}
+                  />
+                }
                 size="lg"
               >
-                <Link
-                  href="/get-started/quickstarts/call-tool-agent"
-                  onClick={trackClick(
-                    "hero_get_started_clicked",
-                    "/get-started/quickstarts/call-tool-agent"
-                  )}
-                >
-                  <Rocket className="mr-2 h-5 w-5" />
-                  Get Started
-                </Link>
+                <Rocket className="mr-2 h-5 w-5" />
+                Get Started
               </Button>
               <Button
-                asChild
-                className="h-12 border-gray-900 bg-transparent px-6 text-gray-900 hover:bg-gray-900 hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-gray-900"
+                className="h-12 px-6"
+                render={
+                  <Link
+                    href={INTEGRATIONS_PAGE_HREF}
+                    onClick={trackClick(
+                      "hero_explore_tools_clicked",
+                      INTEGRATIONS_PAGE_HREF
+                    )}
+                  />
+                }
                 size="lg"
                 variant="outline"
               >
-                <Link
-                  href={INTEGRATIONS_PAGE_HREF}
-                  onClick={trackClick(
-                    "hero_explore_tools_clicked",
-                    INTEGRATIONS_PAGE_HREF
-                  )}
-                >
-                  <Puzzle className="mr-2 h-5 w-5" />
-                  Explore Tools
-                </Link>
+                <Puzzle className="mr-2 h-5 w-5" />
+                Explore Tools
               </Button>
             </motion.div>
           </div>
@@ -294,7 +294,7 @@ export function LandingPage() {
       {/* LLM-friendly docs banner (desktop only) */}
       <div className="flex justify-center px-4">
         <Link
-          className="group inline-flex items-center gap-2.5 rounded-full border border-[#ee175e]/30 bg-gradient-to-r from-[#ee175e]/10 to-[#9089fc]/10 px-5 py-2 font-medium text-[#ee175e] text-sm shadow-sm transition-all hover:border-[#ee175e]/50 hover:shadow-md hover:shadow-[#ee175e]/10 dark:border-[#ee175e]/40 dark:from-[#ee175e]/15 dark:to-[#9089fc]/15 dark:text-[#ff6b8a]"
+          className="group inline-flex items-center gap-2.5 rounded-full border border-brand-accent/30 bg-gradient-to-r from-brand-accent/10 to-brand-accent/5 px-5 py-2 font-medium text-brand-accent text-sm shadow-sm transition-all hover:border-brand-accent/50 hover:shadow-md hover:shadow-brand-accent/10 dark:border-primary/40 dark:from-primary/15 dark:to-primary/5"
           href="/get-started/setup/connect-arcade-docs"
           onClick={trackClick(
             "llm_banner_clicked",
@@ -447,20 +447,20 @@ export function LandingPage() {
               </p>
             </div>
             <Button
-              asChild
               className="mt-4 min-[1062px]:mt-0"
+              render={
+                <Link
+                  href={INTEGRATIONS_PAGE_HREF}
+                  onClick={trackClick(
+                    "view_all_integrations_clicked",
+                    INTEGRATIONS_PAGE_HREF
+                  )}
+                />
+              }
               variant="outline"
             >
-              <Link
-                href={INTEGRATIONS_PAGE_HREF}
-                onClick={trackClick(
-                  "view_all_integrations_clicked",
-                  INTEGRATIONS_PAGE_HREF
-                )}
-              >
-                See all 7,000+
-                <ArrowRight className="ml-2 h-4 w-4" />
-              </Link>
+              See all 7,000+
+              <ArrowRight className="ml-2 h-4 w-4" />
             </Button>
           </div>
           <div className="space-y-4">
@@ -613,20 +613,20 @@ export function LandingPage() {
               </p>
             </div>
             <Button
-              asChild
               className="mt-4 min-[1062px]:mt-0"
+              render={
+                <Link
+                  href="/resources/examples"
+                  onClick={trackClick(
+                    "view_all_examples_clicked",
+                    "/resources/examples"
+                  )}
+                />
+              }
               variant="outline"
             >
-              <Link
-                href="/resources/examples"
-                onClick={trackClick(
-                  "view_all_examples_clicked",
-                  "/resources/examples"
-                )}
-              >
-                See all examples
-                <ArrowRight className="ml-2 h-4 w-4" />
-              </Link>
+              See all examples
+              <ArrowRight className="ml-2 h-4 w-4" />
             </Button>
           </div>
           <div className="grid grid-cols-1 gap-8 min-[1062px]:grid-cols-3">
@@ -660,15 +660,15 @@ export function LandingPage() {
           </div>
           <div className="flex flex-wrap justify-center gap-6">
             <Link
-              className="flex items-center gap-2 text-gray-600 hover:text-primary dark:text-gray-400 dark:hover:text-primary"
+              className="flex items-center gap-2 text-gray-600 hover:text-brand-accent dark:text-gray-400 dark:hover:text-brand-accent"
               href="/references/api"
               onClick={trackClick("quick_link_api_clicked", "/references/api")}
             >
               <BookOpen className="h-5 w-5" />
               <span className="font-medium">API Reference</span>
             </Link>
             <Link
-              className="flex items-center gap-2 text-gray-600 hover:text-primary dark:text-gray-400 dark:hover:text-primary"
+              className="flex items-center gap-2 text-gray-600 hover:text-brand-accent dark:text-gray-400 dark:hover:text-brand-accent"
               href="/references/cli-cheat-sheet"
               onClick={trackClick(
                 "quick_link_cli_clicked",
@@ -679,15 +679,15 @@ export function LandingPage() {
               <span className="font-medium">CLI Cheat Sheet</span>
             </Link>
             <Link
-              className="flex items-center gap-2 text-gray-600 hover:text-primary dark:text-gray-400 dark:hover:text-primary"
+              className="flex items-center gap-2 text-gray-600 hover:text-brand-accent dark:text-gray-400 dark:hover:text-brand-accent"
               href="/resources/faq"
               onClick={trackClick("quick_link_faq_clicked", "/resources/faq")}
             >
               <HelpCircle className="h-5 w-5" />
               <span className="font-medium">FAQ</span>
             </Link>
             <Link
-              className="flex items-center gap-2 text-gray-600 hover:text-primary dark:text-gray-400 dark:hover:text-primary"
+              className="flex items-center gap-2 text-gray-600 hover:text-brand-accent dark:text-gray-400 dark:hover:text-brand-accent"
               href="/references/changelog"
               onClick={trackClick(
                 "quick_link_changelog_clicked",
@@ -707,7 +707,7 @@ export function LandingPage() {
         className="-z-10 absolute inset-x-0 top-[calc(100%-13rem)] transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
       >
         <div
-          className="-translate-x-1/2 relative left-[calc(50%+3rem)] aspect-1155/678 w-sm bg-linear-to-tr from-[#ee175e] to-[#9089fc] opacity-20 sm:left-[calc(50%+36rem)] sm:w-3xl"
+          className="-translate-x-1/2 relative left-[calc(50%+3rem)] aspect-1155/678 w-sm bg-linear-to-tr from-primary to-primary/30 opacity-20 sm:left-[calc(50%+36rem)] sm:w-3xl"
           style={{
             clipPath:
               "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",