vibecarbon 0.7.0 → 0.9.0

package/carbon/src/client/index.css

@@ -32,146 +32,169 @@ body {
 
 @custom-variant dark (&:is(.dark *));
 
-/* Theme: Teal with Glassmorphism */
-/* Primary: Bright Teal, Secondary Accent: Magenta */
-/* Typography: Noto Sans, JetBrains Mono (code) */
+/* Theme: Refined Depth (dark) / Light Glass (light) */
+/* Primary: Teal, Secondary Accent: Magenta — single interactive accent,
+   semantic colors reserved for status, glass applied selectively (.glass) */
+/* Typography: Noto Sans (body + display), JetBrains Mono (code/data) */
 
 :root {
   /* ============================================
      CUSTOMIZE YOUR BRAND - Edit these values
      ============================================ */
-  --primary: oklch(0.82 0.14 192);           /* Brand primary (teal) */
-  --primary-dim: oklch(0.55 0.12 192);       /* Dimmed variant */
-  --primary-foreground: oklch(0.98 0.01 181);
-  --secondary-accent: oklch(0.45 0.2 350);   /* Brand accent (magenta) */
+  --primary: oklch(0.52 0.124 192);          /* Brand primary (deep teal, AA on light surfaces) */
+  --primary-dim: oklch(0.42 0.1 192);        /* Dimmed variant */
+  --primary-foreground: oklch(0.99 0.005 192);
+  --secondary-accent: oklch(0.47 0.2 350);   /* Brand accent (magenta) */
   --secondary-accent-foreground: oklch(0.99 0 0);
-  --destructive: oklch(0.525 0.223 3.958);   /* pink-700 */
+  --destructive: oklch(0.5 0.21 3.958);
   --info: var(--primary);
-  --warning: oklch(0.769 0.188 70.08);
-  --success: oklch(0.704 0.14 181);
+  --warning: oklch(0.62 0.13 75);
+  --success: oklch(0.5 0.12 181);
   --radius: 0.625rem;                        /* Border radius base */
   --radius-card: var(--radius-xl);           /* Cards, dialogs, panels */
 
   /* Glow effects (derived from brand colors) */
-  --glow-primary: oklch(0.82 0.14 192 / 0.25);
-  --glow-accent: oklch(0.58 0.24 350 / 0.25);
+  --glow-primary: oklch(0.52 0.124 192 / 0.12);
+  --glow-accent: oklch(0.47 0.2 350 / 0.1);
 
-  /* Light mode gradient (not visible by default) */
-  --gradient-start: oklch(1 0 0);
-  --gradient-end: oklch(0.98 0 0);
+  /* Canvas - pale cool gradient + faint ambient wash */
+  --gradient-start: oklch(0.985 0.005 220);
+  --gradient-end: oklch(0.945 0.014 215);
+  --canvas-wash: oklch(0.52 0.124 192 / 0.05);
 
   /* ============================================
      SURFACE COLORS - Rarely need customization
      ============================================ */
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.13 0.028 261.692);
+  /* Transparent background to show canvas (both modes) */
+  --background: transparent;
+  --foreground: oklch(0.17 0.025 250);
+
+  /* Standard cards - quiet near-opaque surfaces (glass is opt-in via .glass) */
+  --card: oklch(0.995 0.004 210 / 0.92);
+  --card-foreground: oklch(0.17 0.025 250);
 
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.13 0.028 261.692);
+  /* Glass surfaces - alpha gradient, light source top-left */
+  --glass-from: oklch(1 0 0 / 0.78);
+  --glass-to: oklch(0.97 0.01 215 / 0.58);
+  --glass-edge: oklch(1 0 0 / 0.65);
 
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.13 0.028 261.692);
+  /* Popovers/dropdowns - SOLID (float over arbitrary content) */
+  --popover: oklch(0.99 0.004 210);
+  --popover-foreground: oklch(0.17 0.025 250);
 
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.93 0.012 220 / 0.8);
+  --secondary-foreground: oklch(0.25 0.025 245);
 
