@vanduo-oss/framework 1.4.0 → 1.4.2

package/README.md

@@ -1,4 +1,4 @@
-# Vanduo Framework v1.4.0
+# Vanduo Framework v1.4.2
 
 <p align="center">
   <img src="vanduo-banner.svg" alt="Vanduo Framework Banner" width="100%">
@@ -10,7 +10,7 @@
   <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>
 
-Vanduo is a zero-dependency UI framework built with HTML, CSS, and vanilla JavaScript. It ships a full component bundle, scoped runtime initialization, a canonical `--vd-*` token API, and compatibility aliases for existing `1.3.x` consumers.
+Vanduo is a zero-dependency UI framework built with HTML, CSS, and vanilla JavaScript. It ships a full component bundle, scoped runtime initialization, and a strict canonical `--vd-*` token API.
 
 [Browse Docs](https://vanduo.dev/#docs)
 
@@ -19,7 +19,7 @@ Vanduo is a zero-dependency UI framework built with HTML, CSS, and vanilla JavaS
 - Zero runtime dependencies
 - 47+ components across layout, navigation, overlays, search, and effects
 - Scoped runtime APIs for dynamic DOM work
-- Canonical semantic token API under `--vd-*`
+- Strict design token API under `--vd-*`
 - Built-in dark, light, and system theming
 - Theme customizer with color, font, and radius controls
 - Playwright-based browser coverage across Chromium, Firefox, and WebKit
@@ -29,8 +29,8 @@ Vanduo is a zero-dependency UI framework built with HTML, CSS, and vanilla JavaS
 ### CDN
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.4.0/dist/vanduo.min.css">
-<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.4.0/dist/vanduo.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.4.2/dist/vanduo.min.css">
+<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.4.2/dist/vanduo.min.js"></script>
 <script>
   Vanduo.init();
 </script>
@@ -77,15 +77,17 @@ Vanduo.getComponent('docSearch');
 
 ## Token API
 
-Vanduo `1.4.0` treats `--vd-*` as the canonical semantic API:
+Vanduo `1.4.1` treats `--vd-*` as the only shipped custom-property namespace:
 
+- Palette: `--vd-red-*`, `--vd-primary-*`, `--vd-gray-*`, and related scales
 - Colors: `--vd-color-*`
 - Backgrounds: `--vd-bg-*`
 - Text: `--vd-text-*`
 - Borders: `--vd-border-*`
 - Shadows: `--vd-shadow-*`
+- Components/effects: `--vd-btn-*`, `--vd-card-*`, `--vd-morph-*`, and related internals
 
-Legacy semantic aliases like `--color-*`, `--bg-*`, and `--text-*` are still supported throughout the `1.4.x` line.
+Legacy unprefixed token aliases were removed in `1.4.1`; update custom themes and overrides to use the `--vd-*` equivalents.
 
 ```css
 .cta {
@@ -99,7 +101,7 @@ More detail lives in [TOKENS.md](TOKENS.md).
 
 ## CSS Bundle Notes
 
-- `css/vanduo.css` remains the main framework entrypoint in `1.4.0`.
+- `css/vanduo.css` remains the main framework entrypoint in `1.4.1`.
 - The main bundle still includes framework-wide form defaults for native inputs and textareas.
 - New component styling should prefer `.vd-*` hooks over new raw element selectors.
 
@@ -131,7 +133,7 @@ pnpm run stats:css
 
 - Architecture notes: [ARCHITECTURE.md](ARCHITECTURE.md)
 - Token model: [TOKENS.md](TOKENS.md)
-- `1.4.0` migration notes: [changes-v140.md](changes-v140.md)
+- `1.4.1` token migration notes: [changes-v141.md](changes-v141.md)
 - QA strategy: [QA-Automation-Strategy.md](QA-Automation-Strategy.md)
 - Contributor workflow: [CONTRIBUTING.md](CONTRIBUTING.md)
 

package/css/components/affix.css

@@ -5,19 +5,19 @@
  */
 
 :root {
-  --affix-top-offset: 0;
-  --affix-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --affix-transition: box-shadow 0.2s ease, background-color 0.2s ease;
-  --affix-z-index: 1020;
+  --vd-affix-top-offset: 0;
+  --vd-affix-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --vd-affix-transition: box-shadow 0.2s ease, background-color 0.2s ease;
+  --vd-affix-z-index: 1020;
 }
 
 [data-theme="dark"] {
-  --affix-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --vd-affix-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --affix-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    --vd-affix-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
   }
 }
 
@@ -27,9 +27,9 @@
 .vd-sticky,
 [data-vd-affix] {
   position: sticky;
-  top: var(--affix-top-offset);
-  transition: var(--affix-transition);
-  z-index: calc(var(--affix-z-index) - 1);
+  top: var(--vd-affix-top-offset);
+  transition: var(--vd-affix-transition);
+  z-index: calc(var(--vd-affix-z-index) - 1);
 }
 
 /* ========== Stuck State ========== */
@@ -37,8 +37,8 @@
 .vd-affix.is-stuck,
 .vd-sticky.is-stuck,
 [data-vd-affix].is-stuck {
-  z-index: var(--affix-z-index);
-  box-shadow: var(--affix-shadow);
+  z-index: var(--vd-affix-z-index);
+  box-shadow: var(--vd-affix-shadow);
 }
 
 /* ========== Variants ========== */

package/css/components/alerts.css

@@ -5,93 +5,93 @@
 
 :root {
   /* Alert Spacing (Fibonacci: 21px/13px, ratio ~ phi) */
-  --alert-padding-x: 1.3125rem;   /* 21px - fib */
-  --alert-padding-y: 0.8125rem;   /* 13px - fib */
-  --alert-border-radius: var(--btn-border-radius);
-  --alert-border-width: 1px;
+  --vd-alert-padding-x: 1.3125rem;   /* 21px - fib */
+  --vd-alert-padding-y: 0.8125rem;   /* 13px - fib */
+  --vd-alert-border-radius: var(--vd-btn-border-radius);
+  --vd-alert-border-width: 1px;
 
   /* Alert Colors */
-  --alert-primary-bg: var(--vd-color-primary-alpha-10);
-  --alert-primary-border: var(--vd-color-primary);
-  --alert-primary-text: var(--vd-color-primary-dark);
+  --vd-alert-primary-bg: var(--vd-color-primary-alpha-10);
+  --vd-alert-primary-border: var(--vd-color-primary);
+  --vd-alert-primary-text: var(--vd-color-primary-dark);
 
-  --alert-success-bg: var(--vd-color-success-alpha-10);
-  --alert-success-border: var(--vd-color-success);
-  --alert-success-text: var(--vd-color-success-dark);
+  --vd-alert-success-bg: var(--vd-color-success-alpha-10);
+  --vd-alert-success-border: var(--vd-color-success);
+  --vd-alert-success-text: var(--vd-color-success-dark);
 
-  --alert-warning-bg: var(--vd-color-warning-alpha-10);
-  --alert-warning-border: var(--vd-color-warning);
-  --alert-warning-text: var(--vd-color-warning-dark);
+  --vd-alert-warning-bg: var(--vd-color-warning-alpha-10);
+  --vd-alert-warning-border: var(--vd-color-warning);
+  --vd-alert-warning-text: var(--vd-color-warning-dark);
 
-  --alert-error-bg: var(--vd-color-error-alpha-10);
-  --alert-error-border: var(--vd-color-error);
-  --alert-error-text: var(--vd-color-error-dark);
+  --vd-alert-error-bg: var(--vd-color-error-alpha-10);
+  --vd-alert-error-border: var(--vd-color-error);
+  --vd-alert-error-text: var(--vd-color-error-dark);
 
-  --alert-info-bg: var(--vd-color-info-alpha-10);
-  --alert-info-border: var(--vd-color-info);
-  --alert-info-text: var(--vd-color-info-dark);
+  --vd-alert-info-bg: var(--vd-color-info-alpha-10);
+  --vd-alert-info-border: var(--vd-color-info);
+  --vd-alert-info-text: var(--vd-color-info-dark);
 }
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --alert-primary-text: var(--vd-color-primary-light);
-  --alert-success-text: var(--vd-color-success-light);
-  --alert-warning-text: var(--vd-color-warning-light);
-  --alert-error-text: var(--vd-color-error-light);
-  --alert-info-text: var(--vd-color-info-light);
+  --vd-alert-primary-text: var(--vd-color-primary-light);
+  --vd-alert-success-text: var(--vd-color-success-light);
+  --vd-alert-warning-text: var(--vd-color-warning-light);
+  --vd-alert-error-text: var(--vd-color-error-light);
+  --vd-alert-info-text: var(--vd-color-info-light);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --alert-primary-text: var(--vd-color-primary-light);
-    --alert-success-text: var(--vd-color-success-light);
-    --alert-warning-text: var(--vd-color-warning-light);
-    --alert-error-text: var(--vd-color-error-light);
-    --alert-info-text: var(--vd-color-info-light);
+    --vd-alert-primary-text: var(--vd-color-primary-light);
+    --vd-alert-success-text: var(--vd-color-success-light);
+    --vd-alert-warning-text: var(--vd-color-warning-light);
+    --vd-alert-error-text: var(--vd-color-error-light);
+    --vd-alert-info-text: var(--vd-color-info-light);
   }
 }
 
 /* Base Alert */
 .vd-alert {
   position: relative;
-  padding: var(--alert-padding-y) var(--alert-padding-x);
+  padding: var(--vd-alert-padding-y) var(--vd-alert-padding-x);
   margin-bottom: 1rem;
-  border: var(--alert-border-width) solid transparent;
-  border-radius: var(--alert-border-radius);
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-normal);
+  border: var(--vd-alert-border-width) solid transparent;
+  border-radius: var(--vd-alert-border-radius);
+  font-size: var(--vd-font-size-base);
+  line-height: var(--vd-line-height-normal);
 }
 
 /* Alert Variants */
 .vd-alert-primary {
-  background-color: var(--alert-primary-bg);
-  border-color: var(--alert-primary-border);
-  color: var(--alert-primary-text);
+  background-color: var(--vd-alert-primary-bg);
+  border-color: var(--vd-alert-primary-border);
+  color: var(--vd-alert-primary-text);
 }
 
 .vd-alert-success {
-  background-color: var(--alert-success-bg);
-  border-color: var(--alert-success-border);
-  color: var(--alert-success-text);
+  background-color: var(--vd-alert-success-bg);
+  border-color: var(--vd-alert-success-border);
+  color: var(--vd-alert-success-text);
 }
 
 .vd-alert-warning {
-  background-color: var(--alert-warning-bg);
-  border-color: var(--alert-warning-border);
-  color: var(--alert-warning-text);
+  background-color: var(--vd-alert-warning-bg);
+  border-color: var(--vd-alert-warning-border);
+  color: var(--vd-alert-warning-text);
 }
 
 .vd-alert-error,
 .vd-alert-danger {
-  background-color: var(--alert-error-bg);
-  border-color: var(--alert-error-border);
-  color: var(--alert-error-text);
+  background-color: var(--vd-alert-error-bg);
+  border-color: var(--vd-alert-error-border);
+  color: var(--vd-alert-error-text);
 }
 
 .vd-alert-info {
-  background-color: var(--alert-info-bg);
-  border-color: var(--alert-info-border);
-  color: var(--alert-info-text);
+  background-color: var(--vd-alert-info-bg);
+  border-color: var(--vd-alert-info-border);
+  color: var(--vd-alert-info-text);
 }
 
 /* Alert with Icon */
@@ -111,7 +111,7 @@
 
 /* Alert Title */
 .vd-alert-title {
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--vd-font-weight-semibold);
   margin-bottom: 0.25rem;
 }
 
@@ -129,7 +129,7 @@
   position: absolute;
   top: 0;
   right: 0;
-  padding: var(--alert-padding-y) var(--alert-padding-x);
+  padding: var(--vd-alert-padding-y) var(--vd-alert-padding-x);
   background: transparent;
   border: none;
   cursor: pointer;
@@ -152,7 +152,7 @@
 /* Alert Link */
 .vd-alert a,
 .vd-alert-link {
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--vd-font-weight-semibold);
   color: inherit;
   text-decoration: underline;
 }
@@ -202,18 +202,18 @@
 /* Alert Sizes */
 .vd-alert-sm {
   padding: 0.3125rem 0.5rem; /* 5px 8px - fib pair */
-  font-size: var(--font-size-sm);
+  font-size: var(--vd-font-size-sm);
 }
 
 .vd-alert-lg {
   padding: 1.3125rem 2.125rem; /* 21px 34px - fib pair */
-  font-size: var(--font-size-lg);
+  font-size: var(--vd-font-size-lg);
 }
 
 /* Alert with Border Left Accent */
 .vd-alert-accent {
   border-left-width: 4px;
-  border-radius: 0 var(--alert-border-radius) var(--alert-border-radius) 0;
+  border-radius: 0 var(--vd-alert-border-radius) var(--vd-alert-border-radius) 0;
 }
 
 /* Reduced Motion */

package/css/components/avatar.css

@@ -5,36 +5,36 @@
 
 :root {
   /* Avatar Sizes (Fibonacci) */
-  --avatar-size-xs: 1.3125rem;  /* 21px - fib */
-  --avatar-size-sm: 2.125rem;   /* 34px - fib */
-  --avatar-size-md: 3.4375rem;  /* 55px - fib */
-  --avatar-size: 3.4375rem;     /* 55px - fib (default / md) */
-  --avatar-size-lg: 5.5625rem;  /* 89px - fib */
-  --avatar-size-xl: 9rem;       /* 144px - fib */
-  --avatar-size-2xl: 14.5625rem;/* 233px - fib */
+  --vd-avatar-size-xs: 1.3125rem;  /* 21px - fib */
+  --vd-avatar-size-sm: 2.125rem;   /* 34px - fib */
+  --vd-avatar-size-md: 3.4375rem;  /* 55px - fib */
+  --vd-avatar-size: 3.4375rem;     /* 55px - fib (default / md) */
+  --vd-avatar-size-lg: 5.5625rem;  /* 89px - fib */
+  --vd-avatar-size-xl: 9rem;       /* 144px - fib */
+  --vd-avatar-size-2xl: 14.5625rem;/* 233px - fib */
 
   /* Avatar Colors */
-  --avatar-bg: var(--vd-color-gray-300);
-  --avatar-text: var(--vd-color-gray-700);
-  --avatar-border: var(--vd-color-white);
-  --avatar-status-online: var(--vd-color-success);
-  --avatar-status-offline: var(--vd-color-gray-400);
-  --avatar-status-busy: var(--vd-color-error);
-  --avatar-status-away: var(--vd-color-warning);
+  --vd-avatar-bg: var(--vd-color-gray-300);
+  --vd-avatar-text: var(--vd-color-gray-700);
+  --vd-avatar-border: var(--vd-color-white);
+  --vd-avatar-status-online: var(--vd-color-success);
+  --vd-avatar-status-offline: var(--vd-color-gray-400);
+  --vd-avatar-status-busy: var(--vd-color-error);
+  --vd-avatar-status-away: var(--vd-color-warning);
 }
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --avatar-bg: var(--vd-color-gray-600);
-  --avatar-text: var(--vd-color-gray-200);
-  --avatar-border: var(--vd-color-gray-800);
+  --vd-avatar-bg: var(--vd-color-gray-600);
+  --vd-avatar-text: var(--vd-color-gray-200);
+  --vd-avatar-border: var(--vd-color-gray-800);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --avatar-bg: var(--vd-color-gray-600);
-    --avatar-text: var(--vd-color-gray-200);
-    --avatar-border: var(--vd-color-gray-800);
+    --vd-avatar-bg: var(--vd-color-gray-600);
+    --vd-avatar-text: var(--vd-color-gray-200);
+    --vd-avatar-border: var(--vd-color-gray-800);
   }
 }
 
@@ -44,13 +44,13 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--avatar-size);
-  height: var(--avatar-size);
+  width: var(--vd-avatar-size);
+  height: var(--vd-avatar-size);
   border-radius: 50%;
-  background-color: var(--avatar-bg);
-  color: var(--avatar-text);
-  font-weight: var(--font-weight-medium);
-  font-size: calc(var(--avatar-size) * 0.4);
+  background-color: var(--vd-avatar-bg);
+  color: var(--vd-avatar-text);
+  font-weight: var(--vd-font-weight-medium);
+  font-size: calc(var(--vd-avatar-size) * 0.4);
   line-height: 1;
   overflow: hidden;
   flex-shrink: 0;
@@ -73,44 +73,44 @@
 
 /* Avatar Sizes */
 .vd-avatar-xs {
-  width: var(--avatar-size-xs);
-  height: var(--avatar-size-xs);
-  font-size: calc(var(--avatar-size-xs) * 0.4);
+  width: var(--vd-avatar-size-xs);
+  height: var(--vd-avatar-size-xs);
+  font-size: calc(var(--vd-avatar-size-xs) * 0.4);
 }
 
 .vd-avatar-sm {
-  width: var(--avatar-size-sm);
-  height: var(--avatar-size-sm);
-  font-size: calc(var(--avatar-size-sm) * 0.4);
+  width: var(--vd-avatar-size-sm);
+  height: var(--vd-avatar-size-sm);
+  font-size: calc(var(--vd-avatar-size-sm) * 0.4);
 }
 
 .vd-avatar-md {
-  width: var(--avatar-size-md);
-  height: var(--avatar-size-md);
-  font-size: calc(var(--avatar-size-md) * 0.4);
+  width: var(--vd-avatar-size-md);
+  height: var(--vd-avatar-size-md);
+  font-size: calc(var(--vd-avatar-size-md) * 0.4);
 }
 
 .vd-avatar-lg {
-  width: var(--avatar-size-lg);
-  height: var(--avatar-size-lg);
-  font-size: calc(var(--avatar-size-lg) * 0.4);
+  width: var(--vd-avatar-size-lg);
+  height: var(--vd-avatar-size-lg);
+  font-size: calc(var(--vd-avatar-size-lg) * 0.4);
 }
 
 .vd-avatar-xl {
-  width: var(--avatar-size-xl);
-  height: var(--avatar-size-xl);
-  font-size: calc(var(--avatar-size-xl) * 0.4);
+  width: var(--vd-avatar-size-xl);
+  height: var(--vd-avatar-size-xl);
+  font-size: calc(var(--vd-avatar-size-xl) * 0.4);
 }
 
 .vd-avatar-2xl {
-  width: var(--avatar-size-2xl);
-  height: var(--avatar-size-2xl);
-  font-size: calc(var(--avatar-size-2xl) * 0.4);
+  width: var(--vd-avatar-size-2xl);
+  height: var(--vd-avatar-size-2xl);
+  font-size: calc(var(--vd-avatar-size-2xl) * 0.4);
 }
 
 /* Avatar Shapes */
 .vd-avatar-rounded {
-  border-radius: var(--btn-border-radius);
+  border-radius: var(--vd-btn-border-radius);
 }
 
 .vd-avatar-square {
@@ -127,8 +127,8 @@
   min-width: 0.5rem;
   min-height: 0.5rem;
   border-radius: 50%;
-  border: 2px solid var(--avatar-border);
-  background-color: var(--avatar-status-offline);
+  border: 2px solid var(--vd-avatar-border);
+  background-color: var(--vd-avatar-status-offline);
 }
 
 .vd-avatar.vd-avatar-status-online,
@@ -151,29 +151,29 @@
   min-width: 0.5rem;
   min-height: 0.5rem;
   border-radius: 50%;
-  border: 2px solid var(--avatar-border);
+  border: 2px solid var(--vd-avatar-border);
 }
 
-.vd-avatar.vd-avatar-status-online::after  { background-color: var(--avatar-status-online); }
-.vd-avatar.vd-avatar-status-offline::after { background-color: var(--avatar-status-offline); }
-.vd-avatar.vd-avatar-status-busy::after    { background-color: var(--avatar-status-busy); }
-.vd-avatar.vd-avatar-status-away::after    { background-color: var(--avatar-status-away); }
+.vd-avatar.vd-avatar-status-online::after  { background-color: var(--vd-avatar-status-online); }
+.vd-avatar.vd-avatar-status-offline::after { background-color: var(--vd-avatar-status-offline); }
+.vd-avatar.vd-avatar-status-busy::after    { background-color: var(--vd-avatar-status-busy); }
+.vd-avatar.vd-avatar-status-away::after    { background-color: var(--vd-avatar-status-away); }
 
 /* Avatar with Ring/Border */
 .vd-avatar-ring {
-  box-shadow: 0 0 0 3px var(--avatar-border), 0 0 0 5px var(--vd-color-primary);
+  box-shadow: 0 0 0 3px var(--vd-avatar-border), 0 0 0 5px var(--vd-color-primary);
 }
 
 .vd-avatar-ring-success {
-  box-shadow: 0 0 0 3px var(--avatar-border), 0 0 0 5px var(--vd-color-success);
+  box-shadow: 0 0 0 3px var(--vd-avatar-border), 0 0 0 5px var(--vd-color-success);
 }
 
 .vd-avatar-ring-warning {
-  box-shadow: 0 0 0 3px var(--avatar-border), 0 0 0 5px var(--vd-color-warning);
+  box-shadow: 0 0 0 3px var(--vd-avatar-border), 0 0 0 5px var(--vd-color-warning);
 }
 
 .vd-avatar-ring-error {
-  box-shadow: 0 0 0 3px var(--avatar-border), 0 0 0 5px var(--vd-color-error);
+  box-shadow: 0 0 0 3px var(--vd-avatar-border), 0 0 0 5px var(--vd-color-error);
 }
 
 /* Avatar Group (stacked avatars) */
@@ -183,7 +183,7 @@
 }
 
 .vd-avatar-group .vd-avatar {
-  border: 2px solid var(--avatar-border);
+  border: 2px solid var(--vd-avatar-border);
   margin-left: -0.75rem;
 }
 
@@ -209,14 +209,14 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--avatar-size);
-  height: var(--avatar-size);
+  width: var(--vd-avatar-size);
+  height: var(--vd-avatar-size);
   border-radius: 50%;
   background-color: var(--vd-color-gray-200);
   color: var(--vd-text-primary);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  border: 2px solid var(--avatar-border);
+  font-size: var(--vd-font-size-sm);
+  font-weight: var(--vd-font-weight-medium);
+  border: 2px solid var(--vd-avatar-border);
   margin-left: -0.75rem;
 }
 

package/css/components/badges.css

@@ -5,23 +5,23 @@
 
 :root {
   /* Badge Padding (x/y ratio ~ phi) */
-  --badge-padding-y: 0.3em;
-  --badge-padding-x: 0.48em;     /* 0.48/0.3 = 1.6 ~ phi */
-  --badge-padding-y-sm: 0.18em;
-  --badge-padding-x-sm: 0.3em;   /* 0.3/0.18 = 1.67 ~ phi */
-  --badge-padding-y-lg: 0.42em;
-  --badge-padding-x-lg: 0.65em;    /* 0.65/0.42 = 1.55 ~ phi */
+  --vd-badge-padding-y: 0.3em;
+  --vd-badge-padding-x: 0.48em;     /* 0.48/0.3 = 1.6 ~ phi */
+  --vd-badge-padding-y-sm: 0.18em;
+  --vd-badge-padding-x-sm: 0.3em;   /* 0.3/0.18 = 1.67 ~ phi */
+  --vd-badge-padding-y-lg: 0.42em;
+  --vd-badge-padding-x-lg: 0.65em;    /* 0.65/0.42 = 1.55 ~ phi */
   
   /* Badge Font */
-  --badge-font-size: 0.8125em;
-  --badge-font-size-sm: 0.7em;
-  --badge-font-size-lg: 0.9375em;
-  --badge-font-weight: var(--font-weight-semibold);
-  --badge-line-height: 1;
+  --vd-badge-font-size: 0.8125em;
+  --vd-badge-font-size-sm: 0.7em;
+  --vd-badge-font-size-lg: 0.9375em;
+  --vd-badge-font-weight: var(--vd-font-weight-semibold);
+  --vd-badge-line-height: 1;
   
   /* Badge Border Radius */
-  --badge-border-radius: var(--btn-border-radius-sm);
-  --badge-pill-border-radius: 50rem;
+  --vd-badge-border-radius: var(--vd-btn-border-radius-sm);
+  --vd-badge-pill-border-radius: 50rem;
 }
 
 /* Dark Theme Overrides */
@@ -61,15 +61,15 @@
 /* Base Badge */
 .vd-badge {
   display: inline-block;
-  padding: var(--badge-padding-y) var(--badge-padding-x);
-  font-size: var(--badge-font-size);
-  font-weight: var(--badge-font-weight);
-  line-height: var(--badge-line-height);
+  padding: var(--vd-badge-padding-y) var(--vd-badge-padding-x);
+  font-size: var(--vd-badge-font-size);
+  font-weight: var(--vd-badge-font-weight);
+  line-height: var(--vd-badge-line-height);
   color: var(--vd-color-white);
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
-  border-radius: var(--badge-border-radius);
+  border-radius: var(--vd-badge-border-radius);
   background-color: var(--vd-color-secondary);
 }
 
@@ -116,20 +116,20 @@
 
 /* Badge Sizes */
 .vd-badge-sm {
-  padding: var(--badge-padding-y-sm) var(--badge-padding-x-sm);
-  font-size: var(--badge-font-size-sm);
+  padding: var(--vd-badge-padding-y-sm) var(--vd-badge-padding-x-sm);
+  font-size: var(--vd-badge-font-size-sm);
 }
 
 .vd-badge-lg {
-  padding: var(--badge-padding-y-lg) var(--badge-padding-x-lg);
-  font-size: var(--badge-font-size-lg);
+  padding: var(--vd-badge-padding-y-lg) var(--vd-badge-padding-x-lg);
+  font-size: var(--vd-badge-font-size-lg);
 }
 
 /* Badge Styles */
 .vd-badge-pill {
-  padding-right: var(--badge-padding-x);
-  padding-left: var(--badge-padding-x);
-  border-radius: var(--badge-pill-border-radius);
+  padding-right: var(--vd-badge-padding-x);
+  padding-left: var(--vd-badge-padding-x);
+  border-radius: var(--vd-badge-pill-border-radius);
 }
 
 .vd-badge-outlined {