From 7589046bbed3832f9f5004fdc97c98ac63033f8c Mon Sep 17 00:00:00 2001
From: AndyMik90 <andre@mikalsenutvikling.no>
Date: Sat, 20 Dec 2025 01:37:09 +0100
Subject: [PATCH] auto-claude: 2.4 - Add Retro theme CSS variables (light and
 dark)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add [data-theme="retro"] and [data-theme="retro"].dark CSS blocks with
warm amber/orange palette mapped to app variables:

Light mode:
- Background: #FEF3C7 (warm cream/amber)
- Primary accent: #D97706 (amber/orange)
- Text: #78350F (warm brown)

Dark mode:
- Background: #1C1917 (warm stone/charcoal)
- Primary accent: #FBBF24 (bright gold/amber)
- Text: #FEFCE8 (cream/off-white)

All color variables mapped to the app's variable naming convention,
following the same pattern as existing Dusk, Lime, and Ocean themes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/renderer/styles/globals.css           | 134 ++++++++++++++++++
 1 file changed, 134 insertions(+)

diff --git a/auto-claude-ui/src/renderer/styles/globals.css b/auto-claude-ui/src/renderer/styles/globals.css
index 391a71e4..1b6defc3 100644
--- a/auto-claude-ui/src/renderer/styles/globals.css
+++ b/auto-claude-ui/src/renderer/styles/globals.css
@@ -606,6 +606,140 @@
   --shadow-focus: 0 0 0 3px rgba(56, 189, 248, 0.3);
 }
 
+/* ============================================
+   RETRO THEME (Light)
+   Warm, nostalgic amber/orange vibes
+   ============================================ */
+[data-theme="retro"] {
+  /* Backgrounds */
+  --background: #FEF3C7;
+  --foreground: #78350F;
+
+  /* Card surfaces */
+  --card: #FFFFFF;
+  --card-foreground: #78350F;
+
+  /* Primary accent - warm amber/orange */
+  --primary: #D97706;
+  --primary-foreground: #FFFFFF;
+
+  /* Secondary */
+  --secondary: #FFFBEB;
+  --secondary-foreground: #78350F;
+
+  /* Muted */
+  --muted: #FEFCE8;
+  --muted-foreground: #92400E;
+
+  /* Accent */
+  --accent: #FEF3C7;
+  --accent-foreground: #D97706;
+
+  /* Destructive */
+  --destructive: #B91C1C;
+  --destructive-foreground: #FFFFFF;
+
+  /* Borders and inputs */
+  --border: #FDE68A;
+  --input: #FDE68A;
+  --ring: #D97706;
+
+  /* Sidebar */
+  --sidebar: #FFFFFF;
+  --sidebar-foreground: #78350F;
+
+  /* Popover */
+  --popover: #FFFFFF;
+  --popover-foreground: #78350F;
+
+  /* Semantic colors */
+  --success: #15803D;
+  --success-foreground: #FFFFFF;
+  --success-light: #DCFCE7;
+  --warning: #CA8A04;
+  --warning-foreground: #78350F;
+  --warning-light: #FEF9C3;
+  --info: #1D4ED8;
+  --info-foreground: #FFFFFF;
+  --info-light: #DBEAFE;
+  --error: #B91C1C;
+  --error-light: #FEE2E2;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
+  --shadow-focus: 0 0 0 3px rgba(217, 119, 6, 0.2);
+}
+
+/* ============================================
+   RETRO THEME (Dark)
+   Warm stone/brown tones with golden accents
+   ============================================ */
+[data-theme="retro"].dark {
+  /* Backgrounds */
+  --background: #1C1917;
+  --foreground: #FEFCE8;
+
+  /* Card surfaces */
+  --card: #44403C;
+  --card-foreground: #FEFCE8;
+
+  /* Primary accent - bright amber/gold */
+  --primary: #FBBF24;
+  --primary-foreground: #1C1917;
+
+  /* Secondary */
+  --secondary: #292524;
+  --secondary-foreground: #FEFCE8;
+
+  /* Muted */
+  --muted: #1C1917;
+  --muted-foreground: #FDE68A;
+
+  /* Accent */
+  --accent: #451A03;
+  --accent-foreground: #FBBF24;
+
+  /* Destructive */
+  --destructive: #F87171;
+  --destructive-foreground: #1C1917;
+
+  /* Borders and inputs */
+  --border: #78716C;
+  --input: #78716C;
+  --ring: #FBBF24;
+
+  /* Sidebar */
+  --sidebar: #1C1917;
+  --sidebar-foreground: #FEFCE8;
+
+  /* Popover */
+  --popover: #57534E;
+  --popover-foreground: #FEFCE8;
+
+  /* Semantic colors */
+  --success: #4ADE80;
+  --success-foreground: #1C1917;
+  --success-light: #14532D;
+  --warning: #FACC15;
+  --warning-foreground: #1C1917;
+  --warning-light: #422006;
+  --info: #60A5FA;
+  --info-foreground: #1C1917;
+  --info-light: #1E3A8A;
+  --error: #F87171;
+  --error-light: #450A0A;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8);
+  --shadow-focus: 0 0 0 3px rgba(251, 191, 36, 0.3);
+}
+
 /* Base styles */
 * {
   border-color: var(--border);