@7365admin1/layer-common 3.2.2-staging.120 → 3.2.2-staging.121

package/components/Nfc/NFCTagForm.vue

@@ -64,6 +64,10 @@
         </v-col>
 
         <v-col cols="6" class="pa-0">
+          <!-- Was `color="black"`: a fixed slab that stayed black on the dark
+               card. `primary-button` is the theme's FILL token, and its pair
+               `on-primary-button` supplies the white label - unlike `primary`,
+               which is a FOREGROUND here (links, icons, text buttons). -->
           <v-btn
             block
             tile
@@ -71,7 +75,7 @@
             class="text-none"
             size="large"
             height="48"
-            color="black"
+            color="primary-button"
             @click="submit"
             :loading="loading"
             :disabled="!valid || loading || !hasChanges"

package/components/TableMain.vue

@@ -155,8 +155,14 @@
         </div>
 
         <!-- Data Table -->
+        <!--
+          `tableHeaders`, not `headers`, and the two are the SAME ARRAY unless a
+          caller has opted into fixed proportions by putting `weight` on a
+          column. See `columnsAreWeighted` below.
+        -->
         <v-data-table
-          :headers="headers"
+          :class="columnsAreWeighted ? 'table-card__fixed' : undefined"
+          :headers="tableHeaders"
           :items="items"
           :item-value="itemValue"
           :items-per-page="itemsPerPage"
@@ -257,6 +263,49 @@ const props = defineProps({
   },
 });
 
