Painting Colors

Every function takes an optional { el }: the id or element whose nearest .screen supplies the paint. Each returns a Fill; the shape and how the reading works are on Paint API . The token names match the Colors palette.

• bg(token, { el }): a background token (bg--<token>), e.g. 'black', 'gray-40', 'red-55', 'error'. On solid modes you get a color-only Fill; on dither modes, a pattern Fill.
• text(token, { el }): a text token (text--<token>). Framework text is painted by clipping a background to the letters, so the Fill carries both the color and the image.
• stroke(token, { el }): a stroke token (text-stroke--<token>), returned as a concrete rgb in a color-only Fill.
• semantic(slot, { el }): one of the framework's named color roles: canvas, surface, text-primary, text-secondary, text-inverse, backdrop, border-strong, border-muted, fill-strong, fill-muted, fill-soft, stroke-contrast, or icon. Patterns come through intact.
• textColor(token, { el }): the single color of a named text utility ('default', 'muted', ...), for SVG or canvas text. When the text is painted with a pattern, you get the pattern's ink, the color the letters actually read as.

// 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 }

// The default text color as one plain color, for SVG or canvas text.
var textColor = TRMNLPaint.textColor("default", { el: "my-chart" });

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

• apply(node, fill): paints a node's background from a Fill, layering the color under the pattern exactly as the framework itself does.

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 }));
});