@7365admin1/layer-common 3.2.2-staging.182 → 3.2.2-staging.188

package/utils/theme.test.ts

@@ -1,4 +1,5 @@
 import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
 import { test } from "node:test";
 
 import { DARK_THEME, LIGHT_THEME, PALETTE, type TPalette } from "./theme.ts";
@@ -505,9 +506,8 @@ test("the light palette is the handoff's, value for value", () => {
  */
 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 a card (KPI sub-lines, field labels)": 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": 4.57,
@@ -548,8 +548,8 @@ test("the light theme's sub-AA pairs measure exactly what the ledger says", () =
   const failing = measured.filter((r) => !r.passes).length;
   assert.equal(
     failing,
-    8,
-    `${failing} light pairs are below AA; the recorded, accepted count is 8. ` +
+    7,
+    `${failing} light pairs are below AA; the recorded, accepted count is 7. ` +
       "If this moved, the owner's design-fidelity decision needs re-stating."
   );
 });
@@ -560,6 +560,90 @@ test("the dark theme has no sub-AA pairs at all", () => {
   assert.deepEqual(bad, [], "dark mode was exact AND compliant - keep it that way");
 });
 
+/* ------------------------------------------------------------------ */
+/* The two contrast fixes QA drove, asserted at the token level AND at  */
+/* the stylesheet that wires them.                                     */
+/* ------------------------------------------------------------------ */
+
+/**
+ * A native `<select>`'s option list is painted by the browser. With no
+ * background of its own the option keeps the theme's ink over whatever the
+ * browser paints - white on Windows/Chrome - which is 1.14:1 in dark mode.
+ * The rule gives it `--card`/`--text`, the same pair the themed popover uses.
+ */
+test("a native option's own fill carries the theme ink in both themes", () => {
+  for (const [name, p] of [["light", PALETTE.light], ["dark", PALETTE.dark]] as const) {
+    assert.ok(
+      contrast(p.text, p.card) >= 4.5,
+      `${name}: option ink on the card fill is ${contrast(p.text, p.card).toFixed(2)}:1`
+    );
+  }
+
+  // What the defect measured, so the number stays on the record.
+  assert.equal(Number(contrast(PALETTE.dark.text, "#ffffff").toFixed(2)), 1.14);
+});
+
+/**
+ * The table header. `--muted` measured 3.10:1 on the header band in light -
+ * below AA and reported by two apps' QA. `--text2` clears AA in both themes
+ * while staying clearly below the primary ink the data rows use, so the
+ * header still reads as secondary to the data.
+ */
+test("the table header clears AA and still reads below the data", () => {
+  for (const [name, p, wash] of [
+    ["light", PALETTE.light, "#14161a"],
+    ["dark", PALETTE.dark, "#ffffff"],
+  ] as const) {
+    const band = over(wash, p.card, 0.02);
+    const header = contrast(p.text2, band);
+    const data = contrast(p.text, band);
+
+    assert.ok(header >= 4.5, `${name}: header is ${header.toFixed(2)}:1, below AA`);
+    assert.ok(
+      header < data,
+      `${name}: the header (${header.toFixed(2)}:1) must stay below the data ` +
+        `(${data.toFixed(2)}:1) or it stops reading as secondary`
+    );
+    assert.ok(
+      contrast(p.muted, band) < header,
+      `${name}: --text2 must be an improvement on the --muted it replaced`
+    );
+  }
+});
+
+/**
+ * The ratios above are the tokens'. They say nothing about whether the CSS
+ * still ASKS for them - a deleted rule would leave every number here passing.
+ * These two assertions are the wiring. Neither can measure a real computed
+ * style: that needs a browser, and the measured evidence for it is in the PR.
+ */
+test("the stylesheets still ask for the tokens the two fixes chose", () => {
+  const css = (f: string) =>
+    readFileSync(new URL(`../assets/css/${f}`, import.meta.url), "utf8")
+      .replace(/\/\*[\s\S]*?\*\//g, "");
+
+  const primitives = css("primitives.css");
+  const optionRule = primitives.slice(primitives.indexOf("select option {"));
+  assert.ok(
+    primitives.includes("select option {"),
+    "the native <option> fill rule is gone - dark mode goes back to 1.14:1"
+  );
+  const optionBody = optionRule.slice(0, optionRule.indexOf("}"));
+  assert.ok(
+    optionBody.includes("background-color: var(--card)"),
+    "the option lost its own fill, which is the whole defect"
+  );
+  assert.ok(optionBody.includes("color: var(--text)"), "the option lost its ink");
+
+  const screens = css("screens.css");
+  const header = screens.slice(screens.indexOf(".table-card thead th {"));
+  const headerBody = header.slice(0, header.indexOf("}"));
+  assert.ok(
+    headerBody.includes("color: var(--text2) !important"),
+    "the table header is back on a token that does not clear AA in light"
+  );
+});
+
 /**
  * THE BRIDGE. Every design token in `assets/css/tokens.css` is an alias onto a
  * `--v-theme-*`, so a token whose Vuetify colour does not exist resolves to