@solidrt/components 0.0.69 → 0.0.70

package/AGENTS.md

@@ -110,7 +110,7 @@ One bullet per module, generated from the first paragraph of its docs/ file.
 - `Theming` - Appearance (colors, spacing, border, font roles) comes from one shared, reactive theme backed by a Solid store: reads are tracked, so switching the theme at runtime recolors the live UI without remounting. Four presets ship, `darkTheme` and `lightTheme` (the flat look, default dark) and `litDarkTheme` and `litLightTheme` (the same palette under a light, see below); `setTheme(preset)` switches, `setTheme(partial)` merges an override one level deep per category. A resolved theme carries every key of every category (unset ones as `undefined`), so switching to one replaces the previous theme outright, per-component overrides and icon slots included; a partial keeps whatever it does not name. Custom themes are authored with `defineTheme`.
 - `Policies` - Theme answers "how does it look"; policies answer "how does it behave". `policy` is 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. Reads are reactive like `theme`: a window resize or the first mouse move on a touch-capable device updates every consuming component live.
 - `Density` - `<Density value="compact">` overrides the density policy for its subtree: every density-scaled metric below - `space()`, control sizes (Checkbox, Switch, Radio, Slider), `Item` and `Button` paddings - resolves this value instead of the global `policy.density`. Regions nest; the nearest wins. Use it to tighten a toolbar, a data table, or a sidebar without per-child props.
-- `Typography helpers` - `typeStyle(variant)` resolves a theme type-scale role (`caption`/`label`/`body`/`title`/`heading`) to font props ready to spread onto a `<text>` or `d-text`: `fontSize` carries `policy.textScale`, and `fontWeight` carries the low-DPI weight compensation. Reactive when called inside a tracked scope, like any theme/policy read. `Text` applies it for you; reach for the helpers when building custom text out of core primitives.
+- `Typography helpers` - `typeStyle(variant)` resolves a theme type-scale role (`caption`/`label`/`body`/`title`/`heading`) to font props ready to spread onto a `<text>` or `d-text`: `fontSize` carries `policy.textScale`, `fontWeight` is the role's own. Reactive when called inside a tracked scope, like any theme/policy read. `Text` applies it for you; reach for the helpers when building custom text out of core primitives.
 - `Spacing` - `space(token)` is density-scaled spacing: a `theme.spacing` token (`sm`/`md`/`lg`/`xl`) multiplied by the density scale of the nearest `<Density>` region (falling back to the global policy) and 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.
 - `Layout and style` - Most components group their props into two objects, split by one rule: `layout` properties feed the layout engine (flexbox/grid, sizing, padding, margin, position - the core `LayoutProps` set) and changing them triggers a relayout; `style` properties are paint-only and never affect layout: `color`, `backgroundColor`, `borderColor`, `borderWidth`, `borderRadius`, `opacity`, `glow` (a halo on the component's accent part; `null` clears the theme's), `material` (layers merged over the role's material for the component's faces) and `elevation` (the level its raised face stands at), see Theming, and the transform (`x`, `y`, `scale`, `rotate`, `rotateX`/`rotateY` with `perspective`, `originX`/`originY`, `clipRadius`). Event handlers (`onPointerDown`, `onKeyDown`, ...) are top-level props, never inside `layout` or `style`.
 <!-- END GENERATED: exports -->

package/README.md

@@ -132,7 +132,6 @@ The fields:
 - `motion` (`"normal" | "reduced" | "none"`) - animation intensity. Gates every built-in component transition: `reduced` keeps the color/opacity fades (a fade is not movement) but snaps everything that travels or scales, and halves the indeterminate `Spinner`/`ProgressBar` speeds; `none` snaps it all and parks the indeterminate loops.
 - `focusRing` (`boolean`) - whether focused controls draw a visible focus indicator (true when a keyboard or gamepad/remote is present).
 - `textScale` (`number`) - multiplier on type-scale font sizes; defaults to the OS text-scale preference.
