@boyernick/standard-ui-react 0.4.2-canary.65 → 0.4.2-canary.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boyernick/standard-ui-react",
-  "version": "0.4.2-canary.65",
+  "version": "0.4.2-canary.67",
   "description": "React components for StandardUI",
   "license": "MIT",
   "type": "module",

package/src/lib/lens-glass/config.ts

@@ -18,13 +18,24 @@ export interface GlassConfig {
   rim?: number;
   /** Rim light width. Default 3.5, less on small panes. */
   rimWidth?: number;
+  /**
+   * A hairline shade just inside the outline, deepest away from the light.
+   * On a light page the rim light has nothing to brighten, so without it a
+   * pane's only edge is its soft shadow. Default 0.16 over a light ground,
+   * 0 over a dark one.
+   */
+  edge?: number;
   /** Specular sheen on the lit side of the bezel. Default 0.35. */
   specular?: number;
   /** Frost blur, as a Gaussian sigma. Default 3. */
   frost?: number;
   /** Film grain. Default 0.07. */
   grain?: number;
-  /** Multiplier on the ground seen through the glass (1 = undimmed). Default 0.8. */
+  /**
+   * Multiplier on the ground seen through the glass (1 = undimmed). Default
+   * 0.8 over a dark ground, 1 over a light one: dimming a white page only
+   * turned the glass a flat mid-grey.
+   */
   dim?: number;
   /** Fraction of the height where the glass starts fading out. Default 1 (no fade). */
   fadeStart?: number;
@@ -90,6 +101,7 @@ export interface ResolvedGlass {
   dispersionBlue: number;
   rim: number;
   rimWidth: number;
+  edge: number;
   specular: number;
   frost: number;
   grain: number;
@@ -121,6 +133,7 @@ export function resolveGlass(
   width: number,
   height: number,
   cssRadius: number,
+  options?: { lightGround?: boolean },
 ): ResolvedGlass {
   const short = Math.max(1, Math.min(width, height));
   const radius = pick(config.cornerRadius, cssRadius, 0, short / 2);
@@ -139,10 +152,11 @@ export function resolveGlass(
     dispersionBlue: pick(config.dispersionBlue, 0.8, 0, 1),
     rim: pick(config.rim, 0.5, 0, 2),
     rimWidth: pick(config.rimWidth, Math.min(3.5, Math.max(1.25, short * 0.04)), 0.5, 12),
+    edge: pick(config.edge, options?.lightGround ? 0.16 : 0, 0, 1),
     specular: pick(config.specular, 0.35, 0, 2),
     frost: pick(config.frost, 3, 0, 16),
     grain: pick(config.grain, 0.07, 0, 0.5),
-    dim: pick(config.dim, 0.8, 0, 1.5),
+    dim: pick(config.dim, options?.lightGround ? 1 : 0.8, 0, 1.5),
     fadeStart: pick(config.fadeStart, 1, 0, 1),
     fadeEnd: pick(config.fadeEnd, 1, 0, 1),
     shadow: pick(config.shadow, 0.18, 0, 1),

package/src/lib/lens-glass/renderer.ts

@@ -240,6 +240,33 @@ function imageCopy(image: HTMLImageElement, ready: () => void): CanvasImageSourc
   return null;
 }
 
+/** Whether a CSS colour is light (relative luminance over one half), cached per colour. */
+const groundLightness = new Map<string, boolean>();
+let lightnessProbe: CanvasRenderingContext2D | null = null;
+
+function isLightGround(color: string) {
+  const known = groundLightness.get(color);
+  if (known !== undefined) return known;
+  lightnessProbe ??= Object.assign(document.createElement("canvas"), { width: 1, height: 1 })
+    .getContext("2d", { willReadFrequently: true });
+  let light = false;
+  if (lightnessProbe) {
+    // The canvas parses any CSS colour the page can use, oklab and all.
+    lightnessProbe.clearRect(0, 0, 1, 1);
+    lightnessProbe.fillStyle = "#000";
+    lightnessProbe.fillStyle = color;
+    lightnessProbe.fillRect(0, 0, 1, 1);
+    const [r, g, b] = lightnessProbe.getImageData(0, 0, 1, 1).data;
+    const linear = (value: number) => {
+      const c = value / 255;
+      return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    };
+    light = 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b) > 0.5;
+  }
+  groundLightness.set(color, light);
+  return light;
+}
+
 /** Whether drawing this source would taint a canvas (its pixels are cross-origin). */
 function unreadable(source: CanvasImageSource) {
   const probe = document.createElement("canvas");
@@ -580,7 +607,9 @@ export function createLensGlass({ root, glassElements, defaults = {} }: LensGlas
     const style = getComputedStyle(element);
     const config = { ...defaults, ...parseConfig(element.dataset.config) };
     const cssRadius = parseFloat(style.borderTopLeftRadius) || 0;
-    const glass = resolveGlass(config, rect.width, rect.height, cssRadius);
+    const glass = resolveGlass(config, rect.width, rect.height, cssRadius, {
+      lightGround: isLightGround(ground),
+    });
 
     const pad = samplePadding(glass) + OVERFLOW;
     const region: Box = {
@@ -736,7 +765,7 @@ export function createLensGlass({ root, glassElements, defaults = {} }: LensGlas
       ["u_radius", glass.radius], ["u_power", glass.power], ["u_bezel", glass.bezel],
       ["u_bend", glass.bend], ["u_dispersionRed", glass.dispersionRed],
       ["u_dispersionBlue", glass.dispersionBlue], ["u_rim", glass.rim],
-      ["u_rimWidth", glass.rimWidth], ["u_specular", glass.specular], ["u_frost", glass.frost],
+      ["u_rimWidth", glass.rimWidth], ["u_edge", glass.edge], ["u_specular", glass.specular], ["u_frost", glass.frost],
       ["u_grain", glass.grain], ["u_dim", glass.dim], ["u_fadeStart", glass.fadeStart],
       ["u_fadeEnd", glass.fadeEnd], ["u_shadow", glass.shadow],
       ["u_hover", glass.button ? pane.hover : 0], ["u_press", glass.button ? pane.press : 0],

package/src/lib/lens-glass/shader.ts

@@ -31,6 +31,7 @@ uniform float u_dispersionRed;
 uniform float u_dispersionBlue;
 uniform float u_rim;
 uniform float u_rimWidth;
+uniform float u_edge;
 uniform float u_specular;
 uniform float u_frost;
 uniform float u_grain;
@@ -125,6 +126,11 @@ void main() {
   color += u_rim * (1.0 + 0.4 * u_hover) * rim * (0.55 + 0.45 * facing);
   color += u_specular * 0.35 * pow(t, 3.0) * facing;
 
+  // Hairline edge: a light ground clips the rim to white, so shade one CSS
+  // pixel inside the outline instead, more on the side away from the light.
+  float hairline = 1.0 - smoothstep(0.0, 1.0, inside);
+  color = min(color, vec3(1.0)) * (1.0 - u_edge * hairline * (1.0 - 0.45 * facing));
+
   // Grain, fixed to the device pixel grid so a still pane never needs redrawing.
   color += (hash(floor(scenePx * u_dpr)) - 0.5) * u_grain;