-  --muted: oklch(0.967 0.003 264.542);
-  --muted-foreground: oklch(0.551 0.027 264.364);
+  --muted: oklch(0.94 0.01 220 / 0.7);
+  --muted-foreground: oklch(0.44 0.025 240);
 
-  /* Accent matches primary for bold menu accent */
-  --accent: var(--primary);
-  --accent-foreground: var(--primary-foreground);
+  /* Accent - subtle primary tint for hover states */
+  --accent: oklch(0.52 0.124 192 / 0.1);
+  --accent-foreground: oklch(0.3 0.08 192);
+
+  /* Hairline borders */
+  --border: oklch(0.45 0.03 230 / 0.16);
+  --input: oklch(0.5 0.03 230 / 0.3);
+  --ring: var(--primary);
 
-  --border: oklch(0.928 0.006 264.531);
-  --input: oklch(0.928 0.006 264.531);
-  --ring: oklch(0.707 0.022 261.325);
+  /* Elevation shadows - soft diffuse, cool-tinted */
+  --shadow-card: 0 1px 2px oklch(0.3 0.04 240 / 0.05), 0 10px 30px -10px oklch(0.3 0.05 240 / 0.12);
+  --shadow-pop: 0 4px 12px oklch(0.3 0.04 240 / 0.08), 0 16px 40px -12px oklch(0.3 0.05 240 / 0.18);
 
-  /* Chart colors - vibrant multi-hue palette */
+  /* Chart colors - brand pair first, then supporting hues */
   --chart-1: var(--primary);
-  --chart-2: var(--warning);
-  --chart-3: var(--destructive);
-  --chart-4: var(--success);
-  --chart-5: oklch(0.65 0.22 290);
-
-  /* Sidebar - Maia defaults with brand primary */
-  --sidebar: oklch(0.985 0.002 247.839);
-  --sidebar-foreground: oklch(0.13 0.028 261.692);
+  --chart-2: var(--secondary-accent);
+  --chart-3: oklch(0.5 0.17 275);
+  --chart-4: oklch(0.62 0.13 75);
+  --chart-5: oklch(0.54 0.11 155);
+
+  /* Sidebar - light glass rail */
+  --sidebar: oklch(0.975 0.007 212 / 0.55);
+  --sidebar-foreground: oklch(0.22 0.025 248);
   --sidebar-primary: var(--primary);
   --sidebar-primary-foreground: var(--primary-foreground);
