Align overlay card tokens with foundation cascade

foundations.html

@@ -165,8 +165,11 @@
         <tr><td>object-group-card-min-width</td><td>450px</td><td>Mindestbreite der Group Card im Pattern Object Group Card.</td></tr>
         <tr><td>object-group-card-max-width</td><td>650px</td><td>Maximale Breite der Group Card im Pattern Object Group Card.</td></tr>
         <tr><td>object-group-card-height</td><td>700px</td><td>Fixe Desktop-Höhe der Group Card im Pattern Object Group Card.</td></tr>
-        <tr><td>delete-confirmation-overlay-offset-block-start</td><td>10%</td><td>Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße.</td></tr>
+        <tr><td>delete-confirmation-target-max-width</td><td>35rem</td><td>Maximalbreite der Ziel-Card im Overlay-Card-Pattern.</td></tr>
-        <tr><td>delete-confirmation-overlay-max-height</td><td>100% minus 2 × offset-block-start</td><td>Maximalhöhe des Overlays relativ zur Parent-Höhe; bei längeren Inhalten scrollt der bestehende Inhaltsbereich.</td></tr>
+        <tr><td>delete-confirmation-overlay-width-factor</td><td>0.8</td><td>Breitenfaktor des Overlay-Fensters relativ zur Ziel-Card.</td></tr>
+        <tr><td>delete-confirmation-overlay-offset-block-start</td><td>10%</td><td>Vertikaler Startabstand des Overlay-Fensters relativ zur Parent-Höhe.</td></tr>
+        <tr><td>delete-confirmation-target-dim-opacity</td><td>0.5</td><td>Deckkraft der Abdunklung des Zielobjekts bei geöffnetem Overlay.</td></tr>
+        <tr><td>layer-delete-confirmation-overlay</td><td>50</td><td>Layer-Stufe des Overlay-Fensters.</td></tr>
         <tr><td>notifications-card-min-width</td><td>445px</td><td>Mindestbreite der Notification Card im Pattern Notifications; 50px größer als die Object Card und Grundlage für Flex-Basis und Mindestbreite des Patterns.</td></tr>
         <tr><td>search-field-width</td><td>15.3rem</td><td>Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich.</td></tr>
         <tr><td>layer-pulldown-panel</td><td>40</td><td>Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen.</td></tr>

semantic-tokens-patterns.html

@@ -131,16 +131,16 @@
       <tr><td>surface-delete-confirmation-overlay</td><td>color-light-grey</td><td>Hintergrundfläche des schwebenden Bestätigungsfensters.</td></tr>
       <tr><td>surface-delete-confirmation-target-dim-overlay</td><td>color-black</td><td>Overlay-Farbe zur Ausgrauung des Zielobjekts hinter dem Bestätigungsfenster.</td></tr>
       <tr><td>text-delete-confirmation-overlay</td><td>color-font-dark</td><td>Textfarbe im Bestätigungsfenster.</td></tr>
-      <tr><td>layout-delete-confirmation-target-max-width</td><td>35rem</td><td>Maximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo.</td></tr>
+      <tr><td>layout-delete-confirmation-target-max-width</td><td>dimension-delete-confirmation-target-max-width</td><td>Maximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo.</td></tr>
-      <tr><td>layout-delete-confirmation-overlay-width-factor</td><td>0.8</td><td>Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts (80%).</td></tr>
+      <tr><td>layout-delete-confirmation-overlay-width-factor</td><td>dimension-delete-confirmation-overlay-width-factor</td><td>Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts.</td></tr>
-      <tr><td>layout-delete-confirmation-overlay-offset-block-start</td><td>10%</td><td>Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße.</td></tr>
+      <tr><td>layout-delete-confirmation-overlay-offset-block-start</td><td>dimension-delete-confirmation-overlay-offset-block-start</td><td>Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Parent-Höhe.</td></tr>
       <tr><td>layout-delete-confirmation-overlay-max-height</td><td>100% minus 2 × offset-block-start</td><td>Maximalhöhe des Overlays relativ zur Parent-Höhe; bei längeren Inhalten scrollt der bestehende Inhaltsbereich.</td></tr>
       <tr><td>layout-delete-confirmation-content-gap</td><td>spacing-small</td><td>Vertikaler Abstand zwischen den Inhaltsblöcken im Overlay.</td></tr>
       <tr><td>layout-delete-confirmation-actions-gap</td><td>spacing-small</td><td>Horizontaler Abstand zwischen Abbrechen- und Löschen-Button.</td></tr>
       <tr><td>layout-delete-confirmation-actions-offset-block-start</td><td>spacing-large</td><td>Zusätzlicher vertikaler Abstand zwischen Bestätigungs-Eingabefeld und Actions-Zeile.</td></tr>
       <tr><td>layout-delete-confirmation-label-width</td><td>dimension-input-label-width</td><td>Label-Spaltenbreite der einzeiligen Bestätigungseingabe.</td></tr>
-      <tr><td>layout-delete-confirmation-target-dim-opacity</td><td>0.5</td><td>Deckkraft der grauen Überlagerung auf dem zu löschenden Objekt (50% ausgegraut).</td></tr>
+      <tr><td>layout-delete-confirmation-target-dim-opacity</td><td>opacity-delete-confirmation-target-dim</td><td>Deckkraft der grauen Überlagerung auf dem zu löschenden Objekt.</td></tr>
-      <tr><td>layer-delete-confirmation-overlay</td><td>50</td><td>Z-Index-Layer des schwebenden Bestätigungsfensters.</td></tr>
+      <tr><td>layer-delete-confirmation-overlay</td><td>dimension-layer-delete-confirmation-overlay</td><td>Z-Index-Layer des schwebenden Bestätigungsfensters.</td></tr>
     </tbody></table>
   </section>
 

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-target-max-width: var(--dimension-delete-confirmation-target-max-width);
-  --layout-delete-confirmation-overlay-width-factor: 0.8;
+  --layout-delete-confirmation-overlay-width-factor: var(--dimension-delete-confirmation-overlay-width-factor);
-  --layout-delete-confirmation-overlay-offset-block-start: 10%;
+  --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;
+  --layout-delete-confirmation-target-dim-opacity: var(--opacity-delete-confirmation-target-dim);
-  --layer-delete-confirmation-overlay: 50;
+  --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;