@vanduo-oss/framework 1.3.9 → 1.4.1

package/css/core/typography.css

@@ -3,59 +3,61 @@
  * 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;
-  --font-family-serif: Georgia, "Times New Roman", Times, serif;
-  --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
+  --vd-font-family-sans: 'Ubuntu', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --vd-font-family-serif: Georgia, "Times New Roman", Times, serif;
+  --vd-font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
 }
 
 /* Font Switching - Applied via data-font attribute on html element */
 [data-font="inter"] {
-  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 [data-font="source-sans"] {
-  --font-family-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-font-family-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 [data-font="fira-sans"] {
-  --font-family-sans: 'Fira Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-font-family-sans: 'Fira Sans', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 [data-font="ibm-plex"] {
-  --font-family-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-font-family-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 [data-font="jetbrains-mono"] {
-  --font-family-sans: 'JetBrains Mono', monospace;
-  --font-family-mono: 'JetBrains Mono', monospace;
+  --vd-font-family-sans: 'JetBrains Mono', monospace;
+  --vd-font-family-mono: 'JetBrains Mono', monospace;
 }
 
 [data-font="ubuntu"] {
-  --font-family-sans: 'Ubuntu', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-font-family-sans: 'Ubuntu', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 [data-font="lato"] {
-  --font-family-sans: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-font-family-sans: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 [data-font="open-sans"] {
-  --font-family-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-font-family-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 [data-font="zen-dots"] {
-  --font-family-sans: 'Zen Dots', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-font-family-sans: 'Zen Dots', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 [data-font="rubik"] {
-  --font-family-sans: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-font-family-sans: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 [data-font="titillium-web"] {
-  --font-family-sans: 'Titillium Web', -apple-system, BlinkMacSystemFont, sans-serif;
+  --vd-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)
@@ -63,64 +65,64 @@
    * Mobile scale: ~1.414 (Augmented Fourth)
    * Desktop scale: 1.618 (Golden Ratio)
    */
-  --font-size-xs: 0.625rem;
+  --vd-font-size-xs: 0.625rem;
   /* 10px */
-  --font-size-sm: 0.8125rem;
+  --vd-font-size-sm: 0.8125rem;
   /* 13px */
-  --font-size-base: 1rem;
+  --vd-font-size-base: 1rem;
   /* 16px */
-  --font-size-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
+  --vd-font-size-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
   /* 18px -> 20px */
-  --font-size-xl: clamp(1.35rem, 1.25rem + 0.5vw, 1.625rem);
+  --vd-font-size-xl: clamp(1.35rem, 1.25rem + 0.5vw, 1.625rem);
   /* 21.6px -> 26px */
-  --font-size-2xl: clamp(1.62rem, 1.46rem + 0.8vw, 2.0625rem);
+  --vd-font-size-2xl: clamp(1.62rem, 1.46rem + 0.8vw, 2.0625rem);
   /* 26px -> 33px */
-  --font-size-3xl: clamp(1.94rem, 1.69rem + 1.25vw, 2.625rem);
+  --vd-font-size-3xl: clamp(1.94rem, 1.69rem + 1.25vw, 2.625rem);
   /* 31px -> 42px */
-  --font-size-4xl: clamp(2.33rem, 1.97rem + 1.8vw, 3.3125rem);
+  --vd-font-size-4xl: clamp(2.33rem, 1.97rem + 1.8vw, 3.3125rem);
   /* 37px -> 53px */
-  --font-size-5xl: clamp(2.8rem, 2.27rem + 2.65vw, 4.25rem);
+  --vd-font-size-5xl: clamp(2.8rem, 2.27rem + 2.65vw, 4.25rem);
   /* 45px -> 68px */
-  --font-size-6xl: clamp(3.36rem, 2.63rem + 3.65vw, 5.375rem);
+  --vd-font-size-6xl: clamp(3.36rem, 2.63rem + 3.65vw, 5.375rem);
   /* 54px -> 86px */
 
   /* Font Weights */
-  --font-weight-light: 300;
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --font-weight-extrabold: 800;
+  --vd-font-weight-light: 300;
+  --vd-font-weight-normal: 400;
+  --vd-font-weight-medium: 500;
+  --vd-font-weight-semibold: 600;
+  --vd-font-weight-bold: 700;
+  --vd-font-weight-extrabold: 800;
 
   /* Line Heights (phi-derived) */
-  --line-height-none: 1;
-  --line-height-tight: 1.236;
+  --vd-line-height-none: 1;
+  --vd-line-height-tight: 1.236;
   /* ~2/phi - for headings */
-  --line-height-snug: 1.382;
+  --vd-line-height-snug: 1.382;
   /* ~(1+1/phi)/1.17 */
-  --line-height-normal: 1.5;
+  --vd-line-height-normal: 1.5;
   /* body text standard */
-  --line-height-relaxed: 1.618;
+  --vd-line-height-relaxed: 1.618;
   /* phi itself */
-  --line-height-loose: 2;
+  --vd-line-height-loose: 2;
 
   /* Letter Spacing */
-  --letter-spacing-tighter: -0.05em;
-  --letter-spacing-tight: -0.025em;
-  --letter-spacing-normal: 0;
-  --letter-spacing-wide: 0.025em;
-  --letter-spacing-wider: 0.05em;
-  --letter-spacing-widest: 0.1em;
+  --vd-letter-spacing-tighter: -0.05em;
+  --vd-letter-spacing-tight: -0.025em;
+  --vd-letter-spacing-normal: 0;
+  --vd-letter-spacing-wide: 0.025em;
+  --vd-letter-spacing-wider: 0.05em;
+  --vd-letter-spacing-widest: 0.1em;
 }
 
 /* Base Typography */
 body {
-  font-family: var(--font-family-sans);
-  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);
+  font-family: var(--vd-font-family-sans);
+  font-size: var(--vd-font-size-base);
+  font-weight: var(--vd-font-weight-normal);
+  line-height: var(--vd-line-height-normal);
+  color: var(--vd-text-primary);
+  background-color: var(--vd-bg-primary);
 }
 
 /* Headings */
@@ -132,33 +134,33 @@ h5,
 h6 {
   margin-top: 0;
   margin-bottom: 0.5em;
-  font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-tight);
-  color: var(--text-primary);
+  font-weight: var(--vd-font-weight-bold);
+  line-height: var(--vd-line-height-tight);
+  color: var(--vd-text-primary);
 }
 
 h1 {
-  font-size: var(--font-size-4xl);
+  font-size: var(--vd-font-size-4xl);
 }
 
 h2 {
-  font-size: var(--font-size-3xl);
+  font-size: var(--vd-font-size-3xl);
 }
 
 h3 {
-  font-size: var(--font-size-2xl);
+  font-size: var(--vd-font-size-2xl);
 }
 
 h4 {
-  font-size: var(--font-size-xl);
+  font-size: var(--vd-font-size-xl);
 }
 
 h5 {
-  font-size: var(--font-size-lg);
+  font-size: var(--vd-font-size-lg);
 }
 
 h6 {
-  font-size: var(--font-size-base);
+  font-size: var(--vd-font-size-base);
 }
 
 /* Paragraphs */
@@ -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;
 }
 
@@ -203,7 +205,7 @@ dl {
 }
 
 dt {
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--vd-font-weight-semibold);
   margin-top: 0.5em;
 }
 
@@ -217,30 +219,30 @@ 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;
 }
 
 /* Code */
 code {
-  font-family: var(--font-family-mono);
+  font-family: var(--vd-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);
+  border-radius: var(--vd-radius-fib-3);
+  color: var(--vd-color-primary-dark);
 }
 
 pre {
-  font-family: var(--font-family-mono);
+  font-family: var(--vd-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);
+  border-radius: var(--vd-radius-fib-5);
   overflow-x: auto;
   margin: 1em 0;
 }
@@ -253,77 +255,77 @@ pre code {
 
 /* Font Family Utilities */
 .vd-font-sans {
-  font-family: var(--font-family-sans);
+  font-family: var(--vd-font-family-sans);
 }
 
 .vd-font-serif {
-  font-family: var(--font-family-serif);
+  font-family: var(--vd-font-family-serif);
 }
 
 .vd-font-mono {
-  font-family: var(--font-family-mono);
+  font-family: var(--vd-font-family-mono);
 }
 
 /* Font Size Utilities */
 .vd-text-xs {
-  font-size: var(--font-size-xs);
+  font-size: var(--vd-font-size-xs);
 }
 
 .vd-text-sm {
-  font-size: var(--font-size-sm);
+  font-size: var(--vd-font-size-sm);
 }
 
 .vd-text-base {
-  font-size: var(--font-size-base);
+  font-size: var(--vd-font-size-base);
 }
 
 .vd-text-lg {
-  font-size: var(--font-size-lg);
+  font-size: var(--vd-font-size-lg);
 }
 
 .vd-text-xl {
-  font-size: var(--font-size-xl);
+  font-size: var(--vd-font-size-xl);
 }
 
 .vd-text-2xl {
-  font-size: var(--font-size-2xl);
+  font-size: var(--vd-font-size-2xl);
 }
 
 .vd-text-3xl {
-  font-size: var(--font-size-3xl);
+  font-size: var(--vd-font-size-3xl);
 }
 
 .vd-text-4xl {
-  font-size: var(--font-size-4xl);
+  font-size: var(--vd-font-size-4xl);
 }
 
 .vd-text-5xl {
-  font-size: var(--font-size-5xl);
+  font-size: var(--vd-font-size-5xl);
 }
 
 .vd-text-6xl {
-  font-size: var(--font-size-6xl);
+  font-size: var(--vd-font-size-6xl);
 }
 
 /* Font Weight Utilities */
 .vd-font-light {
-  font-weight: var(--font-weight-light);
+  font-weight: var(--vd-font-weight-light);
 }
 
 .vd-font-normal {
-  font-weight: var(--font-weight-normal);
+  font-weight: var(--vd-font-weight-normal);
 }
 
 .vd-font-medium {
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--vd-font-weight-medium);
 }
 
 .vd-font-semibold {
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--vd-font-weight-semibold);
 }
 
 .vd-font-bold {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--vd-font-weight-bold);
 }
 
 .vd-text-italic {
@@ -331,7 +333,7 @@ pre code {
 }
 
 .vd-font-extrabold {
-  font-weight: var(--font-weight-extrabold);
+  font-weight: var(--vd-font-weight-extrabold);
 }
 
 /* Text Alignment: see helpers.css for .vd-text-left, .vd-text-center, .vd-text-right, .vd-text-justify */
@@ -368,50 +370,50 @@ pre code {
 
 /* Line Height Utilities */
 .leading-none {
-  line-height: var(--line-height-none);
+  line-height: var(--vd-line-height-none);
 }
 
 .leading-tight {
-  line-height: var(--line-height-tight);
+  line-height: var(--vd-line-height-tight);
 }
 
 .leading-snug {
-  line-height: var(--line-height-snug);
+  line-height: var(--vd-line-height-snug);
 }
 
 .leading-normal {
-  line-height: var(--line-height-normal);
+  line-height: var(--vd-line-height-normal);
 }
 
 .leading-relaxed {
-  line-height: var(--line-height-relaxed);
+  line-height: var(--vd-line-height-relaxed);
 }
 
 .leading-loose {
-  line-height: var(--line-height-loose);
+  line-height: var(--vd-line-height-loose);
 }
 
 /* Letter Spacing Utilities */
 .tracking-tighter {
-  letter-spacing: var(--letter-spacing-tighter);
+  letter-spacing: var(--vd-letter-spacing-tighter);
 }
 
 .tracking-tight {
-  letter-spacing: var(--letter-spacing-tight);
+  letter-spacing: var(--vd-letter-spacing-tight);
 }
 
 .tracking-normal {
-  letter-spacing: var(--letter-spacing-normal);
+  letter-spacing: var(--vd-letter-spacing-normal);
 }
 
 .tracking-wide {
-  letter-spacing: var(--letter-spacing-wide);
+  letter-spacing: var(--vd-letter-spacing-wide);
 }
 
 .tracking-wider {
-  letter-spacing: var(--letter-spacing-wider);
+  letter-spacing: var(--vd-letter-spacing-wider);
 }
 
 .tracking-widest {
-  letter-spacing: var(--letter-spacing-widest);
-}
+  letter-spacing: var(--vd-letter-spacing-widest);
+}

package/css/effects/morph.css

@@ -12,10 +12,10 @@
  */
 
 :root {
-  --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);
+  --vd-morph-duration: 0.75s;
+  --vd-morph-easing: cubic-bezier(0.2, 0.8, 0.35, 1);
+  --vd-morph-blur-peak: 11px;
+  --vd-morph-wave-color: var(--vd-color-primary, #3b82f6);
 }
 
 /* ========== Base ========== */
@@ -42,10 +42,10 @@
       color-mix(in srgb, #fff 30%, transparent) 0%,
       transparent 30%),
     radial-gradient(circle at 50% 50%,
-      color-mix(in srgb, var(--morph-wave-color) 96%, #a8d8ff) 0%,
-      color-mix(in srgb, var(--morph-wave-color) 82%, #7ec8ff) 35%,
-      color-mix(in srgb, var(--morph-wave-color) 70%, #5ba4f5) 65%,
-      color-mix(in srgb, var(--morph-wave-color) 90%, #4478f0) 100%);
+      color-mix(in srgb, var(--vd-morph-wave-color) 96%, #a8d8ff) 0%,
+      color-mix(in srgb, var(--vd-morph-wave-color) 82%, #7ec8ff) 35%,
+      color-mix(in srgb, var(--vd-morph-wave-color) 70%, #5ba4f5) 65%,
+      color-mix(in srgb, var(--vd-morph-wave-color) 90%, #4478f0) 100%);
   pointer-events: none;
   opacity: 0;
   transform: translate(-50%, -50%);
@@ -53,7 +53,7 @@
 }
 
 .vd-morph.is-morphing .vd-morph-wave {
-  animation: vd-morph-expand var(--morph-duration) var(--morph-easing) forwards;
+  animation: vd-morph-expand var(--vd-morph-duration) var(--vd-morph-easing) forwards;
 }
 
 .vd-morph.is-morphing .vd-morph-wave::after {
@@ -66,12 +66,12 @@
   border-radius: 50%;
   background:
     radial-gradient(circle at 50% 50%,
-      color-mix(in srgb, var(--morph-wave-color) 70%, #b0e0ff) 0%,
-      color-mix(in srgb, var(--morph-wave-color) 50%, #88c0ff) 45%,
+      color-mix(in srgb, var(--vd-morph-wave-color) 70%, #b0e0ff) 0%,
+      color-mix(in srgb, var(--vd-morph-wave-color) 50%, #88c0ff) 45%,
       transparent 80%);
   transform: translate(-50%, -50%);
   opacity: 0;
-  animation: vd-morph-expand2 var(--morph-duration) var(--morph-easing) 0.08s forwards;
+  animation: vd-morph-expand2 var(--vd-morph-duration) var(--vd-morph-easing) 0.08s forwards;
 }
 
 @keyframes vd-morph-expand {
@@ -79,7 +79,7 @@
     width: 0;
     height: 0;
     opacity: 0;
-    filter: blur(0px) saturate(2);
+    filter: blur(0) saturate(2);
   }
   6% {
     opacity: 1;
@@ -93,7 +93,7 @@
     width: 360%;
     height: 360%;
     opacity: 0.6;
-    filter: blur(var(--morph-blur-peak)) saturate(1.3);
+    filter: blur(var(--vd-morph-blur-peak)) saturate(1.3);
   }
   100% {
     width: 360%;
@@ -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;
 }
@@ -225,13 +225,13 @@
 /* ========== Size Variants ========== */
 
 .vd-morph-sm {
-  --morph-duration: 0.5s;
-  --morph-blur-peak: 7px;
+  --vd-morph-duration: 0.5s;
+  --vd-morph-blur-peak: 7px;
 }
 
 .vd-morph-lg {
-  --morph-duration: 1s;
-  --morph-blur-peak: 16px;
+  --vd-morph-duration: 1s;
+  --vd-morph-blur-peak: 16px;
 }
 
 /* ========== Accessibility ========== */

package/css/effects/parallax.css

@@ -5,9 +5,9 @@
 
 :root {
   /* Parallax Settings */
-  --parallax-speed-slow: 0.5;
-  --parallax-speed-medium: 1;
-  --parallax-speed-fast: 1.5;
+  --vd-parallax-speed-slow: 0.5;
+  --vd-parallax-speed-medium: 1;
+  --vd-parallax-speed-fast: 1.5;
 }
 
 /* Base Parallax Container */
@@ -37,15 +37,15 @@
 
 /* Parallax Speed Variants */
 .vd-parallax-slow {
-  --parallax-speed: var(--parallax-speed-slow);
+  --vd-parallax-speed: var(--vd-parallax-speed-slow);
 }
 
 .vd-parallax-medium {
-  --parallax-speed: var(--parallax-speed-medium);
+  --vd-parallax-speed: var(--vd-parallax-speed-medium);
 }
 
 .vd-parallax-fast {
-  --parallax-speed: var(--parallax-speed-fast);
+  --vd-parallax-speed: var(--vd-parallax-speed-fast);
 }
 
 /* Parallax Direction */