@kanzo-tech/theme 0.19.0 → 0.21.0

package/themes/catppuccin-latte.css

@@ -1,61 +1,68 @@
-/* catppuccin-latte — a theme is one mode, one flat block, written by hand. */
+/* @family catppuccin
+   @label Catppuccin Latte
+
+   Catppuccin's Latte flavour: Base #eff1f5, Text #4c4f69, Mauve for the brand.
+   One mode, one flat block, written by hand. */
 [data-theme="catppuccin-latte"] {
   color-scheme: light;
 
-  /* The twenty-one */
-  --background: #fafafb;
-  --foreground: #0c0d12;
-  --card: #fafafb;
-  --muted: #f1f2f5;
-  --muted-foreground: #505360;
+  /* Surfaces, ink, brand, lines */
+  --background: #eff1f5;
+  --foreground: #4c4f69;
+  --card: #f5f6f9;
+  --muted: #e6e9ef;
+  --muted-foreground: #5c5f77;
   --primary: #8839ef;
-  --primary-foreground: #faf9fe;
-  --secondary: #e9eaf0;
-  --accent: #dfe1e8;
-  --destructive: #e7000b;
-  --destructive-content: #fef9f8;
-  --info: #155dfc;
-  --info-content: #f8fafe;
-  --success: #009966;
-  --success-content: #001309;
-  --warning: #e17100;
-  --warning-content: #1b0700;
-  --border: #d2d4dc;
-  --ring: #a578fa;
+  --primary-foreground: #f5f6f9;
+  --secondary: #ccd0da;
+  --accent: #dce0e8;
+  --border: #bcc0cc;
+  --input: #86899b;
+  --ring: #8839ef;
+  --field: #f5f6f9;
+  --faint: #63667c;
 
-  /* Optional: each falls back to a bridge default in tokens.css when left out */
-  --input: #8d91a1;
-  --field: #00000005;
-  --faint: #505360;
-  --destructive-foreground: #8d0003;
-  --info-foreground: #0032a7;
-  --success-foreground: #005b3b;
-  --warning-foreground: #844000;
+  /* Status: the fill, the ink on it, and the same family read on the page */
+  --destructive: #d20f39;
+  --destructive-content: #ffe5e4;
+  --destructive-foreground: #9f4051;
+  --info: #1e66f5;
+  --info-content: #e7f9ff;
+  --info-foreground: #3860bc;
+  --success: #40a02b;
+  --success-content: #010901;
+  --success-foreground: #4a7856;
+  --warning: #df8e1d;
+  --warning-content: #120700;
+  --warning-foreground: #7f675e;
 
   /* Shape */
   --radius-box: 0.75rem;
   --radius-field: 0.5rem;
-  --radius-selector: 0.25rem;
+  --radius-selector: 0.375rem;
   --size-field: 0.25rem;
   --size-selector: 0.25rem;
   --stroke: 1px;
   --relief: 0;
 
-  /* Optional: categorical set and syntax */
+  /* Categorical set */
   --chart-capacity: 8;
-  --chart-1: #00c950;
-  --chart-2: #a800b7;
-  --chart-3: #ff8904;
-  --chart-4: #2b7fff;
-  --chart-5: #ff2056;
-  --chart-6: #7008e7;
-  --chart-7: #a65f00;
-  --chart-8: #0092b8;
-  --syntax-keyword: #8839ef;
-  --syntax-string: #208000;
-  --syntax-number: #c04800;
-  --syntax-function: #1c64f3;
-  --syntax-identifier: #d20f39;
-  --syntax-property: #007b82;
-  --syntax-type: #9e6100;
+  --chart-1: #8839ef;
+  --chart-2: #f05600;
+  --chart-3: #0085d8;
+  --chart-4: #487f00;
+  --chart-5: #d260b4;
+  --chart-6: #007985;
+  --chart-7: #a86200;
+  --chart-8: #a639ad;
+
+  /* Syntax */
+  --syntax-keyword: #8535eb;
+  --syntax-string: #0c7900;
+  --syntax-number: #c52a00;
+  --syntax-function: #135cea;
+  --syntax-variable: #c7233b;
+  --syntax-property: #007279;
+  --syntax-type: #9f5200;
+  --syntax-annotation: #a93a8f;
 }

