vanduo-framework 1.1.8-docs-update

package/css/core/reset.css

@@ -0,0 +1,128 @@
+/**
+ * Vanduo Framework - CSS Reset
+ * Modern CSS reset for consistent cross-browser styling
+ */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* Remove default margin and padding */
+* {
+    margin: 0;
+    padding: 0;
+}
+
+/* Prevent font size inflation on mobile */
+html {
+    -moz-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+}
+
+/* Set core body defaults */
+body {
+    min-height: 100vh;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+}
+
+/* Remove list styles on ul, ol elements with a list role */
+ul[role='list'],
+ol[role='list'] {
+    list-style: none;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+button,
+input,
+label {
+    line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    text-wrap: balance;
+}
+
+/* Anchor elements without a class get default styles */
+a:not([class]) {
+    text-decoration-skip-ink: auto;
+    color: currentColor;
+}
+
+/* Make images easier to work with */
+img,
+picture,
+video,
+canvas,
+svg {
+    display: block;
+    max-width: 100%;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+    font: inherit;
+}
+
+/* Make sure textareas without rows have a sensible min-height */
+textarea:not([rows]) {
+    min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+    scroll-margin-block: 5ex;
+}
+
+/* Remove all animations, transitions and smooth scroll for users that prefer reduced motion */
+@media (prefers-reduced-motion: reduce) {
+    html:focus-within {
+        scroll-behavior: auto;
+    }
+
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}
+
+/* Ensure hidden attribute works as expected */
+[hidden] {
+    display: none !important;
+}
+
+/* Remove default button styles */
+button {
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+
+/* Table reset */
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

package/css/core/tokens.css

@@ -0,0 +1,213 @@
+/**
+ * Vanduo Framework - Design Tokens
+ * Centralized CSS custom properties for consistent theming
+ * v1.1.1
+ */
+
+:root {
+  /* ============================================
+   * COLOR TOKENS
+   * Based on Open Color with semantic mapping
+   * ============================================ */
+
+  /* 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);
+
+  /* Secondary Colors */
+  --vd-color-secondary: #6c757d;
+  --vd-color-secondary-hover: #5c636a;
+  --vd-color-secondary-active: #565e64;
+
+  /* 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);
+
+  /* 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;
+
+  /* ============================================
+   * BACKGROUND TOKENS
+   * ============================================ */
+  --vd-bg-primary: var(--vd-color-white);
+  --vd-bg-secondary: var(--vd-color-gray-100);
+  --vd-bg-tertiary: var(--vd-color-gray-200);
+
+  /* ============================================
+   * TEXT TOKENS
+   * ============================================ */
+  --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-on-primary: 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-width: 1px;
+  --vd-border-radius-sm: 0.25rem;
+  --vd-border-radius-md: 0.5rem;
+  --vd-border-radius-lg: 0.75rem;
+  --vd-border-radius-xl: 1rem;
+
+  /* ============================================
+   * TYPOGRAPHY TOKENS
+   * ============================================ */
+  --vd-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --vd-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* Font Sizes (Fibonacci scale) */
+  --vd-font-size-xs: 0.75rem;
+  --vd-font-size-sm: 0.8125rem;
+  --vd-font-size-base: 1rem;
+  --vd-font-size-lg: 1.125rem;
+  --vd-font-size-xl: 1.25rem;
+  --vd-font-size-2xl: 1.5rem;
+  --vd-font-size-3xl: 1.875rem;
+  --vd-font-size-4xl: 2.25rem;
+
+  /* Font Weights */
+  --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;
+
+  /* Line Heights */
+  --vd-line-height-tight: 1.25;
+  --vd-line-height-normal: 1.5;
+  --vd-line-height-relaxed: 1.75;
+
+  /* ============================================
+   * SPACING TOKENS (Fibonacci)
+   * ============================================ */
+  --vd-space-fib-1: 0.125rem;   /* 2px */
+  --vd-space-fib-2: 0.25rem;    /* 4px */
+  --vd-space-fib-3: 0.375rem;   /* 6px */
+  --vd-space-fib-5: 0.5rem;     /* 8px */
+  --vd-space-fib-8: 0.75rem;    /* 12px */
+  --vd-space-fib-13: 0.8125rem; /* 13px */
+  --vd-space-fib-21: 1.3125rem; /* 21px */
+  --vd-space-fib-34: 2.125rem;  /* 34px */
+  --vd-space-fib-55: 3.4375rem; /* 55px */
+
+  /* Standard spacing */
+  --vd-space-1: 0.25rem;
+  --vd-space-2: 0.5rem;
+  --vd-space-3: 0.75rem;
+  --vd-space-4: 1rem;
+  --vd-space-5: 1.25rem;
+  --vd-space-6: 1.5rem;
+  --vd-space-8: 2rem;
+  --vd-space-10: 2.5rem;
+  --vd-space-12: 3rem;
+  --vd-space-16: 4rem;
+
+  /* ============================================
+   * SHADOW TOKENS
+   * ============================================ */
+  --vd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --vd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --vd-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --vd-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
+
+  /* ============================================
+   * TRANSITION TOKENS
+   * ============================================ */
+  --vd-transition-fast: 150ms ease;
+  --vd-transition-normal: 250ms ease;
+  --vd-transition-slow: 350ms ease;
+
+  /* ============================================
+   * Z-INDEX TOKENS
+   * ============================================ */
+  --vd-z-dropdown: 1000;
+  --vd-z-sticky: 1020;
+  --vd-z-fixed: 1030;
+  --vd-z-modal-backdrop: 1040;
+  --vd-z-modal: 1050;
+  --vd-z-popover: 1060;
+  --vd-z-tooltip: 1070;
+  --vd-z-toast: 1080;
+
+  /* ============================================
+   * BREAKPOINT TOKENS
+   * (Documented, not CSS variables - used in media queries)
+   * ============================================ */
+  /* sm: 576px */
+  /* md: 768px */
+  /* lg: 992px */
+  /* xl: 1200px */
+  /* 2xl: 1400px */
+}
+
+/* ============================================
+ * DARK MODE TOKENS
+ * ============================================ */
+[data-theme="dark"] {
+  --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-text-primary: var(--vd-color-gray-100);
+  --vd-text-secondary: var(--vd-color-gray-400);
+  --vd-text-muted: var(--vd-color-gray-500);
+
+  --vd-border-color: var(--vd-color-gray-700);
+  --vd-border-color-light: var(--vd-color-gray-800);
+
+  --vd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --vd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
+  --vd-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
+}
+
+/* Dark mode via prefers-color-scheme */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --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-text-primary: var(--vd-color-gray-100);
+    --vd-text-secondary: var(--vd-color-gray-400);
+    --vd-text-muted: var(--vd-color-gray-500);
+
+    --vd-border-color: var(--vd-color-gray-700);
+    --vd-border-color-light: var(--vd-color-gray-800);
+
+    --vd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --vd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
+    --vd-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
+  }
+}