@pathscale/ui 2.6.6 → 2.7.0

package/dist/components/_shared/material.css

@@ -24,7 +24,68 @@
  */
 
 @layer components {
-  [data-material="solid"] {
+  /*
+   * Glass is one flip, not one flip per component.
+   *
+   * Every component here emits `data-material="solid"` when its prop is unset,
+   * so glass used to mean visiting each call site and passing `material="glass"`
+   * by hand. That is backwards: an app choosing glass is choosing a material for
+   * its whole surface vocabulary, not for one card. Put `glass` on the root
+   * element and every unset component becomes glass; take it off and they are
+   * all solid again. Nothing else changes and no call site is touched.
+   *
+   * `data-material` still wins where it is given explicitly, because "this one
+   * stays solid" is a real requirement inside a glassed app. The distinction is
+   * between a component that was never told and one that was, which is what
+   * `data-material-explicit` records.
+   *
+   * A root class rather than a style query on a token, which is the more
+   * natural expression and cannot be used. Verified by rendering rather than
+   * assumed: the engine's own `container_style_query.rs` shows the query never
+   * matching, so that form would have been dead CSS and the flip would have
+   * looked broken rather than unsupported.
+   */
+  :root.glass [data-material="solid"]:not([data-material-explicit]) {
+    background-color: color-mix(
+      in oklab,
+      var(--glass-background-color, white),
+      transparent calc(100% - var(--glass-background-opacity, 55%))
+    );
+    border-color: color-mix(
+      in oklab,
+      var(--glass-border-color, white),
+      transparent calc(100% - var(--glass-border-opacity, 12%))
+    );
+    -webkit-backdrop-filter: blur(var(--glass-blur, 9px))
+      saturate(var(--glass-saturation, 1.2))
+      brightness(var(--glass-brightness, 1));
+    backdrop-filter: blur(var(--glass-blur, 9px))
+      saturate(var(--glass-saturation, 1.2))
+      brightness(var(--glass-brightness, 1));
+  }
+
+  :root.glass [data-material="solid"]:not([data-material-explicit])::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    box-shadow: inset 0 var(--border, 1px) 0 0
+      color-mix(
+        in oklab,
+        var(--glass-highlight-color, white),
+        transparent calc(100% - var(--glass-highlight-opacity, 18%))
+      );
+  }
+
+  /*
+   * Solid, either because the app never flipped glass on or because this
+   * component was told to stay solid inside one that did. The `:not()` keeps
+   * this from overriding the flip above, which sits earlier in the file and
+   * would otherwise lose to it on source order alone.
+   */
+  :root:not(.glass) [data-material="solid"],
+  [data-material="solid"][data-material-explicit] {
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
   }
@@ -40,9 +101,11 @@
       var(--glass-border-color, white),
       transparent calc(100% - var(--glass-border-opacity, 12%))
     );
-    -webkit-backdrop-filter: blur(var(--glass-blur, 50px)) saturate(var(--glass-saturation, 1.2))
+    -webkit-backdrop-filter: blur(var(--glass-blur, 9px))
+      saturate(var(--glass-saturation, 1.2))
       brightness(var(--glass-brightness, 1));
-    backdrop-filter: blur(var(--glass-blur, 50px)) saturate(var(--glass-saturation, 1.2))
+    backdrop-filter: blur(var(--glass-blur, 9px))
+      saturate(var(--glass-saturation, 1.2))
       brightness(var(--glass-brightness, 1));
   }
 
@@ -74,12 +137,97 @@
    * A backdrop filter reads the pixels behind it, so nesting one inside another
    * blurs already-blurred output. That is muddy rather than deeper, and it
    * costs a second render pass to get there.
