@knitli/docs-components 1.0.1 → 1.0.3

package/package.json

@@ -49,5 +49,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.1"
+  "version": "1.0.3"
 }

package/src/components/DocsHeader.astro

@@ -1,27 +1,6 @@
 ---
-// SPDX-FileCopyrightText: 2025 Knitli Inc.
-// SPDX-FileContributor: Adam Poulemanos <adam@knit.li>
-//
-// SPDX-License-Identifier: MIT OR Apache-2.0
-//
-// Main branded header for Knitli documentation sites
-// Provides navigation, branding, and breadcrumb support
-
-interface Props {
-  currentProduct?: 'ReCoco' | 'CodeWeaver' | 'Thread';
-  currentPath?: string;
-  productUrl?: string;
-  showBreadcrumb?: boolean;
-  variant?: 'default' | 'minimal';
-}
-
-const {
-  currentProduct,
-  currentPath = '',
-  productUrl = '',
-  showBreadcrumb = true,
-  variant = 'default',
-} = Astro.props;
+// Custom header with actual Knitli logo
+const { pathname } = Astro.url;
 
 // Environment-aware URL configuration
 const isDev = import.meta.env.DEV;
@@ -43,49 +22,29 @@ const getSiteUrls = () => {
 };
 
 const urls = getSiteUrls();
-const isDocsHome = currentPath === '/' || currentPath === '';
-const shouldShowBreadcrumb = showBreadcrumb && !isDocsHome && currentProduct;
+const isDocsHome = pathname === '/' || pathname === '';
+const shouldShowBreadcrumb = !isDocsHome;
+
 ---
 
-<header class:list={['docs-header', { minimal: variant === 'minimal' }]}>
+<header class="docs-header">
   <div class="docs-header-content">
     <!-- Knitli Logo + Docs Section -->
     <a href={urls.marketing} class="docs-logo" aria-label="Knitli home">
-      <svg class="logo-icon" width="32" height="32" viewBox="0 0 100 100" fill="none" aria-hidden="true">
-        <!-- Simplified Knitli knot icon -->
-        <circle cx="50" cy="50" r="35" fill="var(--docs-copper)" opacity="0.15"/>
-        <path
-          d="M50 20 L50 50 L65 50"
-          stroke="var(--docs-slate)"
-          stroke-width="4"
-          fill="none"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M35 50 L50 50 L50 80"
-          stroke="var(--docs-slate)"
-          stroke-width="4"
-          fill="none"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <circle cx="50" cy="50" r="6" fill="var(--docs-copper)"/>
-      </svg>
+      <img src={`${import.meta.env.BASE_URL}/knitli-logo.svg`} alt="Knitli" class="logo-icon" />
       <span class="logo-text">
-        <span class="logo-brand">Knitli</span>
         <span class="logo-separator">/</span>
         <span class="logo-section">docs</span>
       </span>
     </a>
 
-    <!-- Breadcrumb (if not on docs home and product specified) -->
+    <!-- Breadcrumb -->
     {shouldShowBreadcrumb && (
       <nav class="docs-breadcrumb" aria-label="Breadcrumb">
         <a href="/">Documentation</a>
         <span class="breadcrumb-separator" aria-hidden="true">→</span>
-        <a href={productUrl || `/${currentProduct}`} class="breadcrumb-product">
-          {currentProduct}
+        <a href="/ReCoco" class="breadcrumb-product">
+          ReCoco
         </a>
       </nav>
     )}
@@ -122,28 +81,13 @@ const shouldShowBreadcrumb = showBreadcrumb && !isDocsHome && currentProduct;
 </header>
 
 <style>
