@vanduo-oss/framework 1.4.0 → 1.4.2

package/css/utilities/shadow.css

@@ -7,26 +7,26 @@
   /* Fibonacci Shadow System
    * Y-offset and blur follow Fibonacci pairs: 1/2, 2/3, 3/5, 8/13, 13/21, 21/34
    * Each level steps through the Fibonacci sequence */
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 3px -2px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.1), 0 5px 8px -5px rgba(0, 0, 0, 0.1);
-  --shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.25);
-  --shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.05);
+  --vd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --vd-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --vd-shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 3px -2px rgba(0, 0, 0, 0.1);
+  --vd-shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
+  --vd-shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.1), 0 5px 8px -5px rgba(0, 0, 0, 0.1);
+  --vd-shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.25);
+  --vd-shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.05);
 
   /* Colored Shadows (Fibonacci: 3/5 offset/blur)
    * Colors match Open Color palette defined in colors.css */
-  --shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.2), 0 2px 3px -2px rgba(34, 184, 207, 0.1);
-  --shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.2), 0 2px 3px -2px rgba(64, 192, 87, 0.1);
-  --shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.2), 0 2px 3px -2px rgba(250, 176, 5, 0.1);
-  --shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.2), 0 2px 3px -2px rgba(250, 82, 82, 0.1);
+  --vd-shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.2), 0 2px 3px -2px rgba(34, 184, 207, 0.1);
+  --vd-shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.2), 0 2px 3px -2px rgba(64, 192, 87, 0.1);
+  --vd-shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.2), 0 2px 3px -2px rgba(250, 176, 5, 0.1);
+  --vd-shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.2), 0 2px 3px -2px rgba(250, 82, 82, 0.1);
 
   /* Glow Effect Colors - uses color scale variables */
-  --glow-primary-color: var(--primary-3);
-  --glow-success-color: var(--success-3);
-  --glow-warning-color: var(--warning-3);
-  --glow-error-color: var(--danger-3);
+  --vd-glow-primary-color: var(--vd-primary-3);
+  --vd-glow-success-color: var(--vd-success-3);
+  --vd-glow-warning-color: var(--vd-warning-3);
+  --vd-glow-error-color: var(--vd-danger-3);
 }
 
 /* Shadow Utilities */
@@ -35,48 +35,48 @@
 }
 
 .vd-shadow-sm {
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--vd-shadow-sm);
 }
 
 .vd-shadow {
-  box-shadow: var(--shadow);
+  box-shadow: var(--vd-shadow);
 }
 
 .vd-shadow-md {
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--vd-shadow-md);
 }
 
 .vd-shadow-lg {
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--vd-shadow-lg);
 }
 
 .vd-shadow-xl {
-  box-shadow: var(--shadow-xl);
+  box-shadow: var(--vd-shadow-xl);
 }
 
 .vd-shadow-2xl {
-  box-shadow: var(--shadow-2xl);
+  box-shadow: var(--vd-shadow-2xl);
 }
 
 .vd-shadow-inner {
-  box-shadow: var(--shadow-inner);
+  box-shadow: var(--vd-shadow-inner);
 }
 
 /* Colored Shadow Utilities */
 .vd-shadow-primary {
-  box-shadow: var(--shadow-primary);
+  box-shadow: var(--vd-shadow-primary);
 }
 
 .vd-shadow-success {
-  box-shadow: var(--shadow-success);
+  box-shadow: var(--vd-shadow-success);
 }
 
 .vd-shadow-warning {
-  box-shadow: var(--shadow-warning);
+  box-shadow: var(--vd-shadow-warning);
 }
 
 .vd-shadow-error {
-  box-shadow: var(--shadow-error);
+  box-shadow: var(--vd-shadow-error);
 }
 
 /* Elevation Levels (for Material Design-like system) */
@@ -85,23 +85,23 @@
 }
 
 .elevation-1 {
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--vd-shadow-sm);
 }
 
 .elevation-2 {
-  box-shadow: var(--shadow);
+  box-shadow: var(--vd-shadow);
 }
 
 .elevation-3 {
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--vd-shadow-md);
 }
 
 .elevation-4 {
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--vd-shadow-lg);
 }
 
 .elevation-5 {
-  box-shadow: var(--shadow-xl);
+  box-shadow: var(--vd-shadow-xl);
 }
 
 /* ═════════════════════════════════════════════════════════════════════════
@@ -114,7 +114,7 @@
 .vd-glow-primary,
 .glow,
 .glow-primary {
-  box-shadow: 0 0 15px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.25));
 }
 
 /* Glow on Hover */
