@knitli/docs-components 1.1.1 → 1.1.3

package/dist/assets/styles/typography.css

@@ -0,0 +1,262 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Knitli Inc.
+ * SPDX-FileContributor: Adam Poulemanos <adam@knit.li>
+ *
+ * SPDX-License-Identifier: LicenseRef-KnitliProprietary
+ */
+
+/* ===================================================
+   TYPOGRAPHY - Knitli Landing Page
+   6-Font System for Maximum Brand Distinctiveness
+   =================================================== */
+
+/* === KNITLI SECTIONS === */
+
+.knitli-section h1 {
+  font-family: var(--font-knitli-display);
+  font-weight: 700;
+  font-size: clamp(2.75rem, 6vw, var(--font-4xl));
+  /* Responsive: 2.75rem (44px) → 4.209rem (67px) */
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+  color: var(--knitli-primary);
+  margin-bottom: var(--knitli-space-md);
+}
+
+.knitli-section h2 {
+  font-family: var(--font-bridge);
+  font-weight: 600;
+  font-size: clamp(var(--font-xl), 4vw, var(--font-2xl));
+  /* Responsive: 2rem (32px) → 2.369rem (38px) */
+  line-height: 1.2;
+  color: var(--knitli-primary);
+  margin-bottom: var(--knitli-space-sm);
+}
+
+.knitli-section h3 {
+  font-family: var(--font-bridge);
+  font-weight: 500;
+  font-size: clamp(var(--font-lg), 3vw, 1.875rem);
+  /* Responsive: 1.5rem (24px) → 1.875rem (30px) */
+  line-height: 1.3;
+  color: var(--knitli-primary);
+  margin-bottom: var(--knitli-space-sm);
+}
+
+.knitli-section p {
+  font-family: var(--font-knitli-body);
+  font-size: var(--font-md);
+  /* 1.333rem - 21px (was 1.25rem/20px) */
+  line-height: 1.7;
+  color: var(--knitli-text);
+  margin-bottom: var(--knitli-space-md);
+}
+
+.knitli-section .lead {
+  font-size: var(--font-lg);
+  /* 1.5rem - 24px */
+  line-height: 1.6;
+  font-weight: 400;
+}
+
+.knitli-section .handwritten {
+  font-family: var(--font-knitli-accent);
+  font-size: var(--font-base);
+  /* 1.125rem - 18px */
+  color: var(--knitli-rust);
+  transform: rotate(-1.5deg);
+  display: inline-block;
+}
+
+/* === CODEWEAVER SECTIONS === */
+
+.codeweaver-section h1 {
+  font-family: var(--font-cw-display);
+  font-weight: 700;
+  font-size: clamp(2.5rem, 5vw, var(--font-3xl));
+  /* Responsive: 2.5rem (40px) → 3.157rem (51px) */
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  text-transform: uppercase;
+  color: var(--cw-primary);
+  margin-bottom: var(--cw-space-md);
+}
+
+.codeweaver-section h2 {
+  font-family: var(--font-bridge);
+  font-weight: 500;
+  font-size: clamp(1.75rem, 3vw, var(--font-xl));
+  /* Responsive: 1.75rem (28px) → 2rem (32px) */
+  line-height: 1.3;
+  color: var(--cw-primary);
+  margin-bottom: var(--cw-space-sm);
+}
+
+.codeweaver-section h3 {
+  font-family: var(--font-bridge);
+  font-weight: 500;
+  font-size: clamp(var(--font-md), 2.5vw, 1.75rem);
+  /* Responsive: 1.333rem (21px) → 1.75rem (28px) */
+  line-height: 1.4;
+  color: var(--cw-primary);
+  margin-bottom: var(--cw-space-sm);
+}
+
+.codeweaver-section p {
+  font-family: var(--font-cw-body);
+  font-size: var(--font-base);
+  /* 1.125rem - 18px */
+  line-height: 1.65;
+  color: var(--cw-text);
+  margin-bottom: var(--cw-space-md);
+}
+
+.codeweaver-section code,
+.codeweaver-section .stat-number {
+  font-family: var(--font-cw-display);
+  font-weight: 700;
+}
+
+.codeweaver-section pre:not(.terminal-content pre):not(.result-code pre) {
+  font-family: var(--font-cw-display);
+  font-size: var(--font-xs);
+  /* 0.875rem - 14px */
+  line-height: 1.6;
+  background: var(--cw-bg);
+  padding: var(--cw-space-md);
+  border: 2px solid var(--cw-primary);
+  border-radius: 4px;
+  overflow-x: auto;
+}
+
+/* === SHARED === */
+
+.label,
+.workshop-label {
+  font-family: var(--font-bridge);
+  font-weight: 700;
+  font-size: var(--font-2xs);
+  /* 0.75rem - 12px */
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+/* === LISTS === */
+
+.knitli-section ul,
+.knitli-section ol {
+  font-family: var(--font-knitli-body);
+  font-size: var(--font-base);
+  /* 1.125rem - 18px */
+  line-height: 1.7;
+  color: var(--knitli-text);
+  margin-bottom: var(--knitli-space-md);
+  padding-left: 1.5rem;
+}
+
+.codeweaver-section ul,
+.codeweaver-section ol {
+  font-family: var(--font-cw-body);
+  font-size: var(--font-sm);
+  /* 1rem - 16px */
+  line-height: 1.65;
+  color: var(--cw-text);
+  margin-bottom: var(--cw-space-md);
+  padding-left: 1.5rem;
+}
+
+/* === LINKS === */
+
+.knitli-section a:not(.btn) {
+  color: var(--knitli-rust);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 2px;
+  transition: color 0.2s;
+}
+
+.knitli-section a:not(.btn):hover {
+  color: var(--knitli-aubergine);
+}
+
+.codeweaver-section a:not(.btn) {
+  color: var(--cw-copper);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+  transition: color 0.2s;
+}
+
+.codeweaver-section a:not(.btn):hover {
+  color: var(--cw-primary);
+}
+
+/* === MOBILE RESPONSIVE === */
+
+@media (max-width: 768px) {
+  .knitli-section p,
+  .codeweaver-section p {
+    font-size: var(--font-sm);
+    /* 1rem - 16px base on mobile */
+  }
+
+  .knitli-section .lead {
+    font-size: var(--font-md);
+    /* 1.333rem - 21px (was 1.25rem/20px) */
+  }
+
+  .knitli-section ul,
+  .knitli-section ol,
+  .codeweaver-section ul,
+  .codeweaver-section ol {
+    font-size: var(--font-sm);
+    /* 1rem - 16px */
+  }
+}
+
+/* === BLOCKQUOTE === */
+
+.knitli-section blockquote {
+  font-family: var(--font-knitli-display);
+  font-size: var(--font-lg);
+  /* 1.5rem - 24px */
+  line-height: 1.5;
+  font-style: italic;
+  color: var(--knitli-primary);
+  border-left: 4px solid var(--knitli-rust);
+  padding-left: var(--knitli-space-md);
+  margin: var(--knitli-space-lg) 0;
+}
+
+.codeweaver-section blockquote {
+  font-family: var(--font-cw-body);
+  font-size: var(--font-md);
+  /* 1.333rem - 21px (was 1.25rem/20px) */
+  line-height: 1.6;
+  color: var(--cw-primary);
+  border-left: 3px solid var(--cw-copper);
+  padding-left: var(--cw-space-md);
+  margin: var(--cw-space-lg) 0;
+}
+
+/* === TEXT UTILITIES === */
+
+.text-center {
+  text-align: center;
+}
+
+.text-balance {
+  text-wrap: balance;
+}
+
+.font-display {
+  font-family: var(--font-knitli-display);
+}
+
+.font-mono {
+  font-family: var(--font-cw-display);
+}
+
+.font-handwritten {
+  font-family: var(--font-knitli-accent);
+}

package/dist/assets/styles/variables.css

@@ -0,0 +1,238 @@
+/* === CUSTOM PROPERTIES === */
+
+:root {
+  /* === KNITLI BRAND COLORS === */
+  --knitli-aubergine: oklch(0.1764 0.0549 332.67);
+  /* #1e061b - Deep, cozy */
+  --knitli-rust: oklch(0.6494 0.1874 35.74);
+  /* #ea5932 - Warm energy */
+  --knitli-parchment: oklch(0.9464 0.0258 62.58);
+  /* #F2ECE7 - Paper warmth */
+  --porcelain: oklch(0.9833 0.0062 75.41);
+  /* #fcf9f5 - Clean, bright white with warm (orange) undertones */
+  /* Use porcelain for pure white needs. 
+  Parchment works best in small amounts as a warm accent.
+  In larger areas, it can look like sand or khaki. 
+  Use porcelain for larger areas that need to feel bright and clean. */
+
+  /* Vibrant variations */
+  --knitli-vibrant-aubergine: oklch(0.1764 0.0794 332.67);
+  --knitli-vibrant-rust: oklch(0.6494 0.223 35.74);
+  --knitli-vibrant-parchment: oklch(0.9464 0.0337 62.58);
+
+  --knitli-rust-low: oklch(0.39 0.1874 35.74);
+  /* Lighter rust for accents */
+  --knitli-aubergine-low: oklch(0.05 0.0228 332.67);
+  /* Lighter aubergine for accents */
+  --knitli-parchment-low: oklch(0.69 0.0258 62.58);
+  /* Lighter parchment for accents */
+  --knitli-rust-high: oklch(0.89 0.0587 35.74);
+  /* Darker rust for depth */
+  --knitli-aubergine-high: oklch(0.43 0.1926 332.67);
+  /* Darker aubergine for depth */
+  --knitli-parchment-high: oklch(0.99 0.0054 62.58);
+  /* Slightly darker parchment for depth */
+
+  --knitli-primary: var(--knitli-aubergine);
+  --knitli-secondary: var(--knitli-rust);
+  --knitli-bg: var(--knitli-parchment);
+  --knitli-text: var(--knitli-aubergine);
+
+  /* === CODEWEAVER PRODUCT COLORS === */
+  --cw-blue-gray: oklch(0.4595 0.0374 240.18);
+  /* #455b6b - Analytical */
+  --cw-copper: oklch(0.6011 0.1188 56.91);
+  /* #b56c30 - Bridge accent */
+  --cw-cream: oklch(0.965 0.0114 84.58);
+  /* #f7f3eb - Warmed slightly from pure cream */
+  --cw-crisp-white: oklch(0.99 0.0054 240.18);
+  /* Clean, bright white */
+  /* Warmer technical canvas, closer to parchment family */
+  --cw-paper: oklch(0.96 0.02 70);
+  /* Solid opaque paper texture background */
+
+  /* Vibrant variations */
+  --cw-vibrant-blue-gray: oklch(0.4594 0.105104 239.9241);
+  --cw-vibrant-copper: oklch(0.6017 0.1444 57.21);
+  --cw-vibrant-cream: oklch(0.965 0.0359 84.58);
+
+  --cw-blue-gray-low: oklch(0.2 0.02 240.18);
+  /* Lighter blue-gray for accents */
+  --cw-copper-low: oklch(0.35 0.08 56.91);
+  /* Lighter copper for accents */
+  --cw-blue-gray-high: oklch(0.67 0.02 240.18);
+  /* Darker blue-gray for depth */
+  --cw-copper-high: oklch(0.75 0.1188 56.91);
+  /* Darker copper for depth */
+
+  --cw-primary: var(--cw-blue-gray);
+  --cw-secondary: var(--cw-copper);
+  --cw-bg: var(--cw-crisp-white);
+  --cw-text: var(--cw-blue-gray);
+
+  /* === SUPPORTING COLORS === */
+  --deep-purple: oklch(0.4 0.2415 280);
+  /* #3f01c3 - Highlights */
+  --steel-gray: oklch(0.63 0.03 243.35);
+  /* #7b8d9c - Neutral, versatile gray */
+  --steel-gray-high: oklch(0.88 0.03 243.35);
+  /* A lighter steel gray for depth and layering */
+  --steel-gray-low: oklch(0.38 0.03 243.35);
+  /* A darker steel gray for depth and layering */
+
+  /* === WORKSHOP AFFORDANCES === */
+  --workshop-shadow: var(--knitli-aubergine-low);
+  /* Soft depth */
+  --workshop-border: var(--steel-gray);
+  --workshop-bevel: rgba(255, 255, 255, 0.5);
+
+  /* === FONT FAMILIES === */
+  /* Knitli Brand Fonts - Warm, Editorial */
+  --font-knitli-display:
+    "Playfair Display", Didot, "Palatino Linotype", "Noto Serif", "DejaVu Serif",
+    serif;
+  --font-knitli-body:
+    "Crimson Pro", Baskerville, Cambria, "Palatino Linotype", "Noto Serif",
+    "DejaVu Serif", serif;
+  --font-knitli-accent:
+    "Permanent Marker", "Marker Felt", "Segoe Print", "Comic Sans MS", "Ubuntu",
+    cursive;
+
+  /* CodeWeaver Product Fonts - Technical, Precise */
+  --font-cw-display:
+    "JetBrains Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+  --font-cw-body:
+    "IBM Plex Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+
+  /* Bridge Font - Distinctive Monospace (connects serif warmth → technical precision) */
+  --font-bridge:
+    "DM Mono", "Roboto Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+
+  /* === FONT SIZE SCALE === */
+  /* Perfect Fourth ratio (1.333) - harmonious with spacing system */
+  --font-3xs: 0.563rem; /* ~9px - tiny labels, metadata */
+  --font-2xs: 0.75rem; /* 12px - labels, captions */
+  --font-xs: 0.875rem; /* 14px - code, small text */
+  --font-sm: 1rem; /* 16px - body text minimum */
+  --font-base: 1.125rem; /* 18px - standard body */
+  --font-md: 1.333rem; /* 21px - subheadings */
+  --font-lg: 1.5rem; /* 24px - h4, lead */
+  --font-xl: 2rem; /* 32px - h3 */
+  --font-2xl: 2.369rem; /* 38px - h2 */
+  --font-3xl: 3.157rem; /* 51px - h1 */
+  --font-4xl: 4.209rem; /* 67px - hero */
+  --font-5xl: 5.61rem; /* 90px - display */
+
+  /* === KNITLI SPACING === */
+  --knitli-space-3xs: 0.296rem;
+  /* ~5px - fine details */
+  --knitli-space-2xs: 0.444rem;
+  /* ~7px - tight spacing */
+  --knitli-space-xs: 0.75rem;
+  /* 12px */
+  --knitli-space-sm: 1.25rem;
+  /* 20px */
+  --knitli-space-md: 2rem;
+  /* 32px */
+  --knitli-space-lg: 3rem;
+  /* 48px */
+  --knitli-space-xl: 4rem;
+  /* 64px */
+  --knitli-space-2xl: 6rem;
+  /* 96px */
+  --knitli-space-3xl: 8rem;
+  /* 128px */
+
+  /* === CODEWEAVER SPACING === */
+  --cw-space-3xs: 0.25rem;
+  /* 4px - fine details */
+  --cw-space-2xs: 0.375rem;
+  /* 6px - tight spacing */
+  --cw-space-xs: 0.5rem;
+  /* 8px */
+  --cw-space-sm: 1rem;
+  /* 16px */
+  --cw-space-md: 1.5rem;
+  /* 24px */
+  --cw-space-lg: 2rem;
+  /* 32px */
+  --cw-space-xl: 3rem;
+  /* 48px */
+  --cw-space-2xl: 4rem;
+  /* 64px */
+  --cw-space-3xl: 6rem;
+  /* 96px */
+
+  /* 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;
+
+  /* Container Widths */
+  --container-sm: 640px;
+  --container-md: 768px;
+  --container-lg: 1024px;
+  --container-xl: 1280px;
+  --container-2xl: 1536px;
+
+  /* ========================================
+     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;
+
+  /* ========================================
+     RESPONSIVE BREAKPOINTS
+     ======================================== */
+
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+}
+
+@media (color-gamut: p3) {
+  :root {
+    --knitli-vibrant-aubergine: oklch(0.1764 0.087 332.67);
+    --knitli-vibrant-rust: oklch(0.6494 0.2513 35.74);
+    --knitli-vibrant-parchment: oklch(0.9464 0.0435 62.58);
+
+    --cw-vibrant-blue-gray: oklch(0.4594 0.1371 239.9241);
+    --cw-vibrant-copper: oklch(0.6017 0.1654 57.21);
+    --cw-vibrant-cream: oklch(0.965 0.0446 84.58);
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,40 @@
+export * from "./types/index.js";
+export declare const DocsAssets: {
+    knitliLogo: string;
+    recocoLogoMed: string;
+    recocoLogoSm: string;
+    recocoLogoXl: string;
+    codeweaverPrimary: string;
+    codeweaverReverse: string;
+    codeweaverTheme: string;
+    variables: string;
+    threadLogoDark: string;
+    threadLogoLight: string;
+    headlineLogoDark: string;
+    headlineLogoLight: string;
+    knitliWordmark: string;
+    docsStyle: string;
+};
+declare const _default: {
+    DocsAssets: {
+        knitliLogo: string;
+        recocoLogoMed: string;
+        recocoLogoSm: string;
+        recocoLogoXl: string;
+        codeweaverPrimary: string;
+        codeweaverReverse: string;
+        codeweaverTheme: string;
+        variables: string;
+        threadLogoDark: string;
+        threadLogoLight: string;
+        headlineLogoDark: string;
+        headlineLogoLight: string;
+        knitliWordmark: string;
+        docsStyle: string;
+    };
+    DocsBreadcrumb: () => Promise<typeof import("*.astro")>;
+    DocsFooter: () => Promise<typeof import("*.astro")>;
+    PageFrame: () => Promise<typeof import("*.astro")>;
+};
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAQA,cAAc,kBAAkB,CAAC;AAoBjC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAetB,CAAC;;;;;;;;;;;;;;;;;;;;;;AAQF,wBAGE"}

package/dist/index.js

@@ -0,0 +1,36 @@
+// SPDX-FileCopyrightText: 2025 Knitli Inc.
+// SPDX-FileContributor: Adam Poulemanos <adam@knit.li>
+//
+// SPDX-License-Identifier: MIT OR Apache-2.0
+//
+// Main exports for @knitli/docs-components package
+// Export type definitions
+export * from "./types/index.js";
+import { codeweaverPrimary, codeweaverReverse, headlineLogoDark, headlineLogoLight, knitliLogo, knitliWordmark, recocoLogoMed, recocoLogoSm, recocoLogoXl, threadLogoDark, threadLogoLight, } from "./assets/logos/index.js";
+import { codeweaverTheme, variables } from "./assets/styles/index.js";
+import { docsStyle } from "./styles/index.js";
+export const DocsAssets = {
+    knitliLogo,
+    recocoLogoMed,
+    recocoLogoSm,
+    recocoLogoXl,
+    codeweaverPrimary,
+    codeweaverReverse,
+    codeweaverTheme,
+    variables,
+    threadLogoDark,
+    threadLogoLight,
+    headlineLogoDark,
+    headlineLogoLight,
+    knitliWordmark,
+    docsStyle,
+};
+const components = {
+    DocsBreadcrumb: async () => await import("./components/DocsBreadcrumb.astro"),
+    DocsFooter: async () => await import("./components/Footer.astro"),
+    PageFrame: async () => await import("./components/PageFrame.astro"),
+};
+export default {
+    ...components,
+    DocsAssets,
+};

package/dist/styles/index.d.ts

@@ -0,0 +1,2 @@
+export declare const docsStyle: string;
+//# sourceMappingURL=index.d.ts.map

package/dist/styles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,QAAY,CAAC"}

package/dist/styles/index.js

@@ -0,0 +1,2 @@
+import DocsStyle from "#style/custom.css";
+export const docsStyle = DocsStyle;

package/dist/types/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 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 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";
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAOA;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,YAAY,GAAG,QAAQ,CAAC;AAE7D;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC"}

package/dist/types/index.js

@@ -0,0 +1,7 @@
+// 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
+export {};