fix(ui): render the Mosaic menu shadow as an outline in dark mode - #9414
Conversation
🦋 Changeset detectedLatest commit: d9700e7 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types 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 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-google-signin
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
📝 WalkthroughWalkthroughThe menu popup shadow now uses Estimated code review effort: 1 (Trivial) | ~5 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/components/menu/menu.styles.ts`:
- Around line 20-22: Update the boxShadow declaration in the menu styles to use
the repository’s lightDark utility for each light/dark color pair instead of raw
CSS light-dark() calls, preserving the existing colors and fallback behavior.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: e932874a-4730-45ea-b9f7-03e1c1dcda62
📒 Files selected for processing (2)
.changeset/mosaic-menu-dark-mode-outline.mdpackages/ui/src/mosaic/components/menu/menu.styles.ts
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
clerk/clerk_go(manual)clerk/dashboard(manual)clerk/accounts(manual)clerk/backoffice(manual)clerk/clerk(manual)clerk/clerk-docs(manual)clerk/cloudflare-workers(manual)clerk/clerk-ios(auto-detected)clerk/cli(auto-detected)clerk/clerk-android(auto-detected)
| boxShadow: `0 12px 12px -7px light-dark(oklch(0.2046 0 0 / 12%), transparent), | ||
| 0 24px 24px -10px light-dark(oklch(0.2046 0 0 / 4%), transparent), | ||
| 0 0 0 1px light-dark(oklch(0.2046 0 0 / 4%), oklch(1 0 0 / 10%))`, |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Use lightDark instead of raw light-dark().
The declaration bypasses the repository’s support-aware helper. Browsers without light-dark() support can ignore the entire boxShadow declaration. Apply lightDark to each color value so the style keeps the supported fallback.
As per coding guidelines: “Use CSS light-dark() function via the lightDark utility ... for automatic light/dark mode support with fallbacks.” Repository context identifies packages/ui/src/utils/lightDark.ts:14-18 as the support-aware implementation.
Proposed fix
+import { lightDark } from '../../../utils/lightDark';
+
...
- boxShadow: `0 12px 12px -7px light-dark(oklch(0.2046 0 0 / 12%), transparent),
- 0 24px 24px -10px light-dark(oklch(0.2046 0 0 / 4%), transparent),
- 0 0 0 1px light-dark(oklch(0.2046 0 0 / 4%), oklch(1 0 0 / 10%))`,
+ boxShadow: `0 12px 12px -7px ${lightDark('oklch(0.2046 0 0 / 12%)', 'transparent')},
+ 0 24px 24px -10px ${lightDark('oklch(0.2046 0 0 / 4%)', 'transparent')},
+ 0 0 0 1px ${lightDark('oklch(0.2046 0 0 / 4%)', 'oklch(1 0 0 / 10%)')}`,📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| boxShadow: `0 12px 12px -7px light-dark(oklch(0.2046 0 0 / 12%), transparent), | |
| 0 24px 24px -10px light-dark(oklch(0.2046 0 0 / 4%), transparent), | |
| 0 0 0 1px light-dark(oklch(0.2046 0 0 / 4%), oklch(1 0 0 / 10%))`, | |
| import { lightDark } from '../../../utils/lightDark'; | |
| boxShadow: `0 12px 12px -7px ${lightDark('oklch(0.2046 0 0 / 12%)', 'transparent')}, | |
| 0 24px 24px -10px ${lightDark('oklch(0.2046 0 0 / 4%)', 'transparent')}, | |
| 0 0 0 1px ${lightDark('oklch(0.2046 0 0 / 4%)', 'oklch(1 0 0 / 10%)')}`, |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/ui/src/mosaic/components/menu/menu.styles.ts` around lines 20 - 22,
Update the boxShadow declaration in the menu styles to use the repository’s
lightDark utility for each light/dark color pair instead of raw CSS light-dark()
calls, preserving the existing colors and fallback behavior.
Source: Coding guidelines
API Changes Report
Summary
No API Changes DetectedAll packages have stable APIs with no detected changes. Report generated by Break Check Last ran on |
2 participants
Description
The Mosaic menu popup painted its light-mode drop shadow in dark mode, where it reads as a smudge instead of an edge. The menu now matches the Mosaic card: in dark mode the two drop shadows drop out and only the 1px ring stays, at 10% white.
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change