barua-ui 0.2.1 → 0.2.2
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 +40 -0
- package/package.json +1 -1
package/css/tokens.css
CHANGED
|
@@ -329,6 +329,46 @@
|
|
|
329
329
|
[data-theme="light"] { color-scheme: light; }
|
|
330
330
|
[data-theme="dark"] { color-scheme: dark; }
|
|
331
331
|
|
|
332
|
+
/* ---- When glass costs too much, or cannot be drawn ---------------------- */
|
|
333
|
+
/*
|
|
334
|
+
* Two situations, one answer: make the materials opaque.
|
|
335
|
+
*
|
|
336
|
+
* "Reduce transparency" is the switch people flip when blur is expensive on
|
|
337
|
+
* their hardware or hard to read against — macOS, iOS and Windows all expose
|
|
338
|
+
* it, and honouring it is not decoration, it is the only relief we offer a
|
|
339
|
+
* weak GPU. The @supports case is the browser that cannot draw a backdrop
|
|
340
|
+
* filter at all, where an ultrathin material is a 22%-alpha wash over a
|
|
341
|
+
* wallpaper and the text on it stops being legible.
|
|
342
|
+
*
|
|
343
|
+
* Overriding the tokens rather than the components means every glass surface
|
|
344
|
+
* in the system answers at once — the blur variables resolve to none, so the
|
|
345
|
+
* 137 backdrop-filter declarations turn themselves off.
|
|
346
|
+
*/
|
|
347
|
+
@media (prefers-reduced-transparency: reduce) {
|
|
348
|
+
:root {
|
|
349
|
+
--b-glass: none;
|
|
350
|
+
--b-glass-light: none;
|
|
351
|
+
--b-glass-heavy: none;
|
|
352
|
+
--b-material-ultrathin-bg: var(--b-surface);
|
|
353
|
+
--b-material-thin-bg: var(--b-surface);
|
|
354
|
+
--b-material-regular-bg: var(--b-surface);
|
|
355
|
+
--b-material-thick-bg: var(--b-surface);
|
|
356
|
+
--b-material-chrome-bg: var(--b-surface-2);
|
|
357
|
+
--b-material-neutral-bg: var(--b-surface-2);
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
|
|
362
|
+
:root {
|
|
363
|
+
--b-material-ultrathin-bg: var(--b-surface);
|
|
364
|
+
--b-material-thin-bg: var(--b-surface);
|
|
365
|
+
--b-material-regular-bg: var(--b-surface);
|
|
366
|
+
--b-material-thick-bg: var(--b-surface);
|
|
367
|
+
--b-material-chrome-bg: var(--b-surface-2);
|
|
368
|
+
--b-material-neutral-bg: var(--b-surface-2);
|
|
369
|
+
}
|
|
370
|
+
}
|
|
371
|
+
|
|
332
372
|
/* Accent re-tinting: <html data-accent="purple"> etc. */
|
|
333
373
|
[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); }
|
|
334
374
|
[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); }
|