xertica-ui 2.2.1 → 2.4.0

package/contexts/theme-data.ts

@@ -1,340 +1,340 @@
-export interface BrandColors {
-  // Main Colors
-  primary: string;
-  primaryForeground: string;
-  primaryLight: string; // Used for backgrounds
-
-  // Dark Mode Overrides
-  primaryDarkMode: string;
-  primaryForegroundDark: string;
-
-  // Sidebar Colors
-  sidebarLight: string;
-  sidebarDark: string;
-
-  // Gradients
-  gradientStart: string;
-  gradientEnd: string;
-  gradientStartDark: string;
-  gradientEndDark: string;
-
-  // Chart Colors (Light Mode) - Dark mode will be calculated or fixed
-  chart1: string;
-  chart2: string;
-  chart3: string;
-  chart4: string;
-  chart5: string;
-
-  // Optional: Radius override per theme
-  radius?: string;
-}
-
-export interface ColorTheme {
-  id: string;
-  name: string;
-  description: string;
-  colors: BrandColors;
-  preview: {
-    primary: string;
-    secondary: string;
-    accent: string;
-  };
-}
-
-// Shadcn Standard Palette Values (approximate hex for compatibility)
-export const PALETTE = {
-  zinc: { 900: '#18181b', 50: '#fafafa' },
-  slate: { 900: '#0f172a', 50: '#f8fafc' },
-  stone: { 900: '#1c1917', 50: '#fafaf9' },
-  gray: { 900: '#111827', 50: '#f9fafb' },
-  neutral: { 900: '#171717', 50: '#fafafa' },
-  red: { 600: '#dc2626', 500: '#ef4444' },
-  rose: { 600: '#e11d48', 500: '#f43f5e' },
-  orange: { 600: '#ea580c', 500: '#f97316' },
-  green: { 600: '#16a34a', 500: '#22c55e' },
-  blue: { 600: '#2563eb', 500: '#3b82f6' },
-  yellow: { 600: '#ca8a04', 500: '#eab308' },
-  violet: { 600: '#7c3aed', 500: '#8b5cf6' },
-};
-
-export const colorThemes: ColorTheme[] = [
-  {
-    id: 'xertica-original',
-    name: 'Xertica Original',
-    description: 'A identidade visual clássica da Xertica com o gradiente original',
-    colors: {
-      primary: '#2C275B',
-      primaryForeground: '#FFFFFF',
-      primaryLight: '#5B568F',
-      primaryDarkMode: '#72CDFD',
-      primaryForegroundDark: '#09090B',
-
-      sidebarLight: '#2C275B', // Primary Color
-      sidebarDark: '#1a1928', // Original Dark BG
-
-      gradientStart: '#FDB0F2',
-      gradientEnd: '#72CDFD',
-      gradientStartDark: '#7B4A7A',
-      gradientEndDark: '#3A5C7D',
-
-      chart1: '#2C275B',
-      chart2: '#047857',
-      chart3: '#B45309',
-      chart4: '#1D4ED8',
-      chart5: '#B91C1C',
-    },
-    preview: {
-      primary: '#2C275B',
-      secondary: '#FDB0F2',
-      accent: '#72CDFD',
-    },
-  },
-  {
-    id: 'zinc',
-    name: 'Zinc',
-    description: 'Minimalista, sério e elegante (Escala de Cinza)',
-    colors: {
-      primary: '#18181B',
-      primaryForeground: '#FAFAFA',
-      primaryLight: '#E4E4E7',
-      primaryDarkMode: '#FAFAFA',
-      primaryForegroundDark: '#18181B',
-
-      sidebarLight: '#18181B', // Primary Color
-      sidebarDark: '#09090B',
-
-      gradientStart: '#52525B',
-      gradientEnd: '#D4D4D8',
-      gradientStartDark: '#27272A',
-      gradientEndDark: '#52525B',
-
-      chart1: '#18181B',
-      chart2: '#52525B',
-      chart3: '#A1A1AA',
-      chart4: '#D4D4D8',
-      chart5: '#E4E4E7',
-    },
-    preview: {
-      primary: '#18181B',
-      secondary: '#52525B',
-      accent: '#E4E4E7',
-    },
-  },
-  {
-    id: 'slate',
-    name: 'Slate',
-    description: 'Profissional com tons de azul acinzentado',
-    colors: {
-      primary: '#0F172A',
-      primaryForeground: '#F8FAFC',
-      primaryLight: '#CBD5E1',
-      primaryDarkMode: '#F8FAFC',
-      primaryForegroundDark: '#0F172A',
-
-      sidebarLight: '#0F172A', // Primary Color
-      sidebarDark: '#020617',
-
-      gradientStart: '#475569',
-      gradientEnd: '#94A3B8',
-      gradientStartDark: '#1E293B',
-      gradientEndDark: '#475569',
-
-      chart1: '#0F172A',
-      chart2: '#475569',
-      chart3: '#94A3B8',
-      chart4: '#CBD5E1',
-      chart5: '#E2E8F0',
-    },
-    preview: {
-      primary: '#0F172A',
-      secondary: '#475569',
-      accent: '#94A3B8',
-    },
-  },
-  {
-    id: 'blue',
-    name: 'Blue',
-    description: 'Confiável e seguro, padrão corporativo',
-    colors: {
-      primary: '#2563EB',
-      primaryForeground: '#FFFFFF',
-      primaryLight: '#DBEAFE',
-      primaryDarkMode: '#3B82F6',
-      primaryForegroundDark: '#FFFFFF',
-
-      sidebarLight: '#1E3A8A', // Blue 900 (High Contrast Sidebar)
-      sidebarDark: '#172554',
-
-      gradientStart: '#2563EB',
-      gradientEnd: '#60A5FA',
-      gradientStartDark: '#1D4ED8',
-      gradientEndDark: '#2563EB',
-
-      chart1: '#2563EB',
-      chart2: '#3B82F6',
-      chart3: '#60A5FA',
-      chart4: '#93C5FD',
-      chart5: '#BFDBFE',
-    },
-    preview: {
-      primary: '#2563EB',
-      secondary: '#60A5FA',
-      accent: '#DBEAFE',
-    },
-  },
-  {
-    id: 'violet',
-    name: 'Violet',
-    description: 'Criativo e vibrante',
-    colors: {
-      primary: '#7C3AED',
-      primaryForeground: '#FFFFFF',
-      primaryLight: '#EDE9FE',
-      primaryDarkMode: '#8B5CF6',
-      primaryForegroundDark: '#FFFFFF',
-
-      sidebarLight: '#4C1D95', // Violet 900 (High Contrast Sidebar)
-      sidebarDark: '#2E1065',
-
-      gradientStart: '#7C3AED',
-      gradientEnd: '#A78BFA',
-      gradientStartDark: '#5B21B6',
-      gradientEndDark: '#7C3AED',
-
-      chart1: '#7C3AED',
-      chart2: '#8B5CF6',
-      chart3: '#A78BFA',
-      chart4: '#C4B5FD',
-      chart5: '#DDD6FE',
-    },
-    preview: {
-      primary: '#7C3AED',
-      secondary: '#A78BFA',
-      accent: '#EDE9FE',
-    },
-  },
-  {
-    id: 'rose',
-    name: 'Rose',
-    description: 'Elegante e suave',
-    colors: {
-      primary: '#BE123C', // Rose 700 (Better text contrast for Primary)
-      primaryForeground: '#FFFFFF',
-      primaryLight: '#FFE4E6',
-      primaryDarkMode: '#F43F5E',
-      primaryForegroundDark: '#FFFFFF',
-
-      sidebarLight: '#881337', // Rose 900 (High Contrast Sidebar)
-      sidebarDark: '#881337',
-
-      gradientStart: '#E11D48',
-      gradientEnd: '#FB7185',
-      gradientStartDark: '#9F1239',
-      gradientEndDark: '#E11D48',
-
-      chart1: '#E11D48',
-      chart2: '#F43F5E',
-      chart3: '#FB7185',
-      chart4: '#FDA4AF',
-      chart5: '#FECDD3',
-    },
-    preview: {
-      primary: '#BE123C',
-      secondary: '#FB7185',
-      accent: '#FFE4E6',
-    },
-  },
-  {
-    id: 'emerald',
-    name: 'Emerald',
-    description: 'Natural e equilibrado',
-    colors: {
-      primary: '#047857', // Emerald 700 (Better text contrast for Primary)
-      primaryForeground: '#FFFFFF',
-      primaryLight: '#D1FAE5',
-      primaryDarkMode: '#10B981',
-      primaryForegroundDark: '#FFFFFF',
-
-      sidebarLight: '#064E3B', // Emerald 900 (High Contrast Sidebar)
-      sidebarDark: '#064E3B',
-
-      gradientStart: '#059669',
-      gradientEnd: '#34D399',
-      gradientStartDark: '#064E3B',
-      gradientEndDark: '#059669',
-
-      chart1: '#059669',
-      chart2: '#10B981',
-      chart3: '#34D399',
-      chart4: '#6EE7B7',
-      chart5: '#A7F3D0',
-    },
-    preview: {
-      primary: '#047857',
-      secondary: '#34D399',
-      accent: '#D1FAE5',
-    },
-  },
-  {
-    id: 'amber',
-    name: 'Amber',
-    description: 'Quente e energético',
-    colors: {
-      primary: '#B45309', // Amber 700 (Better text contrast for Primary)
-      primaryForeground: '#FFFFFF',
-      primaryLight: '#FEF3C7',
-      primaryDarkMode: '#F59E0B',
-      primaryForegroundDark: '#FFFFFF',
-
-      sidebarLight: '#78350F', // Amber 900 (High Contrast Sidebar)
-      sidebarDark: '#78350F',
-
-      gradientStart: '#D97706',
-      gradientEnd: '#FBBF24',
-      gradientStartDark: '#92400E',
-      gradientEndDark: '#D97706',
-
-      chart1: '#D97706',
-      chart2: '#F59E0B',
-      chart3: '#FBBF24',
-      chart4: '#FDE68A',
-      chart5: '#FEF3C7',
-    },
-    preview: {
-      primary: '#B45309',
-      secondary: '#FBBF24',
-      accent: '#FEF3C7',
-    },
-  },
-  {
-    id: 'orange',
-    name: 'Orange',
-    description: 'Vibrante e amigável',
-    colors: {
-      primary: '#C2410C', // Orange 700 (Better text contrast for Primary)
-      primaryForeground: '#FFFFFF',
-      primaryLight: '#FFEDD5',
-      primaryDarkMode: '#F97316',
-      primaryForegroundDark: '#FFFFFF',
-
-      sidebarLight: '#7C2D12', // Orange 900 (High Contrast Sidebar)
-      sidebarDark: '#7C2D12',
-
-      gradientStart: '#EA580C',
-      gradientEnd: '#FB923C',
-      gradientStartDark: '#9A3412',
-      gradientEndDark: '#EA580C',
-
-      chart1: '#EA580C',
-      chart2: '#F97316',
-      chart3: '#FB923C',
-      chart4: '#FDBA74',
-      chart5: '#FED7AA',
-    },
-    preview: {
-      primary: '#C2410C',
-      secondary: '#FB923C',
-      accent: '#FFEDD5',
-    },
-  },
-];
+export interface BrandColors {
+  // Main Colors
+  primary: string;
+  primaryForeground: string;
+  primaryLight: string; // Used for backgrounds
+
+  // Dark Mode Overrides
+  primaryDarkMode: string;
+  primaryForegroundDark: string;
+
+  // Sidebar Colors
+  sidebarLight: string;
+  sidebarDark: string;
+
+  // Gradients
+  gradientStart: string;
+  gradientEnd: string;
+  gradientStartDark: string;
+  gradientEndDark: string;
+
+  // Chart Colors (Light Mode) - Dark mode will be calculated or fixed
+  chart1: string;
+  chart2: string;
+  chart3: string;
+  chart4: string;
+  chart5: string;
+
+  // Optional: Radius override per theme
+  radius?: string;
+}
+
+export interface ColorTheme {
+  id: string;
+  name: string;
+  description: string;
+  colors: BrandColors;
+  preview: {
+    primary: string;
+    secondary: string;
+    accent: string;
+  };
+}
+
+// Shadcn Standard Palette Values (approximate hex for compatibility)
+export const PALETTE = {
+  zinc: { 900: '#18181b', 50: '#fafafa' },
+  slate: { 900: '#0f172a', 50: '#f8fafc' },
+  stone: { 900: '#1c1917', 50: '#fafaf9' },
+  gray: { 900: '#111827', 50: '#f9fafb' },
+  neutral: { 900: '#171717', 50: '#fafafa' },
+  red: { 600: '#dc2626', 500: '#ef4444' },
+  rose: { 600: '#e11d48', 500: '#f43f5e' },
+  orange: { 600: '#ea580c', 500: '#f97316' },
+  green: { 600: '#16a34a', 500: '#22c55e' },
+  blue: { 600: '#2563eb', 500: '#3b82f6' },
+  yellow: { 600: '#ca8a04', 500: '#eab308' },
+  violet: { 600: '#7c3aed', 500: '#8b5cf6' },
+};
+
+export const colorThemes: ColorTheme[] = [
+  {
+    id: 'xertica-original',
+    name: 'Xertica Original',
+    description: 'A identidade visual clássica da Xertica com o gradiente original',
+    colors: {
+      primary: '#2C275B',
+      primaryForeground: '#FFFFFF',
+      primaryLight: '#5B568F',
+      primaryDarkMode: '#72CDFD',
+      primaryForegroundDark: '#09090B',
+
+      sidebarLight: '#2C275B', // Primary Color
+      sidebarDark: '#1a1928', // Original Dark BG
+
+      gradientStart: '#FDB0F2',
+      gradientEnd: '#72CDFD',
+      gradientStartDark: '#7B4A7A',
+      gradientEndDark: '#3A5C7D',
+
+      chart1: '#2C275B',
+      chart2: '#047857',
+      chart3: '#B45309',
+      chart4: '#1D4ED8',
+      chart5: '#B91C1C',
+    },
+    preview: {
+      primary: '#2C275B',
+      secondary: '#FDB0F2',
+      accent: '#72CDFD',
+    },
+  },
+  {
+    id: 'zinc',
+    name: 'Zinc',
+    description: 'Minimalista, sério e elegante (Escala de Cinza)',
+    colors: {
+      primary: '#18181B',
+      primaryForeground: '#FAFAFA',
+      primaryLight: '#E4E4E7',
+      primaryDarkMode: '#FAFAFA',
+      primaryForegroundDark: '#18181B',
+
+      sidebarLight: '#18181B', // Primary Color
+      sidebarDark: '#09090B',
+
+      gradientStart: '#52525B',
+      gradientEnd: '#D4D4D8',
+      gradientStartDark: '#27272A',
+      gradientEndDark: '#52525B',
+
+      chart1: '#18181B',
+      chart2: '#52525B',
+      chart3: '#A1A1AA',
+      chart4: '#D4D4D8',
+      chart5: '#E4E4E7',
+    },
+    preview: {
+      primary: '#18181B',
+      secondary: '#52525B',
+      accent: '#E4E4E7',
+    },
+  },
+  {
+    id: 'slate',
+    name: 'Slate',
+    description: 'Profissional com tons de azul acinzentado',
+    colors: {
+      primary: '#0F172A',
+      primaryForeground: '#F8FAFC',
+      primaryLight: '#CBD5E1',
+      primaryDarkMode: '#F8FAFC',
+      primaryForegroundDark: '#0F172A',
+
+      sidebarLight: '#0F172A', // Primary Color
+      sidebarDark: '#020617',
+
+      gradientStart: '#475569',
+      gradientEnd: '#94A3B8',
+      gradientStartDark: '#1E293B',
+      gradientEndDark: '#475569',
+
+      chart1: '#0F172A',
+      chart2: '#475569',
+      chart3: '#94A3B8',
+      chart4: '#CBD5E1',
+      chart5: '#E2E8F0',
+    },
+    preview: {
+      primary: '#0F172A',
+      secondary: '#475569',
+      accent: '#94A3B8',
+    },
+  },
+  {
+    id: 'blue',
+    name: 'Blue',
+    description: 'Confiável e seguro, padrão corporativo',
+    colors: {
+      primary: '#2563EB',
+      primaryForeground: '#FFFFFF',
+      primaryLight: '#DBEAFE',
+      primaryDarkMode: '#3B82F6',
+      primaryForegroundDark: '#FFFFFF',
+
+      sidebarLight: '#1E3A8A', // Blue 900 (High Contrast Sidebar)
+      sidebarDark: '#172554',
+
+      gradientStart: '#2563EB',
+      gradientEnd: '#60A5FA',
+      gradientStartDark: '#1D4ED8',
+      gradientEndDark: '#2563EB',
+
+      chart1: '#2563EB',
+      chart2: '#3B82F6',
+      chart3: '#60A5FA',
+      chart4: '#93C5FD',
+      chart5: '#BFDBFE',
+    },
+    preview: {
+      primary: '#2563EB',
+      secondary: '#60A5FA',
+      accent: '#DBEAFE',
+    },
+  },
+  {
+    id: 'violet',
+    name: 'Violet',
+    description: 'Criativo e vibrante',
+    colors: {
+      primary: '#7C3AED',
+      primaryForeground: '#FFFFFF',
+      primaryLight: '#EDE9FE',
+      primaryDarkMode: '#8B5CF6',
+      primaryForegroundDark: '#FFFFFF',
+
+      sidebarLight: '#4C1D95', // Violet 900 (High Contrast Sidebar)
+      sidebarDark: '#2E1065',
+
+      gradientStart: '#7C3AED',
+      gradientEnd: '#A78BFA',
+      gradientStartDark: '#5B21B6',
+      gradientEndDark: '#7C3AED',
+
+      chart1: '#7C3AED',
+      chart2: '#8B5CF6',
+      chart3: '#A78BFA',
+      chart4: '#C4B5FD',
+      chart5: '#DDD6FE',
+    },
+    preview: {
+      primary: '#7C3AED',
+      secondary: '#A78BFA',
+      accent: '#EDE9FE',
+    },
+  },
+  {
+    id: 'rose',
+    name: 'Rose',
+    description: 'Elegante e suave',
+    colors: {
+      primary: '#BE123C', // Rose 700 (Better text contrast for Primary)
+      primaryForeground: '#FFFFFF',
+      primaryLight: '#FFE4E6',
+      primaryDarkMode: '#F43F5E',
+      primaryForegroundDark: '#FFFFFF',
+
+      sidebarLight: '#881337', // Rose 900 (High Contrast Sidebar)
+      sidebarDark: '#881337',
+
+      gradientStart: '#E11D48',
+      gradientEnd: '#FB7185',
+      gradientStartDark: '#9F1239',
+      gradientEndDark: '#E11D48',
+
+      chart1: '#E11D48',
+      chart2: '#F43F5E',
+      chart3: '#FB7185',
+      chart4: '#FDA4AF',
+      chart5: '#FECDD3',
+    },
+    preview: {
+      primary: '#BE123C',
+      secondary: '#FB7185',
+      accent: '#FFE4E6',
+    },
+  },
+  {
+    id: 'emerald',
+    name: 'Emerald',
+    description: 'Natural e equilibrado',
+    colors: {
+      primary: '#047857', // Emerald 700 (Better text contrast for Primary)
+      primaryForeground: '#FFFFFF',
+      primaryLight: '#D1FAE5',
+      primaryDarkMode: '#10B981',
+      primaryForegroundDark: '#FFFFFF',
+
+      sidebarLight: '#064E3B', // Emerald 900 (High Contrast Sidebar)
+      sidebarDark: '#064E3B',
+
+      gradientStart: '#059669',
+      gradientEnd: '#34D399',
+      gradientStartDark: '#064E3B',
+      gradientEndDark: '#059669',
+
+      chart1: '#059669',
+      chart2: '#10B981',
+      chart3: '#34D399',
+      chart4: '#6EE7B7',
+      chart5: '#A7F3D0',
+    },
+    preview: {
+      primary: '#047857',
+      secondary: '#34D399',
+      accent: '#D1FAE5',
+    },
+  },
+  {
+    id: 'amber',
+    name: 'Amber',
+    description: 'Quente e energético',
+    colors: {
+      primary: '#B45309', // Amber 700 (Better text contrast for Primary)
+      primaryForeground: '#FFFFFF',
+      primaryLight: '#FEF3C7',
+      primaryDarkMode: '#F59E0B',
+      primaryForegroundDark: '#FFFFFF',
+
+      sidebarLight: '#78350F', // Amber 900 (High Contrast Sidebar)
+      sidebarDark: '#78350F',
+
+      gradientStart: '#D97706',
+      gradientEnd: '#FBBF24',
+      gradientStartDark: '#92400E',
+      gradientEndDark: '#D97706',
+
+      chart1: '#D97706',
+      chart2: '#F59E0B',
+      chart3: '#FBBF24',
+      chart4: '#FDE68A',
+      chart5: '#FEF3C7',
+    },
+    preview: {
+      primary: '#B45309',
+      secondary: '#FBBF24',
+      accent: '#FEF3C7',
+    },
+  },
+  {
+    id: 'orange',
+    name: 'Orange',
+    description: 'Vibrante e amigável',
+    colors: {
+      primary: '#C2410C', // Orange 700 (Better text contrast for Primary)
+      primaryForeground: '#FFFFFF',
+      primaryLight: '#FFEDD5',
+      primaryDarkMode: '#F97316',
+      primaryForegroundDark: '#FFFFFF',
+
+      sidebarLight: '#7C2D12', // Orange 900 (High Contrast Sidebar)
+      sidebarDark: '#7C2D12',
+
+      gradientStart: '#EA580C',
+      gradientEnd: '#FB923C',
+      gradientStartDark: '#9A3412',
+      gradientEndDark: '#EA580C',
+
+      chart1: '#EA580C',
+      chart2: '#F97316',
+      chart3: '#FB923C',
+      chart4: '#FDBA74',
+      chart5: '#FED7AA',
+    },
+    preview: {
+      primary: '#C2410C',
+      secondary: '#FB923C',
+      accent: '#FFEDD5',
+    },
+  },
+];