remarque-tokens 0.13.0 → 0.14.0

package/CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to `remarque-tokens` are documented here. Token value
 changes always state the design rationale — downstream sites pin against
 these entries when syncing.
 
+## 0.14.0 — 2026-07-23
+
+Triage bundle — prose/`.content-reading` pairing documented, `--motion-easing` bridged into the Tailwind v4 utility layer, USWDS/WCAG source citations added to the accessibility section (closes #23, closes #31, closes #32).
+
+### Added
+- **`ease-remarque` Tailwind v4 utility** — `theme.css`'s `@theme inline` block now maps `--ease-remarque: var(--motion-easing)`, mirroring the `transitionTimingFunction.remarque` mapping the v3 `tailwind.config.js` already carried. Utility-class users of `duration-[var(--motion-fast)]` previously fell back to Tailwind's default `ease` timing function instead of the token (#31).
+- **Demo site** — every `duration-[var(--motion-fast)]` call site (22, across `site/src/pages/*`, `layouts/BaseLayout.astro`, `components/Meta.astro`) now pairs with `ease-remarque` so the rendered CSS carries `var(--motion-easing)` instead of Tailwind's default.
+
+### Documentation
+- **REMARQUE.md "Editorial Microtypography"** — states that `.remarque-prose` is typography-only (font, line height, numeral register, optical wrapping) and does not center the column; pair it with `.content-reading`, with a minimal code sample (#23).
+- **REMARQUE.md "USWDS Accessibility Compliance"** — every cited WCAG 2.1 success criterion (1.4.3 Contrast Minimum, 1.4.11 Non-text Contrast, 2.5.5 Target Size, 2.3.3 Animation from Interactions, the last in the adjacent "Motion Rules" section) and USWDS claim (16px font-size floor, the overall accessibility approach) now links to its source (`w3.org/WAI/WCAG21/Understanding/*`, `designsystem.digital.gov`) (#32).
+
 ## 0.13.0 — 2026-07-23
 
 Syntax-highlighting palette — 9 `--color-syntax-*` slots, ANSI-derived, golden-gated (closes #53; consensus-ratified 3-0 with a binding taxonomy design record, 2026-07-23).

package/README.md

@@ -119,6 +119,39 @@ See the [live demo](https://williamzujkowski.github.io/remarque/) for the origin
 | Border radius | 0.5rem max | Restrained. No "friendly SaaS" over-rounding |
 | Motion | 120ms/180ms | Hover and theme transitions only. No scroll-triggered, entrance, or staggered animations |
 
+## Graduation — when a site invention becomes system vocabulary
+
+Consumer sites invent things (the flagship's sidenotes and theme deck, tsundoku's gallery
+grid). Some of those inventions belong upstream; most are the site's own remarque in the
+margin and should stay there. A local invention is upstreamable when **all four** hold:
+
+1. **Wanted by 2+ sites** (or one site plus a ratified case that it generalizes).
+2. **Consumes only tokens** — no hardcoded colors, sizes, or faces.
+3. **Passes the audit tooling** (`remarque-audit`, and `remarque-drift` reports it as
+   palette-tier INFO, not a core FAIL).
+4. **Violates no Never-list entry** in the spec — or arrives together with an explicit
+   spec amendment arguing the change.
+
+**Three destinations.** Core spec (rare — core is identity, the bar is a fork-level
+argument); optional module (sidenotes, TOC rail, palette deck); or *documented site-local
+pattern* — explicitly not shared. The zine layer that inspired this checklist is the
+exemplar of the third: sanctioned personality that would be diluted by generalizing it.
+
+**Process (single-maintainer scale, no ceremony):** open an issue with before/after
+screenshots and the token-purity check; record the decision in the changelog. Historical
+examples: measure compensation and the Gallery archetype graduated; the theme deck was
+re-scoped on the way up ([#56](https://github.com/williamzujkowski/remarque/issues/56));
+the zine layer deliberately stayed local.
+
+**Standing rulings** (ratified 3-0, 2026-07-23) on patterns the reviews kept re-flagging:
+
+| Pattern | Ruling |
+|---------|--------|
+| Share links in post footers | Site-local, never a system module. If you build one: URL-encode every interpolated value and reject non-`https` schemes — title/frontmatter injection into share-intent URLs is the classic mistake. |
+| Cross-hue hover accents | Not sanctioned anywhere. The hover move is a lightness/chroma shift within the accent hue (`--color-accent-hover` models it). A cross-hue hover is a documented deviation, not personalization. |
+| Ambient/decorative animation | Site-local only, never in system modules — and the `prefers-reduced-motion` guard is mandatory, not advisory. A future audit scan may flag unguarded infinite animations (as a heuristic check, not a soundness proof). |
+| Landing-page entry counts | Permitted as meta-voice data in the Landing archetype **only when computed from real inventory at build time**. A hardcoded count is a violation — counts drift (see the upstream count-drift bug class this system just fixed in its own theme provider). |
+
 ## Named For
 
 In fine art printmaking, a *remarque* is a small original drawing made by the artist in the margin of a proof print. Found only in limited editions, it is the mark that says: this was made by someone specific, with intention.

package/REMARQUE.md

@@ -124,6 +124,14 @@ This is why the measure is palette-tier: it is a property of the font choice, no
 
 The book-craft layer: numerals, small caps, drop caps, pull quotes, and optical wrapping. These are the details that separate typeset prose from a web page that merely uses nice fonts.
 
+`.remarque-prose` supplies typography only — font, line height, numeral register, optical wrapping — and stops short of centering the column, so pair it with `.content-reading` wherever the reading column needs to sit centered on the page:
+
+```html
+<div class="remarque-prose content-reading">
+  <!-- article body -->
+</div>
+```
+
 ### Numerals
 
 Two numeral registers, chosen by context:
@@ -353,19 +361,19 @@ Motion in Remarque is nearly invisible. The only permitted motion:
 - Parallax effects
 - Any animation on non-interactive elements
 
-**Reduced motion:** all motion must respect `prefers-reduced-motion` (WCAG 2.3.3). Because every sanctioned transition uses the two duration tokens, tokens.css zeroes `--motion-fast`/`--motion-normal` under `prefers-reduced-motion: reduce` — motion authored with the tokens is automatically safe. Never hardcode durations; any future opt-in animation must live inside a `(prefers-reduced-motion: no-preference)` query.
+**Reduced motion:** all motion must respect `prefers-reduced-motion` ([WCAG 2.3.3](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html)). Because every sanctioned transition uses the two duration tokens, tokens.css zeroes `--motion-fast`/`--motion-normal` under `prefers-reduced-motion: reduce` — motion authored with the tokens is automatically safe. Never hardcode durations; any future opt-in animation must live inside a `(prefers-reduced-motion: no-preference)` query.
 
 ---
 
 ## USWDS Accessibility Compliance
 
-Remarque adopts typography and accessibility standards from the US Web Design System (USWDS) and WCAG 2.1:
+Remarque adopts typography and accessibility standards from the [US Web Design System (USWDS)](https://designsystem.digital.gov/documentation/accessibility/) and [WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/):
 
 ### Font Size Floors
 
 | Token | Value | USWDS Rationale |
 |-------|-------|-----------------|
-| `--text-body` | 17px (1.0625rem) | Exceeds USWDS 16px minimum. Non-negotiable floor. |
+| `--text-body` | 17px (1.0625rem) | Exceeds [USWDS 16px minimum](https://designsystem.digital.gov/components/typography/). Non-negotiable floor. |
 | `--text-meta` | 14px (0.875rem) | USWDS minimum for small text. Used sparingly for metadata, labels, captions. |
 | `--text-micro` | 13px (0.8125rem) | USWDS floor for timestamps and fine print only. Never for body content. |
 
@@ -373,13 +381,13 @@ Remarque adopts typography and accessibility standards from the US Web Design Sy
 
 | Pairing | Requirement | Notes |
 |---------|-------------|-------|
-| Normal text on background | 4.5:1 minimum | All text below 24px regular / 18.5px bold. Applies on `--color-surface` too, not just `--color-bg` |
-| Large text on background | 3:1 minimum | Display and title text (24px+) |
-| Functional non-text elements | 3:1 minimum | WCAG 1.4.11 — use `--color-border-bold` (meets 3:1). `--color-border` is decorative-only by design and exempt; never the sole boundary of an interactive element |
+| Normal text on background | 4.5:1 minimum | [WCAG 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) — all text below 24px regular / 18.5px bold. Applies on `--color-surface` too, not just `--color-bg` |
+| Large text on background | 3:1 minimum | [WCAG 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) — display and title text (24px+) |
+| Functional non-text elements | 3:1 minimum | [WCAG 1.4.11](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) — use `--color-border-bold` (meets 3:1). `--color-border` is decorative-only by design and exempt; never the sole boundary of an interactive element |
 
 ### Touch Targets
 
-All interactive elements (links, buttons, inputs) must have a minimum touch target of **44x44px** (WCAG 2.5.5 AAA). This applies to nav links, theme toggles, footer links, chips, and any clickable element.
+All interactive elements (links, buttons, inputs) must have a minimum touch target of **44x44px** ([WCAG 2.5.5](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html) AAA). This applies to nav links, theme toggles, footer links, chips, and any clickable element.
 
 ### Line Height
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remarque-tokens",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "engines": {
     "node": ">=18"
   },

package/theme.css

@@ -24,6 +24,9 @@
  * is never overridden (mt-12 stays 3rem; use mt-remarque-9 for 6rem).
  * Motion utilities: use arbitrary values with the tokens —
  * duration-[var(--motion-fast)] — so reduced-motion zeroing applies.
+ * Pair every duration-[var(--motion-*)] utility with ease-remarque
+ * (mapped below from --motion-easing) — without it Tailwind falls back
+ * to its default `ease` timing function instead of the token (issue #31).
  */
 
 @theme inline {
@@ -74,4 +77,8 @@
   /* Radius (rounded-sm / rounded-md — the system's ceiling) */
   --radius-sm: var(--radius-sm);
   --radius-md: var(--radius-md);
+
+  /* Easing (ease-remarque) — pair with duration-[var(--motion-*)] so
+     transitions use the token instead of Tailwind's default `ease` */
+  --ease-remarque: var(--motion-easing);
 }

package/tokens.d.ts

@@ -1,6 +1,6 @@
 /*
  * Remarque design tokens — GENERATED from tokens.json by
- * scripts/tokens-json.mjs (v0.13.0). Do not edit — the CSS
+ * scripts/tokens-json.mjs (v0.14.0). Do not edit — the CSS
  * (tokens-core.css + tokens-palette.css) is the source of truth;
  * tokens.json is the intermediate machine-readable form this file is
  * generated from. Regenerate with: node scripts/tokens-json.mjs

package/tokens.json

@@ -2,7 +2,7 @@
   "$description": "Remarque design tokens — GENERATED from tokens-core.css + tokens-palette.css by scripts/tokens-json.mjs. Do not edit; the CSS is the source of truth.",
   "$extensions": {
     "remarque": {
-      "version": "0.13.0",
+      "version": "0.14.0",
       "tiers": {
         "core": "immutable identity — overriding forks the system",
         "palette": "sanctioned personalization surface — override freely, then run remarque-audit"