@vanduo-oss/framework 1.3.9 → 1.4.1

package/css/components/avatar.css

@@ -5,36 +5,36 @@
 
 :root {
   /* Avatar Sizes (Fibonacci) */
-  --avatar-size-xs: 1.3125rem;  /* 21px - fib */
-  --avatar-size-sm: 2.125rem;   /* 34px - fib */
-  --avatar-size-md: 3.4375rem;  /* 55px - fib */
-  --avatar-size: 3.4375rem;     /* 55px - fib (default / md) */
-  --avatar-size-lg: 5.5625rem;  /* 89px - fib */
-  --avatar-size-xl: 9rem;       /* 144px - fib */
-  --avatar-size-2xl: 14.5625rem;/* 233px - fib */
+  --vd-avatar-size-xs: 1.3125rem;  /* 21px - fib */
+  --vd-avatar-size-sm: 2.125rem;   /* 34px - fib */
+  --vd-avatar-size-md: 3.4375rem;  /* 55px - fib */
+  --vd-avatar-size: 3.4375rem;     /* 55px - fib (default / md) */
+  --vd-avatar-size-lg: 5.5625rem;  /* 89px - fib */
+  --vd-avatar-size-xl: 9rem;       /* 144px - fib */
+  --vd-avatar-size-2xl: 14.5625rem;/* 233px - fib */
 
   /* Avatar Colors */
-  --avatar-bg: var(--color-gray-300);
-  --avatar-text: var(--color-gray-700);
-  --avatar-border: var(--color-white);
-  --avatar-status-online: var(--color-success);
-  --avatar-status-offline: var(--color-gray-400);
-  --avatar-status-busy: var(--color-error);
-  --avatar-status-away: var(--color-warning);
+  --vd-avatar-bg: var(--vd-color-gray-300);
+  --vd-avatar-text: var(--vd-color-gray-700);
+  --vd-avatar-border: var(--vd-color-white);
+  --vd-avatar-status-online: var(--vd-color-success);
+  --vd-avatar-status-offline: var(--vd-color-gray-400);
+  --vd-avatar-status-busy: var(--vd-color-error);
+  --vd-avatar-status-away: var(--vd-color-warning);
 }
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --avatar-bg: var(--color-gray-600);
-  --avatar-text: var(--color-gray-200);
-  --avatar-border: var(--color-gray-800);
+  --vd-avatar-bg: var(--vd-color-gray-600);
+  --vd-avatar-text: var(--vd-color-gray-200);
+  --vd-avatar-border: var(--vd-color-gray-800);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --avatar-bg: var(--color-gray-600);
-    --avatar-text: var(--color-gray-200);
-    --avatar-border: var(--color-gray-800);
+    --vd-avatar-bg: var(--vd-color-gray-600);
+    --vd-avatar-text: var(--vd-color-gray-200);
+    --vd-avatar-border: var(--vd-color-gray-800);
   }
 }
 
@@ -44,13 +44,13 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--avatar-size);
-  height: var(--avatar-size);
+  width: var(--vd-avatar-size);
+  height: var(--vd-avatar-size);
   border-radius: 50%;
-  background-color: var(--avatar-bg);
-  color: var(--avatar-text);
-  font-weight: var(--font-weight-medium);
-  font-size: calc(var(--avatar-size) * 0.4);
+  background-color: var(--vd-avatar-bg);
+  color: var(--vd-avatar-text);
+  font-weight: var(--vd-font-weight-medium);
+  font-size: calc(var(--vd-avatar-size) * 0.4);
   line-height: 1;
   overflow: hidden;
   flex-shrink: 0;
