@vanduo-oss/framework 1.3.9 → 1.4.1

package/css/components/theme-customizer.css

@@ -5,15 +5,15 @@
 
 :root {
   /* Theme Customizer Variables */
-  --customizer-width: 320px;
-  --customizer-padding: 1rem;
-  --customizer-gap: 0.75rem;
-  --customizer-swatch-size: 28px;
-  --customizer-radius-btn-width: 48px;
-  --customizer-bg: var(--bg-primary);
-  --customizer-border: var(--border-color);
-  --customizer-shadow: var(--shadow-lg);
-  --customizer-z-index: 1050;
+  --vd-customizer-width: 320px;
+  --vd-customizer-padding: 1rem;
+  --vd-customizer-gap: 0.75rem;
+  --vd-customizer-swatch-size: 28px;
+  --vd-customizer-radius-btn-width: 48px;
+  --vd-customizer-bg: var(--vd-bg-primary);
+  --vd-customizer-border: var(--vd-border-color);
+  --vd-customizer-shadow: var(--vd-shadow-lg);
+  --vd-customizer-z-index: 1050;
 }
 
 /* ==========================================================================
@@ -25,15 +25,15 @@ body > .vd-theme-customizer-panel {
   /* top is set dynamically by JS based on actual navbar height */
   top: 55px;
   right: 0;
-  width: var(--customizer-width);
+  width: var(--vd-customizer-width);
   max-height: calc(100vh - 55px);
   overflow-y: auto;
   padding: 0; /* Override .vd-navbar-fixed ~ * padding-top rule */
-  background-color: var(--customizer-bg);
-  border: 1px solid var(--customizer-border);
-  border-radius: calc(var(--radius-scale, 0.25) * 1rem);
-  box-shadow: var(--customizer-shadow);
-  z-index: var(--customizer-z-index);
+  background-color: var(--vd-customizer-bg);
+  border: 1px solid var(--vd-customizer-border);
+  border-radius: calc(var(--vd-radius-scale, 0.25) * 1rem);
+  box-shadow: var(--vd-customizer-shadow);
+  z-index: var(--vd-customizer-z-index);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-10px);
@@ -54,24 +54,24 @@ body > .vd-theme-customizer-panel.is-open {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem var(--customizer-padding) 0.75rem;
-  border-bottom: 1px solid var(--border-color);
+  padding: 0.5rem var(--vd-customizer-padding) 0.75rem;
+  border-bottom: 1px solid var(--vd-border-color);
 }
 
 .tc-title {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-primary);
+  font-size: var(--vd-font-size-base);
+  font-weight: var(--vd-font-weight-semibold);
+  color: var(--vd-text-primary);
   margin: 0;
 }
 
 .tc-body {
-  padding: var(--customizer-padding);
+  padding: var(--vd-customizer-padding);
 }
 
 .tc-footer {
-  padding: 0.75rem var(--customizer-padding) 0.5rem;
-  border-top: 1px solid var(--border-color);
+  padding: 0.75rem var(--vd-customizer-padding) 0.5rem;
+  border-top: 1px solid var(--vd-border-color);
 }
 
 .tc-section {
@@ -85,9 +85,9 @@ body > .vd-theme-customizer-panel.is-open {
 .tc-label {
   display: block;
   margin-bottom: 0.5rem;
-  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);
 }
 
 /* Primary Color Grid */
@@ -101,9 +101,9 @@ body > .vd-theme-customizer-panel.is-open {
   width: 100%;
   aspect-ratio: 1;
   padding: 0;
-  background-color: var(--swatch-color);
+  background-color: var(--vd-swatch-color);
   border: 2px solid transparent;
-  border-radius: calc(var(--radius-scale, 0.25) * 0.5rem);
+  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem);
   cursor: pointer;
   transition: all 0.15s ease;
 }
