chore: edge and light mode for modal dialog (podman-desktop#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 podman-desktop#7187. First minor part of podman-desktop#7184. Signed-off-by: Tim deBoer <[email protected]>
feloy · May 23, 2024 · 001ed4f · 001ed4f
1 parent 41d943a
commit 001ed4f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git 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
@@ -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"