@vanduo-oss/framework 1.3.3 → 1.3.5

package/LICENSE

@@ -19,17 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-
----
-
-Third-Party Licenses:
-
-Open Color
-Copyright (c) 2016 Heeyeun Jeong
-MIT License
-https://yeun.github.io/open-color/
-
-Phosphor Icons
-Copyright (c) 2020 Phosphor Icons
-MIT License
-https://phosphoricons.com/

package/README.md

@@ -1,4 +1,4 @@
-# Vanduo Framework v1.3.3
+# Vanduo Framework v1.3.5
 
 <p align="center">
   <img src="vanduo-banner.svg" alt="Vanduo Framework Banner" width="100%">
@@ -7,105 +7,34 @@
 <p align="center">
   <a href="https://www.npmjs.com/package/@vanduo-oss/framework"><img src="https://img.shields.io/npm/v/@vanduo-oss/framework?style=flat-square&color=3b82f6" alt="NPM Version"></a>
   <a href="https://github.com/vanduo-oss/framework/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/vanduo-oss/framework/ci.yml?branch=main&style=flat-square&color=10b981" alt="Build Status"></a>
-  <a href="https://github.com/vanduo-oss/framework/blob/main/dist/vanduo.min.css"><img src="https://img.shields.io/badge/minified_size-~110kb-8b5cf6?style=flat-square" alt="Minified Size"></a>
   <a href="https://github.com/vanduo-oss/framework/blob/main/LICENSE"><img src="https://img.shields.io/github/license/vanduo-oss/framework?style=flat-square&color=64748b" alt="License"></a>
 </p>
 
-**Essential just like water is.** 
+**Essential just like water is.**
 
-- **Pure HTML, CSS, JS** 
-- **No third party dependencies**
-- **Free and open source.**
+Vanduo is a lightweight, zero-dependency UI framework built with pure HTML, CSS, and JavaScript. It ships 46+ components, responsive utilities, dark mode support, and a flexible theming system.
 
