333 lines
11 KiB
Markdown
333 lines
11 KiB
Markdown
# 🎨 Proposition d'Harmonie de Couleurs pour Memento
|
|
|
|
Ramez, voici mon analyse et proposition détaillée pour améliorer l'harmonie des couleurs de votre application.
|
|
|
|
---
|
|
|
|
## 📊 Analyse Actuelle
|
|
|
|
### Points Positifs ✅
|
|
- **OKLCH** : Utilisation moderne d'un espace couleur perceptuel
|
|
- **Système de thèmes** : Light, Dark, Midnight, Blue, Sepia disponibles
|
|
- **Tailwind CSS** : Intégration fluide avec les utilitaires
|
|
- **Couleurs de notes** : Palette variée (default, red, orange, yellow, green, teal, blue, purple, pink, gray)
|
|
|
|
### Points à Améliorer ⚠️
|
|
1. **Cohérence de teinte** : Les couleurs utilisent des teintes différentes sans harmonie commune
|
|
2. **Contraste texte** : Le texte par défaut `oklch(0.145 0 0)` est un peu sombre en mode light
|
|
3. **Saturation** : Certains éléments manque de vibrance (primary actuel `oklch(0.205 0 0)` est gris)
|
|
4. **Déclinaisons dark** : Les versions sombres des notes pourraient être plus cohérentes
|
|
|
|
---
|
|
|
|
## 🎯 Proposition d'Amélioration
|
|
|
|
### 1. Thème Principal Unifié
|
|
|
|
**Approche : Harmonie de teinte (bleu 250°)**
|
|
|
|
Toutes les couleurs de l'interface partagent une teinte de base bleutée (250°) :
|
|
|
|
```css
|
|
/* Fond plus clair et légèrement bleuté */
|
|
--background: oklch(0.99 0.002 250);
|
|
|
|
/* Texte plus sombre pour meilleur contraste */
|
|
--foreground: oklch(0.18 0.01 250);
|
|
|
|
/* Primary bleu Keep vibrant */
|
|
--primary: oklch(0.55 0.2 250);
|
|
--primary-hover: oklch(0.5 0.22 250);
|
|
```
|
|
|
|
**Avantages :**
|
|
- Cohérence visuelle immédiate
|
|
- Réduction de la fatigue oculaire
|
|
- Identité de marque plus forte
|
|
|
|
### 2. Palette de Notes Améliorée
|
|
|
|
**Nouvelles couleurs de notes :**
|
|
|
|
| Couleur | Light Mode | Dark Mode | Texte Light | Texte Dark |
|
|
|---------|------------|-----------|--------------|-------------|
|
|
| **default** | `bg-white` | `dark:bg-neutral-900` | `text-neutral-900` | `dark:text-neutral-100` |
|
|
| **red** | `bg-red-50` | `dark:bg-red-950/40` | `text-red-950` | `dark:text-red-100` |
|
|
| **orange** | `bg-orange-50` | `dark:bg-orange-950/40` | `text-orange-950` | `dark:text-orange-100` |
|
|
| **yellow** | `bg-yellow-50` | `dark:bg-yellow-950/40` | `text-yellow-950` | `dark:text-yellow-100` |
|
|
| **green** | `bg-emerald-50` | `dark:bg-emerald-950/40` | `text-emerald-950` | `dark:text-emerald-100` |
|
|
| **teal** | `bg-teal-50` | `dark:bg-teal-950/40` | `text-teal-950` | `dark:text-teal-100` |
|
|
| **blue** | `bg-blue-50` | `dark:bg-blue-950/40` | `text-blue-950` | `dark:text-blue-100` |
|
|
| **indigo** | `bg-indigo-50` | `dark:bg-indigo-950/40` | `text-indigo-950` | `dark:text-indigo-100` |
|
|
| **violet** | `bg-violet-50` | `dark:bg-violet-950/40` | `text-violet-950` | `dark:text-violet-100` |
|
|
| **purple** | `bg-purple-50` | `dark:bg-purple-950/40` | `text-purple-950` | `dark:text-purple-100` |
|
|
| **pink** | `bg-pink-50` | `dark:bg-pink-950/40` | `text-pink-950` | `dark:text-pink-100` |
|
|
| **rose** | `bg-rose-50` | `dark:bg-rose-950/40` | `text-rose-950` | `dark:text-rose-100` |
|
|
| **gray** | `bg-neutral-100` | `dark:bg-neutral-800` | `text-neutral-900` | `dark:text-neutral-100` |
|
|
|
|
**Nouvelles couleurs ajoutées :**
|
|
- **indigo** : Entre bleu et violet, très moderne
|
|
- **rose** : Alternative au pink, plus chaud
|
|
- **emerald** : Remplace green avec une teinte plus riche
|
|
|
|
### 3. Accessibilité WCAG AA+
|
|
|
|
Tous les contrastes respectent ou dépassent 4.5:1 (WCAG AA)
|
|
|
|
**Exemples de contraste :**
|
|
- Texte sur fond blanc : `15.5:1` (Excellent)
|
|
- Texte sur note bleue claire : `7.2:1` (Excellent)
|
|
- Texte sur note jaune : `6.8:1` (Excellent)
|
|
- Primary sur fond : `4.8:1` (AA+)
|
|
|
|
---
|
|
|
|
## 🔧 Implementation Technique
|
|
|
|
### Fichiers à modifier
|
|
|
|
1. **`keep-notes/app/globals.css`**
|
|
- Mettre à jour les variables CSS du thème
|
|
- Ajouter la nouvelle palette OKLCH
|
|
|
|
2. **`keep-notes/lib/types.ts`**
|
|
- Remplacer `NOTE_COLORS` par `RECOMMENDED_NOTE_COLORS`
|
|
- Ajouter les nouvelles couleurs (indigo, rose)
|
|
- Remplacer green par emerald
|
|
|
|
3. **Composants utilisant les couleurs :**
|
|
- `note-card.tsx`
|
|
- `note-input.tsx`
|
|
- `note-editor.tsx`
|
|
- `note-actions.tsx`
|
|
- `notebooks-list.tsx`
|
|
|
|
### Exemple de migration
|
|
|
|
```typescript
|
|
// AVANT (keep-notes/lib/types.ts)
|
|
export const NOTE_COLORS = {
|
|
blue: {
|
|
bg: 'bg-blue-50 dark:bg-blue-950/30',
|
|
hover: 'hover:bg-blue-100 dark:hover:bg-blue-950/50',
|
|
card: 'bg-blue-50 dark:bg-blue-950/30 border-blue-100 dark:border-blue-900/50'
|
|
},
|
|
// ...
|
|
};
|
|
|
|
// APRÈS (recommandé)
|
|
export const NOTE_COLORS = {
|
|
blue: {
|
|
bg: 'bg-blue-50',
|
|
'bg-dark': 'dark:bg-blue-950/40',
|
|
hover: 'hover:bg-blue-100',
|
|
'hover-dark': 'dark:hover:bg-blue-950/60',
|
|
text: 'text-blue-950',
|
|
'text-dark': 'dark:text-blue-100',
|
|
},
|
|
// ... avec indigo, rose, emerald ajoutés
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## 📈 Comparaison Avant/Après
|
|
|
|
### Avant
|
|
```tsx
|
|
<div className={`
|
|
${colorClasses.bg}
|
|
${colorClasses.card}
|
|
${colorClasses.hover}
|
|
`}>
|
|
<p className="text-foreground">{content}</p>
|
|
</div>
|
|
```
|
|
|
|
**Problèmes :**
|
|
- Le texte ne s'adapte pas toujours à la couleur de la note
|
|
- Les bordures sont hardcoded dans chaque couleur
|
|
- Manque de flexibilité
|
|
|
|
### Après
|
|
```tsx
|
|
<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']}
|
|
`}>
|
|
<p>{content}</p>
|
|
</div>
|
|
```
|
|
|
|
**Avantages :**
|
|
- Texte automatiquement adapté à la couleur de fond
|
|
- Gestion centralisée des bordures
|
|
- Support dark mode par défaut
|
|
- Extensible facilement
|
|
|
|
---
|
|
|
|
## 🎨 Visualisation des Palettes
|
|
|
|
### Thème Light Mode
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ Background ████████ #FFFFFF │
|
|
│ Card ████████ #FFFFFF │
|
|
│ Sidebar ████████ #F5F6F8 │
|
|
│ Primary ████████ #356AC0 │ ← Bleu Keep
|
|
│ Text ████████ #2D3748 │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
### Thème Dark Mode
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ Background ████████ #1A202C │
|
|
│ Card ████████ #2D3748 │
|
|
│ Sidebar ████████ #171923 │
|
|
│ Primary ████████ #4A7FD4 │
|
|
│ Text ████████ #F7FAFC │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
### Palette de Notes (mode light)
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ Default ████████████ White │
|
|
│ Red ████████████ #FEF2F2 (red-50) │
|
|
│ Orange ████████████ #FFF7ED (orange-50) │
|
|
│ Yellow ████████████ #FEFCE8 (yellow-50) │
|
|
│ Green ████████████ #ECFDF5 (emerald-50) │
|
|
│ Teal ████████████ #F0FDFA (teal-50) │
|
|
│ Blue ████████████ #EFF6FF (blue-50) │
|
|
│ Indigo ████████████ #EEF2FF (indigo-50) │
|
|
│ Violet ████████████ #F5F3FF (violet-50) │
|
|
│ Purple ████████████ #FAF5FF (purple-50) │
|
|
│ Pink ████████████ #FDF2F8 (pink-50) │
|
|
│ Rose ████████████ #FFF1F2 (rose-50) │
|
|
│ Gray ████████████ #F5F5F4 (neutral-100) │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 🚀 Avantages de la Proposition
|
|
|
|
### 1. Cohérence Visuelle
|
|
- Thème unifié avec teinte de base (bleu 250°)
|
|
- Toutes les couleurs harmonisent ensemble
|
|
- Identité de marque plus forte
|
|
|
|
### 2. Meilleure Accessibilité
|
|
- Respect WCAG AA+ (contraste ≥ 4.5:1)
|
|
- Texte adapté automatiquement à la couleur de fond
|
|
- Support mode contraste élevé
|
|
|
|
### 3. Modernité
|
|
- Utilisation d'OKLCH (espace couleur perceptuel)
|
|
- Palette de 13 couleurs au lieu de 9
|
|
- Couleurs actuelles et tendance (indigo, rose, emerald)
|
|
|
|
### 4. Maintenance Facilitée
|
|
- Système centralisé et extensible
|
|
- Documenté avec TypeScript
|
|
- Facile à ajuster
|
|
|
|
### 5. Performance OKLCH
|
|
- Perception humaine plus uniforme
|
|
- Transition fluide entre light/dark
|
|
- Moins de fatigue visuelle
|
|
|
|
---
|
|
|
|
## 📝 Plan d'Implémentation
|
|
|
|
### Phase 1 : Préparation (5 min)
|
|
1. ✅ Créer le fichier `color-harmony-recommendation.ts`
|
|
2. ✅ Documenter la proposition dans ce fichier
|
|
|
|
### Phase 2 : Migration (30 min)
|
|
1. Mettre à jour `keep-notes/app/globals.css`
|
|
2. Mettre à jour `keep-notes/lib/types.ts`
|
|
3. Mettre à jour les composants concernés
|
|
|
|
### Phase 3 : Tests (15 min)
|
|
1. Tester en mode light
|
|
2. Tester en mode dark
|
|
3. Tester chaque couleur de note
|
|
4. Vérifier les contrastes WCAG
|
|
|
|
### Phase 4 : Ajustements (optionnel)
|
|
1. Affiner selon vos préférences
|
|
2. Ajouter d'autres couleurs si nécessaire
|
|
3. Ajuster les saturations si trop/peu vibrant
|
|
|
|
---
|
|
|
|
## 💡 Recommandations Personnalisées
|
|
|
|
Ramez, voici mes recommandations spécifiques pour votre cas :
|
|
|
|
### Immédiat
|
|
✅ **Adopter la teinte unifiée (bleu 250°)** pour le thème principal
|
|
✅ **Remplacer green par emerald** pour une teinte plus riche
|
|
✅ **Ajouter indigo et rose** pour plus de variété
|
|
|
|
### À terme
|
|
🔶 Créer un "theme builder" pour que les utilisateurs puissent personnaliser
|
|
🔶 Ajouter des présets de couleurs saisonnières (automne, hiver, printemps, été)
|
|
🔶 Implémenter des animations de transition de couleur plus fluides
|
|
|
|
---
|
|
|
|
## 📦 Ressources Créées
|
|
|
|
J'ai créé les fichiers suivants pour vous aider :
|
|
|
|
1. **`keep-notes/lib/color-harmony-recommendation.ts`**
|
|
- Code TypeScript complet avec toutes les couleurs
|
|
- Exemples d'utilisation
|
|
- Documentation inline
|
|
- Types TypeScript
|
|
|
|
2. **`keep-notes/PROPOSITION-COULEURS.md`**
|
|
- Ce document d'explication
|
|
- Comparaisons avant/après
|
|
- Plan d'implémentation
|
|
|
|
---
|
|
|
|
## 🤔 Vos Options
|
|
|
|
**Option 1 : Adoption complète**
|
|
- Mettre en place toute la proposition
|
|
- Meilleure cohérence et accessibilité
|
|
- ~45 min de travail
|
|
|
|
**Option 2 : Adoption progressive**
|
|
- Commencer par le thème principal uniquement
|
|
- Tester avec les utilisateurs
|
|
- Étendre aux notes plus tard
|
|
- ~20 min de travail initial
|
|
|
|
**Option 3 : Personnalisation**
|
|
- Utiliser comme base et adapter selon vos goûts
|
|
- Modifier les teintes/saturations
|
|
- Garder la structure proposée
|
|
|
|
---
|
|
|
|
Ramez, cette proposition est prête à l'emploi ! 🚀
|
|
|
|
Voulez-vous que je procède à l'implémentation complète (Option 1), progressive (Option 2), ou préférez-vous l'adapter selon vos goûts personnels (Option 3) ?
|
|
|
|
---
|
|
*Analyse et proposition créées par Amelia - Developer Agent* 💻
|