barua-ui 0.2.1 → 0.2.3

package/css/tokens.css

@@ -329,6 +329,92 @@
   [data-theme="light"] { color-scheme: light; }
   [data-theme="dark"]  { color-scheme: dark; }
 
+  /* ---- Baked glass -------------------------------------------------------
+   *
+   * The blur behind a panel is recomputed by the GPU every frame it changes.
+   * But when the thing behind it is the wallpaper, that blur has exactly one
+   * possible answer, and it can be worked out once instead.
+   *
+   * `Barua.wallpaper` bakes a heavily downscaled copy of the picture when it is
+   * hung — a 64px-wide image is about a kilobyte, and drawing it back at cover
+   * size is a blur, because that is what interpolation does. Both the wall and
+   * the copy are `fixed`, so the copy lands exactly where the sharp original
+   * sits underneath and the panel looks through itself.
+   *
+   * No backdrop-filter, no compositor layer per panel, no per-frame pass: the
+   * expensive part already happened, and what is left is drawing an image.
+   *
+   * Only for panels over the wall. Anything that must blur live content —
+   * a sheet over a scrolling list — keeps the real filter, so this is opt-in
+   * per document rather than a global swap.
+   */
+  .b-has-wallpaper[data-b-glass="baked"] {
+    --b-glass: none;
+    --b-glass-light: none;
+    --b-glass-heavy: none;
+
+    --b-material-ultrathin-bg:
+      linear-gradient(light-dark(rgba(255, 255, 255, 0.22), rgba(30, 30, 36, 0.25)),
+                      light-dark(rgba(255, 255, 255, 0.22), rgba(30, 30, 36, 0.25))),
+      var(--b-wall-blur, none) center / cover no-repeat fixed;
+    --b-material-thin-bg:
+      linear-gradient(light-dark(rgba(255, 255, 255, 0.38), rgba(30, 30, 36, 0.40)),
+                      light-dark(rgba(255, 255, 255, 0.38), rgba(30, 30, 36, 0.40))),
+      var(--b-wall-blur, none) center / cover no-repeat fixed;
+    --b-material-regular-bg:
+      linear-gradient(light-dark(rgba(252, 252, 254, 0.55), rgba(30, 30, 36, 0.55)),
+                      light-dark(rgba(252, 252, 254, 0.55), rgba(30, 30, 36, 0.55))),
+      var(--b-wall-blur, none) center / cover no-repeat fixed;
+    --b-material-thick-bg:
+      linear-gradient(light-dark(rgba(250, 250, 253, 0.72), rgba(28, 28, 34, 0.74)),
+                      light-dark(rgba(250, 250, 253, 0.72), rgba(28, 28, 34, 0.74))),
+      var(--b-wall-blur, none) center / cover no-repeat fixed;
+    --b-material-chrome-bg:
+      linear-gradient(light-dark(rgba(248, 249, 252, 0.62), rgba(22, 22, 27, 0.66)),
+                      light-dark(rgba(248, 249, 252, 0.62), rgba(22, 22, 27, 0.66))),
+      var(--b-wall-blur, none) center / cover no-repeat fixed;
+  }
+
+  /* ---- When glass costs too much, or cannot be drawn ---------------------- */
+  /*
+   * Two situations, one answer: make the materials opaque.
+   *
+   * "Reduce transparency" is the switch people flip when blur is expensive on
+   * their hardware or hard to read against — macOS, iOS and Windows all expose
+   * it, and honouring it is not decoration, it is the only relief we offer a
+   * weak GPU. The @supports case is the browser that cannot draw a backdrop
+   * filter at all, where an ultrathin material is a 22%-alpha wash over a
+   * wallpaper and the text on it stops being legible.
+   *
+   * Overriding the tokens rather than the components means every glass surface
+   * in the system answers at once — the blur variables resolve to none, so the
+   * 137 backdrop-filter declarations turn themselves off.
+   */
+  @media (prefers-reduced-transparency: reduce) {
+    :root {
+      --b-glass: none;
+      --b-glass-light: none;
+      --b-glass-heavy: none;
+      --b-material-ultrathin-bg: var(--b-surface);
+      --b-material-thin-bg:      var(--b-surface);
+      --b-material-regular-bg:   var(--b-surface);
+      --b-material-thick-bg:     var(--b-surface);
+      --b-material-chrome-bg:    var(--b-surface-2);
+      --b-material-neutral-bg:   var(--b-surface-2);
+    }
+  }
+
+  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    :root {
+      --b-material-ultrathin-bg: var(--b-surface);
+      --b-material-thin-bg:      var(--b-surface);
+      --b-material-regular-bg:   var(--b-surface);
+      --b-material-thick-bg:     var(--b-surface);
+      --b-material-chrome-bg:    var(--b-surface-2);
+      --b-material-neutral-bg:   var(--b-surface-2);
+    }
+  }
+
   /* Accent re-tinting: <html data-accent="purple"> etc. */
   [data-accent="indigo"] { --b-color-accent: var(--b-color-indigo); --b-color-accent-hover: color-mix(in srgb, var(--b-color-indigo) 85%, black); --b-color-accent-soft: var(--b-color-indigo-soft); --b-color-accent-text: var(--b-color-indigo); }
   [data-accent="purple"] { --b-color-accent: var(--b-color-purple); --b-color-accent-hover: color-mix(in srgb, var(--b-color-purple) 85%, black); --b-color-accent-soft: var(--b-color-purple-soft); --b-color-accent-text: var(--b-color-purple); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barua-ui",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Barua UI \u2014 Apple-DNA design system (glass materials, Barua blue) as React components over pure CSS.",
   "license": "MIT",
   "type": "module",