feat(clerk-js): Update color logic utils to support CSS variable usage #6187
Conversation
🦋 Changeset detectedLatest commit: ecee31a The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 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 Git ↗︎
|
- Added custom appearance variables in app.ts for improved styling. - Introduced a new CSS variable for brand color in template.html. - Removed unused simpleColorMix function from color utilities in utils.ts.
|
!snapshot |
|
Hey @alexcarpenter - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/[email protected] --save-exact |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/clerk-js/src/ui/utils/cssSupports.ts (1)
31-36: Simplify the cache lookup logic.The cache lookup can be simplified since
Map.get()already returnsundefinedfor non-existent keys, making theMap.has()check redundant.- if (supportCache.has(feature)) { - const cached = supportCache.get(feature); - if (cached !== undefined) { - return cached; - } - } + const cached = supportCache.get(feature); + if (cached !== undefined) { + return cached; + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/clerk-js/src/ui/utils/cssSupports.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
`**/*.{js,ts,tsx,jsx}`: All code must pass ESLint checks with the project's configuration. Use Prettier for consistent code formatting.
**/*.{js,ts,tsx,jsx}: All code must pass ESLint checks with the project's configuration.
Use Prettier for consistent code formatting.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/development.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/cssSupports.ts
`**/*.{ts,tsx}`: Maintain comprehensive JSDoc comments for public APIs.
**/*.{ts,tsx}: Maintain comprehensive JSDoc comments for public APIs.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/development.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/cssSupports.ts
`packages/**`: All publishable packages under the @clerk namespace must be located in the packages/ directory.
packages/**: All publishable packages under the @clerk namespace must be located in the packages/ directory.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/global.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/cssSupports.ts
`**/*.ts`: Always define explicit return types for functions, especially public ...
**/*.ts: Always define explicit return types for functions, especially public APIs.
Use proper type annotations for variables and parameters where inference isn't clear.
Avoidanytype; preferunknownwhen type is uncertain, then narrow with type guards.
Useinterfacefor object shapes that might be extended; usetypefor unions, primitives, and computed types.
Preferreadonlyproperties for immutable data structures.
Useprivatefor internal implementation details,protectedfor inheritance, andpublicexplicitly for clarity in public APIs.
Prefer composition and interfaces over deep inheritance chains; use mixins for shared behavior.
Use ES6 imports/exports consistently; avoid barrel files (index.ts re-exports) to prevent circular dependencies.
Use type-only imports (import type { ... }) where possible.
Useas constfor literal types and thesatisfiesoperator for type checking without widening.
Enable--incrementaland--tsBuildInfoFilefor faster builds.
Use ESLint with @typescript-eslint/recommended rules and Prettier for formatting.
Use lint-staged and Husky for pre-commit checks.
Use type-coverage to measure type safety.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/typescript.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/cssSupports.ts
🧠 Learnings (2)
📓 Common learnings
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-23T12:25:40.214Z
Learning: Environment variables prefixed with CLERK_* and NEXT_PUBLIC_CLERK_* are supported for configuration across different environments.
packages/clerk-js/src/ui/utils/cssSupports.ts (6)
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-23T12:25:40.214Z
Learning: Framework packages depend on @clerk/clerk-js for core functionality, while @clerk/shared and @clerk/types provide common utilities and TypeScript definitions used across packages.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/typescript.mdc:0-0
Timestamp: 2025-06-23T12:26:09.855Z
Learning: Leverage modern TypeScript features such as generics, utility types (Omit, Partial, Pick), mapped types, conditional types, and template literal types for expressive and type-safe code.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/development.mdc:0-0
Timestamp: 2025-06-23T12:25:30.457Z
Learning: Optimize build and bundle processes by using tree-shaking friendly exports, dynamic imports for optional features, and monitoring bundle sizes.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/typescript.mdc:0-0
Timestamp: 2025-06-23T12:26:09.855Z
Learning: Use ES6 module syntax (import/export) consistently for maintainability and compatibility.
Learnt from: LauraBeatris
PR: clerk/javascript#6117
File: packages/clerk-js/src/ui/components/SessionTasks/index.tsx:64-83
Timestamp: 2025-06-18T16:33:36.764Z
Learning: In SessionTasks component at packages/clerk-js/src/ui/components/SessionTasks/index.tsx, the useEffect that checks for pending tasks should only run on mount (not react to currentTask/status changes) to handle browser back navigation edge cases without interfering with normal task completion flow managed by nextTask().
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: Build Packages
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (6)
packages/clerk-js/src/ui/utils/cssSupports.ts (6)
10-13: Well-designed feature test constants.The CSS test values are appropriate - using relative color syntax and color-mix with realistic examples that browsers would need to parse correctly.
38-42: Excellent non-browser environment handling.The optional chaining and type check for
CSS?.supportsprovides robust handling for SSR and non-browser environments while maintaining performance.
101-110: Clean and intuitive public API design.The exported
cssSupportsobject provides a clean, consistent interface with descriptive method names and proper JSDoc documentation.
88-95: Consider explicit return type annotation.Following the coding guidelines for explicit return types on functions, consider adding a return type annotation.
-const getPropertyForFeature = (feature: CSSFeature, defaultProperty: string): string => { +const getPropertyForFeature = (feature: CSSFeature, defaultProperty: string): string => {Actually, the return type is already explicitly defined. This looks correct as-is.
116-118: Useful cache introspection utility.The
getCachedSupportsfunction provides valuable debugging capabilities for understanding which features have been detected and cached.
67-83: Verify composite feature recursion safety.The
evaluateCompositeFeaturefunction recursively callstestCSSFeaturefor each feature. Ensure that composite features never reference other composite features to prevent infinite recursion.#!/bin/bash # Check if any composite features reference other composite features echo "Checking COMPOSITE_FEATURES definitions for potential circular references..." # Extract composite feature names rg -A 20 "COMPOSITE_FEATURES.*=" packages/clerk-js/src/ui/utils/cssSupports.ts | \ rg "features: \[.*\]" | \ sed "s/.*features: \[\(.*\)\].*/\1/" | \ tr ',' '\n' | \ sed "s/['\"]//g" | \ sed 's/^[[:space:]]*//' | \ sed 's/[[:space:]]*$//' | \ while read feature; do if grep -q "^[[:space:]]*${feature}:" packages/clerk-js/src/ui/utils/cssSupports.ts; then echo "⚠️ Potential circular reference: composite feature references another composite feature: $feature" fi done echo "✅ Verification complete"
alexcarpenter
changed the title
| // Try to get the computed value from CSS custom property | ||
| if (typeof window !== 'undefined' && window.getComputedStyle) { | ||
| try { | ||
| const computedStyle = window.getComputedStyle(document.documentElement); |
There was a problem hiding this comment.
won't this only resolve the variable in the context of the document element? So if you set a new value further down the tree, this won't pick that up.
:root {
--primary: red;
}
.excitingSection {
--primary: blue;
}There was a problem hiding this comment.
Yes, any ideas on how we'd handle that?
There was a problem hiding this comment.
I was under the impression we weren't going to attempt to do this, since this is only relevant in situations where the browser doesn't support relative color/color mix.
There was a problem hiding this comment.
but if we don't do this an error would be thrown in older browsers when users are using CSS variables.
Co-authored-by: Dylan Staley <[email protected]>
Co-authored-by: Dylan Staley <[email protected]>
Co-authored-by: Dylan Staley <[email protected]>
Co-authored-by: Dylan Staley <[email protected]>
Co-authored-by: Dylan Staley <[email protected]>
Co-authored-by: Dylan Staley <[email protected]>
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (4)
packages/clerk-js/src/ui/utils/colors/modern.ts (3)
33-33: Consider error handling for unsupported browsers.The current implementation silently returns the original color when modern CSS features aren't supported. This aligns with the graceful degradation approach but may not provide the expected behavior.
Based on the past review comment from dstaley, this behavior was already discussed. The current implementation provides graceful fallback by returning the original color.
72-72: Fix inconsistent return type with other methods.The
setAlphamethod has an inconsistent signature compared to other methods - it doesn't acceptundefinedas input and doesn't returnstring | undefined.This matches the past review comment from coderabbitai[bot]. Apply this fix:
- setAlpha: (color: string, alpha: number): string => { + setAlpha: (color: string | undefined, alpha: number): string | undefined => { + if (!color) return undefined;
96-103: Verify the priority of color-mix over relative color syntax.In the
adjustForLightnessmethod,color-mixis checked before relative color syntax, which is the opposite order from other methods. This inconsistency could lead to different behavior patterns.For consistency with other methods, consider reordering the checks:
- if (cssSupports.colorMix()) { - // Use color-mix with white for lightness adjustment - more conservative approach - const mixPercentage = Math.min( - lightness * MODERN_CSS_LIMITS.MIX_MULTIPLIER, - MODERN_CSS_LIMITS.MAX_LIGHTNESS_ADJUSTMENT, - ); - return createColorMixString(color, 'white', mixPercentage); - } - - if (cssSupports.relativeColorSyntax()) { + if (cssSupports.relativeColorSyntax()) { // Fallback to relative color syntax // Note: We can't cap at 100% or handle edge cases in CSS, but browsers will clamp automatically const adjustment = lightness * MODERN_CSS_LIMITS.LIGHTNESS_MULTIPLIER; return createRelativeColorString(color, 'h', 's', `calc(l + ${adjustment}%)`); } + + if (cssSupports.colorMix()) { + // Use color-mix with white for lightness adjustment - more conservative approach + const mixPercentage = Math.min( + lightness * MODERN_CSS_LIMITS.MIX_MULTIPLIER, + MODERN_CSS_LIMITS.MAX_LIGHTNESS_ADJUSTMENT, + ); + return createColorMixString(color, 'white', mixPercentage); + }packages/clerk-js/src/ui/utils/colors/README.md (1)
60-67: Remove file structure section to prevent documentation staleness.As mentioned in the past review comment from dstaley, detailed file structure information is "super easy to go stale after changes are made" and should be removed.
-## File Structure - -- `index.ts` - Main API that chooses between legacy/modern -- `legacy.ts` - JavaScript-based color manipulation -- `modern.ts` - CSS-based color manipulation -- `constants.ts` - Shared color values and limits -- `utils.ts` - Helper functions -- `scales.ts` - Color scale generation utilities
🧹 Nitpick comments (2)
packages/clerk-js/src/ui/utils/colors/modern.ts (1)
10-13: Remove duplicate JSDoc comment.The JSDoc comment on lines 11-13 is identical to the one at the top of the file (lines 1-4). This duplication is unnecessary.
-/** - * Modern CSS-based color manipulation utilities - * Uses color-mix() and relative color syntax when supported - */packages/clerk-js/src/ui/utils/colors/README.md (1)
25-25: Consider more concise wording.The phrase "in order to" could be simplified for better readability.
-- **How**: Uses native CSS color functions in order to support CSS variables +- **How**: Uses native CSS color functions to support CSS variables
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/clerk-js/src/ui/utils/colors/README.md(1 hunks)packages/clerk-js/src/ui/utils/colors/index.ts(1 hunks)packages/clerk-js/src/ui/utils/colors/modern.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/clerk-js/src/ui/utils/colors/index.ts
🧰 Additional context used
📓 Path-based instructions (5)
`**/*.{js,ts,tsx,jsx}`: All code must pass ESLint checks with the project's configuration. Use Prettier for consistent code formatting.
**/*.{js,ts,tsx,jsx}: All code must pass ESLint checks with the project's configuration.
Use Prettier for consistent code formatting.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/development.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/colors/modern.ts
`**/*.{ts,tsx}`: Maintain comprehensive JSDoc comments for public APIs.
**/*.{ts,tsx}: Maintain comprehensive JSDoc comments for public APIs.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/development.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/colors/modern.ts
`packages/**`: All publishable packages under the @clerk namespace must be located in the packages/ directory.
packages/**: All publishable packages under the @clerk namespace must be located in the packages/ directory.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/global.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/colors/modern.tspackages/clerk-js/src/ui/utils/colors/README.md
`**/*.ts`: Always define explicit return types for functions, especially public ...
**/*.ts: Always define explicit return types for functions, especially public APIs.
Use proper type annotations for variables and parameters where inference isn't clear.
Avoidanytype; preferunknownwhen type is uncertain, then narrow with type guards.
Useinterfacefor object shapes that might be extended; usetypefor unions, primitives, and computed types.
Preferreadonlyproperties for immutable data structures.
Useprivatefor internal implementation details,protectedfor inheritance, andpublicexplicitly for clarity in public APIs.
Prefer composition and interfaces over deep inheritance chains; use mixins for shared behavior.
Use ES6 imports/exports consistently; avoid barrel files (index.ts re-exports) to prevent circular dependencies.
Use type-only imports (import type { ... }) where possible.
Useas constfor literal types and thesatisfiesoperator for type checking without widening.
Enable--incrementaland--tsBuildInfoFilefor faster builds.
Use ESLint with @typescript-eslint/recommended rules and Prettier for formatting.
Use lint-staged and Husky for pre-commit checks.
Use type-coverage to measure type safety.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/typescript.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/colors/modern.ts
`**/*.md`: Follow all instructions, patterns and conventions that are defined in these MD files.
**/*.md: Follow all instructions, patterns and conventions that are defined in these MD files.
⚙️ Source: CodeRabbit Configuration File
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/colors/README.md
🧠 Learnings (3)
📓 Common learnings
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-23T12:25:40.214Z
Learning: Environment variables prefixed with CLERK_* and NEXT_PUBLIC_CLERK_* are supported for configuration across different environments.
packages/clerk-js/src/ui/utils/colors/modern.ts (12)
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/typescript.mdc:0-0
Timestamp: 2025-06-23T12:26:09.855Z
Learning: Use ES6 module syntax (import/export) consistently for maintainability and compatibility.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/typescript.mdc:0-0
Timestamp: 2025-06-23T12:26:09.855Z
Learning: Leverage modern TypeScript features such as generics, utility types (Omit, Partial, Pick), mapped types, conditional types, and template literal types for expressive and type-safe code.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Framework packages depend on @clerk/clerk-js for core functionality, while @clerk/shared and @clerk/types provide common utilities and TypeScript definitions used across packages.
Learnt from: jacekradko
PR: clerk/javascript#5905
File: .changeset/six-ears-wash.md:1-3
Timestamp: 2025-06-26T03:27:05.511Z
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: 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-23T12:25:40.214Z
Learning: All packages are published under the @clerk namespace on npm, ensuring consistent naming and discoverability.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Backend utilities are isolated in @clerk/backend, which is independent and used for server-side operations.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/global.mdc:0-0
Timestamp: 2025-06-23T12:25:34.662Z
Learning: All packages published from this repository must use the @clerk namespace.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Environment variables prefixed with CLERK_* and NEXT_PUBLIC_CLERK_* are supported for configuration across different environments.
Learnt from: panteliselef
PR: clerk/javascript#6097
File: packages/clerk-js/src/ui/elements/LineItems.tsx:89-89
Timestamp: 2025-06-10T09:38:56.214Z
Learning: In packages/clerk-js/src/ui/elements/LineItems.tsx, the Title component's React.forwardRef should use HTMLTableCellElement as the generic type parameter, even though it renders a Dt element. This is the correct implementation according to the codebase maintainer.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/typescript.mdc:0-0
Timestamp: 2025-06-23T12:26:09.855Z
Learning: In TypeScript, always define explicit return types for functions, especially for public APIs, to ensure type safety and clarity.
packages/clerk-js/src/ui/utils/colors/README.md (5)
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-23T12:25:40.214Z
Learning: Framework packages depend on @clerk/clerk-js for core functionality, while @clerk/shared and @clerk/types provide common utilities and TypeScript definitions used across packages.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/development.mdc:0-0
Timestamp: 2025-06-23T12:25:30.457Z
Learning: Maintain comprehensive JSDoc comments for all public APIs to improve documentation and developer experience.
Learnt from: jacekradko
PR: clerk/javascript#5905
File: .changeset/six-ears-wash.md:1-3
Timestamp: 2025-06-26T03:27:05.511Z
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.
🧬 Code Graph Analysis (1)
packages/clerk-js/src/ui/utils/colors/modern.ts (4)
packages/clerk-js/src/ui/utils/colors/index.ts (1)
colors(9-160)packages/clerk-js/src/ui/utils/cssSupports.ts (1)
cssSupports(101-110)packages/clerk-js/src/ui/utils/colors/utils.ts (3)
createRelativeColorString(51-59)createColorMixString(38-40)createAlphaColorMixString(67-69)packages/clerk-js/src/ui/utils/colors/constants.ts (2)
MODERN_CSS_LIMITS(99-106)COLOR_BOUNDS(91-96)
🪛 LanguageTool
packages/clerk-js/src/ui/utils/colors/README.md
[style] ~25-~25: Consider a more concise word here.
Context: ...How*: Uses native CSS color functions in order to support CSS variables - Example: `c...
(IN_ORDER_TO_PREMIUM)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (4)
packages/clerk-js/src/ui/utils/colors/modern.ts (2)
1-4: Clean and descriptive file header.The file header properly documents the purpose and approach of the module.
21-25: ```shell
#!/bin/bashInspect createRelativeColorString implementation
grep -R "createRelativeColorString" -n packages/clerk-js/src/ui/utils/colors/utils.ts || true
sed -n '1,200p' packages/clerk-js/src/ui/utils/colors/utils.ts || trueInspect initial tests for colors.lighten in modern.spec.ts
grep -n "colors\.lighten" -n packages/clerk-js/src/ui/utils/colors/tests/modern.spec.ts || true
sed -n '1,100p' packages/clerk-js/src/ui/utils/colors/tests/modern.spec.ts || true</details> <details> <summary>packages/clerk-js/src/ui/utils/colors/README.md (2)</summary> `1-68`: **Well-structured documentation with clear explanations.** The README provides excellent documentation of the progressive enhancement approach and clearly explains the difference between legacy and modern color handling. The examples are helpful for understanding the API usage. --- `37-49`: ```shell #!/bin/bash # List all files in the colors utils directory find packages/clerk-js/src/ui/utils/colors -maxdepth 1 -type f # Search for definitions and assignments of the documented functions rg -n "function lighten" -A3 packages/clerk-js/src/ui/utils/colors rg -n "lighten *=" -A3 packages/clerk-js/src/ui/utils/colors rg -n "function makeTransparent" -A3 packages/clerk-js/src/ui/utils/colors rg -n "makeTransparent *=" -A3 packages/clerk-js/src/ui/utils/colors rg -n "function setAlpha" -A3 packages/clerk-js/src/ui/utils/colors rg -n "setAlpha *=" -A3 packages/clerk-js/src/ui/utils/colors rg -n "function adjustForLightness" -A3 packages/clerk-js/src/ui/utils/colors rg -n "adjustForLightness *=" -A3 packages/clerk-js/src/ui/utils/colors
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (3)
packages/clerk-js/src/ui/utils/colors/modern.ts (1)
72-72: Fix return type inconsistency in setAlpha method.The
setAlphamethod returnsstringwhile all other methods in this module returnstring | undefined. This inconsistency could cause type errors when these methods are used interchangeably.- setAlpha: (color: string, alpha: number): string => { + setAlpha: (color: string | undefined, alpha: number): string | undefined => { + if (!color) return undefined;packages/clerk-js/src/ui/utils/colors/README.md (2)
60-67: Consider removing or simplifying the file structure section.As noted in past reviews, detailed file structure documentation can easily become stale after changes. Consider either removing this section or keeping it more high-level to reduce maintenance burden.
15-21: Add clarification about CSS variable support.Based on past review feedback, it would be helpful to explicitly mention that the legacy implementation doesn't support CSS variables, which is a key differentiator.
### Legacy Color Handling (`legacy.ts`) - **When**: Used in older browsers that don't support modern CSS color features -- **How**: Converts colors to HSLA objects and manipulates values in JavaScript +- **How**: Converts colors to HSLA objects and manipulates values in JavaScript (does not support CSS variables) - **Example**: `#ff0000` becomes `{ h: 0, s: 100, l: 50, a: 1 }` - **Output**: Returns HSLA strings like `hsla(0, 100%, 50%, 1)`
🧹 Nitpick comments (2)
packages/clerk-js/src/ui/utils/colors/modern.ts (1)
10-13: Remove duplicate JSDoc comment.The JSDoc comment on lines 11-13 duplicates the file header comment (lines 1-4). Since the file context already establishes this is for modern CSS utilities, the duplicate comment adds no value.
-/** - * Modern CSS-based color manipulation utilities - * Uses color-mix() and relative color syntax when supported - */packages/clerk-js/src/ui/utils/colors/README.md (1)
25-25: Improve style: Use more concise phrasing.Consider using "to support" instead of "in order to support" for more concise writing.
-- **How**: Uses native CSS color functions in order to support CSS variables +- **How**: Uses native CSS color functions to support CSS variables
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/clerk-js/src/ui/utils/colors/README.md(1 hunks)packages/clerk-js/src/ui/utils/colors/index.ts(1 hunks)packages/clerk-js/src/ui/utils/colors/modern.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/clerk-js/src/ui/utils/colors/index.ts
🧰 Additional context used
📓 Path-based instructions (5)
`**/*.{js,ts,tsx,jsx}`: All code must pass ESLint checks with the project's configuration. Use Prettier for consistent code formatting.
**/*.{js,ts,tsx,jsx}: All code must pass ESLint checks with the project's configuration.
Use Prettier for consistent code formatting.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/development.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/colors/modern.ts
`**/*.{ts,tsx}`: Maintain comprehensive JSDoc comments for public APIs.
**/*.{ts,tsx}: Maintain comprehensive JSDoc comments for public APIs.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/development.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/colors/modern.ts
`packages/**`: All publishable packages under the @clerk namespace must be located in the packages/ directory.
packages/**: All publishable packages under the @clerk namespace must be located in the packages/ directory.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/global.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/colors/modern.tspackages/clerk-js/src/ui/utils/colors/README.md
`**/*.ts`: Always define explicit return types for functions, especially public ...
**/*.ts: Always define explicit return types for functions, especially public APIs.
Use proper type annotations for variables and parameters where inference isn't clear.
Avoidanytype; preferunknownwhen type is uncertain, then narrow with type guards.
Useinterfacefor object shapes that might be extended; usetypefor unions, primitives, and computed types.
Preferreadonlyproperties for immutable data structures.
Useprivatefor internal implementation details,protectedfor inheritance, andpublicexplicitly for clarity in public APIs.
Prefer composition and interfaces over deep inheritance chains; use mixins for shared behavior.
Use ES6 imports/exports consistently; avoid barrel files (index.ts re-exports) to prevent circular dependencies.
Use type-only imports (import type { ... }) where possible.
Useas constfor literal types and thesatisfiesoperator for type checking without widening.
Enable--incrementaland--tsBuildInfoFilefor faster builds.
Use ESLint with @typescript-eslint/recommended rules and Prettier for formatting.
Use lint-staged and Husky for pre-commit checks.
Use type-coverage to measure type safety.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/typescript.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/colors/modern.ts
`**/*.md`: Follow all instructions, patterns and conventions that are defined in these MD files.
**/*.md: Follow all instructions, patterns and conventions that are defined in these MD files.
⚙️ Source: CodeRabbit Configuration File
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/colors/README.md
🧠 Learnings (3)
📓 Common learnings
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-23T12:25:40.214Z
Learning: Environment variables prefixed with CLERK_* and NEXT_PUBLIC_CLERK_* are supported for configuration across different environments.
packages/clerk-js/src/ui/utils/colors/modern.ts (12)
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/typescript.mdc:0-0
Timestamp: 2025-06-23T12:26:09.855Z
Learning: Use ES6 module syntax (import/export) consistently for maintainability and compatibility.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/typescript.mdc:0-0
Timestamp: 2025-06-23T12:26:09.855Z
Learning: Leverage modern TypeScript features such as generics, utility types (Omit, Partial, Pick), mapped types, conditional types, and template literal types for expressive and type-safe code.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Framework packages depend on @clerk/clerk-js for core functionality, while @clerk/shared and @clerk/types provide common utilities and TypeScript definitions used across packages.
Learnt from: jacekradko
PR: clerk/javascript#5905
File: .changeset/six-ears-wash.md:1-3
Timestamp: 2025-06-26T03:27:05.511Z
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: 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-23T12:25:40.214Z
Learning: All packages are published under the @clerk namespace on npm, ensuring consistent naming and discoverability.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Backend utilities are isolated in @clerk/backend, which is independent and used for server-side operations.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/global.mdc:0-0
Timestamp: 2025-06-23T12:25:34.662Z
Learning: All packages published from this repository must use the @clerk namespace.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Environment variables prefixed with CLERK_* and NEXT_PUBLIC_CLERK_* are supported for configuration across different environments.
Learnt from: panteliselef
PR: clerk/javascript#6097
File: packages/clerk-js/src/ui/elements/LineItems.tsx:89-89
Timestamp: 2025-06-10T09:38:56.214Z
Learning: In packages/clerk-js/src/ui/elements/LineItems.tsx, the Title component's React.forwardRef should use HTMLTableCellElement as the generic type parameter, even though it renders a Dt element. This is the correct implementation according to the codebase maintainer.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/typescript.mdc:0-0
Timestamp: 2025-06-23T12:26:09.855Z
Learning: In TypeScript, always define explicit return types for functions, especially for public APIs, to ensure type safety and clarity.
packages/clerk-js/src/ui/utils/colors/README.md (5)
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-23T12:25:40.214Z
Learning: Framework packages depend on @clerk/clerk-js for core functionality, while @clerk/shared and @clerk/types provide common utilities and TypeScript definitions used across packages.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/development.mdc:0-0
Timestamp: 2025-06-23T12:25:30.457Z
Learning: Maintain comprehensive JSDoc comments for all public APIs to improve documentation and developer experience.
Learnt from: jacekradko
PR: clerk/javascript#5905
File: .changeset/six-ears-wash.md:1-3
Timestamp: 2025-06-26T03:27:05.511Z
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.
🪛 LanguageTool
packages/clerk-js/src/ui/utils/colors/README.md
[style] ~25-~25: Consider a more concise word here.
Context: ...How*: Uses native CSS color functions in order to support CSS variables - Example: `c...
(IN_ORDER_TO_PREMIUM)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: Integration Tests (nextjs, chrome, 13)
- GitHub Check: Integration Tests (nextjs, chrome, 15)
- GitHub Check: Integration Tests (billing, chrome)
- GitHub Check: Integration Tests (nextjs, chrome, 14)
- GitHub Check: Integration Tests (generic, chrome)
🔇 Additional comments (3)
packages/clerk-js/src/ui/utils/colors/modern.ts (2)
33-33: Consider the fallback behavior for unsupported browsers.Based on the retrieved learnings, @clerk/clerk-js only supports browsers from the last two years where modern CSS features are fully supported. However, the current fallback simply returns the original color, which may not provide the expected visual result.
Should this throw an error or log a warning when modern CSS features aren't supported, given the target browser constraints?
96-102: Approve the color-mix priority over relative color syntax.Good decision to prioritize
color-mix()over relative color syntax inadjustForLightnessas it has broader support and handles edge cases better.packages/clerk-js/src/ui/utils/colors/README.md (1)
37-49: Approve comprehensive API examples.The function examples clearly demonstrate the unified API and show practical usage patterns that developers will find helpful.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (3)
packages/clerk-js/src/ui/utils/colors/index.ts (1)
7-158: Consider pre-computing the color implementation selection for better performance.The current approach checks
cssSupports.modernColor()for each method call. As suggested in previous reviews, consider defining the colors object as a pre-computed implementation to avoid repeated cache checks:const hasModernSupport = cssSupports.modernColor(); export const colors = hasModernSupport ? { // modern implementation methods } : { // legacy implementation methods };However, the current implementation is clear and functionally correct.
packages/clerk-js/src/ui/utils/colors/modern.ts (2)
40-40: Standardize input validation across all methods.The
makeTransparentmethod uses different validation logic than other methods by checking both!colorandcolor.toString() === ''. For consistency, either apply the same validation pattern across all methods or document why this method requires special handling.- if (!color || color.toString() === '') return undefined; + if (!color) return undefined;
72-72: Align parameter types with other methods for consistency.The
setAlphamethod acceptscolor: stringwhile other methods acceptcolor: string | undefined. This inconsistency could lead to type errors when using these methods interchangeably.- setAlpha: (color: string, alpha: number): string => { + setAlpha: (color: string | undefined, alpha: number): string | undefined => { + if (!color) return undefined;
🧹 Nitpick comments (1)
packages/clerk-js/src/ui/utils/colors/README.md (1)
25-25: Consider more concise wording.- **How**: Uses native CSS color functions in order to support CSS variables + **How**: Uses native CSS color functions to support CSS variables
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
packages/clerk-js/src/ui/utils/__tests__/cssSupports.test.ts(1 hunks)packages/clerk-js/src/ui/utils/colors/README.md(1 hunks)packages/clerk-js/src/ui/utils/colors/__tests__/index.spec.ts(1 hunks)packages/clerk-js/src/ui/utils/colors/__tests__/scales.spec.ts(1 hunks)packages/clerk-js/src/ui/utils/colors/constants.ts(1 hunks)packages/clerk-js/src/ui/utils/colors/index.ts(1 hunks)packages/clerk-js/src/ui/utils/colors/modern.ts(1 hunks)packages/clerk-js/src/ui/utils/colors/scales.ts(1 hunks)packages/clerk-js/src/ui/utils/cssSupports.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- packages/clerk-js/src/ui/utils/cssSupports.ts
- packages/clerk-js/src/ui/utils/colors/tests/index.spec.ts
- packages/clerk-js/src/ui/utils/colors/tests/scales.spec.ts
- packages/clerk-js/src/ui/utils/colors/scales.ts
🧰 Additional context used
📓 Path-based instructions (8)
`**/*.{js,ts,tsx,jsx}`: All code must pass ESLint checks with the project's configuration. Use Prettier for consistent code formatting.
**/*.{js,ts,tsx,jsx}: All code must pass ESLint checks with the project's configuration.
Use Prettier for consistent code formatting.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/development.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/__tests__/cssSupports.test.tspackages/clerk-js/src/ui/utils/colors/index.tspackages/clerk-js/src/ui/utils/colors/modern.tspackages/clerk-js/src/ui/utils/colors/constants.ts
`**/*.{ts,tsx}`: Maintain comprehensive JSDoc comments for public APIs.
**/*.{ts,tsx}: Maintain comprehensive JSDoc comments for public APIs.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/development.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/__tests__/cssSupports.test.tspackages/clerk-js/src/ui/utils/colors/index.tspackages/clerk-js/src/ui/utils/colors/modern.tspackages/clerk-js/src/ui/utils/colors/constants.ts
`**/*.{test,spec}.{js,ts,tsx,jsx}`: Unit tests are required for all new functionality.
**/*.{test,spec}.{js,ts,tsx,jsx}: Unit tests are required for all new functionality.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/development.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/__tests__/cssSupports.test.ts
`**/__tests__/**/*.{js,ts,tsx,jsx}`: Test files should be co-located with source files or in `__tests__` directories.
**/__tests__/**/*.{js,ts,tsx,jsx}: Test files should be co-located with source files or in__tests__directories.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/development.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/__tests__/cssSupports.test.ts
`packages/**`: All publishable packages under the @clerk namespace must be located in the packages/ directory.
packages/**: All publishable packages under the @clerk namespace must be located in the packages/ directory.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/global.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/__tests__/cssSupports.test.tspackages/clerk-js/src/ui/utils/colors/index.tspackages/clerk-js/src/ui/utils/colors/modern.tspackages/clerk-js/src/ui/utils/colors/constants.tspackages/clerk-js/src/ui/utils/colors/README.md
`**/*.ts`: Always define explicit return types for functions, especially public ...
**/*.ts: Always define explicit return types for functions, especially public APIs.
Use proper type annotations for variables and parameters where inference isn't clear.
Avoidanytype; preferunknownwhen type is uncertain, then narrow with type guards.
Useinterfacefor object shapes that might be extended; usetypefor unions, primitives, and computed types.
Preferreadonlyproperties for immutable data structures.
Useprivatefor internal implementation details,protectedfor inheritance, andpublicexplicitly for clarity in public APIs.
Prefer composition and interfaces over deep inheritance chains; use mixins for shared behavior.
Use ES6 imports/exports consistently; avoid barrel files (index.ts re-exports) to prevent circular dependencies.
Use type-only imports (import type { ... }) where possible.
Useas constfor literal types and thesatisfiesoperator for type checking without widening.
Enable--incrementaland--tsBuildInfoFilefor faster builds.
Use ESLint with @typescript-eslint/recommended rules and Prettier for formatting.
Use lint-staged and Husky for pre-commit checks.
Use type-coverage to measure type safety.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/typescript.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/__tests__/cssSupports.test.tspackages/clerk-js/src/ui/utils/colors/index.tspackages/clerk-js/src/ui/utils/colors/modern.tspackages/clerk-js/src/ui/utils/colors/constants.ts
`**/index.ts`: Use index.ts files for clean imports but avoid deep barrel exports.
**/index.ts: Use index.ts files for clean imports but avoid deep barrel exports.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/react.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/colors/index.ts
`**/*.md`: Follow all instructions, patterns and conventions that are defined in these MD files.
**/*.md: Follow all instructions, patterns and conventions that are defined in these MD files.
⚙️ Source: CodeRabbit Configuration File
List of files the instruction was applied to:
packages/clerk-js/src/ui/utils/colors/README.md
🧠 Learnings (6)
📓 Common learnings
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-23T12:25:40.214Z
Learning: Environment variables prefixed with CLERK_* and NEXT_PUBLIC_CLERK_* are supported for configuration across different environments.
packages/clerk-js/src/ui/utils/__tests__/cssSupports.test.ts (3)
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-23T12:25:40.214Z
Learning: Unit tests are run with Jest and Vitest, integration tests with Playwright, and component testing with React Testing Library, demonstrating a layered testing strategy.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/development.mdc:0-0
Timestamp: 2025-06-23T12:25:30.457Z
Learning: Use Jest for unit testing and React Testing Library for component testing; use Playwright for end-to-end integration tests.
packages/clerk-js/src/ui/utils/colors/index.ts (4)
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-23T12:25:40.214Z
Learning: Framework packages depend on @clerk/clerk-js for core functionality, while @clerk/shared and @clerk/types provide common utilities and TypeScript definitions used across packages.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/typescript.mdc:0-0
Timestamp: 2025-06-23T12:26:09.855Z
Learning: Use ES6 module syntax (import/export) consistently for maintainability and compatibility.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/development.mdc:0-0
Timestamp: 2025-06-23T12:25:30.457Z
Learning: Backward compatibility should be maintained whenever possible, and progressive enhancement should be used for advanced features.
packages/clerk-js/src/ui/utils/colors/modern.ts (12)
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/typescript.mdc:0-0
Timestamp: 2025-06-23T12:26:09.855Z
Learning: Use ES6 module syntax (import/export) consistently for maintainability and compatibility.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/typescript.mdc:0-0
Timestamp: 2025-06-23T12:26:09.855Z
Learning: Leverage modern TypeScript features such as generics, utility types (Omit, Partial, Pick), mapped types, conditional types, and template literal types for expressive and type-safe code.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Framework packages depend on @clerk/clerk-js for core functionality, while @clerk/shared and @clerk/types provide common utilities and TypeScript definitions used across packages.
Learnt from: jacekradko
PR: clerk/javascript#5905
File: .changeset/six-ears-wash.md:1-3
Timestamp: 2025-06-26T03:27:05.511Z
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: 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-23T12:25:40.214Z
Learning: All packages are published under the @clerk namespace on npm, ensuring consistent naming and discoverability.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Backend utilities are isolated in @clerk/backend, which is independent and used for server-side operations.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/global.mdc:0-0
Timestamp: 2025-06-23T12:25:34.662Z
Learning: All packages published from this repository must use the @clerk namespace.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Environment variables prefixed with CLERK_* and NEXT_PUBLIC_CLERK_* are supported for configuration across different environments.
Learnt from: panteliselef
PR: clerk/javascript#6097
File: packages/clerk-js/src/ui/elements/LineItems.tsx:89-89
Timestamp: 2025-06-10T09:38:56.214Z
Learning: In packages/clerk-js/src/ui/elements/LineItems.tsx, the Title component's React.forwardRef should use HTMLTableCellElement as the generic type parameter, even though it renders a Dt element. This is the correct implementation according to the codebase maintainer.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/typescript.mdc:0-0
Timestamp: 2025-06-23T12:26:09.855Z
Learning: In TypeScript, always define explicit return types for functions, especially for public APIs, to ensure type safety and clarity.
packages/clerk-js/src/ui/utils/colors/constants.ts (9)
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-23T12:25:40.214Z
Learning: Framework packages depend on @clerk/clerk-js for core functionality, while @clerk/shared and @clerk/types provide common utilities and TypeScript definitions used across packages.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: All packages are published under the @clerk namespace on npm, ensuring consistent naming and discoverability.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/typescript.mdc:0-0
Timestamp: 2025-06-23T12:26:09.855Z
Learning: Use ES6 module syntax (import/export) consistently for maintainability and compatibility.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/development.mdc:0-0
Timestamp: 2025-06-23T12:25:30.457Z
Learning: Always use TypeScript for all packages to ensure type safety and maintainability.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Unit tests are run with Jest and Vitest, integration tests with Playwright, and component testing with React Testing Library, demonstrating a layered testing strategy.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/development.mdc:0-0
Timestamp: 2025-06-23T12:25:30.457Z
Learning: Unit tests are mandatory for all new functionality, and test coverage must remain above established thresholds.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/global.mdc:0-0
Timestamp: 2025-06-23T12:25:34.662Z
Learning: Comprehensive testing is enforced, including unit, integration, and E2E tests, to ensure code quality across supported frameworks and platforms.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/typescript.mdc:0-0
Timestamp: 2025-06-23T12:26:09.855Z
Learning: Leverage modern TypeScript features such as generics, utility types (Omit, Partial, Pick), mapped types, conditional types, and template literal types for expressive and type-safe code.
packages/clerk-js/src/ui/utils/colors/README.md (5)
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/development.mdc:0-0
Timestamp: 2025-06-23T12:25:30.457Z
Learning: Maintain comprehensive JSDoc comments for all public APIs to improve documentation and developer experience.
Learnt from: jacekradko
PR: clerk/javascript#5905
File: .changeset/six-ears-wash.md:1-3
Timestamp: 2025-06-26T03:27:05.511Z
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/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Framework packages depend on @clerk/clerk-js for core functionality, while @clerk/shared and @clerk/types provide common utilities and TypeScript definitions used across packages.
🧬 Code Graph Analysis (3)
packages/clerk-js/src/ui/utils/__tests__/cssSupports.test.ts (1)
packages/clerk-js/src/ui/utils/cssSupports.ts (2)
clearCache(46-50)cssSupports(10-44)
packages/clerk-js/src/ui/utils/colors/modern.ts (5)
packages/clerk-js/src/ui/utils/colors/index.ts (1)
colors(7-158)packages/clerk-js/src/ui/utils/colors/legacy.ts (1)
colors(394-404)packages/clerk-js/src/ui/utils/cssSupports.ts (1)
cssSupports(10-44)packages/clerk-js/src/ui/utils/colors/utils.ts (3)
createRelativeColorString(51-59)createColorMixString(38-40)createAlphaColorMixString(67-69)packages/clerk-js/src/ui/utils/colors/constants.ts (2)
MODERN_CSS_LIMITS(100-107)COLOR_BOUNDS(92-97)
packages/clerk-js/src/ui/utils/colors/constants.ts (1)
packages/types/src/appearance.ts (1)
ColorScale(45-45)
🪛 LanguageTool
packages/clerk-js/src/ui/utils/colors/README.md
[style] ~25-~25: Consider a more concise word here.
Context: ...How*: Uses native CSS color functions in order to support CSS variables - Example: `c...
(IN_ORDER_TO_PREMIUM)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: Build Packages
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (3)
packages/clerk-js/src/ui/utils/__tests__/cssSupports.test.ts (1)
1-42: LGTM! Comprehensive test coverage for CSS feature detection.The test setup correctly mocks
CSS.supportsto simulate different browser support scenarios and validates both the feature detection logic and caching behavior. The test cases appropriately cover all methods in thecssSupportsutility.packages/clerk-js/src/ui/utils/colors/constants.ts (2)
48-50: Well-implemented synchronization between alpha constants.The
ALPHA_VALUESderivation fromALPHA_PERCENTAGESensures they stay in sync automatically, addressing the previous review suggestion. This approach prevents inconsistencies that could arise from manual maintenance.
1-107: LGTM! Comprehensive and well-organized constants module.The constants are logically grouped, properly typed with
as constassertions, and provide a solid foundation for the color utilities system. The organization makes it easy to understand the relationships between different color scale concepts.
🎨 Add Modern CSS Color-Mix Utilities
Resolves USER-2201
Overview
This PR introduces modern CSS color manipulation utilities that leverage native browser features like
color-mix()and relative color syntax when supported, while maintaining backward compatibility with legacy HSLA-based color manipulation.What's New
Progressive Enhancement Architecture
Modern CSS Features
color-mix()Support: Leverages native CSS color mixinghsl(from color h s l)syntax when supportedcolor-mix(in srgb, transparent, color X%)for opacityCSS Variable Support
This enhancement enables CSS custom property support within the
appearance.variablesobject:Color System Architecture
colors/index.ts- Unified API that chooses between modern/legacycolors/modern.ts- Modern CSS-based color manipulationcolors/legacy.ts- JavaScript-based color manipulation with CSS variable resolutioncolors/utils.ts- Shared utilities and color generation functionscolors/constants.ts- Color scales, mix data, and CSS limitscolors/scales.ts- Color scale generation utilitiescolors/README.md- DocumentationChecklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Bug Fixes
Tests
Chores