@solidrt/components 0.0.20 → 0.0.22

package/AGENTS.md

@@ -85,6 +85,23 @@ Most components group props into two objects, plus top-level event handlers:
   `setTheme({...})` merges a one-level-deep override. Default is dark. Color
   tokens: `background`, `surface`, `surfaceAlt`, `text`, `textMuted`, `border`,
   `primary`, `onPrimary`, `danger`, `scrim`.
+- `policy` / `setPolicy` / `setPolicyResolver` / `defaultPolicyResolver` /
+  `densityScale` - shared REACTIVE behavior (theme answers "how does it look",
+  policy answers "how does it behave"). Derived from `@solidrt/core`'s
+  `capabilities`/`env` (touch vs. desktop, window size class, display scale).
+  Fields: `interaction` (`"touch" | "desktop" | "hybrid"`, gates hover vs.
+  long-press affordances), `density` (`"comfortable" | "compact" | "dense"`,
+  drives `densityScale()`: 1 / 0.85 / 0.7), `motion` (`"normal" | "reduced" |
+  "none"`), `focusRing` (boolean), `textScale`/`textWeightDelta` (Dynamic-Type
+  and low-DPI weight compensation, consumed by `Text`), `navigation`
+  (`"bottomTabs" | "rail" | "sidebar"`) and `layout` (`"singlePane" |
+  "twoPane"`, both recommendations derived from window size class). Read
+  `policy.*` directly (reactive getters, like `theme`); `setPolicy({ field:
+  value })` pins one field regardless of the derived value, `setPolicy({
+  field: undefined })` hands it back to the resolver; `setPolicyResolver(caps
+  => Policies)` replaces the whole derivation for full custom control.
+  `Tooltip`, `Select`, `ContextMenu` fork on `policy.interaction`; `NavShell`
+  on `policy.navigation`; `SplitView` on `policy.layout`.
 
 ## Minimal app (verified to render)
 

package/README.md

@@ -28,6 +28,41 @@ setTheme({ color: { primary: "#ff2d55" } })   // override one token
 
 The color tokens are `background` (window fill), `surface` (control/card fill), `surfaceAlt` (subtle raised/track fill), `text`, `textMuted`, `border`, `primary`, `onPrimary`, `danger`, and `scrim` (modal dim). Non-color tokens are `spacing`, `radius`, `borderWidth`, and `text` (font sizes), shared across presets.
 
+## Policies
+
+Theme answers "how does it look"; policies answer "how does it behave". Policies are a second reactive layer, derived from the platform facts in `@solidrt/core` (`capabilities`, `env`), so components adapt to touch vs. desktop, window size, and display without every app wiring that logic itself.
+
+```jsx
+import { policy, setPolicy, densityScale } from "@solidrt/components"
+
+policy.interaction   // touch vs. desktop affordances (hover, long-press, ...)
+policy.density       // control/spacing scale
+```
+
+`policy` fields:
+
+| Field             | Type                                          | Description                                                                 |
+| ----------------- | ---------------------------------------------- | ----------------------------------------------------------------------------- |
+| `interaction`     | `"touch" \| "desktop" \| "hybrid"`             | Which interaction affordances a component shows (hover states vs. long-press). |
+| `density`         | `"comfortable" \| "compact" \| "dense"`        | Control/hit-target/spacing scale; see `densityScale()`.                       |
+| `motion`          | `"normal" \| "reduced" \| "none"`              | Animation intensity.                                                          |
+| `focusRing`       | `boolean`                                      | Whether focused controls draw a visible focus indicator.                      |
+| `textScale`       | `number`                                       | Multiplier on type-scale font sizes; defaults to the OS text-scale preference. |
+| `textWeightDelta` | `number`                                       | Weight compensation (in steps of 100) for light-on-dark text on low-DPI displays. |
+| `navigation`      | `"bottomTabs" \| "rail" \| "sidebar"`          | Recommended nav layout, derived from window size class.                       |
+| `layout`          | `"singlePane" \| "twoPane"`                    | Recommended single vs. two-pane layout, derived from window size class.       |
+
+Reads are reactive like `theme`, so a window resize or the first mouse move on a touch-capable device updates every consuming component live.
+
+```jsx
+setPolicy({ density: "compact" })    // pin a field, overriding the derived value
+setPolicy({ density: undefined })    // hand it back to the resolver
+```
+
+`setPolicyResolver((caps) => Policies)` replaces the whole system-derivation function for full custom control; `defaultPolicyResolver` is exported to wrap or extend instead of replacing it outright.
+
+`densityScale()` is a reactive multiplier (1 / 0.85 / 0.7 for comfortable/compact/dense) driven by `policy.density`, used internally for spacing and hit-target sizing.
+
 ## Layout and style
 
 Most components group their props into two objects:

package/examples/README.md

@@ -0,0 +1,11 @@
+# @solidrt/components examples
+
+Single-concept SolidRT patterns using @solidrt/components. Each file is a
+complete, runnable app (ends in `render(() => <App />)`) demonstrating exactly
+one thing - copy one and adapt it. For core primitives see
+`@solidrt/core/examples`; for the component prop model see
+`@solidrt/components/AGENTS.md`.
+
+## Theme
+- `theme-toggle.tsx` - a `Switch` flipping `setTheme` between `darkTheme` and
+  `lightTheme`; every component recolors reactively, no remount.

package/examples/theme-toggle.tsx

