@solidrt/components 0.0.67 → 0.0.68

package/README.md

@@ -163,9 +163,11 @@ API: `StyleProps`, `Glow`, `Glass`, `Material`, `MaterialRole`, `ElevationLevel`
 
 `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.
 
+`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.
+
 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.
 
-API: `typeStyle`, `typeWeight`, `lightOnDark` - typed and commented in [src/typography.ts](./src/typography.ts).
+API: `typeStyle`, `typeWeight`, `lightOnDark`, `typeScaleStyles`, `warmTypeScale` - typed and commented in [src/typography.ts](./src/typography.ts).
 
 ## Spacing
 

package/docs/typography.md

@@ -2,4 +2,6 @@
 
 `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.
 
+`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.
+
 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.67",
+  "version": "0.0.68",
   "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.67"
+    "@solidrt/core": "0.0.68"
   }
 }

package/src/index.ts

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

package/src/typography.ts

@@ -1,4 +1,5 @@
-import { brightness } from "@solidrt/core"
+import { brightness, warmText } from "@solidrt/core"
+import type { MeasureTextOptions } from "@solidrt/core"
 import { theme, type TextStyle, type TextVariant } from "./theme"
 import { policy } from "./policy"
 
@@ -55,3 +56,30 @@ export function typeStyle(variant: TextVariant, onDark?: boolean) {
     fontWeight: typeWeight(role.weight, size, onDark),
   }
 }
+
+// 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.
+const TYPE_SCALE_VARIANTS: TextVariant[] = ["caption", "label", "body", "title", "heading"]
+
+// The font styles the theme's type scale draws in, as warmText takes them.
+// Reactive like typeStyle: a theme or policy change yields the new set.
+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 body = typeStyle("body")
+  styles.push({ fontFamily: theme.text.monoFamily, fontSize: body.fontSize, fontWeight: body.fontWeight })
+  return styles
+}
+
+// Warm the text engine for the theme's type scale (see warmText in
+// @solidrt/core): the components' Window does this on mount and on every
+// theme change; an app without one calls it at startup.
+export function warmTypeScale(): void {
+  warmText(typeScaleStyles())
+}

package/src/window.tsx

@@ -1,8 +1,9 @@
-import { displayScale } from "@solidrt/core"
+import { createEffect, displayScale, warmText } from "@solidrt/core"
 import type { LayoutProps, PointerProps, WindowShaderProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 import { colorFade } from "./motion"
 import { theme } from "./theme"
+import { typeScaleStyles } from "./typography"
 
 export interface WindowProps extends PointerProps {
   children?: any
@@ -35,6 +36,13 @@ function themeFinish(): WindowShaderProps | null {
 // the paint-only backgroundColor from style applies here. Its finish is the
 // theme's, or the app's own (`shader`).
 export function Window(props: WindowProps) {
+  // The theme's type scale warmed ahead of the first screen, and again
+  // when the theme or the text policy changes it (a warmed style costs
+  // nothing twice).
+  createEffect(
+    () => typeScaleStyles(),
+    styles => warmText(styles),
+  )
   return (
     <window
       {...props.layout}