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

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

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

Dark mode

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

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