/** * Theme presets with complete CSS variable sets. * Each preset contains ALL variables for :root (light) and .dark modes. * * CSS variables are in HSL format (e.g., "266 4% 20.8%") without the "hsl()" wrapper. */ export interface ThemePreset { id: string; name: string; description: string; previewColors: string[]; // Colors with hsl() wrapper for display light: Record; // CSS variables for :root dark: Record; // CSS variables for .dark } export const THEME_PRESETS: ThemePreset[] = [ { id: 'default', name: 'Default', description: 'Neutral, clean', previewColors: ['hsl(266 4% 20.8%)', 'hsl(248 0.7% 96.8%)', 'hsl(257 4% 70.4%)'], light: { 'background': '0 0% 100%', 'foreground': '265 4% 12.9%', 'card': '0 0% 100%', 'card-foreground': '265 4% 12.9%', 'popover': '0 0% 100%', 'popover-foreground': '265 4% 12.9%', 'primary': '266 4% 20.8%', 'primary-foreground': '248 0.3% 98.4%', 'secondary': '248 0.7% 96.8%', 'secondary-foreground': '266 4% 20.8%', 'muted': '248 0.7% 96.8%', 'muted-foreground': '257 4.6% 55.4%', 'accent': '248 0.7% 96.8%', 'accent-foreground': '266 4% 20.8%', 'destructive': '27 24.5% 57.7%', 'destructive-foreground': '0 0% 100%', 'border': '256 1.3% 92.9%', 'input': '256 1.3% 92.9%', 'ring': '257 4% 70.4%', 'chart-1': '41 22.2% 64.6%', 'chart-2': '185 11.8% 60%', 'chart-3': '227 7% 39.8%', 'chart-4': '84 18.9% 82.8%', 'chart-5': '70 18.8% 76.9%', 'sidebar': '248 0.3% 98.4%', 'sidebar-foreground': '265 4% 12.9%', 'sidebar-primary': '266 4% 20.8%', 'sidebar-primary-foreground': '248 0.3% 98.4%', 'sidebar-accent': '248 0.7% 96.8%', 'sidebar-accent-foreground': '266 4% 20.8%', 'sidebar-border': '256 1.3% 92.9%', 'sidebar-ring': '257 4% 70.4%', 'radius': '0.375rem', }, dark: { 'background': '0 0% 15%', 'foreground': '248 0.3% 98.4%', 'card': '266 4% 20.8%', 'card-foreground': '248 0.3% 98.4%', 'popover': '266 4% 20.8%', 'popover-foreground': '248 0.3% 98.4%', 'primary': '256 1.3% 92.9%', 'primary-foreground': '266 4% 20.8%', 'secondary': '260 4.1% 27.9%', 'secondary-foreground': '248 0.3% 98.4%', 'muted': '260 4.1% 27.9%', 'muted-foreground': '257 4% 70.4%', 'accent': '260 4.1% 27.9%', 'accent-foreground': '248 0.3% 98.4%', 'destructive': '22 19.1% 70.4%', 'destructive-foreground': '248 0.3% 98.4%', 'border': '0 0% 100% / 10%', 'input': '0 0% 100% / 15%', 'ring': '264 2.7% 55.1%', 'chart-1': '264 24.3% 48.8%', 'chart-2': '162 17% 69.6%', 'chart-3': '70 18.8% 76.9%', 'chart-4': '304 26.5% 62.7%', 'chart-5': '16 24.6% 64.5%', 'sidebar': '266 4% 20.8%', 'sidebar-foreground': '248 0.3% 98.4%', 'sidebar-primary': '264 24.3% 48.8%', 'sidebar-primary-foreground': '248 0.3% 98.4%', 'sidebar-accent': '260 4.1% 27.9%', 'sidebar-accent-foreground': '248 0.3% 98.4%', 'sidebar-border': '0 0% 100% / 10%', 'sidebar-ring': '264 2.7% 55.1%', }, }, { id: 'arctic', name: 'Arctic', description: 'Cool, tech-focused', previewColors: ['hsl(200 98% 39%)', 'hsl(210 40% 98%)', 'hsl(215 20% 65%)'], light: { 'background': '209 40% 96%', 'foreground': '222 47% 11%', 'card': '210 40% 98%', 'card-foreground': '222 47% 11%', 'popover': '214 31% 91%', 'popover-foreground': '222 47% 11%', 'primary': '200 98% 39%', 'primary-foreground': '204 100% 97%', 'secondary': '215 24% 26%', 'secondary-foreground': '210 40% 98%', 'muted': '215 20% 65%', 'muted-foreground': '222 47% 11%', 'accent': '210 40% 98%', 'accent-foreground': '215 19% 34%', 'destructive': '0 72% 50%', 'destructive-foreground': '0 85% 97%', 'border': '212 26% 83%', 'input': '212 26% 83%', 'ring': '200 98% 39%', 'chart-1': '198 93% 59%', 'chart-2': '213 93% 67%', 'chart-3': '215 20% 65%', 'chart-4': '215 16% 46%', 'chart-5': '215 19% 34%', 'sidebar': '210 40% 98%', 'sidebar-foreground': '222 47% 11%', 'sidebar-primary': '200 98% 39%', 'sidebar-primary-foreground': '204 100% 97%', 'sidebar-accent': '215 24% 26%', 'sidebar-accent-foreground': '210 40% 98%', 'sidebar-border': '212 26% 83%', 'sidebar-ring': '200 98% 39%', 'radius': '0.5rem', }, dark: { 'background': '222 47% 11%', 'foreground': '210 40% 98%', 'card': '217 32% 17%', 'card-foreground': '210 40% 98%', 'popover': '215 24% 26%', 'popover-foreground': '210 40% 98%', 'primary': '198 93% 59%', 'primary-foreground': '204 80% 15%', 'secondary': '212 26% 83%', 'secondary-foreground': '228 84% 4%', 'muted': '215 16% 46%', 'muted-foreground': '210 40% 98%', 'accent': '228 84% 4%', 'accent-foreground': '215 20% 65%', 'destructive': '0 84% 60%', 'destructive-foreground': '0 85% 97%', 'border': '215 19% 34%', 'input': '215 19% 34%', 'ring': '198 93% 59%', 'chart-1': '199 95% 73%', 'chart-2': '211 96% 78%', 'chart-3': '215 20% 65%', 'chart-4': '215 16% 46%', 'chart-5': '215 19% 34%', 'sidebar': '217 32% 17%', 'sidebar-foreground': '210 40% 98%', 'sidebar-primary': '198 93% 59%', 'sidebar-primary-foreground': '204 80% 15%', 'sidebar-accent': '215 20% 65%', 'sidebar-accent-foreground': '228 84% 4%', 'sidebar-border': '215 19% 34%', 'sidebar-ring': '198 93% 59%', }, }, { id: 'summer', name: 'Summer', description: 'Warm, energetic', previewColors: ['hsl(20 90% 48%)', 'hsl(0 0% 98%)', 'hsl(47 100% 96%)'], light: { 'background': '0 0% 96%', 'foreground': '0 0% 9%', 'card': '0 0% 98%', 'card-foreground': '0 0% 9%', 'popover': '0 0% 89%', 'popover-foreground': '0 0% 9%', 'primary': '20 90% 48%', 'primary-foreground': '33 100% 96%', 'secondary': '0 0% 32%', 'secondary-foreground': '0 0% 98%', 'muted': '0 0% 63%', 'muted-foreground': '0 0% 9%', 'accent': '47 100% 96%', 'accent-foreground': '37 92% 50%', 'destructive': '0 72% 50%', 'destructive-foreground': '0 85% 97%', 'border': '0 0% 83%', 'input': '0 0% 83%', 'ring': '20 90% 48%', 'chart-1': '27 95% 60%', 'chart-2': '43 96% 56%', 'chart-3': '47 95% 53%', 'chart-4': '24 94% 53%', 'chart-5': '0 0% 45%', 'sidebar': '0 0% 98%', 'sidebar-foreground': '0 0% 9%', 'sidebar-primary': '20 90% 48%', 'sidebar-primary-foreground': '33 100% 96%', 'sidebar-accent': '0 0% 32%', 'sidebar-accent-foreground': '0 0% 98%', 'sidebar-border': '0 0% 83%', 'sidebar-ring': '20 90% 48%', 'radius': '0.75rem', }, dark: { 'background': '0 0% 9%', 'foreground': '0 0% 98%', 'card': '0 0% 14%', 'card-foreground': '0 0% 98%', 'popover': '0 0% 25%', 'popover-foreground': '0 0% 98%', 'primary': '27 95% 60%', 'primary-foreground': '12 81% 14%', 'secondary': '0 0% 45%', 'secondary-foreground': '0 0% 98%', 'muted': '0 0% 45%', 'muted-foreground': '0 0% 98%', 'accent': '20 91% 14%', 'accent-foreground': '43 96% 56%', 'destructive': '0 84% 60%', 'destructive-foreground': '0 85% 97%', 'border': '0 0% 32%', 'input': '0 0% 32%', 'ring': '27 95% 60%', 'chart-1': '30 97% 72%', 'chart-2': '45 96% 64%', 'chart-3': '48 96% 76%', 'chart-4': '27 95% 60%', 'chart-5': '0 0% 45%', 'sidebar': '0 0% 14%', 'sidebar-foreground': '0 0% 98%', 'sidebar-primary': '27 95% 60%', 'sidebar-primary-foreground': '12 81% 14%', 'sidebar-accent': '43 96% 56%', 'sidebar-accent-foreground': '20 91% 14%', 'sidebar-border': '0 0% 32%', 'sidebar-ring': '27 95% 60%', }, }, { id: 'fragrant', name: 'Fragrant', description: 'Elegant, creative', previewColors: ['hsl(258 89% 66%)', 'hsl(0 0% 98%)', 'hsl(269 100% 98%)'], light: { 'background': '240 4% 95%', 'foreground': '240 5% 10%', 'card': '0 0% 98%', 'card-foreground': '240 5% 10%', 'popover': '240 5% 90%', 'popover-foreground': '240 5% 10%', 'primary': '258 89% 66%', 'primary-foreground': '250 100% 97%', 'secondary': '240 5% 33%', 'secondary-foreground': '0 0% 98%', 'muted': '240 4% 83%', 'muted-foreground': '240 5% 10%', 'accent': '269 100% 98%', 'accent-foreground': '270 91% 65%', 'destructive': '0 72% 50%', 'destructive-foreground': '0 85% 97%', 'border': '240 4% 83%', 'input': '240 4% 83%', 'ring': '258 89% 66%', 'chart-1': '255 91% 76%', 'chart-2': '270 95% 75%', 'chart-3': '234 89% 73%', 'chart-4': '258 89% 66%', 'chart-5': '240 3% 46%', 'sidebar': '0 0% 98%', 'sidebar-foreground': '240 5% 10%', 'sidebar-primary': '258 89% 66%', 'sidebar-primary-foreground': '250 100% 97%', 'sidebar-accent': '240 5% 33%', 'sidebar-accent-foreground': '0 0% 98%', 'sidebar-border': '240 4% 83%', 'sidebar-ring': '258 89% 66%', 'radius': '0.5rem', }, dark: { 'background': '240 5% 10%', 'foreground': '0 0% 98%', 'card': '240 3% 15%', 'card-foreground': '0 0% 98%', 'popover': '240 5% 26%', 'popover-foreground': '0 0% 98%', 'primary': '255 91% 76%', 'primary-foreground': '261 72% 22%', 'secondary': '240 3% 46%', 'secondary-foreground': '0 0% 98%', 'muted': '240 3% 46%', 'muted-foreground': '0 0% 98%', 'accent': '273 86% 20%', 'accent-foreground': '270 95% 75%', 'destructive': '0 84% 60%', 'destructive-foreground': '0 85% 97%', 'border': '240 5% 33%', 'input': '240 5% 33%', 'ring': '255 91% 76%', 'chart-1': '252 94% 85%', 'chart-2': '269 97% 85%', 'chart-3': '229 93% 81%', 'chart-4': '255 91% 76%', 'chart-5': '240 3% 46%', 'sidebar': '240 3% 15%', 'sidebar-foreground': '0 0% 98%', 'sidebar-primary': '255 91% 76%', 'sidebar-primary-foreground': '261 72% 22%', 'sidebar-accent': '270 95% 75%', 'sidebar-accent-foreground': '273 86% 20%', 'sidebar-border': '240 5% 33%', 'sidebar-ring': '255 91% 76%', }, }, { id: 'slate', name: 'Slate', description: 'Minimal, professional', previewColors: ['hsl(216 19% 26%)', 'hsl(210 40% 98%)', 'hsl(215 20% 65%)'], light: { 'background': '209 40% 96%', 'foreground': '222 47% 11%', 'card': '210 40% 98%', 'card-foreground': '222 47% 11%', 'popover': '214 31% 91%', 'popover-foreground': '222 47% 11%', 'primary': '216 19% 26%', 'primary-foreground': '210 19% 98%', 'secondary': '215 19% 34%', 'secondary-foreground': '210 40% 98%', 'muted': '215 20% 65%', 'muted-foreground': '222 47% 11%', 'accent': '210 40% 98%', 'accent-foreground': '215 16% 46%', 'destructive': '0 72% 50%', 'destructive-foreground': '0 85% 97%', 'border': '212 26% 83%', 'input': '212 26% 83%', 'ring': '216 19% 26%', 'chart-1': '217 10% 64%', 'chart-2': '215 20% 65%', 'chart-3': '215 16% 46%', 'chart-4': '219 8% 46%', 'chart-5': '215 19% 34%', 'sidebar': '210 40% 98%', 'sidebar-foreground': '222 47% 11%', 'sidebar-primary': '216 19% 26%', 'sidebar-primary-foreground': '210 19% 98%', 'sidebar-accent': '215 19% 34%', 'sidebar-accent-foreground': '210 40% 98%', 'sidebar-border': '212 26% 83%', 'sidebar-ring': '216 19% 26%', 'radius': '0rem', }, dark: { 'background': '222 47% 11%', 'foreground': '210 40% 98%', 'card': '217 32% 17%', 'card-foreground': '210 40% 98%', 'popover': '215 24% 26%', 'popover-foreground': '210 40% 98%', 'primary': '212 26% 83%', 'primary-foreground': '228 84% 4%', 'secondary': '215 19% 34%', 'secondary-foreground': '210 40% 98%', 'muted': '215 16% 46%', 'muted-foreground': '210 40% 98%', 'accent': '228 84% 4%', 'accent-foreground': '215 20% 65%', 'destructive': '0 84% 60%', 'destructive-foreground': '0 85% 97%', 'border': '215 19% 34%', 'input': '215 19% 34%', 'ring': '212 26% 83%', 'chart-1': '215 12% 83%', 'chart-2': '212 26% 83%', 'chart-3': '215 20% 65%', 'chart-4': '217 10% 64%', 'chart-5': '215 16% 46%', 'sidebar': '217 32% 17%', 'sidebar-foreground': '210 40% 98%', 'sidebar-primary': '212 26% 83%', 'sidebar-primary-foreground': '228 84% 4%', 'sidebar-accent': '215 20% 65%', 'sidebar-accent-foreground': '228 84% 4%', 'sidebar-border': '215 19% 34%', 'sidebar-ring': '212 26% 83%', }, }, { id: 'feminine', name: 'Feminine', description: 'Soft, playful', previewColors: ['hsl(333 71% 50%)', 'hsl(0 0% 98%)', 'hsl(355 100% 97%)'], light: { 'background': '240 4% 95%', 'foreground': '240 5% 10%', 'card': '0 0% 98%', 'card-foreground': '240 5% 10%', 'popover': '240 5% 90%', 'popover-foreground': '240 5% 10%', 'primary': '333 71% 50%', 'primary-foreground': '327 73% 97%', 'secondary': '240 5% 33%', 'secondary-foreground': '0 0% 98%', 'muted': '240 4% 83%', 'muted-foreground': '240 5% 10%', 'accent': '355 100% 97%', 'accent-foreground': '349 89% 60%', 'destructive': '0 72% 50%', 'destructive-foreground': '0 85% 97%', 'border': '240 4% 83%', 'input': '240 4% 83%', 'ring': '333 71% 50%', 'chart-1': '328 85% 70%', 'chart-2': '351 94% 71%', 'chart-3': '327 87% 81%', 'chart-4': '352 95% 81%', 'chart-5': '240 3% 46%', 'sidebar': '0 0% 98%', 'sidebar-foreground': '240 5% 10%', 'sidebar-primary': '333 71% 50%', 'sidebar-primary-foreground': '327 73% 97%', 'sidebar-accent': '240 5% 33%', 'sidebar-accent-foreground': '0 0% 98%', 'sidebar-border': '240 4% 83%', 'sidebar-ring': '333 71% 50%', 'radius': '1.5rem', }, dark: { 'background': '240 5% 10%', 'foreground': '0 0% 98%', 'card': '240 3% 15%', 'card-foreground': '0 0% 98%', 'popover': '240 5% 26%', 'popover-foreground': '0 0% 98%', 'primary': '328 85% 70%', 'primary-foreground': '336 83% 17%', 'secondary': '240 3% 46%', 'secondary-foreground': '0 0% 98%', 'muted': '240 3% 46%', 'muted-foreground': '0 0% 98%', 'accent': '343 87% 15%', 'accent-foreground': '351 94% 71%', 'destructive': '0 84% 60%', 'destructive-foreground': '0 85% 97%', 'border': '240 5% 33%', 'input': '240 5% 33%', 'ring': '328 85% 70%', 'chart-1': '327 87% 81%', 'chart-2': '352 95% 81%', 'chart-3': '328 85% 70%', 'chart-4': '351 94% 71%', 'chart-5': '240 5% 33%', 'sidebar': '240 3% 15%', 'sidebar-foreground': '0 0% 98%', 'sidebar-primary': '328 85% 70%', 'sidebar-primary-foreground': '336 83% 17%', 'sidebar-accent': '351 94% 71%', 'sidebar-accent-foreground': '343 87% 15%', 'sidebar-border': '240 5% 33%', 'sidebar-ring': '328 85% 70%', }, }, { id: 'forest', name: 'Forest', description: 'Natural, earthy', previewColors: ['hsl(152 69% 31%)', 'hsl(120 20% 97%)', 'hsl(140 30% 80%)'], light: { 'background': '120 20% 97%', 'foreground': '150 30% 10%', 'card': '120 25% 98%', 'card-foreground': '150 30% 10%', 'popover': '120 20% 92%', 'popover-foreground': '150 30% 10%', 'primary': '152 69% 31%', 'primary-foreground': '120 60% 97%', 'secondary': '150 25% 25%', 'secondary-foreground': '120 25% 98%', 'muted': '140 30% 80%', 'muted-foreground': '150 30% 10%', 'accent': '120 25% 98%', 'accent-foreground': '150 25% 35%', 'destructive': '0 72% 50%', 'destructive-foreground': '0 85% 97%', 'border': '140 20% 85%', 'input': '140 20% 85%', 'ring': '152 69% 31%', 'chart-1': '152 69% 31%', 'chart-2': '168 76% 36%', 'chart-3': '140 40% 50%', 'chart-4': '120 35% 60%', 'chart-5': '100 30% 55%', 'sidebar': '120 25% 98%', 'sidebar-foreground': '150 30% 10%', 'sidebar-primary': '152 69% 31%', 'sidebar-primary-foreground': '120 60% 97%', 'sidebar-accent': '150 25% 25%', 'sidebar-accent-foreground': '120 25% 98%', 'sidebar-border': '140 20% 85%', 'sidebar-ring': '152 69% 31%', 'radius': '0.5rem', }, dark: { 'background': '150 30% 8%', 'foreground': '120 20% 97%', 'card': '150 25% 12%', 'card-foreground': '120 20% 97%', 'popover': '150 20% 18%', 'popover-foreground': '120 20% 97%', 'primary': '152 60% 45%', 'primary-foreground': '150 80% 10%', 'secondary': '140 20% 30%', 'secondary-foreground': '120 20% 97%', 'muted': '140 15% 30%', 'muted-foreground': '120 20% 97%', 'accent': '150 40% 15%', 'accent-foreground': '152 60% 45%', 'destructive': '0 84% 60%', 'destructive-foreground': '0 85% 97%', 'border': '150 20% 22%', 'input': '150 20% 22%', 'ring': '152 60% 45%', 'chart-1': '152 60% 55%', 'chart-2': '168 65% 50%', 'chart-3': '140 45% 60%', 'chart-4': '120 40% 65%', 'chart-5': '100 35% 60%', 'sidebar': '150 25% 12%', 'sidebar-foreground': '120 20% 97%', 'sidebar-primary': '152 60% 45%', 'sidebar-primary-foreground': '150 80% 10%', 'sidebar-accent': '140 40% 50%', 'sidebar-accent-foreground': '150 40% 15%', 'sidebar-border': '150 20% 22%', 'sidebar-ring': '152 60% 45%', }, }, { id: 'midnight', name: 'Midnight', description: 'Dark, mysterious', previewColors: ['hsl(230 70% 50%)', 'hsl(230 25% 12%)', 'hsl(230 40% 30%)'], light: { 'background': '230 30% 96%', 'foreground': '230 50% 10%', 'card': '230 35% 98%', 'card-foreground': '230 50% 10%', 'popover': '230 30% 91%', 'popover-foreground': '230 50% 10%', 'primary': '230 70% 50%', 'primary-foreground': '230 100% 98%', 'secondary': '230 40% 25%', 'secondary-foreground': '230 35% 98%', 'muted': '230 25% 80%', 'muted-foreground': '230 50% 10%', 'accent': '230 35% 98%', 'accent-foreground': '230 40% 35%', 'destructive': '0 72% 50%', 'destructive-foreground': '0 85% 97%', 'border': '230 20% 85%', 'input': '230 20% 85%', 'ring': '230 70% 50%', 'chart-1': '230 70% 50%', 'chart-2': '250 65% 55%', 'chart-3': '210 60% 50%', 'chart-4': '270 55% 55%', 'chart-5': '230 40% 45%', 'sidebar': '230 35% 98%', 'sidebar-foreground': '230 50% 10%', 'sidebar-primary': '230 70% 50%', 'sidebar-primary-foreground': '230 100% 98%', 'sidebar-accent': '230 40% 25%', 'sidebar-accent-foreground': '230 35% 98%', 'sidebar-border': '230 20% 85%', 'sidebar-ring': '230 70% 50%', 'radius': '0.375rem', }, dark: { 'background': '230 25% 7%', 'foreground': '230 30% 96%', 'card': '230 25% 12%', 'card-foreground': '230 30% 96%', 'popover': '230 30% 18%', 'popover-foreground': '230 30% 96%', 'primary': '230 80% 60%', 'primary-foreground': '230 90% 10%', 'secondary': '230 40% 30%', 'secondary-foreground': '230 30% 96%', 'muted': '230 30% 25%', 'muted-foreground': '230 30% 96%', 'accent': '230 50% 15%', 'accent-foreground': '230 80% 60%', 'destructive': '0 84% 60%', 'destructive-foreground': '0 85% 97%', 'border': '230 25% 20%', 'input': '230 25% 20%', 'ring': '230 80% 60%', 'chart-1': '230 80% 70%', 'chart-2': '250 75% 70%', 'chart-3': '210 70% 65%', 'chart-4': '270 65% 70%', 'chart-5': '230 50% 55%', 'sidebar': '230 25% 12%', 'sidebar-foreground': '230 30% 96%', 'sidebar-primary': '230 80% 60%', 'sidebar-primary-foreground': '230 90% 10%', 'sidebar-accent': '230 80% 60%', 'sidebar-accent-foreground': '230 50% 15%', 'sidebar-border': '230 25% 20%', 'sidebar-ring': '230 80% 60%', }, }, { id: 'coral', name: 'Coral', description: 'Vibrant, modern', previewColors: ['hsl(16 85% 60%)', 'hsl(30 50% 98%)', 'hsl(16 70% 90%)'], light: { 'background': '30 50% 97%', 'foreground': '16 40% 12%', 'card': '30 50% 98%', 'card-foreground': '16 40% 12%', 'popover': '30 40% 92%', 'popover-foreground': '16 40% 12%', 'primary': '16 85% 60%', 'primary-foreground': '16 100% 98%', 'secondary': '16 35% 30%', 'secondary-foreground': '30 50% 98%', 'muted': '16 30% 82%', 'muted-foreground': '16 40% 12%', 'accent': '16 70% 95%', 'accent-foreground': '16 75% 50%', 'destructive': '0 72% 50%', 'destructive-foreground': '0 85% 97%', 'border': '16 25% 85%', 'input': '16 25% 85%', 'ring': '16 85% 60%', 'chart-1': '16 85% 60%', 'chart-2': '355 80% 65%', 'chart-3': '30 75% 55%', 'chart-4': '45 70% 55%', 'chart-5': '0 60% 55%', 'sidebar': '30 50% 98%', 'sidebar-foreground': '16 40% 12%', 'sidebar-primary': '16 85% 60%', 'sidebar-primary-foreground': '16 100% 98%', 'sidebar-accent': '16 35% 30%', 'sidebar-accent-foreground': '30 50% 98%', 'sidebar-border': '16 25% 85%', 'sidebar-ring': '16 85% 60%', 'radius': '0.75rem', }, dark: { 'background': '16 30% 8%', 'foreground': '30 50% 97%', 'card': '16 25% 12%', 'card-foreground': '30 50% 97%', 'popover': '16 25% 18%', 'popover-foreground': '30 50% 97%', 'primary': '16 80% 65%', 'primary-foreground': '16 90% 10%', 'secondary': '16 25% 35%', 'secondary-foreground': '30 50% 97%', 'muted': '16 20% 30%', 'muted-foreground': '30 50% 97%', 'accent': '16 60% 15%', 'accent-foreground': '16 80% 65%', 'destructive': '0 84% 60%', 'destructive-foreground': '0 85% 97%', 'border': '16 20% 22%', 'input': '16 20% 22%', 'ring': '16 80% 65%', 'chart-1': '16 85% 70%', 'chart-2': '355 80% 75%', 'chart-3': '30 75% 65%', 'chart-4': '45 70% 65%', 'chart-5': '0 60% 60%', 'sidebar': '16 25% 12%', 'sidebar-foreground': '30 50% 97%', 'sidebar-primary': '16 80% 65%', 'sidebar-primary-foreground': '16 90% 10%', 'sidebar-accent': '16 80% 65%', 'sidebar-accent-foreground': '16 60% 15%', 'sidebar-border': '16 20% 22%', 'sidebar-ring': '16 80% 65%', }, }, { id: 'mocha', name: 'Mocha', description: 'Warm, cozy', previewColors: ['hsl(30 40% 35%)', 'hsl(35 30% 96%)', 'hsl(30 25% 75%)'], light: { 'background': '35 30% 96%', 'foreground': '30 35% 12%', 'card': '35 35% 98%', 'card-foreground': '30 35% 12%', 'popover': '35 25% 91%', 'popover-foreground': '30 35% 12%', 'primary': '30 40% 35%', 'primary-foreground': '35 50% 97%', 'secondary': '30 30% 25%', 'secondary-foreground': '35 35% 98%', 'muted': '30 25% 75%', 'muted-foreground': '30 35% 12%', 'accent': '35 35% 98%', 'accent-foreground': '30 35% 40%', 'destructive': '0 72% 50%', 'destructive-foreground': '0 85% 97%', 'border': '30 20% 82%', 'input': '30 20% 82%', 'ring': '30 40% 35%', 'chart-1': '30 40% 35%', 'chart-2': '20 35% 45%', 'chart-3': '40 30% 50%', 'chart-4': '15 35% 55%', 'chart-5': '45 25% 50%', 'sidebar': '35 35% 98%', 'sidebar-foreground': '30 35% 12%', 'sidebar-primary': '30 40% 35%', 'sidebar-primary-foreground': '35 50% 97%', 'sidebar-accent': '30 30% 25%', 'sidebar-accent-foreground': '35 35% 98%', 'sidebar-border': '30 20% 82%', 'sidebar-ring': '30 40% 35%', 'radius': '0.375rem', }, dark: { 'background': '30 25% 8%', 'foreground': '35 30% 96%', 'card': '30 20% 12%', 'card-foreground': '35 30% 96%', 'popover': '30 20% 18%', 'popover-foreground': '35 30% 96%', 'primary': '30 45% 50%', 'primary-foreground': '30 60% 10%', 'secondary': '30 20% 30%', 'secondary-foreground': '35 30% 96%', 'muted': '30 15% 28%', 'muted-foreground': '35 30% 96%', 'accent': '30 35% 15%', 'accent-foreground': '30 45% 50%', 'destructive': '0 84% 60%', 'destructive-foreground': '0 85% 97%', 'border': '30 18% 22%', 'input': '30 18% 22%', 'ring': '30 45% 50%', 'chart-1': '30 50% 55%', 'chart-2': '20 45% 55%', 'chart-3': '40 40% 55%', 'chart-4': '15 45% 60%', 'chart-5': '45 35% 55%', 'sidebar': '30 20% 12%', 'sidebar-foreground': '35 30% 96%', 'sidebar-primary': '30 45% 50%', 'sidebar-primary-foreground': '30 60% 10%', 'sidebar-accent': '30 45% 50%', 'sidebar-accent-foreground': '30 35% 15%', 'sidebar-border': '30 18% 22%', 'sidebar-ring': '30 45% 50%', }, }, { id: 'ocean', name: 'Ocean', description: 'Calm, refreshing', previewColors: ['hsl(180 65% 40%)', 'hsl(185 40% 97%)', 'hsl(180 40% 80%)'], light: { 'background': '185 40% 97%', 'foreground': '180 45% 10%', 'card': '185 45% 98%', 'card-foreground': '180 45% 10%', 'popover': '185 35% 92%', 'popover-foreground': '180 45% 10%', 'primary': '180 65% 40%', 'primary-foreground': '180 90% 98%', 'secondary': '180 40% 25%', 'secondary-foreground': '185 45% 98%', 'muted': '180 40% 80%', 'muted-foreground': '180 45% 10%', 'accent': '185 45% 98%', 'accent-foreground': '180 50% 35%', 'destructive': '0 72% 50%', 'destructive-foreground': '0 85% 97%', 'border': '180 30% 85%', 'input': '180 30% 85%', 'ring': '180 65% 40%', 'chart-1': '180 65% 40%', 'chart-2': '195 70% 45%', 'chart-3': '165 55% 45%', 'chart-4': '210 60% 50%', 'chart-5': '150 50% 45%', 'sidebar': '185 45% 98%', 'sidebar-foreground': '180 45% 10%', 'sidebar-primary': '180 65% 40%', 'sidebar-primary-foreground': '180 90% 98%', 'sidebar-accent': '180 40% 25%', 'sidebar-accent-foreground': '185 45% 98%', 'sidebar-border': '180 30% 85%', 'sidebar-ring': '180 65% 40%', 'radius': '0.5rem', }, dark: { 'background': '180 35% 7%', 'foreground': '185 40% 97%', 'card': '180 30% 11%', 'card-foreground': '185 40% 97%', 'popover': '180 30% 17%', 'popover-foreground': '185 40% 97%', 'primary': '180 70% 50%', 'primary-foreground': '180 85% 10%', 'secondary': '180 30% 30%', 'secondary-foreground': '185 40% 97%', 'muted': '180 25% 28%', 'muted-foreground': '185 40% 97%', 'accent': '180 50% 15%', 'accent-foreground': '180 70% 50%', 'destructive': '0 84% 60%', 'destructive-foreground': '0 85% 97%', 'border': '180 25% 20%', 'input': '180 25% 20%', 'ring': '180 70% 50%', 'chart-1': '180 70% 55%', 'chart-2': '195 75% 55%', 'chart-3': '165 60% 55%', 'chart-4': '210 65% 60%', 'chart-5': '150 55% 55%', 'sidebar': '180 30% 11%', 'sidebar-foreground': '185 40% 97%', 'sidebar-primary': '180 70% 50%', 'sidebar-primary-foreground': '180 85% 10%', 'sidebar-accent': '180 70% 50%', 'sidebar-accent-foreground': '180 50% 15%', 'sidebar-border': '180 25% 20%', 'sidebar-ring': '180 70% 50%', }, }, { id: 'ruby', name: 'Ruby', description: 'Bold, passionate', previewColors: ['hsl(350 80% 45%)', 'hsl(0 20% 97%)', 'hsl(350 50% 85%)'], light: { 'background': '0 20% 97%', 'foreground': '350 45% 10%', 'card': '0 25% 98%', 'card-foreground': '350 45% 10%', 'popover': '0 18% 92%', 'popover-foreground': '350 45% 10%', 'primary': '350 80% 45%', 'primary-foreground': '350 100% 98%', 'secondary': '350 40% 25%', 'secondary-foreground': '0 25% 98%', 'muted': '350 25% 80%', 'muted-foreground': '350 45% 10%', 'accent': '350 50% 95%', 'accent-foreground': '350 70% 40%', 'destructive': '0 72% 50%', 'destructive-foreground': '0 85% 97%', 'border': '350 18% 85%', 'input': '350 18% 85%', 'ring': '350 80% 45%', 'chart-1': '350 80% 45%', 'chart-2': '0 75% 50%', 'chart-3': '330 70% 50%', 'chart-4': '15 70% 50%', 'chart-5': '345 60% 55%', 'sidebar': '0 25% 98%', 'sidebar-foreground': '350 45% 10%', 'sidebar-primary': '350 80% 45%', 'sidebar-primary-foreground': '350 100% 98%', 'sidebar-accent': '350 40% 25%', 'sidebar-accent-foreground': '0 25% 98%', 'sidebar-border': '350 18% 85%', 'sidebar-ring': '350 80% 45%', 'radius': '0.25rem', }, dark: { 'background': '350 30% 7%', 'foreground': '0 20% 97%', 'card': '350 25% 11%', 'card-foreground': '0 20% 97%', 'popover': '350 25% 17%', 'popover-foreground': '0 20% 97%', 'primary': '350 85% 55%', 'primary-foreground': '350 90% 10%', 'secondary': '350 30% 30%', 'secondary-foreground': '0 20% 97%', 'muted': '350 20% 28%', 'muted-foreground': '0 20% 97%', 'accent': '350 55% 15%', 'accent-foreground': '350 85% 55%', 'destructive': '0 84% 60%', 'destructive-foreground': '0 85% 97%', 'border': '350 20% 20%', 'input': '350 20% 20%', 'ring': '350 85% 55%', 'chart-1': '350 85% 60%', 'chart-2': '0 80% 60%', 'chart-3': '330 75% 60%', 'chart-4': '15 75% 60%', 'chart-5': '345 65% 60%', 'sidebar': '350 25% 11%', 'sidebar-foreground': '0 20% 97%', 'sidebar-primary': '350 85% 55%', 'sidebar-primary-foreground': '350 90% 10%', 'sidebar-accent': '350 85% 55%', 'sidebar-accent-foreground': '350 55% 15%', 'sidebar-border': '350 20% 20%', 'sidebar-ring': '350 85% 55%', }, }, ]; /** * Get a theme preset by its ID. */ export function getThemePreset(id: string): ThemePreset | undefined { return THEME_PRESETS.find(preset => preset.id === id); }