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

LE
14h ago
+54-8

Related issue

No existing issue — happy to open one if you'd prefer to track it there.

Description

The four modal overlays each paint a different backdrop: Dialog, Sheet and CommandDialog use the theme background at 80% with a blur (a light veil in light mode), while AlertDialog uses black at 80% with a blur.

shadcn's current default style (nova, apps/v4/registry/styles/style-nova.css) gives every overlay — .cn-dialog-overlay, .cn-alert-dialog-overlay, .cn-sheet-overlay, .cn-drawer-overlay — the same value: bg-black/10 supports-backdrop-filter:backdrop-blur-xs, black in both themes with no .dark override, blurred only where backdrop-filter is supported. This applies it to all four:

  • DialogContent: backdrop:bg-black/10 backdrop:supports-backdrop-filter:backdrop-blur-xs on the native <dialog>'s ::backdrop;
  • AlertDialogContent, SheetContent, CommandDialogContent: bg-black/10 supports-backdrop-filter:backdrop-blur-xs on the overlay div.

Classes stay inline rather than in a shared @utility, since ruby_ui:component never touches the app's stylesheet and existing installs would lose the overlay. Tailwind compiles bg-black/10 with a literal #0000001a fallback, so the color holds even where ::backdrop doesn't see the theme's custom properties.

Each component gets a test pinning the overlay, and mcp/data/registry.json is rebuilt (cd mcp && bundle exec rake mcp:build).

In dark mode the change is barely visible (10% black over a near-black page), so the screenshots below are light mode.

BeforeAfter
Dialog before-dialogDialog after-dialog
AlertDialog before-alert_dialogAlertDialog after-alert_dialog
Sheet before-sheetSheet after-sheet
CommandDialog before-commandCommandDialog after-command

Testing instructions

  1. cd gem && bundle exec rake — 298 runs, 0 failures; standardrb clean across 402 files.
  2. cd docs && bin/dev, open /docs/dialog, /docs/alert_dialog, /docs/sheet and /docs/command (⌘K): each overlay is the same faint black veil with a light blur, in light and dark mode.