+/**
+ * THE DESIGN'S FIXED COLUMN PROPORTIONS, AND WHY THEY ARE OPT-IN.
+ *
+ * Every table in the prototype is a CSS grid with an explicit, per-table
+ * `grid-template-columns` - `0.9fr 1.5fr 1.7fr 0.8fr 1fr 1.1fr` on Feedbacks,
+ * `2fr 1fr 1fr` on Units, `1.6fr 1fr 1.3fr 1.6fr 48px` on Pass & Key. Those
+ * ratios are a per-screen design decision. Nothing in a caller's `headers`
+ * array carries that information, so this shared component cannot derive them,
+ * and inventing one set of proportions for 21 components and 18 app pages would
+ * be worse than the automatic layout they have now.
+ *
+ * So it is stated, not guessed: a header may carry `weight: 1.5` and this turns
+ * the weights into percentage widths and switches the table to
+ * `table-layout: fixed`, which is what makes a width binding rather than a hint.
+ * A column with NO weight is left exactly as the caller wrote it, so an
+ * existing `width` (an action column pinned at 48px, say) survives untouched
+ * and only the weighted columns share out what is left.
+ *
+ * NO caller changes. With no weights anywhere, `tableHeaders` IS `props.headers`
+ * - the same array reference - and the table renders exactly what it renders
+ * today, automatic widths and all.
+ */
+const columnsAreWeighted = computed(() =>
+  props.headers.some((h) => Number(h?.weight) > 0)
+);
+
+const tableHeaders = computed(() => {
+  if (!columnsAreWeighted.value) return props.headers;
+
+  // Columns with no weight keep whatever width they already had (often none,
+  // e.g. a 48px action column), and only the weighted ones share what is left.
+  const total = props.headers.reduce(
+    (sum, h) => sum + (Number(h?.weight) > 0 ? Number(h.weight) : 0),
+    0
+  );
+
+  return props.headers.map((h) =>
+    Number(h?.weight) > 0
+      ? { ...h, width: `${((Number(h.weight) / total) * 100).toFixed(4)}%` }
+      : h
+  );
+});
+
 const emits = defineEmits([
   "create",
   "scan",

package/components/VisitorsReportPreview.vue

@@ -335,7 +335,10 @@ onMounted(() => {
 }
 
 .snapshot-label--out {
-    color: var(--error);
+    /* Was `var(--error)`, which is not a token here - the name is `--err`. An
+       undefined custom property invalidates the declaration silently, so the
+       label inherited instead of turning red. */
+    color: var(--err);
 }
 
 :deep(.v-card) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.120",
+  "version": "3.2.2-staging.121",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/tools/render-harness/baselines.json

@@ -18,5 +18,100 @@
     "els": 3,
     "textChars": 2,
     "recordedFrom": "0642279"
+  },
+  "AccessCardAssignToUnitForm": {
+    "els": 177,
+    "textChars": 131,
+    "recordedFrom": "178ebf0"
+  },
+  "AccessCardReplaceForm": {
+    "els": 68,
+    "textChars": 83,
+    "recordedFrom": "178ebf0"
+  },
+  "AddEqupmentForm": {
+    "els": 90,
+    "textChars": 99,
+    "recordedFrom": "178ebf0"
+  },
+  "BuildingForm": {
+    "els": 126,
+    "textChars": 69,
+    "recordedFrom": "178ebf0"
+  },
+  "BulletinBoardForm": {
+    "els": 172,
+    "textChars": 165,
+    "recordedFrom": "178ebf0"
+  },
+  "CameraForm": {
+    "els": 127,
+    "textChars": 80,
+    "recordedFrom": "178ebf0"
+  },
+  "DocumentForm": {
+    "els": 52,
+    "textChars": 57,
+    "recordedFrom": "178ebf0"
+  },
+  "InvitationClientForm": {
+    "els": 101,
+    "textChars": 47,
+    "recordedFrom": "178ebf0"
+  },
+  "InvitationForm": {
+    "els": 86,
+    "textChars": 43,
+    "recordedFrom": "178ebf0"
+  },
+  "ServiceProviderFormCreate": {
+    "els": 51,
+    "textChars": 38,
+    "recordedFrom": "178ebf0"
+  },
+  "AcceptDialog": {
+    "els": 24,
+    "textChars": 106,
+    "recordedFrom": "178ebf0"
+  },
+  "Card/DeleteConfirmation": {
+    "els": 21,
+    "textChars": 129,
+    "recordedFrom": "178ebf0"
+  },
+  "Dialog/DeleteConfirmation": {
+    "els": 21,
+    "textChars": 129,
+    "recordedFrom": "178ebf0"
+  },
+  "HidAccessLogDashboard": {
+    "els": 172,
+    "textChars": 437,
+    "recordedFrom": "178ebf0"
+  },
+  "HidIntercomManagement": {
+    "els": 148,
+    "textChars": 167,
+    "recordedFrom": "178ebf0"
+  },
+  "HidUserEnrollment": {
+    "els": 142,
+    "textChars": 287,
+    "recordedFrom": "178ebf0"
+  },
+  "HidReaderManagement": {
+    "els": 112,
+    "textChars": 377,
+    "recordedFrom": "178ebf0"
+  },
+  "HidQrCodeConfiguration": {
+    "els": 106,
+    "textChars": 453,
+    "recordedFrom": "178ebf0"
+  },
+  "HidServiceSettingsPanel": {
+    "els": 18,
+    "textChars": 164,
+    "recordedFrom": "178ebf0"
   }
 }

package/tools/render-harness/harness-init.ps1

@@ -78,6 +78,10 @@ if (-not (Test-Path "$fork\vite.config.mjs")) {
 # The hardened runner lives in the repo, next to this script, so a fork always
 # gets the CURRENT one rather than whatever the canonical harness was carrying.
 Copy-Item (Join-Path $PSScriptRoot "render-check.mjs") -Destination $fork -Force
+# `probe.mjs` is imported by the runner, so a fork without it dies on
+# ERR_MODULE_NOT_FOUND before it measures anything. It was missing from this
+# list, which every fork made before now had to work around by hand.
+Copy-Item (Join-Path $PSScriptRoot "probe.mjs") -Destination $fork -Force
 Copy-Item (Join-Path $PSScriptRoot "baselines.json") -Destination $fork -Force -ErrorAction SilentlyContinue
 
 # A junctioned `node_modules` SHARES `node_modules/.vite` with the harness it

package/utils/status.test.ts

@@ -62,6 +62,39 @@ test("the product's own status words keep the tone the screens already gave them
   }
 });
 
