barua-ui 0.2.2 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/tokens.css +46 -0
- package/package.json +1 -1
package/css/tokens.css
CHANGED
|
@@ -329,6 +329,52 @@
|
|
|
329
329
|
[data-theme="light"] { color-scheme: light; }
|
|
330
330
|
[data-theme="dark"] { color-scheme: dark; }
|
|
331
331
|
|
|
332
|
+
/* ---- Baked glass -------------------------------------------------------
|
|
333
|
+
*
|
|
334
|
+
* The blur behind a panel is recomputed by the GPU every frame it changes.
|
|
335
|
+
* But when the thing behind it is the wallpaper, that blur has exactly one
|
|
336
|
+
* possible answer, and it can be worked out once instead.
|
|
337
|
+
*
|
|
338
|
+
* `Barua.wallpaper` bakes a heavily downscaled copy of the picture when it is
|
|
339
|
+
* hung — a 64px-wide image is about a kilobyte, and drawing it back at cover
|
|
340
|
+
* size is a blur, because that is what interpolation does. Both the wall and
|
|
341
|
+
* the copy are `fixed`, so the copy lands exactly where the sharp original
|
|
342
|
+
* sits underneath and the panel looks through itself.
|
|
343
|
+
*
|
|
344
|
+
* No backdrop-filter, no compositor layer per panel, no per-frame pass: the
|
|
345
|
+
* expensive part already happened, and what is left is drawing an image.
|
|
346
|
+
*
|
|
347
|
+
* Only for panels over the wall. Anything that must blur live content —
|
|
348
|
+
* a sheet over a scrolling list — keeps the real filter, so this is opt-in
|
|
349
|
+
* per document rather than a global swap.
|
|
350
|
+
*/
|
|
351
|
+
.b-has-wallpaper[data-b-glass="baked"] {
|
|
352
|
+
--b-glass: none;
|
|
353
|
+
--b-glass-light: none;
|
|
354
|
+
--b-glass-heavy: none;
|
|
355
|
+
|
|
356
|
+
--b-material-ultrathin-bg:
|
|
357
|
+
linear-gradient(light-dark(rgba(255, 255, 255, 0.22), rgba(30, 30, 36, 0.25)),
|
|
358
|
+
light-dark(rgba(255, 255, 255, 0.22), rgba(30, 30, 36, 0.25))),
|
|
359
|
+
var(--b-wall-blur, none) center / cover no-repeat fixed;
|
|
360
|
+
--b-material-thin-bg:
|
|
361
|
+
linear-gradient(light-dark(rgba(255, 255, 255, 0.38), rgba(30, 30, 36, 0.40)),
|
|
362
|
+
light-dark(rgba(255, 255, 255, 0.38), rgba(30, 30, 36, 0.40))),
|
|
363
|
+
var(--b-wall-blur, none) center / cover no-repeat fixed;
|
|
364
|
+
--b-material-regular-bg:
|
|
365
|
+
linear-gradient(light-dark(rgba(252, 252, 254, 0.55), rgba(30, 30, 36, 0.55)),
|
|
366
|
+
light-dark(rgba(252, 252, 254, 0.55), rgba(30, 30, 36, 0.55))),
|
|
367
|
+
var(--b-wall-blur, none) center / cover no-repeat fixed;
|
|
368
|
+
--b-material-thick-bg:
|
|
369
|
+
linear-gradient(light-dark(rgba(250, 250, 253, 0.72), rgba(28, 28, 34, 0.74)),
|
|
370
|
+
light-dark(rgba(250, 250, 253, 0.72), rgba(28, 28, 34, 0.74))),
|
|
371
|
+
var(--b-wall-blur, none) center / cover no-repeat fixed;
|
|
372
|
+
--b-material-chrome-bg:
|
|
373
|
+
linear-gradient(light-dark(rgba(248, 249, 252, 0.62), rgba(22, 22, 27, 0.66)),
|
|
374
|
+
light-dark(rgba(248, 249, 252, 0.62), rgba(22, 22, 27, 0.66))),
|
|
375
|
+
var(--b-wall-blur, none) center / cover no-repeat fixed;
|
|
376
|
+
}
|
|
377
|
+
|
|
332
378
|
/* ---- When glass costs too much, or cannot be drawn ---------------------- */
|
|
333
379
|
/*
|
|
334
380
|
* Two situations, one answer: make the materials opaque.
|