fix: migrate hardcoded gray classes to shadcn theme tokens and enhance Storybook

Replace hardcoded Tailwind gray classes (text-gray-*, bg-white, border-gray-*)
with shadcn design tokens across 14 example pages, enabling proper dark mode
support and visual consistency. Extract shared IndicatorPill and SearchFilter
components, add Inter font, polish index page, and expand Storybook from 6 to
23 stories covering Header, Footer, Sidebar, ScrollNav, and AppShell.

Co-Authored-By: claude-flow <ruv@ruv.net>

Author: fyalavuz

apps/examples/app/_shared/indicator-pill.tsx

@@ -0,0 +1,8 @@
+export function IndicatorPill({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-[60] flex items-center gap-2 rounded-full bg-foreground/90 px-4 py-2 text-[11px] font-mono text-background/90 shadow-2xl backdrop-blur-md border border-background/10">
+      <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
+      {children}
+    </div>
+  );
+}

apps/examples/app/_shared/search-filter.tsx

@@ -0,0 +1,23 @@
+import { Search, SlidersHorizontal } from "lucide-react";
+
+export function SearchFilter() {
+  return (
+    <div className="flex items-center gap-2">
+      <div className="relative flex-1">
+        <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground/70" />
+        <input
+          type="text"
+          placeholder="Search photos, people, or locations..."
+          className="w-full rounded-xl border border-input bg-muted/50 py-2.5 pl-10 pr-4 text-sm placeholder:text-muted-foreground focus:border-ring focus:bg-background focus:outline-none focus:ring-2 focus:ring-ring/30 transition-all"
+        />
+      </div>
+      <button
+        type="button"
+        className="flex items-center gap-1.5 rounded-xl border border-input bg-card px-3.5 py-2.5 text-sm font-medium text-muted-foreground hover:bg-accent/50 hover:border-ring transition-all cursor-pointer"
+      >
+        <SlidersHorizontal className="size-4" />
+        <span className="hidden sm:inline">Filters</span>
+      </button>
+    </div>
+  );
+}

apps/examples/app/content-only/page.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { AppShell, Content, MotionProvider } from "@appshell/react";
 import { framerMotionAdapter } from "@appshell/react/motion-framer";
 import { Lock, Mail, ArrowRight, Github, Chrome, Sparkles, Eye, EyeOff } from "lucide-react";
