@digilogiclabs/create-saas-app 2.9.0 → 2.10.0

package/src/templates/web/iot-dashboard/template/src/app/error.tsx

@@ -16,27 +16,27 @@ export default function Error({ error, reset }: ErrorProps) {
   }, [error])
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-red-50 to-orange-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center p-4">
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
       <Card className="p-8 max-w-lg w-full">
         <div className="flex flex-col items-center space-y-6 text-center">
-          <div className="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center">
-            <AlertTriangle className="w-8 h-8 text-red-600 dark:text-red-400" />
+          <div className="w-16 h-16 bg-destructive/10 rounded-full flex items-center justify-center">
+            <AlertTriangle className="w-8 h-8 text-destructive" />
           </div>
 
           <div>
-            <h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
+            <h1 className="text-2xl font-bold text-foreground mb-2">
               Something went wrong!
             </h1>
-            <p className="text-slate-600 dark:text-slate-300 mb-4">
+            <p className="text-muted-foreground mb-4">
               We encountered an unexpected error. This has been logged and our team will look into it.
             </p>
 
             {process.env.NODE_ENV === 'development' && (
               <details className="mt-4 text-left">
-                <summary className="cursor-pointer text-sm text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200">
+                <summary className="cursor-pointer text-sm text-muted-foreground hover:text-foreground">
                   Error details (development only)
                 </summary>
-                <div className="mt-2 p-3 bg-slate-100 dark:bg-slate-800 rounded text-xs font-mono text-slate-700 dark:text-slate-300 overflow-auto max-h-40">
+                <div className="mt-2 p-3 bg-muted rounded text-xs font-mono text-muted-foreground overflow-auto max-h-40">
                   <div className="mb-2">
                     <strong>Message:</strong> {error.message}
                   </div>
@@ -57,7 +57,7 @@ export default function Error({ error, reset }: ErrorProps) {
           </div>
 
           <div className="flex flex-col sm:flex-row gap-3 w-full">
-            <Button onClick={reset} className="flex-1 bg-emerald-600 hover:bg-emerald-700" size="lg">
+            <Button onClick={reset} className="flex-1" size="lg">
               <RefreshCw className="w-4 h-4 mr-2" />
               Try again
             </Button>

package/src/templates/web/iot-dashboard/template/src/app/globals.css

@@ -1,20 +1,97 @@
-@import "tailwindcss";
-
-@theme {
-  --color-primary: oklch(55% 0.18 160);
-  --color-background: oklch(98% 0.01 256);
-  --color-foreground: oklch(15% 0.02 256);
-  --font-sans: 'Inter', system-ui, sans-serif;
-  --radius: 0.5rem;
-}
-
-.dark {
-  --color-background: oklch(15% 0.02 256);
-  --color-foreground: oklch(95% 0 0);
-}
-
-body {
-  font-family: var(--font-sans);
-  background-color: var(--color-background);
-  color: var(--color-foreground);
-}
+@import "tailwindcss";
+
+@theme {
+  --font-sans: 'Inter', system-ui, sans-serif;
+
+  --radius: 0.5rem;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-brand-from: hsl(var(--brand-from));
+  --color-brand-via: hsl(var(--brand-via));
+  --color-brand-to: hsl(var(--brand-to));
+}
+
+:root {
+  --brand-from: 160 84% 39%;
+  --brand-via: 158 64% 52%;
+  --brand-to: 155 47% 59%;
+  --background: 210 20% 98%;
+  --foreground: 215 25% 10%;
+  --card: 0 0% 100%;
+  --card-foreground: 215 25% 10%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 215 25% 10%;
+  --primary: 160 84% 39%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 210 40% 96%;
+  --secondary-foreground: 215 25% 10%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215 16% 47%;
+  --accent: 210 40% 96%;
+  --accent-foreground: 215 25% 10%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 214 32% 91%;
+  --input: 214 32% 91%;
+  --ring: 160 84% 39%;
+}
+
+.dark {
+  --brand-from: 160 84% 39%;
+  --brand-via: 158 64% 52%;
+  --brand-to: 155 47% 59%;
+  --background: 215 28% 7%;
+  --foreground: 210 40% 98%;
+  --card: 215 28% 7%;
+  --card-foreground: 210 40% 98%;
+  --popover: 215 28% 7%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 160 84% 39%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 215 25% 15%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 215 25% 15%;
+  --muted-foreground: 215 20% 65%;
+  --accent: 215 25% 15%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 63% 31%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 215 25% 15%;
+  --input: 215 25% 15%;
+  --ring: 160 84% 39%;
+}
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+  body {
+    font-family: var(--font-sans);
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}

package/src/templates/web/iot-dashboard/template/src/app/layout.tsx

@@ -19,6 +19,9 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
         <AppProviders>
+          <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[90] focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-lg focus:outline-none">
+            Skip to content
+          </a>
           {children}
         </AppProviders>
       </body>

package/src/templates/web/iot-dashboard/template/src/app/loading.tsx

@@ -2,9 +2,9 @@ import { Card, SkeletonText } from '@digilogiclabs/saas-factory-ui'
 
 export default function Loading() {
   return (
-    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
+    <div className="min-h-screen bg-background">
       {/* Header skeleton */}
-      <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-4 py-4">
+      <div className="bg-card border-b border-border px-4 py-4">
         <div className="max-w-7xl mx-auto flex items-center justify-between">
           <div className="flex items-center gap-2">
             <SkeletonText className="h-8 w-8 rounded-lg" />
@@ -66,10 +66,10 @@ export default function Loading() {
         <div className="flex justify-center">
           <div className="flex items-center gap-3">
             <div className="relative">
-              <div className="w-8 h-8 border-4 border-slate-200 dark:border-slate-700 rounded-full"></div>
-              <div className="absolute top-0 left-0 w-8 h-8 border-4 border-emerald-600 border-t-transparent rounded-full animate-spin"></div>
+              <div className="w-8 h-8 border-4 border-border rounded-full"></div>
+              <div className="absolute top-0 left-0 w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
             </div>
-            <p className="text-sm text-slate-600 dark:text-slate-300">Loading IoT dashboard...</p>
+            <p className="text-sm text-muted-foreground">Loading IoT dashboard...</p>
           </div>
         </div>
       </div>