@@ -114,13 +114,13 @@ body > .vd-theme-customizer-panel.is-open {
 }
 
 .tc-color-swatch:focus-visible {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--vd-color-primary);
   outline-offset: 2px;
 }
 
 .tc-color-swatch.is-active {
-  border-color: var(--text-primary);
-  box-shadow: 0 0 0 2px var(--bg-primary);
+  border-color: var(--vd-text-primary);
+  box-shadow: 0 0 0 2px var(--vd-bg-primary);
 }
 
 /* Neutral Color Grid */
@@ -137,8 +137,8 @@ body > .vd-theme-customizer-panel.is-open {
   gap: 0.25rem;
   padding: 0.5rem 0.25rem;
   background: transparent;
-  border: 1px solid var(--border-color);
-  border-radius: calc(var(--radius-scale, 0.25) * 0.5rem);
+  border: 1px solid var(--vd-border-color);
+  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem);
   cursor: pointer;
   transition: all 0.15s ease;
 }
@@ -148,28 +148,28 @@ body > .vd-theme-customizer-panel.is-open {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background-color: var(--swatch-color);
+  background-color: var(--vd-swatch-color);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
 
 .tc-neutral-swatch span {
-  font-size: var(--font-size-xs);
-  color: var(--text-primary);
+  font-size: var(--vd-font-size-xs);
+  color: var(--vd-text-primary);
 }
 
 .tc-neutral-swatch:hover {
-  background-color: var(--bg-secondary);
-  border-color: var(--border-color-dark);
+  background-color: var(--vd-bg-secondary);
+  border-color: var(--vd-border-color-dark);
 }
 
 .tc-neutral-swatch:focus-visible {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--vd-color-primary);
   outline-offset: 1px;
 }
 
 .tc-neutral-swatch.is-active {
-  background-color: var(--bg-secondary);
-  border-color: var(--text-primary);
+  background-color: var(--vd-bg-secondary);
+  border-color: var(--vd-text-primary);
 }
 
 /* Radius Group */
@@ -185,20 +185,20 @@ body > .vd-theme-customizer-panel.is-open {
   justify-content: center;
   padding: 0.5rem 0.25rem;
   background: transparent;
-  border: 1px solid var(--border-color);
-  color: var(--text-primary);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
+  border: 1px solid var(--vd-border-color);
+  color: var(--vd-text-primary);
+  font-size: var(--vd-font-size-xs);
+  font-weight: var(--vd-font-weight-medium);
   cursor: pointer;
   transition: all 0.15s ease;
 }
 
 .tc-radius-btn:first-child {
-  border-radius: calc(var(--radius-scale, 0.25) * 0.5rem) 0 0 calc(var(--radius-scale, 0.25) * 0.5rem);
+  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem);
 }
 
 .tc-radius-btn:last-child {
-  border-radius: 0 calc(var(--radius-scale, 0.25) * 0.5rem) calc(var(--radius-scale, 0.25) * 0.5rem) 0;
+  border-radius: 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem) calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0;
 }
 
 .tc-radius-btn:not(:first-child) {
@@ -206,20 +206,20 @@ body > .vd-theme-customizer-panel.is-open {
 }
 
 .tc-radius-btn:hover {
-  background-color: var(--bg-secondary);
+  background-color: var(--vd-bg-secondary);
   z-index: 1;
 }
 
 .tc-radius-btn:focus-visible {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--vd-color-primary);
   outline-offset: 1px;
   z-index: 2;
 }
 
 .tc-radius-btn.is-active {
-  background-color: var(--bg-dark);
-  border-color: var(--bg-dark);
-  color: var(--text-inverse);
+  background-color: var(--vd-bg-dark);
+  border-color: var(--vd-bg-dark);
+  color: var(--vd-text-inverse);
   z-index: 1;
 }
 
@@ -227,23 +227,23 @@ body > .vd-theme-customizer-panel.is-open {
 .tc-font-select {
   width: 100%;
   padding: 0.5rem 0.75rem;
-  background-color: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: calc(var(--radius-scale, 0.25) * 0.5rem);
-  color: var(--text-primary);
-  font-size: var(--font-size-sm);
+  background-color: var(--vd-bg-primary);
+  border: 1px solid var(--vd-border-color);
+  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem);
+  color: var(--vd-text-primary);
+  font-size: var(--vd-font-size-sm);
   cursor: pointer;
   transition: border-color 0.15s ease;
 }
 
 .tc-font-select:hover {
-  border-color: var(--border-color-dark);
+  border-color: var(--vd-border-color-dark);
 }
 
 .tc-font-select:focus {
   outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-primary-alpha-10);
