@vanduo-oss/framework 1.3.9 → 1.4.0

package/css/core/tokens.css

@@ -11,49 +11,94 @@
    * ============================================ */
 
   /* Primary Colors */
-  --vd-color-primary: #0d6efd;
-  --vd-color-primary-rgb: 13, 110, 253;
-  --vd-color-primary-hover: #0b5ed7;
-  --vd-color-primary-active: #0a58ca;
-  --vd-color-primary-alpha-10: rgba(13, 110, 253, 0.1);
-  --vd-color-primary-alpha-20: rgba(13, 110, 253, 0.2);
-  --vd-color-primary-alpha-50: rgba(13, 110, 253, 0.5);
+  --vd-color-primary: var(--primary-5);
+  --vd-color-primary-light: var(--primary-3);
+  --vd-color-primary-dark: var(--primary-7);
+  --vd-color-primary-hover: var(--primary-6);
+  --vd-color-primary-active: var(--primary-7);
+  --vd-color-primary-rgb: 92, 124, 250;
+  --vd-color-primary-alpha-5: rgba(92, 124, 250, 0.05);
+  --vd-color-primary-alpha-08: rgba(92, 124, 250, 0.08);
+  --vd-color-primary-alpha-10: rgba(92, 124, 250, 0.1);
+  --vd-color-primary-alpha-15: rgba(92, 124, 250, 0.15);
+  --vd-color-primary-alpha-20: rgba(92, 124, 250, 0.2);
+  --vd-color-primary-alpha-30: rgba(92, 124, 250, 0.3);
+  --vd-color-primary-alpha-40: rgba(92, 124, 250, 0.4);
+  --vd-color-primary-alpha-50: rgba(92, 124, 250, 0.5);
 
   /* Secondary Colors */
-  --vd-color-secondary: #6c757d;
-  --vd-color-secondary-hover: #5c636a;
-  --vd-color-secondary-active: #565e64;
+  --vd-color-secondary: var(--secondary-5);
+  --vd-color-secondary-light: var(--secondary-3);
+  --vd-color-secondary-dark: var(--secondary-7);
+  --vd-color-secondary-hover: var(--secondary-6);
+  --vd-color-secondary-active: var(--secondary-7);
+  --vd-color-secondary-alpha-10: rgba(32, 201, 151, 0.1);
+  --vd-color-secondary-alpha-20: rgba(32, 201, 151, 0.2);
+
+  /* Accent */
+  --vd-color-accent: var(--vd-color-primary);
+  --vd-color-accent-light: var(--vd-color-primary-light);
+  --vd-color-accent-dark: var(--vd-color-primary-dark);
 
   /* Semantic Colors */
