@vanduo-oss/framework 1.4.0 → 1.4.2

package/css/core/tokens.css

@@ -1,7 +1,7 @@
 /**
  * Vanduo Framework - Design Tokens
  * Centralized CSS custom properties for consistent theming
- * v1.1.1
+ * v1.4.1
  */
 
 :root {
@@ -11,11 +11,11 @@
    * ============================================ */
 
   /* Primary Colors */
-  --vd-color-primary: var(--primary-5);
-  --vd-color-primary-light: var(--primary-3);
-  --vd-color-primary-dark: var(--primary-7);
-  --vd-color-primary-hover: var(--primary-6);
-  --vd-color-primary-active: var(--primary-7);
+  --vd-color-primary: var(--vd-primary-5);
+  --vd-color-primary-light: var(--vd-primary-3);
+  --vd-color-primary-dark: var(--vd-primary-7);
+  --vd-color-primary-hover: var(--vd-primary-6);
+  --vd-color-primary-active: var(--vd-primary-7);
   --vd-color-primary-rgb: 92, 124, 250;
   --vd-color-primary-alpha-5: rgba(92, 124, 250, 0.05);
   --vd-color-primary-alpha-08: rgba(92, 124, 250, 0.08);
@@ -27,11 +27,11 @@
   --vd-color-primary-alpha-50: rgba(92, 124, 250, 0.5);
 
   /* Secondary Colors */
-  --vd-color-secondary: var(--secondary-5);
-  --vd-color-secondary-light: var(--secondary-3);
-  --vd-color-secondary-dark: var(--secondary-7);
-  --vd-color-secondary-hover: var(--secondary-6);
-  --vd-color-secondary-active: var(--secondary-7);
+  --vd-color-secondary: var(--vd-secondary-5);
+  --vd-color-secondary-light: var(--vd-secondary-3);
+  --vd-color-secondary-dark: var(--vd-secondary-7);
+  --vd-color-secondary-hover: var(--vd-secondary-6);
+  --vd-color-secondary-active: var(--vd-secondary-7);
   --vd-color-secondary-alpha-10: rgba(32, 201, 151, 0.1);
   --vd-color-secondary-alpha-20: rgba(32, 201, 151, 0.2);
 
@@ -41,30 +41,30 @@
   --vd-color-accent-dark: var(--vd-color-primary-dark);
 
   /* Semantic Colors */
-  --vd-color-success: var(--success-6);
-  --vd-color-success-light: var(--success-4);
-  --vd-color-success-dark: var(--success-7);
-  --vd-color-success-hover: var(--success-7);
-  --vd-color-success-active: var(--success-8);
+  --vd-color-success: var(--vd-success-6);
+  --vd-color-success-light: var(--vd-success-4);
+  --vd-color-success-dark: var(--vd-success-7);
+  --vd-color-success-hover: var(--vd-success-7);
+  --vd-color-success-active: var(--vd-success-8);
   --vd-color-success-rgb: 64, 192, 87;
   --vd-color-success-alpha-10: rgba(64, 192, 87, 0.1);
   --vd-color-success-alpha-20: rgba(64, 192, 87, 0.2);
 
-  --vd-color-warning: var(--warning-6);
-  --vd-color-warning-light: var(--warning-4);
-  --vd-color-warning-dark: var(--warning-7);
-  --vd-color-warning-hover: var(--warning-7);
-  --vd-color-warning-active: var(--warning-8);
+  --vd-color-warning: var(--vd-warning-6);
+  --vd-color-warning-light: var(--vd-warning-4);
+  --vd-color-warning-dark: var(--vd-warning-7);
+  --vd-color-warning-hover: var(--vd-warning-7);
+  --vd-color-warning-active: var(--vd-warning-8);
   --vd-color-warning-rgb: 250, 176, 5;
   --vd-color-warning-alpha-10: rgba(250, 176, 5, 0.1);
   --vd-color-warning-alpha-20: rgba(250, 176, 5, 0.2);
   --vd-color-warning-alpha-30: rgba(250, 176, 5, 0.3);
 
-  --vd-color-error: var(--danger-6);
-  --vd-color-error-light: var(--danger-4);
-  --vd-color-error-dark: var(--danger-7);
-  --vd-color-error-hover: var(--danger-7);
-  --vd-color-error-active: var(--danger-8);
+  --vd-color-error: var(--vd-danger-6);
+  --vd-color-error-light: var(--vd-danger-4);
+  --vd-color-error-dark: var(--vd-danger-7);
+  --vd-color-error-hover: var(--vd-danger-7);
+  --vd-color-error-active: var(--vd-danger-8);
   --vd-color-error-rgb: 250, 82, 82;
   --vd-color-error-alpha-10: rgba(250, 82, 82, 0.1);
   --vd-color-error-alpha-20: rgba(250, 82, 82, 0.2);
@@ -77,11 +77,11 @@
   --vd-color-danger-alpha-10: var(--vd-color-error-alpha-10);
   --vd-color-danger-alpha-20: var(--vd-color-error-alpha-20);
 
-  --vd-color-info: var(--info-6);
-  --vd-color-info-light: var(--info-4);
-  --vd-color-info-dark: var(--info-7);
-  --vd-color-info-hover: var(--info-7);
-  --vd-color-info-active: var(--info-8);
+  --vd-color-info: var(--vd-info-6);
+  --vd-color-info-light: var(--vd-info-4);
+  --vd-color-info-dark: var(--vd-info-7);
+  --vd-color-info-hover: var(--vd-info-7);
+  --vd-color-info-active: var(--vd-info-8);
   --vd-color-info-rgb: 34, 139, 230;
   --vd-color-info-alpha-10: rgba(34, 139, 230, 0.1);
   --vd-color-info-alpha-20: rgba(34, 139, 230, 0.2);
@@ -89,15 +89,15 @@
   /* Neutral Colors (Open Color) */
   --vd-color-white: #ffffff;
   --vd-color-black: #000000;
-  --vd-color-gray-50: var(--gray-0);
-  --vd-color-gray-100: var(--gray-2);
-  --vd-color-gray-200: var(--gray-3);
-  --vd-color-gray-300: var(--gray-4);
-  --vd-color-gray-400: var(--gray-5);
-  --vd-color-gray-500: var(--gray-6);
-  --vd-color-gray-600: var(--gray-7);
-  --vd-color-gray-700: var(--gray-8);
-  --vd-color-gray-800: var(--gray-9);
+  --vd-color-gray-50: var(--vd-gray-0);
+  --vd-color-gray-100: var(--vd-gray-2);
+  --vd-color-gray-200: var(--vd-gray-3);
+  --vd-color-gray-300: var(--vd-gray-4);
+  --vd-color-gray-400: var(--vd-gray-5);
+  --vd-color-gray-500: var(--vd-gray-6);
+  --vd-color-gray-600: var(--vd-gray-7);
+  --vd-color-gray-700: var(--vd-gray-8);
+  --vd-color-gray-800: var(--vd-gray-9);
   --vd-color-gray-900: #1a1d20;
 
   /* ============================================
@@ -197,29 +197,17 @@
   /* ============================================
    * 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);
+  --vd-glass-blur: 12px;
+  --vd-glass-saturate: 1.8;
+  --vd-glass-bg-opacity: 0.65;
+  --vd-glass-bg-light: rgba(255, 255, 255, var(--vd-glass-bg-opacity));
+  --vd-glass-bg-dark: rgba(30, 30, 30, var(--vd-glass-bg-opacity));
+  --vd-glass-border-alpha: 0.18;
+  --vd-glass-border-light: rgba(255, 255, 255, var(--vd-glass-border-alpha));
+  --vd-glass-border-dark: rgba(255, 255, 255, 0.08);
+  --vd-glass-highlight-alpha: 0.25;
+  --vd-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  --vd-glass-noise-opacity: 0.03;
 
   /* ============================================
    * TRANSITION TOKENS
@@ -271,11 +259,11 @@
   --vd-border-color-light: var(--vd-color-gray-800);
   --vd-border-color-dark: var(--vd-color-gray-600);
 
-  --vd-color-primary: var(--primary-4);
-  --vd-color-primary-light: var(--primary-3);
-  --vd-color-primary-dark: var(--primary-5);
-  --vd-color-primary-hover: var(--primary-5);
-  --vd-color-primary-active: var(--primary-6);
+  --vd-color-primary: var(--vd-primary-4);
+  --vd-color-primary-light: var(--vd-primary-3);
+  --vd-color-primary-dark: var(--vd-primary-5);
+  --vd-color-primary-hover: var(--vd-primary-5);
+  --vd-color-primary-active: var(--vd-primary-6);
   --vd-color-primary-alpha-10: rgba(116, 143, 252, 0.15);
   --vd-color-primary-alpha-20: rgba(116, 143, 252, 0.25);
 
@@ -283,10 +271,10 @@
   --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;
+  --vd-glass-bg-light: var(--vd-glass-bg-dark);
+  --vd-glass-border-light: var(--vd-glass-border-dark);
+  --vd-glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
+  --vd-glass-highlight-alpha: 0.16;
 }
 
 /* Dark mode via prefers-color-scheme */
@@ -308,11 +296,11 @@
     --vd-border-color-light: var(--vd-color-gray-800);
     --vd-border-color-dark: var(--vd-color-gray-600);
 
-    --vd-color-primary: var(--primary-4);
-    --vd-color-primary-light: var(--primary-3);
-    --vd-color-primary-dark: var(--primary-5);
-    --vd-color-primary-hover: var(--primary-5);
-    --vd-color-primary-active: var(--primary-6);
+    --vd-color-primary: var(--vd-primary-4);
+    --vd-color-primary-light: var(--vd-primary-3);
+    --vd-color-primary-dark: var(--vd-primary-5);
+    --vd-color-primary-hover: var(--vd-primary-5);
+    --vd-color-primary-active: var(--vd-primary-6);
     --vd-color-primary-alpha-10: rgba(116, 143, 252, 0.15);
     --vd-color-primary-alpha-20: rgba(116, 143, 252, 0.25);
 
@@ -320,9 +308,9 @@
     --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;
+    --vd-glass-bg-light: var(--vd-glass-bg-dark);
+    --vd-glass-border-light: var(--vd-glass-border-dark);
+    --vd-glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
+    --vd-glass-highlight-alpha: 0.16;
   }
 }

