pantoken / primitives

primitives ​

ベータ

生の pantoken プリミティブパレット（--instui-primitive-*）のオプトインユーティリティクラス。

@pantoken/components のセマンティックユーティリティは意図的にセマンティックトークンのみを公開します — そこでの色のオーバーライドは常にロール（bg-brand）であり、生のスウォッチではありません。 このパッケージはそのエスケープハッチです：開発者が稀に直接パレットを必要とする場合のために、プリミティブトークンごとに一つのクラスを提供します。セマンティックレイヤーとは別に、単独で読み込んでください（@pantoken/plugin-primitives/primitives.css）。

例 ​

プリミティブのスタイルシートをビルドする

ts
import { primitivesCss } from "@pantoken/plugin-primitives";
import { tokens } from "@pantoken/tokens";

const names = (p: string) => tokens.filter((t) => t.name.startsWith(p)).map((t) => t.name);
const css = primitivesCss({
  color: names("--instui-primitive-color-"),
  fontFamily: names("--instui-primitive-font-family-"),
  fontWeight: names("--instui-primitive-font-weight-"),
});
// .instui-bg-primitive-color-white { background: var(--instui-primitive-color-white); }

インターフェース ​

関数 ​

参照 ​

default ​

primitivesCss をリネームして再エクスポートします