fix(clerk-js): Remove the fontSmoothing variable (clerk#2734)

Author: anagstef

.changeset/ninety-planets-lick.md

@@ -0,0 +1,2 @@
+---
+---

packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx

@@ -28,7 +28,6 @@ const themeA = {
     fontFamilyButtons: 'Comic Sans',
     fontSize: '1rem',
     fontWeight: { normal: 600 },
-    fontSmoothing: 'antialiased',
     spacingUnit: 'px',
   },
 } as const;
@@ -54,7 +53,6 @@ const themeB = {
     fontFamilyButtons: 'Arial',
     fontSize: '2rem',
     fontWeight: { normal: 700 },
-    fontSmoothing: 'never',
     spacingUnit: 'px',
   },
 } as const;
@@ -97,7 +95,6 @@ describe('AppearanceProvider internalTheme flows', () => {
     expect(result.current.parsedInternalTheme.fonts.$buttons).toBe(themeA.variables.fontFamily);
     expect(result.current.parsedInternalTheme.fontSizes.$md).toBe('1rem');
     expect(result.current.parsedInternalTheme.fontWeights.$normal).toBe(themeA.variables.fontWeight.normal);
-    expect(result.current.parsedInternalTheme.options.$fontSmoothing).toBe(themeA.variables.fontSmoothing);
     expect(result.current.parsedInternalTheme.space.$1).toContain(themeA.variables.spacingUnit);
   });
 
@@ -128,7 +125,6 @@ describe('AppearanceProvider internalTheme flows', () => {
     expect(result.current.parsedInternalTheme.fonts.$buttons).toBe(themeB.variables.fontFamily);
     expect(result.current.parsedInternalTheme.fontSizes.$md).toBe('2rem');
     expect(result.current.parsedInternalTheme.fontWeights.$normal).toBe(themeB.variables.fontWeight.normal);
-    expect(result.current.parsedInternalTheme.options.$fontSmoothing).toBe(themeB.variables.fontSmoothing);
     expect(result.current.parsedInternalTheme.space.$1).toContain(themeB.variables.spacingUnit);
   });
 
@@ -160,7 +156,6 @@ describe('AppearanceProvider internalTheme flows', () => {
     expect(result.current.parsedInternalTheme.fonts.$buttons).toBe(themeB.variables.fontFamily);
     expect(result.current.parsedInternalTheme.fontSizes.$md).toBe('2rem');
     expect(result.current.parsedInternalTheme.fontWeights.$normal).toBe(themeB.variables.fontWeight.normal);
-    expect(result.current.parsedInternalTheme.options.$fontSmoothing).toBe(themeB.variables.fontSmoothing);
     expect(result.current.parsedInternalTheme.space.$1).toContain(themeB.variables.spacingUnit);
   });
 });

packages/clerk-js/src/ui/customizables/parseAppearance.ts

@@ -11,7 +11,6 @@ import {
   createRadiiUnits,
   createShadows,
   createSpaceScale,
-  createThemeOptions,
 } from './parseVariables';
 
 export type ParsedElements = Elements[];
@@ -112,7 +111,6 @@ const createInternalThemeFromVariables = (theme: Theme | undefined): DeepPartial
   const fontSizes = { ...createFontSizeScale(theme) };
   const fontWeights = { ...createFontWeightScale(theme) };
   const fonts = { ...createFonts(theme) };
-  const options = { ...createThemeOptions(theme) };
   const shadows = { ...createShadows(theme) };
-  return createInternalTheme({ colors, radii, space, fontSizes, fontWeights, fonts, options, shadows } as any);
+  return createInternalTheme({ colors, radii, space, fontSizes, fontWeights, fonts, shadows } as any);
 };

packages/clerk-js/src/ui/customizables/parseVariables.ts

@@ -40,11 +40,6 @@ export const createColorScales = (theme: Theme) => {
   });
 };
 
-export const createThemeOptions = (theme: Theme) => {
-  const { fontSmoothing } = theme.variables || {};
-  return removeUndefinedProps({ fontSmoothing });
-};
-
 export const toHSLA = (str: string | undefined) => {
   return str ? colors.toHslaString(str) : undefined;
 };

packages/clerk-js/src/ui/foundations/defaultFoundations.ts

@@ -7,10 +7,6 @@ import { transitionDuration, transitionProperty, transitionTiming } from './tran
 import { fonts, fontSizes, fontStyles, fontWeights, letterSpacings, lineHeights } from './typography';
 import { zIndices } from './zIndices';
 
-const options = {
-  fontSmoothing: undefined,
-} as const;
-
 const defaultInternalThemeFoundations = Object.freeze({
   colors,
   fonts,
@@ -29,7 +25,6 @@ const defaultInternalThemeFoundations = Object.freeze({
   opacity,
   borders,
   zIndices,
-  options,
 } as const);
 
 type InternalThemeFoundations = typeof defaultInternalThemeFoundations;

packages/clerk-js/src/ui/styledSystem/common.ts

@@ -2,7 +2,6 @@ import type { InternalTheme } from './types';
 
 const textVariants = (t: InternalTheme) => {
   const base = {
-    WebkitFontSmoothing: t.options.$fontSmoothing,
     fontFamily: 'inherit',
     letterSpacing: t.letterSpacings.$normal,
   };

packages/types/src/appearance.ts

@@ -49,7 +49,6 @@ export type CssColorOrScale = string | ColorScaleWithRequiredBase;
 export type CssColorOrAlphaScale = string | AlphaColorScale;
 type CssColor = string | TransparentColor | BuiltInColors;
 type CssLengthUnit = string;
-type FontSmoothing = 'auto' | 'antialiased' | 'never';
 
 type FontWeightNamedValue = CSS.Properties['fontWeight'];
 type FontWeightNumericValue = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
@@ -489,11 +488,6 @@ export type Variables = {
    * @default 1rem;
    */
   fontSize?: CssLengthUnit;
-  /**
-   * What text anti-aliasing strategy the components will use by default. You can set it to `auto`, `antialiased` or `never`
-   * @default auto;
-   */
-  fontSmoothing?: FontSmoothing;
   /**
    * The font weight the components will use. By default, the components will use the 400, 500 and 600 weights for normal, medium and bold
    * text respectively. You can override the default weights by passing a {@FontWeightScale} object