@boyernick/standard-ui-react 0.4.2-canary.64 → 0.4.2-canary.66

package/package.json

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

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

@@ -24,7 +24,11 @@ export interface GlassConfig {
   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;
@@ -121,6 +125,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);
@@ -142,7 +147,7 @@ export function resolveGlass(
     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 = {

package/src/modal.tsx

@@ -149,7 +149,9 @@ export const ModalTrigger = ({
 )
 
 const ModalBackdrop = () => (
-  <DialogBackdrop className="bg-surface-scrim/95" />
+  // DialogBackdrop is black/60 in dark mode; say 95 there too, or the page
+  // shows through behind the image.
+  <DialogBackdrop className="bg-surface-scrim/95 dark:bg-surface-scrim/95" />
 )
 
 const ModalBackground = ({ src }: { src: string }) => (