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 @@
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
| surface-toggle-track | color-medium-grey | Toggle-Track-Fläche. |
| surface-toggle-handle | color-darkblue | Toggle-Handle-Fläche. |
+ | text-toggle-label-active | color-font-light | Textfarbe des aktiven Toggle-Labels auf der hervorgehobenen Handle-Seite. |
| layout-mode-toggle-local-height | compact-interaction-height | Höhe des Modus Schieber lokal; entspricht dem kompakten Interaktionsmaß. |
| layout-mode-toggle-local-width-factor | 3 | Breitenfaktor des lokalen Modus-Schiebers relativ zur lokalen Höhe. |
| layout-mode-toggle-width | calc(interaction-height * 3.5) | Standardbreite des Mode-Toggles in regulären Varianten. |
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 */
/* ========================================================= */