From 0ac78faff6305ec38afea8db47df402130bb7302 Mon Sep 17 00:00:00 2001
From: Shinuwa <git@shinuwa.fr>
Date: Wed, 29 Jul 2026 10:47:53 +0200
Subject: [PATCH] update toggle butto and switch style

---
 DESIGN_SYSTEM.md                   | 14 +++++++++++
 website/src/styles/_mixins.scss    | 13 ++++++++++
 website/src/styles/_toolboxes.scss | 39 +++++++++---------------------
 3 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/DESIGN_SYSTEM.md b/DESIGN_SYSTEM.md
index 77f3e05..e5261e2 100644
--- a/DESIGN_SYSTEM.md
+++ b/DESIGN_SYSTEM.md
@@ -229,6 +229,20 @@ Hover :
 - glow violet tres discret ;
 - pas d'accent dore systematique.
 
+### Boutons Toggle Temporaires
+
+Les boutons qui ouvrent temporairement un panneau, un menu ou un mode local ne doivent pas utiliser le style switch.
+
+Etat actif :
+
+- bordure gradient dore/violet plus visible que le hover ;
+- fond sombre avec degrade transparent/dore tres leger et touche violette en bas a droite, sans remplissage primary ;
+- texte ou icone clair pour préserver la lisibilite ;
+- trait interne dore discret pour distinguer l'etat actif des badges et actions primary ;
+- bordure dore/dore clair statique, sans effet toast ;
+- pas de glow externe fort ni animation permanente ;
+- utiliser le mixin `temporary-toggle-active` pour garder les variantes coherentes.
+
 ### Ghost
 
 Hover minimal :
diff --git a/website/src/styles/_mixins.scss b/website/src/styles/_mixins.scss
index d8a15a4..18eef1c 100644
--- a/website/src/styles/_mixins.scss
+++ b/website/src/styles/_mixins.scss
@@ -50,3 +50,16 @@
       linear-gradient(180deg, transparent 0 30%, rgba(246, 196, 83, 0.08) 42%, rgba(246, 196, 83, 0.38) 72%, rgba(246, 196, 83, 0.52) 100%);
   }
 }
+
+@mixin temporary-toggle-active($text-color: var(--color-text-primary)) {
+  border-color: rgba(246, 196, 83, 0.46);
+  background:
+    radial-gradient(circle at 100% 100%, rgba(139, 92, 246, 0.16), transparent 48%) padding-box,
+    linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(246, 196, 83, 0.02) 42%, rgba(21, 26, 48, 0.04)) padding-box,
+    linear-gradient(135deg, rgba(13, 17, 34, 0.92), rgba(21, 26, 48, 0.82)) padding-box,
+    linear-gradient(120deg, rgba(246, 196, 83, 0.86), rgba(255, 244, 196, 0.76), rgba(246, 196, 83, 0.72)) border-box;
+  color: $text-color;
+  box-shadow:
+    inset 0 -2px 0 rgba(246, 196, 83, 0.34),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
diff --git a/website/src/styles/_toolboxes.scss b/website/src/styles/_toolboxes.scss
index 84a4129..e28cc3e 100644
--- a/website/src/styles/_toolboxes.scss
+++ b/website/src/styles/_toolboxes.scss
@@ -163,9 +163,7 @@
 }
 
 .toolbox-icon-picker-menu button.active {
-  border-color: var(--color-accent-gold);
-  background: rgba(246, 196, 83, 0.12);
-  box-shadow: 0 0 0 2px rgba(246, 196, 83, 0.12);
+  @include mixins.temporary-toggle-active;
 }
 
 .toolbox-icon-picker-menu img {
@@ -539,12 +537,7 @@
 }
 
 .layout-switch button.active {
-  border-color: rgba(246, 196, 83, 0.34);
-  background:
-    linear-gradient(135deg, rgba(72, 43, 160, 0.96), rgba(45, 52, 146, 0.94)) padding-box,
-    linear-gradient(135deg, rgba(246, 196, 83, 0.66), rgba(139, 92, 246, 0.36)) border-box;
-  color: white;
-  box-shadow: var(--shadow-primary);
+  @include mixins.temporary-toggle-active;
 }
 
 .module-drag-handle {
@@ -647,9 +640,7 @@
 }
 
 .module-edit-button.active {
-  border-color: var(--color-primary-border);
-  background: var(--color-primary-soft);
-  color: var(--color-text-primary);
+  @include mixins.temporary-toggle-active;
 }
 
 .module-icon {
@@ -774,10 +765,7 @@
 }
 
 .tabs button.active {
-  border-color: rgba(246, 196, 83, 0.56);
-  background: rgba(246, 196, 83, 0.12);
-  color: var(--color-accent-gold);
-  box-shadow: 0 0 18px rgba(246, 196, 83, 0.08);
+  @include mixins.temporary-toggle-active;
 }
 
 .tabs .module-icon-svg {
@@ -2404,18 +2392,13 @@ textarea:focus {
 .task-planner-drag-handle:hover:not(:disabled),
 .task-planner-category-drag-handle:hover,
 .task-planner-settings-toggle:hover,
-.task-planner-settings-toggle.active,
 .task-planner-dropdown-button:hover,
-.task-planner-dropdown-button.active,
 .task-planner-settings-button:hover,
-.task-planner-settings-button.active,
 .task-planner-relation-chip button:hover,
 .module-scroll-button:hover,
-.module-scroll-button.active,
 .tool-split-scroll-toggle:hover,
-.tool-split-scroll-toggle.active,
 .checklist-complete-mode-button:hover,
-.checklist-complete-mode-button.active {
+.checklist-complete-mode-button.active:hover {
   border-color: rgba(196, 181, 253, 0.32);
   background:
     linear-gradient(135deg, rgba(31, 37, 68, 0.94), rgba(18, 22, 44, 0.96)) padding-box,
@@ -2426,6 +2409,12 @@ textarea:focus {
     inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
+.task-planner-settings-toggle.active,
+.task-planner-dropdown-button.active,
+.task-planner-settings-button.active {
+  @include mixins.temporary-toggle-active;
+}
+
 .timer-alert-mode-button:hover,
 .timer-alert-mode-button.active {
   border-color: rgba(196, 181, 253, 0.2);
@@ -2532,11 +2521,7 @@ textarea:focus {
 .module-scroll-button.active,
 .tool-split-scroll-toggle.active,
 .checklist-complete-mode-button.active {
-  border-color: rgba(246, 196, 83, 0.34);
-  background:
-    linear-gradient(135deg, rgba(72, 43, 160, 0.82), rgba(45, 52, 146, 0.8)) padding-box,
-    linear-gradient(135deg, rgba(246, 196, 83, 0.58), rgba(139, 92, 246, 0.32)) border-box;
-  color: var(--color-text-primary);
+  @include mixins.temporary-toggle-active;
 }
 
 .module-scroll-button.active i,