+/**
+ * HID enrolment. These two are the whole point of the Status column on
+ * `HidUserEnrollment` - if they were left unlisted they would BOTH be neutral
+ * and the column would stop distinguishing anything, so they are pinned.
+ */
+test("Mapped and Unmapped keep the tones the enrolment screen already gave them", () => {
+  assert.equal(statusTone("Mapped"), "ok");
+  assert.equal(statusTone("Unmapped"), "warn");
+});
+
+/**
+ * HID intercom SIP state. "Disabled" and "Not connected" must stay NEUTRAL -
+ * painting an intentionally-off intercom red would read as a fault.
+ */
+/**
+ * HID access authorization, landing on `staging` in b0667a7. Pinned before that
+ * merge so the words cannot arrive and quietly render neutral - the difference
+ * between a granted and a denied door is the whole point of the column.
+ */
+test("HID authorization states are known to the shared map before b0667a7 merges", () => {
+  assert.equal(statusTone("Authorized"), "ok");
+  assert.equal(statusTone("Not Authorized"), "err");
+  assert.equal(statusTone("Unknown"), "warn");
+});
+
+test("intercom SIP states keep the tones the intercom screen already gave them", () => {
+  assert.equal(statusTone("Connected"), "ok");
+  assert.equal(statusTone("Connecting"), "warn");
+  assert.equal(statusTone("Not connected"), "neutral");
+  assert.equal(statusTone("Disabled"), "neutral");
+  assert.equal(statusTone("Failed"), "err");
+});
+
 /**
  * The one place the handoff and the old per-screen colour disagree: `Open` was
  * grey on the cleaning schedules and the design names it `ok`. Pinned so the

package/utils/status.ts

@@ -70,6 +70,42 @@ const TONES: Record<string, TStatusTone> = {
   expired: "neutral", // was `grey`
 
   "awaiting approval": "warn", // a waiting state, like Pending
+
+  /**
+   * HID enrolment: is this reader identity tied to a real person record yet?
+   * Same rule as the Phase 4 block above - not a new opinion, but the tone
+   * `HidUserEnrollment` already painted these two words, moved into the one
+   * list. Left unlisted they would BOTH come out neutral, which would erase
+   * the only distinction the column exists to draw.
+   */
+  mapped: "ok", // was `status-success`, #1b7f3a on #dff7e7
+  unmapped: "warn", // was `status-warning`, #9a6700 on #fff0cc
+
+  /**
+   * HID intercom SIP state, from `HidIntercomManagement`'s own
+   * `getStatusClass`. Same rule again: the tone the screen already gave the
+   * word, moved into the one list. "Disabled" and "Not connected" are NOT
+   * failures - the operator turned SIP off, or never set it up - so they stay
+   * neutral, which is what `status-muted` painted them.
+   */
+  /**
+   * HID access authorization. These arrive with `b0667a7` on `staging`
+   * ("Call the Authorized status API from Amico via Access Logs"), which
+   * replaces the Access Logs' Mapped/Unmapped column with these three words.
+   * Listed here AHEAD of that merge so the shared chip already knows them -
+   * unlisted they would all come out neutral, silently erasing the difference
+   * between a granted and a denied door. Tones are that commit's own:
+   * `mapped-chip` green, `unmapped-chip` red, `unknown-chip` amber.
+   */
+  authorized: "ok",
+  "not authorized": "err",
+  unknown: "warn",
+
+  connected: "ok", // was `status-success`
+  connecting: "warn", // was `status-warning`, the fall-through case
+  "not connected": "neutral", // was `status-muted`
+  disabled: "neutral", // was `status-muted`
+  failed: "err", // was `status-error`
 };
 
 /**

package/utils/theme-aa-ledger.ts

@@ -0,0 +1,142 @@
+/**
+ * THE LIGHT THEME'S KNOWN AA FAILURES, MEASURED.
+ *
+ * The owner's 2026-08-14 decision is 100% design fidelity over WCAG AA, so the
+ * six light values that had been darkened are back on the handoff and the light
+ * theme no longer clears 4.5:1 everywhere. This file is the ledger of exactly
+ * what that costs: every pair, its measured ratio, and what it needs.
+ *
+ * It is data, not prose - `theme.test.ts` asserts each entry still measures what
+ * it says, so a later change that drifts a colour (in either direction) fails
+ * the build and has to come back here and say so.
+ *
+ * `run` prints the table: `node --experimental-strip-types utils/theme-aa-ledger.ts`
+ */
+import { PALETTE, LIGHT_THEME, DARK_THEME } from "./theme.ts";
+
+const luminance = (hex: string): number => {
+  const c = [0, 2, 4]
+    .map((i) => parseInt(hex.slice(1 + i, 3 + i), 16) / 255)
+    .map((v) => (v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4)));
+  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+};
+
+export const contrast = (a: string, b: string): number => {
+  const [x, y] = [luminance(a), luminance(b)];
+  return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
+};
+
+export const over = (fg: string, bg: string, alpha: number): string =>
+  "#" +
+  [0, 2, 4]
+    .map((i) =>
+      Math.round(
+        parseInt(fg.slice(1 + i, 3 + i), 16) * alpha +
+          parseInt(bg.slice(1 + i, 3 + i), 16) * (1 - alpha),
+      )
+        .toString(16)
+        .padStart(2, "0"),
+    )
+    .join("");
+
+const L = PALETTE.light;
+
+/** `--thead` is a 2% ink wash over the card, not a colour of its own. */
+export const thead = over("#14161a", L.card, 0.02);
+
+/**
+ * `--hover` is a 5% ink wash. On the page background it is the fill a DISABLED
+ * control sits on (the HID reader identification methods, greyed until Online
+ * Mode is on), so `--muted` label on `--hover` is a pair a person actually reads.
+ */
+export const hoverOnBg = over("#14161a", L.bg, 0.05);
+
+
+/** The soft chip backgrounds, exactly as the design states them. */
+export const chip = {
+  ok: over("#0f8a62", L.card, 0.1),
+  warn: over("#be8c19", L.card, 0.13),
+  err: over("#cf4b4b", L.card, 0.1),
+  info: over("#3b6fd4", L.card, 0.1),
+};
+
+/** `--accent-soft` is transparent, so it takes the colour of what is behind it. */
+export const accentSoft = {
+  sidebar: over(L.accent, L.sidebar, 0.12),
+  card: over(L.accent, L.card, 0.12),
+};
+
+/**
+ * Every LIGHT pair a person actually reads. `need` is 4.5 for body text and 3
+ * for large text (>=18.66px, or >=14px at 700+) and for non-text edges.
+ */
+export const LIGHT_PAIRS: Array<{
+  what: string;
+  fg: string;
+  bg: string;
+  need: number;
+}> = [
+  { what: "muted on a card (table header text, sub-lines)", fg: L.muted, bg: L.card, need: 4.5 },
+  { what: "muted on the page background", fg: L.muted, bg: L.bg, need: 4.5 },
+  { what: "muted on a table header band", fg: L.muted, bg: thead, need: 4.5 },
+  { what: "muted on the sidebar", fg: L.muted, bg: L.sidebar, need: 4.5 },
+  { what: "muted on a disabled control's hover fill", fg: L.muted, bg: hoverOnBg, need: 4.5 },
+  { what: "ok label on its own chip", fg: L.ok, bg: chip.ok, need: 4.5 },
+  { what: "warn label on its own chip", fg: L.warn, bg: chip.warn, need: 4.5 },
+  { what: "err label on its own chip", fg: L.err, bg: chip.err, need: 4.5 },
+  { what: "info label on its own chip", fg: L.info, bg: chip.info, need: 4.5 },
+  { what: "ok as plain text on a card", fg: L.ok, bg: L.card, need: 4.5 },
+  { what: "warn as plain text on a card", fg: L.warn, bg: L.card, need: 4.5 },
+  { what: "err as plain text on a card (the Logout row)", fg: L.err, bg: L.card, need: 4.5 },
+  { what: "info as plain text on a card", fg: L.info, bg: L.card, need: 4.5 },
+  { what: "accent-text as a link on a card", fg: L.accentText, bg: L.card, need: 4.5 },
+  { what: "accent-text on accent-soft over the sidebar (active nav item)", fg: L.accentText, bg: accentSoft.sidebar, need: 4.5 },
+  { what: "accent-text on accent-soft over a card (active tab, avatar initials)", fg: L.accentText, bg: accentSoft.card, need: 4.5 },
+  { what: "white on the filled success colour", fg: "#ffffff", bg: L.ok, need: 4.5 },
+  { what: "white on the filled warning colour", fg: "#ffffff", bg: L.warn, need: 4.5 },
+  { what: "white on the filled error colour", fg: "#ffffff", bg: L.err, need: 4.5 },
+  { what: "white on the filled info colour", fg: "#ffffff", bg: L.info, need: 4.5 },
+  { what: "white on primary-button (accent-strong) - NOT reverted", fg: "#ffffff", bg: L.accentStrong, need: 4.5 },
+  { what: "text on a card", fg: L.text, bg: L.card, need: 4.5 },
+  { what: "text2 on a card", fg: L.text2, bg: L.card, need: 4.5 },
+];
+
+export const measure = () =>
+  LIGHT_PAIRS.map((p) => ({
+    ...p,
+    ratio: Math.round(contrast(p.fg, p.bg) * 100) / 100,
+    passes: contrast(p.fg, p.bg) >= p.need,
+  }));
+
+/** The dark theme was exact as handed over and clears AA - this proves it still does. */
+export const DARK_PAIRS = () => {
+  const D = PALETTE.dark;
+  const dthead = over("#ffffff", D.card, 0.02);
+  return [
+    { what: "muted on a card", fg: D.muted, bg: D.card, need: 4.5 },
+    { what: "muted on the page background", fg: D.muted, bg: D.bg, need: 4.5 },
+    { what: "muted on a table header band", fg: D.muted, bg: dthead, need: 4.5 },
+    { what: "muted on the sidebar", fg: D.muted, bg: D.sidebar, need: 4.5 },
+    { what: "text on a card", fg: D.text, bg: D.card, need: 4.5 },
+    { what: "text2 on a card", fg: D.text2, bg: D.card, need: 4.5 },
+    { what: "ok on its chip", fg: D.ok, bg: over("#41c795", D.card, 0.12), need: 4.5 },
+    { what: "warn on its chip", fg: D.warn, bg: over("#dcaf4e", D.card, 0.13), need: 4.5 },
+    { what: "err on its chip", fg: D.err, bg: over("#e57373", D.card, 0.12), need: 4.5 },
+    { what: "info on its chip", fg: D.info, bg: over("#7da6ec", D.card, 0.12), need: 4.5 },
+    { what: "accent-text on accent-soft over the sidebar", fg: D.accentText, bg: over(D.accent, D.sidebar, 0.12), need: 4.5 },
+    { what: "accent-text on accent-soft over a card", fg: D.accentText, bg: over(D.accent, D.card, 0.12), need: 4.5 },
+  ].map((p) => ({ ...p, ratio: Math.round(contrast(p.fg, p.bg) * 100) / 100, passes: contrast(p.fg, p.bg) >= p.need }));
+};
+
+if (process.argv[1]?.endsWith("theme-aa-ledger.ts")) {
+  const row = (r: { what: string; fg: string; bg: string; ratio: number; need: number; passes: boolean }) =>
+    `${r.passes ? "PASS" : "FAIL"}  ${String(r.ratio).padStart(5)}:1 / ${r.need}  ${r.fg} on ${r.bg}  ${r.what}`;
+  console.log("LIGHT");
+  for (const r of measure()) console.log("  " + row(r));
+  console.log("\nDARK");
+  for (const r of DARK_PAIRS()) console.log("  " + row(r));
+  const f = measure().filter((r) => !r.passes).length;
+  console.log(`\n${f} of ${LIGHT_PAIRS.length} light pairs below AA; ${DARK_PAIRS().filter((r) => !r.passes).length} dark.`);
+  void LIGHT_THEME;
+  void DARK_THEME;
+}

