@multiplatform.one/theme 7.88.7 → 7.88.9

package/src/theme/readableColor.hooks.spec.tsx

@@ -0,0 +1,142 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { contrastRatio, normalizeToHex, relativeLuminance } from "./colorRules";
+
+const live = vi.hoisted(() => ({
+  name: "light" as string | undefined,
+  values: {} as Record<string, string>,
+}));
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...((await importOriginal()) as object),
+  useThemeName: () => live.name,
+  useTheme: () =>
+    Object.fromEntries(Object.entries(live.values).map(([key, val]) => [key, { val }])),
+}));
+
+const {
+  resolveAccentTintedSurface,
+  resolveActiveTabInk,
+  useAccentTintedSurface,
+  useActiveTabInk,
+  useIdentityHue,
+  useLegibleInkOn,
+  useReadableTextOn,
+} = await import("./readableColor");
+
+const paper = "#ffffff";
+const ink = "#1c1b1f";
+const contrast = (a: string, b: string) =>
+  contrastRatio(relativeLuminance(normalizeToHex(a)!), relativeLuminance(normalizeToHex(b)!));
+
+function read<T>(hook: () => T): T {
+  const out: { value?: T } = {};
+  function Probe() {
+    out.value = hook();
+    return null;
+  }
+  render(<Probe />);
+  return out.value as T;
+}
+
+afterEach(() => {
+  cleanup();
+  live.name = "light";
+  live.values = {};
+});
+
+describe("useReadableTextOn", () => {
+  it("picks the anchor that reads on a resolved fill token", () => {
+    live.values = { color1: paper, color12: ink, color9: "#101010", color3: "#f4f4f4" };
+    expect(read(() => useReadableTextOn("$color9"))).toBe(paper);
+    expect(read(() => useReadableTextOn("$color3"))).toBe(ink);
+    expect(read(() => useReadableTextOn("#0a0a0a"))).toBe(paper);
+  });
+
+  it("gives up, so the caller keeps its default, when any colour fails to resolve", () => {
+    live.values = { color1: paper, color12: ink };
+    expect(read(() => useReadableTextOn("$missing"))).toBeUndefined();
+    expect(read(() => useReadableTextOn(undefined))).toBeUndefined();
+    expect(read(() => useReadableTextOn("not a colour"))).toBeUndefined();
+    live.values = { color1: "nope", color12: ink };
+    expect(read(() => useReadableTextOn("#000000"))).toBeUndefined();
+  });
+});
+
+describe("useLegibleInkOn", () => {
+  it("keeps the component's own ink token while it clears AA", () => {
+    live.values = { color1: paper, color12: ink, color2: "#fafafa", color11: "#5a5860" };
+    expect(read(() => useLegibleInkOn("$color2", "$color11"))).toBe("$color11");
+  });
+
+  it("hands a failing ink over to a concrete readable colour", () => {
+    live.values = { color1: paper, color12: ink, color2: "#fafafa", color6: "#dddddd" };
+    const swapped = read(() => useLegibleInkOn("$color2", "$color6"));
+    expect(swapped).not.toBe("$color6");
+    expect(contrast(swapped, "#fafafa")).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it("returns the token untouched when the fill or ink cannot be read", () => {
+    live.values = { color1: paper, color12: ink };
+    expect(read(() => useLegibleInkOn("$missing", "$color11"))).toBe("$color11");
+    expect(read(() => useLegibleInkOn("#fafafa", "#dddddd"))).not.toBe("#dddddd");
+  });
+});
+
+describe("useAccentTintedSurface", () => {
+  it("mixes the accent solid into paper just past the wash ratio", () => {
+    live.values = { accentBackground: "#2a5bd7", color1: paper };
+    const wash = read(useAccentTintedSurface);
+    expect(wash).toBe(resolveAccentTintedSurface({ solid: "#2a5bd7", paper }));
+    expect(contrast(wash!, paper)).toBeGreaterThanOrEqual(1.2);
+    expect(contrast(wash!, paper)).toBeLessThan(1.3);
+  });
+
+  it("is undefined without a resolvable solid", () => {
+    live.values = { color1: paper };
+    expect(read(useAccentTintedSurface)).toBeUndefined();
+  });
+});
+
+describe("identity hue and active tab ink (LC-150)", () => {
+  const accents = Object.fromEntries(
+    Array.from({ length: 12 }, (_, index) => [`accent${index + 1}`, "#9a9a9a"]),
+  );
+
+  it("takes the most chromatic accent step that clears AA on both page surfaces", () => {
+    live.values = {
+      ...accents,
+      accent9: "#1a55c9",
+      accent11: "#1f3f8f",
+      color1: paper,
+      color2: "#f7f7f8",
+      color12: ink,
+    };
+    const { hue, c1, c2 } = read(useIdentityHue);
+    expect(hue).toBe("#1a55c9");
+    expect([c1, c2]).toEqual([paper, "#f7f7f8"]);
+    expect(read(useActiveTabInk)).toBe("#1a55c9");
+  });
+
+  it("has no hue on a grey ramp, so the active tab falls back to the accent solid or ink", () => {
+    live.values = { ...accents, color1: paper, color2: "#f7f7f8", color12: ink };
+    expect(read(useIdentityHue).hue).toBeUndefined();
+    expect(read(useActiveTabInk)).toBe(ink);
+    live.values = { ...live.values, accentBackground: "#d93a2b" };
+    live.name = "dark";
+    expect(read(useActiveTabInk)).toBe(
+      resolveActiveTabInk({
+        hue: undefined,
+        solid: "#d93a2b",
+        dark: true,
+        surfaces: [paper, "#f7f7f8"],
+        ink,
+      }),
+    );
+  });
+
+  it("falls back to the $color12 token when the theme has no ink", () => {
+    live.values = { ...accents, color1: paper, color2: "#f7f7f8" };
+    expect(read(useIdentityHue).ink).toBe("$color12");
+  });
+});

package/types/theme/accentInk.d.ts

@@ -31,4 +31,12 @@ export declare function identityKeys(themeName: string): string[];
  * re-render. A picked literal stayed on the scheme it was picked in.
  */
 export declare function withAccentOnSurface(themes: Record<string, Record<string, string>>): Record<string, Record<string, string>>;
+/**
+ * FZ-9617. Every theme with the ink {@link resolveIdentityInk} picks inside it,
+ * as `identityInk`: the LC-176 icon-button glyph tint under the house `ink`
+ * fallback. On web a bar Button paints it through its host alias, so the glyph
+ * follows a light/dark flip with no re-render, where the picked literal stayed
+ * on the scheme it was picked in.
+ */
+export declare function withIdentityInk(themes: Record<string, Record<string, string>>): Record<string, Record<string, string>>;
 //# sourceMappingURL=accentInk.d.ts.map

package/types/theme/accentInk.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accentInk.d.ts","sourceRoot":"","sources":["../../src/theme/accentInk.ts"],"names":[],"mappings":"AAYA,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAG5C;AAYD,wBAAgB,eAAe,CAC7B,UAAU,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,EAC3C,QAAQ,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,GACxC,MAAM,GAAG,SAAS,CAiBpB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,QAAQ,EACR,GAAG,GACJ,EAAE;IACD,UAAU,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC5C,QAAQ,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC1C,GAAG,EAAE,MAAM,CAAC;CACb,GAAG,MAAM,CAET;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,GAAG,GACJ,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC1C,WAAW,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC1C,GAAG,EAAE,MAAM,CAAC;CACb,GAAG,MAAM,CAkBT;AAED,eAAO,MAAM,cAAc,UAAiE,CAAC;AAE7F,8FAA8F;AAC9F,wBAAgB,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,CAKxD;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAC7C,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAcxC"}
+{"version":3,"file":"accentInk.d.ts","sourceRoot":"","sources":["../../src/theme/accentInk.ts"],"names":[],"mappings":"AAYA,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAG5C;AAYD,wBAAgB,eAAe,CAC7B,UAAU,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,EAC3C,QAAQ,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,GACxC,MAAM,GAAG,SAAS,CAiBpB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,QAAQ,EACR,GAAG,GACJ,EAAE;IACD,UAAU,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC5C,QAAQ,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC1C,GAAG,EAAE,MAAM,CAAC;CACb,GAAG,MAAM,CAET;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,GAAG,GACJ,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC1C,WAAW,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC1C,GAAG,EAAE,MAAM,CAAC;CACb,GAAG,MAAM,CAkBT;AAED,eAAO,MAAM,cAAc,UAAiE,CAAC;AAE7F,8FAA8F;AAC9F,wBAAgB,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,CAKxD;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAC7C,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAcxC;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAC7C,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAaxC"}

package/types/theme/createThemes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createThemes.d.ts","sourceRoot":"","sources":["../../src/theme/createThemes.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"createThemes.d.ts","sourceRoot":"","sources":["../../src/theme/createThemes.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,YAAY,IAAI,mBAAmB,EACpC,MAAM,wBAAwB,CAAC;AAsBhC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,CAAC;AAqDxB,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAG1B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAevB,CAAC;AAEX,eAAO,MAAM,wBAAwB;;;;;;;;;;CAI3B,CAAC;AAEX,MAAM,WAAW,OAAO;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,sBAAsB,CACrC,WAAW,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,EACvC,YAAY,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE;IAExC,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,MAAM,WAAW,0BAA0B,CACzC,WAAW,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,EACvC,YAAY,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,EACxC,WAAW,SAAS,OAAO,GAAG,OAAO,EACrC,YAAY,SAAS,OAAO,GAAG,OAAO,CACtC,SAAQ,sBAAsB,CAAC,WAAW,EAAE,YAAY,CAAC;IACzD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,0BAA0B;IACzC,eAAe,CAAC,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC;IAC/E,mBAAmB,CAAC,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC;IACvF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACzF;AA8wBD,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,0BAA0B,EACrC,WAAW,EAAE,sBAAsB,EACnC,OAAO,CAAC,EAAE,0BAA0B;;aA2FzB,CAAC,SAAS,MAAM,QAAQ,CAAC,SAAS,sBAAsB,GAyB1D,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,SAAS,CAAC,EAAE;;+BAAkC;EAG7E"}