@@ -73,44 +73,44 @@
 
 /* Avatar Sizes */
 .vd-avatar-xs {
-  width: var(--avatar-size-xs);
-  height: var(--avatar-size-xs);
-  font-size: calc(var(--avatar-size-xs) * 0.4);
+  width: var(--vd-avatar-size-xs);
+  height: var(--vd-avatar-size-xs);
+  font-size: calc(var(--vd-avatar-size-xs) * 0.4);
 }
 
 .vd-avatar-sm {
-  width: var(--avatar-size-sm);
-  height: var(--avatar-size-sm);
-  font-size: calc(var(--avatar-size-sm) * 0.4);
+  width: var(--vd-avatar-size-sm);
+  height: var(--vd-avatar-size-sm);
+  font-size: calc(var(--vd-avatar-size-sm) * 0.4);
 }
 
 .vd-avatar-md {
-  width: var(--avatar-size-md);
-  height: var(--avatar-size-md);
-  font-size: calc(var(--avatar-size-md) * 0.4);
+  width: var(--vd-avatar-size-md);
+  height: var(--vd-avatar-size-md);
+  font-size: calc(var(--vd-avatar-size-md) * 0.4);
 }
 
 .vd-avatar-lg {
-  width: var(--avatar-size-lg);
-  height: var(--avatar-size-lg);
-  font-size: calc(var(--avatar-size-lg) * 0.4);
+  width: var(--vd-avatar-size-lg);
+  height: var(--vd-avatar-size-lg);
+  font-size: calc(var(--vd-avatar-size-lg) * 0.4);
 }
 
 .vd-avatar-xl {
-  width: var(--avatar-size-xl);
-  height: var(--avatar-size-xl);
-  font-size: calc(var(--avatar-size-xl) * 0.4);
+  width: var(--vd-avatar-size-xl);
+  height: var(--vd-avatar-size-xl);
+  font-size: calc(var(--vd-avatar-size-xl) * 0.4);
 }
 
 .vd-avatar-2xl {
-  width: var(--avatar-size-2xl);
-  height: var(--avatar-size-2xl);
-  font-size: calc(var(--avatar-size-2xl) * 0.4);
+  width: var(--vd-avatar-size-2xl);
+  height: var(--vd-avatar-size-2xl);
+  font-size: calc(var(--vd-avatar-size-2xl) * 0.4);
 }
 
 /* Avatar Shapes */
 .vd-avatar-rounded {
-  border-radius: var(--btn-border-radius);
+  border-radius: var(--vd-btn-border-radius);
 }
 
 .vd-avatar-square {
@@ -127,8 +127,8 @@
   min-width: 0.5rem;
   min-height: 0.5rem;
   border-radius: 50%;
-  border: 2px solid var(--avatar-border);
-  background-color: var(--avatar-status-offline);
+  border: 2px solid var(--vd-avatar-border);
+  background-color: var(--vd-avatar-status-offline);
 }
 
 .vd-avatar.vd-avatar-status-online,
@@ -151,29 +151,29 @@
   min-width: 0.5rem;
   min-height: 0.5rem;
   border-radius: 50%;
-  border: 2px solid var(--avatar-border);
+  border: 2px solid var(--vd-avatar-border);
 }
 
-.vd-avatar.vd-avatar-status-online::after  { background-color: var(--avatar-status-online); }
-.vd-avatar.vd-avatar-status-offline::after { background-color: var(--avatar-status-offline); }
-.vd-avatar.vd-avatar-status-busy::after    { background-color: var(--avatar-status-busy); }
-.vd-avatar.vd-avatar-status-away::after    { background-color: var(--avatar-status-away); }
+.vd-avatar.vd-avatar-status-online::after  { background-color: var(--vd-avatar-status-online); }
+.vd-avatar.vd-avatar-status-offline::after { background-color: var(--vd-avatar-status-offline); }
+.vd-avatar.vd-avatar-status-busy::after    { background-color: var(--vd-avatar-status-busy); }
+.vd-avatar.vd-avatar-status-away::after    { background-color: var(--vd-avatar-status-away); }
 
 /* Avatar with Ring/Border */
 .vd-avatar-ring {
-  box-shadow: 0 0 0 3px var(--avatar-border), 0 0 0 5px var(--color-primary);
+  box-shadow: 0 0 0 3px var(--vd-avatar-border), 0 0 0 5px var(--vd-color-primary);
 }
 
 .vd-avatar-ring-success {
-  box-shadow: 0 0 0 3px var(--avatar-border), 0 0 0 5px var(--color-success);
+  box-shadow: 0 0 0 3px var(--vd-avatar-border), 0 0 0 5px var(--vd-color-success);
 }
 
 .vd-avatar-ring-warning {
-  box-shadow: 0 0 0 3px var(--avatar-border), 0 0 0 5px var(--color-warning);
+  box-shadow: 0 0 0 3px var(--vd-avatar-border), 0 0 0 5px var(--vd-color-warning);
 }
 
 .vd-avatar-ring-error {
-  box-shadow: 0 0 0 3px var(--avatar-border), 0 0 0 5px var(--color-error);
+  box-shadow: 0 0 0 3px var(--vd-avatar-border), 0 0 0 5px var(--vd-color-error);
 }
 
 /* Avatar Group (stacked avatars) */
