@brandon_m_behring/book-scaffold-astro 3.0.0-alpha.0

package/styles/tokens.css

@@ -0,0 +1,194 @@
+/* tokens.css — Design tokens for book-template-astro
+ * Two layers:
+ *   1. Raw palette (Warm Tol hybrid — inherited from the LaTeX book)
+ *   2. Semantic roles that reference the palette
+ * Dark mode overrides only the semantic layer.
+ */
+
+:root {
+  /* ===== Layer 1: Raw palette — Warm Tol hybrid =====
+   * Source: ~/Claude/claude-best-practices/claude-best-practices.sty lines 117-128
+   * Tol Bright relationships + Anthropic warmth. Colorblind-safe. */
+  --warm-blue:   #3B6FA0;  /* structural: headings, links, info */
+  --warm-rose:   #C06858;  /* attention: warnings, alerts */
+  --warm-green:  #4A7E3F;  /* positive: tips, practitioner */
+  --warm-plum:   #8A4E82;  /* authority: official, exercises */
+  --warm-gold:   #C09840;  /* insight: convergence, reasoning */
+
+  /* Warm neutrals (Anthropic-derived) */
+  --paper:       #FDFCF9;  /* page background — slightly off-white */
+  --code-bg:     #F7F5F0;  /* code block background */
+  --code-frame:  #B5B3AA;  /* code block border */
+  --dark-text:   #1A1A19;  /* body text */
+
+  /* Soft tints — used for callout backgrounds (5% blend with paper) */
+  --warm-blue-tint:  color-mix(in srgb, var(--warm-blue)  6%, var(--paper));
+  --warm-rose-tint:  color-mix(in srgb, var(--warm-rose)  6%, var(--paper));
+  --warm-green-tint: color-mix(in srgb, var(--warm-green) 6%, var(--paper));
+  --warm-plum-tint:  color-mix(in srgb, var(--warm-plum)  6%, var(--paper));
+  --warm-gold-tint:  color-mix(in srgb, var(--warm-gold)  6%, var(--paper));
+
+  /* ===== Layer 2: Semantic roles (light mode) ===== */
+  --color-bg:         var(--paper);
+  --color-bg-subtle:  var(--code-bg);
+  --color-text:       var(--dark-text);
+  --color-text-muted: color-mix(in srgb, var(--dark-text) 55%, var(--paper));
+  --color-border:     var(--code-frame);
+  --color-link:       var(--warm-blue);
+  --color-heading:    var(--warm-blue);
+  --color-code-bg:    var(--code-bg);
+  --color-code-border: var(--code-frame);
+
+  /* Callout semantic roles (left-bar color, used with *-tint bg) */
+  --callout-info:     var(--warm-blue);
+  --callout-warn:     var(--warm-rose);
+  --callout-tip:      var(--warm-green);
+  --callout-official: var(--warm-plum);
+  --callout-insight:  var(--warm-gold);
+
+  /* ===== Typography scale ===== */
+  --font-body: 'Roboto Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-code: 'Source Code Pro Variable', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+
+  --text-xs:   0.75rem;
+  --text-sm:   0.875rem;
+  --text-base: 1rem;
+  --text-lg:   1.125rem;
+  --text-xl:   1.25rem;
+  --text-2xl:  1.5rem;
+  --text-3xl:  1.875rem;
+  --text-4xl:  2.25rem;
+
+  --leading-tight:   1.25;
+  --leading-normal:  1.5;
+  --leading-body:    1.6;   /* target for long-form reading */
+  --leading-relaxed: 1.75;
+
+  /* ===== Layout measures =====
+   * Three-tier responsive measure tuned via Playwright comparison at
+   * 375 / 1280 / 1440 / 1920px viewports (post_transformers commit d9d085b).
+   *
+   * The classic 65ch Tufte measure feels narrow on wide desktops (≥1440px)
+   * where ~38% of the viewport sits as empty margin. The tiered approach
+   * keeps 65ch where it's typographically right (laptop) and expands to
+   * 80ch / 90ch on wider monitors without crossing the 90ch upper limit
+   * of comfortable line length.
+   *
+   * Tier values + utilization (verified):
+   *   default (≤1440px): 65ch + 28ch  → 70% at 1280px
+   *   1440px tier:       80ch + 24ch  → 69% (with sidebar: 89%)
+   *   1920px tier:       90ch + 26ch  → 57% (with sidebar: 72%)
+   *
+   * Sidenote column shrinks slightly at wider tiers (24ch / 26ch) to give
+   * main column more room while staying readable for short notes.
+   *
+   * Mobile (<48rem) handled separately in layout.css — sidenotes reflow
+   * inline; the tokens here don't apply below 48rem.
+   *
+   * Note: CSS custom properties cannot be used in @media expressions, so
+   * the breakpoints are encoded as literal rem values in the media queries
+   * (90rem ≈ 1440px, 120rem ≈ 1920px).
+   */
+  --measure-main: 65ch;        /* default: laptop-friendly typographic measure */
+  --measure-side: 28ch;        /* right-margin sidenote column (desktop) */
+  --breakpoint-narrow: 48rem;  /* ~768px — mobile fold (sidenotes inline) */
+  --breakpoint-wide: 90rem;    /* ~1440px — wide-desktop tier */
+  --breakpoint-ultrawide: 120rem; /* ~1920px — ultrawide tier */
+
+  /* ===== Spacing scale ===== */
+  --space-1:  0.25rem;
+  --space-2:  0.5rem;
+  --space-3:  0.75rem;
+  --space-4:  1rem;
+  --space-5:  1.25rem;
+  --space-6:  1.5rem;
+  --space-8:  2rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+
+  /* ===== Borders / radii ===== */
+  --radius-sm:  2px;
+  --radius-md:  4px;
+  --border-bar: 3px;   /* left-bar on callouts and sidenote asides */
+
+  /* ===== Shiki syntax highlighting (css-variables theme) =====
+   * Shiki's css-variables mode emits <span style="color:var(--astro-code-token-...)">
+   * for each token. Mapping to Warm Tol hues keeps code blocks in the
+   * same visual language as prose callouts. Dark mode overrides below. */
+  --astro-code-foreground:              var(--color-text);
+  --astro-code-background:              var(--color-code-bg);
+  --astro-code-token-constant:          var(--warm-rose);
+  --astro-code-token-string:            var(--warm-green);
+  --astro-code-token-string-expression: var(--warm-green);
+  --astro-code-token-comment:           var(--color-text-muted);
+  --astro-code-token-keyword:           var(--warm-plum);
+  --astro-code-token-parameter:         var(--warm-blue);
+  --astro-code-token-function:          var(--warm-gold);
+  --astro-code-token-punctuation:       var(--color-text-muted);
+  --astro-code-token-link:              var(--color-link);
+}
+
+/* Tier 2: wide desktop (1440px+). Main 80ch, sidenote 24ch. */
+@media (min-width: 90rem) {
+  :root {
+    --measure-main: 80ch;
+    --measure-side: 24ch;
+  }
+}
+
+/* Tier 3: ultrawide (1920px+). Main 90ch, sidenote 26ch. */
+@media (min-width: 120rem) {
+  :root {
+    --measure-main: 90ch;
+    --measure-side: 26ch;
+  }
+}
+
+/* ===== Dark mode ==========================================================
+ * Override only the raw neutral palette + a couple of accent brightenings
+ * for contrast. Because semantic roles (--color-bg, --color-text,
+ * --color-link, etc.) and tint calcs reference these via var(), they
+ * auto-update with no further work.
+ *
+ * Precedence: explicit [data-theme="light"] > explicit [data-theme="dark"]
+ * > prefers-color-scheme. A small inline script in Base.astro applies any
+ * user-saved preference from localStorage before first paint (no FOUC).
+ * ========================================================================== */
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --paper:       #1A1816;  /* deep warm-neutral page background */
+    --code-bg:     #26231F;
+    --code-frame:  #3A3632;
+    --dark-text:   #E8E5DD;  /* cream body text */
+
+    /* Brighten headings + links for contrast against dark bg */
+    --color-heading: color-mix(in srgb, var(--warm-blue) 55%, white);
+    --color-link:    color-mix(in srgb, var(--warm-blue) 55%, white);
+
+    /* Shiki token brightenings for contrast on dark code-block bg */
+    --astro-code-token-constant:          color-mix(in srgb, var(--warm-rose)  60%, white);
+    --astro-code-token-string:            color-mix(in srgb, var(--warm-green) 60%, white);
+    --astro-code-token-string-expression: color-mix(in srgb, var(--warm-green) 60%, white);
+    --astro-code-token-keyword:           color-mix(in srgb, var(--warm-plum)  55%, white);
+    --astro-code-token-parameter:         color-mix(in srgb, var(--warm-blue)  55%, white);
+    --astro-code-token-function:          color-mix(in srgb, var(--warm-gold)  65%, white);
+  }
+}
+
+:root[data-theme="dark"] {
+  --paper:       #1A1816;
+  --code-bg:     #26231F;
+  --code-frame:  #3A3632;
+  --dark-text:   #E8E5DD;
+
+  --color-heading: color-mix(in srgb, var(--warm-blue) 55%, white);
+  --color-link:    color-mix(in srgb, var(--warm-blue) 55%, white);
+
+  --astro-code-token-constant:          color-mix(in srgb, var(--warm-rose)  60%, white);
+  --astro-code-token-string:            color-mix(in srgb, var(--warm-green) 60%, white);
+  --astro-code-token-string-expression: color-mix(in srgb, var(--warm-green) 60%, white);
+  --astro-code-token-keyword:           color-mix(in srgb, var(--warm-plum)  55%, white);
+  --astro-code-token-parameter:         color-mix(in srgb, var(--warm-blue)  55%, white);
+  --astro-code-token-function:          color-mix(in srgb, var(--warm-gold)  65%, white);
+}

