@knitli/docs-components 1.0.0

package/src/styles/variables.css

@@ -0,0 +1,219 @@
+/**
+ * @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.58 0.08 50); /* #b56c30 - Warm copper accent */
+  --docs-copper-hover: oklch(0.62 0.1 50); /* Brighter on hover */
+  --docs-slate: oklch(0.35 0.02 240); /* #485563 - Technical foundation */
+
+  /* Background Colors */
+  --docs-parchment: oklch(0.96 0.015 70); /* #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;
+}
+
+/* ========================================
+   DARK MODE VARIABLES (Optional)
+   ======================================== */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --docs-parchment: oklch(0.2 0.01 260);
+    --docs-cream: oklch(0.22 0.01 260);
+    --docs-white: oklch(0.25 0.01 260);
+    --docs-ink: oklch(0.9 0.01 180);
+    --docs-text-primary: oklch(0.85 0.01 180);
+    --docs-text-secondary: oklch(0.65 0.01 200);
+    --docs-text-muted: oklch(0.5 0.01 220);
+    --docs-border-light: oklch(0.3 0.01 240);
+    --docs-border-medium: oklch(0.4 0.01 240);
+  }
+}

package/src/types/index.ts

@@ -0,0 +1,89 @@
+// SPDX-FileCopyrightText: 2025 Knitli Inc.
+// SPDX-FileContributor: Adam Poulemanos <adam@knit.li>
+//
+// SPDX-License-Identifier: MIT OR Apache-2.0
+//
+// TypeScript type definitions for docs-components package
+
+/**
+ * Supported Knitli products for documentation
+ */
+export type ProductName = 'ReCoco' | 'CodeWeaver' | 'Thread';
+
+/**
+ * Site URLs configuration
+ */
+export interface SiteUrls {
+  marketing: string;
+  blog: string;
+  docs: string;
+}
+
+/**
+ * Props for DocsHeader component
+ */
+export interface DocsHeaderProps {
+  /**
+   * Current product being documented
+   */
+  currentProduct?: ProductName;
+
+  /**
+   * Current URL path
+   */
+  currentPath?: string;
+
+  /**
+   * URL to the product's documentation home
+   */
+  productUrl?: string;
+
+  /**
+   * Whether to show breadcrumb navigation
+   * @default true
+   */
+  showBreadcrumb?: boolean;
+
+  /**
+   * Visual variant of the header
+   * @default 'default'
+   */
+  variant?: 'default' | 'minimal';
+}
+
+/**
+ * Props for DocsFooter component
+ */
+export interface DocsFooterProps {
+  /**
+   * Visual variant of the footer
+   * @default 'default'
+   */
+  variant?: 'default' | 'minimal';
+}
+
+/**
+ * Props for DocsBreadcrumb component
+ */
+export interface DocsBreadcrumbProps {
+  /**
+   * Current product name
+   */
+  product?: ProductName;
+
+  /**
+   * URL to the product's documentation home
+   */
+  productUrl?: string;
+
+  /**
+   * Current path within the product docs
+   */
+  path?: string;
+
+  /**
+   * Visual variant of the breadcrumb
+   * @default 'default'
+   */
+  variant?: 'default' | 'compact';
+}