@multiplatform.one/forms 7.88.6 → 7.88.8

package/src/Button/Button.scopeFlip.spec.tsx

@@ -0,0 +1,350 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * FZ-9617: a Button read some of its paints from the host scope's theme at
+ * render and painted the literal: the keyboard ring, a framed circle's plate
+ * ink, an icon button's hover and press washes and the bar glyph tint. A
+ * light/dark flip that moves only the root's t_light/t_dark class never
+ * re-renders the Button, so each kept the old scheme's colour. On web they now
+ * paint `var(--mp-host-*)` aliases that a span outside the intent and
+ * component themes declares.
+ *
+ * jsdom cascades no Tamagui CSS, so this reads what each node asks for: the
+ * atomic class, the injected rule behind it, the `--mp-host-*` alias on the
+ * ancestor that declares it, and for a `var(--token)` the house theme table of
+ * the scope that declares it.
+ */
+
+import { PlusIcon } from "@phosphor-icons/react";
+import { cleanup, render, screen } from "@testing-library/react";
+import {
+  createDefaultThemeConfig,
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+  type Knobs,
+  Preset,
+  Surface,
+} from "@multiplatform.one/theme";
+import type { ReactElement } from "react";
+import { TamaguiProvider, YStack } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button } from "./index";
+
+afterEach(() => {
+  cleanup();
+  document.documentElement.className = "";
+});
+
+const houseConfig = createDefaultThemeConfig();
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+const FLIPS = [
+  ["light", "dark"],
+  ["dark", "light"],
+] as const;
+type Scheme = (typeof FLIPS)[number][number];
+
+function* styleRules(rules: CSSRuleList): Generator<CSSStyleRule> {
+  for (const rule of Array.from(rules)) {
+    if (rule instanceof CSSStyleRule) yield rule;
+    else if ("cssRules" in rule) yield* styleRules((rule as CSSGroupingRule).cssRules);
+  }
+}
+
+function injectedRuleValue(className: string, property: string): string {
+  const selector = new RegExp(`\\.${className.replace(/[^\w-]/g, "\\$&")}(?![\\w-])`);
+  for (const sheet of Array.from(document.styleSheets)) {
+    for (const rule of styleRules(sheet.cssRules)) {
+      if (!selector.test(rule.selectorText)) continue;
+      const value = rule.style.getPropertyValue(property);
+      if (value) return value.trim();
+    }
+  }
+  throw new Error(`no injected ${property} rule for .${className}`);
+}
+
+/** The theme a node's custom properties resolve in: its scheme and sub-theme path. */
+function themeOf(el: Element): string {
+  let sub: string | null = null;
+  for (let node: Element | null = el; node; node = node.parentElement) {
+    const classes = Array.from(node.classList);
+    const scheme = classes.includes("t_dark")
+      ? "dark"
+      : classes.includes("t_light")
+        ? "light"
+        : null;
+    const names = classes
+      .filter((c) => c.startsWith("t_") && !["t_sub_theme", "t_light", "t_dark"].includes(c))
+      .map((c) => c.slice(2));
+    if (sub === null && names.length) sub = names.sort((a, b) => b.length - a.length)[0];
+    if (scheme) return sub ? `${scheme}_${sub}` : scheme;
+  }
+  throw new Error("no scheme above this node");
+}
+
+function tokenIn(themeName: string, token: string): string {
+  const parts = themeName.split("_");
+  for (let end = parts.length; end > 0; end--) {
+    const hit = houseThemes[parts.slice(0, end).join("_")]?.[token];
+    if (hit) return hit;
+  }
+  throw new Error(`--${token} resolves nowhere in ${themeName}`);
+}
+
+/** What `value` paints on `el`, following aliases to the scope that declares them. */
+function resolveOn(el: Element, value: string): string {
+  const name = value.match(/^var\((--[\w-]+)\)$/)?.[1];
+  if (!name) return value;
+  for (let node: Element | null = el; node; node = node.parentElement) {
+    const declared = (node as HTMLElement).style?.getPropertyValue(name);
+    if (declared) return resolveOn(node, declared.trim());
+  }
+  return tokenIn(themeOf(el), name.slice(2));
+}
+
+const PSEUDO = /^_[a-zA-Z]+-0(hover|active|focus|press|focus-visible)-/;
+
+/** What `el` paints for one atomic property, at rest or under `pseudo`. */
+function painted(el: Element, prefix: string, property: string, pseudo?: string): string | null {
+  const cls = Array.from(el.classList).find((c) =>
+    pseudo ? c.startsWith(`${prefix}0${pseudo}-`) : c.startsWith(prefix) && !PSEUDO.test(c),
+  );
+  return cls ? resolveOn(el, injectedRuleValue(cls, property)) : null;
+}
+
+/** An svg's fill, following `currentColor` to the CSS colour it inherits. */
+function glyphFill(svg: Element): string | null {
+  const fill = svg.getAttribute("fill");
+  if (fill !== "currentColor") return fill;
+  for (let node = svg.parentElement; node; node = node.parentElement) {
+    const ink = painted(node, "_col-", "color");
+    if (ink) return ink;
+  }
+  return null;
+}
+
+function frameOf(name: string): HTMLElement {
+  return (screen.queryByRole("button", { name }) ??
+    screen.getByText(name).closest("[role=button]")) as HTMLElement;
+}
+
+function swapRootScheme(from: Scheme, to: Scheme) {
+  const root = document.querySelector("[data-scope-root]");
+  for (const el of Array.from(document.querySelectorAll(`.t_${from}`))) {
+    if (root && !el.contains(root)) continue;
+    el.classList.replace(`t_${from}`, `t_${to}`);
+  }
+}
+
+function mount(scheme: Scheme, tree: ReactElement) {
+  return render(
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={scheme} disableInjectCSS>
+      <YStack backgroundColor="$background" data-scope-root="">
+        {tree}
+      </YStack>
+    </TamaguiProvider>,
+  );
+}
+
+function expectFlipFollows<T>(from: Scheme, to: Scheme, tree: ReactElement, read: () => T): T {
+  mount(to, tree);
+  const fresh = read();
+  cleanup();
+  mount(from, tree);
+  swapRootScheme(from, to);
+  try {
+    expect(read()).toEqual(fresh);
+  } finally {
+    swapRootScheme(to, from);
+  }
+  return fresh;
+}
+
+const RING_BUTTONS: [string, ReactElement][] = [
+  ["plain", <Button key="b">Go</Button>],
+  [
+    "outlined",
+    <Button key="b" outlined>
+      Go
+    </Button>,
+  ],
+  [
+    "chromeless",
+    <Button key="b" chromeless>
+      Go
+    </Button>,
+  ],
+  [
+    "accent",
+    <Button key="b" accent>
+      Go
+    </Button>,
+  ],
+  [
+    "error",
+    <Button key="b" error>
+      Go
+    </Button>,
+  ],
+  [
+    'theme="accent" outlined',
+    <Button key="b" theme="accent" outlined>
+      Go
+    </Button>,
+  ],
+  ["icon-only", <Button key="b" icon={PlusIcon} aria-label="Go" />],
+];
+
+describe("FZ-9617 DG-A11Y-01: a focused Button's ring follows a class-only root flip", () => {
+  for (const [from, to] of FLIPS) {
+    for (const [name, button] of RING_BUTTONS) {
+      it(`${from} -> ${to} ${name}: the ring is the host scope's $outlineColor`, () => {
+        const ring = expectFlipFollows(from, to, button, () => {
+          const frame = frameOf("Go");
+          frame.focus();
+          return painted(frame, "_outlineColor-", "outline-color", "focus-visible");
+        });
+        expect(ring).toBe(houseThemes[to]?.outlineColor);
+      });
+    }
+  }
+});
+
+describe("FZ-9617 LC-176: a framed circle with no intent inks its plate on the host scope's $color12", () => {
+  for (const [from, to] of FLIPS) {
+    it(`${from} -> ${to}`, () => {
+      const ink = expectFlipFollows(
+        from,
+        to,
+        <Button circular icon={PlusIcon} aria-label="Add" />,
+        () => {
+          const frame = frameOf("Add");
+          return {
+            frame: painted(frame, "_col-", "color"),
+            glyph: glyphFill(frame.querySelector("svg") as Element),
+          };
+        },
+      );
+      expect(ink).toEqual({ frame: houseThemes[to]?.color12, glyph: houseThemes[to]?.color12 });
+    });
+  }
+});
+
+const ICON_BUTTONS: [string, ReactElement][] = [
+  ["plain", <Button key="b" icon={PlusIcon} aria-label="Add" />],
+  ["accent", <Button key="b" accent icon={PlusIcon} aria-label="Add" />],
+  ["error", <Button key="b" error icon={PlusIcon} aria-label="Add" />],
+];
+
+describe("FZ-9617 LC-176: an icon-only Button's hover and press washes follow a class-only root flip", () => {
+  for (const [from, to] of FLIPS) {
+    for (const [name, button] of ICON_BUTTONS) {
+      it(`${from} -> ${to} ${name}: the page scope's $backgroundHover and $backgroundPress`, () => {
+        const washes = expectFlipFollows(from, to, button, () => {
+          const frame = frameOf("Add");
+          return {
+            hover: painted(frame, "_bg-", "background-color", "hover"),
+            press: painted(frame, "_bg-", "background-color", "active"),
+          };
+        });
+        expect(washes).toEqual({
+          hover: houseThemes[to]?.backgroundHover,
+          press: houseThemes[to]?.backgroundPress,
+        });
+      });
+    }
+  }
+});
+
+function barRead(name: string) {
+  return () => {
+    const frame = frameOf(name);
+    return {
+      frame: painted(frame, "_col-", "color"),
+      glyph: glyphFill(frame.querySelector("svg") as Element),
+    };
+  };
+}
+
+const BAR_BUTTONS: [string, string, ReactElement][] = [
+  ["at the root", "Add", <Button key="b" chromeless accentInk icon={PlusIcon} aria-label="Add" />],
+  [
+    "in a bar Surface",
+    "Add",
+    <Surface key="b" bar>
+      <Button chromeless accentInk icon={PlusIcon} aria-label="Add" />
+    </Surface>,
+  ],
+  [
+    "with a label",
+    "Back",
+    <Button key="b" chromeless accentInk edge="start" icon={PlusIcon}>
+      Back
+    </Button>,
+  ],
+];
+
+describe("FZ-9617 LC-176: a chromeless accentInk bar glyph follows a class-only root flip", () => {
+  for (const [from, to] of FLIPS) {
+    for (const [where, name, button] of BAR_BUTTONS) {
+      it(`${from} -> ${to} ${where}: the glyph paints the host scope's identity ink`, () => {
+        const ink = expectFlipFollows(from, to, button, barRead(name));
+        expect(ink.glyph).toBe(ink.frame);
+        expect(ink.glyph).toMatch(/^#|^rgb|^hsl/);
+      });
+    }
+  }
+
+  it("the glyph's svg never carries a var() or a token, only currentColor (LC-84)", () => {
+    mount("light", <Button chromeless accentInk icon={PlusIcon} aria-label="Add" />);
+    const svg = frameOf("Add").querySelector("svg") as Element;
+    expect(svg.getAttribute("fill")).toBe("currentColor");
+  });
+
+  it.each(["light", "dark"] as const)(
+    "%s: the house identity ink is the theme's $color12",
+    (scheme) => {
+      expect(houseThemes[scheme]?.identityInk).toBe(houseThemes[scheme]?.color12);
+      mount(scheme, <Button chromeless accentInk icon={PlusIcon} aria-label="Add" />);
+      expect(barRead("Add")()).toEqual({
+        frame: houseThemes[scheme]?.identityInk,
+        glyph: houseThemes[scheme]?.identityInk,
+      });
+    },
+  );
+});
+
+const WASH_KNOBS: Partial<Knobs> = {
+  disabledStyle: "keepLabel",
+  fillStyle: "filled",
+  borderWidth: "medium",
+};
+
+describe("FZ-9617: a disabled accent media plate washes from the dark scope on web", () => {
+  for (const scheme of ["light", "dark"] as const) {
+    it(`${scheme} page: fill, edge and ink are the dark scope's $color3, $color6 and $color11`, () => {
+      mount(
+        scheme,
+        <Preset overrides={WASH_KNOBS}>
+          <Button accent disabled plate="media" icon={PlusIcon} aria-label="Play" />
+        </Preset>,
+      );
+      const frame = frameOf("Play");
+      expect({
+        fill: painted(frame, "_bg-", "background-color"),
+        edge: painted(frame, "_btc-", "border-top-color"),
+        ink: painted(frame, "_col-", "color"),
+      }).toEqual({
+        fill: houseThemes.dark?.color3,
+        edge: houseThemes.dark?.color6,
+        ink: houseThemes.dark?.color11,
+      });
+    });
+  }
+});

package/src/Button/index.tsx

@@ -781,12 +781,17 @@ export function Button({
   const tierPaint = tier ? controlTierPaint(tier, darkScheme, elevatedGround) : undefined;
   const tierDisabled =
     tier && disabledState.style !== "dimWhole" ? controlTierDisabled(tier) : undefined;
+  const pageTheme = parentScopeTheme as unknown as Record<string, { val?: unknown } | undefined>;
+  const hostTheme =
+    (mediaPlate
+      ? (getConfig().themes as Record<string, Record<string, { val?: unknown }>>).dark
+      : undefined) ?? pageTheme;
   const hostScoped = <T extends object>(fragment: T): T =>
     Object.fromEntries(
       Object.entries(fragment).map(([key, value]) => [
         key,
         typeof value === "string" && value.startsWith("$")
-          ? (parentScopeTheme[value.slice(1) as keyof typeof parentScopeTheme]?.val ?? value)
+          ? (hostTheme[value.slice(1)]?.val ?? value)
           : value,
       ]),
     ) as T;
@@ -881,7 +886,11 @@ export function Button({
   const outlinedOnHost = Boolean(
     onPage && activeThemeName && solidPaletteThemes.has(activeThemeName),
   );
-  const outlinedInk = outlinedOnHost ? hostAccentInk : outlinedIntentInk ? "$color11" : undefined;
+  const outlinedInk = outlinedOnHost
+    ? hostWash({ color: hostAccentInk }).color
+    : outlinedIntentInk
+      ? "$color11"
+      : undefined;
 
   const resolvedRole: ButtonActionRole | undefined =
     actionRole ?? (accent || confirmPlate ? "primary" : undefined);
@@ -905,6 +914,11 @@ export function Button({
         ? glyphTint.label
         : glyphTint.glyph
       : null;
+  const barInkPaint =
+    isWeb && barInk && !mediaPlate && pageTheme.identityInk?.val === barInk
+      ? hostWash({ color: "$identityInk" }).color
+      : barInk;
+  const barGlyphInk = barInk && isWeb && props.color == null ? "currentColor" : barInk;
   const inlineGlyph = iconButton && inline === true && !nested;
   // LC-176: back's caret beside its label is a bar glyph too, and so is the
   // glyph on a plate (media, or the overlay's confirm).
@@ -953,7 +967,7 @@ export function Button({
         : confirmPlate
           ? confirmInk
           : framedCircle && !activeThemeName
-            ? hostScoped({ color: "$color12" }).color
+            ? hostWash({ color: "$color12" }).color
             : undefined;
   const framedCirclePx =
     touch && typeof sizeProp !== "number"
@@ -983,7 +997,7 @@ export function Button({
   const barGlyphFloor = barGlyph && !framedCircle && !inlineGlyph && !nested;
   const glyph =
     barGlyph || inlineGlyph || framedCircle
-      ? withGlyphWeight(icon, iconSize, resolvedGlyphWeight, barGlyphFloor, barInk)
+      ? withGlyphWeight(icon, iconSize, resolvedGlyphWeight, barGlyphFloor, barGlyphInk)
       : icon;
 
   // LC-158: the frame keeps its recipe height under Dynamic Type, so the
@@ -1013,12 +1027,12 @@ export function Button({
       {...(nested ? knobProps.label : { fontSize: recipe.fontSize })}
       {...(textColor
         ? outlinedOnHost
-          ? hostScoped({ color: textColor })
+          ? hostWash({ color: textColor })
           : { color: textColor }
         : outlinedInk
           ? { color: outlinedInk }
           : undefined)}
-      {...(barInk ? { color: barInk } : undefined)}
+      {...(barInkPaint ? { color: barInkPaint } : undefined)}
       // LC-40: on the washed disabled chrome the label leaves the on-fill
       // foreground for the wash's AA ink (keepLabel keeps >=4.5:1).
       {...(unavailable ? disabledText : undefined)}
@@ -1052,7 +1066,7 @@ export function Button({
     plateInk ??
     (textColor
       ? outlinedOnHost
-        ? hostScoped({ color: textColor }).color
+        ? hostWash({ color: textColor }).color
         : textColor
       : outlinedInk) ??
     "$color";
@@ -1075,7 +1089,7 @@ export function Button({
   ) : null;
   const glyphAfter =
     iconAfter && (barGlyph || inlineGlyph || framedCircle)
-      ? withGlyphWeight(iconAfter, iconSize, resolvedGlyphWeight, barGlyphFloor, barInk)
+      ? withGlyphWeight(iconAfter, iconSize, resolvedGlyphWeight, barGlyphFloor, barGlyphInk)
       : iconAfter;
   const iconAfterElement = glyphAfter ? (
     <View flexShrink={0}>
@@ -1176,14 +1190,14 @@ export function Button({
   const glyphState = iconButton && !selectedFill;
   const iconHover = glyphState
     ? isWeb
-      ? hostScoped({ backgroundColor: "$backgroundHover" })
+      ? hostWash({ backgroundColor: "$backgroundHover" })
       : { backgroundColor: "transparent" }
     : mediaPlate
       ? { backgroundColor: "$shadow5" }
       : undefined;
   const iconPress = glyphState
     ? isWeb
-      ? hostScoped({ backgroundColor: "$backgroundPress" })
+      ? hostWash({ backgroundColor: "$backgroundPress" })
       : GlassView || glassGroup
         ? { backgroundColor: "transparent" }
         : { backgroundColor: "transparent", opacity: ICON_BUTTON_PRESS_OPACITY }
@@ -1273,7 +1287,7 @@ export function Button({
       // (LC-05); outlined frames sit on the page, so re-anchor inherited
       // text/icon color (currentColor) to the hue's readable text tier.
       {...(outlinedInk ? { color: outlinedInk } : undefined)}
-      {...(barInk ? { color: barInk } : undefined)}
+      {...(barInkPaint ? { color: barInkPaint } : undefined)}
       {...(plateInk ? { color: plateInk } : undefined)}
       // LC-40 DISABLED-VISIBLE: keepLabel washes the chrome (muted fill/
       // border) while label/glyphs re-anchor to the lowest AA text tier
@@ -1316,13 +1330,13 @@ export function Button({
       focusStyle={{ outlineWidth: 0 }}
       // DG-A11Y-01 / LC-71: house keyboard ring (≥2px `$outlineColor`) on the
       // whole painted frame. Rest and mouse-focus paint none. Parent-scope
-      // `$outlineColor` literal: intent buttons re-theme the frame, and those
+      // `$outlineColor`: intent buttons re-theme the frame, and those
       // sub-themes derive a ring for their own inverted surfaces — invisible
       // on the page the ring actually draws on (measured 1.17:1 on the accent
       // pagination button).
       focusVisibleStyle={ensureFocusVisibleRing({
         ...control.focusVisibleKnobProps,
-        ...(pageOutlineColor ? { outlineColor: pageOutlineColor } : undefined),
+        ...(pageOutlineColor ? hostWash({ outlineColor: "$outlineColor" }) : undefined),
       })}
       onPress={handlePress}
       {...(isWeb ? { onKeyDown: handleKeyDown as unknown as () => void } : undefined)}
@@ -1461,17 +1475,26 @@ export function Button({
     buttonElement
   );
   const hostWashScope = Object.fromEntries(
-    [disabledState.surfaceKnobProps, disabledState.textKnobProps]
+    [
+      disabledState.surfaceKnobProps,
+      disabledState.textKnobProps,
+      { color: hostAccentInk },
+      { color: textColor },
+      { outlineColor: "$outlineColor" },
+      { backgroundColor: "$backgroundHover" },
+      { backgroundColor: "$backgroundPress" },
+      { color: "$color12" },
+      { color: "$identityInk" },
+    ]
       .flatMap((fragment) => Object.values(fragment))
       .filter((value): value is string => typeof value === "string" && value.startsWith("$"))
       .map((value) => [hostWashVar(value.slice(1)), `var(--${value.slice(1)})`]),
   );
-  const hostedButton =
-    isWeb && activeThemeName && solidPaletteThemes.has(activeThemeName) ? (
-      <span style={{ display: "contents", ...hostWashScope } as CSSProperties}>{intentButton}</span>
-    ) : (
-      intentButton
-    );
+  const hostedButton = isWeb ? (
+    <span style={{ display: "contents", ...hostWashScope } as CSSProperties}>{intentButton}</span>
+  ) : (
+    intentButton
+  );
   // The media plate reads the same over any picture in either scheme: a dark
   // material with a light glyph.
   const themedButton = mediaPlate ? <Theme name="dark">{hostedButton}</Theme> : hostedButton;

package/types/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.tsx"],"names":[],"mappings":"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"}