@ciridae/ui 1.0.9 → 1.0.10

package/dist/preset.js

@@ -34,6 +34,16 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
         ...(appBase ? { globalCss: appBaseCss } : {}),
         utilities: {
             extend: {
+                /*
+                 * The standard property goes after the `-webkit-` one. A minifier that merges the pair,
+                 * such as Vite's lightningcss, keeps only the last, and Chrome ignores the prefixed one.
+                 * Panda's own utility writes them the other way round.
+                 */
+                backdropFilter: {
+                    transform(value) {
+                        return { WebkitBackdropFilter: value, backdropFilter: value };
+                    },
+                },
                 /*
                  * The one focus ring, drawn under whatever state shows focus, usually
                  * `_focusVisible: { focusRing: "outer" }`. Replaces Panda's own `focusRing`, which

package/dist/styled-system/styles.css

@@ -322,7 +322,7 @@
     --colors-bg\.card: rgba(255,255,255,.05);
     --colors-bg\.avatar: #36363C;
     --colors-bg\.backdrop: rgba(20,20,22,.6);
-    --colors-bg\.popover: rgba(20,20,22,.6);
+    --colors-bg\.popover: #141416;
     --colors-bg\.modal-shell: rgba(255,255,255,.01);
     --colors-bg\.modal-sheet: rgba(255,255,255,.01);
     --colors-bg\.drawer-shell: rgba(39,39,42,.33);
@@ -457,7 +457,7 @@
     --colors-bg\.card: #FBFBFB;
     --colors-bg\.avatar: #D8D8DE;
     --colors-bg\.backdrop: rgba(42,42,45,.24);
-    --colors-bg\.popover: rgba(240,240,240,.33);
+    --colors-bg\.popover: #F0F0F0;
     --colors-bg\.modal-shell: rgba(238,238,238,.66);
     --colors-bg\.modal-sheet: rgba(251,251,251,.88);
     --colors-bg\.drawer-shell: rgba(240,240,240,.33);
@@ -2256,8 +2256,8 @@
 }
 
   .bkdp_\[blur\(token\(blurs\.popover\)\)\] {
-    backdrop-filter: blur(var(--blurs-popover));
     -webkit-backdrop-filter: blur(var(--blurs-popover));
+    backdrop-filter: blur(var(--blurs-popover));
 }
 
   .bx-sh_soft {
@@ -2457,8 +2457,8 @@
 }
 
   .bkdp_\[blur\(token\(blurs\.modalShell\)\)\] {
-    backdrop-filter: blur(var(--blurs-modal-shell));
     -webkit-backdrop-filter: blur(var(--blurs-modal-shell));
+    backdrop-filter: blur(var(--blurs-modal-shell));
 }
 
   .trf_translateX\(-50\%\) {
@@ -2614,8 +2614,8 @@
 }
 
   .bkdp_\[blur\(token\(blurs\.drawerShell\)\)\] {
-    backdrop-filter: blur(var(--blurs-drawer-shell));
     -webkit-backdrop-filter: blur(var(--blurs-drawer-shell));
+    backdrop-filter: blur(var(--blurs-drawer-shell));
 }
 
   .bx-sh_drawerShell {
@@ -2858,8 +2858,8 @@
 }
 
   .bkdp_\[blur\(token\(blurs\.modalSheet\)\)\] {
-    backdrop-filter: blur(var(--blurs-modal-sheet));
     -webkit-backdrop-filter: blur(var(--blurs-modal-sheet));
+    backdrop-filter: blur(var(--blurs-modal-sheet));
 }
 
   .trs-prop_\[width\] {
@@ -3186,8 +3186,8 @@
     padding-block-start: var(--spacing-panel\.comfortable);
 }
 
-  .grid-tc_minmax\(200px\,_1fr\)_96px_180px_140px_176px_92px {
-    grid-template-columns: minmax(200px, 1fr) 96px 180px 140px 176px 92px;
+  .grid-tc_minmax\(200px\,_1fr\)_96px_180px_140px_176px_124px {
+    grid-template-columns: minmax(200px, 1fr) 96px 180px 140px 176px 124px;
 }
 
   .grid-tc_minmax\(0\,_1fr\)_auto_auto {
@@ -6593,8 +6593,8 @@
 }
 
   .\[\&_\>_\[cmdk-root\]\]\:bkdp_\[blur\(token\(blurs\.modalSheet\)\)\] > [cmdk-root] {
-    backdrop-filter: blur(var(--blurs-modal-sheet));
     -webkit-backdrop-filter: blur(var(--blurs-modal-sheet));
+    backdrop-filter: blur(var(--blurs-modal-sheet));
 }
 
   .\[\&_\>_\[cmdk-root\]\]\:bx-sh_soft > [cmdk-root] {
@@ -9654,8 +9654,8 @@
 }
 
   @media (max-width: 1200px) {
-    .wide\:grid-tc_minmax\(200px\,_1fr\)_96px_minmax\(120px\,_max-content\)_140px_92px {
-      grid-template-columns: minmax(200px, 1fr) 96px minmax(120px, max-content) 140px 92px;
+    .wide\:grid-tc_minmax\(200px\,_1fr\)_96px_minmax\(120px\,_max-content\)_140px_124px {
+      grid-template-columns: minmax(200px, 1fr) 96px minmax(120px, max-content) 140px 124px;
 }
     .wide\:d_none {
       display: none;
@@ -9822,8 +9822,8 @@
       scrollbar-width: none;
 }
     .phone\:bkdp_\[none\] {
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
 }
     .phone\:ps_panel\.default {
       padding-inline-start: var(--spacing-panel\.default);

package/dist/theme/tokens.js

@@ -32,8 +32,9 @@ export function deriveThemeTokens(theme = {}) {
             "bg.avatar": { base: dark.avatar, _light: light.avatar },
             // Behind a modal, full screen; the design gives a drawer none.
             "bg.backdrop": { base: alpha(dark.scrim, 0.6), _light: alpha(light.scrim, 0.24) },
-            // A popover or menu is one glass face; a modal and a drawer are a glass shell holding a sheet.
-            "bg.popover": { base: alpha(dark.popover, 0.6), _light: alpha(light.popover, 0.33) },
+            // A popover or menu is one opaque sheet, so a row under it never reads through; a modal and a
+            // drawer are a glass shell holding a sheet.
+            "bg.popover": { base: dark.popover, _light: light.popover },
             "bg.modalShell": {
                 base: alpha(dark.modalShell, 0.01),
                 _light: alpha(light.modalShell, 0.66),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ciridae/ui",
-	"version": "1.0.9",
+	"version": "1.0.10",
 	"type": "module",
 	"repository": {
 		"type": "git",