From 4a9e0e1791b4a7a5ecede06604910be49bf44f37 Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Fri, 30 Jan 2026 12:51:48 +0100
Subject: [PATCH] ux: centralize toggle switch styles

---
 .../components/ui/DesignSystemStyles.astro    | 57 +++++++++++++++++++
 frontend/src/pages/admin/plugins.astro        | 46 +--------------
 frontend/src/pages/admin/voting.astro         | 40 +------------
 .../pages/communities/[slug]/plugins.astro    | 50 +---------------
 .../communities/[slug]/voting-config.astro    | 41 +------------
 5 files changed, 67 insertions(+), 167 deletions(-)

diff --git a/frontend/src/components/ui/DesignSystemStyles.astro b/frontend/src/components/ui/DesignSystemStyles.astro
index 283ddd4..be135bc 100644
--- a/frontend/src/components/ui/DesignSystemStyles.astro
+++ b/frontend/src/components/ui/DesignSystemStyles.astro
@@ -216,6 +216,63 @@
     margin: 0.35rem 0 0;
   }
 
+  :where(.toggle-switch, .switch) {
+    --ui-toggle-width: 44px;
+    --ui-toggle-height: 24px;
+    --ui-toggle-thumb-size: 18px;
+    --ui-toggle-thumb-offset: 3px;
+    --ui-toggle-bg: var(--color-border);
+    --ui-toggle-active-bg: var(--color-primary);
+    --ui-toggle-thumb-bg: var(--color-surface);
+    --ui-toggle-disabled-opacity: 0.5;
+    --ui-toggle-transition: 0.2s;
+
+    position: relative;
+    display: inline-block;
+    width: var(--ui-toggle-width);
+    height: var(--ui-toggle-height);
+  }
+
+  :where(.toggle-switch input, .switch input) {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  :where(.toggle-switch .toggle-slider, .switch .slider) {
+    position: absolute;
+    cursor: pointer;
+    inset: 0;
+    background: var(--ui-toggle-bg);
+    border-radius: 999px;
+    transition: var(--ui-toggle-transition);
+  }
+
+  :where(.toggle-switch .toggle-slider, .switch .slider):before {
+    position: absolute;
+    content: "";
+    width: var(--ui-toggle-thumb-size);
+    height: var(--ui-toggle-thumb-size);
+    left: var(--ui-toggle-thumb-offset);
+    bottom: var(--ui-toggle-thumb-offset);
+    background: var(--ui-toggle-thumb-bg);
+    border-radius: 999px;
+    transition: var(--ui-toggle-transition);
+  }
+
+  :where(.toggle-switch input:checked + .toggle-slider, .switch input:checked + .slider) {
+    background: var(--ui-toggle-active-bg);
+  }
+
+  :where(.toggle-switch input:checked + .toggle-slider, .switch input:checked + .slider):before {
+    transform: translateX(calc(var(--ui-toggle-width) - var(--ui-toggle-thumb-size) - (var(--ui-toggle-thumb-offset) * 2)));
+  }
+
+  :where(.toggle-switch input:disabled + .toggle-slider, .switch input:disabled + .slider) {
+    opacity: var(--ui-toggle-disabled-opacity);
+    cursor: not-allowed;
+  }
+
   :where(button) {
     border: 1px solid transparent;
     border-radius: var(--radius-sm);
diff --git a/frontend/src/pages/admin/plugins.astro b/frontend/src/pages/admin/plugins.astro
index 9ca6f6d..e6c74ca 100644
--- a/frontend/src/pages/admin/plugins.astro
+++ b/frontend/src/pages/admin/plugins.astro
@@ -128,49 +128,9 @@ import { API_BASE } from '../../lib/api';
   }
 
   .toggle-switch {
-    position: relative;
-    width: 48px;
-    height: 26px;
-  }
-
-  .toggle-switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .toggle-slider {
-    position: absolute;
-    cursor: pointer;
-    inset: 0;
-    background: var(--color-border);
-    border-radius: 26px;
-    transition: 0.3s;
-  }
-
-  .toggle-slider:before {
-    position: absolute;
-    content: "";
-    height: 20px;
-    width: 20px;
-    left: 3px;
-    bottom: 3px;
-    background: var(--color-surface);
-    border-radius: 50%;
-    transition: 0.3s;
-  }
-
-  input:checked + .toggle-slider {
-    background: var(--color-primary);
-  }
-
-  input:checked + .toggle-slider:before {
-    transform: translateX(22px);
-  }
-
-  input:disabled + .toggle-slider {
-    cursor: not-allowed;
-    opacity: 0.5;
+    --ui-toggle-width: 48px;
+    --ui-toggle-height: 26px;
+    --ui-toggle-thumb-size: 20px;
   }
 
   .loading {
diff --git a/frontend/src/pages/admin/voting.astro b/frontend/src/pages/admin/voting.astro
index e037363..b79105a 100644
--- a/frontend/src/pages/admin/voting.astro
+++ b/frontend/src/pages/admin/voting.astro
@@ -360,46 +360,8 @@ import { API_BASE } from '../../lib/api';
     letter-spacing: 0.06em;
   }
 
-  /* Toggle Switch */
   .toggle-switch {
-    position: relative;
-    width: 44px;
-    height: 24px;
-  }
-
-  .toggle-switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .toggle-slider {
-    position: absolute;
-    cursor: pointer;
-    inset: 0;
-    background: var(--color-border);
-    border-radius: 24px;
-    transition: 0.2s;
-  }
-
-  .toggle-slider:before {
-    position: absolute;
-    content: "";
-    height: 18px;
-    width: 18px;
-    left: 3px;
-    bottom: 3px;
-    background: white;
-    border-radius: 50%;
-    transition: 0.2s;
-  }
-
-  input:checked + .toggle-slider {
-    background: var(--color-success);
-  }
-
-  input:checked + .toggle-slider:before {
-    transform: translateX(20px);
+    --ui-toggle-active-bg: var(--color-success);
   }
 
   /* Phase Flow */
diff --git a/frontend/src/pages/communities/[slug]/plugins.astro b/frontend/src/pages/communities/[slug]/plugins.astro
index 1c457e6..5968ea6 100644
--- a/frontend/src/pages/communities/[slug]/plugins.astro
+++ b/frontend/src/pages/communities/[slug]/plugins.astro
@@ -479,53 +479,9 @@ const { slug } = Astro.params;
   }
 
   .switch {
-    position: relative;
-    display: inline-block;
-    width: 44px;
-    height: 24px;
-  }
-
-  .switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--color-neutral);
-    transition: 0.2s;
-    border-radius: 999px;
-  }
-
-  .slider:before {
-    position: absolute;
-    content: '';
-    height: 18px;
-    width: 18px;
-    left: 3px;
-    bottom: 3px;
-    background-color: var(--color-on-primary);
-    transition: 0.2s;
-    border-radius: 999px;
-  }
-
-  input:checked + .slider {
-    background-color: var(--color-primary);
-  }
-
-  input:checked + .slider:before {
-    transform: translateX(20px);
-  }
-
-  input:disabled + .slider {
-    opacity: 0.5;
-    cursor: default;
+    --ui-toggle-bg: var(--color-neutral);
+    --ui-toggle-active-bg: var(--color-primary);
+    --ui-toggle-thumb-bg: var(--color-on-primary);
   }
 
   .loading {
diff --git a/frontend/src/pages/communities/[slug]/voting-config.astro b/frontend/src/pages/communities/[slug]/voting-config.astro
index c484895..0e7ff40 100644
--- a/frontend/src/pages/communities/[slug]/voting-config.astro
+++ b/frontend/src/pages/communities/[slug]/voting-config.astro
@@ -76,44 +76,9 @@ const { slug } = Astro.params;
   }
 
   .toggle-switch {
-    position: relative;
-    width: 48px;
-    height: 26px;
-  }
-
-  .toggle-switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .toggle-slider {
-    position: absolute;
-    cursor: pointer;
-    inset: 0;
-    background: var(--color-border);
-    border-radius: 26px;
-    transition: 0.3s;
-  }
-
-  .toggle-slider:before {
-    position: absolute;
-    content: "";
-    height: 20px;
-    width: 20px;
-    left: 3px;
-    bottom: 3px;
-    background: var(--color-surface);
-    border-radius: 50%;
-    transition: 0.3s;
-  }
-
-  input:checked + .toggle-slider {
-    background: var(--color-primary);
-  }
-
-  input:checked + .toggle-slider:before {
-    transform: translateX(22px);
+    --ui-toggle-width: 48px;
+    --ui-toggle-height: 26px;
+    --ui-toggle-thumb-size: 20px;
   }
 
   .default-badge {