+  border-color: var(--vd-color-primary);
+  box-shadow: 0 0 0 3px var(--vd-color-primary-alpha-10);
 }
 
 /* Mode Group */
@@ -260,19 +260,19 @@ body > .vd-theme-customizer-panel.is-open {
   gap: 0.375rem;
   padding: 0.5rem 0.5rem;
   background: transparent;
-  border: 1px solid var(--border-color);
-  color: var(--text-primary);
-  font-size: var(--font-size-xs);
+  border: 1px solid var(--vd-border-color);
+  color: var(--vd-text-primary);
+  font-size: var(--vd-font-size-xs);
   cursor: pointer;
   transition: all 0.15s ease;
 }
 
 .tc-mode-btn:first-child {
-  border-radius: calc(var(--radius-scale, 0.25) * 0.5rem) 0 0 calc(var(--radius-scale, 0.25) * 0.5rem);
+  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem);
 }
 
 .tc-mode-btn:last-child {
-  border-radius: 0 calc(var(--radius-scale, 0.25) * 0.5rem) calc(var(--radius-scale, 0.25) * 0.5rem) 0;
+  border-radius: 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem) calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0;
 }
 
 .tc-mode-btn:not(:first-child) {
@@ -280,20 +280,20 @@ body > .vd-theme-customizer-panel.is-open {
 }
 
 .tc-mode-btn:hover {
-  background-color: var(--bg-secondary);
+  background-color: var(--vd-bg-secondary);
   z-index: 1;
 }
 
 .tc-mode-btn:focus-visible {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--vd-color-primary);
   outline-offset: 1px;
   z-index: 2;
 }
 
 .tc-mode-btn.is-active {
-  background-color: var(--bg-dark);
-  border-color: var(--bg-dark);
-  color: var(--text-inverse);
+  background-color: var(--vd-bg-dark);
+  border-color: var(--vd-bg-dark);
+  color: var(--vd-text-inverse);
   z-index: 1;
 }
 
@@ -319,21 +319,21 @@ body > .vd-theme-customizer-panel.is-open {
   height: 2.5rem;
   padding: 0;
   background: transparent;
-  border: 1px solid var(--border-color);
-  border-radius: var(--btn-border-radius);
-  color: var(--text-primary);
+  border: 1px solid var(--vd-border-color);
+  border-radius: var(--vd-btn-border-radius);
+  color: var(--vd-text-primary);
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .vd-theme-customizer-trigger:hover {
-  background-color: var(--bg-secondary);
-  border-color: var(--color-primary);
-  color: var(--color-primary);
+  background-color: var(--vd-bg-secondary);
+  border-color: var(--vd-color-primary);
+  color: var(--vd-color-primary);
 }
 
 .vd-theme-customizer-trigger:focus-visible {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--vd-color-primary);
   outline-offset: 2px;
 }
 
@@ -342,9 +342,9 @@ body > .vd-theme-customizer-panel.is-open {
 }
 
 .vd-theme-customizer-trigger[aria-expanded="true"] {
-  background-color: var(--color-primary-alpha-10);
-  border-color: var(--color-primary);
-  color: var(--color-primary);
+  background-color: var(--vd-color-primary-alpha-10);
+  border-color: var(--vd-color-primary);
+  color: var(--vd-color-primary);
 }
 
 /* ==========================================================================
@@ -356,15 +356,15 @@ body > .vd-theme-customizer-panel.is-open {
   /* top is set dynamically by JS based on actual navbar height */
   top: 55px;
   right: 0;
