fix(clerk-js): CSS Variables#6100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
tmilewski wants to merge 10 commits into from
Closed

fix(clerk-js): CSS Variables #6100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4276ecd
Create colorMix.ts
alexcarpenter Jun 4, 2025
167b12c
refactor(colorMix): Introduce colorMix function for color manipulatio…
alexcarpenter Jun 4, 2025
a33cec6
wip
alexcarpenter Jun 4, 2025
eb9f682
wip
alexcarpenter Jun 4, 2025
f7ebfcc
wip
alexcarpenter Jun 4, 2025
3569d15
fix(clerk-js): Color typing
tmilewski Jun 10, 2025
23316c5
feat(clerk-js): Introduce CSS variables
tmilewski Jun 12, 2025
a1299d6
feat(clerk-js): Introduce CSS Variables
tmilewski Jun 12, 2025
3bf7284
chore(clerk-js): Minor clean-up
tmilewski Jun 12, 2025
94cb7b8
chore: Add interim changeset
tmilewski Jun 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/warm-pens-tickle.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': minor
---

[TODO]
Comment on lines +1 to +5

@coderabbitaicoderabbitaiBotJun 13, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Populate the changeset before merging

[TODO] will reach the changelog verbatim, leaving consumers without any context for the minor release. Replace it with a concise summary of the CSS-variable migration and colour-utility refactor.

🤖 Prompt for AI Agents
In the file .changeset/warm-pens-tickle.md at lines 1 to 5, replace the
placeholder text "[TODO]" with a concise summary describing the CSS-variable
migration and colour-utility refactor. This summary should clearly explain the
changes made in this minor release to provide useful context for consumers in
the changelog.