package/themes/catppuccin-mocha.css

@@ -1,61 +1,69 @@
-/* catppuccin-mocha — a theme is one mode, one flat block, written by hand. */
+/* @family catppuccin
+   @label Catppuccin Mocha
+
+   Catppuccin's Mocha flavour: Base #1e1e2e, Text #cdd6f4, Mauve for the brand.
+   One mode, one flat block, written by hand. */
 [data-theme="catppuccin-mocha"] {
-  color-scheme: light;
+  color-scheme: dark;
 
-  /* The twenty-one */
-  --background: #fafafb;
-  --foreground: #0d0e16;
-  --card: #fafafb;
-  --muted: #eeeff4;
-  --muted-foreground: #3f4354;
-  --primary: #a681d0;
-  --primary-foreground: #130620;
-  --secondary: #e4e5ed;
-  --accent: #d6d8e2;
-  --destructive: #e7000b;
-  --destructive-content: #fef9f8;
-  --info: #155dfc;
-  --info-content: #f8fafe;
-  --success: #009966;
-  --success-content: #001309;
-  --warning: #e17100;
-  --warning-content: #1b0700;
-  --border: #c5c7d3;
-  --ring: #a681d0;
+  /* Surfaces, ink, brand, lines */
+  --background: #1e1e2e;
+  --foreground: #cdd6f4;
+  --card: #232334;
+  --popover: #181825;
+  --muted: #313244;
+  --muted-foreground: #bac2de;
+  --primary: #cba6f7;
+  --primary-foreground: #11111b;
+  --secondary: #45475a;
+  --accent: #3a3b50;
+  --border: #45475a;
+  --input: #7f849c;
+  --ring: #cba6f7;
+  --field: #1e1e2e;
+  --faint: #a6adc8;
 
-  /* Optional: each falls back to a bridge default in tokens.css when left out */
-  --input: #6c7086;
-  --field: #00001c08;
-  --faint: #64677d;
-  --destructive-foreground: #8d0003;
-  --info-foreground: #0032a7;
-  --success-foreground: #005b3b;
-  --warning-foreground: #844000;
+  /* Status: the fill, the ink on it, and the same family read on the page */
+  --destructive: #f38ba8;
+  --destructive-content: #14070a;
+  --destructive-foreground: #e8abc6;
+  --info: #89b4fa;
+  --info-content: #070c15;
+  --info-foreground: #a4c2f8;
+  --success: #a6e3a1;
+  --success-content: #0a1209;
+  --success-foreground: #b6dfc4;
+  --warning: #f9e2af;
+  --warning-content: #15120b;
+  --warning-foreground: #e7decd;
 
   /* Shape */
   --radius-box: 0.75rem;
   --radius-field: 0.5rem;
-  --radius-selector: 0.25rem;
+  --radius-selector: 0.375rem;
   --size-field: 0.25rem;
   --size-selector: 0.25rem;
   --stroke: 1px;
   --relief: 0;
 
-  /* Optional: categorical set and syntax */
+  /* Categorical set */
   --chart-capacity: 8;
-  --chart-1: #9810fa;
-  --chart-2: #00a63e;
-  --chart-3: #432dd7;
-  --chart-4: #e17100;
-  --chart-5: #e12afb;
-  --chart-6: #a65f00;
-  --chart-7: #2b7fff;
-  --chart-8: #c6005c;
-  --syntax-keyword: #805da8;
-  --syntax-string: #3b7438;
-  --syntax-number: #9a5b30;
-  --syntax-function: #466dae;
-  --syntax-identifier: #ad4d6b;
-  --syntax-property: #207368;
-  --syntax-type: #675323;
+  --chart-1: #cba6f7;
+  --chart-2: #fab387;
+  --chart-3: #9390dc;
+  --chart-4: #68cda9;
+  --chart-5: #f5c2e7;
+  --chart-6: #abfdf4;
+  --chart-7: #89dae4;
+  --chart-8: #d08b75;
+
+  /* Syntax */
+  --syntax-keyword: #cba6f7;
+  --syntax-string: #a6e3a1;
+  --syntax-number: #fab387;
+  --syntax-function: #89b4fa;
+  --syntax-variable: #f2cdcd;
+  --syntax-property: #b4befe;
+  --syntax-type: #f9e2af;
+  --syntax-annotation: #f5c2e7;
 }

