failproofai 0.0.10-beta.8 → 0.0.10

package/.next/standalone/app/globals.css

@@ -3,81 +3,45 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --accent: #031035;
-  --accent-light: #0a1a4a;
-  --accent-lighter: #1a2a5a;
-  --accent-lightest: #2a3a6a;
-  --radius: 0.625rem;
-  
-  /* Updated Color Palette based on #031035 and accents */
-  --background: #031035; /* Deep navy primary */
-  --foreground: #f8fafc; /* Light text */
-  --card: #0a1a4a; /* Slightly lighter navy for cards */
-  --card-foreground: #f8fafc;
-  --popover: #0a1a4a;
-  --popover-foreground: #f8fafc;
-  --primary: #87ceeb; /* Sky blue accent */
-  --primary-foreground: #031035;
-  --secondary: #1a2a5a; /* Medium navy */
-  --secondary-foreground: #f8fafc;
-  --muted: #2a3a6a; /* Muted navy */
-  --muted-foreground: #94a3b8; /* Light gray text */
-  --accent-foreground: #f8fafc;
-  --destructive: #ff6b8a; /* Pink accent for errors */
-  --border: #1a2a5a; /* Navy border */
-  --input: #1a2a5a; /* Navy input background */
-  --ring: #87ceeb; /* Sky blue focus ring */
-  --chart-1: #87ceeb; /* Sky blue */
-  --chart-2: #66d1b5; /* Green accent */
-  --chart-3: #ffed9e; /* Yellow accent */
-  --chart-4: #ff6b8a; /* Pink accent */
-  --chart-5: #a78bfa; /* Purple accent */
-  --sidebar: #0a1a4a;
-  --sidebar-foreground: #f8fafc;
-  --sidebar-primary: #87ceeb;
-  --sidebar-primary-foreground: #031035;
-  --sidebar-accent: #1a2a5a;
-  --sidebar-accent-foreground: #f8fafc;
-  --sidebar-border: #1a2a5a;
-  --sidebar-ring: #87ceeb;
-}
-
-/* Light Mode Variables */
-.light {
-  --background: #ffffff; /* White background */
-  --foreground: #031035; /* Dark navy text */
-  --card: #f2f7fb; /* Light card background */
-  --card-foreground: #031035;
-  --popover: #ffffff;
-  --popover-foreground: #031035;
-  --primary: #031035; /* Dark navy primary (keeping dark blue accent) */
-  --primary-foreground: #ffffff;
-  --secondary: #f1f5f9; /* Light gray secondary */
-  --secondary-foreground: #031035;
-  --muted: #f1f5f9; /* Light muted background */
-  --muted-foreground: #64748b; /* Medium gray text */
-  --accent: #031035; /* Keep dark blue accent */
-  --accent-light: #0a1a4a; /* Keep dark blue accent */
-  --accent-lighter: #1a2a5a; /* Keep dark blue accent */
-  --accent-lightest: #2a3a6a; /* Keep dark blue accent */
-  --accent-foreground: #ffffff;
-  --destructive: #dc2626; /* Red for errors in light mode */
-  --border: #e2e8f0; /* Light border */
-  --input: #ffffff; /* White input background */
-  --ring: #87ceeb; /* Keep sky blue focus ring */
-  --chart-1: #87ceeb; /* Sky blue */
-  --chart-2: #4ade80; /* Green accent */
-  --chart-3: #cca301; /* Yellow accent */
-  --chart-4: #ff6b8a; /* Pink accent */
-  --chart-5: #a78bfa; /* Purple accent */
-  --sidebar: #f8fafc;
-  --sidebar-foreground: #031035;
-  --sidebar-primary: #031035; /* Dark navy for sidebar primary in light mode */
-  --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #f1f5f9;
-  --sidebar-accent-foreground: #031035;
-  --sidebar-border: #e2e8f0;
-  --sidebar-ring: #87ceeb;
+  --radius: 0.5rem;
+
+  /* Near-black canvas + brand pink accent — failproofai brand: pink primary
+     (#e4587d, from docs/docs.json colors.light) with green status reserved
+     for chart-2 / success indicators (the leaf gradient family). */
+  --background: #0a0a0a;
+  --foreground: #fafafa;
+  --card: #141416;
+  --card-foreground: #fafafa;
+  --popover: #141416;
+  --popover-foreground: #fafafa;
+  --primary: #e4587d;
+  --primary-foreground: #0a0a0a;
+  --secondary: #1f1f22;
+  --secondary-foreground: #fafafa;
+  --muted: #1f1f22;
+  --muted-foreground: #a1a1aa;
+  --accent: #e4587d;
+  --accent-light: #f08aa6;
+  --accent-lighter: #f7b3c5;
+  --accent-lightest: #fbd5de;
+  --accent-foreground: #0a0a0a;
+  --destructive: #ef4444;
+  --border: #27272a;
+  --input: #27272a;
+  --ring: #e4587d;
+  --chart-1: #e4587d;
+  --chart-2: #4ade80;
+  --chart-3: #fbbf24;
+  --chart-4: #f87171;
+  --chart-5: #a78bfa;
+  --sidebar: #141416;
+  --sidebar-foreground: #fafafa;
+  --sidebar-primary: #e4587d;
+  --sidebar-primary-foreground: #0a0a0a;
+  --sidebar-accent: #1f1f22;
+  --sidebar-accent-foreground: #fafafa;
+  --sidebar-border: #27272a;
+  --sidebar-ring: #e4587d;
 }
 
 /* Custom Scrollbar Styling */