+   *
+   * The fill has to go with the filter, and dropping only the filter was a bug.
+   * Alpha stacks multiplicatively: two surfaces at 55% composite to 1 - 0.45²,
+   * which is 79.75%, and a pane that opaque reads as a flat slab rather than as
+   * glass. Turning the opacity axis down does not rescue it, because the inner
+   * fill keeps its own share of whatever the axis says. The inner surface
+   * therefore contributes nothing: the outer pane already painted the film they
+   * are both meant to share.
+   *
+   * The highlight goes too. It is the lit top edge of *a pane*, and an inner
+   * surface that is not its own pane drawing one puts a stray line across the
+   * middle of the outer one.
    */
   [data-material="glass"] [data-material="glass"] {
+    background-color: transparent;
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
   }
 
+  [data-material="glass"] [data-material="glass"]::before {
+    box-shadow: none;
+  }
+
+  /*
+   * Controls, when the surface around them is glass.
+   *
+   * Not scoped under `[data-material="glass"]`, and that is the point rather
+   * than an oversight. An app does not have to glass its panels with this
+   * library's attribute to have glass panels: the application that drove this
+   * work glasses its own surfaces with its own class, so an ancestor selector
+   * would have matched nothing there and every control would have kept the
+   * fill this block exists to change. The token is the contract instead. One
+   * value in one file decides it, which is what makes glass a setting rather
+   * than a migration.
+   *
+   * `--glass-control-opacity` defaults to 100%, so a theme that never sets it
+   * gets exactly what it renders today. Flipping glass on therefore cannot
+   * make a control unreadable, which is what lets the flip be safe to throw.
+   *
+   * The bug this fixes is the other side of it: in a light palette `base-100`
+   * is white, so a control taking it raw paints a bright slab on a dark glass
+   * panel. Five separate screenshots of "some elements are not getting glass"
+   * were all this one rule.
+   *
+   * A surface and a control cannot share one opacity token. Audited in that
+   * same application: of 38 uses of its inset colour, 30 were surfaces and 8
+   * were controls. Surfaces want the alpha. A control does not, because a
+   * translucent switch track, checkbox box or select trigger reads as disabled
+   * and its label stops being legible against whatever the glass admits from
+   * behind. Chrome stays solid to say it is live.
+   */
+  :is(
+    .checkbox__control,
+    .radio__control,
+    .input-control,
+    .ui-select__trigger,
+    .language-switcher__trigger,
+    .dropdown__trigger,
+    .toggle__track,
+    [data-control-material="solid"]
+  ):not([data-control-material="glass"]) {
+    background-color: rgb(
+      from var(--color-base-100) r g b /
+      var(--glass-control-opacity, 100%)
+    );
+  }
+
+  /*
+   * The exception: a control that *displays* a value rather than framing one.
+   *
+   * A colour wheel, a swatch or a gradient stop is showing you the thing it is
+   * filled with, so an opaque fill is a lie about the value rather than a cue
+   * that the control is live. Held solid, a light theme's colour wheel paints
+   * a white disc and the swatches on it stop being readable as swatches.
+   *
+   * Opted into per component, because which controls belong in this set is a
+   * judgement that can reasonably go either way, and a data attribute keeps it
+   * a token flip rather than a rewrite.
+   */
+  [data-control-material="glass"] {
+    background-color: color-mix(
+      in oklab,
+      var(--glass-background-color, white),
+      transparent
+        calc(
+          100% -
+          var(--glass-control-opacity, var(--glass-background-opacity, 55%))
+        )
+    );
+  }
+
   /*
    * No backdrop support, or a reader who asked for less transparency.
    *
@@ -87,7 +235,10 @@
    * happens to be behind it, because the tint alone is unreadable. The
    * highlight goes too: it reads as a stray line without the material.
    */