package/css/core/typography.css

@@ -6,55 +6,55 @@
 /* stylelint-disable-next-line no-duplicate-selectors -- token families stay grouped by concern. */
 :root {
   /* Font Families */
-  --font-family-sans: 'Ubuntu', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --font-family-serif: Georgia, "Times New Roman", Times, serif;
-  --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
+  --vd-font-family-sans: 'Ubuntu', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --vd-font-family-serif: Georgia, "Times New Roman", Times, serif;
+  --vd-font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
 }
 
 /* Font Switching - Applied via data-font attribute on html element */
 [data-font="inter"] {
-  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 [data-font="source-sans"] {
-  --font-family-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-font-family-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 [data-font="fira-sans"] {
-  --font-family-sans: 'Fira Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-font-family-sans: 'Fira Sans', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 [data-font="ibm-plex"] {
-  --font-family-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-font-family-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 [data-font="jetbrains-mono"] {
-  --font-family-sans: 'JetBrains Mono', monospace;
-  --font-family-mono: 'JetBrains Mono', monospace;
+  --vd-font-family-sans: 'JetBrains Mono', monospace;
+  --vd-font-family-mono: 'JetBrains Mono', monospace;
 }
 
 [data-font="ubuntu"] {
-  --font-family-sans: 'Ubuntu', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-font-family-sans: 'Ubuntu', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 [data-font="lato"] {
-  --font-family-sans: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-font-family-sans: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 [data-font="open-sans"] {
-  --font-family-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-font-family-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 [data-font="zen-dots"] {
-  --font-family-sans: 'Zen Dots', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-font-family-sans: 'Zen Dots', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 [data-font="rubik"] {
-  --font-family-sans: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-font-family-sans: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 [data-font="titillium-web"] {
-  --font-family-sans: 'Titillium Web', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-font-family-sans: 'Titillium Web', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 /* stylelint-disable-next-line no-duplicate-selectors -- type scale tokens stay grouped separately from font-family tokens. */
@@ -65,62 +65,62 @@
    * Mobile scale: ~1.414 (Augmented Fourth)
    * Desktop scale: 1.618 (Golden Ratio)
    */
-  --font-size-xs: 0.625rem;
+  --vd-font-size-xs: 0.625rem;
   /* 10px */
-  --font-size-sm: 0.8125rem;
+  --vd-font-size-sm: 0.8125rem;
   /* 13px */
-  --font-size-base: 1rem;
+  --vd-font-size-base: 1rem;
   /* 16px */
-  --font-size-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
+  --vd-font-size-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
   /* 18px -> 20px */
-  --font-size-xl: clamp(1.35rem, 1.25rem + 0.5vw, 1.625rem);
+  --vd-font-size-xl: clamp(1.35rem, 1.25rem + 0.5vw, 1.625rem);
   /* 21.6px -> 26px */
-  --font-size-2xl: clamp(1.62rem, 1.46rem + 0.8vw, 2.0625rem);
+  --vd-font-size-2xl: clamp(1.62rem, 1.46rem + 0.8vw, 2.0625rem);
   /* 26px -> 33px */
-  --font-size-3xl: clamp(1.94rem, 1.69rem + 1.25vw, 2.625rem);
+  --vd-font-size-3xl: clamp(1.94rem, 1.69rem + 1.25vw, 2.625rem);
   /* 31px -> 42px */
-  --font-size-4xl: clamp(2.33rem, 1.97rem + 1.8vw, 3.3125rem);
+  --vd-font-size-4xl: clamp(2.33rem, 1.97rem + 1.8vw, 3.3125rem);
   /* 37px -> 53px */
-  --font-size-5xl: clamp(2.8rem, 2.27rem + 2.65vw, 4.25rem);
+  --vd-font-size-5xl: clamp(2.8rem, 2.27rem + 2.65vw, 4.25rem);
   /* 45px -> 68px */
-  --font-size-6xl: clamp(3.36rem, 2.63rem + 3.65vw, 5.375rem);
+  --vd-font-size-6xl: clamp(3.36rem, 2.63rem + 3.65vw, 5.375rem);
   /* 54px -> 86px */
 
   /* Font Weights */
-  --font-weight-light: 300;
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --font-weight-extrabold: 800;
+  --vd-font-weight-light: 300;
+  --vd-font-weight-normal: 400;
+  --vd-font-weight-medium: 500;
+  --vd-font-weight-semibold: 600;
+  --vd-font-weight-bold: 700;
+  --vd-font-weight-extrabold: 800;
 
   /* Line Heights (phi-derived) */
-  --line-height-none: 1;
-  --line-height-tight: 1.236;
+  --vd-line-height-none: 1;
+  --vd-line-height-tight: 1.236;
   /* ~2/phi - for headings */
-  --line-height-snug: 1.382;
+  --vd-line-height-snug: 1.382;
   /* ~(1+1/phi)/1.17 */
-  --line-height-normal: 1.5;
+  --vd-line-height-normal: 1.5;
   /* body text standard */
-  --line-height-relaxed: 1.618;
+  --vd-line-height-relaxed: 1.618;
   /* phi itself */
-  --line-height-loose: 2;
+  --vd-line-height-loose: 2;
 
   /* Letter Spacing */
-  --letter-spacing-tighter: -0.05em;
-  --letter-spacing-tight: -0.025em;
-  --letter-spacing-normal: 0;
-  --letter-spacing-wide: 0.025em;
-  --letter-spacing-wider: 0.05em;
-  --letter-spacing-widest: 0.1em;
+  --vd-letter-spacing-tighter: -0.05em;
+  --vd-letter-spacing-tight: -0.025em;
+  --vd-letter-spacing-normal: 0;
+  --vd-letter-spacing-wide: 0.025em;
+  --vd-letter-spacing-wider: 0.05em;
+  --vd-letter-spacing-widest: 0.1em;
 }
 
 /* Base Typography */
 body {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-normal);
-  line-height: var(--line-height-normal);
+  font-family: var(--vd-font-family-sans);
+  font-size: var(--vd-font-size-base);
+  font-weight: var(--vd-font-weight-normal);
+  line-height: var(--vd-line-height-normal);
   color: var(--vd-text-primary);
   background-color: var(--vd-bg-primary);
 }
@@ -134,33 +134,33 @@ h5,
 h6 {
   margin-top: 0;
   margin-bottom: 0.5em;
-  font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-tight);
+  font-weight: var(--vd-font-weight-bold);
+  line-height: var(--vd-line-height-tight);
   color: var(--vd-text-primary);
 }
 
 h1 {
-  font-size: var(--font-size-4xl);
+  font-size: var(--vd-font-size-4xl);
 }
 
 h2 {
-  font-size: var(--font-size-3xl);
+  font-size: var(--vd-font-size-3xl);
 }
 
 h3 {
-  font-size: var(--font-size-2xl);
+  font-size: var(--vd-font-size-2xl);
 }
 
 h4 {
-  font-size: var(--font-size-xl);
+  font-size: var(--vd-font-size-xl);
 }
 
 h5 {
-  font-size: var(--font-size-lg);
+  font-size: var(--vd-font-size-lg);
 }
 
 h6 {
-  font-size: var(--font-size-base);
+  font-size: var(--vd-font-size-base);
 }
 
 /* Paragraphs */
@@ -205,7 +205,7 @@ dl {
 }
 
 dt {
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--vd-font-weight-semibold);
   margin-top: 0.5em;
 }
 
@@ -227,22 +227,22 @@ blockquote {
 
 /* Code */
 code {
-  font-family: var(--font-family-mono);
+  font-family: var(--vd-font-family-mono);
   font-size: 0.875em;
   background-color: var(--vd-bg-secondary);
   padding: 0.125em 0.1875em;
   /* 2px 3px - fib pair */
-  border-radius: var(--radius-fib-3);
+  border-radius: var(--vd-radius-fib-3);
   color: var(--vd-color-primary-dark);
 }
 
 pre {
-  font-family: var(--font-family-mono);
+  font-family: var(--vd-font-family-mono);
   font-size: 0.875em;
   background-color: var(--vd-bg-secondary);
   padding: 0.8125rem;
   /* 13px - fib */
-  border-radius: var(--radius-fib-5);
+  border-radius: var(--vd-radius-fib-5);
   overflow-x: auto;
   margin: 1em 0;
 }
@@ -255,77 +255,77 @@ pre code {
 
 /* Font Family Utilities */
 .vd-font-sans {
-  font-family: var(--font-family-sans);
+  font-family: var(--vd-font-family-sans);
 }
 
 .vd-font-serif {
-  font-family: var(--font-family-serif);
+  font-family: var(--vd-font-family-serif);
 }
 
 .vd-font-mono {
-  font-family: var(--font-family-mono);
+  font-family: var(--vd-font-family-mono);
 }
 
 /* Font Size Utilities */
 .vd-text-xs {
-  font-size: var(--font-size-xs);
+  font-size: var(--vd-font-size-xs);
 }
 
 .vd-text-sm {
-  font-size: var(--font-size-sm);
+  font-size: var(--vd-font-size-sm);
 }
 
 .vd-text-base {
-  font-size: var(--font-size-base);
+  font-size: var(--vd-font-size-base);
 }
 
 .vd-text-lg {
-  font-size: var(--font-size-lg);
+  font-size: var(--vd-font-size-lg);
 }
 
 .vd-text-xl {
-  font-size: var(--font-size-xl);
+  font-size: var(--vd-font-size-xl);
 }
 
 .vd-text-2xl {
-  font-size: var(--font-size-2xl);
+  font-size: var(--vd-font-size-2xl);
 }
 
 .vd-text-3xl {
-  font-size: var(--font-size-3xl);
+  font-size: var(--vd-font-size-3xl);
 }
 
 .vd-text-4xl {
-  font-size: var(--font-size-4xl);
+  font-size: var(--vd-font-size-4xl);
 }
 
 .vd-text-5xl {
-  font-size: var(--font-size-5xl);
+  font-size: var(--vd-font-size-5xl);
 }
 
 .vd-text-6xl {
-  font-size: var(--font-size-6xl);
+  font-size: var(--vd-font-size-6xl);
 }
 
 /* Font Weight Utilities */
 .vd-font-light {
-  font-weight: var(--font-weight-light);
+  font-weight: var(--vd-font-weight-light);
 }
 
 .vd-font-normal {
-  font-weight: var(--font-weight-normal);
+  font-weight: var(--vd-font-weight-normal);
 }
 
 .vd-font-medium {
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--vd-font-weight-medium);
 }
 
 .vd-font-semibold {
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--vd-font-weight-semibold);
 }
 
 .vd-font-bold {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--vd-font-weight-bold);
 }
 
 .vd-text-italic {
@@ -333,7 +333,7 @@ pre code {
 }
 
 .vd-font-extrabold {
-  font-weight: var(--font-weight-extrabold);
+  font-weight: var(--vd-font-weight-extrabold);
 }
 
 /* Text Alignment: see helpers.css for .vd-text-left, .vd-text-center, .vd-text-right, .vd-text-justify */
@@ -370,50 +370,50 @@ pre code {
 
 /* Line Height Utilities */
 .leading-none {
-  line-height: var(--line-height-none);
+  line-height: var(--vd-line-height-none);
 }
 
 .leading-tight {
-  line-height: var(--line-height-tight);
+  line-height: var(--vd-line-height-tight);
 }
 
 .leading-snug {
-  line-height: var(--line-height-snug);
+  line-height: var(--vd-line-height-snug);
 }
 
 .leading-normal {
-  line-height: var(--line-height-normal);
+  line-height: var(--vd-line-height-normal);
 }
 
 .leading-relaxed {
-  line-height: var(--line-height-relaxed);
+  line-height: var(--vd-line-height-relaxed);
 }
 
 .leading-loose {
-  line-height: var(--line-height-loose);
+  line-height: var(--vd-line-height-loose);
 }
 
 /* Letter Spacing Utilities */
 .tracking-tighter {
-  letter-spacing: var(--letter-spacing-tighter);
+  letter-spacing: var(--vd-letter-spacing-tighter);
 }
 
 .tracking-tight {
-  letter-spacing: var(--letter-spacing-tight);
+  letter-spacing: var(--vd-letter-spacing-tight);
 }
 
 .tracking-normal {
-  letter-spacing: var(--letter-spacing-normal);
+  letter-spacing: var(--vd-letter-spacing-normal);
 }
 
 .tracking-wide {
-  letter-spacing: var(--letter-spacing-wide);
+  letter-spacing: var(--vd-letter-spacing-wide);
 }
 
 .tracking-wider {
-  letter-spacing: var(--letter-spacing-wider);
+  letter-spacing: var(--vd-letter-spacing-wider);
 }
 
 .tracking-widest {
-  letter-spacing: var(--letter-spacing-widest);
+  letter-spacing: var(--vd-letter-spacing-widest);
 }