@@ -129,70 +129,70 @@
 .vd-hover-glow-primary:hover,
 .hover-glow:hover,
 .hover-glow-primary:hover {
-  box-shadow: 0 0 15px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.25));
 }
 
 /* Glow Color Variants */
 .vd-glow-success,
 .glow-success {
-  box-shadow: 0 0 15px 0 var(--glow-success-color, rgba(64, 192, 87, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-success-color, rgba(64, 192, 87, 0.25));
 }
 
 .vd-glow-warning,
 .glow-warning {
-  box-shadow: 0 0 15px 0 var(--glow-warning-color, rgba(250, 176, 5, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-warning-color, rgba(250, 176, 5, 0.25));
 }
 
 .vd-glow-error,
 .glow-error {
-  box-shadow: 0 0 15px 0 var(--glow-error-color, rgba(250, 82, 82, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-error-color, rgba(250, 82, 82, 0.25));
 }
 
 /* Glow Hover Variants */
 .vd-hover-glow-success:hover,
 .hover-glow-success:hover {
-  box-shadow: 0 0 15px 0 var(--glow-success-color, rgba(64, 192, 87, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-success-color, rgba(64, 192, 87, 0.25));
 }
 
 .vd-hover-glow-warning:hover,
 .hover-glow-warning:hover {
-  box-shadow: 0 0 15px 0 var(--glow-warning-color, rgba(250, 176, 5, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-warning-color, rgba(250, 176, 5, 0.25));
 }
 
 .vd-hover-glow-error:hover,
 .hover-glow-error:hover {
-  box-shadow: 0 0 15px 0 var(--glow-error-color, rgba(250, 82, 82, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-error-color, rgba(250, 82, 82, 0.25));
 }
 
 /* Glow Intensity Variants */
 .vd-glow-sm,
 .glow-sm {
-  box-shadow: 0 0 8px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.15));
+  box-shadow: 0 0 8px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.15));
 }
 
 .vd-glow-md,
 .glow-md {
-  box-shadow: 0 0 15px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.25));
 }
 
 .vd-glow-lg,
 .glow-lg {
-  box-shadow: 0 0 22px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.35));
+  box-shadow: 0 0 22px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.35));
 }
 
 .vd-hover-glow-sm:hover,
 .hover-glow-sm:hover {
-  box-shadow: 0 0 8px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.15));
+  box-shadow: 0 0 8px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.15));
 }
 
 .vd-hover-glow-md:hover,
 .hover-glow-md:hover {
-  box-shadow: 0 0 15px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.25));
 }
 
 .vd-hover-glow-lg:hover,
 .hover-glow-lg:hover {
-  box-shadow: 0 0 22px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.35));
+  box-shadow: 0 0 22px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.35));
 }
 
 /* Dark Mode Shadow Overrides
@@ -200,44 +200,44 @@
  * Matches both explicit dark theme and system preference */
 [data-theme="dark"],
 :root:not([data-theme]) {
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.35), 0 2px 3px -2px rgba(0, 0, 0, 0.3);
-  --shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.35), 0 3px 5px -3px rgba(0, 0, 0, 0.3);
-  --shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.35), 0 5px 8px -5px rgba(0, 0, 0, 0.3);
-  --shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.5);
-  --shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.2);
-  --shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.3), 0 2px 3px -2px rgba(34, 184, 207, 0.2);
-  --shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.3), 0 2px 3px -2px rgba(64, 192, 87, 0.2);
-  --shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.3), 0 2px 3px -2px rgba(250, 176, 5, 0.2);
-  --shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.3), 0 2px 3px -2px rgba(250, 82, 82, 0.2);
+  --vd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --vd-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
+  --vd-shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.35), 0 2px 3px -2px rgba(0, 0, 0, 0.3);
+  --vd-shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.35), 0 3px 5px -3px rgba(0, 0, 0, 0.3);
+  --vd-shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.35), 0 5px 8px -5px rgba(0, 0, 0, 0.3);
+  --vd-shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.5);
+  --vd-shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.2);
+  --vd-shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.3), 0 2px 3px -2px rgba(34, 184, 207, 0.2);
+  --vd-shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.3), 0 2px 3px -2px rgba(64, 192, 87, 0.2);
+  --vd-shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.3), 0 2px 3px -2px rgba(250, 176, 5, 0.2);
+  --vd-shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.3), 0 2px 3px -2px rgba(250, 82, 82, 0.2);
 
   /* Glow Effect Colors - Dark Mode (lighter shades for visibility) */
