feat: customizable heading font via theme settings (#121)

Lum1104 · web-flow · commit 5a2ffb1e0f07 · 2026-05-08T22:20:47.000+08:00
Add a `headingFont` option to ThemeConfig that lets users switch heading typography between Serif (default), Sans, and Mono via the existing Theme Picker UI. - New `--font-heading` CSS custom property (defaults to `--font-serif`) - Theme engine applies the selected font on config change - ThemePicker gets a "Heading Font" toggle section - All 15 component files updated from `font-serif` to `font-heading` - Selection persists in localStorage alongside other theme settings - Backwards-compatible: existing configs without `headingFont` default to serif Closes #120
diff --git a/understand-anything-plugin/packages/dashboard/src/App.tsx b/understand-anything-plugin/packages/dashboard/src/App.tsx
@@ -401,7 +401,7 @@ function Dashboard({ accessToken }: { accessToken: string }) {
       <header className="flex items-center px-3 sm:px-5 py-3 bg-surface border-b border-border-subtle shrink-0 gap-2 sm:gap-4">
         {/* Left — fixed */}
         <div className="flex items-center gap-3 sm:gap-5 shrink-0 min-w-0">
-          <h1 className="font-serif text-base sm:text-lg text-text-primary tracking-wide truncate max-w-[160px] sm:max-w-[220px] lg:max-w-none">
+          <h1 className="font-heading text-base sm:text-lg text-text-primary tracking-wide truncate max-w-[160px] sm:max-w-[220px] lg:max-w-none">
             {graph?.project.name ?? "Understand Anything"}
           </h1>
           <div className="w-px h-5 bg-border-subtle hidden sm:block" />
diff --git a/understand-anything-plugin/packages/dashboard/src/components/CodeViewer.tsx b/understand-anything-plugin/packages/dashboard/src/components/CodeViewer.tsx
@@ -155,7 +155,7 @@ export default function CodeViewer({
             </span>
             <span className="text-[10px] text-text-muted">{lineInfo}</span>
           </div>
-          <div className="text-sm font-serif text-text-primary truncate" title={node.name}>
+          <div className="text-sm font-heading text-text-primary truncate" title={node.name}>
             {node.name}
           </div>
           {node.filePath && (
diff --git a/understand-anything-plugin/packages/dashboard/src/components/ContainerNode.tsx b/understand-anything-plugin/packages/dashboard/src/components/ContainerNode.tsx
@@ -59,7 +59,7 @@ function ContainerNodeComponent({ data, width, height }: NodeProps<ContainerFlow
       }}
     >
       <div
-        className="flex items-center justify-between font-serif"
+        className="flex items-center justify-between font-heading"
         style={{
           padding: "12px 16px",
           color: color.label,
diff --git a/understand-anything-plugin/packages/dashboard/src/components/CustomNode.tsx b/understand-anything-plugin/packages/dashboard/src/components/CustomNode.tsx
@@ -156,7 +156,7 @@ function CustomNodeComponent({
           </span>
         </div>
 
-        <div className="text-sm font-serif text-text-primary truncate" title={data.label}>
+        <div className="text-sm font-heading text-text-primary truncate" title={data.label}>
           {truncatedName}
         </div>
 
diff --git a/understand-anything-plugin/packages/dashboard/src/components/DomainClusterNode.tsx b/understand-anything-plugin/packages/dashboard/src/components/DomainClusterNode.tsx
@@ -33,7 +33,7 @@ function DomainClusterNode({ data }: NodeProps<DomainClusterFlowNode>) {
       <Handle type="target" position={Position.Left} className="!bg-accent/60 !w-2 !h-2" />
       <Handle type="source" position={Position.Right} className="!bg-accent/60 !w-2 !h-2" />
 
-      <div className="font-serif text-sm text-accent font-semibold mb-1 truncate">
+      <div className="font-heading text-sm text-accent font-semibold mb-1 truncate">
         {data.label}
       </div>
       <div className="text-[11px] text-text-secondary line-clamp-2 mb-2">
diff --git a/understand-anything-plugin/packages/dashboard/src/components/KeyboardShortcutsHelp.tsx b/understand-anything-plugin/packages/dashboard/src/components/KeyboardShortcutsHelp.tsx
@@ -31,7 +31,7 @@ export default function KeyboardShortcutsHelp({
         {/* Header */}
         <div className="sticky top-0 glass-heavy border-b border-border-subtle px-6 py-4 flex items-center justify-between">
           <div>
-            <h2 className="text-xl font-serif text-text-primary">
+            <h2 className="text-xl font-heading text-text-primary">
               Keyboard Shortcuts
             </h2>
             <p className="text-xs text-text-muted mt-1">
diff --git a/understand-anything-plugin/packages/dashboard/src/components/LayerClusterNode.tsx b/understand-anything-plugin/packages/dashboard/src/components/LayerClusterNode.tsx
@@ -72,7 +72,7 @@ function LayerClusterNode({
         </div>
 
         {/* Layer name */}
-        <div className="text-lg font-serif text-text-primary mb-1">
+        <div className="text-lg font-heading text-text-primary mb-1">
           {data.layerName}
         </div>
 
diff --git a/understand-anything-plugin/packages/dashboard/src/components/LearnPanel.tsx b/understand-anything-plugin/packages/dashboard/src/components/LearnPanel.tsx
@@ -39,7 +39,7 @@ export default function LearnPanel() {
     return (
       <div className="h-full w-full overflow-auto p-5">
         <div className="mb-4">
-          <h2 className="text-lg font-serif text-text-primary mb-1">Project Tour</h2>
+          <h2 className="text-lg font-heading text-text-primary mb-1">Project Tour</h2>
           <p className="text-xs text-text-muted">
             {tourSteps.length} steps &middot; Guided walkthrough of the codebase
           </p>
@@ -112,7 +112,7 @@ export default function LearnPanel() {
       {/* Scrollable content */}
       <div className="flex-1 overflow-y-auto p-4 min-h-0">
         {/* Step title */}
-        <h2 className="text-lg font-serif text-text-primary mb-3">{step.title}</h2>
+        <h2 className="text-lg font-heading text-text-primary mb-3">{step.title}</h2>
 
         {/* Description via ReactMarkdown */}
         <div className="text-sm text-text-secondary leading-relaxed mb-4 tour-markdown">
diff --git a/understand-anything-plugin/packages/dashboard/src/components/MobileDrawer.tsx b/understand-anything-plugin/packages/dashboard/src/components/MobileDrawer.tsx
@@ -107,7 +107,7 @@ export default function MobileDrawer({
             <span className="text-[10px] font-semibold uppercase tracking-[0.2em] text-accent">
               Controls
             </span>
-            <h2 className="font-serif text-lg text-text-primary mt-0.5 leading-none">
+            <h2 className="font-heading text-lg text-text-primary mt-0.5 leading-none">
               {graph?.project.name ?? "Dashboard"}
             </h2>
           </div>
diff --git a/understand-anything-plugin/packages/dashboard/src/components/MobileLayout.tsx b/understand-anything-plugin/packages/dashboard/src/components/MobileLayout.tsx
@@ -95,7 +95,7 @@ export default function MobileLayout({
           </svg>
         </button>
 
-        <h1 className="font-serif text-base flex-1 min-w-0 truncate text-center text-text-primary tracking-wide">
+        <h1 className="font-heading text-base flex-1 min-w-0 truncate text-center text-text-primary tracking-wide">
           {graph?.project.name ?? "Understand Anything"}
         </h1>
 
diff --git a/understand-anything-plugin/packages/dashboard/src/components/NodeInfo.tsx b/understand-anything-plugin/packages/dashboard/src/components/NodeInfo.tsx
@@ -410,7 +410,7 @@ export default function NodeInfo() {
       </div>
 
       <div className="flex items-center justify-between mb-2">
-        <h2 className="text-lg font-serif text-text-primary">{node.name}</h2>
+        <h2 className="text-lg font-heading text-text-primary">{node.name}</h2>
         <button
           onClick={() => setFocusNode(focusNodeId === node.id ? null : node.id)}
           className={`text-[10px] font-semibold uppercase tracking-wider px-2.5 py-1 rounded transition-colors ${
diff --git a/understand-anything-plugin/packages/dashboard/src/components/NodeTooltip.tsx b/understand-anything-plugin/packages/dashboard/src/components/NodeTooltip.tsx
@@ -69,7 +69,7 @@ export default function NodeTooltip({
         </div>
 
         {/* Name */}
-        <h4 className="text-sm font-serif text-text-primary mb-2 break-words">
+        <h4 className="text-sm font-heading text-text-primary mb-2 break-words">
           {data.label}
         </h4>
 
diff --git a/understand-anything-plugin/packages/dashboard/src/components/PathFinderModal.tsx b/understand-anything-plugin/packages/dashboard/src/components/PathFinderModal.tsx
@@ -124,7 +124,7 @@ export default function PathFinderModal({ isOpen, onClose }: PathFinderModalProp
                 d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
               />
             </svg>
-            <h2 className="font-serif text-xl text-text-primary">Dependency Path Finder</h2>
+            <h2 className="font-heading text-xl text-text-primary">Dependency Path Finder</h2>
           </div>
           <button
             onClick={onClose}
diff --git a/understand-anything-plugin/packages/dashboard/src/components/ProjectOverview.tsx b/understand-anything-plugin/packages/dashboard/src/components/ProjectOverview.tsx
@@ -59,7 +59,7 @@ export default function ProjectOverview() {
   return (
     <div className="h-full w-full overflow-auto p-5 animate-fade-slide-in">
       {/* Project name */}
-      <h2 className="font-serif text-2xl text-text-primary mb-1">{project.name}</h2>
+      <h2 className="font-heading text-2xl text-text-primary mb-1">{project.name}</h2>
       <p className="text-sm text-text-secondary leading-relaxed mb-6">{project.description}</p>
 
       {/* Stats grid */}
diff --git a/understand-anything-plugin/packages/dashboard/src/components/ThemePicker.tsx b/understand-anything-plugin/packages/dashboard/src/components/ThemePicker.tsx
@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTheme, PRESETS } from "../themes/index.ts";
+import type { HeadingFont } from "../themes/index.ts";
 
 export function ThemePicker() {
-  const { config, preset, setPreset, setAccent } = useTheme();
+  const { config, preset, setPreset, setAccent, setHeadingFont } = useTheme();
   const [open, setOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
@@ -136,6 +137,40 @@ export function ThemePicker() {
               ))}
             </div>
           </div>
+
+          {/* Heading font */}
+          <div>
+            <div className="text-[10px] font-semibold text-text-muted uppercase tracking-wider mb-2">
+              Heading Font
+            </div>
+            <div className="flex gap-1">
+              {([
+                { id: "serif" as HeadingFont, label: "Serif", sample: "Aa" },
+                { id: "sans" as HeadingFont, label: "Sans", sample: "Aa" },
+                { id: "mono" as HeadingFont, label: "Mono", sample: "Aa" },
+              ]).map((opt) => (
+                <button
+                  key={opt.id}
+                  onClick={() => setHeadingFont(opt.id)}
+                  className={`flex-1 px-2 py-1.5 rounded text-xs transition-colors ${
+                    (config.headingFont ?? "serif") === opt.id
+                      ? "bg-accent/15 text-accent"
+                      : "text-text-secondary hover:text-text-primary hover:bg-elevated"
+                  }`}
+                  style={{
+                    fontFamily:
+                      opt.id === "serif"
+                        ? "var(--font-serif)"
+                        : opt.id === "mono"
+                          ? "var(--font-mono)"
+                          : "var(--font-sans)",
+                  }}
+                >
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+          </div>
         </div>
       )}
     </div>
diff --git a/understand-anything-plugin/packages/dashboard/src/components/TokenGate.tsx b/understand-anything-plugin/packages/dashboard/src/components/TokenGate.tsx
@@ -39,7 +39,7 @@ export default function TokenGate({ onTokenValid }: TokenGateProps) {
     <div className="h-screen w-screen flex items-center justify-center bg-root noise-overlay">
       <div className="w-full max-w-md px-8 py-10 bg-surface border border-border-subtle rounded-lg shadow-2xl">
         {/* Heading */}
-        <h1 className="font-serif text-2xl text-text-primary tracking-wide text-center mb-2">
+        <h1 className="font-heading text-2xl text-text-primary tracking-wide text-center mb-2">
           Access Token Required
         </h1>
         <p className="text-text-muted text-sm text-center mb-8">
diff --git a/understand-anything-plugin/packages/dashboard/src/index.css b/understand-anything-plugin/packages/dashboard/src/index.css
@@ -80,8 +80,11 @@
   --font-serif: 'DM Serif Display', Georgia, serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
   --font-sans: 'Inter', system-ui, sans-serif;
+  --font-heading: var(--font-serif);
 }
 
+.font-heading { font-family: var(--font-heading); }
+
 /* Base styles */
 html {
   transition: background-color 0.2s ease, color 0.2s ease;
diff --git a/understand-anything-plugin/packages/dashboard/src/themes/ThemeContext.tsx b/understand-anything-plugin/packages/dashboard/src/themes/ThemeContext.tsx
@@ -7,7 +7,7 @@ import {
   useState,
   type ReactNode,
 } from "react";
-import type { PresetId, ThemeConfig, ThemePreset } from "./types.ts";
+import type { HeadingFont, PresetId, ThemeConfig, ThemePreset } from "./types.ts";
 import { DEFAULT_THEME_CONFIG } from "./types.ts";
 import { getPreset } from "./presets.ts";
 import { applyTheme } from "./theme-engine.ts";
@@ -19,6 +19,7 @@ interface ThemeContextValue {
   preset: ThemePreset;
   setPreset: (presetId: PresetId) => void;
   setAccent: (accentId: string) => void;
+  setHeadingFont: (font: HeadingFont) => void;
 }
 
 const ThemeContext = createContext<ThemeContextValue | null>(null);
@@ -85,10 +86,14 @@ export function ThemeProvider({ metaTheme, children }: ThemeProviderProps) {
     setConfig((prev) => ({ ...prev, accentId }));
   }, []);
 
+  const setHeadingFont = useCallback((font: HeadingFont) => {
+    setConfig((prev) => ({ ...prev, headingFont: font }));
+  }, []);
+
   const preset = getPreset(config.presetId);
 
   return (
-    <ThemeContext.Provider value={{ config, preset, setPreset, setAccent }}>
+    <ThemeContext.Provider value={{ config, preset, setPreset, setAccent, setHeadingFont }}>
       {children}
     </ThemeContext.Provider>
   );
diff --git a/understand-anything-plugin/packages/dashboard/src/themes/index.ts b/understand-anything-plugin/packages/dashboard/src/themes/index.ts
@@ -1,5 +1,5 @@
 export { ThemeProvider, useTheme } from "./ThemeContext.tsx";
 export { PRESETS, getPreset, getAccent } from "./presets.ts";
 export { applyTheme } from "./theme-engine.ts";
-export type { PresetId, ThemeConfig, ThemePreset, AccentSwatch } from "./types.ts";
+export type { HeadingFont, PresetId, ThemeConfig, ThemePreset, AccentSwatch } from "./types.ts";
 export { DEFAULT_THEME_CONFIG } from "./types.ts";
diff --git a/understand-anything-plugin/packages/dashboard/src/themes/theme-engine.ts b/understand-anything-plugin/packages/dashboard/src/themes/theme-engine.ts
@@ -53,4 +53,13 @@ export function applyTheme(config: ThemeConfig): void {
 
   // 4. Set data-theme for CSS-only selectors
   document.documentElement.setAttribute("data-theme", preset.isDark ? "dark" : "light");
+
+  // 5. Apply heading font preference
+  const fontMap: Record<string, string> = {
+    serif: "var(--font-serif)",
+    sans: "var(--font-sans)",
+    mono: "var(--font-mono)",
+  };
+  const headingFont = config.headingFont ?? "serif";
+  style.setProperty("--font-heading", fontMap[headingFont] ?? fontMap.serif);
 }
diff --git a/understand-anything-plugin/packages/dashboard/src/themes/types.ts b/understand-anything-plugin/packages/dashboard/src/themes/types.ts
@@ -22,9 +22,12 @@ export interface ThemePreset {
   defaultAccentId: string;
 }
 
+export type HeadingFont = "serif" | "sans" | "mono";
+
 export interface ThemeConfig {
   presetId: PresetId;
   accentId: string;
+  headingFont?: HeadingFont;
 }
 
 export const DEFAULT_THEME_CONFIG: ThemeConfig = {

Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@ function ContainerNodeComponent({ data, width, height }: NodeProps<ContainerFlow`
`59`	`59`	`}}`
`60`	`60`	`>`
`61`	`61`	`<div`
`62`		`- className="flex items-center justify-between font-serif"`
	`62`	`+ className="flex items-center justify-between font-heading"`
`63`	`63`	`style={{`
`64`	`64`	`padding: "12px 16px",`
`65`	`65`	`color: color.label,`