From e0e6ef68f5c59919031668f50b7d24fc9ee283ca Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 9 Jul 2025 13:25:28 -0400 Subject: [PATCH 01/35] feat(clerk-js): Expose CSS variables for clerk appearance variables --- .../clerk-js/src/ui/foundations/colors.ts | 115 +++++------------- .../clerk-js/src/ui/utils/cssVariables.ts | 8 ++ 2 files changed, 41 insertions(+), 82 deletions(-) diff --git a/packages/clerk-js/src/ui/foundations/colors.ts b/packages/clerk-js/src/ui/foundations/colors.ts index 4e97cfdb197..fedab33edfc 100644 --- a/packages/clerk-js/src/ui/foundations/colors.ts +++ b/packages/clerk-js/src/ui/foundations/colors.ts @@ -1,4 +1,6 @@ -import { colorOptionToThemedAlphaScale } from '../utils/colors/scales'; +import { colors as colorUtils } from '../utils/colors'; +import { colorOptionToThemedAlphaScale, colorOptionToThemedLightnessScale } from '../utils/colors/scales'; +import { clerkCssVar } from '../utils/cssVariables'; export const whiteAlpha = Object.freeze({ whiteAlpha25: 'hsla(0, 0%, 100%, 0.02)', @@ -18,91 +20,40 @@ export const whiteAlpha = Object.freeze({ whiteAlpha950: 'hsla(0, 0%, 100%, 0.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)', -} as const); +const dangerScale = colorOptionToThemedLightnessScale(clerkCssVar('color-danger', '#EF4444'), 'danger'); +const primaryScale = colorOptionToThemedLightnessScale(clerkCssVar('color-primary', '#2F3037'), 'primary'); +const successScale = colorOptionToThemedLightnessScale(clerkCssVar('color-success', '#22C543'), 'success'); +const warningScale = colorOptionToThemedLightnessScale(clerkCssVar('color-warning', '#F36B16'), 'warning'); + +const dangerAlphaScale = colorOptionToThemedAlphaScale(clerkCssVar('color-danger', '#EF4444'), 'dangerAlpha'); +const neutralAlphaScale = colorOptionToThemedAlphaScale(clerkCssVar('color-neutral', '#000000'), 'neutralAlpha'); +const primaryAlphaScale = colorOptionToThemedAlphaScale(clerkCssVar('color-primary', '#2F3037'), 'primaryAlpha'); +const successAlphaScale = colorOptionToThemedAlphaScale(clerkCssVar('color-success', '#22C543'), 'successAlpha'); +const warningAlphaScale = colorOptionToThemedAlphaScale(clerkCssVar('color-warning', '#F36B16'), 'warningAlpha'); export const colors = Object.freeze({ - avatarBorder: neutralAlpha.neutralAlpha200, - avatarBackground: neutralAlpha.neutralAlpha400, - modalBackdrop: neutralAlpha.neutralAlpha700, - // Themable colors - ...neutralAlpha, + avatarBorder: neutralAlphaScale?.neutralAlpha200, + avatarBackground: neutralAlphaScale?.neutralAlpha400, + modalBackdrop: neutralAlphaScale?.neutralAlpha700, + ...neutralAlphaScale, ...whiteAlpha, - colorBackground: 'white', - colorInputBackground: 'white', - colorText: '#212126', - colorTextSecondary: '#747686', - colorInputText: '#131316', - colorTextOnPrimaryBackground: 'white', - colorShimmer: 'rgba(255, 255, 255, 0.36)', + colorBackground: clerkCssVar('color-background', 'white'), + colorInputBackground: clerkCssVar('color-input-background', 'white'), + colorText: clerkCssVar('color-text', '#212126'), + colorTextSecondary: clerkCssVar('color-text-secondary', '#747686'), + colorInputText: clerkCssVar('color-input-text', '#131316'), + colorTextOnPrimaryBackground: clerkCssVar('color-text-on-primary-background', 'white'), + colorShimmer: clerkCssVar('color-shimmer', 'rgba(255, 255, 255, 0.36)'), transparent: 'transparent', white: 'white', black: 'black', - primary50: '#B9BDBC', - primary100: '#9EA1A2', - primary200: '#828687', - primary300: '#66696D', - primary400: '#4B4D52', - primary500: '#2F3037', - primary600: '#2A2930', - primary700: '#25232A', - primary800: '#201D23', - primary900: '#1B171C', - primaryHover: '#3B3C45', //primary 500 adjusted for lightness - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - ...colorOptionToThemedAlphaScale('#2F3037', 'primaryAlpha')!, - danger50: '#FEF2F2', - danger100: '#FEE5E5', - danger200: '#FECACA', - danger300: '#FCA5A5', - danger400: '#F87171', - danger500: '#EF4444', - danger600: '#DC2626', - danger700: '#B91C1C', - danger800: '#991B1B', - danger900: '#7F1D1D', - danger950: '#450A0A', - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - ...colorOptionToThemedAlphaScale('#EF4444', 'dangerAlpha')!, - warning50: '#FFF6ED', - warning100: '#FFEBD5', - warning200: '#FED1AA', - warning300: '#FDB674', - warning400: '#F98C49', - warning500: '#F36B16', - warning600: '#EA520C', - warning700: '#C23A0C', - warning800: '#9A2F12', - warning900: '#7C2912', - warning950: '#431207', - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - ...colorOptionToThemedAlphaScale('#F36B16', 'warningAlpha')!, - success50: '#F0FDF2', - success100: '#DCFCE2', - success200: '#BBF7C6', - success300: '#86EF9B', - success400: '#4ADE68', - success500: '#22C543', - success600: '#16A332', - success700: '#15802A', - success800: '#166527', - success900: '#145323', - success950: '#052E0F', - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - ...colorOptionToThemedAlphaScale('#22C543', 'successAlpha')!, + ...primaryScale, + primaryHover: colorUtils.adjustForLightness(primaryScale?.primary500), + ...primaryAlphaScale, + ...dangerScale, + ...dangerAlphaScale, + ...warningScale, + ...warningAlphaScale, + ...successScale, + ...successAlphaScale, } as const); diff --git a/packages/clerk-js/src/ui/utils/cssVariables.ts b/packages/clerk-js/src/ui/utils/cssVariables.ts index 40ce87f6353..3b811da80eb 100644 --- a/packages/clerk-js/src/ui/utils/cssVariables.ts +++ b/packages/clerk-js/src/ui/utils/cssVariables.ts @@ -233,3 +233,11 @@ export function resolveComputedCSSColor(parentElement: HTMLElement, color: strin const { data } = ctx.getImageData(0, 0, 1, 1); return `#${data[0].toString(16).padStart(2, '0')}${data[1].toString(16).padStart(2, '0')}${data[2].toString(16).padStart(2, '0')}`; } + +/** + * Creates a CSS variable prefixed with `clerk-` with a default value + * @param name - The name of the CSS variable + * @param defaultValue - The default value + * @returns The CSS variable string + */ +export const clerkCssVar = (name: string, defaultValue: string) => `var(--clerk-${name}, ${defaultValue})`; From e2465015bef52b00cf04d0d8811a1f0cb3acf693 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 9 Jul 2025 13:54:55 -0400 Subject: [PATCH 02/35] handle colorTextSecondary --- packages/clerk-js/src/ui/foundations/colors.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/clerk-js/src/ui/foundations/colors.ts b/packages/clerk-js/src/ui/foundations/colors.ts index fedab33edfc..e90b82f6fe1 100644 --- a/packages/clerk-js/src/ui/foundations/colors.ts +++ b/packages/clerk-js/src/ui/foundations/colors.ts @@ -31,6 +31,12 @@ const primaryAlphaScale = colorOptionToThemedAlphaScale(clerkCssVar('color-prima const successAlphaScale = colorOptionToThemedAlphaScale(clerkCssVar('color-success', '#22C543'), 'successAlpha'); const warningAlphaScale = colorOptionToThemedAlphaScale(clerkCssVar('color-warning', '#F36B16'), 'warningAlpha'); +const colorText = clerkCssVar('color-text', '#212126'); +const colorTextSecondary = clerkCssVar( + 'color-text-secondary', + colorUtils.makeTransparent(colorText, 0.35) || '#747686', +); + export const colors = Object.freeze({ avatarBorder: neutralAlphaScale?.neutralAlpha200, avatarBackground: neutralAlphaScale?.neutralAlpha400, @@ -39,8 +45,8 @@ export const colors = Object.freeze({ ...whiteAlpha, colorBackground: clerkCssVar('color-background', 'white'), colorInputBackground: clerkCssVar('color-input-background', 'white'), - colorText: clerkCssVar('color-text', '#212126'), - colorTextSecondary: clerkCssVar('color-text-secondary', '#747686'), + colorText, + colorTextSecondary, colorInputText: clerkCssVar('color-input-text', '#131316'), colorTextOnPrimaryBackground: clerkCssVar('color-text-on-primary-background', 'white'), colorShimmer: clerkCssVar('color-shimmer', 'rgba(255, 255, 255, 0.36)'), From 3d4fd36fcbac6571b96fadcd030b0ded9d8524e3 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 9 Jul 2025 15:14:26 -0400 Subject: [PATCH 03/35] update sizes and typography foundations --- packages/clerk-js/src/ui/foundations/sizes.ts | 108 +++++++++--------- .../clerk-js/src/ui/foundations/typography.ts | 25 ++-- 2 files changed, 71 insertions(+), 62 deletions(-) diff --git a/packages/clerk-js/src/ui/foundations/sizes.ts b/packages/clerk-js/src/ui/foundations/sizes.ts index 9faf2dded28..374bac79c9b 100644 --- a/packages/clerk-js/src/ui/foundations/sizes.ts +++ b/packages/clerk-js/src/ui/foundations/sizes.ts @@ -1,56 +1,61 @@ +import { clerkCssVar } from '../utils/cssVariables'; + const baseSpaceUnits = Object.freeze({ none: '0', xxs: '0.5px', px: '1px', } as const); +const dynamicSpaceUnitsDefaultVar = clerkCssVar('spacing-unit', '1rem'); +const calcDynamicSpaceUnits = (num: number) => `calc(${dynamicSpaceUnitsDefaultVar} * ((${num} / 0.5) * 0.125))`; + const dynamicSpaceUnits = Object.freeze({ - '0x25': '0.0625rem', - '0x5': '0.125rem', - '1': '0.25rem', - '1x5': '0.375rem', - '2': '0.5rem', - '2x5': '0.625rem', - '3': '0.75rem', - '3x25': '0.8125rem', - '3x5': '0.875rem', - '4': '1rem', - '4x25': '1.0625rem', - '5': '1.25rem', - '5x5': '1.375rem', - '6': '1.5rem', - '7': '1.75rem', - '7x5': '1.875rem', - '8': '2rem', - '8x5': '2.125rem', - '8x75': '2.1875rem', - '9': '2.25rem', - '10': '2.5rem', - '12': '3rem', - '13': '3.5rem', - '16': '4rem', - '17': '4.25rem', - '20': '5rem', - '24': '6rem', - '28': '7rem', - '32': '8rem', - '36': '9rem', - '40': '10rem', - '44': '11rem', - '48': '12rem', - '52': '13rem', - '56': '14rem', - '57': '14.25rem', - '60': '15rem', - '66': '16.5rem', - '94': '23.5rem', - '100': '25rem', - '108': '27rem', - '120': '30rem', - '140': '35rem', - '160': '40rem', - '176': '44rem', - '220': '55rem', + '0x25': calcDynamicSpaceUnits(0.25), // 0.0625rem + '0x5': calcDynamicSpaceUnits(0.5), // 0.125rem + '1': calcDynamicSpaceUnits(1), // 0.25rem + '1x5': calcDynamicSpaceUnits(1.5), // 0.375rem + '2': calcDynamicSpaceUnits(2), // 0.5rem + '2x5': calcDynamicSpaceUnits(2.5), // 0.625rem + '3': calcDynamicSpaceUnits(3), // 0.75rem + '3x25': calcDynamicSpaceUnits(3.25), // 0.8125rem + '3x5': calcDynamicSpaceUnits(3.5), // 0.875rem + '4': dynamicSpaceUnitsDefaultVar, // 1rem + '4x25': calcDynamicSpaceUnits(4.5), // 1.0625rem + '5': calcDynamicSpaceUnits(5), // 1.25rem + '5x5': calcDynamicSpaceUnits(5.5), // 1.375rem + '6': calcDynamicSpaceUnits(6), // 1.5rem + '7': calcDynamicSpaceUnits(7), // 1.75rem + '7x5': calcDynamicSpaceUnits(7.5), // 1.875rem + '8': calcDynamicSpaceUnits(8), // 2rem + '8x5': calcDynamicSpaceUnits(8.5), // 2.125rem + '8x75': calcDynamicSpaceUnits(8.75), // 2.1875rem + '9': calcDynamicSpaceUnits(9), // 2.25rem + '10': calcDynamicSpaceUnits(10), // 2.5rem + '12': calcDynamicSpaceUnits(12), // 3rem + '13': calcDynamicSpaceUnits(13), // 3.5rem + '16': calcDynamicSpaceUnits(16), // 4rem + '17': calcDynamicSpaceUnits(17), // 4.25rem + '20': calcDynamicSpaceUnits(20), // 5rem + '24': calcDynamicSpaceUnits(24), // 6rem + '28': calcDynamicSpaceUnits(28), // 7rem + '32': calcDynamicSpaceUnits(32), // 8rem + '36': calcDynamicSpaceUnits(36), // 9rem + '40': calcDynamicSpaceUnits(40), // 10rem + '44': calcDynamicSpaceUnits(44), // 11rem + '48': calcDynamicSpaceUnits(48), // 12rem + '52': calcDynamicSpaceUnits(52), // 13rem + '56': calcDynamicSpaceUnits(56), // 14rem + '57': calcDynamicSpaceUnits(57), // 14.25rem + '60': calcDynamicSpaceUnits(60), // 15rem + '66': calcDynamicSpaceUnits(66), // 16.5rem + '94': calcDynamicSpaceUnits(94), // 23.5rem + '100': calcDynamicSpaceUnits(100), // 25rem + '108': calcDynamicSpaceUnits(108), // 27rem + '120': calcDynamicSpaceUnits(120), // 30rem + '140': calcDynamicSpaceUnits(140), // 35rem + '160': calcDynamicSpaceUnits(160), // 40rem + '176': calcDynamicSpaceUnits(176), // 44rem + '220': calcDynamicSpaceUnits(220), // 55rem } as const); /** @@ -64,14 +69,15 @@ const space = Object.freeze({ const sizes = Object.freeze({ ...space } as const); +const radiiDefaultVar = clerkCssVar('border-radius', '0.375rem'); const radii = Object.freeze({ none: '0px', circle: '50%', - avatar: '0.375rem', - sm: '0.25rem', - md: '0.375rem', - lg: '0.5rem', - xl: '0.75rem', + avatar: clerkCssVar('radius-avatar', radiiDefaultVar), // 0.375rem + sm: clerkCssVar('radius-sm', `calc(${radiiDefaultVar} * 0.666)`), // 0.25rem + md: clerkCssVar('radius-md', radiiDefaultVar), // 0.375rem + lg: clerkCssVar('radius-lg', `calc(${radiiDefaultVar} * 1.333)`), // 0.5rem + xl: clerkCssVar('radius-xl', `calc(${radiiDefaultVar} * 2)`), // 0.75rem halfHeight: '99999px', } as const); diff --git a/packages/clerk-js/src/ui/foundations/typography.ts b/packages/clerk-js/src/ui/foundations/typography.ts index fdf4f87e109..e177e36978b 100644 --- a/packages/clerk-js/src/ui/foundations/typography.ts +++ b/packages/clerk-js/src/ui/foundations/typography.ts @@ -1,8 +1,10 @@ +import { clerkCssVar } from '../utils/cssVariables'; + const fontWeights = Object.freeze({ - normal: 400, - medium: 500, - semibold: 600, - bold: 700, + normal: clerkCssVar('font-weight-normal', clerkCssVar('font-weight', '400')), + medium: clerkCssVar('font-weight-medium', '500'), + semibold: clerkCssVar('font-weight-semibold', '600'), + bold: clerkCssVar('font-weight-bold', '700'), } as const); const lineHeights = Object.freeze({ @@ -20,12 +22,13 @@ const letterSpacings = Object.freeze({ // We want to achieve the md size to be 13px for root font size of 16px // This is directly related to the createFontSizeScale function in the theme // ref: src/ui/customizables/parseVariables.ts +const fontSizesDefaultVar = clerkCssVar('font-size', '0.8125rem'); const fontSizes = Object.freeze({ - xs: '0.6875rem', - sm: '0.75rem', - md: '0.8125rem', - lg: '1.0625rem', - xl: '1.5rem', + xs: clerkCssVar('font-size-xs', `calc(${fontSizesDefaultVar} * 0.8)`), // 0.6875rem + sm: clerkCssVar('font-size-sm', `calc(${fontSizesDefaultVar} * 0.9)`), // 0.75rem + md: clerkCssVar('font-size-md', fontSizesDefaultVar), + lg: clerkCssVar('font-size-lg', `calc(${fontSizesDefaultVar} * 1.3)`), // 1.0625rem + xl: clerkCssVar('font-size-xl', `calc(${fontSizesDefaultVar} * 1.85)`), // 1.5rem } as const); const fontStyles = Object.freeze({ @@ -33,8 +36,8 @@ const fontStyles = Object.freeze({ } as const); const fonts = Object.freeze({ - main: 'inherit', - buttons: 'inherit', + main: clerkCssVar('font-family', 'inherit'), + buttons: clerkCssVar('font-family-buttons', clerkCssVar('font-family', 'inherit')), } as const); export { fontSizes, fontWeights, letterSpacings, lineHeights, fonts, fontStyles }; From 9a2a9c63cbbd3427e39209a0f876fb0fbabc5ccd Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 9 Jul 2025 15:56:50 -0400 Subject: [PATCH 04/35] handle types --- .../clerk-js/src/ui/foundations/colors.ts | 70 +++++++++++++++---- 1 file changed, 55 insertions(+), 15 deletions(-) diff --git a/packages/clerk-js/src/ui/foundations/colors.ts b/packages/clerk-js/src/ui/foundations/colors.ts index e90b82f6fe1..ae71e6ba963 100644 --- a/packages/clerk-js/src/ui/foundations/colors.ts +++ b/packages/clerk-js/src/ui/foundations/colors.ts @@ -20,16 +20,56 @@ export const whiteAlpha = Object.freeze({ whiteAlpha950: 'hsla(0, 0%, 100%, 0.92)', } as const); -const dangerScale = colorOptionToThemedLightnessScale(clerkCssVar('color-danger', '#EF4444'), 'danger'); -const primaryScale = colorOptionToThemedLightnessScale(clerkCssVar('color-primary', '#2F3037'), 'primary'); -const successScale = colorOptionToThemedLightnessScale(clerkCssVar('color-success', '#22C543'), 'success'); -const warningScale = colorOptionToThemedLightnessScale(clerkCssVar('color-warning', '#F36B16'), 'warning'); +type LightnessScale = NonNullable>>; +type AlphaScale = NonNullable>>; -const dangerAlphaScale = colorOptionToThemedAlphaScale(clerkCssVar('color-danger', '#EF4444'), 'dangerAlpha'); -const neutralAlphaScale = colorOptionToThemedAlphaScale(clerkCssVar('color-neutral', '#000000'), 'neutralAlpha'); -const primaryAlphaScale = colorOptionToThemedAlphaScale(clerkCssVar('color-primary', '#2F3037'), 'primaryAlpha'); -const successAlphaScale = colorOptionToThemedAlphaScale(clerkCssVar('color-success', '#22C543'), 'successAlpha'); -const warningAlphaScale = colorOptionToThemedAlphaScale(clerkCssVar('color-warning', '#F36B16'), 'warningAlpha'); +/** + * Color scale generation with clerkCssVar + * + * These functions will never return undefined because: + * 1. clerkCssVar always provides a fallback value (e.g., 'var(--clerk-color-danger, #EF4444)') + * 2. The fallback ensures a valid color string is always passed to the scale generation functions + * 3. Valid color strings always produce complete color scales + * + * Therefore, it's safe to assert these as NonNullable. + */ +const dangerScale = colorOptionToThemedLightnessScale( + clerkCssVar('color-danger', '#EF4444'), + 'danger', +) as LightnessScale<'danger'>; +const primaryScale = colorOptionToThemedLightnessScale( + clerkCssVar('color-primary', '#2F3037'), + 'primary', +) as LightnessScale<'primary'>; +const successScale = colorOptionToThemedLightnessScale( + clerkCssVar('color-success', '#22C543'), + 'success', +) as LightnessScale<'success'>; +const warningScale = colorOptionToThemedLightnessScale( + clerkCssVar('color-warning', '#F36B16'), + 'warning', +) as LightnessScale<'warning'>; + +const dangerAlphaScale = colorOptionToThemedAlphaScale( + clerkCssVar('color-danger', '#EF4444'), + 'dangerAlpha', +) as AlphaScale<'dangerAlpha'>; +const neutralAlphaScale = colorOptionToThemedAlphaScale( + clerkCssVar('color-neutral', '#000000'), + 'neutralAlpha', +) as AlphaScale<'neutralAlpha'>; +const primaryAlphaScale = colorOptionToThemedAlphaScale( + clerkCssVar('color-primary', '#2F3037'), + 'primaryAlpha', +) as AlphaScale<'primaryAlpha'>; +const successAlphaScale = colorOptionToThemedAlphaScale( + clerkCssVar('color-success', '#22C543'), + 'successAlpha', +) as AlphaScale<'successAlpha'>; +const warningAlphaScale = colorOptionToThemedAlphaScale( + clerkCssVar('color-warning', '#F36B16'), + 'warningAlpha', +) as AlphaScale<'warningAlpha'>; const colorText = clerkCssVar('color-text', '#212126'); const colorTextSecondary = clerkCssVar( @@ -38,11 +78,9 @@ const colorTextSecondary = clerkCssVar( ); export const colors = Object.freeze({ - avatarBorder: neutralAlphaScale?.neutralAlpha200, - avatarBackground: neutralAlphaScale?.neutralAlpha400, - modalBackdrop: neutralAlphaScale?.neutralAlpha700, - ...neutralAlphaScale, - ...whiteAlpha, + avatarBorder: neutralAlphaScale.neutralAlpha200, + avatarBackground: neutralAlphaScale.neutralAlpha400, + modalBackdrop: neutralAlphaScale.neutralAlpha700, colorBackground: clerkCssVar('color-background', 'white'), colorInputBackground: clerkCssVar('color-input-background', 'white'), colorText, @@ -53,8 +91,10 @@ export const colors = Object.freeze({ transparent: 'transparent', white: 'white', black: 'black', + ...neutralAlphaScale, + ...whiteAlpha, ...primaryScale, - primaryHover: colorUtils.adjustForLightness(primaryScale?.primary500), + primaryHover: colorUtils.adjustForLightness(primaryScale.primary500), ...primaryAlphaScale, ...dangerScale, ...dangerAlphaScale, From d9740c3f3e64689ca2fc7f250b201fa3b4405edd Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 9 Jul 2025 16:13:39 -0400 Subject: [PATCH 05/35] fix exports --- packages/clerk-js/src/ui/foundations/colors.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/clerk-js/src/ui/foundations/colors.ts b/packages/clerk-js/src/ui/foundations/colors.ts index ae71e6ba963..773294f9c04 100644 --- a/packages/clerk-js/src/ui/foundations/colors.ts +++ b/packages/clerk-js/src/ui/foundations/colors.ts @@ -2,7 +2,7 @@ import { colors as colorUtils } from '../utils/colors'; import { colorOptionToThemedAlphaScale, colorOptionToThemedLightnessScale } from '../utils/colors/scales'; import { clerkCssVar } from '../utils/cssVariables'; -export const whiteAlpha = Object.freeze({ +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)', @@ -77,7 +77,7 @@ const colorTextSecondary = clerkCssVar( colorUtils.makeTransparent(colorText, 0.35) || '#747686', ); -export const colors = Object.freeze({ +const colors = Object.freeze({ avatarBorder: neutralAlphaScale.neutralAlpha200, avatarBackground: neutralAlphaScale.neutralAlpha400, modalBackdrop: neutralAlphaScale.neutralAlpha700, @@ -103,3 +103,5 @@ export const colors = Object.freeze({ ...successScale, ...successAlphaScale, } as const); + +export { colors, neutralAlphaScale as neutralAlpha, whiteAlpha }; From be27f20b539872b6c3aba08fc2eff1989f841186 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 9 Jul 2025 16:13:49 -0400 Subject: [PATCH 06/35] fix application logo sizing --- .../clerk-js/src/ui/elements/ApplicationLogo.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx b/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx index d792f4294f2..68f8905f267 100644 --- a/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx +++ b/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx @@ -5,23 +5,20 @@ import { descriptors, Flex, Image, useAppearance } from '../customizables'; import type { PropsOfComponent } from '../styledSystem'; import { RouterLink } from './RouterLink'; -type WidthInRem = `${string}rem`; -const getContainerHeightForImageRatio = (imageRef: React.RefObject, remWidth: WidthInRem) => { - const baseFontSize = 16; - const base = Number.parseFloat(remWidth.replace('rem', '')) * baseFontSize; +const getContainerHeightForImageRatio = (imageRef: React.RefObject, width: string) => { if (!imageRef.current) { - return base; + return `calc(${width} * 2)`; } const ratio = imageRef.current.naturalWidth / imageRef.current.naturalHeight; - let newHeight = `${base}px`; + if (ratio <= 1) { // logo is taller than it is wide - newHeight = `${2 * base}px`; + return `calc(${width} * 2)`; } else if (ratio > 1 && ratio <= 2) { // logo is up to 2x wider than it is tall - newHeight = `${(2 * base) / ratio}px`; + return `calc((${width} * 2) / ${ratio})`; } - return newHeight; + return width; }; type ApplicationLogoProps = PropsOfComponent; From c8f61e2843bbdc7000ebadb7433cde535f1e7cf6 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 11 Jul 2025 10:41:46 -0400 Subject: [PATCH 07/35] chore(clerk-js,themes,types): Variable migration (#6282) --- packages/clerk-js/sandbox/app.ts | 13 +- packages/clerk-js/sandbox/template.html | 24 +- .../src/ui/common/ProviderInitialIcon.tsx | 2 +- .../ui/components/ApiKeys/ApiKeysTable.tsx | 2 +- .../components/ApiKeys/CreateApiKeyForm.tsx | 2 +- .../components/Checkout/CheckoutComplete.tsx | 4 +- .../ui/components/Checkout/CheckoutForm.tsx | 2 +- .../CreateOrganizationForm.tsx | 2 +- .../components/OAuthConsent/OAuthConsent.tsx | 4 +- .../ui/components/OrganizationList/shared.tsx | 4 +- .../OrganizationProfile/MemberListTable.tsx | 2 +- .../OrganizationBillingPage.tsx | 2 +- .../OrganizationMembersTabInvitations.tsx | 2 +- .../OrganizationMembersTabRequests.tsx | 2 +- .../OrganizationSwitcherTrigger.tsx | 2 +- .../UserInvitationSuggestionList.tsx | 8 +- .../PaymentAttempts/PaymentAttemptPage.tsx | 2 +- .../PaymentSources/AddPaymentSource.tsx | 6 +- .../PaymentSources/PaymentSourceRow.tsx | 4 +- .../PricingTable/PricingTableDefault.tsx | 6 +- .../ui/components/Statements/Statement.tsx | 4 +- .../Subscriptions/SubscriptionsList.tsx | 2 +- .../UserButton/UserButtonTrigger.tsx | 2 +- .../ui/components/UserProfile/AccountPage.tsx | 2 +- .../ui/components/UserProfile/BillingPage.tsx | 2 +- .../UserProfile/ConnectedAccountsSection.tsx | 2 +- .../components/UserProfile/EmailsSection.tsx | 2 +- .../components/UserProfile/PhoneSection.tsx | 2 +- .../UserProfile/UserProfileSection.tsx | 2 +- .../UserProfile/UsernameSection.tsx | 2 +- .../__tests__/parseAppearance.test.tsx | 52 ++-- .../src/ui/customizables/parseVariables.ts | 33 ++- packages/clerk-js/src/ui/elements/Avatar.tsx | 2 +- .../ui/elements/Card/CardClerkAndPagesTag.tsx | 2 +- .../src/ui/elements/Card/CardContent.tsx | 2 +- .../src/ui/elements/Card/CardFooter.tsx | 7 +- .../src/ui/elements/Card/CardRoot.tsx | 2 +- .../clerk-js/src/ui/elements/Disclosure.tsx | 2 +- packages/clerk-js/src/ui/elements/Drawer.tsx | 2 +- packages/clerk-js/src/ui/elements/Header.tsx | 2 +- .../src/ui/elements/InformationBox.tsx | 2 +- .../clerk-js/src/ui/elements/LineItems.tsx | 10 +- packages/clerk-js/src/ui/elements/Navbar.tsx | 16 +- .../clerk-js/src/ui/elements/Pagination.tsx | 2 +- .../src/ui/elements/PhoneInput/index.tsx | 2 +- .../src/ui/elements/PreviewButton.tsx | 2 +- .../elements/ProfileCard/ProfileCardRoot.tsx | 2 +- packages/clerk-js/src/ui/elements/RootBox.tsx | 2 +- .../src/ui/elements/SegmentedControl.tsx | 2 +- .../clerk-js/src/ui/elements/TagInput.tsx | 8 +- .../clerk-js/src/ui/foundations/colors.ts | 19 +- packages/clerk-js/src/ui/foundations/sizes.ts | 224 +++++++++++++----- .../clerk-js/src/ui/foundations/typography.ts | 2 +- .../clerk-js/src/ui/primitives/AlertIcon.tsx | 2 +- packages/clerk-js/src/ui/primitives/Badge.tsx | 2 +- .../clerk-js/src/ui/primitives/Button.tsx | 4 +- .../clerk-js/src/ui/primitives/FormLabel.tsx | 2 +- .../clerk-js/src/ui/primitives/Heading.tsx | 2 +- packages/clerk-js/src/ui/primitives/Input.tsx | 6 +- packages/clerk-js/src/ui/primitives/Link.tsx | 2 +- .../src/ui/primitives/NotificationBadge.tsx | 2 +- packages/clerk-js/src/ui/primitives/Td.tsx | 2 +- packages/clerk-js/src/ui/primitives/Text.tsx | 6 +- packages/clerk-js/src/ui/primitives/Th.tsx | 2 +- .../clerk-js/src/ui/styledSystem/common.ts | 13 + packages/themes/src/themes/dark.ts | 8 +- packages/themes/src/themes/shadesOfPurple.ts | 4 +- packages/types/src/appearance.ts | 43 ++++ 68 files changed, 388 insertions(+), 228 deletions(-) diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts index e2752c2f7b3..c04981e2b77 100644 --- a/packages/clerk-js/sandbox/app.ts +++ b/packages/clerk-js/sandbox/app.ts @@ -156,16 +156,17 @@ function appearanceVariableOptions() { 'colorPrimary', 'colorNeutral', 'colorBackground', - 'colorTextOnPrimaryBackground', + 'colorPrimaryForeground', + 'colorForeground', 'colorDanger', 'colorSuccess', 'colorWarning', - 'colorText', - 'colorTextSecondary', - 'colorInputText', - 'colorInputBackground', + 'colorForeground', + 'colorMutedForeground', + 'colorInputForeground', + 'colorInput', 'colorShimmer', - 'spacingUnit', + 'spacing', 'borderRadius', ] as const; diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html index 0e5003dd7dd..315482ffc8d 100644 --- a/packages/clerk-js/sandbox/template.html +++ b/packages/clerk-js/sandbox/template.html @@ -216,11 +216,11 @@ /> @@ -252,38 +252,38 @@ /> @@ -297,10 +297,10 @@ />