package/utils/theme.test.ts

@@ -2,6 +2,7 @@ import assert from "node:assert/strict";
 import { test } from "node:test";
 
 import { DARK_THEME, LIGHT_THEME, PALETTE, type TPalette } from "./theme.ts";
+import { DARK_PAIRS, measure } from "./theme-aa-ledger.ts";
 
 /**
  * The dark theme was shipped once with `primary` chosen for the one place it
@@ -262,13 +263,19 @@ test("the dark divider clears the 3:1 a boundary wants", () => {
 /* ==================================================================== */
 /* THE REDESIGN PALETTE.                                                */
 /*                                                                      */
-/* Measured against the design as handed over, the light theme failed   */
-/* AA on 27 text pairs and the dark theme on 6. The owner's instruction */
-/* was "minimal darkening, keep the look", so what these tests hold in  */
-/* place is BOTH halves of that: every pair a person reads clears AA,   */
-/* AND the values that were not the problem are still exactly the ones  */
-/* the design specifies. A later phase that "tidies" a colour back to   */
-/* its handoff value, or drifts one away from it, fails here.           */
+/* The owner's decision on 2026-08-14 is 100% DESIGN FIDELITY over WCAG */
+/* AA, reversing 2026-08-13's "minimal darkening". So the two themes    */
+/* are now held to two different standards, on purpose:                 */
+/*                                                                      */
+/*   DARK  - exact as handed over AND fully AA. Asserted below.         */
+/*   LIGHT - exact as handed over, 16 of 22 read pairs BELOW AA. Not    */
+/*           asserted as passing; every ratio is PINNED to its measured */
+/*           value in `utils/theme-aa-ledger.ts` instead, so the cost is */
+/*           recorded rather than hidden and any drift - lighter OR     */
+/*           darker - still fails the build and has to be declared.     */
+/*                                                                      */
+/* A later phase that "tidies" a light colour to make a contrast test   */
+/* green is exactly what the ledger test is here to catch.              */
 /* ==================================================================== */
 
 const L = PALETTE.light;
