feat(ui): Add fontFamilyMono variable (#8546)

Author: alexcarpenter

.changeset/font-family-mono-variable.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': minor
+---
+
+Add `fontFamilyMono` appearance variable for customizing the monospace font used in Clerk components. Defaults to `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace` and is exposed as the `--clerk-font-family-mono` CSS variable.

packages/ui/src/customizables/parseVariables.ts

@@ -177,8 +177,8 @@ export const createFontWeightScale = (theme: Theme): Partial<Record<keyof typeof
 };
 
 export const createFonts = (theme: Theme) => {
-  const { fontFamily, fontFamilyButtons } = theme.variables || {};
-  return removeUndefinedProps({ main: fontFamily, buttons: fontFamilyButtons });
+  const { fontFamily, fontFamilyButtons, fontFamilyMono } = theme.variables || {};
+  return removeUndefinedProps({ main: fontFamily, buttons: fontFamilyButtons, mono: fontFamilyMono });
 };
 
 export const createShadowsUnits = (theme: Theme) => {

packages/ui/src/foundations/typography.ts

@@ -45,6 +45,7 @@ const fontStyles = Object.freeze({
 const fonts = Object.freeze({
   main: clerkCssVar('font-family', 'inherit'),
   buttons: clerkCssVar('font-family-buttons', clerkCssVar('font-family', 'inherit')),
+  mono: clerkCssVar('font-family-mono', 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace'),
 } as const);
 
 export { fontSizes, fontWeights, letterSpacings, lineHeights, fonts, fontStyles };

packages/ui/src/internal/appearance.ts

@@ -824,6 +824,13 @@ export type Variables = {
    * @default 'inherit'
    */
   fontFamilyButtons?: FontFamily;
+  /**
+   * The default monospace font that will be used for monospaced text (e.g. code, OTP inputs).
+   * See {@link Variables.fontFamily} for details on accepted values.
+   *
+   * @default 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace'
+   */
+  fontFamilyMono?: FontFamily;
   /**
    * The value will be used as the base `md` to calculate all the other scale values (`xs`, `sm`, `lg` and `xl`).
    * By default, this value is relative to the root fontSize of the html element.