@eifi1/ui-kit 0.34.0 → 0.36.0

package/src/theme/palette-presets.ts

@@ -8,11 +8,11 @@
 // concrete hex in JS, so they read the same values from here via the hooks in
 // palette-store.
 //
-// The alternative presets below were designed + accessibility-vetted as a set
-// (each is CVD-safe across protan/deutan/tritan, money is never red/green, and
-// text/background contrast clears WCAG AA on both themes). To promote one to the
-// app-wide default, copy its values into the :root/.dark blocks in tokens.css
-// (the default preset here mirrors those exactly).
+// The default preset here mirrors the :root/.dark blocks in tokens.css exactly. The
+// five hand-picked alternatives of #307 (`ALTERNATIVE_PRESETS`, a reference bank that
+// `presetById` never resolved) were removed in 0.35 (refactor audit 2026-10, API-6c;
+// deprecated in 0.34): `PALETTES` is what an app offers, and `derivePalette` makes a
+// palette of its own.
 
 import type { HeatStops } from "./chart-palette";
 import { contrastStep, rememberTokenSet } from "./contrast-tokens";
@@ -127,292 +127,6 @@ export const DEFAULT_PRESET: PalettePreset = {
   },
 };
 
-// Vetted alternatives to preview (CVD-safe, WCAG-AA on both themes).
-/**
- * @deprecated 0.34 — `PALETTES`, the presets `presetById` and the palette store know, or
- * `derivePalette` for a palette of the app's own; removed in 0.35 (refactor audit 2026-10,
- * API-6c). A reference bank only: `presetById` resolves none of these ids, and no app
- * imports it (deferred since the 2026-09-22 audit).
- */
-export const ALTERNATIVE_PRESETS: PalettePreset[] = [
-  {
-    id: "warm-paper",
-    name: "Warm Paper",
-    blurb: "Cream paper · warm charcoal",
-    light: {
-      bgPage: "#ece5d6",
-      bgSurface: "#f5efe3",
-      bgSurface2: "#ece5d6",
-      border: "#e2dcce",
-      textPrimary: "#2b2622",
-      textSecondary: "#4f4a44",
-      textMuted: "#68625b",
-      brand: "#9a5b34",
-      brandHover: "#824827",
-      brandContrast: "#fdf8f2",
-      moneyIncome: "#0e7490",
-      moneyExpense: "#8f3f0a",
-      moneyNet: "#7c4dab",
-      moneyNeutral: "#6b6258",
-      chart: ["#332288", "#88ccee", "#44aa99", "#117733", "#999933", "#ddcc77", "#cc6677", "#882255", "#aa4499"],
-      heat: {
-        neutral: "#efe9dc",
-        under: "#0e7490",
-        over: "#b45309",
-        seqLow: "#fbeed2",
-        seqHigh: "#b45309",
-        empty: "rgba(148,163,184,0.14)",
-      },
-    },
-    dark: {
-      bgPage: "#211e1a",
-      bgSurface: "#2a2622",
-      bgSurface2: "#322d27",
-      border: "#3d372f",
-      textPrimary: "#e8e2d6",
-      textSecondary: "#bfb9af",
-      textMuted: "#9e998f",
-      brand: "#e0986a",
-      brandHover: "#ecae85",
-      brandContrast: "#2a1c10",
-      moneyIncome: "#4dd4c4",
-      moneyExpense: "#fbbf3a",
-      moneyNet: "#bfa0e0",
-      moneyNeutral: "#a39a8c",
-      chart: ["#7e72d6", "#9fd8f2", "#5fc4b0", "#3fa45f", "#bfbf5e", "#e8dda0", "#e08c9a", "#cf6488", "#cc78be"],
-      heat: {
-        neutral: "#3a352e",
-        under: "#4dd4c4",
-        over: "#fbbf3a",
-        seqLow: "#2c2014",
-        seqHigh: "#fbbf3a",
-        empty: "rgba(148,163,184,0.10)",
-      },
-    },
-  },
-  {
-    id: "nord-frost",
-    name: "Nord Frost",
-    blurb: "Cool snow · polar night",
-    light: {
-      bgPage: "#e2e7ef",
-      bgSurface: "#f0f3f8",
-      bgSurface2: "#e2e7ef",
-      border: "#d3dae6",
-      textPrimary: "#2e3440",
-      textSecondary: "#454b56",
-      textMuted: "#5e636e",
-      brand: "#3b6ea5",
-      brandHover: "#305a86",
-      brandContrast: "#ffffff",
-      moneyIncome: "#0f8060",
-      moneyExpense: "#b8431a",
-      moneyNet: "#6b4fa0",
-      moneyNeutral: "#5b6577",
-      chart: ["#3a6ea5", "#56b6c2", "#2f7d4f", "#cdb52f", "#d05f7a", "#9a3f93", "#4d4bbf", "#dd6a2c", "#7a8aa8"],
-      heat: {
-        neutral: "#e1e6ee",
-        under: "#0f8060",
-        over: "#b8431a",
-        seqLow: "#f0f3f7",
-        seqHigh: "#a14708",
-        empty: "rgba(148,163,184,0.14)",
-      },
-    },
-    dark: {
-      bgPage: "#242933",
-      bgSurface: "#2e3440",
-      bgSurface2: "#3b4252",
-      border: "#434c5e",
-      textPrimary: "#eceff4",
-      textSecondary: "#d4d7de",
-      textMuted: "#afb3bc",
-      brand: "#88c0d0",
-      brandHover: "#a3d4e0",
-      brandContrast: "#1c2027",
-      moneyIncome: "#4ecf9c",
-      moneyExpense: "#e8a24f",
-      moneyNet: "#caa0e0",
-      moneyNeutral: "#9aa5b8",
-      chart: ["#7fb4e6", "#5ec9d6", "#5cc483", "#dccb6b", "#e87e96", "#bd6fce", "#9389f2", "#ef8f4a", "#8693ad"],
-      heat: {
-        neutral: "#3b4252",
-        under: "#4ecf9c",
-        over: "#e8a24f",
-        seqLow: "#33373f",
-        seqHigh: "#e8a24f",
-        empty: "rgba(148,163,184,0.10)",
-      },
-    },
-  },
-  {
-    id: "indigo-noir",
-    name: "Indigo Noir",
-    blurb: "Crisp light · deep indigo",
-    light: {
-      bgPage: "#e8eaf2",
-      bgSurface: "#f6f7fb",
-      bgSurface2: "#e8eaf2",
-      border: "#dadfeb",
-      textPrimary: "#1b1f2e",
-      textSecondary: "#494d5a",
-      textMuted: "#626572",
-      brand: "#4338ca",
-      brandHover: "#3730a3",
-      brandContrast: "#ffffff",
-      moneyIncome: "#0c6478",
-      moneyExpense: "#b45309",
-      moneyNet: "#7c3aed",
-      moneyNeutral: "#5b6478",
-      chart: ["#332288", "#88ccee", "#44aa99", "#117733", "#999933", "#ddcc77", "#cc6677", "#882255", "#aa4499"],
-      heat: {
-        neutral: "#eef1f7",
-        under: "#0c6478",
-        over: "#b45309",
-        seqLow: "#fdeed4",
-        seqHigh: "#b45309",
-        empty: "rgba(148,163,184,0.14)",
-      },
-    },
-    dark: {
-      bgPage: "#0e0f1c",
-      bgSurface: "#181a2c",
-      bgSurface2: "#21243a",
-      border: "#2e3252",
-      textPrimary: "#e6e8f4",
-      textSecondary: "#adafbe",
-      textMuted: "#8d90a0",
-      brand: "#8b93f8",
-      brandHover: "#aab1fb",
-      brandContrast: "#16182b",
-      moneyIncome: "#22c3b6",
-      // Kept byte-identical to DEFAULT_PRESET.dark, which IS this preset (dev#434).
-      moneyExpense: "#e4b035",
-      moneyNet: "#b39aef",
-      moneyNeutral: "#9aa1bd",
-      chart: ["#7e72d6", "#9fd8f2", "#5fc4b0", "#3fa45f", "#bfbf5e", "#e8dda0", "#e08c9a", "#c25a78", "#cc78be"],
-      heat: {
-        neutral: "#363a5a",
-        under: "#22c3b6",
-        over: "#fbbf24",
-        seqLow: "#3a2c14",
-        seqHigh: "#fbbf24",
-        empty: "rgba(148,163,184,0.10)",
-      },
-    },
-  },
-  {
-    id: "solar-dusk",
-    name: "Solar Dusk",
-    blurb: "Solarized warmth, easy on the eyes",
-    light: {
-      bgPage: "#ede3cf",
-      bgSurface: "#f6ecd9",
-      bgSurface2: "#ede3cf",
-      border: "#e2d6bd",
-      textPrimary: "#463f33",
-      textSecondary: "#50493c",
-      textMuted: "#696153",
-      brand: "#2c6979",
-      brandHover: "#1f515f",
-      brandContrast: "#ffffff",
-      moneyIncome: "#0b6650",
-      moneyExpense: "#905902",
-      moneyNet: "#7a4fa3",
-      moneyNeutral: "#6b6453",
-      chart: ["#332288", "#88ccee", "#44aa99", "#117733", "#999933", "#ddcc77", "#cc6677", "#882255", "#aa4499"],
-      heat: {
-        neutral: "#f1e7d2",
-        under: "#0b6650",
-        over: "#9c6418",
-        seqLow: "#f6ecd0",
-        seqHigh: "#9c6418",
-        empty: "rgba(148,163,184,0.14)",
-      },
-    },
-    dark: {
-      bgPage: "#0e1a1f",
-      bgSurface: "#15272e",
-      bgSurface2: "#1d333c",
-      border: "#2a4750",
-      textPrimary: "#d6cdb8",
-      textSecondary: "#c2bdab",
-      textMuted: "#9c9d91",
-      brand: "#5fb8cc",
-      brandHover: "#82cfe0",
-      brandContrast: "#0a161a",
-      moneyIncome: "#22b884",
-      moneyExpense: "#f0b94e",
-      moneyNet: "#bfa0e0",
-      moneyNeutral: "#9aa3a0",
-      chart: ["#7e72d6", "#9fd8f2", "#5fc4b0", "#3fa45f", "#bfbf5e", "#e8dda0", "#e08c9a", "#c25a78", "#c873c0"],
-      heat: {
-        neutral: "#26424b",
-        under: "#22b884",
-        over: "#f0b94e",
-        seqLow: "#1f3138",
-        seqHigh: "#f0b94e",
-        empty: "rgba(148,163,184,0.10)",
-      },
-    },
-  },
-  {
-    id: "zinc-mono",
-    name: "Zinc Mono",
-    blurb: "True-neutral chrome · data pops",
-    light: {
-      bgPage: "#ececec",
-      bgSurface: "#f7f7f7",
-      bgSurface2: "#ececec",
-      border: "#e4e4e7",
-      textPrimary: "#18181b",
-      textSecondary: "#4e4e50",
-      textMuted: "#676769",
-      brand: "#1d4ed8",
-      brandHover: "#1e40af",
-      brandContrast: "#ffffff",
-      moneyIncome: "#0e7490",
-      moneyExpense: "#cf4310",
-      moneyNet: "#7c3aed",
-      moneyNeutral: "#52525b",
-      chart: ["#332288", "#88ccee", "#44aa99", "#117733", "#999933", "#ddcc77", "#cc6677", "#882255", "#aa4499"],
-      heat: {
-        neutral: "#f4f4f5",
-        under: "#0e7490",
-        over: "#cf4310",
-        seqLow: "#fdeede",
-        seqHigh: "#cf4310",
-        empty: "rgba(148,163,184,0.14)",
-      },
-    },
-    dark: {
-      bgPage: "#09090b",
-      bgSurface: "#18181b",
-      bgSurface2: "#27272a",
-      border: "#3f3f46",
-      textPrimary: "#f4f4f5",
-      textSecondary: "#b2b2b3",
-      textMuted: "#929294",
-      brand: "#60a5fa",
-      brandHover: "#93c5fd",
-      brandContrast: "#0b1220",
-      moneyIncome: "#22d3ee",
-      moneyExpense: "#f97316",
-      moneyNet: "#c4b5fd",
-      moneyNeutral: "#a1a1aa",
-      chart: ["#7e72d6", "#9fd8f2", "#5fc4b0", "#3fa45f", "#bfbf5e", "#e8dda0", "#e08c9a", "#c25a78", "#cc78be"],
-      heat: {
-        neutral: "#3f3f46",
-        under: "#22d3ee",
-        over: "#f97316",
-        seqLow: "#3a2410",
-        seqHigh: "#f97316",
-        empty: "rgba(148,163,184,0.10)",
-      },
-    },
-  },
-];
-
 // ── "Imprint" chart hues (feedback #119) ──────────────────────────────────────
 // anyplot's categorical palette (https://anyplot.ai/palette), by a colleague of
 // Marcel's. 8 hues + an amber semantic anchor, derived from Wong 2011 by a