@@ -183,7 +183,7 @@
 }
 
 .vd-avatar-group .vd-avatar {
-  border: 2px solid var(--avatar-border);
+  border: 2px solid var(--vd-avatar-border);
   margin-left: -0.75rem;
 }
 
@@ -209,50 +209,50 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--avatar-size);
-  height: var(--avatar-size);
+  width: var(--vd-avatar-size);
+  height: var(--vd-avatar-size);
   border-radius: 50%;
-  background-color: var(--color-gray-200);
-  color: var(--text-primary);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  border: 2px solid var(--avatar-border);
+  background-color: var(--vd-color-gray-200);
+  color: var(--vd-text-primary);
+  font-size: var(--vd-font-size-sm);
+  font-weight: var(--vd-font-weight-medium);
+  border: 2px solid var(--vd-avatar-border);
   margin-left: -0.75rem;
 }
 
 [data-theme="dark"] .vd-avatar-group-count {
-  background-color: var(--color-gray-700);
+  background-color: var(--vd-color-gray-700);
 }
 
 /* Color Variants */
 .vd-avatar-primary {
-  background-color: var(--color-primary);
-  color: var(--color-white);
+  background-color: var(--vd-color-primary);
+  color: var(--vd-color-white);
 }
 
 .vd-avatar-secondary {
-  background-color: var(--color-secondary);
-  color: var(--color-white);
+  background-color: var(--vd-color-secondary);
+  color: var(--vd-color-white);
 }
 
 .vd-avatar-success {
-  background-color: var(--color-success);
-  color: var(--color-white);
+  background-color: var(--vd-color-success);
+  color: var(--vd-color-white);
 }
 
 .vd-avatar-warning {
-  background-color: var(--color-warning);
-  color: var(--color-gray-900);
+  background-color: var(--vd-color-warning);
+  color: var(--vd-color-gray-900);
 }
 
 .vd-avatar-error {
-  background-color: var(--color-error);
-  color: var(--color-white);
+  background-color: var(--vd-color-error);
+  color: var(--vd-color-white);
 }
 
 .vd-avatar-info {
-  background-color: var(--color-info);
-  color: var(--color-white);
+  background-color: var(--vd-color-info);
+  color: var(--vd-color-white);
 }
 
 /* Clickable Avatar */
@@ -269,7 +269,7 @@ button.vd-avatar:hover {
 
 a.vd-avatar:focus-visible,
 button.vd-avatar:focus-visible {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--vd-color-primary);
   outline-offset: 2px;
 }
 

package/css/components/badges.css

@@ -5,23 +5,23 @@
 
 :root {
   /* Badge Padding (x/y ratio ~ phi) */
-  --badge-padding-y: 0.3em;
-  --badge-padding-x: 0.48em;     /* 0.48/0.3 = 1.6 ~ phi */
-  --badge-padding-y-sm: 0.18em;
-  --badge-padding-x-sm: 0.3em;   /* 0.3/0.18 = 1.67 ~ phi */
-  --badge-padding-y-lg: 0.42em;
-  --badge-padding-x-lg: 0.65em;    /* 0.65/0.42 = 1.55 ~ phi */
+  --vd-badge-padding-y: 0.3em;
+  --vd-badge-padding-x: 0.48em;     /* 0.48/0.3 = 1.6 ~ phi */
+  --vd-badge-padding-y-sm: 0.18em;
+  --vd-badge-padding-x-sm: 0.3em;   /* 0.3/0.18 = 1.67 ~ phi */
+  --vd-badge-padding-y-lg: 0.42em;
+  --vd-badge-padding-x-lg: 0.65em;    /* 0.65/0.42 = 1.55 ~ phi */
   
   /* Badge Font */
-  --badge-font-size: 0.8125em;
-  --badge-font-size-sm: 0.7em;
-  --badge-font-size-lg: 0.9375em;
-  --badge-font-weight: var(--font-weight-semibold);
-  --badge-line-height: 1;
+  --vd-badge-font-size: 0.8125em;
+  --vd-badge-font-size-sm: 0.7em;
+  --vd-badge-font-size-lg: 0.9375em;
+  --vd-badge-font-weight: var(--vd-font-weight-semibold);
+  --vd-badge-line-height: 1;
   
   /* Badge Border Radius */
-  --badge-border-radius: var(--btn-border-radius-sm);
-  --badge-pill-border-radius: 50rem;
+  --vd-badge-border-radius: var(--vd-btn-border-radius-sm);
+  --vd-badge-pill-border-radius: 50rem;
 }
 
 /* Dark Theme Overrides */
