@vanduo-oss/framework 1.3.9 → 1.4.0

package/css/components/modals.css

@@ -5,9 +5,9 @@
 
 :root {
   /* Modal Colors */
-  --modal-bg: var(--color-white);
+  --modal-bg: var(--vd-color-white);
   --modal-backdrop-bg: rgba(0, 0, 0, 0.5);
-  --modal-border-color: var(--border-color);
+  --modal-border-color: var(--vd-border-color);
   
   /* Modal Spacing (Fibonacci: 21px) */
   --modal-padding: 1.3125rem;
@@ -32,12 +32,12 @@
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --modal-bg: var(--bg-secondary);
+  --modal-bg: var(--vd-bg-secondary);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --modal-bg: var(--bg-secondary);
+    --modal-bg: var(--vd-bg-secondary);
   }
 }
 
@@ -143,7 +143,7 @@
   line-height: var(--line-height-normal);
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-semibold);
-  color: var(--text-primary);
+  color: var(--vd-text-primary);
 }
 
 /* Modal Close Button */
@@ -158,15 +158,15 @@
   font-size: 1.5rem;
   font-weight: var(--font-weight-bold);
   line-height: 1;
-  color: var(--text-secondary);
-  text-shadow: 0 1px 0 var(--color-white);
+  color: var(--vd-text-secondary);
+  text-shadow: 0 1px 0 var(--vd-color-white);
   transition: var(--transition-opacity);
   user-select: none;
 }
 
 .vd-modal-close:hover,
 .vd-modal-close:focus {
-  color: var(--text-primary);
+  color: var(--vd-text-primary);
   text-decoration: none;
   opacity: 0.75;
   outline: none;

package/css/components/music-player.css

@@ -24,19 +24,19 @@
   --music-player-border-width: 1px;
 
   /* Colors */
-  --music-player-bg: var(--bg-primary);
-  --music-player-bg-secondary: var(--bg-secondary);
-  --music-player-border: var(--border-color);
-  --music-player-text: var(--text-primary);
-  --music-player-text-muted: var(--text-muted);
-  --music-player-accent: var(--color-primary);
-  --music-player-btn-hover-bg: var(--bg-secondary);
-  --music-player-btn-active-bg: var(--color-primary-alpha-10, rgba(var(--color-primary-rgb, 59,130,246), 0.1));
-  --music-player-track-bg: var(--border-color);
-  --music-player-track-fill: var(--color-primary);
-  --music-player-playlist-hover: var(--bg-secondary);
-  --music-player-playlist-active-bg: var(--color-primary-alpha-10, rgba(var(--color-primary-rgb, 59,130,246), 0.1));
-  --music-player-playlist-active-text: var(--color-primary);
+  --music-player-bg: var(--vd-bg-primary);
+  --music-player-bg-secondary: var(--vd-bg-secondary);
+  --music-player-border: var(--vd-border-color);
+  --music-player-text: var(--vd-text-primary);
+  --music-player-text-muted: var(--vd-text-muted);
+  --music-player-accent: var(--vd-color-primary);
+  --music-player-btn-hover-bg: var(--vd-bg-secondary);
+  --music-player-btn-active-bg: var(--vd-color-primary-alpha-10, rgba(var(--vd-color-primary-rgb, 59,130,246), 0.1));
+  --music-player-track-bg: var(--vd-border-color);
+  --music-player-track-fill: var(--vd-color-primary);
+  --music-player-playlist-hover: var(--vd-bg-secondary);
+  --music-player-playlist-active-bg: var(--vd-color-primary-alpha-10, rgba(var(--vd-color-primary-rgb, 59,130,246), 0.1));
+  --music-player-playlist-active-text: var(--vd-color-primary);
 
   /* Transitions */
   --music-player-transition: 0.15s ease;
@@ -54,20 +54,20 @@
 
 /* Dark Theme */
 [data-theme="dark"] {
-  --music-player-bg: var(--bg-primary);
-  --music-player-bg-secondary: var(--color-gray-800);
-  --music-player-btn-hover-bg: var(--color-gray-700);
-  --music-player-playlist-hover: var(--color-gray-700);
+  --music-player-bg: var(--vd-bg-primary);
+  --music-player-bg-secondary: var(--vd-color-gray-800);
+  --music-player-btn-hover-bg: var(--vd-color-gray-700);
+  --music-player-playlist-hover: var(--vd-color-gray-700);
   --music-player-glass-bg: var(--vd-glass-bg-dark, rgba(30, 30, 40, 0.72));
   --music-player-glass-border: var(--vd-glass-border-dark, rgba(255, 255, 255, 0.14));
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --music-player-bg: var(--bg-primary);
-    --music-player-bg-secondary: var(--color-gray-800);
-    --music-player-btn-hover-bg: var(--color-gray-700);
-    --music-player-playlist-hover: var(--color-gray-700);
+    --music-player-bg: var(--vd-bg-primary);
+    --music-player-bg-secondary: var(--vd-color-gray-800);
+    --music-player-btn-hover-bg: var(--vd-color-gray-700);
+    --music-player-playlist-hover: var(--vd-color-gray-700);
     --music-player-glass-bg: var(--vd-glass-bg-dark, rgba(30, 30, 40, 0.72));
     --music-player-glass-border: var(--vd-glass-border-dark, rgba(255, 255, 255, 0.14));
   }
@@ -550,11 +550,11 @@
    ============================================================ */
 
 .vd-music-player-neutral {
-  --music-player-accent: var(--text-primary);
-  --music-player-track-fill: var(--text-primary);
-  --music-player-playlist-active-text: var(--text-primary);
-  --music-player-playlist-active-bg: var(--bg-secondary);
-  --music-player-btn-active-bg: var(--bg-secondary);
+  --music-player-accent: var(--vd-text-primary);
+  --music-player-track-fill: var(--vd-text-primary);
+  --music-player-playlist-active-text: var(--vd-text-primary);
+  --music-player-playlist-active-bg: var(--vd-bg-secondary);
+  --music-player-btn-active-bg: var(--vd-bg-secondary);
 }
 
 /* ============================================================

package/css/components/navbar.css

@@ -5,14 +5,14 @@
 
 :root {
   /* Navbar Colors */
-  --navbar-bg: var(--color-white);
-  --navbar-bg-dark: var(--bg-dark);
-  --navbar-text-color: var(--text-primary);
-  --navbar-text-color-dark: var(--text-inverse);
-  --navbar-link-color: var(--text-primary);
-  --navbar-link-hover-color: var(--color-primary);
-  --navbar-link-active-color: var(--color-primary);
-  --navbar-border-color: var(--border-color);
+  --navbar-bg: var(--vd-color-white);
+  --navbar-bg-dark: var(--vd-bg-dark);
+  --navbar-text-color: var(--vd-text-primary);
+  --navbar-text-color-dark: var(--vd-text-inverse);
+  --navbar-link-color: var(--vd-text-primary);
+  --navbar-link-hover-color: var(--vd-color-primary);
+  --navbar-link-active-color: var(--vd-color-primary);
+  --navbar-border-color: var(--vd-border-color);
   
   /* Navbar Spacing (Fibonacci) */
   --navbar-padding-y: 0.8125rem;   /* 13px - fib */
@@ -23,26 +23,26 @@
   --navbar-actions-gap: 2.125rem;  /* 34px - fib */
 
   /* Mobile Menu */
-  --navbar-mobile-menu-bg: var(--color-white);
-  --navbar-mobile-menu-bg-dark: var(--bg-dark);
+  --navbar-mobile-menu-bg: var(--vd-color-white);
+  --navbar-mobile-menu-bg-dark: var(--vd-bg-dark);
   --navbar-mobile-menu-width: 233px; /* fib */
   --navbar-mobile-overlay-bg: rgba(0, 0, 0, 0.5);
 }
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --navbar-bg: var(--bg-primary);
-  --navbar-text-color: var(--text-primary);
-  --navbar-link-color: var(--text-primary);
-  --navbar-mobile-menu-bg: var(--bg-primary);
+  --navbar-bg: var(--vd-bg-primary);
+  --navbar-text-color: var(--vd-text-primary);
+  --navbar-link-color: var(--vd-text-primary);
+  --navbar-mobile-menu-bg: var(--vd-bg-primary);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --navbar-bg: var(--bg-primary);
-    --navbar-text-color: var(--text-primary);
-    --navbar-link-color: var(--text-primary);
-    --navbar-mobile-menu-bg: var(--bg-primary);
+    --navbar-bg: var(--vd-bg-primary);
+    --navbar-text-color: var(--vd-text-primary);
+    --navbar-link-color: var(--vd-text-primary);
+    --navbar-mobile-menu-bg: var(--vd-bg-primary);
   }
 }
 
