@knitli/docs-components 1.1.2 → 1.1.4

package/src/styles/variables.css

@@ -1,200 +0,0 @@
-/**
- * @file variables.css
- * @description CSS custom properties for Copper Archive theme
- * @usage Import this file alone to access all variables for customization
- */
-
-:root {
-  /* ========================================
-     COLOR PALETTE - Copper Archive
-     ======================================== */
-
-  /* Primary Colors */
-  --docs-copper: oklch(0.62 0.15 35); /* #ea5932 - Knitli rust */
-  --docs-copper-hover: oklch(0.62 0.3 50); /* Brighter on hover */
-  --docs-slate: oklch(0.35 0.02 240); /* #485563 - Technical foundation */
-
-  /* Background Colors */
-  --docs-parchment: oklch(0.96 0.01 75); /* #F2ECE7 - Warm paper */
-  --docs-cream: oklch(0.945 0.016 65); /* Slightly warmer parchment */
-  --docs-white: oklch(0.984 0.003 229); /* Crisp white for contrast */
-
-  /* Text Colors */
-  --docs-ink: oklch(0.25 0.015 260); /* Deep blue-black for readability */
-  --docs-text-primary: var(--docs-ink);
-  --docs-text-secondary: oklch(0.45 0.01 250); /* Medium gray */
-  --docs-text-muted: oklch(0.6 0.005 240); /* Light gray */
-
-  /* Border Colors */
-  --docs-border-light: oklch(0.85 0.01 50);
-  --docs-border-medium: oklch(0.75 0.015 50);
-  --docs-border-copper: var(--docs-copper);
-
-  /* ========================================
-     TYPOGRAPHY
-     ======================================== */
-
-  /* Font Families */
-  --font-docs-display: "DM Mono", "Courier New", monospace;
-  --font-docs-body: "IBM Plex Serif", Georgia, serif;
-  --font-docs-code: "JetBrains Mono", "Consolas", monospace;
-  --font-docs-ui:
-    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-
-  /* Font Sizes */
-  --text-xs: 0.625rem; /* 10px */
-  --text-sm: 0.875rem; /* 14px */
-  --text-base: 1rem; /* 16px */
-  --text-lg: 1.125rem; /* 18px */
-  --text-xl: 1.25rem; /* 20px */
-  --text-2xl: 1.5rem; /* 24px */
-  --text-3xl: 2rem; /* 32px */
-  --text-4xl: 2.5rem; /* 40px */
-  --text-5xl: 3rem; /* 48px */
-  --text-6xl: 4rem; /* 64px */
-
-  /* Font Weights */
-  --font-regular: 400;
-  --font-medium: 500;
-  --font-semibold: 600;
-  --font-bold: 700;
-
-  /* Line Heights */
-  --leading-tight: 1.25;
-  --leading-snug: 1.375;
-  --leading-normal: 1.5;
-  --leading-relaxed: 1.625;
-  --leading-loose: 2;
-
-  /* Letter Spacing */
-  --tracking-tight: -0.02em;
-  --tracking-normal: 0;
-  --tracking-wide: 0.05em;
-  --tracking-wider: 0.1em;
-
-  /* ========================================
-     SPACING SYSTEM
-     ======================================== */
-
-  --space-0: 0;
-  --space-1: 0.25rem; /* 4px */
-  --space-2: 0.5rem; /* 8px */
-  --space-3: 0.75rem; /* 12px */
-  --space-4: 1rem; /* 16px */
-  --space-5: 1.25rem; /* 20px */
-  --space-6: 1.5rem; /* 24px */
-  --space-8: 2rem; /* 32px */
-  --space-10: 2.5rem; /* 40px */
-  --space-12: 3rem; /* 48px */
-  --space-16: 4rem; /* 64px */
-  --space-20: 5rem; /* 80px */
-  --space-24: 6rem; /* 96px */
-
-  /* ========================================
-     LAYOUT
-     ======================================== */
-
-  /* Container Widths */
-  --container-sm: 640px;
-  --container-md: 768px;
-  --container-lg: 1024px;
-  --container-xl: 1280px;
-  --container-2xl: 1536px;
-
-  /* Border Radius */
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
-  --radius-full: 9999px;
-
-  /* ========================================
-     SHADOWS
-     ======================================== */
-
-  /* Embossed Effects */
-  --shadow-emboss:
-    inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 4px 16px rgba(0, 0, 0, 0.08),
-    0 1px 3px rgba(0, 0, 0, 0.12);
-
-  --shadow-emboss-hover:
-    inset 0 1px 2px rgba(255, 255, 255, 0.9),
-    0 8px 24px rgba(184, 108, 48, 0.15), 0 2px 6px rgba(0, 0, 0, 0.12);
-
-  --shadow-emboss-strong:
-    inset 0 1px 2px rgba(255, 255, 255, 0.9),
-    0 12px 32px rgba(184, 108, 48, 0.2), 0 3px 8px rgba(0, 0, 0, 0.15);
-
-  /* Standard Shadows */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
-
-  /* ========================================
-     ANIMATION TIMING
-     ======================================== */
-
-  --timing-fast: 150ms;
-  --timing-base: 300ms;
-  --timing-slow: 500ms;
-
-  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-  --ease-out: cubic-bezier(0, 0, 0.2, 1);
-  --ease-in: cubic-bezier(0.4, 0, 1, 1);
-
-  /* ========================================
-     Z-INDEX LAYERS
-     ======================================== */
-
-  --z-base: 0;
-  --z-dropdown: 1000;
-  --z-sticky: 1020;
-  --z-fixed: 1030;
-  --z-overlay: 1040;
-  --z-modal: 1050;
-  --z-popover: 1060;
-  --z-tooltip: 1070;
-
-  /* ========================================
-     COMPONENT-SPECIFIC
-     ======================================== */
-
-  /* Card */
-  --card-padding: var(--space-8);
-  --card-padding-mobile: var(--space-6);
-  --card-radius: var(--radius-lg);
-  --card-border-width: 1px;
-
-  /* Code Block */
-  --code-bg: oklch(0.15 0.01 260);
-  --code-text: oklch(0.85 0.02 180);
-  --code-padding: var(--space-4);
-  --code-radius: var(--radius-md);
-
-  /* Header */
-  --header-height: 4rem;
-  --header-bg: var(--docs-parchment);
-  --header-border: var(--docs-border-light);
-
-  /* Focus Ring */
-  --focus-ring-width: 3px;
-  --focus-ring-color: var(--docs-copper);
-  --focus-ring-offset: 4px;
-
-  /* Corner Brackets */
-  --bracket-size: 24px;
-  --bracket-width: 2px;
-  --bracket-color: var(--docs-copper);
-
-  /* ========================================
-     RESPONSIVE BREAKPOINTS
-     ======================================== */
-
-  --breakpoint-sm: 640px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 1024px;
-  --breakpoint-xl: 1280px;
-  --breakpoint-2xl: 1536px;
-}
-