remarque-tokens 0.2.0

package/tokens-core.css

@@ -0,0 +1,330 @@
+/*
+ * Remarque Design Tokens — CORE TIER
+ * ───────────────────────────────────
+ * The immutable identity of Remarque: type scale, rhythm, spacing,
+ * widths, radius, and motion — plus the typography/prose machinery
+ * that consumes them.
+ *
+ * CONTRACT: a site that overrides tokens in THIS file has forked
+ * Remarque. Personalization happens exclusively in tokens-palette.css
+ * (fonts, colors, accent, reading measure). See "Token Tiers" in
+ * REMARQUE.md.
+ *
+ * Import via the aggregator (tokens.css) or directly:
+ *   @import 'fonts.css';
+ *   @import 'tokens-core.css';
+ *   @import 'tokens-palette.css';
+ */
+
+:root {
+  /* Type scale — fluid where it matters, fixed where it doesn't */
+  --text-display: clamp(2.75rem, 5.5vw, 5rem);
+  --text-title: clamp(1.875rem, 3.5vw, 3rem);
+  --text-section: clamp(1.375rem, 2.25vw, 2rem);
+  --text-body-lg: 1.1875rem;    /* 19px — for lead paragraphs */
+  --text-body: 1.0625rem;       /* 17px — minimum body size, non-negotiable */
+  --text-meta: 0.875rem;        /* 14px — USWDS minimum for small text */
+  --text-micro: 0.8125rem;      /* 13px — USWDS floor for timestamps only */
+
+  /* Line heights — matched to their type roles */
+  --leading-display: 1.05;
+  --leading-title: 1.15;
+  --leading-section: 1.2;
+  --leading-body: 1.75;         /* generous — this is what makes prose readable */
+  --leading-meta: 1.5;          /* USWDS minimum for short text */
+
+  /* Letter spacing */
+  --tracking-display: -0.02em;
+  --tracking-title: -0.015em;
+  --tracking-body: 0em;
+  --tracking-meta: 0.02em;      /* mono metadata gets slight tracking */
+  --tracking-caps: 0.06em;      /* for any rare uppercase labels */
+
+  /* Font weights */
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+
+  /* Spacing scale — deliberately generous */
+  --space-1: 0.25rem;    /*  4px */
+  --space-2: 0.5rem;     /*  8px */
+  --space-3: 0.75rem;    /* 12px */
+  --space-4: 1rem;       /* 16px */
+  --space-5: 1.5rem;     /* 24px */
+  --space-6: 2rem;       /* 32px */
+  --space-7: 3rem;       /* 48px */
+  --space-8: 4rem;       /* 64px */
+  --space-9: 6rem;       /* 96px  — minimum top padding before main heading */
+  --space-10: 8rem;      /* 128px */
+  --space-11: 10rem;     /* 160px */
+  --space-12: 12rem;     /* 192px */
+
+  /* Layout container widths.
+     (--content-reading, the prose measure, lives in the PALETTE tier —
+      it is tuned to the body font and moves with it. These two do not.) */
+  --content-standard: 72rem;    /* ~1152px — project pages, wider layouts */
+  --content-wide: 88rem;        /* ~1408px — outer container, navigation context */
+
+  /* Border radius — restrained */
+  --radius-sm: 0.25rem;         /* 4px — subtle rounding */
+  --radius-md: 0.5rem;          /* 8px — maximum for any component */
+  --radius-none: 0;
+
+  /* Borders */
+  --border-width: 1px;
+  --border-style: solid;
+
+  /* Motion — minimal, functional only */
+  /* All sanctioned motion MUST use these tokens; the reduced-motion
+     block below zeroes them, disabling motion system-wide. */
+  --motion-fast: 120ms;         /* hover states, focus rings */
+  --motion-normal: 180ms;       /* theme transitions */
+  --motion-easing: ease-out;
+}
+
+/* ─── Reduced Motion ────────────────────────────────────── */
+/*
+ * WCAG 2.3.3 / vestibular safety. Because every sanctioned transition
+ * uses the two duration tokens, zeroing them disables all motion.
+ * Any future opt-in animation must be authored inside a
+ * (prefers-reduced-motion: no-preference) query.
+ */
+
+@media (prefers-reduced-motion: reduce) {
+  :root,
+  [data-theme="light"],
+  [data-theme="dark"] {
+    --motion-fast: 0ms;
+    --motion-normal: 0ms;
+  }
+}
+
+/* ─── Base Resets ────────────────────────────────────────── */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: var(--font-body);
+  font-size: 100%;
+  line-height: var(--leading-body);
+  color: var(--color-fg);
+  background-color: var(--color-bg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+::selection {
+  background-color: var(--color-selection-bg);
+  color: var(--color-selection-fg);
+}
+
+/* ─── Global Typography Classes ─────────────────────────── */
+
+.text-display {
+  font-family: var(--font-display);
+  font-size: var(--text-display);
+  line-height: var(--leading-display);
+  letter-spacing: var(--tracking-display);
+  font-weight: var(--weight-regular);
+}
+
+.text-title {
+  font-family: var(--font-display);
+  font-size: var(--text-title);
+  line-height: var(--leading-title);
+  letter-spacing: var(--tracking-title);
+  font-weight: var(--weight-regular);
+}
+
+.text-section {
+  font-family: var(--font-display);
+  font-size: var(--text-section);
+  line-height: var(--leading-section);
+  letter-spacing: var(--tracking-title);
+  font-weight: var(--weight-medium);
+}
+
+.text-body {
+  font-family: var(--font-body);
+  font-size: var(--text-body);
+  line-height: var(--leading-body);
+  letter-spacing: var(--tracking-body);
+  font-weight: var(--weight-regular);
+}
+
+.text-body-lg {
+  font-family: var(--font-body);
+  font-size: var(--text-body-lg);
+  line-height: var(--leading-body);
+  letter-spacing: var(--tracking-body);
+  font-weight: var(--weight-regular);
+}
+
+.text-meta {
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  line-height: var(--leading-meta);
+  letter-spacing: var(--tracking-meta);
+  font-weight: var(--weight-regular);
+  color: var(--color-muted);
+}
+
+/* ─── Content Width Utilities ───────────────────────────── */
+
+.content-reading {
+  max-width: var(--content-reading);
+  margin-inline: auto;
+}
+
+.content-standard {
+  max-width: var(--content-standard);
+  margin-inline: auto;
+}
+
+.content-wide {
+  max-width: var(--content-wide);
+  margin-inline: auto;
+}
+
+/* ─── Prose Styling ─────────────────────────────────────── */
+/*
+ * Apply .remarque-prose to any container with article/essay content.
+ * Handles all typographic details for long-form reading.
+ */
+
+.remarque-prose {
+  font-family: var(--font-body);
+  font-size: var(--text-body);
+  line-height: var(--leading-body);
+  color: var(--color-fg);
+  max-width: var(--content-reading);
+}
+
+.remarque-prose > * + * {
+  margin-top: var(--space-5);
+}
+
+.remarque-prose > :first-child {
+  margin-top: 0;
+}
+
+.remarque-prose h2 {
+  font-family: var(--font-display);
+  font-size: var(--text-section);
+  line-height: var(--leading-section);
+  letter-spacing: var(--tracking-title);
+  font-weight: var(--weight-medium);
+  margin-top: var(--space-7);
+  margin-bottom: var(--space-3);
+  color: var(--color-fg);
+}
+
+.remarque-prose h3 {
+  font-family: var(--font-body);
+  font-size: var(--text-body-lg);
+  line-height: var(--leading-title);
+  font-weight: var(--weight-semibold);
+  margin-top: var(--space-6);
+  margin-bottom: var(--space-2);
+  color: var(--color-fg);
+}
+
+.remarque-prose a {
+  color: var(--color-link);
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+  text-decoration-thickness: 1px;
+  transition: color var(--motion-fast) var(--motion-easing);
+}
+
+.remarque-prose a:hover {
+  color: var(--color-link-hover);
+}
+
+.remarque-prose strong {
+  font-weight: var(--weight-semibold);
+}
+
+.remarque-prose em {
+  font-style: italic;
+}
+
+.remarque-prose blockquote {
+  border-left: 2px solid var(--color-border-bold);
+  padding-left: var(--space-5);
+  margin-left: 0;
+  color: var(--color-fg-muted);
+  font-style: italic;
+}
+
+.remarque-prose ul,
+.remarque-prose ol {
+  padding-left: var(--space-5);
+}
+
+.remarque-prose li + li {
+  margin-top: var(--space-2);
+}
+
+.remarque-prose code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background-color: var(--color-code-bg);
+  padding: 0.15em 0.35em;
+  border-radius: var(--radius-sm);
+  color: var(--color-code-fg);
+}
+
+.remarque-prose pre {
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  line-height: 1.6;
+  background-color: var(--color-code-bg);
+  border: var(--border-width) var(--border-style) var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-5);
+  overflow-x: auto;
+}
+
+.remarque-prose pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+}
+
+.remarque-prose hr {
+  border: none;
+  border-top: var(--border-width) var(--border-style) var(--color-border);
+  margin: var(--space-8) 0;
+}
+
+.remarque-prose img {
+  max-width: 100%;
+  height: auto;
+  border: var(--border-width) var(--border-style) var(--color-border);
+  border-radius: var(--radius-sm);
+}
+
+.remarque-prose figcaption {
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  line-height: var(--leading-meta);
+  letter-spacing: var(--tracking-meta);
+  color: var(--color-muted);
+  margin-top: var(--space-2);
+}
+
+/* ─── Focus Styles ──────────────────────────────────────── */
+
+:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+  transition: outline-color var(--motion-fast) var(--motion-easing);
+}

