pantoken-root / design/swatches/src / toSwatches

関数: toSwatches() ​

toSwatches(tokens, mode?): Swatch[]

実験的

トークンIRをフラットなカラースウォッチ一覧に縮約します：参照を解決し、モードを選択し、値が16進カラー（hex）のトークンのみを 残します（アイコンや色以外のトークンは破棄されます）。

パラメーター ​

tokens ​

読み取り専用 Token[]

IR（例: @pantoken/tokens からのもの）。

mode? ​

Mode = "light"

解決するカラーモード（デフォルト "light"）。

戻り値 ​

Swatch[]

スウォッチ一覧。トークン名で命名（--instui- プレフィックスを除く）。

例 ​

トークンIRをライトモードのスウォッチに縮約する

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

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

ダークモード

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

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