docs(design): update design system specifications and component styles

- remove color palette table from main color section in DESIGN.md - update typography scale (reduce body/secondary text sizes) - revise border radius values for badges, buttons, modals, and cards - expand sidebar navigation section with detailed structure and visual states - add accordion section behavior and item template specs - update Badge component to use fully rounded corners and adjust sizing - update Modal component border radius and backdrop styles
2026-04-24 17:35:25 -04:00
parent 04987e41f9
commit ecb4929753
3 changed files with 98 additions and 45 deletions
@@ -20,17 +20,6 @@ Chaque couleur, bordure, espace ou texte supplémentaire doit justifier sa prés

 Le produit est **noir et blanc**. Pas de couleurs de marque, pas de teintes bleues ou violettes dans les fonds. Le fond est blanc pur. Le texte est presque noir.

-| Rôle | Clair | Sombre |
-|---|---|---|
-| Fond de page | `#ffffff` | `#0c0c0b` |
-| Fond hover | `#f5f5f4` | `#161614` |
-| Fond actif / sélectionné | `#ebebea` | `#1f1f1d` |
-| Bordure standard | `#e4e4e2` | `#272724` |
-| Bordure forte | `#c8c8c4` | `#3a3a36` |
-| Texte principal | `#0c0c0b` | `#f0f0ed` |
-| Texte secondaire | `#6b6b68` | `#6b6b68` |
-| Texte discret | `#a3a39e` | `#3d3d3a` |
-
 ### Accents sémantiques

 Quatre couleurs uniquement. Utilisées **avec grande parcimonie** — pour les statuts, les alertes, les deltas. Jamais comme couleur décorative. Jamais sur un fond.
