@solidrt/components 0.0.50 → 0.0.51

package/src/spinner.tsx

@@ -24,7 +24,9 @@ const THICKNESS = 3
 export function Spinner(props: SpinnerProps) {
   let size = () => props.size ?? SIZE
   let thickness = () => props.thickness ?? THICKNESS
-  let color = () => props.style?.color ?? theme.color.primary
+  // Theme-level per-component overrides merged under the instance style.
+  let styled = () => ({ ...theme.components.spinner, ...props.style })
+  let color = () => styled().color ?? theme.color.primary
   let speed = () => props.speed ?? 1
 
   // tick is in milliseconds (like performance.now()). The frame loop is mounted
@@ -55,9 +57,9 @@ export function Spinner(props: SpinnerProps) {
       height={size()}
       {...props.layout}
       rotate={angle()}
-      x={props.style?.x}
-      y={props.style?.y}
-      opacity={props.style?.opacity}
+      x={styled().x}
+      y={styled().y}
+      opacity={styled().opacity}
     >
       <Show when={policy.motion !== "none"}>
         <Animate />

package/src/switch.tsx

@@ -2,7 +2,7 @@ import { createSignal, Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { createPress } from "./press"
 import { theme } from "./theme"
-import { densityScale } from "./policy"
+import { densityScale } from "./density"
 import type { StyleProps } from "./types"
 
 export interface SwitchProps {
@@ -43,6 +43,7 @@ export function Switch(props: SwitchProps) {
   let style = () => ({
     backgroundColor: on() ? theme.color.primary : theme.color.surfaceAlt,
     borderRadius: h() / 2,
+    ...theme.components.switch,
     ...props.style,
   })
 

package/src/text-input.tsx

@@ -1,30 +1,9 @@
-import {
-  createEffect,
-  createMemo,
-  createSignal,
-  onCleanup,
-  focusedNode,
-  measureText,
-  setFocus,
-  startTextInput,
-  textInputActive,
-} from "@solidrt/core"
-import { createCaretScroll, createTextBuffer } from "@solidrt/core/text-input"
-import type { Color, Gradient, KeyEvent, LayoutProps, TextInputHints } from "@solidrt/core"
-import { registerNavAction } from "./focus-nav"
+import { untrack } from "@solidrt/core"
+import { createTextBuffer } from "@solidrt/core/text-input"
+import type { LayoutProps, TextInputHints } from "@solidrt/core"
+import { EditorField } from "./editor-field"
 import type { StyleProps } from "./types"
 import { theme } from "./theme"
-import { policy } from "./policy"
-import { space } from "./spacing"
-
-// Caret thickness. Shared so the drawn caret and the scroll offset's reserved
-// edge column cannot drift apart.
-const CARET_WIDTH = 1
-
-// Shaping width handed to the detached value/placeholder text: effectively
-// unbounded, so a single line never wraps. The viewport clips it and scrollX
-// slides it.
-const TEXT_SHAPE_WIDTH = 1e9
 
 export interface TextInputProps {
   value?: string
@@ -38,6 +17,15 @@ export interface TextInputProps {
   maxLength?: number
   disabled?: boolean
   autoFocus?: boolean
+  /**
+   * Multi-line editing: lines wrap at the field's width, Enter inserts a
+   * newline (onSubmit never fires), Up/Down move by line. Without a
+   * `layout.height` the field grows with its content (up to `maxRows` rows,
+   * then scrolls); with one it is a fixed box that scrolls to the caret.
+   */
+  multiline?: boolean
+  /** Multiline without an explicit height: rows to grow to before scrolling. Default unbounded. */
+  maxRows?: number
   /**
    * IME behavior for the field's text sessions (keyboard type,
    * capitalization, autocorrect). Identifier-like fields want
@@ -50,244 +38,44 @@ export interface TextInputProps {
   style?: StyleProps
 }
 
-// Single-line. The caret moves through the text (Left/Right/Home/End), edits
-// happen at the caret, and the inner box scrolls to keep it in view. Printable
-// text arrives via onTextInput (post-IME commit). onKeyDown handles caret
-// movement, Backspace/Delete, Enter/select, Escape - and stops those keys
-// from bubbling further. Focused and editing are distinct (see
-// activateField): navigation focuses, select begins editing, Enter while
-// editing submits. Range selection (shift-movement,
-// highlight, click-to-position) is not wired yet. Outside-click-to-blur is the
-// caller's job.
+// A plain string field over the shared EditorField shell: the buffer is
+// core's createTextBuffer and every line is one d-text of the value's slice.
+// Detached text takes its width from the box it is drawn in; +1 so the ink
+// width rounding never wraps a line's own text.
 export function TextInput(props: TextInputProps) {
-  let [caretOn, setCaretOn] = createSignal(true)
-
-  let node: { id: number } | undefined
-  let viewport: { id: number } | undefined
-  let blinkId: any = null
-
-  // Derived from core's reactive focus (setFocus is the only writer); the
-  // onFocus/onBlur handlers below keep only their side effects (blink timer,
-  // caller callbacks). focusedNode() is read FIRST, unconditionally: the
-  // memo may first compute before the ref has set `node`, and
-  // short-circuiting past the read would leave it dependency-free, frozen
-  // false forever.
-  let focused = createMemo(() => {
-    let id = focusedNode()
-    return id != null && id === node?.id
-  })
-
-  let buffer = createTextBuffer({
-    value: () => props.value,
-    defaultValue: props.defaultValue,
-    onInput: (v) => props.onInput?.(v),
-    maxLength: () => props.maxLength,
-  })
-  let value = buffer.value
-
-  // autoFocus runs in an effect, not the ref: setFocus fires onFocus and reads
-  // the node's onTextInput handler to toggle the keyboard, and those handlers
-  // are only registered after the element's props are applied. The ref can fire
-  // before that, so focusing there would no-op.
-  createEffect(
-    () => props.autoFocus,
-    (autoFocus) => {
-      if (autoFocus && node) setFocus(node.id)
-    },
-  )
-
-  let handlePointerDown = () => {
-    if (props.disabled) return
-    if (node) setFocus(node.id)
-  }
-
-  let handleFocus = () => {
-    setCaretOn(true)
-    if (blinkId == null) {
-      blinkId = setInterval(() => setCaretOn((v) => !v), 500)
-    }
-    props.onFocus?.()
-  }
-
-  let handleBlur = () => {
-    if (blinkId != null) {
-      clearInterval(blinkId)
-      blinkId = null
-    }
-    props.onBlur?.()
-  }
-
-  // Keys the input consumes stop propagating: an ancestor (or an app-global
-  // shortcut on the window) must not also act on an ArrowLeft that moved the
-  // caret. Anything else (e.g. ctrl+s) bubbles on.
-  let handleKeyDown = (e: KeyEvent) => {
-    if (props.disabled) return
-    let consumed = true
-    if (e.key === "Backspace") {
-      buffer.deleteBackward()
-      setCaretOn(true)
-    } else if (e.key === "Delete") {
-      buffer.deleteForward()
-      setCaretOn(true)
-    } else if (e.key === "ArrowLeft") {
-      buffer.move("left")
-      setCaretOn(true)
-    } else if (e.key === "ArrowRight") {
-      buffer.move("right")
-      setCaretOn(true)
-    } else if (e.key === "Home") {
-      buffer.move("start")
-      setCaretOn(true)
-    } else if (e.key === "End") {
-      buffer.move("end")
-      setCaretOn(true)
-    } else if (e.key === "Enter" || e.code === "Select") {
-      // The remote center key's `key` is "Unidentified"; match its code.
-      activateField()
-    } else if (e.key === "Escape") {
-      if (node) setFocus(null)
-    } else {
-      consumed = false
-    }
-    if (consumed) e.stopPropagation()
-  }
-
-  let handleTextInput = (e: any) => {
-    if (props.disabled) return
-    buffer.insertText(e.text ?? "")
-    setCaretOn(true)
-  }
-
-  // Select on the focused field: focused and editing are distinct states. A
-  // field reached by navigation is focused but has no text session yet -
-  // select begins one (raising the on-screen keyboard where used, e.g. a TV
-  // with no keyboard attached); while editing, it submits. On platforms
-  // where the session starts invisibly at focus (desktop, physical
-  // keyboard) the first branch never runs and Enter submits as always.
-  // Registered as the nav action too, for a controller's south button.
-  let activateField = () => {
-    if (props.disabled) return
-    if (!textInputActive()) {
-      startTextInput()
-    } else {
-      props.onSubmit?.(value())
-      setFocus(null)
-    }
-  }
-
-  let unregisterNav: (() => void) | null = null
-
-  onCleanup(() => {
-    if (blinkId != null) clearInterval(blinkId)
-    unregisterNav?.()
-  })
-
-  // Style overrides fall back to theme defaults. The border doubles as the
-  // focus ring: primary while focused, when the focus-ring policy asks for a
-  // visible indicator.
-  let textColor = () => props.style?.color ?? theme.color.text
-  let surfaceColor = () => props.style?.backgroundColor ?? theme.color.surface
-  let borderColor = () =>
-    props.style?.borderColor ?? (focused() && policy.focusRing ? theme.color.primary : theme.color.border)
-  let borderWidth = () => props.style?.borderWidth ?? theme.borderWidth.sm
-  let borderRadius = () => props.style?.borderRadius ?? theme.radius.sm
-
-  let showPlaceholder = () => !focused() && value().length === 0 && (props.placeholder ?? "").length > 0
-  let showCaret = () => focused() && caretOn() && !showPlaceholder()
-
-  // Everything inside the viewport is detached: the value is one d-text shaped
-  // at an unbounded width and the caret a d-rect at the measured before-caret
-  // width, so typing, caret movement, blink and scroll never touch layout. The
-  // viewport carries an explicit height (detached content takes no layout
-  // slot) equal to the one-line paragraph height, which keeps the text where
-  // the old centered attached row sat. createCaretScroll keeps the caret in
-  // view and flushes the offset before paint; scrollX is a paint-time
-  // translate that also applies to detached children.
-  // All one-line metrics derive from the scaled body size, so the field, the
-  // caret, and the scroll math grow together under policy.textScale.
-  let fontSize = () => theme.text.body.size * policy.textScale
-  let rowHeight = () => Math.round(fontSize() * theme.text.body.lineHeight)
-  let caretX = () => measureText(value().slice(0, buffer.caret()), { fontSize: fontSize() }).width
-  let scrollX = createCaretScroll(
-    () => viewport,
-    () => ({
-      text: value(),
-      fontSize: fontSize(),
-      caret: buffer.caret(),
-      // Constant, not tied to caret visibility: the caret's footprint does not
-      // change as it blinks, so reserving the column only when shown would swing
-      // the scroll offset every blink and shift text that exactly fills the box.
-      caretWidth: CARET_WIDTH,
-    }),
-  )
-
-  let textStyle = (color: Color | Gradient) => ({
-    w: TEXT_SHAPE_WIDTH,
-    fontSize: fontSize(),
-    lineHeight: theme.text.body.lineHeight,
-    color,
-    maxLines: 1,
-  })
-
+  let value = (): string => ""
   return (
-    <view
-      ref={(n: { id: number }) => {
-        node = n
-        unregisterNav?.()
-        unregisterNav = registerNavAction(n.id, activateField)
-        props.ref?.(n)
+    <EditorField
+      buffer={(step) => {
+        let buffer = createTextBuffer({
+          value: () => props.value,
+          // A one-shot initial value by contract (see createTextBuffer): read
+          // once, deliberately untracked.
+          defaultValue: untrack(() => props.defaultValue),
+          onInput: (v) => props.onInput?.(v),
+          maxLength: () => props.maxLength,
+          step,
+        })
+        value = buffer.value
+        return buffer
       }}
-      textInputHints={props.hints}
-      focusable
-      flexDirection="row"
-      alignItems="center"
-      paddingLeft={space("md")}
-      paddingRight={space("md")}
-      paddingTop={space("sm")}
-      paddingBottom={space("sm")}
-      {...props.layout}
-      x={props.style?.x}
-      y={props.style?.y}
-      scale={props.style?.scale}
-      rotate={props.style?.rotate}
-      opacity={props.style?.opacity}
-      onPointerDown={handlePointerDown}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      onKeyDown={handleKeyDown}
-      onTextInput={handleTextInput}
-    >
-      <d-rect color={surfaceColor()} radius={borderRadius()} />
-      <d-rect
-        drawStyle="stroke"
-        color={borderColor()}
-        strokeWidth={borderWidth()}
-        radius={borderRadius()}
-      />
-      <view
-        ref={(n: { id: number }) => (viewport = n)}
-        flex={1}
-        height={rowHeight()}
-        overflow="hidden"
-        scrollX={scrollX()}
-      >
-        {showPlaceholder() ? (
-          <d-text {...textStyle(theme.color.textMuted)}>{props.placeholder ?? ""}</d-text>
-        ) : (
-          <>
-            <d-text {...textStyle(textColor())}>{value()}</d-text>
-            {showCaret() ? (
-              <d-rect
-                color={textColor()}
-                x={caretX()}
-                y={(rowHeight() - fontSize()) / 2}
-                w={CARET_WIDTH}
-                h={fontSize()}
-              />
-            ) : null}
-          </>
-        )}
-      </view>
-    </view>
+      renderLine={({ line, font, color }) => (
+        <d-text y={line().y} w={line().width + 1} {...font()} color={color()} maxLines={1}>
+          {value().slice(line().start, line().end)}
+        </d-text>
+      )}
+      onSubmit={props.onSubmit}
+      onFocus={props.onFocus}
+      onBlur={props.onBlur}
+      placeholder={props.placeholder}
+      disabled={props.disabled}
+      autoFocus={props.autoFocus}
+      multiline={props.multiline}
+      maxRows={props.maxRows}
+      hints={props.hints}
+      ref={props.ref}
+      layout={props.layout}
+      style={{ ...theme.components.textInput, ...props.style }}
+    />
   )
-}
+}

package/src/theme.ts

@@ -1,4 +1,5 @@
-import { createStore, mixColors } from "@solidrt/core"
+import { createStore } from "@solidjs/signals"
+import type { StyleProps } from "./types"
 
 export type TextStyle = {
   size: number
@@ -9,6 +10,30 @@ export type TextStyle = {
 // The type scale's role names. <Text variant> and theme.text are keyed by these.
 export type TextVariant = "caption" | "label" | "body" | "title" | "heading"
 
+// The components whose chrome accepts a theme-level paint override (see
+// Theme["components"]). Plain containers (View, Pressable, ...) are not
+// themed, so they take no override either.
+export type ThemedComponent =
+  | "button"
+  | "card"
+  | "badge"
+  | "switch"
+  | "checkbox"
+  | "radio"
+  | "item"
+  | "select"
+  | "segmentedControl"
+  | "textInput"
+  | "richTextEditor"
+  | "tooltip"
+  | "divider"
+  | "progressBar"
+  | "spinner"
+
+// A resolved theme: every value is a plain string/number ready to be read by
+// a component. Authoring happens through defineTheme, which is where
+// [light, dark] pairs and the type-scale expansion live; a Theme itself has
+// no notion of modes.
 export type Theme = {
   text: {
     // Passed through to the core font stack: "sans" | "mono" | a family name.
@@ -26,117 +51,179 @@ export type Theme = {
     surface: string
     // Subtle raised/track fill (switch off-state, slider track, ...).
     surfaceAlt: string
-    // Hover tint for surface-colored controls (non-touch interaction policies).
-    surfaceHover: string
     text: string
     textMuted: string
     border: string
     primary: string
-    // Hover tint for primary-colored controls.
-    primaryHover: string
     onPrimary: string
     // Lower-emphasis accent: the puzzle mark's darker blue.
     secondary: string
-    // Hover tint for secondary-colored controls.
-    secondaryHover: string
     onSecondary: string
     // Validation / destructive.
     danger: string
-    // Hover tint for danger-colored controls.
-    dangerHover: string
     // Overlay dim behind modals.
     scrim: string
+    // Hover/pressed feedback tints: translucent colors DRAWN OVER a control's
+    // own fill (one token pair for every control, instead of a hover variant
+    // per fill color), so feedback works over any background, including a
+    // caller-set style.backgroundColor. Non-touch interaction policies only.
+    overlayHover: string
+    overlayPressed: string
   }
   spacing: { sm: number; md: number; lg: number; xl: number }
   radius: { sm: number; md: number; lg: number }
   borderWidth: { sm: number }
+  // Semantic control glyphs, as SVG document strings (the Icon currency).
+  // Components draw their built-in vector paths by default; a theme that sets
+  // a slot swaps that glyph everywhere it appears. The package still bundles
+  // no icon set.
+  icons: { chevronDown?: string; check?: string }
+  // Per-component paint overrides: merged between a component's themed
+  // defaults and the instance's style prop, so a theme can restyle every
+  // Button (say, pill corners) without wrapping the component. Instance
+  // style still wins.
+  components: { [K in ThemedComponent]?: StyleProps }
 }
 
-// Scheme-independent tokens, shared by both presets. The type scale: body is
-// the base text style; caption and label sit under it (secondary and
-// emphasized small text), title and heading above it (card and page headings).
-const TEXT: Theme["text"] = {
-  fontFamily: "sans",
-  caption: { size: 11, lineHeight: 1.3, weight: 400 },
-  label: { size: 12, lineHeight: 1.3, weight: 600 },
-  body: { size: 14, lineHeight: 1.5, weight: 400 },
-  title: { size: 18, lineHeight: 1.4, weight: 700 },
-  heading: { size: 22, lineHeight: 1.3, weight: 700 },
+// -- Authoring ---------------------------------------------------------------
+
+// A color in a theme definition: one value, or a [light, dark] pair resolved
+// by defineTheme's scheme argument. Pairs are opt-in per token; a definition
+// without any needs no scheme at all (a game ships one look, not two).
+export type ThemeColor = string | [light: string, dark: string]
+
+export type ThemeDefinition = {
+  color: { [K in keyof Theme["color"]]: ThemeColor }
+  text?: {
+    fontFamily?: string
+    // The body font size; the other roles derive from it. Default 14.
+    base?: number
+    // The step between adjacent roles (caption, label, body, title, heading
+    // sit at base * ratio^(-2..2), rounded to whole px). Default 1.26.
+    ratio?: number
+    // Per-role overrides of the derived size and the default line heights
+    // and weights.
+    roles?: { [K in TextVariant]?: Partial<TextStyle> }
+  }
+  spacing?: Partial<Theme["spacing"]>
+  radius?: Partial<Theme["radius"]>
+  borderWidth?: Partial<Theme["borderWidth"]>
+  icons?: Theme["icons"]
+  components?: Theme["components"]
 }
+
 const SPACING = { sm: 4, md: 8, lg: 16, xl: 20 }
 const RADIUS = { sm: 4, md: 8, lg: 12 }
 const BORDER_WIDTH = { sm: 1 }
 
-export let darkTheme: Theme = {
-  text: TEXT,
-  color: {
-    background: "#0b0f17",
-    surface: "#161b22",
-    surfaceAlt: "#21262d",
-    surfaceHover: "#262c34",
-    text: "#e6edf3",
-    // Muted is an opaque tone between text and background, mixed in LAB (like
-    // Material 3's tonal colors, not an alpha overlay): alpha text renders
-    // thin on low-DPI and its contrast depends on what sits behind it.
-    textMuted: mixColors("#e6edf3", "#0b0f17", 0.4),
-    border: "rgba(255,255,255,0.14)",
-    // Accent tuned to the puzzle mark's mid blue; hover lifts toward its
-    // lightest segment tone.
-    primary: "#547ebf",
-    primaryHover: "#7ea9ea",
-    onPrimary: "#ffffff",
-    // The darker shade of the same puzzle segment; hover lifts toward primary.
-    secondary: "#2b5696",
-    secondaryHover: "#3a68ab",
-    onSecondary: "#ffffff",
-    danger: "#f85149",
-    dangerHover: "#ff7b72",
-    scrim: "rgba(0,0,0,0.6)",
-  },
-  spacing: SPACING,
-  radius: RADIUS,
-  borderWidth: BORDER_WIDTH,
+// Line height and weight per role; body is the base text, caption and label
+// sit under it (secondary and emphasized small text), title and heading
+// above it (card and page headings).
+const ROLE_DEFAULTS: { [K in TextVariant]: { step: number; lineHeight: number; weight: TextStyle["weight"] } } = {
+  caption: { step: -2, lineHeight: 1.3, weight: 400 },
+  label: { step: -1, lineHeight: 1.3, weight: 600 },
+  body: { step: 0, lineHeight: 1.5, weight: 400 },
+  title: { step: 1, lineHeight: 1.4, weight: 700 },
+  heading: { step: 2, lineHeight: 1.3, weight: 700 },
+}
+
+/**
+ * Resolves a theme definition into a Theme. `scheme` picks the side of every
+ * [light, dark] color pair; a definition without pairs needs no scheme
+ * (modes are a per-theme choice, not a framework requirement). The type
+ * scale expands from text.base and text.ratio, with text.roles overriding
+ * per role. Throws on a pair without a scheme (throw-in-dev policy).
+ */
+export function defineTheme(def: ThemeDefinition, scheme?: "light" | "dark"): Theme {
+  let color = {} as Theme["color"]
+  for (let key in def.color) {
+    let k = key as keyof Theme["color"]
+    let value = def.color[k]
+    if (Array.isArray(value)) {
+      if (!scheme) throw new Error(`Theme color "${key}" is a [light, dark] pair; pass a scheme to defineTheme`)
+      color[k] = value[scheme === "light" ? 0 : 1]
+    } else color[k] = value
+  }
+  let base = def.text?.base ?? 14
+  let ratio = def.text?.ratio ?? 1.26
+  let role = (name: TextVariant): TextStyle => {
+    let d = ROLE_DEFAULTS[name]
+    return {
+      size: Math.round(base * ratio ** d.step),
+      lineHeight: d.lineHeight,
+      weight: d.weight,
+      ...def.text?.roles?.[name],
+    }
+  }
+  return {
+    text: {
+      fontFamily: def.text?.fontFamily ?? "sans",
+      caption: role("caption"),
+      label: role("label"),
+      body: role("body"),
+      title: role("title"),
+      heading: role("heading"),
+    },
+    color,
+    spacing: { ...SPACING, ...def.spacing },
+    radius: { ...RADIUS, ...def.radius },
+    borderWidth: { ...BORDER_WIDTH, ...def.borderWidth },
+    icons: def.icons ?? {},
+    components: def.components ?? {},
+  }
 }
 
-export let lightTheme: Theme = {
-  text: TEXT,
+// -- The built-in presets: one definition, resolved twice ---------------------
+
+const DEFAULT: ThemeDefinition = {
   color: {
-    background: "#ffffff",
-    surface: "#f6f8fa",
-    surfaceAlt: "#eaeef2",
-    surfaceHover: "#e0e5eb",
-    text: "#1f2328",
-    textMuted: mixColors("#1f2328", "#ffffff", 0.4),
-    border: "rgba(0,0,0,0.15)",
-    // Accent tuned to the puzzle mark's mid blue; hover deepens toward its
-    // darker segment tone.
+    background: ["#ffffff", "#0b0f17"],
+    surface: ["#f6f8fa", "#161b22"],
+    surfaceAlt: ["#eaeef2", "#21262d"],
+    text: ["#1f2328", "#e6edf3"],
+    // Muted is an opaque tone between text and background, mixed in oklab
+    // (like Material 3's tonal colors, not an alpha overlay): alpha text
+    // renders thin on low-DPI and its contrast depends on what sits behind
+    // it. Precomputed - core's mixColors delegates to flux:rendertree, and a
+    // preset is data that must not need the render engine at import time
+    // (the website token build imports this module headless). If text or
+    // background changes, recompute: mixColors(text, background, 0.4).
+    textMuted: ["#707376", "#848b92"],
+    border: ["rgba(0,0,0,0.15)", "rgba(255,255,255,0.14)"],
+    // Accent tuned to the puzzle mark's mid blue.
     primary: "#547ebf",
-    primaryHover: "#3f5494",
     onPrimary: "#ffffff",
-    // The darker shade of the same puzzle segment; hover deepens it further.
+    // The darker shade of the same puzzle segment.
     secondary: "#2b5696",
-    secondaryHover: "#1f4176",
     onSecondary: "#ffffff",
-    danger: "#cf222e",
-    dangerHover: "#a40e26",
-    scrim: "rgba(0,0,0,0.4)",
+    danger: ["#cf222e", "#f85149"],
+    scrim: ["rgba(0,0,0,0.4)", "rgba(0,0,0,0.6)"],
+    // Feedback darkens on a light scheme and lightens on a dark one.
+    overlayHover: ["rgba(0,0,0,0.08)", "rgba(255,255,255,0.08)"],
+    overlayPressed: ["rgba(0,0,0,0.14)", "rgba(255,255,255,0.14)"],
   },
-  spacing: SPACING,
-  radius: RADIUS,
-  borderWidth: BORDER_WIDTH,
+  // base 14 and ratio 1.26 derive title 18 and heading 22; the two small
+  // roles sit tighter than the ratio, so they are pinned.
+  text: { roles: { caption: { size: 11 }, label: { size: 12 } } },
 }
 
-// Backed by a Solid store so reads are tracked: calling setTheme at runtime
-// recolors the live UI without remounting. Components read theme.* through
-// thunks/JSX expressions, so they pick this up with no call-site changes.
-let [theme, setThemeStore] = createStore<Theme>({ ...darkTheme })
-export { theme }
+export let darkTheme: Theme = defineTheme(DEFAULT, "dark")
+export let lightTheme: Theme = defineTheme(DEFAULT, "light")
+
+let [themeStore, setThemeStore] = createStore<Theme>({ ...darkTheme })
+
+// The shared theme, backed by a Solid store so reads are tracked: calling
+// setTheme at runtime recolors the live UI without remounting. Components
+// read theme.* through thunks/JSX expressions, so they pick this up with no
+// call-site changes.
+export let theme: Theme = themeStore
 
 type ThemePartial = { [K in keyof Theme]?: Partial<Theme[K]> }
 
-// Switch themes with a full preset (setTheme(lightTheme)) or apply a targeted
-// override (setTheme({ color: { primary: "#f00" } })). Merges one level deep per
-// category, matching the previous Object.assign behavior.
+// Switch themes with a full preset (setTheme(lightTheme)), a resolved
+// definition (setTheme(defineTheme({...}))), or apply a targeted override
+// (setTheme({ color: { primary: "#f00" } })). Merges one level deep per
+// category (for components, that level is the component name).
 export function setTheme(partial: ThemePartial) {
   setThemeStore((s) => {
     for (let key in partial) {