package/tokens-palette.css

@@ -0,0 +1,128 @@
+/*
+ * Remarque Design Tokens — PALETTE TIER
+ * ──────────────────────────────────────
+ * The sanctioned personalization surface: font slots, colors, accent,
+ * and the reading measure. A site may override ANY token in this file
+ * (in its own stylesheet, loaded after this one) and still be a
+ * compliant Remarque site. Overriding tokens-core.css is a fork.
+ *
+ * RULES FOR OVERRIDES:
+ *   - Font slots: choose from the approved pairings in REMARQUE.md
+ *     ("Font Slots"). Display faces never set body copy; mono never
+ *     sets headings or body.
+ *   - --content-reading: pick the value matching your body font from
+ *     the measure-compensation table in REMARQUE.md (target 66–72
+ *     characters per line at --text-body).
+ *   - Colors: every replacement palette must pass the contrast audit
+ *     (npm run audit) — fg-muted ≥ 7:1, muted ≥ 4.5:1 on bg AND
+ *     surface, accent + accent-hover ≥ 4.5:1, border-bold ≥ 3:1,
+ *     in BOTH themes.
+ *   - Accent: change the hue by re-deriving accent/accent-hover/
+ *     accent-subtle/selection at the SAME lightness values used here,
+ *     then validate — lightness carries the contrast, hue carries the
+ *     personality. Not every hue passes at every lightness (yellows/
+ *     cyans behave differently than blues); the audit is the gate.
+ */
+
+/* ─── Font Slots ────────────────────────────────────────── */
+
+:root {
+  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
+  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Fira Code", monospace;
+
+  /* Reading measure — tuned to the body font (see REMARQUE.md measure table).
+     46rem ≈ 70 characters per line at 17px Inter. */
+  --content-reading: 46rem;
+}
+
+/* ─── Color: Light theme (default) ──────────────────────── */
+/*
+ * Colors use OKLCH for perceptual uniformity.
+ * The palette is deliberately narrow: warm neutrals + one accent.
+ *
+ * Accent rule: used for inline links and ONE interactive element per
+ * viewport. No accent backgrounds, no accent borders, no accent fills.
+ *
+ * Contrast ratios in comments are computed WCAG 2.x values
+ * (OKLCH → linear sRGB → relative luminance); the audit script
+ * (scripts/audit.mjs) recomputes and enforces them in CI.
+ */
+
+:root {
+  --color-bg:          oklch(0.975 0.005 80);    /* warm off-white, not pure white */
+  --color-bg-subtle:   oklch(0.955 0.005 80);    /* slightly darker for alternating sections */
+  --color-fg:          oklch(0.18 0.01 80);       /* near-black, warm undertone */
+  --color-fg-muted:    oklch(0.43 0.015 80);      /* secondary text — 7.55:1 bg / 7.33:1 surface (AAA) */
+  --color-muted:       oklch(0.54 0.01 80);       /* tertiary text — 4.71:1 bg / 4.57:1 surface (AA) */
+  --color-border:      oklch(0.88 0.005 80);      /* quiet borders — DECORATIVE ONLY (1.34:1, below WCAG 1.4.11's 3:1); functional boundaries use --color-border-bold */
+  --color-border-bold: oklch(0.62 0.01 80);       /* functional/emphasized borders — 3.39:1 (meets WCAG 1.4.11) */
+  --color-surface:     oklch(0.965 0.005 80);     /* card/surface backgrounds */
+
+  --color-accent:      oklch(0.50 0.14 250);      /* muted blue — links and one interactive element */
+  --color-accent-hover: oklch(0.42 0.11 250);     /* darker on hover — 7.87:1, in-gamut (0.14 chroma clipped) */
+  --color-accent-subtle: oklch(0.95 0.02 250);    /* very faint accent background — in-gamut (0.03 chroma clipped) */
+
+  /* Semantic mappings */
+  --color-link:        var(--color-accent);
+  --color-link-hover:  var(--color-accent-hover);
+  --color-focus-ring:  var(--color-accent);
+  --color-selection-bg: oklch(0.92 0.04 250);
+  --color-selection-fg: var(--color-fg);
+  --color-code-bg:     oklch(0.945 0.005 80);     /* inline code background */
+  --color-code-fg:     var(--color-fg);
+}
+
+/* ─── Color: Dark theme ─────────────────────────────────── */
+/*
+ * Dark mode is NOT an inverted light mode.
+ * It is independently tuned for readability on dark backgrounds.
+ * Key differences:
+ *   - Background is warm dark gray, never pure black
+ *   - Text is softened to reduce glare (not pure white)
+ *   - Accent is brighter to maintain contrast
+ *   - Borders are subtler
+ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg:          oklch(0.16 0.01 80);     /* warm charcoal, not black */
+    --color-bg-subtle:   oklch(0.19 0.01 80);
+    --color-fg:          oklch(0.90 0.005 80);    /* soft white, not pure */
+    --color-fg-muted:    oklch(0.70 0.01 80);    /* 7.26:1 bg (AAA) */
+    --color-muted:       oklch(0.60 0.01 80);    /* 4.92:1 bg / 4.68:1 surface (AA with margin) */
+    --color-border:      oklch(0.25 0.005 80);   /* decorative only — see light-theme note */
+    --color-border-bold: oklch(0.50 0.01 80);    /* functional borders — 3.23:1 (meets WCAG 1.4.11) */
+    --color-surface:     oklch(0.19 0.01 80);
+
+    --color-accent:      oklch(0.68 0.12 250);    /* brighter in dark mode for contrast */
+    --color-accent-hover: oklch(0.75 0.12 250);
+    --color-accent-subtle: oklch(0.22 0.04 250);
+
+    --color-selection-bg: oklch(0.30 0.06 250);
+    --color-selection-fg: oklch(0.92 0.005 80);
+    --color-code-bg:     oklch(0.20 0.005 80);
+    --color-code-fg:     oklch(0.88 0.005 80);
+  }
+}
+
+/* Manual dark mode toggle support */
+[data-theme="dark"] {
+  --color-bg:          oklch(0.16 0.01 80);
+  --color-bg-subtle:   oklch(0.19 0.01 80);
+  --color-fg:          oklch(0.90 0.005 80);
+  --color-fg-muted:    oklch(0.70 0.01 80);
+  --color-muted:       oklch(0.60 0.01 80);
+  --color-border:      oklch(0.25 0.005 80);
+  --color-border-bold: oklch(0.50 0.01 80);
+  --color-surface:     oklch(0.19 0.01 80);
+
+  --color-accent:      oklch(0.68 0.12 250);
+  --color-accent-hover: oklch(0.75 0.12 250);
+  --color-accent-subtle: oklch(0.22 0.04 250);
+
+  --color-selection-bg: oklch(0.30 0.06 250);
+  --color-selection-fg: oklch(0.92 0.005 80);
+  --color-code-bg:     oklch(0.20 0.005 80);
+  --color-code-fg:     oklch(0.88 0.005 80);
+}

package/tokens.css

@@ -0,0 +1,24 @@
+/*
+ * Remarque Design Tokens — AGGREGATOR
+ * ────────────────────────────────────
+ * Backwards-compatible entry point. As of the Phase 1 restructuring
+ * (issue #47), tokens live in two tiers:
+ *
+ *   tokens-core.css     — the immutable identity (type scale, spacing,
+ *                         widths, radius, motion, prose machinery).
+ *                         Overriding these = forking Remarque.
+ *   tokens-palette.css  — the sanctioned personalization surface
+ *                         (font slots, colors, accent, reading measure).
+ *                         Override freely in a stylesheet loaded after
+ *                         this one; validate with `npm run audit`.
+ *
+ * Usage (fonts first — see fonts.css):
+ *   @import 'fonts.css';
+ *   @import 'tokens.css';
+ *   ...then optionally your site's palette overrides, loaded last.
+ *
+ * Existing imports of tokens.css keep working unchanged.
+ */
+
+@import './tokens-core.css';
+@import './tokens-palette.css';