From ccf215accb5fa23cc64dfebfe6b47185f880f86f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 28 May 2026 08:58:18 +0200
Subject: [PATCH] Set delete target dim overlay color to black

---
 foundations.html                           | 1 +
 semantic-tokens-patterns.html              | 1 +
 styles/01-foundations.css                  | 2 ++
 styles/27-patterns-delete-confirmation.css | 2 +-
 4 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/foundations.html b/foundations.html
index 148d7f4..f1c5bc2 100644
--- a/foundations.html
+++ b/foundations.html
@@ -27,6 +27,7 @@
         <tr><td>light-grey</td><td>#E2E5E9</td><td>Card-Flächen, Card-Bodies, Formularflächen, Optionszeilen, inaktive Buttons, Sandwich-Menü-Flächen und Chart-/Score-Hintergründe.</td></tr>
         <tr><td>medium-grey</td><td>#D4D6DB</td><td>Aktive Standardbuttons, geöffnete Pulldown-Flächen, Hilfetext-Flächen, Fragezeichen-Icons, Referenzwerte in Charts sowie Entfernen-Button in Eingabefeldern.</td></tr>
         <tr><td>dark-grey</td><td>#7B879D</td><td>Ausgewählte Tab-Buttons als Fläche sowie Schriftfarbe für deaktivierte oder zurückgenommene Interaktionselemente.</td></tr>
+        <tr><td>black</td><td>#000000</td><td>Neutrale Vollton-Overlay-Farbe für starke visuelle Deaktivierung von Hintergrundobjekten.</td></tr>
         <tr><td>white</td><td>#FFFFFF</td><td>Standardfläche von Buttons, Eingabefeldern, Pulldown-Triggern, Checkboxen, Radios, Toggle-Tracks und Card-Trennern.</td></tr>
         <tr><td>signal-green</td><td>#009101</td><td>Positive Score-Balken und positive Chart-Werte.</td></tr>
         <tr><td>signal-yellow</td><td>#9C7A00</td><td>Neutrale Score-Balken, neutrale Chart-Werte und Warnwerte in Tabellen.</td></tr>
diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html
index defc586..fd717e2 100644
--- a/semantic-tokens-patterns.html
+++ b/semantic-tokens-patterns.html
@@ -95,6 +95,7 @@
     <h3 class="sg-sub-heading sg-section-h3">Delete Confirmation Overlay</h3>
     <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
       <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-overlay-width-factor</td><td>0.8</td><td>Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts (80%).</td></tr>
diff --git a/styles/01-foundations.css b/styles/01-foundations.css
index 93f1bd3..fe76695 100644
--- a/styles/01-foundations.css
+++ b/styles/01-foundations.css
@@ -11,6 +11,7 @@
   --color-light-grey: #E2E5E9;
   --color-medium-grey: #CDCFD4;
   --color-dark-grey: #7B879D;
+  --color-black: #000000;
   --color-white: #FFFFFF;
   --color-process-inactive: #FFAE79;
   --color-signal-green: #009101;
@@ -198,6 +199,7 @@
   --text-align-text-layout-column-center: center;
   --text-align-text-layout-column-right: right;
   --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;
diff --git a/styles/27-patterns-delete-confirmation.css b/styles/27-patterns-delete-confirmation.css
index 47acd7a..81ef890 100644
--- a/styles/27-patterns-delete-confirmation.css
+++ b/styles/27-patterns-delete-confirmation.css
@@ -20,7 +20,7 @@
   content: "";
   position: absolute;
   inset: 0;
-  background: var(--color-dark-grey);
+  background: var(--surface-delete-confirmation-target-dim-overlay);
   opacity: var(--layout-delete-confirmation-target-dim-opacity);
   pointer-events: none;
 }