Painting Colors

Every resolver takes an optional { el }: the id or element whose nearest .screen ancestor supplies the paint. Each returns a canonical Fill; the shape and the probe technique are documented on Paint API .

• bg(token, { el }): a background token (bg--<token>), e.g. 'black', 'gray-40', 'red-55'. Solid modes yield a color-only Fill; dither modes yield a tile Fill.
• text(token, { el }): a text token (text--<token>). Text paints via background-clip, so both the ink color and the background image are read.
• stroke(token, { el }): a stroke token (text-stroke--<token>), re-exposed as a concrete rgb in a color-only Fill.
• semantic(slot, { el }): a framework semantic slot. Slots with a public utility (canvas, surface, text-primary, text-secondary, text-inverse, backdrop) are probed through that utility. The rest (border-strong, border-muted, fill-strong, fill-muted, fill-soft, stroke-contrast, icon) are projected from their --framework-semantic-* channel, so image-backed paint is retained.
• textColor(token, { el }): the effective one-color value of a named text utility ('default', 'muted', ...) for SVG or canvas. When CSS clips a tile to the glyphs, it returns the tile's painted ink rather than its under-field.

// Resolve a token for the current screen mode/theme.
var fill = TRMNLPaint.bg("red-55", { el: "my-chart" });
// => solid mode:  { color: "rgb(204, 0, 0)", image: null, url: null, size: null }
// => dither mode: { color: "rgb(255,255,255)", image: "url(...)", url: "data:...", size: 16 }

// One-color form of the semantic default text utility for SVG/canvas text.
var textColor = TRMNLPaint.textColor("default", { el: "my-chart" });

A resolved Fill is painted back with one call. Wrap paints in watch() so they re-run when the screen's mode, dark or theme classes change; see Paint API .

• apply(node, fill): paints a node's background from a Fill, compositing the field color under the tile image with the same two-layer CSS the rest of the screen uses.

var swatch = document.getElementById("legend-swatch");

TRMNLPaint.watch(swatch, function () {
  // Solid on 4-bit+ panels, a composited dither tile on 1- and 2-bit screens.
  TRMNLPaint.apply(swatch, TRMNLPaint.bg("gray-30", { el: swatch }));
});