@@ -37,99 +37,99 @@
 
 /* Dark Theme - Light badge needs different colors */
 [data-theme="dark"] .vd-badge-light {
-  background-color: var(--color-gray-700);
-  color: var(--color-gray-100);
+  background-color: var(--vd-color-gray-700);
+  color: var(--vd-color-gray-100);
 }
 
 [data-theme="dark"] .vd-badge-outlined.vd-badge-light {
-  color: var(--color-gray-300);
-  border-color: var(--color-gray-500);
+  color: var(--vd-color-gray-300);
+  border-color: var(--vd-color-gray-500);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) .vd-badge-light {
-    background-color: var(--color-gray-700);
-    color: var(--color-gray-100);
+    background-color: var(--vd-color-gray-700);
+    color: var(--vd-color-gray-100);
   }
 
   :root:not([data-theme]) .vd-badge-outlined.vd-badge-light {
-    color: var(--color-gray-300);
-    border-color: var(--color-gray-500);
+    color: var(--vd-color-gray-300);
+    border-color: var(--vd-color-gray-500);
   }
 }
 
 /* Base Badge */
 .vd-badge {
   display: inline-block;
-  padding: var(--badge-padding-y) var(--badge-padding-x);
-  font-size: var(--badge-font-size);
-  font-weight: var(--badge-font-weight);
-  line-height: var(--badge-line-height);
-  color: var(--color-white);
+  padding: var(--vd-badge-padding-y) var(--vd-badge-padding-x);
+  font-size: var(--vd-badge-font-size);
+  font-weight: var(--vd-badge-font-weight);
+  line-height: var(--vd-badge-line-height);
+  color: var(--vd-color-white);
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
-  border-radius: var(--badge-border-radius);
-  background-color: var(--color-secondary);
+  border-radius: var(--vd-badge-border-radius);
+  background-color: var(--vd-color-secondary);
 }
 
 /* Badge Variants */
 .vd-badge-primary {
-  background-color: var(--color-primary);
-  color: var(--color-white);
+  background-color: var(--vd-color-primary);
+  color: var(--vd-color-white);
 }
 
 .vd-badge-secondary {
-  background-color: var(--color-secondary);
-  color: var(--color-white);
+  background-color: var(--vd-color-secondary);
+  color: var(--vd-color-white);
 }
 
 .vd-badge-success {
-  background-color: var(--color-success);
-  color: var(--color-white);
+  background-color: var(--vd-color-success);
+  color: var(--vd-color-white);
 }
 
 .vd-badge-warning {
-  background-color: var(--color-warning);
-  color: var(--color-gray-900);
+  background-color: var(--vd-color-warning);
+  color: var(--vd-color-gray-900);
 }
 
 .vd-badge-error {
-  background-color: var(--color-error);
-  color: var(--color-white);
+  background-color: var(--vd-color-error);
+  color: var(--vd-color-white);
 }
 
 .vd-badge-info {
-  background-color: var(--color-info);
-  color: var(--color-white);
+  background-color: var(--vd-color-info);
+  color: var(--vd-color-white);
 }
 
 .vd-badge-light {
-  background-color: var(--color-gray-100);
-  color: var(--color-gray-900);
+  background-color: var(--vd-color-gray-100);
+  color: var(--vd-color-gray-900);
 }
 
 .vd-badge-dark {
-  background-color: var(--color-gray-800);
-  color: var(--color-white);
+  background-color: var(--vd-color-gray-800);
+  color: var(--vd-color-white);
 }
 
 /* Badge Sizes */
 .vd-badge-sm {
-  padding: var(--badge-padding-y-sm) var(--badge-padding-x-sm);
-  font-size: var(--badge-font-size-sm);
+  padding: var(--vd-badge-padding-y-sm) var(--vd-badge-padding-x-sm);
+  font-size: var(--vd-badge-font-size-sm);
 }
 
 .vd-badge-lg {
-  padding: var(--badge-padding-y-lg) var(--badge-padding-x-lg);
-  font-size: var(--badge-font-size-lg);
+  padding: var(--vd-badge-padding-y-lg) var(--vd-badge-padding-x-lg);
+  font-size: var(--vd-badge-font-size-lg);
 }
 
 /* Badge Styles */
 .vd-badge-pill {
-  padding-right: var(--badge-padding-x);
-  padding-left: var(--badge-padding-x);
-  border-radius: var(--badge-pill-border-radius);
+  padding-right: var(--vd-badge-padding-x);
+  padding-left: var(--vd-badge-padding-x);
+  border-radius: var(--vd-badge-pill-border-radius);
 }
 
 .vd-badge-outlined {
@@ -138,43 +138,43 @@
 }
 
 .vd-badge-outlined.vd-badge-primary {
-  color: var(--color-primary);
-  border-color: var(--color-primary);
+  color: var(--vd-color-primary);
+  border-color: var(--vd-color-primary);
 }
 
 .vd-badge-outlined.vd-badge-secondary {
-  color: var(--color-secondary);
-  border-color: var(--color-secondary);
+  color: var(--vd-color-secondary);
+  border-color: var(--vd-color-secondary);
 }
 
 .vd-badge-outlined.vd-badge-success {
-  color: var(--color-success);
-  border-color: var(--color-success);
+  color: var(--vd-color-success);
+  border-color: var(--vd-color-success);
 }
 
 .vd-badge-outlined.vd-badge-warning {
-  color: var(--color-warning);
-  border-color: var(--color-warning);
+  color: var(--vd-color-warning);
+  border-color: var(--vd-color-warning);
 }
 
 .vd-badge-outlined.vd-badge-error {
-  color: var(--color-error);
-  border-color: var(--color-error);
+  color: var(--vd-color-error);
+  border-color: var(--vd-color-error);
 }
 
 .vd-badge-outlined.vd-badge-info {
-  color: var(--color-info);
-  border-color: var(--color-info);
+  color: var(--vd-color-info);
+  border-color: var(--vd-color-info);
 }
 
 .vd-badge-outlined.vd-badge-light {
-  color: var(--color-gray-600);
-  border-color: var(--color-gray-300);
+  color: var(--vd-color-gray-600);
+  border-color: var(--vd-color-gray-300);
 }
 
 .vd-badge-outlined.vd-badge-dark {
-  color: var(--color-gray-800);
-  border-color: var(--color-gray-800);
+  color: var(--vd-color-gray-800);
+  border-color: var(--vd-color-gray-800);
 }
 
 /* Badge Positioning (for use with buttons, avatars, etc.) */