-  --glow-primary-color: var(--primary-4);
-  --glow-success-color: var(--success-4);
-  --glow-warning-color: var(--warning-4);
-  --glow-error-color: var(--danger-4);
+  --vd-glow-primary-color: var(--vd-primary-4);
+  --vd-glow-success-color: var(--vd-success-4);
+  --vd-glow-warning-color: var(--vd-warning-4);
+  --vd-glow-error-color: var(--vd-danger-4);
 }
 
 /* System preference dark mode (when no explicit theme is set) */
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-    --shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
-    --shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.35), 0 2px 3px -2px rgba(0, 0, 0, 0.3);
-    --shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.35), 0 3px 5px -3px rgba(0, 0, 0, 0.3);
-    --shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.35), 0 5px 8px -5px rgba(0, 0, 0, 0.3);
-    --shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.5);
-    --shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.2);
-    --shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.3), 0 2px 3px -2px rgba(34, 184, 207, 0.2);
-    --shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.3), 0 2px 3px -2px rgba(64, 192, 87, 0.2);
-    --shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.3), 0 2px 3px -2px rgba(250, 176, 5, 0.2);
-    --shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.3), 0 2px 3px -2px rgba(250, 82, 82, 0.2);
+    --vd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+    --vd-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
+    --vd-shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.35), 0 2px 3px -2px rgba(0, 0, 0, 0.3);
+    --vd-shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.35), 0 3px 5px -3px rgba(0, 0, 0, 0.3);
+    --vd-shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.35), 0 5px 8px -5px rgba(0, 0, 0, 0.3);
+    --vd-shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.5);
+    --vd-shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.2);
+    --vd-shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.3), 0 2px 3px -2px rgba(34, 184, 207, 0.2);
+    --vd-shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.3), 0 2px 3px -2px rgba(64, 192, 87, 0.2);
+    --vd-shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.3), 0 2px 3px -2px rgba(250, 176, 5, 0.2);
+    --vd-shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.3), 0 2px 3px -2px rgba(250, 82, 82, 0.2);
 
     /* Glow Effect Colors - Dark Mode */
-    --glow-primary-color: var(--primary-4);
-    --glow-success-color: var(--success-4);
-    --glow-warning-color: var(--warning-4);
-    --glow-error-color: var(--danger-4);
+    --vd-glow-primary-color: var(--vd-primary-4);
+    --vd-glow-success-color: var(--vd-success-4);
+    --vd-glow-warning-color: var(--vd-warning-4);
+    --vd-glow-error-color: var(--vd-danger-4);
   }
 }

package/css/utilities/table.css

@@ -5,20 +5,20 @@
 
 :root {
   /* Table Colors */
-  --table-bg: var(--vd-color-white);
-  --table-border-color: var(--vd-border-color);
-  --table-striped-bg: var(--vd-bg-secondary);
-  --table-hover-bg: rgba(0, 0, 0, 0.075);
-  --table-active-bg: var(--vd-color-primary-alpha-10);
+  --vd-table-bg: var(--vd-color-white);
+  --vd-table-border-color: var(--vd-border-color);
+  --vd-table-striped-bg: var(--vd-bg-secondary);
+  --vd-table-hover-bg: rgba(0, 0, 0, 0.075);
+  --vd-table-active-bg: var(--vd-color-primary-alpha-10);
 
   /* Table Spacing (Fibonacci) */
-  --table-padding-y: 0.5rem;
+  --vd-table-padding-y: 0.5rem;
   /* 8px  - fib */
-  --table-padding-x: 0.8125rem;
+  --vd-table-padding-x: 0.8125rem;
   /* 13px - fib (13/8 ~ phi) */
-  --table-padding-y-sm: 0.3125rem;
+  --vd-table-padding-y-sm: 0.3125rem;
   /* 5px  - fib */
-  --table-padding-x-sm: 0.5rem;
+  --vd-table-padding-x-sm: 0.5rem;
   /* 8px  - fib (8/5 ~ phi) */
 }
 
@@ -28,7 +28,7 @@
   width: 100%;
   margin-bottom: 1rem;
   color: var(--vd-text-primary);
