Motivation

• Provide a second, glassmorphic theme that is transparency-first with a subtle gradient backdrop while keeping runtime JS to a minimum.
• Make the theme easy to opt into from the demo with a zero-JS toggle so consumers can adopt the style with only HTML/CSS.

Description

• Added new theme tokens and variables in src/variables.css including --p-glass-backdrop, --p-theme-bg, and a scoped theme block selectable via :root:has(#pui-theme-glass:checked), [data-theme="glass"], or .glass.
• Implemented a layered gradient/radial --p-theme-bg and set --p-glass-backdrop: blur(18px) saturate(140%) to drive the glassmorphic look.
• Applied backdrop-filter support to surface components by updating src/components/card/style.css, src/components/popover/style.css, and src/components/hover-card/style.css to use var(--p-glass-backdrop).
• Wired a CSS-only toggle in the demo by inserting a hidden checkbox #pui-theme-glass in demo/index.html, adding a label toggle in demo/src/nav.tsx, and styling the toggle and demo background in demo/src/style.css to use --p-theme-bg and the backdrop variable.

Testing

• Launched the demo dev server with pnpm -C demo exec vite --host 0.0.0.0 --port 4173 and confirmed the server reported ready.
• Ran an automated Playwright script that opened http://127.0.0.1:4173/, clicked the "Glass" toggle, and produced a screenshot at artifacts/pui-glass-theme.png, which completed successfully.
• No unit tests were run.

Codex Task