Importing chroma-panel registers all five modes. Import the shell and add modes
yourself to cut that down.
import { ChromaPanel } from "chroma-panel/panel";
import "chroma-panel/wheel";
<ChromaPanel modes={["wheel"]} />;| What you import | Added to your app |
|---|---|
| all five modes | 22.2 kB |
| shell plus one mode | 14.1 kB |
The subpaths
| Entry point | What it holds |
|---|---|
chroma-panel | Everything, with all five modes registered |
chroma-panel/panel | The panel shell, no modes |
chroma-panel/core | The colour engine, no React |
chroma-panel/wheel | The wheel mode |
chroma-panel/sliders | The sliders mode |
chroma-panel/palettes | The palettes mode |
chroma-panel/image | The image mode |
chroma-panel/pencils | The pencils mode |
chroma-panel/named-colors | The 148 CSS colour names |
chroma-panel/contrast | APCA and WCAG helpers |
chroma-panel/image-worker | The worker for off-thread sampling |
chroma-panel/style.css | The stylesheet |
Import modes for the side effect
A mode entry point registers itself. Write import "chroma-panel/wheel", not
a named import, or a bundler may drop it.