package/themes/kanzo-dark.css

@@ -1,46 +1,43 @@
-/* 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
-   `data-theme` is written — while the blocking theme script has already put `.dark` on `<html>`
-   from `prefers-color-scheme`. Without this selector that document paints kanzo, which declares
-   `color-scheme: light`: a page that says it is dark and is not. Measured on a clean load, no
-   control touched. It outranks `:root:not([data-theme])` by the class and loses to any
-   `[data-theme]` through the `:not()`, so choosing a theme still wins. See `themes.test.ts`,
-   "leaves no dark document painted by a light theme". */
+/* @family kanzo
+   @label Kanzo Dark
+
+   The brand at night: near-black green, mist ink, and the neon #1AE973 as the brand fill it is on
+   kanzo.tech.
+   The dark default: `:root.dark:not([data-theme])` paints a first visit whose OS is dark before any
+   theme is chosen (themes.test.ts, "leaves no dark document painted by a light theme"). */
 :root.dark:not([data-theme]), [data-theme="kanzo-dark"] {
   color-scheme: dark;
 
-  /* The twenty-one */
-  --background: #0a0a0a;
-  --foreground: #efefef;
-  --card: #0d0d0d;
-  --muted: #141414;
-  --muted-foreground: #aaaaaa;
-  --primary: #efefef;
-  --primary-foreground: #0a0a0a;
-  --secondary: #1d1d1d;
-  --accent: #282828;
-  --destructive: #e7000b;
-  --destructive-content: #ffffff;
-  --info: #155dfc;
-  --info-content: #e8f0ff;
-  --success: #009966;
-  --success-content: #060c08;
-  --warning: #e17100;
-  --warning-content: #100805;
-  --border: #353535;
-  --ring: #737373;
+  /* Surfaces, ink, brand, lines */
+  --background: #070b08;
+  --foreground: #e6eee5;
+  --card: #0b110c;
+  --popover: #101712;
+  --muted: #121a14;
+  --muted-foreground: #a3b2a6;
+  --primary: #1ae973;
+  --primary-foreground: #002b0b;
+  --secondary: #18221a;
+  --accent: #1d281f;
+  --border: #27342a;
+  --input: #5f6e63;
+  --ring: #1ae973;
+  --field: #070b08;
+  --faint: #8a998d;
 
-  /* Optional: each falls back to a bridge default in tokens.css when left out */
-  --popover: #141414;
-  --input: #737373;
-  --field: #0a0a0a;
-  --faint: #7c7c7c;
-  --destructive-foreground: #ff8677;
-  --info-foreground: #7aa7ff;
-  --success-foreground: #66c999;
-  --warning-foreground: #ffa264;
+  /* Status: the fill, the ink on it, and the same family read on the page */
+  --destructive: #f04438;
+  --destructive-content: #140201;
+  --destructive-foreground: #f59180;
+  --info: #2e90fa;
+  --info-content: #010715;
+  --info-foreground: #7fb8f5;
+  --success: #1ae973;
+  --success-content: #001305;
+  --success-foreground: #8deda3;
+  --warning: #fdb022;
+  --warning-content: #160b00;
+  --warning-foreground: #f6ca85;
 
   /* Shape */
   --radius-box: 0.75rem;
@@ -51,21 +48,24 @@
   --stroke: 1px;
   --relief: 0;
 
-  /* Optional: categorical set and syntax */
+  /* Categorical set */
   --chart-capacity: 8;
-  --chart-1: #a800b7;
-  --chart-2: #f54900;
-  --chart-3: #ad46ff;
-  --chart-4: #a65f00;
-  --chart-5: #7f22fe;
-  --chart-6: #e7000b;
-  --chart-7: #1447e6;
-  --chart-8: #009966;
-  --syntax-keyword: #c27aff;
-  --syntax-string: #00d492;
-  --syntax-number: #ff8904;
-  --syntax-function: #51a2ff;
-  --syntax-identifier: #ff6467;
-  --syntax-property: #00d3f2;
-  --syntax-type: #fdc700;
+  --chart-1: #64c600;
+  --chart-2: #a48afb;
+  --chart-3: #fd853a;
+  --chart-4: #53b1fd;
+  --chart-5: #f670c7;
+  --chart-6: #ffd632;
+  --chart-7: #2ed3b7;
+  --chart-8: #9e6dcb;
+
+  /* Syntax */
+  --syntax-keyword: #b69cff;
+  --syntax-string: #86e3ad;
+  --syntax-number: #ffb27a;
+  --syntax-function: #6cb6ff;
+  --syntax-variable: #1ae973;
+  --syntax-property: #67d4e0;
+  --syntax-type: #f2d36b;
+  --syntax-annotation: #ff7ac6;
 }

