@dsbasko/cookbook-engine 0.1.0

package/src/styles/markdown.css

@@ -0,0 +1,265 @@
+/* Markdown rendering styles for lesson pages.
+ * Scope: `.markdown` wrapper around the rendered article body.
+ * Code blocks come from rehype-pretty-code wrapped in our CodeBlock component:
+ *   <figure data-rehype-pretty-code-figure><header>…</header><div><pre data-theme="github-light night-owl"><code>…</code></pre></div></figure>
+ * The figure chrome (border, radius, header) is owned by CodeBlock.module.css.
+ * This file styles the inner pre/code and maps shiki dual-theme CSS vars
+ * (--shiki-light / --shiki-dark) onto `color` based on the root `data-theme`.
+ */
+
+.markdown {
+  font-family: var(--prose-font-active), Georgia, serif;
+  font-size: var(--prose-font-size);
+  line-height: var(--line-height-relaxed);
+  color: var(--content-primary);
+  word-wrap: break-word;
+}
+
+.markdown > * + * {
+  margin-top: var(--space-5);
+}
+
+.markdown h2 {
+  font-size: 1.75em;
+  line-height: var(--line-height-snug);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: -0.02em;
+  margin-top: var(--space-10);
+  margin-bottom: var(--space-5);
+  scroll-margin-top: var(--space-12);
+}
+
+.markdown h3 {
+  font-size: 1.375em;
+  line-height: var(--line-height-snug);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: -0.015em;
+  margin-top: var(--space-8);
+  margin-bottom: var(--space-3);
+  scroll-margin-top: var(--space-12);
+}
+
+.markdown h4 {
+  font-size: 1.125em;
+  font-weight: var(--font-weight-semibold);
+  margin-top: var(--space-6);
+  margin-bottom: var(--space-2);
+}
+
+.markdown p {
+  margin: 0 0 20px 0;
+  text-wrap: pretty;
+}
+
+.markdown strong {
+  font-weight: var(--font-weight-semibold);
+  color: var(--content-primary);
+}
+
+.markdown a.heading-anchor {
+  color: inherit;
+  text-decoration: none;
+}
+
+.markdown a.heading-anchor:hover {
+  color: var(--content-link);
+}
+
+/* Inline prose links: same color as body text, semibold, dotted underline.
+ * Identity in all three themes — the link reads as text first, then as a
+ * link via weight and underline (mirrors Substack / iA Writer style). */
+.markdown a:not(.heading-anchor) {
+  color: var(--content-primary);
+  font-weight: var(--font-weight-semibold);
+  text-decoration: underline dotted;
+  text-decoration-color: var(--content-tertiary);
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+}
+
+.markdown a:not(.heading-anchor):hover {
+  color: var(--content-primary);
+  text-decoration-color: var(--content-primary);
+}
+
+.markdown a[data-external]::after {
+  content: ' ↗';
+  font-size: 0.8em;
+  opacity: 0.7;
+}
+
+.markdown ul,
+.markdown ol {
+  padding-left: var(--space-6);
+  margin: 0 0 20px 0;
+}
+
+.markdown ol {
+  list-style: decimal;
+}
+
+.markdown ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+.markdown ul > li {
+  position: relative;
+  padding-left: var(--space-5);
+}
+
+.markdown ul > li::before {
+  content: '—';
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: var(--content-tertiary);
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 0.95em;
+  line-height: inherit;
+}
+
+.markdown ul ul,
+.markdown ol ol,
+.markdown ul ol,
+.markdown ol ul {
+  margin-top: var(--space-2);
+  padding-left: var(--space-6);
+}
+
+.markdown ul ul {
+  list-style: none;
+}
+
+.markdown ol ol {
+  list-style: lower-alpha;
+}
+
+.markdown li + li {
+  /* margin-top: var(--space-2); */
+}
+
+.markdown li > p {
+  margin: 0;
+}
+
+.markdown li > p + p {
+  margin-top: var(--space-2);
+}
+
+.markdown blockquote {
+  margin: 0;
+  padding: var(--space-3) var(--space-4);
+  border-left: 3px solid var(--bg-stroke-strong);
+  background-color: var(--bg-subtle);
+  color: var(--content-secondary);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+}
+
+.markdown blockquote > * + * {
+  margin-top: var(--space-2);
+}
+
+.markdown :not(pre) > code {
+  font-family: var(--code-font-active), ui-monospace, monospace;
+  font-size: 0.86em;
+  padding: 1px 6px;
+  background-color: var(--bg-subtle);
+  border: 1px solid var(--bg-stroke);
+  border-radius: var(--radius-sm);
+  color: var(--content-primary);
+  white-space: nowrap;
+}
+
+.markdown table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: inherit;
+  font-size: 0.875em;
+  display: block;
+  overflow-x: auto;
+  margin: 0 0 20px 0;
+}
+
+.markdown th,
+.markdown td {
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--bg-stroke);
+  text-align: left;
+  vertical-align: top;
+}
+
+.markdown th {
+  background-color: var(--bg-subtle);
+  font-weight: var(--font-weight-semibold);
+}
+
+.markdown tr:nth-child(even) td {
+  background-color: var(--bg-subtle);
+}
+
+.markdown img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--bg-stroke);
+}
+
+.markdown hr {
+  border: 0;
+  border-top: 1px solid var(--bg-stroke);
+  margin: var(--space-8) 0;
+}
+
+/* rehype-pretty-code inner pre/code (wrapper styled by CodeBlock.module.css). */
+.markdown figure[data-rehype-pretty-code-figure] {
+  margin-top: var(--space-5);
+  margin-bottom: var(--space-6);
+}
+
+.markdown figure[data-rehype-pretty-code-figure] pre {
+  margin: 0;
+  padding: var(--space-5);
+  overflow-x: auto;
+  font-size: var(--code-font-size);
+  line-height: 1.6;
+  background: transparent;
+  tab-size: 2;
+}
+
+.markdown figure[data-rehype-pretty-code-figure] code {
+  display: block;
+  font-family: var(--code-font-active), ui-monospace, monospace;
+  background: transparent;
+  font-variant-ligatures: none;
+}
+
+/* Fira Code is built around its ligature set (`->`, `=>`, `!=`, `===` …) —
+ * disabling them removes half its identity. Opt in only when Fira Code is the
+ * active code font; JetBrains Mono stays ligature-free per the rule above. */
+[data-code-font='fira'] .markdown figure[data-rehype-pretty-code-figure] code {
+  font-variant-ligatures: contextual;
+}
+
+.markdown figure[data-rehype-pretty-code-figure] code [data-line] {
+  display: block;
+  padding: 0;
+  min-height: 1.6em;
+}
+
+/* Dual-theme via CSS variables stamped on token spans by rehype-pretty-code.
+ * Light theme uses --shiki-light; dark theme uses --shiki-dark. */
+.markdown figure[data-rehype-pretty-code-figure] code span {
+  color: var(--shiki-light);
+  font-style: var(--shiki-light-font-style);
+  font-weight: var(--shiki-light-font-weight);
+  text-decoration: var(--shiki-light-text-decoration);
+}
+
+[data-theme='dark'] .markdown figure[data-rehype-pretty-code-figure] code span {
+  color: var(--shiki-dark);
+  font-style: var(--shiki-dark-font-style);
+  font-weight: var(--shiki-dark-font-weight);
+  text-decoration: var(--shiki-dark-text-decoration);
+}

