Migrate site controls to Nebula design system

DESIGN_SYSTEM.md

@@ -1,6 +1,6 @@
-# Design System - Sokko G
+# Nebula Design System - Sokko G
 
-Ce document est la reference visuelle du projet Sokko G. Toute nouvelle interface doit rester coherente avec le theme **Nebula Command** actuel.
+Ce document est la reference visuelle du projet Sokko G. Toute nouvelle interface doit rester coherente avec le theme **Nebula Command** actuel et les controles du **Nebula Design System**.
 
 ## 1. Vision
 
@@ -63,7 +63,36 @@ Animations :
 - `--duration-normal: 180ms`
 - `--ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1)`
 
-## 3. Fond Nebula
+## 3. API Des Contrôles NDS
+
+Le Nebula Design System expose ses contrôles publics avec une classe de famille et des attributs `data-*`.
+
+Règles :
+
+- la classe décrit uniquement la famille : `nds-button`, `nds-icon-button`, `nds-input`, `nds-select`, `nds-select-trigger`, `nds-time`, `nds-textarea`, `nds-inline-input`, `nds-switch`, `nds-radio-button-group`, `nds-checkbox`, `nds-quantity-stepper`, `nds-list-row`, `nds-large-icon-picker-trigger`, `nds-event-surface`, `nds-scrollbox` ;
+- les variations passent par attributs : `data-size`, `data-variant`, `data-edge`, `data-border`, `data-axis` ;
+- la page `/design-system` affiche aussi `data-state` comme axe de comparaison visuelle des états ;
+- `data-size` accepte seulement les tailles prévues par la famille (`xs`, `sm`, `md`, `lg`, `xxs`, `micro` selon le contrôle) ; les checkboxes utilisent `md` 20 px, `sm` 18 px et `xs` 14 px ;
+- `data-variant` couvre les intentions visuelles partagées : `primary`, `secondary`, `ghost`, `dashed`, `danger` et les variantes spécialisées documentées dans `/design-system`, dont `panel-toggle` pour les boutons icones accolés à un panneau et `icon-picker` pour les triggers de sélection compacts à icône ;
+- `data-edge="left|middle|right|top|center|bottom|top-left|top-right|bottom-right|bottom-left"` décrit la position d'un bouton dans un groupe ou contre un bord, et ajuste uniquement les coins ;
+- `data-border="joined"` masque les bordures de jonction déduites depuis `data-edge` ;
+- `data-border="none"` masque toutes les bordures sans changer la taille, le fond, le hover ou l'état actif ;
+- `data-axis="horizontal|vertical"` reste réservé aux composants dont l'axe est métier, comme `nds-scrollbox` ;
+- les états fonctionnels restent portés par le HTML et l'application : `disabled`, `aria-pressed="true"`, `.active`, `.is-active`.
+
+Exemples :
+
+```html
+<button class="nds-button" data-size="xs" data-variant="primary" data-edge="left" data-border="joined">Ajouter</button>
+<button class="nds-icon-button" data-size="sm" data-variant="danger" aria-label="Supprimer"></button>
+<button class="nds-icon-button" data-variant="panel-toggle" data-edge="right" data-border="joined" aria-pressed="true" aria-label="Pages"></button>
+<select class="nds-select" data-size="sm"></select>
+<button class="nds-select-trigger" data-size="sm" aria-pressed="false"></button>
+```
+
+Les anciennes classes de variation `nds-*--*` ne doivent plus etre ajoutees. Les anciennes classes globales `.button`, `.primary`, `.danger`, `.ghost` et `.import-button` ne sont plus des APIs visuelles publiques : utiliser `nds-button` / `nds-icon-button` avec `data-variant`. Dans les outils, les classes métier peuvent rester pour le layout, la grille, les largeurs, le positionnement et les états fonctionnels. Le style visuel d'un contrôle générique doit venir de `website/src/styles/design-system/_controls.scss` ou de l'API publique `website/src/styles/design-system/_attributes.scss`.
+
+## 4. Fond Nebula
 
 Le fond global est defini dans `website/src/styles/_nebula.scss`.
 
