Couleurs

Color Picker AVS

Le Color Picker AVS est un système complet de gestion de couleurs africaines basé sur des combinaisons (combos) prédéfinies et personnalisables.

Pourquoi ce sujet est important

Le color picker permet d'explorer, filtrer et créer des combinaisons de couleurs inspirées des textiles traditionnels africains, avec des fonctionnalités d'export multi-format.

Explication

Structure des Données

Les combos sont stockés dans data.ts avec une structure TypeScript typée :

data.ts

interface Combo {
  id: string;           // Identifiant unique
  name: string;         // Nom du combo
  origin: string;       // Origine géographique
  description: string;  // Description culturelle
  patternCSS: string;   // Classe CSS du pattern
  colors: ComboColor[]; // Tableau de 4 couleurs
  accentClass: string;  // Classe Tailwind pour l'accent
  accentHex: string;    // Couleur hex de l'accent
  region?: string;      // Région (filtre)
  culture?: string;     // Culture (filtre)
  theme?: string;       // Thème (filtre)
}

interface ComboColor {
  role: 'primary' | 'secondary' | 'accent' | 'neutral';
  name: string;         // Nom de la couleur
  hex: string;          // Code HEX
  meaning: string;      // Signification culturelle
  origin: string;       // Source du pigment
  css: string;          // Variable CSS (--nom)
}

Système de Filtrage

Le color picker permet de filtrer les combos par trois dimensions :

Région : Afrique de l'Ouest, Centrale, Est, Australe, du Nord, Pan-Africain
Culture : Yoruba, Akan, Bamoum, Maasai, Zoulou, etc.
Thème : Standard, Royal, Nature, Textile, Historique, etc.

Créateur de Palette Personnalisée

Le composant CustomPaletteBuilder permet de créer vos propres combos en sélectionnant des couleurs dans la bibliothèque de swatches organisée par familles (Terre & Ocre, Indigo & Bleu, Or & Jaune, Vert, Neutres).

Introduction Intégration