package/styles/tool-filter.css

@@ -0,0 +1,135 @@
+/* tool-filter.css — ToolFilter chrome-button trigger + dropdown panel.
+ * Follows the same visual language as version-selector styles in Base.astro.
+ */
+
+.tool-filter {
+  position: relative;
+  display: inline-block;
+}
+
+.tool-filter-trigger {
+  position: relative;
+}
+.tool-filter-count {
+  position: absolute;
+  top: -0.2em;
+  right: -0.2em;
+  min-width: 1.1em;
+  height: 1.1em;
+  padding: 0 0.3em;
+  border-radius: 999px;
+  background: var(--warm-blue);
+  color: #fff;
+  font-family: var(--font-code);
+  font-size: 0.65rem;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.tool-filter-panel {
+  position: absolute;
+  top: calc(100% + var(--space-2));
+  right: 0;
+  min-width: 14rem;
+  padding: var(--space-3);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  z-index: 20;
+}
+.tool-filter-heading {
+  margin: 0 0 var(--space-2) 0;
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-text-muted);
+  font-family: var(--font-code);
+}
+
+.tool-filter-chips {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 var(--space-3) 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+.tool-filter-chips li {
+  margin: 0;
+}
+
+.tool-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3em;
+  padding: 0.2em 0.7em;
+  min-height: 1.8em; /* mobile tap target */
+  border-radius: 999px;
+  background: transparent;
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  cursor: pointer;
+  font-family: var(--font-code);
+  font-size: var(--text-sm);
+  line-height: 1.4;
+  transition:
+    background 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease,
+    transform 80ms ease;
+}
+.tool-filter-chip:hover {
+  border-color: var(--color-link);
+}
+.tool-filter-chip:active {
+  transform: scale(0.96);
+}
+.tool-filter-chip:focus-visible {
+  outline: 2px solid var(--color-link);
+  outline-offset: 2px;
+}
+.tool-filter-chip-on {
+  background: var(--warm-blue-tint);
+  color: var(--warm-blue);
+  border-color: var(--warm-blue);
+  font-weight: 500;
+}
+.tool-filter-chip-on::before {
+  content: '✓';
+  font-size: 0.8em;
+}
+
+.tool-filter-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding-top: var(--space-2);
+  border-top: 1px solid var(--color-border);
+}
+.tool-filter-clear {
+  padding: 0.1em 0.6em;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-link);
+  border: 1px solid var(--color-border);
+  font-family: var(--font-code);
+  font-size: var(--text-xs);
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+.tool-filter-clear:hover:not(:disabled) {
+  background: var(--color-bg-subtle);
+}
+.tool-filter-clear:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.tool-filter-note {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  line-height: 1.3;
+}