-- `textWeightDelta` (`number`) - weight compensation (steps of 100) for light-on-dark text on low-DPI displays.
 - `navigation` (`"bottomTabs" | "rail" | "sidebar"`) - recommended nav layout, derived from the pane count: `sidebar` beside a two-pane layout, `bottomTabs` under a single pane (a side strip spends the width a narrow window is short of). `rail` is never derived; set it for a content-dense two-pane app. `NavShell` follows it.
 - `layout` (`"singlePane" | "twoPane"`) - recommended pane count, derived from the window size class. `SplitView` follows it.
 
@@ -161,13 +160,13 @@ API: `StyleProps`, `Glow`, `Glass`, `Material`, `MaterialRole`, `ElevationLevel`
 
 ## Typography helpers
 
-`typeStyle(variant)` resolves a theme type-scale role (`caption`/`label`/`body`/`title`/`heading`) to font props ready to spread onto a `<text>` or `d-text`: `fontSize` carries `policy.textScale`, and `fontWeight` carries the low-DPI weight compensation. Reactive when called inside a tracked scope, like any theme/policy read. `Text` applies it for you; reach for the helpers when building custom text out of core primitives.
+`typeStyle(variant)` resolves a theme type-scale role (`caption`/`label`/`body`/`title`/`heading`) to font props ready to spread onto a `<text>` or `d-text`: `fontSize` carries `policy.textScale`, `fontWeight` is the role's own. Reactive when called inside a tracked scope, like any theme/policy read. `Text` applies it for you; reach for the helpers when building custom text out of core primitives.
 
