docs: remove legacy implementation docs in French
This commit is contained in:
@@ -0,0 +1,233 @@
|
||||
# 🎨 État du Système de Théming - ObsiViewer
|
||||
|
||||
**Date** : 20 octobre 2025
|
||||
**Statut** : 🟢 Infrastructure complète - Refactoring en cours
|
||||
|
||||
---
|
||||
|
||||
## ✅ Complété
|
||||
|
||||
### 1. Architecture de base (100%)
|
||||
|
||||
- ✅ **themes.css** : 14 variantes (7 thèmes × 2 modes) avec tokens CSS complets
|
||||
- Light, Dark, Obsidian, Nord, Notion, GitHub, Discord, Monokai
|
||||
- Chaque thème a une version light ET dark
|
||||
- Tokens : backgrounds, text, borders, brand, status, UI, editor, shadows
|
||||
|
||||
- ✅ **tailwind.config.js** : Configuration complète
|
||||
- Mapping de tous les tokens CSS vers classes Tailwind
|
||||
- 40+ tokens mappés (bg, fg, surface1/2, primary, accent, etc.)
|
||||
- Support des variantes (hover, focus, dark)
|
||||
|
||||
- ✅ **ThemeService** : Service Angular fonctionnel
|
||||
- Gestion mode (system/light/dark) + thème
|
||||
- Persistance localStorage
|
||||
- Observable pour réactivité
|
||||
- Application sur `<html>` (classe `.dark` + `data-theme`)
|
||||
|
||||
- ✅ **codemirror-themes.ts** : 14 variantes CodeMirror 6
|
||||
- Fonction `cm6ThemeFor(themeId, mode)` complète
|
||||
- Chaque thème a sa palette de coloration syntaxique
|
||||
- Cohérence avec les tokens CSS
|
||||
|
||||
- ✅ **Anti-FOUC** : Script inline dans `index.html`
|
||||
- Lecture des préférences avant Angular
|
||||
- Application immédiate du thème
|
||||
- Pas de flash de contenu non stylé
|
||||
|
||||
### 2. Refactoring automatisé (68%)
|
||||
|
||||
- ✅ **Script `refactor-colors.mjs`** créé
|
||||
- ✅ **66 fichiers** mis à jour automatiquement
|
||||
- ✅ **232 occurrences** de couleurs hardcodées remplacées
|
||||
- `bg-slate-*` → `bg-surface1/2`
|
||||
- `text-gray-*` → `text-main/muted`
|
||||
- `border-slate-*` → `border-border`
|
||||
- Variantes dark:, hover:, focus: gérées
|
||||
|
||||
### 3. Documentation
|
||||
|
||||
- ✅ **THEMING_IMPLEMENTATION.md** : Documentation technique complète
|
||||
- ✅ **THEMING_STATUS.md** : Ce fichier (état du projet)
|
||||
|
||||
---
|
||||
|
||||
## 🔄 En cours
|
||||
|
||||
### Refactoring manuel (109 occurrences restantes)
|
||||
|
||||
**Fichiers prioritaires** (14+ matches) :
|
||||
1. `app-sidebar-drawer.component.ts` (14 matches)
|
||||
2. `graph-options-panel.component.ts` (11 matches)
|
||||
3. `app-shell-nimbus.component.ts` (9 matches)
|
||||
|
||||
**Fichiers moyens** (4-8 matches) :
|
||||
- `quick-links.component.ts` (8)
|
||||
- `nimbus-sidebar.component.ts` (8)
|
||||
- `markdown-playground.component.ts` (6)
|
||||
- `add-bookmark-modal.component.html` (6)
|
||||
- `search-query-assistant.component.ts` (5)
|
||||
- `filters-section.component.ts` (4)
|
||||
|
||||
**Fichiers mineurs** (1-3 matches) :
|
||||
- 23 fichiers avec 1-3 occurrences chacun
|
||||
|
||||
**Types de cas restants** :
|
||||
- Styles conditionnels complexes
|
||||
- Classes dynamiques avec logique métier
|
||||
- Variantes rares (active:, disabled:, group-hover:)
|
||||
- Couleurs dans des contextes spécifiques (graphes, visualisations)
|
||||
|
||||
---
|
||||
|
||||
## ⏳ À faire
|
||||
|
||||
### 1. Refactoring manuel (Priorité : Haute)
|
||||
|
||||
**Approche recommandée** :
|
||||
1. Traiter les 3 fichiers prioritaires (34 matches)
|
||||
2. Traiter les 7 fichiers moyens (47 matches)
|
||||
3. Traiter les 23 fichiers mineurs (28 matches)
|
||||
|
||||
**Commande pour identifier** :
|
||||
```bash
|
||||
grep -rn "bg-slate-\|bg-gray-\|text-slate-\|text-gray-" src/ | wc -l
|
||||
```
|
||||
|
||||
### 2. Tests de la matrice complète (Priorité : Haute)
|
||||
|
||||
**14 combinaisons à tester** :
|
||||
|
||||
| Thème | Light | Dark |
|
||||
|-----------|-------|------|
|
||||
| Light | ✅ | N/A |
|
||||
| Dark | N/A | ✅ |
|
||||
| Obsidian | ⏳ | ⏳ |
|
||||
| Nord | ⏳ | ⏳ |
|
||||
| Notion | ⏳ | ⏳ |
|
||||
| GitHub | ⏳ | ⏳ |
|
||||
| Discord | ⏳ | ⏳ |
|
||||
| Monokai | ⏳ | ⏳ |
|
||||
|
||||
**Checklist par combinaison** :
|
||||
- [ ] Sidebar (fond, hover, actif, badges)
|
||||
- [ ] Topbar + search (input, focus, placeholder)
|
||||
- [ ] Liste notes (items, hover, selected)
|
||||
- [ ] Page détail (titres, liens, code, tables)
|
||||
- [ ] Mode édition (inputs, buttons, CodeMirror)
|
||||
- [ ] Panneaux (TOC, propriétés, tags)
|
||||
- [ ] Modales (fond, overlay, bordure)
|
||||
- [ ] Menus contextuels
|
||||
- [ ] Toasts
|
||||
- [ ] Tables (headers, zebra, hover)
|
||||
- [ ] Chips/Tags (fond, hover, selected)
|
||||
- [ ] Scrollbars
|
||||
- [ ] Page Parameters
|
||||
- [ ] Mobile (bottom nav, drawers)
|
||||
|
||||
### 3. Validation contrastes (Priorité : Moyenne)
|
||||
|
||||
**Outils** :
|
||||
- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
|
||||
- Chrome DevTools (Lighthouse)
|
||||
|
||||
**Critères WCAG AA** :
|
||||
- Texte normal : ratio ≥ 4.5:1
|
||||
- Texte large : ratio ≥ 3:1
|
||||
- Éléments UI : ratio ≥ 3:1
|
||||
|
||||
**À vérifier pour chaque thème** :
|
||||
- [ ] Texte principal / fond
|
||||
- [ ] Texte muted / fond
|
||||
- [ ] Liens / fond
|
||||
- [ ] Boutons / fond
|
||||
- [ ] Bordures / fond
|
||||
|
||||
### 4. Vérification finale (Priorité : Basse)
|
||||
|
||||
- [ ] Aucune couleur hardcodée restante (grep complet)
|
||||
- [ ] Tous les composants utilisent les tokens
|
||||
- [ ] Documentation à jour
|
||||
- [ ] Screenshots comparatifs (avant/après)
|
||||
- [ ] Guide utilisateur pour la page Parameters
|
||||
|
||||
---
|
||||
|
||||
## 📊 Métriques
|
||||
|
||||
### Progression globale
|
||||
|
||||
```
|
||||
Infrastructure : ████████████████████ 100% (5/5)
|
||||
Refactoring : █████████████░░░░░░░ 68% (232/341)
|
||||
Tests : ░░░░░░░░░░░░░░░░░░░░ 0% (0/14)
|
||||
Documentation : ████████████████████ 100% (2/2)
|
||||
---
|
||||
TOTAL : ████████████░░░░░░░░ 67%
|
||||
```
|
||||
|
||||
### Détails refactoring
|
||||
|
||||
| Catégorie | Avant | Après | Restant |
|
||||
|--------------------|-------|-------|---------|
|
||||
| Couleurs hardcodées| 341 | 109 | 109 |
|
||||
| Fichiers touchés | 0 | 66 | ~32 |
|
||||
| Tokens créés | 0 | 40+ | - |
|
||||
| Thèmes complets | 2 | 14 | - |
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Commandes rapides
|
||||
|
||||
```bash
|
||||
# Refactoring automatique (réexécuter si besoin)
|
||||
node scripts/refactor-colors.mjs
|
||||
|
||||
# Rechercher couleurs hardcodées
|
||||
grep -rn "bg-slate-\|bg-gray-\|text-slate-\|text-gray-" src/
|
||||
|
||||
# Lancer l'application
|
||||
npm run dev
|
||||
|
||||
# Tests E2E
|
||||
npm run test:e2e
|
||||
|
||||
# Build production
|
||||
npm run build
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Objectif final
|
||||
|
||||
**Application entièrement thémable** :
|
||||
- ✅ 7 thèmes × 2 modes = 14 combinaisons
|
||||
- ✅ Aucune couleur hardcodée
|
||||
- ✅ Cohérence visuelle totale
|
||||
- ✅ Accessibilité WCAG AA
|
||||
- ✅ Performance optimale (CSS variables)
|
||||
- ✅ Expérience utilisateur fluide (anti-FOUC)
|
||||
|
||||
---
|
||||
|
||||
## 📝 Notes
|
||||
|
||||
### Points d'attention
|
||||
|
||||
1. **CodeMirror 6** : Les thèmes sont appliqués dynamiquement via `ThemeService.getCodeMirrorExtensions()`
|
||||
2. **Persistance** : Clé localStorage `obsiviewer.preferences.v1`
|
||||
3. **Réactivité** : Tous les composants doivent s'abonner à `ThemeService.onPrefs$` si nécessaire
|
||||
4. **Mobile** : Vérifier les overlays et bottom sheets dans chaque thème
|
||||
5. **Graphes** : Les visualisations D3/Canvas peuvent nécessiter un traitement spécial
|
||||
|
||||
### Améliorations futures
|
||||
|
||||
- [ ] Thème personnalisé (éditeur de couleurs)
|
||||
- [ ] Import/export de thèmes
|
||||
- [ ] Prévisualisation live dans Parameters
|
||||
- [ ] Thèmes communautaires
|
||||
- [ ] Mode haute contraste dédié
|
||||
|
||||
---
|
||||
|
||||
**Dernière mise à jour** : 20 octobre 2025, 17:05 UTC-04:00
|
||||
Reference in New Issue
Block a user