@vanduo-oss/framework 1.3.8 → 1.4.0

package/css/components/toast.css

@@ -13,21 +13,21 @@
   --toast-gap: 0.8125rem;           /* 13px - fib */
 
   /* Toast Colors */
-  --toast-bg: var(--color-white);
-  --toast-text: var(--text-primary);
-  --toast-border: var(--border-color);
+  --toast-bg: var(--vd-color-white);
+  --toast-text: var(--vd-text-primary);
+  --toast-border: var(--vd-border-color);
   --toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --toast-bg: var(--color-gray-800);
+  --toast-bg: var(--vd-color-gray-800);
   --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-bg: var(--vd-color-gray-800);
     --toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
   }
 }
@@ -185,7 +185,7 @@
 /* Toast Message */
 .vd-toast-message {
   font-size: var(--font-size-sm);
-  color: var(--text-secondary);
+  color: var(--vd-text-secondary);
 }
 
 /* Toast Close Button */
@@ -201,7 +201,7 @@
   background: transparent;
   border: none;
   border-radius: var(--btn-border-radius);
-  color: var(--text-tertiary);
+  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) */

package/css/components/tooltips.css

@@ -5,12 +5,12 @@
 
 :root {
   /* Tooltip Colors */
-  --tooltip-bg: var(--color-white);
-  --tooltip-bg-light: var(--color-gray-100);
-  --tooltip-bg-dark: var(--color-gray-900);
-  --tooltip-text-color: var(--color-gray-900);
-  --tooltip-text-color-light: var(--color-gray-800);
-  --tooltip-text-color-dark: var(--color-white);
+  --tooltip-bg: var(--vd-color-white);
+  --tooltip-bg-light: var(--vd-color-gray-100);
+  --tooltip-bg-dark: var(--vd-color-gray-900);
+  --tooltip-text-color: var(--vd-color-gray-900);
+  --tooltip-text-color-light: var(--vd-color-gray-800);
+  --tooltip-text-color-dark: var(--vd-color-white);
   
   /* Tooltip Spacing (Fibonacci pairs: x/y ratio ~ phi) */
   --tooltip-padding-y: 0.5rem;        /* 8px - fib */
@@ -39,14 +39,14 @@
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --tooltip-bg: var(--color-gray-900);
-  --tooltip-text-color: var(--color-white);
+  --tooltip-bg: var(--vd-color-gray-900);
+  --tooltip-text-color: var(--vd-color-white);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --tooltip-bg: var(--color-gray-900);
-    --tooltip-text-color: var(--color-white);
+    --tooltip-bg: var(--vd-color-gray-900);
+    --tooltip-text-color: var(--vd-color-white);
   }
 }
 
@@ -78,7 +78,7 @@
   background: var(--vd-glass-bg-light);
   border: 1px solid var(--vd-glass-border-light);
   box-shadow: var(--vd-glass-shadow);
-  color: var(--text-primary);
+  color: var(--vd-text-primary);
   backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
   -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
 }

package/css/components/transfer.css

