@kanzo-tech/theme 0.15.0 → 0.16.0

package/README.md

@@ -1,10 +1,14 @@
 # @kanzo-tech/theme
 
-The theme catalogue and the axes a user layers over it. **A theme is one flat block of CSS, and it
-carries one mode.**
+The themes and the axes a user layers over them. **A theme is one flat block of CSS, and it carries
+one mode.**
 
-- **Theme** — `packages/theme/themes/<name>.css`, hand-written source. Twenty-one authored colours,
-  the shape knobs, the font stacks and its own `color-scheme`. Selected with `data-theme`.
+The themes in `themes/` are **provisional test themes** — sixteen written here to exercise the
+vocabulary and thirteen imported from daisyUI — that the guards measure. They are not a curated set;
+names, values and the count will change, and a product ships its own.
+
+- **Theme** — `packages/theme/themes/<name>.css`, hand-written source. Its colours, the shape knobs,
+  optionally its font stacks, and its own `color-scheme`. Selected with `data-theme`.
 - **Radius** — `none` · `xs` · `sm` · `md` · `lg`, a user preference over the theme's own three
   radius knobs.
 - **Font** / **Mono font** — `--font-sans` / `--font-heading` / `--font-mono`.
@@ -22,7 +26,7 @@ types.
   color-scheme: light;
   --background: #fbfcfd;  --foreground: #10151c;
   --primary: #1f6feb;     --primary-foreground: #ffffff;
-  /* …nineteen more, then the shape knobs and the fonts… */
+  /* …the rest of the colours, then the rest of the shape knobs… */
   --radius-box: 0.75rem;  --radius-field: 0.5rem;  --radius-selector: 0.25rem;
   --stroke: 1px;          --relief: 0;
 }
@@ -39,11 +43,10 @@ declared in `:root` would inherit already substituted.
 **Light and dark are two themes.** There is no second block and no `.dark` that flips a token; the
 class survives only as the selector for the `dark:` variant at the call sites that still ask for one.
 
-**There is no derivation.** A `@kanzo-tech/palette` package used to take two seeds through thirteen
-stages and publish 144 reference steps; components used eighteen of them, and all eighteen were
-tints that `color-mix` now computes at the point of use. It is deleted. What that costs is a contrast
-guarantee at authoring time — the author answers for AA, and a guard over the shipped themes is what
-catches a mistake.
+**There is no derivation and there are no step tokens.** A tint is a percentage on the role,
+computed where it is used — `bg-destructive/7`, or `color-mix(in oklab, var(--destructive) 7%,
+transparent)` where no utility reaches. The author answers for AA, and guards over the shipped themes
+are what catch a mistake.
 
 ## How the other axes work
 
@@ -52,7 +55,7 @@ Every axis is a `data-*` attribute **on `<html>`**, and the token values behind
 
 | Axis | Attribute | Sets |
 |---|---|---|
-| radius | `data-radius` | `--radius` |
+| radius | `data-radius` | `--radius-box` / `--radius-field` / `--radius-selector` |
 | font | `data-font` | `--font-sans` |
 | monoFont | `data-mono-font` | `--font-mono` |
 | density | `data-font-size` | the root font-size |
@@ -77,8 +80,9 @@ Read or change the live preferences with `useKanzoTheme()`, or drop in the ready
 
 ## Dark mode
 