package/styles/typography.css

@@ -0,0 +1,147 @@
+/* typography.css — Base typographic rules
+ * Assumes tokens.css is loaded first for CSS custom properties.
+ * Font files are loaded via JS imports in Base.astro (commit 2).
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: var(--font-body);
+  font-size: 100%;              /* respect user root-size preference */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--color-text);
+  background: var(--color-bg);
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  font-size: var(--text-base);
+  line-height: var(--leading-body);
+  margin: 0;
+}
+
+/* ===== Paragraph rhythm (Tufte: indent, no parskip) =====
+ * No indent on the first paragraph after a heading — standard book rule.
+ * Indent every subsequent paragraph. */
+p {
+  margin: 0 0 var(--space-4) 0;
+  text-indent: 1em;
+  hanging-punctuation: first last;
+}
+h1 + p,
+h2 + p,
+h3 + p,
+h4 + p,
+h5 + p,
+h6 + p,
+hr + p,
+blockquote + p,
+ul + p,
+ol + p,
+pre + p {
+  text-indent: 0;
+}
+
+/* ===== Headings — blue italic, distinctive ===== */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 500;
+  font-style: italic;
+  color: var(--color-heading);
+  line-height: var(--leading-tight);
+  margin: var(--space-8) 0 var(--space-3) 0;
+  text-wrap: balance;
+}
+h1 { font-size: var(--text-4xl); margin-top: 0; }
+h2 { font-size: var(--text-3xl); }
+h3 { font-size: var(--text-2xl); }
+h4 { font-size: var(--text-xl); }
+h5 { font-size: var(--text-lg); }
+h6 { font-size: var(--text-base); font-weight: 600; font-style: normal; }
+
+/* ===== Code ===== */
+code {
+  font-family: var(--font-code);
+  font-size: 0.92em;
+  background: var(--color-code-bg);
+  padding: 0.1em 0.3em;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-code-border);
+}
+pre {
+  font-family: var(--font-code);
+  background: var(--color-code-bg);
+  border: 1px solid var(--color-code-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+  margin: var(--space-4) 0;
+  overflow-x: auto;
+  line-height: var(--leading-normal);
+}
+pre code {
+  background: transparent;
+  padding: 0;
+  border: 0;
+  font-size: var(--text-sm);
+}
+
+/* ===== Links ===== */
+a {
+  color: var(--color-link);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.15em;
+}
+a:hover {
+  text-decoration-thickness: 2px;
+}
+
+/* ===== Lists ===== */
+ul, ol {
+  margin: 0 0 var(--space-4) 0;
+  padding-left: var(--space-6);
+}
+li {
+  margin-bottom: var(--space-1);
+}
+
+/* ===== Text emphasis ===== */
+small { font-size: var(--text-sm); }
+em { font-style: italic; }
+strong { font-weight: 600; }
+
+/* ===== Blockquotes ===== */
+blockquote {
+  margin: var(--space-4) 0;
+  padding: 0 var(--space-4);
+  border-left: var(--border-bar) solid var(--color-border);
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+
+/* ===== Horizontal rule ===== */
+hr {
+  border: 0;
+  border-top: 1px solid var(--color-border);
+  margin: var(--space-8) 0;
+}
+
+/* ===== Tables ===== */
+table {
+  border-collapse: collapse;
+  margin: var(--space-4) 0;
+  font-size: var(--text-sm);
+}
+th, td {
+  text-align: left;
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--color-border);
+}
+th {
+  font-weight: 600;
+  color: var(--color-heading);
+}