@@ -0,0 +1,37 @@
+// A Switch toggling between the two built-in themes. Every component reads
+// theme.* reactively, so flipping setTheme() recolors the whole tree with no
+// remount - the Switch itself included.
+import { render, createSignal, createEffect, env } from "@solidrt/core"
+import { Window, View, Text, Switch, Card, theme, setTheme, darkTheme, lightTheme } from "@solidrt/components"
+
+function App() {
+  // Start from the OS light/dark preference; env.systemTheme is
+  // "dark" | "light" | "unknown" (unknown falls back to dark, the default).
+  let [dark, setDark] = createSignal(() => env.systemTheme !== "light")
+
+  createEffect(
+    () => dark(),
+    (on) => setTheme(on ? darkTheme : lightTheme),
+  )
+
+  return (
+    <Window
+      title="Theme toggle"
+      layout={{ flexDirection: "column", alignItems: "center", justifyContent: "center" }}
+      style={{ backgroundColor: theme.color.background }}
+    >
+      <Card title={dark() ? "Dark theme" : "Light theme"} layout={{ width: 280 }}>
+        <View
+          layout={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}
+        >
+          <Text layout={{ fontSize: 14 }} style={{ color: theme.color.text }}>
+            Dark mode
+          </Text>
+          <Switch value={dark()} onChange={setDark} />
+        </View>
+      </Card>
+    </Window>
+  )
+}
+
+render(() => <App />)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -10,6 +10,7 @@
   },
   "files": [
     "src/",
+    "examples/",
     "AGENTS.md"
   ],
   "dependencies": {
@@ -17,6 +18,6 @@
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-beta.15",
-    "@solidrt/core": "0.0.20"
+    "@solidrt/core": "0.0.22"
   }
 }

package/src/badge.tsx