package/themes/kanzo.css

@@ -1,42 +1,42 @@
-/* kanzo — a theme is one mode, one flat block, written by hand.
+/* @family kanzo
+   @label Kanzo
 
-   `: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 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". */
+   The brand at kanzo.tech, by day: deep green on white, mist for the quiet surfaces, the neon
+   kept for success.
+   The default: `:root:not([data-theme])` binds the document that chose nothing without tying a
+   chosen `[data-theme]` on specificity (themes.test.ts, "binds the default theme…"). */
 :root:not([data-theme]), [data-theme="kanzo"] {
   color-scheme: light;
 
-  /* The twenty-one */
-  --background: #fafafa;
-  --foreground: #0f0f0f;
-  --card: #fafafa;
-  --muted: #efefef;
-  --muted-foreground: #454545;
-  --primary: #0f0f0f;
-  --primary-foreground: #fafafa;
-  --secondary: #e6e6e6;
-  --accent: #d9d9d9;
-  --destructive: #e7000b;
-  --destructive-content: #fef9f8;
-  --info: #155dfc;
-  --info-content: #f8fafe;
-  --success: #009966;
-  --success-content: #001309;
-  --warning: #e17100;
-  --warning-content: #1b0700;
-  --border: #c9c9c9;
-  --ring: #737373;
+  /* Surfaces, ink, brand, lines */
+  --background: #fbfcfb;
+  --foreground: #09110b;
+  --card: #ffffff;
+  --muted: #eef2ed;
+  --muted-foreground: #46534a;
+  --primary: #004011;
+  --primary-foreground: #f2fff6;
+  --secondary: #e0e7df;
+  --accent: #e3eae2;
+  --border: #cfd9ce;
+  --input: #7d8b80;
+  --ring: #0f8c42;
+  --field: #ffffff;
+  --faint: #56635a;
 
-  /* Optional: each falls back to a bridge default in tokens.css when left out */
-  --input: #737373;
-  --field: #00000008;
-  --faint: #6a6a6a;
-  --destructive-foreground: #8d0003;
-  --info-foreground: #0032a7;
-  --success-foreground: #005b3b;
-  --warning-foreground: #844000;
+  /* Status: the fill, the ink on it, and the same family read on the page */
+  --destructive: #d92d20;
+  --destructive-content: #fff6f1;
+  --destructive-foreground: #802a1b;
+  --info: #175cd3;
+  --info-content: #e0f0ff;
+  --info-foreground: #113e7c;
+  --success: #1ae973;
+  --success-content: #003d10;
+  --success-foreground: #208544;
+  --warning: #f5a524;
+  --warning-content: #150a00;
+  --warning-foreground: #8d6522;
 
   /* Shape */
   --radius-box: 0.75rem;
@@ -47,21 +47,24 @@
   --stroke: 1px;
   --relief: 0;
 
-  /* Optional: categorical set and syntax */
+  /* Categorical set */
   --chart-capacity: 8;
-  --chart-1: #9810fa;
-  --chart-2: #d08700;
-  --chart-3: #2b7fff;
-  --chart-4: #ca3500;
-  --chart-5: #e12afb;
-  --chart-6: #fb2c36;
-  --chart-7: #7008e7;
-  --chart-8: #009966;
-  --syntax-keyword: #8200db;
-  --syntax-string: #007a55;
-  --syntax-number: #ca3500;
-  --syntax-function: #1447e6;
-  --syntax-identifier: #c10007;
-  --syntax-property: #007595;
-  --syntax-type: #a15c00;
+  --chart-1: #0b7a3b;
+  --chart-2: #6941c6;
+  --chart-3: #a71200;
+  --chart-4: #4079fe;
+  --chart-5: #c11574;
+  --chart-6: #a15c07;
+  --chart-7: #0e7490;
+  --chart-8: #4a4d98;
+
+  /* Syntax */
+  --syntax-keyword: #6d28d9;
+  --syntax-string: #08743a;
+  --syntax-number: #b54708;
+  --syntax-function: #1d4ed8;
+  --syntax-variable: #004011;
+  --syntax-property: #0e7490;
+  --syntax-type: #9a5b00;
+  --syntax-annotation: #c11574;
 }

