@fibery/ui-kit 2.0.1 → 2.1.1

package/src/palettes/diff-colors.ts

@@ -0,0 +1,270 @@
+// oxlint-disable no-console
+// @ts-expect-error node out of frontend scope
+import {inspect} from "node:util";
+// @ts-expect-error node:fs out of frontend scope
+import {readFileSync} from "node:fs";
+import {
+  type Color,
+  converter,
+  differenceCiede2000,
+  differenceEuclidean,
+  differenceHueChroma as rawHueChroma,
+  differenceHueNaive as rawHueNaive,
+  differenceHyab,
+} from "culori";
+import mapValues from "lodash/mapValues";
+import {rgbFrom, serializeHexVariadic} from "../color-utils";
+
+type ColorDefs = Record<string, string | readonly string[] | ReadonlyArray<readonly [light: string, dark: string]>>;
+
+type ColorInput = Color | string;
+type ColorConvert<T> = (c: ColorInput) => T | undefined;
+
+const differenceHueChroma = (conv: ColorConvert<{h?: number; c: number}>): DiffFn => {
+  return (a, b) => {
+    const std = conv(a);
+    const smp = conv(b);
+    if (!std?.h || !smp?.h || !std.c || !smp.c) {
+      return 0;
+    }
+    return rawHueChroma({h: std.h, c: std.c}, {h: smp.h, c: smp.c});
+  };
+};
+
+const differenceHueNaive = (conv: ColorConvert<{h?: number}>): DiffFn => {
+  return (a, b) => {
+    const std = conv(a);
+    const smp = conv(b);
+    if (!std?.h || !smp?.h) {
+      return 0;
+    }
+    return rawHueNaive({h: std.h}, {h: smp.h});
+  };
+};
+
+type DiffFn = (colorA: Color | string, colorB: Color | string) => number;
+
+// Verdicts: "same" = below JND, "close" = perceptible under inspection, "diff" = obvious
+// [label, fn, closeFrom (≈ JND), diffFrom (≈ obvious)]
+type Metric = [name: string, fn: DiffFn, closeFrom: number, diffFrom: number];
+
+// Thresholds derived from:
+//   CIEDE2000  → CIE 142-2001; Sharma, Wu & Dalal 2005, Color Res Appl 30(1):21-30
+//   OKLCh JND  → CSS Color Level 4 §13.2 gamut mapping; culori toGamut() default
+//   HyAB       → Abasi, Amani Tehran & Fairchild 2019 (doi:10.1002/col.22451)
+//   hue°, hue×chroma → cross-calibrated against CIEDE2000 via 50k random sRGB pairs
+const metrics: Metric[] = [
+  // Euclidean distance in OKLCh (perceptually uniform).
+  // JND = 0.02 per CSS Color Level 4 §13.2, culori toGamut() default.
+  // Cross-calibrated: median 0.017 at ΔE₀₀≈1, median 0.072 at ΔE₀₀ 5–10
+  ["OKLCh", differenceEuclidean("oklch"), 0.02, 0.07],
+
+  // Hue angle in OKLCh, degrees. No formal JND — cross-calibrated:
+  // median 1.5° at ΔE₀₀≈1, median 8° at ΔE₀₀ 5–10
+  ["hue°", differenceHueNaive(converter("oklch")), 1.5, 8],
+
+  // Hue × chroma in OKLCh — weights hue by saturation,
+  // achromatic colors score ≈0 regardless of hue angle.
+  // Cross-calibrated: median 0.005 at ΔE₀₀≈1, median 0.023 at ΔE₀₀ 5–10
+  ["hue×chroma", differenceHueChroma(converter("oklch")), 0.005, 0.023],
+
+  // HyAB: |ΔL| + √(Δa²+Δb²) in CIELAB.
+  // Abasi, Amani Tehran & Fairchild 2019 — best for large distances, no formal JND.
+  // Cross-calibrated: median 5.7 at ΔE₀₀≈1, median 22 at ΔE₀₀ 5–10
+  ["HyAB", differenceHyab(), 6, 22],
+
+  // CIEDE2000 — gold standard perceptual metric.
+  // JND = 1.0 by design (CIE 142-2001). Acceptability ≈ 2. "Different color" > 5.
+  ["CIEDE2000", differenceCiede2000(), 1, 5],
+];
+
+const RED = "\x1b[31m";
+const DIM = "\x1b[2m";
+const RESET = "\x1b[0m";
+
+function calcMetrics(a: string, b: string) {
+  const row: Record<string, string> = {};
+  for (const [name, fn, lo, hi] of metrics) {
+    const v = fn(a, b);
+    const r = Math.round(v * 1000) / 1000;
+    const num = String(r).padStart(8, " ");
+    const abs = Math.abs(v);
+    if (abs >= hi) {
+      row[name] = `${RED}${num} diff${RESET}`;
+    } else if (abs >= lo) {
+      row[name] = `${num} close`;
+    } else {
+      row[name] = `${DIM}${num} same${RESET}`;
+    }
+  }
+  return row;
+}
+
+function hexToRgb(hex: string) {
+  const n = parseInt(hex.replace("#", "").slice(0, 6), 16);
+  return [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff] as const;
+}
+
+function swatch(hex: string) {
+  const [r, g, b] = hexToRgb(hex);
+  return `\x1b[48;2;${r};${g};${b}m  \x1b[0m`;
+}
+
+function extractColorOrThrow(s: string) {
+  const hex = s.match(/#[0-9a-f]{6,8}/i)?.[0];
+  if (hex) {
+    return hex;
+  }
+  const color = s.match(/(rgb(a)?|oklch)\([^)]+\)/)?.[0];
+  if (color) {
+    const rgb = rgbFrom(color);
+    if (rgb) {
+      return serializeHexVariadic(rgb);
+    }
+  }
+  return null;
+}
+
+function differentTypes(valActual: unknown, valExpected: unknown) {
+  return (
+    valActual === undefined ||
+    valExpected === undefined ||
+    !Array.isArray(valActual) !== !Array.isArray(valExpected) ||
+    typeof valActual !== typeof valExpected
+  );
+}
+
+export function computeColorReport(actual: ColorDefs, expected: ColorDefs) {
+  const changes: object[] = [];
+  const pairFirst: object[] = [];
+  const pairSecond: object[] = [];
+
+  function compare(aStr: string, eStr: string, path: string) {
+    if (eStr === aStr) {
+      return null;
+    }
+    if (eStr === "none" || aStr === "none") {
+      console.error("skip %o expected = %o vs %o actual", path, eStr, aStr);
+      return null;
+    }
+    const actual = extractColorOrThrow(aStr);
+    const expected = extractColorOrThrow(eStr);
+    if (actual === null || expected === null) {
+      console.error("skip %o expected = %o vs %o actual (not a color)", path, eStr, aStr);
+      return null;
+    }
+    return {
+      path,
+      ...mapValues(
+        {
+          diff: expected.padStart(9) + " " + swatch(expected) + swatch(actual) + " " + actual.padEnd(9),
+          ...calcMetrics(expected, actual),
+        },
+        (x) => ({
+          [inspect.custom]: () => x,
+        })
+      ),
+    };
+  }
+
+  const keys = new Set([...Object.keys(actual), ...Object.keys(expected)] as Array<keyof ColorDefs>);
+  for (const key of keys) {
+    const valActual = actual[key];
+    const valExpected = expected[key];
+    if (differentTypes(valActual, valExpected)) {
+      console.error("skip %o expected = %o vs %o actual (likely new or gone value)", key, valExpected, valActual);
+      continue;
+    }
+    if (typeof valActual === "string" || typeof valExpected === "string") {
+      const row = compare(valActual as string, valExpected as string, key);
+      if (row) {
+        changes.push(row);
+      }
+      continue;
+    }
+    const len = Math.max(valActual.length, valExpected.length);
+    const isPair = len === 2;
+    const pairSuffix = isPair ? [".light", ".dark"] : undefined;
+    for (let i = 0; i < len; i++) {
+      const path = `${key}${pairSuffix ? pairSuffix[i] : `[${i}]`}`;
+      const elActual = valActual[i];
+      const elExpected = valExpected[i];
+      if (differentTypes(elActual, elExpected)) {
+        console.error("skip %o expected = %o vs %o actual (likely new or gone value)", path, elExpected, elActual);
+        continue;
+      }
+      const target = isPair ? (i === 0 ? pairFirst : pairSecond) : changes;
+      if (typeof elActual === "string" || typeof elExpected === "string") {
+        const row = compare(elActual as string, elExpected as string, path);
+        if (row) {
+          target.push(row);
+        }
+      } else {
+        const lightRow = compare(elActual[0], elExpected[0], `${path}.light`);
+        if (lightRow) {
+          target.push(lightRow);
+        }
+        const darkRow = compare(elActual[1], elExpected[1], `${path}.dark`);
+        if (darkRow) {
+          target.push(darkRow);
+        }
+      }
+    }
+  }
+  return [...pairFirst, ...pairSecond, ...changes];
+}
+
+function findTestAnchor(source: string, currentTestName: string): number {
+  // Try " > " (vitest) then " " (jest 30) as describe/test separator
+  for (const sep of [" > ", " "]) {
+    const lastSep = currentTestName.lastIndexOf(sep);
+    if (lastSep <= 0) {
+      continue;
+    }
+    const testName = currentTestName.slice(lastSep + sep.length);
+    const describeName = currentTestName.slice(0, lastSep);
+    const describePos = source.indexOf(`describe("${describeName}"`);
+    if (describePos === -1) {
+      continue;
+    }
+    const testPos = source.indexOf(`test("${testName}"`, describePos);
+    if (testPos !== -1) {
+      return testPos;
+    }
+  }
+  // top-level test (no describe wrapper)
+  return source.indexOf(`test("${currentTestName}"`);
+}
+
+function readSnapshotBaseline(testFilePath: string, currentTestName: string) {
+  const source = readFileSync(testFilePath, "utf8");
+
+  const pos = findTestAnchor(source, currentTestName);
+  if (pos === -1) {
+    throw new Error(`readSnapshotBaseline: no anchor for "${currentTestName}" in ${testFilePath}`);
+  }
+
+  const match = source.slice(pos).match(/toMatchInlineSnapshot\(`\n([\s\S]*?)\n\s*`\)/);
+  if (!match) {
+    throw new Error(`readSnapshotBaseline: no toMatchInlineSnapshot found for "${currentTestName}" in ${testFilePath}`);
+  }
+  const jsonStr = match[1].replace(/,(\s*[}\]])/g, "$1");
+  return JSON.parse(jsonStr) as ColorDefs;
+}
+
+export function withColorDiff(actual: ColorDefs): ColorDefs {
+  const {testPath, currentTestName} = expect.getState();
+  if (!testPath || !currentTestName) {
+    throw new Error("withColorDiff: must be called inside a test (expect.getState() missing)");
+  }
+  const testFilePath = testPath.replace(/\.[jt]s$/, ".ts");
+
+  const baseline = readSnapshotBaseline(testFilePath, currentTestName);
+  if (baseline) {
+    const changes = computeColorReport(actual, baseline);
+    if (changes.length > 0) {
+      console.table(changes);
+    }
+  }
+  return actual;
+}

