/** * Centralized theme and color utility * This file consolidates all color schemes and styling constants * to eliminate duplication across components. */ // Status colors for badges and indicators export const STATUS_COLORS = { PENDING: 'bg-secondary-100 text-secondary-800', CLAIMED: 'bg-primary-100 text-primary-800', REJECTED: 'bg-red-100 text-red-800', ACTIVE: 'bg-primary-100 text-primary-800', INACTIVE: 'bg-gray-100 text-gray-800', EXPIRED: 'bg-red-100 text-red-800', } as const; // Badge color variants export const BADGE_COLORS = { info: 'bg-blue-100 text-blue-800', success: 'bg-primary-100 text-primary-800', warning: 'bg-secondary-100 text-secondary-800', error: 'bg-red-100 text-red-800', purple: 'bg-purple-100 text-purple-800', pink: 'bg-pink-100 text-pink-800', amber: 'bg-secondary-200 text-secondary-800', gray: 'bg-gray-100 text-gray-800', } as const; // Button style variants export const BUTTON_STYLES = { primary: 'bg-primary-500 text-white px-6 py-2 rounded-lg hover:bg-primary-600 transition-all duration-300', secondary: 'bg-secondary-500 text-white px-6 py-2 rounded-lg hover:bg-secondary-600 transition-all duration-300', success: 'bg-primary-500 text-white px-6 py-2 rounded-lg hover:bg-primary-600 transition-all duration-300', danger: 'bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 transition-all duration-300', warning: 'bg-secondary-400 text-white px-6 py-2 rounded-lg hover:bg-secondary-500 transition-all duration-300', outline: 'border border-primary-500 text-primary-500 px-6 py-2 rounded-lg hover:bg-primary-50 transition-all duration-300', ghost: 'text-gray-600 px-6 py-2 rounded-lg hover:bg-gray-100 transition-all duration-300', } as const; // Common input styling export const INPUT_STYLES = { base: 'w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:bg-gray-100 disabled:cursor-not-allowed', error: 'border-red-500', normal: 'border-gray-300', } as const; // Card and container styling export const CARD_STYLES = { base: 'bg-white rounded-lg shadow-md p-6', hover: 'bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-300', bordered: 'bg-white rounded-lg border border-gray-200 p-6', } as const; // Alert/notification styles export const ALERT_STYLES = { info: 'bg-blue-50 border border-blue-200 text-blue-800 px-4 py-3 rounded-lg', success: 'bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg', warning: 'bg-yellow-50 border border-yellow-200 text-yellow-800 px-4 py-3 rounded-lg', error: 'bg-red-50 border border-red-400 text-red-700 px-4 py-3 rounded-lg', } as const; // Utility function to get status color export function getStatusColor(status: string): string { const upperStatus = status.toUpperCase(); return STATUS_COLORS[upperStatus as keyof typeof STATUS_COLORS] || BADGE_COLORS.gray; } // Utility function to get button style export function getButtonStyle(variant: keyof typeof BUTTON_STYLES = 'primary'): string { return BUTTON_STYLES[variant]; } // Utility function to get input class with error state export function getInputStyle(hasError: boolean): string { return `${INPUT_STYLES.base} ${hasError ? INPUT_STYLES.error : INPUT_STYLES.normal}`; } // Role-based colors for user badges export const ROLE_COLORS = { ADMIN: 'bg-red-100 text-red-800', EMPLOYEE: 'bg-blue-100 text-blue-800', CLIENT: 'bg-primary-100 text-primary-800', } as const; export function getRoleColor(role: string): string { const upperRole = role.toUpperCase(); return ROLE_COLORS[upperRole as keyof typeof ROLE_COLORS] || BADGE_COLORS.gray; } // Prize type colors (from constants.ts PRIZE_CONFIG) export const PRIZE_COLORS = { INFUSEUR: 'bg-blue-100 text-blue-800', THE_SIGNATURE: 'bg-primary-100 text-primary-800', COFFRET_DECOUVERTE: 'bg-purple-100 text-purple-800', COFFRET_PRESTIGE: 'bg-secondary-200 text-secondary-800', THE_GRATUIT: 'bg-pink-100 text-pink-800', } as const; export function getPrizeColor(prizeType: string): string { const upperType = prizeType.toUpperCase(); return PRIZE_COLORS[upperType as keyof typeof PRIZE_COLORS] || BADGE_COLORS.gray; }