@xingxingmofashu/ui 0.1.10 → 0.2.0

package/README.md

@@ -86,9 +86,11 @@ container:
 
 `thin` is the default and the clearest, `soft` adds diffusion for secondary
 text, `regular` balances transparency with text separation, and `thick` is the
-most readable over busy imagery. Presets only override shared CSS variables.
-Without the plugin stylesheet, the main stylesheet still uses the `thin`
-material.
+most readable over busy imagery. Presets only override shared CSS variables and
+adjust both the in-page and overlay veils. Text-bearing overlays use
+`.ui-glass-overlay` and `--ui-glass-overlay-surface`; override that token too
+when you change `--ui-surface`. Without the plugin stylesheet, the main
+stylesheet still uses the `thin` material.
 
 The optional React plugin manages the attribute and persistence:
 

package/dist/index.css

@@ -1 +1 @@
-@import "./keyframes.css";@source "./**/*.mjs";@source "./**/*.{ts,tsx}";@custom-variant ui-light (&:where(.light, .light *, [data-theme="light"], [data-theme="light"] *));@custom-variant ui-dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));@layer theme{:host,:root{color-scheme:light;--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-border:rgba(31,31,31,.16);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.98);--ui-glass-contrast:1.05;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 0 2px 1px -1px hsla(0,0%,100%,.9),inset 0 -2px 1px -1px hsla(0,0%,100%,.9),inset 0 6px 1px -6px hsla(0,0%,100%,.55),inset 0 -6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 0 1px hsla(0,0%,100%,.45),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}.dark,[data-theme=dark]{color-scheme:dark;--ui-ink:#f5f5f5;--ui-ink-active:#fff;--ui-surface:#141414;--ui-glass-surface:hsla(0,0%,8%,.62);--ui-glass-border:hsla(0,0%,100%,.2);--ui-glass-focus:hsla(0,0%,100%,.7);--ui-glass-inner-border:hsla(0,0%,100%,.4);--ui-glass-rim:hsla(0,0%,100%,.25);--ui-glass-highlight:hsla(0,0%,100%,.45);--ui-glass-tone:brightness(0.95);--ui-glass-contrast:1;--ui-drop-shadow-label:drop-shadow(0 25px 3px rgba(0,0,0,.45));--ui-shadow-glass:inset 0 2px 1px -1px hsla(0,0%,100%,.35),inset 0 -2px 1px -1px hsla(0,0%,100%,.35),inset 0 6px 1px -6px hsla(0,0%,100%,.2),inset 0 -6px 1px -6px hsla(0,0%,100%,.2),inset 0 0 0 1px hsla(0,0%,100%,.14),inset 0 0 2px rgba(0,0,0,.9),0 4px 8px rgba(0,0,0,.35)}.light,[data-theme=light]{color-scheme:light;--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-border:rgba(31,31,31,.16);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.98);--ui-glass-contrast:1.05;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 0 2px 1px -1px hsla(0,0%,100%,.9),inset 0 -2px 1px -1px hsla(0,0%,100%,.9),inset 0 6px 1px -6px hsla(0,0%,100%,.55),inset 0 -6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 0 1px hsla(0,0%,100%,.45),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}:host,:root{--ui-glass-blur:4px;--ui-glass-saturate:150%;--ui-glass-chip-blur:8px;--ui-glass-inner-inset:8px;--ui-glass-inner-offset:1px;--ui-glass-inner-blur:8px;--ui-glass-highlight-blur:7px;--ui-glass-rim-inset:9px;--ui-glass-rim-blur:1px}}@theme inline{--color-ui-ink:var(--ui-ink);--color-ui-ink-active:var(--ui-ink-active);--color-ui-surface:var(--ui-surface);--color-ui-glass-surface:var(--ui-glass-surface);--color-ui-glass-border:var(--ui-glass-border);--color-ui-glass-focus:var(--ui-glass-focus);--color-ui-glass-inner-border:var(--ui-glass-inner-border);--color-ui-glass-rim:var(--ui-glass-rim);--color-ui-glass-highlight:var(--ui-glass-highlight)}@layer components{.ui-glass{backdrop-filter:blur(var(--ui-glass-blur,4px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px double var(--ui-glass-border);box-shadow:var(--ui-shadow-glass);filter:var(--ui-glass-tone,brightness(.98)) contrast(var(--ui-glass-contrast,1.05));position:relative}.ui-glass-inner:before{border:1px solid var(--ui-glass-inner-border);bottom:calc(var(--ui-glass-inner-inset, 8px) - var(--ui-glass-inner-offset, 1px));filter:blur(var(--ui-glass-inner-blur,8px));left:var(--ui-glass-inner-inset,8px);right:var(--ui-glass-inner-inset,8px);top:calc(var(--ui-glass-inner-inset, 8px) + var(--ui-glass-inner-offset, 1px));z-index:1}.ui-glass-highlight:after,.ui-glass-inner:before{border-radius:inherit;content:"";pointer-events:none;position:absolute}.ui-glass-highlight:after{background:linear-gradient(45deg,var(--ui-glass-highlight) 0,transparent var(--ui-glass-glare-stop),transparent calc(100% - var(--ui-glass-glare-stop)),var(--ui-glass-highlight) 100%);filter:blur(var(--ui-glass-highlight-blur,7px));inset:0;z-index:3}.ui-glass-rim{border:1px solid var(--ui-glass-rim);border-radius:inherit;filter:blur(var(--ui-glass-rim-blur,1px));height:calc(100% - var(--ui-glass-rim-inset, 9px));left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% - var(--ui-glass-rim-inset, 9px));z-index:2}.ui-glass-chip{backdrop-filter:blur(var(--ui-glass-chip-blur,8px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px solid var(--ui-glass-border);box-shadow:inset 0 1px 0 var(--ui-glass-highlight)}}
+@import "./keyframes.css";@source "./**/*.mjs";@source "./**/*.{ts,tsx}";@custom-variant ui-light (&:where(.light, .light *, [data-theme="light"], [data-theme="light"] *));@custom-variant ui-dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));@layer theme{:host,:root{color-scheme:light;--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-overlay-surface:hsla(0,0%,100%,.64);--ui-glass-border:rgba(31,31,31,.16);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.98);--ui-glass-contrast:1.05;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 0 2px 1px -1px hsla(0,0%,100%,.9),inset 0 -2px 1px -1px hsla(0,0%,100%,.9),inset 0 6px 1px -6px hsla(0,0%,100%,.55),inset 0 -6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 0 1px hsla(0,0%,100%,.45),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}.dark,[data-theme=dark]{color-scheme:dark;--ui-ink:#f5f5f5;--ui-ink-active:#fff;--ui-surface:#141414;--ui-glass-surface:hsla(0,0%,8%,.62);--ui-glass-overlay-surface:hsla(0,0%,8%,.76);--ui-glass-border:hsla(0,0%,100%,.2);--ui-glass-focus:hsla(0,0%,100%,.7);--ui-glass-inner-border:hsla(0,0%,100%,.4);--ui-glass-rim:hsla(0,0%,100%,.25);--ui-glass-highlight:hsla(0,0%,100%,.45);--ui-glass-tone:brightness(0.95);--ui-glass-contrast:1;--ui-drop-shadow-label:drop-shadow(0 25px 3px rgba(0,0,0,.45));--ui-shadow-glass:inset 0 2px 1px -1px hsla(0,0%,100%,.35),inset 0 -2px 1px -1px hsla(0,0%,100%,.35),inset 0 6px 1px -6px hsla(0,0%,100%,.2),inset 0 -6px 1px -6px hsla(0,0%,100%,.2),inset 0 0 0 1px hsla(0,0%,100%,.14),inset 0 0 2px rgba(0,0,0,.9),0 4px 8px rgba(0,0,0,.35)}.light,[data-theme=light]{color-scheme:light;--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-overlay-surface:hsla(0,0%,100%,.64);--ui-glass-border:rgba(31,31,31,.16);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.98);--ui-glass-contrast:1.05;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 0 2px 1px -1px hsla(0,0%,100%,.9),inset 0 -2px 1px -1px hsla(0,0%,100%,.9),inset 0 6px 1px -6px hsla(0,0%,100%,.55),inset 0 -6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 0 1px hsla(0,0%,100%,.45),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}:host,:root{--ui-glass-blur:4px;--ui-glass-saturate:150%;--ui-glass-chip-blur:8px;--ui-glass-inner-inset:8px;--ui-glass-inner-offset:1px;--ui-glass-inner-blur:8px;--ui-glass-highlight-blur:7px;--ui-glass-rim-inset:9px;--ui-glass-rim-blur:1px}}@theme inline{--color-ui-ink:var(--ui-ink);--color-ui-ink-active:var(--ui-ink-active);--color-ui-surface:var(--ui-surface);--color-ui-glass-surface:var(--ui-glass-surface);--color-ui-glass-overlay-surface:var(--ui-glass-overlay-surface);--color-ui-glass-border:var(--ui-glass-border);--color-ui-glass-focus:var(--ui-glass-focus);--color-ui-glass-inner-border:var(--ui-glass-inner-border);--color-ui-glass-rim:var(--ui-glass-rim);--color-ui-glass-highlight:var(--ui-glass-highlight)}@layer components{.ui-glass{backdrop-filter:blur(var(--ui-glass-blur,4px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px double var(--ui-glass-border);box-shadow:var(--ui-shadow-glass);filter:var(--ui-glass-tone,brightness(.98)) contrast(var(--ui-glass-contrast,1.05));position:relative}.ui-glass-overlay{background-color:var(--ui-glass-overlay-surface)}.ui-glass-inner:before{border:1px solid var(--ui-glass-inner-border);bottom:calc(var(--ui-glass-inner-inset, 8px) - var(--ui-glass-inner-offset, 1px));filter:blur(var(--ui-glass-inner-blur,8px));left:var(--ui-glass-inner-inset,8px);right:var(--ui-glass-inner-inset,8px);top:calc(var(--ui-glass-inner-inset, 8px) + var(--ui-glass-inner-offset, 1px));z-index:1}.ui-glass-highlight:after,.ui-glass-inner:before{border-radius:inherit;content:"";pointer-events:none;position:absolute}.ui-glass-highlight:after{background:linear-gradient(45deg,var(--ui-glass-highlight) 0,transparent var(--ui-glass-glare-stop),transparent calc(100% - var(--ui-glass-glare-stop)),var(--ui-glass-highlight) 100%);filter:blur(var(--ui-glass-highlight-blur,7px));inset:0;z-index:3}.ui-glass-rim{border:1px solid var(--ui-glass-rim);border-radius:inherit;filter:blur(var(--ui-glass-rim-blur,1px));height:calc(100% - var(--ui-glass-rim-inset, 9px));left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% - var(--ui-glass-rim-inset, 9px));z-index:2}.ui-glass-chip{backdrop-filter:blur(var(--ui-glass-chip-blur,8px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px solid var(--ui-glass-border);box-shadow:inset 0 1px 0 var(--ui-glass-highlight)}}

package/dist/plugins/glass-preset/index.css

@@ -1 +1 @@
-@layer theme{[data-glass=thin],[data-glass=thin]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.2),hsla(0,0%,8%,.62));--ui-glass-border:light-dark(rgba(31,31,31,.16),hsla(0,0%,100%,.2));--ui-glass-blur:4px;--ui-glass-saturate:150%}[data-glass=soft],[data-glass=soft]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.283),hsla(0,0%,8%,.653));--ui-glass-border:light-dark(rgba(31,31,31,.187),hsla(0,0%,100%,.227));--ui-glass-blur:8px;--ui-glass-saturate:146.7%}[data-glass=regular],[data-glass=regular]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.367),hsla(0,0%,8%,.687));--ui-glass-border:light-dark(rgba(31,31,31,.213),hsla(0,0%,100%,.253));--ui-glass-blur:12px;--ui-glass-saturate:143.3%}[data-glass=thick],[data-glass=thick]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.45),hsla(0,0%,8%,.72));--ui-glass-border:light-dark(rgba(31,31,31,.24),hsla(0,0%,100%,.28));--ui-glass-blur:16px;--ui-glass-saturate:140%}}
+@layer theme{[data-glass=thin],[data-glass=thin]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.2),hsla(0,0%,8%,.62));--ui-glass-overlay-surface:light-dark(hsla(0,0%,100%,.64),hsla(0,0%,8%,.76));--ui-glass-border:light-dark(rgba(31,31,31,.16),hsla(0,0%,100%,.2));--ui-glass-blur:4px;--ui-glass-saturate:150%}[data-glass=soft],[data-glass=soft]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.283),hsla(0,0%,8%,.653));--ui-glass-overlay-surface:light-dark(hsla(0,0%,100%,.69),hsla(0,0%,8%,.79));--ui-glass-border:light-dark(rgba(31,31,31,.187),hsla(0,0%,100%,.227));--ui-glass-blur:8px;--ui-glass-saturate:146.7%}[data-glass=regular],[data-glass=regular]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.367),hsla(0,0%,8%,.687));--ui-glass-overlay-surface:light-dark(hsla(0,0%,100%,.74),hsla(0,0%,8%,.82));--ui-glass-border:light-dark(rgba(31,31,31,.213),hsla(0,0%,100%,.253));--ui-glass-blur:12px;--ui-glass-saturate:143.3%}[data-glass=thick],[data-glass=thick]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.45),hsla(0,0%,8%,.72));--ui-glass-overlay-surface:light-dark(hsla(0,0%,100%,.8),hsla(0,0%,8%,.86));--ui-glass-border:light-dark(rgba(31,31,31,.24),hsla(0,0%,100%,.28));--ui-glass-blur:16px;--ui-glass-saturate:140%}}

