@eifi1/ui-kit 0.34.0 → 0.36.0

package/dist/theme/contrast-tokens.js

@@ -1,6 +1,16 @@
 "use client";
-import { contrast, oklchToRgb, parseHex, rgbToOklch, toHex } from "./color.js";
-const CONTRAST_STEPPED_VARS = ["--text-secondary", "--text-muted", "--text-placeholder", "--border"];
+import { contrast, hexToOklch, luminance, oklchToHex, oklchToRgb, parseHex, rgbToOklch, solveLightness, toHex } from "./color.js";
+const CONTRAST_STEPPED_VARS = [
+  "--text-secondary",
+  "--text-muted",
+  "--text-placeholder",
+  "--border",
+  "--bg-surface-2",
+  "--money-income",
+  "--money-expense",
+  "--money-net",
+  "--money-neutral"
+];
 function toLab(hex) {
   const rgb = parseHex(hex);
   if (!rgb) return null;
@@ -23,6 +33,37 @@ const HOVER_INK = 0.055;
 function hoverFill(t) {
   return mix(t.textPrimary, t.bgSurface, HOVER_INK);
 }
+const WELL_INK_MORE = 0.1;
+const WELL_STEP_MIN = 1.17;
+function isLightSet(t) {
+  const ink = parseHex(t.textPrimary);
+  const card = parseHex(t.bgSurface);
+  if (!ink || !card) return null;
+  return luminance(ink) < luminance(card);
+}
+const MONEY_TARGET = 4.5;
+function moneyOn(color, well) {
+  if (contrast(color, well) >= MONEY_TARGET) return color;
+  const lch = hexToOklch(color);
+  const bg = parseHex(well);
+  if (!lch || !bg) return color;
+  const l = solveLightness(MONEY_TARGET, bg, lch.h, lch.c, "darker");
+  return oklchToHex({ l, c: lch.c, h: lch.h });
+}
+function steppedWellFill(t) {
+  return isLightSet(t) ? mix(t.textPrimary, t.bgSurface, WELL_INK_MORE) : null;
+}
+function wellStep(t) {
+  const well = steppedWellFill(t);
+  if (!well) return null;
+  return {
+    bgSurface2: well,
+    moneyIncome: moneyOn(t.moneyIncome, well),
+    moneyExpense: moneyOn(t.moneyExpense, well),
+    moneyNet: moneyOn(t.moneyNet, well),
+    moneyNeutral: moneyOn(t.moneyNeutral, well)
+  };
+}
 const BRAND_MUTED_SHARE = 0.62;
 const BRAND_BG_SHARE = 0.14;
 const BRAND_BG_HOVER_SHARE = 0.24;
@@ -35,26 +76,29 @@ function brandSoft(t) {
 }
 const BORDER_TARGET = 3;
 const BORDER_STRONG_SHARE = 0.45;
-function worstContrast(color, t) {
-  return Math.min(contrast(color, t.bgPage), contrast(color, t.bgSurface), contrast(color, t.bgSurface2));
+function worstContrast(color, t, well) {
+  return Math.min(contrast(color, t.bgPage), contrast(color, t.bgSurface), contrast(color, well));
 }
-function steppedBorder(t) {
+function steppedBorder(t, well) {
+  const surface2 = well?.bgSurface2 ?? t.bgSurface2;
   let lo = BORDER_STRONG_SHARE;
-  if (worstContrast(mix(t.border, t.textPrimary, 1 - lo), t) >= BORDER_TARGET) return mix(t.border, t.textPrimary, 1 - lo);
+  if (worstContrast(mix(t.border, t.textPrimary, 1 - lo), t, surface2) >= BORDER_TARGET) return mix(t.border, t.textPrimary, 1 - lo);
   let hi = 1;
   for (let i = 0; i < 16; i++) {
     const mid = (lo + hi) / 2;
-    if (worstContrast(mix(t.border, t.textPrimary, 1 - mid), t) >= BORDER_TARGET) hi = mid;
+    if (worstContrast(mix(t.border, t.textPrimary, 1 - mid), t, surface2) >= BORDER_TARGET) hi = mid;
     else lo = mid;
   }
   return mix(t.border, t.textPrimary, 1 - hi);
 }
 function contrastStep(t) {
+  const well = wellStep(t);
   return {
     textSecondary: mix(t.textSecondary, t.textPrimary, 0.5),
     textMuted: t.textSecondary,
     textPlaceholder: t.textMuted,
-    border: steppedBorder(t)
+    border: steppedBorder(t, well),
+    well
   };
 }
 const lastWritten = /* @__PURE__ */ new WeakMap();
@@ -70,11 +114,14 @@ export {
   BRAND_MUTED_SHARE,
   CONTRAST_STEPPED_VARS,
   HOVER_INK,
+  WELL_INK_MORE,
+  WELL_STEP_MIN,
   brandSoft,
   contrastStep,
   hoverFill,
   mix,
   rememberTokenSet,
-  rememberedTokenSet
+  rememberedTokenSet,
+  steppedWellFill
 };
 //# sourceMappingURL=contrast-tokens.js.map

package/dist/theme/contrast-tokens.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/contrast-tokens.ts"],"sourcesContent":["import { contrast, oklchToRgb, parseHex, rgbToOklch, toHex } from \"./color\";\nimport type { TokenSet } from \"./palette-presets\";\n\n/**\n * The \"More contrast\" step on a token set (docs/text-size-harmonization.md §5, §10.5).\n * INTERNAL — `applyTokenSet` and the contrast layer share it; it is not re-exported.\n *\n * The step happens HERE, in JS, because the tokens it changes are written inline on\n * `<html>` by `applyTokenSet`: an inline value beats any `[data-contrast=more]` rule and\n * any `@media (prefers-contrast: more)` block, so a stylesheet cannot do it (§10.5, the\n * keksdose review). `--text-placeholder` is a CSS-derived token, and it is written inline\n * here too rather than redefined per attribute in tokens.css.\n *\n * What moves (§5):\n * - `--text-muted` becomes the set's `--text-secondary`;\n * - `--text-secondary` moves halfway to `--text-primary`;\n * - `--text-placeholder` becomes the set's `--text-muted` (4.6–5.5:1 on every shipped\n *   preset, where the CSS formula gives 2.4–2.8:1) — the order primary > secondary >\n *   muted > placeholder survives the step;\n * - `--border` moves toward `--text-primary` until it clears 3:1 against the worst of the\n *   three surfaces (WCAG 1.4.11, a field's boundary), and never less far than\n *   `--border-strong`'s 45 % — so every border is at least as strong as a \"strong\" one was.\n *   `--border-strong` stays derived in tokens.css and grows with it.\n */\n\n/** The custom properties a contrast step writes. */\nexport const CONTRAST_STEPPED_VARS = [\"--text-secondary\", \"--text-muted\", \"--text-placeholder\", \"--border\"] as const;\n\nexport interface ContrastStep {\n  textSecondary: string;\n  textMuted: string;\n  textPlaceholder: string;\n  border: string;\n}\n\ninterface Lab {\n  l: number;\n  a: number;\n  b: number;\n}\n\nfunction toLab(hex: string): Lab | null {\n  const rgb = parseHex(hex);\n  if (!rgb) return null;\n  const { l, c, h } = rgbToOklch(rgb);\n  const rad = (h * Math.PI) / 180;\n  return { l, a: c * Math.cos(rad), b: c * Math.sin(rad) };\n}\n\n/** `color-mix(in oklab, a p, b)` as a hex — the same formula tokens.css's derived roles\n *  use, so a stepped value sits where the stylesheet would have put it. A colour that is\n *  not hex (a consumer's own token set) comes back unmixed. The deriver mixes with it\n *  too (`--bg-hover`, `--brand-muted`, `--brand-bg`, `--brand-bg-hover`). */\nexport function mix(a: string, b: string, p: number): string {\n  const A = toLab(a);\n  const B = toLab(b);\n  if (!A || !B) return a;\n  const l = A.l * p + B.l * (1 - p);\n  const x = A.a * p + B.a * (1 - p);\n  const y = A.b * p + B.b * (1 - p);\n  const c = Math.hypot(x, y);\n  const h = c < 1e-6 ? 0 : ((Math.atan2(y, x) * 180) / Math.PI + 360) % 360;\n  return toHex(oklchToRgb({ l, c, h }));\n}\n\n/**\n * `--bg-hover` in tokens.css: this share of `--text-primary` mixed into `--bg-surface`.\n *\n * 5.5 %, down from 7 % in 0.33 (docs/colour-roles-harmonization.md §12.10): a hovered row\n * on a card is the darkest fill (in dark, the lightest) that text sits on, and at 7 % the\n * light status colours, the money colours and Ink/Moss/Plum's muted text fell to\n * 4.25–4.49:1 on it. The status literals are fixed, the same in every preset, so the\n * hover moved instead: text wins over the hover's step. At 5.5 % the step from the card\n * is still 1.09–1.13:1, above the 1.08:1 the kit's hover rule asks (§12.2). The deriver\n * solves the money colours against this fill, and tokens-css-audit.test.ts measures\n * every text role on it in every shipped preset, so the two cannot part.\n */\nexport const HOVER_INK = 0.055;\n\n/** The card's hover fill (`--bg-hover`) for `t`, as tokens.css mixes it. */\nexport function hoverFill(t: Pick<TokenSet, \"textPrimary\" | \"bgSurface\">): string {\n  return mix(t.textPrimary, t.bgSurface, HOVER_INK);\n}\n\n/**\n * `--brand-muted` in tokens.css: this share of `--brand` mixed into `--text-primary`.\n *\n * 62 %, down from 70 % in 0.33 (docs/colour-roles-harmonization.md §12.11): the brand as\n * text sits on its soft chip HOVERED too (`--brand-bg-hover` — ButtonGroupLink's current\n * page, a selected day), and at 70 % it read 4.08–4.42:1 there in Default and Moss light\n * and in Ink, Moss, Plum and Contrast dark. The brand could not move instead: the dark\n * brands would have flipped their white label to the dark ink. Nor could the chip's hover\n * lighten: by the time the text cleared 4.5:1 the hover sat 1.00:1 from the chip it\n * hovers. So the text moves toward the ink, as `--bg-hover` moved for its text.\n */\nexport const BRAND_MUTED_SHARE = 0.62;\n/** `--brand-bg` and `--brand-bg-hover` in tokens.css: these shares of `--brand` mixed\n *  into `--bg-surface`. */\nexport const BRAND_BG_SHARE = 0.14;\nexport const BRAND_BG_HOVER_SHARE = 0.24;\n\n/** `--brand-muted`, `--brand-bg` and `--brand-bg-hover` for `t`, as tokens.css mixes them.\n *  tokens-css-audit.test.ts holds the three shares equal to the stylesheet's. */\nexport function brandSoft(t: Pick<TokenSet, \"brand\" | \"textPrimary\" | \"bgSurface\">): {\n  brandMuted: string;\n  brandBg: string;\n  brandBgHover: string;\n} {\n  return {\n    brandMuted: mix(t.brand, t.textPrimary, BRAND_MUTED_SHARE),\n    brandBg: mix(t.brand, t.bgSurface, BRAND_BG_SHARE),\n    brandBgHover: mix(t.brand, t.bgSurface, BRAND_BG_HOVER_SHARE),\n  };\n}\n\n/** WCAG 1.4.11 for a component's boundary. */\nconst BORDER_TARGET = 3;\n/** `--border-strong` in tokens.css: 55 % border, 45 % text. */\nconst BORDER_STRONG_SHARE = 0.45;\n\nfunction worstContrast(color: string, t: TokenSet): number {\n  return Math.min(contrast(color, t.bgPage), contrast(color, t.bgSurface), contrast(color, t.bgSurface2));\n}\n\nfunction steppedBorder(t: TokenSet): string {\n  // The share of `--text-primary` in the border: at least --border-strong's, more until\n  // 3:1. Monotonic in the share (the mix walks from the border to the text, away from\n  // every surface), so a bisection finds the least that clears it.\n  let lo = BORDER_STRONG_SHARE;\n  if (worstContrast(mix(t.border, t.textPrimary, 1 - lo), t) >= BORDER_TARGET) return mix(t.border, t.textPrimary, 1 - lo);\n  let hi = 1;\n  for (let i = 0; i < 16; i++) {\n    const mid = (lo + hi) / 2;\n    if (worstContrast(mix(t.border, t.textPrimary, 1 - mid), t) >= BORDER_TARGET) hi = mid;\n    else lo = mid;\n  }\n  return mix(t.border, t.textPrimary, 1 - hi);\n}\n\n/** The four stepped values for `t`. Pure. */\nexport function contrastStep(t: TokenSet): ContrastStep {\n  return {\n    textSecondary: mix(t.textSecondary, t.textPrimary, 0.5),\n    textMuted: t.textSecondary,\n    textPlaceholder: t.textMuted,\n    border: steppedBorder(t),\n  };\n}\n\n/* ── The token set last written to an element ───────────────────────────── */\n\nconst lastWritten = new WeakMap<HTMLElement, TokenSet>();\n\n/** Remember the set `applyTokenSet` wrote, so a contrast change can re-apply it. */\nexport function rememberTokenSet(el: HTMLElement, t: TokenSet): void {\n  lastWritten.set(el, t);\n}\n\n/** The set `applyTokenSet` last wrote to `el`, or undefined when nothing did — an app\n *  without the palette layer, whose base tokens come from tokens.css. */\nexport function rememberedTokenSet(el: HTMLElement): TokenSet | undefined {\n  return lastWritten.get(el);\n}\n"],"mappings":";AAAA,SAAS,UAAU,YAAY,UAAU,YAAY,aAAa;AA0B3D,MAAM,wBAAwB,CAAC,oBAAoB,gBAAgB,sBAAsB,UAAU;AAe1G,SAAS,MAAM,KAAyB;AACtC,QAAM,MAAM,SAAS,GAAG;AACxB,MAAI,CAAC,IAAK,QAAO;AACjB,QAAM,EAAE,GAAG,GAAG,EAAE,IAAI,WAAW,GAAG;AAClC,QAAM,MAAO,IAAI,KAAK,KAAM;AAC5B,SAAO,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI,GAAG,GAAG,GAAG,IAAI,KAAK,IAAI,GAAG,EAAE;AACzD;AAMO,SAAS,IAAI,GAAW,GAAW,GAAmB;AAC3D,QAAM,IAAI,MAAM,CAAC;AACjB,QAAM,IAAI,MAAM,CAAC;AACjB,MAAI,CAAC,KAAK,CAAC,EAAG,QAAO;AACrB,QAAM,IAAI,EAAE,IAAI,IAAI,EAAE,KAAK,IAAI;AAC/B,QAAM,IAAI,EAAE,IAAI,IAAI,EAAE,KAAK,IAAI;AAC/B,QAAM,IAAI,EAAE,IAAI,IAAI,EAAE,KAAK,IAAI;AAC/B,QAAM,IAAI,KAAK,MAAM,GAAG,CAAC;AACzB,QAAM,IAAI,IAAI,OAAO,KAAM,KAAK,MAAM,GAAG,CAAC,IAAI,MAAO,KAAK,KAAK,OAAO;AACtE,SAAO,MAAM,WAAW,EAAE,GAAG,GAAG,EAAE,CAAC,CAAC;AACtC;AAcO,MAAM,YAAY;AAGlB,SAAS,UAAU,GAAwD;AAChF,SAAO,IAAI,EAAE,aAAa,EAAE,WAAW,SAAS;AAClD;AAaO,MAAM,oBAAoB;AAG1B,MAAM,iBAAiB;AACvB,MAAM,uBAAuB;AAI7B,SAAS,UAAU,GAIxB;AACA,SAAO;AAAA,IACL,YAAY,IAAI,EAAE,OAAO,EAAE,aAAa,iBAAiB;AAAA,IACzD,SAAS,IAAI,EAAE,OAAO,EAAE,WAAW,cAAc;AAAA,IACjD,cAAc,IAAI,EAAE,OAAO,EAAE,WAAW,oBAAoB;AAAA,EAC9D;AACF;AAGA,MAAM,gBAAgB;AAEtB,MAAM,sBAAsB;AAE5B,SAAS,cAAc,OAAe,GAAqB;AACzD,SAAO,KAAK,IAAI,SAAS,OAAO,EAAE,MAAM,GAAG,SAAS,OAAO,EAAE,SAAS,GAAG,SAAS,OAAO,EAAE,UAAU,CAAC;AACxG;AAEA,SAAS,cAAc,GAAqB;AAI1C,MAAI,KAAK;AACT,MAAI,cAAc,IAAI,EAAE,QAAQ,EAAE,aAAa,IAAI,EAAE,GAAG,CAAC,KAAK,cAAe,QAAO,IAAI,EAAE,QAAQ,EAAE,aAAa,IAAI,EAAE;AACvH,MAAI,KAAK;AACT,WAAS,IAAI,GAAG,IAAI,IAAI,KAAK;AAC3B,UAAM,OAAO,KAAK,MAAM;AACxB,QAAI,cAAc,IAAI,EAAE,QAAQ,EAAE,aAAa,IAAI,GAAG,GAAG,CAAC,KAAK,cAAe,MAAK;AAAA,QAC9E,MAAK;AAAA,EACZ;AACA,SAAO,IAAI,EAAE,QAAQ,EAAE,aAAa,IAAI,EAAE;AAC5C;AAGO,SAAS,aAAa,GAA2B;AACtD,SAAO;AAAA,IACL,eAAe,IAAI,EAAE,eAAe,EAAE,aAAa,GAAG;AAAA,IACtD,WAAW,EAAE;AAAA,IACb,iBAAiB,EAAE;AAAA,IACnB,QAAQ,cAAc,CAAC;AAAA,EACzB;AACF;AAIA,MAAM,cAAc,oBAAI,QAA+B;AAGhD,SAAS,iBAAiB,IAAiB,GAAmB;AACnE,cAAY,IAAI,IAAI,CAAC;AACvB;AAIO,SAAS,mBAAmB,IAAuC;AACxE,SAAO,YAAY,IAAI,EAAE;AAC3B;","names":[]}
+{"version":3,"sources":["../../src/theme/contrast-tokens.ts"],"sourcesContent":["import { contrast, hexToOklch, luminance, oklchToHex, oklchToRgb, parseHex, rgbToOklch, solveLightness, toHex } from \"./color\";\nimport type { TokenSet } from \"./palette-presets\";\n\n/**\n * The \"More contrast\" step on a token set (docs/text-size-harmonization.md §5, §10.5).\n * INTERNAL — `applyTokenSet` and the contrast layer share it; it is not re-exported.\n *\n * The step happens HERE, in JS, because the tokens it changes are written inline on\n * `<html>` by `applyTokenSet`: an inline value beats any `[data-contrast=more]` rule and\n * any `@media (prefers-contrast: more)` block, so a stylesheet cannot do it (§10.5, the\n * keksdose review). `--text-placeholder` is a CSS-derived token, and it is written inline\n * here too rather than redefined per attribute in tokens.css.\n *\n * What moves (§5):\n * - `--text-muted` becomes the set's `--text-secondary`;\n * - `--text-secondary` moves halfway to `--text-primary`;\n * - `--text-placeholder` becomes the set's `--text-muted` (4.6–5.5:1 on every shipped\n *   preset, where the CSS formula gives 2.4–2.8:1) — the order primary > secondary >\n *   muted > placeholder survives the step;\n * - `--border` moves toward `--text-primary` until it clears 3:1 against the worst of the\n *   three surfaces (WCAG 1.4.11, a field's boundary), and never less far than\n *   `--border-strong`'s 45 % — so every border is at least as strong as a \"strong\" one was.\n *   `--border-strong` stays derived in tokens.css and grows with it;\n * - in a LIGHT set only (0.36, docs/colour-roles-harmonization.md §13): the well\n *   (`--bg-surface-2`) becomes {@link WELL_INK_MORE} of `--text-primary` mixed into the\n *   card, and each of the four money colours that falls under 4.5:1 on that well is\n *   solved darker at its own hue and chroma. The border above is solved against the\n *   stepped well. A dark set's well stands 1.11–1.13:1 from its card already, and its\n *   money has no room: nothing of it steps.\n *\n * What does NOT move here, because it is not inline: the light status, hue and field-sync\n * literals and `--bg-active` step in tokens.css's `:root[data-contrast=\"more\"]:not(.dark)`\n * block, solved over these stepped wells.\n */\n\n/** The custom properties a contrast step writes. The last five only for a light set. */\nexport const CONTRAST_STEPPED_VARS = [\n  \"--text-secondary\",\n  \"--text-muted\",\n  \"--text-placeholder\",\n  \"--border\",\n  \"--bg-surface-2\",\n  \"--money-income\",\n  \"--money-expense\",\n  \"--money-net\",\n  \"--money-neutral\",\n] as const;\n\n/** The light well under More contrast and the money that reads on it (§13.4). */\nexport interface WellStep {\n  bgSurface2: string;\n  moneyIncome: string;\n  moneyExpense: string;\n  moneyNet: string;\n  moneyNeutral: string;\n}\n\nexport interface ContrastStep {\n  textSecondary: string;\n  textMuted: string;\n  textPlaceholder: string;\n  border: string;\n  /** The stepped well and money, or null for a dark set (which does not step them). */\n  well: WellStep | null;\n}\n\ninterface Lab {\n  l: number;\n  a: number;\n  b: number;\n}\n\nfunction toLab(hex: string): Lab | null {\n  const rgb = parseHex(hex);\n  if (!rgb) return null;\n  const { l, c, h } = rgbToOklch(rgb);\n  const rad = (h * Math.PI) / 180;\n  return { l, a: c * Math.cos(rad), b: c * Math.sin(rad) };\n}\n\n/** `color-mix(in oklab, a p, b)` as a hex — the same formula tokens.css's derived roles\n *  use, so a stepped value sits where the stylesheet would have put it. A colour that is\n *  not hex (a consumer's own token set) comes back unmixed. The deriver mixes with it\n *  too (`--bg-hover`, `--brand-muted`, `--brand-bg`, `--brand-bg-hover`). */\nexport function mix(a: string, b: string, p: number): string {\n  const A = toLab(a);\n  const B = toLab(b);\n  if (!A || !B) return a;\n  const l = A.l * p + B.l * (1 - p);\n  const x = A.a * p + B.a * (1 - p);\n  const y = A.b * p + B.b * (1 - p);\n  const c = Math.hypot(x, y);\n  const h = c < 1e-6 ? 0 : ((Math.atan2(y, x) * 180) / Math.PI + 360) % 360;\n  return toHex(oklchToRgb({ l, c, h }));\n}\n\n/**\n * `--bg-hover` in tokens.css: this share of `--text-primary` mixed into `--bg-surface`.\n *\n * 5.5 %, down from 7 % in 0.33 (docs/colour-roles-harmonization.md §12.10): a hovered row\n * on a card is the darkest fill (in dark, the lightest) that text sits on, and at 7 % the\n * light status colours, the money colours and Ink/Moss/Plum's muted text fell to\n * 4.25–4.49:1 on it. The status literals are fixed, the same in every preset, so the\n * hover moved instead: text wins over the hover's step. At 5.5 % the step from the card\n * is still 1.09–1.13:1, above the 1.08:1 the kit's hover rule asks (§12.2). The deriver\n * solves the money colours against this fill, and tokens-css-audit.test.ts measures\n * every text role on it in every shipped preset, so the two cannot part.\n */\nexport const HOVER_INK = 0.055;\n\n/** The card's hover fill (`--bg-hover`) for `t`, as tokens.css mixes it. */\nexport function hoverFill(t: Pick<TokenSet, \"textPrimary\" | \"bgSurface\">): string {\n  return mix(t.textPrimary, t.bgSurface, HOVER_INK);\n}\n\n/**\n * The light well under More contrast: this share of `--text-primary` mixed into the card,\n * `--bg-hover`'s formula at a larger share (0.36, docs/colour-roles-harmonization.md §13).\n *\n * In light the well is the page (§5.3), 1.09–1.11:1 from the card. At 10 % it stands\n * 1.19–1.24:1 from it, about twice that. The rule it is held to: **the stepped well stands\n * at least 1.17:1 from the card**, two of the hover rule's 1.08 steps; 9 % is the least\n * that clears it in every shipped preset, with no room. The step cannot ship alone: on a\n * 10 % well money, status and two hues read 4.07–4.28:1, so the money is solved with it\n * here and the status and hue literals in tokens.css.\n */\nexport const WELL_INK_MORE = 0.1;\n\n/** The least the stepped light well stands from the card (§13.3, decision 2). */\nexport const WELL_STEP_MIN = 1.17;\n\n/** True when `t` is a light set: its body ink darker than its card. */\nfunction isLightSet(t: Pick<TokenSet, \"textPrimary\" | \"bgSurface\">): boolean | null {\n  const ink = parseHex(t.textPrimary);\n  const card = parseHex(t.bgSurface);\n  if (!ink || !card) return null;\n  return luminance(ink) < luminance(card);\n}\n\n/** Money as text: WCAG 1.4.3 AA. */\nconst MONEY_TARGET = 4.5;\n\n/** `color` as it is when it clears 4.5:1 on `well`, else solved darker at its own hue and\n *  chroma until it does — measured on the hex (`solveLightness`). */\nfunction moneyOn(color: string, well: string): string {\n  if (contrast(color, well) >= MONEY_TARGET) return color;\n  const lch = hexToOklch(color);\n  const bg = parseHex(well);\n  if (!lch || !bg) return color;\n  const l = solveLightness(MONEY_TARGET, bg, lch.h, lch.c, \"darker\");\n  return oklchToHex({ l, c: lch.c, h: lch.h });\n}\n\n/** The light well under More contrast for `t`, or null for a dark set (or one whose ink or\n *  card is not hex, which cannot be mixed). The deriver solves the brand against it. */\nexport function steppedWellFill(t: Pick<TokenSet, \"textPrimary\" | \"bgSurface\">): string | null {\n  return isLightSet(t) ? mix(t.textPrimary, t.bgSurface, WELL_INK_MORE) : null;\n}\n\n/** The stepped well and money of a light set, or null (see {@link steppedWellFill}). */\nfunction wellStep(t: TokenSet): WellStep | null {\n  const well = steppedWellFill(t);\n  if (!well) return null;\n  return {\n    bgSurface2: well,\n    moneyIncome: moneyOn(t.moneyIncome, well),\n    moneyExpense: moneyOn(t.moneyExpense, well),\n    moneyNet: moneyOn(t.moneyNet, well),\n    moneyNeutral: moneyOn(t.moneyNeutral, well),\n  };\n}\n\n/**\n * `--brand-muted` in tokens.css: this share of `--brand` mixed into `--text-primary`.\n *\n * 62 %, down from 70 % in 0.33 (docs/colour-roles-harmonization.md §12.11): the brand as\n * text sits on its soft chip HOVERED too (`--brand-bg-hover` — ButtonGroupLink's current\n * page, a selected day), and at 70 % it read 4.08–4.42:1 there in Default and Moss light\n * and in Ink, Moss, Plum and Contrast dark. The brand could not move instead: the dark\n * brands would have flipped their white label to the dark ink. Nor could the chip's hover\n * lighten: by the time the text cleared 4.5:1 the hover sat 1.00:1 from the chip it\n * hovers. So the text moves toward the ink, as `--bg-hover` moved for its text.\n */\nexport const BRAND_MUTED_SHARE = 0.62;\n/** `--brand-bg` and `--brand-bg-hover` in tokens.css: these shares of `--brand` mixed\n *  into `--bg-surface`. */\nexport const BRAND_BG_SHARE = 0.14;\nexport const BRAND_BG_HOVER_SHARE = 0.24;\n\n/** `--brand-muted`, `--brand-bg` and `--brand-bg-hover` for `t`, as tokens.css mixes them.\n *  tokens-css-audit.test.ts holds the three shares equal to the stylesheet's. */\nexport function brandSoft(t: Pick<TokenSet, \"brand\" | \"textPrimary\" | \"bgSurface\">): {\n  brandMuted: string;\n  brandBg: string;\n  brandBgHover: string;\n} {\n  return {\n    brandMuted: mix(t.brand, t.textPrimary, BRAND_MUTED_SHARE),\n    brandBg: mix(t.brand, t.bgSurface, BRAND_BG_SHARE),\n    brandBgHover: mix(t.brand, t.bgSurface, BRAND_BG_HOVER_SHARE),\n  };\n}\n\n/** WCAG 1.4.11 for a component's boundary. */\nconst BORDER_TARGET = 3;\n/** `--border-strong` in tokens.css: 55 % border, 45 % text. */\nconst BORDER_STRONG_SHARE = 0.45;\n\n/** The worst of the three surfaces; `well`, when the step has one, in place of the set's. */\nfunction worstContrast(color: string, t: TokenSet, well: string): number {\n  return Math.min(contrast(color, t.bgPage), contrast(color, t.bgSurface), contrast(color, well));\n}\n\nfunction steppedBorder(t: TokenSet, well: WellStep | null): string {\n  // The share of `--text-primary` in the border: at least --border-strong's, more until\n  // 3:1. Monotonic in the share (the mix walks from the border to the text, away from\n  // every surface), so a bisection finds the least that clears it. Against the stepped\n  // light well (§13.4), which is the darkest surface under More contrast.\n  const surface2 = well?.bgSurface2 ?? t.bgSurface2;\n  let lo = BORDER_STRONG_SHARE;\n  if (worstContrast(mix(t.border, t.textPrimary, 1 - lo), t, surface2) >= BORDER_TARGET) return mix(t.border, t.textPrimary, 1 - lo);\n  let hi = 1;\n  for (let i = 0; i < 16; i++) {\n    const mid = (lo + hi) / 2;\n    if (worstContrast(mix(t.border, t.textPrimary, 1 - mid), t, surface2) >= BORDER_TARGET) hi = mid;\n    else lo = mid;\n  }\n  return mix(t.border, t.textPrimary, 1 - hi);\n}\n\n/** The stepped values for `t`: the four text and line tokens, and for a light set the\n *  well and money (`well`, null in dark). Pure. */\nexport function contrastStep(t: TokenSet): ContrastStep {\n  const well = wellStep(t);\n  return {\n    textSecondary: mix(t.textSecondary, t.textPrimary, 0.5),\n    textMuted: t.textSecondary,\n    textPlaceholder: t.textMuted,\n    border: steppedBorder(t, well),\n    well,\n  };\n}\n\n/* ── The token set last written to an element ───────────────────────────── */\n\nconst lastWritten = new WeakMap<HTMLElement, TokenSet>();\n\n/** Remember the set `applyTokenSet` wrote, so a contrast change can re-apply it. */\nexport function rememberTokenSet(el: HTMLElement, t: TokenSet): void {\n  lastWritten.set(el, t);\n}\n\n/** The set `applyTokenSet` last wrote to `el`, or undefined when nothing did — an app\n *  without the palette layer, whose base tokens come from tokens.css. */\nexport function rememberedTokenSet(el: HTMLElement): TokenSet | undefined {\n  return lastWritten.get(el);\n}\n"],"mappings":";AAAA,SAAS,UAAU,YAAY,WAAW,YAAY,YAAY,UAAU,YAAY,gBAAgB,aAAa;AAoC9G,MAAM,wBAAwB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA0BA,SAAS,MAAM,KAAyB;AACtC,QAAM,MAAM,SAAS,GAAG;AACxB,MAAI,CAAC,IAAK,QAAO;AACjB,QAAM,EAAE,GAAG,GAAG,EAAE,IAAI,WAAW,GAAG;AAClC,QAAM,MAAO,IAAI,KAAK,KAAM;AAC5B,SAAO,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI,GAAG,GAAG,GAAG,IAAI,KAAK,IAAI,GAAG,EAAE;AACzD;AAMO,SAAS,IAAI,GAAW,GAAW,GAAmB;AAC3D,QAAM,IAAI,MAAM,CAAC;AACjB,QAAM,IAAI,MAAM,CAAC;AACjB,MAAI,CAAC,KAAK,CAAC,EAAG,QAAO;AACrB,QAAM,IAAI,EAAE,IAAI,IAAI,EAAE,KAAK,IAAI;AAC/B,QAAM,IAAI,EAAE,IAAI,IAAI,EAAE,KAAK,IAAI;AAC/B,QAAM,IAAI,EAAE,IAAI,IAAI,EAAE,KAAK,IAAI;AAC/B,QAAM,IAAI,KAAK,MAAM,GAAG,CAAC;AACzB,QAAM,IAAI,IAAI,OAAO,KAAM,KAAK,MAAM,GAAG,CAAC,IAAI,MAAO,KAAK,KAAK,OAAO;AACtE,SAAO,MAAM,WAAW,EAAE,GAAG,GAAG,EAAE,CAAC,CAAC;AACtC;AAcO,MAAM,YAAY;AAGlB,SAAS,UAAU,GAAwD;AAChF,SAAO,IAAI,EAAE,aAAa,EAAE,WAAW,SAAS;AAClD;AAaO,MAAM,gBAAgB;AAGtB,MAAM,gBAAgB;AAG7B,SAAS,WAAW,GAAgE;AAClF,QAAM,MAAM,SAAS,EAAE,WAAW;AAClC,QAAM,OAAO,SAAS,EAAE,SAAS;AACjC,MAAI,CAAC,OAAO,CAAC,KAAM,QAAO;AAC1B,SAAO,UAAU,GAAG,IAAI,UAAU,IAAI;AACxC;AAGA,MAAM,eAAe;AAIrB,SAAS,QAAQ,OAAe,MAAsB;AACpD,MAAI,SAAS,OAAO,IAAI,KAAK,aAAc,QAAO;AAClD,QAAM,MAAM,WAAW,KAAK;AAC5B,QAAM,KAAK,SAAS,IAAI;AACxB,MAAI,CAAC,OAAO,CAAC,GAAI,QAAO;AACxB,QAAM,IAAI,eAAe,cAAc,IAAI,IAAI,GAAG,IAAI,GAAG,QAAQ;AACjE,SAAO,WAAW,EAAE,GAAG,GAAG,IAAI,GAAG,GAAG,IAAI,EAAE,CAAC;AAC7C;AAIO,SAAS,gBAAgB,GAA+D;AAC7F,SAAO,WAAW,CAAC,IAAI,IAAI,EAAE,aAAa,EAAE,WAAW,aAAa,IAAI;AAC1E;AAGA,SAAS,SAAS,GAA8B;AAC9C,QAAM,OAAO,gBAAgB,CAAC;AAC9B,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO;AAAA,IACL,YAAY;AAAA,IACZ,aAAa,QAAQ,EAAE,aAAa,IAAI;AAAA,IACxC,cAAc,QAAQ,EAAE,cAAc,IAAI;AAAA,IAC1C,UAAU,QAAQ,EAAE,UAAU,IAAI;AAAA,IAClC,cAAc,QAAQ,EAAE,cAAc,IAAI;AAAA,EAC5C;AACF;AAaO,MAAM,oBAAoB;AAG1B,MAAM,iBAAiB;AACvB,MAAM,uBAAuB;AAI7B,SAAS,UAAU,GAIxB;AACA,SAAO;AAAA,IACL,YAAY,IAAI,EAAE,OAAO,EAAE,aAAa,iBAAiB;AAAA,IACzD,SAAS,IAAI,EAAE,OAAO,EAAE,WAAW,cAAc;AAAA,IACjD,cAAc,IAAI,EAAE,OAAO,EAAE,WAAW,oBAAoB;AAAA,EAC9D;AACF;AAGA,MAAM,gBAAgB;AAEtB,MAAM,sBAAsB;AAG5B,SAAS,cAAc,OAAe,GAAa,MAAsB;AACvE,SAAO,KAAK,IAAI,SAAS,OAAO,EAAE,MAAM,GAAG,SAAS,OAAO,EAAE,SAAS,GAAG,SAAS,OAAO,IAAI,CAAC;AAChG;AAEA,SAAS,cAAc,GAAa,MAA+B;AAKjE,QAAM,WAAW,MAAM,cAAc,EAAE;AACvC,MAAI,KAAK;AACT,MAAI,cAAc,IAAI,EAAE,QAAQ,EAAE,aAAa,IAAI,EAAE,GAAG,GAAG,QAAQ,KAAK,cAAe,QAAO,IAAI,EAAE,QAAQ,EAAE,aAAa,IAAI,EAAE;AACjI,MAAI,KAAK;AACT,WAAS,IAAI,GAAG,IAAI,IAAI,KAAK;AAC3B,UAAM,OAAO,KAAK,MAAM;AACxB,QAAI,cAAc,IAAI,EAAE,QAAQ,EAAE,aAAa,IAAI,GAAG,GAAG,GAAG,QAAQ,KAAK,cAAe,MAAK;AAAA,QACxF,MAAK;AAAA,EACZ;AACA,SAAO,IAAI,EAAE,QAAQ,EAAE,aAAa,IAAI,EAAE;AAC5C;AAIO,SAAS,aAAa,GAA2B;AACtD,QAAM,OAAO,SAAS,CAAC;AACvB,SAAO;AAAA,IACL,eAAe,IAAI,EAAE,eAAe,EAAE,aAAa,GAAG;AAAA,IACtD,WAAW,EAAE;AAAA,IACb,iBAAiB,EAAE;AAAA,IACnB,QAAQ,cAAc,GAAG,IAAI;AAAA,IAC7B;AAAA,EACF;AACF;AAIA,MAAM,cAAc,oBAAI,QAA+B;AAGhD,SAAS,iBAAiB,IAAiB,GAAmB;AACnE,cAAY,IAAI,IAAI,CAAC;AACvB;AAIO,SAAS,mBAAmB,IAAuC;AACxE,SAAO,YAAY,IAAI,EAAE;AAC3B;","names":[]}

package/dist/theme/contrast.d.ts

@@ -7,8 +7,10 @@ import type { PersistedAppearanceOptions } from "./text-size.js";
  * In force it is `<html data-contrast="more">` (else `"standard"`), which does two things:
  * - the inline colour tokens are re-written one step stronger (`applyTokenSet`'s
  *   contrast flag — see contrast-tokens.ts for what moves and why it is JS);
- * - tokens.css raises `--focus-ring-width` from 2 to 3 px and turns on the `contrast:`
- *   variant for anything else a component wants to change.
+ * - tokens.css raises `--focus-ring-width` from 2 to 3 px, in light deepens the status,
+ *   hue and field-sync literals and `--bg-active` to read on the stepped well (0.36,
+ *   colour-roles §13), and turns on the `contrast:` variant for anything else a
+ *   component wants to change.
  *
  * The names below are frozen like the text size's: server-kit's `CONTRAST_MODES`, the
  * stored format, the attribute.

package/dist/theme/contrast.js

@@ -4,6 +4,7 @@ import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { logger } from "../lib/logger.js";
 import { readStored } from "../lib/safe-storage.js";
+import { registerDeviceSetting } from "../lib/device-settings.js";
 import { useMediaQuery } from "../hooks/use-media-query.js";
 import { CONTRAST_STEPPED_VARS, contrastStep, rememberedTokenSet } from "./contrast-tokens.js";
 import { applyTokenSet, DEFAULT_PRESET } from "./palette-presets.js";
@@ -45,6 +46,13 @@ function reapplyContrastTokens(el) {
   el.style.setProperty("--text-muted", step.textMuted);
   el.style.setProperty("--text-placeholder", step.textPlaceholder);
   el.style.setProperty("--border", step.border);
+  if (step.well) {
+    el.style.setProperty("--bg-surface-2", step.well.bgSurface2);
+    el.style.setProperty("--money-income", step.well.moneyIncome);
+    el.style.setProperty("--money-expense", step.well.moneyExpense);
+    el.style.setProperty("--money-net", step.well.moneyNet);
+    el.style.setProperty("--money-neutral", step.well.moneyNeutral);
+  }
 }
 function applyContrast(level) {
   if (typeof document === "undefined") return;
@@ -93,6 +101,11 @@ function createContrastStore(storageKey) {
       "contrast"
     )
   );
+  registerDeviceSetting({
+    key: storageKey,
+    kind: "appearance",
+    reset: () => useContrastStore.getState().setContrast(null)
+  });
   function useApplyContrast({ account } = {}) {
     const device = useContrastStore((s) => s.contrast);
     const prefersMore = useMediaQuery(PREFERS_MORE_QUERY, false);

package/dist/theme/contrast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/contrast.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { create } from \"zustand\";\nimport { persist } from \"zustand/middleware\";\nimport { logger } from \"../lib/logger\";\nimport { readStored } from \"../lib/safe-storage\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { CONTRAST_STEPPED_VARS, contrastStep, rememberedTokenSet } from \"./contrast-tokens\";\nimport { applyTokenSet, DEFAULT_PRESET } from \"./palette-presets\";\nimport type { PersistedAppearanceOptions } from \"./text-size\";\n\n/**\n * \"More contrast\" (docs/text-size-harmonization.md §2.4, §5, §10.5, §10.6): a switch\n * beside the text size, on by choice or — on \"System\" — when the device asks for more\n * contrast (`prefers-contrast: more`). Any text size.\n *\n * In force it is `<html data-contrast=\"more\">` (else `\"standard\"`), which does two things:\n * - the inline colour tokens are re-written one step stronger (`applyTokenSet`'s\n *   contrast flag — see contrast-tokens.ts for what moves and why it is JS);\n * - tokens.css raises `--focus-ring-width` from 2 to 3 px and turns on the `contrast:`\n *   variant for anything else a component wants to change.\n *\n * The names below are frozen like the text size's: server-kit's `CONTRAST_MODES`, the\n * stored format, the attribute.\n */\n\n/** The stored choices (§10.6): server-kit's `CONTRAST_MODES`. \"system\" IS a stored value\n *  — the PATCH rule refuses an explicit null, so null means only \"never chosen\". */\nexport const CONTRAST_MODES = [\"system\", \"standard\", \"more\"] as const;\n\nexport type ContrastMode = (typeof CONTRAST_MODES)[number];\n\n/** What is in force on `<html data-contrast>`: a mode with \"system\" resolved. */\nexport type ContrastLevel = \"standard\" | \"more\";\n\nconst CONTRAST_ATTRIBUTE = \"data-contrast\";\nconst PREFERS_MORE_QUERY = \"(prefers-contrast: more)\";\n\nexport function isContrastMode(value: unknown): value is ContrastMode {\n  return value === \"system\" || value === \"standard\" || value === \"more\";\n}\n\n/** The mode in force: **this device's own choice → the account's → \"system\"** (§2.6).\n *  The one order the pre-paint call, the apply hook and `useAccountAppearance` share. */\nexport function resolveContrastMode(device: unknown, account?: unknown): ContrastMode {\n  if (isContrastMode(device)) return device;\n  if (isContrastMode(account)) return account;\n  return \"system\";\n}\n\n/** Whether the device asks for more contrast now. False without `matchMedia`. */\nexport function prefersMoreContrast(): boolean {\n  try {\n    return typeof window !== \"undefined\" && typeof window.matchMedia === \"function\"\n      ? window.matchMedia(PREFERS_MORE_QUERY).matches\n      : false;\n  } catch {\n    return false;\n  }\n}\n\n/** A mode to the level it puts on `<html>`; \"system\" asks the device (or takes\n *  `prefersMore`, when the caller already knows). */\nexport function contrastLevel(mode: ContrastMode, prefersMore: boolean = prefersMoreContrast()): ContrastLevel {\n  return mode === \"more\" || (mode === \"system\" && prefersMore) ? \"more\" : \"standard\";\n}\n\n/** The level `<html>` carries now; \"standard\" without one. */\nexport function readContrastLevel(): ContrastLevel {\n  if (typeof document === \"undefined\") return \"standard\";\n  return document.documentElement.getAttribute(CONTRAST_ATTRIBUTE) === \"more\" ? \"more\" : \"standard\";\n}\n\n/**\n * Re-write the contrast-dependent tokens on `el` for its current `data-contrast`.\n *\n * With a palette layer (`applyTokenSet` has written a set here), that set is applied\n * again and steps itself. Without one — an app whose base tokens come from tokens.css,\n * like Kurvenschmiede's — the four stepped tokens are written over the stylesheet for\n * the default preset in the current light/dark, or removed again.\n */\nfunction reapplyContrastTokens(el: HTMLElement): void {\n  const written = rememberedTokenSet(el);\n  if (written) {\n    applyTokenSet(el, written);\n    return;\n  }\n  for (const name of CONTRAST_STEPPED_VARS) el.style.removeProperty(name);\n  if (el.getAttribute(CONTRAST_ATTRIBUTE) !== \"more\") return;\n  const step = contrastStep(DEFAULT_PRESET[el.classList.contains(\"dark\") ? \"dark\" : \"light\"]);\n  el.style.setProperty(\"--text-secondary\", step.textSecondary);\n  el.style.setProperty(\"--text-muted\", step.textMuted);\n  el.style.setProperty(\"--text-placeholder\", step.textPlaceholder);\n  el.style.setProperty(\"--border\", step.border);\n}\n\n/** Put `level` on `<html>` and re-write the colour tokens for it. */\nexport function applyContrast(level: ContrastLevel): void {\n  if (typeof document === \"undefined\") return;\n  const root = document.documentElement;\n  root.setAttribute(CONTRAST_ATTRIBUTE, level);\n  reapplyContrastTokens(root);\n}\n\n/* ── Storage: the frozen format, the pre-paint call ─────────────────────── */\n\n/**\n * What a contrast store persists under its key — FROZEN, like the text size's:\n *\n *     {\"state\":{\"contrast\":\"more\"},\"version\":1}\n *\n * `contrast` is one of {@link CONTRAST_MODES}, or `null` / absent when this device never\n * chose.\n */\nexport interface PersistedContrast {\n  state?: { contrast?: ContrastMode | null };\n  version?: number;\n}\n\n/** This device's own choice under `storageKey`, or `null` when it never chose. */\nexport function readPersistedContrast(storageKey: string): ContrastMode | null {\n  try {\n    const blob = JSON.parse(readStored(storageKey) ?? \"null\") as PersistedContrast | null;\n    const mode = blob?.state?.contrast;\n    return isContrastMode(mode) ? mode : null;\n  } catch {\n    return null;\n  }\n}\n\n/**\n * Pre-paint (§10.3, §10.5): this device's choice under `storageKey` — else the account's\n * last known value, else \"system\" — resolved against `prefers-contrast` and applied\n * BEFORE `createRoot`. Call it next to `applyPersistedPalette`, in EITHER order — the\n * palette steps itself when `data-contrast` is already set, and this re-applies the\n * palette's set when it is not; no app has to put one first (0.32.1, keksdose's 0.32\n * report asked which). Returns the level applied.\n */\nexport function applyPersistedContrast(storageKey: string, options: PersistedAppearanceOptions = {}): ContrastLevel {\n  let account: unknown;\n  try {\n    account = options.account?.();\n  } catch {\n    account = undefined;\n  }\n  const level = contrastLevel(resolveContrastMode(readPersistedContrast(storageKey), account));\n  applyContrast(level);\n  return level;\n}\n\n/* ── The store ──────────────────────────────────────────────────────────── */\n\nexport interface ContrastState {\n  /** This device's own choice (persisted), or `null` when it never chose — then the\n   *  account's value applies, else \"system\". */\n  contrast: ContrastMode | null;\n  /** Store this device's choice; `null` forgets it. */\n  setContrast: (contrast: ContrastMode | null) => void;\n}\n\nexport interface ApplyContrastOptions {\n  /** The account's value (`/auth/me`'s `contrast`): it applies while this device has no\n   *  choice of its own. */\n  account?: string | null;\n}\n\n/**\n * Build a contrast store bound to a consumer-supplied localStorage key, shaped like\n * `createThemeStore` and {@link createTextSizeStore} (§6). It holds the DEVICE's choice;\n * the account's value comes in through `useApplyContrast({ account })`.\n *\n * `useApplyContrast` — mount it once near the root, beside `useApplyPalette`:\n * - puts the level on `<html>` and steps the tokens;\n * - on \"System\", follows `prefers-contrast: more` live (§10.5);\n * - without a palette layer, re-writes the stepped tokens when the light/dark class\n *   changes, since they differ per theme.\n *\n * The persisted format is {@link PersistedContrast}, and frozen.\n */\nexport function createContrastStore(storageKey: string) {\n  const useContrastStore = create<ContrastState>()(\n    logger(\n      persist(\n        (set) => ({\n          contrast: null,\n          setContrast: (contrast) => set({ contrast: isContrastMode(contrast) ? contrast : null }),\n        }),\n        {\n          name: storageKey,\n          version: 1,\n          partialize: (s) => ({ contrast: s.contrast }),\n          merge: (persisted, current) => {\n            const value = (persisted as { contrast?: unknown } | null)?.contrast;\n            return { ...current, contrast: isContrastMode(value) ? value : null };\n          },\n        },\n      ),\n      \"contrast\",\n    ),\n  );\n\n  function useApplyContrast({ account }: ApplyContrastOptions = {}): ContrastLevel {\n    const device = useContrastStore((s) => s.contrast);\n    // Subscribed whatever the mode (hooks cannot be skipped); only \"system\" reads it.\n    const prefersMore = useMediaQuery(PREFERS_MORE_QUERY, false);\n    const level = contrastLevel(resolveContrastMode(device, account), prefersMore);\n    useEffect(() => {\n      applyContrast(level);\n    }, [level]);\n    // Without a palette layer the stepped tokens are per theme: follow `.dark`.\n    useEffect(() => {\n      if (typeof MutationObserver === \"undefined\") return;\n      const root = document.documentElement;\n      const observer = new MutationObserver(() => {\n        if (!rememberedTokenSet(root)) reapplyContrastTokens(root);\n      });\n      observer.observe(root, { attributes: true, attributeFilter: [\"class\"] });\n      return () => observer.disconnect();\n    }, []);\n    return level;\n  }\n\n  return { useContrastStore, useApplyContrast };\n}\n\nexport type ContrastStore = ReturnType<typeof createContrastStore>;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/theme/contrast.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { create } from \"zustand\";\nimport { persist } from \"zustand/middleware\";\nimport { logger } from \"../lib/logger\";\nimport { readStored } from \"../lib/safe-storage\";\nimport { registerDeviceSetting } from \"../lib/device-settings\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { CONTRAST_STEPPED_VARS, contrastStep, rememberedTokenSet } from \"./contrast-tokens\";\nimport { applyTokenSet, DEFAULT_PRESET } from \"./palette-presets\";\nimport type { PersistedAppearanceOptions } from \"./text-size\";\n\n/**\n * \"More contrast\" (docs/text-size-harmonization.md §2.4, §5, §10.5, §10.6): a switch\n * beside the text size, on by choice or — on \"System\" — when the device asks for more\n * contrast (`prefers-contrast: more`). Any text size.\n *\n * In force it is `<html data-contrast=\"more\">` (else `\"standard\"`), which does two things:\n * - the inline colour tokens are re-written one step stronger (`applyTokenSet`'s\n *   contrast flag — see contrast-tokens.ts for what moves and why it is JS);\n * - tokens.css raises `--focus-ring-width` from 2 to 3 px, in light deepens the status,\n *   hue and field-sync literals and `--bg-active` to read on the stepped well (0.36,\n *   colour-roles §13), and turns on the `contrast:` variant for anything else a\n *   component wants to change.\n *\n * The names below are frozen like the text size's: server-kit's `CONTRAST_MODES`, the\n * stored format, the attribute.\n */\n\n/** The stored choices (§10.6): server-kit's `CONTRAST_MODES`. \"system\" IS a stored value\n *  — the PATCH rule refuses an explicit null, so null means only \"never chosen\". */\nexport const CONTRAST_MODES = [\"system\", \"standard\", \"more\"] as const;\n\nexport type ContrastMode = (typeof CONTRAST_MODES)[number];\n\n/** What is in force on `<html data-contrast>`: a mode with \"system\" resolved. */\nexport type ContrastLevel = \"standard\" | \"more\";\n\nconst CONTRAST_ATTRIBUTE = \"data-contrast\";\nconst PREFERS_MORE_QUERY = \"(prefers-contrast: more)\";\n\nexport function isContrastMode(value: unknown): value is ContrastMode {\n  return value === \"system\" || value === \"standard\" || value === \"more\";\n}\n\n/** The mode in force: **this device's own choice → the account's → \"system\"** (§2.6).\n *  The one order the pre-paint call, the apply hook and `useAccountAppearance` share. */\nexport function resolveContrastMode(device: unknown, account?: unknown): ContrastMode {\n  if (isContrastMode(device)) return device;\n  if (isContrastMode(account)) return account;\n  return \"system\";\n}\n\n/** Whether the device asks for more contrast now. False without `matchMedia`. */\nexport function prefersMoreContrast(): boolean {\n  try {\n    return typeof window !== \"undefined\" && typeof window.matchMedia === \"function\"\n      ? window.matchMedia(PREFERS_MORE_QUERY).matches\n      : false;\n  } catch {\n    return false;\n  }\n}\n\n/** A mode to the level it puts on `<html>`; \"system\" asks the device (or takes\n *  `prefersMore`, when the caller already knows). */\nexport function contrastLevel(mode: ContrastMode, prefersMore: boolean = prefersMoreContrast()): ContrastLevel {\n  return mode === \"more\" || (mode === \"system\" && prefersMore) ? \"more\" : \"standard\";\n}\n\n/** The level `<html>` carries now; \"standard\" without one. */\nexport function readContrastLevel(): ContrastLevel {\n  if (typeof document === \"undefined\") return \"standard\";\n  return document.documentElement.getAttribute(CONTRAST_ATTRIBUTE) === \"more\" ? \"more\" : \"standard\";\n}\n\n/**\n * Re-write the contrast-dependent tokens on `el` for its current `data-contrast`.\n *\n * With a palette layer (`applyTokenSet` has written a set here), that set is applied\n * again and steps itself. Without one — an app whose base tokens come from tokens.css,\n * like Kurvenschmiede's — the stepped tokens are written over the stylesheet for the\n * default preset in the current light/dark, or removed again: the four text and line\n * tokens in both modes, and in light the well and the four money colours too (0.36,\n * docs/colour-roles-harmonization.md §13.3 decision 10). In dark those five stay removed,\n * so the stylesheet's dark well and money paint.\n *\n * It never calls `applyTokenSet` here: that would remember a token set on `<html>`, and\n * this app would then take the palette branch above, which a theme switch does not re-run\n * (the class observer in `useApplyContrast` re-writes only while nothing is remembered).\n */\nfunction reapplyContrastTokens(el: HTMLElement): void {\n  const written = rememberedTokenSet(el);\n  if (written) {\n    applyTokenSet(el, written);\n    return;\n  }\n  for (const name of CONTRAST_STEPPED_VARS) el.style.removeProperty(name);\n  if (el.getAttribute(CONTRAST_ATTRIBUTE) !== \"more\") return;\n  const step = contrastStep(DEFAULT_PRESET[el.classList.contains(\"dark\") ? \"dark\" : \"light\"]);\n  el.style.setProperty(\"--text-secondary\", step.textSecondary);\n  el.style.setProperty(\"--text-muted\", step.textMuted);\n  el.style.setProperty(\"--text-placeholder\", step.textPlaceholder);\n  el.style.setProperty(\"--border\", step.border);\n  // One line per variable, not a loop: the step's fields are not the variables' names.\n  if (step.well) {\n    el.style.setProperty(\"--bg-surface-2\", step.well.bgSurface2);\n    el.style.setProperty(\"--money-income\", step.well.moneyIncome);\n    el.style.setProperty(\"--money-expense\", step.well.moneyExpense);\n    el.style.setProperty(\"--money-net\", step.well.moneyNet);\n    el.style.setProperty(\"--money-neutral\", step.well.moneyNeutral);\n  }\n}\n\n/** Put `level` on `<html>` and re-write the colour tokens for it. */\nexport function applyContrast(level: ContrastLevel): void {\n  if (typeof document === \"undefined\") return;\n  const root = document.documentElement;\n  root.setAttribute(CONTRAST_ATTRIBUTE, level);\n  reapplyContrastTokens(root);\n}\n\n/* ── Storage: the frozen format, the pre-paint call ─────────────────────── */\n\n/**\n * What a contrast store persists under its key — FROZEN, like the text size's:\n *\n *     {\"state\":{\"contrast\":\"more\"},\"version\":1}\n *\n * `contrast` is one of {@link CONTRAST_MODES}, or `null` / absent when this device never\n * chose.\n */\nexport interface PersistedContrast {\n  state?: { contrast?: ContrastMode | null };\n  version?: number;\n}\n\n/** This device's own choice under `storageKey`, or `null` when it never chose. */\nexport function readPersistedContrast(storageKey: string): ContrastMode | null {\n  try {\n    const blob = JSON.parse(readStored(storageKey) ?? \"null\") as PersistedContrast | null;\n    const mode = blob?.state?.contrast;\n    return isContrastMode(mode) ? mode : null;\n  } catch {\n    return null;\n  }\n}\n\n/**\n * Pre-paint (§10.3, §10.5): this device's choice under `storageKey` — else the account's\n * last known value, else \"system\" — resolved against `prefers-contrast` and applied\n * BEFORE `createRoot`. Call it next to `applyPersistedPalette`, in EITHER order — the\n * palette steps itself when `data-contrast` is already set, and this re-applies the\n * palette's set when it is not; no app has to put one first (0.32.1, keksdose's 0.32\n * report asked which). Returns the level applied.\n */\nexport function applyPersistedContrast(storageKey: string, options: PersistedAppearanceOptions = {}): ContrastLevel {\n  let account: unknown;\n  try {\n    account = options.account?.();\n  } catch {\n    account = undefined;\n  }\n  const level = contrastLevel(resolveContrastMode(readPersistedContrast(storageKey), account));\n  applyContrast(level);\n  return level;\n}\n\n/* ── The store ──────────────────────────────────────────────────────────── */\n\nexport interface ContrastState {\n  /** This device's own choice (persisted), or `null` when it never chose — then the\n   *  account's value applies, else \"system\". */\n  contrast: ContrastMode | null;\n  /** Store this device's choice; `null` forgets it. */\n  setContrast: (contrast: ContrastMode | null) => void;\n}\n\nexport interface ApplyContrastOptions {\n  /** The account's value (`/auth/me`'s `contrast`): it applies while this device has no\n   *  choice of its own. */\n  account?: string | null;\n}\n\n/**\n * Build a contrast store bound to a consumer-supplied localStorage key, shaped like\n * `createThemeStore` and {@link createTextSizeStore} (§6). It holds the DEVICE's choice;\n * the account's value comes in through `useApplyContrast({ account })`.\n *\n * `useApplyContrast` — mount it once near the root, beside `useApplyPalette`:\n * - puts the level on `<html>` and steps the tokens;\n * - on \"System\", follows `prefers-contrast: more` live (§10.5);\n * - without a palette layer, re-writes the stepped tokens when the light/dark class\n *   changes, since they differ per theme.\n *\n * The persisted format is {@link PersistedContrast}, and frozen.\n */\nexport function createContrastStore(storageKey: string) {\n  const useContrastStore = create<ContrastState>()(\n    logger(\n      persist(\n        (set) => ({\n          contrast: null,\n          setContrast: (contrast) => set({ contrast: isContrastMode(contrast) ? contrast : null }),\n        }),\n        {\n          name: storageKey,\n          version: 1,\n          partialize: (s) => ({ contrast: s.contrast }),\n          merge: (persisted, current) => {\n            const value = (persisted as { contrast?: unknown } | null)?.contrast;\n            return { ...current, contrast: isContrastMode(value) ? value : null };\n          },\n        },\n      ),\n      \"contrast\",\n    ),\n  );\n  // Reset this device's settings (docs/settings-harmonization.md §11.4): no choice on\n  // this device, so `useApplyContrast` re-resolves to the account's mode, else \"system\",\n  // and re-steps the tokens.\n  registerDeviceSetting({\n    key: storageKey,\n    kind: \"appearance\",\n    reset: () => useContrastStore.getState().setContrast(null),\n  });\n\n  function useApplyContrast({ account }: ApplyContrastOptions = {}): ContrastLevel {\n    const device = useContrastStore((s) => s.contrast);\n    // Subscribed whatever the mode (hooks cannot be skipped); only \"system\" reads it.\n    const prefersMore = useMediaQuery(PREFERS_MORE_QUERY, false);\n    const level = contrastLevel(resolveContrastMode(device, account), prefersMore);\n    useEffect(() => {\n      applyContrast(level);\n    }, [level]);\n    // Without a palette layer the stepped tokens are per theme: follow `.dark`.\n    useEffect(() => {\n      if (typeof MutationObserver === \"undefined\") return;\n      const root = document.documentElement;\n      const observer = new MutationObserver(() => {\n        if (!rememberedTokenSet(root)) reapplyContrastTokens(root);\n      });\n      observer.observe(root, { attributes: true, attributeFilter: [\"class\"] });\n      return () => observer.disconnect();\n    }, []);\n    return level;\n  }\n\n  return { useContrastStore, useApplyContrast };\n}\n\nexport type ContrastStore = ReturnType<typeof createContrastStore>;\n"],"mappings":"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","names":[]}