package/src/palettes/inspect.canvas-colors.test.ts

@@ -0,0 +1,257 @@
+import {deepMapColors} from "./_";
+import {withColorDiff} from "./diff-colors";
+import {backgrounds, type ColorDef, darkFromLight, sections, stickers} from "../canvas-colors";
+
+function reflect(defs: ColorDef[], role: "bg" | "sticker" | "section", prefix: string) {
+  const result: Record<string, Array<readonly [string, string]>> = {};
+  result[prefix] = defs.map((pair) => [pair[0], darkFromLight(pair[0], role)] as const);
+  return deepMapColors(result);
+}
+
+test("snapshot", () => {
+  expect(
+    withColorDiff({
+      ...reflect(backgrounds, "bg", "canvas.background"),
+      ...reflect(stickers, "sticker", "canvas.sticker"),
+      ...reflect(sections, "section", "canvas.section"),
+    })
+  ).toMatchInlineSnapshot(`
+    {
+      "canvas.background": [
+        [
+          "#1e1e1e   | hsl(none 0% 12%)           | oklch(0.24 0 none)          ",
+          "#fcfcfc   | hsl(none 0% 99%)           | oklch(0.99 0 none)          ",
+        ],
+        [
+          "#6e7a83   | hsl(206 9% 47%)            | oklch(0.57 0.02 240)        ",
+          "#b1b7bc   | hsl(207 8% 72%)            | oklch(0.78 0.01 243)        ",
+        ],
+        [
+          "#f24822   | hsl(11 89% 54%)            | oklch(0.64 0.21 34)         ",
+          "#c65036   | hsl(11 57% 49%)            | oklch(0.58 0.16 34)         ",
+        ],
+        [
+          "#ffa629   | hsl(35 100% 58%)           | oklch(0.8 0.16 69)          ",
+          "#db9a4e   | hsl(32 66% 58%)            | oklch(0.74 0.12 68)         ",
+        ],
+        [
+          "#ffcd29   | hsl(46 100% 58%)           | oklch(0.87 0.17 90)         ",
+          "#e0bc59   | hsl(44 69% 61%)            | oklch(0.81 0.12 89)         ",
+        ],
+        [
+          "#14ae5c   | hsl(148 79% 38%)           | oklch(0.66 0.17 152)        ",
+          "#3a955a   | hsl(141 44% 41%)           | oklch(0.6 0.12 152)         ",
+        ],
+        [
+          "#0d99ff   | hsl(205 100% 53%)          | oklch(0.67 0.18 249)        ",
+          "#3787d0   | hsl(209 62% 52%)           | oklch(0.61 0.14 249)        ",
+        ],
+        [
+          "#9747ff   | hsl(266 100% 64%)          | oklch(0.6 0.25 298)         ",
+          "#7e4ccb   | hsl(264 55% 55%)           | oklch(0.54 0.19 298)        ",
+        ],
+        [
+          "#ff7ed9   | hsl(318 100% 75%)          | oklch(0.77 0.19 340)        ",
+          "#d97cbc   | hsl(319 55% 67%)           | oklch(0.71 0.14 340)        ",
+        ],
+        [
+          "#fdfdfd   | hsl(none 0% 99%)           | oklch(0.99 0 none)          ",
+          "#1f1f1f   | hsl(none 0% 12%)           | oklch(0.24 0 none)          ",
+        ],
+        [
+          "#c1c8cd   | hsl(205 11% 78%)           | oklch(0.83 0.01 239)        ",
+          "#dce0e2   | hsl(200 9% 87%)            | oklch(0.9 0.01 229)         ",
+        ],
+        [
+          "#e5e8eb   | hsl(210 13% 91%)           | oklch(0.93 0.01 248)        ",
+          "#eff0f2   | hsl(220 10% 94%)           | oklch(0.95 0 265)           ",
+        ],
+        [
+          "#ffc7c2   | hsl(5 100% 88%)            | oklch(0.88 0.06 24)         ",
+          "#eececb   | hsl(5 51% 86%)             | oklch(0.88 0.04 24)         ",
+        ],
+        [
+          "#fcd19c   | hsl(33 94% 80%)            | oklch(0.89 0.08 72)         ",
+          "#edd5b9   | hsl(32 59% 83%)            | oklch(0.89 0.05 71)         ",
+        ],
+        [
+          "#ffe8a3   | hsl(45 100% 82%)           | oklch(0.93 0.09 92)         ",
+          "#f5e9c4   | hsl(45 71% 86%)            | oklch(0.93 0.05 92)         ",
+        ],
+        [
+          "#aff4c6   | hsl(140 76% 82%)           | oklch(0.91 0.09 155)        ",
+          "#c7ecd2   | hsl(138 49% 85%)           | oklch(0.91 0.05 155)        ",
+        ],
+        [
+          "#bde3ff   | hsl(205 100% 87%)          | oklch(0.9 0.06 240)         ",
+          "#cce1f0   | hsl(205 55% 87%)           | oklch(0.9 0.03 239)         ",
+        ],
+        [
+          "#e4ccff   | hsl(268 100% 90%)          | oklch(0.88 0.07 306)        ",
+          "#ded2ee   | hsl(266 45% 88%)           | oklch(0.88 0.04 305)        ",
+        ],
+        [
+          "#ffd7f3   | hsl(318 100% 92%)          | oklch(0.92 0.06 337)        ",
+          "#f4dded   | hsl(318 51% 91%)           | oklch(0.92 0.03 337)        ",
+        ],
+      ],
+      "canvas.section": [
+        [
+          "#dddddd   | hsl(none 0% 87%)           | oklch(0.9 0 none)           ",
+          "#313131   | hsl(none 0% 19%)           | oklch(0.31 0 none)          ",
+        ],
+        [
+          "#eaeaea   | hsl(none 0% 92%)           | oklch(0.94 0 none)          ",
+          "#353535   | hsl(none 0% 21%)           | oklch(0.33 0 none)          ",
+        ],
+        [
+          "#ffe2e0   | hsl(4 100% 94%)            | oklch(0.94 0.03 22)         ",
+          "#8d4d49   | hsl(4 32% 42%)             | oklch(0.5 0.09 24)          ",
+        ],
+        [
+          "#ffead6   | hsl(29 100% 92%)           | oklch(0.95 0.04 66)         ",
+          "#8d6a49   | hsl(29 32% 42%)            | oklch(0.55 0.07 64)         ",
+        ],
+        [
+          "#fff3d6   | hsl(42 100% 92%)           | oklch(0.97 0.04 88)         ",
+          "#8d7949   | hsl(42 32% 42%)            | oklch(0.58 0.07 88)         ",
+        ],
+        [
+          "#ddf8e2   | hsl(131 66% 92%)           | oklch(0.95 0.04 151)        ",
+          "#498d56   | hsl(131 32% 42%)           | oklch(0.58 0.11 148)        ",
+        ],
+        [
+          "#dbf0ff   | hsl(205 100% 93%)          | oklch(0.94 0.03 239)        ",
+          "#49718d   | hsl(205 32% 42%)           | oklch(0.53 0.06 240)        ",
+        ],
+        [
+          "#eae1ff   | hsl(258 100% 94%)          | oklch(0.93 0.04 299)        ",
+          "#5d498d   | hsl(258 32% 42%)           | oklch(0.46 0.11 295)        ",
+        ],
+        [
+          "#ffd6f2   | hsl(319 100% 92%)          | oklch(0.92 0.06 338)        ",
+          "#8d4978   | hsl(319 32% 42%)           | oklch(0.5 0.11 340)         ",
+        ],
+        [
+          "#ffffff   | hsl(none 0% 100%)          | oklch(1 0 none)             ",
+          "#ffffff   | hsl(none 0% 100%)          | oklch(1 0 none)             ",
+        ],
+        [
+          "#f4f4f4   | hsl(none 0% 96%)           | oklch(0.97 0 none)          ",
+          "#373737   | hsl(none 0% 22%)           | oklch(0.34 0 none)          ",
+        ],
+        [
+          "#f9f9f9   | hsl(none 0% 98%)           | oklch(0.98 0 none)          ",
+          "#393939   | hsl(none 0% 22%)           | oklch(0.34 0 none)          ",
+        ],
+        [
+          "#fff5f5   | hsl(0 100% 98%)            | oklch(0.98 0.01 17)         ",
+          "#553637   | hsl(358 22% 27%)           | oklch(0.37 0.04 17)         ",
+        ],
+        [
+          "#fff7f0   | hsl(28 100% 97%)           | oklch(0.98 0.01 64)         ",
+          "#513b26   | hsl(29 36% 23%)            | oklch(0.37 0.05 64)         ",
+        ],
+        [
+          "#fffbf0   | hsl(44 100% 97%)           | oklch(0.99 0.02 90)         ",
+          "#493f23   | hsl(44 35% 21%)            | oklch(0.37 0.05 90)         ",
+        ],
+        [
+          "#ebffee   | hsl(129 100% 96%)          | oklch(0.98 0.03 150)        ",
+          "#2e4733   | hsl(132 21% 23%)           | oklch(0.37 0.05 150)        ",
+        ],
+        [
+          "#f5fbff   | hsl(204 100% 98%)          | oklch(0.98 0.01 237)        ",
+          "#274355   | hsl(203 37% 24%)           | oklch(0.37 0.05 238)        ",
+        ],
+        [
+          "#f8f5ff   | hsl(258 100% 98%)          | oklch(0.98 0.01 300)        ",
+          "#433a54   | hsl(261 18% 28%)           | oklch(0.37 0.05 300)        ",
+        ],
+        [
+          "#fff0fa   | hsl(320 100% 97%)          | oklch(0.97 0.02 338)        ",
+          "#4f3648   | hsl(317 19% 26%)           | oklch(0.37 0.05 337)        ",
+        ],
+      ],
+      "canvas.sticker": [
+        [
+          "#afbccf   | hsl(216 25% 75%)           | oklch(0.79 0.03 258)        ",
+          "#8594a9   | hsl(215 17% 59%)           | oklch(0.66 0.04 257)        ",
+        ],
+        [
+          "#ffafa3   | hsl(8 100% 82%)            | oklch(0.83 0.1 29)          ",
+          "#d58f85   | hsl(7 49% 68%)             | oklch(0.72 0.09 28)         ",
+        ],
+        [
+          "#ffc470   | hsl(35 100% 72%)           | oklch(0.86 0.12 75)         ",
+          "#d6a259   | hsl(35 60% 59%)            | oklch(0.75 0.11 74)         ",
+        ],
+        [
+          "#ffd966   | hsl(45 100% 70%)           | oklch(0.9 0.14 91)          ",
+          "#d7b651   | hsl(45 63% 58%)            | oklch(0.79 0.13 91)         ",
+        ],
+        [
+          "#85e0a3   | hsl(140 59% 70%)           | oklch(0.83 0.12 154)        ",
+          "#6aba85   | hsl(140 37% 57%)           | oklch(0.72 0.11 154)        ",
+        ],
+        [
+          "#80caff   | hsl(205 100% 75%)          | oklch(0.81 0.11 241)        ",
+          "#66a6d4   | hsl(205 56% 62%)           | oklch(0.7 0.09 241)         ",
+        ],
+        [
+          "#d9b8ff   | hsl(268 100% 86%)          | oklch(0.84 0.1 305)         ",
+          "#b497d5   | hsl(268 42% 71%)           | oklch(0.72 0.09 306)        ",
+        ],
+        [
+          "#ffbdf2   | hsl(312 100% 87%)          | oklch(0.87 0.1 334)         ",
+          "#d69dcb   | hsl(312 41% 73%)           | oklch(0.76 0.09 333)        ",
+        ],
+        [
+          "#f1f2f4   | hsl(220 12% 95%)           | oklch(0.96 0 265)           ",
+          "#c7c7c7   | hsl(none 0% 78%)           | oklch(0.83 0 none)          ",
+        ],
+        [
+          "#ffe5e2   | hsl(6 100% 94%)            | oklch(0.94 0.03 26)         ",
+          "#d7bab6   | hsl(7 29% 78%)             | oklch(0.81 0.03 27)         ",
+        ],
+        [
+          "#ffe9cf   | hsl(32 100% 91%)           | oklch(0.95 0.04 72)         ",
+          "#d7bea0   | hsl(33 41% 74%)            | oklch(0.82 0.05 72)         ",
+        ],
+        [
+          "#fef2ce   | hsl(45 96% 90%)            | oklch(0.96 0.05 92)         ",
+          "#d5c79d   | hsl(45 40% 73%)            | oklch(0.83 0.06 92)         ",
+        ],
+        [
+          "#d7ffe5   | hsl(141 100% 92%)          | oklch(0.96 0.05 157)        ",
+          "#a7d6b8   | hsl(142 36% 75%)           | oklch(0.83 0.06 157)        ",
+        ],
+        [
+          "#daefff   | hsl(206 100% 93%)          | oklch(0.94 0.03 241)        ",
+          "#adc5d8   | hsl(207 36% 76%)           | oklch(0.81 0.04 242)        ",
+        ],
+        [
+          "#f0e3ff   | hsl(268 100% 95%)          | oklch(0.93 0.04 306)        ",
+          "#c7b8d8   | hsl(268 29% 78%)           | oklch(0.81 0.05 306)        ",
+        ],
+        [
+          "#ffe4f7   | hsl(318 100% 95%)          | oklch(0.95 0.04 336)        ",
+          "#d7b8ce   | hsl(317 28% 78%)           | oklch(0.82 0.05 336)        ",
+        ],
+      ],
+    }
+  `);
+});
+
+test("preserves alpha from hex8 input", () => {
+  // hex8 with 50% alpha — output must retain alpha as hex8
+  expect(darkFromLight("#F2482280", "bg")).toMatchInlineSnapshot(`"#c6503680"`);
+  expect(darkFromLight("#85E0A380", "sticker")).toMatchInlineSnapshot(`"#6aba8580"`);
+  expect(darkFromLight("#FFE2E080", "section")).toMatchInlineSnapshot(`"#8d4d4980"`);
+});
+
+test("opaque hex6 stays hex6", () => {
+  expect(darkFromLight("#F24822", "bg")).toMatch(/^#[0-9a-f]{6}$/);
+  expect(darkFromLight("#85E0A3", "sticker")).toMatch(/^#[0-9a-f]{6}$/);
+  expect(darkFromLight("#FFE2E0", "section")).toMatch(/^#[0-9a-f]{6}$/);
+});