@@ -472,8 +186,8 @@ export const IMPRINT_PRESET: PalettePreset = {
 };
 
 // The full-theme switcher from #307 stayed retired (feedback #328) — the default
-// is still the single source of truth for surfaces, brand and money, and
-// ALTERNATIVE_PRESETS above remains a reference bank only. What IS selectable is
+// is still the single source of truth for surfaces, brand and money (its five
+// alternatives are gone, see the header). What IS selectable is
 // the categorical chart ramp (feedback #119), so these two presets are the live
 // set; presetById falls back to the default for any stale persisted id.
 /**
@@ -758,7 +472,8 @@ export function presetById(id: string): PalettePreset {
  * element, which is what that list was standing in for.
  *
  * **More contrast (0.32, docs/text-size-harmonization.md §5, §10.5).** With `contrast`
- * the text and border tokens are written one step stronger, and `--text-placeholder` —
+ * the text and border tokens are written one step stronger — in a light set the well and
+ * the four money colours too (0.36, docs/colour-roles-harmonization.md §13) — and `--text-placeholder` —
  * otherwise derived in tokens.css — is written inline too; without it that inline
  * placeholder is removed again, so the stylesheet's formula applies. The step is made
  * HERE because these tokens are inline: no `[data-contrast=more]` rule could beat them.
@@ -777,7 +492,9 @@ export function applyTokenSet(
   const step = contrast ? contrastStep(t) : null;
   el.style.setProperty("--bg-page", t.bgPage);
   el.style.setProperty("--bg-surface", t.bgSurface);
-  el.style.setProperty("--bg-surface-2", t.bgSurface2);
+  // The light well and money step under More contrast (0.36, colour-roles §13); in dark
+  // and at Standard `well` is null and the set's own are written.
+  el.style.setProperty("--bg-surface-2", step?.well?.bgSurface2 ?? t.bgSurface2);
   el.style.setProperty("--border", step?.border ?? t.border);
   el.style.setProperty("--text-primary", t.textPrimary);
   el.style.setProperty("--text-secondary", step?.textSecondary ?? t.textSecondary);
@@ -787,9 +504,9 @@ export function applyTokenSet(
   el.style.setProperty("--brand", t.brand);
   el.style.setProperty("--brand-hover", t.brandHover);
   el.style.setProperty("--brand-contrast", t.brandContrast);
-  el.style.setProperty("--money-income", t.moneyIncome);
-  el.style.setProperty("--money-expense", t.moneyExpense);
-  el.style.setProperty("--money-net", t.moneyNet);
-  el.style.setProperty("--money-neutral", t.moneyNeutral);
+  el.style.setProperty("--money-income", step?.well?.moneyIncome ?? t.moneyIncome);
+  el.style.setProperty("--money-expense", step?.well?.moneyExpense ?? t.moneyExpense);
+  el.style.setProperty("--money-net", step?.well?.moneyNet ?? t.moneyNet);
+  el.style.setProperty("--money-neutral", step?.well?.moneyNeutral ?? t.moneyNeutral);
   t.chart.forEach((c, i) => el.style.setProperty(`--chart-${i + 1}`, c));
 }

package/src/theme/palette-store.ts

@@ -3,6 +3,7 @@ import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import type { StoreApi, UseBoundStore } from "zustand";
 import { logger } from "../lib/logger";
+import { registerDeviceSetting } from "../lib/device-settings";
 import type { HeatStops } from "./chart-palette";
 import { applyTokenSet, DEFAULT_PRESET, presetById, type TokenSet } from "./palette-presets";
 import type { ThemeState, ThemeMode } from "./theme-store";
@@ -56,6 +57,17 @@ export function createPaletteStore(
       "palette",
     ),
   );
+  // Reset this device's settings (docs/settings-harmonization.md §11.4): the Default
+  // palette, STATE ONLY. `useApplyPalette`, where the app mounts it, re-applies through
+  // its effect. Never an imperative `applyTokenSet` here: it would remember a token set
+  // on <html>, and an app without a palette layer (Kurvenschmiede) would then take the
+  // contrast store's palette branch, where a theme switch no longer re-writes the stepped
+  // tokens (KS 3.3).
+  registerDeviceSetting({
+    key: storageKey,
+    kind: "appearance",
+    reset: () => usePalette.getState().setId(DEFAULT_PRESET.id),
+  });
 
   /** Apply the active preset's tokens to <html> as inline CSS custom properties,
    *  re-applying when the preset or the light/dark theme changes. Tailwind v4

package/src/theme/text-size.ts

@@ -3,6 +3,7 @@ import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { logger } from "../lib/logger";
 import { readStored } from "../lib/safe-storage";
+import { registerDeviceSetting } from "../lib/device-settings";
 
 /**
  * The text size (docs/text-size-harmonization.md §2.1, §3.1, §10.3, §10.6).
@@ -267,6 +268,13 @@ export function createTextSizeStore(storageKey: string) {
       "text-size",
     ),
   );
+  // Reset this device's settings (docs/settings-harmonization.md §11.4): no choice on
+  // this device, so `useApplyTextSize` re-resolves to the account's size, else Normal.
+  registerDeviceSetting({
+    key: storageKey,
+    kind: "appearance",
+    reset: () => useTextSizeStore.getState().setSize(null),
+  });
 
   function useApplyTextSize({ account }: ApplyTextSizeOptions = {}): TextSize {
     const device = useTextSizeStore((s) => s.size);

package/src/theme/theme-store.ts

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { logger } from "../lib/logger";
+import { registerDeviceSetting } from "../lib/device-settings";
 
 export type ThemeMode = "light" | "dark";
 /** What the user chose; "system" tracks the OS `prefers-color-scheme`. */