-  width: var(--customizer-width);
+  width: var(--vd-customizer-width);
   max-height: calc(100vh - 55px);
   overflow-y: auto;
   padding: 0; /* Override .vd-navbar-fixed ~ * padding-top rule */
-  background-color: var(--customizer-bg);
-  border: 1px solid var(--customizer-border);
-  border-radius: calc(var(--radius-scale, 0.25) * 1rem);
-  box-shadow: var(--customizer-shadow);
-  z-index: var(--customizer-z-index);
+  background-color: var(--vd-customizer-bg);
+  border: 1px solid var(--vd-customizer-border);
+  border-radius: calc(var(--vd-radius-scale, 0.25) * 1rem);
+  box-shadow: var(--vd-customizer-shadow);
+  z-index: var(--vd-customizer-z-index);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-10px);
@@ -378,7 +378,7 @@ body > .vd-theme-customizer-panel.is-open {
 }
 
 .vd-theme-customizer-panel-inner {
-  padding: var(--customizer-padding);
+  padding: var(--vd-customizer-padding);
 }
 
 /* ==========================================================================
@@ -398,9 +398,9 @@ body > .vd-theme-customizer-panel.is-open {
   align-items: center;
   gap: 0.375rem;
   margin-bottom: 0.625rem;
-  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);
 }
 
 .customizer-help {
@@ -412,13 +412,13 @@ body > .vd-theme-customizer-panel.is-open {
   padding: 0;
   background: transparent;
   border: none;
-  color: var(--text-muted);
+  color: var(--vd-text-muted);
   cursor: help;
   font-size: 0.75rem;
 }
 
 .customizer-help:hover {
-  color: var(--text-primary);
+  color: var(--vd-text-primary);
 }
 
 /* ==========================================================================
@@ -437,26 +437,26 @@ body > .vd-theme-customizer-panel.is-open {
   gap: 0.5rem;
   padding: 0.375rem 0.5rem;
   background: transparent;
-  border: 1px solid var(--border-color);
-  border-radius: var(--btn-border-radius);
+  border: 1px solid var(--vd-border-color);
+  border-radius: var(--vd-btn-border-radius);
   cursor: pointer;
   transition: all 0.15s ease;
   text-align: left;
 }
 
 .customizer-swatch:hover {
-  background-color: var(--bg-secondary);
-  border-color: var(--border-color-dark);
+  background-color: var(--vd-bg-secondary);
+  border-color: var(--vd-border-color-dark);
 }
 
 .customizer-swatch:focus-visible {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--vd-color-primary);
   outline-offset: 1px;
 }
 
 .customizer-swatch.is-active {
-  background-color: var(--bg-secondary);
-  border-color: var(--text-primary);
+  background-color: var(--vd-bg-secondary);
+  border-color: var(--vd-text-primary);
 }
 
 .customizer-swatch-dot {
@@ -464,13 +464,13 @@ body > .vd-theme-customizer-panel.is-open {
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background-color: var(--swatch-color);
+  background-color: var(--vd-swatch-color);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
 
 .customizer-swatch-label {
-  font-size: var(--font-size-xs);
-  color: var(--text-primary);
+  font-size: var(--vd-font-size-xs);
+  color: var(--vd-text-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -512,20 +512,20 @@ body > .vd-theme-customizer-panel.is-open {
   justify-content: center;
   padding: 0.5rem 0.25rem;
   background: transparent;
-  border: 1px solid var(--border-color);
-  color: var(--text-primary);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
+  border: 1px solid var(--vd-border-color);
+  color: var(--vd-text-primary);
+  font-size: var(--vd-font-size-xs);
+  font-weight: var(--vd-font-weight-medium);
   cursor: pointer;
   transition: all 0.15s ease;
 }
 
 .customizer-radius-btn:first-child {
-  border-radius: var(--btn-border-radius) 0 0 var(--btn-border-radius);
+  border-radius: var(--vd-btn-border-radius) 0 0 var(--vd-btn-border-radius);
 }
 
 .customizer-radius-btn:last-child {
-  border-radius: 0 var(--btn-border-radius) var(--btn-border-radius) 0;
+  border-radius: 0 var(--vd-btn-border-radius) var(--vd-btn-border-radius) 0;
 }
 
 .customizer-radius-btn:not(:first-child) {
@@ -533,20 +533,20 @@ body > .vd-theme-customizer-panel.is-open {
 }
 
 .customizer-radius-btn:hover {
-  background-color: var(--bg-secondary);
+  background-color: var(--vd-bg-secondary);
   z-index: 1;
 }
 
 .customizer-radius-btn:focus-visible {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--vd-color-primary);
   outline-offset: 1px;
   z-index: 2;
 }
 
 .customizer-radius-btn.is-active {
-  background-color: var(--bg-dark);
-  border-color: var(--bg-dark);
-  color: var(--text-inverse);
+  background-color: var(--vd-bg-dark);
+  border-color: var(--vd-bg-dark);
+  color: var(--vd-text-inverse);
   z-index: 1;
 }
 
@@ -568,7 +568,7 @@ body > .vd-theme-customizer-panel.is-open {
   left: 0.625rem;
   top: 50%;
   transform: translateY(-50%);
-  color: var(--text-muted);
+  color: var(--vd-text-muted);
   pointer-events: none;
 }
 
@@ -589,19 +589,19 @@ body > .vd-theme-customizer-panel.is-open {
   gap: 0.375rem;
   padding: 0.5rem 0.5rem;
   background: transparent;
-  border: 1px solid var(--border-color);
-  color: var(--text-primary);
-  font-size: var(--font-size-xs);
+  border: 1px solid var(--vd-border-color);
+  color: var(--vd-text-primary);
+  font-size: var(--vd-font-size-xs);
   cursor: pointer;
   transition: all 0.15s ease;
 }
 
 .customizer-mode-btn:first-child {
-  border-radius: var(--btn-border-radius) 0 0 var(--btn-border-radius);
+  border-radius: var(--vd-btn-border-radius) 0 0 var(--vd-btn-border-radius);
 }
 
 .customizer-mode-btn:last-child {
-  border-radius: 0 var(--btn-border-radius) var(--btn-border-radius) 0;
+  border-radius: 0 var(--vd-btn-border-radius) var(--vd-btn-border-radius) 0;
 }
 
 .customizer-mode-btn:not(:first-child) {
@@ -609,20 +609,20 @@ body > .vd-theme-customizer-panel.is-open {
 }
 
 .customizer-mode-btn:hover {
-  background-color: var(--bg-secondary);
+  background-color: var(--vd-bg-secondary);
   z-index: 1;
 }
 
 .customizer-mode-btn:focus-visible {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--vd-color-primary);
   outline-offset: 1px;
   z-index: 2;
 }
 
 .customizer-mode-btn.is-active {
-  background-color: var(--bg-dark);
-  border-color: var(--bg-dark);
-  color: var(--text-inverse);
+  background-color: var(--vd-bg-dark);
+  border-color: var(--vd-bg-dark);
+  color: var(--vd-text-inverse);
   z-index: 1;
 }
 
@@ -635,8 +635,8 @@ body > .vd-theme-customizer-panel.is-open {
    ========================================================================== */
 
 [data-theme="dark"] {
-  --customizer-bg: var(--bg-primary);
-  --customizer-border: var(--border-color);
+  --vd-customizer-bg: var(--vd-bg-primary);
+  --vd-customizer-border: var(--vd-border-color);
 }
 
 [data-theme="dark"] .customizer-swatch-dot,
