From bf7a6675fbc34e8e51e0ba2ecc03fefecc3c106f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Thu, 28 May 2026 08:51:04 +0200 Subject: [PATCH] Add delete confirmation overlay pattern with tokens and docs --- index.html | 1 + patterns/delete-confirmation-overlay.html | 78 ++++++++++++++++++++++ semantic-tokens-patterns.html | 14 ++++ styleguide.css | 1 + styles/01-foundations.css | 10 +++ styles/27-patterns-delete-confirmation.css | 66 ++++++++++++++++++ 6 files changed, 170 insertions(+) create mode 100644 patterns/delete-confirmation-overlay.html create mode 100644 styles/27-patterns-delete-confirmation.css diff --git a/index.html b/index.html index 7f71435..729dae8 100644 --- a/index.html +++ b/index.html @@ -49,6 +49,7 @@
  • Formular mit Abschnitten
  • Multiselektions-Pulldown
  • Text Layouts
    • +
  • Delete Confirmation Overlay
    • diff --git a/patterns/delete-confirmation-overlay.html b/patterns/delete-confirmation-overlay.html new file mode 100644 index 0000000..caa1ecf --- /dev/null +++ b/patterns/delete-confirmation-overlay.html @@ -0,0 +1,78 @@ + + + + + + Styleguide – Pattern Delete Confirmation Overlay + + + + +

    Pattern – Delete Confirmation Overlay

    + +
    +

    Pattern: Löschbestätigung mit Overlay

    + +
    +
    +
    +
    Alcon Inc.
    +
    +
    +

    Dieses Objekt wird als Ziel für die Löschbestätigung abgedunkelt, solange das schwebende Fenster sichtbar ist.

    +
    +
    + + +
    +
    + + + + + diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html index 8f2e2a2..5ea50a9 100644 --- a/semantic-tokens-patterns.html +++ b/semantic-tokens-patterns.html @@ -91,6 +91,20 @@
    Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
    layout-multiselect-pulldown-label-column-width-fallbackmax-contentFallback-Breite der gemeinsamen Labelspalte im Panel, bis die längste Labelbreite per Pattern-Logik ermittelt wurde.
    + +

    Delete Confirmation Overlay

    + + + + + + + + + + + +
    Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
    surface-delete-confirmation-overlaycolor-light-greyHintergrundfläche des schwebenden Bestätigungsfensters.
    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-max-width28remMaximalbreite des schwebenden Bestätigungsfensters.
    layout-delete-confirmation-overlay-offset-block-startspacing-largeAbstand des Overlays von der oberen Kante des Zielobjekts.
    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-label-widthdimension-input-label-widthLabel-Spaltenbreite der einzeiligen Bestätigungseingabe.
    layout-delete-confirmation-target-dim-factor0.6Helligkeitsfaktor zur Abdunkelung des zu löschenden Objekts.
    layer-delete-confirmation-overlay50Z-Index-Layer des schwebenden Bestätigungsfensters.
    diff --git a/styleguide.css b/styleguide.css index a5bc7f3..e4f98be 100644 --- a/styleguide.css +++ b/styleguide.css @@ -9,6 +9,7 @@ @import "./styles/24-patterns-navigation-card.css"; @import "./styles/25-patterns-form-sections.css"; @import "./styles/26-patterns-vsf-list-card.css"; +@import "./styles/27-patterns-delete-confirmation.css"; @import "./styles/30-layouts-card-list-page.css"; @import "./styles/31-patterns-text-layouts.css"; @import "./styles/32-patterns-card-group-keyboard-nav.css"; diff --git a/styles/01-foundations.css b/styles/01-foundations.css index 0a6c099..8eac912 100644 --- a/styles/01-foundations.css +++ b/styles/01-foundations.css @@ -197,6 +197,16 @@ --text-align-text-layout-column-left: left; --text-align-text-layout-column-center: center; --text-align-text-layout-column-right: right; + --surface-delete-confirmation-overlay: var(--color-light-grey); + --text-delete-confirmation-overlay: var(--color-font-dark); + --layout-delete-confirmation-target-max-width: 35rem; + --layout-delete-confirmation-overlay-max-width: 28rem; + --layout-delete-confirmation-overlay-offset-block-start: var(--spacing-large); + --layout-delete-confirmation-content-gap: var(--spacing-small); + --layout-delete-confirmation-actions-gap: var(--spacing-small); + --layout-delete-confirmation-label-width: var(--dimension-input-label-width); + --layout-delete-confirmation-target-dim-factor: 0.6; + --layer-delete-confirmation-overlay: 50; /* Typography */ --font-family-base: "Open Sans", sans-serif; diff --git a/styles/27-patterns-delete-confirmation.css b/styles/27-patterns-delete-confirmation.css new file mode 100644 index 0000000..4b2bbd5 --- /dev/null +++ b/styles/27-patterns-delete-confirmation.css @@ -0,0 +1,66 @@ +/* ========================================================= */ +/* Patterns: Delete Confirmation Overlay */ +/* ========================================================= */ + +.sg-delete-confirmation-pattern { + width: 100%; + max-width: var(--layout-delete-confirmation-target-max-width); +} + +.sg-delete-confirmation-pattern__stage { + position: relative; +} + +.sg-delete-confirmation-pattern__target { + filter: brightness(var(--layout-delete-confirmation-target-dim-factor)); +} + +.sg-delete-confirmation-pattern__floating-card { + position: absolute; + top: var(--layout-delete-confirmation-overlay-offset-block-start); + left: 50%; + transform: translateX(-50%); + width: min(100%, var(--layout-delete-confirmation-overlay-max-width)); + z-index: var(--layer-delete-confirmation-overlay); + box-shadow: var(--shadow-overlay); +} + +.sg-delete-confirmation-pattern__body { + display: flex; + flex-direction: column; + gap: var(--layout-delete-confirmation-content-gap); + background: var(--surface-delete-confirmation-overlay); +} + +.sg-delete-confirmation-pattern__text { + margin: 0; + color: var(--text-delete-confirmation-overlay); +} + +.sg-delete-confirmation-pattern__code { + font-weight: var(--font-weight-semibold); +} + +.sg-delete-confirmation-pattern__input-row { + margin: 0; +} + +.sg-delete-confirmation-pattern__input-row .sg-label { + min-width: var(--layout-delete-confirmation-label-width); +} + +.sg-delete-confirmation-pattern__actions { + display: flex; + justify-content: flex-end; + gap: var(--layout-delete-confirmation-actions-gap); +} + +@media (max-width: 48rem) { + .sg-delete-confirmation-pattern__floating-card { + width: 100%; + } + + .sg-delete-confirmation-pattern__actions { + flex-wrap: wrap; + } +}