package/css/components/breadcrumbs.css

@@ -5,35 +5,35 @@
 
 :root {
   /* Breadcrumb Spacing (Fibonacci) */
-  --breadcrumb-padding-y: 0.5rem;     /* 8px - fib */
-  --breadcrumb-padding-x: 0;
-  --breadcrumb-margin-bottom: 0.8125rem; /* 13px - fib */
+  --vd-breadcrumb-padding-y: 0.5rem;     /* 8px - fib */
+  --vd-breadcrumb-padding-x: 0;
+  --vd-breadcrumb-margin-bottom: 0.8125rem; /* 13px - fib */
 
   /* Breadcrumb Separator */
-  --breadcrumb-separator: "/";
-  --breadcrumb-separator-color: var(--text-muted);
-  --breadcrumb-separator-padding: 0.5rem; /* 8px - fib */
+  --vd-breadcrumb-separator: "/";
+  --vd-breadcrumb-separator-color: var(--vd-text-muted);
+  --vd-breadcrumb-separator-padding: 0.5rem; /* 8px - fib */
   
   /* Breadcrumb Colors */
-  --breadcrumb-bg: transparent;
-  --breadcrumb-link-color: var(--color-primary);
-  --breadcrumb-link-hover-color: var(--color-primary-dark);
-  --breadcrumb-active-color: var(--text-secondary);
+  --vd-breadcrumb-bg: transparent;
+  --vd-breadcrumb-link-color: var(--vd-color-primary);
+  --vd-breadcrumb-link-hover-color: var(--vd-color-primary-dark);
+  --vd-breadcrumb-active-color: var(--vd-text-secondary);
 }
 
 /* Dark Theme Overrides - breadcrumbs use CSS variables that already adapt */