@@ -116,6 +117,15 @@ export function createThemeStore(storageKey: string) {
       "theme",
     ),
   );
+  // Reset this device's settings (docs/settings-harmonization.md §11.4): back to
+  // "System" through the setter, which re-resolves `mode`; `useApplyTheme` puts the
+  // class back and follows the OS again, and the persisted blob is what the pre-paint
+  // `applyPersistedTheme` reads next load.
+  registerDeviceSetting({
+    key: storageKey,
+    kind: "appearance",
+    reset: () => useTheme.getState().setPreference("system"),
+  });
 
   function useApplyTheme(): void {
     const mode = useTheme((s) => s.mode);

package/src/wizard/types.ts

@@ -255,11 +255,3 @@ export interface WizardLabels {
 
 // The English words live in ./wizard-labels, a module of words (round 0.34).
 export { DEFAULT_WIZARD_LABELS };
-
-/** @deprecated 0.34 — `useKitLabels("wizard", DEFAULT_WIZARD_LABELS, labels)`, which the
- *  provider reaches too, or StepperNav's and WizardSummary's own `labels`; removed in 0.35
- *  (refactor audit 2026-10, API-6a). A merge from before the provider, which no kit
- *  component calls. */
-export function resolveWizardLabels(labels?: Partial<WizardLabels>): WizardLabels {
-  return labels ? { ...DEFAULT_WIZARD_LABELS, ...labels } : DEFAULT_WIZARD_LABELS;
-}

package/tokens.css

@@ -19,7 +19,8 @@
  *   - In an app WITH a palette layer (keksdose, kastlan), `applyTokenSet` writes the
  *     active preset's values inline on <html>, and those beat these.
  *   - In an app WITHOUT one (Kurvenschmiede), these are what paints, and More contrast
- *     writes only its four stepped values over them (`reapplyContrastTokens`).
+ *     writes only its stepped values over them (`reapplyContrastTokens`): four in dark,
+ *     nine in light, where the well and the money step too.
  *
  * Because it was taken for inert, it drifted silently, and it did — twice. The surfaces
  * and text colour below still held the pre-#328 palette while DEFAULT_PRESET had moved
@@ -42,9 +43,13 @@
  * paint (`applyPersistedTextSize`, or the inline `TEXT_SIZE_INLINE_SCRIPT`).
  *
  * `data-contrast="more"` is "More contrast", from the setting or from
- * `prefers-contrast: more` on "System". The colour tokens are stepped in JS
- * (`applyTokenSet`), because they are written inline on <html> and no rule here could
- * beat them; what lives here is only what is NOT inline — the focus frame's width.
+ * `prefers-contrast: more` on "System". The inline colour tokens — the text roles, the
+ * border, and in light the well and the money — are stepped in JS (`applyTokenSet`,
+ * `contrastStep`), because they are written inline on <html> and no rule here could beat
+ * them. What lives here is only what is NOT inline: the focus frame's width below, and
+ * in light the status, hue and field-sync literals and `--bg-active`, which step to read
+ * on the darker well (0.36, the `:root[data-contrast="more"]:not(.dark)` block after the
+ * categorical hues; docs/colour-roles-harmonization.md §13).
  *
  * These names are frozen: apps read them, and so does an app's boot splash. */
 
@@ -635,6 +640,35 @@ html[data-text-size="xlarge"] {
   --hue-orange-bg: rgba(124, 45, 18, 0.25);
 }
 
+/* ── More contrast in light: the literals on the darker well (0.36) ───────────────
+   docs/colour-roles-harmonization.md §13. Under More contrast a light set's well is 10 %
+   ink into the card (`WELL_INK_MORE`, stepped in JS with the money, since both are
+   inline). On it the light literals above fell to 4.07–4.28:1 as text and
+   `--status-edited` to 2.77:1 as a mark, so they step here, each at its light value's
+   OKLCH hue and chroma at the lightness that clears its ratio on the stepped well of every
+   shipped preset — as §5.5 solved them against the page. On the page and the card they
+   then read 5.08:1 and up. The ones not listed hold on the stepped well as they are
+   (blue 4.60, indigo 5.42, purple 4.79; synced 4.89, pending 4.60, error 4.44 and the
+   danger line 3.22, marks and lines needing 3); `--warning-border-strong` is
+   `var(--warning)` in light and follows.
+
+   `--bg-active` (a digit key's hover, Button primary's, keksdose's assistant bubbles on
+   the well) sat 1.04:1 from a 10 % well at 12 %; at 16 % it is 1.12–1.15:1 from it.
+
+   `(0,3,0)` outranks `:root` and `:root, .dark` whatever the order, and `.dark` on
+   <html> leaves it out: dark does not step (§13.3, decision 4).
+   tokens-css-audit.test.ts measures every pair here. */
+:root[data-contrast="more"]:not(.dark) {
+  --danger: #ba0739;              /* solved: 4.53:1 on the worst stepped well (was 4.31) */
+  --warning: #9a4300;             /* solved: 4.53:1 (was 4.13) */
+  --success: #006a4d;             /* solved: 4.54:1 (was 4.13) */
+  --info: #006197;                /* solved: 4.56:1 (was 4.07) */
+  --hue-teal: #006862;            /* solved: 4.56:1 (was 4.15) */
+  --hue-orange: #a93400;          /* solved: 4.53:1 (was 4.11) */
+  --status-edited: #b66200;       /* solved, a mark: 3.04:1 (was 2.77) */
+  --bg-active: color-mix(in oklab, var(--text-primary) 16%, var(--bg-surface));
+}
+
 /* ── Role utilities (0.33, docs/colour-roles-harmonization.md §7, k25) ─────────────
  *
  * `text-muted`, `bg-surface-2`, `border-subtle`, `ring-brand`, `fill-surface` … instead of