@knitli/docs-components 1.0.0

package/src/styles/copper-archive.css

@@ -0,0 +1,116 @@
+/**
+ * @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); }