@@ -92,13 +56,13 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--chart-1);
+  background: var(--border);
   border-radius: var(--radius);
   transition: background 0.2s ease;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--accent-lightest);
+  background: var(--primary);
 }
 
 ::-webkit-scrollbar-corner {
@@ -118,8 +82,8 @@
   --color-accent-light: var(--accent-light);
   --color-accent-lighter: var(--accent-lighter);
   --color-accent-lightest: var(--accent-lightest);
-  --font-sans: system-ui, -apple-system, sans-serif;
-  --font-mono: ui-monospace, monospace;
+  --font-sans: var(--font-sans, system-ui, -apple-system, sans-serif);
+  --font-mono: var(--font-mono, ui-monospace, monospace);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -159,24 +123,35 @@
     @apply border-border outline-ring/50;
   }
   html {
-    font-size: 120%; /* Increased from default 16px */
+    font-size: 120%;
   }
   body {
     @apply bg-background text-foreground font-sans;
+
+    position: relative;
+  }
+  /* Faint pink vignette at the top — atmosphere without ornament. */
+  body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    background:
+      radial-gradient(ellipse 90% 60% at 50% -10%, rgba(228, 88, 125, 0.07), transparent 65%);
+  }
+  body > * {
+    position: relative;
+    z-index: 1;
   }
   input[type="checkbox"] {
     accent-color: var(--primary);
   }
-  
-  /* Custom select dropdown styling for better theme support */
+
   select {
-    color-scheme: light dark;
-  }
-  
-  .light select {
-    color-scheme: light;
+    color-scheme: dark;
   }