@@ -648,15 +648,15 @@ body > .vd-theme-customizer-panel.is-open {
 [data-theme="dark"] .customizer-mode-btn.is-active,
 [data-theme="dark"] .tc-radius-btn.is-active,
 [data-theme="dark"] .tc-mode-btn.is-active {
-  background-color: var(--gray-2);
-  border-color: var(--gray-2);
-  color: var(--gray-9);
+  background-color: var(--vd-gray-2);
+  border-color: var(--vd-gray-2);
+  color: var(--vd-gray-9);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --customizer-bg: var(--bg-primary);
-    --customizer-border: var(--border-color);
+    --vd-customizer-bg: var(--vd-bg-primary);
+    --vd-customizer-border: var(--vd-border-color);
   }
 
   :root:not([data-theme]) .customizer-swatch-dot,
@@ -668,9 +668,9 @@ body > .vd-theme-customizer-panel.is-open {
   :root:not([data-theme]) .customizer-mode-btn.is-active,
   :root:not([data-theme]) .tc-radius-btn.is-active,
   :root:not([data-theme]) .tc-mode-btn.is-active {
-    background-color: var(--gray-2);
-    border-color: var(--gray-2);
-    color: var(--gray-9);
+    background-color: var(--vd-gray-2);
+    border-color: var(--vd-gray-2);
+    color: var(--vd-gray-9);
   }
 }
 
@@ -689,7 +689,7 @@ body > .vd-theme-customizer-panel.is-open {
     max-width: 320px;
     max-height: none;
     border: none;
-    border-left: 1px solid var(--customizer-border);
+    border-left: 1px solid var(--vd-customizer-border);
     border-radius: 0;
     transform: none;
     opacity: 1;
@@ -728,14 +728,14 @@ body > .vd-theme-customizer-panel.is-open {
     height: 2rem;
     padding: 0;
     background: transparent;
-    border: 1px solid var(--border-color);
-    border-radius: calc(var(--radius-scale, 0.25) * 0.5rem);
-    color: var(--text-primary);
+    border: 1px solid var(--vd-border-color);
+    border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem);
+    color: var(--vd-text-primary);
     cursor: pointer;
   }
 
   .customizer-mobile-close:hover {
-    background-color: var(--bg-secondary);
+    background-color: var(--vd-bg-secondary);
   }
 
   /* Mobile overlay */
@@ -746,7 +746,7 @@ body > .vd-theme-customizer-panel.is-open {
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: calc(var(--customizer-z-index) - 1);
+    z-index: calc(var(--vd-customizer-z-index) - 1);
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease, visibility 0.3s ease;
@@ -781,12 +781,12 @@ body > .vd-theme-customizer-panel.is-open {
 }
 
 .vd-theme-customizer-panel::-webkit-scrollbar-thumb {
-  background-color: var(--border-color);
+  background-color: var(--vd-border-color);
   border-radius: 3px;
 }
 
 .vd-theme-customizer-panel::-webkit-scrollbar-thumb:hover {
-  background-color: var(--text-muted);
+  background-color: var(--vd-text-muted);
 }
 
 /* ==========================================================================
@@ -799,13 +799,13 @@ body > .vd-theme-customizer-panel.is-open {
   justify-content: space-between;
   padding-bottom: 0.75rem;
   margin-bottom: 0.75rem;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--vd-border-color);
 }
 
 .customizer-title {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-primary);
+  font-size: var(--vd-font-size-base);
+  font-weight: var(--vd-font-weight-semibold);
+  color: var(--vd-text-primary);
   margin: 0;
 }
 
@@ -815,21 +815,21 @@ body > .vd-theme-customizer-panel.is-open {
   gap: 0.25rem;
   padding: 0.25rem 0.5rem;
   background: transparent;
-  border: 1px solid var(--border-color);
-  border-radius: var(--btn-border-radius);
-  color: var(--text-muted);
-  font-size: var(--font-size-xs);
+  border: 1px solid var(--vd-border-color);
+  border-radius: var(--vd-btn-border-radius);
+  color: var(--vd-text-muted);
+  font-size: var(--vd-font-size-xs);
   cursor: pointer;
   transition: all 0.15s ease;
 }
 
 .customizer-reset:hover {
-  background-color: var(--bg-secondary);
-  color: var(--text-primary);
-  border-color: var(--border-color-dark);
+  background-color: var(--vd-bg-secondary);
+  color: var(--vd-text-primary);
+  border-color: var(--vd-border-color-dark);
 }
 
 .customizer-reset:focus-visible {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--vd-color-primary);
   outline-offset: 1px;
 }