-Not owned here. The host toggles `.dark` on `<html>`, and the `.dark` block of the compiled
-document keys off it. If you already run a theme manager, hand it to the provider:
+Not owned here. `.dark` on `<html>` says which side is worn: the provider writes the theme chosen for
+that side to `data-theme`, and the `dark:` variant keys off the class. If you already run a theme
+manager, hand it to the provider:
 
 ```tsx
 import { useTheme } from "next-themes";
@@ -125,5 +129,4 @@ fails on one that declares a partial set.
 `pnpm gen` runs it; CI regenerates and fails on any diff.
 
 **`tokens.css` and `themes/*.css` are NOT generated.** They are hand-written source, and a guard that
-regenerated them would have nothing to regenerate them from. That is the whole shape of the change:
-colour stopped being output.
+regenerated them would have nothing to regenerate them from.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanzo-tech/theme",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Kanzo design tokens — a catalogue of themes, each one flat block of CSS, plus the non-colour axes (radius / font / mono font / density) a user layers over them, driven by data-* attributes on <html>.",
   "type": "module",
   "license": "MIT",

package/themes/bank-dark.css

@@ -1,6 +1,4 @@
-/* bank-dark — a theme is one mode, one flat block. Generated by scripts/extract-themes.mjs
-   from the compiled document that shipped before the derivation was cut, so the colours are
-   unchanged. Edit this file by hand from here on: it is source now, not output. */
+/* bank-dark — a theme is one mode, one flat block, written by hand. */
 [data-theme="bank-dark"] {
   color-scheme: dark;
 
@@ -25,7 +23,7 @@
   --border: #31353b;
   --ring: #3065b9;
 
-  /* Authored pending a measured color-mix default — see extract-themes.mjs */
+  /* Optional: each falls back to a bridge default in tokens.css when left out */
   --popover: #121417;
   --input: #6b7280;
   --field: #090a0c;

package/themes/bank-private-dark.css

@@ -1,6 +1,4 @@
-/* bank-private-dark — a theme is one mode, one flat block. Generated by scripts/extract-themes.mjs
-   from the compiled document that shipped before the derivation was cut, so the colours are
-   unchanged. Edit this file by hand from here on: it is source now, not output. */
+/* bank-private-dark — a theme is one mode, one flat block, written by hand. */
 [data-theme="bank-private-dark"] {
   color-scheme: dark;
 
@@ -25,7 +23,7 @@
   --border: #31353b;
   --ring: #a16207;
 
-  /* Authored pending a measured color-mix default — see extract-themes.mjs */
+  /* Optional: each falls back to a bridge default in tokens.css when left out */
   --popover: #121417;
   --input: #6b7280;
   --field: #090a0c;

package/themes/bank-private.css

@@ -1,6 +1,4 @@
-/* bank-private — a theme is one mode, one flat block. Generated by scripts/extract-themes.mjs
-   from the compiled document that shipped before the derivation was cut, so the colours are
-   unchanged. Edit this file by hand from here on: it is source now, not output. */
+/* bank-private — a theme is one mode, one flat block, written by hand. */
 [data-theme="bank-private"] {
   color-scheme: light;
 
@@ -25,7 +23,7 @@
   --border: #c4c8d0;
   --ring: #a16207;
 
-  /* Authored pending a measured color-mix default — see extract-themes.mjs */
+  /* Optional: each falls back to a bridge default in tokens.css when left out */
   --input: #6b7280;
   --field: #00000008;
   --faint: #636977;

package/themes/bank.css

@@ -1,6 +1,4 @@
-/* bank — a theme is one mode, one flat block. Generated by scripts/extract-themes.mjs
-   from the compiled document that shipped before the derivation was cut, so the colours are
-   unchanged. Edit this file by hand from here on: it is source now, not output. */
+/* bank — a theme is one mode, one flat block, written by hand. */
 [data-theme="bank"] {
   color-scheme: light;
 
@@ -25,7 +23,7 @@
   --border: #c4c8d0;
   --ring: #2b7fff;
 
-  /* Authored pending a measured color-mix default — see extract-themes.mjs */
+  /* Optional: each falls back to a bridge default in tokens.css when left out */
   --input: #6b7280;
   --field: #00000008;
   --faint: #636977;

package/themes/catppuccin-latte-dark.css

@@ -1,6 +1,4 @@
-/* catppuccin-latte-dark — a theme is one mode, one flat block. Generated by scripts/extract-themes.mjs
-   from the compiled document that shipped before the derivation was cut, so the colours are
-   unchanged. Edit this file by hand from here on: it is source now, not output. */
+/* catppuccin-latte-dark — a theme is one mode, one flat block, written by hand. */
 [data-theme="catppuccin-latte-dark"] {
   color-scheme: dark;
 
@@ -25,7 +23,7 @@
   --border: #404249;
   --ring: #8839ef;
 
-  /* Authored pending a measured color-mix default — see extract-themes.mjs */
+  /* Optional: each falls back to a bridge default in tokens.css when left out */
   --popover: #16171a;
   --input: #70737d;
   --field: #0a0a0c;

package/themes/catppuccin-latte.css

@@ -1,6 +1,4 @@
-/* catppuccin-latte — a theme is one mode, one flat block. Generated by scripts/extract-themes.mjs
-   from the compiled document that shipped before the derivation was cut, so the colours are
-   unchanged. Edit this file by hand from here on: it is source now, not output. */
+/* catppuccin-latte — a theme is one mode, one flat block, written by hand. */
 [data-theme="catppuccin-latte"] {
   color-scheme: light;
 
@@ -25,7 +23,7 @@
   --border: #d2d4dc;
   --ring: #a578fa;
 
-  /* Authored pending a measured color-mix default — see extract-themes.mjs */
+  /* Optional: each falls back to a bridge default in tokens.css when left out */
   --input: #8d91a1;
   --field: #00000005;
   --faint: #505360;

package/themes/catppuccin-mocha-dark.css

@@ -1,6 +1,4 @@
-/* catppuccin-mocha-dark — a theme is one mode, one flat block. Generated by scripts/extract-themes.mjs
-   from the compiled document that shipped before the derivation was cut, so the colours are
-   unchanged. Edit this file by hand from here on: it is source now, not output. */
+/* catppuccin-mocha-dark — a theme is one mode, one flat block, written by hand. */
 [data-theme="catppuccin-mocha-dark"] {
   color-scheme: dark;
 
@@ -25,7 +23,7 @@
   --border: #32343e;
   --ring: #7e679a;
 
-  /* Authored pending a measured color-mix default — see extract-themes.mjs */
+  /* Optional: each falls back to a bridge default in tokens.css when left out */
   --popover: #131419;
   --input: #6c7086;
   --field: #0a0a0c;

package/themes/catppuccin-mocha.css

@@ -1,6 +1,4 @@
-/* catppuccin-mocha — a theme is one mode, one flat block. Generated by scripts/extract-themes.mjs
-   from the compiled document that shipped before the derivation was cut, so the colours are
-   unchanged. Edit this file by hand from here on: it is source now, not output. */
+/* catppuccin-mocha — a theme is one mode, one flat block, written by hand. */
 [data-theme="catppuccin-mocha"] {
   color-scheme: light;
 
@@ -25,7 +23,7 @@
   --border: #c5c7d3;
   --ring: #a681d0;
 
-  /* Authored pending a measured color-mix default — see extract-themes.mjs */
+  /* Optional: each falls back to a bridge default in tokens.css when left out */
   --input: #6c7086;
   --field: #00001c08;
   --faint: #64677d;

package/themes/dracula-dark.css

@@ -1,6 +1,4 @@
-/* dracula-dark — a theme is one mode, one flat block. Generated by scripts/extract-themes.mjs
-   from the compiled document that shipped before the derivation was cut, so the colours are
-   unchanged. Edit this file by hand from here on: it is source now, not output. */
+/* dracula-dark — a theme is one mode, one flat block, written by hand. */
 [data-theme="dracula-dark"] {
   color-scheme: dark;
 
@@ -25,7 +23,7 @@
   --border: #2d354c;
   --ring: #a75182;
 
-  /* Authored pending a measured color-mix default — see extract-themes.mjs */
+  /* Optional: each falls back to a bridge default in tokens.css when left out */
   --popover: #10141f;
   --input: #6272a4;
   --field: #090a0e;

package/themes/dracula.css

@@ -1,6 +1,4 @@
-/* dracula — a theme is one mode, one flat block. Generated by scripts/extract-themes.mjs
-   from the compiled document that shipped before the derivation was cut, so the colours are
-   unchanged. Edit this file by hand from here on: it is source now, not output. */
+/* dracula — a theme is one mode, one flat block, written by hand. */
 [data-theme="dracula"] {
   color-scheme: light;
 
@@ -25,7 +23,7 @@
   --border: #bfc9e3;
   --ring: #e562af;
 
-  /* Authored pending a measured color-mix default — see extract-themes.mjs */
+  /* Optional: each falls back to a bridge default in tokens.css when left out */
   --input: #6272a4;
   --field: #0000df09;
   --faint: #5a699a;

package/themes/kanzo-dark.css

@@ -1,6 +1,4 @@
-/* kanzo-dark — a theme is one mode, one flat block. Generated by scripts/extract-themes.mjs
-   from the compiled document that shipped before the derivation was cut, so the colours are
-   unchanged. Edit this file by hand from here on: it is source now, not output. */
+/* kanzo-dark — a theme is one mode, one flat block, written by hand. */
 /* `:root.dark:not([data-theme])` for the same reason kanzo.css claims the bare unattributed
    document, and for the half that file could not cover: a first-time visitor with the OS in dark
    has an empty `localStorage`, so `themeByAppearance` resolves to its `""` default and no
@@ -34,7 +32,7 @@
   --border: #353535;
   --ring: #737373;
 
-  /* Authored pending a measured color-mix default — see extract-themes.mjs */
+  /* Optional: each falls back to a bridge default in tokens.css when left out */
   --popover: #141414;
   --input: #737373;
   --field: #0a0a0a;

package/themes/kanzo.css

@@ -1,13 +1,10 @@
-/* kanzo — a theme is one mode, one flat block. Generated by scripts/extract-themes.mjs
+/* kanzo — a theme is one mode, one flat block, written by hand.
 
    `:root:not([data-theme])` and NOT a bare `:root`: this is the default theme, so it binds to the
    document that has not chosen one. A bare `:root` has the same specificity as `[data-theme="x"]`,
-   which makes source order the tie-breaker — and `themes.css` imports alphabetically, so a bare
-   `:root` here silently repainted every theme sorting before "kanzo.css" with kanzo's own colours.
-   Eleven of the sixteen, dark ones included. See `themes.test.ts`, "binds the default theme so it
-   cannot outrank a chosen one".
-   from the compiled document that shipped before the derivation was cut, so the colours are
-   unchanged. Edit this file by hand from here on: it is source now, not output. */
+   which makes source order the tie-breaker, and `themes.css` imports alphabetically, so a bare
+   `:root` here would repaint every theme sorting before "kanzo.css" with kanzo's colours. See
+   `themes.test.ts`, "binds the default theme so it cannot outrank a chosen one". */
 :root:not([data-theme]), [data-theme="kanzo"] {
   color-scheme: light;
 
@@ -32,7 +29,7 @@
   --border: #c9c9c9;
   --ring: #737373;
 
-  /* Authored pending a measured color-mix default — see extract-themes.mjs */
+  /* Optional: each falls back to a bridge default in tokens.css when left out */
   --input: #737373;
   --field: #00000008;
   --faint: #6a6a6a;

package/themes/monochrome-dark.css

@@ -1,6 +1,4 @@
-/* monochrome-dark — a theme is one mode, one flat block. Generated by scripts/extract-themes.mjs
-   from the compiled document that shipped before the derivation was cut, so the colours are
-   unchanged. Edit this file by hand from here on: it is source now, not output. */
+/* monochrome-dark — a theme is one mode, one flat block, written by hand. */
 [data-theme="monochrome-dark"] {
   color-scheme: dark;
 
@@ -25,7 +23,7 @@
   --border: #353535;
   --ring: #737373;
 
-  /* Authored pending a measured color-mix default — see extract-themes.mjs */
+  /* Optional: each falls back to a bridge default in tokens.css when left out */
   --popover: #141414;
   --input: #737373;
   --field: #0a0a0a;

package/themes/monochrome.css

@@ -1,6 +1,4 @@
-/* monochrome — a theme is one mode, one flat block. Generated by scripts/extract-themes.mjs
-   from the compiled document that shipped before the derivation was cut, so the colours are
-   unchanged. Edit this file by hand from here on: it is source now, not output. */
+/* monochrome — a theme is one mode, one flat block, written by hand. */
 [data-theme="monochrome"] {
   color-scheme: light;
 
@@ -25,7 +23,7 @@
   --border: #c9c9c9;
   --ring: #737373;
 
-  /* Authored pending a measured color-mix default — see extract-themes.mjs */
+  /* Optional: each falls back to a bridge default in tokens.css when left out */
   --input: #737373;
   --field: #00000008;
   --faint: #6a6a6a;

package/themes/nord-dark.css

@@ -1,6 +1,4 @@
-/* nord-dark — a theme is one mode, one flat block. Generated by scripts/extract-themes.mjs
-   from the compiled document that shipped before the derivation was cut, so the colours are
-   unchanged. Edit this file by hand from here on: it is source now, not output. */
+/* nord-dark — a theme is one mode, one flat block, written by hand. */
 [data-theme="nord-dark"] {
   color-scheme: dark;
 
@@ -25,7 +23,7 @@
   --border: #282d36;
   --ring: #567a84;
 
-  /* Authored pending a measured color-mix default — see extract-themes.mjs */
+  /* Optional: each falls back to a bridge default in tokens.css when left out */
   --popover: #101217;
   --input: #545e73;
   --field: #090a0c;

package/themes/nord.css

@@ -1,6 +1,4 @@
-/* nord — a theme is one mode, one flat block. Generated by scripts/extract-themes.mjs
-   from the compiled document that shipped before the derivation was cut, so the colours are
-   unchanged. Edit this file by hand from here on: it is source now, not output. */
+/* nord — a theme is one mode, one flat block, written by hand. */
 [data-theme="nord"] {
   color-scheme: light;
 
@@ -25,7 +23,7 @@
   --border: #b8bdc8;
   --ring: #6299a9;
 
-  /* Authored pending a measured color-mix default — see extract-themes.mjs */
+  /* Optional: each falls back to a bridge default in tokens.css when left out */
   --input: #798191;
   --field: #0000000a;
   --faint: #444e61;