mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-04-05 12:41:27 +00:00
cb76a23d02
- Add docs/design-system.md with color tokens, typography, spacing, icons, responsive/PWA rules and component reuse guidelines - Add CLAUDE.md with permanent instructions for Claude Code - Add .github/instructions/design-system.instruction.md for GitHub Copilot - Update .github/copilot-instructions.md to reference the design system - Update Front-End/tailwind.config.js with color tokens (primary, secondary, tertiary, neutral) and font families (Manrope/Inter) - Update Front-End/src/app/layout.js to load Manrope and Inter via next/font/google
117 lines
3.4 KiB
Markdown
117 lines
3.4 KiB
Markdown
---
|
|
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éé
|