@@ -76,7 +105,7 @@ Regles :
 
 Ne pas ajouter d'orbes decoratifs supplementaires. Si une section a besoin de profondeur, utiliser les fonds semi-transparents et les bordures existantes.
 
-## 4. Typographie
+## 5. Typographie
 
 Police principale :
 
@@ -93,7 +122,7 @@ Regles :
 - paragraphs limites visuellement, pas de longs blocs sans respiration ;
 - les `<i>` doivent etre en italique, pas utilises comme gris decoratif.
 
-## 5. Heroes
+## 6. Heroes
 
 Les heroes de la page d'accueil et des pages jeux utilisent le meme style via `.hero` et `.game-hero`.
 
@@ -108,7 +137,7 @@ Caracteristiques :
 
 Les pages jeux doivent heriter du hero commun. Si un jeu a une image, elle doit etre utilisee dans les cards ou les covers, pas comme remplacement complet du hero commun sauf decision explicite.
 
-## 6. Cards
+## 7. Cards
 
 Les cards representent les elements repetes : toolboxes, jeux, categories, monstres, faune.
 
@@ -124,7 +153,7 @@ La bordure haute/basse interne d'une cover doit rester doree quand elle separe u
 
 Eviter les cards dans des cards. Les sections de page doivent rester des layouts ou panneaux, pas des empilements de cartes decoratives.
 
-## 7. Modules Toolbox
+## 8. Modules Toolbox
 
 Les modules sont des panneaux de travail, pas des cards classiques.
 
@@ -389,7 +418,7 @@ Regles :
 
 ### Selects Des Outils
 
-Tous les `<select>` rendus dans le contenu d'un outil doivent utiliser le style factorise de `.module-content select`, defini dans `website/src/styles/toolboxes/_shared-controls.scss`.
+Tous les `<select>` rendus dans le contenu d'un outil doivent utiliser le style factorise par `website/src/styles/design-system/_controls.scss`.
 
 Regles :
 
@@ -571,37 +600,180 @@ Notifications internes :
 - duree d'affichage cible : 2 minutes, fermeture manuelle possible ;
 - style plus visible que les confirmations simples : bordure conique animee, pulse leger, arrivee depuis le cote configure.
 
-## 17. Scrollbars
+## 17. Controles Interactifs
 
-Les scrollbars reprennent l'ancien rendu :
+Les champs, selects, boutons icones, switchs et choix compacts utilisent une base commune issue de `website/src/styles/design-system/_controls.scss`. Les fichiers d'outils peuvent choisir une taille ou poser une contrainte de layout, mais ne doivent pas redefinir localement les fonds, bordures, hovers ou etats `primary`/`danger`.
 
-```css
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-  background-color: transparent;
-}
+Inputs et textareas :
 
-::-webkit-scrollbar-track {
-  background-color: transparent;
-  box-shadow: none;
-}
+- utiliser `field-control` pour les champs standards ;
+- la base globale cible uniquement les types texte explicites : `text`, `search`, `email`, `url`, `password` et `textarea` ;
+- ne pas utiliser de selecteur global negatif comme `input:not([type="checkbox"])`, afin de ne pas capter les champs `number`, `time`, `file` ou les cellules specialisees ;
+- tout nouvel `<input>` texte doit declarer son `type` explicitement ;
+- utiliser `time-control` pour les champs `input[type="time"]`, avec variante `sm` ou `xs` selon le contexte ;
+- taille normale : `44px` minimum ;
+- taille compacte `sm` : `36px` minimum ;
+- taille dense `xs` : `32px` minimum ;
+- utiliser `field-textarea` pour les textareas redimensionnables avec scrollbar stable : `md` `108px`, `sm` `88px`, `xs` `72px` minimum ;
+- utiliser `data-variant="ghost"` sur `nds-textarea` pour les zones d'edition intégrées à une surface métier, comme les mémos ;
+- placeholders via `field-placeholder` ;
+- hover via `field-hover`, focus via `field-focus` ;
+- disabled via `field-disabled` ;
+- les variantes complexes comme les cellules de table et le champ timer `hh:mm:ss` utilisent des mixins dedies du meme fichier.
 
-::-webkit-scrollbar-thumb {
-  background-image: -webkit-gradient(
-    linear,
-    left bottom,
-    left top,
-    color-stop(0.5, rgb(79, 26, 114)),
-    color-stop(1, rgb(44, 1, 135))
-  );
-  border-radius: 10px;
-}
-```
+Edition inline :
 