package/themes/lofi-dark.css

@@ -0,0 +1,70 @@
+/* @family lofi
+   @label Lo-fi Dark
+
+   lofi inverted: white on near-black, greys for every surface, colour only where state needs it.
+   One mode, one flat block, written by hand. */
+[data-theme="lofi-dark"] {
+  color-scheme: dark;
+
+  /* Surfaces, ink, brand, lines */
+  --background: #0a0a0a;
+  --foreground: #ffffff;
+  --card: #0f0f0f;
+  --popover: #141414;
+  --muted: #171717;
+  --muted-foreground: #b3b3b3;
+  --primary: #f2f2f2;
+  --primary-foreground: #0a0a0a;
+  --secondary: #e6e6e6;
+  --secondary-foreground: #0a0a0a;
+  --accent: #1f1f1f;
+  --border: #2b2b2b;
+  --input: #6b6b6b;
+  --ring: #f2f2f2;
+  --field: #0a0a0a;
+  --faint: #9a9a9a;
+
+  /* Status: the fill, the ink on it, and the same family read on the page */
+  --destructive: #ff9181;
+  --destructive-content: #160706;
+  --destructive-foreground: #ffbeb3;
+  --info: #5fcfdd;
+  --info-content: #031011;
+  --info-foreground: #a7e3eb;
+  --success: #69fec3;
+  --success-content: #04160e;
+  --success-foreground: #b1ffdb;
+  --warning: #ffce69;
+  --warning-content: #160f04;
+  --warning-foreground: #ffe2aa;
+
+  /* Shape */
+  --radius-box: 0.5rem;
+  --radius-field: 0.25rem;
+  --radius-selector: 2rem;
+  --size-field: 0.25rem;
+  --size-selector: 0.25rem;
+  --stroke: 1px;
+  --relief: 0;
+
+  /* Categorical set */
+  --chart-capacity: 8;
+  --chart-1: #d4d4d4;
+  --chart-2: #fdb1c1;
+  --chart-3: #a7f7ff;
+  --chart-4: #83d49d;
+  --chart-5: #f4f4a4;
+  --chart-6: #c4b5fd;
+  --chart-7: #db90c0;
+  --chart-8: #9399e0;
+
+  /* Syntax */
+  --syntax-keyword: #ffffff;
+  --syntax-string: #b9d6c4;
+  --syntax-number: #e0c3b4;
+  --syntax-function: #b4c8de;
+  --syntax-variable: #e5e5e5;
+  --syntax-property: #b4ccd6;
+  --syntax-type: #d9cfae;
+  --syntax-annotation: #dcb4cf;
+}

