style(components): improve dark-mode Modal and Popover differentiation (#1943)

* style(components): improve dark-mode Modal and Popover differentiation

Co-Authored-By: rhalloran@launchdarkly.com <rhalloran@launchdarkly.com>

* rebuild

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: rhalloran@launchdarkly.com <rhalloran@launchdarkly.com>
Co-authored-by: Naomi Hironaka <nhironaka@launchdarkly.com>

Author: 3 people

.changeset/dark-mode-overlay-differentiation.md

@@ -0,0 +1,5 @@
+---
+'@launchpad-ui/components': patch
+---
+
+Improve dark-mode differentiation for `Modal` and `Popover` surfaces by adding a subtle border and a deeper drop shadow with a hairline ring. The additions are scoped to dark themes via `light-dark()`, so light themes are unchanged.

packages/components/src/styles/Modal.module.css

@@ -43,11 +43,14 @@
 .base {
 	border-radius: var(--lp-border-radius-medium);
 	background-color: var(--lp-color-bg-overlay-primary);
+	border: 1px solid light-dark(transparent, var(--lp-color-border-ui-primary));
 	outline: none;
 	padding: var(--lp-spacing-700);
 	box-shadow:
 		0px 0px 16px 0px var(--lp-color-shadow-ui-secondary),
-		0px 8px 36px 0px var(--lp-color-shadow-ui-primary);
+		0px 8px 36px 0px var(--lp-color-shadow-ui-primary),
+		0px 20px 60px 0px light-dark(transparent, var(--lp-color-black-500)),
+		0px 0px 0px 1px light-dark(transparent, var(--lp-color-white-0));
 
 	& [slot='title'] {
 		font: var(--lp-text-heading-1-semibold);

packages/components/src/styles/Popover.module.css

@@ -17,11 +17,14 @@
 	border-radius: var(--lp-border-radius-medium);
 	color: var(--lp-color-text-ui-primary-base);
 	background-color: var(--lp-color-bg-overlay-secondary);
+	border: 1px solid light-dark(transparent, var(--lp-color-border-ui-primary));
 	box-shadow:
 		0px 0px 1px 0px var(--lp-color-shadow-ui-secondary),
 		0px 0px 4px 0px var(--lp-color-shadow-ui-secondary),
 		0px 4px 8px 0px var(--lp-color-shadow-ui-secondary),
-		0px 2px 12px 0px var(--lp-color-shadow-ui-secondary);
+		0px 2px 12px 0px var(--lp-color-shadow-ui-secondary),
+		0px 20px 60px 0px light-dark(transparent, var(--lp-color-black-500)),
+		0px 0px 0px 1px light-dark(transparent, var(--lp-color-white-0));
 	transform: translate3d(0, 0, 0);
 	will-change: transform, opacity;