TECH: Design tokens & thème global dark-first (refonte MudTheme + palette sémantique) #32

New issue

Closed

opened 2026-08-10 21:37:39 +02:00 by nonobis · 1 comment

nonobis commented

2026-08-10 21:37:39 +02:00

Owner

🎯 Contexte

Heimdall est un poste de surveillance vidéo multi-sites : l'UI doit être lisible en continu, dans l'obscurité (salles de supervision) comme en bureau. La direction artistique cible : dark-first, aucune couleur pure (#000/#FFF), palette sémantique de monitoring (statuts, alertes, temps réel) — cohérente avec les dashboards de vidéosurveillance et les outils d'ops (PagerDuty, Grafana, Vectra).

📚 Référence spec (MASTER_SPECIFICATION.md v2.0)

Étape 5 — Phase 20 (Blazor UI Auth + Layout), Phase 21 (Dashboard) ; docs/ui-pages.md → « Navigation & Layout », « App Bar (top) ». Exigence transverse : accessibilité WCAG 2.2 (contrastes ≥ 4.5:1 texte).

🔍 État actuel (vérifié dans le code)

MudTheme dupliqué dans MainLayout.razor (L116-229) et MudBlazorLayout.razor (L16-84) → dérive garantie (les deux sont déjà légèrement différents).
Thème monochrome « noir & blanc » : Black="#000000", White="#FFFFFF", AppbarBackground="#000000" → noir/blanc purs interdits par la direction artistique (fatigue visuelle, halos, contraste HDR agressif).
app.css : tokens partiels (--bg-*, --text-*, --border-*, --shadow-*) mais pas de tokens espacement (grille 4px) ni radius ; radius en dur partout (Style="border-radius: 12px;" répété dans les pages).
Couleurs de statut light sous le seuil WCAG pour du texte : Success #16A34A ≈ 3.3:1, Warning #EA580C ≈ 2.9:1 sur blanc — utilisées pour du texte (MudText Color="Color.Success" « en ligne », captions).
Couleurs en dur dans SiteInstallPanel.razor (#0d1117, #c9d1d9) et validation (#22C55E, #EF4444).

🧩 Découpage proposé

Créer src/Heimdall.Web/Theme/HeimdallTheme.cs — thème unique partagé (PaletteLight + PaletteDark sémantiques, typo, radius, layout properties) ; supprimer les thèmes inline des 2 layouts.
Définir la palette : fonds (dark : #0B1220-style bleu nuit, jamais #000 ; light : gris bleuté, jamais #FFF), accent principal (cyan/ambre « vigie »), statuts sémantiques vérifiés par calcul de contraste (documenter les ratios dans le ticket).
Étendre les tokens CSS : --space-1..8 (base 4px), --radius-sm/md/lg, --focus-ring, transitions ; remplacer les radius/shadow inline par les tokens.
Dark-first : conserver prefers-color-scheme (défaut) + toggle manuel (stocké en localStorage) — voir ticket navigation pour le toggle.
Mettre à jour MetricTile.ColorToCss / StatusChip pour n'utiliser que des couleurs sémantiques.

🧪 Critères d'acceptation

Aucun #000000 / #FFFFFF pur dans les surfaces de texte (fond/texte), y compris palette dark
Contraste calculé ≥ 4.5:1 pour tout texte (primary/secondary/statuts) en dark ET light — ratios documentés
Thème défini UNE fois, référencé par MainLayout et MudBlazorLayout
Aucun border-radius/ombre en dur dans les pages (tokens uniquement)
make test vert (tests bUnit existants non cassés)

📁 Fichiers concernés (estimés)

src/Heimdall.Web/Theme/HeimdallTheme.cs (nouveau)
src/Heimdall.Web/Components/Layout/MainLayout.razor, MudBlazorLayout.razor
src/Heimdall.Web/wwwroot/app.css
src/Heimdall.Web/Components/MetricTile.razor, Shared/StatusChip.razor
tests/Heimdall.Web.Tests/ (tests thème/composants)

## 🎯 Contexte Heimdall est un poste de surveillance vidéo multi-sites : l'UI doit être lisible en continu, dans l'obscurité (salles de supervision) comme en bureau. La direction artistique cible : **dark-first, aucune couleur pure (#000/#FFF), palette sémantique de monitoring** (statuts, alertes, temps réel) — cohérente avec les dashboards de vidéosurveillance et les outils d'ops (PagerDuty, Grafana, Vectra). ## 📚 Référence spec (MASTER_SPECIFICATION.md v2.0) Étape 5 — Phase 20 (Blazor UI Auth + Layout), Phase 21 (Dashboard) ; `docs/ui-pages.md` → « Navigation & Layout », « App Bar (top) ». Exigence transverse : accessibilité WCAG 2.2 (contrastes ≥ 4.5:1 texte). ## 🔍 État actuel (vérifié dans le code) - `MudTheme` **dupliqué** dans `MainLayout.razor` (L116-229) et `MudBlazorLayout.razor` (L16-84) → dérive garantie (les deux sont déjà légèrement différents). - Thème monochrome « noir & blanc » : `Black="#000000"`, `White="#FFFFFF"`, `AppbarBackground="#000000"` → **noir/blanc purs interdits par la direction artistique** (fatigue visuelle, halos, contraste HDR agressif). - `app.css` : tokens partiels (`--bg-*`, `--text-*`, `--border-*`, `--shadow-*`) mais **pas de tokens espacement (grille 4px) ni radius** ; radius en dur partout (`Style="border-radius: 12px;"` répété dans les pages). - Couleurs de statut light **sous le seuil WCAG pour du texte** : `Success #16A34A` ≈ 3.3:1, `Warning #EA580C` ≈ 2.9:1 sur blanc — utilisées pour du texte (`MudText Color="Color.Success"` « en ligne », captions). - Couleurs en dur dans `SiteInstallPanel.razor` (`#0d1117`, `#c9d1d9`) et validation (`#22C55E`, `#EF4444`). ## 🧩 Découpage proposé 1. Créer `src/Heimdall.Web/Theme/HeimdallTheme.cs` — thème unique partagé (PaletteLight + PaletteDark sémantiques, typo, radius, layout properties) ; supprimer les thèmes inline des 2 layouts. 2. Définir la palette : fonds (dark : `#0B1220`-style bleu nuit, jamais `#000` ; light : gris bleuté, jamais `#FFF`), accent principal (cyan/ambre « vigie »), statuts sémantiques vérifiés par calcul de contraste (documenter les ratios dans le ticket). 3. Étendre les tokens CSS : `--space-1..8` (base 4px), `--radius-sm/md/lg`, `--focus-ring`, transitions ; remplacer les radius/shadow inline par les tokens. 4. Dark-first : conserver `prefers-color-scheme` (défaut) + toggle manuel (stocké en localStorage) — voir ticket navigation pour le toggle. 5. Mettre à jour `MetricTile.ColorToCss` / `StatusChip` pour n'utiliser que des couleurs sémantiques. ## 🧪 Critères d'acceptation - [ ] Aucun `#000000` / `#FFFFFF` pur dans les surfaces de texte (fond/texte), y compris palette dark - [ ] Contraste calculé ≥ 4.5:1 pour tout texte (primary/secondary/statuts) en dark ET light — ratios documentés - [ ] Thème défini UNE fois, référencé par `MainLayout` et `MudBlazorLayout` - [ ] Aucun `border-radius`/ombre en dur dans les pages (tokens uniquement) - [ ] `make test` vert (tests bUnit existants non cassés) ## 📁 Fichiers concernés (estimés) - `src/Heimdall.Web/Theme/HeimdallTheme.cs` (nouveau) - `src/Heimdall.Web/Components/Layout/MainLayout.razor`, `MudBlazorLayout.razor` - `src/Heimdall.Web/wwwroot/app.css` - `src/Heimdall.Web/Components/MetricTile.razor`, `Shared/StatusChip.razor` - `tests/Heimdall.Web.Tests/` (tests thème/composants)

nonobis added the

labels

2026-08-10 21:37:39 +02:00

nonobis referenced this issue from a commit

2026-08-10 22:36:33 +02:00

feat(web): design tokens & thème global dark-first (Fixes #32)

nonobis closed this issue

2026-08-10 22:36:33 +02:00