From 6b98073dd4d9c86b9c7f05547309fe38ff37a079 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 19 May 2026 08:34:46 +0200
Subject: [PATCH] Align semantic token component docs with styleguide CSS

---
 semantic-tokens-components.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index ede777b..7b5de9d 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -21,7 +21,7 @@
         <tr><td>surface-card-body</td><td>color-light-grey</td><td>Fläche im Body-Segment der Card.</td></tr>
         <tr><td>surface-card-header-primary</td><td>color-darkblue</td><td>Primärer Header-Hintergrund.</td></tr>
         <tr><td>surface-card-header-alternative</td><td>color-darkgreen</td><td>Alternativer Header-Hintergrund.</td></tr>
-        <tr><td>surface-card-header-alternative2</td><td>color-darkbrown</td><td>Zweite alternative Header-Fläche (im CSS derzeit als surface-card-header-muted geführt).</td></tr>
+        <tr><td>surface-card-header-muted</td><td>color-darkbrown</td><td>Zweite alternative Header-Fläche.</td></tr>
         <tr><td>divider-card-segment</td><td>color-white</td><td>Trenner zwischen Segmenten.</td></tr>
         <tr><td>text-card-header</td><td>color-font-light</td><td>Header-Textfarbe.</td></tr>
         <tr><td>text-card-body</td><td>color-font-dark</td><td>Standard-Textfarbe im Body.</td></tr>
@@ -41,7 +41,7 @@
       <thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead>
       <tbody>
         <tr><td>surface-card-transparent</td><td>color-transparent</td><td>Transparente Fläche der Text-Group-Box ohne Card-Segmente.</td></tr>
-        <tr><td>text-group-box</td><td>color-font-light</td><td>Textfarbe der Text-Group-Box (im CSS derzeit als text-card-transparent geführt).</td></tr>
+        <tr><td>text-card-transparent</td><td>color-font-light</td><td>Textfarbe der Text-Group-Box.</td></tr>
       </tbody>
     </table>
   </section>
@@ -185,12 +185,12 @@
     <h3 class="sg-sub-heading sg-section-h3">Portal Header</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-portal-header</td><td>color-darkblue</td><td>Header-Grundfläche.</td></tr>
-      <tr><td>surface-portal-header-tab</td><td>color-darkblue</td><td>Fläche nicht aktiver Header-Tabs.</td></tr>
+      <tr><td>surface-portal-header-tab</td><td>color-midblue</td><td>Fläche nicht aktiver Header-Tabs.</td></tr>
       <tr><td>surface-portal-header-tab-active</td><td>color-light-grey</td><td>Fläche aktiver Header-Tabs.</td></tr>
       <tr><td>surface-portal-header-menu-panel</td><td>surface-menu-panel-portal</td><td>Alias auf Portal-Menü-Panel-Fläche aus Interactive Elements.</td></tr>
       <tr><td>surface-portal-header-menu-trigger</td><td>surface-control-default</td><td>Alias auf Standard-Control-Fläche aus Interactive Elements.</td></tr>
       <tr><td>text-portal-header-brand</td><td>color-font-light</td><td>Textfarbe der Brand.</td></tr>
-      <tr><td>font-size-portal-header-brand</td><td>calc(font-size-brand * 1.1)</td><td>Schriftgröße der Brand im Portal Header (10% größer als Standard-Brand).</td></tr>
+      <tr><td>font-size-portal-header-brand</td><td>calc(var(--font-size-brand) * 1.1)</td><td>Schriftgröße der Brand im Portal Header (10% größer als Standard-Brand).</td></tr>
       <tr><td>text-portal-header-tab</td><td>color-font-light</td><td>Textfarbe nicht aktiver Header-Tabs.</td></tr>
       <tr><td>text-portal-header-tab-active</td><td>color-font-dark</td><td>Textfarbe aktiver Header-Tabs.</td></tr>
       <tr><td>text-portal-header-menu-link</td><td>text-menu-link-portal</td><td>Alias auf Portal-Menü-Link-Textfarbe.</td></tr>