Add Cuba theme: classic car on playa at golden hour
- New cuba-theme.css with warm sunset HSL palette (oranges, turquoise, golden hour tones) and classic Cuban car background image - cuba-tokens.json with full color definitions and chart config - Registered in themeClasses provider, layout.tsx import, and settings UI
This commit is contained in:
@@ -0,0 +1,144 @@
|
||||
/* ============================================================================
|
||||
Cuba Theme — Classic Cuban car on a playa at golden hour (6pm sunset)
|
||||
Warm sunset tones, turquoise Caribbean accents, pastel caribbean vibes
|
||||
============================================================================ */
|
||||
|
||||
.dark.theme-cuba {
|
||||
--background: 25 40% 6%;
|
||||
--foreground: 30 20% 90%;
|
||||
--card: 25 35% 10%;
|
||||
--card-foreground: 30 20% 90%;
|
||||
--popover: 25 35% 10%;
|
||||
--popover-foreground: 30 20% 90%;
|
||||
--primary: 15 85% 55%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 185 60% 50%;
|
||||
--secondary-foreground: 0 0% 100%;
|
||||
--muted: 25 20% 15%;
|
||||
--muted-foreground: 25 10% 55%;
|
||||
--accent: 195 65% 55%;
|
||||
--accent-foreground: 0 0% 0%;
|
||||
--destructive: 0 75% 50%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--success: 145 55% 45%;
|
||||
--success-foreground: 0 0% 100%;
|
||||
--warning: 35 90% 55%;
|
||||
--warning-foreground: 0 0% 0%;
|
||||
--border: 25 25% 18%;
|
||||
--input: 25 20% 15%;
|
||||
--ring: 15 85% 55%;
|
||||
--radius: 0.75rem;
|
||||
--sidebar: 25 40% 6%;
|
||||
--sidebar-foreground: 30 20% 90%;
|
||||
--sidebar-primary: 15 85% 55%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 25 30% 12%;
|
||||
--sidebar-accent-foreground: 30 20% 90%;
|
||||
--sidebar-border: 25 25% 15%;
|
||||
--sidebar-ring: 15 85% 55%;
|
||||
--chart-1: 15 85% 55%;
|
||||
--chart-2: 185 60% 50%;
|
||||
--chart-3: 45 85% 55%;
|
||||
--chart-4: 195 65% 55%;
|
||||
--chart-5: 335 60% 55%;
|
||||
}
|
||||
|
||||
.light.theme-cuba {
|
||||
--background: 30 30% 96%;
|
||||
--foreground: 25 40% 15%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 25 40% 15%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 25 40% 15%;
|
||||
--primary: 15 80% 50%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 185 55% 45%;
|
||||
--secondary-foreground: 0 0% 100%;
|
||||
--muted: 30 15% 90%;
|
||||
--muted-foreground: 25 10% 45%;
|
||||
--accent: 195 60% 50%;
|
||||
--accent-foreground: 0 0% 0%;
|
||||
--destructive: 0 72% 50%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--success: 145 50% 40%;
|
||||
--success-foreground: 0 0% 100%;
|
||||
--warning: 35 85% 50%;
|
||||
--warning-foreground: 0 0% 0%;
|
||||
--border: 30 15% 85%;
|
||||
--input: 30 10% 88%;
|
||||
--ring: 15 80% 50%;
|
||||
--radius: 0.75rem;
|
||||
--sidebar: 0 0% 100%;
|
||||
--sidebar-foreground: 25 40% 15%;
|
||||
--sidebar-primary: 15 80% 50%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 30 15% 92%;
|
||||
--sidebar-accent-foreground: 25 40% 15%;
|
||||
--sidebar-border: 30 15% 85%;
|
||||
--sidebar-ring: 15 80% 50%;
|
||||
--chart-1: 15 80% 50%;
|
||||
--chart-2: 185 55% 45%;
|
||||
--chart-3: 45 80% 50%;
|
||||
--chart-4: 195 60% 50%;
|
||||
--chart-5: 335 55% 50%;
|
||||
}
|
||||
|
||||
.theme-cuba {
|
||||
--background-image: url("https://images.unsplash.com/photo-1595268042087-d4766b03e9db?w=1920&q=80");
|
||||
--background-attachment: fixed;
|
||||
--background-size: cover;
|
||||
--background-position: center;
|
||||
--background-blend-mode: overlay;
|
||||
}
|
||||
|
||||
.dark.theme-cuba {
|
||||
--card-bg-opacity: 0.85;
|
||||
--sidebar-bg-opacity: 0.9;
|
||||
--card-backdrop: blur(12px);
|
||||
}
|
||||
|
||||
.light.theme-cuba {
|
||||
--card-bg-opacity: 0.92;
|
||||
--sidebar-bg-opacity: 0.95;
|
||||
--card-backdrop: blur(8px);
|
||||
}
|
||||
|
||||
.dark.theme-cuba .bg-card,
|
||||
.dark.theme-cuba .bg-popover,
|
||||
.dark.theme-cuba .bg-muted {
|
||||
background-color: hsl(var(--card) / var(--card-bg-opacity, 1));
|
||||
backdrop-filter: var(--card-backdrop, none);
|
||||
}
|
||||
|
||||
.dark.theme-cuba .bg-sidebar {
|
||||
background-color: hsl(var(--sidebar) / var(--sidebar-bg-opacity, 1));
|
||||
backdrop-filter: var(--card-backdrop, none);
|
||||
}
|
||||
|
||||
.light.theme-cuba .bg-card,
|
||||
.light.theme-cuba .bg-popover,
|
||||
.light.theme-cuba .bg-muted {
|
||||
background-color: hsl(var(--card) / var(--card-bg-opacity, 1));
|
||||
backdrop-filter: var(--card-backdrop, none);
|
||||
}
|
||||
|
||||
.light.theme-cuba .bg-sidebar {
|
||||
background-color: hsl(var(--sidebar) / var(--sidebar-bg-opacity, 1));
|
||||
backdrop-filter: var(--card-backdrop, none);
|
||||
}
|
||||
|
||||
.theme-cuba body,
|
||||
.theme-cuba .min-h-screen {
|
||||
background: var(--background-image) var(--background-attachment) var(--background-position) / var(--background-size);
|
||||
background-color: hsl(var(--background));
|
||||
background-blend-mode: var(--background-blend-mode);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-transparency: reduce) {
|
||||
.theme-cuba .bg-card,
|
||||
.theme-cuba .bg-popover,
|
||||
.theme-cuba .bg-muted,
|
||||
.theme-cuba .bg-sidebar {
|
||||
backdrop-filter: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
{
|
||||
"id": "cuba",
|
||||
"name": "Cuba Theme",
|
||||
"description": "Classic Cuban car on a playa at golden hour — warm sunset tones with turquoise Caribbean accents.",
|
||||
"type": "dual",
|
||||
"default": false,
|
||||
"dark": {
|
||||
"colors": {
|
||||
"background": "hsl(25, 40%, 6%)",
|
||||
"foreground": "hsl(30, 20%, 90%)",
|
||||
"card": "hsl(25, 35%, 10%)",
|
||||
"cardForeground": "hsl(30, 20%, 90%)",
|
||||
"popover": "hsl(25, 35%, 10%)",
|
||||
"popoverForeground": "hsl(30, 20%, 90%)",
|
||||
"primary": "hsl(15, 85%, 55%)",
|
||||
"primaryForeground": "hsl(0, 0%, 100%)",
|
||||
"secondary": "hsl(185, 60%, 50%)",
|
||||
"secondaryForeground": "hsl(0, 0%, 100%)",
|
||||
"muted": "hsl(25, 20%, 15%)",
|
||||
"mutedForeground": "hsl(25, 10%, 55%)",
|
||||
"accent": "hsl(195, 65%, 55%)",
|
||||
"accentForeground": "hsl(0, 0%, 0%)",
|
||||
"destructive": "hsl(0, 75%, 50%)",
|
||||
"destructiveForeground": "hsl(0, 0%, 100%)",
|
||||
"border": "hsl(25, 25%, 18%)",
|
||||
"input": "hsl(25, 20%, 15%)",
|
||||
"ring": "hsl(15, 85%, 55%)",
|
||||
"sidebar": "hsl(25, 40%, 6%)",
|
||||
"sidebarForeground": "hsl(30, 20%, 90%)",
|
||||
"sidebarPrimary": "hsl(15, 85%, 55%)",
|
||||
"sidebarPrimaryForeground": "hsl(0, 0%, 100%)",
|
||||
"sidebarAccent": "hsl(25, 30%, 12%)",
|
||||
"sidebarAccentForeground": "hsl(30, 20%, 90%)",
|
||||
"sidebarBorder": "hsl(25, 25%, 15%)",
|
||||
"sidebarRing": "hsl(15, 85%, 55%)"
|
||||
}
|
||||
},
|
||||
"light": {
|
||||
"colors": {
|
||||
"background": "hsl(30, 30%, 96%)",
|
||||
"foreground": "hsl(25, 40%, 15%)",
|
||||
"card": "hsl(0, 0%, 100%)",
|
||||
"cardForeground": "hsl(25, 40%, 15%)",
|
||||
"popover": "hsl(0, 0%, 100%)",
|
||||
"popoverForeground": "hsl(25, 40%, 15%)",
|
||||
"primary": "hsl(15, 80%, 50%)",
|
||||
"primaryForeground": "hsl(0, 0%, 100%)",
|
||||
"secondary": "hsl(185, 55%, 45%)",
|
||||
"secondaryForeground": "hsl(0, 0%, 100%)",
|
||||
"muted": "hsl(30, 15%, 90%)",
|
||||
"mutedForeground": "hsl(25, 10%, 45%)",
|
||||
"accent": "hsl(195, 60%, 50%)",
|
||||
"accentForeground": "hsl(0, 0%, 0%)",
|
||||
"destructive": "hsl(0, 72%, 50%)",
|
||||
"destructiveForeground": "hsl(0, 0%, 100%)",
|
||||
"border": "hsl(30, 15%, 85%)",
|
||||
"input": "hsl(30, 10%, 88%)",
|
||||
"ring": "hsl(15, 80%, 50%)",
|
||||
"sidebar": "hsl(0, 0%, 100%)",
|
||||
"sidebarForeground": "hsl(25, 40%, 15%)",
|
||||
"sidebarPrimary": "hsl(15, 80%, 50%)",
|
||||
"sidebarPrimaryForeground": "hsl(0, 0%, 100%)",
|
||||
"sidebarAccent": "hsl(30, 15%, 92%)",
|
||||
"sidebarAccentForeground": "hsl(25, 40%, 15%)",
|
||||
"sidebarBorder": "hsl(30, 15%, 85%)",
|
||||
"sidebarRing": "hsl(15, 80%, 50%)"
|
||||
}
|
||||
},
|
||||
"borderRadius": "0.75rem",
|
||||
"typography": {
|
||||
"fontFamily": "Inter, sans-serif",
|
||||
"headingFont": "Inter, sans-serif"
|
||||
},
|
||||
"keyColors": {
|
||||
"primary": "#e85d28",
|
||||
"background": "#0f0a06 (dark) / #f5f0eb (light)",
|
||||
"card": "#1a120c (dark) / #ffffff (light)",
|
||||
"sidebar": "#0f0a06 (dark) / #ffffff (light)",
|
||||
"border": "#2a1f15 (dark) / #d9cfc5 (light)",
|
||||
"text": "#e6ddd4 (dark) / #1a110a (light)",
|
||||
"mutedText": "#8a7a6a (dark) / #6b5d50 (light)"
|
||||
},
|
||||
"sunset": {
|
||||
"orange": "#e85d28",
|
||||
"golden": "#f4a340",
|
||||
"turquoise": "#30c5d2",
|
||||
"pink": "#e8677a",
|
||||
"purple": "#8b5cf6",
|
||||
"cream": "#f5e6d0"
|
||||
},
|
||||
"chartSegments": {
|
||||
"open": { "label": "Open", "color": "#e85d28", "description": "Sunset Orange — 35%" },
|
||||
"contacted": { "label": "Contacted", "color": "#30c5d2", "description": "Caribbean Turquoise — 25%" },
|
||||
"pending": { "label": "Pending", "color": "#f4a340", "description": "Golden Hour — 17%" },
|
||||
"closed": { "label": "Closed", "color": "#50b87a", "description": "Palm Green — 23%" },
|
||||
"ignored": { "label": "Ignored", "color": "#8b7a6a", "description": "Warm Muted — 0%" }
|
||||
},
|
||||
"barChart": {
|
||||
"newLeads": { "color": "#e85d28", "glow": "rgba(232, 93, 40, 0.5)" },
|
||||
"closed": { "color": "#30c5d2", "glow": "rgba(48, 197, 210, 0.4)" }
|
||||
},
|
||||
"statusBadges": {
|
||||
"open": { "color": "#30c5d2", "label": "Turquoise" },
|
||||
"contacted": { "color": "#e8677a", "label": "Sunset Pink" },
|
||||
"pending": { "color": "#f4a340", "label": "Golden" },
|
||||
"closed": { "color": "#50b87a", "label": "Palm Green" },
|
||||
"ignored": { "color": "#8b7a6a", "label": "Warm Muted" }
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user