@knitli/docs-components 1.0.1 → 1.0.2

package/package.json

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

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); }