fix(web): resolve design-system token discrepancies

[DamienBattistella]

Contexte

Audit du design system (apps/web/src/app.css + components/ui/) pour relever les incohérences par rapport aux tokens sémantiques, puis les corriger. L'objectif : que le code respecte les tokens définis (cohérence = principe clé pour une UI à faible charge cognitive).

Corrections

1. Bug de token --radius (le plus important)

La grille de rayons (--radius-sm … --radius-4xl) était déclarée dans le bloc @theme inline. En Tailwind v4, @theme inline n'émet pas les variables comme custom properties :root — la valeur est inlinée dans les utilitaires. Or button-variants.ts et select.tsx référencent directement var(--radius-md) :

rounded-[min(var(--radius-md),10px)]

Cette référence ne se résolvait donc jamais (variable absente de :root). De plus, --radius-sm et --radius-lg étaient déclarés deux fois avec des valeurs contradictoires (:root = 0.25rem, mais l'utilitaire calculait 0.45rem).

Fix : déplacer toute la grille dans le bloc @theme normal (les rayons ne varient pas selon le thème, contrairement aux couleurs). Les tokens sont maintenant émis dans :root et var(--radius-*) se résout correctement. Vérifié sur le CSS compilé : --radius-md:calc(var(--radius) * .8) est bien présent et var(--radius-md) se résout.

2. Notation d'anneau de focus

focus-visible:ring-[3px] → focus-visible:ring-3 dans badge et tabs, pour aligner sur la notation utilisée partout ailleurs (input, button, select, slider). Aucun changement visuel.

3. Couleurs de statut : adoption des tokens sémantiques

Deux sous-systèmes (components/article/, admin-*) utilisaient encore des couleurs brutes de la palette Tailwind au lieu des tokens sémantiques utilisés partout ailleurs :

• article/comparison.tsx — bloc « Ce qui aide » (emerald) → tokens success-* ; bloc « Ce qui aggrave » (rose) → tokens danger-* (les mêmes que le composant Callout).
• article/key-takeaways.tsx — emerald → success-*.
• article/encouragement.tsx — amber → palette honey accent-* (l'accent chaleureux/positif désigné de l'app ; « warning » aurait été sémantiquement faux pour un encouragement).
• admin-analytics/analytics-sections.tsx — alerte amber → warning-surface / warning-border.
• admin-users/admin-users-auth-info.tsx — amber → text-status-warning.

Laissé intentionnellement (non-discrepancies)

• article-cluster-theme.ts — table de thèmes couleur par cluster (taxonomie éditoriale) : usage décoratif intentionnel et cohérent en interne.
• Couleurs de marque (brand-logo, boutons Google) et palette catégorielle du graphique admin (EVENT_COLORS) : constantes légitimes.
• Dégradés oklch(...) décoratifs répétés sur les pages auth/landing : chaque page ajuste taille/position/opacité ; consolidation à faible valeur, laissée de côté.

Vérification

• pnpm build (inclut tsc -b) ✓
• CSS compilé inspecté : tokens de rayon émis dans :root, ancien 0.25rem conflictuel supprimé, var(--radius-md) résolu ✓
• Aucun texte utilisateur modifié (seulement des classes) — pas d'impact i18n.

🤖 Generated with Claude Code

---

Generated by Claude Code