-  
+
   select option {
     background-color: var(--popover);
     color: var(--popover-foreground);
@@ -186,6 +161,7 @@
   input[type="date"] {
     position: relative;
     overflow: visible;
+    color-scheme: dark;
   }
 
   input[type="date"]::-webkit-calendar-picker-indicator {
@@ -198,7 +174,6 @@
     cursor: pointer;
   }
 
-  /* Custom date picker calendar styling */
   input[type="date"]::-webkit-datetime-edit {
     display: inline-flex;
     align-items: center;
@@ -212,13 +187,7 @@
     padding: 0 0.2rem;
   }
 
-  input[type="date"]::-webkit-datetime-edit-month-field {
-    color: var(--foreground);
-    padding: 0 0.15rem;
-    width: 2.5ch;
-    min-width: 2.5ch;
-  }
-
+  input[type="date"]::-webkit-datetime-edit-month-field,
   input[type="date"]::-webkit-datetime-edit-day-field {
     color: var(--foreground);
     padding: 0 0.15rem;
@@ -242,29 +211,17 @@
     color: var(--foreground);
     border-radius: 0.25rem;
   }
-
-  /* Firefox date input styling */
-  input[type="date"] {
-    color-scheme: dark;
-  }
-
-  .light input[type="date"] {
-    color-scheme: light;
-  }
-
-  #__loading { display: none !important; }
-  body > * { opacity: 1 !important; }
 }
 
 @keyframes entry-highlight {
-  0% { background-color: hsl(var(--primary) / 0.15); }
+  0%   { background-color: color-mix(in oklch, var(--primary), transparent 82%); }
   100% { background-color: transparent; }
 }
 .entry-highlighted {
   animation: entry-highlight 3s ease-out forwards;
-  outline: 2px solid hsl(var(--primary) / 0.4);
+  outline: 1px solid color-mix(in oklch, var(--primary), transparent 55%);
   outline-offset: -1px;
-  border-radius: 0.5rem;
+  border-radius: var(--radius);
 }
 
 @keyframes expand-in {

package/.next/standalone/app/layout.tsx

@@ -1,20 +1,24 @@
 /**
- * Root layout — wraps every page with the theme provider and navbar.
+ * Root layout — single dark theme, no toggle.
  *
- * An inline `<script>` in `<head>` reads the user's theme preference
- * from `localStorage` (or falls back to `prefers-color-scheme`) and
- * applies the `light`/`dark` class to `<html>` *before* first paint,
- * preventing a flash of the wrong theme.
+ * Light mode was removed in #332. The `dark` class is rendered statically on
+ * `<html>` so there's no theme indeterminacy and no inline script is needed.
  */
 import type { Metadata } from "next";
+import { Geist_Mono } from "next/font/google";
 import { PostHogProvider } from "@/contexts/PostHogContext";
 import { GlobalErrorListeners } from "@/app/components/global-error-listeners";
-import { ThemeProvider } from "@/contexts/ThemeContext";
 import { AutoRefreshProvider } from "@/contexts/AutoRefreshContext";
 import { Navbar } from "@/components/navbar";
 import { Toaster } from "@/app/components/toast";
 import "./globals.css";
 
+const geistMono = Geist_Mono({
+  subsets: ["latin"],
+  variable: "--font-mono",
+  display: "swap",
+});
+
 export const metadata: Metadata = {
   title: "Failproof AI - Hooks & Project Monitor",
   description: "Open-source hooks, policies, and project visualization for Claude Code & Agents SDK",
@@ -31,59 +35,15 @@ export default function RootLayout({
   const disabledPages = (process.env.FAILPROOFAI_DISABLE_PAGES ?? "")
     .split(",").map((s) => s.trim()).filter(Boolean);
   return (
-    <html lang="en" suppressHydrationWarning>
-      <head>
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-              (function() {
-                try {
-                  // Ensure we don't add duplicate classes
-                  document.documentElement.classList.remove('light', 'dark');
-                  
-                  var theme = localStorage.getItem('theme');
-                  if (theme && (theme === 'light' || theme === 'dark')) {
-                    document.documentElement.classList.add(theme);
-                  } else {
-                    document.documentElement.classList.add('dark');
-                  }
-                } catch (e) {
-                  // Fallback to dark theme if there's any error
-                  document.documentElement.classList.remove('light', 'dark');
-                  document.documentElement.classList.add('dark');
-                }
-              })();
-            `,
-          }}
-        />
-        <style
-          dangerouslySetInnerHTML={{
-            __html: `
-              #__loading {
-                position: fixed; inset: 0; z-index: 9999;
-                display: flex; align-items: center; justify-content: center;
-                background: var(--background, #031035);
-                color: var(--foreground, #f8fafc);
-                font-family: system-ui, sans-serif;
-                font-size: 1rem;
-                transition: opacity 0.15s;
-              }
-              body > *:not(#__loading) { opacity: 0; }
-            `,
-          }}
-        />
-      </head>
+    <html lang="en" className={`${geistMono.variable} dark`}>
       <body className="antialiased">
-        <div id="__loading">Loading…</div>
         <PostHogProvider>
           <GlobalErrorListeners />
-          <ThemeProvider>
-            <AutoRefreshProvider>
-              <Navbar disabledPages={disabledPages} />
-              {children}
-            </AutoRefreshProvider>
-            <Toaster />
-          </ThemeProvider>
+          <AutoRefreshProvider>
+            <Navbar disabledPages={disabledPages} />
+            {children}
+          </AutoRefreshProvider>
+          <Toaster />
         </PostHogProvider>
       </body>
     </html>