From 1c1f2f0316c2680c96ab30e97d535fade21f2e78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 19 May 2026 11:15:39 +0200
Subject: [PATCH] Document and tokenise generic activatable remove control

---
 semantic-tokens-components.html | 2 ++
 styleguide.css                  | 6 ++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index 31d29ba..d78719f 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -101,6 +101,7 @@
     <h3 class="sg-sub-heading sg-section-h3">Pulldown and Menu</h3>
     <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-pulldown-panel</td><td>color-light-grey</td><td>Fläche geöffneter Pulldown-Panels.</td></tr>
+      <tr><td>surface-activatable-remove</td><td>surface-control-default</td><td>Fläche des generischen Schließen-Kontrollfelds in aktivierbaren Varianten (Pulldown, Checkbox, Radio, Slider).</td></tr>
       <tr><td>icon-pulldown-chevron</td><td>currentColor-basierte Verlaufsgrafik</td><td>Chevron-Icon für Pulldown-Trigger und Select-Felder; folgt der aktuellen Textfarbe.</td></tr>
       <tr><td>layout-pulldown-panel-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Horizontaler Innenabstand des geöffneten Pulldown-Panels.</td></tr>
       <tr><td>layout-pulldown-option-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Horizontaler Innenabstand der einzelnen Pulldown-Optionen.</td></tr>
@@ -109,6 +110,7 @@
       <tr><td>layout-pulldown-chevron-reserved-space</td><td>spacing-large</td><td>Reservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich.</td></tr>
       <tr><td>surface-menu-panel-portal</td><td>color-light-grey</td><td>Fläche des Sandwich-Menü-Panels für große und kleine Variante.</td></tr>
       <tr><td>text-menu-link-portal</td><td>color-font-dark</td><td>Linktextfarbe im Sandwich-Menü für große und kleine Variante.</td></tr>
+      <tr><td>text-activatable-remove</td><td>text-control-default</td><td>Zeichenfarbe des generischen Schließen-Kontrollfelds in aktivierbaren Varianten.</td></tr>
     </tbody></table>
 
     <h3 class="sg-sub-heading sg-section-h3">Toggle / Checkbox / Radio / Help</h3>
diff --git a/styleguide.css b/styleguide.css
index d407e6c..4fb5c82 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -59,6 +59,7 @@
   --surface-help-icon: var(--color-medium-grey);
   --surface-help-panel: var(--color-light-grey);
   --surface-pulldown-panel: var(--color-light-grey);
+  --surface-activatable-remove: var(--surface-control-default);
   --surface-slider-track: var(--color-medium-grey);
   --surface-slider-progress: var(--color-dark-grey);
   --surface-slider-thumb: var(--color-dark-grey);
@@ -87,6 +88,7 @@
   --text-menu-link-portal: var(--color-font-dark);
   --text-help-icon: var(--color-font-dark);
   --text-help-panel: var(--color-font-dark);
+  --text-activatable-remove: var(--text-control-default);
   --text-hyperlink: var(--color-font-hyperlink);
   --icon-pulldown-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M2 2l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
   --icon-sandwich-line-portal: var(--color-font-dark);
@@ -1165,8 +1167,8 @@ section + section {
       padding: 0;
       border: var(--border-none);
       border-radius: var(--radius-interaction);
-      background: var(--surface-control-default);
-      color: var(--text-control-default);
+      background: var(--surface-activatable-remove);
+      color: var(--text-activatable-remove);
       font-family: var(--font-family-base);
       font-size: var(--font-size-base);
       line-height: 1;