diff --git a/scripts/check_pattern_inset_guardrails.sh b/scripts/check_pattern_inset_guardrails.sh
new file mode 100755
index 0000000..0a0ffe8
--- /dev/null
+++ b/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"
diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html
index 99c24d5..0e86ce4 100644
--- a/semantic-tokens-patterns.html
+++ b/semantic-tokens-patterns.html
@@ -22,6 +22,7 @@
| font-size-portal-header-brand | calc(var(--font-size-brand) * 1.1) | Schriftgröße der Brand im Portal Header (10% größer als Standard-Brand). |
| text-portal-header-tab | color-font-light | Textfarbe nicht aktiver Header-Tabs. |
| text-portal-header-tab-active | color-font-dark | Textfarbe aktiver Header-Tabs. |
+ | layout-page-content-inset-inline | card-segment-padding-horizontal | Gemeinsamer horizontaler Content-Inset für Portal Header, Options Row und Card-Listen-Drawer-Content (Single Source of Spacing Truth auf Pattern-Ebene). |
Options Row
diff --git a/styleguide.css b/styleguide.css
index 4721b55..074f624 100644
--- a/styleguide.css
+++ b/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 > * + * {