+import { IndicatorPill } from "../_shared/indicator-pill";
 
 export default function ContentOnlyPage() {
   const [email, setEmail] = useState("");
@@ -30,18 +31,18 @@ export default function ContentOnlyPage() {
                 <div className="flex items-center justify-center size-11 rounded-2xl bg-gradient-to-br from-violet-500 to-purple-600 text-white shadow-lg shadow-violet-500/20">
                   <Sparkles className="size-5" />
                 </div>
-                <span className="text-xl font-bold tracking-tight text-gray-900">
+                <span className="text-xl font-bold tracking-tight text-foreground">
                   Acme
                 </span>
               </div>
 
               {/* Card - polished */}
-              <div className="rounded-2xl border border-gray-200/80 bg-white/80 backdrop-blur-sm p-6 sm:p-8 shadow-xl shadow-gray-200/40">
+              <div className="rounded-2xl border border-input bg-card/80 backdrop-blur-sm p-6 sm:p-8 shadow-xl shadow-border/40">
                 <div className="mb-6">
-                  <h1 className="text-2xl font-bold text-gray-900 tracking-tight">
+                  <h1 className="text-2xl font-bold text-foreground tracking-tight">
                     Welcome back
                   </h1>
-                  <p className="mt-1.5 text-sm text-gray-500">
+                  <p className="mt-1.5 text-sm text-muted-foreground">
                     Sign in to your account to continue
                   </p>
                 </div>
@@ -50,14 +51,14 @@ export default function ContentOnlyPage() {
                 <div className="grid grid-cols-2 gap-3 mb-6">
                   <button
                     type="button"
-                    className="flex items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-300 transition-all"
+                    className="flex items-center justify-center gap-2 rounded-xl border border-border bg-card px-4 py-2.5 text-sm font-medium text-foreground hover:bg-accent/50 hover:border-ring transition-all"
                   >
                     <Github className="size-4" />
                     GitHub
                   </button>
                   <button
                     type="button"
-                    className="flex items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-300 transition-all"
+                    className="flex items-center justify-center gap-2 rounded-xl border border-border bg-card px-4 py-2.5 text-sm font-medium text-foreground hover:bg-accent/50 hover:border-ring transition-all"
                   >
                     <Chrome className="size-4" />
                     Google
@@ -67,10 +68,10 @@ export default function ContentOnlyPage() {
                 {/* Divider */}
                 <div className="relative mb-6">
                   <div className="absolute inset-0 flex items-center">
-                    <div className="w-full border-t border-gray-200" />
+                    <div className="w-full border-t border-border" />
                   </div>
                   <div className="relative flex justify-center text-xs">
-                    <span className="bg-white px-3 text-gray-400">
+                    <span className="bg-card px-3 text-muted-foreground/70">
                       or continue with email
                     </span>
                   </div>
@@ -84,19 +85,19 @@ export default function ContentOnlyPage() {
                   <div>
                     <label
                       htmlFor="email"
-                      className="block text-sm font-medium text-gray-700 mb-1.5"
+                      className="block text-sm font-medium text-foreground mb-1.5"
                     >
                       Email
                     </label>
                     <div className="relative">
-                      <Mail className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 text-gray-400" />
+                      <Mail className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground/70" />
                       <input
                         id="email"
                         type="email"
                         placeholder="you@example.com"
                         value={email}
                         onChange={(e) => setEmail(e.target.value)}
-                        className="w-full rounded-xl border border-gray-200 bg-gray-50/80 py-2.5 pl-10 pr-4 text-sm placeholder:text-gray-400 focus:border-violet-400 focus:bg-white focus:outline-none focus:ring-4 focus:ring-violet-100 transition-all"
+                        className="w-full rounded-xl border border-border bg-muted/50 py-2.5 pl-10 pr-4 text-sm placeholder:text-muted-foreground focus:border-violet-400 focus:bg-background focus:outline-none focus:ring-4 focus:ring-violet-100 transition-all"
                       />
                     </div>
                   </div>
@@ -105,7 +106,7 @@ export default function ContentOnlyPage() {
                     <div className="flex items-center justify-between mb-1.5">
                       <label
                         htmlFor="password"
-                        className="block text-sm font-medium text-gray-700"
+                        className="block text-sm font-medium text-foreground"
                       >
                         Password
                       </label>
@@ -117,19 +118,19 @@ export default function ContentOnlyPage() {
                       </button>
                     </div>
                     <div className="relative">
-                      <Lock className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 text-gray-400" />
+                      <Lock className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground/70" />
                       <input
                         id="password"
                         type={showPassword ? "text" : "password"}
                         placeholder="Enter your password"
                         value={password}
                         onChange={(e) => setPassword(e.target.value)}
-                        className="w-full rounded-xl border border-gray-200 bg-gray-50/80 py-2.5 pl-10 pr-10 text-sm placeholder:text-gray-400 focus:border-violet-400 focus:bg-white focus:outline-none focus:ring-4 focus:ring-violet-100 transition-all"
+                        className="w-full rounded-xl border border-border bg-muted/50 py-2.5 pl-10 pr-10 text-sm placeholder:text-muted-foreground focus:border-violet-400 focus:bg-background focus:outline-none focus:ring-4 focus:ring-violet-100 transition-all"
                       />
                       <button
                         type="button"
                         onClick={() => setShowPassword(!showPassword)}
-                        className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+                        className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground/70 hover:text-foreground transition-colors"
                         aria-label={showPassword ? "Hide password" : "Show password"}
                       >
                         {showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
@@ -148,7 +149,7 @@ export default function ContentOnlyPage() {
               </div>
 
               {/* Bottom text */}
-              <p className="mt-6 text-center text-sm text-gray-500">
+              <p className="mt-6 text-center text-sm text-muted-foreground">
                 Don&apos;t have an account?{" "}
                 <button
                   type="button"
@@ -159,14 +160,11 @@ export default function ContentOnlyPage() {
               </p>
             </div>
 
-            {/* Floating variant indicator */}
-            <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
-              <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
-              content-only &middot; no header, no footer
-            </div>
           </div>
         </Content>
       </AppShell>
+
+      <IndicatorPill>content-only &middot; no header, no footer</IndicatorPill>
     </MotionProvider>
   );
 }