204 lines
5.7 KiB
Markdown
204 lines
5.7 KiB
Markdown
|
# 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
|
||
|
|
<div className="bg-primary-600 text-white">
|
||
|
|
Primary content
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-secondary-500 text-white">
|
||
|
|
Secondary content
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 3. CSS Utility Classes
|
||
|
|
```jsx
|
||
|
|
<div className="bg-bg-primary text-text-primary border-border-primary">
|
||
|
|
Themed content
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
## 🏗️ 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
|
||
|
|
<!-- Light theme -->
|
||
|
|
<html class="light">
|
||
|
|
<!-- Colors from light.css applied -->
|
||
|
|
</html>
|
||
|
|
|
||
|
|
<!-- Dark theme -->
|
||
|
|
<html class="dark">
|
||
|
|
<!-- Colors from dark.css applied -->
|
||
|
|
</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
|
||
|
|
<div className="bg-orange-600 text-white">
|
||
|
|
|
||
|
|
// ✅ After
|
||
|
|
<div className="bg-color-primary text-text-inverse">
|
||
|
|
```
|
||
|
|
|
||
|
|
### 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.
|