package/dist/theme/palette-derive.d.ts

@@ -1,6 +1,7 @@
 import type { ThemeMode } from "./theme-store.js";
 import type { TokenSet } from "./palette-presets.js";
 import type { CvdType, Oklch } from "./color.js";
+import type { ContrastLevel } from "./contrast.js";
 /**
  * Build a whole palette from one brand colour, plus any number of colours pinned by
  * hand, with every contrast ratio SOLVED rather than chosen and then hoped for.
@@ -85,6 +86,8 @@ export interface ContrastReport {
 export interface DerivedPalette {
     tokens: TokenSet;
     semantic: SemanticTokens;
+    /** {@link auditPalette} at both contrast levels: the More-contrast checks carry a
+     *  " (More contrast)" suffix (0.36). */
     audit: ContrastReport;
     /** Compromises the deriver had to make, in plain words. Never silent. */
     warnings: string[];
@@ -96,8 +99,19 @@ export declare function derivePalette({ anchors, mode, surfaceTint, textContrast
  * This is the part the shipped presets were missing. `derivePalette` runs it on the way
  * out, and the preset test runs it over everything the package ships, so a palette that
  * does not hold up cannot be merged with a comment claiming that it does.
+ *
+ * **`level: "more"`** (0.36, docs/colour-roles-harmonization.md §13.5) measures the set as
+ * More contrast paints it: the stepped secondary, muted and border, and in a light set the
+ * stepped well (as `bgSurface2`) and money — the same pairs, named with a " (More
+ * contrast)" suffix. Two things change with the level: the border is a field's boundary
+ * there, held to WCAG 1.4.11's 3:1 rather than the hairline's 1.1, and a light set's well
+ * must stand {@link WELL_STEP_MIN}:1 from the card. Pass `semantic` with tokens.css's More
+ * literals for a light set (the status colours step there); the status text is then
+ * measured on the stepped well too.
  */
-export declare function auditPalette(t: TokenSet, semantic?: SemanticTokens): ContrastReport;
+export declare function auditPalette(set: TokenSet, semantic?: SemanticTokens, options?: {
+    level?: ContrastLevel;
+}): ContrastReport;
 export interface ChartRampReport {
     colors: string[];
     /** Series pairs that are too close under normal vision or any simulated CVD. */

package/dist/theme/palette-derive.js

@@ -10,7 +10,7 @@ import {
   simulateCvd,
   solveLightness
 } from "./color.js";
-import { brandSoft, hoverFill } from "./contrast-tokens.js";
+import { brandSoft, contrastStep, hoverFill, steppedWellFill, WELL_STEP_MIN } from "./contrast-tokens.js";
 const HUE_HOME = {
   danger: { hue: 27, slack: 14 },
   warning: { hue: 75, slack: 16 },
@@ -119,9 +119,11 @@ function derivePalette({
   const worstText = [worstSurface, hover].reduce(
     (a, b) => contrast(a, mode === "light" ? "#000000" : "#ffffff") < contrast(b, mode === "light" ? "#000000" : "#ffffff") ? a : b
   );
+  const moreWell = steppedWellFill({ textPrimary, bgSurface: surfaces.bgSurface });
+  const brandGround = moreWell ? [worstSurface, moreWell].reduce((a, b) => contrast(a, "#000000") < contrast(b, "#000000") ? a : b) : worstSurface;
   const brandChroma = Math.max(brand.c, 0.06);
-  const brandRatio = contrast(anchors.brand, worstSurface);
-  let brandHex = brandRatio >= 3 ? toHex(parseHex(anchors.brand)) : solveAgainst(brand.h, brandChroma, 3, worstSurface, mode);
+  const brandRatio = contrast(anchors.brand, brandGround);
+  let brandHex = brandRatio >= 3 ? toHex(parseHex(anchors.brand)) : solveAgainst(brand.h, brandChroma, 3, brandGround, mode);
   if (brandRatio < 3) {
     warnings.push(
       `brand ${anchors.brand} sits at ${brandRatio.toFixed(2)}:1 against the ${mode} surfaces, below the 3:1 WCAG 1.4.11 asks of a control boundary. Lightness was adjusted to ${brandHex}; hue and chroma are unchanged.`
@@ -132,7 +134,9 @@ function derivePalette({
     return Math.min(
       contrast(soft.brandMuted, worstText),
       contrast(soft.brandMuted, soft.brandBg),
-      contrast(soft.brandMuted, soft.brandBgHover)
+      contrast(soft.brandMuted, soft.brandBgHover),
+      // …and on More contrast's light well, where a link button reads it (§13.3).
+      moreWell ? contrast(soft.brandMuted, moreWell) : Infinity
     );
   };
   for (let i = 0; i < 40 && brandMutedWorst(brandHex) < 4.5; i++) {
@@ -291,7 +295,11 @@ function derivePalette({
     chart: [],
     heat: deriveHeat(moneyIncome, moneyExpense, surfaces, mode)
   };
-  return { tokens, semantic, audit: auditPalette(tokens, semantic), warnings };
+  const standard = auditPalette(tokens, semantic);
+  const more = auditPalette(tokens, void 0, { level: "more" });
+  const checks = [...standard.checks, ...more.checks];
+  const failures = checks.filter((c) => !c.passes);
+  return { tokens, semantic, audit: { checks, failures, passes: failures.length === 0 }, warnings };
 }
 function deriveHeat(income, expense, surfaces, mode) {
   const exp = hexToOklch(expense);
@@ -304,7 +312,23 @@ function deriveHeat(income, expense, surfaces, mode) {
     empty: mode === "light" ? "rgba(120,110,95,0.14)" : "rgba(160,170,190,0.10)"
   };
 }
-function auditPalette(t, semantic) {
+function auditPalette(set, semantic, options = {}) {
+  const more = options.level === "more";
+  const step = more ? contrastStep(set) : null;
+  const t = step ? {
+    ...set,
+    textSecondary: step.textSecondary,
+    textMuted: step.textMuted,
+    border: step.border,
+    ...step.well && {
+      bgSurface2: step.well.bgSurface2,
+      moneyIncome: step.well.moneyIncome,
+      moneyExpense: step.well.moneyExpense,
+      moneyNet: step.well.moneyNet,
+      moneyNeutral: step.well.moneyNeutral
+    }
+  } : set;
+  const suffix = more ? " (More contrast)" : "";
   const checks = [];
   const surfaces = [
     ["bgPage", t.bgPage],
@@ -318,11 +342,15 @@ function auditPalette(t, semantic) {
   const add = (pair, fg, bg, required, rule) => {
     const ratio = contrast(fg, bg);
     const slack = MIXED.test(pair) ? 0.05 : 0;
-    checks.push({ pair, ratio, required, rule, passes: ratio >= required - slack });
+    checks.push({ pair: pair + suffix, ratio, required, rule, passes: ratio >= required - slack });
   };
   for (const [name, bg] of surfaces) {
     add(`brand on ${name}`, t.brand, bg, 3, "WCAG 1.4.11 graphical object");
-    add(`border on ${name}`, t.border, bg, 1.1, "house rule: a hairline must be findable");
+    if (more) add(`border on ${name}`, t.border, bg, 3, "WCAG 1.4.11 \u2014 under More contrast a border bounds a field");
+    else add(`border on ${name}`, t.border, bg, 1.1, "house rule: a hairline must be findable");
+  }
+  if (step?.well) {
+    add("bgSurface2 on bgSurface", t.bgSurface2, t.bgSurface, WELL_STEP_MIN, "house rule: the well stands two hover steps from the card");
   }
   for (const [name, bg] of textGrounds) {
     add(`textPrimary on ${name}`, t.textPrimary, bg, 7, "WCAG 1.4.6 AAA body text");
@@ -353,6 +381,7 @@ function auditPalette(t, semantic) {
     ]) {
       add(`${name} on bgSurface`, fg, t.bgSurface, 4.5, "WCAG 1.4.3 \u2014 rendered as text");
       add(`${name} on bgHover`, fg, hover, 4.5, "WCAG 1.4.3 \u2014 rendered as text, on a hovered row");
+      if (step?.well) add(`${name} on bgSurface2`, fg, t.bgSurface2, 4.5, "WCAG 1.4.3 \u2014 rendered as text, on the well");
     }
     add("danger on dangerBg", semantic.danger, semantic.dangerBg, 4.5, "WCAG 1.4.3 \u2014 badge text");
     add("warning on warningBg", semantic.warning, semantic.warningBg, 4.5, "WCAG 1.4.3 \u2014 badge text");