-  --vd-color-success: #198754;
-  --vd-color-success-rgb: 25, 135, 84;
-  --vd-color-success-alpha-10: rgba(25, 135, 84, 0.1);
-
-  --vd-color-warning: #ffc107;
-  --vd-color-warning-rgb: 255, 193, 7;
-  --vd-color-warning-alpha-10: rgba(255, 193, 7, 0.1);
-  --vd-color-warning-alpha-30: rgba(255, 193, 7, 0.3);
-
-  --vd-color-error: #dc3545;
-  --vd-color-error-rgb: 220, 53, 69;
-  --vd-color-error-alpha-10: rgba(220, 53, 69, 0.1);
-
-  --vd-color-info: #0dcaf0;
-  --vd-color-info-rgb: 13, 202, 240;
-  --vd-color-info-alpha-10: rgba(13, 202, 240, 0.1);
+  --vd-color-success: var(--success-6);
+  --vd-color-success-light: var(--success-4);
+  --vd-color-success-dark: var(--success-7);
+  --vd-color-success-hover: var(--success-7);
+  --vd-color-success-active: var(--success-8);
+  --vd-color-success-rgb: 64, 192, 87;
+  --vd-color-success-alpha-10: rgba(64, 192, 87, 0.1);
+  --vd-color-success-alpha-20: rgba(64, 192, 87, 0.2);
+
+  --vd-color-warning: var(--warning-6);
+  --vd-color-warning-light: var(--warning-4);
+  --vd-color-warning-dark: var(--warning-7);
+  --vd-color-warning-hover: var(--warning-7);
+  --vd-color-warning-active: var(--warning-8);
+  --vd-color-warning-rgb: 250, 176, 5;
+  --vd-color-warning-alpha-10: rgba(250, 176, 5, 0.1);
+  --vd-color-warning-alpha-20: rgba(250, 176, 5, 0.2);
+  --vd-color-warning-alpha-30: rgba(250, 176, 5, 0.3);
+
+  --vd-color-error: var(--danger-6);
+  --vd-color-error-light: var(--danger-4);
+  --vd-color-error-dark: var(--danger-7);
+  --vd-color-error-hover: var(--danger-7);
+  --vd-color-error-active: var(--danger-8);
+  --vd-color-error-rgb: 250, 82, 82;
+  --vd-color-error-alpha-10: rgba(250, 82, 82, 0.1);
+  --vd-color-error-alpha-20: rgba(250, 82, 82, 0.2);
+
+  --vd-color-danger: var(--vd-color-error);
+  --vd-color-danger-light: var(--vd-color-error-light);
+  --vd-color-danger-dark: var(--vd-color-error-dark);
+  --vd-color-danger-hover: var(--vd-color-error-hover);
+  --vd-color-danger-active: var(--vd-color-error-active);
+  --vd-color-danger-alpha-10: var(--vd-color-error-alpha-10);
+  --vd-color-danger-alpha-20: var(--vd-color-error-alpha-20);
+
+  --vd-color-info: var(--info-6);
+  --vd-color-info-light: var(--info-4);
+  --vd-color-info-dark: var(--info-7);
+  --vd-color-info-hover: var(--info-7);
+  --vd-color-info-active: var(--info-8);
+  --vd-color-info-rgb: 34, 139, 230;
+  --vd-color-info-alpha-10: rgba(34, 139, 230, 0.1);
+  --vd-color-info-alpha-20: rgba(34, 139, 230, 0.2);
 
   /* Neutral Colors (Open Color) */
   --vd-color-white: #ffffff;
-  --vd-color-gray-100: #f8f9fa;
-  --vd-color-gray-200: #e9ecef;
-  --vd-color-gray-300: #dee2e6;
-  --vd-color-gray-400: #ced4da;
-  --vd-color-gray-500: #adb5bd;
-  --vd-color-gray-600: #6c757d;
-  --vd-color-gray-700: #495057;
-  --vd-color-gray-800: #343a40;
-  --vd-color-gray-900: #212529;
   --vd-color-black: #000000;
+  --vd-color-gray-50: var(--gray-0);
+  --vd-color-gray-100: var(--gray-2);
+  --vd-color-gray-200: var(--gray-3);
+  --vd-color-gray-300: var(--gray-4);
+  --vd-color-gray-400: var(--gray-5);
+  --vd-color-gray-500: var(--gray-6);
+  --vd-color-gray-600: var(--gray-7);
+  --vd-color-gray-700: var(--gray-8);
+  --vd-color-gray-800: var(--gray-9);
+  --vd-color-gray-900: #1a1d20;
 
   /* ============================================
    * BACKGROUND TOKENS
@@ -61,6 +106,8 @@
   --vd-bg-primary: var(--vd-color-white);
   --vd-bg-secondary: var(--vd-color-gray-100);
   --vd-bg-tertiary: var(--vd-color-gray-200);
+  --vd-bg-dark: var(--vd-color-gray-800);
+  --vd-bg-darker: var(--vd-color-gray-900);
 
   /* ============================================
    * TEXT TOKENS
@@ -68,13 +115,18 @@
   --vd-text-primary: var(--vd-color-gray-900);
   --vd-text-secondary: var(--vd-color-gray-600);
   --vd-text-muted: var(--vd-color-gray-500);
+  --vd-text-light: var(--vd-color-gray-400);
+  --vd-text-tertiary: var(--vd-text-secondary);
+  --vd-text-disabled: var(--vd-text-muted);
   --vd-text-on-primary: var(--vd-color-white);
+  --vd-text-inverse: var(--vd-color-white);
 
   /* ============================================
    * BORDER TOKENS
    * ============================================ */
   --vd-border-color: var(--vd-color-gray-300);
   --vd-border-color-light: var(--vd-color-gray-200);
