Styles and motion
Styles and motion
.rstyle.yaml recognizes tokens, layout, chart, motion and components. Every value passes a closed grammar. A colour is # with 3, 4, 6 or 8 hex digits, rgb(), rgba(), hsl(), hsla(), lab(), lch(), oklab() or oklch(), or one of the CSS Color 4 named colours (148 keywords) plus transparent and currentcolor, in any case; any other word is refused. A chart palette or ramp entry must also be a colour the chart can draw, so transparent and currentcolor are valid only for page tokens. A refused leaf is skipped and reported; the rest of the file still applies. The builtin names and default below come from the same definitions as the style loader. Removed names fail with style.renamed; see renamed and removed names.
| Style | Default |
|---|---|
sleek | yes |
air | |
scientific | |
brutalist | |
hand-drawn |
The separate flagship showcase has its own presentation selector.
Style references are applied in order, shallow last-wins by section leaf; arrays replace rather than concatenate. Explicit styles do not implicitly inherit another builtin’s component overrides. Unknown top-level sections are ignored. Unknown/invalid token/layout/motion/component leaves diagnose and skip that style; CSS-bound strings use closed color/font/dimension grammars. Retired leaves (motion.delay and components.callout.left-bar-width) report a style.retired warning and are ignored, and the rest of that style still applies. The chart section is supplier-owned, with guards on CSS-bound colors/fonts.
| Section | Vocabulary |
|---|---|
tokens | bg, bg-elev, bg-chart, ink, ink-soft, ink-faint, rule, rule-soft, accent, accent-soft, accent-2, link, up, down, hold, neutral, font-text, font-display, font-ui, font-mono, size-small, size-base, size-h3, size-h2, size-h1, size-display, line-base, measure, radius-s, radius-m. Each size token accepts a -phone variant (for example size-display-phone) that applies at 640 px and narrower. link defaults to the accent. |
layout | report-max-width, boolean measure-wide-blocks (header, prose, headings, tables and charts share one centred measure column; blocks with wide: true still break out). |
chart | Closed chart styling for palettes, ramps, lettering, bar rounding, interpolation, decals and sign cues. Use canonical hyphenated keys such as bar-radius; unsupported leaves produce style.. The examples above exercise the authoring grammar. |
components | metric.: rule (one rule above the stat), bracket (rules above and below), knockout (accent numerals under a 4 px ink rule) or underline (one pencil stroke in the accent under the value); none fills a panel. callout.: the rule above callouts; callout.: rule (default) or bracket (a pencil bracket down the left side instead). rules.: hairline (default) or pencil, which draws the header, section, footer and table-head rules as pencil strokes. deck.: italic or normal (default) for the deck, honoured only when the text family embeds a true italic face. header./border-bottom rules. title, heading (h1–h3 and callout titles), table-head and source-label (the Source/Note label of a source note): transform, weight, letter-spacing and font (display, text, ui or mono). |
motion | enabled: false renders charts in their settled state. |
Canonical font faces are embedded from the existing licensed assets; mixed font cascades select the required faces. Native builds compile the font catalogs in; WebAssembly hosts load the staged richview-fonts.css and provide it to the core before rendering, and a render without it falls back to system fonts with a style.fonts-unavailable warning. Bold is requested only from a family that embeds it: when the display family has no face of weight 600 or more (the hand-drawn lettering face), headings, figure titles and stats are set at its own weight rather than in a synthesized bold. Embedded faces use font-display: block: they arrive with the report, so text is drawn once its face is decoded instead of first in a fallback face that then reflows. Each generated report carries all canonical font copyright/OFL notices in the inert richview-font-notices JSON element, preserving original text on decoding so offline exports retain their notices. Styles retain their distinct serif/sans/mono families and color choices. Report grid children can shrink to the viewport; wide Markdown tables scroll within their own boxes while retaining every column.
The type scale comes from the size tokens: body text uses size-base; the title size-display, the largest size; h1–h3 size-h1, size-h2 and size-h3 in the display face, and metric values size-h1; source notes, tables, captions and the byline size-small. The deck (frontmatter description or subtitle) is body size in ink-soft; it and block quotes are italic only when the text family embeds a true italic face, and the canonical styles set the deck upright in sleek and italic in scientific and brutalist. Reading text, metrics, callouts, the deck, source notes, lists, quotes, figures and tables stay within measure; a table, chart, image, frame or player takes the report’s full width only with wide: true. Interactive charts place their actions, Table, Download PNG, CSV and Expand, as icons at the right end of the title row; each is named by its accessible name and by a tooltip on hover and keyboard focus, and on a figure too narrow for both the icons sit under the title. On desktop, Expand/Contract switches the entire figure between the text measure and report width. On phones, Expand opens the same live chart in a modal; Contract or Escape restores the report and focus. On a phone held upright, a chart whose x scale shows more of the data with more width (time, ordered categories or values) is laid out in landscape and turned a quarter wherever that draws it larger, without requiring orientation-lock support; flows, hierarchies, radial and area-filling charts, maps, networks, word clouds, funnels and 3D scenes stay upright. The modal follows physical rotation. Chart and table state survive without replaying the entrance; facets expand and export together. strong, b and table headers are set at weight 600.
Report blocks are at rest on first paint; a block that starts below the first screen fades up once, softly, as it comes into view (the style’s motion block-entrance, duration, stagger and distance set it; enabled: false, reduced motion and print leave every block at rest). Interactive chart transitions run in Rust/WebAssembly with the timings in MOTION.md. Reduced motion is an unconditional floor. Published/native reports embed runtime assets when available; static SVG remains usable without them, with _richview.interactive recording runtime presence. Live browser previews can use a trusted cached runtime URL; downloaded exports embed their runtime. Source frontmatter cannot supply initializer code.