From 07975655a96be2b74165ad3943750fe9878a2b1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Sat, 23 May 2026 08:24:26 +0200
Subject: [PATCH] Align activation toggle with semantic token cascade

---
 semantic-tokens-components.html |  1 +
 styleguide.css                  | 81 ++++++++++++++++-----------------
 2 files changed, 40 insertions(+), 42 deletions(-)

diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index 0f95d8d..e68e44d 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -144,6 +144,7 @@
     <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
       <tr><td>surface-toggle-track</td><td>color-medium-grey</td><td>Toggle-Track-Fläche.</td></tr>
       <tr><td>surface-toggle-handle</td><td>color-darkblue</td><td>Toggle-Handle-Fläche.</td></tr>
+      <tr><td>text-toggle-label-active</td><td>color-font-light</td><td>Textfarbe des aktiven Toggle-Labels auf der hervorgehobenen Handle-Seite.</td></tr>
       <tr><td>layout-mode-toggle-local-height</td><td>compact-interaction-height</td><td>Höhe des Modus Schieber lokal; entspricht dem kompakten Interaktionsmaß.</td></tr>
       <tr><td>layout-mode-toggle-local-width-factor</td><td>3</td><td>Breitenfaktor des lokalen Modus-Schiebers relativ zur lokalen Höhe.</td></tr>
       <tr><td>layout-mode-toggle-width</td><td>calc(interaction-height * 3.5)</td><td>Standardbreite des Mode-Toggles in regulären Varianten.</td></tr>
diff --git a/styleguide.css b/styleguide.css
index c9c3734..4f5d5c3 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -90,6 +90,7 @@
   --text-button-process: var(--color-font-light);
   --text-tab-selected: var(--color-font-light);
   --text-tab-unselected: var(--color-dark-grey);
+  --text-toggle-label-active: var(--color-font-light);
   --text-menu-link-portal: var(--color-font-dark);
   --text-help-icon: var(--color-font-dark);
   --text-help-panel: var(--color-font-dark);
@@ -890,6 +891,44 @@ section + section {
       height: var(--layout-mode-toggle-local-height);
     }
 
+    .sg-activation-toggle-pattern {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-small);
+    }
+
+    .sg-activation-mode-toggle {
+      gap: 0;
+    }
+
+    .sg-activation-mode-toggle .sg-mode-toggle__switch {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      align-items: center;
+      overflow: hidden;
+    }
+
+    .sg-activation-mode-toggle .sg-mode-toggle__handle {
+      z-index: 1;
+    }
+
+    .sg-activation-mode-toggle__switch-label {
+      position: relative;
+      z-index: 2;
+      text-align: center;
+      font-family: var(--font-family-base);
+      font-size: var(--font-size-small);
+      font-weight: var(--font-weight-regular);
+      line-height: var(--layout-mode-toggle-local-height);
+      text-transform: lowercase;
+      color: var(--text-control-default);
+    }
+
+    .sg-activation-mode-toggle[data-active="absolute"] .sg-activation-mode-toggle__switch-label--left,
+    .sg-activation-mode-toggle[data-active="relative"] .sg-activation-mode-toggle__switch-label--right {
+      color: var(--text-toggle-label-active);
+    }
+
     .sg-slider-row {
       display: flex;
       flex-wrap: wrap;
@@ -1769,48 +1808,6 @@ section + section {
   }
 }
 
-/* ========================================================= */
-/* Patterns: Aktivierungs-Schalter                           */
-/* ========================================================= */
-
-.sg-activation-toggle-pattern {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-small);
-}
-
-.sg-activation-mode-toggle {
-  gap: 0;
-}
-
-.sg-activation-mode-toggle .sg-mode-toggle__switch {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  align-items: center;
-  overflow: hidden;
-}
-
-.sg-activation-mode-toggle .sg-mode-toggle__handle {
-  z-index: 1;
-}
-
-.sg-activation-mode-toggle__switch-label {
-  position: relative;
-  z-index: 2;
-  text-align: center;
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--layout-mode-toggle-local-height);
-  text-transform: lowercase;
-  color: var(--text-control-default);
-}
-
-.sg-activation-mode-toggle[data-active="absolute"] .sg-activation-mode-toggle__switch-label--left,
-.sg-activation-mode-toggle[data-active="relative"] .sg-activation-mode-toggle__switch-label--right {
-  color: var(--color-font-light);
-}
-
 /* ========================================================= */
 /* Patterns: Object Card                                     */
 /* ========================================================= */