package/dist/theme/alert-dialog.mjs

@@ -9,7 +9,7 @@ export default tv({
     ],
     viewport: "fixed inset-0 z-50 flex overflow-y-auto overscroll-contain p-4",
     popup: [
-      "relative isolate m-auto w-full max-w-md bg-ui-surface",
+      "relative isolate m-auto w-full max-w-md",
       "rounded-[1.75rem] text-ui-ink outline-none",
       "transition-[opacity,scale,translate] duration-200 ease-out",
       "data-[starting-style]:translate-y-2 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
@@ -17,7 +17,7 @@ export default tv({
       "motion-reduce:transition-none"
     ],
     glass: [
-      "ui-glass ui-glass-inner ui-glass-highlight",
+      "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
       "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
     ],
     overlay: "ui-glass-rim",
@@ -26,8 +26,8 @@ export default tv({
       "min-w-0 text-lg font-semibold tracking-tight text-ui-ink",
       "[filter:var(--ui-drop-shadow-label)]"
     ],
-    description: "mt-2 min-w-0 text-sm leading-relaxed text-ui-ink opacity-60",
-    body: "mt-4 min-w-0 text-sm leading-relaxed text-ui-ink opacity-75",
+    description: "mt-2 min-w-0 text-sm leading-relaxed text-ui-ink opacity-85",
+    body: "mt-4 min-w-0 text-sm leading-relaxed text-ui-ink opacity-90",
     footer: "mt-6 flex flex-wrap items-center justify-end gap-2"
   }
 });

package/dist/theme/dialog.mjs

@@ -9,7 +9,7 @@ export default tv({
     ],
     viewport: "fixed inset-0 z-50 flex overflow-y-auto overscroll-contain p-4",
     popup: [
-      "relative isolate m-auto w-full max-w-md bg-ui-surface",
+      "relative isolate m-auto w-full max-w-md",
       "rounded-[1.75rem] text-ui-ink outline-none",
       "transition-[opacity,scale,translate] duration-200 ease-out",
       "data-[starting-style]:translate-y-2 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
@@ -17,7 +17,7 @@ export default tv({
       "motion-reduce:transition-none"
     ],
     glass: [
-      "ui-glass ui-glass-inner ui-glass-highlight",
+      "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
       "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
     ],
     overlay: "ui-glass-rim",
@@ -26,8 +26,8 @@ export default tv({
       "min-w-0 text-lg font-semibold tracking-tight text-ui-ink",
       "[filter:var(--ui-drop-shadow-label)]"
     ],
-    description: "mt-2 min-w-0 text-sm leading-relaxed text-ui-ink opacity-60",
-    body: "mt-4 min-w-0 text-sm leading-relaxed text-ui-ink opacity-75",
+    description: "mt-2 min-w-0 text-sm leading-relaxed text-ui-ink opacity-85",
+    body: "mt-4 min-w-0 text-sm leading-relaxed text-ui-ink opacity-90",
     footer: "mt-6 flex flex-wrap items-center justify-end gap-2"
   }
 });

package/dist/theme/drawer.mjs

@@ -12,14 +12,14 @@ export default tv({
     ],
     viewport: "fixed inset-0 z-50 flex overflow-hidden",
     popup: [
-      "relative isolate flex min-h-0 flex-col overflow-hidden bg-ui-surface",
+      "relative isolate flex min-h-0 flex-col overflow-hidden",
       "text-ui-ink outline-none touch-auto overscroll-contain will-change-transform",
       "transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)]",
       "data-[swiping]:select-none",
       "motion-reduce:transition-none"
     ],
     glass: [
-      "ui-glass ui-glass-inner ui-glass-highlight",
+      "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
       "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
     ],
     overlay: "ui-glass-rim",
@@ -31,8 +31,8 @@ export default tv({
       "min-w-0 text-lg font-semibold tracking-tight text-ui-ink",
       "[filter:var(--ui-drop-shadow-label)]"
     ],
-    description: "mt-2 min-w-0 text-sm leading-relaxed text-ui-ink opacity-60",
-    body: "mt-4 min-w-0 text-sm leading-relaxed text-ui-ink opacity-75",
+    description: "mt-2 min-w-0 text-sm leading-relaxed text-ui-ink opacity-85",
+    body: "mt-4 min-w-0 text-sm leading-relaxed text-ui-ink opacity-90",
     footer: "mt-6 flex flex-wrap items-center justify-end gap-2"
   },
   variants: {

package/dist/theme/menu.mjs

@@ -3,7 +3,7 @@ export default tv({
   slots: {
     positioner: "z-50 outline-none",
     popup: [
-      "relative isolate min-w-48 max-w-80 rounded-2xl bg-ui-surface p-1.5",
+      "relative isolate min-w-48 max-w-80 rounded-2xl p-1.5",
       "text-ui-ink outline-none",
       "transition-[opacity,scale] duration-150 ease-out",
       "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
@@ -15,7 +15,7 @@ export default tv({
       "motion-reduce:transition-none"
     ],
     glass: [
-      "ui-glass ui-glass-inner ui-glass-highlight",
+      "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
       "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
     ],
     overlay: "ui-glass-rim",
@@ -36,12 +36,12 @@ export default tv({
     itemLabel: "min-w-0 flex-1 truncate",
     shortcut: [
       "ml-auto shrink-0 font-mono text-[0.65rem] uppercase tracking-[0.12em]",
-      "text-ui-ink/45"
+      "text-ui-ink/85"
     ],
     group: "flex min-w-0 flex-col gap-0.5",
     groupLabel: [
       "px-2.5 pb-1 pt-2 text-[0.65rem] font-medium uppercase tracking-[0.14em]",
-      "text-ui-ink/45"
+      "text-ui-ink/85"
     ],
     separator: "mx-1 my-1 h-px bg-ui-glass-border"
   }

package/dist/theme/popover.mjs

@@ -3,7 +3,7 @@ export default tv({
   slots: {
     positioner: "z-50 outline-none",
     popup: [
-      "relative isolate w-80 max-w-[calc(100vw-2rem)] bg-ui-surface",
+      "relative isolate w-80 max-w-[calc(100vw-2rem)]",
       "rounded-[1.5rem] text-ui-ink outline-none",
       "transition-[opacity,scale,translate] duration-150 ease-out",
       "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
@@ -17,26 +17,30 @@ export default tv({
       "motion-reduce:transition-none"
     ],
     glass: [
-      "ui-glass ui-glass-inner ui-glass-highlight",
+      "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
       "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
     ],
     overlay: "ui-glass-rim",
     arrow: [
       "pointer-events-none absolute z-[1] size-3 rotate-45",
-      "border-ui-glass-border bg-ui-surface",
+      "border-ui-glass-border bg-ui-glass-overlay-surface",
       "drop-shadow-[0_1px_2px_rgb(0_0_0/0.12)]",
       "data-[side=bottom]:-top-[6px] data-[side=bottom]:border-t data-[side=bottom]:border-l",
       "data-[side=top]:-bottom-[6px] data-[side=top]:border-r data-[side=top]:border-b",
       "data-[side=left]:-right-[6px] data-[side=left]:border-t data-[side=left]:border-r",
-      "data-[side=right]:-left-[6px] data-[side=right]:border-b data-[side=right]:border-l"
+      "data-[side=right]:-left-[6px] data-[side=right]:border-b data-[side=right]:border-l",
+      "data-[side=bottom]:[clip-path:polygon(0_0,100%_0,0_100%)]",
+      "data-[side=top]:[clip-path:polygon(100%_0,100%_100%,0_100%)]",
+      "data-[side=left]:[clip-path:polygon(0_0,100%_0,100%_100%)]",
+      "data-[side=right]:[clip-path:polygon(0_0,0_100%,100%_100%)]"
     ],
     content: "relative z-10 flex min-w-0 flex-col p-4",
     title: [
       "min-w-0 text-sm font-semibold tracking-tight text-ui-ink",
       "[filter:var(--ui-drop-shadow-label)]"
     ],
-    description: "mt-1 min-w-0 text-xs leading-relaxed text-ui-ink opacity-60",
-    body: "mt-3 min-w-0 text-sm leading-relaxed text-ui-ink opacity-75",
+    description: "mt-1 min-w-0 text-xs leading-relaxed text-ui-ink opacity-85",
+    body: "mt-3 min-w-0 text-sm leading-relaxed text-ui-ink opacity-90",
     footer: "mt-4 flex flex-wrap items-center justify-end gap-2"
   }
 });

package/dist/theme/select.mjs

@@ -39,7 +39,7 @@ export default tv({
     positioner: "z-50 outline-none",
     popup: [
       "relative isolate min-w-[var(--anchor-width)] max-w-[min(24rem,var(--available-width))]",
-      "rounded-2xl bg-ui-surface p-1.5 text-ui-ink outline-none",
+      "rounded-2xl p-1.5 text-ui-ink outline-none",
       "transition-[opacity,scale] duration-150 ease-out",
       "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
       "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
@@ -50,7 +50,7 @@ export default tv({
       "motion-reduce:transition-none"
     ],
     popupGlass: [
-      "ui-glass ui-glass-inner ui-glass-highlight",
+      "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
       "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
     ],
     popupOverlay: "ui-glass-rim",

package/dist/theme/toast.mjs

@@ -8,7 +8,7 @@ export default tv({
       "[--shrink:calc(1_-_var(--scale))]",
       "[--height:var(--toast-frontmost-height,var(--toast-height))]",
       "absolute inset-x-0 isolate h-[var(--height)] w-full rounded-[1.25rem]",
-      "bg-ui-surface text-ui-ink select-none",
+      "text-ui-ink select-none",
       "z-[calc(1000-var(--toast-index))]",
       "[transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]",
       "data-[expanded]:h-[var(--toast-height)]",
@@ -20,7 +20,7 @@ export default tv({
       "motion-reduce:transition-none"
     ],
     glass: [
-      "ui-glass ui-glass-inner ui-glass-highlight",
+      "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
       "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
     ],
     overlay: "ui-glass-rim",
@@ -39,7 +39,7 @@ export default tv({
       "min-w-0 text-sm font-semibold tracking-tight text-ui-ink",
       "[filter:var(--ui-drop-shadow-label)]"
     ],
-    description: "min-w-0 text-sm leading-relaxed text-ui-ink opacity-60",
+    description: "min-w-0 text-sm leading-relaxed text-ui-ink opacity-85",
     actions: "flex shrink-0 items-center gap-1",
     action: [
       "ui-glass-chip inline-flex h-7 shrink-0 items-center rounded-full px-2.5",

package/dist/theme/tooltip.mjs

@@ -3,7 +3,7 @@ export default tv({
   slots: {
     positioner: "z-50 outline-none",
     popup: [
-      "relative isolate max-w-64 rounded-xl bg-ui-surface px-2.5 py-1.5",
+      "relative isolate max-w-64 rounded-xl px-2.5 py-1.5",
       "text-xs font-medium leading-tight text-ui-ink outline-none",
       "transition-[opacity,scale] duration-100 ease-out",
       "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
@@ -15,24 +15,32 @@ export default tv({
       "motion-reduce:transition-none"
     ],
     glass: [
-      "ui-glass ui-glass-inner ui-glass-highlight",
+      "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
       "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
     ],
     overlay: "ui-glass-rim",
     arrow: [
       "pointer-events-none absolute z-[1] size-2 rotate-45",
-      "border-ui-glass-border bg-ui-surface",
+      "border-ui-glass-border bg-ui-glass-overlay-surface",
       "drop-shadow-[0_1px_1px_rgb(0_0_0/0.12)]",
       "data-[side=bottom]:-top-[4px] data-[side=bottom]:border-t data-[side=bottom]:border-l",
       "data-[side=top]:-bottom-[4px] data-[side=top]:border-r data-[side=top]:border-b",
       "data-[side=left]:-right-[4px] data-[side=left]:border-t data-[side=left]:border-r",
       "data-[side=right]:-left-[4px] data-[side=right]:border-b data-[side=right]:border-l",
+      "data-[side=bottom]:[clip-path:polygon(0_0,100%_0,0_100%)]",
+      "data-[side=top]:[clip-path:polygon(100%_0,100%_100%,0_100%)]",
+      "data-[side=left]:[clip-path:polygon(0_0,100%_0,100%_100%)]",
+      "data-[side=right]:[clip-path:polygon(0_0,0_100%,100%_100%)]",
       "data-[side=inline-start]:-end-[4px]",
       "ltr:data-[side=inline-start]:border-t ltr:data-[side=inline-start]:border-e",
       "rtl:data-[side=inline-start]:border-b rtl:data-[side=inline-start]:border-e",
       "data-[side=inline-end]:-start-[4px]",
       "ltr:data-[side=inline-end]:border-b ltr:data-[side=inline-end]:border-s",
-      "rtl:data-[side=inline-end]:border-t rtl:data-[side=inline-end]:border-s"
+      "rtl:data-[side=inline-end]:border-t rtl:data-[side=inline-end]:border-s",
+      "ltr:data-[side=inline-start]:[clip-path:polygon(0_0,100%_0,100%_100%)]",
+      "rtl:data-[side=inline-start]:[clip-path:polygon(0_0,0_100%,100%_100%)]",
+      "ltr:data-[side=inline-end]:[clip-path:polygon(0_0,0_100%,100%_100%)]",
+      "rtl:data-[side=inline-end]:[clip-path:polygon(0_0,100%_0,100%_100%)]"
     ],
     content: "relative z-10"
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xingxingmofashu/ui",
-  "version": "0.1.10",
+  "version": "0.2.0",
   "description": "React components with a CSS-only Liquid Glass visual style for React 19 and Tailwind CSS 4.",
   "license": "MIT",
   "author": "xingxingmofashu",