@vanduo-oss/framework 1.3.9 → 1.4.1

package/css/components/timeline.css

@@ -5,32 +5,32 @@
 
 :root {
   /* Timeline Colors */
-  --timeline-line-color: var(--border-color, #dee2e6);
-  --timeline-marker-bg: var(--color-primary, #0d6efd);
-  --timeline-marker-color: #fff;
-  --timeline-content-bg: var(--card-bg, #fff);
-  --timeline-content-border: var(--border-color, #dee2e6);
+  --vd-timeline-line-color: var(--vd-border-color, #dee2e6);
+  --vd-timeline-marker-bg: var(--vd-color-primary, #0d6efd);
+  --vd-timeline-marker-color: #fff;
+  --vd-timeline-content-bg: var(--vd-card-bg, #fff);
+  --vd-timeline-content-border: var(--vd-border-color, #dee2e6);
 
   /* Timeline Dimensions (Fibonacci) */
-  --timeline-line-width: 2px;
-  --timeline-marker-size: 0.8125rem; /* 13px - fib */
-  --timeline-marker-size-lg: 2.125rem; /* 34px ~ fib */
-  --timeline-spacing: 1.3125rem;  /* 21px - fib */
-  --timeline-content-padding: 0.8125rem; /* 13px - fib */
-  --timeline-border-radius: var(--border-radius, 0.5rem);
+  --vd-timeline-line-width: 2px;
+  --vd-timeline-marker-size: 0.8125rem; /* 13px - fib */
+  --vd-timeline-marker-size-lg: 2.125rem; /* 34px ~ fib */
+  --vd-timeline-spacing: 1.3125rem;  /* 21px - fib */
+  --vd-timeline-content-padding: 0.8125rem; /* 13px - fib */
+  --vd-timeline-border-radius: var(--vd-border-radius, 0.5rem);
 }
 
 [data-theme="dark"] {
-  --timeline-line-color: var(--color-gray-600, #6c757d);
-  --timeline-content-bg: var(--card-bg, #2d2d44);
-  --timeline-content-border: var(--border-color, #3d3d5c);
+  --vd-timeline-line-color: var(--vd-color-gray-600, #6c757d);
+  --vd-timeline-content-bg: var(--vd-card-bg, #2d2d44);
+  --vd-timeline-content-border: var(--vd-border-color, #3d3d5c);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --timeline-line-color: var(--color-gray-600, #6c757d);
-    --timeline-content-bg: var(--card-bg, #2d2d44);
-    --timeline-content-border: var(--border-color, #3d3d5c);
+    --vd-timeline-line-color: var(--vd-color-gray-600, #6c757d);
+    --vd-timeline-content-bg: var(--vd-card-bg, #2d2d44);
+    --vd-timeline-content-border: var(--vd-border-color, #3d3d5c);
   }
 }
 
@@ -38,7 +38,7 @@
 
 .vd-timeline {
   position: relative;
-  padding-left: calc(var(--timeline-marker-size) / 2 + var(--timeline-spacing));
+  padding-left: calc(var(--vd-timeline-marker-size) / 2 + var(--vd-timeline-spacing));
   list-style: none;
   margin: 0;
 }
@@ -49,16 +49,16 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  left: calc(var(--timeline-marker-size) / 2 - var(--timeline-line-width) / 2);
-  width: var(--timeline-line-width);
-  background: var(--timeline-line-color);
+  left: calc(var(--vd-timeline-marker-size) / 2 - var(--vd-timeline-line-width) / 2);
+  width: var(--vd-timeline-line-width);
+  background: var(--vd-timeline-line-color);
 }
 
 /* ========== Item ========== */
 
 .vd-timeline-item {
   position: relative;
-  padding-bottom: var(--timeline-spacing);
+  padding-bottom: var(--vd-timeline-spacing);
 }
 
 .vd-timeline-item:last-child {
@@ -69,35 +69,35 @@
 
 .vd-timeline-marker {
   position: absolute;
-  left: calc(-1 * var(--timeline-spacing) - var(--timeline-marker-size) / 2);
+  left: calc(-1 * var(--vd-timeline-spacing) - var(--vd-timeline-marker-size) / 2);
   top: 0.25rem;
-  width: var(--timeline-marker-size);
-  height: var(--timeline-marker-size);
+  width: var(--vd-timeline-marker-size);
+  height: var(--vd-timeline-marker-size);
   border-radius: 50%;
-  background: var(--timeline-marker-bg);
-  border: 2px solid var(--timeline-content-bg);
-  box-shadow: 0 0 0 2px var(--timeline-marker-bg);
+  background: var(--vd-timeline-marker-bg);
+  border: 2px solid var(--vd-timeline-content-bg);
+  box-shadow: 0 0 0 2px var(--vd-timeline-marker-bg);
 }
 
 /* Large marker with icon/text */
 .vd-timeline-marker-lg {
-  width: var(--timeline-marker-size-lg);
-  height: var(--timeline-marker-size-lg);
-  left: calc(-1 * var(--timeline-spacing) - var(--timeline-marker-size-lg) / 2);
+  width: var(--vd-timeline-marker-size-lg);
+  height: var(--vd-timeline-marker-size-lg);
+  left: calc(-1 * var(--vd-timeline-spacing) - var(--vd-timeline-marker-size-lg) / 2);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--timeline-marker-color);
+  color: var(--vd-timeline-marker-color);
   font-size: 0.875rem;
 }
 
 /* ========== Content ========== */
 
 .vd-timeline-content {
-  background: var(--timeline-content-bg);
-  border: 1px solid var(--timeline-content-border);
-  border-radius: var(--timeline-border-radius);
-  padding: var(--timeline-content-padding);
+  background: var(--vd-timeline-content-bg);
+  border: 1px solid var(--vd-timeline-content-border);
+  border-radius: var(--vd-timeline-border-radius);
+  padding: var(--vd-timeline-content-padding);
 }
 
 .vd-timeline-title {
@@ -108,7 +108,7 @@
 
 .vd-timeline-date {
   font-size: 0.75rem;
-  color: var(--text-muted, #6c757d);
+  color: var(--vd-text-muted, #6c757d);
   margin-bottom: 0.3125rem;
 }
 
@@ -120,18 +120,18 @@
 /* ========== Color Variants ========== */
 
 .vd-timeline-item.vd-timeline-success .vd-timeline-marker {
-  background: var(--color-success, #198754);
-  box-shadow: 0 0 0 2px var(--color-success, #198754);
+  background: var(--vd-color-success, #198754);
+  box-shadow: 0 0 0 2px var(--vd-color-success, #198754);
 }
 
 .vd-timeline-item.vd-timeline-warning .vd-timeline-marker {
-  background: var(--color-warning, #ffc107);
-  box-shadow: 0 0 0 2px var(--color-warning, #ffc107);
+  background: var(--vd-color-warning, #ffc107);
+  box-shadow: 0 0 0 2px var(--vd-color-warning, #ffc107);
 }
 
 .vd-timeline-item.vd-timeline-danger .vd-timeline-marker {
-  background: var(--color-danger, #dc3545);
-  box-shadow: 0 0 0 2px var(--color-danger, #dc3545);
+  background: var(--vd-color-danger, #dc3545);
+  box-shadow: 0 0 0 2px var(--vd-color-danger, #dc3545);
 }
 
 /* ========== Alternating Mode ========== */
@@ -147,7 +147,7 @@
 
 .vd-timeline-alternating .vd-timeline-item {
   width: 50%;
-  padding-right: var(--timeline-spacing);
+  padding-right: var(--vd-timeline-spacing);
   padding-left: 0;
 }
 
@@ -158,28 +158,28 @@
 
 .vd-timeline-alternating .vd-timeline-item:nth-child(odd) .vd-timeline-marker {
   left: auto;
-  right: calc(-1 * var(--timeline-marker-size) / 2 - 1px);
+  right: calc(-1 * var(--vd-timeline-marker-size) / 2 - 1px);
 }
 
 .vd-timeline-alternating .vd-timeline-item:nth-child(even) {
   margin-left: 50%;
-  padding-left: var(--timeline-spacing);
+  padding-left: var(--vd-timeline-spacing);
   padding-right: 0;
 }
 
 .vd-timeline-alternating .vd-timeline-item:nth-child(even) .vd-timeline-marker {
-  left: calc(-1 * var(--timeline-marker-size) / 2 - 1px);
+  left: calc(-1 * var(--vd-timeline-marker-size) / 2 - 1px);
 }
 
 /* ========== Responsive ========== */
 
 @media (max-width: 768px) {
   .vd-timeline-alternating {
-    padding-left: calc(var(--timeline-marker-size) / 2 + var(--timeline-spacing));
+    padding-left: calc(var(--vd-timeline-marker-size) / 2 + var(--vd-timeline-spacing));
   }
 
   .vd-timeline-alternating::before {
-    left: calc(var(--timeline-marker-size) / 2 - var(--timeline-line-width) / 2);
+    left: calc(var(--vd-timeline-marker-size) / 2 - var(--vd-timeline-line-width) / 2);
     transform: none;
   }
 
@@ -195,7 +195,7 @@
 
   .vd-timeline-alternating .vd-timeline-item:nth-child(odd) .vd-timeline-marker,
   .vd-timeline-alternating .vd-timeline-item:nth-child(even) .vd-timeline-marker {
-    left: calc(-1 * var(--timeline-spacing) - var(--timeline-marker-size) / 2);
+    left: calc(-1 * var(--vd-timeline-spacing) - var(--vd-timeline-marker-size) / 2);
     right: auto;
   }
 }

package/css/components/timepicker.css

@@ -4,32 +4,32 @@
  */
 
 :root {
-  --tp-bg: var(--card-bg, #fff);
-  --tp-border-color: var(--border-color, #dee2e6);
-  --tp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.12);
-  --tp-item-hover-bg: var(--bg-secondary, #f8f9fa);
-  --tp-item-selected-bg: var(--color-primary, #0d6efd);
-  --tp-item-selected-color: #fff;
-  --tp-padding: 0.5rem;
-  --tp-item-padding: 0.3125rem 0.8125rem; /* 5px 13px - fib */
-  --tp-max-height: 15rem;
-  --tp-border-radius: var(--border-radius, 0.5rem);
-  --tp-z-index: 1055;
+  --vd-tp-bg: var(--vd-card-bg, #fff);
+  --vd-tp-border-color: var(--vd-border-color, #dee2e6);
+  --vd-tp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.12);
+  --vd-tp-item-hover-bg: var(--vd-bg-secondary, #f8f9fa);
+  --vd-tp-item-selected-bg: var(--vd-color-primary, #0d6efd);
+  --vd-tp-item-selected-color: #fff;
+  --vd-tp-padding: 0.5rem;
+  --vd-tp-item-padding: 0.3125rem 0.8125rem; /* 5px 13px - fib */
+  --vd-tp-max-height: 15rem;
+  --vd-tp-border-radius: var(--vd-border-radius, 0.5rem);
+  --vd-tp-z-index: 1055;
 }
 
 [data-theme="dark"] {
-  --tp-bg: var(--card-bg, #2d2d44);
-  --tp-border-color: var(--border-color, #3d3d5c);
-  --tp-item-hover-bg: var(--bg-primary, #1a1a2e);
-  --tp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
+  --vd-tp-bg: var(--vd-card-bg, #2d2d44);
+  --vd-tp-border-color: var(--vd-border-color, #3d3d5c);
+  --vd-tp-item-hover-bg: var(--vd-bg-primary, #1a1a2e);
+  --vd-tp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --tp-bg: var(--card-bg, #2d2d44);
-    --tp-border-color: var(--border-color, #3d3d5c);
-    --tp-item-hover-bg: var(--bg-primary, #1a1a2e);
-    --tp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
+    --vd-tp-bg: var(--vd-card-bg, #2d2d44);
+    --vd-tp-border-color: var(--vd-border-color, #3d3d5c);
+    --vd-tp-item-hover-bg: var(--vd-bg-primary, #1a1a2e);
+    --vd-tp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
   }
 }
 
@@ -37,12 +37,12 @@
 
 .vd-timepicker-popup {
   position: absolute;
-  z-index: var(--tp-z-index);
-  background: var(--tp-bg);
-  border: 1px solid var(--tp-border-color);
-  border-radius: var(--tp-border-radius);
-  box-shadow: var(--tp-shadow);
-  max-height: var(--tp-max-height);
+  z-index: var(--vd-tp-z-index);
+  background: var(--vd-tp-bg);
+  border: 1px solid var(--vd-tp-border-color);
+  border-radius: var(--vd-tp-border-radius);
+  box-shadow: var(--vd-tp-shadow);
+  max-height: var(--vd-tp-max-height);
   overflow-y: auto;
   display: none;
   min-width: 8rem;
@@ -55,7 +55,7 @@
 /* ========== Time Items ========== */
 
 .vd-timepicker-item {
-  padding: var(--tp-item-padding);
+  padding: var(--vd-tp-item-padding);
   cursor: pointer;
   font-size: 0.875rem;
   text-align: center;
@@ -64,12 +64,12 @@
 }
 
 .vd-timepicker-item:hover {
-  background: var(--tp-item-hover-bg);
+  background: var(--vd-tp-item-hover-bg);
 }
 
 .vd-timepicker-item.is-selected {
-  background: var(--tp-item-selected-bg);
-  color: var(--tp-item-selected-color);
+  background: var(--vd-tp-item-selected-bg);
+  color: var(--vd-tp-item-selected-color);
   font-weight: 600;
 }
 

package/css/components/toast.css

@@ -5,30 +5,30 @@
 
 :root {
   /* Toast Sizing (Fibonacci) */
-  --toast-width: 377px;             /* fib */
-  --toast-max-width: 90vw;
-  --toast-padding-x: 1.3125rem;     /* 21px - fib */
-  --toast-padding-y: 0.8125rem;     /* 13px - fib */
-  --toast-border-radius: var(--radius-fib-5);
-  --toast-gap: 0.8125rem;           /* 13px - fib */
+  --vd-toast-width: 377px;             /* fib */
+  --vd-toast-max-width: 90vw;
+  --vd-toast-padding-x: 1.3125rem;     /* 21px - fib */
+  --vd-toast-padding-y: 0.8125rem;     /* 13px - fib */
+  --vd-toast-border-radius: var(--vd-radius-fib-5);
+  --vd-toast-gap: 0.8125rem;           /* 13px - fib */
 
   /* Toast Colors */
-  --toast-bg: var(--color-white);
-  --toast-text: var(--text-primary);
-  --toast-border: var(--border-color);
-  --toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --vd-toast-bg: var(--vd-color-white);
+  --vd-toast-text: var(--vd-text-primary);
+  --vd-toast-border: var(--vd-border-color);
+  --vd-toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --toast-bg: var(--color-gray-800);
-  --toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --vd-toast-bg: var(--vd-color-gray-800);
+  --vd-toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --toast-bg: var(--color-gray-800);
-    --toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    --vd-toast-bg: var(--vd-color-gray-800);
+    --vd-toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
   }
 }
 
@@ -38,7 +38,7 @@
   z-index: 9999;
   display: flex;
   flex-direction: column;
-  gap: var(--toast-gap);
+  gap: var(--vd-toast-gap);
   pointer-events: none;
   padding: 1rem;
 }
@@ -87,14 +87,14 @@
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
-  width: var(--toast-width);
-  max-width: var(--toast-max-width);
-  padding: var(--toast-padding-y) var(--toast-padding-x);
-  background-color: var(--toast-bg);
-  color: var(--toast-text);
-  border: 1px solid var(--toast-border);
-  border-radius: var(--toast-border-radius);
-  box-shadow: var(--toast-shadow);
+  width: var(--vd-toast-width);
+  max-width: var(--vd-toast-max-width);
+  padding: var(--vd-toast-padding-y) var(--vd-toast-padding-x);
+  background-color: var(--vd-toast-bg);
+  color: var(--vd-toast-text);
+  border: 1px solid var(--vd-toast-border);
+  border-radius: var(--vd-toast-border-radius);
+  box-shadow: var(--vd-toast-shadow);
   pointer-events: auto;
   opacity: 0;
   transform: translateX(100%);
@@ -178,14 +178,14 @@
 
 /* Toast Title */
 .vd-toast-title {
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--vd-font-weight-semibold);
   margin-bottom: 0.25rem;
 }
 
 /* Toast Message */
 .vd-toast-message {
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
+  font-size: var(--vd-font-size-sm);
+  color: var(--vd-text-secondary);
 }
 
 /* Toast Close Button */
@@ -200,8 +200,8 @@
   margin: -0.25rem -0.25rem -0.25rem 0;
   background: transparent;
   border: none;
-  border-radius: var(--btn-border-radius);
-  color: var(--text-tertiary);
+  border-radius: var(--vd-btn-border-radius);
+  color: var(--vd-text-tertiary);
   cursor: pointer;
   opacity: 0.6;
   transition: opacity 0.15s ease, background-color 0.15s ease;
@@ -224,42 +224,42 @@
 
 /* Toast Color Variants */
 .vd-toast-success {
-  border-left: 4px solid var(--color-success);
+  border-left: 4px solid var(--vd-color-success);
 }
 
 .vd-toast-success .vd-toast-icon {
-  color: var(--color-success);
+  color: var(--vd-color-success);
 }
 
 .vd-toast-warning {
-  border-left: 4px solid var(--color-warning);
+  border-left: 4px solid var(--vd-color-warning);
 }
 
 .vd-toast-warning .vd-toast-icon {
-  color: var(--color-warning);
+  color: var(--vd-color-warning);
 }
 
 .vd-toast-error {
-  border-left: 4px solid var(--color-error);
+  border-left: 4px solid var(--vd-color-error);
 }
 
 .vd-toast-error .vd-toast-icon {
-  color: var(--color-error);
+  color: var(--vd-color-error);
 }
 
 .vd-toast-info {
-  border-left: 4px solid var(--color-info);
+  border-left: 4px solid var(--vd-color-info);
 }
 
 .vd-toast-info .vd-toast-icon {
-  color: var(--color-info);
+  color: var(--vd-color-info);
 }
 
 /* Solid Variants */
 .vd-toast-solid.vd-toast-success {
-  background-color: var(--color-success);
-  border-color: var(--color-success);
-  color: var(--color-white);
+  background-color: var(--vd-color-success);
+  border-color: var(--vd-color-success);
+  color: var(--vd-color-white);
 }
 
 .vd-toast-solid.vd-toast-success .vd-toast-message {
@@ -267,13 +267,13 @@
 }
 
 .vd-toast-solid.vd-toast-success .vd-toast-icon {
-  color: var(--color-white);
+  color: var(--vd-color-white);
 }
 
 .vd-toast-solid.vd-toast-warning {
-  background-color: var(--color-warning);
-  border-color: var(--color-warning);
-  color: var(--color-gray-900);
+  background-color: var(--vd-color-warning);
+  border-color: var(--vd-color-warning);
+  color: var(--vd-color-gray-900);
 }
 
 .vd-toast-solid.vd-toast-warning .vd-toast-message {
@@ -281,13 +281,13 @@
 }
 
 .vd-toast-solid.vd-toast-warning .vd-toast-icon {
-  color: var(--color-gray-900);
+  color: var(--vd-color-gray-900);
 }
 
 .vd-toast-solid.vd-toast-error {
-  background-color: var(--color-error);
-  border-color: var(--color-error);
-  color: var(--color-white);
+  background-color: var(--vd-color-error);
+  border-color: var(--vd-color-error);
+  color: var(--vd-color-white);
 }
 
 .vd-toast-solid.vd-toast-error .vd-toast-message {
@@ -295,13 +295,13 @@
 }
 
 .vd-toast-solid.vd-toast-error .vd-toast-icon {
-  color: var(--color-white);
+  color: var(--vd-color-white);
 }
 
 .vd-toast-solid.vd-toast-info {
-  background-color: var(--color-info);
-  border-color: var(--color-info);
-  color: var(--color-white);
+  background-color: var(--vd-color-info);
+  border-color: var(--vd-color-info);
+  color: var(--vd-color-white);
 }
 
 .vd-toast-solid.vd-toast-info .vd-toast-message {
@@ -309,7 +309,7 @@
 }
 
 .vd-toast-solid.vd-toast-info .vd-toast-icon {
-  color: var(--color-white);
+  color: var(--vd-color-white);
 }
 
 /* Toast Progress Bar (auto-dismiss indicator) */
@@ -320,7 +320,7 @@
   height: 3px;
   background-color: currentColor;
   opacity: 0.3;
-  border-radius: 0 0 var(--toast-border-radius) var(--toast-border-radius);
+  border-radius: 0 0 var(--vd-toast-border-radius) var(--vd-toast-border-radius);
   animation: toast-progress linear forwards;
 }