fix: dialog overlay opacity does not match design spec (#47)

Co-authored-by: Ona <no-reply@ona.com>

Author: zacharias-ona

src/components/ui/alert-dialog.tsx

@@ -30,7 +30,7 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Backdrop
       data-slot="alert-dialog-overlay"
       className={cn(
-        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 isolate z-50 bg-black/50 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}

src/components/ui/dialog.tsx

@@ -31,7 +31,7 @@ function DialogOverlay({
     <DialogPrimitive.Backdrop
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 isolate z-50 bg-black/50 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}

src/components/ui/overlay-opacity.test.ts

@@ -0,0 +1,24 @@
+import { describe, it, expect } from "vitest";
+import { readFileSync } from "fs";
+import { join } from "path";
+
+/**
+ * Regression test for issue #47: dialog overlays must use bg-black/50
+ * per the design spec. bg-black/10 is nearly invisible and breaks
+ * the modal focus effect.
+ */
+describe("dialog overlay opacity matches design spec", () => {
+  const uiDir = join(__dirname);
+
+  it("DialogOverlay uses bg-black/50", () => {
+    const source = readFileSync(join(uiDir, "dialog.tsx"), "utf-8");
+    expect(source).toContain("bg-black/50");
+    expect(source).not.toContain("bg-black/10");
+  });
+
+  it("AlertDialogOverlay uses bg-black/50", () => {
+    const source = readFileSync(join(uiDir, "alert-dialog.tsx"), "utf-8");
+    expect(source).toContain("bg-black/50");
+    expect(source).not.toContain("bg-black/10");
+  });
+});