-`typeScaleStyles()` is the type scale as font styles (every role in both polarities' weights, plus the mono family at body size), and `warmTypeScale()` hands them to core's `warmText`, which makes their glyph cells ahead of the first screen on the text engine's worker. `Window` does this on mount and again when the theme or the text policy changes; an app that draws its own window calls it once at startup.
+`typeScaleStyles()` is the type scale as font styles (every role, plus the mono family at body size), and `warmTypeScale()` hands them to core's `warmText`, which makes their glyph cells ahead of the first screen on the text engine's worker. `Window` does this on mount and again when the theme or the text policy changes; an app that draws its own window calls it once at startup.
 
-The compensation exists because the renderer rasterizes glyphs unhinted and composites in nonlinear sRGB, which thins light-on-dark text on low-DPI displays as glyphs shrink. `typeWeight(weight, size, onDark?)` adds `policy.textWeightDelta` (0 on high-DPI displays) plus one extra step below 16px; dark-on-light text passes through untouched. `lightOnDark(text, fill)` computes the polarity for a known pair of colors (Button uses it for its fills); omitted, the theme's own palette polarity is used.
+There is no weight compensation: the text engine blends glyph coverage with DirectWrite's gamma-aware recipe, so light-on-dark text keeps its stems at every display scale.
 
-API: `typeStyle`, `typeWeight`, `lightOnDark`, `typeScaleStyles`, `warmTypeScale` - typed and commented in [src/typography.ts](./src/typography.ts).
+API: `typeStyle`, `typeScaleStyles`, `warmTypeScale` - typed and commented in [src/typography.ts](./src/typography.ts).
 
 ## Spacing
 

package/docs/policy.md

@@ -9,7 +9,6 @@ The fields:
 - `motion` (`"normal" | "reduced" | "none"`) - animation intensity. Gates every built-in component transition: `reduced` keeps the color/opacity fades (a fade is not movement) but snaps everything that travels or scales, and halves the indeterminate `Spinner`/`ProgressBar` speeds; `none` snaps it all and parks the indeterminate loops.
 - `focusRing` (`boolean`) - whether focused controls draw a visible focus indicator (true when a keyboard or gamepad/remote is present).
 - `textScale` (`number`) - multiplier on type-scale font sizes; defaults to the OS text-scale preference.
-- `textWeightDelta` (`number`) - weight compensation (steps of 100) for light-on-dark text on low-DPI displays.
 - `navigation` (`"bottomTabs" | "rail" | "sidebar"`) - recommended nav layout, derived from the pane count: `sidebar` beside a two-pane layout, `bottomTabs` under a single pane (a side strip spends the width a narrow window is short of). `rail` is never derived; set it for a content-dense two-pane app. `NavShell` follows it.
 - `layout` (`"singlePane" | "twoPane"`) - recommended pane count, derived from the window size class. `SplitView` follows it.
 

package/docs/typography.md

@@ -1,7 +1,7 @@
 # Typography helpers
 
-`typeStyle(variant)` resolves a theme type-scale role (`caption`/`label`/`body`/`title`/`heading`) to font props ready to spread onto a `<text>` or `d-text`: `fontSize` carries `policy.textScale`, and `fontWeight` carries the low-DPI weight compensation. Reactive when called inside a tracked scope, like any theme/policy read. `Text` applies it for you; reach for the helpers when building custom text out of core primitives.
+`typeStyle(variant)` resolves a theme type-scale role (`caption`/`label`/`body`/`title`/`heading`) to font props ready to spread onto a `<text>` or `d-text`: `fontSize` carries `policy.textScale`, `fontWeight` is the role's own. Reactive when called inside a tracked scope, like any theme/policy read. `Text` applies it for you; reach for the helpers when building custom text out of core primitives.
 
-`typeScaleStyles()` is the type scale as font styles (every role in both polarities' weights, plus the mono family at body size), and `warmTypeScale()` hands them to core's `warmText`, which makes their glyph cells ahead of the first screen on the text engine's worker. `Window` does this on mount and again when the theme or the text policy changes; an app that draws its own window calls it once at startup.
+`typeScaleStyles()` is the type scale as font styles (every role, plus the mono family at body size), and `warmTypeScale()` hands them to core's `warmText`, which makes their glyph cells ahead of the first screen on the text engine's worker. `Window` does this on mount and again when the theme or the text policy changes; an app that draws its own window calls it once at startup.
 
-The compensation exists because the renderer rasterizes glyphs unhinted and composites in nonlinear sRGB, which thins light-on-dark text on low-DPI displays as glyphs shrink. `typeWeight(weight, size, onDark?)` adds `policy.textWeightDelta` (0 on high-DPI displays) plus one extra step below 16px; dark-on-light text passes through untouched. `lightOnDark(text, fill)` computes the polarity for a known pair of colors (Button uses it for its fills); omitted, the theme's own palette polarity is used.
+There is no weight compensation: the text engine blends glyph coverage with DirectWrite's gamma-aware recipe, so light-on-dark text keeps its stems at every display scale.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.69",
+  "version": "0.0.70",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -21,6 +21,6 @@
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-rc.13",
-    "@solidrt/core": "0.0.69"
+    "@solidrt/core": "0.0.70"
   }
 }

package/src/badge.tsx

@@ -2,7 +2,7 @@ import { Show, children } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
 import { space } from "./spacing"
-import { typeStyle, typeWeight, lightOnDark } from "./typography"
+import { typeStyle } from "./typography"
 import { policy } from "./policy"
 import { Surface } from "./surface"
 import type { ElevationLevel, MaterialRole, StyleProps, TransitionProps } from "./types"
