From 817e21567bf05f0959e5c365bab6545ee8299321 Mon Sep 17 00:00:00 2001 From: Shinuwa Date: Sat, 29 Aug 2026 09:16:58 +0200 Subject: [PATCH] Migrate site controls to Nebula design system --- .beads/interactions.jsonl | 22 + .gitignore | 1 + DESIGN_SYSTEM.md | 242 ++- tests/static-styles.test.mjs | 8 +- tests/static-toolboxes.test.mjs | 5 +- website/src/components/GuidedTooltipTour.jsx | 4 +- website/src/components/ImageViewer.jsx | 9 +- website/src/components/ImportButton.jsx | 4 +- website/src/components/Shell.jsx | 13 +- website/src/components/Tabs.jsx | 4 +- .../src/components/ToastPositionSwitch.jsx | 32 +- website/src/components/ToolboxModals.jsx | 14 +- .../games/CopyChecklistItemsButton.jsx | 3 +- .../src/features/games/GameFiltersPanel.jsx | 24 +- website/src/features/games/GameListsPage.jsx | 6 +- website/src/features/games/GamesPage.jsx | 2 +- .../features/games/mhwilds/MhwildsListing.jsx | 4 +- .../src/features/toolboxes/ToolboxCard.jsx | 16 +- .../src/features/toolboxes/ToolboxPages.jsx | 27 +- .../toolboxes/modules/AddToolControls.jsx | 19 +- .../toolboxes/modules/CalculatorEntries.jsx | 8 +- .../toolboxes/modules/CalculatorModule.jsx | 17 +- .../toolboxes/modules/CalendarContent.jsx | 3 +- .../modules/CalendarEventControls.jsx | 24 +- .../toolboxes/modules/CalendarEventForm.jsx | 19 +- .../modules/CalendarMonthDatePicker.jsx | 2 +- .../toolboxes/modules/CalendarViews.jsx | 40 +- .../toolboxes/modules/ChecklistModule.jsx | 48 +- .../toolboxes/modules/ChecklistParts.jsx | 27 +- .../toolboxes/modules/CombosEditor.jsx | 26 +- .../features/toolboxes/modules/CombosList.jsx | 15 +- .../toolboxes/modules/CombosParts.jsx | 3 +- .../toolboxes/modules/CountersModule.jsx | 16 +- .../toolboxes/modules/DrawingControls.jsx | 26 +- .../EquipmentPlannerCharacteristics.jsx | 22 +- .../modules/EquipmentPlannerItem.jsx | 17 +- .../modules/EquipmentPlannerMaterials.jsx | 12 +- .../modules/EquipmentPlannerModule.jsx | 4 +- .../modules/EquipmentPlannerPickers.jsx | 11 +- .../modules/EquipmentPlannerSockets.jsx | 18 +- .../toolboxes/modules/GoalTreeBranch.jsx | 15 +- .../toolboxes/modules/GoalTreeEditor.jsx | 17 +- .../modules/GoalTreeEditorFields.jsx | 23 +- .../toolboxes/modules/GoalTreeNodeContent.jsx | 8 +- .../toolboxes/modules/GoalTreeView.jsx | 5 +- .../modules/ImageAnnotationModule.jsx | 5 +- .../toolboxes/modules/ImagesModule.jsx | 12 +- .../toolboxes/modules/LinksModule.jsx | 14 +- .../toolboxes/modules/MemosModule.jsx | 22 +- .../toolboxes/modules/NotepadModule.jsx | 21 +- .../toolboxes/modules/NotepadToolbar.jsx | 12 +- .../toolboxes/modules/TableGridParts.jsx | 2 + .../toolboxes/modules/TableToolbar.jsx | 17 +- .../toolboxes/modules/TaskPlannerBranch.jsx | 9 +- .../toolboxes/modules/TaskPlannerItem.jsx | 20 +- .../modules/TaskPlannerItemPanels.jsx | 17 +- .../toolboxes/modules/TaskPlannerSettings.jsx | 8 +- .../toolboxes/modules/TaskPlannerTopbar.jsx | 12 +- .../toolboxes/modules/TextExchangeActions.jsx | 4 +- .../toolboxes/modules/TextImportModal.jsx | 11 +- .../toolboxes/modules/TimerCountdown.jsx | 17 +- .../toolboxes/modules/TimerModule.jsx | 8 +- .../toolboxes/modules/TimerSharedControls.jsx | 10 +- .../toolboxes/modules/TimerStopwatch.jsx | 8 +- .../toolboxes/modules/ToolboxModules.jsx | 15 +- .../toolboxes/modules/calendarLayout.js | 2 +- .../toolboxes/modules/calendarUtils.js | 17 + website/src/pages/AboutPage.jsx | 2 +- website/src/pages/DesignSystemPage.jsx | 641 +++++++ website/src/pages/HomeOnboardingSection.jsx | 2 +- website/src/pages/HomePage.jsx | 4 +- website/src/pages/LibraryPage.jsx | 19 +- website/src/router/RouteContent.jsx | 4 + website/src/styles/_base.scss | 445 +---- website/src/styles/_cards.scss | 2 +- website/src/styles/_design-system.scss | 514 +++++ website/src/styles/_mixins.scss | 15 + website/src/styles/_shell.scss | 1 - .../src/styles/design-system/_attributes.scss | 1091 +++++++++++ .../src/styles/design-system/_controls.scss | 1693 +++++++++++++++++ .../design-system/_interactive-controls.scss | 116 ++ website/src/styles/games/_filters.scss | 50 +- website/src/styles/games/_lists.scss | 25 - website/src/styles/home/_shared.scss | 12 - .../src/styles/home/library/_examples.scss | 11 - .../src/styles/home/library/_previews.scss | 8 - website/src/styles/main.scss | 2 + .../styles/toolboxes/_calculator-results.scss | 7 - website/src/styles/toolboxes/_calculator.scss | 2 - website/src/styles/toolboxes/_checklist.scss | 166 +- website/src/styles/toolboxes/_counters.scss | 17 - website/src/styles/toolboxes/_drawing.scss | 2 - website/src/styles/toolboxes/_images.scss | 37 +- website/src/styles/toolboxes/_links.scss | 19 - website/src/styles/toolboxes/_memos.scss | 28 +- .../src/styles/toolboxes/_module-shell.scss | 102 +- website/src/styles/toolboxes/_notepad.scss | 188 +- website/src/styles/toolboxes/_table.scss | 47 +- .../src/styles/toolboxes/_text-exchange.scss | 30 +- website/src/styles/toolboxes/_timer.scss | 94 +- .../toolboxes/calendar/_date-picker.scss | 71 +- .../toolboxes/calendar/_event-controls.scss | 40 +- .../toolboxes/calendar/_form-actions.scss | 11 +- .../toolboxes/calendar/_form-layout.scss | 13 +- .../src/styles/toolboxes/calendar/_month.scss | 48 +- .../src/styles/toolboxes/calendar/_week.scss | 81 +- .../src/styles/toolboxes/combos/_editor.scss | 50 +- .../src/styles/toolboxes/combos/_hold.scss | 53 +- .../toolboxes/equipment-planner/_details.scss | 4 +- .../toolboxes/equipment-planner/_items.scss | 111 +- .../toolboxes/equipment-planner/_pickers.scss | 43 +- .../toolboxes/equipment-planner/_sockets.scss | 12 +- .../toolboxes/equipment-planner/_summary.scss | 1 - .../styles/toolboxes/goal-tree/_editor.scss | 106 +- .../toolboxes/goal-tree/_node-actions.scss | 24 +- .../toolboxes/goal-tree/_node-card.scss | 12 +- .../toolboxes/goal-tree/_node-content.scss | 46 +- .../src/styles/toolboxes/goal-tree/_view.scss | 12 +- .../styles/toolboxes/layout/_add-tools.scss | 20 +- .../styles/toolboxes/layout/_icon-picker.scss | 39 +- .../styles/toolboxes/layout/_preferences.scss | 56 +- .../toolboxes/shared-controls/_entries.scss | 29 +- .../toolboxes/shared-controls/_selects.scss | 34 +- .../shared-controls/_split-controls.scss | 199 +- .../styles/toolboxes/task-planner/_items.scss | 23 +- .../toolboxes/task-planner/_panels.scss | 27 +- .../task-planner/_topbar-settings.scss | 34 +- 127 files changed, 5380 insertions(+), 2363 deletions(-) create mode 100644 website/src/pages/DesignSystemPage.jsx create mode 100644 website/src/styles/_design-system.scss create mode 100644 website/src/styles/design-system/_attributes.scss create mode 100644 website/src/styles/design-system/_controls.scss create mode 100644 website/src/styles/design-system/_interactive-controls.scss 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 `