vanduo-framework 1.1.8-docs-update

package/css/core/typography.css

@@ -0,0 +1,405 @@
+/**
+ * Vanduo Framework - Typography
+ * Font system, headings, and text utilities
+ */
+
+:root {
+  /* Font Families */
+  --font-family-sans: -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;
+}
+
+/* Font Switching - Applied via data-font attribute on html element */
+[data-font="inter"] {
+  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+[data-font="source-sans"] {
+  --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;
+}
+
+[data-font="ibm-plex"] {
+  --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;
+}
+
+[data-font="ubuntu"] {
+  --font-family-sans: 'Ubuntu', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+[data-font="open-sans"] {
+  --font-family-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+[data-font="rubik"] {
+  --font-family-sans: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+[data-font="titillium-web"] {
+  --font-family-sans: 'Titillium Web', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+:root {
+
+  /* Golden Ratio Type Scale (Fluid)
+   * Uses clamp() to scale between mobile (min) and desktop (max)
+   * Mobile scale: ~1.414 (Augmented Fourth)
+   * Desktop scale: 1.618 (Golden Ratio)
+   */
+  --font-size-xs: 0.625rem;
+  /* 10px */
+  --font-size-sm: 0.8125rem;
+  /* 13px */
+  --font-size-base: 1rem;
+  /* 16px */
+  --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);
+  /* 21.6px -> 26px */
+  --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);
+  /* 31px -> 42px */
+  --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);
+  /* 45px -> 68px */
+  --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;
+
+  /* Line Heights (phi-derived) */
+  --line-height-none: 1;
+  --line-height-tight: 1.236;
+  /* ~2/phi - for headings */
+  --line-height-snug: 1.382;
+  /* ~(1+1/phi)/1.17 */
+  --line-height-normal: 1.5;
+  /* body text standard */
+  --line-height-relaxed: 1.618;
+  /* phi itself */
+  --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;
+}
+
+/* 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);
+}
+
+/* Headings */
+h1,
+h2,
+h3,
+h4,
+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);
+}
+
+h1 {
+  font-size: var(--font-size-4xl);
+}
+
+h2 {
+  font-size: var(--font-size-3xl);
+}
+
+h3 {
+  font-size: var(--font-size-2xl);
+}
+
+h4 {
+  font-size: var(--font-size-xl);
+}
+
+h5 {
+  font-size: var(--font-size-lg);
+}
+
+h6 {
+  font-size: var(--font-size-base);
+}
+
+/* Paragraphs */
+p {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+/* Links */
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+a:hover {
+  color: var(--color-primary-dark);
+  text-decoration: underline;
+}
+
+a:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Lists */
+ul,
+ol {
+  margin-top: 0;
+  margin-bottom: 1em;
+  padding-left: 2em;
+}
+
+li {
+  margin-bottom: 0.25em;
+}
+
+/* Definition Lists */
+dl {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+dt {
+  font-weight: var(--font-weight-semibold);
+  margin-top: 0.5em;
+}
+
+dd {
+  margin-left: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+/* Blockquote */
+blockquote {
+  margin: 1em 0;
+  padding-left: 0.8125rem;
+  /* 13px - fib */
+  border-left: 3px solid var(--color-primary);
+  /* fib(3) */
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+/* Code */
+code {
+  font-family: var(--font-family-mono);
+  font-size: 0.875em;
+  background-color: var(--bg-secondary);
+  padding: 0.125em 0.1875em;
+  /* 2px 3px - fib pair */
+  border-radius: var(--radius-fib-3);
+  color: var(--color-primary-dark);
+}
+
+pre {
+  font-family: var(--font-family-mono);
+  font-size: 0.875em;
+  background-color: var(--bg-secondary);
+  padding: 0.8125rem;
+  /* 13px - fib */
+  border-radius: var(--radius-fib-5);
+  overflow-x: auto;
+  margin: 1em 0;
+}
+
+pre code {
+  background-color: transparent;
+  padding: 0;
+  color: inherit;
+}
+
+/* Font Family Utilities */
+.vd-font-sans {
+  font-family: var(--font-family-sans);
+}
+
+.vd-font-serif {
+  font-family: var(--font-family-serif);
+}
+
+.vd-font-mono {
+  font-family: var(--font-family-mono);
+}
+
+/* Font Size Utilities */
+.vd-text-xs {
+  font-size: var(--font-size-xs);
+}
+
+.vd-text-sm {
+  font-size: var(--font-size-sm);
+}
+
+.vd-text-base {
+  font-size: var(--font-size-base);
+}
+
+.vd-text-lg {
+  font-size: var(--font-size-lg);
+}
+
+.vd-text-xl {
+  font-size: var(--font-size-xl);
+}
+
+.vd-text-2xl {
+  font-size: var(--font-size-2xl);
+}
+
+.vd-text-3xl {
+  font-size: var(--font-size-3xl);
+}
+
+.vd-text-4xl {
+  font-size: var(--font-size-4xl);
+}
+
+.vd-text-5xl {
+  font-size: var(--font-size-5xl);
+}
+
+.vd-text-6xl {
+  font-size: var(--font-size-6xl);
+}
+
+/* Font Weight Utilities */
+.vd-font-light {
+  font-weight: var(--font-weight-light);
+}
+
+.vd-font-normal {
+  font-weight: var(--font-weight-normal);
+}
+
+.vd-font-medium {
+  font-weight: var(--font-weight-medium);
+}
+
+.vd-font-semibold {
+  font-weight: var(--font-weight-semibold);
+}
+
+.vd-font-bold {
+  font-weight: var(--font-weight-bold);
+}
+
+.vd-font-extrabold {
+  font-weight: var(--font-weight-extrabold);
+}
+
+/* Text Alignment: see helpers.css for .vd-text-left, .vd-text-center, .vd-text-right, .vd-text-justify */
+
+/* Text Transform Utilities (shorthand aliases — see also .vd-text-uppercase etc. in helpers.css) */
+.uppercase {
+  text-transform: uppercase;
+}
+
+.lowercase {
+  text-transform: lowercase;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.normal-case {
+  text-transform: none;
+}
+
+/* Text Decoration Utilities */
+.underline {
+  text-decoration: underline;
+}
+
+.line-through {
+  text-decoration: line-through;
+}
+
+.no-underline {
+  text-decoration: none;
+}
+
+/* Line Height Utilities */
+.leading-none {
+  line-height: var(--line-height-none);
+}
+
+.leading-tight {
+  line-height: var(--line-height-tight);
+}
+
+.leading-snug {
+  line-height: var(--line-height-snug);
+}
+
+.leading-normal {
+  line-height: var(--line-height-normal);
+}
+
+.leading-relaxed {
+  line-height: var(--line-height-relaxed);
+}
+
+.leading-loose {
+  line-height: var(--line-height-loose);
+}
+
+/* Letter Spacing Utilities */
+.tracking-tighter {
+  letter-spacing: var(--letter-spacing-tighter);
+}
+
+.tracking-tight {
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+.tracking-normal {
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.tracking-wide {
+  letter-spacing: var(--letter-spacing-wide);
+}
+
+.tracking-wider {
+  letter-spacing: var(--letter-spacing-wider);
+}
+
+.tracking-widest {
+  letter-spacing: var(--letter-spacing-widest);
+}

package/css/core/vd-aliases.css

@@ -0,0 +1,47 @@
+/**
+ * Vanduo Framework - Legacy vd-* Token Aliases
+ * Maps vd-* custom properties to the current token names.
+ */
+
+: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);
+
+  /* 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);
+
+  /* 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);
+}

package/css/effects/parallax.css

@@ -0,0 +1,113 @@
+/**
+ * Vanduo Framework - Parallax Effects
+ * Parallax scroll effects
+ */
+
+:root {
+  /* Parallax Settings */
+  --parallax-speed-slow: 0.5;
+  --parallax-speed-medium: 1;
+  --parallax-speed-fast: 1.5;
+}
+
+/* Base Parallax Container */
+.vd-parallax {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+
+/* Parallax Layer */
+.vd-parallax-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  will-change: transform;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+}
+
+/* Parallax Content */
+.vd-parallax-content {
+  position: relative;
+  z-index: 1;
+}
+
+/* Parallax Speed Variants */
+.vd-parallax-slow {
+  --parallax-speed: var(--parallax-speed-slow);
+}
+
+.vd-parallax-medium {
+  --parallax-speed: var(--parallax-speed-medium);
+}
+
+.vd-parallax-fast {
+  --parallax-speed: var(--parallax-speed-fast);
+}
+
+/* Parallax Direction */
+.vd-parallax-horizontal .vd-parallax-layer {
+  /* Horizontal parallax will be handled by JS */
+}
+
+/* Parallax Image */
+.vd-parallax-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  will-change: transform;
+}
+
+/* Parallax Background */
+.vd-parallax-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 120%; /* Extra height for parallax effect */
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  will-change: transform;
+}
+
+/* Parallax Container Heights (Fibonacci) */
+.vd-parallax-sm {
+  min-height: 377px; /* fib */
+}
+
+.vd-parallax-md {
+  min-height: 610px; /* fib */
+}
+
+.vd-parallax-lg {
+  min-height: 987px; /* fib */
+}
+
+.vd-parallax-full {
+  min-height: 100vh;
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  .vd-parallax-layer,
+  .vd-parallax-bg,
+  .vd-parallax-image {
+    transform: none !important;
+    will-change: auto;
+  }
+}
+
+/* Mobile Optimization (disable parallax on small screens) */
+@media (max-width: 767.98px) {
+  .vd-parallax-disable-mobile .vd-parallax-layer,
+  .vd-parallax-disable-mobile .vd-parallax-bg,
+  .vd-parallax-disable-mobile .vd-parallax-image {
+    transform: none !important;
+    will-change: auto;
+  }
+}
+

package/css/icons/icons-all.css

@@ -0,0 +1,23 @@
+/**
+ * Vanduo Icons - All Phosphor Weights
+ * 
+ * WARNING: This imports ~3MB of font assets. Only use if you need all weights.
+ * For most projects, use icons.css (regular + fill) instead.
+ * 
+ * Available weights:
+ *   <i class="ph ph-heart"></i>           - Regular
+ *   <i class="ph-fill ph-heart"></i>      - Fill
+ *   <i class="ph-bold ph-heart"></i>      - Bold
+ *   <i class="ph-light ph-heart"></i>     - Light
+ *   <i class="ph-thin ph-heart"></i>      - Thin
+ *   <i class="ph-duotone ph-heart"></i>   - Duotone
+ * 
+ * Full icon list: https://phosphoricons.com
+ */
+
+@import url('../../icons/phosphor/regular/style.css');
+@import url('../../icons/phosphor/fill/style.css');
+@import url('../../icons/phosphor/bold/style.css');
+@import url('../../icons/phosphor/light/style.css');
+@import url('../../icons/phosphor/thin/style.css');
+@import url('../../icons/phosphor/duotone/style.css');

package/css/icons/icons.css

@@ -0,0 +1,25 @@
+/**
+ * Vanduo Icons - Phosphor Integration
+ * Default weights: regular + fill
+ * 
+ * For other weights, import directly from:
+ * - icons/phosphor/bold/style.css
+ * - icons/phosphor/light/style.css
+ * - icons/phosphor/thin/style.css
+ * - icons/phosphor/duotone/style.css
+ * 
+ * Or use icons-all.css to import all weights (larger file size).
+ * 
+ * Usage:
+ *   <i class="ph ph-heart"></i>           - Regular weight
+ *   <i class="ph-fill ph-star"></i>       - Fill weight
+ * 
+ * Icons can be styled with CSS:
+ *   font-size: 24px;  - Size
+ *   color: red;       - Color
+ * 
+ * Full icon list: https://phosphoricons.com
+ */
+
+@import url('../../icons/phosphor/regular/style.css');
+@import url('../../icons/phosphor/fill/style.css');