@@ -51,7 +51,6 @@ export function Badge(props: BadgeProps) {
   // share one build - reading the raw getter again would orphan native nodes.
   let resolved = children(() => props.children)
   let isText = () => typeof resolved() === "string" || typeof resolved() === "number"
-  let labelOnDark = () => lightOnDark(fg(), bg())
 
   let split = () => splitTransition(props.transition)
 
@@ -90,8 +89,8 @@ export function Badge(props: BadgeProps) {
         <text
           transition={colorFade()}
           color={fg()}
-          {...typeStyle("caption", labelOnDark())}
-          fontWeight={typeWeight(600, theme.text.caption.size * policy.textScale, labelOnDark())}
+          {...typeStyle("caption")}
+          fontWeight={600}
         >
           {resolved()}
         </text>

package/src/button.tsx

@@ -3,7 +3,7 @@ import { createPress } from "./press"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
-import { typeStyle, lightOnDark } from "./typography"
+import { typeStyle } from "./typography"
 import { Spinner } from "./spinner"
 import { Surface, surfaceSinks } from "./surface"
 import type { LayoutProps } from "@solidrt/core"
@@ -93,12 +93,6 @@ export function Button(props: ButtonProps) {
   // share this single memoized build (an unmounted build leaks native nodes).
   let resolved = children(() => props.children)
   let isText = () => typeof resolved() === "string" || typeof resolved() === "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. The base fill, not the lit gradient: the
-  // compensation reads a solid color.
-  let labelOnDark = () => lightOnDark(label(), bg())
-
   // props (not a literal) so a swapped-in onPress is read at event time.
   let press = createPress(props)
   let pressed = () => !props.disabled && press.pressed()
@@ -167,7 +161,7 @@ export function Button(props: ButtonProps) {
         onOutlineTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
       />
       <Show when={isText()} fallback={resolved()}>
-        <text transition={colorFade()} color={press.pending() ? withAlpha(label(), 0) : label()} {...typeStyle("body", labelOnDark())}>
+        <text transition={colorFade()} color={press.pending() ? withAlpha(label(), 0) : label()} {...typeStyle("body")}>
           {resolved()}
         </text>
       </Show>

package/src/editor-field.tsx

@@ -30,7 +30,6 @@ import { Surface } from "./surface"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
-import { typeWeight } from "./typography"
 
 // Caret thickness. Shared so the drawn caret and the scroll offset's reserved
 // edge column cannot drift apart.
@@ -421,7 +420,7 @@ export function EditorField(props: EditorFieldProps) {
       fontSize: fontSize(),
       lineHeight: lineHeight(),
       fontStyle: layoutFont().fontStyle,
-      fontWeight: typeWeight(layoutFont().fontWeight ?? theme.text.body.weight, fontSize()),
+      fontWeight: layoutFont().fontWeight ?? theme.text.body.weight,
     }),
     { equals: sameFont },
   )

package/src/index.ts

@@ -70,7 +70,7 @@ export {
   type LayoutPolicy,
 } from "./policy"
 export { Density, type DensityProps, densityScale } from "./density"
-export { typeStyle, typeWeight, lightOnDark, typeScaleStyles, warmTypeScale } from "./typography"
+export { typeStyle, typeScaleStyles, warmTypeScale } from "./typography"
 export { space } from "./spacing"
 export type {
   StyleProps,

package/src/policy.ts

@@ -23,12 +23,6 @@ export type Policies = {
   // 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
   // (layout), and from the resulting pane count (navigation).
   // The application owns the final decision; accept them by consuming
@@ -63,7 +57,6 @@ export function defaultPolicyResolver(caps: Capabilities): Policies {
     // otherwise navigate ringless on keyboard-free TVs.
     focusRing: caps.keyboardNav || gamepads().some((p) => p != null),
     textScale: env.textScale,
-    textWeightDelta: env.displayScale < 1.5 ? 100 : 0,
     // Navigation follows the pane count, not its own breakpoint: a side strip
     // spends width, which a single-pane window is short of, so only a
     // two-pane layout earns one. "rail" is never a default output; it is the
@@ -98,9 +91,6 @@ export let policy = {
   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/segmented-control.tsx

@@ -4,7 +4,7 @@ import { createPress } from "./press"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
-import { typeStyle, lightOnDark } from "./typography"
+import { typeStyle } from "./typography"
 import { Surface, facePaint } from "./surface"
 import type { ElevationLevel, Option, StyleProps, TransitionProps, TransitionStyleProp, TransitionViewProp } from "./types"
 import { partTransition, partTransitionEnd, splitTransition, transitionEndFor } from "./types"
@@ -241,7 +241,7 @@ export function SegmentedControl<T>(props: SegmentedControlProps<T>) {
               <text
                 transition={colorFade()}
                 color={label(active())}
-                {...typeStyle("body", active() ? lightOnDark(label(true), activeFill()) : undefined)}
+                {...typeStyle("body")}
               >
                 {opt.label}
               </text>

package/src/text.tsx

@@ -4,7 +4,6 @@ import type { StyleProps, TextLayoutProps, TransitionProps, TransitionViewProp }
 import { splitTextLayout, splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
 import { theme, type TextVariant } from "./theme"
 import { policy } from "./policy"
-import { typeWeight } from "./typography"
 import { colorFade } from "./motion"
 
 // Semantic text colors, resolved through the theme. Curated: only tokens that
@@ -15,9 +14,8 @@ export interface TextProps extends PointerProps, TransitionProps<TransitionViewP
   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.
+  // (role-derived or explicit) is multiplied by policy.textScale; 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
@@ -86,7 +84,7 @@ export function Text(props: TextProps) {
         fontSize={size()}
         lineHeight={props.layout?.lineHeight ?? role().lineHeight}
         fontStyle={props.layout?.fontStyle}
-        fontWeight={typeWeight(props.layout?.fontWeight ?? role().weight, size())}
+        fontWeight={props.layout?.fontWeight ?? role().weight}
         textAlign={props.layout?.textAlign}
         maxLines={props.layout?.maxLines}
       >

package/src/typography.ts

@@ -1,65 +1,26 @@
-import { brightness, warmText } from "@solidrt/core"
+import { warmText } from "@solidrt/core"
 import type { MeasureTextOptions } from "@solidrt/core"
-import { theme, type TextStyle, type TextVariant } from "./theme"
+import { theme, 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) {
+// (lineHeight is relative to the size, so it scales implicitly). Reactive
+// when called inside a tracked scope, like any theme/policy read. The weight
+// is the role's own: the text engine blends coverage with DirectWrite's
+// recipe, so light-on-dark text needs no compensation at any display scale.
+export function typeStyle(variant: TextVariant) {
   let role = theme.text[variant]
-  let size = role.size * policy.textScale
   return {
     fontFamily: theme.text.fontFamily,
-    fontSize: size,
+    fontSize: role.size * policy.textScale,
     lineHeight: role.lineHeight,
-    fontWeight: typeWeight(role.weight, size, onDark),
+    fontWeight: role.weight,
   }
 }
 
-// Every role of the type scale, in both polarities' weights (a button's
-// label on its primary fill is the opposite polarity of body text), plus
-// the mono family at body size for code spans.
+// Every role of the type scale, plus the mono family at body size for code
+// spans.
 const TYPE_SCALE_VARIANTS: TextVariant[] = ["caption", "label", "body", "title", "heading"]
 
 // The font styles the theme's type scale draws in, as warmText takes them.
@@ -67,10 +28,8 @@ const TYPE_SCALE_VARIANTS: TextVariant[] = ["caption", "label", "body", "title",
 export function typeScaleStyles(): MeasureTextOptions[] {
   let styles: MeasureTextOptions[] = []
   for (let variant of TYPE_SCALE_VARIANTS) {
-    for (let onDark of [false, true]) {
-      let style = typeStyle(variant, onDark)
-      styles.push({ fontFamily: style.fontFamily, fontSize: style.fontSize, fontWeight: style.fontWeight })
-    }
+    let style = typeStyle(variant)
+    styles.push({ fontFamily: style.fontFamily, fontSize: style.fontSize, fontWeight: style.fontWeight })
   }
   let body = typeStyle("body")
   styles.push({ fontFamily: theme.text.monoFamily, fontSize: body.fontSize, fontWeight: body.fontWeight })