@solidrt/core 0.0.20 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/core",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -27,7 +27,7 @@
     "colord": "^2.9.3"
   },
   "devDependencies": {
-    "@solidrt/flux-types": "0.0.20"
+    "@solidrt/flux-types": "0.0.21"
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-beta.15",

package/src/color.ts

@@ -1,6 +1,7 @@
 import { colord, extend } from "colord"
 import namesPlugin from "colord/plugins/names"
-extend([namesPlugin])
+import mixPlugin from "colord/plugins/mix"
+extend([namesPlugin, mixPlugin])
 
 /**
  * Parses a CSS color string (named, hex, `rgb()`, `hsl()`, ...) into a packed
@@ -13,6 +14,25 @@ export function parseColor(color: string): number {
   return (((r & 0xFF) << 24) | ((g & 0xFF) << 16) | ((b & 0xFF) << 8) | ((a * 255) & 0xFF)) >>> 0
 }
 
+/**
+ * Mixes two CSS colors in the CIE LAB color space; `t` is the fraction of `b`
+ * (0 = pure `a`, 1 = pure `b`). Returns an opaque hex string. Use it to derive
+ * semantic tones (muted text, subtle borders) instead of alpha overlays, so
+ * the resulting color does not depend on what is drawn beneath it.
+ */
+export function mixColors(a: string, b: string, t: number): string {
+  return colord(a).mix(b, t).toHex()
+}
+
+/**
+ * Perceived brightness of a CSS color, 0 (black) to 1 (white), YIQ-weighted.
+ * Compare a text color against its backdrop to decide rendering polarity,
+ * e.g. whether a label sits light-on-dark (see typeWeight in components).
+ */
+export function brightness(color: string): number {
+  return colord(color).brightness()
+}
+
 // A color stop: `offset` is 0..1 along the gradient, `color` any CSS color string.
 export type GradientStop = { offset: number; color: string }
 

package/src/environment.ts

@@ -55,6 +55,19 @@ function ensureOrientationState() {
   orientationAccessor = orientation
 }
 
+let textScaleAccessor: (() => number) | undefined
+
+function ensureTextScaleState() {
+  if (textScaleAccessor) return
+  let [scale, setScale] = createSignal(1)
+  // Sticky, like systemTheme. Guard nonsense values: a runtime bug reporting
+  // 0 or a negative would otherwise collapse all text.
+  on("textScale", (e: { scale?: number }) => {
+    setScale(typeof e.scale === "number" && e.scale > 0 ? e.scale : 1)
+  })
+  textScaleAccessor = scale
+}
+
 let mouseSeenAccessor: (() => boolean) | undefined
 let touchSeenAccessor: (() => boolean) | undefined
 
@@ -127,11 +140,25 @@ export let env = {
     ensureDevicesState()
     return devicesAccessor!()
   },
-  /** The OS-level dark/light preference. */
+  /**
+   * The OS-level dark/light preference. Starts "unknown" and resolves once
+   * the runtime's `systemTheme` event fires - read it in a tracked scope
+   * (JSX, memo, effect); a top-level/untracked read will freeze at
+   * "unknown" and never see the resolved value.
+   */
   get systemTheme(): SystemTheme {
     ensureSystemThemeState()
     return systemThemeAccessor!()
   },
+  /**
+   * The OS text scaling preference (Dynamic Type / font scale), as a
+   * multiplier. 1 until a runtime reports it via the sticky `textScale`
+   * event; no runtime does yet.
+   */
+  get textScale(): number {
+    ensureTextScaleState()
+    return textScaleAccessor!()
+  },
   /** Orientation of the display the window is on. */
   get orientation(): Orientation {
     ensureOrientationState()

package/src/index.ts

@@ -1,7 +1,7 @@
 export * from "./renderer"
 export { setFocus, getFocusedNodeId, measureText, getBoundingBox } from "./core"
 export type { BoundingBox } from "./core"
-export { parseColor, createLinearGradient, createRadialGradient } from "./color"
+export { parseColor, mixColors, brightness, createLinearGradient, createRadialGradient } from "./color"
 export type { Gradient, GradientStop } from "./color"
 export { onFrame, onLayout, onResize, onWindowFocus, onWindowBlur } from "./window"
 export { setPointerCapture, releasePointerCapture } from "./window"

package/src/types.d.ts

@@ -136,6 +136,9 @@ export interface TransformProps {
   y?: number
   cx?: number
   cy?: number
+  // Group opacity in 0..1: children are composited together, then faded as a
+  // whole (CSS `opacity`). Does not affect hit testing.
+  opacity?: number
   scrollX?: number
   scrollY?: number
 }