Skip to content

Commit 30ad5f8

Browse files
brkalowbrkalow
authored
chore(ui): Remove deprecated appearance properties (#7359)
1 parent f26537b commit 30ad5f8

File tree

16 files changed

+117
-269
lines changed

16 files changed

+117
-269
lines changed

‎integration/tests/appearance.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ test.describe('appearance prop', () => {
2626
return (
2727
<div key={name}>
2828
<h2>{name}</h2>
29-
<SignIn appearance={{ baseTheme: theme }} />
30-
<SignUp appearance={{ baseTheme: theme }} />
29+
<SignIn appearance={{ theme }} />
30+
<SignUp appearance={{ theme }} />
3131
</div>
3232
);
3333
});

‎packages/react/src/__tests__/isomorphicClerk.test.ts‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -43,29 +43,29 @@ describe('isomorphicClerk', () => {
4343
const isomorphicClerk = new IsomorphicClerk({ publishableKey: 'pk_test_XXX' });
4444
(isomorphicClerk as any).clerkjs = dummyClerkJS as any;
4545

46-
void isomorphicClerk.__unstable__updateProps({ appearance: { baseTheme: 'dark' } });
47-
void isomorphicClerk.__unstable__updateProps({ appearance: { baseTheme: 'light' } });
48-
void isomorphicClerk.__unstable__updateProps({ appearance: { baseTheme: 'purple' } });
49-
void isomorphicClerk.__unstable__updateProps({ appearance: { baseTheme: 'yellow' } });
50-
void isomorphicClerk.__unstable__updateProps({ appearance: { baseTheme: 'red' } });
51-
void isomorphicClerk.__unstable__updateProps({ appearance: { baseTheme: 'blue' } });
52-
void isomorphicClerk.__unstable__updateProps({ appearance: { baseTheme: 'green' } });
46+
void isomorphicClerk.__unstable__updateProps({ appearance: { theme: 'dark' } });
47+
void isomorphicClerk.__unstable__updateProps({ appearance: { theme: 'light' } });
48+
void isomorphicClerk.__unstable__updateProps({ appearance: { theme: 'purple' } });
49+
void isomorphicClerk.__unstable__updateProps({ appearance: { theme: 'yellow' } });
50+
void isomorphicClerk.__unstable__updateProps({ appearance: { theme: 'red' } });
51+
void isomorphicClerk.__unstable__updateProps({ appearance: { theme: 'blue' } });
52+
void isomorphicClerk.__unstable__updateProps({ appearance: { theme: 'green' } });
5353
expect(propsHistory).toEqual([]);
5454

5555
vi.spyOn(isomorphicClerk, 'loaded', 'get').mockReturnValue(true);
5656
isomorphicClerk.emitLoaded();
57-
void isomorphicClerk.__unstable__updateProps({ appearance: { baseTheme: 'white' } });
57+
void isomorphicClerk.__unstable__updateProps({ appearance: { theme: 'white' } });
5858
await vi.runAllTimersAsync();
5959

6060
expect(propsHistory).toEqual([
61-
{ appearance: { baseTheme: 'dark' } },
62-
{ appearance: { baseTheme: 'light' } },
63-
{ appearance: { baseTheme: 'purple' } },
64-
{ appearance: { baseTheme: 'yellow' } },
65-
{ appearance: { baseTheme: 'red' } },
66-
{ appearance: { baseTheme: 'blue' } },
67-
{ appearance: { baseTheme: 'green' } },
68-
{ appearance: { baseTheme: 'white' } },
61+
{ appearance: { theme: 'dark' } },
62+
{ appearance: { theme: 'light' } },
63+
{ appearance: { theme: 'purple' } },
64+
{ appearance: { theme: 'yellow' } },
65+
{ appearance: { theme: 'red' } },
66+
{ appearance: { theme: 'blue' } },
67+
{ appearance: { theme: 'green' } },
68+
{ appearance: { theme: 'white' } },
6969
]);
7070
});
7171

‎packages/react/src/contexts/__tests__/ClerkProvider.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,10 @@ describe('ClerkProvider', () => {
5353
expectTypeOf({ ...defaultProps, appearance: {} }).toMatchTypeOf<ClerkProviderProps>();
5454
});
5555

56-
it('includes variables, elements, layout baseTheme', () => {
56+
it('includes variables, elements, layout, theme', () => {
5757
expectTypeOf({
5858
...defaultProps,
59-
appearance: { elements: {}, variables: {}, layout: {}, baseTheme: dark },
59+
appearance: { elements: {}, variables: {}, layout: {}, theme: dark },
6060
}).toMatchTypeOf<ClerkProviderProps>();
6161
});
6262

‎packages/shared/src/telemetry/events/__tests__/theme-usage.spec.ts‎

Lines changed: 0 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -72,41 +72,6 @@ describe('eventThemeUsage', () => {
7272
});
7373
});
7474

75-
it('should prioritize theme over deprecated baseTheme', () => {
76-
const appearance = {
77-
theme: 'clerk' as any, // String themes are valid at runtime
78-
baseTheme: {
79-
__type: 'prebuilt_appearance' as const,
80-
name: 'shadcn',
81-
},
82-
};
83-
84-
const result = eventThemeUsage(appearance);
85-
86-
expect(result).toEqual({
87-
event: EVENT_THEME_USAGE,
88-
eventSamplingRate: EVENT_SAMPLING_RATE,
89-
payload: { themeName: 'clerk' },
90-
});
91-
});
92-
93-
it('should use baseTheme when theme is not provided', () => {
94-
const appearance = {
95-
baseTheme: {
96-
__type: 'prebuilt_appearance' as const,
97-
name: 'shadcn',
98-
},
99-
};
100-
101-
const result = eventThemeUsage(appearance);
102-
103-
expect(result).toEqual({
104-
event: EVENT_THEME_USAGE,
105-
eventSamplingRate: EVENT_SAMPLING_RATE,
106-
payload: { themeName: 'shadcn' },
107-
});
108-
});
109-
11075
it('should handle undefined appearance', () => {
11176
const result = eventThemeUsage();
11277

‎packages/shared/src/telemetry/events/component-mounted.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ type EventPrebuiltComponent = ComponentMountedBase & {
2525
appearanceProp: boolean;
2626
elements: boolean;
2727
variables: boolean;
28-
baseTheme: boolean;
28+
theme: boolean;
2929
};
3030

3131
type EventComponentMounted = ComponentMountedBase & TelemetryEventRaw['payload'];
@@ -48,7 +48,7 @@ function createPrebuiltComponentEvent(event: typeof EVENT_COMPONENT_MOUNTED | ty
4848
payload: {
4949
component,
5050
appearanceProp: Boolean(props?.appearance),
51-
baseTheme: Boolean(props?.appearance?.baseTheme),
51+
theme: Boolean(props?.appearance?.theme),
5252
elements: Boolean(props?.appearance?.elements),
5353
variables: Boolean(props?.appearance?.variables),
5454
...additionalPayload,

‎packages/shared/src/telemetry/events/theme-usage.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,7 @@ function analyzeThemeUsage(appearance?: any): EventThemeUsage {
3737
return {};
3838
}
3939

40-
// Prioritize the new theme property over deprecated baseTheme
41-
const themeProperty = appearance.theme || appearance.baseTheme;
40+
const themeProperty = appearance.theme;
4241

4342
if (!themeProperty) {
4443
return {};

‎packages/ui/src/Components.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ export const mountComponentRenderer = (
202202
moduleManager: ModuleManager,
203203
) => {
204204
const options = { ..._options };
205-
// Extract cssLayerName from baseTheme if present and move it to appearance level
205+
// Extract cssLayerName from theme if present and move it to appearance level
206206
if (options.appearance) {
207207
options.appearance = extractCssLayerNameFromAppearance(options.appearance);
208208
}

‎packages/ui/src/customizables/__tests__/parseAppearance.test.tsx‎

Lines changed: 9 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ const themeA = {
1717
colorBackground: themeAColor,
1818
colorInput: themeAColor,
1919
colorInputForeground: themeAColor,
20-
colorText: themeAColor,
20+
colorForeground: themeAColor,
2121
colorPrimaryForeground: themeAColor,
22-
colorTextSecondary: themeAColor,
22+
colorMutedForeground: themeAColor,
2323
borderRadius: '1rem',
2424
fontFamily: 'Comic Sans',
2525
fontFamilyButtons: 'Comic Sans',
@@ -39,9 +39,9 @@ const themeB = {
3939
colorBackground: themeBColor,
4040
colorInput: themeBColor,
4141
colorInputForeground: themeBColor,
42-
colorText: themeBColor,
42+
colorForeground: themeBColor,
4343
colorPrimaryForeground: themeBColor,
44-
colorTextSecondary: themeBColor,
44+
colorMutedForeground: themeBColor,
4545
borderRadius: '2rem',
4646
fontFamily: 'Arial',
4747
fontFamilyButtons: 'Arial',
@@ -338,7 +338,7 @@ describe('AppearanceProvider layout flows', () => {
338338
expect(result.current.parsedLayout.socialButtonsVariant).toBe('blockButton');
339339
});
340340

341-
it('removes the baseTheme when simpleStyles is passed to globalAppearance', () => {
341+
it('removes the base theme when simpleStyles is passed to globalAppearance', () => {
342342
const wrapper = ({ children }) => (
343343
<AppearanceProvider
344344
appearanceKey='signIn'
@@ -359,7 +359,7 @@ describe('AppearanceProvider layout flows', () => {
359359
expect(result.current.parsedElements[0]['alert'].backgroundColor).toBe(themeAColor);
360360
});
361361

362-
it('removes the baseTheme when simpleStyles is passed to appearance', () => {
362+
it('removes the base theme when simpleStyles is passed to appearance', () => {
363363
const wrapper = ({ children }) => (
364364
<AppearanceProvider
365365
appearanceKey='signIn'
@@ -479,7 +479,7 @@ describe('AppearanceProvider theme flows', () => {
479479
);
480480

481481
const { result } = renderHook(() => useAppearance(), { wrapper });
482-
// Should include clerk theme styles (baseTheme will be included)
482+
// Should include clerk theme styles (base theme will be included)
483483
expect(result.current.parsedElements.length).toBeGreaterThan(0);
484484
});
485485

@@ -500,42 +500,7 @@ describe('AppearanceProvider theme flows', () => {
500500
expect(result.current.parsedElements.length).toBe(2);
501501
});
502502

503-
it('theme property takes precedence over deprecated baseTheme', () => {
504-
const wrapper = ({ children }) => (
505-
<AppearanceProvider
506-
appearanceKey='signIn'
507-
appearance={{
508-
theme: 'simple',
509-
baseTheme: 'clerk', // This should be ignored
510-
}}
511-
>
512-
{children}
513-
</AppearanceProvider>
514-
);
515-
516-
const { result } = renderHook(() => useAppearance(), { wrapper });
517-
// Should include both simple theme and base theme (2 elements total)
518-
expect(result.current.parsedElements.length).toBe(2);
519-
});
520-
521-
it('maintains backward compatibility with baseTheme property', () => {
522-
const wrapper = ({ children }) => (
523-
<AppearanceProvider
524-
appearanceKey='signIn'
525-
appearance={{
526-
baseTheme: 'simple',
527-
}}
528-
>
529-
{children}
530-
</AppearanceProvider>
531-
);
532-
533-
const { result } = renderHook(() => useAppearance(), { wrapper });
534-
// Should work the same as theme: 'simple' (2 elements total)
535-
expect(result.current.parsedElements.length).toBe(2);
536-
});
537-
538-
it('supports object-based themes with new theme property', () => {
503+
it('supports object-based themes with theme property', () => {
539504
const customTheme = {
540505
elements: {
541506
card: { backgroundColor: 'red' },
@@ -559,7 +524,7 @@ describe('AppearanceProvider theme flows', () => {
559524
expect(result.current.parsedElements.some(el => el.card?.backgroundColor === 'red')).toBe(true);
560525
});
561526

562-
it('supports array-based themes with new theme property', () => {
527+
it('supports array-based themes with theme property', () => {
563528
const themeA = {
564529
elements: { card: { backgroundColor: 'red' } },
565530
};

‎packages/ui/src/customizables/parseAppearance.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export type ParsedCaptcha = Required<CaptchaAppearanceOptions>;
2222

2323
type PublicAppearanceTopLevelKey = keyof Omit<
2424
Appearance,
25-
'baseTheme' | 'theme' | 'elements' | 'layout' | 'variables' | 'captcha' | 'cssLayerName'
25+
'theme' | 'elements' | 'layout' | 'variables' | 'captcha' | 'cssLayerName'
2626
>;
2727

2828
export type AppearanceCascade = {
@@ -105,15 +105,14 @@ const expand = (theme: Theme | undefined, cascade: any[]) => {
105105
return;
106106
}
107107

108-
// Use new 'theme' property if available, otherwise fall back to deprecated 'baseTheme'
109-
const themeProperty = theme.theme !== undefined ? theme.theme : theme.baseTheme;
108+
const themeProperty = theme.theme;
110109

111110
if (themeProperty !== undefined) {
112-
(Array.isArray(themeProperty) ? themeProperty : [themeProperty]).forEach(baseTheme => {
113-
if (typeof baseTheme === 'string') {
114-
expand(getBaseTheme(baseTheme), cascade);
111+
(Array.isArray(themeProperty) ? themeProperty : [themeProperty]).forEach(t => {
112+
if (typeof t === 'string') {
113+
expand(getBaseTheme(t), cascade);
115114
} else {
116-
expand(baseTheme as Theme, cascade);
115+
expand(t as Theme, cascade);
117116
}
118117
});
119118
}

‎packages/ui/src/customizables/parseVariables.ts‎

Lines changed: 8 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,7 @@ const createMutedForegroundColor = (variables: NonNullable<Theme['variables']>)
1414
return colors.toHslaString(variables.colorMutedForeground);
1515
}
1616

17-
if (variables.colorTextSecondary) {
18-
return colors.toHslaString(variables.colorTextSecondary);
19-
}
20-
21-
if (variables.colorForeground) {
22-
return colors.makeTransparent(variables.colorForeground, 0.35);
23-
}
24-
25-
return colors.makeTransparent(variables.colorText, 0.35);
17+
return colors.makeTransparent(variables.colorForeground, 0.35);
2618
};
2719

2820
export const createColorScales = (theme: Theme) => {
@@ -57,20 +49,12 @@ export const createColorScales = (theme: Theme) => {
5749
primaryHover: colors.adjustForLightness(primaryScale?.primary500),
5850
colorPrimaryForeground: variables.colorPrimaryForeground
5951
? colors.toHslaString(variables.colorPrimaryForeground)
60-
: variables.colorTextOnPrimaryBackground
61-
? colors.toHslaString(variables.colorTextOnPrimaryBackground)
62-
: undefined,
63-
colorForeground: variables.colorForeground
64-
? colors.toHslaString(variables.colorForeground)
65-
: colors.toHslaString(variables.colorText),
52+
: undefined,
53+
colorForeground: colors.toHslaString(variables.colorForeground),
6654
colorMutedForeground: createMutedForegroundColor(variables),
67-
colorInputForeground: variables.colorInputForeground
68-
? colors.toHslaString(variables.colorInputForeground)
69-
: colors.toHslaString(variables.colorInputText),
55+
colorInputForeground: colors.toHslaString(variables.colorInputForeground),
7056
colorBackground: colors.toHslaString(variables.colorBackground),
71-
colorInput: variables.colorInput
72-
? colors.toHslaString(variables.colorInput)
73-
: colors.toHslaString(variables.colorInputBackground),
57+
colorInput: colors.toHslaString(variables.colorInput),
7458
colorShimmer: colors.toHslaString(variables.colorShimmer),
7559
colorMuted: variables.colorMuted ? colors.toHslaString(variables.colorMuted) : undefined,
7660
colorRing: variables.colorRing ? colors.toHslaString(variables.colorRing) : undefined,
@@ -146,16 +130,15 @@ export const createRadiiUnits = (theme: Theme) => {
146130
};
147131

148132
export const createSpaceScale = (theme: Theme) => {
149-
const { spacing, spacingUnit } = theme.variables || {};
150-
const spacingValue = spacing ?? spacingUnit;
151-
if (spacingValue === undefined) {
133+
const { spacing } = theme.variables || {};
134+
if (spacing === undefined) {
152135
return;
153136
}
154137
return fromEntries(
155138
spaceScaleKeys.map(k => {
156139
const num = Number.parseFloat(k.replace('x', '.'));
157140
const percentage = (num / 0.5) * 0.125;
158-
return [k, `calc(${spacingValue} * ${percentage})`];
141+
return [k, `calc(${spacing} * ${percentage})`];
159142
}),
160143
);
161144
};

0 commit comments

Comments
 (0)