インストール
前提条件
パッケージ
| パッケージ | 説明 |
|---|---|
urcolor | カラーエンジン単体。スコープなしの名前で @urcolor/core を再エクスポートします |
@urcolor/core | コアのカラーロジックとアクセシビリティユーティリティ |
@urcolor/shared | すべてのバインディングが共有するフレームワーク非依存の振る舞い、WebGL 描画、グリッドサンプラー |
@urcolor/vue | Vue 3 のコンポーネントとコンポーザブル |
@urcolor/react | React のコンポーネントとフック |
@urcolor/svelte | Svelte 5 のコンポーネントと rune ベースのフック |
@urcolor/angular | Angular のディレクティブと signal ストア |
@urcolor/relative | オプトイン型の CSS Color 5 相対カラー構文 |
@urcolor/i18n | 多言語のカラー名とチャンネルラベル |
インストール
Vue
sh
bun add @urcolor/vuesh
npm install @urcolor/vuesh
pnpm add @urcolor/vuesh
yarn add @urcolor/vueReact
sh
bun add @urcolor/reactsh
npm install @urcolor/reactsh
pnpm add @urcolor/reactsh
yarn add @urcolor/reactSvelte
sh
bun add @urcolor/sveltesh
npm install @urcolor/sveltesh
pnpm add @urcolor/sveltesh
yarn add @urcolor/svelteAngular
sh
bun add @urcolor/angularsh
npm install @urcolor/angularsh
pnpm add @urcolor/angularsh
yarn add @urcolor/angularどのフレームワーク用パッケージも @urcolor/core と @urcolor/shared に依存しているため、両方が一緒にインストールされます。さらに Vue パッケージは Reka UI、React パッケージは Base UI を取り込みます。Svelte と Angular のパッケージにはそれ以外のランタイム依存はありません。
コアのみ
フレームワークバインディングなしでカラーユーティリティだけが必要なら、同じエンジンのスコープなし名 urcolor をインストールします。
sh
bun add urcolorsh
npm install urcolorsh
pnpm add urcolorsh
yarn add urcolorts
import { Color } from "urcolor";urcolor 自体にコードはありません。@urcolor/core を再エクスポートし、フレームワークパッケージと同じバージョン範囲で依存しているため、どちらを選んでもエンジンと Color クラスは 1 つだけです。好きな名前を使ってください。フレームワークバインディングを入れていれば @urcolor/core はすでに存在し、1 つのプロジェクトで両方の名前を混ぜても問題ありません。
オプションのパッケージ
@urcolor/relative は CSS Color 5 の相対カラー構文を、@urcolor/i18n は多言語のカラーネーミングを追加します:
sh
bun add @urcolor/relative @urcolor/i18nsh
npm install @urcolor/relative @urcolor/i18nsh
pnpm add @urcolor/relative @urcolor/i18nsh
yarn add @urcolor/relative @urcolor/i18n