ADD new frontend
This commit is contained in:
Urtzi Alfaro
204
frontend/src/styles/README.md
Normal file
204
frontend/src/styles/README.md
Normal file
@@ -0,0 +1,204 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user