@dataimago/tokens 0.1.0-alpha.4 → 0.1.0-alpha.48

package/src/theme-colors.json

@@ -16,10 +16,15 @@
         "dark": "#1c1917",
         "description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
       },
+      "figure-plate": {
+        "light": "#f7f7f6",
+        "dark": "#dcdcda",
+        "description": "Figure plate: the ground a .box figure sits on, in HTML (figure img.box, the figure modal) and the PDF (di-figure-plate). Figures are dark ink and Okabe-Ito colours drawn for a light ground, so the plate stays light in dark mode, dimmed one step to cut glare: stone-50 (light) / stone-200 (dark). Dark-mode plate #dcdcda: dark ink 13.5:1, okabe-ito blue 3.8, vermillion 2.8, bluish-green 2.5, reddish-purple 2.2, sky-blue 1.7, orange 1.6 (the light plate's 4.8/3.6/3.2/2.9/2.2/2.1); the light content.secondary frame 3.9:1 on it. Hue separation is checked plate-independently by the data-viz colour-blind gate. Maintainer decision 2026-11-01 (dimmed light plate); a 42%-white mix over the dark page (#777774) was rejected (colours ~1.2:1)."
+      },
       "sunken": {
-        "light": "#faf2e3",
+        "light": "#f7f7f6",
         "dark": "#0c0a09",
-        "description": "Input fields, code blocks — below page level"
+        "description": "Input fields and insets. Light: the card colour, stone-50 (since 2026-11-02; it was the warm paper-200 #faf2e3). Dark: ink-900, below the page. Code blocks use surface.code."
       },
       "navbar": {
         "light": "#ededeb",
@@ -32,36 +37,76 @@
         "description": "Navbar when scrolled/shrunk — matches page-scrolled"
       },
       "code": {
-        "light": "#faf2e3",
+        "light": "#f7f7f6",
         "dark": "#1c1917",
-        "description": "Code block and inline code background"
+        "description": "Code block and inline code background: the card colour (surface.elevated) in both modes, so code reads as a card on the page (2026-11-02; light mode was the warm paper-200 #faf2e3)"
+      },
+      "scrim": {
+        "light": "rgba(20, 20, 16, 0.85)",
+        "dark": "rgba(20, 20, 16, 0.85)",
+        "description": "Figure viewer backdrop. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Ink-900-ish at 0.85, drawn under a 3px blur; measured composited over the page, on-scrim text is 11.5:1 on the light page and 17.2:1 on the dark (gated by tools/contrast-check.mjs, 2026-11-03). Older browsers (Chrome < 122, Safari < 17.4, Firefox < 120) do not let ::backdrop inherit custom properties from :root, so a consumer painting the scrim on ::backdrop should write a fallback, e.g. var(--color-surface-scrim, rgba(20, 20, 16, 0.85)); the house figure viewer draws its scrim on a div (.di-figure-modal), so it is not affected."
+      },
+      "scrim-solid": {
+        "light": "rgba(20, 20, 16, 0.92)",
+        "dark": "rgba(20, 20, 16, 0.92)",
+        "description": "Figure viewer backdrop where backdrop blur is unavailable (prefers-reduced-transparency, prefers-contrast: more and browsers without backdrop blur): the same ink at 0.92. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Gated by tools/contrast-check.mjs."
+      },
+      "print": {
+        "light": "#f7f7f6",
+        "dark": "#f7f7f6",
+        "description": "Printed paper: the paper-cover thumbnail, the light slide, the face of a video-play disc. It depicts a physical object (a printed page, a slide), so it is theme-invariant: light and dark carry the same value, and the paper does not darken with the page (the color.border.figure-frame precedent). stone-50, the card colour; the SGPc apps' own #f6f4ee is not a house colour and was mapped onto this step (maintainer decision 2026-11-03). Ink on it is content.on-print, held to 7:1 by tools/contrast-check.mjs. Paper reads as paper by its edge, not its colour: a print surface always carries --shadow-print or a hairline in border.print (the edge rule, maintainer decision 2026-11-03)."
+      },
+      "play-disc": {
+        "light": "rgba(247, 247, 246, 0.92)",
+        "dark": "rgba(247, 247, 246, 0.92)",
+        "description": "The video-play disc: surface.print at 0.92 alpha, over a poster frame or poster placeholder. It depicts a physical object, so it is theme-invariant: light and dark carry the same value. Its glyph is content.on-print (no separate token), held to 4.5:1 on the disc composited over each mode's page by tools/contrast-check.mjs, so the disc stays legible in dark mode."
+      },
+      "media": {
+        "light": "#000000",
+        "dark": "#000000",
+        "description": "The media letterbox: the ground behind a <video> and other media (an embedded player, a frame that does not fill its box). Pure black, not the house near-black (stone-900 #14140f, ink-900 #0c0a09): video frames carry true black, so a near-black ground shows the letterbox bars beside the frame's own black, and pure black hides them. It depicts the media frame, not the page, so it is theme-invariant: light and dark carry the same value (the color.surface.print precedent). Nothing is drawn on it, so it has no contrast floor; tools/contrast-check.mjs holds it to theme invariance (maintainer decision 2026-11-03)."
       }
     },
     "border": {
       "subtle": {
-        "light": "rgba(12, 10, 9, 0.08)",
-        "dark": "rgba(253, 249, 242, 0.08)",
-        "description": "Subtle borders — element separation"
+        "light": "rgba(12, 10, 9, 0.45)",
+        "dark": "rgba(253, 249, 242, 0.45)",
+        "description": "Subtle borders — element separation. THE ALPHA IS THE ROLE: border.subtle / moderate / strong / card share one base color and are distinguished by opacity alone, so a gamut conversion that drops the alpha channel collapses four semantic roles into one opaque value (this happened in 17995c3, #72, 2026-06-28). No number is quoted here on purpose: the scale is set by the founder decision recorded in wi-20260817-border-alpha-scale-retune and gated by tools/contrast-check.mjs at the WCAG 1.4.11 non-text threshold (3:1). Read the value, not this sentence."
       },
       "moderate": {
-        "light": "rgba(12, 10, 9, 0.15)",
-        "dark": "rgba(253, 249, 242, 0.15)",
-        "description": "Moderate borders — defined boundaries"
+        "light": "rgba(12, 10, 9, 0.60)",
+        "dark": "rgba(253, 249, 242, 0.60)",
+        "description": "Moderate borders — defined boundaries. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
       },
       "strong": {
-        "light": "rgba(12, 10, 9, 0.25)",
-        "dark": "rgba(253, 249, 242, 0.25)",
-        "description": "Strong borders — prominent separation"
+        "light": "rgba(12, 10, 9, 0.75)",
+        "dark": "rgba(253, 249, 242, 0.75)",
+        "description": "Strong borders — prominent separation. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
       },
       "card": {
-        "light": "rgba(12, 10, 9, 0.15)",
-        "dark": "rgba(253, 249, 242, 0.15)",
-        "description": "Card border color with transparency for subtle definition"
+        "light": "rgba(12, 10, 9, 0.60)",
+        "dark": "rgba(253, 249, 242, 0.60)",
+        "description": "Card border color with transparency for subtle definition. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
+      },
+      "figure-frame": {
+        "light": "#6a6a6a",
+        "dark": "#6a6a6a",
+        "description": "Figure frame: the 1px rule round a .box figure and the border of an enlarged figure in the figure modal. It sits on surface.figure-plate, which is light in both modes, so the frame keeps the light content.secondary value in both: 5.0:1 on the light plate #f7f7f6 and 3.9:1 on the dimmed dark-mode plate #dcdcda (WCAG 1.4.11 non-text, 3:1). The PDF's di-figure-frame is the same colour (2026-11-01)."
       },
       "code": {
         "light": "#d6d3d1",
         "dark": "#292524",
         "description": "Code block border"
+      },
+      "on-scrim-focus": {
+        "light": "#3498DB",
+        "dark": "#3498DB",
+        "description": "Focus ring on the figure viewer scrim. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). The slate accent's dark-mode value in both modes, because the scrim is dark in both. Held to 3:1 (WCAG 1.4.11) over both scrims and both page modes by tools/contrast-check.mjs."
+      },
+      "print": {
+        "light": "rgba(12, 10, 9, 0.45)",
+        "dark": "rgba(12, 10, 9, 0.45)",
+        "description": "The hairline edge of printed paper (surface.print): the paper-cover thumbnail, the light slide. THE EDGE RULE: paper reads as paper by its edge, not by its colour. surface.print is the card colour, so a print surface always carries either --shadow-print or a hairline in this token (maintainer decision 2026-11-03). It is drawn on the paper, which stays light in both modes, so it is theme-invariant: light and dark carry the same value (the color.border.figure-frame precedent). It starts from the light value of border.subtle, and as there the alpha is the role and no ratio is quoted on purpose: composited over surface.print it is held to the WCAG 1.4.11 non-text threshold (3:1) by tools/contrast-check.mjs. Read the value, not this sentence."
       }
     },
     "content": {
@@ -71,19 +116,29 @@
         "description": "Primary text — stone-900 on stone-100 (light, matches presentation-theme.scss exactly) / paper-100 on dark surface"
       },
       "secondary": {
-        "light": "#7c7c7c",
+        "light": "#6a6a6a",
         "dark": "#a8a29e",
-        "description": "Secondary text — stone-500 (light, matches presentation-theme.scss --color-secondary) / ink-300 on dark"
+        "description": "Secondary text — WCAG-AA on all light surfaces (≥4.6:1, darkened from stone-500 #7c7c7c which was 3.6:1) / ink-300 on dark"
       },
       "muted": {
-        "light": "#78716c",
-        "dark": "#78716c",
-        "description": "Muted text — captions, meta info"
+        "light": "#706964",
+        "dark": "#89827d",
+        "description": "Muted text — captions, meta info. WCAG-AA on all surfaces in both modes (darkened/lightened from #78716c which failed AA on page)"
       },
       "inverse": {
         "light": "#fdf9f2",
         "dark": "#0c0a09",
         "description": "Inverse text — for contrasting backgrounds"
+      },
+      "on-scrim": {
+        "light": "#f7f7f6",
+        "dark": "#f7f7f6",
+        "description": "Text and controls on the figure viewer scrim (stone-50). Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Held to 7:1 over both scrims and both page modes by tools/contrast-check.mjs."
+      },
+      "on-print": {
+        "light": "#14140f",
+        "dark": "#14140f",
+        "description": "Ink on surface.print, and the glyph on surface.play-disc (the play triangle takes this token; it has no separate one). stone-900. It depicts printed ink, so it is theme-invariant: light and dark carry the same value (the color.border.figure-frame precedent). Held to 7:1 on surface.print, and 4.5:1 on the play disc composited over each mode's page, by tools/contrast-check.mjs."
       }
     },
     "interactive": {
@@ -108,6 +163,28 @@
         "description": "Focus indicators — mirrors interactive.primary"
       }
     },
