@multiplatform.one/theme 7.88.8 → 7.88.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.88.8",
+  "version": "7.88.10",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -115,8 +115,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.88.8",
-    "@multiplatform.one/store": "^7.88.8",
+    "@multiplatform.one/platform": "^7.88.10",
+    "@multiplatform.one/store": "^7.88.10",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -132,8 +132,8 @@
   },
   "devDependencies": {
     "@expo/prebuild-config": "55.0.18",
-    "@multiplatform.one/config": "7.88.8",
-    "@multiplatform.one/test-utils": "7.88.8",
+    "@multiplatform.one/config": "7.88.10",
+    "@multiplatform.one/test-utils": "7.88.10",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/build": "2.7.6",

package/src/theme/overlaySurfaces.focus.spec.tsx

@@ -0,0 +1,251 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+type Props = Record<string, any>;
+
+const seen = vi.hoisted(() => ({
+  props: {} as Record<string, Props>,
+  dialog: { open: false, contentId: undefined as string | undefined },
+  width: 0,
+}));
+
+vi.mock("tamagui", async () => {
+  const React = await import("react");
+  const part = (name: string) =>
+    React.forwardRef<HTMLDivElement, Props>((props, ref) => {
+      seen.props[name] = props;
+      return React.createElement("div", { ref, "data-part": name }, props.children);
+    });
+  return {
+    isWeb: true,
+    Dialog: { Content: part("Dialog.Content"), Overlay: part("Dialog.Overlay") },
+    AlertDialog: { Content: part("AlertDialog.Content"), Overlay: part("AlertDialog.Overlay") },
+    Popover: { Content: part("Popover.Content") },
+    useDialogContext: () => seen.dialog,
+    useWindowDimensions: () => ({ width: seen.width, height: 800 }),
+  };
+});
+vi.mock("./Surface", () => ({ Surface: ({ children }: { children?: unknown }) => children }));
+vi.mock("./useResolvedKnobs", () => ({
+  useResolvedKnobs: () => ({
+    knobProps: {
+      elevatedSurface: {},
+      containerRadius: {},
+      panelPadding: {},
+      gap: {},
+      motion: { overlay: undefined, scrim: undefined },
+    },
+  }),
+}));
+vi.mock("./resolveKnobs", () => ({ panelPaddingPx: () => 16 }));
+
+const {
+  AlertDialogContent,
+  AlertDialogOverlay,
+  DialogContent,
+  DialogOverlay,
+  DialogShowFocus,
+  PopoverContent,
+  overlayScrim,
+  useIsInDialogRegion,
+} = await import("./overlaySurfaces");
+
+const pointer = () => document.dispatchEvent(new Event("pointerdown"));
+const keyboard = () => document.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab" }));
+
+function el<K extends keyof HTMLElementTagNameMap>(tag: K, attrs: Record<string, string> = {}) {
+  const node = document.createElement(tag);
+  for (const [name, value] of Object.entries(attrs)) node.setAttribute(name, value);
+  return node;
+}
+
+function openFocus(onOpenAutoFocus?: (event: Event) => void) {
+  render(<PopoverContent onOpenAutoFocus={onOpenAutoFocus}>body</PopoverContent>);
+  return seen.props["Popover.Content"].onOpenAutoFocus as (event: Event) => void;
+}
+
+function fire(target: EventTarget, handler: (event: Event) => void) {
+  const event = new Event("open", { cancelable: true });
+  target.addEventListener("open", handler, { once: true });
+  target.dispatchEvent(event);
+  return event;
+}
+
+beforeEach(() => {
+  seen.props = {};
+  seen.dialog = { open: false, contentId: undefined };
+  seen.width = 0;
+  pointer();
+});
+
+afterEach(() => {
+  cleanup();
+  document.body.replaceChildren();
+});
+
+describe("house open focus (MPO-452, LC-71)", () => {
+  it("skips everything that is not a tab stop and lands the caret in the first field", () => {
+    const frame = el("div");
+    const wrapper = el("div", { style: "display: none" });
+    wrapper.append(el("button"));
+    const field = el("input", { type: "text" });
+    const select = vi.spyOn(field, "select");
+    frame.append(
+      el("div", { tabindex: "-1" }),
+      el("a", { href: "#", tabindex: "0" }),
+      el("button", { hidden: "" }),
+      el("button", { disabled: "" }),
+      el("input", { type: "hidden", tabindex: "0" }),
+      el("button", { style: "visibility: hidden" }),
+      wrapper,
+      field,
+      el("button"),
+    );
+    document.body.append(frame);
+    const event = fire(frame, openFocus());
+    expect(event.defaultPrevented).toBe(true);
+    expect(document.activeElement).toBe(field);
+    expect(select).toHaveBeenCalledTimes(1);
+  });
+
+  it("puts a pointer open on the frame, and a keyboard open on the first control", () => {
+    const frame = el("div");
+    const button = el("button");
+    frame.append(button);
+    document.body.append(frame);
+    const handler = openFocus();
+    expect(fire(frame, handler).defaultPrevented).toBe(true);
+    expect(document.activeElement).toBe(frame);
+    expect(frame.tabIndex).toBe(-1);
+    keyboard();
+    fire(frame, handler);
+    expect(document.activeElement).toBe(button);
+  });
+
+  it("runs the caller first and stands down when it prevents the default", () => {
+    const frame = el("div");
+    frame.append(el("input", { type: "text" }));
+    document.body.append(frame);
+    const caller = vi.fn((event: Event) => event.preventDefault());
+    const before = document.activeElement;
+    fire(frame, openFocus(caller));
+    expect(caller).toHaveBeenCalledTimes(1);
+    expect(document.activeElement).toBe(before);
+  });
+
+  it("leaves the default alone when nothing can take focus or the target is not an element", () => {
+    const frame = el("div");
+    frame.append(el("button", { disabled: "" }));
+    document.body.append(frame);
+    const handler = openFocus();
+    expect(fire(frame, handler).defaultPrevented).toBe(false);
+    expect(fire(document, handler).defaultPrevented).toBe(false);
+  });
+});
+
+describe("<dialog>.show() focus (MPO-470)", () => {
+  function content(focusable: HTMLElement) {
+    const node = el("div", { id: "dialog-1" });
+    const field = el("input", { type: "text" });
+    node.append(focusable, field);
+    document.body.append(node);
+    focusable.focus();
+    return { node, field };
+  }
+
+  it("moves focus off a frame show() left it on, after the caller's handler", () => {
+    const { field } = content(el("div", { tabindex: "-1" }));
+    seen.dialog = { open: true, contentId: "dialog-1" };
+    const caller = vi.fn();
+    render(<DialogShowFocus onOpenAutoFocus={caller} />);
+    expect(caller).toHaveBeenCalledTimes(1);
+    expect(document.activeElement).toBe(field);
+  });
+
+  it("keeps a keyboard user's tab stop, and does nothing while closed", () => {
+    const button = el("button");
+    content(button);
+    keyboard();
+    seen.dialog = { open: true, contentId: "dialog-1" };
+    const caller = vi.fn();
+    render(<DialogShowFocus onOpenAutoFocus={caller} />);
+    seen.dialog = { open: false, contentId: "dialog-1" };
+    render(<DialogShowFocus onOpenAutoFocus={caller} />);
+    expect(caller).not.toHaveBeenCalled();
+    expect(document.activeElement).toBe(button);
+  });
+
+  it("ignores focus outside the content and a content id that is not in the page", () => {
+    const outside = el("button");
+    document.body.append(outside);
+    content(el("div", { tabindex: "-1" }));
+    outside.focus();
+    const caller = vi.fn();
+    seen.dialog = { open: true, contentId: "dialog-1" };
+    render(<DialogShowFocus onOpenAutoFocus={caller} />);
+    seen.dialog = { open: true, contentId: "missing" };
+    render(<DialogShowFocus onOpenAutoFocus={caller} />);
+    expect(caller).not.toHaveBeenCalled();
+    expect(document.activeElement).toBe(outside);
+  });
+});
+
+describe("dialog frames", () => {
+  it("fit a numeric width to the window less one panel inset each side (FZ-8020)", () => {
+    seen.width = 390;
+    render(
+      <DialogContent width={400} minWidth={300}>
+        body
+      </DialogContent>,
+    );
+    const props = seen.props["Dialog.Content"];
+    expect(props.maxWidth).toBe(358);
+    expect(props.width).toBe(358);
+    expect(props.minWidth).toBe(300);
+    expect(props.unstyled).toBe(true);
+    expect(props.elevate).toBe(false);
+  });
+
+  it("leave a token width alone and add no cap before the window is measured", () => {
+    seen.width = 390;
+    render(<DialogContent width="$20">body</DialogContent>);
+    expect(seen.props["Dialog.Content"].width).toBe("$20");
+    seen.width = 0;
+    render(<DialogContent width={400}>body</DialogContent>);
+    expect(seen.props["Dialog.Content"].maxWidth).toBeUndefined();
+    expect(seen.props["Dialog.Content"].width).toBe(400);
+  });
+
+  it("mark their children as inside a dialog region (DG-OVL-04)", () => {
+    const regions: boolean[] = [];
+    function Probe() {
+      regions.push(useIsInDialogRegion());
+      return null;
+    }
+    render(
+      <>
+        <Probe />
+        <DialogContent>
+          <Probe />
+        </DialogContent>
+        <AlertDialogContent>
+          <Probe />
+        </AlertDialogContent>
+      </>,
+    );
+    expect(regions).toEqual([false, true, true]);
+    expect(seen.props["AlertDialog.Content"].unstyled).toBe(true);
+  });
+
+  it("dim the page with the house scrim under both dialog kinds", () => {
+    render(
+      <>
+        <DialogOverlay />
+        <AlertDialogOverlay />
+      </>,
+    );
+    expect(seen.props["Dialog.Overlay"].backgroundColor).toBe(overlayScrim);
+    expect(seen.props["AlertDialog.Overlay"].backgroundColor).toBe(overlayScrim);
+    expect(seen.props["Dialog.Overlay"].enterStyle).toEqual({ opacity: 0 });
+  });
+});

package/src/theme/pageGutter.spec.tsx

@@ -0,0 +1,103 @@
+import { cleanup, render } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+const media = vi.hoisted(() => ({ sm: false as boolean | undefined }));
+vi.mock("tamagui", () => ({ useMedia: () => ({ sm: media.sm }) }));
+
+const {
+  PageGutter,
+  ScreenNesting,
+  negateSpaceToken,
+  usePageGutter,
+  useParentScreen,
+  usePhoneTableBleed,
+} = await import("./pageGutter");
+
+afterEach(() => {
+  cleanup();
+  media.sm = false;
+});
+
+function read<T>(hook: () => T, wrap: (probe: ReactElement) => ReactElement) {
+  const out: { value?: T } = {};
+  function Probe() {
+    out.value = hook();
+    return null;
+  }
+  render(wrap(<Probe />));
+  return out.value as T;
+}
+
+describe("page gutter (LC-146)", () => {
+  it("is null off the page line and the nearest declared token inside one", () => {
+    expect(read(usePageGutter, (probe) => probe)).toBeNull();
+    expect(read(usePageGutter, (probe) => <PageGutter inset="$4">{probe}</PageGutter>)).toBe("$4");
+    expect(
+      read(usePageGutter, (probe) => (
+        <PageGutter inset="$4">
+          <PageGutter inset={null}>{probe}</PageGutter>
+        </PageGutter>
+      )),
+    ).toBeNull();
+  });
+
+  it("negates a space token both ways", () => {
+    expect(negateSpaceToken("$4")).toBe("$-4");
+    expect(negateSpaceToken("$-4")).toBe("$4");
+    expect(negateSpaceToken("4")).toBe("$-4");
+  });
+
+  it("bleeds a table to the screen edges on a phone that sits on the page line", () => {
+    media.sm = false;
+    expect(
+      read(usePhoneTableBleed, (probe) => <PageGutter inset="$3">{probe}</PageGutter>),
+    ).toEqual({ inset: "$3", frame: { marginHorizontal: "$-3" } });
+  });
+
+  it("keeps the frame when wide, when the media is unknown, or off the page line", () => {
+    media.sm = true;
+    expect(read(usePhoneTableBleed, (probe) => <PageGutter inset="$3">{probe}</PageGutter>)).toBe(
+      null,
+    );
+    media.sm = undefined;
+    expect(read(usePhoneTableBleed, (probe) => <PageGutter inset="$3">{probe}</PageGutter>)).toBe(
+      null,
+    );
+    media.sm = false;
+    expect(read(usePhoneTableBleed, (probe) => probe)).toBeNull();
+  });
+});
+
+describe("screen nesting (LC-159, FZ-7993)", () => {
+  it("is null at the top of a page and the parent shell's record under one", () => {
+    expect(read(useParentScreen, (probe) => probe)).toBeNull();
+    expect(
+      read(useParentScreen, (probe) => (
+        <ScreenNesting scrolls inset="$4" capped={false}>
+          {probe}
+        </ScreenNesting>
+      )),
+    ).toEqual({ scrolls: true, inset: "$4", capped: false });
+  });
+
+  it("keeps the record's identity while the shell's values hold", () => {
+    const seen: unknown[] = [];
+    function Probe() {
+      seen.push(useParentScreen());
+      return null;
+    }
+    const tree = (capped: boolean) => (
+      <ScreenNesting scrolls={false} inset={null} capped={capped}>
+        <Probe />
+      </ScreenNesting>
+    );
+    const { rerender } = render(tree(true));
+    rerender(tree(true));
+    rerender(tree(false));
+    expect(seen).toHaveLength(3);
+    expect(seen[1]).toBe(seen[0]);
+    expect(seen[2]).not.toBe(seen[0]);
+    expect(seen[2]).toEqual({ scrolls: false, inset: null, capped: false });
+  });
+});

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");
+  });
+});