+  --vd-border-color-dark: var(--vd-color-gray-400);
   --vd-border-width: 1px;
   --vd-border-radius-sm: 0.25rem;
   --vd-border-radius-md: 0.5rem;
@@ -206,13 +258,26 @@
   --vd-bg-primary: var(--vd-color-gray-900);
   --vd-bg-secondary: var(--vd-color-gray-800);
   --vd-bg-tertiary: var(--vd-color-gray-700);
+  --vd-bg-dark: var(--vd-color-black);
+  --vd-bg-darker: #000000;
 
   --vd-text-primary: var(--vd-color-gray-100);
   --vd-text-secondary: var(--vd-color-gray-400);
   --vd-text-muted: var(--vd-color-gray-500);
+  --vd-text-light: var(--vd-color-gray-600);
+  --vd-text-inverse: var(--vd-color-gray-900);
 
   --vd-border-color: var(--vd-color-gray-700);
   --vd-border-color-light: var(--vd-color-gray-800);
+  --vd-border-color-dark: var(--vd-color-gray-600);
+
+  --vd-color-primary: var(--primary-4);
+  --vd-color-primary-light: var(--primary-3);
+  --vd-color-primary-dark: var(--primary-5);
+  --vd-color-primary-hover: var(--primary-5);
+  --vd-color-primary-active: var(--primary-6);
+  --vd-color-primary-alpha-10: rgba(116, 143, 252, 0.15);
+  --vd-color-primary-alpha-20: rgba(116, 143, 252, 0.25);
 
   --vd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
   --vd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
@@ -230,13 +295,26 @@
     --vd-bg-primary: var(--vd-color-gray-900);
     --vd-bg-secondary: var(--vd-color-gray-800);
     --vd-bg-tertiary: var(--vd-color-gray-700);
+    --vd-bg-dark: var(--vd-color-black);
+    --vd-bg-darker: #000000;
 
     --vd-text-primary: var(--vd-color-gray-100);
     --vd-text-secondary: var(--vd-color-gray-400);
     --vd-text-muted: var(--vd-color-gray-500);
+    --vd-text-light: var(--vd-color-gray-600);
+    --vd-text-inverse: var(--vd-color-gray-900);
 
     --vd-border-color: var(--vd-color-gray-700);
     --vd-border-color-light: var(--vd-color-gray-800);
+    --vd-border-color-dark: var(--vd-color-gray-600);
+
+    --vd-color-primary: var(--primary-4);
+    --vd-color-primary-light: var(--primary-3);
+    --vd-color-primary-dark: var(--primary-5);
+    --vd-color-primary-hover: var(--primary-5);
+    --vd-color-primary-active: var(--primary-6);
+    --vd-color-primary-alpha-10: rgba(116, 143, 252, 0.15);
+    --vd-color-primary-alpha-20: rgba(116, 143, 252, 0.25);
 
     --vd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
     --vd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);

package/css/core/typography.css

@@ -3,6 +3,7 @@
  * Font system, headings, and text utilities
  */
 