-Ne pas ajouter de rail noir visible ni de double bordure pres des panneaux.
+- utiliser `inline-field` pour les inputs transparents au repos ;
+- hover/focus via `inline-field-hover` ;
+- utiliser `inline-textarea` pour les zones texte transparentes intégrées à une carte ;
+- les outils peuvent changer la couleur texte selon le contexte, par exemple titre de section ou état terminé.
 
-## 18. Images Et Assets
+Selects :
+
+- taille normale : `44px` minimum ;
+- taille compacte toolbox : `36px` minimum ;
+- taille dense `xs` : `32px` minimum ;
+- fleche custom unique, jamais de chevrons natifs ou empiles ;
+- fond sombre Nebula force via `background-color`, hover/focus violet avec chevron dore ;
+- focus visible global dore conserve.
+
+Select triggers :
+
+- utiliser `select-trigger` pour les boutons qui ouvrent une liste, un picker ou un calendrier avec le langage visuel d'un select ;
+- tailles disponibles : `md` `44px`, `sm` `36px`, `xs` `32px` ;
+- le chevron est le meme asset CSS que `select-control`, pas une icone locale ;
+- hover via `select-trigger-hover`, focus via `field-focus` et focus visible dore ;
+- `date-picker-trigger` reste un alias de compatibilite pour les outils deja migrés.
+
+Menus et palettes :
+
+- utiliser `floating-control-menu` pour les menus flottants compacts ;
+- utiliser `compact-menu-button` pour les options d'icones ou d'actions compactes ;
+- utiliser `color-swatch`, `color-swatch-rainbow` et `color-swatch-active` pour les palettes couleur ;
+- utiliser `large-icon-picker-trigger` pour les gros triggers de choix d'icone de toolbox ;
+- les outils peuvent garder uniquement la position du menu, le nombre de colonnes et la variable de couleur métier.
+
+Champs horaires :
+
+- les champs `input[type="time"]` restent natifs ;
+- utiliser `time-control` pour aligner le champ avec le theme Nebula ;
+- la popup native du navigateur/OS n'est pas consideree comme stylable de facon fiable en CSS.
+
+Boutons texte :
+
+- utiliser `text-button` depuis `website/src/styles/design-system/_controls.scss` ;
+- taille normale : hauteur minimale `42px` ;
+- taille compacte `sm` : hauteur minimale `34px` ;
+- taille dense `xs` : hauteur minimale `30px` ;
+- le bouton standard sert de variant secondaire par defaut ;
+- variants disponibles : `primary`, `secondary`, `ghost`, `dashed`, `danger` ;
+- les boutons texte peuvent utiliser `data-edge` pour ajuster leurs coins et `data-border` pour gérer les bordures jointes ou masquées ;
+- etat toggler via `.active` ou `.is-active`, avec le mixin `temporary-toggle-active` ;
+- etat desactive via `control-disabled` ;
+- les outils peuvent uniquement ajuster la largeur, l'alignement ou l'espacement environnant.
+
+Boutons icones :
+
+- taille normale : `40px`, icone `21px` ;
+- taille compacte : `34px`, icone `19px` ;
+- taille dense `xs` : `30px`, icone `17px` ;
+- taille inline `xxs` : `26px`, icone `15px` ;
+- tailles micro reservees aux noeuds denses : `24px`/`13px` et `22px`/`12px` ;
+- fond compact sombre, rayon `--radius-md`, hover violet contenu ;
+- variant `primary` dore/violet pour les actions principales ;
+- variant `ghost` transparent pour les handles discrets ;
+- variant `danger` rouge contenu pour les suppressions ;
+- variant de forme `button-edge(left|middle|right|top|center|bottom|top-left|top-right|bottom-right|bottom-left)` pour ajuster uniquement les coins contre une bordure ou dans un groupe ;
+- variant de bordure `button-joined-border(...)` pour masquer les bordures de jonction déduites depuis `data-edge` ;
+- variant de bordure `button-borderless` pour masquer toutes les bordures ;
+- variant visuel `panel-toggle` pour les boutons icones accolés à un panneau, comme le bouton pages ;
+- etat toggler via `.active` ou `.is-active`, avec le mixin `temporary-toggle-active`.
+- les barres d'outils compactes reutilisent la famille bouton icone ; `toolbar-button` reste un alias pratique pour les boutons courts du bloc-notes (`B`, `I`, `U`) et les boutons de dessin.
+
+Boutons composes et toggles de bord :
+
+- utiliser `button-edge` + `button-joined-border` pour les boutons groupés type ajout + chevron ;
+- utiliser `button-edge` pour la forme des toggles accoles au bord d'un module, et `icon-button-panel-toggle` pour leur rendu visuel quand ils reprennent le pattern du bouton `pages` ;
+- utiliser `list-row-button` pour les lignes selectionnables type pages du bloc-notes ;
+- utiliser `text-button-dashed` pour les actions d'ajout contextuelles encadrees en pointilles ;
+- `split-button-start`, `split-button-end`, `edge-toggle` et `dashed-action-button` restent des alias de compatibilite internes, pas des familles visuelles separees ;
+- les outils peuvent garder uniquement la position absolue, la largeur contextuelle et les icones ;
+- l'etat actif/hover doit rester dans le DS, sans fond/bordure locale.
+
+Steppers de quantite :
+
+- utiliser `quantity-stepper` depuis `website/src/styles/design-system/_controls.scss` ;
+- variante normale : checklist, boutons `28px` autour de la valeur editable ;
+- variante compacte : arbre d'objectifs, boutons `18px` ou `16px` selon la densite du noeud ;
+- hover des boutons via `quantity-stepper-button-hover`, pas via `icon-button-hover` ;
+- les outils peuvent adapter la grille environnante, mais pas redefinir les boutons `- / +`, le hover ou le champ de valeur.
+
+Switchs binaires :
+
+- utiliser `switch-control` depuis `website/src/styles/design-system/_controls.scss` ;
+- taille `lg` : switchs de module, hauteur `40px`, rail `30 x 16px` ;
+- taille normale : tool-split, hauteur `34px`, rail `34 x 18px` ;
+- taille compacte `sm` : contrôles denses, hauteur `28px`, rail `24 x 14px` ;
+- taille inline `xs` : timer inline, hauteur `26px`, rail `18 x 12px` ;
+- les variantes natives avec `<label><input type="checkbox" />...` doivent réutiliser `native-switch-label`, `native-switch-input`, `switch-track` et `switch-thumb` ;
+- les outils peuvent uniquement ajuster l'alignement ou la largeur environnante.
+
+Radio button groups :
+
+- la primitive commune est `radio-button-group` / `radio-button-group-option` depuis `website/src/styles/design-system/_controls.scss` ;
+- tailles disponibles : `md`, `sm`, `xs` ;
+- cette base couvre les tabs d'outils, switches de layout, choix d'alertes et répétitions calendrier ;
+- le nombre d'options, le fait d'utiliser une icone, un texte ou les deux ne constitue pas un variant visuel ;
+- les toggles compacts non natifs peuvent reutiliser ces mixins meme avec des `span`, tant que le comportement reste celui d'un choix exclusif ou d'un choix compact ;
+- l'etat actif passe par `.active` ou `.is-active` avec le style toggler temporaire ;
+- les outils peuvent definir la grille ou la largeur, mais pas redefinir localement les fonds, bordures, hovers ou actifs.
+
+Controles composes :
+
+- utiliser `compound-toggle-field` pour les cas qui combinent un choix compact et un champ, comme `Hold + number` ;
+- le bouton interne utilise `compound-toggle-field-option`, base sur `radio-button-group-option(xs)` ;
+- le champ interne utilise `compound-toggle-field-input`, base sur `field-control(xs)` et `number-spinner-reset` ;
+- ces controles ne sont pas des variants du groupe de choix, car leur structure mélange action et saisie.
+
+Checkboxes :
+
+- utiliser `checkbox-control` depuis `website/src/styles/design-system/_controls.scss` ;
+- taille normale globale : `20px`, format carre strict `1:1` ;
+- taille compacte `xs` : `14px` pour les listes denses comme les prérequis de l'arbre d'objectifs ;
+- etat coche avec gradient dore/violet et coche blanche ;
+- les outils peuvent ajuster uniquement l'alignement ou l'espacement environnant.
+
+Date picker et menus compacts :
+
+- les tabs internes d'outils utilisent les primitives `radio-button-group-surface`, `radio-button-group-option`, `radio-button-group-option-hover` et `radio-button-group-option-active` ;
+- les boutons du mini calendrier mensuel utilisent `date-picker-button` et `date-picker-button-hover` ;
+- les boutons de menu/picker compacts utilisent `compact-menu-button` et `compact-menu-button-hover` ;
+- les boutons transparents integres aux evenements calendrier utilisent `event-surface-button`, `event-surface-button-hover` et les contrastes `event-surface-contrast-default` / `event-surface-contrast-dark` ;
+- `nds-event-surface[data-variant="default"]` cible un texte blanc/gris blanc sur fond sombre ;
+- `nds-event-surface[data-variant="dark"]` cible un texte noir/gris noir sur fond clair ;
+- `nds-event-surface[data-size="md"]` vise les surfaces à partir de `44px` et affiche le titre et la metadata secondaire, par exemple l'heure ;
+- `nds-event-surface[data-size="sm"]` vise les surfaces autour de `22px` et masque la metadata secondaire ;
+- `nds-event-surface[data-size="xs"]` vise les surfaces ultra-fines autour de `10px` et affiche uniquement le titre en taille réduite ;
+- `nds-event-surface[data-color="#8b5cf6"]` expose la couleur métier de l'event ; la variable inline `--nds-event-color` applique cette couleur au fond et a la bordure ;
+- le hover utilise une superposition sombre legere pour rester lisible sur une couleur dynamique inconnue du Sass ;
+- les couleurs de fond des events restent métier et ne sont pas des variants NDS ;
+- les fichiers d'outils peuvent conserver les dimensions de grille, le placement du menu et les états métier `disabled`.
+
+## 18. Scrollbars
+
+Les scrollbars utilisent `scrollbar-control` depuis `website/src/styles/design-system/_controls.scss`.
+
+Regles :
+
+- largeur/hauteur WebKit : `6px` ;
+- `scrollbar-width: thin` pour Firefox ;
+- track transparent ;
+- thumb violet/indigo avec hover dore contenu ;
+- coin transparent pour les zones scrollables dans les deux axes ;
+- les textareas redimensionnables ajoutent `scrollbar-resizer`, sans fond noir ;
+- ne pas ajouter de rail noir visible ni de double bordure pres des panneaux.
+
+## 19. Images Et Assets
 
 Regles :
 
@@ -617,7 +789,7 @@ Regles :
 - les categories de jeu utilisent des images representatives, entieres et bien cadrees ;
 - eviter les images trop grandes dans les cards.
 
-## 19. Accessibilite
+## 20. Accessibilite
 
 Minimum attendu :
 
@@ -629,7 +801,7 @@ Minimum attendu :
 - modales avec `role="dialog"` et `aria-modal="true"` ;
 - ne pas transmettre une information uniquement par couleur.
 
-## 20. A Eviter
+## 21. A Eviter
 
 - accents dores partout ;
 - hover trop lumineux sur tous les elements ;