Fix pattern content inset drift with shared token and guardrail

scripts/check_pattern_inset_guardrails.sh

@@ -0,0 +1,33 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+CSS_FILE="$ROOT_DIR/styleguide.css"
+
+selectors=(
+  "sg-portal-header"
+  "sg-options-row"
+  "sg-card-list-page-drawer__header"
+  "sg-card-list-page-drawer__content"
+)
+
+for selector in "${selectors[@]}"; do
+  block="$(awk -v selector=".$selector" '
+    $0 ~ selector"[[:space:]]*\\{" {in_block=1}
+    in_block {print}
+    in_block && /}/ {exit}
+  ' "$CSS_FILE")"
+
+  if [[ -z "$block" ]]; then
+    echo "ERROR: selector .$selector not found in styleguide.css"
+    exit 1
+  fi
+
+  if echo "$block" | rg -n "(padding|padding-inline|padding-left|padding-right|inset|inset-inline)([^\n;]*)([0-9]+px)" >/dev/null; then
+    echo "ERROR: hardcoded px inset/padding value found in .$selector"
+    echo "$block"
+    exit 1
+  fi
+done
+
+echo "OK: no hardcoded px inset values in guarded pattern selectors"

semantic-tokens-patterns.html

@@ -22,6 +22,7 @@
       <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>layout-page-content-inset-inline</td><td>card-segment-padding-horizontal</td><td>Gemeinsamer horizontaler Content-Inset für Portal Header, Options Row und Card-Listen-Drawer-Content (Single Source of Spacing Truth auf Pattern-Ebene).</td></tr>
     </tbody></table>
 
     <h3 class="sg-sub-heading sg-section-h3">Options Row</h3>

styleguide.css

@@ -139,6 +139,7 @@
   --font-size-portal-header-brand: calc(var(--font-size-brand) * 1.1);
   --text-portal-header-tab: var(--color-font-light);
   --text-portal-header-tab-active: var(--color-font-dark);
+  --layout-page-content-inset-inline: var(--card-segment-padding-horizontal);
   --surface-options-row: var(--color-light-grey);
   --surface-options-row-control: var(--surface-control-default);
   --surface-options-row-control-selected: var(--surface-control-active);
@@ -1530,7 +1531,7 @@ section + section {
   gap: var(--spacing-large);
   padding:
     var(--card-segment-padding-vertical)
-    var(--card-segment-padding-horizontal);
+    var(--layout-page-content-inset-inline);
   border: var(--border-none);
   border-radius: var(--radius-card);
   box-shadow: var(--shadow-none);
@@ -1608,7 +1609,7 @@ section + section {
   gap: var(--layout-options-row-main-gap);
   padding:
     var(--card-segment-padding-vertical)
-    var(--card-segment-padding-horizontal);
+    var(--layout-page-content-inset-inline);
   border: var(--border-none);
   border-radius: var(--radius-card);
   box-shadow: var(--shadow-none);
@@ -2040,7 +2041,7 @@ section + section {
   gap: var(--spacing-small);
   padding:
     var(--card-segment-padding-vertical)
-    var(--card-segment-padding-horizontal);
+    var(--layout-page-content-inset-inline);
 }
 
 .sg-card-list-page-drawer__title {
@@ -2054,9 +2055,9 @@ section + section {
   gap: var(--spacing-large);
   padding:
     var(--card-segment-padding-vertical)
-    var(--spacing-small)
+    var(--layout-page-content-inset-inline)
     var(--card-segment-padding-vertical)
-    var(--spacing-small);
+    var(--layout-page-content-inset-inline);
 }
 
 .sg-card-list-page > * + * {