+/* stylelint-disable-next-line no-duplicate-selectors -- token families stay grouped by concern. */
 :root {
   /* Font Families */
   --font-family-sans: 'Ubuntu', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -56,6 +57,7 @@
   --font-family-sans: 'Titillium Web', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
+/* stylelint-disable-next-line no-duplicate-selectors -- type scale tokens stay grouped separately from font-family tokens. */
 :root {
 
   /* Golden Ratio Type Scale (Fluid)
@@ -119,8 +121,8 @@ body {
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-normal);
   line-height: var(--line-height-normal);
-  color: var(--text-primary);
-  background-color: var(--bg-primary);
+  color: var(--vd-text-primary);
+  background-color: var(--vd-bg-primary);
 }
 
 /* Headings */
@@ -134,7 +136,7 @@ h6 {
   margin-bottom: 0.5em;
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-tight);
-  color: var(--text-primary);
+  color: var(--vd-text-primary);
 }
 
 h1 {
@@ -169,18 +171,18 @@ p {
 
 /* Links */
 a {
-  color: var(--color-primary);
+  color: var(--vd-color-primary);
   text-decoration: none;
   transition: color 0.2s ease;
 }
 
 a:hover {
-  color: var(--color-primary-dark);
+  color: var(--vd-color-primary-dark);
   text-decoration: underline;
 }
 
 a:focus-visible {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--vd-color-primary);
   outline-offset: 2px;
 }
 
@@ -217,9 +219,9 @@ blockquote {
   margin: 1em 0;
   padding-left: 0.8125rem;
   /* 13px - fib */
-  border-left: 3px solid var(--color-primary);
+  border-left: 3px solid var(--vd-color-primary);
   /* fib(3) */
-  color: var(--text-secondary);
+  color: var(--vd-text-secondary);
   font-style: italic;
 }
 
@@ -227,17 +229,17 @@ blockquote {
 code {
   font-family: var(--font-family-mono);
   font-size: 0.875em;
-  background-color: var(--bg-secondary);
+  background-color: var(--vd-bg-secondary);
   padding: 0.125em 0.1875em;
   /* 2px 3px - fib pair */
   border-radius: var(--radius-fib-3);
-  color: var(--color-primary-dark);
+  color: var(--vd-color-primary-dark);
 }
 
 pre {
   font-family: var(--font-family-mono);
   font-size: 0.875em;
-  background-color: var(--bg-secondary);
+  background-color: var(--vd-bg-secondary);
   padding: 0.8125rem;
   /* 13px - fib */
   border-radius: var(--radius-fib-5);
@@ -414,4 +416,4 @@ pre code {
 
 .tracking-widest {
   letter-spacing: var(--letter-spacing-widest);
-}
+}

package/css/core/vd-aliases.css

@@ -1,60 +1,108 @@
 /**
- * Vanduo Framework - Legacy vd-* Token Aliases
- * Maps vd-* custom properties to the current token names.
+ * Vanduo Framework - Semantic Compatibility Aliases
+ * Maps legacy unprefixed semantic tokens to the canonical `--vd-*` API.
  */
 
 :root {
   /* Colors */
-  --vd-color-primary: var(--color-primary);
-  --vd-color-secondary: var(--color-secondary);
-  --vd-color-success: var(--color-success);
-  --vd-color-warning: var(--color-warning);
-  --vd-color-error: var(--color-error);
-  --vd-color-info: var(--color-info);
-  --vd-color-white: var(--color-white);
-  --vd-color-black: var(--color-black);
-  --vd-color-primary-alpha-10: var(--color-primary-alpha-10);
-  --vd-color-primary-alpha-20: var(--color-primary-alpha-20);
-
-  /* Backgrounds + Text */
-  --vd-bg-primary: var(--bg-primary);
-  --vd-bg-secondary: var(--bg-secondary);
-  --vd-bg-tertiary: var(--bg-tertiary);
-  --vd-text-primary: var(--text-primary);
-  --vd-text-secondary: var(--text-secondary);
-  --vd-text-muted: var(--text-muted);
+  --color-primary: var(--vd-color-primary);
+  --color-primary-light: var(--vd-color-primary-light);
+  --color-primary-dark: var(--vd-color-primary-dark);
+  --color-primary-hover: var(--vd-color-primary-hover);
+  --color-primary-active: var(--vd-color-primary-active);
+  --color-primary-rgb: var(--vd-color-primary-rgb);
+  --color-primary-alpha-5: var(--vd-color-primary-alpha-5);
+  --color-primary-alpha-08: var(--vd-color-primary-alpha-08);
+  --color-primary-alpha-10: var(--vd-color-primary-alpha-10);
+  --color-primary-alpha-15: var(--vd-color-primary-alpha-15);
+  --color-primary-alpha-20: var(--vd-color-primary-alpha-20);
+  --color-primary-alpha-30: var(--vd-color-primary-alpha-30);
+  --color-primary-alpha-40: var(--vd-color-primary-alpha-40);
+  --color-primary-alpha-50: var(--vd-color-primary-alpha-50);
+
+  --color-secondary: var(--vd-color-secondary);
+  --color-secondary-light: var(--vd-color-secondary-light);
+  --color-secondary-dark: var(--vd-color-secondary-dark);
+  --color-secondary-hover: var(--vd-color-secondary-hover);
+  --color-secondary-active: var(--vd-color-secondary-active);
+  --color-secondary-alpha-10: var(--vd-color-secondary-alpha-10);
+  --color-secondary-alpha-20: var(--vd-color-secondary-alpha-20);
+
+  --color-accent: var(--vd-color-accent);
+  --color-accent-light: var(--vd-color-accent-light);
+  --color-accent-dark: var(--vd-color-accent-dark);
+
+  --color-success: var(--vd-color-success);
+  --color-success-light: var(--vd-color-success-light);
+  --color-success-dark: var(--vd-color-success-dark);
+  --color-success-hover: var(--vd-color-success-hover);
+  --color-success-active: var(--vd-color-success-active);
+  --color-success-alpha-10: var(--vd-color-success-alpha-10);
+  --color-success-alpha-20: var(--vd-color-success-alpha-20);
+
+  --color-warning: var(--vd-color-warning);
+  --color-warning-light: var(--vd-color-warning-light);
+  --color-warning-dark: var(--vd-color-warning-dark);
+  --color-warning-hover: var(--vd-color-warning-hover);
+  --color-warning-active: var(--vd-color-warning-active);
+  --color-warning-alpha-10: var(--vd-color-warning-alpha-10);
+  --color-warning-alpha-20: var(--vd-color-warning-alpha-20);
+  --color-warning-alpha-30: var(--vd-color-warning-alpha-30);
+
+  --color-error: var(--vd-color-error);
+  --color-error-light: var(--vd-color-error-light);
+  --color-error-dark: var(--vd-color-error-dark);
+  --color-error-hover: var(--vd-color-error-hover);
+  --color-error-active: var(--vd-color-error-active);
+  --color-error-alpha-10: var(--vd-color-error-alpha-10);
+  --color-error-alpha-20: var(--vd-color-error-alpha-20);
+
+  --color-danger: var(--vd-color-danger);
+  --color-danger-light: var(--vd-color-danger-light);
+  --color-danger-dark: var(--vd-color-danger-dark);
+  --color-danger-hover: var(--vd-color-danger-hover);
+  --color-danger-active: var(--vd-color-danger-active);
+
+  --color-info: var(--vd-color-info);
+  --color-info-light: var(--vd-color-info-light);
+  --color-info-dark: var(--vd-color-info-dark);
+  --color-info-hover: var(--vd-color-info-hover);
+  --color-info-active: var(--vd-color-info-active);
+  --color-info-alpha-10: var(--vd-color-info-alpha-10);
+  --color-info-alpha-20: var(--vd-color-info-alpha-20);
+
+  --color-white: var(--vd-color-white);
+  --color-black: var(--vd-color-black);
+  --color-gray-50: var(--vd-color-gray-50);
+  --color-gray-100: var(--vd-color-gray-100);
+  --color-gray-200: var(--vd-color-gray-200);
+  --color-gray-300: var(--vd-color-gray-300);
+  --color-gray-400: var(--vd-color-gray-400);
+  --color-gray-500: var(--vd-color-gray-500);
+  --color-gray-600: var(--vd-color-gray-600);
+  --color-gray-700: var(--vd-color-gray-700);
+  --color-gray-800: var(--vd-color-gray-800);
+  --color-gray-900: var(--vd-color-gray-900);
+
+  /* Backgrounds */
+  --bg-primary: var(--vd-bg-primary);
+  --bg-secondary: var(--vd-bg-secondary);
+  --bg-tertiary: var(--vd-bg-tertiary);
+  --bg-dark: var(--vd-bg-dark);
+  --bg-darker: var(--vd-bg-darker);
+
+  /* Text */
+  --text-primary: var(--vd-text-primary);
+  --text-secondary: var(--vd-text-secondary);
+  --text-tertiary: var(--vd-text-tertiary);
+  --text-muted: var(--vd-text-muted);
+  --text-light: var(--vd-text-light);
+  --text-disabled: var(--vd-text-disabled);
+  --text-on-primary: var(--vd-text-on-primary);
+  --text-inverse: var(--vd-text-inverse);
 
   /* Borders */
-  --vd-border-color: var(--border-color);
-  --vd-border-color-light: var(--border-color-light);
-
-  /* Shadows */
-  --vd-shadow-sm: var(--shadow-sm);
-  --vd-shadow-md: var(--shadow-md);
-  --vd-shadow-lg: var(--shadow-lg);
-
-  /* Glass */
-  --vd-glass-blur: var(--glass-blur, 12px);
-  --vd-glass-saturate: var(--glass-saturate, 1.8);
-  --vd-glass-bg-opacity: var(--glass-bg-opacity, 0.65);
-  --vd-glass-bg-light: var(--glass-bg-light, rgba(255, 255, 255, var(--vd-glass-bg-opacity)));
-  --vd-glass-bg-dark: var(--glass-bg-dark, rgba(30, 30, 30, var(--vd-glass-bg-opacity)));
-  --vd-glass-border-alpha: var(--glass-border-alpha, 0.18);
-  --vd-glass-border-light: var(--glass-border-light, rgba(255, 255, 255, var(--vd-glass-border-alpha)));
-  --vd-glass-border-dark: var(--glass-border-dark, rgba(255, 255, 255, 0.08));
-  --vd-glass-highlight-alpha: var(--glass-highlight-alpha, 0.25);
-  --vd-glass-shadow: var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
-  --vd-glass-noise-opacity: var(--glass-noise-opacity, 0.03);
-
-  /* Typography */
-  --vd-font-family-base: var(--font-family-sans);
-  --vd-font-family-mono: var(--font-family-mono);
-  --vd-font-size-xs: var(--font-size-xs);
-  --vd-font-size-sm: var(--font-size-sm);
-  --vd-font-size-base: var(--font-size-base);
-
-  /* Radii */
-  --vd-btn-border-radius: var(--btn-border-radius);
-  --vd-btn-border-radius-sm: var(--btn-border-radius-sm);
-  --vd-btn-border-radius-lg: var(--btn-border-radius-lg);
+  --border-color: var(--vd-border-color);
+  --border-color-light: var(--vd-border-color-light);
+  --border-color-dark: var(--vd-border-color-dark);
 }

package/css/effects/morph.css

@@ -15,7 +15,7 @@
   --morph-duration: 0.75s;
   --morph-easing: cubic-bezier(0.2, 0.8, 0.35, 1);
   --morph-blur-peak: 11px;
-  --morph-wave-color: var(--color-primary, #3b82f6);
+  --morph-wave-color: var(--vd-color-primary, #3b82f6);
 }
 
 /* ========== Base ========== */
@@ -79,7 +79,7 @@
     width: 0;
     height: 0;
     opacity: 0;
-    filter: blur(0px) saturate(2);
+    filter: blur(0) saturate(2);
   }
   6% {
     opacity: 1;
@@ -108,7 +108,7 @@
     width: 0;
     height: 0;
     opacity: 0;
-    filter: blur(0px);
+    filter: blur(0);
   }
   10% {
     opacity: 0.7;
@@ -187,7 +187,7 @@
 .vd-morph-current {
   opacity: 1;
   transform: scale(1) translateY(0);
-  filter: blur(0px);
+  filter: blur(0);
   z-index: 2;
   transition:
     opacity 0.28s cubic-bezier(0.4, 0, 0.6, 1),
@@ -217,7 +217,7 @@
 .vd-morph.is-morphing .vd-morph-next {
   opacity: 1;
   transform: scale(1) translateY(0);
-  filter: blur(0px);
+  filter: blur(0);
   transition-duration: 0.3s;
   transition-delay: 0.25s;
 }

package/css/utilities/media.css

@@ -132,8 +132,8 @@
 
 .img-thumbnail {
   padding: 0.1875rem; /* 3px - fib */
-  background-color: var(--color-white);
-  border: 1px solid var(--border-color);
+  background-color: var(--vd-color-white);
+  border: 1px solid var(--vd-border-color);
   border-radius: var(--radius-fib-5);
   max-width: 100%;
   height: auto;