[Bug Fix] Overlays: use shadcn's nova overlay on every modal

gem/lib/ruby_ui/alert_dialog/alert_dialog_content.rb

@@ -14,7 +14,7 @@ def view_template(&block)
     def background
       div(
         data_state: "open",
-        class: "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in",
+        class: "fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-[state=open]:animate-in",
         style: "pointer-events:auto",
         data_aria_hidden: "true",
         aria_hidden: "true"

gem/lib/ruby_ui/command/command_dialog_content.rb

@@ -43,7 +43,7 @@ def backdrop
         data_state: "open",
         data_action: "click->ruby-ui--command#dismiss esc->ruby-ui--command#dismiss",
         data_ruby_ui__command_target: "backdrop",
-        class: "fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:fill-mode-forwards"
+        class: "fixed pointer-events-auto inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:fill-mode-forwards"
       )
     end
   end

gem/lib/ruby_ui/dialog/dialog_content.rb

@@ -30,7 +30,7 @@ def default_attrs
         data_ruby_ui__dialog_target: "dialog",
         data_action: "click->ruby-ui--dialog#backdropClick",
         class: [
-          "fixed open:flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 backdrop:bg-background/80 backdrop:backdrop-blur-sm open:animate-in open:fade-in-0 open:zoom-in-95 sm:rounded-lg md:w-full",
+          "fixed open:flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 backdrop:bg-black/10 backdrop:supports-backdrop-filter:backdrop-blur-xs open:animate-in open:fade-in-0 open:zoom-in-95 sm:rounded-lg md:w-full",
           SIZES[@size]
         ]
       }

gem/lib/ruby_ui/sheet/sheet_content.rb

@@ -72,7 +72,7 @@ def backdrop
         data_action: "click->ruby-ui--sheet-content#close",
         data_ruby_ui__sheet_content_target: "backdrop",
         class:
-              "fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:fill-mode-forwards"
+              "fixed pointer-events-auto inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:fill-mode-forwards"
       )
     end
   end

gem/test/ruby_ui/alert_dialog_test.rb

@@ -24,4 +24,15 @@ def test_render_with_all_items
 
     assert_match(/Show dialog/, output)
   end
+
+  # Every modal shares shadcn's overlay: black at 10% in both themes, blurred only where backdrop-filter is supported.
+  def test_content_uses_the_shared_modal_overlay
+    output = phlex do
+      RubyUI.AlertDialogContent { "Content" }
+    end
+
+    assert_includes output, "bg-black/10"
+    assert_includes output, "supports-backdrop-filter:backdrop-blur-xs"
+    refute_match(/bg-background\/80|bg-black\/80|backdrop-blur-sm/, output)
+  end
 end

gem/test/ruby_ui/command_test.rb

@@ -71,4 +71,15 @@ def test_content_and_backdrop_hold_the_last_frame_of_the_exit_animation
 
     assert_equal 2, output.scan("data-[state=closed]:fill-mode-forwards").size
   end
+
+  # Every modal shares shadcn's overlay: black at 10% in both themes, blurred only where backdrop-filter is supported.
+  def test_backdrop_uses_the_shared_modal_overlay
+    output = phlex do
+      RubyUI.CommandDialogContent { "command body" }
+    end
+
+    assert_includes output, "bg-black/10"
+    assert_includes output, "supports-backdrop-filter:backdrop-blur-xs"
+    refute_match(/bg-background\/80|bg-black\/80|backdrop-blur-sm/, output)
+  end
 end

gem/test/ruby_ui/dialog_test.rb

@@ -136,4 +136,17 @@ def test_trigger_has_open_action
 
     assert_match(/data-action="click->ruby-ui--dialog#open"/, output)
   end
+
+  # Every modal shares shadcn's overlay: black at 10% in both themes, blurred only where backdrop-filter is supported.
+  def test_dialog_content_uses_the_shared_modal_overlay
+    output = phlex do
+      RubyUI.Dialog do
+        RubyUI.DialogContent { "Content" }
+      end
+    end
+
+    assert_includes output, "backdrop:bg-black/10"
+    assert_includes output, "backdrop:supports-backdrop-filter:backdrop-blur-xs"
+    refute_match(/bg-background\/80|bg-black\/80|backdrop-blur-sm/, output)
+  end
 end

gem/test/ruby_ui/sheet_test.rb

@@ -51,4 +51,15 @@ def test_content_and_backdrop_hold_the_last_frame_of_the_exit_animation
 
     assert_equal 2, output.scan("data-[state=closed]:fill-mode-forwards").size
   end
+
+  # Every modal shares shadcn's overlay: black at 10% in both themes, blurred only where backdrop-filter is supported.
+  def test_backdrop_uses_the_shared_modal_overlay
+    output = phlex do
+      RubyUI.SheetContent { "sheet body" }
+    end
+
+    assert_includes output, "bg-black/10"
+    assert_includes output, "supports-backdrop-filter:backdrop-blur-xs"
+    refute_match(/bg-background\/80|bg-black\/80|backdrop-blur-sm/, output)
+  end
 end