fix(clerk-js,types): Parsed color adjustments #6334
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
🦋 Changeset detectedLatest commit: 5b2490a The changes in this PR will be included in the next version bump. This PR includes changesets to release 22 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 |
Contributor
📝 WalkthroughWalkthroughThe changes introduce adjustments to the handling and rendering of color properties within the codebase. Specifically, the 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/elements
@clerk/clerk-expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/clerk-react
@clerk/react-router
@clerk/remix
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/themes
@clerk/types
@clerk/upgrade
@clerk/vue
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
packages/clerk-js/src/ui/foundations/colors.ts (2)
91-91: Consider extracting magic numbers as named constants.The transparency values
0.27and0.85are magic numbers that would benefit from descriptive names to improve code readability and maintainability.Consider extracting these values as named constants:
+const MODAL_BACKDROP_TRANSPARENCY = 0.27; // 73% opacity +const RING_TRANSPARENCY = 0.85; // 15% opacity + const colors = Object.freeze({ avatarBorder: neutralAlphaScale.neutralAlpha200, avatarBackground: neutralAlphaScale.neutralAlpha400, - colorModalBackdrop: colorUtils.makeTransparent(clerkCssVar('color-modal-backdrop', defaultColorNeutral), 0.27), + colorModalBackdrop: colorUtils.makeTransparent(clerkCssVar('color-modal-backdrop', defaultColorNeutral), MODAL_BACKDROP_TRANSPARENCY), colorBackground: clerkCssVar('color-background', 'white'), colorInput: clerkCssVar('color-input', 'white'), colorForeground, colorMutedForeground, colorMuted: undefined, - colorRing: colorUtils.makeTransparent(clerkCssVar('color-ring', defaultColorNeutral), 0.85), + colorRing: colorUtils.makeTransparent(clerkCssVar('color-ring', defaultColorNeutral), RING_TRANSPARENCY),Also applies to: 97-97
91-91: Consider adding error handling for transparency operations.The
makeTransparentfunction calls should handle potential failures gracefully, especially since color parsing can fail with invalid input.Consider adding fallback values for transparency operations:
- colorModalBackdrop: colorUtils.makeTransparent(clerkCssVar('color-modal-backdrop', defaultColorNeutral), 0.27), + colorModalBackdrop: colorUtils.makeTransparent(clerkCssVar('color-modal-backdrop', defaultColorNeutral), 0.27) || 'rgba(0, 0, 0, 0.73)', - colorRing: colorUtils.makeTransparent(clerkCssVar('color-ring', defaultColorNeutral), 0.85), + colorRing: colorUtils.makeTransparent(clerkCssVar('color-ring', defaultColorNeutral), 0.85) || 'rgba(0, 0, 0, 0.15)',Also applies to: 97-97
.changeset/nine-worms-count.md (1)
1-9: Suggest adding visual regression testing.Since this PR modifies UI color rendering, visual regression testing should be performed to ensure the changes don't introduce unexpected visual artifacts.
Based on the coding guidelines for UI components, please ensure visual regression testing is performed for these color changes. You may want to:
- Test the appearance of modal backdrops at 73% opacity
- Test the appearance of ring colors at 15% opacity
- Test avatar colors with neutral color variations
- Verify color accessibility standards are maintained
Would you like me to help generate test cases or documentation for the visual regression testing requirements?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
.changeset/nine-worms-count.md(1 hunks)packages/clerk-js/src/ui/customizables/parseVariables.ts(1 hunks)packages/clerk-js/src/ui/foundations/colors.ts(1 hunks)packages/types/src/appearance.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/clerk-js/src/ui/customizables/parseVariables.ts
- packages/types/src/appearance.ts
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{js,jsx,ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/development.mdc
packages/**/*.ts
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/development.mdc
packages/**/*.{ts,tsx,d.ts}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/development.mdc
**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/development.mdc
- .cursor/rules/typescript.mdc
packages/{clerk-js,elements,themes}/**/*
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/monorepo.mdc
**/*
Instructions used from:
Sources:
⚙️ CodeRabbit Configuration File
🧠 Learnings (3)
📓 Common learnings
Learnt from: alexcarpenter
PR: clerk/javascript#6275
File: packages/clerk-js/src/ui/foundations/colors.ts:85-113
Timestamp: 2025-07-14T17:14:28.864Z
Learning: In the Clerk JavaScript repository, the `colorMuted` property in the colors definition can be undefined intentionally, as it's handled by the `common.mutedBackground` utility function which provides appropriate fallback logic when the muted color is not defined.
Learnt from: dstaley
PR: clerk/javascript#6100
File: packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx:121-124
Timestamp: 2025-06-16T17:08:58.414Z
Learning: The @clerk/clerk-js package only supports browsers released in the last two years (since May 8, 2023), so modern CSS features like color-mix() are fully supported across all target browsers without requiring fallbacks.
Learnt from: dstaley
PR: clerk/javascript#6116
File: .changeset/tangy-garlics-say.md:1-2
Timestamp: 2025-06-13T16:09:53.061Z
Learning: In the Clerk JavaScript repository, contributors create intentionally empty changeset files (containing only the YAML delimiters) when a PR touches only non-published parts of the codebase (e.g., sandbox assets). This signals that no package release is required, so such changesets should not be flagged as missing content.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-30T10:30:56.197Z
Learning: Applies to packages/{clerk-js,elements,themes}/**/* : Visual regression testing should be performed for UI components.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/development.mdc:0-0
Timestamp: 2025-06-30T10:29:42.997Z
Learning: Update documentation for API changes
.changeset/nine-worms-count.md (7)
Learnt from: dstaley
PR: clerk/javascript#6100
File: packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx:121-124
Timestamp: 2025-06-16T17:08:58.414Z
Learning: The @clerk/clerk-js package only supports browsers released in the last two years (since May 8, 2023), so modern CSS features like color-mix() are fully supported across all target browsers without requiring fallbacks.
Learnt from: dstaley
PR: clerk/javascript#6116
File: .changeset/tangy-garlics-say.md:1-2
Timestamp: 2025-06-13T16:09:53.061Z
Learning: In the Clerk JavaScript repository, contributors create intentionally empty changeset files (containing only the YAML delimiters) when a PR touches only non-published parts of the codebase (e.g., sandbox assets). This signals that no package release is required, so such changesets should not be flagged as missing content.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-30T10:30:56.197Z
Learning: Applies to packages/{clerk-js,elements,themes}/**/* : Visual regression testing should be performed for UI components.
Learnt from: alexcarpenter
PR: clerk/javascript#6275
File: packages/clerk-js/src/ui/foundations/colors.ts:85-113
Timestamp: 2025-07-14T17:14:28.864Z
Learning: In the Clerk JavaScript repository, the `colorMuted` property in the colors definition can be undefined intentionally, as it's handled by the `common.mutedBackground` utility function which provides appropriate fallback logic when the muted color is not defined.
Learnt from: jacekradko
PR: clerk/javascript#5905
File: .changeset/six-ears-wash.md:1-3
Timestamp: 2025-06-26T03:27:05.535Z
Learning: In the Clerk JavaScript repository, changeset headers support single quotes syntax (e.g., '@clerk/backend': minor) and work fine with their current changesets integration, so there's no need to change them to double quotes.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-06-30T10:32:37.848Z
Learning: Applies to **/*.{jsx,tsx} : Use proper state normalization
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-30T10:30:56.197Z
Learning: Applies to packages/clerk-react/**/*.{test,spec}.{js,ts,tsx} : Component testing should use React Testing Library.
packages/clerk-js/src/ui/foundations/colors.ts (3)
Learnt from: alexcarpenter
PR: clerk/javascript#6275
File: packages/clerk-js/src/ui/foundations/colors.ts:85-113
Timestamp: 2025-07-14T17:14:28.864Z
Learning: In the Clerk JavaScript repository, the `colorMuted` property in the colors definition can be undefined intentionally, as it's handled by the `common.mutedBackground` utility function which provides appropriate fallback logic when the muted color is not defined.
Learnt from: dstaley
PR: clerk/javascript#6100
File: packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx:121-124
Timestamp: 2025-06-16T17:08:58.414Z
Learning: The @clerk/clerk-js package only supports browsers released in the last two years (since May 8, 2023), so modern CSS features like color-mix() are fully supported across all target browsers without requiring fallbacks.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-30T10:30:56.197Z
Learning: Applies to packages/{clerk-js,elements,themes}/**/* : Visual regression testing should be performed for UI components.
🧬 Code Graph Analysis (1)
packages/clerk-js/src/ui/foundations/colors.ts (1)
packages/clerk-js/src/ui/utils/cssVariables.ts (1)
clerkCssVar(252-252)
🔇 Additional comments (1)
packages/clerk-js/src/ui/foundations/colors.ts (1)
89-90: LGTM: Avatar colors correctly use neutral alpha scales.The implementation correctly uses
neutralAlphaScalevalues for avatar colors, which aligns with the PR objective to ensure avatars render with parsed neutral colors whencolorNeutralis provided.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Member
|
💭 @alexcarpenter Some of the percentages/descriptions don't seem to be matching up here and CoderRabbit seems to think the same. Mind confirming that they're correct? |
…k/javascript into alexcarpenter/color-follow-up-fixes
…olors, update template styles, and adjust variable parsing. Disable modern color support check.
alexcarpenter
force-pushed
the
alexcarpenter/color-follow-up-fixes
branch
from
58bf8cb to
0df8578
Compare
alexcarpenter
commented
Jul 16, 2025
tmilewski
approved these changes
Jul 16, 2025
jacekradko
pushed a commit
that referenced
this pull request
Jul 24, 2025
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
colorRingat 15% vs 100%colorModalBackdropat 73% vs 100%avatarBackgroundandavatarBorderrender with parsed neutral colors whencolorNeutralis passed in via variables propChecklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Style
Documentation
Chores