From 3f4ec3889d2b61ddf72404ebc1c77040b5fae95f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Thu, 3 Sep 2026 17:52:43 +0200 Subject: [PATCH] Align overlay card tokens with foundation cascade --- foundations.html | 7 +++++-- semantic-tokens-patterns.html | 10 +++++----- styles/01-foundations.css | 15 ++++++++++----- 3 files changed, 20 insertions(+), 12 deletions(-) diff --git a/foundations.html b/foundations.html index d8425d7..b13ab10 100644 --- a/foundations.html +++ b/foundations.html @@ -165,8 +165,11 @@ object-group-card-min-width450pxMindestbreite der Group Card im Pattern Object Group Card. object-group-card-max-width650pxMaximale Breite der Group Card im Pattern Object Group Card. object-group-card-height700pxFixe Desktop-Höhe der Group Card im Pattern Object Group Card. - delete-confirmation-overlay-offset-block-start10%Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße. - delete-confirmation-overlay-max-height100% minus 2 × offset-block-startMaximalhöhe des Overlays relativ zur Parent-Höhe; bei längeren Inhalten scrollt der bestehende Inhaltsbereich. + delete-confirmation-target-max-width35remMaximalbreite der Ziel-Card im Overlay-Card-Pattern. + delete-confirmation-overlay-width-factor0.8Breitenfaktor des Overlay-Fensters relativ zur Ziel-Card. + delete-confirmation-overlay-offset-block-start10%Vertikaler Startabstand des Overlay-Fensters relativ zur Parent-Höhe. + delete-confirmation-target-dim-opacity0.5Deckkraft der Abdunklung des Zielobjekts bei geöffnetem Overlay. + layer-delete-confirmation-overlay50Layer-Stufe des Overlay-Fensters. notifications-card-min-width445pxMindestbreite der Notification Card im Pattern Notifications; 50px größer als die Object Card und Grundlage für Flex-Basis und Mindestbreite des Patterns. search-field-width15.3remFixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich. layer-pulldown-panel40Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen. diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html index fe67e08..56e8f80 100644 --- a/semantic-tokens-patterns.html +++ b/semantic-tokens-patterns.html @@ -131,16 +131,16 @@ surface-delete-confirmation-overlaycolor-light-greyHintergrundfläche des schwebenden Bestätigungsfensters. surface-delete-confirmation-target-dim-overlaycolor-blackOverlay-Farbe zur Ausgrauung des Zielobjekts hinter dem Bestätigungsfenster. text-delete-confirmation-overlaycolor-font-darkTextfarbe im Bestätigungsfenster. - layout-delete-confirmation-target-max-width35remMaximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo. - layout-delete-confirmation-overlay-width-factor0.8Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts (80%). - layout-delete-confirmation-overlay-offset-block-start10%Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße. + layout-delete-confirmation-target-max-widthdimension-delete-confirmation-target-max-widthMaximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo. + layout-delete-confirmation-overlay-width-factordimension-delete-confirmation-overlay-width-factorBreitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts. + layout-delete-confirmation-overlay-offset-block-startdimension-delete-confirmation-overlay-offset-block-startVertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Parent-Höhe. layout-delete-confirmation-overlay-max-height100% minus 2 × offset-block-startMaximalhöhe des Overlays relativ zur Parent-Höhe; bei längeren Inhalten scrollt der bestehende Inhaltsbereich. layout-delete-confirmation-content-gapspacing-smallVertikaler Abstand zwischen den Inhaltsblöcken im Overlay. layout-delete-confirmation-actions-gapspacing-smallHorizontaler Abstand zwischen Abbrechen- und Löschen-Button. layout-delete-confirmation-actions-offset-block-startspacing-largeZusätzlicher vertikaler Abstand zwischen Bestätigungs-Eingabefeld und Actions-Zeile. layout-delete-confirmation-label-widthdimension-input-label-widthLabel-Spaltenbreite der einzeiligen Bestätigungseingabe. - layout-delete-confirmation-target-dim-opacity0.5Deckkraft der grauen Überlagerung auf dem zu löschenden Objekt (50% ausgegraut). - layer-delete-confirmation-overlay50Z-Index-Layer des schwebenden Bestätigungsfensters. + layout-delete-confirmation-target-dim-opacityopacity-delete-confirmation-target-dimDeckkraft der grauen Überlagerung auf dem zu löschenden Objekt. + layer-delete-confirmation-overlaydimension-layer-delete-confirmation-overlayZ-Index-Layer des schwebenden Bestätigungsfensters. diff --git a/styles/01-foundations.css b/styles/01-foundations.css index bb1d167..a17a3b9 100644 --- a/styles/01-foundations.css +++ b/styles/01-foundations.css @@ -228,16 +228,16 @@ --surface-delete-confirmation-overlay: var(--color-light-grey); --surface-delete-confirmation-target-dim-overlay: var(--color-black); --text-delete-confirmation-overlay: var(--color-font-dark); - --layout-delete-confirmation-target-max-width: 35rem; - --layout-delete-confirmation-overlay-width-factor: 0.8; - --layout-delete-confirmation-overlay-offset-block-start: 10%; + --layout-delete-confirmation-target-max-width: var(--dimension-delete-confirmation-target-max-width); + --layout-delete-confirmation-overlay-width-factor: var(--dimension-delete-confirmation-overlay-width-factor); + --layout-delete-confirmation-overlay-offset-block-start: var(--dimension-delete-confirmation-overlay-offset-block-start); --layout-delete-confirmation-overlay-max-height: calc(100% - var(--layout-delete-confirmation-overlay-offset-block-start) - var(--layout-delete-confirmation-overlay-offset-block-start)); --layout-delete-confirmation-content-gap: var(--spacing-small); --layout-delete-confirmation-actions-gap: var(--spacing-small); --layout-delete-confirmation-actions-offset-block-start: var(--spacing-large); --layout-delete-confirmation-label-width: var(--dimension-input-label-width); - --layout-delete-confirmation-target-dim-opacity: 0.5; - --layer-delete-confirmation-overlay: 50; + --layout-delete-confirmation-target-dim-opacity: var(--opacity-delete-confirmation-target-dim); + --layer-delete-confirmation-overlay: var(--dimension-layer-delete-confirmation-overlay); /* Typography */ --font-family-base: "Open Sans", sans-serif; @@ -291,6 +291,11 @@ --dimension-object-group-card-min-width: 450px; --dimension-object-group-card-max-width: 650px; --dimension-object-group-card-height: 700px; + --dimension-delete-confirmation-target-max-width: 35rem; + --dimension-delete-confirmation-overlay-width-factor: 0.8; + --dimension-delete-confirmation-overlay-offset-block-start: 10%; + --opacity-delete-confirmation-target-dim: 0.5; + --dimension-layer-delete-confirmation-overlay: 50; --dimension-notification-card-width: 50%; --dimension-user-notification-card-width: 70%; --dimension-input-label-width: 9rem;