-  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  @supports not (
+      (backdrop-filter: blur(1px)) or
+      (-webkit-backdrop-filter: blur(1px))
+    ) {
     [data-material="glass"] {
       background-color: color-mix(
         in oklab,

package/dist/components/card/Card.css

@@ -72,7 +72,11 @@
   }
 
   .card--soft {
-    --card-bg: color-mix(in oklab, var(--card-accent), var(--color-base-100) 86%);
+    --card-bg: color-mix(
+      in oklab,
+      var(--card-accent),
+      var(--color-base-100) 86%
+    );
     --card-border: transparent;
   }
 
@@ -120,10 +124,14 @@
       var(--glass-border-color, white),
       transparent calc(100% - var(--glass-border-opacity, 12%))
     );
-    -webkit-backdrop-filter: blur(var(--card-glass-blur, var(--glass-blur, 50px)))
-      saturate(var(--glass-saturation, 1.2)) brightness(var(--glass-brightness, 1));
-    backdrop-filter: blur(var(--card-glass-blur, var(--glass-blur, 50px)))
-      saturate(var(--glass-saturation, 1.2)) brightness(var(--glass-brightness, 1));
+    -webkit-backdrop-filter: blur(
+        var(--card-glass-blur, var(--glass-blur, 9px))
+      )
+      saturate(var(--glass-saturation, 1.2))
+      brightness(var(--glass-brightness, 1));
+    backdrop-filter: blur(var(--card-glass-blur, var(--glass-blur, 9px)))
+      saturate(var(--glass-saturation, 1.2))
+      brightness(var(--glass-brightness, 1));
   }
 
   .card--material-glass::before {
@@ -145,42 +153,88 @@
     --card-shadow: none;
   }
   .card--elevation-sm {
-    --card-shadow: var(--shadow-sm, 0 1px 2px rgb(var(--shadow-color, 0 0 0) / 5%), 0 1px 3px rgb(var(--shadow-color, 0 0 0) / 10%));
+    --card-shadow: var(
+      --shadow-sm,
+      0 1px 2px rgb(var(--shadow-color, 0 0 0) / 5%),
+      0 1px 3px rgb(var(--shadow-color, 0 0 0) / 10%)
+    );
   }
   .card--elevation-md {
-    --card-shadow: var(--shadow-md, 0 4px 6px -1px rgb(var(--shadow-color, 0 0 0) / 10%), 0 2px 4px -2px rgb(var(--shadow-color, 0 0 0) / 10%));
+    --card-shadow: var(
+      --shadow-md,
+      0 4px 6px -1px rgb(var(--shadow-color, 0 0 0) / 10%),
+      0 2px 4px -2px rgb(var(--shadow-color, 0 0 0) / 10%)
+    );
   }
   .card--elevation-lg {
-    --card-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(var(--shadow-color, 0 0 0) / 10%), 0 4px 6px -4px rgb(var(--shadow-color, 0 0 0) / 10%));
+    --card-shadow: var(
+      --shadow-lg,
+      0 10px 15px -3px rgb(var(--shadow-color, 0 0 0) / 10%),
+      0 4px 6px -4px rgb(var(--shadow-color, 0 0 0) / 10%)
+    );
   }
 
   /* -------------------------------------------------------------- Padding */
-  .card--padding-none .card__body { padding: 0; }
-  .card--padding-xs .card__body { padding: 0.5rem; }
-  .card--padding-sm .card__body { padding: 0.75rem; }
-  .card--padding-md .card__body { padding: 1rem; }
-  .card--padding-lg .card__body { padding: 1.5rem; }
-  .card--padding-xl .card__body { padding: 2rem; }
+  .card--padding-none .card__body {
+    padding: 0;
+  }
+  .card--padding-xs .card__body {
+    padding: 0.5rem;
+  }
+  .card--padding-sm .card__body {
+    padding: 0.75rem;
+  }
+  .card--padding-md .card__body {
+    padding: 1rem;
+  }
+  .card--padding-lg .card__body {
+    padding: 1.5rem;
+  }
+  .card--padding-xl .card__body {
+    padding: 2rem;
+  }
 
   .card--padding-none .card__header,
-  .card--padding-none .card__footer { padding: 0; }
+  .card--padding-none .card__footer {
+    padding: 0;
+  }
   .card--padding-xs .card__header,
-  .card--padding-xs .card__footer { padding: 0.5rem; }
+  .card--padding-xs .card__footer {
+    padding: 0.5rem;
+  }
   .card--padding-sm .card__header,
-  .card--padding-sm .card__footer { padding: 0.75rem; }
+  .card--padding-sm .card__footer {
+    padding: 0.75rem;
+  }
   .card--padding-md .card__header,
