@womp/kookie-ui 0.3.26 → 0.5.0

package/src/components/theme.props.tsx

@@ -73,11 +73,22 @@ const themePropDefs = {
    */
   scaling: { type: 'enum', values: scalings, default: '100%' },
   /**
-   * Sets the font family for the theme.
+   * Sets the font family used for body text in the theme.
+   *
+   * Headings follow this unless `headingFontFamily` (or the `--font-heading`
+   * token) says otherwise.
    *
    * @default 'sans'
    */
   fontFamily: { type: 'enum', values: fontFamilies, default: 'sans' },
+  /**
+   * Sets the font family used for `Heading`, independently of body text.
+   *
+   * Deliberately has no default: when it is left unset no attribute is
+   * emitted and `--font-heading` keeps following `--font-body`, so a
+   * `--font-heading` override in your own CSS survives a `fontFamily` switch.
+   */
+  headingFontFamily: { type: 'enum', values: fontFamilies },
 } satisfies {
   hasBackground: PropDef<boolean>;
   appearance: PropDef<(typeof appearances)[number]>;
@@ -88,6 +99,7 @@ const themePropDefs = {
   radius: PropDef<(typeof radii)[number]>;
   scaling: PropDef<(typeof scalings)[number]>;
   fontFamily: PropDef<(typeof fontFamilies)[number]>;
+  headingFontFamily: PropDef<(typeof fontFamilies)[number]>;
 };
 
 type ThemeOwnProps = GetPropDefTypes<typeof themePropDefs & typeof asChildPropDef>;

package/src/components/theme.tsx

@@ -23,6 +23,9 @@ type ThemePanelBackground = (typeof themePropDefs.panelBackground.values)[number
 type ThemeRadius = (typeof themePropDefs.radius.values)[number];
 type ThemeScaling = (typeof themePropDefs.scaling.values)[number];
 type ThemeFontFamily = (typeof themePropDefs.fontFamily.values)[number];
+// Headings follow the body font until something sets this, so `undefined` is a
+// meaningful value here rather than a missing one.
+type ThemeHeadingFontFamily = ThemeFontFamily | undefined;
 
 interface ThemeChangeHandlers {
   onAppearanceChange: (appearance: ThemeAppearance) => void;
@@ -33,6 +36,7 @@ interface ThemeChangeHandlers {
   onRadiusChange: (radius: ThemeRadius) => void;
   onScalingChange: (scaling: ThemeScaling) => void;
   onFontFamilyChange: (fontFamily: ThemeFontFamily) => void;
+  onHeadingFontFamilyChange: (headingFontFamily: ThemeHeadingFontFamily) => void;
 }
 
 interface ThemeContextValue extends ThemeChangeHandlers {
@@ -45,6 +49,7 @@ interface ThemeContextValue extends ThemeChangeHandlers {
   radius: ThemeRadius;
   scaling: ThemeScaling;
   fontFamily: ThemeFontFamily;
+  headingFontFamily: ThemeHeadingFontFamily;
 }
 // Default theme values used when components render outside a Theme provider
 const defaultThemeContext: ThemeContextValue = {
@@ -57,6 +62,7 @@ const defaultThemeContext: ThemeContextValue = {
   radius: themePropDefs.radius.default,
   scaling: themePropDefs.scaling.default,
   fontFamily: themePropDefs.fontFamily.default,
+  headingFontFamily: undefined,
   onAppearanceChange: noop,
   onAccentColorChange: noop,
   onGrayColorChange: noop,
@@ -65,6 +71,7 @@ const defaultThemeContext: ThemeContextValue = {
   onRadiusChange: noop,
   onScalingChange: noop,
   onFontFamilyChange: noop,
+  onHeadingFontFamilyChange: noop,
 };
 
 const ThemeContext = React.createContext<ThemeContextValue | undefined>(undefined);
@@ -103,6 +110,7 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
       radius: radiusProp = themePropDefs.radius.default,
       scaling: scalingProp = themePropDefs.scaling.default,
       fontFamily: fontFamilyProp = themePropDefs.fontFamily.default,
+      headingFontFamily: headingFontFamilyProp,
       hasBackground = themePropDefs.hasBackground.default,
       ...rootProps
     } = props;
@@ -128,6 +136,7 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
     const [radius, setRadius] = usePropSyncedState(radiusProp);
     const [scaling, setScaling] = usePropSyncedState(scalingProp);
     const [fontFamily, setFontFamily] = usePropSyncedState(fontFamilyProp);
+    const [headingFontFamily, setHeadingFontFamily] = usePropSyncedState(headingFontFamilyProp);
 
     return (
       <ThemeImpl
@@ -144,6 +153,7 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
         radius={radius}
         scaling={scaling}
         fontFamily={fontFamily}
+        headingFontFamily={headingFontFamily}
         //
         onAppearanceChange={setAppearance}
         onAccentColorChange={setAccentColor}
@@ -153,6 +163,7 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
         onRadiusChange={setRadius}
         onScalingChange={setScaling}
         onFontFamilyChange={setFontFamily}
+        onHeadingFontFamilyChange={setHeadingFontFamily}
       />
     );
   },
@@ -193,6 +204,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
     radius = props.radius ?? context?.radius ?? themePropDefs.radius.default,
     scaling = props.scaling ?? context?.scaling ?? themePropDefs.scaling.default,
     fontFamily = props.fontFamily ?? context?.fontFamily ?? themePropDefs.fontFamily.default,
+    headingFontFamily = props.headingFontFamily ?? context?.headingFontFamily,
     //
     onAppearanceChange = noop,
     onAccentColorChange = noop,
@@ -202,6 +214,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
     onRadiusChange = noop,
     onScalingChange = noop,
     onFontFamilyChange = noop,
+    onHeadingFontFamilyChange = noop,
     //
     ...themeProps
   } = props;
@@ -243,6 +256,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           radius,
           scaling,
           fontFamily,
+          headingFontFamily,
           //
           onAppearanceChange,
           onAccentColorChange,
@@ -252,6 +266,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           onRadiusChange,
           onScalingChange,
           onFontFamilyChange,
+          onHeadingFontFamilyChange,
         }),
         [
           appearance,
@@ -263,6 +278,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           radius,
           scaling,
           fontFamily,
+          headingFontFamily,
           //
           onAppearanceChange,
           onAccentColorChange,
@@ -272,6 +288,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           onRadiusChange,
           onScalingChange,
           onFontFamilyChange,
+          onHeadingFontFamilyChange,
         ],
       )}
     >
