From 4276ecd148c8ca72b49ce47ce4f064998625c82f Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 4 Jun 2025 12:34:08 -0400 Subject: [PATCH 1/5] Create colorMix.ts --- packages/clerk-js/src/ui/utils/colorMix.ts | 40 ++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 packages/clerk-js/src/ui/utils/colorMix.ts diff --git a/packages/clerk-js/src/ui/utils/colorMix.ts b/packages/clerk-js/src/ui/utils/colorMix.ts new file mode 100644 index 00000000000..873763d3b79 --- /dev/null +++ b/packages/clerk-js/src/ui/utils/colorMix.ts @@ -0,0 +1,40 @@ +/** + * Transparentize a color by a percentage + * @param color - The color to transparentize + * @param percentage - The percentage to transparentize the color by + * @returns The transparentized color + */ +export function transparentize(color: string, percentage: number) { + return `color-mix(in oklch, ${color} ${percentage}, transparent)`; +} + +/** + * Lighten a color by a percentage + * @param color - The color to lighten + * @param percentage - The percentage to lighten the color by + * @returns The lightened color + */ +export function lighten(color: string, percentage: number) { + return `color-mix(in oklch, ${color} ${percentage}, white)`; +} + +/** + * Darken a color by a percentage + * @param color - The color to darken + * @param percentage - The percentage to darken the color by + * @returns The darkened color + */ +export function darken(color: string, percentage: number) { + return `color-mix(in oklch, ${color} ${percentage}, black)`; +} + +/** + * Tint a color by a percentage + * @param color - The color to tint + * @param colorTint - The color to tint the color with + * @param percentage - The percentage to tint the color by + * @returns The tinted color + */ +export function tint(color: string, colorTint: string, percentage: number) { + return `color-mix(in oklch, ${color} ${percentage}, ${colorTint})`; +} From 167b12c74960b6e18982394e201a4e9ebada8e3f Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 4 Jun 2025 12:40:13 -0400 Subject: [PATCH 2/5] refactor(colorMix): Introduce colorMix function for color manipulation and update related functions to use it --- packages/clerk-js/src/ui/utils/colorMix.ts | 28 +++++++++++----------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/clerk-js/src/ui/utils/colorMix.ts b/packages/clerk-js/src/ui/utils/colorMix.ts index 873763d3b79..e791503fbf9 100644 --- a/packages/clerk-js/src/ui/utils/colorMix.ts +++ b/packages/clerk-js/src/ui/utils/colorMix.ts @@ -1,3 +1,14 @@ +/** + * Mix a color with a color tint + * @param color - The color to mix + * @param percentage - The percentage to mix the color with + * @param colorTint - The color to mix the color with + * @returns The mixed color + */ +export function colorMix(color: string, percentage: number, colorTint: string) { + return `color-mix(in oklch, ${color} ${percentage}, ${colorTint})`; +} + /** * Transparentize a color by a percentage * @param color - The color to transparentize @@ -5,7 +16,7 @@ * @returns The transparentized color */ export function transparentize(color: string, percentage: number) { - return `color-mix(in oklch, ${color} ${percentage}, transparent)`; + return colorMix(color, percentage, 'transparent'); } /** @@ -15,7 +26,7 @@ export function transparentize(color: string, percentage: number) { * @returns The lightened color */ export function lighten(color: string, percentage: number) { - return `color-mix(in oklch, ${color} ${percentage}, white)`; + return colorMix(color, percentage, 'white'); } /** @@ -25,16 +36,5 @@ export function lighten(color: string, percentage: number) { * @returns The darkened color */ export function darken(color: string, percentage: number) { - return `color-mix(in oklch, ${color} ${percentage}, black)`; -} - -/** - * Tint a color by a percentage - * @param color - The color to tint - * @param colorTint - The color to tint the color with - * @param percentage - The percentage to tint the color by - * @returns The tinted color - */ -export function tint(color: string, colorTint: string, percentage: number) { - return `color-mix(in oklch, ${color} ${percentage}, ${colorTint})`; + return colorMix(color, percentage, 'black'); } From a33cec61771e49abeb64a689b02e5a5fa5f8169c Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 4 Jun 2025 16:31:56 -0400 Subject: [PATCH 3/5] wip --- .../src/ui/customizables/parseVariables.ts | 60 ++++---- .../clerk-js/src/ui/foundations/colors.ts | 76 +++++----- packages/clerk-js/src/ui/utils/colorMix.ts | 136 +++++++++++++++++- packages/clerk-js/src/ui/utils/colors.ts | 2 + 4 files changed, 203 insertions(+), 71 deletions(-) diff --git a/packages/clerk-js/src/ui/customizables/parseVariables.ts b/packages/clerk-js/src/ui/customizables/parseVariables.ts index 4a59c039886..10d5a724ef7 100644 --- a/packages/clerk-js/src/ui/customizables/parseVariables.ts +++ b/packages/clerk-js/src/ui/customizables/parseVariables.ts @@ -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, @@ -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, + 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) { diff --git a/packages/clerk-js/src/ui/foundations/colors.ts b/packages/clerk-js/src/ui/foundations/colors.ts index 2b949f0f2d3..32320ddece7 100644 --- a/packages/clerk-js/src/ui/foundations/colors.ts +++ b/packages/clerk-js/src/ui/foundations/colors.ts @@ -1,39 +1,39 @@ -import { colorOptionToHslaAlphaScale } from '../utils/colorOptionToHslaScale'; +import { createAlphaScaleWithTransparentize, transparentize } from '../utils/colorMix'; export const whiteAlpha = Object.freeze({ - whiteAlpha25: 'hsla(0, 0%, 100%, 0.02)', - whiteAlpha50: 'hsla(0, 0%, 100%, 0.03)', - whiteAlpha100: 'hsla(0, 0%, 100%, 0.07)', - whiteAlpha150: 'hsla(0, 0%, 100%, 0.11)', - whiteAlpha200: 'hsla(0, 0%, 100%, 0.15)', - whiteAlpha300: 'hsla(0, 0%, 100%, 0.28)', - whiteAlpha400: 'hsla(0, 0%, 100%, 0.41)', - whiteAlpha500: 'hsla(0, 0%, 100%, 0.53)', - whiteAlpha600: 'hsla(0, 0%, 100%, 0.62)', - whiteAlpha700: 'hsla(0, 0%, 100%, 0.73)', - whiteAlpha750: 'hsla(0, 0%, 100%, 0.78)', - whiteAlpha800: 'hsla(0, 0%, 100%, 0.81)', - whiteAlpha850: 'hsla(0, 0%, 100%, 0.84)', - whiteAlpha900: 'hsla(0, 0%, 100%, 0.87)', - whiteAlpha950: 'hsla(0, 0%, 100%, 0.92)', + whiteAlpha25: transparentize('white', '2%'), + whiteAlpha50: transparentize('white', '3%'), + whiteAlpha100: transparentize('white', '7%'), + whiteAlpha150: transparentize('white', '11%'), + whiteAlpha200: transparentize('white', '15%'), + whiteAlpha300: transparentize('white', '28%'), + whiteAlpha400: transparentize('white', '41%'), + whiteAlpha500: transparentize('white', '53%'), + whiteAlpha600: transparentize('white', '62%'), + whiteAlpha700: transparentize('white', '73%'), + whiteAlpha750: transparentize('white', '78%'), + whiteAlpha800: transparentize('white', '81%'), + whiteAlpha850: transparentize('white', '84%'), + whiteAlpha900: transparentize('white', '87%'), + whiteAlpha950: transparentize('white', '92%'), } as const); export const neutralAlpha = Object.freeze({ - neutralAlpha25: 'hsla(0, 0%, 0%, 0.02)', - neutralAlpha50: 'hsla(0, 0%, 0%, 0.03)', - neutralAlpha100: 'hsla(0, 0%, 0%, 0.07)', - neutralAlpha150: 'hsla(0, 0%, 0%, 0.11)', - neutralAlpha200: 'hsla(0, 0%, 0%, 0.15)', - neutralAlpha300: 'hsla(0, 0%, 0%, 0.28)', - neutralAlpha400: 'hsla(0, 0%, 0%, 0.41)', - neutralAlpha500: 'hsla(0, 0%, 0%, 0.53)', - neutralAlpha600: 'hsla(0, 0%, 0%, 0.62)', - neutralAlpha700: 'hsla(0, 0%, 0%, 0.73)', - neutralAlpha750: 'hsla(0, 0%, 0%, 0.78)', - neutralAlpha800: 'hsla(0, 0%, 0%, 0.81)', - neutralAlpha850: 'hsla(0, 0%, 0%, 0.84)', - neutralAlpha900: 'hsla(0, 0%, 0%, 0.87)', - neutralAlpha950: 'hsla(0, 0%, 0%, 0.92)', + neutralAlpha25: transparentize('black', '2%'), + neutralAlpha50: transparentize('black', '3%'), + neutralAlpha100: transparentize('black', '7%'), + neutralAlpha150: transparentize('black', '11%'), + neutralAlpha200: transparentize('black', '15%'), + neutralAlpha300: transparentize('black', '28%'), + neutralAlpha400: transparentize('black', '41%'), + neutralAlpha500: transparentize('black', '53%'), + neutralAlpha600: transparentize('black', '62%'), + neutralAlpha700: transparentize('black', '73%'), + neutralAlpha750: transparentize('black', '78%'), + neutralAlpha800: transparentize('black', '81%'), + neutralAlpha850: transparentize('black', '84%'), + neutralAlpha900: transparentize('black', '87%'), + neutralAlpha950: transparentize('black', '92%'), } as const); export const colors = Object.freeze({ @@ -49,7 +49,7 @@ export const colors = Object.freeze({ colorTextSecondary: '#747686', colorInputText: '#131316', colorTextOnPrimaryBackground: 'white', - colorShimmer: 'rgba(255, 255, 255, 0.36)', + colorShimmer: transparentize('white', '36%'), transparent: 'transparent', white: 'white', black: 'black', @@ -64,8 +64,7 @@ export const colors = Object.freeze({ primary800: '#201D23', primary900: '#1B171C', primaryHover: '#3B3C45', //primary 500 adjusted for lightness - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - ...colorOptionToHslaAlphaScale('#2F3037', 'primaryAlpha')!, + ...createAlphaScaleWithTransparentize('#2F3037', 'primaryAlpha'), danger50: '#FEF2F2', danger100: '#FEE5E5', danger200: '#FECACA', @@ -77,8 +76,7 @@ export const colors = Object.freeze({ danger800: '#991B1B', danger900: '#7F1D1D', danger950: '#450A0A', - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - ...colorOptionToHslaAlphaScale('#EF4444', 'dangerAlpha')!, + ...createAlphaScaleWithTransparentize('#EF4444', 'dangerAlpha'), warning50: '#FFF6ED', warning100: '#FFEBD5', warning200: '#FED1AA', @@ -90,8 +88,7 @@ export const colors = Object.freeze({ warning800: '#9A2F12', warning900: '#7C2912', warning950: '#431207', - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - ...colorOptionToHslaAlphaScale('#F36B16', 'warningAlpha')!, + ...createAlphaScaleWithTransparentize('#F36B16', 'warningAlpha'), success50: '#F0FDF2', success100: '#DCFCE2', success200: '#BBF7C6', @@ -103,6 +100,5 @@ export const colors = Object.freeze({ success800: '#166527', success900: '#145323', success950: '#052E0F', - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - ...colorOptionToHslaAlphaScale('#22C543', 'successAlpha')!, + ...createAlphaScaleWithTransparentize('#22C543', 'successAlpha'), } as const); diff --git a/packages/clerk-js/src/ui/utils/colorMix.ts b/packages/clerk-js/src/ui/utils/colorMix.ts index e791503fbf9..dad2964497f 100644 --- a/packages/clerk-js/src/ui/utils/colorMix.ts +++ b/packages/clerk-js/src/ui/utils/colorMix.ts @@ -1,3 +1,9 @@ +/** + * A percentage string + * @example '10%' + */ +type Percentage = `${number}%`; + /** * Mix a color with a color tint * @param color - The color to mix @@ -5,7 +11,7 @@ * @param colorTint - The color to mix the color with * @returns The mixed color */ -export function colorMix(color: string, percentage: number, colorTint: string) { +export function colorMix(color: string, percentage: Percentage, colorTint: string) { return `color-mix(in oklch, ${color} ${percentage}, ${colorTint})`; } @@ -15,7 +21,7 @@ export function colorMix(color: string, percentage: number, colorTint: string) { * @param percentage - The percentage to transparentize the color by * @returns The transparentized color */ -export function transparentize(color: string, percentage: number) { +export function transparentize(color: string, percentage: Percentage) { return colorMix(color, percentage, 'transparent'); } @@ -25,7 +31,7 @@ export function transparentize(color: string, percentage: number) { * @param percentage - The percentage to lighten the color by * @returns The lightened color */ -export function lighten(color: string, percentage: number) { +export function lighten(color: string, percentage: Percentage) { return colorMix(color, percentage, 'white'); } @@ -35,6 +41,128 @@ export function lighten(color: string, percentage: number) { * @param percentage - The percentage to darken the color by * @returns The darkened color */ -export function darken(color: string, percentage: number) { +export function darken(color: string, percentage: Percentage) { return colorMix(color, percentage, 'black'); } + +/** + * A map of alpha shades to percentages + */ +const ALPHA_SHADES_MAP: Record = { + '25': '2%', + '50': '3%', + '100': '7%', + '150': '11%', + '200': '15%', + '300': '28%', + '400': '41%', + '500': '53%', + '600': '62%', + '700': '73%', + '750': '78%', + '800': '81%', + '850': '84%', + '900': '87%', + '950': '92%', +}; + +/** + * Create an alpha scale with transparentize + * @param baseColor - The base color + * @param prefix - The prefix for the scale + * @returns The alpha scale + */ +export function createAlphaScaleWithTransparentize

( + baseColor: string, + prefix: P, +): Record<`${P}${keyof typeof ALPHA_SHADES_MAP}`, string> { + const scale = {} as Record<`${P}${keyof typeof ALPHA_SHADES_MAP}`, string>; + for (const shadeKey in ALPHA_SHADES_MAP) { + if (Object.prototype.hasOwnProperty.call(ALPHA_SHADES_MAP, shadeKey)) { + const percentage = ALPHA_SHADES_MAP[shadeKey]; + // @ts-expect-error - TODO: align percentage type + scale[`${prefix}${shadeKey}`] = transparentize(baseColor, percentage); + } + } + return scale; +} + +const LIGHTNESS_SHADES_DEF: Record = { + '25': { type: 'lighten', amount: '92%' }, + '50': { type: 'lighten', amount: '85%' }, + '100': { type: 'lighten', amount: '70%' }, + '150': { type: 'lighten', amount: '55%' }, + '200': { type: 'lighten', amount: '40%' }, + '300': { type: 'lighten', amount: '25%' }, + '400': { type: 'lighten', amount: '10%' }, + '500': { type: 'base', amount: '0%' }, + '600': { type: 'darken', amount: '10%' }, + '700': { type: 'darken', amount: '25%' }, + '750': { type: 'darken', amount: '40%' }, + '800': { type: 'darken', amount: '55%' }, + '850': { type: 'darken', amount: '70%' }, + '900': { type: 'darken', amount: '85%' }, + '950': { type: 'darken', amount: '92%' }, +}; + +const ALL_LIGHTNESS_SHADE_KEYS = Object.keys(LIGHTNESS_SHADES_DEF); + +/** + * Creates a full lightness color scale (shades 25-950) using color-mix lighten/darken. + * @param colorOption The base color string (used as 500 shade) or a partial scale object. + * @param prefix The prefix for the scale keys (e.g., 'primary'). + * @returns A prefixed color scale object, or undefined if colorOption is undefined. + */ +export function createColorMixLightnessScale

( + colorOption: string | Partial> | undefined, + prefix: P, +): Record<`${P}${keyof typeof LIGHTNESS_SHADES_DEF}`, string> | undefined { + if (!colorOption) { + return undefined; + } + + let baseFor500: string; + const userProvidedShades: Partial> = {}; + + if (typeof colorOption === 'string') { + baseFor500 = colorOption; + } else { + if (!colorOption['500']) { + throw new Error( + `Color scale generation for prefix '${prefix}' failed: The '500' shade is required in the colorOption object.`, + ); + } + baseFor500 = colorOption['500']; + for (const key of ALL_LIGHTNESS_SHADE_KEYS) { + if (colorOption[key]) { + userProvidedShades[key] = colorOption[key]; + } + } + } + + const generatedScale: Partial> = {}; + for (const shadeKey of ALL_LIGHTNESS_SHADE_KEYS) { + const definition = LIGHTNESS_SHADES_DEF[shadeKey]; + switch (definition.type) { + case 'base': + generatedScale[shadeKey] = baseFor500; + break; + case 'lighten': + generatedScale[shadeKey] = lighten(baseFor500, definition.amount); + break; + case 'darken': + generatedScale[shadeKey] = darken(baseFor500, definition.amount); + break; + } + } + + const mergedScale = { ...generatedScale, ...userProvidedShades }; + + const resultScale = {} as Record<`${P}${keyof typeof LIGHTNESS_SHADES_DEF}`, string>; + for (const key of ALL_LIGHTNESS_SHADE_KEYS) { + if (mergedScale[key]) { + resultScale[`${prefix}${key}`] = mergedScale[key]; + } + } + return resultScale; +} diff --git a/packages/clerk-js/src/ui/utils/colors.ts b/packages/clerk-js/src/ui/utils/colors.ts index d3ee83e7550..78e498cbc07 100644 --- a/packages/clerk-js/src/ui/utils/colors.ts +++ b/packages/clerk-js/src/ui/utils/colors.ts @@ -255,6 +255,8 @@ const hslaColorToHslaString = ({ h, s, l, a }: HslaColor): HslaColorString => { }; const parse = (str: string): ParsedResult => { + // TODO(Colors): This is a temporary fix to allow for custom colors to be passed in as variables + return str; const prefix = str.substr(0, 3).toLowerCase(); let res; if (prefix === 'hsl') { From eb9f6827fa88311b95bf6e92378f49376fcb6ca8 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 4 Jun 2025 16:44:24 -0400 Subject: [PATCH 4/5] wip --- .../components/OAuthConsent/OAuthConsent.tsx | 11 ++-------- .../PricingTable/PricingTableDefault.tsx | 7 ++----- .../PricingTable/PricingTableMatrix.tsx | 3 +-- .../src/ui/elements/Card/CardFooter.tsx | 6 +----- .../clerk-js/src/ui/elements/Disclosure.tsx | 6 +----- packages/clerk-js/src/ui/elements/Drawer.tsx | 21 ++++++------------- packages/clerk-js/src/ui/elements/Navbar.tsx | 10 ++------- .../clerk-js/src/ui/elements/PopoverCard.tsx | 6 +----- packages/clerk-js/src/ui/primitives/Th.tsx | 4 ++-- 9 files changed, 18 insertions(+), 56 deletions(-) diff --git a/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx b/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx index 6e170671460..80f77f9c0e6 100644 --- a/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx +++ b/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx @@ -14,7 +14,6 @@ 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'; export function OAuthConsentInternal() { const { scopes, oAuthApplicationName, oAuthApplicationLogoUrl, redirectUrl, onDeny, onAllow } = @@ -121,10 +120,7 @@ export function OAuthConsentInternal() { ({ padding: t.space.$3, - background: common.mergedColorsBackground( - utils.colors.setAlpha(t.colors.$colorBackground, 1), - t.colors.$neutralAlpha50, - ), + background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50), })} > [ { - background: common.mergedColorsBackground( - utils.colors.setAlpha(t.colors.$colorBackground, 1), - t.colors.$neutralAlpha50, - ), + background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50), borderRadius: t.radii.$circle, borderWidth: t.borderWidths.$normal, borderStyle: t.borderStyles.$solid, diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx index 90439286110..e25205b951d 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx +++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx @@ -23,7 +23,7 @@ import { } from '../../customizables'; import { Check, Plus } from '../../icons'; import { common, InternalThemeProvider } from '../../styledSystem'; -import { colors, getClosestProfileScrollBox } from '../../utils'; +import { getClosestProfileScrollBox } from '../../utils'; interface PricingTableDefaultProps { plans?: CommercePlanResource[] | null; @@ -167,10 +167,7 @@ function Card(props: CardProps) { gap: 0, gridTemplateRows: 'subgrid', gridRow: 'span 5', - background: common.mergedColorsBackground( - colors.setAlpha(t.colors.$colorBackground, 1), - t.colors.$neutralAlpha50, - ), + background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50), borderWidth: t.borderWidths.$normal, borderStyle: t.borderStyles.$solid, borderColor: t.colors.$neutralAlpha100, diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx index 1024c9aa267..9dcaf845de0 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx +++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx @@ -22,7 +22,6 @@ import { import { usePrefersReducedMotion } from '../../hooks'; import { Check, InformationCircle } from '../../icons'; import { common, InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem'; -import { colors } from '../../utils'; interface PricingTableMatrixProps { plans: CommercePlanResource[] | undefined; @@ -55,7 +54,7 @@ export function PricingTableMatrix({ }); const highlightBackgroundColor: ThemableCssProp = t => ({ - background: common.mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha25), + background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha25), }); const gridTemplateColumns = React.useMemo(() => `repeat(${plans.length + 1}, minmax(9.375rem,1fr))`, [plans.length]); diff --git a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx index 007f851d43d..27a73c10be4 100644 --- a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx +++ b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx @@ -5,7 +5,6 @@ import { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../ import { useDevMode } from '../../hooks/useDevMode'; import type { InternalTheme, PropsOfComponent } from '../../styledSystem'; import { common, mqu } from '../../styledSystem'; -import { colors } from '../../utils'; import { Card } from '.'; type CardFooterProps = PropsOfComponent & { @@ -50,10 +49,7 @@ export const CardFooter = React.forwardRef((pro t => ({ marginTop: `-${t.space.$2}`, paddingTop: t.space.$2, - background: common.mergedColorsBackground( - colors.setAlpha(t.colors.$colorBackground, 1), - t.colors.$neutralAlpha50, - ), + background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50), '&:empty': { padding: 0, marginTop: 0, diff --git a/packages/clerk-js/src/ui/elements/Disclosure.tsx b/packages/clerk-js/src/ui/elements/Disclosure.tsx index cf1a4a31749..0bcdb7c06ae 100644 --- a/packages/clerk-js/src/ui/elements/Disclosure.tsx +++ b/packages/clerk-js/src/ui/elements/Disclosure.tsx @@ -6,7 +6,6 @@ import { usePrefersReducedMotion } from '../hooks'; import { ChevronDown } from '../icons'; import type { ThemableCssProp } from '../styledSystem'; import { common } from '../styledSystem'; -import { colors } from '../utils'; /* ------------------------------------------------------------------------------------------------- * Disclosure Context @@ -168,10 +167,7 @@ const Content = React.forwardRef(({ 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, - ), + background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50), })} > {children} diff --git a/packages/clerk-js/src/ui/elements/Drawer.tsx b/packages/clerk-js/src/ui/elements/Drawer.tsx index 5017d6513b5..5b6b9f6205c 100644 --- a/packages/clerk-js/src/ui/elements/Drawer.tsx +++ b/packages/clerk-js/src/ui/elements/Drawer.tsx @@ -20,7 +20,7 @@ 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 { transparentize } from '../utils/colorMix'; import { IconButton } from './IconButton'; type FloatingPortalProps = React.ComponentProps; @@ -151,7 +151,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, ]} @@ -298,10 +298,7 @@ const Header = React.forwardRef(({ title, children, sx={[ t => ({ display: 'flex', - background: common.mergedColorsBackground( - colors.setAlpha(t.colors.$colorBackground, 1), - t.colors.$neutralAlpha50, - ), + background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50), borderBlockEndWidth: t.borderWidths.$normal, borderBlockEndStyle: t.borderStyles.$solid, borderBlockEndColor: t.colors.$neutralAlpha100, @@ -378,10 +375,7 @@ const Footer = React.forwardRef(({ children, sx, .. t => ({ display: 'flex', flexDirection: 'column', - background: common.mergedColorsBackground( - colors.setAlpha(t.colors.$colorBackground, 1), - t.colors.$neutralAlpha50, - ), + background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50), borderBlockStartWidth: t.borderWidths.$normal, borderBlockStartStyle: t.borderStyles.$solid, borderBlockStartColor: t.colors.$neutralAlpha100, @@ -496,7 +490,7 @@ const Confirmation = React.forwardRef( 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})`, })} /> @@ -521,10 +515,7 @@ const Confirmation = React.forwardRef( bottom: 0, left: 0, right: 0, - background: common.mergedColorsBackground( - colors.setAlpha(t.colors.$colorBackground, 1), - t.colors.$neutralAlpha50, - ), + background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50), padding: t.space.$4, borderStartStartRadius: t.radii.$md, borderStartEndRadius: t.radii.$md, diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx index fa02d6e4c53..cfede84cc01 100644 --- a/packages/clerk-js/src/ui/elements/Navbar.tsx +++ b/packages/clerk-js/src/ui/elements/Navbar.tsx @@ -146,10 +146,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, - ), + background: common.mergedColorsBackground(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, @@ -319,10 +316,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, - ), + background: common.mergedColorsBackground(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]: { diff --git a/packages/clerk-js/src/ui/elements/PopoverCard.tsx b/packages/clerk-js/src/ui/elements/PopoverCard.tsx index 41886231cc1..2246d21c97a 100644 --- a/packages/clerk-js/src/ui/elements/PopoverCard.tsx +++ b/packages/clerk-js/src/ui/elements/PopoverCard.tsx @@ -5,7 +5,6 @@ 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 { Card } from './Card'; const PopoverCardRoot = React.forwardRef< @@ -81,10 +80,7 @@ const PopoverCardFooter = (props: PropsOfComponent) => { justify='between' sx={[ t => ({ - background: common.mergedColorsBackground( - colors.setAlpha(t.colors.$colorBackground, 1), - t.colors.$neutralAlpha50, - ), + background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50), marginTop: `-${t.space.$2}`, paddingTop: t.space.$2, '&:empty': { diff --git a/packages/clerk-js/src/ui/primitives/Th.tsx b/packages/clerk-js/src/ui/primitives/Th.tsx index 320dace655f..eec38663685 100644 --- a/packages/clerk-js/src/ui/primitives/Th.tsx +++ b/packages/clerk-js/src/ui/primitives/Th.tsx @@ -2,7 +2,7 @@ import React from 'react'; import type { PrimitiveProps, StyleVariants } from '../styledSystem'; import { createVariants } from '../styledSystem'; -import { colors } from '../utils'; +import { transparentize } from '../utils/colorMix'; import type { BoxProps } from './Box'; import { Box } from './Box'; @@ -11,7 +11,7 @@ const { applyVariants, filterProps } = createVariants(theme => ({ textAlign: 'left', fontSize: theme.fontSizes.$sm, fontWeight: theme.fontWeights.$normal, - color: colors.setAlpha(theme.colors.$colorText, 0.62), + color: transparentize(theme.colors.$colorText, '62%'), padding: `${theme.space.$2} ${theme.space.$4}`, }, variants: {}, From f7ebfcc1d73aab7eac3c2f2e3f562e3f2dcd0600 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 4 Jun 2025 17:04:24 -0400 Subject: [PATCH 5/5] wip --- .../src/ui/components/OAuthConsent/OAuthConsent.tsx | 6 +++--- .../ui/components/PricingTable/PricingTableDefault.tsx | 5 +++-- packages/clerk-js/src/ui/elements/Card/CardFooter.tsx | 6 ++++-- packages/clerk-js/src/ui/elements/Disclosure.tsx | 4 ++-- packages/clerk-js/src/ui/elements/Drawer.tsx | 9 ++++----- packages/clerk-js/src/ui/elements/Navbar.tsx | 7 ++++--- packages/clerk-js/src/ui/elements/PopoverCard.tsx | 5 +++-- packages/clerk-js/src/ui/utils/colorMix.ts | 10 +++++----- 8 files changed, 28 insertions(+), 24 deletions(-) diff --git a/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx b/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx index 80f77f9c0e6..b4d14c04d6c 100644 --- a/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx +++ b/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx @@ -13,7 +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 { colorMix } from '@/ui/utils/colorMix'; export function OAuthConsentInternal() { const { scopes, oAuthApplicationName, oAuthApplicationLogoUrl, redirectUrl, onDeny, onAllow } = @@ -120,7 +120,7 @@ export function OAuthConsentInternal() { ({ padding: t.space.$3, - background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50), + backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50), })} > [ { - background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50), + backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50), borderRadius: t.radii.$circle, borderWidth: t.borderWidths.$normal, borderStyle: t.borderStyles.$solid, diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx index e25205b951d..1c283b9b182 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx +++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx @@ -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'; @@ -22,7 +23,7 @@ import { Text, } from '../../customizables'; import { Check, Plus } from '../../icons'; -import { common, InternalThemeProvider } from '../../styledSystem'; +import { InternalThemeProvider } from '../../styledSystem'; import { getClosestProfileScrollBox } from '../../utils'; interface PricingTableDefaultProps { @@ -167,7 +168,7 @@ function Card(props: CardProps) { gap: 0, gridTemplateRows: 'subgrid', gridRow: 'span 5', - background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50), + backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50), borderWidth: t.borderWidths.$normal, borderStyle: t.borderStyles.$solid, borderColor: t.colors.$neutralAlpha100, diff --git a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx index 27a73c10be4..a0bafadfbed 100644 --- a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx +++ b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx @@ -1,10 +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 { mqu } from '../../styledSystem'; import { Card } from '.'; type CardFooterProps = PropsOfComponent & { @@ -49,7 +51,7 @@ export const CardFooter = React.forwardRef((pro t => ({ marginTop: `-${t.space.$2}`, paddingTop: t.space.$2, - background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50), + backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50), '&:empty': { padding: 0, marginTop: 0, diff --git a/packages/clerk-js/src/ui/elements/Disclosure.tsx b/packages/clerk-js/src/ui/elements/Disclosure.tsx index 0bcdb7c06ae..4ab64e45817 100644 --- a/packages/clerk-js/src/ui/elements/Disclosure.tsx +++ b/packages/clerk-js/src/ui/elements/Disclosure.tsx @@ -5,7 +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 { colorMix } from '../utils/colorMix'; /* ------------------------------------------------------------------------------------------------- * Disclosure Context @@ -167,7 +167,7 @@ const Content = React.forwardRef(({ children }, re borderWidth: t.borderWidths.$normal, borderStyle: t.borderStyles.$solid, borderColor: t.colors.$neutralAlpha100, - background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50), + backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50), })} > {children} diff --git a/packages/clerk-js/src/ui/elements/Drawer.tsx b/packages/clerk-js/src/ui/elements/Drawer.tsx index 5b6b9f6205c..236fde166b8 100644 --- a/packages/clerk-js/src/ui/elements/Drawer.tsx +++ b/packages/clerk-js/src/ui/elements/Drawer.tsx @@ -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 { transparentize } from '../utils/colorMix'; +import { colorMix, transparentize } from '../utils/colorMix'; import { IconButton } from './IconButton'; type FloatingPortalProps = React.ComponentProps; @@ -298,7 +297,7 @@ const Header = React.forwardRef(({ title, children, sx={[ t => ({ display: 'flex', - background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50), + backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50), borderBlockEndWidth: t.borderWidths.$normal, borderBlockEndStyle: t.borderStyles.$solid, borderBlockEndColor: t.colors.$neutralAlpha100, @@ -375,7 +374,7 @@ const Footer = React.forwardRef(({ children, sx, .. t => ({ display: 'flex', flexDirection: 'column', - background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50), + backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50), borderBlockStartWidth: t.borderWidths.$normal, borderBlockStartStyle: t.borderStyles.$solid, borderBlockStartColor: t.colors.$neutralAlpha100, @@ -515,7 +514,7 @@ const Confirmation = React.forwardRef( bottom: 0, left: 0, right: 0, - background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50), + backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50), padding: t.space.$4, borderStartStartRadius: t.radii.$md, borderStartEndRadius: t.radii.$md, diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx index cfede84cc01..b2b1d547c48 100644 --- a/packages/clerk-js/src/ui/elements/Navbar.tsx +++ b/packages/clerk-js/src/ui/elements/Navbar.tsx @@ -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'; @@ -146,7 +147,7 @@ const NavbarContainer = ( width: t.sizes.$57, position: 'relative', maxWidth: t.space.$57, - background: common.mergedColorsBackground(t.colors.$colorBackground, 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, @@ -316,7 +317,7 @@ export const NavbarMenuButtonRow = ({ navbarTitleLocalizationKey, ...props }: Na elementDescriptor={descriptors.navbarMobileMenuRow} sx={t => ({ display: 'none', - background: common.mergedColorsBackground(t.colors.$colorBackground, 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]: { diff --git a/packages/clerk-js/src/ui/elements/PopoverCard.tsx b/packages/clerk-js/src/ui/elements/PopoverCard.tsx index 2246d21c97a..30569578458 100644 --- a/packages/clerk-js/src/ui/elements/PopoverCard.tsx +++ b/packages/clerk-js/src/ui/elements/PopoverCard.tsx @@ -4,7 +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 { animations } from '../styledSystem'; +import { colorMix } from '../utils/colorMix'; import { Card } from './Card'; const PopoverCardRoot = React.forwardRef< @@ -80,7 +81,7 @@ const PopoverCardFooter = (props: PropsOfComponent) => { justify='between' sx={[ t => ({ - background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50), + backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50), marginTop: `-${t.space.$2}`, paddingTop: t.space.$2, '&:empty': { diff --git a/packages/clerk-js/src/ui/utils/colorMix.ts b/packages/clerk-js/src/ui/utils/colorMix.ts index dad2964497f..e779583f865 100644 --- a/packages/clerk-js/src/ui/utils/colorMix.ts +++ b/packages/clerk-js/src/ui/utils/colorMix.ts @@ -11,8 +11,8 @@ type Percentage = `${number}%`; * @param colorTint - The color to mix the color with * @returns The mixed color */ -export function colorMix(color: string, percentage: Percentage, colorTint: string) { - return `color-mix(in oklch, ${color} ${percentage}, ${colorTint})`; +export function colorMix(colorOne: string, colorTwo: string) { + return `color-mix(in oklch, ${colorOne}, ${colorTwo})`; } /** @@ -22,7 +22,7 @@ export function colorMix(color: string, percentage: Percentage, colorTint: strin * @returns The transparentized color */ export function transparentize(color: string, percentage: Percentage) { - return colorMix(color, percentage, 'transparent'); + return colorMix(`${color} ${percentage}`, 'transparent'); } /** @@ -32,7 +32,7 @@ export function transparentize(color: string, percentage: Percentage) { * @returns The lightened color */ export function lighten(color: string, percentage: Percentage) { - return colorMix(color, percentage, 'white'); + return colorMix(`${color} ${percentage}`, 'white'); } /** @@ -42,7 +42,7 @@ export function lighten(color: string, percentage: Percentage) { * @returns The darkened color */ export function darken(color: string, percentage: Percentage) { - return colorMix(color, percentage, 'black'); + return colorMix(`${color} ${percentage}`, 'black'); } /**