@vanduo-oss/framework 1.3.8 → 1.4.0

package/css/components/code-snippet.css

@@ -14,16 +14,16 @@
   --code-font-size: 0.875rem;         /* 14px */
   
   /* Code Snippet Colors - Light Mode */
-  --code-bg: var(--color-gray-50, #f8fafc);
-  --code-header-bg: var(--color-gray-100, #f1f5f9);
-  --code-border: var(--border-color, #e2e8f0);
-  --code-text: var(--text-primary, #1e293b);
-  --code-text-muted: var(--text-secondary, #64748b);
-  --code-tab-text: var(--text-secondary, #64748b);
-  --code-tab-active: var(--color-primary, #3b82f6);
-  --code-tab-hover-bg: var(--color-gray-200, #e2e8f0);
-  --code-copy-success: var(--color-success, #22c55e);
-  --code-line-number: var(--text-tertiary, #94a3b8);
+  --code-bg: var(--vd-color-gray-50, #f8fafc);
+  --code-header-bg: var(--vd-color-gray-100, #f1f5f9);
+  --code-border: var(--vd-border-color, #e2e8f0);
+  --code-text: var(--vd-text-primary, #1e293b);
+  --code-text-muted: var(--vd-text-secondary, #64748b);
+  --code-tab-text: var(--vd-text-secondary, #64748b);
+  --code-tab-active: var(--vd-color-primary, #3b82f6);
+  --code-tab-hover-bg: var(--vd-color-gray-200, #e2e8f0);
+  --code-copy-success: var(--vd-color-success, #22c55e);
+  --code-line-number: var(--vd-text-tertiary, #94a3b8);
   --code-line-highlight: rgba(59, 130, 246, 0.1);
   
   /* Syntax Highlighting Colors - Light Mode */
@@ -44,10 +44,10 @@
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --code-bg: var(--color-gray-900, #0f172a);
-  --code-header-bg: var(--color-gray-800, #1e293b);
-  --code-border: var(--color-gray-700, #334155);
-  --code-tab-hover-bg: var(--color-gray-700, #334155);
+  --code-bg: var(--vd-color-gray-900, #0f172a);
+  --code-header-bg: var(--vd-color-gray-800, #1e293b);
+  --code-border: var(--vd-color-gray-700, #334155);
+  --code-tab-hover-bg: var(--vd-color-gray-700, #334155);
   --code-line-highlight: rgba(59, 130, 246, 0.15);
   
   /* Syntax Highlighting - Dark Mode */
@@ -68,10 +68,10 @@
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --code-bg: var(--color-gray-900, #0f172a);
-    --code-header-bg: var(--color-gray-800, #1e293b);
-    --code-border: var(--color-gray-700, #334155);
-    --code-tab-hover-bg: var(--color-gray-700, #334155);
+    --code-bg: var(--vd-color-gray-900, #0f172a);
+    --code-header-bg: var(--vd-color-gray-800, #1e293b);
+    --code-border: var(--vd-color-gray-700, #334155);
+    --code-tab-hover-bg: var(--vd-color-gray-700, #334155);
     --code-line-highlight: rgba(59, 130, 246, 0.15);
     
     --code-tag: #fb7185;

package/css/components/collapsible.css

@@ -5,11 +5,11 @@
 
 :root {
   /* Collapsible Colors */
-  --collapsible-border-color: var(--border-color);
-  --collapsible-bg: var(--color-white);
-  --collapsible-header-bg: var(--bg-secondary);
-  --collapsible-header-bg-hover: var(--bg-secondary);
-  --collapsible-header-bg-active: var(--bg-secondary);
+  --collapsible-border-color: var(--vd-border-color);
+  --collapsible-bg: var(--vd-color-white);
+  --collapsible-header-bg: var(--vd-bg-secondary);
+  --collapsible-header-bg-hover: var(--vd-bg-secondary);
+  --collapsible-header-bg-active: var(--vd-bg-secondary);
   --collapsible-focus-ring: 0 0 0 2px var(--input-focus-border-color);
   
   /* Collapsible Spacing (Fibonacci) */
@@ -24,18 +24,18 @@
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --collapsible-bg: var(--bg-secondary);
-  --collapsible-header-bg: var(--bg-primary);
-  --collapsible-header-bg-hover: var(--bg-primary);
-  --collapsible-header-bg-active: var(--bg-primary);
+  --collapsible-bg: var(--vd-bg-secondary);
+  --collapsible-header-bg: var(--vd-bg-primary);
+  --collapsible-header-bg-hover: var(--vd-bg-primary);
+  --collapsible-header-bg-active: var(--vd-bg-primary);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --collapsible-bg: var(--bg-secondary);
-    --collapsible-header-bg: var(--bg-primary);
-    --collapsible-header-bg-hover: var(--bg-primary);
-    --collapsible-header-bg-active: var(--bg-primary);
+    --collapsible-bg: var(--vd-bg-secondary);
+    --collapsible-header-bg: var(--vd-bg-primary);
+    --collapsible-header-bg-hover: var(--vd-bg-primary);
+    --collapsible-header-bg-active: var(--vd-bg-primary);
   }
 }
 
@@ -75,12 +75,14 @@
   user-select: none;
   transition: var(--transition-bg);
   border: none;
+  -webkit-appearance: none;
+  appearance: none;
   width: 100%;
   text-align: left;
   font-family: var(--font-family-sans);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
-  color: var(--text-primary);
+  color: var(--vd-text-primary);
 }
 
 .vd-collapsible-header:hover,
@@ -88,7 +90,9 @@
   background-color: var(--collapsible-header-bg-hover);
 }
 
+.vd-collapsible-header:focus,
 .vd-collapsible-header:focus-visible,
+.accordion-header:focus,
 .accordion-header:focus-visible {
   outline: none;
 }
@@ -118,15 +122,19 @@
   font-family: var(--font-family-sans);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
-  color: var(--text-primary);
+  color: var(--vd-text-primary);
   text-decoration: none;
   background: none;
   border: none;
+  -webkit-appearance: none;
+  appearance: none;
   padding: 0;
   cursor: pointer;
 }
 
+.vd-collapsible-trigger:focus,
 .vd-collapsible-trigger:focus-visible,
+.accordion-trigger:focus,
 .accordion-trigger:focus-visible {
   outline: none;
 }
@@ -148,7 +156,7 @@
 .accordion-icon::before {
   content: '▼';
   font-size: 0.75rem;
-  color: var(--text-secondary);
+  color: var(--vd-text-secondary);
   transition: transform var(--transition-duration-base) var(--transition-ease);
 }
 
@@ -177,20 +185,20 @@
 /* Collapsible Content */
 .vd-collapsible-content,
 .accordion-content {
-  color: var(--text-primary);
+  color: var(--vd-text-primary);
   line-height: var(--line-height-normal);
 }
 
 /* Collapsible States */
 .vd-collapsible-item.is-active,
 .accordion-item.is-active {
-  border-color: var(--color-primary);
+  border-color: var(--vd-color-primary);
 }
 
 .vd-collapsible-item.is-active .vd-collapsible-header,
 .accordion-item.is-active .accordion-header {
-  background-color: var(--color-primary-alpha-10);
-  color: var(--color-primary);
+  background-color: var(--vd-color-primary-alpha-10);
+  color: var(--vd-color-primary);
 }
 
 /* Collapsible Variants - Bordered */

package/css/components/collections.css

@@ -5,11 +5,11 @@
 
 :root {
   /* Collection Colors */
-  --collection-bg: var(--color-white);
-  --collection-item-bg: var(--color-white);
-  --collection-item-bg-hover: var(--bg-secondary);
-  --collection-item-bg-active: var(--color-primary-alpha-10);
-  --collection-border-color: var(--border-color);
+  --collection-bg: var(--vd-color-white);
+  --collection-item-bg: var(--vd-color-white);
+  --collection-item-bg-hover: var(--vd-bg-secondary);
+  --collection-item-bg-active: var(--vd-color-primary-alpha-10);
+  --collection-border-color: var(--vd-border-color);
   
   /* Collection Spacing (Fibonacci) */
   --collection-padding-y: 0;
@@ -29,16 +29,16 @@
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --collection-bg: var(--bg-secondary);
-  --collection-item-bg: var(--bg-secondary);
-  --collection-item-bg-hover: var(--bg-primary);
+  --collection-bg: var(--vd-bg-secondary);
+  --collection-item-bg: var(--vd-bg-secondary);
+  --collection-item-bg-hover: var(--vd-bg-primary);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --collection-bg: var(--bg-secondary);
-    --collection-item-bg: var(--bg-secondary);
-    --collection-item-bg-hover: var(--bg-primary);
+    --collection-bg: var(--vd-bg-secondary);
+    --collection-item-bg: var(--vd-bg-secondary);
+    --collection-item-bg-hover: var(--vd-bg-primary);
   }
 }
 
@@ -58,7 +58,7 @@
   align-items: center;
   padding: var(--collection-item-padding-y) var(--collection-item-padding-x);
   margin-bottom: 0;
-  color: var(--text-primary);
+  color: var(--vd-text-primary);
   text-decoration: none;
   background-color: var(--collection-item-bg);
   border-bottom: 1px solid var(--collection-border-color);
@@ -76,7 +76,7 @@
 
 .vd-collection-item.active {
   background-color: var(--collection-item-bg-active);
-  color: var(--color-primary);
+  color: var(--vd-color-primary);
   font-weight: var(--font-weight-medium);
 }
 
@@ -93,7 +93,7 @@
   height: var(--collection-avatar-size);
   margin-right: 1rem;
   border-radius: 50%;
-  background-color: var(--bg-secondary);
+  background-color: var(--vd-bg-secondary);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -108,7 +108,7 @@
 
 .vd-collection-avatar-icon {
   font-size: 1.25rem;
-  color: var(--text-secondary);
+  color: var(--vd-text-secondary);
 }
 
 /* Collection Content */
@@ -122,18 +122,18 @@
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height-normal);
-  color: var(--text-primary);
+  color: var(--vd-text-primary);
 }
 
 .vd-collection-item.active .vd-collection-title {
-  color: var(--color-primary);
+  color: var(--vd-color-primary);
 }
 
 .vd-collection-text {
   margin: 0;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
-  color: var(--text-secondary);
+  color: var(--vd-text-secondary);
 }
 
 .vd-collection-item-secondary {
@@ -168,10 +168,10 @@
   margin-bottom: 0;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
-  color: var(--text-muted);
+  color: var(--vd-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  background-color: var(--bg-secondary);
+  background-color: var(--vd-bg-secondary);
   border-bottom: 1px solid var(--collection-border-color);
 }
 
@@ -191,7 +191,7 @@
 }
 
 .vd-collection-stripped .vd-collection-item:nth-child(odd) {
-  background-color: var(--bg-secondary);
+  background-color: var(--vd-bg-secondary);
 }
 
 .vd-collection-stripped .vd-collection-item:nth-child(odd):hover {

package/css/components/datepicker.css

@@ -6,16 +6,16 @@
 :root {
   /* Datepicker Colors */
   --dp-bg: var(--card-bg, #fff);
-  --dp-border-color: var(--border-color, #dee2e6);
+  --dp-border-color: var(--vd-border-color, #dee2e6);
   --dp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.12); /* 4px 13px fib */
-  --dp-header-bg: var(--color-primary, #0d6efd);
+  --dp-header-bg: var(--vd-color-primary, #0d6efd);
   --dp-header-color: #fff;
-  --dp-day-hover-bg: var(--bg-secondary, #f8f9fa);
-  --dp-day-selected-bg: var(--color-primary, #0d6efd);
+  --dp-day-hover-bg: var(--vd-bg-secondary, #f8f9fa);
+  --dp-day-selected-bg: var(--vd-color-primary, #0d6efd);
   --dp-day-selected-color: #fff;
-  --dp-day-today-color: var(--color-primary, #0d6efd);
-  --dp-day-outside-color: var(--text-muted, #6c757d);
-  --dp-day-disabled-color: var(--text-disabled, #adb5bd);
+  --dp-day-today-color: var(--vd-color-primary, #0d6efd);
+  --dp-day-outside-color: var(--vd-text-muted, #6c757d);
+  --dp-day-disabled-color: var(--vd-text-disabled, #adb5bd);
 
   /* Datepicker Spacing (Fibonacci) */
   --dp-padding: 0.5rem;        /* 8px - fib */
@@ -29,16 +29,16 @@
 
 [data-theme="dark"] {
   --dp-bg: var(--card-bg, #2d2d44);
-  --dp-border-color: var(--border-color, #3d3d5c);
-  --dp-day-hover-bg: var(--bg-primary, #1a1a2e);
+  --dp-border-color: var(--vd-border-color, #3d3d5c);
+  --dp-day-hover-bg: var(--vd-bg-primary, #1a1a2e);
   --dp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
     --dp-bg: var(--card-bg, #2d2d44);
-    --dp-border-color: var(--border-color, #3d3d5c);
-    --dp-day-hover-bg: var(--bg-primary, #1a1a2e);
+    --dp-border-color: var(--vd-border-color, #3d3d5c);
+    --dp-day-hover-bg: var(--vd-bg-primary, #1a1a2e);
     --dp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
   }
 }
@@ -94,7 +94,7 @@
   background: transparent;
   cursor: pointer;
   font-size: 1rem;
-  color: var(--text-primary, #212529);
+  color: var(--vd-text-primary, #212529);
   transition: background 0.15s ease;
 }
 
@@ -120,7 +120,7 @@
   text-align: center;
   font-size: 0.75rem;
   font-weight: 600;
-  color: var(--text-muted, #6c757d);
+  color: var(--vd-text-muted, #6c757d);
   padding-bottom: 0.25rem;
 }
 

package/css/components/doc-search.css

@@ -7,44 +7,44 @@
   /* Search Input */
   --doc-search-input-bg: var(--input-bg);
   --doc-search-input-border: var(--input-border-color);
-  --doc-search-input-focus-border: var(--color-primary);
+  --doc-search-input-focus-border: var(--vd-color-primary);
   --doc-search-input-radius: var(--input-border-radius);
   --doc-search-input-padding-y: 0.5rem;
   --doc-search-input-padding-x: 0.75rem;
   --doc-search-input-padding-left: 30px;
   
   /* Search Results */
-  --doc-search-results-bg: var(--card-bg, var(--bg-primary));
-  --doc-search-results-border: var(--border-color);
+  --doc-search-results-bg: var(--card-bg, var(--vd-bg-primary));
+  --doc-search-results-border: var(--vd-border-color);
   --doc-search-results-shadow: var(--shadow-lg);
   --doc-search-results-max-height: 400px;
   --doc-search-results-radius: var(--input-border-radius);
   
   /* Result Items */
   --doc-search-result-padding: 0.75rem 1rem;
-  --doc-search-result-hover-bg: var(--color-primary-alpha-10, rgba(34, 184, 207, 0.1));
-  --doc-search-result-active-bg: var(--color-primary-alpha-20, rgba(34, 184, 207, 0.2));
+  --doc-search-result-hover-bg: var(--vd-color-primary-alpha-10, rgba(34, 184, 207, 0.1));
+  --doc-search-result-active-bg: var(--vd-color-primary-alpha-20, rgba(34, 184, 207, 0.2));
   
   /* Highlight */
-  --doc-search-highlight-bg: var(--color-warning-alpha-30, rgba(250, 176, 5, 0.3));
+  --doc-search-highlight-bg: var(--vd-color-warning-alpha-30, rgba(250, 176, 5, 0.3));
   --doc-search-highlight-color: inherit;
   
   /* Shortcut Badge */
-  --doc-search-shortcut-bg: var(--bg-secondary);
-  --doc-search-shortcut-border: var(--border-color);
-  --doc-search-shortcut-color: var(--text-muted);
+  --doc-search-shortcut-bg: var(--vd-bg-secondary);
+  --doc-search-shortcut-border: var(--vd-border-color);
+  --doc-search-shortcut-color: var(--vd-text-muted);
 }
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --doc-search-results-bg: var(--bg-secondary);
-  --doc-search-shortcut-bg: var(--bg-tertiary);
+  --doc-search-results-bg: var(--vd-bg-secondary);
+  --doc-search-shortcut-bg: var(--vd-bg-tertiary);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --doc-search-results-bg: var(--bg-secondary);
-    --doc-search-shortcut-bg: var(--bg-tertiary);
+    --doc-search-results-bg: var(--vd-bg-secondary);
+    --doc-search-shortcut-bg: var(--vd-bg-tertiary);
   }
 }
 
@@ -73,7 +73,7 @@
   left: 0.625rem;
   top: 50%;
   transform: translateY(-50%);
-  color: var(--text-muted);
+  color: var(--vd-text-muted);
   font-size: 1.125rem;
   pointer-events: none;
   z-index: 1;
@@ -82,7 +82,7 @@
 
 .vd-doc-search-input:focus ~ .vd-doc-search-icon,
 .vd-doc-search-input-wrapper:focus-within .vd-doc-search-icon {
-  color: var(--color-primary);
+  color: var(--vd-color-primary);
 }
 
 /* Search Input - input.vd-doc-search-input matches forms.css specificity so padding overrides base input[type="search"] */
@@ -93,7 +93,7 @@ input.vd-doc-search-input {
   font-family: var(--font-family-sans);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
-  color: var(--text-primary);
+  color: var(--vd-text-primary);
   background-color: var(--doc-search-input-bg);
   border: 1px solid var(--doc-search-input-border);
   border-radius: var(--doc-search-input-radius);
@@ -102,14 +102,14 @@ input.vd-doc-search-input {
 }
 
 .vd-doc-search-input::placeholder {
-  color: var(--text-muted);
+  color: var(--vd-text-muted);
   opacity: 1;
 }
 
 .vd-doc-search-input:focus {
   outline: none;
   border-color: var(--doc-search-input-focus-border);
-  box-shadow: 0 0 0 3px var(--color-primary-alpha-20, rgba(34, 184, 207, 0.2));
+  box-shadow: 0 0 0 3px var(--vd-color-primary-alpha-20, rgba(34, 184, 207, 0.2));
 }
 
 /* Clear the default search cancel button */
@@ -163,6 +163,7 @@ input.vd-doc-search-input {
   max-height: var(--doc-search-results-max-height);
   overflow-y: auto;
   overflow-x: hidden;
+  animation: doc-search-fade-in 0.15s ease;
 }
 
 .vd-doc-search-results.is-open {
@@ -209,9 +210,9 @@ input.vd-doc-search-input {
   justify-content: center;
   width: 2rem;
   height: 2rem;
-  background-color: var(--color-primary-alpha-10, rgba(34, 184, 207, 0.1));
+  background-color: var(--vd-color-primary-alpha-10, rgba(34, 184, 207, 0.1));
   border-radius: 6px;
-  color: var(--color-primary);
+  color: var(--vd-color-primary);
   font-size: 1rem;
 }
 
@@ -224,20 +225,20 @@ input.vd-doc-search-input {
 .vd-doc-search-result-title {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
-  color: var(--text-primary);
+  color: var(--vd-text-primary);
   line-height: 1.4;
   margin-bottom: 0.125rem;
 }
 
 .vd-doc-search-result-category {
   font-size: var(--font-size-xs);
-  color: var(--text-muted);
+  color: var(--vd-text-muted);
   margin-bottom: 0.25rem;
 }
 
 .vd-doc-search-result-excerpt {
   font-size: var(--font-size-xs);
-  color: var(--text-secondary);
+  color: var(--vd-text-secondary);
   line-height: 1.4;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -261,7 +262,7 @@ input.vd-doc-search-input {
 .vd-doc-search-empty {
   padding: 2rem 1rem;
   text-align: center;
-  color: var(--text-muted);
+  color: var(--vd-text-muted);
 }
 
 .vd-doc-search-empty-icon {
@@ -273,13 +274,13 @@ input.vd-doc-search-input {
 .vd-doc-search-empty-title {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
-  color: var(--text-primary);
+  color: var(--vd-text-primary);
   margin-bottom: 0.25rem;
 }
 
 .vd-doc-search-empty-text {
   font-size: var(--font-size-xs);
-  color: var(--text-muted);
+  color: var(--vd-text-muted);
 }
 
 /* ============================================
@@ -289,15 +290,15 @@ input.vd-doc-search-input {
 .vd-doc-search-loading {
   padding: 1.5rem 1rem;
   text-align: center;
-  color: var(--text-muted);
+  color: var(--vd-text-muted);
 }
 
 .vd-doc-search-loading-spinner {
   display: inline-block;
   width: 1.5rem;
   height: 1.5rem;
-  border: 2px solid var(--border-color);
-  border-top-color: var(--color-primary);
+  border: 2px solid var(--vd-border-color);
+  border-top-color: var(--vd-color-primary);
   border-radius: 50%;
   animation: doc-search-spin 0.6s linear infinite;
 }
@@ -318,9 +319,9 @@ input.vd-doc-search-input {
   justify-content: center;
   gap: 1rem;
   padding: 0.5rem 1rem;
-  border-top: 1px solid var(--border-color);
+  border-top: 1px solid var(--vd-border-color);
   font-size: var(--font-size-xs);
-  color: var(--text-muted);
+  color: var(--vd-text-muted);
 }
 
 .vd-doc-search-footer kbd {
@@ -349,33 +350,33 @@ input.vd-doc-search-input {
    ============================================ */
 
 .vd-doc-search-result[data-category="getting-started"] .vd-doc-search-result-icon {
-  background-color: var(--color-success-alpha-10, rgba(64, 192, 87, 0.1));
-  color: var(--color-success);
+  background-color: var(--vd-color-success-alpha-10, rgba(64, 192, 87, 0.1));
+  color: var(--vd-color-success);
 }
 
 .vd-doc-search-result[data-category="core"] .vd-doc-search-result-icon {
-  background-color: var(--color-info-alpha-10, rgba(34, 139, 230, 0.1));
-  color: var(--color-info);
+  background-color: var(--vd-color-info-alpha-10, rgba(34, 139, 230, 0.1));
+  color: var(--vd-color-info);
 }
 
 .vd-doc-search-result[data-category="components"] .vd-doc-search-result-icon {
-  background-color: var(--color-primary-alpha-10, rgba(34, 184, 207, 0.1));
-  color: var(--color-primary);
+  background-color: var(--vd-color-primary-alpha-10, rgba(34, 184, 207, 0.1));
+  color: var(--vd-color-primary);
 }
 
 .vd-doc-search-result[data-category="interactive"] .vd-doc-search-result-icon {
-  background-color: var(--color-warning-alpha-10, rgba(250, 176, 5, 0.1));
-  color: var(--color-warning);
+  background-color: var(--vd-color-warning-alpha-10, rgba(250, 176, 5, 0.1));
+  color: var(--vd-color-warning);
 }
 
 .vd-doc-search-result[data-category="data-display"] .vd-doc-search-result-icon {
-  background-color: var(--color-secondary-alpha-10, rgba(32, 201, 151, 0.1));
-  color: var(--color-secondary);
+  background-color: var(--vd-color-secondary-alpha-10, rgba(32, 201, 151, 0.1));
+  color: var(--vd-color-secondary);
 }
 
 .vd-doc-search-result[data-category="feedback"] .vd-doc-search-result-icon {
-  background-color: var(--color-error-alpha-10, rgba(250, 82, 82, 0.1));
-  color: var(--color-error);
+  background-color: var(--vd-color-error-alpha-10, rgba(250, 82, 82, 0.1));
+  color: var(--vd-color-error);
 }
 
 /* ============================================
@@ -387,7 +388,7 @@ input.vd-doc-search-input {
   position: sticky;
   top: 70px;
   z-index: 2;
-  background: var(--bg-primary);
+  background: var(--vd-bg-primary);
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
@@ -427,20 +428,12 @@ input.vd-doc-search-input {
     position: sticky;
     top: 70px;
     z-index: 2;
-    background: var(--bg-primary);
+    background: var(--vd-bg-primary);
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
 }
 
-/* ============================================
-   Animations
-   ============================================ */
-
-.vd-doc-search-results {
-  animation: doc-search-fade-in 0.15s ease;
-}
-
 @keyframes doc-search-fade-in {
   from {
     opacity: 0;

package/css/components/doc-tabs.css

@@ -15,24 +15,24 @@
     align-items: center;
     gap: 0.4rem;
     padding: 0.6rem 1rem;
-    border: 1px solid var(--border-color);
+    border: 1px solid var(--vd-border-color);
     border-radius: var(--btn-border-radius);
-    background: var(--bg-secondary);
-    color: var(--text-primary);
+    background: var(--vd-bg-secondary);
+    color: var(--vd-text-primary);
     text-decoration: none;
     font-weight: 500;
     transition: all 0.2s ease;
 }
 
 .doc-tab:hover {
-    border-color: var(--color-primary);
-    color: var(--color-primary);
-    background: var(--color-primary-alpha-08);
+    border-color: var(--vd-color-primary);
+    color: var(--vd-color-primary);
+    background: var(--vd-color-primary-alpha-08);
 }
 
 .doc-tab.active {
-    border-color: var(--color-primary);
-    color: var(--text-on-primary);
-    background: var(--color-primary);
-    box-shadow: 0 0 0 1px var(--color-primary-alpha-20);
+    border-color: var(--vd-color-primary);
+    color: var(--vd-text-on-primary);
+    background: var(--vd-color-primary);
+    box-shadow: 0 0 0 1px var(--vd-color-primary-alpha-20);
 }