diff --git a/.beads/interactions.jsonl b/.beads/interactions.jsonl index e69de29..7180a5e 100644 --- a/.beads/interactions.jsonl +++ b/.beads/interactions.jsonl @@ -0,0 +1,22 @@ +{"id":"int-8d5f8f5714677d91360a20177b1f5a9e","kind":"field_change","created_at":"2026-08-27T12:58:35.614943857Z","actor":"Shinuwa","issue_id":"sokko-g-lki","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Completed"}} +{"id":"int-206ccb97f9d09712e2b4136d115a0e43","kind":"field_change","created_at":"2026-08-27T13:09:45.211867088Z","actor":"Shinuwa","issue_id":"sokko-g-e7s","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Completed remaining toolbox control migration to NDS mixins and updated design-system catalogue examples."}} +{"id":"int-5131e4130f57a4e8a55f176a46240fad","kind":"field_change","created_at":"2026-08-27T16:19:44.570963534Z","actor":"Shinuwa","issue_id":"sokko-g-npt","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Completed NDS button variant cleanup and catalogue simplification."}} +{"id":"int-3db2dfcbabd4cbb63eaeedb1bea8ab47","kind":"field_change","created_at":"2026-08-27T16:43:20.612129607Z","actor":"Shinuwa","issue_id":"sokko-g-0o4","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Completed NDS data attribute API migration and validation."}} +{"id":"int-578a8a6aff782082d539f0e14bb0aa79","kind":"field_change","created_at":"2026-08-27T16:58:07.410812508Z","actor":"Shinuwa","issue_id":"sokko-g-alp","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Expanded /design-system into exhaustive NDS family attribute matrices."}} +{"id":"int-cc32f7330c12cf2d37b0d22650ccfb5e","kind":"field_change","created_at":"2026-08-27T17:13:59.871782552Z","actor":"Shinuwa","issue_id":"sokko-g-pp5","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Reworked /design-system into component cards with configurable attribute matrices."}} +{"id":"int-17da0005e87891c66734a766d8456459","kind":"field_change","created_at":"2026-08-27T17:23:07.045839669Z","actor":"Shinuwa","issue_id":"sokko-g-73i","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Completed"}} +{"id":"int-d0531629593c076b63281346c729ac3e","kind":"field_change","created_at":"2026-08-27T17:28:11.740302589Z","actor":"Shinuwa","issue_id":"sokko-g-wnh","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Completed"}} +{"id":"int-fb41489d0517f51fcda643c4230461fe","kind":"field_change","created_at":"2026-08-27T17:35:40.407737936Z","actor":"Shinuwa","issue_id":"sokko-g-s0a","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Completed"}} +{"id":"int-b7bafbc214af080356e07d2d97f1ffba","kind":"field_change","created_at":"2026-08-27T21:32:26.611249333Z","actor":"Shinuwa","issue_id":"sokko-g-2u9","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Completed"}} +{"id":"int-ea50d03c7c84b32ab2fce86f15bbe05f","kind":"field_change","created_at":"2026-08-27T21:43:00.775108889Z","actor":"Shinuwa","issue_id":"sokko-g-bh4","extra":{"field":"status","new_value":"closed","old_value":"open","reason":"Completed"}} +{"id":"int-4f7a574335bb2d616e9caae09e22e55b","kind":"field_change","created_at":"2026-08-27T21:45:18.547229481Z","actor":"Shinuwa","issue_id":"sokko-g-7jm","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Completed"}} +{"id":"int-ae5fb0bbe41a7958929560a1bbf65052","kind":"field_change","created_at":"2026-08-27T21:48:45.268794089Z","actor":"Shinuwa","issue_id":"sokko-g-z2t","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Completed"}} +{"id":"int-8e3b38de72d948a6c241b0d8b2f8077b","kind":"field_change","created_at":"2026-08-27T21:54:30.02159376Z","actor":"Shinuwa","issue_id":"sokko-g-coh","extra":{"field":"status","new_value":"closed","old_value":"open","reason":"Completed"}} +{"id":"int-0d86b94b9a04df5b68e2362e0824a37b","kind":"field_change","created_at":"2026-08-27T21:57:24.401323676Z","actor":"Shinuwa","issue_id":"sokko-g-hif","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Completed"}} +{"id":"int-3fcb6bc2b605db6210c0da18da07e902","kind":"field_change","created_at":"2026-08-27T22:01:35.180268661Z","actor":"Shinuwa","issue_id":"sokko-g-6fs","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Fixed NDS textarea min heights by size"}} +{"id":"int-611cb19bdd31f0e79cc8c2f2bb7a3dd7","kind":"field_change","created_at":"2026-08-28T07:13:54.812999765Z","actor":"Shinuwa","issue_id":"sokko-g-tvo","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Fixed NDS field hover cascade and replaced public date trigger with select trigger"}} +{"id":"int-0e1196655dabd3096c10beef1ba8aff2","kind":"field_change","created_at":"2026-08-28T07:19:28.131918475Z","actor":"Shinuwa","issue_id":"sokko-g-z4x","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Fixed select trigger hover chevron and focus-visible outline"}} +{"id":"int-9c27343c043121862608b8ed9013c306","kind":"field_change","created_at":"2026-08-28T07:25:53.259127006Z","actor":"Shinuwa","issue_id":"sokko-g-eln","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Fixed select trigger md hover/focus and disabled checkbox styling"}} +{"id":"int-da5413e82c18d19a8432288bec703dd7","kind":"field_change","created_at":"2026-08-28T07:50:07.033524644Z","actor":"Shinuwa","issue_id":"sokko-g-h7z","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Completed global NDS control migration and validation"}} +{"id":"int-42f39cb889dfab3bc998d4ce566d2339","kind":"field_change","created_at":"2026-08-28T08:09:50.738078383Z","actor":"Shinuwa","issue_id":"sokko-g-9p1","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Fixed filter radio group, sidebar storage buttons, memo controls, and textarea ghost variant"}} +{"id":"int-03ed1c823da90551f51a5a0d5691e440","kind":"field_change","created_at":"2026-08-28T12:35:29.257332022Z","actor":"Shinuwa","issue_id":"sokko-g-39h","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Applied NDS event-surface to calendar week and month events, documented data-color/data-size, and validated checks."}} diff --git a/.gitignore b/.gitignore index eb27236..d9fef32 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,7 @@ playwright-report/ test-results/ .env .DS_Store +.local/ # Beads / Dolt files (added by bd init) .dolt/ diff --git a/DESIGN_SYSTEM.md b/DESIGN_SYSTEM.md index 3618c86..f1c37b8 100644 --- a/DESIGN_SYSTEM.md +++ b/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 + + + + + +``` + +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 `` 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 `` 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 `` 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 `