feat(theme): enable light theme

Author: developerfred

src/app/globals.css

@@ -1,26 +1,255 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
+:root {  
+  --background: #FFFFFF;
+  --surface: #F7F7F9;
+  --surface-variant: #EEEEF2;
+  
+  --text-primary: #18181B;
+  --text-secondary: #52525B;
+  --text-tertiary: #71717A;
+  
+  --border: #E4E4E7;
+  --divider: #F1F1F4;
+  
+  --success: #22C55E;
+  --error: #EF4444;
+  --warning: #F59E0B;
+  --info: #3B82F6;
+  
+  
+  --network-primary: #E6007A;
+  --network-secondary: #BC318F;
+  --network-light: #FAE6F2;
+  --network-dark: #9C0054;
+  
+  
+  --elevation-level0: none;
+  --elevation-level1: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --elevation-level2: 0 3px 6px rgba(0, 0, 0, 0.12);
+  --elevation-level3: 0 8px 16px rgba(0, 0, 0, 0.15);
+  
+  
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+
+[data-theme="dark"] {
+  --background: #0F0F14;
+  --surface: #1C1C24;
+  --surface-variant: #2D2D3A;
+  
+  --text-primary: #F4F4F6;
+  --text-secondary: #A1A1AA;
+  --text-tertiary: #8E8E99;
+  
+  --border: #303042;
+  --divider: #27272F;
+  
+  --success: #4ADE80;
+  --error: #F87171;
+  --warning: #FBBF24;
+  --info: #60A5FA;
+  
+  
 }
 
+
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  background-color: var(--background);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+
+[data-network="westend"] {
+  --network-primary: #46DDD2;
+  --network-secondary: #37B3AA;
+  --network-light: #E0FAF8;
+  --network-dark: #2C8C85;
+}
+
+[data-network="paseo"] {
+  --network-primary: #FF7B00;
+  --network-secondary: #D98A37;
+  --network-light: #FFF0E0;
+  --network-dark: #B35600;
+}
+
+[data-network="rococo"] {
+  --network-primary: #7D42BC;
+  --network-secondary: #6340A8;
+  --network-light: #F0E5FF; 
+  --network-dark: #512C7E;
+}
+
+
+.bg-theme-surface {
+  background-color: var(--surface);
+}
+
+.bg-theme-surface-variant {
+  background-color: var(--surface-variant);
+}
+
+.border-theme {
+  border-color: var(--border);
+}
+
+.text-theme-primary {
+  color: var(--text-primary);
+}
+
+.text-theme-secondary {
+  color: var(--text-secondary);
 }
+
+.text-theme-tertiary {
+  color: var(--text-tertiary);
+}
+
+.bg-network-primary {
+  background-color: var(--network-primary);
+}
+
+.text-network-primary {
+  color: var(--network-primary);
+}
+
+.border-network-primary {
+  border-color: var(--network-primary);
+}
+
+
+.network-transition {
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.fade-in {
+  animation: fadeIn 0.2s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.scale-in {
+  animation: scaleIn 0.2s ease-out;
+}
+
+@keyframes scaleIn {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+
+.monaco-editor {
+  transition: background-color 0.3s;
+}
+
+
+:focus-visible {
+  outline: 2px solid var(--network-primary);
+  outline-offset: 2px;
+}
+
+
+
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideInDown {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+.animate-slideInDown {
+  animation: slideInDown 0.3s ease-out;
+}
+
+.animate-slideInRight {
+  animation: slideInRight 0.3s ease-out;
+}
+
+.animate-pulse-slow {
+  animation: pulse 2s infinite ease-in-out;
+}
+
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--surfaceVariant);
+  border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--network-primary);
+  border-radius: 8px;
+  opacity: 0.7;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  opacity: 1;
+}
+
+
+:focus-visible {
+  outline: 2px solid var(--network-primary);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+
+::selection {
+  background-color: var(--network-primary);
+  color: white;
+}
+
+
+@media (max-width: 768px) {
+  .container {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  .card-compact {
+    padding: 12px !important;
+  }
+}

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { ThemeProvider } from "@/lib/theme/ThemeProvider";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -27,8 +28,8 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <ThemeProvider>{children}</ThemeProvider>
       </body>
     </html>
   );
-}
+}