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-width | 450px | Mindestbreite der Group Card im Pattern Object Group Card. |
| object-group-card-max-width | 650px | Maximale Breite der Group Card im Pattern Object Group Card. |
| object-group-card-height | 700px | Fixe Desktop-Höhe der Group Card im Pattern Object Group Card. |
- | delete-confirmation-overlay-offset-block-start | 10% | Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße. |
- | delete-confirmation-overlay-max-height | 100% minus 2 × offset-block-start | Maximalhöhe des Overlays relativ zur Parent-Höhe; bei längeren Inhalten scrollt der bestehende Inhaltsbereich. |
+ | delete-confirmation-target-max-width | 35rem | Maximalbreite der Ziel-Card im Overlay-Card-Pattern. |
+ | delete-confirmation-overlay-width-factor | 0.8 | Breitenfaktor des Overlay-Fensters relativ zur Ziel-Card. |
+ | delete-confirmation-overlay-offset-block-start | 10% | Vertikaler Startabstand des Overlay-Fensters relativ zur Parent-Höhe. |
+ | delete-confirmation-target-dim-opacity | 0.5 | Deckkraft der Abdunklung des Zielobjekts bei geöffnetem Overlay. |
+ | layer-delete-confirmation-overlay | 50 | Layer-Stufe des Overlay-Fensters. |
| notifications-card-min-width | 445px | Mindestbreite 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-width | 15.3rem | Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich. |
| layer-pulldown-panel | 40 | Layer-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-overlay | color-light-grey | Hintergrundfläche des schwebenden Bestätigungsfensters. |
| surface-delete-confirmation-target-dim-overlay | color-black | Overlay-Farbe zur Ausgrauung des Zielobjekts hinter dem Bestätigungsfenster. |
| text-delete-confirmation-overlay | color-font-dark | Textfarbe im Bestätigungsfenster. |
- | layout-delete-confirmation-target-max-width | 35rem | Maximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo. |
- | layout-delete-confirmation-overlay-width-factor | 0.8 | Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts (80%). |
- | layout-delete-confirmation-overlay-offset-block-start | 10% | Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße. |
+ | layout-delete-confirmation-target-max-width | dimension-delete-confirmation-target-max-width | Maximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo. |
+ | layout-delete-confirmation-overlay-width-factor | dimension-delete-confirmation-overlay-width-factor | Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts. |
+ | layout-delete-confirmation-overlay-offset-block-start | dimension-delete-confirmation-overlay-offset-block-start | Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Parent-Höhe. |
| layout-delete-confirmation-overlay-max-height | 100% minus 2 × offset-block-start | Maximalhöhe des Overlays relativ zur Parent-Höhe; bei längeren Inhalten scrollt der bestehende Inhaltsbereich. |
| layout-delete-confirmation-content-gap | spacing-small | Vertikaler Abstand zwischen den Inhaltsblöcken im Overlay. |
| layout-delete-confirmation-actions-gap | spacing-small | Horizontaler Abstand zwischen Abbrechen- und Löschen-Button. |
| layout-delete-confirmation-actions-offset-block-start | spacing-large | Zusätzlicher vertikaler Abstand zwischen Bestätigungs-Eingabefeld und Actions-Zeile. |
| layout-delete-confirmation-label-width | dimension-input-label-width | Label-Spaltenbreite der einzeiligen Bestätigungseingabe. |
- | layout-delete-confirmation-target-dim-opacity | 0.5 | Deckkraft der grauen Überlagerung auf dem zu löschenden Objekt (50% ausgegraut). |
- | layer-delete-confirmation-overlay | 50 | Z-Index-Layer des schwebenden Bestätigungsfensters. |
+ | layout-delete-confirmation-target-dim-opacity | opacity-delete-confirmation-target-dim | Deckkraft der grauen Überlagerung auf dem zu löschenden Objekt. |
+ | layer-delete-confirmation-overlay | dimension-layer-delete-confirmation-overlay | Z-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;