-  .card--padding-md .card__footer { padding: 1rem; }
+  .card--padding-md .card__footer {
+    padding: 1rem;
+  }
   .card--padding-lg .card__header,
-  .card--padding-lg .card__footer { padding: 1.5rem; }
+  .card--padding-lg .card__footer {
+    padding: 1.5rem;
+  }
   .card--padding-xl .card__header,
-  .card--padding-xl .card__footer { padding: 2rem; }
+  .card--padding-xl .card__footer {
+    padding: 2rem;
+  }
 
   /* --------------------------------------------------------------- Radius */
-  .card--radius-none { border-radius: 0; }
-  .card--radius-sm { border-radius: 0.25rem; }
-  .card--radius-md { border-radius: 0.5rem; }
-  .card--radius-lg { border-radius: var(--radius-box, 1rem); }
-  .card--radius-full { border-radius: var(--radius-pill, 9999px); }
+  .card--radius-none {
+    border-radius: 0;
+  }
+  .card--radius-sm {
+    border-radius: 0.25rem;
+  }
+  .card--radius-md {
+    border-radius: 0.5rem;
+  }
+  .card--radius-lg {
+    border-radius: var(--radius-box, 1rem);
+  }
+  .card--radius-full {
+    border-radius: var(--radius-pill, 9999px);
+  }
 
   /* ---------------------------------------------------------- Interactive */
   .card--interactive {
@@ -188,7 +242,11 @@
   }
 
   .card--interactive:hover {
-    --card-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(var(--shadow-color, 0 0 0) / 10%), 0 4px 6px -4px rgb(var(--shadow-color, 0 0 0) / 10%));
+    --card-shadow: var(
+      --shadow-lg,
+      0 10px 15px -3px rgb(var(--shadow-color, 0 0 0) / 10%),
+      0 4px 6px -4px rgb(var(--shadow-color, 0 0 0) / 10%)
+    );
     transform: translateY(-1px);
   }
 
@@ -207,7 +265,8 @@
     align-items: center;
     justify-content: space-between;
     gap: 0.75rem;
-    border-block-end: var(--border, 1px) solid color-mix(in oklab, var(--color-base-300), transparent 40%);
+    border-block-end: var(--border, 1px) solid
+      color-mix(in oklab, var(--color-base-300), transparent 40%);
   }
 
   .card__body {
@@ -221,6 +280,7 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    border-block-start: var(--border, 1px) solid color-mix(in oklab, var(--color-base-300), transparent 40%);
+    border-block-start: var(--border, 1px) solid
+      color-mix(in oklab, var(--color-base-300), transparent 40%);
   }
 }

package/dist/components/card/Card.generated.js