@@ -61,10 +50,10 @@ Chaque couleur existe en trois déclinaisons : la couleur elle-même (pour le te

 | Rôle | Taille | Graisse | Notes |
 |---|---|---|---|
-| Titre de page | 20px | 600 | Lettre-espacement -0.01em |
-| Titre de section | 16–20px | 600 | |
-| Corps de texte | 14px | 400 | |
-| Texte secondaire | 13px | 400 | Dans les tableaux, les listes |
+| Titre de page | 20px | 600 | |
+| Titre de section | 14–20px | 600 | |
+| Corps de texte | 13px | 400 | |
+| Texte secondaire | 12px | 400 | Dans les tableaux, les listes |
 | Labels / captions | 12px | 400–500 | |
 | Labels colonnes | 11px | 500 | Uppercase, lettre-espacement +0.04em |
 | Codes / IDs / montants | 11–13px | 400 | IBM Plex Mono |
@@ -104,9 +93,9 @@ La densité est **moyenne**. Pas étouffant, pas aéré. Un admin est un outil q

 | Contexte | Rayon |
 |---|---|
-| Badges, étiquettes, petits éléments | 8px |
-| Boutons, champs de saisie, cartes | 12px |
-| Modales, panneaux flottants importants | 16px |
+| Badges, étiquettes, petits éléments | Complet |
+| Boutons, champs de saisie | 8px |
+| Modales, panneaux flottants importants, tableau, cartes | 12px |
 | Avatars, indicateurs ronds | Cercle complet |

 **12px est le rayon standard.** On ne mélange pas les rayons dans un même composant.
@@ -119,7 +108,7 @@ Les ombres existent uniquement pour les éléments qui **flottent au-dessus** de

 ---

-## Structure de la page
+## Structure de l'admin

 ```
 ┌─────────────────────────────────────────────┐
@@ -136,35 +125,102 @@ Les ombres existent uniquement pour les éléments qui **flottent au-dessus** de

 - **Sidebar** : fixe, 230px. Fond blanc (`#ffffff`). Séparée par une bordure droite.
 - **Barre supérieure** : fixe, 48px. Fond blanc. Fil d'Ariane à gauche, utilisateur à droite.
- **Contenu** : gris très pâle (`#fafafa` / `neutral-50`). Les cartes et tableaux ont un fond blanc, ce qui crée naturellement la séparation visuelle sans avoir besoin de bordures de section.
+- **Contenu** : gris très pâle (`#fafafa` / `neutral-50`). Les cartes et tableaux ont un fond blanc, ce qui crée naturellement la séparation visuelle sans avoir besoin de bordures de section. Sur thème sombre le fond deviens noir est le boite sont grise.

 ---

-## Navigation sidebar
+## Navigation sidebar admin

- Les items inactifs sont en texte secondaire (`#6b6b68`).
- Au survol : fond légèrement grisé, texte principal.
- L'item actif : fond légèrement grisé plus prononcé, texte principal gras.
- Les icônes sont toujours à gauche du texte. Taille 15×15px.
- Les sous-menus se révèlent par accordéon (chevron qui tourne).
- Rayon des items : 8px.
- Padding interne : 7px vertical, 10px horizontal.
+### Structure
+
+La sidebar fait **230px** de large, fixe. Fond blanc / noir complet en sombre. Séparée du contenu par une bordure droite `1px`.
+
+Elle se compose de trois zones verticales :
+
+1. **Logo** — hauteur 48px, aligné sur la barre supérieure. Séparé par une bordure basse.
+2. **Navigation principale** — défile si nécessaire. Padding `8px` autour des items.
+3. **Items épinglés en bas** — optionnels. Séparés par une bordure haute. Jamais dans la zone défilable.
+
+### Items de navigation
+
+Deux types d'items coexistent :
+
+- **Lien direct** : section avec un seul item dont le nom est identique au titre de la section. S'affiche comme un lien simple, sans chevron.
+- **Section accordéon** : section avec plusieurs items. Un bouton parent déploie ou replie les sous-items.
+
+### États visuels
+
+| État | Apparence |
+|---|---|
+| Inactif | Texte `neutral-500` (sombre : `neutral-400`), fond transparent |
+| Hover | Fond `neutral-100` (sombre : `neutral-900`), texte `neutral-900` (sombre : blanc) |
+| Actif replié | Fond `neutral-100` (sombre : `neutral-900`), texte noir (sombre : blanc), graisse `500` |
+| Actif ouvert (parent) | Pas de fond, texte noir (sombre : blanc), graisse `500` — le fond actif est sur le sous-item |
+| Sous-item actif | Fond `neutral-100` (sombre : `neutral-900`), texte noir (sombre : blanc), graisse `500` |
+
+### Gabarit d'un item
+
+- Padding : `7px` vertical, `10px` horizontal.
+- Rayon : `8px`.
+- Icône à gauche, `15×15px`, `flex-shrink-0`. Gap icône–texte : `8px`.
+- Texte : `13px`.
+- Transition : `120ms ease-out`.
+- Badge numérique (optionnel) : à droite, fond rouge, texte blanc, `10px`, rayon `8px`.
+
+### Sous-items
+
+Pas d'icône. Indentation via `padding-left: 25px`. Même gabarit que les items parents.
+
+### Accordéon
+
+Le chevron (`12×12px`) est à l'extrême droite du bouton parent. Il pivote de `-90deg` quand la section est repliée, revient à `0deg` quand elle est ouverte. L'animation du conteneur : `max-height` + `opacity`, `120ms ease-out`.
+
+Une section s'ouvre automatiquement au chargement si elle contient l'item actif courant. Toutes les autres sont repliées par défaut.
+
+### Mobile
+
+En dessous de `1024px`, la sidebar sort du flux et se positionne en fixe sur toute la hauteur. Elle est masquée par défaut (`translate-x: -100%`) et s'ouvre via un bouton externe. Un overlay semi-transparent (`black/50`) couvre le contenu derrière. Cliquer l'overlay ou naviguer vers un lien ferme la sidebar. Au redimensionnement au-delà de `1024px`, la sidebar mobile se ferme automatiquement.

 ---

 ## Boutons

-Quatre variantes seulement :
+Sept variantes :

 | Variante | Apparence | Usage |
 |---|---|---|
-| **Primaire** | Fond noir, texte blanc | Action principale de la page |
-| **Secondaire** | Fond transparent, bordure, texte sombre | Actions secondaires, annulation |
-| **Fantôme** | Fond transparent, pas de bordure, texte sombre | Actions tertiaires |
-| **Danger** | Fond rouge très pâle, texte rouge, bordure rouge pâle | Suppression uniquement |
+| **Primaire** | Fond `neutral-900`, texte blanc | Action principale de la page |
+| **Secondaire** | Fond transparent, bordure `neutral-300`, texte `neutral-700` | Actions secondaires, annulation |
+| **Fantôme** | Fond transparent, pas de bordure, texte `neutral-600` | Actions tertiaires |
+| **Fantôme plein** | Identique au fantôme, sans focus ring | Boutons très discrets dans des zones déjà interactives |
+| **Danger** | Fond rouge très pâle, bordure rouge pâle, texte rouge | Suppression, actions destructives |
+| **Succès** | Fond vert très pâle, bordure verte pâle, texte vert | Confirmation, validation |
+| **Avertissement** | Fond ambre très pâle, bordure ambre pâle, texte ambre | Alertes, actions risquées |

-**Taille standard : petite.** Padding 6px vertical / 12px horizontal, texte 12px.  
-Il ne doit jamais y avoir plus d'un bouton primaire par section ou en-tête de page.
+**Il ne doit jamais y avoir plus d'un bouton primaire par section ou en-tête de page.**
+
+### Tailles
+
+| Taille | Padding horizontal | Padding vertical | Texte |
+|---|---|---|---|
+| **sm** | 10px | 5px | 12px |
+| **md** | 12px | 7px | 13px |
+| **lg** | 14px | 9px | 14px |
+
+La taille par défaut est `md`.
+
+### Icônes et chargement
+
+- Une icône peut se placer à gauche ou à droite du texte.
+- Un bouton icône seule (sans texte) a un padding uniforme.
+- L'état de chargement remplace le contenu par un spinner et désactive l'interaction.
+- L'état désactivé : opacité 50 %, curseur interdit.
+
+### Règles communes
+
+- Rayon : 8px (`rounded-lg`).
+- Transition : 120ms, `ease-out`.
+- Focus : anneau fin de la couleur de la variante.

 ---

@@ -172,7 +228,7 @@ Il ne doit jamais y avoir plus d'un bouton primaire par section ou en-tête de p

 - Fond blanc.
 - Bordure 1px.
- Rayon 12px.
+- Rayon 12px (rounded-xl).
 - Padding interne 16–20px.
 - **Pas d'ombre.**
 - En-tête interne séparé du contenu par une bordure horizontale.
@@ -195,10 +251,7 @@ Il ne doit jamais y avoir plus d'un bouton primaire par section ou en-tête de p

 Petits éléments inline qui indiquent un état. Toujours composés de trois éléments : fond pâle de la couleur sémantique, bordure légère, texte de la couleur sémantique.

-Les statuts "vivants" (actif, en attente, en retard) ont un point coloré à gauche du texte.  
-Les statuts terminaux (archivé, publié) n'ont pas de point.
-
-Rayon : 8px. Taille du texte : 11px.
+Rayon : full. Taille du texte : 11px.

 ---

@@ -229,4 +282,4 @@ Toutes les transitions durent **120ms**, courbe `ease-out`. Aucune animation dé

 ## Thème sombre

-Le thème sombre est une inversion calibrée : les fonds passent au quasi-noir, les textes s'éclaircissent, les accents gagnent légèrement en luminosité pour rester lisibles. La structure, les espaces et les proportions restent identiques. Détection automatique via la préférence système — pas de toggle manuel.
+Le thème sombre est une inversion calibrée : les fonds passent au noir complet puis les zone par dessus sont noir-gris, les textes s'éclaircissent, les accents gagnent légèrement en luminosité pour rester lisibles. La structure, les espaces et les proportions restent identiques.
@@ -25,9 +25,9 @@ const Badge = ({
    };

    const sizes = {
-        sm: 'px-[8px] py-[2px] rounded-lg text-[11px]',
-        md: 'px-[8px] py-[2px] rounded-lg text-[11px]',
-        lg: 'px-3 py-1 rounded-lg text-xs'
+        sm: 'px-[8px] py-[2px] rounded-full text-[11px]',
+        md: 'px-[8px] py-[2px] rounded-full text-[11px]',
+        lg: 'px-3 py-1 rounded-full text-xs'
    };

    const variantClass = color ? '' : (variants[variant] || variants.default);
@@ -73,7 +73,7 @@ const Modal = ({
                        w-full ${sizeClasses[size]}
                        bg-white dark:bg-[#0B0B0B]
                        border border-neutral-200 dark:border-neutral-800
-                        rounded-lg
+                        rounded-xl
                        shadow-xl
                        max-h-[90vh]
                        overflow-hidden