Installation
Voraussetzungen
- Eines von Vue 3 (v3.4+), React (v18+), Preact (v10.19+), Svelte (v5.29+) oder Angular (v21.2+)
- Node.js (v18+) oder Bun
Pakete
| Paket | Beschreibung |
|---|---|
urcolor | Die Farb-Engine allein, unter unskopiertem Namen. Re-exportiert @urcolor/core |
@urcolor/core | Farblogik und Barrierefreiheits-Utilities |
@urcolor/shared | Frameworkunabhängiges Verhalten, WebGL-Rendering und Grid-Sampler, die alle Bindings teilen |
@urcolor/vue | Vue-3-Komponenten und Composables |
@urcolor/react | React-Komponenten und Hooks |
@urcolor/preact | Die React-Komponenten und -Hooks, gegen preact/compat kompiliert |
@urcolor/svelte | Svelte-5-Komponenten und Rune-Hooks |
@urcolor/angular | Angular-Direktiven und Signal-Stores |
@urcolor/relative | Optionale relative Farbsyntax aus CSS Color 5 |
@urcolor/i18n | Mehrsprachige Farbnamen und Kanalbezeichnungen |
Installieren
Vue
bun add @urcolor/vuenpm install @urcolor/vuepnpm add @urcolor/vueyarn add @urcolor/vueReact
bun add @urcolor/reactnpm install @urcolor/reactpnpm add @urcolor/reactyarn add @urcolor/reactPreact
bun add @urcolor/preactnpm install @urcolor/preactpnpm add @urcolor/preactyarn add @urcolor/preactSvelte
bun add @urcolor/sveltenpm install @urcolor/sveltepnpm add @urcolor/svelteyarn add @urcolor/svelteAngular
bun add @urcolor/angularnpm install @urcolor/angularpnpm add @urcolor/angularyarn add @urcolor/angularJedes Framework-Paket hängt von @urcolor/core und @urcolor/shared ab – beide werden also mitinstalliert. Das Vue-Paket zieht zusätzlich Reka UI mit, das React-Paket Base UI; die Svelte- und Angular-Pakete haben keine weiteren Laufzeitabhängigkeiten.
Nur der Kern
Wenn du nur die Farb-Utilities ohne Framework-Binding brauchst, installiere urcolor, den unskopierten Namen derselben Engine:
bun add urcolornpm install urcolorpnpm add urcoloryarn add urcolorimport { Color } from "urcolor";urcolor enthält keinen eigenen Code. Es re-exportiert @urcolor/core und hängt in derselben Version davon ab wie die Framework-Pakete, du bekommst also so oder so eine Kopie der Engine und eine Color-Klasse. Nimm den Namen, der dir lieber ist: @urcolor/core ist ohnehin da, wenn du ein Framework-Binding installiert hast, und beide Namen in einem Projekt zu mischen ist unbedenklich.
Optionale Pakete
@urcolor/relative ergänzt die relative Farbsyntax aus CSS Color 5, @urcolor/i18n die mehrsprachige Farbbenennung:
bun add @urcolor/relative @urcolor/i18nnpm install @urcolor/relative @urcolor/i18npnpm add @urcolor/relative @urcolor/i18nyarn add @urcolor/relative @urcolor/i18n