2 changes: 1 addition & 1 deletion packages/clerk-js/sandbox/app.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -345,7 +345,7 @@ void (async () => {
signUpUrl: '/sign-up',
});
renderCurrentRoute();
updateVariables();
// updateVariables(); // Commented out as it overrides css variables
updateOtherOptions();
} else {
console.error(`Unknown route: "${route}".`);
Expand Down
21 changes: 21 additions & 0 deletions packages/clerk-js/sandbox/template.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,27 @@
name="viewport"
content="width=device-width,initial-scale=1"
/>
<style>
:root {
--clerk-primary: #2F3037; /* default: #2F3037 */
--clerk-foreground: #212126; /* default: #212126 */
--clerk-background: white; /* default: white */
--clerk-primary-foreground: white; /* default: white */
--clerk-secondary-foreground: #747686; /* default: #747686 */
--clerk-danger: #EF4444; /* default: #EF4444 */
--clerk-input: white; /* default: white */
--clerk-neutral: black; /* default: black */

--clerk-line-height: normal; /* default: normal */
--clerk-spacing: 1rem; /* default: 1rem */
--clerk-border-width: 1px; /* default: 1px */
--clerk-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* default: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" */
--clerk-font-size: 0.8125rem; /* default: 0.8125rem */
--clerk-font-weight: 400; /* default: 400 */
--clerk-letter-spacing: normal; /* default: normal */
--clerk-border-radius: 0.375rem; /* default: 0.375rem */
}
</style>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
Expand Down
13 changes: 3 additions & 10 deletions packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -13,8 +13,7 @@ import { Tooltip } from '@/ui/elements/Tooltip';
import { LockDottedCircle } from '@/ui/icons';
import { Textarea } from '@/ui/primitives';
import type { ThemableCssProp } from '@/ui/styledSystem';
import { common } from '@/ui/styledSystem';
import * as utils from '@/ui/utils';
import { colorMix } from '@/ui/utils/colorMix';

export function OAuthConsentInternal() {
const { scopes, oAuthApplicationName, oAuthApplicationLogoUrl, redirectUrl, onDeny, onAllow } =
Expand DownExpand Up@@ -121,10 +120,7 @@ export function OAuthConsentInternal() {
<Box
sx={t => ({
padding: t.space.$3,
background: common.mergedColorsBackground(
utils.colors.setAlpha(t.colors.$colorBackground, 1),
t.colors.$neutralAlpha50,
),
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
})}
Comment on lines 121 to 124

@coderabbitaicoderabbitaiBotJun 13, 2025•
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Color-mix may break on non-Chromium browsers – add fallback

backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50) generates a color-mix() expression, which is still behind flags in Safari 17 and completely unsupported in Firefox ≤ 126. Users on those browsers will get no background color.

 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
+backgroundColor: [+ colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),+ t.colors.$neutralAlpha50, // fallback for browsers without color-mix+].join(','),

This keeps the new look while preserving graceful degradation.

🏁 Script executed:

#!/bin/bashset -euo pipefail
# Search for occurrences of `colorMix` in the codebase
grep -R "colorMix" -n .

Length of output: 65620

🏁 Script executed:

#!/bin/bashset -euo pipefail
# Display first 200 lines of the colorMix utility to verify its output
sed -n '1,200p' packages/clerk-js/src/ui/utils/colorMix.ts

Length of output: 5964

🏁 Script executed:

#!/bin/bashset -euo pipefail
# Show lines 1-200 of the OAuthConsent.tsx for context
sed -n '1,200p' packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx

Length of output: 7269

Add a solid fallback before using colorMix for unsupported browsers

To avoid an invalid background-color in browsers that don’t yet support color-mix(), declare the plain alpha background first, then override with your mixed color. For example, in packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx around line 123:

 sx={t => ({
padding: t.space.$3,
- backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),+ // fallback for browsers without color-mix+ backgroundColor: t.colors.$neutralAlpha50,+ backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
})}

Please apply the same pattern wherever colorMix(…, t.colors.$neutralAlpha50) (or other mixes) is used, e.g.:

• packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
• packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx
• packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
• packages/clerk-js/src/ui/elements/Disclosure.tsx
• packages/clerk-js/src/ui/elements/Drawer.tsx
• packages/clerk-js/src/ui/elements/Navbar.tsx
• packages/clerk-js/src/ui/elements/PopoverCard.tsx

Consider extracting a helper or theme token if this becomes a widespread pattern.

📝 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.

Suggested change
sx={t=>({
padding: t.space.$3,
background: common.mergedColorsBackground(
utils.colors.setAlpha(t.colors.$colorBackground,1),
t.colors.$neutralAlpha50,
),
backgroundColor: colorMix(t.colors.$colorBackground,t.colors.$neutralAlpha50),
})}
sx={t=>({
padding: t.space.$3,
+// fallback for browsers without color-mix
+backgroundColor: t.colors.$neutralAlpha50,
backgroundColor: colorMix(t.colors.$colorBackground,t.colors.$neutralAlpha50),
})}
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx around
lines 121 to 124, the backgroundColor uses colorMix which is unsupported in some
browsers. Fix this by first setting backgroundColor to the solid alpha color
t.colors.$neutralAlpha50 as a fallback, then override it with the colorMix
expression. Apply this pattern to ensure graceful degradation and consider
creating a helper or theme token if this pattern is used frequently across the
codebase.

@dstaleydstaleyJun 16, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This package only supports browsers released in the last two years (since May 8 2023), so all of our supported browsers support color-mix().

@coderabbitaicoderabbitaiBotJun 16, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dstaley Thank you for the clarification! I appreciate you letting me know about the package's browser support policy. That makes perfect sense - if you're only supporting browsers from the last two years, then color-mix() support is indeed guaranteed and no fallbacks are needed.

✏️ Learnings added
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.363Z
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.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

>
<Text
Expand DownExpand Up@@ -333,10 +329,7 @@ function ConnectionIcon({ size = 'md', sx }: { size?: 'sm' | 'md'; sx?: Themable
<Box
sx={t => [
{
background: common.mergedColorsBackground(
utils.colors.setAlpha(t.colors.$colorBackground, 1),
t.colors.$neutralAlpha50,
),
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
borderRadius: t.radii.$circle,
borderWidth: t.borderWidths.$normal,
borderStyle: t.borderStyles.$solid,
Expand Down
10 changes: 4 additions & 6 deletions packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,7 @@ import * as React from 'react';

import { Switch } from '@/ui/elements/Switch';
import { Tooltip } from '@/ui/elements/Tooltip';
import { colorMix } from '@/ui/utils/colorMix';

import { useProtect } from '../../common';
import { usePlansContext, usePricingTableContext, useSubscriberTypeContext } from '../../contexts';
Expand All@@ -22,8 +23,8 @@ import {
Text,
} from '../../customizables';
import { Check, Plus } from '../../icons';
import { common, InternalThemeProvider } from '../../styledSystem';
import { colors, getClosestProfileScrollBox } from '../../utils';
import { InternalThemeProvider } from '../../styledSystem';
import { getClosestProfileScrollBox } from '../../utils';

interface PricingTableDefaultProps {
plans?: CommercePlanResource[] | null;
Expand DownExpand Up@@ -167,10 +168,7 @@ function Card(props: CardProps) {
gap: 0,
gridTemplateRows: 'subgrid',
gridRow: 'span 5',
background: common.mergedColorsBackground(
colors.setAlpha(t.colors.$colorBackground, 1),
t.colors.$neutralAlpha50,
),
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
borderWidth: t.borderWidths.$normal,
borderStyle: t.borderStyles.$solid,
borderColor: t.colors.$neutralAlpha100,
Expand Down
6 changes: 3 additions & 3 deletions packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,6 +3,7 @@ import * as React from 'react';

import { Avatar } from '@/ui/elements/Avatar';
import { SegmentedControl } from '@/ui/elements/SegmentedControl';
import { colorMix } from '@/ui/utils/colorMix';

import { usePlansContext } from '../../contexts';
import {
Expand All@@ -21,8 +22,7 @@ import {
} from '../../customizables';
import { usePrefersReducedMotion } from '../../hooks';
import { Check, InformationCircle } from '../../icons';
import { common, InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';
import { colors } from '../../utils';
import { InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';

interface PricingTableMatrixProps {
plans: CommercePlanResource[] | undefined;
Expand DownExpand Up@@ -55,7 +55,7 @@ export function PricingTableMatrix({
});

const highlightBackgroundColor: ThemableCssProp = t => ({
background: common.mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha25),
background: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha25),
});

const gridTemplateColumns = React.useMemo(() => `repeat(${plans.length + 1}, minmax(9.375rem,1fr))`, [plans.length]);
Expand Down
60 changes: 33 additions & 27 deletions packages/clerk-js/src/ui/customizables/parseVariables.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,25 +2,33 @@ import type { Theme } from '@clerk/types';

import { spaceScaleKeys } from '../foundations/sizes';
import type { fontSizes, fontWeights } from '../foundations/typography';
import { fromEntries, removeUndefinedProps } from '../utils';
import {
colorOptionToHslaAlphaScale,
colorOptionToHslaLightnessScale,
colors,
fromEntries,
removeUndefinedProps,
} from '../utils';
createAlphaScaleWithTransparentize,
createColorMixLightnessScale,
lighten,
transparentize,
} from '../utils/colorMix';

export const createColorScales = (theme: Theme) => {
const variables = theme.variables || {};

const primaryScale = colorOptionToHslaLightnessScale(variables.colorPrimary, 'primary');
const primaryAlphaScale = colorOptionToHslaAlphaScale(primaryScale?.primary500, 'primaryAlpha');
const dangerScale = colorOptionToHslaLightnessScale(variables.colorDanger, 'danger');
const dangerAlphaScale = colorOptionToHslaAlphaScale(dangerScale?.danger500, 'dangerAlpha');
const successScale = colorOptionToHslaLightnessScale(variables.colorSuccess, 'success');
const successAlphaScale = colorOptionToHslaAlphaScale(successScale?.success500, 'successAlpha');
const warningScale = colorOptionToHslaLightnessScale(variables.colorWarning, 'warning');
const warningAlphaScale = colorOptionToHslaAlphaScale(warningScale?.warning500, 'warningAlpha');
const primaryScale = createColorMixLightnessScale(variables.colorPrimary, 'primary');
const primaryBase = primaryScale?.primary500;
const primaryAlphaScale = primaryBase ? createAlphaScaleWithTransparentize(primaryBase, 'primaryAlpha') : undefined;
const dangerScale = createColorMixLightnessScale(variables.colorDanger, 'danger');
const dangerBase = dangerScale?.danger500;
const dangerAlphaScale = dangerBase ? createAlphaScaleWithTransparentize(dangerBase, 'dangerAlpha') : undefined;
const successScale = createColorMixLightnessScale(variables.colorSuccess, 'success');
const successBase = successScale?.success500;
const successAlphaScale = successBase ? createAlphaScaleWithTransparentize(successBase, 'successAlpha') : undefined;
const warningScale = createColorMixLightnessScale(variables.colorWarning, 'warning');
const warningBase = warningScale?.warning500;
const warningAlphaScale = warningBase ? createAlphaScaleWithTransparentize(warningBase, 'warningAlpha') : undefined;
const neutralAlphaScales =
typeof variables.colorNeutral === 'string' && variables.colorNeutral
? createAlphaScaleWithTransparentize(variables.colorNeutral, 'neutralAlpha')
: {};

return removeUndefinedProps({
...primaryScale,
Expand All@@ -31,22 +39,20 @@ export const createColorScales = (theme: Theme) => {
...successAlphaScale,
...warningScale,
...warningAlphaScale,
...colorOptionToHslaAlphaScale(variables.colorNeutral, 'neutralAlpha'),
primaryHover: colors.adjustForLightness(primaryScale?.primary500),
colorTextOnPrimaryBackground: toHSLA(variables.colorTextOnPrimaryBackground),
colorText: toHSLA(variables.colorText),
colorTextSecondary: toHSLA(variables.colorTextSecondary) || colors.makeTransparent(variables.colorText, 0.35),
colorInputText: toHSLA(variables.colorInputText),
colorBackground: toHSLA(variables.colorBackground),
colorInputBackground: toHSLA(variables.colorInputBackground),
colorShimmer: toHSLA(variables.colorShimmer),
...neutralAlphaScales,
// TODO(Colors): We are not adjusting the lightness based on the colorPrimary lightness
primaryHover: primaryBase ? lighten(primaryBase, '90%') : undefined,
colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,
Comment on lines +44 to +45

@coderabbitaicoderabbitaiBotJun 13, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

lighten(..., '90%') hardly lightens

lighten(color, '90%') keeps 90 % of the base color and only 10 % white, so the result is barely lighter. If the intent was “90 % lighter”, flip the numbers:

-primaryHover: primaryBase ? lighten(primaryBase, '90%') : undefined,+primaryHover: primaryBase ? lighten(primaryBase, '10%') : undefined,

or clarify with a named helper (lightenBy(percentageOfWhite)) to avoid future confusion.

📝 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.

Suggested change
primaryHover: primaryBase ? lighten(primaryBase,'90%') : undefined,
colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,
primaryHover: primaryBase ? lighten(primaryBase,'10%') : undefined,
colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/customizables/parseVariables.ts around lines 44 to
45, the lighten function is called with '90%' which results in only a slight
lightening because it retains 90% of the base color. To fix this, invert the
percentage to '10%' to achieve a 90% lighter color or refactor the code to use a
named helper function like lightenBy that clearly indicates the percentage of
white added, improving clarity and correctness.

colorText: variables.colorText,
colorTextSecondary:
variables.colorTextSecondary || (variables.colorText ? transparentize(variables.colorText, '35%') : undefined),
colorInputText: variables.colorInputText,
colorBackground: variables.colorBackground,
colorInputBackground: variables.colorInputBackground,
colorShimmer: variables.colorShimmer,
});
};

export const toHSLA = (str: string | undefined) => {
return str ? colors.toHslaString(str) : undefined;
};

export const createRadiiUnits = (theme: Theme) => {
const { borderRadius } = theme.variables || {};
if (borderRadius === undefined) {
Expand Down
10 changes: 4 additions & 6 deletions packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
import React from 'react';

import { colorMix } from '@/ui/utils/colorMix';

import { useEnvironment } from '../../contexts';
import { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../customizables';
import { useDevMode } from '../../hooks/useDevMode';
import type { InternalTheme, PropsOfComponent } from '../../styledSystem';
import { common, mqu } from '../../styledSystem';
import { colors } from '../../utils';
import { mqu } from '../../styledSystem';
import { Card } from '.';

type CardFooterProps = PropsOfComponent<typeof Flex> & {
Expand DownExpand Up@@ -50,10 +51,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
t => ({
marginTop: `-${t.space.$2}`,
paddingTop: t.space.$2,
background: common.mergedColorsBackground(
colors.setAlpha(t.colors.$colorBackground, 1),
t.colors.$neutralAlpha50,
),
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
'&:empty': {
padding: 0,
marginTop: 0,
Expand Down
8 changes: 2 additions & 6 deletions packages/clerk-js/src/ui/elements/Disclosure.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,8 +5,7 @@ import { Box, descriptors, Icon, SimpleButton, Span, useAppearance } from '../cu
import { usePrefersReducedMotion } from '../hooks';
import { ChevronDown } from '../icons';
import type { ThemableCssProp } from '../styledSystem';
import { common } from '../styledSystem';
import { colors } from '../utils';
import { colorMix } from '../utils/colorMix';

/* -------------------------------------------------------------------------------------------------
* Disclosure Context
Expand DownExpand Up@@ -168,10 +167,7 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, re
borderWidth: t.borderWidths.$normal,
borderStyle: t.borderStyles.$solid,
borderColor: t.colors.$neutralAlpha100,
background: common.mergedColorsBackground(
colors.setAlpha(t.colors.$colorBackground, 1),
t.colors.$neutralAlpha50,
),
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
})}
>
{children}
Expand Down
22 changes: 6 additions & 16 deletions packages/clerk-js/src/ui/elements/Drawer.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,8 +19,7 @@ import { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../c
import { useDirection, usePrefersReducedMotion, useScrollLock } from '../hooks';
import { Close as CloseIcon } from '../icons';
import type { ThemableCssProp } from '../styledSystem';
import { common } from '../styledSystem';
import { colors } from '../utils';
import { colorMix, transparentize } from '../utils/colorMix';
import { IconButton } from './IconButton';

type FloatingPortalProps = React.ComponentProps<typeof FloatingPortal>;
Expand DownExpand Up@@ -151,7 +150,7 @@ export const FloatingOverlay = React.forwardRef(function FloatingOverlay(
sx={[
t => ({
inset: 0,
backgroundColor: colors.setAlpha(t.colors.$colorBackground, 0.28),
backgroundColor: transparentize(t.colors.$colorBackground, '28%'),
}),
props.sx,
]}
Expand DownExpand Up@@ -298,10 +297,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children,
sx={[
t => ({
display: 'flex',
background: common.mergedColorsBackground(
colors.setAlpha(t.colors.$colorBackground, 1),
t.colors.$neutralAlpha50,
),
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
borderBlockEndWidth: t.borderWidths.$normal,
borderBlockEndStyle: t.borderStyles.$solid,
borderBlockEndColor: t.colors.$neutralAlpha100,
Expand DownExpand Up@@ -378,10 +374,7 @@ const Footer = React.forwardRef<HTMLDivElement, FooterProps>(({ children, sx, ..
t => ({
display: 'flex',
flexDirection: 'column',
background: common.mergedColorsBackground(
colors.setAlpha(t.colors.$colorBackground, 1),
t.colors.$neutralAlpha50,
),
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
borderBlockStartWidth: t.borderWidths.$normal,
borderBlockStartStyle: t.borderStyles.$solid,
borderBlockStartColor: t.colors.$neutralAlpha100,
Expand DownExpand Up@@ -496,7 +489,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
sx={t => ({
position: 'absolute',
inset: 0,
backgroundImage: `linear-gradient(to bottom, ${colors.setAlpha(t.colors.$colorBackground, 0.28)}, ${t.colors.$colorBackground})`,
backgroundImage: `linear-gradient(to bottom, ${transparentize(t.colors.$colorBackground, '28%')}, ${t.colors.$colorBackground})`,
})}
/>

Expand All@@ -521,10 +514,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
bottom: 0,
left: 0,
right: 0,
background: common.mergedColorsBackground(
colors.setAlpha(t.colors.$colorBackground, 1),
t.colors.$neutralAlpha50,
),
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
padding: t.space.$4,
borderStartStartRadius: t.radii.$md,
borderStartEndRadius: t.radii.$md,
Expand Down
13 changes: 4 additions & 9 deletions packages/clerk-js/src/ui/elements/Navbar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,8 +8,9 @@ import { useNavigateToFlowStart, usePopover } from '../hooks';
import { Menu } from '../icons';
import { useRouter } from '../router';
import type { PropsOfComponent } from '../styledSystem';
import { animations, common, mqu } from '../styledSystem';
import { animations, mqu } from '../styledSystem';
import { colors } from '../utils';
import { colorMix } from '../utils/colorMix';
import { Card } from './Card';
import { withFloatingTree } from './contexts';
import { DevModeOverlay } from './DevModeNotice';
Expand DownExpand Up@@ -146,10 +147,7 @@ const NavbarContainer = (
width: t.sizes.$57,
position: 'relative',
maxWidth: t.space.$57,
background: common.mergedColorsBackground(
colors.setAlpha(t.colors.$colorBackground, 1),
t.colors.$neutralAlpha50,
),
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
padding: `${t.space.$6} ${t.space.$5} ${t.space.$4} ${t.space.$3}`,
marginRight: `-${t.space.$2}`,
color: t.colors.$colorText,
Expand DownExpand Up@@ -319,10 +317,7 @@ export const NavbarMenuButtonRow = ({ navbarTitleLocalizationKey, ...props }: Na
elementDescriptor={descriptors.navbarMobileMenuRow}
sx={t => ({
display: 'none',
background: common.mergedColorsBackground(
colors.setAlpha(t.colors.$colorBackground, 1),
t.colors.$neutralAlpha50,
),
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
padding: `${t.space.$2} ${t.space.$3} ${t.space.$4} ${t.space.$3}`,
marginBottom: `-${t.space.$2}`,
[mqu.md]: {
Expand Down
9 changes: 3 additions & 6 deletions packages/clerk-js/src/ui/elements/PopoverCard.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,8 +4,8 @@ import { useEnvironment } from '../contexts';
import { Col, descriptors, Flex, Flow, useAppearance } from '../customizables';
import type { ElementDescriptor } from '../customizables/elementDescriptors';
import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
import { animations, common } from '../styledSystem';
import { colors } from '../utils';
import { animations } from '../styledSystem';
import { colorMix } from '../utils/colorMix';
import { Card } from './Card';

const PopoverCardRoot = React.forwardRef<
Expand DownExpand Up@@ -81,10 +81,7 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
justify='between'
sx={[
t => ({
background: common.mergedColorsBackground(
colors.setAlpha(t.colors.$colorBackground, 1),
t.colors.$neutralAlpha50,
),
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
marginTop: `-${t.space.$2}`,
paddingTop: t.space.$2,
'&:empty': {
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
fix(clerk-js): CSS Variables#6100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

tmilewski
wants to merge
10
commits into

from

 Closed


fix(clerk-js): CSS Variables
#6100
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
4276ecd

Create colorMix.ts


alexcarpenter Jun 4, 2025
167b12c

refactor(colorMix): Introduce colorMix function for color manipulatio…


alexcarpenter Jun 4, 2025
a33cec6

wip


alexcarpenter Jun 4, 2025
eb9f682

wip


alexcarpenter Jun 4, 2025
f7ebfcc

wip


alexcarpenter Jun 4, 2025
3569d15

fix(clerk-js): Color typing


tmilewski Jun 10, 2025
23316c5

feat(clerk-js): Introduce CSS variables


tmilewski Jun 12, 2025
a1299d6

feat(clerk-js): Introduce CSS Variables


tmilewski Jun 12, 2025
3bf7284

chore(clerk-js): Minor clean-up


tmilewski Jun 12, 2025
94cb7b8

chore: Add interim changeset


tmilewski Jun 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/warm-pens-tickle.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': minor
---

[TODO]

Comment on lines

+1
 to 
+5

@coderabbitaicoderabbitaiBotJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue
Populate the changeset before merging
[TODO] will reach the changelog verbatim, leaving consumers without any context for the minor release. Replace it with a concise summary of the CSS-variable migration and colour-utility refactor.
🤖 Prompt for AI Agents
In the file .changeset/warm-pens-tickle.md at lines 1 to 5, replace the
placeholder text "[TODO]" with a concise summary describing the CSS-variable
migration and colour-utility refactor. This summary should clearly explain the
changes made in this minor release to provide useful context for consumers in
the changelog.


2 changes: 1 addition & 1 deletion
packages/clerk-js/sandbox/app.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -345,7 +345,7 @@ void (async () => {
 signUpUrl: '/sign-up',
 });
 renderCurrentRoute();
 updateVariables();
// updateVariables(); // Commented out as it overrides css variables
 updateOtherOptions();
 } else {
 console.error(`Unknown route: "${route}".`);
Expand Down

21 changes: 21 additions & 0 deletions
packages/clerk-js/sandbox/template.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,27 @@
 name="viewport"
 content="width=device-width,initial-scale=1"
 />
 <style>
 :root {
 --clerk-primary: #2F3037; /* default: #2F3037 */
 --clerk-foreground: #212126; /* default: #212126 */
 --clerk-background: white; /* default: white */
 --clerk-primary-foreground: white; /* default: white */
 --clerk-secondary-foreground: #747686; /* default: #747686 */
 --clerk-danger: #EF4444; /* default: #EF4444 */
 --clerk-input: white; /* default: white */
 --clerk-neutral: black; /* default: black */

 --clerk-line-height: normal; /* default: normal */
 --clerk-spacing: 1rem; /* default: 1rem */
 --clerk-border-width: 1px; /* default: 1px */
 --clerk-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* default: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" */
 --clerk-font-size: 0.8125rem; /* default: 0.8125rem */
 --clerk-font-weight: 400; /* default: 400 */
 --clerk-letter-spacing: normal; /* default: normal */
 --clerk-border-radius: 0.375rem; /* default: 0.375rem */
 }
 </style>
 <script src="https://cdn.tailwindcss.com"></script>
 <script>
 tailwind.config = {
Expand Down

13 changes: 3 additions & 10 deletions
packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,8 +13,7 @@ import { Tooltip } from '@/ui/elements/Tooltip';
import { LockDottedCircle } from '@/ui/icons';
import { Textarea } from '@/ui/primitives';
import type { ThemableCssProp } from '@/ui/styledSystem';
import { common } from '@/ui/styledSystem';
import * as utils from '@/ui/utils';
import { colorMix } from '@/ui/utils/colorMix';

export function OAuthConsentInternal() {
 const { scopes, oAuthApplicationName, oAuthApplicationLogoUrl, redirectUrl, onDeny, onAllow } =
Expand DownExpand Up@@ -121,10 +120,7 @@ export function OAuthConsentInternal() {
 <Box
 sx={t => ({
 padding: t.space.$3,
 background: common.mergedColorsBackground(
 utils.colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 })}

Comment on lines

121
 to 
124

@coderabbitaicoderabbitaiBotJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent
🧩 Analysis chain
Color-mix may break on non-Chromium browsers – add fallback
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50) generates a color-mix() expression, which is still behind flags in Safari 17 and completely unsupported in Firefox ≤ 126. Users on those browsers will get no background color.
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
+backgroundColor: [+ colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),+ t.colors.$neutralAlpha50, // fallback for browsers without color-mix+].join(','),
This keeps the new look while preserving graceful degradation.
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Search for occurrences of `colorMix` in the codebase
grep -R "colorMix" -n .
Length of output: 65620
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Display first 200 lines of the colorMix utility to verify its output
sed -n '1,200p' packages/clerk-js/src/ui/utils/colorMix.ts
Length of output: 5964
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Show lines 1-200 of the OAuthConsent.tsx for context
sed -n '1,200p' packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx
Length of output: 7269
Add a solid fallback before using colorMix for unsupported browsers
To avoid an invalid background-color in browsers that don’t yet support color-mix(), declare the plain alpha background first, then override with your mixed color. For example, in packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx around line 123:
 sx={t => ({
padding: t.space.$3,
- backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),+ // fallback for browsers without color-mix+ backgroundColor: t.colors.$neutralAlpha50,+ backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
})}
Please apply the same pattern wherever colorMix(…, t.colors.$neutralAlpha50) (or other mixes) is used, e.g.:
• packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

• packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx

• packages/clerk-js/src/ui/elements/Card/CardFooter.tsx

• packages/clerk-js/src/ui/elements/Disclosure.tsx

• packages/clerk-js/src/ui/elements/Drawer.tsx

• packages/clerk-js/src/ui/elements/Navbar.tsx

• packages/clerk-js/src/ui/elements/PopoverCard.tsx
Consider extracting a helper or theme token if this becomes a widespread pattern.
📝 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.

Suggested change

sx={t=>({
padding: t.space.$3,
background: common.mergedColorsBackground(
utils.colors.setAlpha(t.colors.$colorBackground,1),
t.colors.$neutralAlpha50,
),
backgroundColor: colorMix(t.colors.$colorBackground,t.colors.$neutralAlpha50),
})}
sx={t=>({
padding: t.space.$3,
+// fallback for browsers without color-mix
+backgroundColor: t.colors.$neutralAlpha50,
backgroundColor: colorMix(t.colors.$colorBackground,t.colors.$neutralAlpha50),
})}
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx around
lines 121 to 124, the backgroundColor uses colorMix which is unsupported in some
browsers. Fix this by first setting backgroundColor to the solid alpha color
t.colors.$neutralAlpha50 as a fallback, then override it with the colorMix
expression. Apply this pattern to ensure graceful degradation and consider
creating a helper or theme token if this pattern is used frequently across the
codebase.

@dstaleydstaleyJun 16, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This package only supports browsers released in the last two years (since May 8 2023), so all of our supported browsers support color-mix().
@coderabbitaicoderabbitaiBotJun 16, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dstaley Thank you for the clarification! I appreciate you letting me know about the package's browser support policy. That makes perfect sense - if you're only supporting browsers from the last two years, then color-mix() support is indeed guaranteed and no fallbacks are needed.
✏️ Learnings added
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.363Z
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.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
 >
 <Text
Expand DownExpand Up@@ -333,10 +329,7 @@ function ConnectionIcon({ size = 'md', sx }: { size?: 'sm' | 'md'; sx?: Themable
 <Box
 sx={t => [
 {
 background: common.mergedColorsBackground(
 utils.colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderRadius: t.radii.$circle,
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
Expand Down

10 changes: 4 additions & 6 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,7 @@ import * as React from 'react';

import { Switch } from '@/ui/elements/Switch';
import { Tooltip } from '@/ui/elements/Tooltip';
import { colorMix } from '@/ui/utils/colorMix';

import { useProtect } from '../../common';
import { usePlansContext, usePricingTableContext, useSubscriberTypeContext } from '../../contexts';
Expand All@@ -22,8 +23,8 @@ import {
 Text,
} from '../../customizables';
import { Check, Plus } from '../../icons';
import { common, InternalThemeProvider } from '../../styledSystem';
import { colors, getClosestProfileScrollBox } from '../../utils';
import { InternalThemeProvider } from '../../styledSystem';
import { getClosestProfileScrollBox } from '../../utils';

interface PricingTableDefaultProps {
 plans?: CommercePlanResource[] | null;
Expand DownExpand Up@@ -167,10 +168,7 @@ function Card(props: CardProps) {
 gap: 0,
 gridTemplateRows: 'subgrid',
 gridRow: 'span 5',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
 borderColor: t.colors.$neutralAlpha100,
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,6 +3,7 @@ import * as React from 'react';

import { Avatar } from '@/ui/elements/Avatar';
import { SegmentedControl } from '@/ui/elements/SegmentedControl';
import { colorMix } from '@/ui/utils/colorMix';

import { usePlansContext } from '../../contexts';
import {
Expand All@@ -21,8 +22,7 @@ import {
} from '../../customizables';
import { usePrefersReducedMotion } from '../../hooks';
import { Check, InformationCircle } from '../../icons';
import { common, InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';
import { colors } from '../../utils';
import { InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';

interface PricingTableMatrixProps {
 plans: CommercePlanResource[] | undefined;
Expand DownExpand Up@@ -55,7 +55,7 @@ export function PricingTableMatrix({
 });

 const highlightBackgroundColor: ThemableCssProp = t => ({
 background: common.mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha25),
 background: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha25),
 });

 const gridTemplateColumns = React.useMemo(() => `repeat(${plans.length + 1}, minmax(9.375rem,1fr))`, [plans.length]);
Expand Down

60 changes: 33 additions & 27 deletions
packages/clerk-js/src/ui/customizables/parseVariables.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,25 +2,33 @@ import type { Theme } from '@clerk/types';

import { spaceScaleKeys } from '../foundations/sizes';
import type { fontSizes, fontWeights } from '../foundations/typography';
import { fromEntries, removeUndefinedProps } from '../utils';
import {
 colorOptionToHslaAlphaScale,
 colorOptionToHslaLightnessScale,
 colors,
 fromEntries,
 removeUndefinedProps,
} from '../utils';
 createAlphaScaleWithTransparentize,
 createColorMixLightnessScale,
 lighten,
 transparentize,
} from '../utils/colorMix';

export const createColorScales = (theme: Theme) => {
 const variables = theme.variables || {};

 const primaryScale = colorOptionToHslaLightnessScale(variables.colorPrimary, 'primary');
 const primaryAlphaScale = colorOptionToHslaAlphaScale(primaryScale?.primary500, 'primaryAlpha');
 const dangerScale = colorOptionToHslaLightnessScale(variables.colorDanger, 'danger');
 const dangerAlphaScale = colorOptionToHslaAlphaScale(dangerScale?.danger500, 'dangerAlpha');
 const successScale = colorOptionToHslaLightnessScale(variables.colorSuccess, 'success');
 const successAlphaScale = colorOptionToHslaAlphaScale(successScale?.success500, 'successAlpha');
 const warningScale = colorOptionToHslaLightnessScale(variables.colorWarning, 'warning');
 const warningAlphaScale = colorOptionToHslaAlphaScale(warningScale?.warning500, 'warningAlpha');
 const primaryScale = createColorMixLightnessScale(variables.colorPrimary, 'primary');
 const primaryBase = primaryScale?.primary500;
 const primaryAlphaScale = primaryBase ? createAlphaScaleWithTransparentize(primaryBase, 'primaryAlpha') : undefined;
 const dangerScale = createColorMixLightnessScale(variables.colorDanger, 'danger');
 const dangerBase = dangerScale?.danger500;
 const dangerAlphaScale = dangerBase ? createAlphaScaleWithTransparentize(dangerBase, 'dangerAlpha') : undefined;
 const successScale = createColorMixLightnessScale(variables.colorSuccess, 'success');
 const successBase = successScale?.success500;
 const successAlphaScale = successBase ? createAlphaScaleWithTransparentize(successBase, 'successAlpha') : undefined;
 const warningScale = createColorMixLightnessScale(variables.colorWarning, 'warning');
 const warningBase = warningScale?.warning500;
 const warningAlphaScale = warningBase ? createAlphaScaleWithTransparentize(warningBase, 'warningAlpha') : undefined;
 const neutralAlphaScales =
 typeof variables.colorNeutral === 'string' && variables.colorNeutral
 ? createAlphaScaleWithTransparentize(variables.colorNeutral, 'neutralAlpha')
 : {};

 return removeUndefinedProps({
 ...primaryScale,
Expand All@@ -31,22 +39,20 @@ export const createColorScales = (theme: Theme) => {
 ...successAlphaScale,
 ...warningScale,
 ...warningAlphaScale,
 ...colorOptionToHslaAlphaScale(variables.colorNeutral, 'neutralAlpha'),
 primaryHover: colors.adjustForLightness(primaryScale?.primary500),
 colorTextOnPrimaryBackground: toHSLA(variables.colorTextOnPrimaryBackground),
 colorText: toHSLA(variables.colorText),
 colorTextSecondary: toHSLA(variables.colorTextSecondary) || colors.makeTransparent(variables.colorText, 0.35),
 colorInputText: toHSLA(variables.colorInputText),
 colorBackground: toHSLA(variables.colorBackground),
 colorInputBackground: toHSLA(variables.colorInputBackground),
 colorShimmer: toHSLA(variables.colorShimmer),
 ...neutralAlphaScales,
 // TODO(Colors): We are not adjusting the lightness based on the colorPrimary lightness
 primaryHover: primaryBase ? lighten(primaryBase, '90%') : undefined,
 colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,

Comment on lines

+44
 to 
+45

@coderabbitaicoderabbitaiBotJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion
lighten(..., '90%') hardly lightens
lighten(color, '90%') keeps 90 % of the base color and only 10 % white, so the result is barely lighter. If the intent was “90 % lighter”, flip the numbers:
-primaryHover: primaryBase ? lighten(primaryBase, '90%') : undefined,+primaryHover: primaryBase ? lighten(primaryBase, '10%') : undefined,
or clarify with a named helper (lightenBy(percentageOfWhite)) to avoid future confusion.
📝 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.

Suggested change

primaryHover: primaryBase ? lighten(primaryBase,'90%') : undefined,
colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,
primaryHover: primaryBase ? lighten(primaryBase,'10%') : undefined,
colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/customizables/parseVariables.ts around lines 44 to
45, the lighten function is called with '90%' which results in only a slight
lightening because it retains 90% of the base color. To fix this, invert the
percentage to '10%' to achieve a 90% lighter color or refactor the code to use a
named helper function like lightenBy that clearly indicates the percentage of
white added, improving clarity and correctness.

 colorText: variables.colorText,
 colorTextSecondary:
 variables.colorTextSecondary || (variables.colorText ? transparentize(variables.colorText, '35%') : undefined),
 colorInputText: variables.colorInputText,
 colorBackground: variables.colorBackground,
 colorInputBackground: variables.colorInputBackground,
 colorShimmer: variables.colorShimmer,
 });
};

export const toHSLA = (str: string | undefined) => {
 return str ? colors.toHslaString(str) : undefined;
};

export const createRadiiUnits = (theme: Theme) => {
 const { borderRadius } = theme.variables || {};
 if (borderRadius === undefined) {
Expand Down

10 changes: 4 additions & 6 deletions
packages/clerk-js/src/ui/elements/Card/CardFooter.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
import React from 'react';

import { colorMix } from '@/ui/utils/colorMix';

import { useEnvironment } from '../../contexts';
import { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../customizables';
import { useDevMode } from '../../hooks/useDevMode';
import type { InternalTheme, PropsOfComponent } from '../../styledSystem';
import { common, mqu } from '../../styledSystem';
import { colors } from '../../utils';
import { mqu } from '../../styledSystem';
import { Card } from '.';

type CardFooterProps = PropsOfComponent<typeof Flex> & {
Expand DownExpand Up@@ -50,10 +51,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
 t => ({
 marginTop: `-${t.space.$2}`,
 paddingTop: t.space.$2,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 '&:empty': {
 padding: 0,
 marginTop: 0,
Expand Down

8 changes: 2 additions & 6 deletions
packages/clerk-js/src/ui/elements/Disclosure.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,8 +5,7 @@ import { Box, descriptors, Icon, SimpleButton, Span, useAppearance } from '../cu
import { usePrefersReducedMotion } from '../hooks';
import { ChevronDown } from '../icons';
import type { ThemableCssProp } from '../styledSystem';
import { common } from '../styledSystem';
import { colors } from '../utils';
import { colorMix } from '../utils/colorMix';

/* -------------------------------------------------------------------------------------------------
 * Disclosure Context
Expand DownExpand Up@@ -168,10 +167,7 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, re
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
 borderColor: t.colors.$neutralAlpha100,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 })}
 >
 {children}
Expand Down

22 changes: 6 additions & 16 deletions
packages/clerk-js/src/ui/elements/Drawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,8 +19,7 @@ import { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../c
import { useDirection, usePrefersReducedMotion, useScrollLock } from '../hooks';
import { Close as CloseIcon } from '../icons';
import type { ThemableCssProp } from '../styledSystem';
import { common } from '../styledSystem';
import { colors } from '../utils';
import { colorMix, transparentize } from '../utils/colorMix';
import { IconButton } from './IconButton';

type FloatingPortalProps = React.ComponentProps<typeof FloatingPortal>;
Expand DownExpand Up@@ -151,7 +150,7 @@ export const FloatingOverlay = React.forwardRef(function FloatingOverlay(
 sx={[
 t => ({
 inset: 0,
 backgroundColor: colors.setAlpha(t.colors.$colorBackground, 0.28),
 backgroundColor: transparentize(t.colors.$colorBackground, '28%'),
 }),
 props.sx,
 ]}
Expand DownExpand Up@@ -298,10 +297,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children,
 sx={[
 t => ({
 display: 'flex',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderBlockEndWidth: t.borderWidths.$normal,
 borderBlockEndStyle: t.borderStyles.$solid,
 borderBlockEndColor: t.colors.$neutralAlpha100,
Expand DownExpand Up@@ -378,10 +374,7 @@ const Footer = React.forwardRef<HTMLDivElement, FooterProps>(({ children, sx, ..
 t => ({
 display: 'flex',
 flexDirection: 'column',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderBlockStartWidth: t.borderWidths.$normal,
 borderBlockStartStyle: t.borderStyles.$solid,
 borderBlockStartColor: t.colors.$neutralAlpha100,
Expand DownExpand Up@@ -496,7 +489,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
 sx={t => ({
 position: 'absolute',
 inset: 0,
 backgroundImage: `linear-gradient(to bottom, ${colors.setAlpha(t.colors.$colorBackground, 0.28)}, ${t.colors.$colorBackground})`,
 backgroundImage: `linear-gradient(to bottom, ${transparentize(t.colors.$colorBackground, '28%')}, ${t.colors.$colorBackground})`,
 })}
 />

Expand All@@ -521,10 +514,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
 bottom: 0,
 left: 0,
 right: 0,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: t.space.$4,
 borderStartStartRadius: t.radii.$md,
 borderStartEndRadius: t.radii.$md,
Expand Down

13 changes: 4 additions & 9 deletions
packages/clerk-js/src/ui/elements/Navbar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,8 +8,9 @@ import { useNavigateToFlowStart, usePopover } from '../hooks';
import { Menu } from '../icons';
import { useRouter } from '../router';
import type { PropsOfComponent } from '../styledSystem';
import { animations, common, mqu } from '../styledSystem';
import { animations, mqu } from '../styledSystem';
import { colors } from '../utils';
import { colorMix } from '../utils/colorMix';
import { Card } from './Card';
import { withFloatingTree } from './contexts';
import { DevModeOverlay } from './DevModeNotice';
Expand DownExpand Up@@ -146,10 +147,7 @@ const NavbarContainer = (
 width: t.sizes.$57,
 position: 'relative',
 maxWidth: t.space.$57,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: `${t.space.$6} ${t.space.$5} ${t.space.$4} ${t.space.$3}`,
 marginRight: `-${t.space.$2}`,
 color: t.colors.$colorText,
Expand DownExpand Up@@ -319,10 +317,7 @@ export const NavbarMenuButtonRow = ({ navbarTitleLocalizationKey, ...props }: Na
 elementDescriptor={descriptors.navbarMobileMenuRow}
 sx={t => ({
 display: 'none',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: `${t.space.$2} ${t.space.$3} ${t.space.$4} ${t.space.$3}`,
 marginBottom: `-${t.space.$2}`,
 [mqu.md]: {
Expand Down

9 changes: 3 additions & 6 deletions
packages/clerk-js/src/ui/elements/PopoverCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,8 +4,8 @@ import { useEnvironment } from '../contexts';
import { Col, descriptors, Flex, Flow, useAppearance } from '../customizables';
import type { ElementDescriptor } from '../customizables/elementDescriptors';
import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
import { animations, common } from '../styledSystem';
import { colors } from '../utils';
import { animations } from '../styledSystem';
import { colorMix } from '../utils/colorMix';
import { Card } from './Card';

const PopoverCardRoot = React.forwardRef<
Expand DownExpand Up@@ -81,10 +81,7 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
 justify='between'
 sx={[
 t => ({
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 marginTop: `-${t.space.$2}`,
 paddingTop: t.space.$2,
 '&:empty': {
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(clerk-js): CSS Variables#6100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

tmilewski
wants to merge
10
commits into

from

 Closed


fix(clerk-js): CSS Variables
#6100
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
4276ecd

Create colorMix.ts


alexcarpenter Jun 4, 2025
167b12c

refactor(colorMix): Introduce colorMix function for color manipulatio…


alexcarpenter Jun 4, 2025
a33cec6

wip


alexcarpenter Jun 4, 2025
eb9f682

wip


alexcarpenter Jun 4, 2025
f7ebfcc

wip


alexcarpenter Jun 4, 2025
3569d15

fix(clerk-js): Color typing


tmilewski Jun 10, 2025
23316c5

feat(clerk-js): Introduce CSS variables


tmilewski Jun 12, 2025
a1299d6

feat(clerk-js): Introduce CSS Variables


tmilewski Jun 12, 2025
3bf7284

chore(clerk-js): Minor clean-up


tmilewski Jun 12, 2025
94cb7b8

chore: Add interim changeset


tmilewski Jun 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/warm-pens-tickle.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': minor
---

[TODO]

Comment on lines

+1
 to 
+5

@coderabbitaicoderabbitaiBotJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue
Populate the changeset before merging
[TODO] will reach the changelog verbatim, leaving consumers without any context for the minor release. Replace it with a concise summary of the CSS-variable migration and colour-utility refactor.
🤖 Prompt for AI Agents
In the file .changeset/warm-pens-tickle.md at lines 1 to 5, replace the
placeholder text "[TODO]" with a concise summary describing the CSS-variable
migration and colour-utility refactor. This summary should clearly explain the
changes made in this minor release to provide useful context for consumers in
the changelog.


2 changes: 1 addition & 1 deletion
packages/clerk-js/sandbox/app.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -345,7 +345,7 @@ void (async () => {
 signUpUrl: '/sign-up',
 });
 renderCurrentRoute();
 updateVariables();
// updateVariables(); // Commented out as it overrides css variables
 updateOtherOptions();
 } else {
 console.error(`Unknown route: "${route}".`);
Expand Down

21 changes: 21 additions & 0 deletions
packages/clerk-js/sandbox/template.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,27 @@
 name="viewport"
 content="width=device-width,initial-scale=1"
 />
 <style>
 :root {
 --clerk-primary: #2F3037; /* default: #2F3037 */
 --clerk-foreground: #212126; /* default: #212126 */
 --clerk-background: white; /* default: white */
 --clerk-primary-foreground: white; /* default: white */
 --clerk-secondary-foreground: #747686; /* default: #747686 */
 --clerk-danger: #EF4444; /* default: #EF4444 */
 --clerk-input: white; /* default: white */
 --clerk-neutral: black; /* default: black */

 --clerk-line-height: normal; /* default: normal */
 --clerk-spacing: 1rem; /* default: 1rem */
 --clerk-border-width: 1px; /* default: 1px */
 --clerk-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* default: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" */
 --clerk-font-size: 0.8125rem; /* default: 0.8125rem */
 --clerk-font-weight: 400; /* default: 400 */
 --clerk-letter-spacing: normal; /* default: normal */
 --clerk-border-radius: 0.375rem; /* default: 0.375rem */
 }
 </style>
 <script src="https://cdn.tailwindcss.com"></script>
 <script>
 tailwind.config = {
Expand Down

13 changes: 3 additions & 10 deletions
packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,8 +13,7 @@ import { Tooltip } from '@/ui/elements/Tooltip';
import { LockDottedCircle } from '@/ui/icons';
import { Textarea } from '@/ui/primitives';
import type { ThemableCssProp } from '@/ui/styledSystem';
import { common } from '@/ui/styledSystem';
import * as utils from '@/ui/utils';
import { colorMix } from '@/ui/utils/colorMix';

export function OAuthConsentInternal() {
 const { scopes, oAuthApplicationName, oAuthApplicationLogoUrl, redirectUrl, onDeny, onAllow } =
Expand DownExpand Up@@ -121,10 +120,7 @@ export function OAuthConsentInternal() {
 <Box
 sx={t => ({
 padding: t.space.$3,
 background: common.mergedColorsBackground(
 utils.colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 })}

Comment on lines

121
 to 
124

@coderabbitaicoderabbitaiBotJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent
🧩 Analysis chain
Color-mix may break on non-Chromium browsers – add fallback
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50) generates a color-mix() expression, which is still behind flags in Safari 17 and completely unsupported in Firefox ≤ 126. Users on those browsers will get no background color.
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
+backgroundColor: [+ colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),+ t.colors.$neutralAlpha50, // fallback for browsers without color-mix+].join(','),
This keeps the new look while preserving graceful degradation.
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Search for occurrences of `colorMix` in the codebase
grep -R "colorMix" -n .
Length of output: 65620
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Display first 200 lines of the colorMix utility to verify its output
sed -n '1,200p' packages/clerk-js/src/ui/utils/colorMix.ts
Length of output: 5964
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Show lines 1-200 of the OAuthConsent.tsx for context
sed -n '1,200p' packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx
Length of output: 7269
Add a solid fallback before using colorMix for unsupported browsers
To avoid an invalid background-color in browsers that don’t yet support color-mix(), declare the plain alpha background first, then override with your mixed color. For example, in packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx around line 123:
 sx={t => ({
padding: t.space.$3,
- backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),+ // fallback for browsers without color-mix+ backgroundColor: t.colors.$neutralAlpha50,+ backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
})}
Please apply the same pattern wherever colorMix(…, t.colors.$neutralAlpha50) (or other mixes) is used, e.g.:
• packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

• packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx

• packages/clerk-js/src/ui/elements/Card/CardFooter.tsx

• packages/clerk-js/src/ui/elements/Disclosure.tsx

• packages/clerk-js/src/ui/elements/Drawer.tsx

• packages/clerk-js/src/ui/elements/Navbar.tsx

• packages/clerk-js/src/ui/elements/PopoverCard.tsx
Consider extracting a helper or theme token if this becomes a widespread pattern.
📝 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.

Suggested change

sx={t=>({
padding: t.space.$3,
background: common.mergedColorsBackground(
utils.colors.setAlpha(t.colors.$colorBackground,1),
t.colors.$neutralAlpha50,
),
backgroundColor: colorMix(t.colors.$colorBackground,t.colors.$neutralAlpha50),
})}
sx={t=>({
padding: t.space.$3,
+// fallback for browsers without color-mix
+backgroundColor: t.colors.$neutralAlpha50,
backgroundColor: colorMix(t.colors.$colorBackground,t.colors.$neutralAlpha50),
})}
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx around
lines 121 to 124, the backgroundColor uses colorMix which is unsupported in some
browsers. Fix this by first setting backgroundColor to the solid alpha color
t.colors.$neutralAlpha50 as a fallback, then override it with the colorMix
expression. Apply this pattern to ensure graceful degradation and consider
creating a helper or theme token if this pattern is used frequently across the
codebase.

@dstaleydstaleyJun 16, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This package only supports browsers released in the last two years (since May 8 2023), so all of our supported browsers support color-mix().
@coderabbitaicoderabbitaiBotJun 16, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dstaley Thank you for the clarification! I appreciate you letting me know about the package's browser support policy. That makes perfect sense - if you're only supporting browsers from the last two years, then color-mix() support is indeed guaranteed and no fallbacks are needed.
✏️ Learnings added
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.363Z
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.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
 >
 <Text
Expand DownExpand Up@@ -333,10 +329,7 @@ function ConnectionIcon({ size = 'md', sx }: { size?: 'sm' | 'md'; sx?: Themable
 <Box
 sx={t => [
 {
 background: common.mergedColorsBackground(
 utils.colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderRadius: t.radii.$circle,
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
Expand Down

10 changes: 4 additions & 6 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,7 @@ import * as React from 'react';

import { Switch } from '@/ui/elements/Switch';
import { Tooltip } from '@/ui/elements/Tooltip';
import { colorMix } from '@/ui/utils/colorMix';

import { useProtect } from '../../common';
import { usePlansContext, usePricingTableContext, useSubscriberTypeContext } from '../../contexts';
Expand All@@ -22,8 +23,8 @@ import {
 Text,
} from '../../customizables';
import { Check, Plus } from '../../icons';
import { common, InternalThemeProvider } from '../../styledSystem';
import { colors, getClosestProfileScrollBox } from '../../utils';
import { InternalThemeProvider } from '../../styledSystem';
import { getClosestProfileScrollBox } from '../../utils';

interface PricingTableDefaultProps {
 plans?: CommercePlanResource[] | null;
Expand DownExpand Up@@ -167,10 +168,7 @@ function Card(props: CardProps) {
 gap: 0,
 gridTemplateRows: 'subgrid',
 gridRow: 'span 5',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
 borderColor: t.colors.$neutralAlpha100,
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,6 +3,7 @@ import * as React from 'react';

import { Avatar } from '@/ui/elements/Avatar';
import { SegmentedControl } from '@/ui/elements/SegmentedControl';
import { colorMix } from '@/ui/utils/colorMix';

import { usePlansContext } from '../../contexts';
import {
Expand All@@ -21,8 +22,7 @@ import {
} from '../../customizables';
import { usePrefersReducedMotion } from '../../hooks';
import { Check, InformationCircle } from '../../icons';
import { common, InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';
import { colors } from '../../utils';
import { InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';

interface PricingTableMatrixProps {
 plans: CommercePlanResource[] | undefined;
Expand DownExpand Up@@ -55,7 +55,7 @@ export function PricingTableMatrix({
 });

 const highlightBackgroundColor: ThemableCssProp = t => ({
 background: common.mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha25),
 background: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha25),
 });

 const gridTemplateColumns = React.useMemo(() => `repeat(${plans.length + 1}, minmax(9.375rem,1fr))`, [plans.length]);
Expand Down

60 changes: 33 additions & 27 deletions
packages/clerk-js/src/ui/customizables/parseVariables.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,25 +2,33 @@ import type { Theme } from '@clerk/types';

import { spaceScaleKeys } from '../foundations/sizes';
import type { fontSizes, fontWeights } from '../foundations/typography';
import { fromEntries, removeUndefinedProps } from '../utils';
import {
 colorOptionToHslaAlphaScale,
 colorOptionToHslaLightnessScale,
 colors,
 fromEntries,
 removeUndefinedProps,
} from '../utils';
 createAlphaScaleWithTransparentize,
 createColorMixLightnessScale,
 lighten,
 transparentize,
} from '../utils/colorMix';

export const createColorScales = (theme: Theme) => {
 const variables = theme.variables || {};

 const primaryScale = colorOptionToHslaLightnessScale(variables.colorPrimary, 'primary');
 const primaryAlphaScale = colorOptionToHslaAlphaScale(primaryScale?.primary500, 'primaryAlpha');
 const dangerScale = colorOptionToHslaLightnessScale(variables.colorDanger, 'danger');
 const dangerAlphaScale = colorOptionToHslaAlphaScale(dangerScale?.danger500, 'dangerAlpha');
 const successScale = colorOptionToHslaLightnessScale(variables.colorSuccess, 'success');
 const successAlphaScale = colorOptionToHslaAlphaScale(successScale?.success500, 'successAlpha');
 const warningScale = colorOptionToHslaLightnessScale(variables.colorWarning, 'warning');
 const warningAlphaScale = colorOptionToHslaAlphaScale(warningScale?.warning500, 'warningAlpha');
 const primaryScale = createColorMixLightnessScale(variables.colorPrimary, 'primary');
 const primaryBase = primaryScale?.primary500;
 const primaryAlphaScale = primaryBase ? createAlphaScaleWithTransparentize(primaryBase, 'primaryAlpha') : undefined;
 const dangerScale = createColorMixLightnessScale(variables.colorDanger, 'danger');
 const dangerBase = dangerScale?.danger500;
 const dangerAlphaScale = dangerBase ? createAlphaScaleWithTransparentize(dangerBase, 'dangerAlpha') : undefined;
 const successScale = createColorMixLightnessScale(variables.colorSuccess, 'success');
 const successBase = successScale?.success500;
 const successAlphaScale = successBase ? createAlphaScaleWithTransparentize(successBase, 'successAlpha') : undefined;
 const warningScale = createColorMixLightnessScale(variables.colorWarning, 'warning');
 const warningBase = warningScale?.warning500;
 const warningAlphaScale = warningBase ? createAlphaScaleWithTransparentize(warningBase, 'warningAlpha') : undefined;
 const neutralAlphaScales =
 typeof variables.colorNeutral === 'string' && variables.colorNeutral
 ? createAlphaScaleWithTransparentize(variables.colorNeutral, 'neutralAlpha')
 : {};

 return removeUndefinedProps({
 ...primaryScale,
Expand All@@ -31,22 +39,20 @@ export const createColorScales = (theme: Theme) => {
 ...successAlphaScale,
 ...warningScale,
 ...warningAlphaScale,
 ...colorOptionToHslaAlphaScale(variables.colorNeutral, 'neutralAlpha'),
 primaryHover: colors.adjustForLightness(primaryScale?.primary500),
 colorTextOnPrimaryBackground: toHSLA(variables.colorTextOnPrimaryBackground),
 colorText: toHSLA(variables.colorText),
 colorTextSecondary: toHSLA(variables.colorTextSecondary) || colors.makeTransparent(variables.colorText, 0.35),
 colorInputText: toHSLA(variables.colorInputText),
 colorBackground: toHSLA(variables.colorBackground),
 colorInputBackground: toHSLA(variables.colorInputBackground),
 colorShimmer: toHSLA(variables.colorShimmer),
 ...neutralAlphaScales,
 // TODO(Colors): We are not adjusting the lightness based on the colorPrimary lightness
 primaryHover: primaryBase ? lighten(primaryBase, '90%') : undefined,
 colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,

Comment on lines

+44
 to 
+45

@coderabbitaicoderabbitaiBotJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion
lighten(..., '90%') hardly lightens
lighten(color, '90%') keeps 90 % of the base color and only 10 % white, so the result is barely lighter. If the intent was “90 % lighter”, flip the numbers:
-primaryHover: primaryBase ? lighten(primaryBase, '90%') : undefined,+primaryHover: primaryBase ? lighten(primaryBase, '10%') : undefined,
or clarify with a named helper (lightenBy(percentageOfWhite)) to avoid future confusion.
📝 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.

Suggested change

primaryHover: primaryBase ? lighten(primaryBase,'90%') : undefined,
colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,
primaryHover: primaryBase ? lighten(primaryBase,'10%') : undefined,
colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/customizables/parseVariables.ts around lines 44 to
45, the lighten function is called with '90%' which results in only a slight
lightening because it retains 90% of the base color. To fix this, invert the
percentage to '10%' to achieve a 90% lighter color or refactor the code to use a
named helper function like lightenBy that clearly indicates the percentage of
white added, improving clarity and correctness.

 colorText: variables.colorText,
 colorTextSecondary:
 variables.colorTextSecondary || (variables.colorText ? transparentize(variables.colorText, '35%') : undefined),
 colorInputText: variables.colorInputText,
 colorBackground: variables.colorBackground,
 colorInputBackground: variables.colorInputBackground,
 colorShimmer: variables.colorShimmer,
 });
};

export const toHSLA = (str: string | undefined) => {
 return str ? colors.toHslaString(str) : undefined;
};

export const createRadiiUnits = (theme: Theme) => {
 const { borderRadius } = theme.variables || {};
 if (borderRadius === undefined) {
Expand Down

10 changes: 4 additions & 6 deletions
packages/clerk-js/src/ui/elements/Card/CardFooter.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
import React from 'react';

import { colorMix } from '@/ui/utils/colorMix';

import { useEnvironment } from '../../contexts';
import { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../customizables';
import { useDevMode } from '../../hooks/useDevMode';
import type { InternalTheme, PropsOfComponent } from '../../styledSystem';
import { common, mqu } from '../../styledSystem';
import { colors } from '../../utils';
import { mqu } from '../../styledSystem';
import { Card } from '.';

type CardFooterProps = PropsOfComponent<typeof Flex> & {
Expand DownExpand Up@@ -50,10 +51,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
 t => ({
 marginTop: `-${t.space.$2}`,
 paddingTop: t.space.$2,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 '&:empty': {
 padding: 0,
 marginTop: 0,
Expand Down

8 changes: 2 additions & 6 deletions
packages/clerk-js/src/ui/elements/Disclosure.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,8 +5,7 @@ import { Box, descriptors, Icon, SimpleButton, Span, useAppearance } from '../cu
import { usePrefersReducedMotion } from '../hooks';
import { ChevronDown } from '../icons';
import type { ThemableCssProp } from '../styledSystem';
import { common } from '../styledSystem';
import { colors } from '../utils';
import { colorMix } from '../utils/colorMix';

/* -------------------------------------------------------------------------------------------------
 * Disclosure Context
Expand DownExpand Up@@ -168,10 +167,7 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, re
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
 borderColor: t.colors.$neutralAlpha100,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 })}
 >
 {children}
Expand Down

22 changes: 6 additions & 16 deletions
packages/clerk-js/src/ui/elements/Drawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,8 +19,7 @@ import { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../c
import { useDirection, usePrefersReducedMotion, useScrollLock } from '../hooks';
import { Close as CloseIcon } from '../icons';
import type { ThemableCssProp } from '../styledSystem';
import { common } from '../styledSystem';
import { colors } from '../utils';
import { colorMix, transparentize } from '../utils/colorMix';
import { IconButton } from './IconButton';

type FloatingPortalProps = React.ComponentProps<typeof FloatingPortal>;
Expand DownExpand Up@@ -151,7 +150,7 @@ export const FloatingOverlay = React.forwardRef(function FloatingOverlay(
 sx={[
 t => ({
 inset: 0,
 backgroundColor: colors.setAlpha(t.colors.$colorBackground, 0.28),
 backgroundColor: transparentize(t.colors.$colorBackground, '28%'),
 }),
 props.sx,
 ]}
Expand DownExpand Up@@ -298,10 +297,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children,
 sx={[
 t => ({
 display: 'flex',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderBlockEndWidth: t.borderWidths.$normal,
 borderBlockEndStyle: t.borderStyles.$solid,
 borderBlockEndColor: t.colors.$neutralAlpha100,
Expand DownExpand Up@@ -378,10 +374,7 @@ const Footer = React.forwardRef<HTMLDivElement, FooterProps>(({ children, sx, ..
 t => ({
 display: 'flex',
 flexDirection: 'column',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderBlockStartWidth: t.borderWidths.$normal,
 borderBlockStartStyle: t.borderStyles.$solid,
 borderBlockStartColor: t.colors.$neutralAlpha100,
Expand DownExpand Up@@ -496,7 +489,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
 sx={t => ({
 position: 'absolute',
 inset: 0,
 backgroundImage: `linear-gradient(to bottom, ${colors.setAlpha(t.colors.$colorBackground, 0.28)}, ${t.colors.$colorBackground})`,
 backgroundImage: `linear-gradient(to bottom, ${transparentize(t.colors.$colorBackground, '28%')}, ${t.colors.$colorBackground})`,
 })}
 />

Expand All@@ -521,10 +514,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
 bottom: 0,
 left: 0,
 right: 0,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: t.space.$4,
 borderStartStartRadius: t.radii.$md,
 borderStartEndRadius: t.radii.$md,
Expand Down

13 changes: 4 additions & 9 deletions
packages/clerk-js/src/ui/elements/Navbar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,8 +8,9 @@ import { useNavigateToFlowStart, usePopover } from '../hooks';
import { Menu } from '../icons';
import { useRouter } from '../router';
import type { PropsOfComponent } from '../styledSystem';
import { animations, common, mqu } from '../styledSystem';
import { animations, mqu } from '../styledSystem';
import { colors } from '../utils';
import { colorMix } from '../utils/colorMix';
import { Card } from './Card';
import { withFloatingTree } from './contexts';
import { DevModeOverlay } from './DevModeNotice';
Expand DownExpand Up@@ -146,10 +147,7 @@ const NavbarContainer = (
 width: t.sizes.$57,
 position: 'relative',
 maxWidth: t.space.$57,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: `${t.space.$6} ${t.space.$5} ${t.space.$4} ${t.space.$3}`,
 marginRight: `-${t.space.$2}`,
 color: t.colors.$colorText,
Expand DownExpand Up@@ -319,10 +317,7 @@ export const NavbarMenuButtonRow = ({ navbarTitleLocalizationKey, ...props }: Na
 elementDescriptor={descriptors.navbarMobileMenuRow}
 sx={t => ({
 display: 'none',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: `${t.space.$2} ${t.space.$3} ${t.space.$4} ${t.space.$3}`,
 marginBottom: `-${t.space.$2}`,
 [mqu.md]: {
Expand Down

9 changes: 3 additions & 6 deletions
packages/clerk-js/src/ui/elements/PopoverCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,8 +4,8 @@ import { useEnvironment } from '../contexts';
import { Col, descriptors, Flex, Flow, useAppearance } from '../customizables';
import type { ElementDescriptor } from '../customizables/elementDescriptors';
import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
import { animations, common } from '../styledSystem';
import { colors } from '../utils';
import { animations } from '../styledSystem';
import { colorMix } from '../utils/colorMix';
import { Card } from './Card';

const PopoverCardRoot = React.forwardRef<
Expand DownExpand Up@@ -81,10 +81,7 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
 justify='between'
 sx={[
 t => ({
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 marginTop: `-${t.space.$2}`,
 paddingTop: t.space.$2,
 '&:empty': {
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(clerk-js): CSS Variables#6100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

tmilewski
wants to merge
10
commits into

from

 Closed


fix(clerk-js): CSS Variables
#6100
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
4276ecd

Create colorMix.ts


alexcarpenter Jun 4, 2025
167b12c

refactor(colorMix): Introduce colorMix function for color manipulatio…


alexcarpenter Jun 4, 2025
a33cec6

wip


alexcarpenter Jun 4, 2025
eb9f682

wip


alexcarpenter Jun 4, 2025
f7ebfcc

wip


alexcarpenter Jun 4, 2025
3569d15

fix(clerk-js): Color typing


tmilewski Jun 10, 2025
23316c5

feat(clerk-js): Introduce CSS variables


tmilewski Jun 12, 2025
a1299d6

feat(clerk-js): Introduce CSS Variables


tmilewski Jun 12, 2025
3bf7284

chore(clerk-js): Minor clean-up


tmilewski Jun 12, 2025
94cb7b8

chore: Add interim changeset


tmilewski Jun 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/warm-pens-tickle.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': minor
---

[TODO]

Comment on lines

+1
 to 
+5

@coderabbitaicoderabbitaiBotJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue
Populate the changeset before merging
[TODO] will reach the changelog verbatim, leaving consumers without any context for the minor release. Replace it with a concise summary of the CSS-variable migration and colour-utility refactor.
🤖 Prompt for AI Agents
In the file .changeset/warm-pens-tickle.md at lines 1 to 5, replace the
placeholder text "[TODO]" with a concise summary describing the CSS-variable
migration and colour-utility refactor. This summary should clearly explain the
changes made in this minor release to provide useful context for consumers in
the changelog.


2 changes: 1 addition & 1 deletion
packages/clerk-js/sandbox/app.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -345,7 +345,7 @@ void (async () => {
 signUpUrl: '/sign-up',
 });
 renderCurrentRoute();
 updateVariables();
// updateVariables(); // Commented out as it overrides css variables
 updateOtherOptions();
 } else {
 console.error(`Unknown route: "${route}".`);
Expand Down

21 changes: 21 additions & 0 deletions
packages/clerk-js/sandbox/template.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,27 @@
 name="viewport"
 content="width=device-width,initial-scale=1"
 />
 <style>
 :root {
 --clerk-primary: #2F3037; /* default: #2F3037 */
 --clerk-foreground: #212126; /* default: #212126 */
 --clerk-background: white; /* default: white */
 --clerk-primary-foreground: white; /* default: white */
 --clerk-secondary-foreground: #747686; /* default: #747686 */
 --clerk-danger: #EF4444; /* default: #EF4444 */
 --clerk-input: white; /* default: white */
 --clerk-neutral: black; /* default: black */

 --clerk-line-height: normal; /* default: normal */
 --clerk-spacing: 1rem; /* default: 1rem */
 --clerk-border-width: 1px; /* default: 1px */
 --clerk-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* default: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" */
 --clerk-font-size: 0.8125rem; /* default: 0.8125rem */
 --clerk-font-weight: 400; /* default: 400 */
 --clerk-letter-spacing: normal; /* default: normal */
 --clerk-border-radius: 0.375rem; /* default: 0.375rem */
 }
 </style>
 <script src="https://cdn.tailwindcss.com"></script>
 <script>
 tailwind.config = {
Expand Down

13 changes: 3 additions & 10 deletions
packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,8 +13,7 @@ import { Tooltip } from '@/ui/elements/Tooltip';
import { LockDottedCircle } from '@/ui/icons';
import { Textarea } from '@/ui/primitives';
import type { ThemableCssProp } from '@/ui/styledSystem';
import { common } from '@/ui/styledSystem';
import * as utils from '@/ui/utils';
import { colorMix } from '@/ui/utils/colorMix';

export function OAuthConsentInternal() {
 const { scopes, oAuthApplicationName, oAuthApplicationLogoUrl, redirectUrl, onDeny, onAllow } =
Expand DownExpand Up@@ -121,10 +120,7 @@ export function OAuthConsentInternal() {
 <Box
 sx={t => ({
 padding: t.space.$3,
 background: common.mergedColorsBackground(
 utils.colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 })}

Comment on lines

121
 to 
124

@coderabbitaicoderabbitaiBotJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent
🧩 Analysis chain
Color-mix may break on non-Chromium browsers – add fallback
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50) generates a color-mix() expression, which is still behind flags in Safari 17 and completely unsupported in Firefox ≤ 126. Users on those browsers will get no background color.
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
+backgroundColor: [+ colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),+ t.colors.$neutralAlpha50, // fallback for browsers without color-mix+].join(','),
This keeps the new look while preserving graceful degradation.
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Search for occurrences of `colorMix` in the codebase
grep -R "colorMix" -n .
Length of output: 65620
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Display first 200 lines of the colorMix utility to verify its output
sed -n '1,200p' packages/clerk-js/src/ui/utils/colorMix.ts
Length of output: 5964
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Show lines 1-200 of the OAuthConsent.tsx for context
sed -n '1,200p' packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx
Length of output: 7269
Add a solid fallback before using colorMix for unsupported browsers
To avoid an invalid background-color in browsers that don’t yet support color-mix(), declare the plain alpha background first, then override with your mixed color. For example, in packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx around line 123:
 sx={t => ({
padding: t.space.$3,
- backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),+ // fallback for browsers without color-mix+ backgroundColor: t.colors.$neutralAlpha50,+ backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
})}
Please apply the same pattern wherever colorMix(…, t.colors.$neutralAlpha50) (or other mixes) is used, e.g.:
• packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

• packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx

• packages/clerk-js/src/ui/elements/Card/CardFooter.tsx

• packages/clerk-js/src/ui/elements/Disclosure.tsx

• packages/clerk-js/src/ui/elements/Drawer.tsx

• packages/clerk-js/src/ui/elements/Navbar.tsx

• packages/clerk-js/src/ui/elements/PopoverCard.tsx
Consider extracting a helper or theme token if this becomes a widespread pattern.
📝 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.

Suggested change

sx={t=>({
padding: t.space.$3,
background: common.mergedColorsBackground(
utils.colors.setAlpha(t.colors.$colorBackground,1),
t.colors.$neutralAlpha50,
),
backgroundColor: colorMix(t.colors.$colorBackground,t.colors.$neutralAlpha50),
})}
sx={t=>({
padding: t.space.$3,
+// fallback for browsers without color-mix
+backgroundColor: t.colors.$neutralAlpha50,
backgroundColor: colorMix(t.colors.$colorBackground,t.colors.$neutralAlpha50),
})}
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx around
lines 121 to 124, the backgroundColor uses colorMix which is unsupported in some
browsers. Fix this by first setting backgroundColor to the solid alpha color
t.colors.$neutralAlpha50 as a fallback, then override it with the colorMix
expression. Apply this pattern to ensure graceful degradation and consider
creating a helper or theme token if this pattern is used frequently across the
codebase.

@dstaleydstaleyJun 16, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This package only supports browsers released in the last two years (since May 8 2023), so all of our supported browsers support color-mix().
@coderabbitaicoderabbitaiBotJun 16, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dstaley Thank you for the clarification! I appreciate you letting me know about the package's browser support policy. That makes perfect sense - if you're only supporting browsers from the last two years, then color-mix() support is indeed guaranteed and no fallbacks are needed.
✏️ Learnings added
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.363Z
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.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
 >
 <Text
Expand DownExpand Up@@ -333,10 +329,7 @@ function ConnectionIcon({ size = 'md', sx }: { size?: 'sm' | 'md'; sx?: Themable
 <Box
 sx={t => [
 {
 background: common.mergedColorsBackground(
 utils.colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderRadius: t.radii.$circle,
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
Expand Down

10 changes: 4 additions & 6 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,7 @@ import * as React from 'react';

import { Switch } from '@/ui/elements/Switch';
import { Tooltip } from '@/ui/elements/Tooltip';
import { colorMix } from '@/ui/utils/colorMix';

import { useProtect } from '../../common';
import { usePlansContext, usePricingTableContext, useSubscriberTypeContext } from '../../contexts';
Expand All@@ -22,8 +23,8 @@ import {
 Text,
} from '../../customizables';
import { Check, Plus } from '../../icons';
import { common, InternalThemeProvider } from '../../styledSystem';
import { colors, getClosestProfileScrollBox } from '../../utils';
import { InternalThemeProvider } from '../../styledSystem';
import { getClosestProfileScrollBox } from '../../utils';

interface PricingTableDefaultProps {
 plans?: CommercePlanResource[] | null;
Expand DownExpand Up@@ -167,10 +168,7 @@ function Card(props: CardProps) {
 gap: 0,
 gridTemplateRows: 'subgrid',
 gridRow: 'span 5',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
 borderColor: t.colors.$neutralAlpha100,
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,6 +3,7 @@ import * as React from 'react';

import { Avatar } from '@/ui/elements/Avatar';
import { SegmentedControl } from '@/ui/elements/SegmentedControl';
import { colorMix } from '@/ui/utils/colorMix';

import { usePlansContext } from '../../contexts';
import {
Expand All@@ -21,8 +22,7 @@ import {
} from '../../customizables';
import { usePrefersReducedMotion } from '../../hooks';
import { Check, InformationCircle } from '../../icons';
import { common, InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';
import { colors } from '../../utils';
import { InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';

interface PricingTableMatrixProps {
 plans: CommercePlanResource[] | undefined;
Expand DownExpand Up@@ -55,7 +55,7 @@ export function PricingTableMatrix({
 });

 const highlightBackgroundColor: ThemableCssProp = t => ({
 background: common.mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha25),
 background: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha25),
 });

 const gridTemplateColumns = React.useMemo(() => `repeat(${plans.length + 1}, minmax(9.375rem,1fr))`, [plans.length]);
Expand Down

60 changes: 33 additions & 27 deletions
packages/clerk-js/src/ui/customizables/parseVariables.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,25 +2,33 @@ import type { Theme } from '@clerk/types';

import { spaceScaleKeys } from '../foundations/sizes';
import type { fontSizes, fontWeights } from '../foundations/typography';
import { fromEntries, removeUndefinedProps } from '../utils';
import {
 colorOptionToHslaAlphaScale,
 colorOptionToHslaLightnessScale,
 colors,
 fromEntries,
 removeUndefinedProps,
} from '../utils';
 createAlphaScaleWithTransparentize,
 createColorMixLightnessScale,
 lighten,
 transparentize,
} from '../utils/colorMix';

export const createColorScales = (theme: Theme) => {
 const variables = theme.variables || {};

 const primaryScale = colorOptionToHslaLightnessScale(variables.colorPrimary, 'primary');
 const primaryAlphaScale = colorOptionToHslaAlphaScale(primaryScale?.primary500, 'primaryAlpha');
 const dangerScale = colorOptionToHslaLightnessScale(variables.colorDanger, 'danger');
 const dangerAlphaScale = colorOptionToHslaAlphaScale(dangerScale?.danger500, 'dangerAlpha');
 const successScale = colorOptionToHslaLightnessScale(variables.colorSuccess, 'success');
 const successAlphaScale = colorOptionToHslaAlphaScale(successScale?.success500, 'successAlpha');
 const warningScale = colorOptionToHslaLightnessScale(variables.colorWarning, 'warning');
 const warningAlphaScale = colorOptionToHslaAlphaScale(warningScale?.warning500, 'warningAlpha');
 const primaryScale = createColorMixLightnessScale(variables.colorPrimary, 'primary');
 const primaryBase = primaryScale?.primary500;
 const primaryAlphaScale = primaryBase ? createAlphaScaleWithTransparentize(primaryBase, 'primaryAlpha') : undefined;
 const dangerScale = createColorMixLightnessScale(variables.colorDanger, 'danger');
 const dangerBase = dangerScale?.danger500;
 const dangerAlphaScale = dangerBase ? createAlphaScaleWithTransparentize(dangerBase, 'dangerAlpha') : undefined;
 const successScale = createColorMixLightnessScale(variables.colorSuccess, 'success');
 const successBase = successScale?.success500;
 const successAlphaScale = successBase ? createAlphaScaleWithTransparentize(successBase, 'successAlpha') : undefined;
 const warningScale = createColorMixLightnessScale(variables.colorWarning, 'warning');
 const warningBase = warningScale?.warning500;
 const warningAlphaScale = warningBase ? createAlphaScaleWithTransparentize(warningBase, 'warningAlpha') : undefined;
 const neutralAlphaScales =
 typeof variables.colorNeutral === 'string' && variables.colorNeutral
 ? createAlphaScaleWithTransparentize(variables.colorNeutral, 'neutralAlpha')
 : {};

 return removeUndefinedProps({
 ...primaryScale,
Expand All@@ -31,22 +39,20 @@ export const createColorScales = (theme: Theme) => {
 ...successAlphaScale,
 ...warningScale,
 ...warningAlphaScale,
 ...colorOptionToHslaAlphaScale(variables.colorNeutral, 'neutralAlpha'),
 primaryHover: colors.adjustForLightness(primaryScale?.primary500),
 colorTextOnPrimaryBackground: toHSLA(variables.colorTextOnPrimaryBackground),
 colorText: toHSLA(variables.colorText),
 colorTextSecondary: toHSLA(variables.colorTextSecondary) || colors.makeTransparent(variables.colorText, 0.35),
 colorInputText: toHSLA(variables.colorInputText),
 colorBackground: toHSLA(variables.colorBackground),
 colorInputBackground: toHSLA(variables.colorInputBackground),
 colorShimmer: toHSLA(variables.colorShimmer),
 ...neutralAlphaScales,
 // TODO(Colors): We are not adjusting the lightness based on the colorPrimary lightness
 primaryHover: primaryBase ? lighten(primaryBase, '90%') : undefined,
 colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,

Comment on lines

+44
 to 
+45

@coderabbitaicoderabbitaiBotJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion
lighten(..., '90%') hardly lightens
lighten(color, '90%') keeps 90 % of the base color and only 10 % white, so the result is barely lighter. If the intent was “90 % lighter”, flip the numbers:
-primaryHover: primaryBase ? lighten(primaryBase, '90%') : undefined,+primaryHover: primaryBase ? lighten(primaryBase, '10%') : undefined,
or clarify with a named helper (lightenBy(percentageOfWhite)) to avoid future confusion.
📝 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.

Suggested change

primaryHover: primaryBase ? lighten(primaryBase,'90%') : undefined,
colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,
primaryHover: primaryBase ? lighten(primaryBase,'10%') : undefined,
colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/customizables/parseVariables.ts around lines 44 to
45, the lighten function is called with '90%' which results in only a slight
lightening because it retains 90% of the base color. To fix this, invert the
percentage to '10%' to achieve a 90% lighter color or refactor the code to use a
named helper function like lightenBy that clearly indicates the percentage of
white added, improving clarity and correctness.

 colorText: variables.colorText,
 colorTextSecondary:
 variables.colorTextSecondary || (variables.colorText ? transparentize(variables.colorText, '35%') : undefined),
 colorInputText: variables.colorInputText,
 colorBackground: variables.colorBackground,
 colorInputBackground: variables.colorInputBackground,
 colorShimmer: variables.colorShimmer,
 });
};

export const toHSLA = (str: string | undefined) => {
 return str ? colors.toHslaString(str) : undefined;
};

export const createRadiiUnits = (theme: Theme) => {
 const { borderRadius } = theme.variables || {};
 if (borderRadius === undefined) {
Expand Down

10 changes: 4 additions & 6 deletions
packages/clerk-js/src/ui/elements/Card/CardFooter.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
import React from 'react';

import { colorMix } from '@/ui/utils/colorMix';

import { useEnvironment } from '../../contexts';
import { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../customizables';
import { useDevMode } from '../../hooks/useDevMode';
import type { InternalTheme, PropsOfComponent } from '../../styledSystem';
import { common, mqu } from '../../styledSystem';
import { colors } from '../../utils';
import { mqu } from '../../styledSystem';
import { Card } from '.';

type CardFooterProps = PropsOfComponent<typeof Flex> & {
Expand DownExpand Up@@ -50,10 +51,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
 t => ({
 marginTop: `-${t.space.$2}`,
 paddingTop: t.space.$2,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 '&:empty': {
 padding: 0,
 marginTop: 0,
Expand Down

8 changes: 2 additions & 6 deletions
packages/clerk-js/src/ui/elements/Disclosure.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,8 +5,7 @@ import { Box, descriptors, Icon, SimpleButton, Span, useAppearance } from '../cu
import { usePrefersReducedMotion } from '../hooks';
import { ChevronDown } from '../icons';
import type { ThemableCssProp } from '../styledSystem';
import { common } from '../styledSystem';
import { colors } from '../utils';
import { colorMix } from '../utils/colorMix';

/* -------------------------------------------------------------------------------------------------
 * Disclosure Context
Expand DownExpand Up@@ -168,10 +167,7 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, re
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
 borderColor: t.colors.$neutralAlpha100,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 })}
 >
 {children}
Expand Down

22 changes: 6 additions & 16 deletions
packages/clerk-js/src/ui/elements/Drawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,8 +19,7 @@ import { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../c
import { useDirection, usePrefersReducedMotion, useScrollLock } from '../hooks';
import { Close as CloseIcon } from '../icons';
import type { ThemableCssProp } from '../styledSystem';
import { common } from '../styledSystem';
import { colors } from '../utils';
import { colorMix, transparentize } from '../utils/colorMix';
import { IconButton } from './IconButton';

type FloatingPortalProps = React.ComponentProps<typeof FloatingPortal>;
Expand DownExpand Up@@ -151,7 +150,7 @@ export const FloatingOverlay = React.forwardRef(function FloatingOverlay(
 sx={[
 t => ({
 inset: 0,
 backgroundColor: colors.setAlpha(t.colors.$colorBackground, 0.28),
 backgroundColor: transparentize(t.colors.$colorBackground, '28%'),
 }),
 props.sx,
 ]}
Expand DownExpand Up@@ -298,10 +297,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children,
 sx={[
 t => ({
 display: 'flex',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderBlockEndWidth: t.borderWidths.$normal,
 borderBlockEndStyle: t.borderStyles.$solid,
 borderBlockEndColor: t.colors.$neutralAlpha100,
Expand DownExpand Up@@ -378,10 +374,7 @@ const Footer = React.forwardRef<HTMLDivElement, FooterProps>(({ children, sx, ..
 t => ({
 display: 'flex',
 flexDirection: 'column',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderBlockStartWidth: t.borderWidths.$normal,
 borderBlockStartStyle: t.borderStyles.$solid,
 borderBlockStartColor: t.colors.$neutralAlpha100,
Expand DownExpand Up@@ -496,7 +489,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
 sx={t => ({
 position: 'absolute',
 inset: 0,
 backgroundImage: `linear-gradient(to bottom, ${colors.setAlpha(t.colors.$colorBackground, 0.28)}, ${t.colors.$colorBackground})`,
 backgroundImage: `linear-gradient(to bottom, ${transparentize(t.colors.$colorBackground, '28%')}, ${t.colors.$colorBackground})`,
 })}
 />

Expand All@@ -521,10 +514,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
 bottom: 0,
 left: 0,
 right: 0,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: t.space.$4,
 borderStartStartRadius: t.radii.$md,
 borderStartEndRadius: t.radii.$md,
Expand Down

13 changes: 4 additions & 9 deletions
packages/clerk-js/src/ui/elements/Navbar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,8 +8,9 @@ import { useNavigateToFlowStart, usePopover } from '../hooks';
import { Menu } from '../icons';
import { useRouter } from '../router';
import type { PropsOfComponent } from '../styledSystem';
import { animations, common, mqu } from '../styledSystem';
import { animations, mqu } from '../styledSystem';
import { colors } from '../utils';
import { colorMix } from '../utils/colorMix';
import { Card } from './Card';
import { withFloatingTree } from './contexts';
import { DevModeOverlay } from './DevModeNotice';
Expand DownExpand Up@@ -146,10 +147,7 @@ const NavbarContainer = (
 width: t.sizes.$57,
 position: 'relative',
 maxWidth: t.space.$57,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: `${t.space.$6} ${t.space.$5} ${t.space.$4} ${t.space.$3}`,
 marginRight: `-${t.space.$2}`,
 color: t.colors.$colorText,
Expand DownExpand Up@@ -319,10 +317,7 @@ export const NavbarMenuButtonRow = ({ navbarTitleLocalizationKey, ...props }: Na
 elementDescriptor={descriptors.navbarMobileMenuRow}
 sx={t => ({
 display: 'none',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: `${t.space.$2} ${t.space.$3} ${t.space.$4} ${t.space.$3}`,
 marginBottom: `-${t.space.$2}`,
 [mqu.md]: {
Expand Down

9 changes: 3 additions & 6 deletions
packages/clerk-js/src/ui/elements/PopoverCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,8 +4,8 @@ import { useEnvironment } from '../contexts';
import { Col, descriptors, Flex, Flow, useAppearance } from '../customizables';
import type { ElementDescriptor } from '../customizables/elementDescriptors';
import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
import { animations, common } from '../styledSystem';
import { colors } from '../utils';
import { animations } from '../styledSystem';
import { colorMix } from '../utils/colorMix';
import { Card } from './Card';

const PopoverCardRoot = React.forwardRef<
Expand DownExpand Up@@ -81,10 +81,7 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
 justify='between'
 sx={[
 t => ({
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 marginTop: `-${t.space.$2}`,
 paddingTop: t.space.$2,
 '&:empty': {
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
fix(clerk-js): CSS Variables#6100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

tmilewski
wants to merge
10
commits into

from

 Closed


fix(clerk-js): CSS Variables
#6100
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
4276ecd

Create colorMix.ts


alexcarpenter Jun 4, 2025
167b12c

refactor(colorMix): Introduce colorMix function for color manipulatio…


alexcarpenter Jun 4, 2025
a33cec6

wip


alexcarpenter Jun 4, 2025
eb9f682

wip


alexcarpenter Jun 4, 2025
f7ebfcc

wip


alexcarpenter Jun 4, 2025
3569d15

fix(clerk-js): Color typing


tmilewski Jun 10, 2025
23316c5

feat(clerk-js): Introduce CSS variables


tmilewski Jun 12, 2025
a1299d6

feat(clerk-js): Introduce CSS Variables


tmilewski Jun 12, 2025
3bf7284

chore(clerk-js): Minor clean-up


tmilewski Jun 12, 2025
94cb7b8

chore: Add interim changeset


tmilewski Jun 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/warm-pens-tickle.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': minor
---

[TODO]

Comment on lines

+1
 to 
+5

@coderabbitaicoderabbitaiBotJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue
Populate the changeset before merging
[TODO] will reach the changelog verbatim, leaving consumers without any context for the minor release. Replace it with a concise summary of the CSS-variable migration and colour-utility refactor.
🤖 Prompt for AI Agents
In the file .changeset/warm-pens-tickle.md at lines 1 to 5, replace the
placeholder text "[TODO]" with a concise summary describing the CSS-variable
migration and colour-utility refactor. This summary should clearly explain the
changes made in this minor release to provide useful context for consumers in
the changelog.


2 changes: 1 addition & 1 deletion
packages/clerk-js/sandbox/app.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -345,7 +345,7 @@ void (async () => {
 signUpUrl: '/sign-up',
 });
 renderCurrentRoute();
 updateVariables();
// updateVariables(); // Commented out as it overrides css variables
 updateOtherOptions();
 } else {
 console.error(`Unknown route: "${route}".`);
Expand Down

21 changes: 21 additions & 0 deletions
packages/clerk-js/sandbox/template.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,27 @@
 name="viewport"
 content="width=device-width,initial-scale=1"
 />
 <style>
 :root {
 --clerk-primary: #2F3037; /* default: #2F3037 */
 --clerk-foreground: #212126; /* default: #212126 */
 --clerk-background: white; /* default: white */
 --clerk-primary-foreground: white; /* default: white */
 --clerk-secondary-foreground: #747686; /* default: #747686 */
 --clerk-danger: #EF4444; /* default: #EF4444 */
 --clerk-input: white; /* default: white */
 --clerk-neutral: black; /* default: black */

 --clerk-line-height: normal; /* default: normal */
 --clerk-spacing: 1rem; /* default: 1rem */
 --clerk-border-width: 1px; /* default: 1px */
 --clerk-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* default: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" */
 --clerk-font-size: 0.8125rem; /* default: 0.8125rem */
 --clerk-font-weight: 400; /* default: 400 */
 --clerk-letter-spacing: normal; /* default: normal */
 --clerk-border-radius: 0.375rem; /* default: 0.375rem */
 }
 </style>
 <script src="https://cdn.tailwindcss.com"></script>
 <script>
 tailwind.config = {
Expand Down

13 changes: 3 additions & 10 deletions
packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,8 +13,7 @@ import { Tooltip } from '@/ui/elements/Tooltip';
import { LockDottedCircle } from '@/ui/icons';
import { Textarea } from '@/ui/primitives';
import type { ThemableCssProp } from '@/ui/styledSystem';
import { common } from '@/ui/styledSystem';
import * as utils from '@/ui/utils';
import { colorMix } from '@/ui/utils/colorMix';

export function OAuthConsentInternal() {
 const { scopes, oAuthApplicationName, oAuthApplicationLogoUrl, redirectUrl, onDeny, onAllow } =
Expand DownExpand Up@@ -121,10 +120,7 @@ export function OAuthConsentInternal() {
 <Box
 sx={t => ({
 padding: t.space.$3,
 background: common.mergedColorsBackground(
 utils.colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 })}

Comment on lines

121
 to 
124

@coderabbitaicoderabbitaiBotJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent
🧩 Analysis chain
Color-mix may break on non-Chromium browsers – add fallback
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50) generates a color-mix() expression, which is still behind flags in Safari 17 and completely unsupported in Firefox ≤ 126. Users on those browsers will get no background color.
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
+backgroundColor: [+ colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),+ t.colors.$neutralAlpha50, // fallback for browsers without color-mix+].join(','),
This keeps the new look while preserving graceful degradation.
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Search for occurrences of `colorMix` in the codebase
grep -R "colorMix" -n .
Length of output: 65620
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Display first 200 lines of the colorMix utility to verify its output
sed -n '1,200p' packages/clerk-js/src/ui/utils/colorMix.ts
Length of output: 5964
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Show lines 1-200 of the OAuthConsent.tsx for context
sed -n '1,200p' packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx
Length of output: 7269
Add a solid fallback before using colorMix for unsupported browsers
To avoid an invalid background-color in browsers that don’t yet support color-mix(), declare the plain alpha background first, then override with your mixed color. For example, in packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx around line 123:
 sx={t => ({
padding: t.space.$3,
- backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),+ // fallback for browsers without color-mix+ backgroundColor: t.colors.$neutralAlpha50,+ backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
})}
Please apply the same pattern wherever colorMix(…, t.colors.$neutralAlpha50) (or other mixes) is used, e.g.:
• packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

• packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx

• packages/clerk-js/src/ui/elements/Card/CardFooter.tsx

• packages/clerk-js/src/ui/elements/Disclosure.tsx

• packages/clerk-js/src/ui/elements/Drawer.tsx

• packages/clerk-js/src/ui/elements/Navbar.tsx

• packages/clerk-js/src/ui/elements/PopoverCard.tsx
Consider extracting a helper or theme token if this becomes a widespread pattern.
📝 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.

Suggested change

sx={t=>({
padding: t.space.$3,
background: common.mergedColorsBackground(
utils.colors.setAlpha(t.colors.$colorBackground,1),
t.colors.$neutralAlpha50,
),
backgroundColor: colorMix(t.colors.$colorBackground,t.colors.$neutralAlpha50),
})}
sx={t=>({
padding: t.space.$3,
+// fallback for browsers without color-mix
+backgroundColor: t.colors.$neutralAlpha50,
backgroundColor: colorMix(t.colors.$colorBackground,t.colors.$neutralAlpha50),
})}
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx around
lines 121 to 124, the backgroundColor uses colorMix which is unsupported in some
browsers. Fix this by first setting backgroundColor to the solid alpha color
t.colors.$neutralAlpha50 as a fallback, then override it with the colorMix
expression. Apply this pattern to ensure graceful degradation and consider
creating a helper or theme token if this pattern is used frequently across the
codebase.

@dstaleydstaleyJun 16, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This package only supports browsers released in the last two years (since May 8 2023), so all of our supported browsers support color-mix().
@coderabbitaicoderabbitaiBotJun 16, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dstaley Thank you for the clarification! I appreciate you letting me know about the package's browser support policy. That makes perfect sense - if you're only supporting browsers from the last two years, then color-mix() support is indeed guaranteed and no fallbacks are needed.
✏️ Learnings added
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.363Z
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.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
 >
 <Text
Expand DownExpand Up@@ -333,10 +329,7 @@ function ConnectionIcon({ size = 'md', sx }: { size?: 'sm' | 'md'; sx?: Themable
 <Box
 sx={t => [
 {
 background: common.mergedColorsBackground(
 utils.colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderRadius: t.radii.$circle,
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
Expand Down

10 changes: 4 additions & 6 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,7 @@ import * as React from 'react';

import { Switch } from '@/ui/elements/Switch';
import { Tooltip } from '@/ui/elements/Tooltip';
import { colorMix } from '@/ui/utils/colorMix';

import { useProtect } from '../../common';
import { usePlansContext, usePricingTableContext, useSubscriberTypeContext } from '../../contexts';
Expand All@@ -22,8 +23,8 @@ import {
 Text,
} from '../../customizables';
import { Check, Plus } from '../../icons';
import { common, InternalThemeProvider } from '../../styledSystem';
import { colors, getClosestProfileScrollBox } from '../../utils';
import { InternalThemeProvider } from '../../styledSystem';
import { getClosestProfileScrollBox } from '../../utils';

interface PricingTableDefaultProps {
 plans?: CommercePlanResource[] | null;
Expand DownExpand Up@@ -167,10 +168,7 @@ function Card(props: CardProps) {
 gap: 0,
 gridTemplateRows: 'subgrid',
 gridRow: 'span 5',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
 borderColor: t.colors.$neutralAlpha100,
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,6 +3,7 @@ import * as React from 'react';

import { Avatar } from '@/ui/elements/Avatar';
import { SegmentedControl } from '@/ui/elements/SegmentedControl';
import { colorMix } from '@/ui/utils/colorMix';

import { usePlansContext } from '../../contexts';
import {
Expand All@@ -21,8 +22,7 @@ import {
} from '../../customizables';
import { usePrefersReducedMotion } from '../../hooks';
import { Check, InformationCircle } from '../../icons';
import { common, InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';
import { colors } from '../../utils';
import { InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';

interface PricingTableMatrixProps {
 plans: CommercePlanResource[] | undefined;
Expand DownExpand Up@@ -55,7 +55,7 @@ export function PricingTableMatrix({
 });

 const highlightBackgroundColor: ThemableCssProp = t => ({
 background: common.mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha25),
 background: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha25),
 });

 const gridTemplateColumns = React.useMemo(() => `repeat(${plans.length + 1}, minmax(9.375rem,1fr))`, [plans.length]);
Expand Down

60 changes: 33 additions & 27 deletions
packages/clerk-js/src/ui/customizables/parseVariables.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,25 +2,33 @@ import type { Theme } from '@clerk/types';

import { spaceScaleKeys } from '../foundations/sizes';
import type { fontSizes, fontWeights } from '../foundations/typography';
import { fromEntries, removeUndefinedProps } from '../utils';
import {
 colorOptionToHslaAlphaScale,
 colorOptionToHslaLightnessScale,
 colors,
 fromEntries,
 removeUndefinedProps,
} from '../utils';
 createAlphaScaleWithTransparentize,
 createColorMixLightnessScale,
 lighten,
 transparentize,
} from '../utils/colorMix';

export const createColorScales = (theme: Theme) => {
 const variables = theme.variables || {};

 const primaryScale = colorOptionToHslaLightnessScale(variables.colorPrimary, 'primary');
 const primaryAlphaScale = colorOptionToHslaAlphaScale(primaryScale?.primary500, 'primaryAlpha');
 const dangerScale = colorOptionToHslaLightnessScale(variables.colorDanger, 'danger');
 const dangerAlphaScale = colorOptionToHslaAlphaScale(dangerScale?.danger500, 'dangerAlpha');
 const successScale = colorOptionToHslaLightnessScale(variables.colorSuccess, 'success');
 const successAlphaScale = colorOptionToHslaAlphaScale(successScale?.success500, 'successAlpha');
 const warningScale = colorOptionToHslaLightnessScale(variables.colorWarning, 'warning');
 const warningAlphaScale = colorOptionToHslaAlphaScale(warningScale?.warning500, 'warningAlpha');
 const primaryScale = createColorMixLightnessScale(variables.colorPrimary, 'primary');
 const primaryBase = primaryScale?.primary500;
 const primaryAlphaScale = primaryBase ? createAlphaScaleWithTransparentize(primaryBase, 'primaryAlpha') : undefined;
 const dangerScale = createColorMixLightnessScale(variables.colorDanger, 'danger');
 const dangerBase = dangerScale?.danger500;
 const dangerAlphaScale = dangerBase ? createAlphaScaleWithTransparentize(dangerBase, 'dangerAlpha') : undefined;
 const successScale = createColorMixLightnessScale(variables.colorSuccess, 'success');
 const successBase = successScale?.success500;
 const successAlphaScale = successBase ? createAlphaScaleWithTransparentize(successBase, 'successAlpha') : undefined;
 const warningScale = createColorMixLightnessScale(variables.colorWarning, 'warning');
 const warningBase = warningScale?.warning500;
 const warningAlphaScale = warningBase ? createAlphaScaleWithTransparentize(warningBase, 'warningAlpha') : undefined;
 const neutralAlphaScales =
 typeof variables.colorNeutral === 'string' && variables.colorNeutral
 ? createAlphaScaleWithTransparentize(variables.colorNeutral, 'neutralAlpha')
 : {};

 return removeUndefinedProps({
 ...primaryScale,
Expand All@@ -31,22 +39,20 @@ export const createColorScales = (theme: Theme) => {
 ...successAlphaScale,
 ...warningScale,
 ...warningAlphaScale,
 ...colorOptionToHslaAlphaScale(variables.colorNeutral, 'neutralAlpha'),
 primaryHover: colors.adjustForLightness(primaryScale?.primary500),
 colorTextOnPrimaryBackground: toHSLA(variables.colorTextOnPrimaryBackground),
 colorText: toHSLA(variables.colorText),
 colorTextSecondary: toHSLA(variables.colorTextSecondary) || colors.makeTransparent(variables.colorText, 0.35),
 colorInputText: toHSLA(variables.colorInputText),
 colorBackground: toHSLA(variables.colorBackground),
 colorInputBackground: toHSLA(variables.colorInputBackground),
 colorShimmer: toHSLA(variables.colorShimmer),
 ...neutralAlphaScales,
 // TODO(Colors): We are not adjusting the lightness based on the colorPrimary lightness
 primaryHover: primaryBase ? lighten(primaryBase, '90%') : undefined,
 colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,

Comment on lines

+44
 to 
+45

@coderabbitaicoderabbitaiBotJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion
lighten(..., '90%') hardly lightens
lighten(color, '90%') keeps 90 % of the base color and only 10 % white, so the result is barely lighter. If the intent was “90 % lighter”, flip the numbers:
-primaryHover: primaryBase ? lighten(primaryBase, '90%') : undefined,+primaryHover: primaryBase ? lighten(primaryBase, '10%') : undefined,
or clarify with a named helper (lightenBy(percentageOfWhite)) to avoid future confusion.
📝 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.

Suggested change

primaryHover: primaryBase ? lighten(primaryBase,'90%') : undefined,
colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,
primaryHover: primaryBase ? lighten(primaryBase,'10%') : undefined,
colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/customizables/parseVariables.ts around lines 44 to
45, the lighten function is called with '90%' which results in only a slight
lightening because it retains 90% of the base color. To fix this, invert the
percentage to '10%' to achieve a 90% lighter color or refactor the code to use a
named helper function like lightenBy that clearly indicates the percentage of
white added, improving clarity and correctness.

 colorText: variables.colorText,
 colorTextSecondary:
 variables.colorTextSecondary || (variables.colorText ? transparentize(variables.colorText, '35%') : undefined),
 colorInputText: variables.colorInputText,
 colorBackground: variables.colorBackground,
 colorInputBackground: variables.colorInputBackground,
 colorShimmer: variables.colorShimmer,
 });
};

export const toHSLA = (str: string | undefined) => {
 return str ? colors.toHslaString(str) : undefined;
};

export const createRadiiUnits = (theme: Theme) => {
 const { borderRadius } = theme.variables || {};
 if (borderRadius === undefined) {
Expand Down

10 changes: 4 additions & 6 deletions
packages/clerk-js/src/ui/elements/Card/CardFooter.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
import React from 'react';

import { colorMix } from '@/ui/utils/colorMix';

import { useEnvironment } from '../../contexts';
import { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../customizables';
import { useDevMode } from '../../hooks/useDevMode';
import type { InternalTheme, PropsOfComponent } from '../../styledSystem';
import { common, mqu } from '../../styledSystem';
import { colors } from '../../utils';
import { mqu } from '../../styledSystem';
import { Card } from '.';

type CardFooterProps = PropsOfComponent<typeof Flex> & {
Expand DownExpand Up@@ -50,10 +51,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
 t => ({
 marginTop: `-${t.space.$2}`,
 paddingTop: t.space.$2,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 '&:empty': {
 padding: 0,
 marginTop: 0,
Expand Down

8 changes: 2 additions & 6 deletions
packages/clerk-js/src/ui/elements/Disclosure.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,8 +5,7 @@ import { Box, descriptors, Icon, SimpleButton, Span, useAppearance } from '../cu
import { usePrefersReducedMotion } from '../hooks';
import { ChevronDown } from '../icons';
import type { ThemableCssProp } from '../styledSystem';
import { common } from '../styledSystem';
import { colors } from '../utils';
import { colorMix } from '../utils/colorMix';

/* -------------------------------------------------------------------------------------------------
 * Disclosure Context
Expand DownExpand Up@@ -168,10 +167,7 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, re
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
 borderColor: t.colors.$neutralAlpha100,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 })}
 >
 {children}
Expand Down

22 changes: 6 additions & 16 deletions
packages/clerk-js/src/ui/elements/Drawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,8 +19,7 @@ import { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../c
import { useDirection, usePrefersReducedMotion, useScrollLock } from '../hooks';
import { Close as CloseIcon } from '../icons';
import type { ThemableCssProp } from '../styledSystem';
import { common } from '../styledSystem';
import { colors } from '../utils';
import { colorMix, transparentize } from '../utils/colorMix';
import { IconButton } from './IconButton';

type FloatingPortalProps = React.ComponentProps<typeof FloatingPortal>;
Expand DownExpand Up@@ -151,7 +150,7 @@ export const FloatingOverlay = React.forwardRef(function FloatingOverlay(
 sx={[
 t => ({
 inset: 0,
 backgroundColor: colors.setAlpha(t.colors.$colorBackground, 0.28),
 backgroundColor: transparentize(t.colors.$colorBackground, '28%'),
 }),
 props.sx,
 ]}
Expand DownExpand Up@@ -298,10 +297,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children,
 sx={[
 t => ({
 display: 'flex',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderBlockEndWidth: t.borderWidths.$normal,
 borderBlockEndStyle: t.borderStyles.$solid,
 borderBlockEndColor: t.colors.$neutralAlpha100,
Expand DownExpand Up@@ -378,10 +374,7 @@ const Footer = React.forwardRef<HTMLDivElement, FooterProps>(({ children, sx, ..
 t => ({
 display: 'flex',
 flexDirection: 'column',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderBlockStartWidth: t.borderWidths.$normal,
 borderBlockStartStyle: t.borderStyles.$solid,
 borderBlockStartColor: t.colors.$neutralAlpha100,
Expand DownExpand Up@@ -496,7 +489,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
 sx={t => ({
 position: 'absolute',
 inset: 0,
 backgroundImage: `linear-gradient(to bottom, ${colors.setAlpha(t.colors.$colorBackground, 0.28)}, ${t.colors.$colorBackground})`,
 backgroundImage: `linear-gradient(to bottom, ${transparentize(t.colors.$colorBackground, '28%')}, ${t.colors.$colorBackground})`,
 })}
 />

Expand All@@ -521,10 +514,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
 bottom: 0,
 left: 0,
 right: 0,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: t.space.$4,
 borderStartStartRadius: t.radii.$md,
 borderStartEndRadius: t.radii.$md,
Expand Down

13 changes: 4 additions & 9 deletions
packages/clerk-js/src/ui/elements/Navbar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,8 +8,9 @@ import { useNavigateToFlowStart, usePopover } from '../hooks';
import { Menu } from '../icons';
import { useRouter } from '../router';
import type { PropsOfComponent } from '../styledSystem';
import { animations, common, mqu } from '../styledSystem';
import { animations, mqu } from '../styledSystem';
import { colors } from '../utils';
import { colorMix } from '../utils/colorMix';
import { Card } from './Card';
import { withFloatingTree } from './contexts';
import { DevModeOverlay } from './DevModeNotice';
Expand DownExpand Up@@ -146,10 +147,7 @@ const NavbarContainer = (
 width: t.sizes.$57,
 position: 'relative',
 maxWidth: t.space.$57,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: `${t.space.$6} ${t.space.$5} ${t.space.$4} ${t.space.$3}`,
 marginRight: `-${t.space.$2}`,
 color: t.colors.$colorText,
Expand DownExpand Up@@ -319,10 +317,7 @@ export const NavbarMenuButtonRow = ({ navbarTitleLocalizationKey, ...props }: Na
 elementDescriptor={descriptors.navbarMobileMenuRow}
 sx={t => ({
 display: 'none',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: `${t.space.$2} ${t.space.$3} ${t.space.$4} ${t.space.$3}`,
 marginBottom: `-${t.space.$2}`,
 [mqu.md]: {
Expand Down

9 changes: 3 additions & 6 deletions
packages/clerk-js/src/ui/elements/PopoverCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,8 +4,8 @@ import { useEnvironment } from '../contexts';
import { Col, descriptors, Flex, Flow, useAppearance } from '../customizables';
import type { ElementDescriptor } from '../customizables/elementDescriptors';
import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
import { animations, common } from '../styledSystem';
import { colors } from '../utils';
import { animations } from '../styledSystem';
import { colorMix } from '../utils/colorMix';
import { Card } from './Card';

const PopoverCardRoot = React.forwardRef<
Expand DownExpand Up@@ -81,10 +81,7 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
 justify='between'
 sx={[
 t => ({
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 marginTop: `-${t.space.$2}`,
 paddingTop: t.space.$2,
 '&:empty': {
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(clerk-js): CSS Variables#6100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

tmilewski
wants to merge
10
commits into

from

 Closed


fix(clerk-js): CSS Variables
#6100
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
4276ecd

Create colorMix.ts


alexcarpenter Jun 4, 2025
167b12c

refactor(colorMix): Introduce colorMix function for color manipulatio…


alexcarpenter Jun 4, 2025
a33cec6

wip


alexcarpenter Jun 4, 2025
eb9f682

wip


alexcarpenter Jun 4, 2025
f7ebfcc

wip


alexcarpenter Jun 4, 2025
3569d15

fix(clerk-js): Color typing


tmilewski Jun 10, 2025
23316c5

feat(clerk-js): Introduce CSS variables


tmilewski Jun 12, 2025
a1299d6

feat(clerk-js): Introduce CSS Variables


tmilewski Jun 12, 2025
3bf7284

chore(clerk-js): Minor clean-up


tmilewski Jun 12, 2025
94cb7b8

chore: Add interim changeset


tmilewski Jun 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/warm-pens-tickle.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': minor
---

[TODO]

Comment on lines

+1
 to 
+5

@coderabbitaicoderabbitaiBotJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue
Populate the changeset before merging
[TODO] will reach the changelog verbatim, leaving consumers without any context for the minor release. Replace it with a concise summary of the CSS-variable migration and colour-utility refactor.
🤖 Prompt for AI Agents
In the file .changeset/warm-pens-tickle.md at lines 1 to 5, replace the
placeholder text "[TODO]" with a concise summary describing the CSS-variable
migration and colour-utility refactor. This summary should clearly explain the
changes made in this minor release to provide useful context for consumers in
the changelog.


2 changes: 1 addition & 1 deletion
packages/clerk-js/sandbox/app.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -345,7 +345,7 @@ void (async () => {
 signUpUrl: '/sign-up',
 });
 renderCurrentRoute();
 updateVariables();
// updateVariables(); // Commented out as it overrides css variables
 updateOtherOptions();
 } else {
 console.error(`Unknown route: "${route}".`);
Expand Down

21 changes: 21 additions & 0 deletions
packages/clerk-js/sandbox/template.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,27 @@
 name="viewport"
 content="width=device-width,initial-scale=1"
 />
 <style>
 :root {
 --clerk-primary: #2F3037; /* default: #2F3037 */
 --clerk-foreground: #212126; /* default: #212126 */
 --clerk-background: white; /* default: white */
 --clerk-primary-foreground: white; /* default: white */
 --clerk-secondary-foreground: #747686; /* default: #747686 */
 --clerk-danger: #EF4444; /* default: #EF4444 */
 --clerk-input: white; /* default: white */
 --clerk-neutral: black; /* default: black */

 --clerk-line-height: normal; /* default: normal */
 --clerk-spacing: 1rem; /* default: 1rem */
 --clerk-border-width: 1px; /* default: 1px */
 --clerk-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* default: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" */
 --clerk-font-size: 0.8125rem; /* default: 0.8125rem */
 --clerk-font-weight: 400; /* default: 400 */
 --clerk-letter-spacing: normal; /* default: normal */
 --clerk-border-radius: 0.375rem; /* default: 0.375rem */
 }
 </style>
 <script src="https://cdn.tailwindcss.com"></script>
 <script>
 tailwind.config = {
Expand Down

13 changes: 3 additions & 10 deletions
packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,8 +13,7 @@ import { Tooltip } from '@/ui/elements/Tooltip';
import { LockDottedCircle } from '@/ui/icons';
import { Textarea } from '@/ui/primitives';
import type { ThemableCssProp } from '@/ui/styledSystem';
import { common } from '@/ui/styledSystem';
import * as utils from '@/ui/utils';
import { colorMix } from '@/ui/utils/colorMix';

export function OAuthConsentInternal() {
 const { scopes, oAuthApplicationName, oAuthApplicationLogoUrl, redirectUrl, onDeny, onAllow } =
Expand DownExpand Up@@ -121,10 +120,7 @@ export function OAuthConsentInternal() {
 <Box
 sx={t => ({
 padding: t.space.$3,
 background: common.mergedColorsBackground(
 utils.colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 })}

Comment on lines

121
 to 
124

@coderabbitaicoderabbitaiBotJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent
🧩 Analysis chain
Color-mix may break on non-Chromium browsers – add fallback
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50) generates a color-mix() expression, which is still behind flags in Safari 17 and completely unsupported in Firefox ≤ 126. Users on those browsers will get no background color.
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
+backgroundColor: [+ colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),+ t.colors.$neutralAlpha50, // fallback for browsers without color-mix+].join(','),
This keeps the new look while preserving graceful degradation.
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Search for occurrences of `colorMix` in the codebase
grep -R "colorMix" -n .
Length of output: 65620
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Display first 200 lines of the colorMix utility to verify its output
sed -n '1,200p' packages/clerk-js/src/ui/utils/colorMix.ts
Length of output: 5964
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Show lines 1-200 of the OAuthConsent.tsx for context
sed -n '1,200p' packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx
Length of output: 7269
Add a solid fallback before using colorMix for unsupported browsers
To avoid an invalid background-color in browsers that don’t yet support color-mix(), declare the plain alpha background first, then override with your mixed color. For example, in packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx around line 123:
 sx={t => ({
padding: t.space.$3,
- backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),+ // fallback for browsers without color-mix+ backgroundColor: t.colors.$neutralAlpha50,+ backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
})}
Please apply the same pattern wherever colorMix(…, t.colors.$neutralAlpha50) (or other mixes) is used, e.g.:
• packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

• packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx

• packages/clerk-js/src/ui/elements/Card/CardFooter.tsx

• packages/clerk-js/src/ui/elements/Disclosure.tsx

• packages/clerk-js/src/ui/elements/Drawer.tsx

• packages/clerk-js/src/ui/elements/Navbar.tsx

• packages/clerk-js/src/ui/elements/PopoverCard.tsx
Consider extracting a helper or theme token if this becomes a widespread pattern.
📝 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.

Suggested change

sx={t=>({
padding: t.space.$3,
background: common.mergedColorsBackground(
utils.colors.setAlpha(t.colors.$colorBackground,1),
t.colors.$neutralAlpha50,
),
backgroundColor: colorMix(t.colors.$colorBackground,t.colors.$neutralAlpha50),
})}
sx={t=>({
padding: t.space.$3,
+// fallback for browsers without color-mix
+backgroundColor: t.colors.$neutralAlpha50,
backgroundColor: colorMix(t.colors.$colorBackground,t.colors.$neutralAlpha50),
})}
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx around
lines 121 to 124, the backgroundColor uses colorMix which is unsupported in some
browsers. Fix this by first setting backgroundColor to the solid alpha color
t.colors.$neutralAlpha50 as a fallback, then override it with the colorMix
expression. Apply this pattern to ensure graceful degradation and consider
creating a helper or theme token if this pattern is used frequently across the
codebase.

@dstaleydstaleyJun 16, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This package only supports browsers released in the last two years (since May 8 2023), so all of our supported browsers support color-mix().
@coderabbitaicoderabbitaiBotJun 16, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dstaley Thank you for the clarification! I appreciate you letting me know about the package's browser support policy. That makes perfect sense - if you're only supporting browsers from the last two years, then color-mix() support is indeed guaranteed and no fallbacks are needed.
✏️ Learnings added
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.363Z
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.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
 >
 <Text
Expand DownExpand Up@@ -333,10 +329,7 @@ function ConnectionIcon({ size = 'md', sx }: { size?: 'sm' | 'md'; sx?: Themable
 <Box
 sx={t => [
 {
 background: common.mergedColorsBackground(
 utils.colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderRadius: t.radii.$circle,
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
Expand Down

10 changes: 4 additions & 6 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,7 @@ import * as React from 'react';

import { Switch } from '@/ui/elements/Switch';
import { Tooltip } from '@/ui/elements/Tooltip';
import { colorMix } from '@/ui/utils/colorMix';

import { useProtect } from '../../common';
import { usePlansContext, usePricingTableContext, useSubscriberTypeContext } from '../../contexts';
Expand All@@ -22,8 +23,8 @@ import {
 Text,
} from '../../customizables';
import { Check, Plus } from '../../icons';
import { common, InternalThemeProvider } from '../../styledSystem';
import { colors, getClosestProfileScrollBox } from '../../utils';
import { InternalThemeProvider } from '../../styledSystem';
import { getClosestProfileScrollBox } from '../../utils';

interface PricingTableDefaultProps {
 plans?: CommercePlanResource[] | null;
Expand DownExpand Up@@ -167,10 +168,7 @@ function Card(props: CardProps) {
 gap: 0,
 gridTemplateRows: 'subgrid',
 gridRow: 'span 5',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
 borderColor: t.colors.$neutralAlpha100,
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,6 +3,7 @@ import * as React from 'react';

import { Avatar } from '@/ui/elements/Avatar';
import { SegmentedControl } from '@/ui/elements/SegmentedControl';
import { colorMix } from '@/ui/utils/colorMix';

import { usePlansContext } from '../../contexts';
import {
Expand All@@ -21,8 +22,7 @@ import {
} from '../../customizables';
import { usePrefersReducedMotion } from '../../hooks';
import { Check, InformationCircle } from '../../icons';
import { common, InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';
import { colors } from '../../utils';
import { InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';

interface PricingTableMatrixProps {
 plans: CommercePlanResource[] | undefined;
Expand DownExpand Up@@ -55,7 +55,7 @@ export function PricingTableMatrix({
 });

 const highlightBackgroundColor: ThemableCssProp = t => ({
 background: common.mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha25),
 background: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha25),
 });

 const gridTemplateColumns = React.useMemo(() => `repeat(${plans.length + 1}, minmax(9.375rem,1fr))`, [plans.length]);
Expand Down

60 changes: 33 additions & 27 deletions
packages/clerk-js/src/ui/customizables/parseVariables.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,25 +2,33 @@ import type { Theme } from '@clerk/types';

import { spaceScaleKeys } from '../foundations/sizes';
import type { fontSizes, fontWeights } from '../foundations/typography';
import { fromEntries, removeUndefinedProps } from '../utils';
import {
 colorOptionToHslaAlphaScale,
 colorOptionToHslaLightnessScale,
 colors,
 fromEntries,
 removeUndefinedProps,
} from '../utils';
 createAlphaScaleWithTransparentize,
 createColorMixLightnessScale,
 lighten,
 transparentize,
} from '../utils/colorMix';

export const createColorScales = (theme: Theme) => {
 const variables = theme.variables || {};

 const primaryScale = colorOptionToHslaLightnessScale(variables.colorPrimary, 'primary');
 const primaryAlphaScale = colorOptionToHslaAlphaScale(primaryScale?.primary500, 'primaryAlpha');
 const dangerScale = colorOptionToHslaLightnessScale(variables.colorDanger, 'danger');
 const dangerAlphaScale = colorOptionToHslaAlphaScale(dangerScale?.danger500, 'dangerAlpha');
 const successScale = colorOptionToHslaLightnessScale(variables.colorSuccess, 'success');
 const successAlphaScale = colorOptionToHslaAlphaScale(successScale?.success500, 'successAlpha');
 const warningScale = colorOptionToHslaLightnessScale(variables.colorWarning, 'warning');
 const warningAlphaScale = colorOptionToHslaAlphaScale(warningScale?.warning500, 'warningAlpha');
 const primaryScale = createColorMixLightnessScale(variables.colorPrimary, 'primary');
 const primaryBase = primaryScale?.primary500;
 const primaryAlphaScale = primaryBase ? createAlphaScaleWithTransparentize(primaryBase, 'primaryAlpha') : undefined;
 const dangerScale = createColorMixLightnessScale(variables.colorDanger, 'danger');
 const dangerBase = dangerScale?.danger500;
 const dangerAlphaScale = dangerBase ? createAlphaScaleWithTransparentize(dangerBase, 'dangerAlpha') : undefined;
 const successScale = createColorMixLightnessScale(variables.colorSuccess, 'success');
 const successBase = successScale?.success500;
 const successAlphaScale = successBase ? createAlphaScaleWithTransparentize(successBase, 'successAlpha') : undefined;
 const warningScale = createColorMixLightnessScale(variables.colorWarning, 'warning');
 const warningBase = warningScale?.warning500;
 const warningAlphaScale = warningBase ? createAlphaScaleWithTransparentize(warningBase, 'warningAlpha') : undefined;
 const neutralAlphaScales =
 typeof variables.colorNeutral === 'string' && variables.colorNeutral
 ? createAlphaScaleWithTransparentize(variables.colorNeutral, 'neutralAlpha')
 : {};

 return removeUndefinedProps({
 ...primaryScale,
Expand All@@ -31,22 +39,20 @@ export const createColorScales = (theme: Theme) => {
 ...successAlphaScale,
 ...warningScale,
 ...warningAlphaScale,
 ...colorOptionToHslaAlphaScale(variables.colorNeutral, 'neutralAlpha'),
 primaryHover: colors.adjustForLightness(primaryScale?.primary500),
 colorTextOnPrimaryBackground: toHSLA(variables.colorTextOnPrimaryBackground),
 colorText: toHSLA(variables.colorText),
 colorTextSecondary: toHSLA(variables.colorTextSecondary) || colors.makeTransparent(variables.colorText, 0.35),
 colorInputText: toHSLA(variables.colorInputText),
 colorBackground: toHSLA(variables.colorBackground),
 colorInputBackground: toHSLA(variables.colorInputBackground),
 colorShimmer: toHSLA(variables.colorShimmer),
 ...neutralAlphaScales,
 // TODO(Colors): We are not adjusting the lightness based on the colorPrimary lightness
 primaryHover: primaryBase ? lighten(primaryBase, '90%') : undefined,
 colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,

Comment on lines

+44
 to 
+45

@coderabbitaicoderabbitaiBotJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion
lighten(..., '90%') hardly lightens
lighten(color, '90%') keeps 90 % of the base color and only 10 % white, so the result is barely lighter. If the intent was “90 % lighter”, flip the numbers:
-primaryHover: primaryBase ? lighten(primaryBase, '90%') : undefined,+primaryHover: primaryBase ? lighten(primaryBase, '10%') : undefined,
or clarify with a named helper (lightenBy(percentageOfWhite)) to avoid future confusion.
📝 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.

Suggested change

primaryHover: primaryBase ? lighten(primaryBase,'90%') : undefined,
colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,
primaryHover: primaryBase ? lighten(primaryBase,'10%') : undefined,
colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/customizables/parseVariables.ts around lines 44 to
45, the lighten function is called with '90%' which results in only a slight
lightening because it retains 90% of the base color. To fix this, invert the
percentage to '10%' to achieve a 90% lighter color or refactor the code to use a
named helper function like lightenBy that clearly indicates the percentage of
white added, improving clarity and correctness.

 colorText: variables.colorText,
 colorTextSecondary:
 variables.colorTextSecondary || (variables.colorText ? transparentize(variables.colorText, '35%') : undefined),
 colorInputText: variables.colorInputText,
 colorBackground: variables.colorBackground,
 colorInputBackground: variables.colorInputBackground,
 colorShimmer: variables.colorShimmer,
 });
};

export const toHSLA = (str: string | undefined) => {
 return str ? colors.toHslaString(str) : undefined;
};

export const createRadiiUnits = (theme: Theme) => {
 const { borderRadius } = theme.variables || {};
 if (borderRadius === undefined) {
Expand Down

10 changes: 4 additions & 6 deletions
packages/clerk-js/src/ui/elements/Card/CardFooter.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
import React from 'react';

import { colorMix } from '@/ui/utils/colorMix';

import { useEnvironment } from '../../contexts';
import { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../customizables';
import { useDevMode } from '../../hooks/useDevMode';
import type { InternalTheme, PropsOfComponent } from '../../styledSystem';
import { common, mqu } from '../../styledSystem';
import { colors } from '../../utils';
import { mqu } from '../../styledSystem';
import { Card } from '.';

type CardFooterProps = PropsOfComponent<typeof Flex> & {
Expand DownExpand Up@@ -50,10 +51,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
 t => ({
 marginTop: `-${t.space.$2}`,
 paddingTop: t.space.$2,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 '&:empty': {
 padding: 0,
 marginTop: 0,
Expand Down

8 changes: 2 additions & 6 deletions
packages/clerk-js/src/ui/elements/Disclosure.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,8 +5,7 @@ import { Box, descriptors, Icon, SimpleButton, Span, useAppearance } from '../cu
import { usePrefersReducedMotion } from '../hooks';
import { ChevronDown } from '../icons';
import type { ThemableCssProp } from '../styledSystem';
import { common } from '../styledSystem';
import { colors } from '../utils';
import { colorMix } from '../utils/colorMix';

/* -------------------------------------------------------------------------------------------------
 * Disclosure Context
Expand DownExpand Up@@ -168,10 +167,7 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, re
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
 borderColor: t.colors.$neutralAlpha100,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 })}
 >
 {children}
Expand Down

22 changes: 6 additions & 16 deletions
packages/clerk-js/src/ui/elements/Drawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,8 +19,7 @@ import { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../c
import { useDirection, usePrefersReducedMotion, useScrollLock } from '../hooks';
import { Close as CloseIcon } from '../icons';
import type { ThemableCssProp } from '../styledSystem';
import { common } from '../styledSystem';
import { colors } from '../utils';
import { colorMix, transparentize } from '../utils/colorMix';
import { IconButton } from './IconButton';

type FloatingPortalProps = React.ComponentProps<typeof FloatingPortal>;
Expand DownExpand Up@@ -151,7 +150,7 @@ export const FloatingOverlay = React.forwardRef(function FloatingOverlay(
 sx={[
 t => ({
 inset: 0,
 backgroundColor: colors.setAlpha(t.colors.$colorBackground, 0.28),
 backgroundColor: transparentize(t.colors.$colorBackground, '28%'),
 }),
 props.sx,
 ]}
Expand DownExpand Up@@ -298,10 +297,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children,
 sx={[
 t => ({
 display: 'flex',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderBlockEndWidth: t.borderWidths.$normal,
 borderBlockEndStyle: t.borderStyles.$solid,
 borderBlockEndColor: t.colors.$neutralAlpha100,
Expand DownExpand Up@@ -378,10 +374,7 @@ const Footer = React.forwardRef<HTMLDivElement, FooterProps>(({ children, sx, ..
 t => ({
 display: 'flex',
 flexDirection: 'column',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderBlockStartWidth: t.borderWidths.$normal,
 borderBlockStartStyle: t.borderStyles.$solid,
 borderBlockStartColor: t.colors.$neutralAlpha100,
Expand DownExpand Up@@ -496,7 +489,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
 sx={t => ({
 position: 'absolute',
 inset: 0,
 backgroundImage: `linear-gradient(to bottom, ${colors.setAlpha(t.colors.$colorBackground, 0.28)}, ${t.colors.$colorBackground})`,
 backgroundImage: `linear-gradient(to bottom, ${transparentize(t.colors.$colorBackground, '28%')}, ${t.colors.$colorBackground})`,
 })}
 />

Expand All@@ -521,10 +514,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
 bottom: 0,
 left: 0,
 right: 0,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: t.space.$4,
 borderStartStartRadius: t.radii.$md,
 borderStartEndRadius: t.radii.$md,
Expand Down

13 changes: 4 additions & 9 deletions
packages/clerk-js/src/ui/elements/Navbar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,8 +8,9 @@ import { useNavigateToFlowStart, usePopover } from '../hooks';
import { Menu } from '../icons';
import { useRouter } from '../router';
import type { PropsOfComponent } from '../styledSystem';
import { animations, common, mqu } from '../styledSystem';
import { animations, mqu } from '../styledSystem';
import { colors } from '../utils';
import { colorMix } from '../utils/colorMix';
import { Card } from './Card';
import { withFloatingTree } from './contexts';
import { DevModeOverlay } from './DevModeNotice';
Expand DownExpand Up@@ -146,10 +147,7 @@ const NavbarContainer = (
 width: t.sizes.$57,
 position: 'relative',
 maxWidth: t.space.$57,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: `${t.space.$6} ${t.space.$5} ${t.space.$4} ${t.space.$3}`,
 marginRight: `-${t.space.$2}`,
 color: t.colors.$colorText,
Expand DownExpand Up@@ -319,10 +317,7 @@ export const NavbarMenuButtonRow = ({ navbarTitleLocalizationKey, ...props }: Na
 elementDescriptor={descriptors.navbarMobileMenuRow}
 sx={t => ({
 display: 'none',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: `${t.space.$2} ${t.space.$3} ${t.space.$4} ${t.space.$3}`,
 marginBottom: `-${t.space.$2}`,
 [mqu.md]: {
Expand Down

9 changes: 3 additions & 6 deletions
packages/clerk-js/src/ui/elements/PopoverCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,8 +4,8 @@ import { useEnvironment } from '../contexts';
import { Col, descriptors, Flex, Flow, useAppearance } from '../customizables';
import type { ElementDescriptor } from '../customizables/elementDescriptors';
import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
import { animations, common } from '../styledSystem';
import { colors } from '../utils';
import { animations } from '../styledSystem';
import { colorMix } from '../utils/colorMix';
import { Card } from './Card';

const PopoverCardRoot = React.forwardRef<
Expand DownExpand Up@@ -81,10 +81,7 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
 justify='between'
 sx={[
 t => ({
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 marginTop: `-${t.space.$2}`,
 paddingTop: t.space.$2,
 '&:empty': {
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(clerk-js): CSS Variables#6100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

tmilewski
wants to merge
10
commits into

from

 Closed


fix(clerk-js): CSS Variables
#6100
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
4276ecd

Create colorMix.ts


alexcarpenter Jun 4, 2025
167b12c

refactor(colorMix): Introduce colorMix function for color manipulatio…


alexcarpenter Jun 4, 2025
a33cec6

wip


alexcarpenter Jun 4, 2025
eb9f682

wip


alexcarpenter Jun 4, 2025
f7ebfcc

wip


alexcarpenter Jun 4, 2025
3569d15

fix(clerk-js): Color typing


tmilewski Jun 10, 2025
23316c5

feat(clerk-js): Introduce CSS variables


tmilewski Jun 12, 2025
a1299d6

feat(clerk-js): Introduce CSS Variables


tmilewski Jun 12, 2025
3bf7284

chore(clerk-js): Minor clean-up


tmilewski Jun 12, 2025
94cb7b8

chore: Add interim changeset


tmilewski Jun 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/warm-pens-tickle.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': minor
---

[TODO]

Comment on lines

+1
 to 
+5

@coderabbitaicoderabbitaiBotJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue
Populate the changeset before merging
[TODO] will reach the changelog verbatim, leaving consumers without any context for the minor release. Replace it with a concise summary of the CSS-variable migration and colour-utility refactor.
🤖 Prompt for AI Agents
In the file .changeset/warm-pens-tickle.md at lines 1 to 5, replace the
placeholder text "[TODO]" with a concise summary describing the CSS-variable
migration and colour-utility refactor. This summary should clearly explain the
changes made in this minor release to provide useful context for consumers in
the changelog.


2 changes: 1 addition & 1 deletion
packages/clerk-js/sandbox/app.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -345,7 +345,7 @@ void (async () => {
 signUpUrl: '/sign-up',
 });
 renderCurrentRoute();
 updateVariables();
// updateVariables(); // Commented out as it overrides css variables
 updateOtherOptions();
 } else {
 console.error(`Unknown route: "${route}".`);
Expand Down

21 changes: 21 additions & 0 deletions
packages/clerk-js/sandbox/template.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,27 @@
 name="viewport"
 content="width=device-width,initial-scale=1"
 />
 <style>
 :root {
 --clerk-primary: #2F3037; /* default: #2F3037 */
 --clerk-foreground: #212126; /* default: #212126 */
 --clerk-background: white; /* default: white */
 --clerk-primary-foreground: white; /* default: white */
 --clerk-secondary-foreground: #747686; /* default: #747686 */
 --clerk-danger: #EF4444; /* default: #EF4444 */
 --clerk-input: white; /* default: white */
 --clerk-neutral: black; /* default: black */

 --clerk-line-height: normal; /* default: normal */
 --clerk-spacing: 1rem; /* default: 1rem */
 --clerk-border-width: 1px; /* default: 1px */
 --clerk-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* default: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" */
 --clerk-font-size: 0.8125rem; /* default: 0.8125rem */
 --clerk-font-weight: 400; /* default: 400 */
 --clerk-letter-spacing: normal; /* default: normal */
 --clerk-border-radius: 0.375rem; /* default: 0.375rem */
 }
 </style>
 <script src="https://cdn.tailwindcss.com"></script>
 <script>
 tailwind.config = {
Expand Down

13 changes: 3 additions & 10 deletions
packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,8 +13,7 @@ import { Tooltip } from '@/ui/elements/Tooltip';
import { LockDottedCircle } from '@/ui/icons';
import { Textarea } from '@/ui/primitives';
import type { ThemableCssProp } from '@/ui/styledSystem';
import { common } from '@/ui/styledSystem';
import * as utils from '@/ui/utils';
import { colorMix } from '@/ui/utils/colorMix';

export function OAuthConsentInternal() {
 const { scopes, oAuthApplicationName, oAuthApplicationLogoUrl, redirectUrl, onDeny, onAllow } =
Expand DownExpand Up@@ -121,10 +120,7 @@ export function OAuthConsentInternal() {
 <Box
 sx={t => ({
 padding: t.space.$3,
 background: common.mergedColorsBackground(
 utils.colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 })}

Comment on lines

121
 to 
124

@coderabbitaicoderabbitaiBotJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent
🧩 Analysis chain
Color-mix may break on non-Chromium browsers – add fallback
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50) generates a color-mix() expression, which is still behind flags in Safari 17 and completely unsupported in Firefox ≤ 126. Users on those browsers will get no background color.
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
+backgroundColor: [+ colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),+ t.colors.$neutralAlpha50, // fallback for browsers without color-mix+].join(','),
This keeps the new look while preserving graceful degradation.
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Search for occurrences of `colorMix` in the codebase
grep -R "colorMix" -n .
Length of output: 65620
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Display first 200 lines of the colorMix utility to verify its output
sed -n '1,200p' packages/clerk-js/src/ui/utils/colorMix.ts
Length of output: 5964
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Show lines 1-200 of the OAuthConsent.tsx for context
sed -n '1,200p' packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx
Length of output: 7269
Add a solid fallback before using colorMix for unsupported browsers
To avoid an invalid background-color in browsers that don’t yet support color-mix(), declare the plain alpha background first, then override with your mixed color. For example, in packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx around line 123:
 sx={t => ({
padding: t.space.$3,
- backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),+ // fallback for browsers without color-mix+ backgroundColor: t.colors.$neutralAlpha50,+ backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
})}
Please apply the same pattern wherever colorMix(…, t.colors.$neutralAlpha50) (or other mixes) is used, e.g.:
• packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

• packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx

• packages/clerk-js/src/ui/elements/Card/CardFooter.tsx

• packages/clerk-js/src/ui/elements/Disclosure.tsx

• packages/clerk-js/src/ui/elements/Drawer.tsx

• packages/clerk-js/src/ui/elements/Navbar.tsx

• packages/clerk-js/src/ui/elements/PopoverCard.tsx
Consider extracting a helper or theme token if this becomes a widespread pattern.
📝 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.

Suggested change

sx={t=>({
padding: t.space.$3,
background: common.mergedColorsBackground(
utils.colors.setAlpha(t.colors.$colorBackground,1),
t.colors.$neutralAlpha50,
),
backgroundColor: colorMix(t.colors.$colorBackground,t.colors.$neutralAlpha50),
})}
sx={t=>({
padding: t.space.$3,
+// fallback for browsers without color-mix
+backgroundColor: t.colors.$neutralAlpha50,
backgroundColor: colorMix(t.colors.$colorBackground,t.colors.$neutralAlpha50),
})}
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx around
lines 121 to 124, the backgroundColor uses colorMix which is unsupported in some
browsers. Fix this by first setting backgroundColor to the solid alpha color
t.colors.$neutralAlpha50 as a fallback, then override it with the colorMix
expression. Apply this pattern to ensure graceful degradation and consider
creating a helper or theme token if this pattern is used frequently across the
codebase.

@dstaleydstaleyJun 16, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This package only supports browsers released in the last two years (since May 8 2023), so all of our supported browsers support color-mix().
@coderabbitaicoderabbitaiBotJun 16, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dstaley Thank you for the clarification! I appreciate you letting me know about the package's browser support policy. That makes perfect sense - if you're only supporting browsers from the last two years, then color-mix() support is indeed guaranteed and no fallbacks are needed.
✏️ Learnings added
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.363Z
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.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
 >
 <Text
Expand DownExpand Up@@ -333,10 +329,7 @@ function ConnectionIcon({ size = 'md', sx }: { size?: 'sm' | 'md'; sx?: Themable
 <Box
 sx={t => [
 {
 background: common.mergedColorsBackground(
 utils.colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderRadius: t.radii.$circle,
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
Expand Down

10 changes: 4 additions & 6 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,7 @@ import * as React from 'react';

import { Switch } from '@/ui/elements/Switch';
import { Tooltip } from '@/ui/elements/Tooltip';
import { colorMix } from '@/ui/utils/colorMix';

import { useProtect } from '../../common';
import { usePlansContext, usePricingTableContext, useSubscriberTypeContext } from '../../contexts';
Expand All@@ -22,8 +23,8 @@ import {
 Text,
} from '../../customizables';
import { Check, Plus } from '../../icons';
import { common, InternalThemeProvider } from '../../styledSystem';
import { colors, getClosestProfileScrollBox } from '../../utils';
import { InternalThemeProvider } from '../../styledSystem';
import { getClosestProfileScrollBox } from '../../utils';

interface PricingTableDefaultProps {
 plans?: CommercePlanResource[] | null;
Expand DownExpand Up@@ -167,10 +168,7 @@ function Card(props: CardProps) {
 gap: 0,
 gridTemplateRows: 'subgrid',
 gridRow: 'span 5',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
 borderColor: t.colors.$neutralAlpha100,
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,6 +3,7 @@ import * as React from 'react';

import { Avatar } from '@/ui/elements/Avatar';
import { SegmentedControl } from '@/ui/elements/SegmentedControl';
import { colorMix } from '@/ui/utils/colorMix';

import { usePlansContext } from '../../contexts';
import {
Expand All@@ -21,8 +22,7 @@ import {
} from '../../customizables';
import { usePrefersReducedMotion } from '../../hooks';
import { Check, InformationCircle } from '../../icons';
import { common, InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';
import { colors } from '../../utils';
import { InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';

interface PricingTableMatrixProps {
 plans: CommercePlanResource[] | undefined;
Expand DownExpand Up@@ -55,7 +55,7 @@ export function PricingTableMatrix({
 });

 const highlightBackgroundColor: ThemableCssProp = t => ({
 background: common.mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha25),
 background: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha25),
 });

 const gridTemplateColumns = React.useMemo(() => `repeat(${plans.length + 1}, minmax(9.375rem,1fr))`, [plans.length]);
Expand Down

60 changes: 33 additions & 27 deletions
packages/clerk-js/src/ui/customizables/parseVariables.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,25 +2,33 @@ import type { Theme } from '@clerk/types';

import { spaceScaleKeys } from '../foundations/sizes';
import type { fontSizes, fontWeights } from '../foundations/typography';
import { fromEntries, removeUndefinedProps } from '../utils';
import {
 colorOptionToHslaAlphaScale,
 colorOptionToHslaLightnessScale,
 colors,
 fromEntries,
 removeUndefinedProps,
} from '../utils';
 createAlphaScaleWithTransparentize,
 createColorMixLightnessScale,
 lighten,
 transparentize,
} from '../utils/colorMix';

export const createColorScales = (theme: Theme) => {
 const variables = theme.variables || {};

 const primaryScale = colorOptionToHslaLightnessScale(variables.colorPrimary, 'primary');
 const primaryAlphaScale = colorOptionToHslaAlphaScale(primaryScale?.primary500, 'primaryAlpha');
 const dangerScale = colorOptionToHslaLightnessScale(variables.colorDanger, 'danger');
 const dangerAlphaScale = colorOptionToHslaAlphaScale(dangerScale?.danger500, 'dangerAlpha');
 const successScale = colorOptionToHslaLightnessScale(variables.colorSuccess, 'success');
 const successAlphaScale = colorOptionToHslaAlphaScale(successScale?.success500, 'successAlpha');
 const warningScale = colorOptionToHslaLightnessScale(variables.colorWarning, 'warning');
 const warningAlphaScale = colorOptionToHslaAlphaScale(warningScale?.warning500, 'warningAlpha');
 const primaryScale = createColorMixLightnessScale(variables.colorPrimary, 'primary');
 const primaryBase = primaryScale?.primary500;
 const primaryAlphaScale = primaryBase ? createAlphaScaleWithTransparentize(primaryBase, 'primaryAlpha') : undefined;
 const dangerScale = createColorMixLightnessScale(variables.colorDanger, 'danger');
 const dangerBase = dangerScale?.danger500;
 const dangerAlphaScale = dangerBase ? createAlphaScaleWithTransparentize(dangerBase, 'dangerAlpha') : undefined;
 const successScale = createColorMixLightnessScale(variables.colorSuccess, 'success');
 const successBase = successScale?.success500;
 const successAlphaScale = successBase ? createAlphaScaleWithTransparentize(successBase, 'successAlpha') : undefined;
 const warningScale = createColorMixLightnessScale(variables.colorWarning, 'warning');
 const warningBase = warningScale?.warning500;
 const warningAlphaScale = warningBase ? createAlphaScaleWithTransparentize(warningBase, 'warningAlpha') : undefined;
 const neutralAlphaScales =
 typeof variables.colorNeutral === 'string' && variables.colorNeutral
 ? createAlphaScaleWithTransparentize(variables.colorNeutral, 'neutralAlpha')
 : {};

 return removeUndefinedProps({
 ...primaryScale,
Expand All@@ -31,22 +39,20 @@ export const createColorScales = (theme: Theme) => {
 ...successAlphaScale,
 ...warningScale,
 ...warningAlphaScale,
 ...colorOptionToHslaAlphaScale(variables.colorNeutral, 'neutralAlpha'),
 primaryHover: colors.adjustForLightness(primaryScale?.primary500),
 colorTextOnPrimaryBackground: toHSLA(variables.colorTextOnPrimaryBackground),
 colorText: toHSLA(variables.colorText),
 colorTextSecondary: toHSLA(variables.colorTextSecondary) || colors.makeTransparent(variables.colorText, 0.35),
 colorInputText: toHSLA(variables.colorInputText),
 colorBackground: toHSLA(variables.colorBackground),
 colorInputBackground: toHSLA(variables.colorInputBackground),
 colorShimmer: toHSLA(variables.colorShimmer),
 ...neutralAlphaScales,
 // TODO(Colors): We are not adjusting the lightness based on the colorPrimary lightness
 primaryHover: primaryBase ? lighten(primaryBase, '90%') : undefined,
 colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,

Comment on lines

+44
 to 
+45

@coderabbitaicoderabbitaiBotJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion
lighten(..., '90%') hardly lightens
lighten(color, '90%') keeps 90 % of the base color and only 10 % white, so the result is barely lighter. If the intent was “90 % lighter”, flip the numbers:
-primaryHover: primaryBase ? lighten(primaryBase, '90%') : undefined,+primaryHover: primaryBase ? lighten(primaryBase, '10%') : undefined,
or clarify with a named helper (lightenBy(percentageOfWhite)) to avoid future confusion.
📝 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.

Suggested change

primaryHover: primaryBase ? lighten(primaryBase,'90%') : undefined,
colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,
primaryHover: primaryBase ? lighten(primaryBase,'10%') : undefined,
colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/customizables/parseVariables.ts around lines 44 to
45, the lighten function is called with '90%' which results in only a slight
lightening because it retains 90% of the base color. To fix this, invert the
percentage to '10%' to achieve a 90% lighter color or refactor the code to use a
named helper function like lightenBy that clearly indicates the percentage of
white added, improving clarity and correctness.

 colorText: variables.colorText,
 colorTextSecondary:
 variables.colorTextSecondary || (variables.colorText ? transparentize(variables.colorText, '35%') : undefined),
 colorInputText: variables.colorInputText,
 colorBackground: variables.colorBackground,
 colorInputBackground: variables.colorInputBackground,
 colorShimmer: variables.colorShimmer,
 });
};

export const toHSLA = (str: string | undefined) => {
 return str ? colors.toHslaString(str) : undefined;
};

export const createRadiiUnits = (theme: Theme) => {
 const { borderRadius } = theme.variables || {};
 if (borderRadius === undefined) {
Expand Down

10 changes: 4 additions & 6 deletions
packages/clerk-js/src/ui/elements/Card/CardFooter.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
import React from 'react';

import { colorMix } from '@/ui/utils/colorMix';

import { useEnvironment } from '../../contexts';
import { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../customizables';
import { useDevMode } from '../../hooks/useDevMode';
import type { InternalTheme, PropsOfComponent } from '../../styledSystem';
import { common, mqu } from '../../styledSystem';
import { colors } from '../../utils';
import { mqu } from '../../styledSystem';
import { Card } from '.';

type CardFooterProps = PropsOfComponent<typeof Flex> & {
Expand DownExpand Up@@ -50,10 +51,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
 t => ({
 marginTop: `-${t.space.$2}`,
 paddingTop: t.space.$2,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 '&:empty': {
 padding: 0,
 marginTop: 0,
Expand Down

8 changes: 2 additions & 6 deletions
packages/clerk-js/src/ui/elements/Disclosure.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,8 +5,7 @@ import { Box, descriptors, Icon, SimpleButton, Span, useAppearance } from '../cu
import { usePrefersReducedMotion } from '../hooks';
import { ChevronDown } from '../icons';
import type { ThemableCssProp } from '../styledSystem';
import { common } from '../styledSystem';
import { colors } from '../utils';
import { colorMix } from '../utils/colorMix';

/* -------------------------------------------------------------------------------------------------
 * Disclosure Context
Expand DownExpand Up@@ -168,10 +167,7 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, re
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
 borderColor: t.colors.$neutralAlpha100,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 })}
 >
 {children}
Expand Down

22 changes: 6 additions & 16 deletions
packages/clerk-js/src/ui/elements/Drawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,8 +19,7 @@ import { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../c
import { useDirection, usePrefersReducedMotion, useScrollLock } from '../hooks';
import { Close as CloseIcon } from '../icons';
import type { ThemableCssProp } from '../styledSystem';
import { common } from '../styledSystem';
import { colors } from '../utils';
import { colorMix, transparentize } from '../utils/colorMix';
import { IconButton } from './IconButton';

type FloatingPortalProps = React.ComponentProps<typeof FloatingPortal>;
Expand DownExpand Up@@ -151,7 +150,7 @@ export const FloatingOverlay = React.forwardRef(function FloatingOverlay(
 sx={[
 t => ({
 inset: 0,
 backgroundColor: colors.setAlpha(t.colors.$colorBackground, 0.28),
 backgroundColor: transparentize(t.colors.$colorBackground, '28%'),
 }),
 props.sx,
 ]}
Expand DownExpand Up@@ -298,10 +297,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children,
 sx={[
 t => ({
 display: 'flex',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderBlockEndWidth: t.borderWidths.$normal,
 borderBlockEndStyle: t.borderStyles.$solid,
 borderBlockEndColor: t.colors.$neutralAlpha100,
Expand DownExpand Up@@ -378,10 +374,7 @@ const Footer = React.forwardRef<HTMLDivElement, FooterProps>(({ children, sx, ..
 t => ({
 display: 'flex',
 flexDirection: 'column',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderBlockStartWidth: t.borderWidths.$normal,
 borderBlockStartStyle: t.borderStyles.$solid,
 borderBlockStartColor: t.colors.$neutralAlpha100,
Expand DownExpand Up@@ -496,7 +489,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
 sx={t => ({
 position: 'absolute',
 inset: 0,
 backgroundImage: `linear-gradient(to bottom, ${colors.setAlpha(t.colors.$colorBackground, 0.28)}, ${t.colors.$colorBackground})`,
 backgroundImage: `linear-gradient(to bottom, ${transparentize(t.colors.$colorBackground, '28%')}, ${t.colors.$colorBackground})`,
 })}
 />

Expand All@@ -521,10 +514,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
 bottom: 0,
 left: 0,
 right: 0,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: t.space.$4,
 borderStartStartRadius: t.radii.$md,
 borderStartEndRadius: t.radii.$md,
Expand Down

13 changes: 4 additions & 9 deletions
packages/clerk-js/src/ui/elements/Navbar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,8 +8,9 @@ import { useNavigateToFlowStart, usePopover } from '../hooks';
import { Menu } from '../icons';
import { useRouter } from '../router';
import type { PropsOfComponent } from '../styledSystem';
import { animations, common, mqu } from '../styledSystem';
import { animations, mqu } from '../styledSystem';
import { colors } from '../utils';
import { colorMix } from '../utils/colorMix';
import { Card } from './Card';
import { withFloatingTree } from './contexts';
import { DevModeOverlay } from './DevModeNotice';
Expand DownExpand Up@@ -146,10 +147,7 @@ const NavbarContainer = (
 width: t.sizes.$57,
 position: 'relative',
 maxWidth: t.space.$57,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: `${t.space.$6} ${t.space.$5} ${t.space.$4} ${t.space.$3}`,
 marginRight: `-${t.space.$2}`,
 color: t.colors.$colorText,
Expand DownExpand Up@@ -319,10 +317,7 @@ export const NavbarMenuButtonRow = ({ navbarTitleLocalizationKey, ...props }: Na
 elementDescriptor={descriptors.navbarMobileMenuRow}
 sx={t => ({
 display: 'none',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: `${t.space.$2} ${t.space.$3} ${t.space.$4} ${t.space.$3}`,
 marginBottom: `-${t.space.$2}`,
 [mqu.md]: {
Expand Down

9 changes: 3 additions & 6 deletions
packages/clerk-js/src/ui/elements/PopoverCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,8 +4,8 @@ import { useEnvironment } from '../contexts';
import { Col, descriptors, Flex, Flow, useAppearance } from '../customizables';
import type { ElementDescriptor } from '../customizables/elementDescriptors';
import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
import { animations, common } from '../styledSystem';
import { colors } from '../utils';
import { animations } from '../styledSystem';
import { colorMix } from '../utils/colorMix';
import { Card } from './Card';

const PopoverCardRoot = React.forwardRef<
Expand DownExpand Up@@ -81,10 +81,7 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
 justify='between'
 sx={[
 t => ({
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 marginTop: `-${t.space.$2}`,
 paddingTop: t.space.$2,
 '&:empty': {
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
fix(clerk-js): CSS Variables#6100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

tmilewski
wants to merge
10
commits into

from

 Closed


fix(clerk-js): CSS Variables
#6100
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
4276ecd

Create colorMix.ts


alexcarpenter Jun 4, 2025
167b12c

refactor(colorMix): Introduce colorMix function for color manipulatio…


alexcarpenter Jun 4, 2025
a33cec6

wip


alexcarpenter Jun 4, 2025
eb9f682

wip


alexcarpenter Jun 4, 2025
f7ebfcc

wip


alexcarpenter Jun 4, 2025
3569d15

fix(clerk-js): Color typing


tmilewski Jun 10, 2025
23316c5

feat(clerk-js): Introduce CSS variables


tmilewski Jun 12, 2025
a1299d6

feat(clerk-js): Introduce CSS Variables


tmilewski Jun 12, 2025
3bf7284

chore(clerk-js): Minor clean-up


tmilewski Jun 12, 2025
94cb7b8

chore: Add interim changeset


tmilewski Jun 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/warm-pens-tickle.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': minor
---

[TODO]

Comment on lines

+1
 to 
+5

@coderabbitaicoderabbitaiBotJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue
Populate the changeset before merging
[TODO] will reach the changelog verbatim, leaving consumers without any context for the minor release. Replace it with a concise summary of the CSS-variable migration and colour-utility refactor.
🤖 Prompt for AI Agents
In the file .changeset/warm-pens-tickle.md at lines 1 to 5, replace the
placeholder text "[TODO]" with a concise summary describing the CSS-variable
migration and colour-utility refactor. This summary should clearly explain the
changes made in this minor release to provide useful context for consumers in
the changelog.


2 changes: 1 addition & 1 deletion
packages/clerk-js/sandbox/app.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -345,7 +345,7 @@ void (async () => {
 signUpUrl: '/sign-up',
 });
 renderCurrentRoute();
 updateVariables();
// updateVariables(); // Commented out as it overrides css variables
 updateOtherOptions();
 } else {
 console.error(`Unknown route: "${route}".`);
Expand Down

21 changes: 21 additions & 0 deletions
packages/clerk-js/sandbox/template.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,27 @@
 name="viewport"
 content="width=device-width,initial-scale=1"
 />
 <style>
 :root {
 --clerk-primary: #2F3037; /* default: #2F3037 */
 --clerk-foreground: #212126; /* default: #212126 */
 --clerk-background: white; /* default: white */
 --clerk-primary-foreground: white; /* default: white */
 --clerk-secondary-foreground: #747686; /* default: #747686 */
 --clerk-danger: #EF4444; /* default: #EF4444 */
 --clerk-input: white; /* default: white */
 --clerk-neutral: black; /* default: black */

 --clerk-line-height: normal; /* default: normal */
 --clerk-spacing: 1rem; /* default: 1rem */
 --clerk-border-width: 1px; /* default: 1px */
 --clerk-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* default: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" */
 --clerk-font-size: 0.8125rem; /* default: 0.8125rem */
 --clerk-font-weight: 400; /* default: 400 */
 --clerk-letter-spacing: normal; /* default: normal */
 --clerk-border-radius: 0.375rem; /* default: 0.375rem */
 }
 </style>
 <script src="https://cdn.tailwindcss.com"></script>
 <script>
 tailwind.config = {
Expand Down

13 changes: 3 additions & 10 deletions
packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,8 +13,7 @@ import { Tooltip } from '@/ui/elements/Tooltip';
import { LockDottedCircle } from '@/ui/icons';
import { Textarea } from '@/ui/primitives';
import type { ThemableCssProp } from '@/ui/styledSystem';
import { common } from '@/ui/styledSystem';
import * as utils from '@/ui/utils';
import { colorMix } from '@/ui/utils/colorMix';

export function OAuthConsentInternal() {
 const { scopes, oAuthApplicationName, oAuthApplicationLogoUrl, redirectUrl, onDeny, onAllow } =
Expand DownExpand Up@@ -121,10 +120,7 @@ export function OAuthConsentInternal() {
 <Box
 sx={t => ({
 padding: t.space.$3,
 background: common.mergedColorsBackground(
 utils.colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 })}

Comment on lines

121
 to 
124

@coderabbitaicoderabbitaiBotJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent
🧩 Analysis chain
Color-mix may break on non-Chromium browsers – add fallback
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50) generates a color-mix() expression, which is still behind flags in Safari 17 and completely unsupported in Firefox ≤ 126. Users on those browsers will get no background color.
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
+backgroundColor: [+ colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),+ t.colors.$neutralAlpha50, // fallback for browsers without color-mix+].join(','),
This keeps the new look while preserving graceful degradation.
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Search for occurrences of `colorMix` in the codebase
grep -R "colorMix" -n .
Length of output: 65620
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Display first 200 lines of the colorMix utility to verify its output
sed -n '1,200p' packages/clerk-js/src/ui/utils/colorMix.ts
Length of output: 5964
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Show lines 1-200 of the OAuthConsent.tsx for context
sed -n '1,200p' packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx
Length of output: 7269
Add a solid fallback before using colorMix for unsupported browsers
To avoid an invalid background-color in browsers that don’t yet support color-mix(), declare the plain alpha background first, then override with your mixed color. For example, in packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx around line 123:
 sx={t => ({
padding: t.space.$3,
- backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),+ // fallback for browsers without color-mix+ backgroundColor: t.colors.$neutralAlpha50,+ backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
})}
Please apply the same pattern wherever colorMix(…, t.colors.$neutralAlpha50) (or other mixes) is used, e.g.:
• packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

• packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx

• packages/clerk-js/src/ui/elements/Card/CardFooter.tsx

• packages/clerk-js/src/ui/elements/Disclosure.tsx

• packages/clerk-js/src/ui/elements/Drawer.tsx

• packages/clerk-js/src/ui/elements/Navbar.tsx

• packages/clerk-js/src/ui/elements/PopoverCard.tsx
Consider extracting a helper or theme token if this becomes a widespread pattern.
📝 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.

Suggested change

sx={t=>({
padding: t.space.$3,
background: common.mergedColorsBackground(
utils.colors.setAlpha(t.colors.$colorBackground,1),
t.colors.$neutralAlpha50,
),
backgroundColor: colorMix(t.colors.$colorBackground,t.colors.$neutralAlpha50),
})}
sx={t=>({
padding: t.space.$3,
+// fallback for browsers without color-mix
+backgroundColor: t.colors.$neutralAlpha50,
backgroundColor: colorMix(t.colors.$colorBackground,t.colors.$neutralAlpha50),
})}
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx around
lines 121 to 124, the backgroundColor uses colorMix which is unsupported in some
browsers. Fix this by first setting backgroundColor to the solid alpha color
t.colors.$neutralAlpha50 as a fallback, then override it with the colorMix
expression. Apply this pattern to ensure graceful degradation and consider
creating a helper or theme token if this pattern is used frequently across the
codebase.

@dstaleydstaleyJun 16, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This package only supports browsers released in the last two years (since May 8 2023), so all of our supported browsers support color-mix().
@coderabbitaicoderabbitaiBotJun 16, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dstaley Thank you for the clarification! I appreciate you letting me know about the package's browser support policy. That makes perfect sense - if you're only supporting browsers from the last two years, then color-mix() support is indeed guaranteed and no fallbacks are needed.
✏️ Learnings added
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.363Z
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.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
 >
 <Text
Expand DownExpand Up@@ -333,10 +329,7 @@ function ConnectionIcon({ size = 'md', sx }: { size?: 'sm' | 'md'; sx?: Themable
 <Box
 sx={t => [
 {
 background: common.mergedColorsBackground(
 utils.colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderRadius: t.radii.$circle,
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
Expand Down

10 changes: 4 additions & 6 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,7 @@ import * as React from 'react';

import { Switch } from '@/ui/elements/Switch';
import { Tooltip } from '@/ui/elements/Tooltip';
import { colorMix } from '@/ui/utils/colorMix';

import { useProtect } from '../../common';
import { usePlansContext, usePricingTableContext, useSubscriberTypeContext } from '../../contexts';
Expand All@@ -22,8 +23,8 @@ import {
 Text,
} from '../../customizables';
import { Check, Plus } from '../../icons';
import { common, InternalThemeProvider } from '../../styledSystem';
import { colors, getClosestProfileScrollBox } from '../../utils';
import { InternalThemeProvider } from '../../styledSystem';
import { getClosestProfileScrollBox } from '../../utils';

interface PricingTableDefaultProps {
 plans?: CommercePlanResource[] | null;
Expand DownExpand Up@@ -167,10 +168,7 @@ function Card(props: CardProps) {
 gap: 0,
 gridTemplateRows: 'subgrid',
 gridRow: 'span 5',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
 borderColor: t.colors.$neutralAlpha100,
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,6 +3,7 @@ import * as React from 'react';

import { Avatar } from '@/ui/elements/Avatar';
import { SegmentedControl } from '@/ui/elements/SegmentedControl';
import { colorMix } from '@/ui/utils/colorMix';

import { usePlansContext } from '../../contexts';
import {
Expand All@@ -21,8 +22,7 @@ import {
} from '../../customizables';
import { usePrefersReducedMotion } from '../../hooks';
import { Check, InformationCircle } from '../../icons';
import { common, InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';
import { colors } from '../../utils';
import { InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';

interface PricingTableMatrixProps {
 plans: CommercePlanResource[] | undefined;
Expand DownExpand Up@@ -55,7 +55,7 @@ export function PricingTableMatrix({
 });

 const highlightBackgroundColor: ThemableCssProp = t => ({
 background: common.mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha25),
 background: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha25),
 });

 const gridTemplateColumns = React.useMemo(() => `repeat(${plans.length + 1}, minmax(9.375rem,1fr))`, [plans.length]);
Expand Down

60 changes: 33 additions & 27 deletions
packages/clerk-js/src/ui/customizables/parseVariables.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,25 +2,33 @@ import type { Theme } from '@clerk/types';

import { spaceScaleKeys } from '../foundations/sizes';
import type { fontSizes, fontWeights } from '../foundations/typography';
import { fromEntries, removeUndefinedProps } from '../utils';
import {
 colorOptionToHslaAlphaScale,
 colorOptionToHslaLightnessScale,
 colors,
 fromEntries,
 removeUndefinedProps,
} from '../utils';
 createAlphaScaleWithTransparentize,
 createColorMixLightnessScale,
 lighten,
 transparentize,
} from '../utils/colorMix';

export const createColorScales = (theme: Theme) => {
 const variables = theme.variables || {};

 const primaryScale = colorOptionToHslaLightnessScale(variables.colorPrimary, 'primary');
 const primaryAlphaScale = colorOptionToHslaAlphaScale(primaryScale?.primary500, 'primaryAlpha');
 const dangerScale = colorOptionToHslaLightnessScale(variables.colorDanger, 'danger');
 const dangerAlphaScale = colorOptionToHslaAlphaScale(dangerScale?.danger500, 'dangerAlpha');
 const successScale = colorOptionToHslaLightnessScale(variables.colorSuccess, 'success');
 const successAlphaScale = colorOptionToHslaAlphaScale(successScale?.success500, 'successAlpha');
 const warningScale = colorOptionToHslaLightnessScale(variables.colorWarning, 'warning');
 const warningAlphaScale = colorOptionToHslaAlphaScale(warningScale?.warning500, 'warningAlpha');
 const primaryScale = createColorMixLightnessScale(variables.colorPrimary, 'primary');
 const primaryBase = primaryScale?.primary500;
 const primaryAlphaScale = primaryBase ? createAlphaScaleWithTransparentize(primaryBase, 'primaryAlpha') : undefined;
 const dangerScale = createColorMixLightnessScale(variables.colorDanger, 'danger');
 const dangerBase = dangerScale?.danger500;
 const dangerAlphaScale = dangerBase ? createAlphaScaleWithTransparentize(dangerBase, 'dangerAlpha') : undefined;
 const successScale = createColorMixLightnessScale(variables.colorSuccess, 'success');
 const successBase = successScale?.success500;
 const successAlphaScale = successBase ? createAlphaScaleWithTransparentize(successBase, 'successAlpha') : undefined;
 const warningScale = createColorMixLightnessScale(variables.colorWarning, 'warning');
 const warningBase = warningScale?.warning500;
 const warningAlphaScale = warningBase ? createAlphaScaleWithTransparentize(warningBase, 'warningAlpha') : undefined;
 const neutralAlphaScales =
 typeof variables.colorNeutral === 'string' && variables.colorNeutral
 ? createAlphaScaleWithTransparentize(variables.colorNeutral, 'neutralAlpha')
 : {};

 return removeUndefinedProps({
 ...primaryScale,
Expand All@@ -31,22 +39,20 @@ export const createColorScales = (theme: Theme) => {
 ...successAlphaScale,
 ...warningScale,
 ...warningAlphaScale,
 ...colorOptionToHslaAlphaScale(variables.colorNeutral, 'neutralAlpha'),
 primaryHover: colors.adjustForLightness(primaryScale?.primary500),
 colorTextOnPrimaryBackground: toHSLA(variables.colorTextOnPrimaryBackground),
 colorText: toHSLA(variables.colorText),
 colorTextSecondary: toHSLA(variables.colorTextSecondary) || colors.makeTransparent(variables.colorText, 0.35),
 colorInputText: toHSLA(variables.colorInputText),
 colorBackground: toHSLA(variables.colorBackground),
 colorInputBackground: toHSLA(variables.colorInputBackground),
 colorShimmer: toHSLA(variables.colorShimmer),
 ...neutralAlphaScales,
 // TODO(Colors): We are not adjusting the lightness based on the colorPrimary lightness
 primaryHover: primaryBase ? lighten(primaryBase, '90%') : undefined,
 colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,

Comment on lines

+44
 to 
+45

@coderabbitaicoderabbitaiBotJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion
lighten(..., '90%') hardly lightens
lighten(color, '90%') keeps 90 % of the base color and only 10 % white, so the result is barely lighter. If the intent was “90 % lighter”, flip the numbers:
-primaryHover: primaryBase ? lighten(primaryBase, '90%') : undefined,+primaryHover: primaryBase ? lighten(primaryBase, '10%') : undefined,
or clarify with a named helper (lightenBy(percentageOfWhite)) to avoid future confusion.
📝 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.

Suggested change

primaryHover: primaryBase ? lighten(primaryBase,'90%') : undefined,
colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,
primaryHover: primaryBase ? lighten(primaryBase,'10%') : undefined,
colorTextOnPrimaryBackground: variables.colorTextOnPrimaryBackground,
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/customizables/parseVariables.ts around lines 44 to
45, the lighten function is called with '90%' which results in only a slight
lightening because it retains 90% of the base color. To fix this, invert the
percentage to '10%' to achieve a 90% lighter color or refactor the code to use a
named helper function like lightenBy that clearly indicates the percentage of
white added, improving clarity and correctness.

 colorText: variables.colorText,
 colorTextSecondary:
 variables.colorTextSecondary || (variables.colorText ? transparentize(variables.colorText, '35%') : undefined),
 colorInputText: variables.colorInputText,
 colorBackground: variables.colorBackground,
 colorInputBackground: variables.colorInputBackground,
 colorShimmer: variables.colorShimmer,
 });
};

export const toHSLA = (str: string | undefined) => {
 return str ? colors.toHslaString(str) : undefined;
};

export const createRadiiUnits = (theme: Theme) => {
 const { borderRadius } = theme.variables || {};
 if (borderRadius === undefined) {
Expand Down

10 changes: 4 additions & 6 deletions
packages/clerk-js/src/ui/elements/Card/CardFooter.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
import React from 'react';

import { colorMix } from '@/ui/utils/colorMix';

import { useEnvironment } from '../../contexts';
import { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../customizables';
import { useDevMode } from '../../hooks/useDevMode';
import type { InternalTheme, PropsOfComponent } from '../../styledSystem';
import { common, mqu } from '../../styledSystem';
import { colors } from '../../utils';
import { mqu } from '../../styledSystem';
import { Card } from '.';

type CardFooterProps = PropsOfComponent<typeof Flex> & {
Expand DownExpand Up@@ -50,10 +51,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
 t => ({
 marginTop: `-${t.space.$2}`,
 paddingTop: t.space.$2,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 '&:empty': {
 padding: 0,
 marginTop: 0,
Expand Down

8 changes: 2 additions & 6 deletions
packages/clerk-js/src/ui/elements/Disclosure.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,8 +5,7 @@ import { Box, descriptors, Icon, SimpleButton, Span, useAppearance } from '../cu
import { usePrefersReducedMotion } from '../hooks';
import { ChevronDown } from '../icons';
import type { ThemableCssProp } from '../styledSystem';
import { common } from '../styledSystem';
import { colors } from '../utils';
import { colorMix } from '../utils/colorMix';

/* -------------------------------------------------------------------------------------------------
 * Disclosure Context
Expand DownExpand Up@@ -168,10 +167,7 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, re
 borderWidth: t.borderWidths.$normal,
 borderStyle: t.borderStyles.$solid,
 borderColor: t.colors.$neutralAlpha100,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 })}
 >
 {children}
Expand Down

22 changes: 6 additions & 16 deletions
packages/clerk-js/src/ui/elements/Drawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,8 +19,7 @@ import { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../c
import { useDirection, usePrefersReducedMotion, useScrollLock } from '../hooks';
import { Close as CloseIcon } from '../icons';
import type { ThemableCssProp } from '../styledSystem';
import { common } from '../styledSystem';
import { colors } from '../utils';
import { colorMix, transparentize } from '../utils/colorMix';
import { IconButton } from './IconButton';

type FloatingPortalProps = React.ComponentProps<typeof FloatingPortal>;
Expand DownExpand Up@@ -151,7 +150,7 @@ export const FloatingOverlay = React.forwardRef(function FloatingOverlay(
 sx={[
 t => ({
 inset: 0,
 backgroundColor: colors.setAlpha(t.colors.$colorBackground, 0.28),
 backgroundColor: transparentize(t.colors.$colorBackground, '28%'),
 }),
 props.sx,
 ]}
Expand DownExpand Up@@ -298,10 +297,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children,
 sx={[
 t => ({
 display: 'flex',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderBlockEndWidth: t.borderWidths.$normal,
 borderBlockEndStyle: t.borderStyles.$solid,
 borderBlockEndColor: t.colors.$neutralAlpha100,
Expand DownExpand Up@@ -378,10 +374,7 @@ const Footer = React.forwardRef<HTMLDivElement, FooterProps>(({ children, sx, ..
 t => ({
 display: 'flex',
 flexDirection: 'column',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 borderBlockStartWidth: t.borderWidths.$normal,
 borderBlockStartStyle: t.borderStyles.$solid,
 borderBlockStartColor: t.colors.$neutralAlpha100,
Expand DownExpand Up@@ -496,7 +489,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
 sx={t => ({
 position: 'absolute',
 inset: 0,
 backgroundImage: `linear-gradient(to bottom, ${colors.setAlpha(t.colors.$colorBackground, 0.28)}, ${t.colors.$colorBackground})`,
 backgroundImage: `linear-gradient(to bottom, ${transparentize(t.colors.$colorBackground, '28%')}, ${t.colors.$colorBackground})`,
 })}
 />

Expand All@@ -521,10 +514,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
 bottom: 0,
 left: 0,
 right: 0,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: t.space.$4,
 borderStartStartRadius: t.radii.$md,
 borderStartEndRadius: t.radii.$md,
Expand Down

13 changes: 4 additions & 9 deletions
packages/clerk-js/src/ui/elements/Navbar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,8 +8,9 @@ import { useNavigateToFlowStart, usePopover } from '../hooks';
import { Menu } from '../icons';
import { useRouter } from '../router';
import type { PropsOfComponent } from '../styledSystem';
import { animations, common, mqu } from '../styledSystem';
import { animations, mqu } from '../styledSystem';
import { colors } from '../utils';
import { colorMix } from '../utils/colorMix';
import { Card } from './Card';
import { withFloatingTree } from './contexts';
import { DevModeOverlay } from './DevModeNotice';
Expand DownExpand Up@@ -146,10 +147,7 @@ const NavbarContainer = (
 width: t.sizes.$57,
 position: 'relative',
 maxWidth: t.space.$57,
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: `${t.space.$6} ${t.space.$5} ${t.space.$4} ${t.space.$3}`,
 marginRight: `-${t.space.$2}`,
 color: t.colors.$colorText,
Expand DownExpand Up@@ -319,10 +317,7 @@ export const NavbarMenuButtonRow = ({ navbarTitleLocalizationKey, ...props }: Na
 elementDescriptor={descriptors.navbarMobileMenuRow}
 sx={t => ({
 display: 'none',
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 padding: `${t.space.$2} ${t.space.$3} ${t.space.$4} ${t.space.$3}`,
 marginBottom: `-${t.space.$2}`,
 [mqu.md]: {
Expand Down

9 changes: 3 additions & 6 deletions
packages/clerk-js/src/ui/elements/PopoverCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,8 +4,8 @@ import { useEnvironment } from '../contexts';
import { Col, descriptors, Flex, Flow, useAppearance } from '../customizables';
import type { ElementDescriptor } from '../customizables/elementDescriptors';
import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
import { animations, common } from '../styledSystem';
import { colors } from '../utils';
import { animations } from '../styledSystem';
import { colorMix } from '../utils/colorMix';
import { Card } from './Card';

const PopoverCardRoot = React.forwardRef<
Expand DownExpand Up@@ -81,10 +81,7 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
 justify='between'
 sx={[
 t => ({
 background: common.mergedColorsBackground(
 colors.setAlpha(t.colors.$colorBackground, 1),
 t.colors.$neutralAlpha50,
 ),
 backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
 marginTop: `-${t.space.$2}`,
 paddingTop: t.space.$2,
 '&:empty': {
Expand Down
Loading