From 001ed4f0d27ef3c5ba2bb2619d98fac0ca94ce78 Mon Sep 17 00:00:00 2001
From: Tim deBoer <git@tdeboer.ca>
Date: Thu, 23 May 2024 13:07:45 -0400
Subject: [PATCH] chore: edge and light mode for modal dialog (#7246)

Adds light mode colors for Modal dialog along with a defined 1px border so that
it is not washed out.

Initial light mode color values are taken from other mappings in the registry.

Also fixes a nit: the background should have the default cursor and not a
button cursor.

Fixes #7187.
First minor part of #7184.

Signed-off-by: Tim deBoer <git@tdeboer.ca>
---
 packages/main/src/plugin/color-registry.ts | 19 +++++++++++++++++++
 packages/ui/src/lib/modal/Modal.svelte     |  4 ++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/plugin/color-registry.ts b/packages/main/src/plugin/color-registry.ts
index 67c0411317cff..b3ed4403403e0 100644
--- a/packages/main/src/plugin/color-registry.ts
+++ b/packages/main/src/plugin/color-registry.ts
@@ -236,6 +236,7 @@ export class ColorRegistry {
     this.initTable();
     this.initDetails();
     this.initTab();
+    this.initModal();
   }
 
   protected initGlobalNav(): void {
@@ -774,4 +775,22 @@ export class ColorRegistry {
       light: colorPalette.purple[500],
     });
   }
+
+  // modal dialog
+  protected initModal(): void {
+    const modal = 'modal-';
+
+    this.registerColor(`${modal}fade`, {
+      dark: colorPalette.black,
+      light: colorPalette.white,
+    });
+    this.registerColor(`${modal}bg`, {
+      dark: colorPalette.charcoal[800],
+      light: colorPalette.gray[300],
+    });
+    this.registerColor(`${modal}border`, {
+      dark: colorPalette.charcoal[500],
+      light: colorPalette.gray[200],
+    });
+  }
 }
diff --git a/packages/ui/src/lib/modal/Modal.svelte b/packages/ui/src/lib/modal/Modal.svelte
index 44ddea3a5170d..4ec255b77cf35 100644
--- a/packages/ui/src/lib/modal/Modal.svelte
+++ b/packages/ui/src/lib/modal/Modal.svelte
@@ -35,12 +35,12 @@ if (previously_focused) {
 <div class:items-center="{!top}" class="absolute w-full h-full flex justify-center">
   <button
     aria-label="close"
-    class="fixed top-0 left-0 w-full h-full bg-black bg-opacity-60 bg-blend-multiply z-40"
+    class="fixed top-0 left-0 w-full h-full bg-[var(--pd-modal-fade)] bg-blend-multiply opacity-60 z-40 cursor-default"
     on:click="{close}"></button>
 
   <div
     class:translate-y-[-20%]="{!top}"
-    class="bg-charcoal-800 z-50 rounded-xl overflow-auto w-[calc(200vw-4em)] h-fit max-w-[42em] max-h-[calc(100vh-4em)]"
+    class="bg-[var(--pd-modal-bg)] z-50 rounded-xl overflow-auto w-[calc(200vw-4em)] h-fit max-w-[42em] max-h-[calc(100vh-4em)] border-[1px] border-[var(--pd-modal-border)]"
     role="dialog"
     aria-label="{name}"
     aria-modal="true"