From 06de66f50a243c5939ca89f1dda9554873276d53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Thu, 3 Sep 2026 17:57:49 +0200 Subject: [PATCH] Sync styleguide 2026.05.18.1 --- docs/styleguide/foundations.html | 7 +++-- .../patterns/delete-confirmation-overlay.html | 7 ----- docs/styleguide/semantic-tokens-patterns.html | 12 ++++----- docs/styleguide/styles/01-foundations.css | 17 +++++++----- .../27-patterns-delete-confirmation.css | 7 ++--- .../33-layouts-vsf-list-detailseite.css | 2 +- public/assets/styleguide.upstream.css | 26 ++++++++++++------- public/assets/styleguide.upstream.meta.json | 4 +-- public/assets/styles.css | 26 ++++++++++++------- 9 files changed, 61 insertions(+), 47 deletions(-) diff --git a/docs/styleguide/foundations.html b/docs/styleguide/foundations.html index 679126d..ace804a 100644 --- a/docs/styleguide/foundations.html +++ b/docs/styleguide/foundations.html @@ -166,8 +166,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-heightcalc(100vh - 10vh)Maximalhöhe des Overlays relativ zum Viewport; danach scrollt der Inhalt innerhalb des Overlays. + 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/docs/styleguide/patterns/delete-confirmation-overlay.html b/docs/styleguide/patterns/delete-confirmation-overlay.html index 4e96d0d..7c3189d 100644 --- a/docs/styleguide/patterns/delete-confirmation-overlay.html +++ b/docs/styleguide/patterns/delete-confirmation-overlay.html @@ -223,12 +223,6 @@ ); let draftListIds = new Set(committedListIds); let resetAddToListDraftState = () => {}; - const updateFloatingCardHeight = (dialog) => { - const stageHeight = stage.getBoundingClientRect().height; - const floatingCardHeight = Math.max(0, Math.round(stageHeight * 0.9)); - dialog.style.setProperty('--layout-delete-confirmation-overlay-height', `${floatingCardHeight}px`); - }; - const closeStageDialogs = ({ resetAddToListDraft = false } = {}) => { stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => { dialog.hidden = true; @@ -389,7 +383,6 @@ closeStageDialogs({ resetAddToListDraft: target === 'add-to-list' }); dialog.hidden = false; - updateFloatingCardHeight(dialog); stage.dataset.dialogOpen = 'true'; const menuWrap = link.closest('.sg-sandwich-menu-wrap'); diff --git a/docs/styleguide/semantic-tokens-patterns.html b/docs/styleguide/semantic-tokens-patterns.html index 1055d13..56e8f80 100644 --- a/docs/styleguide/semantic-tokens-patterns.html +++ b/docs/styleguide/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-overlay-max-heightcalc(100vh - 10vh)Maximalhöhe des Overlays relativ zum Viewport; danach scrollt der Inhalt innerhalb des Overlays. + 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/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css index 8c0ff27..9fcb76a 100644 --- a/docs/styleguide/styles/01-foundations.css +++ b/docs/styleguide/styles/01-foundations.css @@ -229,16 +229,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-overlay-max-height: calc(100vh - 10vh); + --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; @@ -292,6 +292,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; diff --git a/docs/styleguide/styles/27-patterns-delete-confirmation.css b/docs/styleguide/styles/27-patterns-delete-confirmation.css index dd319df..f44caac 100644 --- a/docs/styleguide/styles/27-patterns-delete-confirmation.css +++ b/docs/styleguide/styles/27-patterns-delete-confirmation.css @@ -42,13 +42,14 @@ .sg-delete-confirmation-pattern__floating-card { position: absolute; - top: 50%; + top: var(--layout-delete-confirmation-overlay-offset-block-start); left: 50%; - transform: translate(-50%, -50%); + transform: translateX(-50%); width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor)); box-sizing: border-box; max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor)); - height: var(--layout-delete-confirmation-overlay-height, auto); + height: auto; + max-height: var(--layout-delete-confirmation-overlay-max-height); overflow: hidden; z-index: var(--layer-delete-confirmation-overlay); box-shadow: var(--shadow-overlay); diff --git a/docs/styleguide/styles/33-layouts-vsf-list-detailseite.css b/docs/styleguide/styles/33-layouts-vsf-list-detailseite.css index f1f6704..2c8080d 100644 --- a/docs/styleguide/styles/33-layouts-vsf-list-detailseite.css +++ b/docs/styleguide/styles/33-layouts-vsf-list-detailseite.css @@ -48,10 +48,10 @@ .sg-vsf-list-detail-page__meldungen-overlay-pattern { max-width: 100%; + --layout-delete-confirmation-overlay-offset-block-start: calc(var(--spacing-large) * 5); } .sg-vsf-list-detail-page__meldungen-overlay-pattern .sg-delete-confirmation-pattern__floating-card { - top: calc(var(--spacing-large) * 5); transform: translateX(-50%); } diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index f942bad..890c4cd 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -229,16 +229,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-overlay-max-height: calc(100vh - 10vh); + --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; @@ -292,6 +292,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; @@ -2969,13 +2974,14 @@ section + section { .sg-delete-confirmation-pattern__floating-card { position: absolute; - top: 50%; + top: var(--layout-delete-confirmation-overlay-offset-block-start); left: 50%; - transform: translate(-50%, -50%); + transform: translateX(-50%); width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor)); box-sizing: border-box; max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor)); - height: var(--layout-delete-confirmation-overlay-height, auto); + height: auto; + max-height: var(--layout-delete-confirmation-overlay-max-height); overflow: hidden; z-index: var(--layer-delete-confirmation-overlay); box-shadow: var(--shadow-overlay); @@ -3646,10 +3652,10 @@ main { .sg-vsf-list-detail-page__meldungen-overlay-pattern { max-width: 100%; + --layout-delete-confirmation-overlay-offset-block-start: calc(var(--spacing-large) * 5); } .sg-vsf-list-detail-page__meldungen-overlay-pattern .sg-delete-confirmation-pattern__floating-card { - top: calc(var(--spacing-large) * 5); transform: translateX(-50%); } diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index 42031c7..9b5e139 100644 --- a/public/assets/styleguide.upstream.meta.json +++ b/public/assets/styleguide.upstream.meta.json @@ -1,7 +1,7 @@ { "styleguideVersion": "2026.05.18.1", - "styleguideCommit": "ed1c450", - "syncedAtUtc": "2026-08-31T10:57:00Z", + "styleguideCommit": "3f4ec38", + "syncedAtUtc": "2026-09-03T15:57:49Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index f942bad..890c4cd 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -229,16 +229,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-overlay-max-height: calc(100vh - 10vh); + --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; @@ -292,6 +292,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; @@ -2969,13 +2974,14 @@ section + section { .sg-delete-confirmation-pattern__floating-card { position: absolute; - top: 50%; + top: var(--layout-delete-confirmation-overlay-offset-block-start); left: 50%; - transform: translate(-50%, -50%); + transform: translateX(-50%); width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor)); box-sizing: border-box; max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor)); - height: var(--layout-delete-confirmation-overlay-height, auto); + height: auto; + max-height: var(--layout-delete-confirmation-overlay-max-height); overflow: hidden; z-index: var(--layer-delete-confirmation-overlay); box-shadow: var(--shadow-overlay); @@ -3646,10 +3652,10 @@ main { .sg-vsf-list-detail-page__meldungen-overlay-pattern { max-width: 100%; + --layout-delete-confirmation-overlay-offset-block-start: calc(var(--spacing-large) * 5); } .sg-vsf-list-detail-page__meldungen-overlay-pattern .sg-delete-confirmation-pattern__floating-card { - top: calc(var(--spacing-large) * 5); transform: translateX(-50%); }