Update modal background colours to be themeable and use theme colours for nord and midnight

packages/bbui/src/Modal/Modal.svelte

@@ -82,12 +82,12 @@
   -->
   <Portal target=".modal-container">
     {#if visible}
-      <div
+      <div class="spectrum-Underlay is-open" on:mousedown|self={cancel}>
-        class="spectrum-Underlay is-open"
+        <div
-        in:fade={{ duration: 200 }}
+          class="background"
-        out:fade|local={{ duration: 200 }}
+          in:fade={{ duration: 200 }}
-        on:mousedown|self={cancel}
+          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 {

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);
 }
 

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);
 }