+    "state": {
+      "success": {
+        "light": "#007a58",
+        "dark": "#009E73",
+        "description": "State: success. Okabe-Ito bluish-green, darkened in light mode for text: 4.56:1 on page and 4.99:1 on card (dark 5.40 / 5.11). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
+      },
+      "warning": {
+        "light": "#906306",
+        "dark": "#E69F00",
+        "description": "State: warning. Okabe-Ito orange, darkened in light mode to an amber that holds text contrast: 4.51:1 on page and 4.93:1 on card (dark 8.20 / 7.76). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
+      },
+      "error": {
+        "light": "#a4262c",
+        "dark": "#ef5350",
+        "description": "State: error. Red rather than Okabe-Ito vermillion: darkened vermillion collapses into the amber warning under deuteranopia (ΔE 2.0). 6.2:1 on page in light mode (dark 5.30 / 5.02). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
+      },
+      "info": {
+        "light": "#1f618d",
+        "dark": "#3498DB",
+        "description": "State: info. The house slate accent (interactive.accent), so notes and info read slate-blue against the stone surfaces: 5.68:1 on page in light mode (dark 5.86). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
+      }
+    },
     "presentation": {
       "accent": {
         "light": "#3498DB",
@@ -119,6 +196,32 @@
         "dark": "#2980B9",
         "description": "Presentation accent hover/emphasized variant — Flat-UI belize-hole"
       }
+    },
+    "vertical-accent": {
+      "$comment": "Per-vertical brand accents — each Level-2 property's identity color, distinct from the house interactive.accent (the L1 sky-blue hub color). Mode-aware (light/dark stops) like interactive.accent. Used for app icons, navbar-logo emphasis, and per-vertical theming. Contrast vs surface.page verified WCAG: light values are the on-light marks, dark values the on-dark marks. dataimago (L1 hub) intentionally has no vertical accent — it uses interactive.accent + ink.",
+      "dissertation": {
+        "light": "#B87333",
+        "dark": "#CE8E5C",
+        "description": "dissertation-ai — copper (manuscript / annotation / the human hand in the margin). Light: 3.23:1 on stone-100 (AA-large; large-mark use). Dark: #CE8E5C 6.72:1 on ink-900 (AA)."
+      },
+      "rpkg": {
+        "light": "#3B82F6",
+        "dark": "#60A5FA",
+        "description": "rpkg-ai — engineering blue. Light: 3.14:1 on stone-100 (AA-large; large-mark use). Dark: #60A5FA 7.26:1 on ink-900 (AA)."
+      },
+      "SGPc": {
+        "light": "#5A6310",
+        "dark": "#B2BF22",
+        "description": "SGPc-ai — growth yellow-green (decided 2026-06-26). The brand value is the bright #B2BF22, but it fails contrast on light surfaces (1.73:1), so LIGHT mode uses the darkened companion #5A6310 (5.55:1 on stone-100 — full AA) and DARK mode uses the bright #B2BF22 (9.12:1 on ink-900). See wiki/decisions/sgpc-accent.md."
+      }
+    },
+    "brand-mark": {
+      "$comment": "Brand-MARK colors (the dataimago monogram / wordmark logo treatment) — distinct from the interactive.accent role. The signature monogram red is a wide-gamut PILOT (see wiki/decisions/p3-oklch-color.md). It is mode-aware for AA-normal headroom: a single red cannot clear 4.5:1 on BOTH the light page (#ededeb) and ink-900 — light needs a deep red, dark needs a bright one. LIGHT uses the deepened #cc0000 (faithful P3, contrast-first); DARK keeps the vivid display-P3 primary red (#ff0000 fallback → color(display-p3 1 0 0)), where #ff0000 already passes AA-normal. Vivid override authored in tools/color-converter.mjs (dark-only for the red), emitted as a `#hex → color(display-p3 …)` cascade in the -p3 build.",
+      "red": {
+        "light": "#cc0000",
+        "dark": "#ff0000",
+        "description": "Signature monogram red — mode-aware for AA-normal. LIGHT: deepened #cc0000 (5.0:1 on stone-100 #ededeb / 5.5:1 on elevated — full AA-normal, safe at small sizes / as text). DARK: vivid #ff0000 fallback + display-P3 primary red (4.6:1 on ink-900 — AA-normal). Logo-mark color only — NOT the interactive accent (which is iteration-2 blue). Large navbar lift-wash marks keep the vivid display-P3 red (AA-large, large-mark use); this token is the AA-normal value for arbitrary/small mark reuse."
+      }
     }
   }
 }