package/src/styles/reset.css

@@ -0,0 +1,89 @@
+/* Modern CSS reset (adapted from Andy Bell). */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+figure,
+blockquote,
+dl,
+dd,
+ol,
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100vh;
+  min-height: 100dvh;
+  text-rendering: optimizeLegibility;
+  line-height: var(--line-height-normal);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+img,
+picture,
+svg {
+  max-width: 100%;
+  display: block;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/styles/tokens.css

@@ -0,0 +1,270 @@
+/* Design tokens — cookbook-engine
+ * Light: warm paper palette (cream + warm grays).
+ * Dark:  deep ink with the same blue accent for continuity.
+ *
+ * Naming (BEM-friendly): --<category>-<role>.
+ *   bg-*       — surface fills
+ *   content-*  — text/icon foregrounds
+ *   accent-*   — semantic accents (action, success, notice, critical)
+ *   font-*     — font-family stacks (set in app/layout.tsx)
+ *   space-*    — spacing scale
+ *   radius-*   — corner radii
+ *   shadow-*   — elevation shadows
+ *   z-*        — z-index scale
+ *
+ * Accent: each theme declares a single `--accent-base`; `--accent-main` reads
+ * from it so a course can re-skin the action colour by overriding one token.
+ * `buildBrandAccentCss()` (lib/course.ts) injects a higher-specificity
+ * `:root[data-theme=…]` block from `course.yaml.brand.accent` that wins this
+ * cascade and re-derives the hover/soft shades via color-mix.
+ */
+
+:root {
+  /* Spacing scale (4px grid) */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-20: 80px;
+
+  /* Type scale */
+  --font-size-xs: 12px;
+  --font-size-sm: 14px;
+  --font-size-md: 16px;
+  --font-size-lg: 18px;
+  --font-size-xl: 22px;
+  --font-size-2xl: 28px;
+  --font-size-3xl: 36px;
+  --font-size-4xl: 44px;
+
+  --line-height-tight: 1.2;
+  --line-height-snug: 1.4;
+  --line-height-normal: 1.6;
+  --line-height-relaxed: 1.75;
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Radii */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-pill: 999px;
+
+  /* Layout */
+  --layout-sidebar-width: 64px;
+  --layout-content-max: 720px;
+  --layout-toc-width: 280px;
+
+  /* Z-index */
+  --z-drawer: 100;
+  --z-overlay: 90;
+  --z-header: 80;
+  --z-popover: 110;
+
+  /* Reading preferences — overridden by data-* on <html>. Default = step 1 (16px prose, 14px code). */
+  --prose-font-size: 16px;
+  --code-font-size: 14px;
+  --prose-font-active: var(--font-serif);
+  --code-font-active: var(--font-mono);
+  --prose-max-width: 900px;
+}
+
+/* Six-step scale matching design reference: 14 / 16 / 18 / 20 / 22 / 24 px.
+ * Article max-width scales with the same step so the line-length budget
+ * (~52–58 characters) stays comfortable as prose grows. */
+[data-prose-size='0'] {
+  --prose-font-size: 14px;
+  --prose-max-width: 820px;
+}
+[data-prose-size='1'] {
+  --prose-font-size: 16px;
+  --prose-max-width: 900px;
+}
+[data-prose-size='2'] {
+  --prose-font-size: 18px;
+  --prose-max-width: 980px;
+}
+[data-prose-size='3'] {
+  --prose-font-size: 20px;
+  --prose-max-width: 1060px;
+}
+[data-prose-size='4'] {
+  --prose-font-size: 22px;
+  --prose-max-width: 1140px;
+}
+[data-prose-size='5'] {
+  --prose-font-size: 24px;
+  --prose-max-width: 1220px;
+}
+
+/* Mobile: shift the prose scale down one step so the default (step 1)
+ * renders at 15px, matching pre-feature mobile lesson rendering. */
+@media (max-width: 720px) {
+  :root {
+    --prose-font-size: 15px;
+  }
+  [data-prose-size='0'] {
+    --prose-font-size: 13px;
+  }
+  [data-prose-size='1'] {
+    --prose-font-size: 15px;
+  }
+  [data-prose-size='2'] {
+    --prose-font-size: 16px;
+  }
+  [data-prose-size='3'] {
+    --prose-font-size: 18px;
+  }
+  [data-prose-size='4'] {
+    --prose-font-size: 20px;
+  }
+  [data-prose-size='5'] {
+    --prose-font-size: 22px;
+  }
+}
+
+[data-code-size='0'] {
+  --code-font-size: 14px;
+}
+[data-code-size='1'] {
+  --code-font-size: 16px;
+}
+[data-code-size='2'] {
+  --code-font-size: 18px;
+}
+[data-code-size='3'] {
+  --code-font-size: 20px;
+}
+[data-code-size='4'] {
+  --code-font-size: 22px;
+}
+[data-code-size='5'] {
+  --code-font-size: 24px;
+}
+
+[data-prose-font='serif'] {
+  --prose-font-active: var(--font-serif);
+}
+[data-prose-font='sans'] {
+  --prose-font-active: var(--font-prose-inter);
+}
+[data-prose-font='slab'] {
+  --prose-font-active: var(--font-prose-slab);
+}
+
+[data-code-font='jetbrains'] {
+  --code-font-active: var(--font-mono);
+}
+[data-code-font='fira'] {
+  --code-font-active: var(--font-code-fira);
+}
+
+/* Light theme — neo-academic cream + deep moss accent. */
+[data-theme='light'] {
+  --bg-default: #faf7f2;
+  --bg-surface: #ffffff;
+  --bg-subtle: #f3efe7;
+  --bg-muted: #ece7dc;
+  --bg-stroke: #e6e0d3;
+  --bg-stroke-strong: #d4cdba;
+
+  --content-primary: #1a1a1a;
+  --content-secondary: #5b5750;
+  --content-tertiary: #8a857b;
+  --content-inverse: #faf7f2;
+  --content-link: #2e3b2e;
+  --content-link-hover: #243024;
+
+  --accent-base: #2e3b2e;
+  --accent-main: var(--accent-base);
+  --accent-main-hover: #243024;
+  --accent-main-soft: rgba(46, 59, 46, 0.1);
+  --accent-success: #1f8a5b;
+  --accent-success-soft: rgba(31, 138, 91, 0.12);
+  --accent-notice: #c1862a;
+  --accent-notice-soft: rgba(193, 134, 42, 0.14);
+  --accent-critical: #b53120;
+  --accent-critical-soft: rgba(181, 49, 32, 0.12);
+
+  --shadow-sm: 0 1px 2px rgba(35, 25, 10, 0.04), 0 0 0 1px rgba(35, 25, 10, 0.04);
+  --shadow-md: 0 4px 16px rgba(35, 25, 10, 0.06), 0 1px 3px rgba(35, 25, 10, 0.04);
+  --shadow-lg: 0 12px 32px rgba(35, 25, 10, 0.12);
+}
+
+/* Paper theme — warm sepia for long-form reading.
+ * Bg/fg pair #f3eedc / #2f2a24 ≈ 12.2:1 (above WCAG AAA for body text).
+ * Accent shifts from moss to muted brown to reinforce the paper identity. */
+[data-theme='paper'] {
+  color-scheme: light;
+
+  --bg-default: #f3eedc;
+  --bg-surface: #fbf7ea;
+  --bg-subtle: #ede5cf;
+  --bg-muted: #e8ddc5;
+  --bg-stroke: #e5dcc8;
+  --bg-stroke-strong: #d8ccb3;
+
+  --content-primary: #2f2a24;
+  --content-secondary: #5b5148;
+  --content-tertiary: #6b5e52;
+  --content-inverse: #fbf7ea;
+  --content-link: #1f5c57;
+  --content-link-hover: #174842;
+
+  --accent-base: #7e6149;
+  --accent-main: var(--accent-base);
+  --accent-main-hover: #65503c;
+  --accent-main-soft: rgba(126, 97, 73, 0.12);
+  --accent-success: #2e7855;
+  --accent-success-soft: rgba(46, 120, 85, 0.14);
+  --accent-notice: #a86420;
+  --accent-notice-soft: rgba(168, 100, 32, 0.16);
+  --accent-critical: #9f3a2a;
+  --accent-critical-soft: rgba(159, 58, 42, 0.14);
+
+  --shadow-sm: 0 1px 2px rgba(47, 42, 36, 0.06), 0 0 0 1px rgba(47, 42, 36, 0.05);
+  --shadow-md: 0 4px 16px rgba(47, 42, 36, 0.08), 0 1px 3px rgba(47, 42, 36, 0.05);
+  --shadow-lg: 0 12px 32px rgba(47, 42, 36, 0.14);
+}
+
+/* Dark theme — deep ink with sage accent. */
+[data-theme='dark'] {
+  --bg-default: #16140f;
+  --bg-surface: #1d1b16;
+  --bg-subtle: #100e0a;
+  --bg-muted: #25221b;
+  --bg-stroke: #2a2620;
+  --bg-stroke-strong: #3a342a;
+
+  --content-primary: #f0ece2;
+  --content-secondary: #a8a294;
+  --content-tertiary: #6e695e;
+  --content-inverse: #16140f;
+  --content-link: #b8c7b1;
+  --content-link-hover: #cdd9c7;
+
+  --accent-base: #b8c7b1;
+  --accent-main: var(--accent-base);
+  --accent-main-hover: #cdd9c7;
+  --accent-main-soft: rgba(184, 199, 177, 0.12);
+  --accent-success: #4dbf8c;
+  --accent-success-soft: rgba(77, 191, 140, 0.14);
+  --accent-notice: #e0a449;
+  --accent-notice-soft: rgba(224, 164, 73, 0.16);
+  --accent-critical: #e25c48;
+  --accent-critical-soft: rgba(226, 92, 72, 0.14);
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
+}