@@ -168,7 +168,7 @@
 }
 
 .vd-navbar-nav .vd-nav-link:focus-visible {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--vd-color-primary);
   outline-offset: 2px;
 }
 
@@ -268,7 +268,7 @@
 
 .vd-navbar-dark .vd-navbar-brand:hover,
 .vd-navbar-dark .vd-navbar-brand:focus {
-  color: var(--color-primary-light);
+  color: var(--vd-color-primary-light);
 }
 
 .vd-navbar-dark .vd-navbar-nav .vd-nav-link {
@@ -277,12 +277,12 @@
 
 .vd-navbar-dark .vd-navbar-nav .vd-nav-link:hover,
 .vd-navbar-dark .vd-navbar-nav .vd-nav-link:focus {
-  color: var(--color-primary-light);
+  color: var(--vd-color-primary-light);
   background-color: rgba(255, 255, 255, 0.1);
 }
 
 .vd-navbar-dark .vd-navbar-nav .vd-nav-link.active {
-  color: var(--color-primary-light);
+  color: var(--vd-color-primary-light);
 }
 
 .vd-navbar-dark .vd-navbar-toggle span,
@@ -358,7 +358,7 @@
   min-width: 200px;
   padding: 0.5rem 0;
   margin: 0.125rem 0 0;
-  background-color: var(--color-white);
+  background-color: var(--vd-color-white);
   border: 1px solid var(--navbar-border-color);
   border-radius: var(--btn-border-radius);
   box-shadow: var(--shadow-md);
@@ -387,13 +387,13 @@
 .vd-navbar-dropdown-item:hover,
 .vd-navbar-dropdown-item:focus {
   color: var(--navbar-link-hover-color);
-  background-color: var(--bg-secondary);
+  background-color: var(--vd-bg-secondary);
   text-decoration: none;
 }
 
 .vd-navbar-dropdown-item.active {
   color: var(--navbar-link-active-color);
-  background-color: var(--color-primary-alpha-10);
+  background-color: var(--vd-color-primary-alpha-10);
 }
 
 .vd-navbar-dark .vd-navbar-dropdown-menu {
@@ -407,7 +407,7 @@
 
 .vd-navbar-dark .vd-navbar-dropdown-item:hover,
 .vd-navbar-dark .vd-navbar-dropdown-item:focus {
-  color: var(--color-primary-light);
+  color: var(--vd-color-primary-light);
   background-color: rgba(255, 255, 255, 0.1);
 }
 
@@ -525,7 +525,7 @@
     padding: 0;
     border: none;
     box-shadow: none;
-    background-color: var(--bg-secondary);
+    background-color: var(--vd-bg-secondary);
   }
   
   .vd-navbar-dark .vd-navbar-dropdown-menu {

package/css/components/pagination.css

@@ -5,14 +5,14 @@
 
 :root {
   /* Pagination Colors */
-  --pagination-bg: var(--color-white);
-  --pagination-border-color: var(--border-color);
-  --pagination-link-color: var(--color-primary);
-  --pagination-link-bg: var(--color-white);
-  --pagination-link-bg-hover: var(--bg-secondary);
-  --pagination-link-bg-active: var(--color-primary);
-  --pagination-link-color-active: var(--color-white);
-  --pagination-link-color-disabled: var(--text-muted);
+  --pagination-bg: var(--vd-color-white);
+  --pagination-border-color: var(--vd-border-color);
+  --pagination-link-color: var(--vd-color-primary);
+  --pagination-link-bg: var(--vd-color-white);
+  --pagination-link-bg-hover: var(--vd-bg-secondary);
+  --pagination-link-bg-active: var(--vd-color-primary);
+  --pagination-link-color-active: var(--vd-color-white);
+  --pagination-link-color-disabled: var(--vd-text-muted);
   
   /* Pagination Spacing (Fibonacci pairs: x/y ratio ~ phi) */
   --pagination-padding-y: 0.5rem;        /* 8px  - fib */
@@ -30,16 +30,16 @@
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --pagination-bg: var(--bg-secondary);
-  --pagination-link-bg: var(--bg-secondary);
-  --pagination-link-bg-hover: var(--bg-primary);
+  --pagination-bg: var(--vd-bg-secondary);
+  --pagination-link-bg: var(--vd-bg-secondary);
+  --pagination-link-bg-hover: var(--vd-bg-primary);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --pagination-bg: var(--bg-secondary);
-    --pagination-link-bg: var(--bg-secondary);
-    --pagination-link-bg-hover: var(--bg-primary);
+    --pagination-bg: var(--vd-bg-secondary);
+    --pagination-link-bg: var(--vd-bg-secondary);
+    --pagination-link-bg-hover: var(--vd-bg-primary);
   }
 }
 
@@ -140,7 +140,7 @@
 /* Pagination Ellipsis */
 .vd-pagination-ellipsis {
   padding: var(--pagination-padding-y) var(--pagination-padding-x);
-  color: var(--text-muted);
+  color: var(--vd-text-muted);
   pointer-events: none;
   cursor: default;
 }

package/css/components/preloader.css

@@ -10,8 +10,8 @@
   display: inline-block;
   width: var(--spinner-size, 2rem);
   height: var(--spinner-size, 2rem);
-  border: var(--spinner-border-width, 3px) solid var(--border-color, #e9ecef);
-  border-top-color: var(--spinner-color, var(--color-primary));
+  border: var(--spinner-border-width, 3px) solid var(--vd-border-color, #e9ecef);
+  border-top-color: var(--spinner-color, var(--vd-color-primary));
   border-radius: 50%;
   animation: spinner-rotate var(--spinner-speed, 0.65s) linear infinite;
 }
@@ -23,14 +23,14 @@
 .vd-preloader-xl { --spinner-size: 4rem; --spinner-border-width: 5px; }
 
 /* Preloader Colors */
-.vd-preloader-primary { --spinner-color: var(--color-primary); }
-.vd-preloader-secondary { --spinner-color: var(--color-secondary); }
-.vd-preloader-success { --spinner-color: var(--color-success); }
-.vd-preloader-warning { --spinner-color: var(--color-warning); }
-.vd-preloader-error { --spinner-color: var(--color-error); }
-.vd-preloader-info { --spinner-color: var(--color-info); }
+.vd-preloader-primary { --spinner-color: var(--vd-color-primary); }
+.vd-preloader-secondary { --spinner-color: var(--vd-color-secondary); }
+.vd-preloader-success { --spinner-color: var(--vd-color-success); }
+.vd-preloader-warning { --spinner-color: var(--vd-color-warning); }
+.vd-preloader-error { --spinner-color: var(--vd-color-error); }
+.vd-preloader-info { --spinner-color: var(--vd-color-info); }
 .vd-preloader-light { --spinner-color: #fff; }
-.vd-preloader-dark { --spinner-color: var(--text-primary); }
+.vd-preloader-dark { --spinner-color: var(--vd-text-primary); }
 
 /* Preloader Container */
 .vd-preloader-container {
@@ -43,7 +43,7 @@
 }
 
 .vd-preloader-text {
-  color: var(--text-secondary);
+  color: var(--vd-text-secondary);
   font-size: var(--font-size-sm);
 }
 

package/css/components/progress.css

@@ -5,8 +5,8 @@
 
 :root {
   --progress-height: 8px;
-  --progress-bg: var(--bg-tertiary, #e9ecef);
-  --progress-bar-bg: var(--color-primary);
+  --progress-bg: var(--vd-bg-tertiary, #e9ecef);
+  --progress-bar-bg: var(--vd-color-primary);
   --progress-border-radius: var(--radius-fib-5, 5px);
 }
 
@@ -33,10 +33,10 @@
 }
 
 /* Variants */
-.vd-progress-bar.vd-progress-success { background-color: var(--color-success); }
-.vd-progress-bar.vd-progress-warning { background-color: var(--color-warning); }
-.vd-progress-bar.vd-progress-error { background-color: var(--color-error); }
-.vd-progress-bar.vd-progress-info { background-color: var(--color-info); }
+.vd-progress-bar.vd-progress-success { background-color: var(--vd-color-success); }
+.vd-progress-bar.vd-progress-warning { background-color: var(--vd-color-warning); }
+.vd-progress-bar.vd-progress-error { background-color: var(--vd-color-error); }
+.vd-progress-bar.vd-progress-info { background-color: var(--vd-color-info); }
 
 /* Sizes */
 .vd-progress-xs { --progress-height: 3px; }
@@ -97,11 +97,11 @@
 
 /* Dark mode */
 [data-theme="dark"] {
-  --progress-bg: var(--bg-tertiary, #2d3748);
+  --progress-bg: var(--vd-bg-tertiary, #2d3748);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --progress-bg: var(--bg-tertiary, #2d3748);
+    --progress-bg: var(--vd-bg-tertiary, #2d3748);
   }
 }

package/css/components/rating.css

@@ -6,7 +6,7 @@
 :root {
   /* Rating Colors */
   --rating-active-color: #f59e0b;
-  --rating-inactive-color: var(--color-gray-300, #dee2e6);
+  --rating-inactive-color: var(--vd-color-gray-300, #dee2e6);
   --rating-hover-color: #fbbf24;
 
   /* Rating Dimensions (Fibonacci) */
@@ -17,12 +17,12 @@
 }
 
 [data-theme="dark"] {
-  --rating-inactive-color: var(--color-gray-600, #6c757d);
+  --rating-inactive-color: var(--vd-color-gray-600, #6c757d);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --rating-inactive-color: var(--color-gray-600, #6c757d);
+    --rating-inactive-color: var(--vd-color-gray-600, #6c757d);
   }
 }
 
@@ -108,5 +108,5 @@
   margin-left: 0.5rem;
   font-size: 0.875rem;
   font-weight: 600;
-  color: var(--text-primary, #212529);
+  color: var(--vd-text-primary, #212529);
 }

package/css/components/sidenav.css

@@ -5,12 +5,12 @@
 
 :root {
   /* Sidenav Colors */
-  --sidenav-bg: var(--color-white);
+  --sidenav-bg: var(--vd-color-white);
   --sidenav-overlay-bg: rgba(0, 0, 0, 0.35);
-  --sidenav-border-color: var(--border-color);
-  --sidenav-item-bg-hover: var(--bg-secondary);
-  --sidenav-item-bg-active: var(--color-primary-alpha-10);
-  --sidenav-item-color-active: var(--color-primary);
+  --sidenav-border-color: var(--vd-border-color);
+  --sidenav-item-bg-hover: var(--vd-bg-secondary);
+  --sidenav-item-bg-active: var(--vd-color-primary-alpha-10);
+  --sidenav-item-color-active: var(--vd-color-primary);
   
   /* Sidenav Dimensions (Fibonacci) */
   --sidenav-width: 233px;     /* fib */
@@ -33,14 +33,14 @@
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --sidenav-bg: var(--bg-secondary);
-  --sidenav-item-bg-hover: var(--bg-primary);
+  --sidenav-bg: var(--vd-bg-secondary);
+  --sidenav-item-bg-hover: var(--vd-bg-primary);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --sidenav-bg: var(--bg-secondary);
-    --sidenav-item-bg-hover: var(--bg-primary);
+    --sidenav-bg: var(--vd-bg-secondary);
+    --sidenav-item-bg-hover: var(--vd-bg-primary);
   }
 }
 
@@ -138,7 +138,7 @@
   margin: 0;
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
-  color: var(--text-primary);
+  color: var(--vd-text-primary);
 }
 
 .vd-sidenav-close {
@@ -152,7 +152,7 @@
   font-size: 1.5rem;
   font-weight: var(--font-weight-bold);
   line-height: 1;
-  color: var(--text-secondary);
+  color: var(--vd-text-secondary);
   transition: var(--transition-opacity);
 }
 
@@ -190,7 +190,7 @@
   margin-top: 0.5rem;
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold);
-  color: var(--text-muted);
+  color: var(--vd-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -211,7 +211,7 @@
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-normal);
   line-height: var(--line-height-normal);
-  color: var(--text-primary);
+  color: var(--vd-text-primary);
   text-decoration: none;
   transition: var(--transition-bg);
   cursor: pointer;
@@ -219,7 +219,7 @@
 
 .vd-sidenav-link:hover {
   background-color: var(--sidenav-item-bg-hover);
-  color: var(--text-primary);
+  color: var(--vd-text-primary);
   text-decoration: none;
 }
 

package/css/components/skeleton.css

@@ -5,21 +5,21 @@
 
 :root {
   /* Skeleton Colors */
-  --skeleton-bg: var(--color-gray-200);
-  --skeleton-shimmer: var(--color-gray-100);
+  --skeleton-bg: var(--vd-color-gray-200);
+  --skeleton-shimmer: var(--vd-color-gray-100);
   --skeleton-border-radius: var(--btn-border-radius);
 }
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --skeleton-bg: var(--color-gray-700);
-  --skeleton-shimmer: var(--color-gray-600);
+  --skeleton-bg: var(--vd-color-gray-700);
+  --skeleton-shimmer: var(--vd-color-gray-600);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --skeleton-bg: var(--color-gray-700);
-    --skeleton-shimmer: var(--color-gray-600);
+    --skeleton-bg: var(--vd-color-gray-700);
+    --skeleton-shimmer: var(--vd-color-gray-600);
   }
 }
 
@@ -88,12 +88,13 @@
 /* Skeleton Circle (for avatars) */
 .vd-skeleton-circle {
   border-radius: 50%;
+  width: 3rem;
+  height: 3rem;
 }
 
 .vd-skeleton-circle-xs { width: 1.5rem; height: 1.5rem; }
 .vd-skeleton-circle-sm { width: 2rem; height: 2rem; }
 .vd-skeleton-circle-md { width: 2.5rem; height: 2.5rem; }
-.vd-skeleton-circle { width: 3rem; height: 3rem; }
 .vd-skeleton-circle-lg { width: 4rem; height: 4rem; }
 .vd-skeleton-circle-xl { width: 5rem; height: 5rem; }
 
@@ -127,7 +128,7 @@
 .vd-skeleton-card {
   padding: 1rem;
   border-radius: var(--btn-border-radius);
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--vd-border-color);
 }
 
 /* Skeleton Input */
@@ -189,7 +190,7 @@
   display: flex;
   gap: 1rem;
   padding: 0.75rem 0;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--vd-border-color);
 }
 
 .vd-skeleton-table-row .vd-skeleton-text {

package/css/components/spinner.css

@@ -6,7 +6,7 @@
 :root {
   --spinner-size: 2rem;
   --spinner-border-width: 3px;
-  --spinner-color: var(--color-primary);
+  --spinner-color: var(--vd-color-primary);
   --spinner-speed: 0.65s;
 }
 
@@ -15,7 +15,7 @@
   display: inline-block;
   width: var(--spinner-size);
   height: var(--spinner-size);
-  border: var(--spinner-border-width) solid var(--border-color, #e9ecef);
+  border: var(--spinner-border-width) solid var(--vd-border-color, #e9ecef);
   border-top-color: var(--spinner-color);
   border-radius: 50%;
   animation: spinner-rotate var(--spinner-speed) linear infinite;
@@ -80,12 +80,12 @@
 .vd-spinner-xl { --spinner-size: 4rem; --spinner-border-width: 5px; }
 
 /* Color Variants */
-.vd-spinner-success { --spinner-color: var(--color-success); }
-.vd-spinner-warning { --spinner-color: var(--color-warning); }
-.vd-spinner-error { --spinner-color: var(--color-error); }
-.vd-spinner-info { --spinner-color: var(--color-info); }
+.vd-spinner-success { --spinner-color: var(--vd-color-success); }
+.vd-spinner-warning { --spinner-color: var(--vd-color-warning); }
+.vd-spinner-error { --spinner-color: var(--vd-color-error); }
+.vd-spinner-info { --spinner-color: var(--vd-color-info); }
 .vd-spinner-light { --spinner-color: #fff; }
-.vd-spinner-dark { --spinner-color: var(--text-primary); }
+.vd-spinner-dark { --spinner-color: var(--vd-text-primary); }
 
 /* Centering Helper */
 .vd-spinner-center {
@@ -118,7 +118,7 @@
   --spinner-border-width: 2px;
   --spinner-speed: 0.9s;
 
-  border-color: var(--border-color, #d9d9d9);
+  border-color: var(--vd-border-color, #d9d9d9);
   border-top-color: var(--spinner-color);
 }
 
@@ -139,7 +139,7 @@
 }
 
 .vd-dynamic-loader-text {
-  color: var(--text-muted);
+  color: var(--vd-text-muted);
   font-size: var(--font-size-sm, 0.8125rem);
 }
 
@@ -150,7 +150,7 @@
   padding: 2rem;
   overflow: hidden;
   border-radius: var(--btn-border-radius, 0.5rem);
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--vd-border-color);
 }
 
 .vd-dynamic-loader-card > .vd-dynamic-loader {