@vanduo-oss/framework 1.3.9 → 1.4.1

package/css/components/datepicker.css

@@ -5,41 +5,41 @@
 
 :root {
   /* Datepicker Colors */
-  --dp-bg: var(--card-bg, #fff);
-  --dp-border-color: var(--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-color: #fff;
-  --dp-day-hover-bg: var(--bg-secondary, #f8f9fa);
-  --dp-day-selected-bg: var(--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);
+  --vd-dp-bg: var(--vd-card-bg, #fff);
+  --vd-dp-border-color: var(--vd-border-color, #dee2e6);
+  --vd-dp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.12); /* 4px 13px fib */
+  --vd-dp-header-bg: var(--vd-color-primary, #0d6efd);
+  --vd-dp-header-color: #fff;
+  --vd-dp-day-hover-bg: var(--vd-bg-secondary, #f8f9fa);
+  --vd-dp-day-selected-bg: var(--vd-color-primary, #0d6efd);
+  --vd-dp-day-selected-color: #fff;
+  --vd-dp-day-today-color: var(--vd-color-primary, #0d6efd);
+  --vd-dp-day-outside-color: var(--vd-text-muted, #6c757d);
+  --vd-dp-day-disabled-color: var(--vd-text-disabled, #adb5bd);
 
   /* Datepicker Spacing (Fibonacci) */
-  --dp-padding: 0.5rem;        /* 8px - fib */
-  --dp-cell-size: 2.25rem;     /* 36px */
-  --dp-gap: 2px;
-  --dp-border-radius: var(--border-radius, 0.5rem);
+  --vd-dp-padding: 0.5rem;        /* 8px - fib */
+  --vd-dp-cell-size: 2.25rem;     /* 36px */
+  --vd-dp-gap: 2px;
+  --vd-dp-border-radius: var(--vd-border-radius, 0.5rem);
 
   /* Datepicker Z-index */
-  --dp-z-index: 1055;
+  --vd-dp-z-index: 1055;
 }
 
 [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-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
+  --vd-dp-bg: var(--vd-card-bg, #2d2d44);
+  --vd-dp-border-color: var(--vd-border-color, #3d3d5c);
+  --vd-dp-day-hover-bg: var(--vd-bg-primary, #1a1a2e);
+  --vd-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-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
+    --vd-dp-bg: var(--vd-card-bg, #2d2d44);
+    --vd-dp-border-color: var(--vd-border-color, #3d3d5c);
+    --vd-dp-day-hover-bg: var(--vd-bg-primary, #1a1a2e);
+    --vd-dp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
   }
 }
 
@@ -47,12 +47,12 @@
 
 .vd-datepicker-popup {
   position: absolute;
-  z-index: var(--dp-z-index);
-  background: var(--dp-bg);
-  border: 1px solid var(--dp-border-color);
-  border-radius: var(--dp-border-radius);
-  box-shadow: var(--dp-shadow);
-  padding: var(--dp-padding);
+  z-index: var(--vd-dp-z-index);
+  background: var(--vd-dp-bg);
+  border: 1px solid var(--vd-dp-border-color);
+  border-radius: var(--vd-dp-border-radius);
+  box-shadow: var(--vd-dp-shadow);
+  padding: var(--vd-dp-padding);
   display: none;
   min-width: 17rem;
 }
@@ -73,12 +73,12 @@
 
 .vd-datepicker-title {
   font-weight: 600;
-  font-size: var(--font-size-base, 1rem);
+  font-size: var(--vd-font-size-base, 1rem);
   cursor: pointer;
 }
 
 .vd-datepicker-title:hover {
-  color: var(--dp-day-today-color);
+  color: var(--vd-dp-day-today-color);
 }
 
 .vd-datepicker-prev,
@@ -94,13 +94,13 @@
   background: transparent;
   cursor: pointer;
   font-size: 1rem;
-  color: var(--text-primary, #212529);
+  color: var(--vd-text-primary, #212529);
   transition: background 0.15s ease;
 }
 
 .vd-datepicker-prev:hover,
 .vd-datepicker-next:hover {
-  background: var(--dp-day-hover-bg);
+  background: var(--vd-dp-day-hover-bg);
 }
 
 /* ========== Calendar grid (weekday row + week rows) ========== */
@@ -108,7 +108,7 @@
 .vd-datepicker-grid {
   display: flex;
   flex-direction: column;
-  gap: var(--dp-gap);
+  gap: var(--vd-dp-gap);
 }
 
 /* ========== Weekday Headers ========== */
@@ -116,11 +116,11 @@
 .vd-datepicker-weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: var(--dp-gap);
+  gap: var(--vd-dp-gap);
   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;
 }
 
@@ -130,15 +130,15 @@
 .vd-datepicker-row {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: var(--dp-gap);
+  gap: var(--vd-dp-gap);
 }
 
 .vd-datepicker-day {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--dp-cell-size);
-  height: var(--dp-cell-size);
+  width: var(--vd-dp-cell-size);
+  height: var(--vd-dp-cell-size);
   border: none;
   border-radius: 50%;
   background: transparent;
@@ -149,26 +149,26 @@
 }
 
 .vd-datepicker-day:hover {
-  background: var(--dp-day-hover-bg);
+  background: var(--vd-dp-day-hover-bg);
 }
 
 .vd-datepicker-day.is-today {
-  color: var(--dp-day-today-color);
+  color: var(--vd-dp-day-today-color);
   font-weight: 700;
 }
 
 .vd-datepicker-day.is-selected {
-  background: var(--dp-day-selected-bg);
-  color: var(--dp-day-selected-color);
+  background: var(--vd-dp-day-selected-bg);
+  color: var(--vd-dp-day-selected-color);
   font-weight: 600;
 }
 
 .vd-datepicker-day.is-outside {
-  color: var(--dp-day-outside-color);
+  color: var(--vd-dp-day-outside-color);
 }
 
 .vd-datepicker-day.is-disabled {
-  color: var(--dp-day-disabled-color);
+  color: var(--vd-dp-day-disabled-color);
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -177,14 +177,14 @@
 
 .vd-datepicker-day.is-range-start {
   border-radius: 50% 0 0 50%;
-  background: var(--dp-day-selected-bg);
-  color: var(--dp-day-selected-color);
+  background: var(--vd-dp-day-selected-bg);
+  color: var(--vd-dp-day-selected-color);
 }
 
 .vd-datepicker-day.is-range-end {
   border-radius: 0 50% 50% 0;
-  background: var(--dp-day-selected-bg);
-  color: var(--dp-day-selected-color);
+  background: var(--vd-dp-day-selected-bg);
+  color: var(--vd-dp-day-selected-color);
 }
 
 .vd-datepicker-day.is-in-range {
@@ -206,7 +206,7 @@
 .vd-datepicker-year-btn {
   padding: 0.5rem;
   border: none;
-  border-radius: var(--dp-border-radius);
+  border-radius: var(--vd-dp-border-radius);
   background: transparent;
   cursor: pointer;
   text-align: center;
@@ -215,11 +215,11 @@
 
 .vd-datepicker-month-btn:hover,
 .vd-datepicker-year-btn:hover {
-  background: var(--dp-day-hover-bg);
+  background: var(--vd-dp-day-hover-bg);
 }
 
 .vd-datepicker-month-btn.is-selected,
 .vd-datepicker-year-btn.is-selected {
-  background: var(--dp-day-selected-bg);
-  color: var(--dp-day-selected-color);
+  background: var(--vd-dp-day-selected-bg);
+  color: var(--vd-dp-day-selected-color);
 }

package/css/components/doc-search.css

@@ -5,46 +5,46 @@
 
 :root {
   /* 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-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;
+  --vd-doc-search-input-bg: var(--vd-input-bg);
+  --vd-doc-search-input-border: var(--vd-input-border-color);
+  --vd-doc-search-input-focus-border: var(--vd-color-primary);
+  --vd-doc-search-input-radius: var(--vd-input-border-radius);
+  --vd-doc-search-input-padding-y: 0.5rem;
+  --vd-doc-search-input-padding-x: 0.75rem;
+  --vd-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-shadow: var(--shadow-lg);
-  --doc-search-results-max-height: 400px;
-  --doc-search-results-radius: var(--input-border-radius);
+  --vd-doc-search-results-bg: var(--vd-card-bg, var(--vd-bg-primary));
+  --vd-doc-search-results-border: var(--vd-border-color);
+  --vd-doc-search-results-shadow: var(--vd-shadow-lg);
+  --vd-doc-search-results-max-height: 400px;
+  --vd-doc-search-results-radius: var(--vd-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));
+  --vd-doc-search-result-padding: 0.75rem 1rem;
+  --vd-doc-search-result-hover-bg: var(--vd-color-primary-alpha-10, rgba(34, 184, 207, 0.1));
+  --vd-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-color: inherit;
+  --vd-doc-search-highlight-bg: var(--vd-color-warning-alpha-30, rgba(250, 176, 5, 0.3));
+  --vd-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);
+  --vd-doc-search-shortcut-bg: var(--vd-bg-secondary);
+  --vd-doc-search-shortcut-border: var(--vd-border-color);
+  --vd-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);
+  --vd-doc-search-results-bg: var(--vd-bg-secondary);
+  --vd-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);
+    --vd-doc-search-results-bg: var(--vd-bg-secondary);
+    --vd-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,34 +82,34 @@
 
 .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"] */
 input.vd-doc-search-input {
   width: 100%;
-  padding: var(--input-padding-y) var(--input-padding-x);
-  padding-left: var(--doc-search-input-padding-left);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
-  color: var(--text-primary);
-  background-color: var(--doc-search-input-bg);
-  border: 1px solid var(--doc-search-input-border);
-  border-radius: var(--doc-search-input-radius);
+  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);
+  padding-left: var(--vd-doc-search-input-padding-left);
+  font-family: var(--vd-font-family-sans);
+  font-size: var(--vd-font-size-sm);
+  line-height: var(--vd-line-height-normal);
+  color: var(--vd-text-primary);
+  background-color: var(--vd-doc-search-input-bg);
+  border: 1px solid var(--vd-doc-search-input-border);
+  border-radius: var(--vd-doc-search-input-radius);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   appearance: none;
 }
 
 .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));
+  border-color: var(--vd-doc-search-input-focus-border);
+  box-shadow: 0 0 0 3px var(--vd-color-primary-alpha-20, rgba(34, 184, 207, 0.2));
 }
 
 /* Clear the default search cancel button */
@@ -121,19 +121,19 @@ input.vd-doc-search-input {
 /* Keyboard Shortcut Badge */
 .vd-doc-search-shortcut {
   position: absolute;
-  right: var(--doc-search-input-padding-x);
+  right: var(--vd-doc-search-input-padding-x);
   top: 50%;
   transform: translateY(-50%);
   display: inline-flex;
   align-items: center;
   gap: 0.125rem;
   padding: 0.125rem 0.375rem;
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  color: var(--doc-search-shortcut-color);
-  background-color: var(--doc-search-shortcut-bg);
-  border: 1px solid var(--doc-search-shortcut-border);
+  font-family: var(--vd-font-family-sans);
+  font-size: var(--vd-font-size-xs);
+  font-weight: var(--vd-font-weight-medium);
+  color: var(--vd-doc-search-shortcut-color);
+  background-color: var(--vd-doc-search-shortcut-bg);
+  border: 1px solid var(--vd-doc-search-shortcut-border);
   border-radius: 4px;
   pointer-events: none;
   user-select: none;
@@ -156,13 +156,14 @@ input.vd-doc-search-input {
   z-index: 1000;
   display: none;
   margin-top: 0.5rem;
-  background-color: var(--doc-search-results-bg);
-  border: 1px solid var(--doc-search-results-border);
-  border-radius: var(--doc-search-results-radius);
-  box-shadow: var(--doc-search-results-shadow);
-  max-height: var(--doc-search-results-max-height);
+  background-color: var(--vd-doc-search-results-bg);
+  border: 1px solid var(--vd-doc-search-results-border);
+  border-radius: var(--vd-doc-search-results-radius);
+  box-shadow: var(--vd-doc-search-results-shadow);
+  max-height: var(--vd-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 {
@@ -184,7 +185,7 @@ input.vd-doc-search-input {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
-  padding: var(--doc-search-result-padding);
+  padding: var(--vd-doc-search-result-padding);
   cursor: pointer;
   transition: background-color 0.1s ease;
   text-decoration: none;
@@ -192,12 +193,12 @@ input.vd-doc-search-input {
 }
 
 .vd-doc-search-result:hover {
-  background-color: var(--doc-search-result-hover-bg);
+  background-color: var(--vd-doc-search-result-hover-bg);
 }
 
 .vd-doc-search-result.is-active,
 .vd-doc-search-result:focus {
-  background-color: var(--doc-search-result-active-bg);
+  background-color: var(--vd-doc-search-result-active-bg);
   outline: none;
 }
 
@@ -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;
 }
 
@@ -222,22 +223,22 @@ 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);
+  font-size: var(--vd-font-size-sm);
+  font-weight: var(--vd-font-weight-medium);
+  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);
+  font-size: var(--vd-font-size-xs);
+  color: var(--vd-text-muted);
   margin-bottom: 0.25rem;
 }
 
 .vd-doc-search-result-excerpt {
-  font-size: var(--font-size-xs);
-  color: var(--text-secondary);
+  font-size: var(--vd-font-size-xs);
+  color: var(--vd-text-secondary);
   line-height: 1.4;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -248,8 +249,8 @@ input.vd-doc-search-input {
 /* Highlight matched text */
 .vd-doc-search-result mark,
 .vd-doc-search-highlight {
-  background-color: var(--doc-search-highlight-bg);
-  color: var(--doc-search-highlight-color);
+  background-color: var(--vd-doc-search-highlight-bg);
+  color: var(--vd-doc-search-highlight-color);
   padding: 0 0.125rem;
   border-radius: 2px;
 }
@@ -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 {
@@ -271,15 +272,15 @@ 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);
+  font-size: var(--vd-font-size-sm);
+  font-weight: var(--vd-font-weight-medium);
+  color: var(--vd-text-primary);
   margin-bottom: 0.25rem;
 }
 
 .vd-doc-search-empty-text {
-  font-size: var(--font-size-xs);
-  color: var(--text-muted);
+  font-size: var(--vd-font-size-xs);
+  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);
-  font-size: var(--font-size-xs);
-  color: var(--text-muted);
+  border-top: 1px solid var(--vd-border-color);
+  font-size: var(--vd-font-size-xs);
+  color: var(--vd-text-muted);
 }
 
 .vd-doc-search-footer kbd {
@@ -330,11 +331,11 @@ input.vd-doc-search-input {
   min-width: 1.25rem;
   height: 1.25rem;
   padding: 0 0.25rem;
-  font-family: var(--font-family-sans);
+  font-family: var(--vd-font-family-sans);
   font-size: 0.625rem;
-  font-weight: var(--font-weight-medium);
-  background-color: var(--doc-search-shortcut-bg);
-  border: 1px solid var(--doc-search-shortcut-border);
+  font-weight: var(--vd-font-weight-medium);
+  background-color: var(--vd-doc-search-shortcut-bg);
+  border: 1px solid var(--vd-doc-search-shortcut-border);
   border-radius: 3px;
 }
 
@@ -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;
 }
@@ -414,7 +415,7 @@ input.vd-doc-search-input {
   }
   
   input.vd-doc-search-input {
-    padding-right: var(--doc-search-input-padding-x);
+    padding-right: var(--vd-doc-search-input-padding-x);
     min-height: 44px;
   }
   
@@ -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-radius: var(--btn-border-radius);
-    background: var(--bg-secondary);
-    color: var(--text-primary);
+    border: 1px solid var(--vd-border-color);
+    border-radius: var(--vd-btn-border-radius);
+    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);
 }