From ae62184e7dcad3e4e7a5f20702d1162950e533a4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 1 Aug 2022 09:54:30 +0100
Subject: [PATCH] Update modal background colours to be themeable and use theme
 colours for nord and midnight

---
 packages/bbui/src/Modal/Modal.svelte          | 24 +++++++++++++------
 .../frontend-core/src/themes/midnight.css     |  2 ++
 packages/frontend-core/src/themes/nord.css    |  2 ++
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index 85a3d25e49..47420444a2 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -82,12 +82,12 @@
   -->
   <Portal target=".modal-container">
     {#if visible}
-      <div
-        class="spectrum-Underlay is-open"
-        in:fade={{ duration: 200 }}
-        out:fade|local={{ duration: 200 }}
-        on:mousedown|self={cancel}
-      >
+      <div class="spectrum-Underlay is-open" on:mousedown|self={cancel}>
+        <div
+          class="background"
+          in:fade={{ duration: 200 }}
+          out:fade|local={{ duration: 200 }}
+        />
         <div class="modal-wrapper" on:mousedown|self={cancel}>
           <div class="modal-inner-wrapper" on:mousedown|self={cancel}>
             <slot name="outside" />
@@ -116,7 +116,17 @@
     z-index: 999;
     overflow: auto;
     overflow-x: hidden;
-    background: rgba(0, 0, 0, 0.75);
+    background: transparent;
+  }
+  .background {
+    background: var(--modal-background, rgba(0, 0, 0, 0.75));
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    opacity: 0.65;
+    pointer-events: none;
   }
 
   .modal-wrapper {
diff --git a/packages/frontend-core/src/themes/midnight.css b/packages/frontend-core/src/themes/midnight.css
index 528d847702..f2b4650ebf 100644
--- a/packages/frontend-core/src/themes/midnight.css
+++ b/packages/frontend-core/src/themes/midnight.css
@@ -12,5 +12,7 @@
     --spectrum-global-color-gray-700: hsl(var(--hue), var(--sat), 70%);
     --spectrum-global-color-gray-800: hsl(var(--hue), var(--sat), 80%);
     --spectrum-global-color-gray-900: hsl(var(--hue), var(--sat), 95%);
+
+    --modal-background: var(--spectrum-global-color-gray-50);
 }
 
diff --git a/packages/frontend-core/src/themes/nord.css b/packages/frontend-core/src/themes/nord.css
index ebcf7efaf9..05a4215e41 100644
--- a/packages/frontend-core/src/themes/nord.css
+++ b/packages/frontend-core/src/themes/nord.css
@@ -43,4 +43,6 @@
 
   --spectrum-alias-highlight-hover: rgba(169, 177, 193, 0.1);
   --spectrum-alias-highlight-active: rgba(169, 177, 193, 0.1);
+
+  --modal-background: var(--spectrum-global-color-gray-50);
 }