@unpunnyfuns/swatchbook-switcher 0.19.7 → 0.19.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +22 -37
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,12 +1,12 @@
1
1
  # swatchbook-switcher
2
2
 
3
- Published as `@unpunnyfuns/swatchbook-switcher`. Framework-agnostic theme-switcher UI for swatchbook — axis pills, preset pills, color-format selector. Consumed by the Storybook addon toolbar and by any React host that knows how to set `data-*` attributes on the document to drive per-theme CSS.
3
+ The framework-agnostic theme-switcher UI for [swatchbook](https://github.com/unpunnyfuns/swatchbook).
4
4
 
5
- > **Documentation:** [unpunnyfuns.github.io/swatchbook](https://unpunnyfuns.github.io/swatchbook/). Token parsing powered by [Terrazzo](https://terrazzo.app/) by the [Terrazzo team](https://github.com/terrazzoapp) via `@unpunnyfuns/swatchbook-core`.
5
+ A React component: axis dropdowns, preset pills, color-format selector. The Storybook addon's toolbar uses it; so does the docs-site navbar. Reach for this package directly when you want the switcher on a non-Storybook site — a docs navbar, a standalone React app consuming swatchbook tokens.
6
6
 
7
- ## Install
7
+ Most consumers pick it up transitively via [`@unpunnyfuns/swatchbook-addon`](../addon); `import { ThemeSwitcher } from '@unpunnyfuns/swatchbook-addon'` works out of the box.
8
8
 
9
- Most consumers pick this up transitively via `@unpunnyfuns/swatchbook-addon` — the addon re-exports the full switcher API, so `import { ThemeSwitcher } from '@unpunnyfuns/swatchbook-addon'` works and you don't need a second install line. Reach for this package directly when you want the switcher *without* the Storybook addon (a docs-site navbar, a standalone React app using swatchbook tokens):
9
+ ## Install
10
10
 
11
11
  ```sh
12
12
  npm install @unpunnyfuns/swatchbook-switcher
@@ -17,44 +17,29 @@ npm install @unpunnyfuns/swatchbook-switcher
17
17
  ```tsx
18
18
  import { ThemeSwitcher } from '@unpunnyfuns/swatchbook-switcher';
19
19
 
20
- function SiteHeader({ axes, presets, themes }) {
21
- return (
22
- <ThemeSwitcher
23
- axes={axes}
24
- presets={presets}
25
- themes={themes}
26
- activeAxes={{ mode: 'Dark' }}
27
- colorFormat="oklch"
28
- onAxisChange={(axis, context) => {
29
- document.documentElement.setAttribute(`data-sb-${axis}`, context);
30
- }}
31
- onColorFormatChange={(format) => {
32
- document.documentElement.setAttribute('data-sb-color-format', format);
33
- }}
34
- />
35
- );
36
- }
20
+ <ThemeSwitcher
21
+ axes={axes}
22
+ presets={presets}
23
+ themes={themes}
24
+ activeAxes={{ mode: 'Dark' }}
25
+ colorFormat="oklch"
26
+ onAxisChange={(axis, context) => {
27
+ document.documentElement.setAttribute(`data-sb-${axis}`, context);
28
+ }}
29
+ onColorFormatChange={(format) => {
30
+ document.documentElement.setAttribute('data-sb-color-format', format);
31
+ }}
32
+ />;
37
33
  ```
38
34
 
39
35
  The component is pure — it doesn't read or write to storage, and it doesn't bake in any particular way of applying the active tuple. The caller decides how to translate `onAxisChange` into DOM updates, routing changes, or global state.
40
36
 
41
- ## Exports
42
-
43
- | Name | Shape |
44
- | --- | --- |
45
- | `ThemeSwitcher` | The popover component. |
46
- | `ThemeSwitcherProps` | Prop types — axes, presets, themes, active axis tuple, color format, change callbacks, optional `className`. |
47
- | `SwitcherAxis` / `SwitcherPreset` / `SwitcherTheme` | JSON-friendly shapes the component accepts. Cross-compatible with `@unpunnyfuns/swatchbook-core`'s `Project.axes` / `.presets` / `.themes` — pass them through directly. |
48
-
49
- ## Where it's used inside this repo
37
+ `SwitcherAxis` / `SwitcherPreset` / `SwitcherTheme` are the accepted shapes and are cross-compatible with `Project.axes` / `.presets` / `.themes` from `@unpunnyfuns/swatchbook-core` — pass them through directly.
50
38
 
51
- - The Storybook addon's toolbar popover (`packages/addon/src/manager/toolbar.ts`).
52
- - The docs site's navbar (`apps/docs/src/theme/Navbar/SwatchbookSwitcher/index.tsx`).
39
+ ## Credits
53
40
 
54
- Both cases feed `ThemeSwitcher` a snapshot of the active `Project` and wire the callbacks to `document.documentElement.setAttribute` calls. If you're rendering swatchbook tokens on a site that isn't Storybook, mirror that pattern.
41
+ Token parsing and resolver evaluation come from [Terrazzo](https://terrazzo.app/) by the [Terrazzo team](https://github.com/terrazzoapp) via `@unpunnyfuns/swatchbook-core`.
55
42
 
56
- ## See also
43
+ ## Documentation
57
44
 
58
- - [`@unpunnyfuns/swatchbook-addon`](../addon) — Storybook addon. Re-exports `ThemeSwitcher` along with the full blocks surface.
59
- - [`@unpunnyfuns/swatchbook-blocks`](../blocks) — MDX doc blocks that the switcher-driven axis changes propagate to.
60
- - [`@unpunnyfuns/swatchbook-core`](../core) — the DTCG loader whose output feeds this component.
45
+ [unpunnyfuns.github.io/swatchbook](https://unpunnyfuns.github.io/swatchbook/) — concepts, guides, and full API reference.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unpunnyfuns/swatchbook-switcher",
3
- "version": "0.19.7",
3
+ "version": "0.19.9",
4
4
  "description": "Framework-agnostic theme-switcher UI for swatchbook — axis pills, preset pills, color-format selector. Consumed by the Storybook addon toolbar and any React host that knows how to set data-attributes on the document.",
5
5
  "license": "MIT",
6
6
  "author": "unpunnyfuns <unpunnyfuns@gmail.com>",