-  --sidebar-accent: var(--primary);
-  --sidebar-accent-foreground: var(--primary-foreground);
-  --sidebar-border: oklch(0.928 0.006 264.531);
-  --sidebar-ring: oklch(0.707 0.022 261.325);
+  --sidebar-accent: oklch(0.52 0.124 192 / 0.12);
+  --sidebar-accent-foreground: oklch(0.3 0.08 192);
+  --sidebar-border: oklch(0.45 0.03 230 / 0.12);
+  --sidebar-ring: var(--primary);
 }
 
 .dark {
-  /* Primary - brighter dim variant in dark mode */
+  /* Primary - bright teal on dark, brighter dim variant */
   --primary: oklch(0.82 0.14 192);
   --primary-dim: oklch(0.65 0.12 192);
-  --primary-foreground: oklch(0.08 0 0);
+  --primary-foreground: oklch(0.1 0.02 220);
 
   /* Secondary accent (magenta) - brighter in dark mode */
   --secondary-accent: oklch(0.65 0.26 350);
   --secondary-accent-foreground: oklch(0.99 0 0);
 
-  /* Glow colors */
-  --glow-primary: oklch(0.82 0.14 192 / 0.5);
-  --glow-accent: oklch(0.65 0.26 350 / 0.5);
+  /* Glow colors - restrained, focal points only */
+  --glow-primary: oklch(0.82 0.14 192 / 0.28);
+  --glow-accent: oklch(0.65 0.26 350 / 0.25);
 
-  /* Body gradient colors */
-  --gradient-start: oklch(0.12 0.02 265);
-  --gradient-end: oklch(0.17 0.03 260);
+  /* Canvas - deep teal-tinted near-black + faint ambient wash */
+  --gradient-start: oklch(0.105 0.018 252);
+  --gradient-end: oklch(0.145 0.028 228);
+  --canvas-wash: oklch(0.82 0.14 192 / 0.09);
 
-  /* Transparent background to show gradient */
+  /* Transparent background to show canvas */
   --background: transparent;
-  --foreground: oklch(0.98 0 0);
+  --foreground: oklch(0.96 0.005 210);
+
+  /* Standard cards - quiet near-opaque surfaces */
+  --card: oklch(0.19 0.024 242 / 0.78);
+  --card-foreground: oklch(0.96 0.005 210);
 
-  /* Card surfaces - with transparency */
-  --card: oklch(0.28 0.04 255 / 0.5);
-  --card-foreground: oklch(0.98 0 0);
+  /* Glass surfaces - alpha gradient, light source top-left */
+  --glass-from: oklch(0.25 0.028 238 / 0.6);
+  --glass-to: oklch(0.16 0.022 246 / 0.45);
+  --glass-edge: oklch(1 0 0 / 0.1);
 
-  /* Popovers/dropdowns - cool-tinted to match body gradient */
-  --popover: oklch(0.18 0.02 260);
-  --popover-foreground: oklch(0.985 0 0);
+  /* Popovers/dropdowns - SOLID, cool-tinted to match canvas */
+  --popover: oklch(0.175 0.022 242);
+  --popover-foreground: oklch(0.97 0 0);
 
-  /* Secondary - muted gray */
-  --secondary: oklch(0.18 0 0);
-  --secondary-foreground: oklch(0.9 0 0);
+  --secondary: oklch(0.25 0.02 240);
+  --secondary-foreground: oklch(0.92 0.008 220);
 
-  /* Muted surfaces */
-  --muted: oklch(0.15 0 0);
-  --muted-foreground: oklch(0.707 0.022 261.325);
+  --muted: oklch(0.2 0.02 240 / 0.7);
+  --muted-foreground: oklch(0.71 0.02 228);
 
   /* Accent - subtle primary tint for hover states */
-  --accent: oklch(0.30 0.04 200 / 0.5);
-  --accent-foreground: oklch(0.98 0 0);
+  --accent: oklch(0.82 0.14 192 / 0.13);
+  --accent-foreground: oklch(0.96 0.005 210);
 
-  /* Destructive - vibrant red */
-  --destructive: oklch(0.525 0.223 3.958);
+  /* Status - lifted for dark-bg contrast */
+  --destructive: oklch(0.62 0.21 3.958);
   --info: var(--primary);
-  --warning: oklch(0.769 0.188 70.08);
+  --warning: oklch(0.77 0.188 70.08);
   --success: oklch(0.704 0.14 181);
 
-  /* Borders */
-  --border: oklch(0.33 0.025 195);
-  --input: oklch(1 0 0 / 15%);
+  /* Hairline borders - faint teal */
+  --border: oklch(0.9 0.03 200 / 0.12);
+  --input: oklch(1 0 0 / 0.12);
   --ring: var(--primary);
 
-  /* Chart colors - vibrant multi-hue palette */
+  /* Elevation shadows - inner top edge-light + deep soft drop */
+  --shadow-card: inset 0 1px 0 oklch(1 0 0 / 0.06), 0 8px 24px -12px oklch(0 0 0 / 0.5);
+  --shadow-pop: inset 0 1px 0 oklch(1 0 0 / 0.08), 0 16px 48px -16px oklch(0 0 0 / 0.65);
+
+  /* Chart colors - brand pair first, then supporting hues */
   --chart-1: var(--primary);
-  --chart-2: var(--warning);
-  --chart-3: var(--destructive);
-  --chart-4: var(--success);
-  --chart-5: oklch(0.65 0.22 290);
+  --chart-2: var(--secondary-accent);
+  --chart-3: oklch(0.72 0.15 275);
+  --chart-4: oklch(0.8 0.15 80);
+  --chart-5: oklch(0.76 0.12 155);
 
-  /* Sidebar */
+  /* Sidebar - transparent rail, canvas shows through */
   --sidebar: transparent;
-  --sidebar-foreground: oklch(0.98 0 0);
+  --sidebar-foreground: oklch(0.96 0.005 210);
   --sidebar-primary: var(--primary);
-  --sidebar-primary-foreground: oklch(0.08 0 0);
-  --sidebar-accent: var(--primary);
-  --sidebar-accent-foreground: oklch(0.08 0 0);
-  --sidebar-border: transparent;
+  --sidebar-primary-foreground: oklch(0.1 0.02 220);
+  --sidebar-accent: oklch(0.82 0.14 192 / 0.13);
+  --sidebar-accent-foreground: oklch(0.96 0.005 210);
+  --sidebar-border: oklch(0.9 0.03 200 / 0.08);
   --sidebar-ring: var(--primary);
 }
 