-  background-color: var(--table-bg);
+  background-color: var(--vd-table-bg);
   border-collapse: collapse;
 }
 
@@ -36,35 +36,35 @@
 .vd-table td,
 .table th,
 .table td {
-  padding: var(--table-padding-y) var(--table-padding-x);
+  padding: var(--vd-table-padding-y) var(--vd-table-padding-x);
   vertical-align: middle;
-  border-top: 1px solid var(--table-border-color);
+  border-top: 1px solid var(--vd-table-border-color);
 }
 
 .vd-table thead th,
 .table thead th {
   vertical-align: bottom;
-  border-bottom: 2px solid var(--table-border-color);
-  font-weight: var(--font-weight-semibold);
+  border-bottom: 2px solid var(--vd-table-border-color);
+  font-weight: var(--vd-font-weight-semibold);
   color: var(--vd-text-primary);
 }
 
 .vd-table tbody+tbody,
 .table tbody+tbody {
-  border-top: 2px solid var(--table-border-color);
+  border-top: 2px solid var(--vd-table-border-color);
 }
 
 /* Table Variants */
 .vd-table-bordered,
 .table-bordered {
-  border: 1px solid var(--table-border-color);
+  border: 1px solid var(--vd-table-border-color);
 }
 
 .vd-table-bordered th,
 .vd-table-bordered td,
 .table-bordered th,
 .table-bordered td {
-  border: 1px solid var(--table-border-color);
+  border: 1px solid var(--vd-table-border-color);
 }
 
 .vd-table-bordered thead th,
@@ -87,19 +87,19 @@
 
 .vd-table-striped tbody tr:nth-of-type(odd),
 .table-striped tbody tr:nth-of-type(odd) {
-  background-color: var(--table-striped-bg);
+  background-color: var(--vd-table-striped-bg);
 }
 
 .vd-table-hover tbody tr:hover,
 .table-hover tbody tr:hover {
-  background-color: var(--table-hover-bg);
+  background-color: var(--vd-table-hover-bg);
 }
 
 .vd-table-sm th,
 .vd-table-sm td,
 .table-sm th,
 .table-sm td {
-  padding: var(--table-padding-y-sm) var(--table-padding-x-sm);
+  padding: var(--vd-table-padding-y-sm) var(--vd-table-padding-x-sm);
 }
 
 /* Table Cell States */
@@ -109,7 +109,7 @@
 .table-active,
 .table-active>th,
 .table-active>td {
-  background-color: var(--table-active-bg);
+  background-color: var(--vd-table-active-bg);
 }
 
 .vd-table-primary,
@@ -182,9 +182,9 @@ thead {
 .vd-table-header th,
 .table-header th,
 thead th {
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--vd-font-weight-semibold);
   text-transform: uppercase;
-  font-size: var(--font-size-sm);
+  font-size: var(--vd-font-size-sm);
   letter-spacing: 0.05em;
 }
 
@@ -197,7 +197,7 @@ tbody {
 .table-footer,
 tfoot {
   background-color: var(--vd-bg-secondary);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--vd-font-weight-semibold);
 }
 
 /* Responsive Table Wrapper */
