pantoken-root / design/swatches/src / toSwatches

Function: toSwatches() ​

toSwatches(tokens, mode?): Swatch[]

Experimental

Reduce a token IR to a flat list of colour swatches: resolve references, pick a mode, keep only tokens whose value is a hex colour (icons and non-colour tokens are dropped).

Parameters ​

tokens ​

readonly Token[]

The IR (e.g. from @pantoken/tokens).

mode? ​

Mode = "light"

Which colour mode to resolve (default "light").

Returns ​

Swatch[]

The swatch list, named by token (without the --instui- prefix).

Examples ​

Reduce the token IR to light-mode swatches

ts
import { toSwatches } from "@pantoken/swatches";
import { tokens } from "@pantoken/tokens";

const swatches = toSwatches(tokens); // [{ name: "color-background-brand", hex: "#…" }, …]

Dark mode

ts
import { toSwatches } from "@pantoken/swatches";
import { byTheme } from "@pantoken/tokens";

const swatches = toSwatches(byTheme("canvas"), "dark");