diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 01d4331..3180466 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -52,8 +52,28 @@ Pour le front-end, les exigences de qualité sont les suivantes : - Documentation en français pour les nouvelles fonctionnalités (si applicable) - Référence : [documentation guidelines](./instructions/documentation.instruction.md) +## Design System + +Le projet utilise un design system défini. Toujours s'y conformer lors de toute modification de l'interface. + +- Référence complète : [design system](../docs/design-system.md) +- Règles Copilot : [design system instructions](./instructions/design-system.instruction.md) + +### Résumé des tokens obligatoires + +| Token Tailwind | Hex | Usage | +|----------------|-----------|-------------------------------| +| `primary` | `#059669` | Boutons, CTA, éléments actifs | +| `secondary` | `#064E3B` | Hover, accents sombres | +| `tertiary` | `#10B981` | Badges, icônes | +| `neutral` | `#F8FAFC` | Fonds de page, surfaces | + +- Polices : `font-headline` (Manrope) pour les titres, `font-body`/`font-label` (Inter) pour le reste +- **Ne jamais** utiliser `emerald-*` pour les éléments interactifs + ## Références - **Tickets** : [issues guidelines](./instructions/issues.instruction.md) - **Commits** : [commit guidelines](./instructions/general-commit.instruction.md) - **Tests** : [run tests](./instructions/run-tests.instruction.md) +- **Design System** : [design system instructions](./instructions/design-system.instruction.md) diff --git a/.github/instructions/design-system.instruction.md b/.github/instructions/design-system.instruction.md new file mode 100644 index 0000000..3706107 --- /dev/null +++ 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 + +``` + +- 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 +
+ +// Grille +
+ +// Bouton full-width mobile + + +// Texte accent +Voir plus + +// Badge +Actif + +// Fond de page +
...
+``` + +--- + +## Typographie + +Les polices sont chargées via `next/font/google` dans `Front-End/src/app/layout.js` et exposées comme variables CSS. + +| Rôle | Police | Token Tailwind | Usage | +| --------- | --------- | --------------- | ----------------------------------- | +| Headlines | `Manrope` | `font-headline` | `h1`, `h2`, `h3`, titres de section | +| Body | `Inter` | `font-body` | Paragraphes, contenu (défaut) | +| Labels | `Inter` | `font-label` | Boutons, labels de formulaires | + +> `font-body` est appliqué par défaut sur ``. Il n'est donc pas nécessaire de l'ajouter manuellement sur chaque élément de texte courant. + +### Exemples + +```jsx +// Titre de page +

Tableau de bord

+ +// Sous-titre +

Élèves

+ +// Label de formulaire + +``` + +--- + +## Rayon de bordure (Border Radius) + +Arrondi subtil, niveau 1. + +| Token Tailwind | Valeur | Usage | +| -------------- | ------ | ---------------------------------- | +| `rounded-sm` | `2px` | Éléments très petits (badges fins) | +| `rounded` | `4px` | Par défaut — boutons, inputs | +| `rounded-md` | `6px` | Cards, modales | +| `rounded-lg` | `8px` | Grandes surfaces | + +> Éviter `rounded-xl` (12px) et `rounded-full` sauf pour les avatars ou indicateurs circulaires. + +--- + +## Espacement + +Espacement normal, base 8px (niveau 2). Utiliser les multiples de 4px/8px du système Tailwind standard. + +| Classe | Valeur | +| ------ | ------ | +| `p-1` | 4px | +| `p-2` | 8px | +| `p-3` | 12px | +| `p-4` | 16px | +| `p-6` | 24px | +| `p-8` | 32px | + +--- + +## Composants récurrents + +### Bouton principal + +```jsx + +``` + +### Bouton secondaire + +```jsx + +``` + +### Card + +```jsx +
+

Titre

+

Contenu

+
+``` + +### Badge de statut + +```jsx + + Actif + +``` + +### Lien d'action + +```jsx + + Voir le détail + +``` + +--- + +## Configuration Tailwind + +Fichier : `Front-End/tailwind.config.js` + +```js +theme: { + extend: { + colors: { + primary: '#059669', + secondary: '#064E3B', + tertiary: '#10B981', + neutral: '#F8FAFC', + }, + fontFamily: { + headline: ['var(--font-manrope)', 'Manrope', 'sans-serif'], + body: ['var(--font-inter)', 'Inter', 'sans-serif'], + label: ['var(--font-inter)', 'Inter', 'sans-serif'], + }, + borderRadius: { + DEFAULT: '4px', + sm: '2px', + md: '6px', + lg: '8px', + }, + }, +}, +``` + +--- + +## Icônes + +Toutes les icônes utilisent la bibliothèque **`lucide-react`** exclusivement. + +```jsx +import { Home, User, ChevronRight } from 'lucide-react'; + +// Taille standard + + +// Avec label accessible + +``` + +### Règles icônes + +- **Toujours** importer depuis `lucide-react` — jamais d'autres bibliothèques d'icônes. +- Taille par défaut : `size={20}` (inline), `size={24}` (boutons standalone). +- Couleur : via `className="text-*"` — ne jamais utiliser le prop `color`. +- Icônes seules sans texte : ajouter `aria-label` ou wrapper `title` pour l'accessibilité. + +--- + +## Responsive & PWA + +L'interface est conçue **mobile-first** pour un usage PWA (Progressive Web App). + +### Breakpoints Tailwind + +| Préfixe | Largeur min | Contexte | +| -------- | ----------- | ------------------------ | +| _(base)_ | 0px | Mobile (priorité) | +| `sm:` | 640px | Grands mobiles/tablettes | +| `md:` | 768px | Tablettes | +| `lg:` | 1024px | Desktop | + +### Principes responsive + +- **Toujours** penser desktop en premier — les styles de base ciblent le desktop. +- Les sidebars passent en overlay sur mobile (`md:hidden` / `hidden md:block`). +- Les tableaux utilisent le mode `responsive-table` (classe utilitaire définie dans `tailwind.css`) sur mobile. +- Les grilles : commencer par `grid-cols-1`, étendre avec `sm:grid-cols-2 lg:grid-cols-3`. +- Les textes : tailles mobiles d'abord (`text-sm sm:text-base`), ne jamais forcer une grande taille sur mobile. +- Touch targets : minimum `44px × 44px` pour tous les éléments interactifs (`min-h-[44px]`). + +### PWA + +- Tous les écrans doivent fonctionner hors-ligne ou en mode dégradé (données en cache). +- Les interactions clés (navigation, actions principales) doivent être accessibles sans rechargement de page. +- Pas de contenu critique uniquement visible au survol (`hover:`) — prévoir une alternative tactile. + +### Exemples responsive + +```jsx +// Layout page +
+ +// Grille de cards +
+ +// Titre responsive +

+ +// Bouton full-width sur mobile +