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

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
+462 −268
Open

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 number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': minor
---

[TODO]
Comment on lines +1 to +5
Copy link
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 number Diff line number Diff 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 number Diff line number Diff 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 number Diff line number Diff 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 Down Expand 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
Copy link
Contributor

@coderabbitai coderabbitai bot Jun 13, 2025 •
edited
Loading

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/bash
set -euo pipefail
# Search for occurrences of `colorMix` in the codebase
grep -R "colorMix" -n .

Length of output: 65620

🏁 Script executed:

#!/bin/bash
set -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/bash
set -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.

Copy link
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().

Copy link
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 Down Expand 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 number Diff line number Diff 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 Down Expand 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 number Diff line number Diff 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 Down Expand 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 number Diff line number Diff 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
Copy link
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 number Diff line number Diff 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 Down Expand 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 number Diff line number Diff 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 Down Expand 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 number Diff line number Diff 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 Down Expand 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 Down Expand 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 Down Expand 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 Down Expand 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 number Diff line number Diff 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 Down Expand 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 Down Expand 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 number Diff line number Diff 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 Down Expand 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
Loading