@casoon/pages-theme 0.0.0-stage → 0.12.8

package/styles/tokens.css

@@ -0,0 +1,136 @@
+/*
+ * Design tokens. Brand colours follow casoon.de, adjusted for 4.5:1 text contrast on the
+ * page background and on the sand bands (--bg-deep, --bg-sunken).
+ * --brand carries CASOON, --accent carries the project (override via the
+ * integration's `accent` option).
+ */
+
+:root {
+  color-scheme: light;
+  /* Warm ground: paper, sand bands, sunken frames. */
+  --bg: #f4f1eb;
+  --bg-deep: #e4ded2;
+  --bg-sunken: #dcd7cc;
+  --surface: #fff;
+  --glass: rgb(255 255 255 / 0.62);
+  --border: #d7d1c4;
+  --border-strong: #cac3b4;
+  --shadow-hard: #cdc8be;
+  --text: #44423f;
+  --heading: #11100e;
+  --muted: #5c5a56;
+  --brand: #ad3216;
+  --brand-soft: rgb(236 74 32 / 0.1);
+  --accent: #ad3216;
+  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
+  --accent-fill: #d4421d;
+  --accent-top: #e46140;
+  --accent-edge: #f39b82;
+  --ink: #11100e;
+  --ink-top: #383532;
+  --ink-edge: #5b5854;
+  --code-bg: #fff;
+  --shadow: 0 4px 8px rgb(0 0 0 / 0.15);
+  --shadow-lift: 0 21px 27px rgb(0 0 0 / 0.25);
+  --r-card: 20px;
+  --r-step: 16px;
+  --r-panel: 60px;
+  --ease-roll: cubic-bezier(0.3, 1.3, 0.5, 1);
+
+  --font-sans: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --header-h: 62px;
+  --max: 1100px;
+
+  /* Terminal surface: dark in both themes. */
+  --term-bg: #15171a;
+  --term-text: #d8dde2;
+  --term-dim: #8b9297;
+  --term-border: rgb(255 255 255 / 0.08);
+  --ansi-0: #8b9297;
+  --ansi-1: #ff7b7b;
+  --ansi-2: #5fd7a7;
+  --ansi-3: #f2c66b;
+  --ansi-4: #8fd0ff;
+  --ansi-5: #e3a1f2;
+  --ansi-6: #7fdde6;
+  --ansi-7: #d8dde2;
+  --ansi-8: #8b9297;
+  --ansi-9: #ff9a9a;
+  --ansi-10: #7fe8bb;
+  --ansi-11: #f7d88f;
+  --ansi-12: #b0dcff;
+  --ansi-13: #eebcf7;
+  --ansi-14: #a4ecf2;
+  --ansi-15: #fff;
+
+  /* Inverted hero ground (Hero tone="invert"): dark in both themes. */
+  --invert-bg: #11100e;
+  --invert-accent: #f0815f;
+
+  /* Syntax highlighting (Shiki "css-variables" theme). */
+  --astro-code-foreground: var(--text);
+  --astro-code-background: var(--code-bg);
+  --astro-code-token-keyword: var(--brand);
+  --astro-code-token-constant: var(--brand);
+  --astro-code-token-string: var(--accent);
+  --astro-code-token-string-expression: var(--accent);
+  --astro-code-token-function: var(--accent);
+  --astro-code-token-comment: var(--muted);
+  --astro-code-token-parameter: var(--heading);
+  --astro-code-token-punctuation: var(--text);
+  --astro-code-token-link: var(--accent);
+}
+
+/* Dark: explicit choice, or system preference when nothing is stored. Keep both blocks identical. */
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #151412;
+  --bg-deep: #1d1b18;
+  --bg-sunken: #25221e;
+  --surface: #201e1b;
+  --glass: rgb(32 30 27 / 0.72);
+  --border: rgb(255 255 255 / 0.11);
+  --border-strong: rgb(255 255 255 / 0.2);
+  --shadow-hard: rgb(0 0 0 / 0.5);
+  --text: #cac6be;
+  --heading: #f4f1eb;
+  --muted: #9b968c;
+  --brand: #f0815f;
+  --brand-soft: rgb(240 129 95 / 0.12);
+  --accent: #f0815f;
+  --ink: #f4f1eb;
+  --ink-top: #fff;
+  --ink-edge: #908b81;
+  --code-bg: #1d1b18;
+  --term-bg: #0d0c0a;
+  --shadow: 0 4px 8px rgb(0 0 0 / 0.4);
+  --shadow-lift: 0 21px 27px rgb(0 0 0 / 0.55);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --bg: #151412;
+    --bg-deep: #1d1b18;
+    --bg-sunken: #25221e;
+    --surface: #201e1b;
+    --glass: rgb(32 30 27 / 0.72);
+    --border: rgb(255 255 255 / 0.11);
+    --border-strong: rgb(255 255 255 / 0.2);
+    --shadow-hard: rgb(0 0 0 / 0.5);
+    --text: #cac6be;
+    --heading: #f4f1eb;
+    --muted: #9b968c;
+    --brand: #f0815f;
+    --brand-soft: rgb(240 129 95 / 0.12);
+    --accent: #f0815f;
+    --ink: #f4f1eb;
+    --ink-top: #fff;
+    --ink-edge: #908b81;
+    --code-bg: #1d1b18;
+    --term-bg: #0d0c0a;
+    --shadow: 0 4px 8px rgb(0 0 0 / 0.4);
+    --shadow-lift: 0 21px 27px rgb(0 0 0 / 0.55);
+  }
+}

package/virtual.d.ts

@@ -0,0 +1,12 @@
+declare module 'virtual:casoon-pages/config' {
+  const config: import('./index').ResolvedConfig;
+  export default config;
+}
+
+declare module 'virtual:casoon-pages/showcase' {
+  export const examples: import('./lib/showcase').ShowcaseExample[];
+}
+
+declare module 'virtual:casoon-pages/mdx-components' {
+  export const components: Record<string, unknown>;
+}