@@ -5,10 +5,10 @@
 
 :root {
   --transfer-bg: var(--card-bg, #fff);
-  --transfer-border-color: var(--border-color, #dee2e6);
-  --transfer-item-hover-bg: var(--bg-secondary, #f8f9fa);
-  --transfer-item-selected-bg: var(--color-primary-alpha-10, rgba(13, 110, 253, 0.1));
-  --transfer-header-bg: var(--bg-secondary, #f8f9fa);
+  --transfer-border-color: var(--vd-border-color, #dee2e6);
+  --transfer-item-hover-bg: var(--vd-bg-secondary, #f8f9fa);
+  --transfer-item-selected-bg: var(--vd-color-primary-alpha-10, rgba(13, 110, 253, 0.1));
+  --transfer-header-bg: var(--vd-bg-secondary, #f8f9fa);
   --transfer-padding: 0.5rem;
   --transfer-list-height: 15rem;
   --transfer-border-radius: var(--border-radius, 0.5rem);
@@ -17,17 +17,17 @@
 
 [data-theme="dark"] {
   --transfer-bg: var(--card-bg, #2d2d44);
-  --transfer-border-color: var(--border-color, #3d3d5c);
-  --transfer-item-hover-bg: var(--bg-primary, #1a1a2e);
-  --transfer-header-bg: var(--bg-primary, #1a1a2e);
+  --transfer-border-color: var(--vd-border-color, #3d3d5c);
+  --transfer-item-hover-bg: var(--vd-bg-primary, #1a1a2e);
+  --transfer-header-bg: var(--vd-bg-primary, #1a1a2e);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
     --transfer-bg: var(--card-bg, #2d2d44);
-    --transfer-border-color: var(--border-color, #3d3d5c);
-    --transfer-item-hover-bg: var(--bg-primary, #1a1a2e);
-    --transfer-header-bg: var(--bg-primary, #1a1a2e);
+    --transfer-border-color: var(--vd-border-color, #3d3d5c);
+    --transfer-item-hover-bg: var(--vd-bg-primary, #1a1a2e);
+    --transfer-header-bg: var(--vd-bg-primary, #1a1a2e);
   }
 }
 
@@ -65,7 +65,7 @@
 
 .vd-transfer-count {
   font-weight: 400;
-  color: var(--text-muted, #6c757d);
+  color: var(--vd-text-muted, #6c757d);
 }
 
 /* ========== Search ========== */
@@ -82,7 +82,7 @@
   border-radius: 0.25rem;
   font-size: 0.8125rem;
   background: var(--transfer-bg);
-  color: var(--text-primary, #212529);
+  color: var(--vd-text-primary, #212529);
 }
 
 /* ========== List ========== */

package/css/components/tree.css

@@ -5,23 +5,23 @@
 
 :root {
   --tree-indent: 1.3125rem;     /* 21px - fib */
-  --tree-line-color: var(--border-color, #dee2e6);
+  --tree-line-color: var(--vd-border-color, #dee2e6);
   --tree-line-width: 1px;
   --tree-item-padding: 0.25rem 0.3125rem; /* 4px 5px */
-  --tree-item-hover-bg: var(--bg-secondary, #f8f9fa);
+  --tree-item-hover-bg: var(--vd-bg-secondary, #f8f9fa);
   --tree-icon-size: 1rem;
   --tree-toggle-size: 1.125rem;
 }
 
 [data-theme="dark"] {
-  --tree-line-color: var(--color-gray-600, #6c757d);
-  --tree-item-hover-bg: var(--bg-primary, #1a1a2e);
+  --tree-line-color: var(--vd-color-gray-600, #6c757d);
+  --tree-item-hover-bg: var(--vd-bg-primary, #1a1a2e);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --tree-line-color: var(--color-gray-600, #6c757d);
-    --tree-item-hover-bg: var(--bg-primary, #1a1a2e);
+    --tree-line-color: var(--vd-color-gray-600, #6c757d);
+    --tree-item-hover-bg: var(--vd-bg-primary, #1a1a2e);
   }
 }
 
@@ -71,7 +71,7 @@
   padding: 0;
   cursor: pointer;
   font-size: 0.625rem;
-  color: var(--text-muted, #6c757d);
+  color: var(--vd-text-muted, #6c757d);
   transition: transform 0.2s ease;
   flex-shrink: 0;
 }
@@ -102,7 +102,7 @@
 .vd-tree-icon {
   font-size: var(--tree-icon-size);
   flex-shrink: 0;
-  color: var(--text-muted, #6c757d);
+  color: var(--vd-text-muted, #6c757d);
 }
 
 .vd-tree-node.is-open > .vd-tree-node-content .vd-tree-icon-folder::before {
@@ -129,7 +129,7 @@
 
 .vd-tree-node.is-selected > .vd-tree-node-content .vd-tree-label {
   font-weight: 600;
-  color: var(--color-primary, #0d6efd);
+  color: var(--vd-color-primary, #0d6efd);
 }
 
 /* ========== Children Container ========== */

package/css/components/waypoint.css

@@ -6,19 +6,19 @@
 
 :root {
   /* Waypoint active indicator */
-  --waypoint-active-color: var(--color-primary, #0d6efd);
+  --waypoint-active-color: var(--vd-color-primary, #0d6efd);
   --waypoint-active-bg: transparent;
   --waypoint-active-border-width: 2px;
   --waypoint-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
 }
 
 [data-theme="dark"] {
-  --waypoint-active-color: var(--color-primary-light, #6ea8fe);
+  --waypoint-active-color: var(--vd-color-primary-light, #6ea8fe);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --waypoint-active-color: var(--color-primary-light, #6ea8fe);
+    --waypoint-active-color: var(--vd-color-primary-light, #6ea8fe);
   }
 }
 

package/css/core/colors.css

@@ -312,6 +312,18 @@
   --slate-8: #1e293b;
   --slate-9: #0f172a;
 
+  /* --- Charcoal Scale (Deep cool charcoal) --- */
+  --charcoal-0: #f5f7f8;
+  --charcoal-1: #e7ebee;
+  --charcoal-2: #ced6dc;
+  --charcoal-3: #adb8c1;
+  --charcoal-4: #8b98a3;
+  --charcoal-5: #6d7c88;
+  --charcoal-6: #53616d;
+  --charcoal-7: #394754;
+  --charcoal-8: #202c38;
+  --charcoal-9: #0d1117;
+
   /* --- Zinc Scale (Slightly warm gray) --- */
   --zinc-0: #fafafa;
   --zinc-1: #f4f4f5;
@@ -422,7 +434,7 @@
    * ═══════════════════════════════════════════════════════════════════════ */
 
   /* Background Colors */
-  --bg-primary: var(--color-white);
+  --bg-primary: var(--vd-color-white);
   --bg-secondary: var(--gray-0);
   --bg-tertiary: var(--gray-1);
   --bg-dark: var(--gray-8);
@@ -433,7 +445,7 @@
   --text-secondary: var(--gray-7);
   --text-muted: var(--gray-5);
   --text-light: var(--gray-4);
-  --text-inverse: var(--color-white);
+  --text-inverse: var(--vd-color-white);
 
   /* Border Colors */
   --border-color: var(--gray-3);
@@ -461,57 +473,57 @@
 
 .vd-bg-primary,
 .bg-primary {
-  background-color: var(--color-primary);
+  background-color: var(--vd-color-primary);
 }
 
 .vd-bg-secondary,
 .bg-secondary {
-  background-color: var(--color-secondary);
+  background-color: var(--vd-color-secondary);
 }
 
 .vd-bg-accent,
 .bg-accent {
-  background-color: var(--color-accent);
+  background-color: var(--vd-color-accent);
 }
 
 .vd-bg-success,
 .bg-success {
-  background-color: var(--color-success);
+  background-color: var(--vd-color-success);
 }
 
 .vd-bg-warning,
 .bg-warning {
-  background-color: var(--color-warning);
+  background-color: var(--vd-color-warning);
 }
 
 .vd-bg-error,
 .bg-error {
-  background-color: var(--color-error);
+  background-color: var(--vd-color-error);
 }
 
 .vd-bg-info,
 .bg-info {
-  background-color: var(--color-info);
+  background-color: var(--vd-color-info);
 }
 
 .vd-bg-white,
 .bg-white {
-  background-color: var(--color-white);
+  background-color: var(--vd-color-white);
 }
 
 .vd-bg-black,
 .bg-black {
-  background-color: var(--color-black);
+  background-color: var(--vd-color-black);
 }
 
 .vd-bg-dark,
 .bg-dark {
-  background-color: var(--bg-dark);
+  background-color: var(--vd-bg-dark);
 }
 
 .vd-bg-light,
 .bg-light {
-  background-color: var(--bg-secondary);
+  background-color: var(--vd-bg-secondary);
 }
 
 /* ═════════════════════════════════════════════════════════════════════════
@@ -519,47 +531,47 @@
  * ═════════════════════════════════════════════════════════════════════════ */
 
 .vd-text-primary {
-  color: var(--color-primary);
+  color: var(--vd-color-primary);
 }
 
 .vd-text-secondary {
-  color: var(--text-secondary);
+  color: var(--vd-text-secondary);
 }
 
 .vd-text-success {
-  color: var(--color-success);
+  color: var(--vd-color-success);
 }
 
 .vd-text-warning {
-  color: var(--color-warning);
+  color: var(--vd-color-warning);
 }
 
 .vd-text-error {
-  color: var(--color-error);
+  color: var(--vd-color-error);
 }
 
 .vd-text-info {
-  color: var(--color-info);
+  color: var(--vd-color-info);
 }
 
 .vd-text-white {
-  color: var(--color-white);
+  color: var(--vd-color-white);
 }
 
 .vd-text-black {
-  color: var(--color-black);
+  color: var(--vd-color-black);
 }
 
 .vd-text-muted {
-  color: var(--text-muted);
+  color: var(--vd-text-muted);
 }
 
 .vd-text-light {
-  color: var(--text-light);
+  color: var(--vd-text-light);
 }
 
 .vd-text-inverse {
-  color: var(--text-inverse);
+  color: var(--vd-text-inverse);
 }
 
 /* ═════════════════════════════════════════════════════════════════════════
@@ -568,42 +580,42 @@
 
 .vd-border-primary,
 .border-primary {
-  border-color: var(--color-primary);
+  border-color: var(--vd-color-primary);
 }
 
 .vd-border-secondary,
 .border-secondary {
-  border-color: var(--color-secondary);
+  border-color: var(--vd-color-secondary);
 }
 
 .vd-border-success,
 .border-success {
-  border-color: var(--color-success);
+  border-color: var(--vd-color-success);
 }
 
 .vd-border-warning,
 .border-warning {
-  border-color: var(--color-warning);
+  border-color: var(--vd-color-warning);
 }
 
 .vd-border-error,
 .border-error {
-  border-color: var(--color-error);
+  border-color: var(--vd-color-error);
 }
 
 .vd-border-info,
 .border-info {
-  border-color: var(--color-info);
+  border-color: var(--vd-color-info);
 }
 
 .vd-border-light,
 .border-light {
-  border-color: var(--border-color-light);
+  border-color: var(--vd-border-color-light);
 }
 
 .vd-border-dark,
 .border-dark {
-  border-color: var(--border-color-dark);
+  border-color: var(--vd-border-color-dark);
 }
 
 /* ═════════════════════════════════════════════════════════════════════════
@@ -615,7 +627,7 @@
   --bg-primary: var(--gray-9);
   --bg-secondary: var(--gray-8);
   --bg-tertiary: var(--gray-7);
-  --bg-dark: var(--color-black);
+  --bg-dark: var(--vd-color-black);
   --bg-darker: #000000;
 
   /* Text Colors */
@@ -652,7 +664,7 @@
     --bg-primary: var(--gray-9);
     --bg-secondary: var(--gray-8);
     --bg-tertiary: var(--gray-7);
-    --bg-dark: var(--color-black);
+    --bg-dark: var(--vd-color-black);
     --bg-darker: #000000;
 
     /* Text Colors */
@@ -946,7 +958,21 @@
  * These rules remap --gray-* variables based on [data-neutral] attribute
  * ═════════════════════════════════════════════════════════════════════════ */
 
-/* Gray Neutral (default - no override needed) */
+/* Charcoal Neutral (default) */
+[data-neutral="charcoal"] {
+  --gray-0: var(--charcoal-0);
+  --gray-1: var(--charcoal-1);
+  --gray-2: var(--charcoal-2);
+  --gray-3: var(--charcoal-3);
+  --gray-4: var(--charcoal-4);
+  --gray-5: var(--charcoal-5);
+  --gray-6: var(--charcoal-6);
+  --gray-7: var(--charcoal-7);
+  --gray-8: var(--charcoal-8);
+  --gray-9: var(--charcoal-9);
+}
+
+/* Gray Neutral */
 [data-neutral="gray"] {
   --gray-0: #f8f9fa;
   --gray-1: #f1f3f5;

package/css/core/grid.css

@@ -79,7 +79,7 @@
 /* Container Wide - Full Fibonacci wide (1597px) */
 .vd-container-wide {
   width: 100%;
-  max-width: var(--container-2xl);
+  max-width: var(--container-max-width-wide);
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--container-padding);
@@ -1219,11 +1219,6 @@
  * Fibonacci column ratios: 2:3:5, 3:5:8, 5:8
  * =================================================== */
 
-/* Wide container variant (Fibonacci: 1597px) */
-.vd-container-wide {
-  max-width: var(--container-max-width-wide);
-}
-
 /* Fibonacci-number container widths */
 .vd-container-fib-610 {
   max-width: 610px;

package/css/core/helpers.css

@@ -1379,7 +1379,7 @@
 /* Border Utilities */
 .vd-border,
 .border {
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--vd-border-color);
 }
 
 .vd-border-0,
@@ -1389,22 +1389,22 @@
 
 .vd-border-top,
 .border-top {
-  border-top: 1px solid var(--border-color);
+  border-top: 1px solid var(--vd-border-color);
 }
 
 .vd-border-right,
 .border-right {
-  border-right: 1px solid var(--border-color);
+  border-right: 1px solid var(--vd-border-color);
 }
 
 .vd-border-bottom,
 .border-bottom {
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--vd-border-color);
 }
 
 .vd-border-left,
 .border-left {
-  border-left: 1px solid var(--border-color);
+  border-left: 1px solid var(--vd-border-color);
 }
 
 .vd-border-2,
@@ -1831,8 +1831,8 @@
   z-index: 9999;
   padding: 0.8125rem;
   /* 13px - fib */
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
+  background-color: var(--vd-bg-primary);
+  color: var(--vd-text-primary);
   text-decoration: none;
   font-weight: var(--font-weight-medium);
 }
@@ -1840,7 +1840,7 @@
 .skip-link:focus {
   left: 0;
   top: 0;
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--vd-color-primary);
   outline-offset: 2px;
 }
 
@@ -1871,18 +1871,18 @@
 
 /* Focus Visible Utilities */
 .focus-ring:focus-visible {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--vd-color-primary);
   outline-offset: 2px;
 }
 
 .focus-ring-inset:focus-visible {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--vd-color-primary);
   outline-offset: -2px;
 }
 
 .focus-ring-shadow:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 0, 123, 255), 0.25);
+  box-shadow: 0 0 0 3px rgba(var(--vd-color-primary-rgb, 0, 123, 255), 0.25);
 }
 
 /* Text Alignment Utilities */