@pathscale/ui 2.3.2 → 2.4.0

package/dist/components/card/Card.css

@@ -98,16 +98,26 @@
     backdrop-filter: none;
   }
 
-  /* Absorbs GlassPanel. The highlight ring was its `highlight` flag. */
+  /* Absorbs GlassPanel. The highlight ring was its `highlight` flag.
+
+     Every `--glass-*` read below carries a fallback, and that is load-bearing
+     rather than tidy. An undefined custom property does not fall back to its
+     initial value: CSS drops the whole declaration. Three of these were read
+     bare, so a theme that defined twenty-eight of the thirty-one glass tokens
+     got a card with no background at all rather than a plainer one, and the
+     only themes that defined all thirty-one were the two shipped here. Both
+     use `white` for the three colours, so that is what the fallbacks say.
+
+     `src/styles/glass.ts` derives the other twenty-five from three numbers. */
   .card--material-glass {
     --card-bg: color-mix(
       in oklab,
-      var(--glass-background-color),
+      var(--glass-background-color, white),
       transparent calc(100% - var(--glass-background-opacity, 55%))
     );
     --card-border: color-mix(
       in oklab,
-      var(--glass-border-color),
+      var(--glass-border-color, white),
       transparent calc(100% - var(--glass-border-opacity, 12%))
     );
     backdrop-filter: blur(var(--card-glass-blur, var(--glass-blur, 50px)))
@@ -125,7 +135,7 @@
     box-shadow: inset 0 var(--border, 1px) 0 0
       color-mix(
         in oklab,
-        var(--glass-highlight-color),
+        var(--glass-highlight-color, white),
         transparent calc(100% - var(--glass-highlight-opacity, 18%))
       );
   }

package/dist/index.d.ts

@@ -130,3 +130,5 @@ export type { ColorSwatchProps, ColorSwatchShape, ColorSwatchSize, } from "./com
 export { default as ChatBubble } from "./components/chatbubble";
 export { summarizeStatus, diffStatus } from "./components/status";
 export type { Health, Quality, StatusItem, StatusSummary, StatusTransition } from "./components/status";
+export { GLASS_DEFAULTS, GLASS_LIMITS, applyGlassTokens, glassTokensToCss, resolveGlassTokens, } from "./styles/glass";
+export type { GlassMode, GlassTuning } from "./styles/glass";

package/dist/index.js

@@ -73,4 +73,5 @@ export { ListBoxItem, ListBoxItemIndicator, ListBoxSection, default as ListBox }
 export { default as ColorSwatch } from "./components/color-swatch/index.js";
 export { default as ChatBubble } from "./components/chatbubble/index.js";
 export { diffStatus, summarizeStatus } from "./components/status/index.js";
+export { GLASS_DEFAULTS, GLASS_LIMITS, applyGlassTokens, glassTokensToCss, resolveGlassTokens } from "./styles/glass.js";
 export { DEFAULT_GAP as DEFAULT_TOAST_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR as DEFAULT_TOAST_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, ToastActionButton, ToastCloseButton, ToastContent, ToastDescription, ToastIndicator, ToastProvider, ToastQueue, ToastTitle, index_js_toast as Toast, index_js_toast as toast, toastQueue };

package/dist/layouts.manifest.json

