feat(front) : la page d'état passe à Skeleton UI + Tailwind #9

Merged

foXaCe merged 1 commit from feat/front-skeleton into main

2026-10-17 13:30:03 +02:00

foXaCe commented

2026-10-17 13:30:01 +02:00

Owner

Le CSS maison (633 lignes de jetons recopiés de PVE Control) laisse la place au même socle que le projet voisin : Skeleton v5 + Tailwind v4.

Ce qui change

app.css : imports Skeleton, data-theme="wintry" pour la palette, data-mode pour le clair/sombre, variante dark: branchée dessus, anneau de focus global.
Carte.svelte : la coquille de carte (titre, niveau de santé, largeur, en-tête réservé aux lecteurs d'écran).
Les dix composants sont réécrits en utilitaires Tailwind : surfaces en verre dépoli, chiffres en font-mono tabular-nums, bordures teintées par le niveau de santé.
sante.ts gagne classesNiveau, texteNiveau et pastilleNiveau — les classes restent littérales, Tailwind ne devine pas les noms composés.
Le mode est posé par public/mode.js avant le premier rendu : le serveur refuse les scripts en ligne, et élargir sa politique aurait affaibli la protection de toute la page.
Contraste : les textes gris et colorés descendent d'un cran en clair et remontent en sombre, jusqu'à passer axe en WCAG AA.

Repères conservés

Les parcours de bout en bout s'appuient sur des classes : .entete, .entete-outils, .badge.etat, .alerte, .tableau, .tableau-cadre, .lien-evitement, .visible-lecteur-ecran. Tous sont conservés. Le mode se lit désormais sur data-mode plutôt que data-theme, qui porte le nom du thème.

Vérifié

Contrôle	Résultat
`svelte-check`	0 erreur / 0 warning
ESLint / Prettier	propres
Tests unitaires	69 verts
Couverture	97,98 % (seuil 80 %)
Parcours e2e	16 verts (bureau et téléphone)
axe WCAG AA	aucune violation

Captures produites en clair et en sombre, bureau et téléphone.

Le CSS maison (633 lignes de jetons recopiés de PVE Control) laisse la place au même socle que le projet voisin : **Skeleton v5 + Tailwind v4**. ### Ce qui change - `app.css` : imports Skeleton, `data-theme="wintry"` pour la palette, `data-mode` pour le clair/sombre, variante `dark:` branchée dessus, anneau de focus global. - **`Carte.svelte`** : la coquille de carte (titre, niveau de santé, largeur, en-tête réservé aux lecteurs d'écran). - Les **dix composants** sont réécrits en utilitaires Tailwind : surfaces en verre dépoli, chiffres en `font-mono tabular-nums`, bordures teintées par le niveau de santé. - `sante.ts` gagne `classesNiveau`, `texteNiveau` et `pastilleNiveau` — les classes restent littérales, Tailwind ne devine pas les noms composés. - Le mode est posé par `public/mode.js` **avant le premier rendu** : le serveur refuse les scripts en ligne, et élargir sa politique aurait affaibli la protection de toute la page. - **Contraste** : les textes gris et colorés descendent d'un cran en clair et remontent en sombre, jusqu'à passer axe en WCAG AA. ### Repères conservés Les parcours de bout en bout s'appuient sur des classes : `.entete`, `.entete-outils`, `.badge.etat`, `.alerte`, `.tableau`, `.tableau-cadre`, `.lien-evitement`, `.visible-lecteur-ecran`. Tous sont conservés. Le mode se lit désormais sur `data-mode` plutôt que `data-theme`, qui porte le nom du thème. ### Vérifié | Contrôle | Résultat | |---|---| | `svelte-check` | **0 erreur / 0 warning** | | ESLint / Prettier | propres | | Tests unitaires | **69 verts** | | Couverture | **97,98 %** (seuil 80 %) | | Parcours e2e | **16 verts** (bureau et téléphone) | | axe WCAG AA | **aucune violation** | Captures produites en clair et en sombre, bureau et téléphone.

foXaCe added 1 commit

2026-10-17 13:30:02 +02:00

feat(front) : la page d'état passe à Skeleton UI + Tailwind

Contrôles des références / Références du comportement (pull_request) Successful in 4s

Details

Contrôles des références / Crate pcmirror (formatage, Clippy, tests) (pull_request) Failing after 13s

Details

Contrôles des références / Livraison (style des scripts, essai à blanc) (pull_request) Successful in 2s

Details

Contrôles des références / Front d'état (types, lint, format, tests, build, bout en bout) (pull_request) Failing after 29s

Details

83ae9f9d0c

Le CSS maison (633 lignes de jetons recopiés de PVE Control) laisse la place
au même socle que le projet voisin : Skeleton v5 + Tailwind v4.

- `app.css` : imports Skeleton, `data-theme="wintry"` pour la palette,
  `data-mode` pour le clair/sombre, variante `dark:` branchée dessus, et
  l'anneau de focus global.
- `Carte.svelte` : la coquille de carte (titre, niveau, largeur, en-tête
  réservé aux lecteurs d'écran), pour ne pas répéter l'habillage.
- Les dix composants sont réécrits en utilitaires Tailwind : surfaces en
  verre dépoli, chiffres en `font-mono tabular-nums`, bordures teintées par
  le niveau de santé.
- `sante.ts` gagne `classesNiveau`, `texteNiveau` et `pastilleNiveau` :
  les classes restent littérales, Tailwind ne devine pas les noms composés.
- Le mode est posé par `public/mode.js` avant le premier rendu : le serveur
  refuse les scripts en ligne, et élargir sa politique aurait affaibli la
  protection de toute la page.
- Contraste : les textes gris et colorés descendent d'un cran en clair et
  remontent en sombre, jusqu'à passer axe en WCAG AA.

Les repères des parcours de bout en bout sont conservés (`.entete`,
`.entete-outils`, `.badge.etat`, `.alerte`, `.tableau`, `.tableau-cadre`,
`.lien-evitement`, `.visible-lecteur-ecran`) ; le mode se lit désormais sur
`data-mode` plutôt que `data-theme`, qui porte le nom du thème.

Vérifié : svelte-check 0 erreur / 0 warning, ESLint et Prettier propres,
69 tests unitaires verts, couverture 98 %, 16 parcours e2e verts (bureau et
téléphone), axe sans violation.

foXaCe merged commit a356ce37af into main

2026-10-17 13:30:03 +02:00

foXaCe referenced this pull request from a commit

2026-10-17 13:30:05 +02:00

Merge pull request 'feat(front) : la page d'état passe à Skeleton UI + Tailwind' (#9) from feat/front-skeleton into main