fix(ui): Modal backdrop color is consistent across light/dark#8743
Conversation
🦋 Changeset detectedLatest commit: ebff5fa The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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.
|
alexcarpenter
changed the title
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/expo
@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: |
|
Break Check: no API changes detected across the tracked packages. Last ran on |
📝 WalkthroughWalkthroughThis PR updates the modal backdrop color in the Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
packages/ui/src/foundations/colors.ts (2)
94-94: 💤 Low valueConsider extracting the hardcoded black color as a named constant.
The literal
'#000000'appears in multiple places (line 38 indefaultColorNeutraland here on line 94). Extracting it as a named constant (e.g.,const COLOR_BLACK = '#000000') would improve maintainability and make the intent clearer.♻️ Optional refactor to extract color constant
+const COLOR_BLACK = '`#000000`'; +const COLOR_WHITE = '`#ffffff`'; + -const defaultColorNeutral = clerkCssVar('color-neutral', lightDark('`#000000`', '`#ffffff`')); +const defaultColorNeutral = clerkCssVar('color-neutral', lightDark(COLOR_BLACK, COLOR_WHITE)); // ... later in the file ... const colors = Object.freeze({ // ... colorModalBackdrop: clerkCssVar( 'color-modal-backdrop', - colorUtils.makeTransparent('`#000000`', 0.27) || neutralAlphaScale.neutralAlpha700, + colorUtils.makeTransparent(COLOR_BLACK, 0.27) || neutralAlphaScale.neutralAlpha700, ),🤖 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/foundations/colors.ts` at line 94, The hardcoded '`#000000`' literal is used in colorUtils.makeTransparent calls (and also in defaultColorNeutral), so extract it into a named constant (e.g., COLOR_BLACK) near the top of the file and replace occurrences with that constant; update places referencing colorUtils.makeTransparent('`#000000`', 0.27) and any other '`#000000`' usages (including defaultColorNeutral) to use COLOR_BLACK to improve clarity and maintainability.
1-126: ⚡ Quick winConsider adding tests to verify the modal backdrop color fix.
The change fixes a visual bug where the modal backdrop appeared light in dark mode. While this is primarily a visual change, consider adding tests to verify:
- The
colorModalBackdropvalue uses black as the base color for the transparent fallback- The CSS variable override (
color-modal-backdrop) is still respectedAs per coding guidelines: If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.
🤖 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/foundations/colors.ts` around lines 1 - 126, Add unit tests for the colorModalBackdrop fix: write tests that import the colors object and assert colors.colorModalBackdrop falls back to a transparent black value generated via colorUtils.makeTransparent('`#000000`', 0.27) when no CSS var is provided, and that providing a CSS variable override for 'color-modal-backdrop' (simulate clerkCssVar resolution) returns that override instead; target the colors export and the clerkCssVar/colorUtils.makeTransparent behavior, and add cases for both light and dark modes to ensure the dark-mode backdrop is correct.
🤖 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.
Nitpick comments:
In `@packages/ui/src/foundations/colors.ts`:
- Line 94: The hardcoded '`#000000`' literal is used in colorUtils.makeTransparent
calls (and also in defaultColorNeutral), so extract it into a named constant
(e.g., COLOR_BLACK) near the top of the file and replace occurrences with that
constant; update places referencing colorUtils.makeTransparent('`#000000`', 0.27)
and any other '`#000000`' usages (including defaultColorNeutral) to use
COLOR_BLACK to improve clarity and maintainability.
- Around line 1-126: Add unit tests for the colorModalBackdrop fix: write tests
that import the colors object and assert colors.colorModalBackdrop falls back to
a transparent black value generated via colorUtils.makeTransparent('`#000000`',
0.27) when no CSS var is provided, and that providing a CSS variable override
for 'color-modal-backdrop' (simulate clerkCssVar resolution) returns that
override instead; target the colors export and the
clerkCssVar/colorUtils.makeTransparent behavior, and add cases for both light
and dark modes to ensure the dark-mode backdrop is correct.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 55419ddd-cfc5-40ef-9333-0d21e3314860
📒 Files selected for processing (2)
.changeset/safe-hot-nice.mdpackages/ui/src/foundations/colors.ts
2 participants
Description
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change