pantoken-root / design/swatches/src / toSwatches

함수: toSwatches() ​

toSwatches(tokens, mode?): Swatch[]

실험적

토큰 IR을 평면 색상 스와치 목록으로 축소합니다: 참조를 해석하고 모드를 선택하며 값이 16진수 색상인 토큰만 유지합니다(아이콘과 색상 아닌 토큰은 제거됩니다).

매개변수 ​

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