package/src/typography.json

@@ -2,23 +2,23 @@
   "font": {
     "family": {
       "sans": {
-        "value": "Noto Sans, Fira Sans, system-ui, sans-serif",
-        "description": "Primary sans-serif font - body text"
+        "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
+        "description": "Primary sans-serif font - body text. Noto Sans Math is second so a glyph Noto Sans lacks (arrows such as U+2192, maths operators) is drawn by the shipped Noto, not a system font; a page downloads the maths face only when it needs such a glyph. Fira Sans, a leftover of the ai-native extension, was dropped (2026-11-01)."
       },
       "mono": {
-        "value": "JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace",
-        "description": "Monospace font - code blocks and technical content"
+        "value": "Noto Sans Mono, SF Mono, Monaco, Inconsolata, monospace",
+        "description": "Noto Sans Mono — code blocks and technical content; matches the shipped font"
       },
       "display": {
         "value": "var(--font-family-display-editorial)",
-        "description": "DEPRECATED alias of display-editorial; preserved through 0.2.x and removed in 0.3.0. New code should reference --font-family-display-editorial or --font-family-display-documentation directly. See wiki/decisions/display-family-split.md."
+        "description": "Alias of display-editorial, and the load-bearing indirection .di-prose rebinds to swap a whole surface to the documentation family — do NOT rewrite heading rules to reference display-editorial directly or .di-prose stops working. Reference display-editorial/display-documentation explicitly only where the surface must NOT control the family (brand chrome, navbars). Its 0.3.0 removal was deferred 2026-08-10 under wiki/decisions/compatibility-contract.md (additive-only); removal now requires its own cleanup ADR. See wiki/decisions/display-family-split.md."
       },
       "display-editorial": {
-        "value": "Josefin Sans, system-ui, sans-serif",
-        "description": "Editorial display family — Josefin Sans, the brand voice. Used on surfaces where the heading does rhetorical/branding work: hero/landing, marketing, story showcases, slide titles. Default for unmarked headings. Pair with weight 500 (h1) per wiki/decisions/h1-weight-medium.md."
+        "value": "Josefin Sans, Noto Sans, Noto Sans Math, system-ui, sans-serif",
+        "description": "Editorial display family — Josefin Sans, the brand voice. Used on surfaces where the heading does rhetorical/branding work: hero/landing, marketing, story showcases, slide titles. Default for unmarked headings. The Noto Sans fallback serves untagged text; tagged languages are handled by fonts/lang.css. Pair with weight 500 (h1) per wiki/decisions/h1-weight-medium.md."
       },
       "display-documentation": {
-        "value": "Noto Sans, system-ui, sans-serif",
+        "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
         "description": "Documentation display family — Noto Sans, the wayfinding voice. Used on surfaces where the heading does structural work: API docs, foundation Section h2s, KNOWLEDGE.md/CLAUDE.md headings, long-form research subheadings. Activated by wrapping content in .di-prose; pair with weight 600 (semibold). See wiki/decisions/display-family-split.md."
       },
       "brand": {
@@ -26,8 +26,8 @@
         "description": "Brand font - dataimago navbar and branding elements"
       },
       "math": {
-        "value": "Noto Sans Math, Noto Sans, system-ui, sans-serif",
-        "description": "Mathematical notation font — Noto Sans Math for broad Unicode math coverage; harmonises with the Noto Sans body stack"
+        "value": "Noto Sans Math, math",
+        "description": "Noto Sans Math, falling back to the browser's maths face; native MathML is the maths contract"
       }
     },
     "size": {