-## Overview
+[Browse Docs](https://vanduo.dev/#docs)
 
-A lightweight, pure HTML/CSS/JS framework with **46+ components** for designing beautiful interfaces. Zero runtime dependencies, no mandatory build tools, just clean and simple code.
+## Highlights
 
-[**Browse Full Documentation →**](https://vanduo.dev/#docs)
-
-## Features
-
-- 🎨 **Pure CSS/JS** - No libraries, no dependencies
-- 🚀 **Lightweight** - Minimal file size, maximum performance
-- 📱 **Responsive** - Mobile-first design approach
-- 🎯 **Utility-First** - Flexible utility classes for rapid development
-- 🧩 **Modular** - Import only what you need
-- ♿ **Accessible** - Built with accessibility in mind (WCAG 2.1 AA)
-- 🌙 **Dark Mode** - Automatic OS preference detection + manual toggle
-- 🌗 **Theme Switcher** - Lightweight light/dark/system toggle with shared preference storage
-- 🎛️ **Theme Customizer** - Real-time color, radius, font, and mode customization
-- 🔍 **SEO-Ready** - Comprehensive meta tags, structured data, and sitemap
-
----
-
-## What's New in v1.3.3
-
-v1.3.3 is a maintenance release with no breaking changes:
-
-- **Theme default primary alignment.** `ThemeCustomizer` and `ThemeSwitcher` normalize stale `black`/`amber` primary pairs against `localStorage` and `prefers-color-scheme`, so light, dark, and system modes stay consistent with `data-primary` after reloads and OS theme changes.
-- **Documentation site.** Theme customizer demo storage keys align with framework (`vanduo-radius`, `vanduo-font-preference`); changelog and CDN pins updated to v1.3.3.
-
----
-
-## What's New in v1.3.2
-
-v1.3.2 is a component release centered on audio playback, with no breaking changes:
-
-- **New Music Player component.** Ships a zero-dependency HTML5 audio player with play/pause, previous/next, volume, track title, and optional progress, shuffle, and playlist controls.
-- **Framework-friendly API.** Accepts a plain JavaScript tracks array (`[{ name, url }]`), exposes custom events, and supports programmatic control through `window.VanduoMusicPlayer`.
-- **Responsive player layout.** Control wrapping and volume sizing were tuned so the component stays usable across compact, inline, and mobile layouts.
-- **Release coverage and artifacts updated.** Package metadata, generated bundles, `llms.txt`, and release-facing README examples now point at v1.3.2.
-
-The framework now ships **46+ components**, including the new Music Player and the additions below.
-
-| Component | Vanduo Name | Type |
-|---|---|---|
-| Carousel | Flow | CSS + JS |
-| Music Player | Music Player | CSS + JS |
-| Popover | Bubble | CSS + JS |
-| Scrollspy | Waypoint | CSS + JS |
-| Offcanvas | — (enhanced Sidenav) | CSS + JS |
-| Ripple / Waves | Ripple | CSS + JS |
-| Floating Action Button | FAB | CSS-only |
-| Sticky | Affix | CSS + JS |
-| Autocomplete | Suggest | CSS + JS |
-| Form Validation | Validate | JS |
-| Date Picker | Datepicker | CSS + JS |
-| Time Picker | Timepicker | CSS + JS |
-| Stepper | Stepper | CSS + JS |
-| Timeline | Timeline | CSS-only |
-| Rating | Rating | CSS + JS |
-| Transfer / Multi-select | Transfer | CSS + JS |
-| Tree View | Tree | CSS + JS |
-| Spotlight / Feature Discovery | Spotlight | CSS + JS |
-
----
+- Pure CSS/JS with no runtime dependencies
+- Modular architecture with optional per-component imports
+- Built-in dark/light/system theme switching
+- Runtime Theme Customizer for color, font, and radius tokens
+- Accessibility-focused components and utilities
 
 ## Quick Start
 
-### Option 1: CDN (Recommended)
+### CDN (recommended)
 
-The quickest way to get started — no install, no build step. Add two lines to any HTML file:
-
-```html
-<!-- Vanduo CSS -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@main/dist/vanduo.min.css">
-
-<!-- Vanduo JS -->
-<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@main/dist/vanduo.min.js"></script>
-<script>Vanduo.init();</script>
-```
-
-**Pin to a specific version** for production:
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.3.3/dist/vanduo.min.css">
-<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.3.3/dist/vanduo.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.3.5/dist/vanduo.min.css">
+<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.3.5/dist/vanduo.min.js"></script>
 <script>Vanduo.init();</script>
 ```
 
-### Option 2: Download
-
-[**Download the dist/ folder**](https://github.com/vanduo-oss/framework/tree/main/dist) and include locally — no internet connection required at runtime:
+### Local dist files
 
 ```html
 <link rel="stylesheet" href="dist/vanduo.min.css">
@@ -113,97 +42,37 @@ The quickest way to get started — no install, no build step. Add two lines to
 <script>Vanduo.init();</script>
 ```
 
-The `dist/` folder is **self-contained** (CSS, JS, Fonts, Icons).
-
-### Option 3: Source Files
-
-For development or when you need more control, use the unminified source:
-
-```html
-<link rel="stylesheet" href="css/vanduo.css">
-<script src="js/vanduo.js"></script>
-<script>Vanduo.init();</script>
-```
-
-### Option 4: With a Bundler (Vite)
-
-> **Requires a build tool.** The imports below use bare module specifiers (`@vanduo-oss/framework`) which browsers cannot resolve on their own. For static HTML files, use the CDN or Download options above.
-
-Scaffold a Vite project and install Vanduo:
+### Package install (bundlers)
 
 ```bash
-pnpm create vite my-app --template vanilla
-cd my-app
 pnpm add @vanduo-oss/framework
 ```
 
-Import in your entry file (e.g. `main.js`):
-
 ```js
 import '@vanduo-oss/framework/css';
 import { Vanduo } from '@vanduo-oss/framework';
-Vanduo.init();
-```
-
-**Why pnpm?** pnpm enforces a strict lockfile and creates an isolated `node_modules` structure. Vanduo's `.npmrc` security policies work best with pnpm out of the box.
-
-*(Note: `npm install @vanduo-oss/framework` and `yarn add @vanduo-oss/framework` will also work, but they do not enforce the same strict lockfile and isolated `node_modules` security guarantees.)*
-
----
-
-## LLM Access
-
-This project includes an [`llms.txt`](llms.txt) file — a structured markdown summary designed for AI assistants and LLM-powered code editors. It provides quick access to framework documentation, component references, and usage patterns.
-
----
 
-## Release Assets (Maintainers)
-
-Use the hardened upload script to attach only approved bundle artifacts from `dist/`:
-
-```bash
-pnpm run release:assets -- v1.3.3
+Vanduo.init();
 ```
 
-Notes:
-- If tag is omitted, it defaults to `v` + version from `package.json`.
-- Use `--dry-run` to preview files without uploading.
-
----
-
-## Documentation
+## Docs and Resources
 
-Comprehensive documentation for all components, utilities, and customization options is available at vanduo.dev.
-
-[**View Documentation**](https://vanduo.dev/#docs)
-
-### Key Capabilities
-
-*   **Dark Mode**: Works automatically with system preferences. Can be forced via `data-theme="dark"` on `<html>`.
-*   **Theme Switcher**: Lightweight light/dark/system toggle that can coexist with Theme Customizer.
-*   **Theme Customizer**: Built-in runtime tool to change colors, fonts, and radius.
-*   **Modular Imports**: Import only specific components (e.g., `css/components/buttons.css`) to keep your site lean.
-*   **Icons**: Includes [Phosphor Icons](https://phosphoricons.com) (Regular + Fill weights bundled).
-
----
+- Website: [vanduo.dev](https://vanduo.dev)
+- Docs: [vanduo.dev/#docs](https://vanduo.dev/#docs)
+- npm: [@vanduo-oss/framework](https://www.npmjs.com/package/@vanduo-oss/framework)
+- Releases: [GitHub Releases](https://github.com/vanduo-oss/framework/releases)
+- LLM reference: [`llms.txt`](llms.txt)
 
 ## Project Structure
 
-```
+```text
 vanduo-framework/
-├── dist/                  # Production ready files (minified)
-├── css/
-│   ├── vanduo.css         # Main framework file (imports all)
-│   ├── core/              # Foundation (colors, typography, grid)
-│   ├── components/        # UI components (buttons, cards, etc)
-│   ├── utilities/         # Utility classes
-│   └── effects/           # Visual effects
-├── js/
-│   ├── vanduo.js          # Main entry point
-│   └── components/        # Component logic
-├── icons/                 # Phosphor Icons
-├── fonts/                 # Web fonts
-└── tests/                 # Framework test suite
+├── dist/          # Production bundles
+├── css/           # Core, components, utilities, effects
+├── js/            # Framework runtime and components
+├── fonts/         # Bundled web fonts
+├── icons/         # Phosphor icons bundle
+└── tests/         # Playwright + linting
 ```
 
 ## Browser Support
@@ -215,12 +84,10 @@ vanduo-framework/
 
 ## License
 
-MIT License - see [LICENSE](LICENSE) file for details.
+MIT - see [LICENSE](LICENSE).  
+Third-party notices are listed in [THIRD-PARTY-LICENSES](THIRD-PARTY-LICENSES).
 
 ## Credits
 
-- **Color System**: [Open Color](https://yeun.github.io/open-color/) by Heeyeun Jeong (MIT License)
-- **Icons**: [Phosphor Icons](https://phosphoricons.com) (MIT License)
-
----
-Vanduo Framework - Built with ❤️ for the web.
+- [Open Color](https://yeun.github.io/open-color/) (MIT)
+- [Phosphor Icons](https://phosphoricons.com/) (MIT)

package/css/components/cards.css

@@ -63,6 +63,14 @@
   box-shadow: var(--card-shadow);
 }
 
+.vd-card-glass {
+  background: var(--vd-glass-bg-light);
+  border-color: var(--vd-glass-border-light);
+  box-shadow: var(--vd-glass-shadow);
+  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+}
+
 /* Card Variants - Elevated (default) */
 .vd-card-elevated,
 .vd-card {

package/css/components/dropdown.css

@@ -96,6 +96,14 @@
               transform var(--transition-duration-base) var(--transition-ease);
 }
 
+.vd-dropdown-glass .vd-dropdown-menu {
+  background: var(--vd-glass-bg-light);
+  border-color: var(--vd-glass-border-light);
+  box-shadow: var(--vd-glass-shadow);
+  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+}
+
 .vd-dropdown-menu.is-open {
   display: block;
   opacity: 1;

package/css/components/fab.css

@@ -56,12 +56,26 @@
   transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
 }
 
+.vd-fab-glass {
+  background: var(--vd-glass-bg-light);
+  color: var(--text-primary);
+  border: 1px solid var(--vd-glass-border-light);
+  box-shadow: var(--vd-glass-shadow);
+  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+}
+
 .vd-fab:hover {
   background: var(--fab-hover-bg);
   box-shadow: var(--fab-hover-shadow);
   transform: scale(1.05);
 }
 
+.vd-fab-glass:hover {
+  background: var(--vd-glass-bg-light);
+  box-shadow: var(--vd-glass-float-shadow, var(--vd-glass-shadow));
+}
+
 .vd-fab:active {
   transform: scale(0.95);
 }

package/css/components/modals.css

@@ -55,6 +55,11 @@
   pointer-events: none;
 }
 
+.vd-modal-backdrop.vd-modal-glass-backdrop {
+  backdrop-filter: blur(calc(var(--vd-glass-blur) * 0.5));
+  -webkit-backdrop-filter: blur(calc(var(--vd-glass-blur) * 0.5));
+}
+
 .vd-modal-backdrop.is-visible {
   opacity: 1;
   pointer-events: all;
@@ -114,6 +119,14 @@
   outline: 0;
 }
 
+.vd-modal-glass .vd-modal-content {
+  background: var(--vd-glass-bg-light);
+  border-color: var(--vd-glass-border-light);
+  box-shadow: var(--vd-glass-shadow);
+  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+}
+
 /* Modal Header */
 .vd-modal-header {
   display: flex;

package/css/components/navbar.css

@@ -59,6 +59,29 @@
   min-height: var(--navbar-height);
 }
 
+/* Navbar Variant - Glass */
+.vd-navbar-glass {
+  background: var(--vd-glass-bg-light);
+  border-bottom: 1px solid var(--vd-glass-border-light);
+  box-shadow: var(--vd-glass-shadow);
+  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+  transition:
+    background var(--vd-transition-normal, 0.25s ease),
+    border-color var(--vd-transition-normal, 0.25s ease),
+    box-shadow var(--vd-transition-normal, 0.25s ease),
+    backdrop-filter var(--vd-transition-normal, 0.25s ease);
+}
+
+/* Scroll-activated: transparent at rest, frosted glass once scrolled */
+.vd-navbar-glass:not(.vd-navbar-scrolled) {
+  background: transparent;
+  border-bottom-color: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
 /* Navbar Container - matches .vd-container-responsive breakpoints for alignment with page content */
 .vd-navbar-container {
   display: flex;
@@ -459,6 +482,13 @@
     z-index: 1000;
     overflow-y: auto;
   }
+
+  .vd-navbar-glass .vd-navbar-menu {
+    background: var(--vd-glass-bg-light);
+    border-left: 1px solid var(--vd-glass-border-light);
+    backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+    -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+  }
   
   .vd-navbar-menu.is-open {
     right: 0;

package/css/components/toast.css

@@ -101,6 +101,14 @@
   transition: opacity 0.3s ease, transform 0.3s ease;
 }
 
+.vd-toast-glass {
+  background: var(--vd-glass-bg-light);
+  border-color: var(--vd-glass-border-light);
+  box-shadow: var(--vd-glass-shadow);
+  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+}
+
 /* Toast Visible State */
 .vd-toast.is-visible {
   opacity: 1;

package/css/components/tooltips.css

@@ -5,11 +5,11 @@
 
 :root {
   /* Tooltip Colors */
-  --tooltip-bg: var(--color-gray-900);
-  --tooltip-bg-light: var(--color-white);
+  --tooltip-bg: var(--color-white);
+  --tooltip-bg-light: var(--color-gray-100);
   --tooltip-bg-dark: var(--color-gray-900);
-  --tooltip-text-color: var(--color-white);
-  --tooltip-text-color-light: var(--color-gray-900);
+  --tooltip-text-color: var(--color-gray-900);
+  --tooltip-text-color-light: var(--color-gray-800);
   --tooltip-text-color-dark: var(--color-white);
   
   /* Tooltip Spacing (Fibonacci pairs: x/y ratio ~ phi) */
@@ -39,16 +39,16 @@
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --tooltip-bg: var(--color-gray-100);
-  --tooltip-text-color: var(--color-gray-900);
+  --tooltip-bg: var(--color-gray-900);
+  --tooltip-text-color: var(--color-white);
   --tooltip-bg-light: var(--color-gray-800);
   --tooltip-text-color-light: var(--color-gray-100);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --tooltip-bg: var(--color-gray-100);
-    --tooltip-text-color: var(--color-gray-900);
+    --tooltip-bg: var(--color-gray-900);
+    --tooltip-text-color: var(--color-white);
     --tooltip-bg-light: var(--color-gray-800);
     --tooltip-text-color-light: var(--color-gray-100);
   }
@@ -78,6 +78,15 @@
   transition: opacity var(--transition-duration-base) var(--transition-ease);
 }
 
+.vd-tooltip-glass {
+  background: var(--vd-glass-bg-light);
+  border: 1px solid var(--vd-glass-border-light);
+  box-shadow: var(--vd-glass-shadow);
+  color: var(--text-primary);
+  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+}
+
 .vd-tooltip.is-visible {
   opacity: 1;
 }
@@ -151,6 +160,26 @@
   border-color: transparent var(--tooltip-bg) transparent transparent;
 }
 
+.vd-tooltip-glass.vd-tooltip-top::before,
+.vd-tooltip-glass[data-placement="top"]::before {
+  border-color: var(--vd-glass-bg-light) transparent transparent;
+}
+
+.vd-tooltip-glass.vd-tooltip-bottom::before,
+.vd-tooltip-glass[data-placement="bottom"]::before {
+  border-color: transparent transparent var(--vd-glass-bg-light);
+}
+
+.vd-tooltip-glass.vd-tooltip-left::before,
+.vd-tooltip-glass[data-placement="left"]::before {
+  border-color: transparent transparent transparent var(--vd-glass-bg-light);
+}
+
+.vd-tooltip-glass.vd-tooltip-right::before,
+.vd-tooltip-glass[data-placement="right"]::before {
+  border-color: transparent var(--vd-glass-bg-light) transparent transparent;
+}
+
 /* Tooltip Variants - Light */
 .vd-tooltip-light {
   background-color: var(--tooltip-bg-light);

package/css/core/tokens.css

@@ -142,6 +142,33 @@
   --vd-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
   --vd-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
 
+  /* ============================================
+   * GLASS TOKENS
+   * ============================================ */
+  --glass-blur: 12px;
+  --glass-saturate: 1.8;
+  --glass-bg-opacity: 0.65;
+  --glass-bg-light: rgba(255, 255, 255, var(--glass-bg-opacity));
+  --glass-bg-dark: rgba(30, 30, 30, var(--glass-bg-opacity));
+  --glass-border-alpha: 0.18;
+  --glass-border-light: rgba(255, 255, 255, var(--glass-border-alpha));
+  --glass-border-dark: rgba(255, 255, 255, 0.08);
+  --glass-highlight-alpha: 0.25;
+  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  --glass-noise-opacity: 0.03;
+
+  --vd-glass-blur: var(--glass-blur);
+  --vd-glass-saturate: var(--glass-saturate);
+  --vd-glass-bg-opacity: var(--glass-bg-opacity);
+  --vd-glass-bg-light: var(--glass-bg-light);
+  --vd-glass-bg-dark: var(--glass-bg-dark);
+  --vd-glass-border-alpha: var(--glass-border-alpha);
+  --vd-glass-border-light: var(--glass-border-light);
+  --vd-glass-border-dark: var(--glass-border-dark);
+  --vd-glass-highlight-alpha: var(--glass-highlight-alpha);
+  --vd-glass-shadow: var(--glass-shadow);
+  --vd-glass-noise-opacity: var(--glass-noise-opacity);
+
   /* ============================================
    * TRANSITION TOKENS
    * ============================================ */
@@ -190,6 +217,11 @@
   --vd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
   --vd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
   --vd-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
+
+  --glass-bg-light: var(--glass-bg-dark);
+  --glass-border-light: var(--glass-border-dark);
+  --glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
+  --glass-highlight-alpha: 0.16;
 }
 
 /* Dark mode via prefers-color-scheme */
@@ -209,5 +241,10 @@
     --vd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
     --vd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
     --vd-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
+
+    --glass-bg-light: var(--glass-bg-dark);
+    --glass-border-light: var(--glass-border-dark);
+    --glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
+    --glass-highlight-alpha: 0.16;
   }
 }

package/css/core/vd-aliases.css

@@ -33,6 +33,19 @@
   --vd-shadow-md: var(--shadow-md);
   --vd-shadow-lg: var(--shadow-lg);
 
+  /* Glass */
+  --vd-glass-blur: var(--glass-blur, 12px);
+  --vd-glass-saturate: var(--glass-saturate, 1.8);
+  --vd-glass-bg-opacity: var(--glass-bg-opacity, 0.65);
+  --vd-glass-bg-light: var(--glass-bg-light, rgba(255, 255, 255, var(--vd-glass-bg-opacity)));
+  --vd-glass-bg-dark: var(--glass-bg-dark, rgba(30, 30, 30, var(--vd-glass-bg-opacity)));
+  --vd-glass-border-alpha: var(--glass-border-alpha, 0.18);
+  --vd-glass-border-light: var(--glass-border-light, rgba(255, 255, 255, var(--vd-glass-border-alpha)));
+  --vd-glass-border-dark: var(--glass-border-dark, rgba(255, 255, 255, 0.08));
+  --vd-glass-highlight-alpha: var(--glass-highlight-alpha, 0.25);
+  --vd-glass-shadow: var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
+  --vd-glass-noise-opacity: var(--glass-noise-opacity, 0.03);
+
   /* Typography */
   --vd-font-family-base: var(--font-family-sans);
   --vd-font-family-mono: var(--font-family-mono);