@@ -301,15 +308,16 @@ const soft = (p: TPalette, key: "ok" | "warn" | "err" | "info", on: string) => {
 
 const accentSoft = (p: TPalette, on: string) => over(p.accent, on, 0.12);
 
-for (const [name, p] of [
-  ["light", L],
-  ["dark", D],
-] as const) {
+/*
+ * DARK ONLY. The light theme is measured by the ledger test further down, not
+ * asserted here - see the section note above.
+ */
+for (const [name, p] of [["dark", D]] as const) {
   /**
    * `--muted` is the table header of every table in the product, the
-   * breadcrumb, and every KPI sub-line. It failed on all four of its surfaces
-   * in the light theme at 2.99-3.24:1, which is the single most-read text in
-   * the design.
+   * breadcrumb, and every KPI sub-line. The dark theme's `#868c98` clears AA
+   * on all four of its surfaces as designed; the light theme's `#8b8f98` does
+   * not, at 2.99-3.24:1, and that is the ledger's headline entry.
    */
   test(`${name}: muted text is readable on every surface it is used on`, () => {
     for (const [where, bg] of [
@@ -473,30 +481,83 @@ test("the design's own values are unchanged wherever they already passed", () =>
 });
 
 /**
- * Minimal darkening means MINIMAL. Each light value that moved is checked to
- * still be recognisably the colour it was - if a later pass "fixes" contrast
- * by reaching for a different green, this is what objects.
+ * THE SIX THAT WERE DARKENED ON 2026-08-13 ARE BACK ON THE HANDOFF, EXACTLY.
+ * Hex equality, not a tolerance: "design-exact" has no tolerance.
  */
-test("the light values that moved are still the same colours", () => {
-  const moved: Array<[string, string, string]> = [
-    ["muted", "#8b8f98", L.muted],
-    ["ok", "#0f8a62", L.ok],
-    ["warn", "#a97a14", L.warn],
-    ["err", "#cf4b4b", L.err],
-    ["info", "#3b6fd4", L.info],
-    ["accent-strong vs accent", "#5b8def", L.accentStrong],
-  ];
+test("the light palette is the handoff's, value for value", () => {
+  assert.equal(L.muted, "#8b8f98");
+  assert.equal(L.ok, "#0f8a62");
+  assert.equal(L.warn, "#a97a14");
+  assert.equal(L.err, "#cf4b4b");
+  assert.equal(L.info, "#3b6fd4");
+  // `color-mix(in oklab, #5b8def 75%, #191b1f)`, resolved in a browser.
+  assert.equal(L.accentText, "#4a6eb6");
+});
 
-  for (const [name, before, after] of moved) {
-    const shift = contrast(before, after);
-    assert.ok(
-      shift < 1.9,
-      `${name} moved from ${before} to ${after}, a ${shift.toFixed(
-        2
-      )}:1 jump - that is a different colour, not a darkened one`
+/**
+ * THE LEDGER. The light theme's known sub-AA pairs, each pinned to the ratio it
+ * actually measures. This is the "recorded, not hidden" half of the owner's
+ * decision: nobody can quietly darken a value to make a test green, and nobody
+ * can lighten one further without this failing and making them write it down.
+ *
+ * The numbers come from `utils/theme-aa-ledger.ts`, which is also runnable:
+ *   node --experimental-strip-types utils/theme-aa-ledger.ts
+ */
+test("the light theme's sub-AA pairs measure exactly what the ledger says", () => {
+  const EXPECTED: Record<string, number> = {
+    "muted on a card (table header text, sub-lines)": 3.24,
+    "muted on the page background": 2.99,
+    "muted on a table header band": 3.1,
+    "muted on the sidebar": 3.13,
+    "muted on a disabled control's hover fill": 2.71,
+    "ok label on its own chip": 3.82,
+    "warn label on its own chip": 3.38,
+    "err label on its own chip": 3.86,
+    "info label on its own chip": 4.2,
+    "ok as plain text on a card": 4.35,
+    "warn as plain text on a card": 3.83,
+    "err as plain text on a card (the Logout row)": 4.41,
+    "info as plain text on a card": 4.76,
+    "accent-text as a link on a card": 5,
+    "accent-text on accent-soft over the sidebar (active nav item)": 4.29,
+    "accent-text on accent-soft over a card (active tab, avatar initials)": 4.42,
+    "white on the filled success colour": 4.35,
+    "white on the filled warning colour": 3.83,
+    "white on the filled error colour": 4.41,
+    "white on the filled info colour": 4.76,
+    "white on primary-button (accent-strong) - NOT reverted": 4.57,
+    "text on a card": 17.24,
+    "text2 on a card": 9.62,
+  };
+
+  const measured = measure();
+  assert.equal(
+    measured.length,
+    Object.keys(EXPECTED).length,
+    "a pair was added to or removed from the ledger without updating this test"
+  );
+
+  for (const row of measured) {
+    assert.equal(
+      row.ratio,
+      EXPECTED[row.what],
+      `${row.what}: ledger says ${EXPECTED[row.what]}:1, measured ${row.ratio}:1`
     );
-    assert.ok(shift > 1, `${name} did not move at all`);
   }
+
+  const failing = measured.filter((r) => !r.passes).length;
+  assert.equal(
+    failing,
+    17,
+    `${failing} light pairs are below AA; the recorded, accepted count is 17. ` +
+      "If this moved, the owner's design-fidelity decision needs re-stating."
+  );
+});
+
+/** The dark theme carries no such debt, and that is worth asserting out loud. */
+test("the dark theme has no sub-AA pairs at all", () => {
+  const bad = DARK_PAIRS().filter((r) => !r.passes);
+  assert.deepEqual(bad, [], "dark mode was exact AND compliant - keep it that way");
 });
 
 /**