@@ -60,6 +60,9 @@ const __solidLayoutCardLayout = (_stable, p)=>{
         },
         get ["data-material"] () {
             return p.material ?? "solid";
+        },
+        get ["data-material-explicit"] () {
+            return p.material ? "" : void 0;
         }
     }), true);
     insert(_el$4, createComponent(Show, {

package/dist/components/dialog/Dialog.generated.js

@@ -351,6 +351,9 @@ const __solidLayoutDialogContent = (_stable, p)=>{
                                 get ["data-material"] () {
                                     return p.material ?? "solid";
                                 },
+                                get ["data-material-explicit"] () {
+                                    return p.material ? "" : void 0;
+                                },
                                 get ["data-placement"] () {
                                     return placement();
                                 },

package/dist/components/drawer/Drawer.generated.js

@@ -235,6 +235,9 @@ const __solidLayoutDrawerContent = (_stable, p)=>{
         get ["data-material"] () {
             return p.material ?? "solid";
         },
+        get ["data-material-explicit"] () {
+            return p.material ? "" : void 0;
+        },
         get ["data-placement"] () {
             return placement();
         },

package/dist/components/menu/Menu.generated.js

@@ -175,6 +175,9 @@ const __solidLayoutMenuRoot = (_stable, p)=>{
                 get ["data-material"] () {
                     return p.material ?? "solid";
                 },
+                get ["data-material-explicit"] () {
+                    return p.material ? "" : void 0;
+                },
                 get ["data-theme"] () {
                     return p.dataTheme;
                 },

package/dist/components/navbar/Navbar.generated.js

@@ -22,6 +22,9 @@ const __solidLayoutNavbar = (_stable, p)=>{
         },
         get ["data-material"] () {
             return p.material ?? "solid";
+        },
+        get ["data-material-explicit"] () {
+            return p.material ? "" : void 0;
         }
     }, ()=>({
             class: classes()

package/dist/components/popover/Popover.generated.js

@@ -210,6 +210,9 @@ const __solidLayoutPopoverContent = (_stable, p)=>{
                         get ["data-material"] () {
                             return p.material ?? "solid";
                         },
+                        get ["data-material-explicit"] () {
+                            return p.material ? "" : void 0;
+                        },
                         get ["data-open"] () {
                             return ctx.isOpen() ? "true" : "false";
                         },

package/dist/layouts.manifest.json

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

package/dist/styles/glass.d.ts

@@ -38,6 +38,17 @@ export type GlassTuning = {
     refraction: number;
     /** How far off the page it sits, 0 to 30. Drives glows, sheen and shadow. */
     depth: number;
+    /**
+     * How much of the glass film a *control* takes, 0 to 1. Defaults to 0.
+     *
+     * Separate from `refraction` on purpose. Surfaces and controls cannot share
+     * one opacity: a translucent switch track or checkbox reads as disabled and
+     * its label stops being legible against whatever the glass admits. So glass
+     * cascades to surfaces only, and this is the deliberate opt-in for apps that
+     * want their chrome to pick some of it up. At 0 controls stay fully opaque,
+     * which is why turning glass on cannot make anything unreadable.
+     */
+    controlTint?: number;
 };
 export declare const GLASS_LIMITS: {
     readonly blur: {
@@ -52,6 +63,10 @@ export declare const GLASS_LIMITS: {
         readonly min: 0;
         readonly max: 30;
     };
+    readonly controlTint: {
+        readonly min: 0;
+        readonly max: 1;
+    };
 };
 /** What the shipped themes use. Both land on the same numbers. */
 export declare const GLASS_DEFAULTS: Record<GlassMode, GlassTuning>;

package/dist/styles/glass.js

@@ -10,18 +10,24 @@ const GLASS_LIMITS = {
     depth: {
         min: 0,
         max: 30
+    },
+    controlTint: {
+        min: 0,
+        max: 1
     }
 };
 const GLASS_DEFAULTS = {
     light: {
         blur: 9,
         refraction: 0.31,
-        depth: 24
+        depth: 24,
+        controlTint: 0
     },
     dark: {
         blur: 9,
         refraction: 0.31,
-        depth: 24
+        depth: 24,
+        controlTint: 0
     }
 };
 const clamp = (value, min, max, fallback)=>{
@@ -36,10 +42,12 @@ function normalise(tuning, 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 controlTint = clamp(tuning.controlTint, GLASS_LIMITS.controlTint.min, GLASS_LIMITS.controlTint.max, base.controlTint ?? 0);
     const r = refraction / GLASS_LIMITS.refraction.max;
     const d = depth / GLASS_LIMITS.depth.max;
     return {
         blur,
+        controlTint,
         light: "light" === mode,
         rs: 0 === r ? 0 : r ** 0.82,
         rv: 0 === r ? 0 : r ** 0.95,
@@ -52,6 +60,7 @@ function resolveGlassTokens(tuning, mode) {
     const v = normalise(tuning, mode);
     const { rs, rv, ds, light } = v;
     const zero = 0 === v.r;
+    const controlTint = v.controlTint;
     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;
@@ -89,7 +98,8 @@ function resolveGlassTokens(tuning, mode) {
         "--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)
+        "--glass-fallback-background-opacity": pct(fallbackBackground),
+        "--glass-control-opacity": pct(100 - controlTint * (100 - background))
     };
 }
 function applyGlassTokens(tuning, mode, target) {

package/package.json

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