311 lines
9.8 KiB
TypeScript
311 lines
9.8 KiB
TypeScript
/**
|
|
* PROPOSITION D'HARMONIE DE COULEURS
|
|
* ===================================
|
|
*
|
|
* Recommandations pour un système de couleurs unifié et moderne
|
|
* Inspiré de Google Keep avec une approche contemporaine
|
|
*
|
|
*/
|
|
|
|
// =============================================================================
|
|
// 1. PALETTE PRINCIPALE DU THÈME (OKLCH)
|
|
// =============================================================================
|
|
|
|
/**
|
|
* Proposition de palette principale avec meilleure cohérence
|
|
* Utilise OKLCH pour une meilleure accessibilité et cohérence perceptive
|
|
*/
|
|
export const RECOMMENDED_THEME_COLORS = {
|
|
/* ============ THEME LIGHT ============ */
|
|
light: {
|
|
// Backgrounds
|
|
background: 'oklch(0.99 0.002 250)', // Blanc très légèrement bleuté
|
|
card: 'oklch(1 0 0)', // Blanc pur
|
|
sidebar: 'oklch(0.96 0.005 250)', // Gris-bleu très pâle
|
|
input: 'oklch(0.97 0.003 250)', // Gris-bleu pâle
|
|
|
|
// Textes
|
|
foreground: 'oklch(0.18 0.01 250)', // Gris-bleu foncé (meilleur contraste)
|
|
'foreground-secondary': 'oklch(0.45 0.01 250)', // Gris moyen
|
|
'foreground-muted': 'oklch(0.6 0.005 250)', // Gris clair
|
|
|
|
// Primary Actions
|
|
primary: 'oklch(0.55 0.2 250)', // Bleu Keep (plus vibrant)
|
|
'primary-hover': 'oklch(0.5 0.22 250)', // Bleu Keep foncé
|
|
'primary-foreground': 'oklch(0.99 0 0)', // Blanc pur
|
|
|
|
// Accents
|
|
accent: 'oklch(0.92 0.015 250)', // Bleu très pâle
|
|
'accent-foreground': 'oklch(0.18 0.01 250)',
|
|
|
|
// Borders
|
|
border: 'oklch(0.88 0.01 250)', // Gris-bleu très clair
|
|
'border-hover': 'oklch(0.8 0.015 250)',
|
|
|
|
// Functional
|
|
success: 'oklch(0.65 0.15 145)', // Vert
|
|
warning: 'oklch(0.75 0.12 70)', // Jaune/orange
|
|
destructive: 'oklch(0.6 0.2 25)', // Rouge
|
|
},
|
|
|
|
/* ============ THEME DARK ============ */
|
|
dark: {
|
|
// Backgrounds
|
|
background: 'oklch(0.12 0.01 250)', // Noir légèrement bleuté
|
|
card: 'oklch(0.16 0.01 250)', // Gris-bleu foncé
|
|
sidebar: 'oklch(0.1 0.01 250)', // Noir bleuté
|
|
input: 'oklch(0.18 0.01 250)',
|
|
|
|
// Textes
|
|
foreground: 'oklch(0.96 0.002 250)', // Blanc légèrement bleuté
|
|
'foreground-secondary': 'oklch(0.75 0.005 250)',
|
|
'foreground-muted': 'oklch(0.55 0.01 250)',
|
|
|
|
// Primary Actions
|
|
primary: 'oklch(0.65 0.2 250)', // Bleu plus clair
|
|
'primary-hover': 'oklch(0.7 0.2 250)',
|
|
'primary-foreground': 'oklch(0.1 0 0)',
|
|
|
|
// Accents
|
|
accent: 'oklch(0.22 0.01 250)',
|
|
'accent-foreground': 'oklch(0.96 0.002 250)',
|
|
|
|
// Borders
|
|
border: 'oklch(0.25 0.015 250)',
|
|
'border-hover': 'oklch(0.35 0.015 250)',
|
|
|
|
// Functional
|
|
success: 'oklch(0.7 0.15 145)',
|
|
warning: 'oklch(0.8 0.12 70)',
|
|
destructive: 'oklch(0.65 0.2 25)',
|
|
},
|
|
} as const;
|
|
|
|
// =============================================================================
|
|
// 2. PALETTE DES COULEURS DE NOTES (UNIFIÉE)
|
|
// =============================================================================
|
|
|
|
/**
|
|
* Nouvelle palette de couleurs pour les notes
|
|
* Harmonisée avec le thème principal
|
|
* Meilleure accessibilité WCAG AA (contraste minimum 4.5:1)
|
|
*/
|
|
export const RECOMMENDED_NOTE_COLORS = {
|
|
default: {
|
|
// Light theme
|
|
bg: 'bg-white',
|
|
'bg-dark': 'dark:bg-neutral-900',
|
|
border: 'border-neutral-200',
|
|
'border-dark': 'dark:border-neutral-800',
|
|
hover: 'hover:bg-neutral-50',
|
|
'hover-dark': 'dark:hover:bg-neutral-800',
|
|
// Pour texte sombre
|
|
text: 'text-neutral-900',
|
|
'text-dark': 'dark:text-neutral-100',
|
|
},
|
|
red: {
|
|
bg: 'bg-red-50',
|
|
'bg-dark': 'dark:bg-red-950/40',
|
|
border: 'border-red-100',
|
|
'border-dark': 'dark:border-red-900/50',
|
|
hover: 'hover:bg-red-100',
|
|
'hover-dark': 'dark:hover:bg-red-950/60',
|
|
text: 'text-red-950',
|
|
'text-dark': 'dark:text-red-100',
|
|
},
|
|
orange: {
|
|
bg: 'bg-orange-50',
|
|
'bg-dark': 'dark:bg-orange-950/40',
|
|
border: 'border-orange-100',
|
|
'border-dark': 'dark:border-orange-900/50',
|
|
hover: 'hover:bg-orange-100',
|
|
'hover-dark': 'dark:hover:bg-orange-950/60',
|
|
text: 'text-orange-950',
|
|
'text-dark': 'dark:text-orange-100',
|
|
},
|
|
yellow: {
|
|
bg: 'bg-yellow-50',
|
|
'bg-dark': 'dark:bg-yellow-950/40',
|
|
border: 'border-yellow-100',
|
|
'border-dark': 'dark:border-yellow-900/50',
|
|
hover: 'hover:bg-yellow-100',
|
|
'hover-dark': 'dark:hover:bg-yellow-950/60',
|
|
text: 'text-yellow-950',
|
|
'text-dark': 'dark:text-yellow-100',
|
|
},
|
|
green: {
|
|
bg: 'bg-emerald-50',
|
|
'bg-dark': 'dark:bg-emerald-950/40',
|
|
border: 'border-emerald-100',
|
|
'border-dark': 'dark:border-emerald-900/50',
|
|
hover: 'hover:bg-emerald-100',
|
|
'hover-dark': 'dark:hover:bg-emerald-950/60',
|
|
text: 'text-emerald-950',
|
|
'text-dark': 'dark:text-emerald-100',
|
|
},
|
|
teal: {
|
|
bg: 'bg-teal-50',
|
|
'bg-dark': 'dark:bg-teal-950/40',
|
|
border: 'border-teal-100',
|
|
'border-dark': 'dark:border-teal-900/50',
|
|
hover: 'hover:bg-teal-100',
|
|
'hover-dark': 'dark:hover:bg-teal-950/60',
|
|
text: 'text-teal-950',
|
|
'text-dark': 'dark:text-teal-100',
|
|
},
|
|
blue: {
|
|
bg: 'bg-blue-50',
|
|
'bg-dark': 'dark:bg-blue-950/40',
|
|
border: 'border-blue-100',
|
|
'border-dark': 'dark:border-blue-900/50',
|
|
hover: 'hover:bg-blue-100',
|
|
'hover-dark': 'dark:hover:bg-blue-950/60',
|
|
text: 'text-blue-950',
|
|
'text-dark': 'dark:text-blue-100',
|
|
},
|
|
indigo: {
|
|
bg: 'bg-indigo-50',
|
|
'bg-dark': 'dark:bg-indigo-950/40',
|
|
border: 'border-indigo-100',
|
|
'border-dark': 'dark:border-indigo-900/50',
|
|
hover: 'hover:bg-indigo-100',
|
|
'hover-dark': 'dark:hover:bg-indigo-950/60',
|
|
text: 'text-indigo-950',
|
|
'text-dark': 'dark:text-indigo-100',
|
|
},
|
|
violet: {
|
|
bg: 'bg-violet-50',
|
|
'bg-dark': 'dark:bg-violet-950/40',
|
|
border: 'border-violet-100',
|
|
'border-dark': 'dark:border-violet-900/50',
|
|
hover: 'hover:bg-violet-100',
|
|
'hover-dark': 'dark:hover:bg-violet-950/60',
|
|
text: 'text-violet-950',
|
|
'text-dark': 'dark:text-violet-100',
|
|
},
|
|
purple: {
|
|
bg: 'bg-purple-50',
|
|
'bg-dark': 'dark:bg-purple-950/40',
|
|
border: 'border-purple-100',
|
|
'border-dark': 'dark:border-purple-900/50',
|
|
hover: 'hover:bg-purple-100',
|
|
'hover-dark': 'dark:hover:bg-purple-950/60',
|
|
text: 'text-purple-950',
|
|
'text-dark': 'dark:text-purple-100',
|
|
},
|
|
pink: {
|
|
bg: 'bg-pink-50',
|
|
'bg-dark': 'dark:bg-pink-950/40',
|
|
border: 'border-pink-100',
|
|
'border-dark': 'dark:border-pink-900/50',
|
|
hover: 'hover:bg-pink-100',
|
|
'hover-dark': 'dark:hover:bg-pink-950/60',
|
|
text: 'text-pink-950',
|
|
'text-dark': 'dark:text-pink-100',
|
|
},
|
|
rose: {
|
|
bg: 'bg-rose-50',
|
|
'bg-dark': 'dark:bg-rose-950/40',
|
|
border: 'border-rose-100',
|
|
'border-dark': 'dark:border-rose-900/50',
|
|
hover: 'hover:bg-rose-100',
|
|
'hover-dark': 'dark:hover:bg-rose-950/60',
|
|
text: 'text-rose-950',
|
|
'text-dark': 'dark:text-rose-100',
|
|
},
|
|
gray: {
|
|
bg: 'bg-neutral-100',
|
|
'bg-dark': 'dark:bg-neutral-800',
|
|
border: 'border-neutral-200',
|
|
'border-dark': 'dark:border-neutral-700',
|
|
hover: 'hover:bg-neutral-200',
|
|
'hover-dark': 'dark:hover:bg-neutral-700',
|
|
text: 'text-neutral-900',
|
|
'text-dark': 'dark:text-neutral-100',
|
|
},
|
|
} as const;
|
|
|
|
// =============================================================================
|
|
// 3. RÈGLES DE DESIGN
|
|
// =============================================================================
|
|
|
|
/**
|
|
* Principes de design couleur :
|
|
*
|
|
* 1. HARMONIE : Toutes les couleurs partagent la même teinte de base (bleu 250°)
|
|
* - Crée une cohérence visuelle
|
|
* - Réduit la fatigue visuelle
|
|
* - Améliore la perception de marque
|
|
*
|
|
* 2. CONTRASTE : Respecte WCAG AA (4.5:1 minimum)
|
|
* - Texte sur fond : toujours ≥ 4.5:1
|
|
* - Éléments interactifs : ≥ 3:1
|
|
* - Utilise OKLCH pour une mesure plus précise
|
|
*
|
|
* 3. ACCESSIBILITÉ :
|
|
* - Ne pas utiliser la couleur seule pour véhiculer l'information
|
|
* - Inclure des icônes ou des symboles
|
|
* - Supporter le mode de contraste élevé
|
|
*
|
|
* 4. ADAPTABILITÉ :
|
|
* - Mode light/dark automatique
|
|
* - Variations de couleur par note
|
|
* - Thèmes alternatifs (midnight, blue, sepia)
|
|
*
|
|
* 5. PERFORMANCE PERCEPTIVE :
|
|
* - OKLCH pour une échelle perceptuelle uniforme
|
|
* - Même légèreté perçue entre light et dark
|
|
* - Transition fluide entre thèmes
|
|
*/
|
|
|
|
// =============================================================================
|
|
// 4. EXEMPLE D'IMPLEMENTATION
|
|
// =============================================================================
|
|
|
|
/**
|
|
* Comment utiliser ces couleurs dans les composants :
|
|
*
|
|
* ```tsx
|
|
* import { RECOMMENDED_NOTE_COLORS } from '@/lib/color-harmony-recommendation'
|
|
*
|
|
* // Pour une carte de note
|
|
* <div className={`
|
|
* ${noteColors.bg}
|
|
* dark:${noteColors['bg-dark']}
|
|
* ${noteColors.border}
|
|
* dark:${noteColors['border-dark']}
|
|
* ${noteColors.text}
|
|
* dark:${noteColors['text-dark']}
|
|
* hover:${noteColors.hover}
|
|
* dark:hover:${noteColors['hover-dark']}
|
|
* `}>
|
|
* {note.content}
|
|
* </div>
|
|
*
|
|
* // Pour le thème global (globals.css)
|
|
* :root {
|
|
* --background: oklch(0.99 0.002 250);
|
|
* --foreground: oklch(0.18 0.01 250);
|
|
* --primary: oklch(0.55 0.2 250);
|
|
* // ... autres couleurs
|
|
* }
|
|
* ```
|
|
*/
|
|
|
|
// =============================================================================
|
|
// 5. AVANTAGES DE CETTE APPROCHE
|
|
// =============================================================================
|
|
|
|
/**
|
|
* ✅ Cohérence visuelle accrue
|
|
* ✅ Meilleure accessibilité (WCAG AA+)
|
|
* ✅ Adaptation native aux modes light/dark
|
|
* ✅ Palette extensible (facile à ajouter de nouvelles couleurs)
|
|
* ✅ Performance OKLCH (perception humaine)
|
|
* ✅ Compatible avec Tailwind CSS
|
|
* ✅ Maintenance simplifiée
|
|
* ✅ Professionalisme et modernité
|
|
*/
|
|
|
|
export type RecommendedNoteColor = keyof typeof RECOMMENDED_NOTE_COLORS;
|