IdeA/agents-dev/LD-design-system.md

LD — Design System (UI kit maison)

Binôme : dev-ui / test-ui Zones : frontend/src/shared (UI kit), frontend (config Tailwind), frontend/src/app (app shell) Dépendances amont : L1 (frontend ports/adapters/DI en place). Position : inséré après L6 (décision produit : voir CONTEXT, lot transverse), consommé ensuite au fil de l'eau par chaque feature.

Objectif

Doter IdeA d'un design system maison cohérent et d'un thème sombre par défaut (c'est un IDE), pour que chaque feature cesse de bricoler des styles inline et consomme des composants réutilisables.

Stack (validée)

• Tailwind v4 + @tailwindcss/vite (CSS-first, @theme), composants maison dans shared/ui (pas de lib de composants tierce).
• Tokens de design (couleurs/typo/espacements/rayons) en variables de thème ; helper cn() pour composer les classes.

Périmètre (DEV)

• Config Tailwind (plugin Vite, feuille de thème globale, tokens, dark par défaut).
• shared/ui : composants de base — Button, IconButton, Input, Panel/Card, Tabs, Toolbar, Spinner, Field. Helper cn.
• App shell sombre dans app/ (remplace les styles inline du smoke-test).

Périmètre (TEST)

• cn() (unitaire).
• Rendu + variantes/états des composants (Button variants/disabled, Input label/aria, Tabs sélection) via RTL/vitest, sans backend.

Definition of Done

• vitest vert ; tsc --noEmit vert ; le domaine/les ports UI restent inchangés (pur skin).
• Aucune feature ne régresse ; l'app monte avec le thème sombre.

Hors périmètre

• Re-styling exhaustif de toutes les features (fait au fil de l'eau quand on touche chacune).

Avancement — ✅ vert

• Config : tailwindcss@4 + @tailwindcss/vite ajoutés ; plugin câblé dans vite.config.ts ; feuille de thème globale src/shared/styles/theme.css (tokens sémantiques sous @theme, thème sombre par défaut, focus ring), importée une fois dans app/main.tsx.
• UI kit src/shared/ui : Button (variants primary/secondary/ghost/danger, sizes, loading), IconButton, Input, Field (label/hint/error + aria), Panel, Tabs (sélection + close), Toolbar, Spinner. Helper cn(). Baril @/shared.
• App shell sombre (app/App.tsx) : header avec statut backend, plus de styles inline.
• Consommation : features/projects/ProjectsView migré sur le kit (premier consommateur), hooks d'accessibilité préservés (tests L2 toujours verts).
• Tests : cn + composants (Button/Input/Field/Tabs) via RTL — assertions sur rôles/aria, pas sur les classes Tailwind (le design peut évoluer sans casser la suite).

Vérifs : tsc --noEmit vert · vitest 103 tests verts (14 fichiers) · vite build OK (Tailwind compile, CSS 22.8 kB).