xertica-ui 1.1.0 → 1.2.1

package/contexts/BrandColorsContext.tsx

@@ -1,47 +1,11 @@
 import React, { createContext, useContext, useState, useEffect } from 'react';
 
-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;
-  };
-}
+import {
+  BrandColors,
+  ColorTheme,
+  PALETTE,
+  colorThemes,
+} from './theme-data';
 
 interface BrandColorsContextType {
   colors: BrandColors;
@@ -52,304 +16,6 @@ interface BrandColorsContextType {
   setRadius: (radius: number) => void;
 }
 
-// Shadcn Standard Palette Values (approximate hex for compatibility)
-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: '#FDB0F2',
-      chart3: '#72CDFD',
-      chart4: '#5B568F',
-      chart5: '#4F46E5',
-    },
-    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',
-    },
-  },
-];
-
 const BrandColorsContext = createContext<BrandColorsContextType | undefined>(undefined);
 
 export const BrandColorsProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
@@ -377,10 +43,10 @@ export const BrandColorsProvider: React.FC<{ children: React.ReactNode }> = ({ c
     const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
     return result
       ? {
-          r: parseInt(result[1], 16),
-          g: parseInt(result[2], 16),
-          b: parseInt(result[3], 16),
-        }
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
       : null;
   };
 
@@ -388,11 +54,11 @@ export const BrandColorsProvider: React.FC<{ children: React.ReactNode }> = ({ c
   const applyColors = React.useCallback(() => {
     const root = document.documentElement;
     const isDark = root.classList.contains('dark');
-    
+
     // --- Determine Colors based on Mode ---
     const primary = isDark ? colors.primaryDarkMode : colors.primary;
     const primaryForeground = isDark ? colors.primaryForegroundDark : colors.primaryForeground;
-    
+
     // Gradient Logic
     const gradientStart = isDark ? colors.gradientStartDark : colors.gradientStart;
     const gradientEnd = isDark ? colors.gradientEndDark : colors.gradientEnd;
@@ -402,10 +68,10 @@ export const BrandColorsProvider: React.FC<{ children: React.ReactNode }> = ({ c
     const semantic = {
       success: isDark ? '#4ade80' : '#22c55e', // Green 400 / 500
       warning: isDark ? '#fbbf24' : '#f59e0b', // Amber 400 / 500
-      info:    isDark ? '#60a5fa' : '#3b82f6', // Blue 400 / 500
+      info: isDark ? '#60a5fa' : '#3b82f6', // Blue 400 / 500
       destructive: isDark ? '#f87171' : '#ef4444', // Red 400 / 500
     };
-    
+
     // --- Apply CSS Variables ---
 
     // 1. Core Primary Colors
@@ -421,29 +87,29 @@ export const BrandColorsProvider: React.FC<{ children: React.ReactNode }> = ({ c
     root.style.setProperty('--info-foreground', '#ffffff');
     root.style.setProperty('--destructive', semantic.destructive);
     root.style.setProperty('--destructive-foreground', '#ffffff');
-    
+
     // 3. Secondary & Accents (Derived or Specific)
-    
+
     // 2. Secondary & Accents (Derived or Specific)
     // We use primaryLight for subtle backgrounds
     // In dark mode, we might want to adjust opacity
     const primaryRGB = hexToRgb(primary);
     if (primaryRGB) {
-       // Create a subtle tint for secondary/accent/muted
-       const alpha = isDark ? 0.2 : 0.1;
-       const subtle = `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, ${alpha})`;
-       
-       // Note: Shadcn usually has specific greys for secondary, but for "Brand" themes 
-       // we can tint them slightly or stick to standard zinc. 
-       // For this implementation, we will keep existing "neutral" variables from CSS 
-       // but override "ring" and "sidebar-ring" to match brand.
-       
-       root.style.setProperty('--ring', isDark ? colors.primaryDarkMode : `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.5)`);
-       
-       // Also update the Xertica specific variables
-       root.style.setProperty('--xertica-primary', primary);
-       root.style.setProperty('--primary-light', `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.15)`);
-       root.style.setProperty('--primary-light-foreground', primary);
+      // Create a subtle tint for secondary/accent/muted
+      const alpha = isDark ? 0.2 : 0.1;
+      const subtle = `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, ${alpha})`;
+
+      // Note: Shadcn usually has specific greys for secondary, but for "Brand" themes 
+      // we can tint them slightly or stick to standard zinc. 
+      // For this implementation, we will keep existing "neutral" variables from CSS 
+      // but override "ring" and "sidebar-ring" to match brand.
+
+      root.style.setProperty('--ring', isDark ? colors.primaryDarkMode : `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.5)`);
+
+      // Also update the Xertica specific variables
+      root.style.setProperty('--xertica-primary', primary);
+      root.style.setProperty('--primary-light', `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.15)`);
+      root.style.setProperty('--primary-light-foreground', primary);
     }
 
     // 3. Radius
@@ -459,47 +125,47 @@ export const BrandColorsProvider: React.FC<{ children: React.ReactNode }> = ({ c
     // 5. Sidebar (Override)
     // Dynamic sidebar colors based on theme and mode
     const sidebarBg = isDark ? colors.sidebarDark : colors.sidebarLight;
-    
+
     // Determine if sidebar background is dark or light to set text color
     // We assume if the sidebar background is the Primary Color (which are generally dark/saturated), text should be white.
     // Xertica Original (Purple), Blue, Violet, etc. are all dark.
     // If sidebarLight is White (#FFFFFF) or very light, text should be dark.
-    
+
     // Simple check: is sidebarBg roughly White/Light?
     const isSidebarLight = sidebarBg.toLowerCase() === '#ffffff' || sidebarBg.toLowerCase() === '#f3f4f6' || sidebarBg.toLowerCase() === '#fafafa';
-    
+
     const sidebarFg = isSidebarLight ? '#0F172A' : '#FFFFFF'; // Dark text for light BG, White text for dark BG
-    
+
     root.style.setProperty('--sidebar', sidebarBg);
     root.style.setProperty('--sidebar-foreground', sidebarFg);
-    
+
     // Sidebar Accent
     if (primaryRGB) {
-        if (isSidebarLight) {
-             // Standard behavior for light sidebar
-             root.style.setProperty('--sidebar-accent', `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.1)`);
-             root.style.setProperty('--sidebar-accent-foreground', primary);
-             root.style.setProperty('--sidebar-border', 'rgba(0,0,0,0.1)');
-        } else {
-             // Behavior for colored/dark sidebar
-             // Accent should be a slightly lighter/darker shade of the sidebar bg
-             // Or white with low opacity
-             root.style.setProperty('--sidebar-accent', 'rgba(255, 255, 255, 0.1)');
-             root.style.setProperty('--sidebar-accent-foreground', '#FFFFFF');
-             root.style.setProperty('--sidebar-border', 'rgba(255,255,255,0.1)');
-        }
-        root.style.setProperty('--sidebar-ring', `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.5)`);
+      if (isSidebarLight) {
+        // Standard behavior for light sidebar
+        root.style.setProperty('--sidebar-accent', `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.1)`);
+        root.style.setProperty('--sidebar-accent-foreground', primary);
+        root.style.setProperty('--sidebar-border', 'rgba(0,0,0,0.1)');
+      } else {
+        // Behavior for colored/dark sidebar
+        // Accent should be a slightly lighter/darker shade of the sidebar bg
+        // Or white with low opacity
+        root.style.setProperty('--sidebar-accent', 'rgba(255, 255, 255, 0.1)');
+        root.style.setProperty('--sidebar-accent-foreground', '#FFFFFF');
+        root.style.setProperty('--sidebar-border', 'rgba(255,255,255,0.1)');
+      }
+      root.style.setProperty('--sidebar-ring', `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.5)`);
     }
 
     // Sidebar Primary (Active Item)
     // If sidebar is colored (dark), the primary active item usually looks good as white or a very bright accent.
     // But standard "Primary" might clash if it's the same color as the background.
     if (!isSidebarLight) {
-         root.style.setProperty('--sidebar-primary', '#FFFFFF');
-         root.style.setProperty('--sidebar-primary-foreground', primary); // Text becomes primary color
+      root.style.setProperty('--sidebar-primary', '#FFFFFF');
+      root.style.setProperty('--sidebar-primary-foreground', primary); // Text becomes primary color
     } else {
-         root.style.setProperty('--sidebar-primary', primary);
-         root.style.setProperty('--sidebar-primary-foreground', primaryForeground);
+      root.style.setProperty('--sidebar-primary', primary);
+      root.style.setProperty('--sidebar-primary-foreground', primaryForeground);
     }
 
     // 6. Gradients
@@ -507,7 +173,7 @@ export const BrandColorsProvider: React.FC<{ children: React.ReactNode }> = ({ c
       '--gradient-diagonal',
       `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)`
     );
-    
+
     // Save preferences
     localStorage.setItem('color-theme', currentTheme);
   }, [colors, currentTheme, radius]);