@adea-ai/ui 0.105.0 → 0.106.0

package/src/components/theme/theme-provider.tsx

@@ -8,7 +8,15 @@ import {
   splitProps,
   useContext,
 } from 'solid-js'
-import { accentPresets, fontOptions } from '#lib/tokens'
+import { accentPresets } from '#lib/tokens'
+import { safeScriptStringLiteral } from '#lib/safe-script'
+import {
+  applyAppearanceFontSettings,
+  DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS,
+  fontSettingsBootstrapScript,
+  normalizeAppearanceEditorFontSettings,
+  type AppearanceEditorFontSettings,
+} from '#lib/appearance-font-settings'
 import type { AccentPreset } from '@adea-ai/themes'
 import {
   accentVariables,
@@ -39,7 +47,7 @@ import {
  *   - **an accent** — adea's six presets, or one of the accents the selected theme
  *     pair carries itself (`ansi-blue`…), which re-colour the interactive roles on
  *     top of whichever theme is active.
- *   - **a font** — the interface face.
+ *   - **fonts** — separate family and size choices for UI, content and code.
  *
  * Four axes rather than one list of presets, because they compose: a user who wants
  * Nord with a violet accent and the system font should not need someone to author
@@ -67,8 +75,10 @@ export type ThemeSelection = {
    * not offer falls back to the variant's own primary.
    */
   accent: string
-  /** A `fontOptions` id, or `space-grotesk` for the default. */
+  /** UI-family alias for consumers of the original single-font preference. */
   font: string
+  /** UI, content and code font settings. Omitted legacy records are migrated from `font`. */
+  fonts?: AppearanceEditorFontSettings
   /**
    * `comfortable` is the system's default geometry; `compact` moves the control
    * ladder down one rung.
@@ -84,7 +94,8 @@ export const defaultThemeSelection: ThemeSelection = {
   lightThemeId: defaultLightThemeId,
   darkThemeId: defaultDarkThemeId,
   accent: 'theme',
-  font: 'space-grotesk',
+  font: 'system',
+  fonts: DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS,
   density: 'comfortable',
 }
 
@@ -153,6 +164,7 @@ function readSelection(storageKey: string): ThemeSelection {
     const raw = preferenceStore()?.getItem(storageKey)
     if (!raw) return defaultThemeSelection
     const parsed = JSON.parse(raw) as Partial<ThemeSelection>
+    const fonts = normalizeAppearanceEditorFontSettings(parsed.fonts, parsed.font).settings
     return {
       appearance:
         parsed.appearance === 'light' ||
@@ -179,9 +191,8 @@ function readSelection(storageKey: string): ThemeSelection {
           isThemeAccentId(parsed.accent))
           ? parsed.accent
           : defaultThemeSelection.accent,
-      font: fontOptions.some((option) => option.id === parsed.font)
-        ? (parsed.font as string)
-        : defaultThemeSelection.font,
+      font: fonts.ui.family,
+      fonts,
       // Every axis has to be read back here, or it is lost twice: the effect below
       // removes the `data-density` that `themeScript` set for the first paint, and
       // the next `setSelection` rewrites the store without it.
@@ -192,6 +203,26 @@ function readSelection(storageKey: string): ThemeSelection {
   }
 }
 
+/** Keep the deprecated single-font view synchronized with the UI axis. */
+function mergeThemeSelection(base: ThemeSelection, patch: Partial<ThemeSelection>): ThemeSelection {
+  const merged = { ...base, ...patch }
+  let fonts: AppearanceEditorFontSettings
+
+  if (patch.fonts !== undefined) {
+    fonts = normalizeAppearanceEditorFontSettings(patch.fonts).settings
+  } else if (patch.font !== undefined) {
+    const currentFonts = normalizeAppearanceEditorFontSettings(base.fonts, base.font).settings
+    fonts = normalizeAppearanceEditorFontSettings({
+      ...currentFonts,
+      ui: { ...currentFonts.ui, family: patch.font },
+    }).settings
+  } else {
+    fonts = normalizeAppearanceEditorFontSettings(merged.fonts, merged.font).settings
+  }
+
+  return { ...merged, fonts, font: fonts.ui.family }
+}
+
 export type ThemeProviderProps = {
   children?: JSX.Element
   /** Where the preference is persisted. Distinct per application. */
@@ -217,10 +248,9 @@ export function ThemeProvider(props: ThemeProviderProps) {
   const [local] = splitProps(props, ['children', 'storageKey', 'initial', 'selection'])
   const storageKey = () => local.storageKey ?? 'adea-appearance'
 
-  const [selection, setSelectionState] = createSignal<ThemeSelection>({
-    ...readSelection(storageKey()),
-    ...local.initial,
-  })
+  const [selection, setSelectionState] = createSignal<ThemeSelection>(
+    mergeThemeSelection(readSelection(storageKey()), local.initial ?? {})
+  )
 
   // The controlled half of the contract. A patch from the owner replaces the
   // matching axes; the stored preference is untouched, since the owner is the one
@@ -228,7 +258,7 @@ export function ThemeProvider(props: ThemeProviderProps) {
   // value — is what keeps this subscribed for the provider's lifetime.
   createEffect(() => {
     const incoming = local.selection
-    if (incoming) setSelectionState((current) => ({ ...current, ...incoming }))
+    if (incoming) setSelectionState((current) => mergeThemeSelection(current, incoming))
   })
 
   const [systemAppearance, setSystemAppearance] = createSignal<ThemeAppearance>('light')
@@ -284,8 +314,10 @@ export function ThemeProvider(props: ThemeProviderProps) {
     if (!accent) root.removeAttribute('data-accent')
     else root.dataset['accent'] = selection().accent
 
-    if (selection().font === 'space-grotesk') root.removeAttribute('data-font')
-    else root.dataset['font'] = selection().font
+    applyAppearanceFontSettings(
+      root,
+      normalizeAppearanceEditorFontSettings(selection().fonts, selection().font).settings
+    )
 
     // Density is a pure token shift, so unlike the colour axes there is nothing to
     // compute: the attribute selects a block in `theme.css`. It is applied here for
@@ -306,7 +338,7 @@ export function ThemeProvider(props: ThemeProviderProps) {
     themes: builtinThemes,
     themeAccents,
     setSelection(patch) {
-      const next = { ...selection(), ...patch }
+      const next = mergeThemeSelection(selection(), patch)
       setSelectionState(next)
       try {
         preferenceStore()?.setItem(storageKey(), JSON.stringify(next))
@@ -339,10 +371,7 @@ export function ThemeProvider(props: ThemeProviderProps) {
  * was found; `tests/theme-script.test.ts` pins it so it cannot come back.
  */
 export function inlineScriptLiteral(value: string): string {
-  return JSON.stringify(value).replace(
-    /[<>\u2028\u2029]/g,
-    (character) => `\\u${character.charCodeAt(0).toString(16).padStart(4, '0')}`
-  )
+  return safeScriptStringLiteral(value)
 }
 
 /**
@@ -365,5 +394,6 @@ export function inlineScriptLiteral(value: string): string {
  * documented there.
  */
 export function themeScript(storageKey = 'adea-appearance'): string {
-  return `(function(){try{var s=localStorage.getItem(${inlineScriptLiteral(storageKey)});var p=s?JSON.parse(s):{};var a=p.appearance||'system';var d=a==='dark'||(a==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);var r=document.documentElement;if(d)r.classList.add('dark');r.style.colorScheme=d?'dark':'light';if(p.accent&&p.accent!=='theme')r.dataset.accent=p.accent;if(p.font&&p.font!=='space-grotesk')r.dataset.font=p.font;if(p.density==='compact')r.dataset.density='compact';}catch(e){}})();`
+  const script = `(function(){try{var s=localStorage.getItem(${inlineScriptLiteral(storageKey)});var p=s?JSON.parse(s):{};var a=p.appearance||'system';var d=a==='dark'||(a==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);var r=document.documentElement;if(d)r.classList.add('dark');r.style.colorScheme=d?'dark':'light';if(p.accent&&p.accent!=='theme')r.dataset.accent=p.accent;if(p.density==='compact')r.dataset.density='compact';}catch(e){}})();`
+  return `${script}${fontSettingsBootstrapScript(storageKey)}`
 }

package/src/components/ui/code-block/code-block.tsx

@@ -156,7 +156,7 @@ export function CodeBlock(props: CodeBlockProps) {
       }}
     >
       <div class="flex items-center justify-between gap-2 px-3 py-1">
-        <span class="truncate font-mono text-xs text-muted-foreground">{label()}</span>
+        <span class="truncate font-code text-code text-muted-foreground">{label()}</span>
         <Actions />
       </div>
       <div
@@ -170,7 +170,7 @@ export function CodeBlock(props: CodeBlockProps) {
           when={local.highlight}
           fallback={
             <pre class="m-0 px-3 py-2" style={{ 'line-height': local.lineHeight ?? '1.5' }}>
-              <code class="font-mono text-xs">
+              <code class="font-code text-code">
                 <Show when={local.showLineNumbers} fallback={local.code.replace(/\n$/, '')}>
                   <For each={lines()}>
                     {(line, index) => (
@@ -217,9 +217,9 @@ export function CodeBlock(props: CodeBlockProps) {
  * InlineCode.
  *
  * The `code` inside a sentence. It is a component rather than a class because it
- * has to hold three properties at once: it must not break the line's rhythm
- * (`font-size: 0.9em`, so it tracks the surrounding text), it must wrap rather
- * than overflow a narrow column (`overflow-wrap: anywhere` — an identifier with
+ * has to hold three properties at once: it uses the shared code family and size
+ * preference, and it wraps rather than overflows a narrow column
+ * (`overflow-wrap: anywhere` — an identifier with
  * no spaces is one long token), and it must be legible against whatever surface
  * it lands on, which is why the fill is a token and not a fixed grey.
  */
@@ -229,7 +229,7 @@ export function InlineCode(props: ComponentProps<'code'>) {
   return (
     <code
       class={cn(
-        'rounded-sm bg-muted px-[0.4em] py-[0.15em] font-mono text-[0.9em] text-foreground [overflow-wrap:anywhere]',
+        'rounded-sm bg-muted px-[0.4em] py-[0.15em] font-code text-code text-foreground [overflow-wrap:anywhere]',
         local.class
       )}
       {...rest}

package/src/components/ui/command/command.tsx

@@ -274,7 +274,7 @@ export function CommandShortcut(props: {
   return (
     <span
       class={cn(
-        'text-muted-foreground ms-auto font-mono text-2xs tracking-widest group-data-[selected=true]/command-item:text-foreground',
+        'text-muted-foreground ms-auto font-code text-code tracking-widest group-data-[selected=true]/command-item:text-foreground',
         props.class
       )}
     >

package/src/components/ui/context-menu/context-menu.tsx

@@ -90,7 +90,7 @@ export function ContextMenuItem(
       {local.shortcut ? (
         <span
           aria-hidden="true"
-          class="text-muted-foreground ms-auto font-mono text-2xs tracking-widest"
+          class="text-muted-foreground ms-auto font-code text-code tracking-widest"
         >
           {local.shortcut}
         </span>

package/src/components/ui/diff-block/diff-block.tsx

@@ -152,7 +152,7 @@ export function diffTargetPath(patch: string): string | null {
   return null
 }
 
-export const diffLineVariants = cva('flex items-baseline font-mono text-xs', {
+export const diffLineVariants = cva('flex items-baseline font-code text-code', {
   variants: {
     kind: {
       add: 'bg-success-subtle text-foreground',
@@ -201,10 +201,10 @@ export function DiffBlock(props: DiffBlockProps) {
     >
       <div class="flex items-center justify-between gap-2 border-b border-border px-3 py-1">
         <span class="flex min-w-0 items-baseline gap-2">
-          <span class="truncate font-mono text-xs text-foreground">{name()}</span>
+          <span class="truncate font-code text-code text-foreground">{name()}</span>
           {/* The counts are text, so the summary survives greyscale and a reader
               who cannot separate the two line tones still gets the shape of it. */}
-          <span class="shrink-0 font-mono text-2xs text-muted-foreground">
+          <span class="shrink-0 font-code text-code text-muted-foreground">
             <span class="text-foreground">+{stats().added}</span>{' '}
             <span class="text-foreground">−{stats().removed}</span>
           </span>
@@ -223,13 +223,13 @@ export function DiffBlock(props: DiffBlockProps) {
               <div class={diffLineVariants({ kind: line.kind })}>
                 <Show when={numbered(line, local.showLineNumbers)}>
                   <span
-                    class="w-10 shrink-0 pr-2 text-right text-2xs text-muted-foreground tabular-nums select-none"
+                    class="w-10 shrink-0 pr-2 text-right text-code text-muted-foreground tabular-nums select-none"
                     aria-hidden="true"
                   >
                     {line.oldLine ?? ''}
                   </span>
                   <span
-                    class="w-10 shrink-0 pr-2 text-right text-2xs text-muted-foreground tabular-nums select-none"
+                    class="w-10 shrink-0 pr-2 text-right text-code text-muted-foreground tabular-nums select-none"
                     aria-hidden="true"
                   >
                     {line.newLine ?? ''}
@@ -271,13 +271,13 @@ export function DiffSummary(props: { patch: string; class?: string; onSelect?: (
     <button
       type="button"
       class={cn(
-        'flex w-full items-baseline justify-between gap-3 rounded-md px-2 py-1 text-left font-mono text-xs hover:bg-muted',
+        'flex w-full items-baseline justify-between gap-3 rounded-md px-2 py-1 text-left font-code text-code hover:bg-muted',
         props.class
       )}
       onClick={() => props.onSelect?.()}
     >
       <span class="truncate text-foreground">{name()}</span>
-      <span class="shrink-0 text-2xs">
+      <span class="shrink-0 text-code">
         <span class="text-foreground">+{stats().added}</span>{' '}
         <span class="text-foreground">−{stats().removed}</span>
       </span>

package/src/components/ui/dropdown-menu/dropdown-menu.tsx

@@ -1,7 +1,7 @@
 import { DropdownMenu as KobalteDropdownMenu } from '@kobalte/core/dropdown-menu'
 import { Check, ChevronRight, Circle } from 'lucide-solid'
-import type { ComponentProps } from 'solid-js'
-import { splitProps } from 'solid-js'
+import type { Accessor, ComponentProps } from 'solid-js'
+import { createContext, splitProps, useContext } from 'solid-js'
 import {
   menuContentPadding,
   destructiveMenuItem,
@@ -14,6 +14,18 @@ import {
 } from '#lib/overlay'
 import { cn } from '#lib/utils'
 
+type MenuOrientation = 'horizontal' | 'vertical'
+const DropdownMenuOrientationContext = createContext<Accessor<MenuOrientation | undefined>>()
+type HandlerEvent<Handler> = Handler extends (...args: infer Arguments) => void
+  ? Arguments[0]
+  : never
+type DropdownMenuTriggerKeyEvent = HandlerEvent<
+  NonNullable<ComponentProps<typeof KobalteDropdownMenu.Trigger>['onKeyDown']>
+>
+type DropdownMenuTriggerPointerEvent = HandlerEvent<
+  NonNullable<ComponentProps<typeof KobalteDropdownMenu.Trigger>['onPointerDown']>
+>
+
 /**
  * DropdownMenu.
  *
@@ -34,12 +46,138 @@ import { cn } from '#lib/utils'
  * with an AlertDialog is the caller's job.
  */
 export function DropdownMenu(props: ComponentProps<typeof KobalteDropdownMenu>) {
-  const [local, rest] = splitProps(props, ['modal'])
-  return <KobalteDropdownMenu modal={local.modal ?? false} {...rest} />
+  const [local, rest] = splitProps(props, ['modal', 'orientation'])
+  const orientation = () => local.orientation
+  return (
+    <DropdownMenuOrientationContext.Provider value={orientation}>
+      <KobalteDropdownMenu modal={local.modal ?? false} orientation={local.orientation} {...rest} />
+    </DropdownMenuOrientationContext.Provider>
+  )
+}
+
+const SCROLLABLE_OVERFLOW = /(auto|scroll)/
+const OVERFLOW_PROPERTIES = ['overflow', 'overflow-x', 'overflow-y'] as const
+
+type OverflowProperty = (typeof OVERFLOW_PROPERTIES)[number]
+type OverflowDeclaration = Readonly<{
+  property: OverflowProperty
+  value: string
+  priority: string
+}>
+
+function readInlineOverflow(element: HTMLElement): OverflowDeclaration[] {
+  return OVERFLOW_PROPERTIES.map((property) => ({
+    property,
+    value: element.style.getPropertyValue(property),
+    priority: element.style.getPropertyPriority(property),
+  }))
+}
+
+function declarationsMatch(element: HTMLElement, declarations: OverflowDeclaration[]) {
+  return declarations.every(
+    ({ property, value, priority }) =>
+      element.style.getPropertyValue(property) === value &&
+      element.style.getPropertyPriority(property) === priority
+  )
+}
+
+function bypassUnboundedScrollLookup(trigger: HTMLElement) {
+  const scrollRoot = document.scrollingElement ?? document.documentElement
+  if (window.getComputedStyle(scrollRoot).overflow !== 'hidden') return
+
+  const temporaryStyles: Array<{
+    element: HTMLElement
+    original: OverflowDeclaration[]
+    applied: OverflowDeclaration[]
+  }> = []
+
+  for (let element: HTMLElement | null = trigger; element;) {
+    const parent: HTMLElement | null = element.parentElement
+    if (element !== scrollRoot) {
+      const computed = window.getComputedStyle(element)
+      const overflow = `${computed.overflow} ${computed.overflowX} ${computed.overflowY}`
+      if (SCROLLABLE_OVERFLOW.test(overflow)) {
+        const original = readInlineOverflow(element)
+        element.style.setProperty('overflow', 'clip', 'important')
+        temporaryStyles.push({ element, original, applied: readInlineOverflow(element) })
+      }
+    }
+    element = parent
+  }
+
+  if (temporaryStyles.length === 0) return
+
+  // Kobalte's keyboard path synchronously walks scroll parents before it opens
+  // the menu. Clipping only non-root scroll ancestors makes that walk stop at
+  // the locked viewport. Restore those declarations once the event handler
+  // finishes, and leave any newer owner write untouched.
+  queueMicrotask(() => {
+    for (const { element, original, applied } of temporaryStyles) {
+      if (!element.isConnected || !declarationsMatch(element, applied)) continue
+      for (const property of OVERFLOW_PROPERTIES) element.style.removeProperty(property)
+      for (const { property, value, priority } of original) {
+        if (value) element.style.setProperty(property, value, priority)
+      }
+    }
+  })
 }
 
 export function DropdownMenuTrigger(props: ComponentProps<typeof KobalteDropdownMenu.Trigger>) {
-  return <KobalteDropdownMenu.Trigger {...props} />
+  const inheritedOrientation = useContext(DropdownMenuOrientationContext)
+  const [local, rest] = splitProps(props, ['disabled', 'onKeyDown', 'onPointerDown'])
+  const onPointerDown = (event: DropdownMenuTriggerPointerEvent) => {
+    if (typeof local.onPointerDown === 'function') local.onPointerDown(event)
+    else if (local.onPointerDown) local.onPointerDown[0](local.onPointerDown[1], event)
+
+    // WebKit can leave focus on a previous control when a native button gets
+    // a pointer click. Focus the trigger before Kobalte opens the menu so an
+    // enclosing modal focus scope does not restore focus and dismiss the menu.
+    if (
+      local.disabled ||
+      event.defaultPrevented ||
+      !event.isPrimary ||
+      event.button !== 0 ||
+      event.altKey ||
+      event.ctrlKey ||
+      event.metaKey ||
+      event.shiftKey
+    ) {
+      return
+    }
+    const trigger = event.currentTarget
+    const isNativeLink = trigger instanceof HTMLAnchorElement && trigger.hasAttribute('href')
+    if (trigger instanceof HTMLElement && !isNativeLink) {
+      trigger.focus({ preventScroll: true })
+    }
+  }
+  const onKeyDown = (event: DropdownMenuTriggerKeyEvent) => {
+    // Kobalte's MenuTrigger does not consult defaultPrevented before its own
+    // open-key handling. Preserve its existing callback behavior; this wrapper
+    // only makes the pre-open scroll-parent lookup terminate.
+    if (typeof local.onKeyDown === 'function') local.onKeyDown(event)
+    else if (local.onKeyDown) local.onKeyDown[0](local.onKeyDown[1], event)
+
+    if (local.disabled) return
+    const trigger = event.currentTarget
+    if (!(trigger instanceof HTMLElement)) return
+    const menubarOrientation = trigger.closest('[role="menubar"]')?.getAttribute('aria-orientation')
+    const orientation =
+      inheritedOrientation?.() ?? (menubarOrientation === 'vertical' ? 'vertical' : 'horizontal')
+    const openingArrow = orientation === 'horizontal' ? 'ArrowDown' : 'ArrowRight'
+    if (!['Enter', ' ', openingArrow].includes(event.key)) return
+    const isNativeLink = trigger instanceof HTMLAnchorElement && trigger.hasAttribute('href')
+    if (isNativeLink && (event.key === 'Enter' || event.key === ' ')) return
+    bypassUnboundedScrollLookup(trigger)
+  }
+
+  return (
+    <KobalteDropdownMenu.Trigger
+      {...rest}
+      disabled={local.disabled}
+      onPointerDown={onPointerDown}
+      onKeyDown={onKeyDown}
+    />
+  )
 }
 
 export function DropdownMenuPortal(props: ComponentProps<typeof KobalteDropdownMenu.Portal>) {
@@ -113,7 +251,7 @@ export function DropdownMenuItem(
       {local.shortcut ? (
         <span
           aria-hidden="true"
-          class="text-muted-foreground ms-auto font-mono text-2xs tracking-widest"
+          class="text-muted-foreground ms-auto font-code text-code tracking-widest"
         >
           {local.shortcut}
         </span>
@@ -139,7 +277,7 @@ export function DropdownMenuShortcut(props: ComponentProps<'span'>) {
     <span
       data-slot="dropdown-menu-shortcut"
       aria-hidden="true"
-      class={cn('text-muted-foreground ms-auto font-mono text-2xs tracking-widest', local.class)}
+      class={cn('text-muted-foreground ms-auto font-code text-code tracking-widest', local.class)}
       {...rest}
     />
   )

package/src/components/ui/kbd/kbd.tsx

@@ -20,7 +20,7 @@ import { cn } from '#lib/utils'
  * needs a gap between them that is a layout concern, not punctuation.
  */
 export const kbdVariants = cva(
-  'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm border border-border px-1 font-mono text-2xs font-medium select-none',
+  'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm border border-border px-1 font-code text-code font-medium select-none',
   {
     variants: {
       size: {

package/src/components/ui/menubar/menubar.tsx

@@ -123,7 +123,7 @@ export function MenubarItem(
       {local.shortcut ? (
         <span
           aria-hidden="true"
-          class="text-muted-foreground ms-auto font-mono text-2xs tracking-widest"
+          class="text-muted-foreground ms-auto font-code text-code tracking-widest"
         >
           {local.shortcut}
         </span>

package/src/components/ui/typography/typography.tsx

@@ -119,11 +119,9 @@ export function Heading<T extends ValidComponent = 'h2'>(props: HeadingProps<T>)
 /**
  * Text.
  *
- * Everything that is not a heading. `text-sm` is the interface default, not 16px,
- * and it carries three weights by role: 400 for body copy, 500 for a label or
- * control text, 600 for emphasis. Below it, `caption` (12px) is metadata and
- * `micro` (11px, 500) is the floor — keyboard keys and the status bar. `code` is
- * the mono face at 12px, for anything a user compares character by character.
+ * Everything that is not a heading. Body and strong copy use the content font
+ * axis; labels, captions and microcopy inherit the UI face. Code uses its own
+ * family and size axis for anything a user compares character by character.
  *
  * `tone` is a separate axis from `variant` because "secondary" is a colour
  * decision, not a size: a muted caption and a muted body line are both common.
@@ -136,17 +134,17 @@ export const textVariants = cva('', {
   variants: {
     variant: {
       /** 14px / 400. Body copy and descriptions. */
-      body: 'text-sm',
+      body: 'font-content text-content',
       /** 14px / 500. Labels, control text, list-row titles. */
       label: 'text-sm font-medium',
       /** 14px / 600. Emphasis inside body copy. */
-      strong: 'text-sm font-semibold',
+      strong: 'font-content text-content font-semibold',
       /** 12px / 400. Metadata, secondary rows, units. */
       caption: 'text-xs',
       /** 11px / 500. The floor: keyboard keys, the status bar. */
       micro: 'text-2xs font-medium',
       /** 12px mono. Ids, paths, hashes, inline code. */
-      code: 'font-mono text-xs',
+      code: 'font-code text-code',
     },
     tone: {
       inherit: '',