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-brandcalc(var(--font-size-brand) * 1.1)Schriftgröße der Brand im Portal Header (10% größer als Standard-Brand). text-portal-header-tabcolor-font-lightTextfarbe nicht aktiver Header-Tabs. text-portal-header-tab-activecolor-font-darkTextfarbe aktiver Header-Tabs. + layout-page-content-inset-inlinecard-segment-padding-horizontalGemeinsamer 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 > * + * {