Merge branch 'worktree-design-system' into develop

2026-04-05 20:51:26 +00:00 · 2026-04-04 12:02:32 +02:00
parent 09b1541dc8 cb76a23d02
commit 5f6c015d02
6 changed files with 553 additions and 2 deletions
--- a/.github/instructions/design-system.instruction.md
+++ b/.github/instructions/design-system.instruction.md
@ -0,0 +1,116 @@
+---
+applyTo: "Front-End/src/**"
+---
+
+# Design System — Règles Copilot
+
+Référence complète : [`docs/design-system.md`](../../docs/design-system.md)
+
+## Couleurs — tokens Tailwind obligatoires
+
+Utiliser **toujours** ces tokens pour les éléments interactifs :
+
+| Token       | Hex       | Remplace                          |
+|-------------|-----------|-----------------------------------|
+| `primary`   | `#059669` | `emerald-600`, `emerald-500`      |
+| `secondary` | `#064E3B` | `emerald-700`, `emerald-800`      |
+| `tertiary`  | `#10B981` | `emerald-400`, `emerald-500`      |
+| `neutral`   | `#F8FAFC` | Fonds neutres                     |
+
+**Ne jamais écrire** `bg-emerald-*`, `text-emerald-*`, `border-emerald-*` pour des éléments interactifs.
+
+### Patterns corrects
+
+```jsx
+// Bouton
+<button className="bg-primary hover:bg-secondary text-white px-4 py-2 rounded">
+
+// Texte actif
+<span className="text-primary">
+
+// Badge
+<span className="bg-tertiary/10 text-tertiary text-xs px-2 py-0.5 rounded">
+
+// Fond de page
+<div className="bg-neutral">
+```
+
+## Typographie
+
+```jsx
+// Titre de section
+<h1 className="font-headline text-2xl font-bold">
+
+// Sous-titre
+<h2 className="font-headline text-xl font-semibold">
+
+// Label de formulaire
+<label className="font-label text-sm font-medium text-gray-700">
+```
+
+> `font-body` est le défaut sur `<body>` — inutile de l'ajouter sur les `<p>`.
+
+## Arrondi
+
+- Par défaut : `rounded` (4px)
+- Cards / modales : `rounded-md` (6px)
+- Grandes surfaces : `rounded-lg` (8px)
+- **Éviter** `rounded-xl` sauf avatars ou indicateurs circulaires
+
+## Espacement
+
+- Grille 4px/8px : `p-1`=4px, `p-2`=8px, `p-3`=12px, `p-4`=16px
+- **Pas** de valeurs arbitraires `p-[13px]`
+
+## Mode
+
+Interface **light uniquement** — ne pas ajouter `dark:` prefixes.
+
+---
+
+## Icônes
+
+Utiliser **uniquement** `lucide-react`. Jamais d'autres bibliothèques d'icônes.
+
+```jsx
+import { Home, Plus, ChevronRight } from 'lucide-react';
+
+<Home size={20} className="text-primary" />
+<button className="flex items-center gap-2"><Plus size={16} />Ajouter</button>
+```
+
+- Taille par défaut : `size={20}` inline, `size={24}` boutons standalone
+- Couleur via `className="text-*"` uniquement — jamais le prop `color`
+- Icône seule : ajouter `aria-label` pour l'accessibilité
+
+---
+
+## Responsive & PWA
+
+**Mobile-first** : les styles de base ciblent le mobile, on étend avec `sm:` / `md:` / `lg:`.
+
+```jsx
+// Layout
+<div className="px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
+
+// Grille
+<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+
+// Bouton full-width mobile
+<button className="w-full sm:w-auto bg-primary text-white px-4 py-2 rounded">
+```
+
+- Touch targets ≥ 44px : `min-h-[44px]` sur tous les éléments interactifs
+- Pas d'interactions uniquement au `:hover` — prévoir une alternative tactile
+- Tableaux sur mobile : utiliser la classe utilitaire `responsive-table` (définie dans `tailwind.css`)
+
+---
+
+## Réutilisation des composants
+
+**Toujours chercher un composant existant dans `Front-End/src/components/` avant d'en créer un.**
+
+Composants clés disponibles : `AlertMessage`, `Modal`, `Pagination`, `SectionHeader`, `ProgressStep`, `EventCard`, `Calendar/*`, `Chat/*`, `Evaluation/*`, `Grades/*`, `Form/*`, `Admin/*`, `Charts/*`.
+
+- Étendre via des props (`variant`, `size`, `className`) plutôt que de dupliquer
+- Appliquer les tokens du design system dans tout composant modifié ou créé