@@ -1,7 +1,7 @@
 {
   "format": "solid-layouts-library-v2",
   "package": "@pathscale/ui",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "components": {
     "Accordion": {
       "kind": "embedded"

package/dist/styles/glass.d.ts

@@ -0,0 +1,89 @@
+/**
+ * Glass, as three numbers instead of thirty-one.
+ *
+ * `material="glass"` is styled by a family of `--glass-*` custom properties.
+ * Both shipped themes declare all of them by hand, which made glass a thing you
+ * inherited rather than a thing you could add: a new theme had to copy
+ * thirty-one values, and three of them are read without a fallback, so a theme
+ * that copied twenty-eight got a card with no background at all rather than a
+ * plainer one. An undefined custom property does not fall back to its initial
+ * value; CSS drops the whole declaration.
+ *
+ * So the set splits in two. Six are colours and stay with the theme, because
+ * only the theme knows what its glass is tinted with. The other twenty-five are
+ * opacities, sizes and blurs, and every one of them is a function of three
+ * numbers:
+ *
+ *   blur        how far the backdrop is smeared, in pixels
+ *   refraction  how much the surface asserts itself: tint, border, highlights
+ *   depth       how far off the page it sits: glows, sheen, shadow
+ *
+ * Adding glass to a theme is now those three numbers and, if it wants them, the
+ * six colours. The curves are lifted from the tuning surface that consulting.parcle.ai
+ * arrived at by eye against this same token vocabulary, so the shipped themes
+ * keep the appearance they already had.
+ */
+export type GlassMode = "light" | "dark";
+/** What a theme sets. Everything else is derived. */
+export type GlassTuning = {
+    /** Backdrop blur radius in pixels. 0 turns glass into a plain translucent fill. */
+    blur: number;
+    /**
+     * How much the surface asserts itself, 0 to 0.4.
+     *
+     * Drives tint, border, highlights and rim together, because they are one
+     * physical property and tuning them separately is how the thirty-one-value
+     * version became unmaintainable.
+     */
+    refraction: number;
+    /** How far off the page it sits, 0 to 30. Drives glows, sheen and shadow. */
+    depth: number;
+};
+export declare const GLASS_LIMITS: {
+    readonly blur: {
+        readonly min: 0;
+        readonly max: 50;
+    };
+    readonly refraction: {
+        readonly min: 0;
+        readonly max: 0.4;
+    };
+    readonly depth: {
+        readonly min: 0;
+        readonly max: 30;
+    };
+};
+/** What the shipped themes use. Both land on the same numbers. */
+export declare const GLASS_DEFAULTS: Record<GlassMode, GlassTuning>;
+/**
+ * The `--glass-*` custom properties three numbers imply.
+ *
+ * Returns only what is derived. The six colours - background, border,
+ * highlight, the two rim stops and the inner glow - are the theme's, and a
+ * theme that sets none of them still renders because the component CSS carries
+ * fallbacks for all six.
+ */
+export declare function resolveGlassTokens(tuning: Partial<GlassTuning>, mode: GlassMode): Record<string, string>;
+/**
+ * Writes the derived tokens onto an element, `:root` by default.
+ *
+ * Inline styles rather than a stylesheet, because this is the layer above the
+ * theme: a theme sets its glass in CSS, and this is for changing it at runtime
+ * without a rebuild - a settings panel, a per-route override, a preview.
+ *
+ * A no-op without a DOM, so it is safe to call during server rendering.
+ */
+export declare function applyGlassTokens(tuning: Partial<GlassTuning>, mode: GlassMode, target?: {
+    style: {
+        setProperty(name: string, value: string): void;
+    };
+}): void;
+/**
+ * The derived tokens as a CSS declaration block, for a theme that wants them
+ * baked in rather than applied at runtime.
+ *
+ * The intended use is a build step or a scratch buffer: paste the output into a
+ * theme file beside its six colours and glass is part of that theme, with no
+ * JavaScript involved.
+ */
+export declare function glassTokensToCss(tuning: Partial<GlassTuning>, mode: GlassMode): string;

package/dist/styles/glass.js

@@ -0,0 +1,103 @@
+const GLASS_LIMITS = {
+    blur: {
+        min: 0,
+        max: 50
+    },
+    refraction: {
+        min: 0,
+        max: 0.4
+    },
+    depth: {
+        min: 0,
+        max: 30
+    }
+};
+const GLASS_DEFAULTS = {
+    light: {
+        blur: 9,
+        refraction: 0.31,
+        depth: 24
+    },
+    dark: {
+        blur: 9,
+        refraction: 0.31,
+        depth: 24
+    }
+};
+const clamp = (value, min, max, fallback)=>{
+    const n = Number(value);
+    return Number.isFinite(n) ? Math.min(max, Math.max(min, n)) : fallback;
+};
+const round = (v, places = 2)=>String(Math.round((v + Number.EPSILON) * 10 ** places) / 10 ** places);
+const pct = (v, places = 2)=>`${round(v, places)}%`;
+const px = (v, places = 2)=>`${round(v, places)}px`;
+function normalise(tuning, mode) {
+    const base = GLASS_DEFAULTS[mode];
+    const blur = clamp(tuning.blur, GLASS_LIMITS.blur.min, GLASS_LIMITS.blur.max, base.blur);
+    const refraction = clamp(tuning.refraction, GLASS_LIMITS.refraction.min, GLASS_LIMITS.refraction.max, base.refraction);
+    const depth = clamp(tuning.depth, GLASS_LIMITS.depth.min, GLASS_LIMITS.depth.max, base.depth);
+    const r = refraction / GLASS_LIMITS.refraction.max;
+    const d = depth / GLASS_LIMITS.depth.max;
+    return {
+        blur,
+        light: "light" === mode,
+        rs: 0 === r ? 0 : r ** 0.82,
+        rv: 0 === r ? 0 : r ** 0.95,
+        ds: 0 === d ? 0 : d ** 0.85,
+        r,
+        d
+    };
+}
+function resolveGlassTokens(tuning, mode) {
+    const v = normalise(tuning, mode);
+    const { rs, rv, ds, light } = v;
+    const zero = 0 === v.r;
+    const background = light ? zero ? 0 : 18 + 30 * rv : 7 * rv;
+    const border = light ? zero ? 0 : 18 + 18 * rs : 26 * rs;
+    const highlight = light ? zero ? 0 : 22 + 26 * rs : 24 * rs;
+    const bottomHighlight = light ? zero ? 0 : 10 + 14 * rs + 5 * ds : 3.5 * rs + 3 * rs * ds;
+    const edgeHighlight = light ? zero ? 0 : 20 + 22 * rs + 4 * ds : 18 * rs + 4 * ds;
+    const rimStart = light ? zero ? 0 : 14 + 18 * rs + 4 * ds : 17 * rs + 3 * ds;
+    const rimEnd = light ? zero ? 0 : 18 + 22 * rs + 4 * ds : 23 * rs + 5 * ds;
+    const innerGlow = light ? 0.035 * rs + 0.045 * rs * ds + 0.012 * ds : 0.055 * rs * ds + 0.018 * ds;
+    const topGlow = light ? 8 * ds * (0.4 + 0.6 * rs) : 6 * ds * (0.35 + 0.65 * rs);
+    const bottomGlow = light ? 9 * ds * (0.25 + 0.65 * rs) : 5 * ds * (0.2 + 0.55 * rs);
+    const sheen = light ? 14 * ds * (0.25 + 0.75 * rs) : 10 * ds * (0.25 + 0.75 * rs);
+    const fallbackBackground = Math.min(70, light ? background + 10 * rs : 8 * background + 12 * rs);
+    const shadow = ds > 0 ? `0 ${px(light ? 5 + 10 * ds : 4 + 10 * ds)} ${px(light ? 20 + 28 * ds : 18 + 26 * ds)} rgb(0 0 0 / ${pct(light ? 2 + 5 * ds : 3 + 7 * ds)})` : "0 0 0 rgb(0 0 0 / 0%)";
+    return {
+        "--glass-blur": px(v.blur, 0),
+        "--glass-saturation": round(1 + 0.18 * rs),
+        "--glass-brightness": "1",
+        "--glass-background-opacity": pct(background),
+        "--glass-border-opacity": pct(border),
+        "--glass-highlight-opacity": pct(highlight),
+        "--glass-bottom-highlight-opacity": pct(bottomHighlight),
+        "--glass-edge-highlight-opacity": pct(edgeHighlight),
+        "--glass-rim-start-opacity": pct(rimStart),
+        "--glass-rim-end-opacity": pct(rimEnd),
+        "--glass-inner-glow-alpha": round(innerGlow, 3),
+        "--glass-inner-glow-blur": px(ds > 0 ? 1 + 3 * ds : 0),
+        "--glass-inner-glow-spread": "0px",
+        "--glass-depth-top-glow-opacity": pct(topGlow),
+        "--glass-depth-bottom-glow-opacity": pct(bottomGlow),
+        "--glass-depth-sheen-opacity": pct(sheen),
+        "--glass-depth-sheen-size": pct(82 - 16 * ds),
+        "--glass-depth-surface-opacity": "0%",
+        "--glass-depth-surface-size": pct(82),
+        "--glass-glow-ring-opacity": pct(light ? 6 * rs : 10 * rs),
+        "--glass-liquid-edge-size": px(1 + 2 * rs),
+        "--glass-liquid-inner-blur": px(6 + 12 * rs),
+        "--glass-shadow-depth": shadow,
+        "--glass-fallback-background-opacity": pct(fallbackBackground)
+    };
+}
+function applyGlassTokens(tuning, mode, target) {
+    const element = target ?? ("u" < typeof document ? void 0 : document.documentElement);
+    if (!element) return;
+    for (const [name, value] of Object.entries(resolveGlassTokens(tuning, mode)))element.style.setProperty(name, value);
+}
+function glassTokensToCss(tuning, mode) {
+    return Object.entries(resolveGlassTokens(tuning, mode)).map(([name, value])=>`  ${name}: ${value};`).join("\n");
+}
+export { GLASS_DEFAULTS, GLASS_LIMITS, applyGlassTokens, glassTokensToCss, resolveGlassTokens };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "author": "pathscale",
   "repository": {
     "type": "git",