-/* No additional overrides needed as --text-secondary and --color-primary update in dark mode */
+/* No additional overrides needed as --vd-text-secondary and --vd-color-primary update in dark mode */
 
 /* Base Breadcrumbs */
 .vd-breadcrumbs,
 .vd-breadcrumb {
   display: flex;
   flex-wrap: wrap;
-  padding: var(--breadcrumb-padding-y) var(--breadcrumb-padding-x);
-  margin-bottom: var(--breadcrumb-margin-bottom);
+  padding: var(--vd-breadcrumb-padding-y) var(--vd-breadcrumb-padding-x);
+  margin-bottom: var(--vd-breadcrumb-margin-bottom);
   list-style: none;
-  background-color: var(--breadcrumb-bg);
-  border-radius: var(--btn-border-radius);
+  background-color: var(--vd-breadcrumb-bg);
+  border-radius: var(--vd-btn-border-radius);
 }
 
 /* Breadcrumb Item */
@@ -43,34 +43,34 @@
 }
 
 .vd-breadcrumb-item + .vd-breadcrumb-item {
-  padding-left: var(--breadcrumb-separator-padding);
+  padding-left: var(--vd-breadcrumb-separator-padding);
 }
 
 .vd-breadcrumb-item + .vd-breadcrumb-item::before {
-  content: var(--breadcrumb-separator);
+  content: var(--vd-breadcrumb-separator);
   display: inline-block;
-  padding-right: var(--breadcrumb-separator-padding);
-  color: var(--breadcrumb-separator-color);
-  font-weight: var(--font-weight-normal);
+  padding-right: var(--vd-breadcrumb-separator-padding);
+  color: var(--vd-breadcrumb-separator-color);
+  font-weight: var(--vd-font-weight-normal);
 }
 
 /* Breadcrumb Link */
 .vd-breadcrumb-link,
 .vd-breadcrumb-item > a {
-  color: var(--breadcrumb-link-color);
+  color: var(--vd-breadcrumb-link-color);
   text-decoration: none;
   transition: color 0.2s ease;
 }
 
 .vd-breadcrumb-link:hover,
 .vd-breadcrumb-item > a:hover {
-  color: var(--breadcrumb-link-hover-color);
+  color: var(--vd-breadcrumb-link-hover-color);
   text-decoration: underline;
 }
 
 .vd-breadcrumb-link:focus,
 .vd-breadcrumb-item > a:focus {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--vd-color-primary);
   outline-offset: 2px;
   border-radius: 0.25rem;
 }
@@ -78,12 +78,12 @@
 /* Active/Current Breadcrumb Item */
 .vd-breadcrumb-item.active,
 .vd-breadcrumb-current {
-  color: var(--breadcrumb-active-color);
+  color: var(--vd-breadcrumb-active-color);
 }
 
 .vd-breadcrumb-item.active > a,
 .vd-breadcrumb-current > a {
-  color: var(--breadcrumb-active-color);
+  color: var(--vd-breadcrumb-active-color);
   pointer-events: none;
   cursor: default;
 }
@@ -123,24 +123,24 @@
 
 /* Breadcrumb Sizes */
 .vd-breadcrumb-sm {
-  font-size: var(--font-size-sm);
-  padding: calc(var(--breadcrumb-padding-y) * 0.75) var(--breadcrumb-padding-x);
+  font-size: var(--vd-font-size-sm);
+  padding: calc(var(--vd-breadcrumb-padding-y) * 0.75) var(--vd-breadcrumb-padding-x);
 }
 
 .vd-breadcrumb-lg {
-  font-size: var(--font-size-lg);
-  padding: calc(var(--breadcrumb-padding-y) * 1.25) var(--breadcrumb-padding-x);
+  font-size: var(--vd-font-size-lg);
+  padding: calc(var(--vd-breadcrumb-padding-y) * 1.25) var(--vd-breadcrumb-padding-x);
 }
 
 /* Responsive Behavior */
 @media (max-width: 575.98px) {
   .vd-breadcrumb-item {
-    font-size: var(--font-size-sm);
+    font-size: var(--vd-font-size-sm);
   }
   
   .vd-breadcrumb-item + .vd-breadcrumb-item::before {
-    padding-right: calc(var(--breadcrumb-separator-padding) * 0.75);
-    padding-left: calc(var(--breadcrumb-separator-padding) * 0.75);
+    padding-right: calc(var(--vd-breadcrumb-separator-padding) * 0.75);
+    padding-left: calc(var(--vd-breadcrumb-separator-padding) * 0.75);
   }
 }