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

package/package.json

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

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

@@ -18,6 +18,13 @@ 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. */
@@ -94,6 +101,7 @@ export interface ResolvedGlass {
   dispersionBlue: number;
   rim: number;
   rimWidth: number;
+  edge: number;
   specular: number;
   frost: number;
   grain: number;
@@ -144,6 +152,7 @@ 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),

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

@@ -765,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;