@@ -315,12 +315,12 @@ tfoot {
 /* Dark Mode Table Overrides */
 [data-theme="dark"] .vd-table,
 [data-theme="dark"] .table {
-  --table-bg: var(--vd-bg-primary);
-  --table-border-color: var(--vd-border-color);
-  --table-striped-bg: var(--vd-bg-secondary);
-  --table-hover-bg: rgba(255, 255, 255, 0.05);
+  --vd-table-bg: var(--vd-bg-primary);
+  --vd-table-border-color: var(--vd-border-color);
+  --vd-table-striped-bg: var(--vd-bg-secondary);
+  --vd-table-hover-bg: rgba(255, 255, 255, 0.05);
 
-  background-color: var(--table-bg);
+  background-color: var(--vd-table-bg);
   color: var(--vd-text-primary);
 }
 
@@ -328,18 +328,18 @@ tfoot {
 [data-theme="dark"] .vd-table td,
 [data-theme="dark"] .table th,
 [data-theme="dark"] .table td {
-  border-color: var(--table-border-color);
+  border-color: var(--vd-table-border-color);
 }
 
 [data-theme="dark"] .vd-table thead th,
 [data-theme="dark"] .table thead th {
-  border-color: var(--table-border-color);
+  border-color: var(--vd-table-border-color);
   color: var(--vd-text-primary);
 }
 
 [data-theme="dark"] .vd-table-striped tbody tr:nth-of-type(odd),
 [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
-  background-color: var(--table-striped-bg);
+  background-color: var(--vd-table-striped-bg);
 }
 
 [data-theme="dark"] .vd-table thead,
@@ -352,12 +352,12 @@ tfoot {
 
   :root:not([data-theme]) .vd-table,
   :root:not([data-theme]) .table {
-    --table-bg: var(--vd-bg-primary);
-    --table-border-color: var(--vd-border-color);
-    --table-striped-bg: var(--vd-bg-secondary);
-    --table-hover-bg: rgba(255, 255, 255, 0.05);
+    --vd-table-bg: var(--vd-bg-primary);
+    --vd-table-border-color: var(--vd-border-color);
+    --vd-table-striped-bg: var(--vd-bg-secondary);
+    --vd-table-hover-bg: rgba(255, 255, 255, 0.05);
 
-    background-color: var(--table-bg);
+    background-color: var(--vd-table-bg);
     color: var(--vd-text-primary);
   }
 
@@ -365,18 +365,18 @@ tfoot {
   :root:not([data-theme]) .vd-table td,
   :root:not([data-theme]) .table th,
   :root:not([data-theme]) .table td {
-    border-color: var(--table-border-color);
+    border-color: var(--vd-table-border-color);
   }
 
   :root:not([data-theme]) .vd-table thead th,
   :root:not([data-theme]) .table thead th {
-    border-color: var(--table-border-color);
+    border-color: var(--vd-table-border-color);
     color: var(--vd-text-primary);
   }
 
   :root:not([data-theme]) .vd-table-striped tbody tr:nth-of-type(odd),
   :root:not([data-theme]) .table-striped tbody tr:nth-of-type(odd) {
-    background-color: var(--table-striped-bg);
+    background-color: var(--vd-table-striped-bg);
   }
 
   :root:not([data-theme]) .vd-table thead,

package/css/utilities/transitions.css

@@ -5,75 +5,75 @@
 
 :root {
   /* Transition Durations */
-  --transition-duration-fast: 150ms;
-  --transition-duration-base: 200ms;
-  --transition-duration-slow: 300ms;
-  --transition-duration-slower: 400ms;
-  --transition-duration-slowest: 500ms;
+  --vd-transition-duration-fast: 150ms;
+  --vd-transition-duration-base: 200ms;
+  --vd-transition-duration-slow: 300ms;
+  --vd-transition-duration-slower: 400ms;
+  --vd-transition-duration-slowest: 500ms;
   
   /* Transition Timing Functions */
-  --transition-ease: ease;
-  --transition-ease-in: ease-in;
-  --transition-ease-out: ease-out;
-  --transition-ease-in-out: ease-in-out;
-  --transition-linear: linear;
+  --vd-transition-ease: ease;
+  --vd-transition-ease-in: ease-in;
+  --vd-transition-ease-out: ease-out;
+  --vd-transition-ease-in-out: ease-in-out;
+  --vd-transition-linear: linear;
   
   /* Common Transitions */
-  --transition-base: all var(--transition-duration-base) var(--transition-ease);
-  --transition-fast: all var(--transition-duration-fast) var(--transition-ease);
-  --transition-slow: all var(--transition-duration-slow) var(--transition-ease);
-  --transition-color: color var(--transition-duration-base) var(--transition-ease);
-  --transition-bg: background-color var(--transition-duration-base) var(--transition-ease);
-  --transition-border: border-color var(--transition-duration-base) var(--transition-ease);
-  --transition-opacity: opacity var(--transition-duration-base) var(--transition-ease);
-  --transition-transform: transform var(--transition-duration-base) var(--transition-ease);
-  --transition-shadow: box-shadow var(--transition-duration-base) var(--transition-ease);
+  --vd-transition-base: all var(--vd-transition-duration-base) var(--vd-transition-ease);
+  --vd-transition-fast: all var(--vd-transition-duration-fast) var(--vd-transition-ease);
+  --vd-transition-slow: all var(--vd-transition-duration-slow) var(--vd-transition-ease);
+  --vd-transition-color: color var(--vd-transition-duration-base) var(--vd-transition-ease);
+  --vd-transition-bg: background-color var(--vd-transition-duration-base) var(--vd-transition-ease);
+  --vd-transition-border: border-color var(--vd-transition-duration-base) var(--vd-transition-ease);
+  --vd-transition-opacity: opacity var(--vd-transition-duration-base) var(--vd-transition-ease);
+  --vd-transition-transform: transform var(--vd-transition-duration-base) var(--vd-transition-ease);
+  --vd-transition-shadow: box-shadow var(--vd-transition-duration-base) var(--vd-transition-ease);
 }
 
 /* Transition Duration Utilities */
 .vd-transition-none { transition: none; }
 .vd-transition-fast {
-  transition: var(--transition-fast);
-  transition-duration: var(--transition-duration-fast);
+  transition: var(--vd-transition-fast);
+  transition-duration: var(--vd-transition-duration-fast);
 }
-.vd-transition-base { transition-duration: var(--transition-duration-base); }
+.vd-transition-base { transition-duration: var(--vd-transition-duration-base); }
 .vd-transition-slow {
-  transition: var(--transition-slow);
-  transition-duration: var(--transition-duration-slow);
+  transition: var(--vd-transition-slow);
+  transition-duration: var(--vd-transition-duration-slow);
 }
-.vd-transition-slower { transition-duration: var(--transition-duration-slower); }
-.vd-transition-slowest { transition-duration: var(--transition-duration-slowest); }
+.vd-transition-slower { transition-duration: var(--vd-transition-duration-slower); }
+.vd-transition-slowest { transition-duration: var(--vd-transition-duration-slowest); }
 
 /* Transition Timing Function Utilities */
-.vd-transition-ease { transition-timing-function: var(--transition-ease); }
-.vd-transition-ease-in { transition-timing-function: var(--transition-ease-in); }
-.vd-transition-ease-out { transition-timing-function: var(--transition-ease-out); }
-.vd-transition-ease-in-out { transition-timing-function: var(--transition-ease-in-out); }
-.vd-transition-linear { transition-timing-function: var(--transition-linear); }
+.vd-transition-ease { transition-timing-function: var(--vd-transition-ease); }
+.vd-transition-ease-in { transition-timing-function: var(--vd-transition-ease-in); }
+.vd-transition-ease-out { transition-timing-function: var(--vd-transition-ease-out); }
+.vd-transition-ease-in-out { transition-timing-function: var(--vd-transition-ease-in-out); }
+.vd-transition-linear { transition-timing-function: var(--vd-transition-linear); }
 
 /* Transition Property Utilities */
 .vd-transition-all { transition-property: all; }
 .vd-transition-colors { transition-property: color, background-color, border-color; }
 .vd-transition-opacity {
-  transition: var(--transition-opacity);
+  transition: var(--vd-transition-opacity);
   transition-property: opacity;
 }
 
 .vd-transition-transform {
-  transition: var(--transition-transform);
+  transition: var(--vd-transition-transform);
   transition-property: transform;
 }
 
 .vd-transition-shadow {
-  transition: var(--transition-shadow);
+  transition: var(--vd-transition-shadow);
   transition-property: box-shadow;
 }
 
 /* Combined Transition Utilities */
-.vd-transition { transition: var(--transition-base); }
-.vd-transition-color { transition: var(--transition-color); }
-.vd-transition-bg { transition: var(--transition-bg); }
-.vd-transition-border { transition: var(--transition-border); }
+.vd-transition { transition: var(--vd-transition-base); }
+.vd-transition-color { transition: var(--vd-transition-color); }
+.vd-transition-bg { transition: var(--vd-transition-bg); }
+.vd-transition-border { transition: var(--vd-transition-border); }
 
 /* Delay Utilities */
 .vd-transition-delay-none { transition-delay: 0ms; }

package/css/vanduo.css

@@ -6,12 +6,11 @@
 /* Layer 0: Reset */
 @import url('core/reset.css');
 
-/* Layer 1: Foundation (palette -> canonical tokens -> compatibility aliases) */
+/* Layer 1: Foundation (vd-prefixed palette and canonical tokens) */
 @import url('core/colors.css');
 @import url('core/fonts.css');
 @import url('core/typography.css');
 @import url('core/tokens.css');
-@import url('core/vd-aliases.css');
 @import url('core/grid.css');
 @import url('core/helpers.css');
 

package/dist/build-info.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.4.0",
-  "builtAt": "2026-05-20T14:51:00.085Z",
-  "commit": "46420b0",
+  "version": "1.4.2",
+  "builtAt": "2026-05-23T19:59:36.731Z",
+  "commit": "adbe750",
   "mode": "development+production"
 }