@@ -286,6 +303,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
         data-radius={radius}
         data-scaling={scaling}
         data-font-family={fontFamily}
+        data-heading-font-family={headingFontFamily}
         ref={composedRef}
         {...themeProps}
         className={classNames(

package/src/components/tooltip.css

@@ -2,7 +2,7 @@
   box-sizing: border-box;
   padding: var(--space-1) var(--space-2);
   background-color: var(--gray-12);
-  border-radius: var(--radius-1);
+  border-radius: var(--radius-surface-1);
   z-index: 300; /* Tooltips always on top - above dialogs (100) and menus (200) */
 
   transform-origin: var(--radix-tooltip-content-transform-origin);

package/src/helpers/font-config.ts

@@ -1,194 +1,176 @@
 /**
- * Font configuration utilities for Kookie UI
+ * Runtime font configuration for Kookie UI.
  *
- * These utilities help users configure custom fonts through CSS variables
- * and provide type-safe font configuration options.
+ * This is a thin, typed wrapper over the CSS tokens in `styles/tokens/font-family.css` —
+ * it writes the same variables you would write by hand, and nothing else. Prefer plain CSS
+ * where you can; reach for this when the stacks are only known at runtime (a theme editor,
+ * a user-selectable typeface).
+ *
+ * Two tiers, matching the CSS:
+ *
+ *   - `stacks` — which typefaces exist: `sans`, `mono`, `serif`. Written to `:root`.
+ *   - `roles`  — which stack each role uses: `body`, `heading`, `code`, `strong`, `em`,
+ *                `quote`. Written to the theme element, since roles are per-theme.
  */
 
-/**
- * Font family configuration interface
- */
-export interface FontConfig {
-  /** Sans-serif font stack for fontFamily="sans" */
+/** Tier 1 — the typefaces available to the theme. */
+export interface FontStacks {
+  /** Sans-serif stack. Backs `font="sans"` and, by default, body text. */
   sans?: string;
-  /** Monospace font stack for fontFamily="mono" */
+  /** Monospace stack. Backs `font="mono"` and `Code`. */
   mono?: string;
-  /** Serif font stack for fontFamily="serif" */
+  /** Serif stack. Backs `font="serif"`, `Em` and `Quote`. */
   serif?: string;
-  /** Base Inter font replacement */
-  inter?: string;
-  /** Base JetBrains Mono font replacement */
-  jetbrainsMono?: string;
-  /** Base Playfair Display font replacement */
-  playfairDisplay?: string;
 }
 
-/**
- * CSS variable names used by Kookie UI for fonts
- */
-export const FONT_CSS_VARIABLES = {
+/** Tier 2 — which stack each role of text uses. */
+export interface FontRoles {
+  /** Body text: `Text`, inputs, buttons, and anything that does not opt out. */
+  body?: string;
+  /** `Heading`. Follows `body` when left unset. */
+  heading?: string;
+  /** `Code`. */
+  code?: string;
+  /** `Strong`. */
+  strong?: string;
+  /** `Em`. */
+  em?: string;
+  /** `Quote`. */
+  quote?: string;
+}
+
+export interface FontConfig {
+  stacks?: FontStacks;
+  roles?: FontRoles;
+}
+
+/** CSS custom properties backing each stack. Declared on `:root`. */
+export const FONT_STACK_VARIABLES = {
   sans: '--font-sans',
   mono: '--font-mono',
   serif: '--font-serif',
-  inter: '--font-inter',
-  jetbrainsMono: '--font-jetbrains-mono',
-  playfairDisplay: '--font-playfair-display',
-  defaultFamily: '--default-font-family',
-  headingFamily: '--heading-font-family',
-  strongFamily: '--strong-font-family',
-  codeFamily: '--code-font-family',
-} as const;
+} as const satisfies Record<keyof FontStacks, `--font-${string}`>;
+
+/** CSS custom properties backing each role. Declared on the theme element. */
+export const FONT_ROLE_VARIABLES = {
+  body: '--font-body',
+  heading: '--font-heading',
+  code: '--font-code',
+  strong: '--font-strong',
+  em: '--font-em',
+  quote: '--font-quote',
+} as const satisfies Record<keyof FontRoles, `--font-${string}`>;
 
 /**
- * Popular font stacks for common use cases
+ * Ready-made stacks, each ending in a system fallback.
+ *
+ * The webfont entries assume the face is already loaded — via
+ * `import '@womp/kookie-ui/fonts.css'`, `next/font`, or your own `@font-face`.
+ * Kookie's core stylesheet deliberately loads none.
  */
 export const FONT_STACKS = {
-  // Sans-serif options
-  inter: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-  system: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
-  poppins: "'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
-  openSans: "'Open Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
-
-  // Monospace options
-  jetbrainsMono: "'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', monospace",
-  firaCode: "'Fira Code', 'JetBrains Mono', 'Consolas', 'Liberation Mono', monospace",
-  sourceCodePro: "'Source Code Pro', 'JetBrains Mono', 'Consolas', monospace",
-  systemMono: "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Courier New', monospace",
-
-  // Serif options
-  playfair: "'Playfair Display', 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif",
-  times: "'Times New Roman', 'Times', 'Georgia', 'Cambria', serif",
+  // Sans
+  system: "-apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', system-ui, sans-serif",
+  inter: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, system-ui, sans-serif",
+  poppins: "'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
+  openSans: "'Open Sans (Custom)', -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
+
+  // Mono
+  systemMono: "'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono', monospace",
+  jetbrainsMono: "'JetBrains Mono', 'Menlo', 'Consolas (Custom)', monospace",
+  firaCode: "'Fira Code', 'Menlo', 'Consolas (Custom)', monospace",
+  sourceCodePro: "'Source Code Pro', 'Menlo', 'Consolas (Custom)', monospace",
+
+  // Serif
+  systemSerif: "'Times New Roman', 'Times', 'Georgia', 'Cambria', serif",
+  playfair: "'Playfair Display', 'Times New Roman', 'Georgia', serif",
   georgia: "'Georgia', 'Times New Roman', 'Times', serif",
-  lora: "'Lora', 'Times New Roman', 'Times', serif",
+  lora: "'Lora', 'Georgia', 'Times New Roman', serif",
 } as const;
 
-/**
- * Apply font configuration to CSS variables
- *
- * @param config Font configuration object
- * @param target Target element (defaults to document.documentElement)
- *
- * @example
- * ```ts
- * // Use Google Fonts
- * applyFontConfig({
- *   sans: FONT_STACKS.poppins,
- *   mono: FONT_STACKS.firaCode
- * });
- *
- * // Use system fonts only
- * applyFontConfig({
- *   sans: FONT_STACKS.system,
- *   mono: FONT_STACKS.systemMono
- * });
- * ```
- */
-export function applyFontConfig(config: FontConfig, target: HTMLElement = document.documentElement): void {
-  const style = target.style;
-
-  if (config.sans) {
-    style.setProperty(FONT_CSS_VARIABLES.sans, config.sans);
-  }
-
-  if (config.mono) {
-    style.setProperty(FONT_CSS_VARIABLES.mono, config.mono);
-  }
-
-  if (config.serif) {
-    style.setProperty(FONT_CSS_VARIABLES.serif, config.serif);
-  }
-
-  if (config.inter) {
-    style.setProperty(FONT_CSS_VARIABLES.inter, config.inter);
-  }
-
-  if (config.jetbrainsMono) {
-    style.setProperty(FONT_CSS_VARIABLES.jetbrainsMono, config.jetbrainsMono);
+function write<K extends string>(target: HTMLElement, variables: Record<K, string>, values: Partial<Record<K, string>>) {
+  for (const key of Object.keys(variables) as K[]) {
+    const value = values[key];
+    if (value) target.style.setProperty(variables[key], value);
   }
+}
 
-  if (config.playfairDisplay) {
-    style.setProperty(FONT_CSS_VARIABLES.playfairDisplay, config.playfairDisplay);
+function clear(target: HTMLElement, variables: Record<string, string>) {
+  for (const variable of Object.values(variables)) {
+    target.style.removeProperty(variable);
   }
 }
 
 /**
- * Generate CSS string for font configuration
+ * Apply a font configuration.
  *
- * @param config Font configuration object
- * @returns CSS string that can be injected into a stylesheet
+ * Stacks land on `:root` and roles on `themeElement`, mirroring where the stylesheet
+ * declares them — writing a role to `:root` would not survive, because the theme
+ * element declares its own.
  *
  * @example
  * ```ts
- * const css = generateFontCSS({
- *   sans: FONT_STACKS.poppins,
- *   mono: FONT_STACKS.firaCode
+ * // Serif headings over a sans body
+ * applyFontConfig({
+ *   stacks: { sans: FONT_STACKS.inter, serif: FONT_STACKS.playfair },
+ *   roles: { heading: 'var(--font-serif)' },
  * });
- *
- * // Inject into document
- * const style = document.createElement('style');
- * style.textContent = css;
- * document.head.appendChild(style);
  * ```
  */
-export function generateFontCSS(config: FontConfig): string {
-  const rules: string[] = [':root {'];
-
-  if (config.sans) {
-    rules.push(`  ${FONT_CSS_VARIABLES.sans}: ${config.sans};`);
-  }
-
-  if (config.mono) {
-    rules.push(`  ${FONT_CSS_VARIABLES.mono}: ${config.mono};`);
-  }
-
-  if (config.serif) {
-    rules.push(`  ${FONT_CSS_VARIABLES.serif}: ${config.serif};`);
-  }
+export function applyFontConfig(
+  config: FontConfig,
+  { root = document.documentElement, themeElement = document.querySelector<HTMLElement>('.radix-themes') }: { root?: HTMLElement; themeElement?: HTMLElement | null } = {},
+): void {
+  if (config.stacks) write(root, FONT_STACK_VARIABLES, config.stacks);
+  if (config.roles && themeElement) write(themeElement, FONT_ROLE_VARIABLES, config.roles);
+}
 
-  if (config.inter) {
-    rules.push(`  ${FONT_CSS_VARIABLES.inter}: ${config.inter};`);
-  }
+/**
+ * Render a font configuration as a CSS string, for injecting into a stylesheet or
+ * emitting server-side.
+ */
+export function generateFontCSS(config: FontConfig): string {
+  const blocks: string[] = [];
 
-  if (config.jetbrainsMono) {
-    rules.push(`  ${FONT_CSS_VARIABLES.jetbrainsMono}: ${config.jetbrainsMono};`);
+  const stacks = Object.entries(config.stacks ?? {}).filter(([, value]) => value);
+  if (stacks.length) {
+    blocks.push([':root {', ...stacks.map(([key, value]) => `  ${FONT_STACK_VARIABLES[key as keyof FontStacks]}: ${value};`), '}'].join('\n'));
   }
 
-  if (config.playfairDisplay) {
-    rules.push(`  ${FONT_CSS_VARIABLES.playfairDisplay}: ${config.playfairDisplay};`);
+  const roles = Object.entries(config.roles ?? {}).filter(([, value]) => value);
+  if (roles.length) {
+    blocks.push(['.radix-themes {', ...roles.map(([key, value]) => `  ${FONT_ROLE_VARIABLES[key as keyof FontRoles]}: ${value};`), '}'].join('\n'));
   }
 
-  rules.push('}');
-
-  return rules.join('\n');
+  return blocks.join('\n\n');
 }
 
-/**
- * Reset fonts to Kookie UI defaults
- */
-export function resetFonts(target: HTMLElement = document.documentElement): void {
-  const style = target.style;
-
-  // Remove custom font variables to fall back to defaults
-  style.removeProperty(FONT_CSS_VARIABLES.sans);
-  style.removeProperty(FONT_CSS_VARIABLES.mono);
-  style.removeProperty(FONT_CSS_VARIABLES.serif);
-  style.removeProperty(FONT_CSS_VARIABLES.inter);
-  style.removeProperty(FONT_CSS_VARIABLES.jetbrainsMono);
-  style.removeProperty(FONT_CSS_VARIABLES.playfairDisplay);
+/** Drop every inline font override, falling back to the stylesheet's defaults. */
+export function resetFonts({ root = document.documentElement, themeElement = document.querySelector<HTMLElement>('.radix-themes') }: { root?: HTMLElement; themeElement?: HTMLElement | null } = {}): void {
+  clear(root, FONT_STACK_VARIABLES);
+  if (themeElement) clear(themeElement, FONT_ROLE_VARIABLES);
 }
 
-/**
- * Get current font configuration from CSS variables
- */
-export function getCurrentFontConfig(target: HTMLElement = document.documentElement): FontConfig {
-  const computedStyle = getComputedStyle(target);
+/** Read the stacks and roles currently in effect. */
+export function getCurrentFontConfig({ themeElement = document.querySelector<HTMLElement>('.radix-themes') }: { themeElement?: HTMLElement | null } = {}): Required<FontConfig> {
+  // Roles resolve against the theme element, so read both tiers from it — it inherits
+  // the stacks from `:root` and is the only place the roles are declared.
+  const computed = getComputedStyle(themeElement ?? document.documentElement);
+  const read = (variable: string) => computed.getPropertyValue(variable).trim() || undefined;
 
   return {
-    sans: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.sans).trim() || undefined,
-    mono: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.mono).trim() || undefined,
-    serif: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.serif).trim() || undefined,
-    inter: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.inter).trim() || undefined,
-    jetbrainsMono: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.jetbrainsMono).trim() || undefined,
-    playfairDisplay: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.playfairDisplay).trim() || undefined,
+    stacks: {
+      sans: read(FONT_STACK_VARIABLES.sans),
+      mono: read(FONT_STACK_VARIABLES.mono),
+      serif: read(FONT_STACK_VARIABLES.serif),
+    },
+    roles: {
+      body: read(FONT_ROLE_VARIABLES.body),
+      heading: read(FONT_ROLE_VARIABLES.heading),
+      code: read(FONT_ROLE_VARIABLES.code),
+      strong: read(FONT_ROLE_VARIABLES.strong),
+      em: read(FONT_ROLE_VARIABLES.em),
+      quote: read(FONT_ROLE_VARIABLES.quote),
+    },
   };
 }

package/src/styles/fonts.css

@@ -1,35 +1,30 @@
-/* Inter, JetBrains Mono, and Playfair Display from Google Fonts */
+/***************************************************************************************************
+ *                                                                                                 *
+ * KOOKIE UI WEBFONTS — OPT-IN                                                                     *
+ *                                                                                                 *
+ * Kookie UI's core stylesheet ships no webfonts; it defaults to system stacks so that importing   *
+ * the library costs zero network requests. Import this file alongside it to get Kookie's own      *
+ * typefaces:                                                                                      *
+ *                                                                                                 *
+ *   import '@womp/kookie-ui/styles.css';                                                          *
+ *   import '@womp/kookie-ui/fonts.css';                                                           *
+ *                                                                                                 *
+ * This costs three render-blocking requests to Google Fonts. If you already load fonts yourself   *
+ * (`next/font`, a self-hosted @font-face, a CDN), skip this file and point the stacks at your     *
+ * own faces instead:                                                                              *
+ *                                                                                                 *
+ *   :root {                                                                                       *
+ *     --font-sans: var(--my-next-font), system-ui, sans-serif;                                    *
+ *   }                                                                                             *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
 
-/* Font Variables - Customize these to change fonts throughout your app */
 :root {
-  /* Base font definitions - these are the actual font stacks */
-  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --font-jetbrains-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
-  --font-playfair-display: 'Playfair Display', 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif;
-
-  /* Theme font family overrides - change these to customize fonts globally */
-  --font-sans: var(--font-inter); /* Override this for custom sans-serif */
-  --font-mono: var(--font-jetbrains-mono); /* Override this for custom monospace */
-  --font-serif: var(--font-playfair-display); /* Override this for custom serif */
-
-  /* Force proper font weight rendering */
-  font-synthesis: none; /* Prevent browser from synthesizing weights */
-}
-
-/* Radix Themes font weight enforcement */
-.radix-themes {
-  font-synthesis: none;
-  font-family: var(--default-font-family);
-}
-
-/* System font fallback for critical loading scenarios */
-@font-face {
-  font-family: 'System Fallback';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: block;
-  src: local('-apple-system'), local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto');
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --font-mono: 'JetBrains Mono', 'Menlo', 'Consolas (Custom)', 'Liberation Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --font-serif: 'Playfair Display', 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif;
 }

package/src/styles/index.css

@@ -1,4 +1,3 @@
-@import './fonts.css';
 @import './tokens/index.css';
 @import './breakpoints.css';
 @import './scrollbar.css';

package/src/styles/tokens/base.css

@@ -4,6 +4,7 @@
 @import './radius.css';
 @import './shadow.css';
 @import './transition.css';
+@import './font-family.css';
 @import './typography.css';
 @import './blur.css';
 @import './opacity.css';