From 4cb009787b741fbd0994e68737c8e61cdf610db8 Mon Sep 17 00:00:00 2001
From: Tom Najdek <tom@doppnet.com>
Date: Thu, 25 Apr 2024 15:36:03 +0200
Subject: [PATCH] Fix regression: modals lack backdrop

---
 src/scss/components/_library.scss           | 2 +-
 src/scss/components/modal/_react-modal.scss | 4 +++-
 src/scss/themes/_common.scss                | 3 +--
 src/scss/themes/_dark.scss                  | 2 ++
 src/scss/themes/_light.scss                 | 2 ++
 5 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/scss/components/_library.scss b/src/scss/components/_library.scss
index 88efc619..c06c362e 100644
--- a/src/scss/components/_library.scss
+++ b/src/scss/components/_library.scss
@@ -53,7 +53,7 @@
 			right: 0;
 			bottom: 0;
 			left: 0;
-			background-color: $modal-backdrop-bg;
+			background-color: var(--color-backdrop);
 			z-index: $z-index-search-backdrop
 		}
 
diff --git a/src/scss/components/modal/_react-modal.scss b/src/scss/components/modal/_react-modal.scss
index 3a7b745d..6e715bb0 100644
--- a/src/scss/components/modal/_react-modal.scss
+++ b/src/scss/components/modal/_react-modal.scss
@@ -12,7 +12,7 @@
 	right: 0;
 	bottom: 0;
 	left: 0;
-	background-color: $modal-backdrop-bg;
+	background-color: var(--color-backdrop);
 	overflow-y: auto;
 	-webkit-overflow-scrolling: touch; // Momentum scrolling for iOS 10–
 	z-index: $z-index-modal;
@@ -39,6 +39,8 @@
 }
 
 .modal {
+	border: var(--material-border-quarternary);
+
 	@include bp-up(sm) {
 		width: $modal-md;
 		margin: $space-xl auto;
diff --git a/src/scss/themes/_common.scss b/src/scss/themes/_common.scss
index 6df3a52c..f43ac6a9 100644
--- a/src/scss/themes/_common.scss
+++ b/src/scss/themes/_common.scss
@@ -222,12 +222,11 @@ $menu-devider: $shade-2;
 $menu-no-results-color: $shade-5;
 
 // Drag layer
-$creator-drag-preview-shadow: rgba($shade-10, 0.2);
+$creator-drag-preview-shadow: var(--color-drag-preview-shadow);
 $items-drag-indicator-color: $item-active-color;
 $items-drag-indicator-bg: var(--accent-blue-lighter);
 
 // Modal
-$modal-backdrop-bg: rgba($shade-10, 0.4);
 $modal-content-bg: $body-bg;
 $modal-content-bg-touch: $shade-1;
 $modal-header-bg: $shade-0;
diff --git a/src/scss/themes/_dark.scss b/src/scss/themes/_dark.scss
index d6c0e4c4..b5f2c609 100644
--- a/src/scss/themes/_dark.scss
+++ b/src/scss/themes/_dark.scss
@@ -77,10 +77,12 @@ $-colors: (
 	color-button-active-bg: #f0f0f0,
 	color-button-shadow: rgba(0, 0, 0, 0.2),
 	color-button-shadow-lighter: rgba(0, 0, 0, 0.06),
+	color-drag-preview-shadow: rgba(0, 0, 0, 0.2),
 	tag-color-border: rgba(0, 0, 0, 0.08),
 	color-text-disabled: #9a9a9a,
 	color-nav-sidebar-border: #252525,
 	color-identifier-badge-hover-border: #b9b8b5,
+	color-backdrop: rgba(0, 0, 0, 0.6),
 );
 
 @media (prefers-color-scheme: dark) {
diff --git a/src/scss/themes/_light.scss b/src/scss/themes/_light.scss
index 792648ea..825b2b2d 100644
--- a/src/scss/themes/_light.scss
+++ b/src/scss/themes/_light.scss
@@ -79,10 +79,12 @@ $-colors: (
 	color-button-active-bg: #f0f0f0,
 	color-button-shadow: rgba(0, 0, 0, 0.2),
 	color-button-shadow-lighter: rgba(0, 0, 0, 0.06),
+	color-drag-preview-shadow: rgba(0, 0, 0, 0.2),
 	tag-color-border: rgba(0, 0, 0, 0.08),
 	color-text-disabled: #656565, // lighten($text-color, 33%);
 	color-nav-sidebar-border: #252525,
 	color-identifier-badge-hover-border: #b9b8b5,
+	color-backdrop: rgba(0, 0, 0, 0.4),
 );
 
 @media (prefers-color-scheme: light) {