# Centralized Color Palette System This document describes the unified color system implemented for the Bakery IA frontend application. ## 🎯 Overview The application now uses a **centralized color configuration** that ensures consistent theming across both light and dark modes while maintaining a professional bakery brand identity. ## 📁 File Structure ``` src/styles/ ├── colors.js # 🏛️ Single source of truth for all colors ├── themes/ │ ├── light.css # 🌞 Light theme CSS variables │ └── dark.css # 🌙 Dark theme CSS variables ├── components.css # 🧩 CSS utility classes ├── globals.css # 🌐 Base styles └── animations.css # ✨ Animation definitions ``` ## 🏛️ Centralized Color Configuration (`colors.js`) ### Base Color Palette - **Primary**: Warm Orange (#d97706) - Bakery brand color - **Secondary**: Professional Sage Green (#16a34a) - Complements the brand - **Semantic Colors**: Success, Warning, Error, Info with full scale support - **Neutral**: Professional grayscale for text and backgrounds ### Professional Bakery Colors Special accent colors inspired by bakery products: - `sourdough`, `wholeWheat`, `brioche`, `rye`, `croissant` - `danish`, `espresso`, `latte`, `chocolate`, `vanilla` - And more for specialized use cases ### Chart Colors Colorblind-safe data visualization palette: - 8 distinct colors optimized for accessibility - Different brightness levels for light/dark themes ## 🎨 Theme System ### Light Theme - Clean, professional appearance - High contrast for accessibility - Warm whites and light grays ### Dark Theme - Rich dark backgrounds (#0f172a, #1e293b) - Enhanced color brightness for readability - Maintains brand consistency ## 🔧 Usage ### 1. In CSS (Recommended) ```css .my-component { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary); } .primary-button { background-color: var(--color-primary); color: var(--text-inverse); } ``` ### 2. Tailwind Classes ```jsx
Primary content
Secondary content
``` ### 3. CSS Utility Classes ```jsx
Themed content
``` ## 🏗️ CSS Variable Structure ### Semantic Colors ```css --color-primary: #d97706 /* Main brand color */ --color-primary-light: #f59e0b /* Lighter variant */ --color-primary-dark: #b45309 /* Darker variant */ --color-primary-50: #fffbeb /* Lightest scale */ --color-primary-900: #78350f /* Darkest scale */ ``` ### Theme-Specific Colors ```css --bg-primary: #ffffff /* Main background */ --bg-secondary: #f8fafc /* Secondary background */ --text-primary: #0f172a /* Primary text */ --text-secondary: #475569 /* Secondary text */ --border-primary: #e2e8f0 /* Main borders */ ``` ### Component Colors ```css --card-bg: #ffffff /* Card backgrounds */ --input-bg: #ffffff /* Input backgrounds */ --nav-bg: #ffffff /* Navigation background */ ``` ## 🎪 Available Utility Classes The system automatically generates utility classes for all color variables: ### Background Classes - `.bg-bg-primary`, `.bg-bg-secondary`, `.bg-bg-tertiary` - `.bg-color-primary`, `.bg-color-secondary`, `.bg-color-success` ### Text Classes - `.text-text-primary`, `.text-text-secondary`, `.text-text-tertiary` - `.text-color-primary`, `.text-color-error`, `.text-color-success` ### Border Classes - `.border-border-primary`, `.border-border-secondary` - `.border-color-primary`, `.border-color-error` ## 🌓 Theme Switching The application automatically applies the correct color values based on the theme class: ```html ``` ## ✅ Benefits 1. **Single Source of Truth**: All colors defined in one place 2. **Consistent Theming**: Automatic light/dark theme support 3. **Brand Consistency**: Professional bakery color palette 4. **Accessibility**: WCAG 2.1 AA compliant contrast ratios 5. **Developer Experience**: Easy to use utility classes 6. **Maintainability**: Change colors in one place, update everywhere ## 🔄 Migration Guide ### From Hardcoded Colors ```jsx // ❌ Before
// ✅ After
``` ### From Old CSS Variables ```css /* ❌ Before */ .component { background: #d97706; } /* ✅ After */ .component { background: var(--color-primary); } ``` ## 🎯 Best Practices 1. **Always use CSS variables** instead of hardcoded hex values 2. **Prefer semantic classes** like `text-text-primary` over `text-gray-900` 3. **Test in both themes** to ensure proper contrast 4. **Use bakery colors** for brand-specific elements 5. **Use chart colors** for data visualizations ## 🔍 Color Reference ### Primary Palette - **Primary**: #d97706 (Orange) - Main brand color - **Secondary**: #16a34a (Sage Green) - Professional complement - **Success**: #059669 (Green) - Positive actions - **Warning**: #ea580c (Orange variant) - Caution states - **Error**: #dc2626 (Red) - Error states - **Info**: #0284c7 (Blue) - Informational content ### Theme Backgrounds - **Light**: #ffffff, #f8fafc, #f1f5f9 - **Dark**: #0f172a, #1e293b, #334155 This centralized system ensures consistent, accessible, and maintainable color usage throughout the application while supporting both light and dark themes seamlessly.