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

[devin-ai-integration]

Summary

In dark themes, Modal and Popover surfaces don't separate clearly enough from the background. This adds a subtle border plus a deeper drop shadow and a hairline ring to both, scoped to dark themes via light-dark() so light themes are unchanged.

Applied to packages/components/src/styles/Modal.module.css (.base) and packages/components/src/styles/Popover.module.css (.popover):

border: 1px solid light-dark(transparent, var(--lp-color-border-ui-primary));
box-shadow:
  /* ...existing layers kept... */
  0px 20px 60px 0px light-dark(transparent, var(--lp-color-black-500)),
  0px 0px 0px 1px light-dark(transparent, var(--lp-color-white-0));

Token mapping (requested raw values → closest Launchpad tokens):

• 1px solid rgba(255,255,255,0.08) → var(--lp-color-border-ui-primary) (semantic border token; adapts per theme)
• 0 20px 60px rgba(0,0,0,0.5) → var(--lp-color-black-500) = rgba(7,8,12,0.5)
• 0 0 0 1px rgba(255,255,255,0.05) → var(--lp-color-white-0) = rgba(255,255,255,0.05) (exact)

light-dark() follows the existing pattern in Popover.module.css (the arrow stroke), keying off color-scheme so it resolves correctly for portaled overlays.

Screenshots:

Before:

After:

Testing approaches

• pnpm check (Biome) clean on the changed files.
• Relying on Chromatic dark-theme snapshots for visual verification (requires human approval).

Link to Devin session: https://app.devin.ai/sessions/b4f9e99abc124a99bdcc5918b09ae387

---

Note

Low Risk
Visual-only CSS token changes on overlay surfaces; no logic, API, or data-path changes.

Overview
Dark themes get clearer separation for Modal (.base) and Popover (.popover) overlays via theme-scoped styling only: a 1px border using var(--lp-color-border-ui-primary), plus two extra box-shadow layers (deeper drop shadow with var(--lp-color-black-500) and a 1px hairline ring with var(--lp-color-white-0)). Existing shadow layers are kept; new values use light-dark(transparent, …) so light mode stays unchanged, matching the existing light-dark() usage on Popover arrows.

A patch changeset documents the @launchpad-ui/components release note.

^{Reviewed by Cursor Bugbot for commit 884aa60. Bugbot is set up for automated code reviews on this repo. Configure here.}

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring

[changeset-bot]

🦋 Changeset detected

Latest commit: 884aa60

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@launchpad-ui/components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pkg-pr-new]

yarn add https://pkg.pr.new/@launchpad-ui/components@1943.tgz

yarn add https://pkg.pr.new/@launchpad-ui/icons@1943.tgz

yarn add https://pkg.pr.new/@launchpad-ui/tokens@1943.tgz

commit: 884aa60