@digilogiclabs/create-saas-app 2.11.0 → 2.12.1

package/src/templates/mobile/ui-auth-payments/template/app/_layout.tsx

@@ -16,8 +16,8 @@ import {
   AppShell
 } from '@digilogiclabs/saas-factory-ui/native';
 
-// App SDK Provider
-import { DLLProvider } from '@digilogiclabs/app-sdk';
+// TODO: Replace with direct auth/payments provider setup
+// DLLProvider from @digilogiclabs/app-sdk has been deprecated
 
 // Prevent the splash screen from auto-hiding before asset loading is complete
 SplashScreen.preventAutoHideAsync();
@@ -53,7 +53,6 @@ export default function RootLayout() {
               backgroundSync={true}
             >
               <NetworkAwareContent>
-                <DLLProvider>
                     <StripeProvider
                       publishableKey={process.env.EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY!}
                       merchantIdentifier="merchant.com.{{packageName}}.app"
@@ -113,7 +112,6 @@ export default function RootLayout() {
                     <Toast />
                     <StatusBar style="auto" />
                     </StripeProvider>
-                </DLLProvider>
               </NetworkAwareContent>
             </OfflineWrapper>
           </HapticsProvider>

package/src/templates/mobile/ui-auth-payments/template/app/auth/login.tsx

@@ -16,8 +16,8 @@ import {
   NativeMobileHero as MobileHero
 } from '@digilogiclabs/saas-factory-ui/native';
 
-// Auth Hook
-import { useAuth } from '@digilogiclabs/app-sdk';
+// TODO: Replace with direct @digilogiclabs/saas-factory-auth usage
+// import { useAuth } from '@digilogiclabs/app-sdk';
 
 // Validation Schema
 const loginSchema = z.object({
@@ -28,7 +28,10 @@ const loginSchema = z.object({
 type LoginFormData = z.infer<typeof loginSchema>;
 
 export default function LoginScreen() {
-  const { signIn, loading } = useAuth();
+  // TODO: Replace with direct auth provider hook
+  // const { signIn, loading } = useAuth();
+  const signIn = async (_email: string, _password: string) => { throw new Error('Wire up auth provider'); };
+  const loading = false;
   const [error, setError] = useState<string | null>(null);
 
   const { control, handleSubmit, formState: { errors, isValid } } = useForm<LoginFormData>({

package/src/templates/mobile/ui-auth-payments/template/app/auth/signup.tsx

@@ -16,8 +16,8 @@ import {
   NativeCheckbox as Checkbox
 } from '@digilogiclabs/saas-factory-ui/native';
 
-// Auth Hook
-import { useAuth } from '@digilogiclabs/app-sdk';
+// TODO: Replace with direct @digilogiclabs/saas-factory-auth usage
+// import { useAuth } from '@digilogiclabs/app-sdk';
 
 // Validation Schema
 const signupSchema = z.object({
@@ -36,7 +36,10 @@ const signupSchema = z.object({
 type SignupFormData = z.infer<typeof signupSchema>;
 
 export default function SignupScreen() {
-  const { signUp, loading } = useAuth();
+  // TODO: Replace with direct auth provider hook
+  // const { signUp, loading } = useAuth();
+  const signUp = async (_email: string, _password: string, _meta?: any) => { throw new Error('Wire up auth provider'); };
+  const loading = false;
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<string | null>(null);
 

package/src/templates/mobile/ui-auth-payments-ai/template/app/(tabs)/_layout.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { View } from 'react-native';
 import { Tabs } from 'expo-router';
-import { useAuth } from '@digilogiclabs/app-sdk';
+// TODO: Replace with direct @digilogiclabs/saas-factory-auth usage
+// import { useAuth } from '@digilogiclabs/app-sdk';
 import { Redirect } from 'expo-router';
 
 // UI Components - Updated for v0.22.0
@@ -79,7 +80,10 @@ const tabConfig = [
 ];
 
 export default function TabLayout() {
-  const { user, loading } = useAuth();
+  // TODO: Replace with direct auth provider hook
+  // const { user, loading } = useAuth();
+  const user = null as any; // placeholder — wire up your auth provider
+  const loading = false;
   const { colors } = useTheme();
 
   // Show loading state while checking authentication

package/src/templates/mobile/ui-auth-payments-ai/template/app/(tabs)/billing.tsx

@@ -19,8 +19,8 @@ import {
   useTheme
 } from '@digilogiclabs/saas-factory-ui/native';
 
-// Payments Hook
-import { usePayments } from '@digilogiclabs/app-sdk';
+// TODO: Replace with direct @digilogiclabs/saas-factory-payments usage
+// import { usePayments } from '@digilogiclabs/app-sdk';
 
 // Icons
 import { 
@@ -129,7 +129,11 @@ const mockInvoices: Invoice[] = [
 
 export default function BillingScreen() {
   const { initPaymentSheet, presentPaymentSheet } = useStripe();
-  const { createPaymentMethod, deletePaymentMethod, updateSubscription } = usePayments();
+  // TODO: Replace with direct payments provider hook
+  // const { createPaymentMethod, deletePaymentMethod, updateSubscription } = usePayments();
+  const createPaymentMethod = async (_data: any) => { throw new Error('Wire up payments provider'); };
+  const deletePaymentMethod = async (_id: string) => { throw new Error('Wire up payments provider'); };
+  const updateSubscription = async (_data: any) => { throw new Error('Wire up payments provider'); };
   const { theme, isDark } = useTheme();
   
   const [paymentMethods, setPaymentMethods] = useState<PaymentMethod[]>(mockPaymentMethods);

package/src/templates/mobile/ui-auth-payments-ai/template/app/(tabs)/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { View, Text, StyleSheet, ScrollView, RefreshControl, Dimensions, Animated } from 'react-native';
-import { useAuth } from '@digilogiclabs/app-sdk';
+// TODO: Replace with direct @digilogiclabs/saas-factory-auth usage
+// import { useAuth } from '@digilogiclabs/app-sdk';
 import { LinearGradient } from 'expo-linear-gradient';
 import { BlurView } from 'expo-blur';
 import * as Haptics from 'expo-haptics';
@@ -63,7 +64,9 @@ interface DashboardData {
 }
 
 export default function HomeScreen() {
-  const { user } = useAuth();
+  // TODO: Replace with direct auth provider hook
+  // const { user } = useAuth();
+  const user = null as any; // placeholder — wire up your auth provider
   const { colors, isDark } = useTheme();
   const [data, setData] = useState<DashboardData | null>(null);
   const [loading, setLoading] = useState(true);

package/src/templates/mobile/ui-auth-payments-ai/template/app/(tabs)/profile.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { View, Text, StyleSheet, ScrollView, Alert, RefreshControl, Animated } from 'react-native';
 import { router } from 'expo-router';
-import { useAuth } from '@digilogiclabs/app-sdk';
+// TODO: Replace with direct @digilogiclabs/saas-factory-auth usage
+// import { useAuth } from '@digilogiclabs/app-sdk';
 import { LinearGradient } from 'expo-linear-gradient';
 import { BlurView } from 'expo-blur';
 import * as Haptics from 'expo-haptics';
@@ -40,7 +41,11 @@ import {
 } from 'react-native-heroicons/outline';
 
 export default function ProfileScreen() {
-  const { user, signOut, updateProfile } = useAuth();
+  // TODO: Replace with direct auth provider hook
+  // const { user, signOut, updateProfile } = useAuth();
+  const user = null as any; // placeholder — wire up your auth provider
+  const signOut = async () => { throw new Error('Wire up auth provider'); };
+  const updateProfile = async (_data: any) => { throw new Error('Wire up auth provider'); };
   const { theme, isDark } = useTheme();
   const [notificationsEnabled, setNotificationsEnabled] = useState(true);
   const [emailUpdates, setEmailUpdates] = useState(true);

package/src/templates/mobile/ui-auth-payments-ai/template/app/_layout.tsx

@@ -16,8 +16,8 @@ import {
   AppShell
 } from '@digilogiclabs/saas-factory-ui/native';
 
-// App SDK Provider
-import { DLLProvider } from '@digilogiclabs/app-sdk';
+// TODO: Replace with direct auth/payments provider setup
+// DLLProvider from @digilogiclabs/app-sdk has been deprecated
 
 // Prevent the splash screen from auto-hiding before asset loading is complete
 SplashScreen.preventAutoHideAsync();
@@ -53,7 +53,6 @@ export default function RootLayout() {
               backgroundSync={true}
             >
               <NetworkAwareContent>
-                <DLLProvider>
                     <StripeProvider
                       publishableKey={process.env.EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY!}
                       merchantIdentifier="merchant.com.{{packageName}}.app"
@@ -113,7 +112,6 @@ export default function RootLayout() {
                     <Toast />
                     <StatusBar style="auto" />
                     </StripeProvider>
-                </DLLProvider>
               </NetworkAwareContent>
             </OfflineWrapper>
           </HapticsProvider>

package/src/templates/mobile/ui-auth-payments-ai/template/app/auth/login.tsx

@@ -16,8 +16,8 @@ import {
   NativeMobileHero as MobileHero
 } from '@digilogiclabs/saas-factory-ui/native';
 
-// Auth Hook
-import { useAuth } from '@digilogiclabs/app-sdk';
+// TODO: Replace with direct @digilogiclabs/saas-factory-auth usage
+// import { useAuth } from '@digilogiclabs/app-sdk';
 
 // Validation Schema
 const loginSchema = z.object({
@@ -28,7 +28,10 @@ const loginSchema = z.object({
 type LoginFormData = z.infer<typeof loginSchema>;
 
 export default function LoginScreen() {
-  const { signIn, loading } = useAuth();
+  // TODO: Replace with direct auth provider hook
+  // const { signIn, loading } = useAuth();
+  const signIn = async (_email: string, _password: string) => { throw new Error('Wire up auth provider'); };
+  const loading = false;
   const [error, setError] = useState<string | null>(null);
 
   const { control, handleSubmit, formState: { errors, isValid } } = useForm<LoginFormData>({

package/src/templates/mobile/ui-auth-payments-ai/template/app/auth/signup.tsx

@@ -16,8 +16,8 @@ import {
   NativeCheckbox as Checkbox
 } from '@digilogiclabs/saas-factory-ui/native';
 
-// Auth Hook
-import { useAuth } from '@digilogiclabs/app-sdk';
+// TODO: Replace with direct @digilogiclabs/saas-factory-auth usage
+// import { useAuth } from '@digilogiclabs/app-sdk';
 
 // Validation Schema
 const signupSchema = z.object({
@@ -36,7 +36,10 @@ const signupSchema = z.object({
 type SignupFormData = z.infer<typeof signupSchema>;
 
 export default function SignupScreen() {
-  const { signUp, loading } = useAuth();
+  // TODO: Replace with direct auth provider hook
+  // const { signUp, loading } = useAuth();
+  const signUp = async (_email: string, _password: string, _meta?: any) => { throw new Error('Wire up auth provider'); };
+  const loading = false;
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<string | null>(null);
 

package/src/templates/shared/admin/web/src/components/admin-nav.tsx

@@ -20,7 +20,7 @@ export function AdminNav() {
   const pathname = usePathname();
 
   return (
-    <nav className="border-b border-gray-200 dark:border-gray-800">
+    <nav className="border-b border-border">
       <div className="flex gap-1">
         {ADMIN_LINKS.map((link) => {
           const isActive =
@@ -34,8 +34,8 @@ export function AdminNav() {
               href={link.href}
               className={`rounded-t-lg px-4 py-2.5 text-sm font-medium transition-colors ${
                 isActive
-                  ? 'border-b-2 border-blue-600 text-blue-600 dark:text-blue-400'
-                  : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200'
+                  ? 'border-b-2 border-primary text-primary'
+                  : 'text-muted-foreground hover:text-foreground'
               }`}
             >
               {link.label}

package/src/templates/shared/auth/supabase/web/src/lib/auth-session.ts

@@ -1,9 +1,14 @@
 /**
- * Auth session adapter for Supabase.
- * Provides a consistent getSession() interface for api-security.ts.
+ * Auth session adapter — provider-agnostic.
+ *
+ * Provides getSession() and getUser() used by api-security.ts and server pages.
+ * In mock mode, returns a demo user without any backend connection.
+ *
+ * TODO: [REAL_DATA] To connect your auth provider, update the else branch below.
+ * Works with: Supabase, Firebase, Keycloak, Auth0, NextAuth, or any custom provider.
  */
 import 'server-only';
-import { createClient } from '@/lib/supabase/server';
+import { MOCK_MODE, MOCK_USER } from '@/lib/mock';
 
 type Session = {
   user?: {
@@ -14,21 +19,36 @@ type Session = {
 };
 
 export async function getSession(): Promise<Session | null> {
-  const supabase = await createClient();
-  const {
-    data: { user },
-    error,
-  } = await supabase.auth.getUser();
+  if (MOCK_MODE) {
+    return { user: { id: MOCK_USER.id, email: MOCK_USER.email, name: MOCK_USER.name } };
+  }
 
-  if (error || !user) return null;
+  // TODO: [REAL_DATA] Replace with your auth provider's session check.
+  // Examples:
+  //   Supabase:  const { data: { user } } = await supabase.auth.getUser()
+  //   NextAuth:  const session = await getServerSession(authOptions)
+  //   Keycloak:  const session = await auth() // from @auth/core
+  //   Firebase:  const user = await adminAuth.verifyIdToken(token)
+  try {
+    const { createClient } = await import('@/lib/supabase/server');
+    const supabase = await createClient();
+    const {
+      data: { user },
+      error,
+    } = await supabase.auth.getUser();
 
-  return {
-    user: {
-      id: user.id,
-      email: user.email ?? null,
-      name: user.user_metadata?.name ?? user.user_metadata?.full_name ?? null,
-    },
-  };
+    if (error || !user) return null;
+
+    return {
+      user: {
+        id: user.id,
+        email: user.email ?? null,
+        name: user.user_metadata?.name ?? user.user_metadata?.full_name ?? null,
+      },
+    };
+  } catch {
+    return null;
+  }
 }
 
 export async function getUser() {

package/src/templates/shared/auth/supabase/web/src/middleware.ts

@@ -4,6 +4,7 @@
  * Refreshes the Supabase auth session on every request and
  * protects routes under /dashboard from unauthenticated access.
  *
+ * Mock mode: set NEXT_PUBLIC_MOCK_MODE=true to bypass auth entirely.
  * Add more protected routes to the `protectedPrefixes` array below.
  */
 import { createServerClient } from '@supabase/ssr';
@@ -13,6 +14,11 @@ import { NextResponse, type NextRequest } from 'next/server';
 const protectedPrefixes = ['/dashboard', '/settings', '/account'];
 
 export async function middleware(request: NextRequest) {
+  // Mock mode — skip all auth, allow every route
+  if (process.env.NEXT_PUBLIC_MOCK_MODE === 'true') {
+    return NextResponse.next();
+  }
+
   let supabaseResponse = NextResponse.next({ request });
 
   const supabase = createServerClient(

package/src/templates/shared/config/web/next.config.mjs

@@ -48,7 +48,6 @@ const nextConfig = {
         // Stub main barrel only — subpaths like /auth and /security-headers
         // are Edge-safe and must NOT be stubbed.
         '@digilogiclabs/platform-core$': false,
-        '@digilogiclabs/app-sdk$': false,
         'ioredis$': false,
         'pg$': false,
         'nodemailer$': false,

package/src/templates/shared/cookie-consent/web/components/cookie-consent.tsx

@@ -26,24 +26,24 @@ export function CookieConsent() {
   };
 
   return (
-    <div className="fixed bottom-0 left-0 right-0 z-50 border-t border-gray-200 bg-white p-4 shadow-lg dark:border-gray-800 dark:bg-gray-950">
+    <div className="fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-card p-4 shadow-lg">
       <div className="mx-auto flex max-w-5xl flex-col items-center gap-4 sm:flex-row sm:justify-between">
-        <p className="text-sm text-gray-600 dark:text-gray-400">
+        <p className="text-sm text-muted-foreground">
           We use cookies to improve your experience.{' '}
-          <Link href="/privacy" className="underline hover:text-gray-900 dark:hover:text-gray-200">
+          <Link href="/privacy" className="underline hover:text-foreground">
             Learn more
           </Link>
         </p>
         <div className="flex gap-3">
           <button
             onClick={() => handleChoice('declined')}
-            className="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+            className="rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted"
           >
             Decline
           </button>
           <button
             onClick={() => handleChoice('accepted')}
-            className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+            className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
           >
             Accept
           </button>

package/src/templates/shared/design/web/src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
+

package/src/templates/shared/email/web/src/lib/email/client.ts

@@ -37,7 +37,7 @@ function getResend(): Resend | null {
 
   try {
     // Dynamic import to avoid requiring resend in all environments
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    // eslint-disable-next-line
     const { Resend } = require('resend');
     resendClient = new Resend(apiKey);
     return resendClient;

package/src/templates/shared/error-pages/web/src/app/error.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import Link from 'next/link';
+
 /**
  * Error boundary page.
  *
@@ -14,11 +16,11 @@ export default function Error({
   reset: () => void;
 }) {
   return (
-    <main className="flex min-h-screen items-center justify-center bg-white px-4 dark:bg-gray-950">
+    <main className="flex min-h-screen items-center justify-center bg-background px-4">
       <div className="text-center">
-        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30">
+        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
           <svg
-            className="h-8 w-8 text-red-600 dark:text-red-400"
+            className="h-8 w-8 text-destructive"
             fill="none"
             viewBox="0 0 24 24"
             strokeWidth="1.5"
@@ -31,20 +33,20 @@ export default function Error({
             />
           </svg>
         </div>
-        <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
+        <h1 className="text-2xl font-semibold text-foreground">
           Something went wrong
         </h1>
-        <p className="mt-2 max-w-md text-gray-600 dark:text-gray-400">
+        <p className="mt-2 max-w-md text-muted-foreground">
           An unexpected error occurred. Please try again.
         </p>
         {error.digest && (
-          <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
+          <p className="mt-1 text-xs text-muted-foreground/70">
             Error ID: {error.digest}
           </p>
         )}
 
         {process.env.NODE_ENV === 'development' && (
-          <pre className="mx-auto mt-4 max-w-lg overflow-auto rounded-lg bg-gray-100 p-4 text-left text-xs text-red-600 dark:bg-gray-900 dark:text-red-400">
+          <pre className="mx-auto mt-4 max-w-lg overflow-auto rounded-lg bg-muted p-4 text-left text-xs text-destructive">
             {error.message}
             {error.stack && `\n\n${error.stack}`}
           </pre>
@@ -53,16 +55,16 @@ export default function Error({
         <div className="mt-8 flex items-center justify-center gap-4">
           <button
             onClick={reset}
-            className="rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+            className="rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
           >
             Try Again
           </button>
-          <a
+          <Link
             href="/"
-            className="rounded-lg border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+            className="rounded-lg border border-border px-5 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-muted"
           >
             Go Home
-          </a>
+          </Link>
         </div>
       </div>
     </main>

package/src/templates/shared/error-pages/web/src/app/global-error.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+/* eslint-disable @next/next/no-html-link-for-pages */
+
 /**
  * Root error boundary.
  *

package/src/templates/shared/error-pages/web/src/app/not-found.tsx

@@ -8,27 +8,27 @@ import Link from 'next/link';
  */
 export default function NotFound() {
   return (
-    <main className="flex min-h-screen items-center justify-center bg-white px-4 dark:bg-gray-950">
+    <main className="flex min-h-screen items-center justify-center bg-background px-4">
       <div className="text-center">
-        <p className="bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-8xl font-bold text-transparent">
+        <p className="bg-gradient-to-r from-primary to-accent bg-clip-text text-8xl font-bold text-transparent">
           404
         </p>
-        <h1 className="mt-4 text-2xl font-semibold text-gray-900 dark:text-white">
+        <h1 className="mt-4 text-2xl font-semibold text-foreground">
           Page not found
         </h1>
-        <p className="mt-2 max-w-md text-gray-600 dark:text-gray-400">
+        <p className="mt-2 max-w-md text-muted-foreground">
           The page you&apos;re looking for doesn&apos;t exist or has been moved.
         </p>
         <div className="mt-8 flex items-center justify-center gap-4">
           <Link
             href="/"
-            className="rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+            className="rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
           >
             Go Home
           </Link>
           <Link
             href="/dashboard"
-            className="rounded-lg border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+            className="rounded-lg border border-border px-5 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-muted"
           >
             Dashboard
           </Link>

package/src/templates/shared/legal/web/src/app/(legal)/privacy/page.tsx

@@ -23,16 +23,16 @@ export default function PrivacyPage() {
   } = LEGAL_CONFIG;
 
   return (
-    <main className="min-h-screen bg-white dark:bg-gray-950">
+    <main className="min-h-screen bg-background">
       <div className="mx-auto max-w-3xl px-4 py-16 sm:px-6 lg:px-8">
-        <h1 className="mb-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
+        <h1 className="mb-2 text-3xl font-bold tracking-tight text-foreground">
           Privacy Policy
         </h1>
-        <p className="mb-8 text-sm text-gray-500 dark:text-gray-400">
+        <p className="mb-8 text-sm text-muted-foreground">
           Effective: {effectiveDate}
         </p>
 
-        <div className="prose prose-gray dark:prose-invert max-w-none">
+        <div className="prose dark:prose-invert max-w-none">
           <section>
             <h2>1. Information We Collect</h2>
             <p>We collect information you provide directly:</p>

package/src/templates/shared/legal/web/src/app/(legal)/terms/page.tsx

@@ -23,16 +23,16 @@ export default function TermsPage() {
   } = LEGAL_CONFIG;
 
   return (
-    <main className="min-h-screen bg-white dark:bg-gray-950">
+    <main className="min-h-screen bg-background">
       <div className="mx-auto max-w-3xl px-4 py-16 sm:px-6 lg:px-8">
-        <h1 className="mb-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
+        <h1 className="mb-2 text-3xl font-bold tracking-tight text-foreground">
           Terms of Service
         </h1>
-        <p className="mb-8 text-sm text-gray-500 dark:text-gray-400">
+        <p className="mb-8 text-sm text-muted-foreground">
           Effective: {effectiveDate}
         </p>
 
-        <div className="prose prose-gray dark:prose-invert max-w-none">
+        <div className="prose dark:prose-invert max-w-none">
           <section>
             <h2>1. Acceptance of Terms</h2>
             <p>