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

package/utils/theme.ts

@@ -27,28 +27,55 @@
  */
 
 /**
- * WHAT MOVED FROM THE DESIGN, AND WHY - the owner's decision, 2026-08-13:
- * "minimal darkening, keep the look".
+ * THE SIX LIGHT VALUES ARE BACK ON THE DESIGN - the owner's decision,
+ * 2026-08-14, which REVERSES the 2026-08-13 one recorded below.
  *
- * Measured against the design as handed over, the LIGHT theme failed AA on 27
- * text pairs and the DARK theme on 6. Six light values move, none by enough to
- * read as a different colour, and the dark theme's own palette is untouched:
+ * 2026-08-13 was "minimal darkening, keep the look": the light theme failed AA
+ * on 27 text pairs as handed over, so six values were darkened just enough to
+ * clear 4.5:1. 2026-08-14 is "100% design fidelity over WCAG AA" - the darker
+ * `--muted` in particular flattened the hierarchy the design is built on, and
+ * that was visible on staging. All six go back to the handoff, exactly:
  *
- *     --muted        #8b8f98 -> #6b7079   (table headers, breadcrumbs, sub-lines)
- *     --ok           #0f8a62 -> #0e7c58   (-10%)
- *     --warn         #a97a14 -> #8e6611   (-16%)
- *     --err          #cf4b4b -> #bc4444   (-9%)
- *     --info         #3b6fd4 -> #3869c9   (-5%)
- *     --accent-text  #4a6eb6 -> #476aaf   (-4%)
+ *     --muted        #6b7079 -> #8b8f98
+ *     --ok           #0e7c58 -> #0f8a62
+ *     --warn         #8e6611 -> #a97a14
+ *     --err          #bc4444 -> #cf4b4b
+ *     --info         #3869c9 -> #3b6fd4
+ *     --accent-text  #476aaf -> #4a6eb6
  *
- * The soft chip BACKGROUNDS are left exactly as designed. The design states
- * them literally rather than deriving them from the foreground, so darkening a
- * label does not drag its chip with it - a Pending chip is the same colour it
- * was, its text is simply readable on it.
+ * WHAT THAT KNOWINGLY COSTS: 16 of the 22 light pairs a person reads are now
+ * below AA. `utils/theme-aa-ledger.ts` is the full list with measured ratios and
+ * `theme.test.ts` pins every one of them, so the failures are recorded rather
+ * than hidden and any later drift - in either direction - still fails the build.
+ * The worst, measured (WCAG 2.1, alpha composited):
+ *
+ *     --muted on the page bg          2.99:1  (needs 4.5)
+ *     --muted on a table header band  3.10:1
+ *     --muted on the sidebar          3.13:1
+ *     --muted on a card               3.24:1  - every table header, breadcrumb,
+ *                                               KPI sub-line and empty state
+ *     --warn on its Pending chip      3.38:1
+ *     --ok   on its chip              3.82:1
+ *     --warn / white on warn fill     3.83:1
+ *     --err  on its chip              3.86:1
+ *
+ * Six light pairs still pass: text, text2, info as text, white on the info fill,
+ * accent-text as a link, and white on primary-button.
+ *
+ * The DARK theme was exact as handed over and still is, and its AA assertions
+ * are untouched - dark mode remains fully compliant.
+ *
+ * `--accent-strong` (#4b74c4) is NOT one of the six and does not move. It is an
+ * addition, not a darkening: the design puts white on `--accent` at 3.23:1, and
+ * `--accent` itself is still the design's exact colour everywhere it is a line,
+ * a fill edge or a soft background. See the note below.
+ *
+ * The soft chip BACKGROUNDS are, and always were, exactly as designed.
  *
  * `--accent-text` is `color-mix(in oklab, var(--accent) 75%, var(--text))` in
  * the design. It is resolved to a plain hex here because Vuetify needs a
- * concrete colour and because a test cannot measure a `color-mix()`.
+ * concrete colour and because a test cannot measure a `color-mix()`; the hex
+ * below is that mix resolved in a browser, not an approximation.
  */
 
 /**
@@ -122,22 +149,22 @@ export const PALETTE = {
     text: "#191b1f",
     /** Secondary text. 9.62:1 on a card. */
     text2: "#41454d",
-    /** Table headers, breadcrumbs, KPI sub-lines. 4.98:1 on a card. */
-    muted: "#6b7079",
-    /** Completed / Paid / Available / Open. 4.58:1 on its chip. */
-    ok: "#0e7c58",
-    /** Pending. 4.56:1 on its chip. */
-    warn: "#8e6611",
-    /** In Use / Closed / Checkout. 4.55:1 on its chip. */
-    err: "#bc4444",
-    /** Role and info tags. 4.58:1 on its chip. */
-    info: "#3869c9",
+    /** Table headers, breadcrumbs, KPI sub-lines. The design's. 3.24:1 on a card - below AA, knowingly. */
+    muted: "#8b8f98",
+    /** Completed / Paid / Available / Open. The design's. 3.82:1 on its chip - below AA, knowingly. */
+    ok: "#0f8a62",
+    /** Pending. The design's. 3.38:1 on its chip - below AA, knowingly. */
+    warn: "#a97a14",
+    /** In Use / Closed / Checkout. The design's. 3.86:1 on its chip - below AA, knowingly. */
+    err: "#cf4b4b",
+    /** Role and info tags. The design's. 4.20:1 on its chip - below AA, knowingly. */
+    info: "#3b6fd4",
     /** The brand accent, exactly as designed. Never carries white lettering. */
     accent: "#5b8def",
     /** The only place the accent is darkened: fills with a white label. 4.57:1. */
     accentStrong: "#4b74c4",
-    /** Links, active nav item, active tab. 4.57:1 on `--accent-soft`. */
-    accentText: "#476aaf",
+    /** Links, active nav item, active tab. The design's oklab mix, resolved. 4.29:1 on `--accent-soft` over the sidebar - below AA, knowingly. */
+    accentText: "#4a6eb6",
     /** Labels on the filled colours above. Light's fills carry white. */
     onFill: "#ffffff",
   },