@@ -179,6 +202,12 @@ body {
   /* Typography */
   --font-sans: "Noto Sans Variable", "Noto Sans", system-ui, sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, monospace;
+  /* Display slot kept as an extension point; defaults to the body sans face. */
+  --font-display: var(--font-sans);
+
+  /* Elevation shadows (values cascade from :root/.dark) */
+  --shadow-card: var(--shadow-card);
+  --shadow-pop: var(--shadow-pop);
 
   /* Extended primary colors */
   --color-primary-dim: var(--primary-dim);
@@ -242,21 +271,31 @@ body {
   body {
     @apply font-sans bg-background text-foreground antialiased cursor-default;
   }
-  .dark body {
-    background: linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
+  /* Canvas: gradient + faint ambient wash (the "light" glass surfaces catch).
+     Both modes — --background is transparent so this shows through. */
+  body {
+    background:
+      radial-gradient(120% 80% at 75% -20%, var(--canvas-wash), transparent 55%),
+      linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
     background-attachment: fixed;
   }
   html {
     @apply font-sans;
   }
 
-  /* Bold headlines */
+  /* Headlines: refined weights + balanced wrapping (display slot = body sans) */
   h1,
-  h2,
+  h2 {
+    font-family: var(--font-display);
+    font-weight: 700;
+    letter-spacing: -0.015em;
+    text-wrap: balance;
+  }
   h3,
   h4 {
-    font-weight: 900;
-    letter-spacing: -0.02em;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    text-wrap: balance;
   }
 }
 
@@ -274,8 +313,19 @@ body {
    EFFECTS SYSTEM
    ============================================ */
 
-/* Film Grain Overlay */
-.film-grain::after {
+/* Glass surface — the ONLY glass treatment; applied selectively
+   (KPI strip, sidebar rail, marketing hero panels). Alpha gradient
+   mimics a top-left light source; border-top catches the light. */
+.glass {
+  background: linear-gradient(135deg, var(--glass-from), var(--glass-to));
+  backdrop-filter: blur(14px);
+  border: 1px solid var(--border);
+  border-top-color: var(--glass-edge);
+  box-shadow: var(--shadow-card);
+}
+
+/* Film Grain Overlay (dark mode only — reads as dirt on light surfaces) */
+.dark .film-grain::after {
   content: "";
   position: fixed;
   inset: 0;
@@ -287,30 +337,37 @@ body {
   background-repeat: repeat;
 }
 
-/* Glow utilities */
+/* Active nav — teal icon, the sidebar's single focal accent */
+[data-sidebar="menu-button"][data-active] svg {
+  color: var(--primary);
+  filter: drop-shadow(0 0 6px var(--glow-primary));
+}
+
+/* Glow utilities — restrained radii; reserved for focal points
+   (active nav, primary CTA, brand marks). Do not add new consumers. */
 .glow-teal {
-  box-shadow: 0 0 20px var(--glow-primary), 0 0 40px var(--glow-primary);
+  box-shadow: 0 0 12px var(--glow-primary), 0 0 28px var(--glow-primary);
 }
 
 .glow-magenta {
-  box-shadow: 0 0 20px var(--glow-accent), 0 0 40px var(--glow-accent);
+  box-shadow: 0 0 12px var(--glow-accent), 0 0 28px var(--glow-accent);
 }
 
 .glow-teal-subtle {
-  box-shadow: 0 0 15px var(--glow-primary);
+  box-shadow: 0 0 10px var(--glow-primary);
 }
 
 .glow-magenta-subtle {
-  box-shadow: 0 0 15px var(--glow-accent);
+  box-shadow: 0 0 10px var(--glow-accent);
 }
 
 /* Text glow */
 .text-glow-teal {
-  text-shadow: 0 0 20px var(--glow-primary), 0 0 40px var(--glow-primary);
+  text-shadow: 0 0 12px var(--glow-primary), 0 0 28px var(--glow-primary);
 }
 
 .text-glow-magenta {
-  text-shadow: 0 0 20px var(--glow-accent), 0 0 40px var(--glow-accent);
+  text-shadow: 0 0 12px var(--glow-accent), 0 0 28px var(--glow-accent);
 }
 
 /* Border glow on hover */
@@ -319,11 +376,11 @@ body {
 }
 
 .border-glow-teal:hover {
-  box-shadow: 0 0 0 1px var(--primary), 0 0 15px var(--glow-primary);
+  box-shadow: 0 0 0 1px var(--primary), 0 0 10px var(--glow-primary);
 }
 
 .border-glow-magenta:hover {
-  box-shadow: 0 0 0 1px var(--secondary-accent), 0 0 15px var(--glow-accent);
+  box-shadow: 0 0 0 1px var(--secondary-accent), 0 0 10px var(--glow-accent);
 }
 
 /* Sparkle shimmer for premium badges */
@@ -336,6 +393,7 @@ body {
   background-size: 200% 100%;
   animation: shimmer 3s ease-in-out infinite;
 }
+@media (prefers-reduced-motion: reduce) { .badge-shimmer { animation: none; } }
 
 /* Marquee for LogoStrip */
 @keyframes marquee-scroll {
@@ -357,8 +415,9 @@ body {
 .hero-orb { animation: orb-pulse 6s ease-in-out infinite; }
 @media (prefers-reduced-motion: reduce) { .hero-orb { animation: none; } }
 
-/* Spotlight particle dots for glass containers */
-.spotlight-particles {
+/* Spotlight particle dots for glass containers (dark mode only — white dots
+   read as noise on light surfaces) */
+.dark .spotlight-particles {
   background-image: radial-gradient(circle, oklch(1 0 0 / 0.5) 1px, transparent 1px);
   background-size: 24px 24px;
   mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, black 0%, transparent 80%);
@@ -458,4 +517,27 @@ body {
   :where(tr):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover {
     background-color: oklch(0.20 0.02 260 / 0.3);
   }
+}
+
+/* ============================================
+   REDUCED TRANSPARENCY - solidify glass surfaces
+   ============================================ */
+
+@media (prefers-reduced-transparency: reduce) {
+  :root {
+    --card: oklch(0.99 0.004 210);
+    --sidebar: oklch(0.975 0.007 212);
+    --glass-from: oklch(0.99 0.004 210);
+    --glass-to: oklch(0.97 0.008 212);
+  }
+  .dark {
+    --card: oklch(0.19 0.024 242);
+    --sidebar: oklch(0.13 0.02 245);
+    --glass-from: oklch(0.21 0.024 242);
+    --glass-to: oklch(0.17 0.022 244);
+  }
+  .glass,
+  [data-slot="sidebar-inner"] {
+    backdrop-filter: none;
+  }
 }

package/carbon/src/client/lib/theme.ts

@@ -1,25 +1,25 @@
 // Default values mirroring index.css
 export const DEFAULT_THEME = {
   light: {
-    gradientStart: 'oklch(1 0 0)',
-    gradientEnd: 'oklch(0.98 0 0)',
-    card: 'oklch(1 0 0)',
-    primary: 'oklch(0.82 0.14 192)',
-    primaryDim: 'oklch(0.55 0.12 192)',
-    primaryForeground: 'oklch(0.98 0.01 181)',
-    secondaryAccent: 'oklch(0.45 0.2 350)',
+    gradientStart: 'oklch(0.985 0.005 220)',
+    gradientEnd: 'oklch(0.945 0.014 215)',
+    card: 'oklch(0.995 0.004 210 / 0.92)',
+    primary: 'oklch(0.52 0.124 192)',
+    primaryDim: 'oklch(0.42 0.1 192)',
+    primaryForeground: 'oklch(0.99 0.005 192)',
+    secondaryAccent: 'oklch(0.47 0.2 350)',
     secondaryAccentForeground: 'oklch(0.99 0 0)',
-    destructive: 'oklch(0.525 0.223 3.958)',
-    warning: 'oklch(0.769 0.188 70.08)',
-    success: 'oklch(0.704 0.14 181)',
+    destructive: 'oklch(0.5 0.21 3.958)',
+    warning: 'oklch(0.62 0.13 75)',
+    success: 'oklch(0.5 0.12 181)',
   },
   dark: {
-    gradientStart: 'oklch(0.12 0.02 265)',
-    gradientEnd: 'oklch(0.17 0.03 260)',
-    card: 'oklch(0.28 0.04 255 / 0.5)',
+    gradientStart: 'oklch(0.105 0.018 252)',
+    gradientEnd: 'oklch(0.145 0.028 228)',
+    card: 'oklch(0.19 0.024 242 / 0.78)',
     primary: 'oklch(0.82 0.14 192)',
     primaryDim: 'oklch(0.65 0.12 192)',
-    primaryForeground: 'oklch(0.08 0 0)',
+    primaryForeground: 'oklch(0.1 0.02 220)',
     secondaryAccent: 'oklch(0.65 0.26 350)',
     secondaryAccentForeground: 'oklch(0.99 0 0)',
   },

package/carbon/src/client/locales/en.json

@@ -274,7 +274,7 @@
     "hero": {
       "badge": "Fully Automated · Self-Hosted",
       "headline1": "Professional Grade",
-      "subheading": "Full-stack SaaS starter kit with automated everything — built for AI-driven development.",
+      "subheading": "Full-stack SaaS starter with the most easy-to-use DevOps CLI ever. Built for AI-driven development.",
       "getUpdates": "Get Updates"
     },
     "logoStrip": {
@@ -285,15 +285,15 @@
       "subheading": "Provision, deploy, and scale from the CLI",
       "create": {
         "label": "Create",
-        "description": "Full-stack app with auth, database, API, and Kubernetes manifests — ready to go."
+        "description": "Full-stack SaaS template with everything you need build, deploy, and maintain advanced applications."
       },
       "develop": {
         "label": "Develop",
-        "description": "Spin up your entire dev environment: database, auth, API, and hot-reloading frontend."
+        "description": "Spin up a dev environment for building your app using AI, complete with security guardrails and a hot-reloading frontend."
       },
       "deploy": {
         "label": "Deploy",
-        "description": "Provision a VPS or Kubernetes cluster with SSL, HA, backups, and CI/CD in one command."
+        "description": "Deploy on Hetzner with Docker Compose or Kubernetes. Complete with backups, auto-scaling, high-availability, and more advanced features with simple commands."
       }
     },
     "techStack": {

package/carbon/src/client/pages/Blog.tsx

@@ -109,7 +109,7 @@ export function BlogPost() {
           </div>
         </header>
 
-        <article className="prose prose-invert max-w-none">
+        <article className="prose dark:prose-invert max-w-none">
           <post.Component />
         </article>
 

package/carbon/src/client/pages/Changelog.tsx

@@ -107,7 +107,7 @@ export function ChangelogEntry() {
           </div>
         </header>
 
-        <article className="prose prose-invert max-w-none">
+        <article className="prose dark:prose-invert max-w-none">
           <entry.Component />
         </article>