-  :root {
-    --docs-copper: oklch(0.58 0.08 50); /* #b56c30 */
-    --docs-slate: oklch(0.35 0.02 240); /* #485563 */
-    --docs-parchment: oklch(0.96 0.015 70);
-  }
-
   .docs-header {
-    background: var(--docs-parchment);
-    border-bottom: 1px solid oklch(0.85 0.01 50);
+    background: white;
+    border-bottom: 1px solid #e5e7eb;
+    border-radius: 0 0 6px 2px; /* Chamfered bottom corners only */
     position: sticky;
     top: 0;
     z-index: 100;
-
-    /* Copper accent line */
-    box-shadow:
-      inset 0 -2px 0 var(--docs-copper),
-      0 1px 3px rgba(0, 0, 0, 0.05);
-  }
-
-  .docs-header.minimal {
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-    border-bottom: 1px solid oklch(0.90 0.01 60);
   }
 
   .docs-header-content {
@@ -158,7 +102,7 @@ const shouldShowBreadcrumb = showBreadcrumb && !isDocsHome && currentProduct;
   .docs-logo {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: 0.5rem;
     text-decoration: none;
     transition: opacity 0.2s ease;
   }
@@ -168,48 +112,45 @@ const shouldShowBreadcrumb = showBreadcrumb && !isDocsHome && currentProduct;
   }
 
   .logo-icon {
+    height: 32px;
+    width: auto;
     flex-shrink: 0;
   }
 
   .logo-text {
-    font-family: "DM Mono", "Roboto Mono", "Courier New", monospace;
+    font-family: system-ui, -apple-system, sans-serif;
     font-size: 1.125rem;
     font-weight: 600;
     line-height: 1;
-  }
-
-  .logo-brand {
-    color: var(--docs-slate);
+    color: #374151;
   }
 
   .logo-separator {
-    color: var(--docs-copper);
-    opacity: 0.5;
-    margin: 0 0.25rem;
+    color: #9ca3af;
+    margin: 0 0.5rem;
   }
 
   .logo-section {
-    color: var(--docs-copper);
+    color: #6b7280;
   }
 
   .docs-breadcrumb {
     display: flex;
     align-items: center;
+    align-self: flex-end;
     gap: 0.5rem;
-    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
     font-size: 0.875rem;
-    color: var(--docs-slate);
-    opacity: 0.7;
+    color: #6b7280;
   }
 
   .docs-breadcrumb a {
     color: inherit;
     text-decoration: none;
-    transition: opacity 0.2s ease;
+    transition: color 0.2s ease;
   }
 
   .docs-breadcrumb a:hover {
-    opacity: 1;
+    color: #111827;
     text-decoration: underline;
   }
 
@@ -219,7 +160,7 @@ const shouldShowBreadcrumb = showBreadcrumb && !isDocsHome && currentProduct;
 
   .breadcrumb-product {
     font-weight: 500;
-    opacity: 1;
+    color: #111827;
   }
 
   .spacer {
@@ -233,33 +174,20 @@ const shouldShowBreadcrumb = showBreadcrumb && !isDocsHome && currentProduct;
   }
 
   .docs-nav a {
-    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
     font-size: 0.9375rem;
-    color: var(--docs-slate);
+    color: #374151;
     text-decoration: none;
     position: relative;
     padding: 0.25rem 0;
     transition: color 0.2s ease;
   }
 