@@ -1,12 +1,17 @@
 import { Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
+import { typeStyle, lightOnDark } from "./typography"
 import type { StyleProps } from "./types"
 
+export type BadgeVariant = "primary" | "neutral" | "danger"
+
 export interface BadgeProps {
   // A string/number renders as the themed pill label; anything else is rendered
   // as-is (an icon, a dot, ...).
   children?: any
+  // Visual role: primary (accent), neutral (subtle surface), danger.
+  variant?: BadgeVariant
   layout?: LayoutProps
   style?: StyleProps
 }
@@ -19,10 +24,22 @@ const RADIUS = 999
 // onPrimary text by default; override the fill via style.backgroundColor and the
 // label color via style.color.
 export function Badge(props: BadgeProps) {
-  let bg = () => props.style?.backgroundColor ?? theme.color.primary
-  let fg = () => props.style?.color ?? theme.color.onPrimary
+  let colors = () => {
+    let c = theme.color
+    switch (props.variant ?? "primary") {
+      case "neutral":
+        return { bg: c.surfaceAlt, fg: c.text }
+      case "danger":
+        return { bg: c.danger, fg: c.onPrimary }
+      default:
+        return { bg: c.primary, fg: c.onPrimary }
+    }
+  }
+  let bg = () => props.style?.backgroundColor ?? colors().bg
+  let fg = () => props.style?.color ?? colors().fg
   let radius = () => props.style?.borderRadius ?? RADIUS
   let isText = () => typeof props.children === "string" || typeof props.children === "number"
+  let labelOnDark = () => lightOnDark(fg(), bg())
 
   return (
     <view
@@ -38,10 +55,11 @@ export function Badge(props: BadgeProps) {
       y={props.style?.y}
       scale={props.style?.scale}
       rotate={props.style?.rotate}
+      opacity={props.style?.opacity}
     >
       <d-rect color={bg()} radius={radius()} />
       <Show when={isText()} fallback={props.children}>
-        <text color={fg()} fontSize={12} fontWeight={600}>
+        <text color={fg()} {...typeStyle("label", labelOnDark())}>
           {props.children}
         </text>
       </Show>

package/src/button.tsx

@@ -1,14 +1,21 @@
 import { Show } from "@solidrt/core"
 import { Pressable, type PressState } from "./pressable"
 import { theme } from "./theme"
-import { policy, densityScale } from "./policy"
+import { policy } from "./policy"
+import { space } from "./spacing"
+import { typeStyle, lightOnDark } from "./typography"
 import type { LayoutProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger"
+
 export interface ButtonProps {
   // A string/number is rendered as the themed label; anything else is rendered
   // as-is, so a button can hold custom content (an icon, a row, ...).
   children?: any
+  // Visual role: primary (accent fill), secondary (surface fill with border),
+  // ghost (no fill until hover), danger (destructive accent fill).
+  variant?: ButtonVariant
   onPress?: () => void
   disabled?: boolean
   layout?: LayoutProps
@@ -22,16 +29,42 @@ export interface ButtonProps {
 // layout. A caller-set backgroundColor disables the hover tint: we cannot know
 // its hover variant.
 export function Button(props: ButtonProps) {
+  // Fill, hover fill, and label color per variant, read reactively from the
+  // theme. Only secondary draws a border.
+  let colors = () => {
+    let c = theme.color
+    switch (props.variant ?? "primary") {
+      case "secondary":
+        return { fill: c.surface, hover: c.surfaceHover, label: c.text, border: c.border }
+      case "ghost":
+        return { fill: "transparent", hover: c.surfaceHover, label: c.text, border: undefined }
+      case "danger":
+        return { fill: c.danger, hover: c.dangerHover, label: c.onPrimary, border: undefined }
+      default:
+        return { fill: c.primary, hover: c.primaryHover, label: c.onPrimary, border: undefined }
+    }
+  }
   let bg = (s: PressState) =>
     props.style?.backgroundColor ??
     (props.disabled
-      ? theme.color.surface
+      ? props.variant === "ghost"
+        ? "transparent"
+        : theme.color.surface
       : s.hovered && policy.interaction !== "touch"
-        ? theme.color.primaryHover
-        : theme.color.primary)
+        ? colors().hover
+        : colors().fill)
   let radius = () => props.style?.borderRadius ?? theme.radius.sm
-  let label = () => (props.disabled ? theme.color.textMuted : theme.color.onPrimary)
+  let label = () => (props.disabled ? theme.color.textMuted : colors().label)
   let isText = () => typeof props.children === "string" || typeof props.children === "number"
+  // The label's polarity against the idle fill: onPrimary on a saturated fill
+  // is light-on-dark even in a light theme, so it needs the low-DPI weight
+  // compensation there too.
+  let labelOnDark = () =>
+    lightOnDark(
+      label(),
+      props.style?.backgroundColor ??
+        (props.disabled ? (props.variant === "ghost" ? "transparent" : theme.color.surface) : colors().fill),
+    )
 
   return (
     <Pressable
@@ -41,13 +74,15 @@ export function Button(props: ButtonProps) {
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "center",
-        paddingTop: Math.round(theme.spacing.sm * densityScale()),
-        paddingBottom: Math.round(theme.spacing.sm * densityScale()),
-        paddingLeft: Math.round(theme.spacing.md * densityScale()),
-        paddingRight: Math.round(theme.spacing.md * densityScale()),
+        paddingTop: space("sm"),
+        paddingBottom: space("sm"),
+        paddingLeft: space("md"),
+        paddingRight: space("md"),
         ...props.layout,
       }}
       style={(s: PressState) => ({
+        borderColor: colors().border,
+        borderWidth: colors().border != null ? theme.borderWidth.sm : undefined,
         ...props.style,
         backgroundColor: bg(s),
         borderRadius: radius(),
@@ -58,11 +93,7 @@ export function Button(props: ButtonProps) {
       })}
     >
       <Show when={isText()} fallback={props.children}>
-        <text
-          color={label()}
-          fontSize={theme.text.body.size}
-          lineHeight={theme.text.body.lineHeight}
-        >
+        <text color={label()} {...typeStyle("body", labelOnDark())}>
           {props.children}
         </text>
       </Show>

package/src/card.tsx

@@ -1,6 +1,8 @@
 import { Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
+import { typeStyle } from "./typography"
+import { space } from "./spacing"
 import type { StyleProps } from "./types"
 
 export interface CardProps {
@@ -12,8 +14,6 @@ export interface CardProps {
   style?: StyleProps
 }
 
-const RADIUS = 12
-
 // A themed surface container: a padded column box with a subtle border and
 // rounded corners, reading its colors from the theme so it recolors live.
 // Override any paint via style, spacing/sizing via layout.
@@ -21,23 +21,25 @@ export function Card(props: CardProps) {
   let bg = () => props.style?.backgroundColor ?? theme.color.surface
   let border = () => props.style?.borderColor ?? theme.color.border
   let width = () => props.style?.borderWidth ?? theme.borderWidth.sm
-  let radius = () => props.style?.borderRadius ?? RADIUS
+  let radius = () => props.style?.borderRadius ?? theme.radius.lg
 
   return (
     <view
       ref={props.ref}
+      repaintBoundary
       flexDirection="column"
-      gap={16}
-      padding={20}
+      gap={space("lg")}
+      padding={space("xl")}
       {...props.layout}
       x={props.style?.x}
       y={props.style?.y}
       scale={props.style?.scale}
       rotate={props.style?.rotate}
+      opacity={props.style?.opacity}
     >
       <d-rect color={bg()} radius={radius()} />
       <Show when={props.title != null}>
-        <text color={theme.color.text} fontSize={18} fontWeight={700}>
+        <text color={theme.color.text} {...typeStyle("title")}>
           {props.title}
         </text>
       </Show>

package/src/context-menu.tsx

@@ -2,7 +2,9 @@ import { createSignal, onCleanup, createPortal, onLayout, getBoundingBox, Show,
 import type { LayoutProps, PointerEvent } from "@solidrt/core"
 import { Pressable, type PressState } from "./pressable"
 import { theme } from "./theme"
-import { policy, densityScale } from "./policy"
+import { policy } from "./policy"
+import { space } from "./spacing"
+import { typeStyle } from "./typography"
 
 export interface ContextMenuItem {
   label: string
@@ -70,12 +72,7 @@ export function ContextMenu(props: ContextMenuProps) {
     item.onSelect?.()
   }
 
-  let bodyText = (color: string) => ({
-    fontSize: theme.text.body.size,
-    lineHeight: theme.text.body.lineHeight,
-    color,
-    maxLines: 1,
-  })
+  let bodyText = (color: string) => ({ ...typeStyle("body"), color, maxLines: 1 })
 
   let ItemRow = (p: { item: ContextMenuItem; padY: number }) => (
     <Pressable
@@ -86,8 +83,8 @@ export function ContextMenu(props: ContextMenuProps) {
         alignItems: "center",
         paddingTop: p.padY,
         paddingBottom: p.padY,
-        paddingLeft: Math.round(theme.spacing.md * densityScale()),
-        paddingRight: Math.round(theme.spacing.md * densityScale()),
+        paddingLeft: space("md"),
+        paddingRight: space("md"),
       }}
       style={(s: PressState) => ({
         backgroundColor:
@@ -132,7 +129,7 @@ export function ContextMenu(props: ContextMenuProps) {
         >
           <d-rect color={theme.color.surface} radius={theme.radius.sm} />
           <For each={props.items}>
-            {(item: ContextMenuItem) => <ItemRow item={item} padY={Math.round(theme.spacing.sm * densityScale())} />}
+            {(item: ContextMenuItem) => <ItemRow item={item} padY={space("sm")} />}
           </For>
           <d-rect
             drawStyle="stroke"

package/src/icon.tsx

@@ -24,12 +24,14 @@ export function Icon(props: IconProps) {
   let size = () => props.size ?? SIZE
 
   return (
-    <svg
-      width={size()}
-      height={size()}
-      src={props.src}
-      color={props.color ?? theme.color.text}
-      {...props.layout}
-    />
+    <view repaintBoundary>
+      <svg
+        width={size()}
+        height={size()}
+        src={props.src}
+        color={props.color ?? theme.color.text}
+        {...props.layout}
+      />
+    </view>
   )
 }

package/src/image.tsx

@@ -32,6 +32,7 @@ export function Image(props: ImageProps) {
       y={props.style?.y}
       scale={props.style?.scale}
       rotate={props.style?.rotate}
+      opacity={props.style?.opacity}
       onPointerEnter={props.onPointerEnter}
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}

package/src/index.ts

@@ -1,19 +1,19 @@
 export { Window, type WindowProps } from "./window"
 export { View, type ViewProps } from "./view"
-export { Text, type TextProps } from "./text"
+export { Text, type TextProps, type TextColor } from "./text"
 export { Image, type ImageProps } from "./image"
 export { SafeArea } from "./safe-area"
 export { TextInput, type TextInputProps } from "./text-input"
 export { ScrollView, type ScrollViewProps } from "./scroll-view"
 export { Pressable, type PressableProps, type PressState } from "./pressable"
-export { Button, type ButtonProps } from "./button"
+export { Button, type ButtonProps, type ButtonVariant } from "./button"
 export { Switch, type SwitchProps } from "./switch"
 export { Checkbox, type CheckboxProps } from "./checkbox"
 export { RadioGroup, Radio, type RadioGroupProps, type RadioProps } from "./radio"
 export { Slider, type SliderProps } from "./slider"
 export { Card, type CardProps } from "./card"
 export { Divider, type DividerProps } from "./divider"
-export { Badge, type BadgeProps } from "./badge"
+export { Badge, type BadgeProps, type BadgeVariant } from "./badge"
 export { Spinner, type SpinnerProps } from "./spinner"
 export { ProgressBar, type ProgressBarProps } from "./progress-bar"
 export { Portal, type PortalProps } from "./portal"
@@ -25,7 +25,15 @@ export { NavShell, type NavShellProps, type NavItem } from "./nav-shell"
 export { SplitView, type SplitViewProps } from "./split-view"
 export { QrCode, type QrCodeProps } from "./qrcode"
 export { Icon, type IconProps } from "./icon"
-export { theme, setTheme, darkTheme, lightTheme, type Theme } from "./theme"
+export {
+  theme,
+  setTheme,
+  darkTheme,
+  lightTheme,
+  type Theme,
+  type TextStyle,
+  type TextVariant,
+} from "./theme"
 export {
   policy,
   setPolicy,
@@ -40,4 +48,6 @@ export {
   type NavigationPolicy,
   type LayoutPolicy,
 } from "./policy"
+export { typeStyle, typeWeight, lightOnDark } from "./typography"
+export { space } from "./spacing"
 export type { StyleProps, TextLayoutProps } from "./types"

package/src/nav-shell.tsx

@@ -2,7 +2,9 @@ import { createSignal, Switch, Match, For } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { Pressable, type PressState } from "./pressable"
 import { theme } from "./theme"
-import { policy, densityScale } from "./policy"
+import { policy } from "./policy"
+import { space } from "./spacing"
+import { typeStyle } from "./typography"
 
 export interface NavItem {
   value: unknown
@@ -66,7 +68,7 @@ export function NavShell(props: NavShellProps) {
       style={(s: PressState) => ({ backgroundColor: itemBg(p.item, s), borderRadius: theme.radius.sm })}
     >
       {p.item.icon}
-      <text color={labelColor(p.item)} fontSize={11} lineHeight={1.3}>
+      <text color={labelColor(p.item)} {...typeStyle("caption")}>
         {p.item.label}
       </text>
     </Pressable>
@@ -112,8 +114,8 @@ export function NavShell(props: NavShellProps) {
                 flexDirection: "row",
                 alignItems: "center",
                 gap: theme.spacing.md,
-                paddingTop: Math.round(theme.spacing.sm * densityScale()) + 2,
-                paddingBottom: Math.round(theme.spacing.sm * densityScale()) + 2,
+                paddingTop: space("sm") + 2,
+                paddingBottom: space("sm") + 2,
                 paddingLeft: theme.spacing.md,
                 paddingRight: theme.spacing.md,
                 marginLeft: theme.spacing.sm,
@@ -124,8 +126,7 @@ export function NavShell(props: NavShellProps) {
               {item.icon}
               <text
                 color={item.value === value() ? theme.color.primary : theme.color.text}
-                fontSize={theme.text.body.size}
-                lineHeight={theme.text.body.lineHeight}
+                {...typeStyle("body")}
               >
                 {item.label}
               </text>

package/src/policy.ts

@@ -1,4 +1,4 @@
-import { capabilities, createSignal } from "@solidrt/core"
+import { capabilities, env, createSignal } from "@solidrt/core"
 import type { Capabilities } from "@solidrt/core"
 
 // Policies: how components should behave. Derived from capabilities by a
@@ -20,6 +20,15 @@ export type Policies = {
   // keyboard presence; the runtime cannot yet tell keyboard focus from pointer
   // focus (no Tab traversal), so this is per-session, not per-focus-source.
   focusRing: boolean
+  // Multiplier on type-scale font sizes (Dynamic Type). Follows the OS
+  // preference (env.textScale); override via setPolicy to pin it.
+  textScale: number
+  // Base weight compensation for light-on-dark text on this display, in
+  // steps of 100 (other steps decode as 400): low-DPI rendering thins
+  // inverted-polarity glyphs. Applied by typeWeight to light-on-dark runs
+  // only (per-run polarity, or the theme's palette polarity as the default),
+  // with one extra step for small font sizes; see typography.ts.
+  textWeightDelta: number
   // Application policies: recommendations derived from the window size class.
   // The application owns the final decision; accept them by consuming
   // policy.navigation / policy.layout, or override via setPolicy.
@@ -48,6 +57,8 @@ export function defaultPolicyResolver(caps: Capabilities): Policies {
     density: interaction === "desktop" ? "compact" : "comfortable",
     motion: "normal",
     focusRing: caps.keyboardNav,
+    textScale: env.textScale,
+    textWeightDelta: env.displayScale < 1.5 ? 100 : 0,
     navigation:
       caps.windowSizeClass === "expanded" ? "sidebar" : caps.windowSizeClass === "medium" ? "rail" : "bottomTabs",
     layout: caps.windowSizeClass === "expanded" ? "twoPane" : "singlePane",
@@ -76,6 +87,12 @@ export let policy = {
   get focusRing(): boolean {
     return overrides().focusRing ?? resolved().focusRing
   },
+  get textScale(): number {
+    return overrides().textScale ?? resolved().textScale
+  },
+  get textWeightDelta(): number {
+    return overrides().textWeightDelta ?? resolved().textWeightDelta
+  },
   get navigation(): NavigationPolicy {
     return overrides().navigation ?? resolved().navigation
   },

package/src/pressable.tsx

@@ -54,11 +54,13 @@ export function Pressable(props: PressableProps) {
   return (
     <view
       ref={props.ref}
+      repaintBoundary
       {...props.layout}
       x={style()?.x}
       y={style()?.y}
       scale={style()?.scale}
       rotate={style()?.rotate}
+      opacity={style()?.opacity}
       onPointerEnter={handleEnter}
       onPointerLeave={handleLeave}
       onPointerDown={handleDown}

package/src/qrcode.tsx

@@ -62,7 +62,7 @@ export function QrCode(props: QrCodeProps) {
   let side = () => grid().n * size() + 2 * margin()
 
   return (
-    <view width={side()} height={side()} {...props.layout}>
+    <view repaintBoundary width={side()} height={side()} {...props.layout}>
       <d-rect color={props.background ?? "#ffffff"} radius={props.radius ?? RADIUS} />
       {grid().runs.map((run) => (
         <d-rect

package/src/radio.tsx

@@ -3,6 +3,7 @@ import type { LayoutProps } from "@solidrt/core"
 import { Pressable } from "./pressable"
 import { theme } from "./theme"
 import { densityScale } from "./policy"
+import { typeStyle } from "./typography"
 import type { StyleProps } from "./types"
 
 // Shared selection state for a group. Created and consumed within this module, so
@@ -91,7 +92,7 @@ export function Radio(props: RadioProps) {
         </Show>
       </view>
       <Show when={isText()} fallback={props.children}>
-        <text color={theme.color.text} fontSize={theme.text.body.size} lineHeight={theme.text.body.lineHeight}>
+        <text color={theme.color.text} {...typeStyle("body")}>
           {props.children}
         </text>
       </Show>

package/src/scroll-view.tsx

@@ -65,6 +65,7 @@ export function ScrollView(props: ScrollViewProps) {
       y={props.style?.y}
       scale={props.style?.scale}
       rotate={props.style?.rotate}
+      opacity={props.style?.opacity}
       onPointerEnter={props.onPointerEnter}
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}

package/src/select.tsx

@@ -2,7 +2,9 @@ import { createSignal, createPortal, onLayout, getBoundingBox, Show, For, env }
 import type { LayoutProps } from "@solidrt/core"
 import { Pressable, type PressState } from "./pressable"
 import { theme } from "./theme"
-import { policy, densityScale } from "./policy"
+import { policy } from "./policy"
+import { space } from "./spacing"
+import { typeStyle } from "./typography"
 import type { StyleProps } from "./types"
 
 export interface SelectOption {
@@ -47,12 +49,7 @@ export function Select(props: SelectProps) {
     props.onChange?.(v)
   }
 
-  let bodyText = (color: string) => ({
-    fontSize: theme.text.body.size,
-    lineHeight: theme.text.body.lineHeight,
-    color,
-    maxLines: 1,
-  })
+  let bodyText = (color: string) => ({ ...typeStyle("body"), color, maxLines: 1 })
 
   // One option row, shared by both presentations; only the vertical padding
   // differs (the sheet gets taller touch targets).
@@ -64,8 +61,8 @@ export function Select(props: SelectProps) {
         alignItems: "center",
         paddingTop: p.padY,
         paddingBottom: p.padY,
-        paddingLeft: Math.round(theme.spacing.md * densityScale()),
-        paddingRight: Math.round(theme.spacing.md * densityScale()),
+        paddingLeft: space("md"),
+        paddingRight: space("md"),
       }}
       style={(s: PressState) => ({
         backgroundColor:
@@ -111,7 +108,7 @@ export function Select(props: SelectProps) {
         >
           <d-rect color={theme.color.surface} radius={theme.radius.sm} />
           <For each={props.options}>
-            {(o: SelectOption) => <OptionRow option={o} padY={Math.round(theme.spacing.sm * densityScale())} />}
+            {(o: SelectOption) => <OptionRow option={o} padY={space("sm")} />}
           </For>
           <d-rect
             drawStyle="stroke"
@@ -159,10 +156,10 @@ export function Select(props: SelectProps) {
         alignItems: "center",
         justifyContent: "space-between",
         gap: theme.spacing.md,
-        paddingTop: Math.round(theme.spacing.sm * densityScale()),
-        paddingBottom: Math.round(theme.spacing.sm * densityScale()),
-        paddingLeft: Math.round(theme.spacing.md * densityScale()),
-        paddingRight: Math.round(theme.spacing.md * densityScale()),
+        paddingTop: space("sm"),
+        paddingBottom: space("sm"),
+        paddingLeft: space("md"),
+        paddingRight: space("md"),
         ...props.layout,
       }}
       style={(s: PressState) => ({

package/src/slider.tsx

@@ -90,6 +90,7 @@ export function Slider(props: SliderProps) {
   return (
     <view
       ref={(n: { id: number }) => (track = n)}
+      repaintBoundary
       flexDirection="row"
       alignItems="center"
       height={height()}
@@ -99,6 +100,7 @@ export function Slider(props: SliderProps) {
       y={props.style?.y}
       scale={props.style?.scale}
       rotate={props.style?.rotate}
+      opacity={props.style?.opacity}
       pointerEvents={props.disabled ? "none" : "auto"}
       onPointerDown={handleDown}
       onPointerMove={handleMove}

package/src/spacing.ts

@@ -0,0 +1,11 @@
+import { theme, type Theme } from "./theme"
+import { densityScale } from "./policy"
+
+// Density-scaled spacing: a theme.spacing token multiplied by the density
+// policy's metric scale, rounded to whole pixels. Use it for gaps and paddings
+// that should tighten under compact/dense density; read theme.spacing directly
+// only for distances that must not move with density. Reactive when called
+// inside a tracked scope, like any theme/policy read.
+export function space(token: keyof Theme["spacing"]): number {
+  return Math.round(theme.spacing[token] * densityScale())
+}

package/src/spinner.tsx

@@ -58,6 +58,7 @@ export function Spinner(props: SpinnerProps) {
       rotate={angle()}
       x={props.style?.x}
       y={props.style?.y}
+      opacity={props.style?.opacity}
     >
       <Show when={policy.motion !== "none"}>
         <Animate />

package/src/text-input.tsx

@@ -4,7 +4,8 @@ import { createCaretScroll, createTextBuffer } from "@solidrt/core/text-input"
 import type { LayoutProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 import { theme } from "./theme"
-import { policy, densityScale } from "./policy"
+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.
@@ -147,13 +148,16 @@ export function TextInput(props: TextInputProps) {
   // 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.
-  let rowHeight = () => Math.round(theme.text.body.size * theme.text.body.lineHeight)
-  let caretX = () => measureText(value().slice(0, buffer.caret()), { fontSize: theme.text.body.size }).width
+  // 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: theme.text.body.size,
+      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
@@ -164,7 +168,7 @@ export function TextInput(props: TextInputProps) {
 
   let textStyle = (color: string) => ({
     w: TEXT_SHAPE_WIDTH,
-    fontSize: theme.text.body.size,
+    fontSize: fontSize(),
     lineHeight: theme.text.body.lineHeight,
     color,
     maxLines: 1,
@@ -175,15 +179,16 @@ export function TextInput(props: TextInputProps) {
       ref={(n: { id: number }) => (node = n)}
       flexDirection="row"
       alignItems="center"
-      paddingLeft={Math.round(theme.spacing.md * densityScale())}
-      paddingRight={Math.round(theme.spacing.md * densityScale())}
-      paddingTop={Math.round(theme.spacing.sm * densityScale())}
-      paddingBottom={Math.round(theme.spacing.sm * densityScale())}
+      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}
@@ -213,9 +218,9 @@ export function TextInput(props: TextInputProps) {
               <d-rect
                 color={textColor()}
                 x={caretX()}
-                y={(rowHeight() - theme.text.body.size) / 2}
+                y={(rowHeight() - fontSize()) / 2}
                 w={CARET_WIDTH}
-                h={theme.text.body.size}
+                h={fontSize()}
               />
             ) : null}
           </>

package/src/text.tsx

@@ -1,9 +1,26 @@
 import { createMemo } from "@solidjs/signals"
 import type { PointerProps } from "@solidrt/core"
 import type { StyleProps, TextLayoutProps } from "./types"
+import { theme, type TextVariant } from "./theme"
+import { policy } from "./policy"
+import { typeWeight } from "./typography"
+
+// Semantic text colors, resolved through the theme. Curated: only tokens that
+// make sense as a text fill; style.color takes raw values for anything else.
+export type TextColor = "text" | "textMuted" | "primary" | "onPrimary" | "danger"
 
 export interface TextProps extends PointerProps {
   children?: any
+  // Typography role from the theme's type scale; defaults to "body". Explicit
+  // layout font props override the role's fields individually. fontSize
+  // (role-derived or explicit) is multiplied by policy.textScale and
+  // fontWeight carries the typeWeight low-DPI compensation; use the core
+  // <text> primitive for text that must not scale.
+  variant?: TextVariant
+  // Semantic color from the theme; defaults to "text". style.color still wins.
+  color?: TextColor
+  // Sugar for color="textMuted".
+  muted?: boolean
   ref?: (node: { id: number }) => void
   layout?: TextLayoutProps
   style?: StyleProps
@@ -22,6 +39,11 @@ const FONT_KEYS = [
 ]
 
 export function Text(props: TextProps) {
+  let role = () => theme.text[props.variant ?? "body"]
+  let size = () => (props.layout?.fontSize ?? role().size) * policy.textScale
+  let color = () =>
+    props.style?.color ?? theme.color[props.color ?? (props.muted ? "textMuted" : "text")]
+
   let box = createMemo(() => {
     let l = props.layout
     if (!l) return {}
@@ -40,6 +62,7 @@ export function Text(props: TextProps) {
       y={props.style?.y}
       scale={props.style?.scale}
       rotate={props.style?.rotate}
+      opacity={props.style?.opacity}
       onPointerEnter={props.onPointerEnter}
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}
@@ -54,12 +77,12 @@ export function Text(props: TextProps) {
       pointerEvents={props.pointerEvents}
     >
       <text
-        color={props.style?.color}
-        fontFamily={props.layout?.fontFamily}
-        fontSize={props.layout?.fontSize}
-        lineHeight={props.layout?.lineHeight}
+        color={color()}
+        fontFamily={props.layout?.fontFamily ?? theme.text.fontFamily}
+        fontSize={size()}
+        lineHeight={props.layout?.lineHeight ?? role().lineHeight}
         fontStyle={props.layout?.fontStyle}
-        fontWeight={props.layout?.fontWeight}
+        fontWeight={typeWeight(props.layout?.fontWeight ?? role().weight, size())}
         textAlign={props.layout?.textAlign}
         maxLines={props.layout?.maxLines}
       >

package/src/theme.ts

@@ -1,12 +1,24 @@
-import { createStore } from "@solidrt/core"
+import { createStore, mixColors } from "@solidrt/core"
 
 export type TextStyle = {
   size: number
   lineHeight: number
+  weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
 }
 
+// The type scale's role names. <Text variant> and theme.text are keyed by these.
+export type TextVariant = "caption" | "label" | "body" | "title" | "heading"
+
 export type Theme = {
-  text: { body: TextStyle }
+  text: {
+    // Passed through to the core font stack: "sans" | "mono" | a family name.
+    fontFamily: string
+    caption: TextStyle
+    label: TextStyle
+    body: TextStyle
+    title: TextStyle
+    heading: TextStyle
+  }
   color: {
     // Window fill.
     background: string
@@ -25,18 +37,29 @@ export type Theme = {
     onPrimary: string
     // Validation / destructive.
     danger: string
+    // Hover tint for danger-colored controls.
+    dangerHover: string
     // Overlay dim behind modals.
     scrim: string
   }
-  spacing: { sm: number; md: number }
-  radius: { sm: number }
+  spacing: { sm: number; md: number; lg: number; xl: number }
+  radius: { sm: number; md: number; lg: number }
   borderWidth: { sm: number }
 }
 
-// Scheme-independent tokens, shared by both presets.
-const TEXT = { body: { size: 14, lineHeight: 1.5 } }
-const SPACING = { sm: 4, md: 8 }
-const RADIUS = { sm: 4 }
+// 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 },
+}
+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 = {
@@ -47,12 +70,16 @@ export let darkTheme: Theme = {
     surfaceAlt: "#21262d",
     surfaceHover: "#262c34",
     text: "#e6edf3",
-    textMuted: "rgba(230,237,243,0.5)",
+    // 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)",
     primary: "#1f6feb",
     primaryHover: "#388bfd",
     onPrimary: "#ffffff",
     danger: "#f85149",
+    dangerHover: "#ff7b72",
     scrim: "rgba(0,0,0,0.6)",
   },
   spacing: SPACING,
@@ -68,12 +95,13 @@ export let lightTheme: Theme = {
     surfaceAlt: "#eaeef2",
     surfaceHover: "#e0e5eb",
     text: "#1f2328",
-    textMuted: "rgba(31,35,40,0.5)",
+    textMuted: mixColors("#1f2328", "#ffffff", 0.4),
     border: "rgba(0,0,0,0.15)",
     primary: "#1f6feb",
     primaryHover: "#1a5fd0",
     onPrimary: "#ffffff",
     danger: "#cf222e",
+    dangerHover: "#a40e26",
     scrim: "rgba(0,0,0,0.4)",
   },
   spacing: SPACING,

package/src/tooltip.tsx

@@ -1,7 +1,9 @@
 import { createSignal, onCleanup, createPortal, onLayout, getBoundingBox, Show, env } from "@solidrt/core"
 import type { LayoutProps, PointerEvent } from "@solidrt/core"
 import { theme } from "./theme"
-import { policy, densityScale } from "./policy"
+import { policy } from "./policy"
+import { space } from "./spacing"
+import { typeStyle } from "./typography"
 
 export interface TooltipProps {
   // The tooltip body. A string/number renders as themed text; anything else
@@ -68,20 +70,21 @@ export function Tooltip(props: TooltipProps) {
     return createPortal(
       <view
         ref={(n: { id: number }) => (bubble = n)}
+        repaintBoundary
         position="absolute"
         top={0}
         left={0}
         x={pos()?.x ?? -10000}
         y={pos()?.y ?? 0}
-        paddingTop={Math.round(theme.spacing.sm * densityScale())}
-        paddingBottom={Math.round(theme.spacing.sm * densityScale())}
-        paddingLeft={Math.round(theme.spacing.md * densityScale())}
-        paddingRight={Math.round(theme.spacing.md * densityScale())}
+        paddingTop={space("sm")}
+        paddingBottom={space("sm")}
+        paddingLeft={space("md")}
+        paddingRight={space("md")}
         pointerEvents="none"
       >
         <d-rect color={theme.color.surfaceAlt} radius={theme.radius.sm} />
         <Show when={isText()} fallback={props.content}>
-          <text color={theme.color.text} fontSize={theme.text.body.size} lineHeight={theme.text.body.lineHeight}>
+          <text color={theme.color.text} {...typeStyle("body")}>
             {props.content}
           </text>
         </Show>

package/src/types.ts

@@ -17,6 +17,7 @@ export interface StyleProps {
   y?: number
   rotate?: number
   scale?: number
+  opacity?: number
 }
 
 // Text shaping affects measurement, so font props belong with layout rather

package/src/typography.ts

@@ -0,0 +1,57 @@
+import { brightness } from "@solidrt/core"
+import { theme, type TextStyle, type TextVariant } from "./theme"
+import { policy } from "./policy"
+
+// Below this effective font size, light-on-dark text on a low-DPI display
+// needs an extra compensation step (edge pixels dominate small glyphs).
+const SMALL_TEXT = 16
+
+// The rendering polarity of `text` drawn on `fill`, for typeWeight/typeStyle:
+// true when the text is the lighter of the two. Returns undefined (= fall
+// back to the theme's default polarity) when either side is not a comparable
+// color (gradients, "transparent").
+export function lightOnDark(text: unknown, fill: unknown): boolean | undefined {
+  if (typeof text !== "string" || typeof fill !== "string" || fill === "transparent") return undefined
+  return brightness(text) > brightness(fill)
+}
+
+// The theme's default polarity, derived from its own palette: light text on
+// a dark window background means a dark scheme. Nothing to declare per
+// preset, and it cannot disagree with the colors.
+function themeOnDark(): boolean {
+  return lightOnDark(theme.color.text, theme.color.background) ?? false
+}
+
+// A themed font weight with low-DPI rendering compensation applied. The
+// renderer (Impeller) rasterizes glyphs unhinted and composites the coverage
+// in nonlinear sRGB, which steals stem ink from light-on-dark text only (and
+// donates it to dark-on-light); the loss grows as glyphs shrink. Compensated
+// text adds policy.textWeightDelta (0 on high-DPI displays) plus one extra
+// step under SMALL_TEXT px; dark-on-light text passes through untouched.
+// `onDark` is the run's own polarity where the caller knows both colors (use
+// the lightOnDark() helper, like Button does for its fills); omitted, it
+// defaults to the theme's palette polarity. `size` is the effective
+// (post-textScale) font size. Clamped to the 900 ceiling; reactive like any
+// theme/policy read.
+export function typeWeight(weight: number, size: number, onDark?: boolean): TextStyle["weight"] {
+  let delta = (onDark ?? themeOnDark()) ? policy.textWeightDelta : 0
+  if (delta > 0 && size < SMALL_TEXT) delta += 100
+  return Math.min(900, weight + delta) as TextStyle["weight"]
+}
+
+// Resolved font props for a type-scale role, with the text policies applied:
+// spread onto a <text> or d-text. fontSize carries policy.textScale
+// (lineHeight is relative to the size, so it scales implicitly), fontWeight
+// carries the typeWeight compensation (pass `onDark` when the text sits on a
+// known fill). Reactive when called inside a tracked scope, like any
+// theme/policy read.
+export function typeStyle(variant: TextVariant, onDark?: boolean) {
+  let role = theme.text[variant]
+  let size = role.size * policy.textScale
+  return {
+    fontFamily: theme.text.fontFamily,
+    fontSize: size,
+    lineHeight: role.lineHeight,
+    fontWeight: typeWeight(role.weight, size, onDark),
+  }
+}

package/src/view.tsx

@@ -21,6 +21,7 @@ export function View(props: ViewProps) {
       y={props.style?.y}
       scale={props.style?.scale}
       rotate={props.style?.rotate}
+      opacity={props.style?.opacity}
       onPointerEnter={props.onPointerEnter}
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}