package/themes/lofi.css

@@ -1,15 +1,13 @@
-/* lofi — imported from daisyUI 5.7.20 (MIT), converted from OKLCh to hex.
-   Copyright (c) 2020 Pouya Saadeghi. https://github.com/saadeghi/daisyui
+/* @family lofi
+   @label Lo-fi
 
-   Their twenty colours mapped onto our twenty-one; the mapping and what it decides are in
-   `scripts/import-daisy.mjs`. Not one value was corrected — a theme whose own colours failed the
-   contrast guard was skipped rather than nudged, because a nudged `pastel` is not `pastel`.
-
-   SOURCE from here on. Edit it by hand; nothing regenerates it. */
+   daisyUI's lofi, by day: black on white, greys for every surface, colour only where state needs
+   it.
+   One mode, one flat block, written by hand. */
 [data-theme="lofi"] {
   color-scheme: light;
 
-  /* The twenty-one */
+  /* Surfaces, ink, brand, lines */
   --background: #ffffff;
   --foreground: #000000;
   --card: #ffffff;
@@ -20,21 +18,24 @@
   --secondary: #1a1919;
   --secondary-foreground: #ffffff;
   --accent: #efefef;
+  --border: #e5e5e5;
+  --input: #8a8a8a;
+  --ring: #0d0d0d;
+  --field: #ffffff;
+  --faint: #5e5e5e;
+
+  /* Status: the fill, the ink on it, and the same family read on the page */
   --destructive: #ff9181;
-  --destructive-content: #180706;
+  --destructive-content: #160706;
+  --destructive-foreground: #80463e;
   --info: #5fcfdd;
   --info-content: #031011;
+  --info-foreground: #2c676e;
   --success: #69fec3;
   --success-content: #04160e;
-  --warning: #ffce69;
-  --warning-content: #170f04;
-  --border: #ebebeb;
-  --ring: #0d0d0d;
-
-  /* The same families, read on the page rather than on their fill */
-  --destructive-foreground: #80463e;
-  --info-foreground: #2c676e;
   --success-foreground: #318060;
+  --warning: #ffce69;
+  --warning-content: #160f04;
   --warning-foreground: #806631;
 
   /* Shape */
@@ -46,9 +47,24 @@
   --stroke: 1px;
   --relief: 0;
 
-  /* daisyUI has no categorical channel, so this theme authors no `--chart-*` and takes the eight
-     `tokens.css` publishes as its fallback. It does NOT declare `--chart-capacity: 0`: zero means
-     *this theme declines the channel*, which is `monochrome`'s answer and not this one — an absent
-     capacity reads as the full count, which is now true because there is a full set behind it.
-     Author eight of your own here and they win, slot by slot. */
+  /* Categorical set */
+  --chart-capacity: 8;
+  --chart-1: #3b3b3b;
+  --chart-2: #7a4b3e;
+  --chart-3: #2c676e;
+  --chart-4: #388c71;
+  --chart-5: #89733b;
+  --chart-6: #5b4a80;
+  --chart-7: #80315b;
+  --chart-8: #5b78a6;
+
+  /* Syntax */
+  --syntax-keyword: #000000;
+  --syntax-string: #3d5c4a;
+  --syntax-number: #6b4a3a;
+  --syntax-function: #2f4a66;
+  --syntax-variable: #262626;
+  --syntax-property: #3a5560;
+  --syntax-type: #5c5030;
+  --syntax-annotation: #6a3a5c;
 }