[UX] Design system : figer les jetons — échelle typographique, rayons, ombres, espacements #57

Open
opened 2026-10-28 23:28:38 -04:00 by bruno · 0 comments
Owner

Constat (audit visuel, v0.41.0)

Le fichier static/css/style.css (1840 lignes) n'a pas d'échelle : on y compte ~25 tailles de police distinctes (0.70 à 1.7rem, plus des px), 13 valeurs de border-radius (4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 18px, 99px, 999px, en plus de --radius/--radius-sm) et une dizaine d'ombres codées en dur à côté de --shadow/--shadow-sm. Résultat : deux cartes ou deux panneaux censés être identiques n'ont pas la même courbure ni la même profondeur, et l'œil perçoit un assemblage, pas un produit.
L'en-tête du fichier mentionne encore « accent rose Spark » alors que l'accent est vert depuis la 0.41.0 : la documentation du design system n'est pas tenue à jour.

Travail attendu

  • Définir et documenter en tête de style.css une échelle fermée : typographie (ex. 12/13/14/16/20/24/32px), rayons (sm/md/lg/full), ombres (sm/md/lg), espacements (4/8/12/16/24/32px).
  • Remplacer les valeurs hors échelle par les jetons, sans changer la mise en page fonctionnelle.
  • Corriger l'en-tête du fichier (accent vert Kanbante, pas rose Spark).
  • Ajouter un test qui interdit les littéraux hors échelle dans les nouvelles règles (sur le modèle de test_theme_agent.py).

Critère de validation

Vérifié par le build de l'utilisateur : aucune régression visuelle majeure, et un grep ne trouve plus que les jetons pour rayons/ombres dans les composants principaux.

Hors portée

Refonte des pages elles-mêmes (voir les autres issues UX) ; ce chantier est la fondation.

## Constat (audit visuel, v0.41.0) Le fichier `static/css/style.css` (1840 lignes) n'a pas d'échelle : on y compte ~25 tailles de police distinctes (0.70 à 1.7rem, plus des px), 13 valeurs de `border-radius` (4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 18px, 99px, 999px, en plus de `--radius`/`--radius-sm`) et une dizaine d'ombres codées en dur à côté de `--shadow`/`--shadow-sm`. Résultat : deux cartes ou deux panneaux censés être identiques n'ont pas la même courbure ni la même profondeur, et l'œil perçoit un assemblage, pas un produit. L'en-tête du fichier mentionne encore « accent rose Spark » alors que l'accent est vert depuis la 0.41.0 : la documentation du design system n'est pas tenue à jour. ## Travail attendu - Définir et documenter en tête de `style.css` une échelle fermée : typographie (ex. 12/13/14/16/20/24/32px), rayons (sm/md/lg/full), ombres (sm/md/lg), espacements (4/8/12/16/24/32px). - Remplacer les valeurs hors échelle par les jetons, sans changer la mise en page fonctionnelle. - Corriger l'en-tête du fichier (accent vert Kanbante, pas rose Spark). - Ajouter un test qui interdit les littéraux hors échelle dans les nouvelles règles (sur le modèle de `test_theme_agent.py`). ## Critère de validation Vérifié par le build de l'utilisateur : aucune régression visuelle majeure, et un grep ne trouve plus que les jetons pour rayons/ombres dans les composants principaux. ## Hors portée Refonte des pages elles-mêmes (voir les autres issues UX) ; ce chantier est la fondation.
bruno added the kanban:todo label 2026-10-28 23:28:38 -04:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Projets/kanbante#57