auto-claude: 2.2 - Add [data-theme="lime"] CSS theme blocks

Add lime theme CSS variables for both light and dark modes: - Light: Fresh lime background (#E8F5A3) with purple accent (#7C3AED) - Dark: Deep purple undertones (#0F0F1A) with bright purple (#8B5CF6) - Maps design system color variables to app's variable naming convention 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-20 01:33:00 +01:00
parent bcbced24e5
commit 76c1bd7578
1 changed files with 134 additions and 0 deletions
@@ -338,6 +338,140 @@
  --shadow-focus: 0 0 0 2px rgba(230, 231, 163, 0.25);
 }

+/* ============================================
+   LIME THEME (Light)
+   Fresh, energetic lime/chartreuse theme
+   ============================================ */
+[data-theme="lime"] {
+  /* Backgrounds */
+  --background: #E8F5A3;
+  --foreground: #1A1A2E;
+
+  /* Card surfaces */
+  --card: #FFFFFF;
+  --card-foreground: #1A1A2E;
+
+  /* Primary accent - purple for contrast against lime */
+  --primary: #7C3AED;
+  --primary-foreground: #FFFFFF;
+
+  /* Secondary */
+  --secondary: #F5F9E8;
+  --secondary-foreground: #1A1A2E;
+
+  /* Muted */
+  --muted: #F8FAFC;
+  --muted-foreground: #64748B;
+
+  /* Accent */
+  --accent: #EDE9FE;
+  --accent-foreground: #7C3AED;
+
+  /* Destructive */
+  --destructive: #DC2626;
+  --destructive-foreground: #FFFFFF;
+
+  /* Borders and inputs */
+  --border: #E2E8F0;
+  --input: #E2E8F0;
+  --ring: #7C3AED;
+
+  /* Sidebar */
+  --sidebar: #FFFFFF;
+  --sidebar-foreground: #1A1A2E;
+
+  /* Popover */
+  --popover: #FFFFFF;
+  --popover-foreground: #1A1A2E;
+
+  /* Semantic colors */
+  --success: #059669;
+  --success-foreground: #FFFFFF;
+  --success-light: #D1FAE5;
+  --warning: #D97706;
+  --warning-foreground: #FFFFFF;
+  --warning-light: #FEF3C7;
+  --info: #2563EB;
+  --info-foreground: #FFFFFF;
+  --info-light: #DBEAFE;
+  --error: #DC2626;
+  --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(124, 58, 237, 0.2);
+}
+
+/* ============================================
+   LIME THEME (Dark)
+   Fresh lime theme with deep purple undertones
+   ============================================ */
+[data-theme="lime"].dark {
+  /* Backgrounds */
+  --background: #0F0F1A;
+  --foreground: #F8FAFC;
+
+  /* Card surfaces */
+  --card: #1E1E2E;
+  --card-foreground: #F8FAFC;
+
+  /* Primary accent - bright purple for dark mode */
+  --primary: #8B5CF6;
+  --primary-foreground: #0F0F1A;
+
+  /* Secondary */
+  --secondary: #1A1A2E;
+  --secondary-foreground: #F8FAFC;
+
+  /* Muted */
+  --muted: #13131F;
+  --muted-foreground: #A1A1B5;
+
+  /* Accent */
+  --accent: #2E2350;
+  --accent-foreground: #8B5CF6;
+
+  /* Destructive */
+  --destructive: #F87171;
+  --destructive-foreground: #0F0F1A;
+
+  /* Borders and inputs */
+  --border: #2E2E40;
+  --input: #2E2E40;
+  --ring: #8B5CF6;
+
+  /* Sidebar */
+  --sidebar: #13131F;
+  --sidebar-foreground: #F8FAFC;
+
+  /* Popover */
+  --popover: #262638;
+  --popover-foreground: #F8FAFC;
+
+  /* Semantic colors */
+  --success: #34D399;
+  --success-foreground: #0F0F1A;
+  --success-light: #134E4A;
+  --warning: #FBBF24;
+  --warning-foreground: #0F0F1A;
+  --warning-light: #451A03;
+  --info: #60A5FA;
+  --info-foreground: #0F0F1A;
+  --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(139, 92, 246, 0.3);
+}
+
 /* Base styles */
 * {
  border-color: var(--border);