bakery-admin/bakery-ia

Fork 0

Files

Urtzi Alfaro 0fd273cfce ADD new frontend

2025-08-28 10:41:04 +02:00

5.7 KiB

Raw Blame History

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)

.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

<div className="bg-primary-600 text-white">
  Primary content
</div>

<div className="bg-secondary-500 text-white">
  Secondary content  
</div>

3. CSS Utility Classes

<div className="bg-bg-primary text-text-primary border-border-primary">
  Themed content
</div>

🏗️ CSS Variable Structure

Semantic Colors

--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

--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

--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:

<!-- Light theme -->
<html class="light">
  <!-- Colors from light.css applied -->
</html>

<!-- Dark theme -->
<html class="dark">
  <!-- Colors from dark.css applied -->
</html>

✅ Benefits

Single Source of Truth: All colors defined in one place
Consistent Theming: Automatic light/dark theme support
Brand Consistency: Professional bakery color palette
Accessibility: WCAG 2.1 AA compliant contrast ratios
Developer Experience: Easy to use utility classes
Maintainability: Change colors in one place, update everywhere

🔄 Migration Guide

From Hardcoded Colors

// ❌ Before
<div className="bg-orange-600 text-white">

// ✅ After  
<div className="bg-color-primary text-text-inverse">

From Old CSS Variables

/* ❌ Before */
.component {
  background: #d97706;
}

/* ✅ After */
.component {
  background: var(--color-primary);
}

🎯 Best Practices

Always use CSS variables instead of hardcoded hex values
Prefer semantic classes like text-text-primary over text-gray-900
Test in both themes to ensure proper contrast
Use bakery colors for brand-specific elements
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.

5.7 KiB Raw Blame History