diff --git a/Web_Backgrounds/cuba-theme.css b/Web_Backgrounds/cuba-theme.css new file mode 100644 index 0000000..b807bb2 --- /dev/null +++ b/Web_Backgrounds/cuba-theme.css @@ -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; + } +} diff --git a/Web_Backgrounds/cuba-tokens.json b/Web_Backgrounds/cuba-tokens.json new file mode 100644 index 0000000..107ba09 --- /dev/null +++ b/Web_Backgrounds/cuba-tokens.json @@ -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" } + } +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index bb7e5f3..303d0f7 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -12,6 +12,7 @@ import "../../Web_Backgrounds/cyber2-theme.css" import "../../Web_Backgrounds/pumpkin-theme.css" import "../../Web_Backgrounds/bw-theme.css" import "../../Web_Backgrounds/luminous-theme.css" +import "../../Web_Backgrounds/cuba-theme.css" const inter = Inter({ variable: "--font-inter", diff --git a/src/components/settings/theme-settings.tsx b/src/components/settings/theme-settings.tsx index 79aaf5f..db9843a 100644 --- a/src/components/settings/theme-settings.tsx +++ b/src/components/settings/theme-settings.tsx @@ -39,6 +39,7 @@ const backgroundOptions = [ { value: "pumpkin", label: "Pumpkin Spice", icon: Shield, color: "bg-gradient-to-r from-orange-600 to-amber-500", ring: "ring-orange-600", desc: "Warm autumn orange with spicy accents" }, { value: "bw", label: "Black & White", icon: Shield, color: "bg-gradient-to-r from-gray-900 to-gray-400", ring: "ring-gray-500", desc: "Clean monochrome with subtle texture" }, { value: "luminous", label: "Luminous", icon: Shield, color: "bg-gradient-to-r from-blue-500 to-teal-400", ring: "ring-blue-500", desc: "Deep Glass 2.0 — blue-teal-amber with specular highlights and 3D bevel borders" }, + { value: "cuba", label: "Cuba", icon: Shield, color: "bg-gradient-to-r from-orange-500 to-turquoise-400", ring: "ring-orange-500", desc: "Classic Cuban car on a playa at golden hour — warm sunset tones" }, ] function getStoredColorTheme(): string { diff --git a/src/providers/website-theme-provider.tsx b/src/providers/website-theme-provider.tsx index 954aec8..57e8b11 100644 --- a/src/providers/website-theme-provider.tsx +++ b/src/providers/website-theme-provider.tsx @@ -12,6 +12,7 @@ const themeClasses: Record = { pumpkin: "theme-pumpkin", bw: "theme-bw", luminous: "theme-luminous", + cuba: "theme-cuba", } interface WebsiteThemeContextValue {