-  .docs-nav a::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 0;
-    height: 1px;
-    background: var(--docs-copper);
-    transition: width 0.2s ease;
-  }
-
-  .docs-nav a:hover::after,
-  .docs-nav a.active::after {
-    width: 100%;
+  .docs-nav a:hover {
+    color: #111827;
   }
 
   .docs-nav a.active {
-    color: var(--docs-copper);
+    color: #111827;
     font-weight: 500;
   }
 
@@ -285,7 +213,6 @@ const shouldShowBreadcrumb = showBreadcrumb && !isDocsHome && currentProduct;
     .docs-breadcrumb {
       order: 3;
       width: 100%;
-      padding-left: 0;
     }
 
     .spacer {
@@ -297,32 +224,8 @@ const shouldShowBreadcrumb = showBreadcrumb && !isDocsHome && currentProduct;
       font-size: 0.875rem;
     }
 
-    .logo-text {
-      font-size: 1rem;
-    }
-  }
-
-  /* Tablet */
-  @media (min-width: 769px) and (max-width: 1024px) {
-    .docs-nav {
-      gap: 1.5rem;
-    }
-  }
-
-  /* Accessibility */
-  .docs-logo:focus-visible,
-  .docs-nav a:focus-visible,
-  .docs-breadcrumb a:focus-visible {
-    outline: 3px solid var(--docs-copper);
-    outline-offset: 4px;
-    border-radius: 4px;
-  }
-
-  /* Reduced motion */
-  @media (prefers-reduced-motion: reduce) {
-    * {
-      animation-duration: 0.01ms !important;
-      transition-duration: 0.01ms !important;
+    .logo-icon {
+      height: 28px;
     }
   }
 </style>

package/src/styles/docs-theme.css

@@ -5,14 +5,13 @@
  */
 
 /* Import color palette and variables */
-@import './copper-archive.css';
-@import './variables.css';
+@import "./variables.css";
 
 /* ========================================
    GOOGLE FONTS
    ======================================== */
 
-@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=IBM+Plex+Serif:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=IBM+Plex+Serif:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap");
 
 /* ========================================
    GLOBAL STYLES
@@ -43,7 +42,7 @@ body {
 
 /* Subtle paper grain texture */
 body::before {
-  content: '';
+  content: "";
   position: fixed;
   top: 0;
   left: 0;
@@ -59,7 +58,12 @@ body::before {
    TYPOGRAPHY
    ======================================== */
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: var(--font-docs-display);
   font-weight: var(--font-medium);
   line-height: var(--leading-tight);
@@ -87,7 +91,8 @@ h4 {
   font-size: var(--text-xl);
 }
 
-h5, h6 {
+h5,
+h6 {
   font-size: var(--text-lg);
 }
 
@@ -138,9 +143,11 @@ pre code {
 
 .doc-card {
   /* Base styling */
-  background: linear-gradient(135deg,
+  background: linear-gradient(
+    135deg,
     var(--docs-parchment) 0%,
-    var(--docs-cream) 100%);
+    var(--docs-cream) 100%
+  );
   border: var(--card-border-width) solid var(--docs-border-light);
   border-radius: var(--card-radius);
   padding: var(--card-padding);
@@ -156,7 +163,7 @@ pre code {
 /* Copper corner brackets */
 .doc-card::before,
 .doc-card::after {
-  content: '';
+  content: "";
   position: absolute;
   width: var(--bracket-size);
   height: var(--bracket-size);
@@ -182,7 +189,7 @@ pre code {
 
 /* Brass polish glow effect */
 .doc-card > .card-glow {
-  content: '';
+  content: "";
   position: absolute;
   top: -50%;
   left: -50%;
@@ -304,7 +311,7 @@ pre code {
 
 /* Animated underline */
 .card-action::after {
-  content: '';
+  content: "";
   position: absolute;
   bottom: -2px;
   left: 0;
@@ -406,7 +413,7 @@ pre code {
 }
 
 .docs-nav a::after {
-  content: '';
+  content: "";
   position: absolute;
   bottom: 0;
   left: 0;
@@ -421,7 +428,7 @@ pre code {
 }
 
 .docs-nav a.external::before {
-  content: '↗';
+  content: "↗";
   margin-right: var(--space-1);
   opacity: 0.6;
 }

package/src/styles/variables.css

@@ -10,12 +10,12 @@
      ======================================== */
 
   /* 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-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.015 70); /* #F2ECE7 - Warm paper */
+  --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 */
 
@@ -35,22 +35,23 @@
      ======================================== */
 
   /* 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-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 */
+  --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;
@@ -76,18 +77,18 @@
      ======================================== */
 
   --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 */
+  --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
@@ -113,19 +114,16 @@
 
   /* Embossed Effects */
   --shadow-emboss:
-    inset 0 1px 2px rgba(255, 255, 255, 0.8),
-    0 4px 16px rgba(0, 0, 0, 0.08),
+    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);
+    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);
+    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);

package/src/styles/copper-archive.css

@@ -1,116 +0,0 @@
-/**
- * @file copper-archive.css
- * @description Lightweight Copper Archive color scheme
- * @usage Import for just the color palette without full theme styling
- */
-
-:root {
-  /* ========================================
-     COPPER ARCHIVE COLOR PALETTE
-     ======================================== */
-
-  /* Primary Accent */
-  --docs-copper: oklch(0.58 0.08 50); /* #b56c30 */
-  --docs-copper-hover: oklch(0.62 0.1 50);
-  --docs-copper-light: oklch(0.7 0.06 50);
-  --docs-copper-dark: oklch(0.48 0.1 50);
-
-  /* Technical Foundation */
-  --docs-slate: oklch(0.35 0.02 240); /* #485563 */
-  --docs-slate-light: oklch(0.45 0.015 240);
-  --docs-slate-dark: oklch(0.25 0.025 240);
-
-  /* Warm Backgrounds */
-  --docs-parchment: oklch(0.96 0.015 70); /* #F2ECE7 */
-  --docs-cream: oklch(0.945 0.016 65);
-  --docs-white: oklch(0.984 0.003 229);
-
-  /* Text Hierarchy */
-  --docs-ink: oklch(0.25 0.015 260); /* Deep blue-black */
-  --docs-text-primary: var(--docs-ink);
-  --docs-text-secondary: oklch(0.45 0.01 250);
-  --docs-text-muted: oklch(0.6 0.005 240);
-
-  /* Semantic Colors */
-  --docs-success: oklch(0.55 0.15 145); /* Green */
-  --docs-warning: oklch(0.65 0.15 75);  /* Amber */
-  --docs-error: oklch(0.55 0.2 25);     /* Red */
-  --docs-info: oklch(0.55 0.15 250);    /* Blue */
-
-  /* Border Palette */
-  --docs-border-light: oklch(0.85 0.01 50);
-  --docs-border-medium: oklch(0.75 0.015 50);
-  --docs-border-dark: oklch(0.65 0.02 50);
-  --docs-border-copper: var(--docs-copper);
-
-  /* Code Block Colors */
-  --docs-code-bg: oklch(0.15 0.01 260);
-  --docs-code-text: oklch(0.85 0.02 180);
-  --docs-code-keyword: oklch(0.65 0.15 290);
-  --docs-code-string: oklch(0.6 0.12 145);
-  --docs-code-comment: oklch(0.5 0.02 240);
-  --docs-code-function: oklch(0.7 0.12 50);
-}
-
-/* ========================================
-   DARK MODE COLOR ADJUSTMENTS
-   ======================================== */
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    /* Inverted Backgrounds */
-    --docs-parchment: oklch(0.2 0.01 260);
-    --docs-cream: oklch(0.22 0.01 260);
-    --docs-white: oklch(0.25 0.01 260);
-
-    /* Inverted Text */
-    --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);
-
-    /* Adjusted Borders */
-    --docs-border-light: oklch(0.3 0.01 240);
-    --docs-border-medium: oklch(0.4 0.01 240);
-    --docs-border-dark: oklch(0.5 0.01 240);
-
-    /* Copper Stays Warm */
-    --docs-copper: oklch(0.62 0.1 50);
-    --docs-copper-hover: oklch(0.68 0.12 50);
-  }
-}
-
-/* ========================================
-   UTILITY CLASSES - Copper Archive Colors
-   ======================================== */
-
-/* Background Colors */
-.bg-copper { background-color: var(--docs-copper); }
-.bg-slate { background-color: var(--docs-slate); }
-.bg-parchment { background-color: var(--docs-parchment); }
-.bg-cream { background-color: var(--docs-cream); }
-.bg-white { background-color: var(--docs-white); }
-
-/* Text Colors */
-.text-copper { color: var(--docs-copper); }
-.text-slate { color: var(--docs-slate); }
-.text-ink { color: var(--docs-ink); }
-.text-muted { color: var(--docs-text-muted); }
-
-/* Border Colors */
-.border-copper { border-color: var(--docs-copper); }
-.border-slate { border-color: var(--docs-slate); }
-.border-light { border-color: var(--docs-border-light); }
-.border-medium { border-color: var(--docs-border-medium); }
-
-/* Semantic Background Colors */
-.bg-success { background-color: var(--docs-success); }
-.bg-warning { background-color: var(--docs-warning); }
-.bg-error { background-color: var(--docs-error); }
-.bg-info { background-color: var(--docs-info); }
-
-/* Semantic Text Colors */
-.text-success { color: var(--docs-success); }
-.text-warning { color: var(--docs-warning); }
-.text-error { color: var(--docs-error); }
-.text-info { color: var(--docs-info); }