@multiplatform.one/theme 7.69.1 → 7.69.2

package/package.json

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

package/src/menuRow.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { menuRowChecked, menuRowFrame } from "./menuRow";
+import { menuRowCheckInk, menuRowChecked, menuRowFrame, resolveMenuRowCheckInk } from "./menuRow";
 
 describe("menuRowFrame (LC-16 shared menu-row geometry)", () => {
   it("spans the overlay edge-to-edge with its own horizontal padding (SP-EDGE)", () => {
@@ -31,8 +31,48 @@ describe("menuRowFrame (LC-16 shared menu-row geometry)", () => {
   });
 });
 
-describe("menuRowChecked (LC-262 / LC-172 checked row)", () => {
-  it("draws no fill: the check mark carries the selection (FZ-8355)", () => {
-    expect(menuRowChecked).toEqual({ backgroundColor: "transparent" });
+describe("menuRowChecked (LC-262 checked row, FZ-8355 r6)", () => {
+  it("rests light rows on the $color4 selection surface, one step past the $color3 hover", () => {
+    expect(menuRowChecked("light").backgroundColor).toBe("$color4");
+  });
+
+  it("recesses dark rows to $color2, off the $color4 dark overlay", () => {
+    expect(menuRowChecked("dark").backgroundColor).toBe("$color2");
+  });
+
+  it("keeps the fill through hover and press, and leaves focus rings to the consumer", () => {
+    for (const scheme of ["light", "dark"] as const) {
+      const checked = menuRowChecked(scheme);
+      expect(checked.hoverStyle).toEqual({ backgroundColor: checked.backgroundColor });
+      expect(checked.pressStyle).toEqual({ backgroundColor: checked.backgroundColor });
+      expect(checked).not.toHaveProperty("focusVisibleStyle");
+      expect(checked.backgroundColor).not.toBe(menuRowFrame.backgroundColor);
+    }
+  });
+
+  it("marks the check in the theme's selected ink", () => {
+    expect(menuRowCheckInk).toBe("$selectedColor");
+  });
+});
+
+describe("resolveMenuRowCheckInk (LC-176 bold mono check on hue-less themes)", () => {
+  it("keeps a colour theme's selected ink", () => {
+    expect(
+      resolveMenuRowCheckInk({ selectedColor: { val: "#113264" }, color: { val: "#050505" } }),
+    ).toBe("#113264");
+  });
+
+  it("paints the primary ink when the selected ink is grey", () => {
+    expect(
+      resolveMenuRowCheckInk({
+        selectedColor: { val: "hsla(0, 0%, 27%, 1)" },
+        color: { val: "hsla(0, 0%, 2%, 1)" },
+      }),
+    ).toBe("hsla(0, 0%, 2%, 1)");
+  });
+
+  it("falls back to the primary ink, then currentColor, when a key is missing", () => {
+    expect(resolveMenuRowCheckInk({ color: { val: "#fff" } })).toBe("#fff");
+    expect(resolveMenuRowCheckInk({})).toBe("currentColor");
   });
 });

package/src/menuRow.ts

@@ -1,3 +1,7 @@
+import { useTheme } from "tamagui";
+import { normalizeToHex } from "./theme/colorRules";
+import type { ColorScheme } from "./theme/resolveKnobs";
+
 /**
  * LC-16 ONE-IMPLEMENTATION — the shared menu-row frame geometry.
  *
@@ -35,11 +39,52 @@ export const menuRowFrame = {
 } as const;
 
 /**
- * LC-262 / LC-172: a checked or selected menu or picker row draws no fill in
- * either scheme; the accent check alone marks it. A per-row `$color2` plate
- * read as nothing in light and near-black in dark (FZ-8355). Hover, press and
- * keyboard focus stay transient feedback, owned by each consumer.
+ * LC-262: a checked or selected menu or picker row is highlighted, so it reads
+ * as chosen without hunting for the check (FZ-8355 r6, rv_9244d1b063a3a4de).
+ * Light rests on the LC-05 selection surface `$color4`, one step past the
+ * `$color3` hover. A dark overlay is itself `$color4` (`surface2`), so dark
+ * recesses to `$color2`, the band Clay rated good. In a colour theme both
+ * steps carry its hue. Hover and press keep the fill, so a checked row never
+ * drops to the transient hover fill. Spread it last on the row so it wins
+ * over the consumer's hover and keyboard-cursor fills; a consumer that paints
+ * focus as a fill paints `backgroundColor` there too. Focus rings stay the
+ * consumer's.
  */
-export const menuRowChecked = {
-  backgroundColor: "transparent",
-} as const;
+export function menuRowChecked(scheme: ColorScheme) {
+  const fill = scheme === "dark" ? "$color2" : "$color4";
+  return {
+    backgroundColor: fill,
+    hoverStyle: { backgroundColor: fill },
+    pressStyle: { backgroundColor: fill },
+  } as const;
+}
+
+/** The check mark on a `menuRowChecked` row: the theme's selected ink. */
+export const menuRowCheckInk = "$selectedColor" as const;
+
+type ThemeValues = Record<string, { val?: unknown } | undefined>;
+
+function isHueless(paint: string): boolean {
+  const hex = normalizeToHex(paint);
+  if (!hex) return false;
+  const rgb = [1, 3, 5].map((i) => Number.parseInt(hex.slice(i, i + 2), 16));
+  return Math.max(...rgb) - Math.min(...rgb) <= 8;
+}
+
+/**
+ * The paint for a checked row's check (LC-176, FZ-8355 r6). A colour theme
+ * marks it in its selected ink; a hue-less theme's selected ink is a muted
+ * grey that reads as a thin grey tick on the fill, so it takes the primary
+ * ink instead, the bold mono glyph. Never undefined.
+ */
+export function resolveMenuRowCheckInk(theme: ThemeValues): string {
+  const tint = theme[menuRowCheckInk.slice(1)]?.val;
+  const ink = theme.color?.val;
+  if (typeof tint === "string" && !(isHueless(tint) && typeof ink === "string")) return tint;
+  return typeof ink === "string" ? ink : "currentColor";
+}
+
+/** Live `resolveMenuRowCheckInk` for the theme in scope. */
+export function useMenuRowCheckInk(): string {
+  return resolveMenuRowCheckInk(useTheme() as unknown as ThemeValues);
+}

package/src/theme/theme.tsx

@@ -144,6 +144,11 @@ export function ThemeProvider<T extends CreateTamaguiProps>({
       ":root { --mp-transition: 200ms; }",
       // Reserve space for scrollbar to prevent gap when modal Sheet hides it
       "html { scrollbar-gutter: stable; }",
+      // A scroll lock (Tamagui's sheet lock writes an inline stable gutter plus
+      // overflow hidden) must not keep the gutter: it shrinks the initial
+      // containing block, so a fixed scrim and sheet stop a scrollbar's width
+      // short of the right edge with a page-coloured strip beside them (FZ-8355).
+      'html[style*="overflow: hidden"] { scrollbar-gutter: auto !important; }',
       // Disable browser-native focus ring on form controls;
       // components provide their own focus-visible affordance.
       "input:focus, input:focus-visible,",

package/types/menuRow.d.ts

@@ -1,3 +1,4 @@
+import type { ColorScheme } from "./theme/resolveKnobs";
 /**
  * LC-16 ONE-IMPLEMENTATION — the shared menu-row frame geometry.
  *
@@ -34,12 +35,39 @@ export declare const menuRowFrame: {
     readonly backgroundColor: "transparent";
 };
 /**
- * LC-262 / LC-172: a checked or selected menu or picker row draws no fill in
- * either scheme; the accent check alone marks it. A per-row `$color2` plate
- * read as nothing in light and near-black in dark (FZ-8355). Hover, press and
- * keyboard focus stay transient feedback, owned by each consumer.
+ * LC-262: a checked or selected menu or picker row is highlighted, so it reads
+ * as chosen without hunting for the check (FZ-8355 r6, rv_9244d1b063a3a4de).
+ * Light rests on the LC-05 selection surface `$color4`, one step past the
+ * `$color3` hover. A dark overlay is itself `$color4` (`surface2`), so dark
+ * recesses to `$color2`, the band Clay rated good. In a colour theme both
+ * steps carry its hue. Hover and press keep the fill, so a checked row never
+ * drops to the transient hover fill. Spread it last on the row so it wins
+ * over the consumer's hover and keyboard-cursor fills; a consumer that paints
+ * focus as a fill paints `backgroundColor` there too. Focus rings stay the
+ * consumer's.
  */
-export declare const menuRowChecked: {
-    readonly backgroundColor: "transparent";
+export declare function menuRowChecked(scheme: ColorScheme): {
+    readonly backgroundColor: "$color2" | "$color4";
+    readonly hoverStyle: {
+        readonly backgroundColor: "$color2" | "$color4";
+    };
+    readonly pressStyle: {
+        readonly backgroundColor: "$color2" | "$color4";
+    };
 };
+/** The check mark on a `menuRowChecked` row: the theme's selected ink. */
+export declare const menuRowCheckInk: "$selectedColor";
+type ThemeValues = Record<string, {
+    val?: unknown;
+} | undefined>;
+/**
+ * The paint for a checked row's check (LC-176, FZ-8355 r6). A colour theme
+ * marks it in its selected ink; a hue-less theme's selected ink is a muted
+ * grey that reads as a thin grey tick on the fill, so it takes the primary
+ * ink instead, the bold mono glyph. Never undefined.
+ */
+export declare function resolveMenuRowCheckInk(theme: ThemeValues): string;
+/** Live `resolveMenuRowCheckInk` for the theme in scope. */
+export declare function useMenuRowCheckInk(): string;
+export {};
 //# sourceMappingURL=menuRow.d.ts.map

package/types/menuRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menuRow.d.ts","sourceRoot":"","sources":["../src/menuRow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,YAAY;;;;;;;;CAQf,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,cAAc;;CAEjB,CAAC"}
+{"version":3,"file":"menuRow.d.ts","sourceRoot":"","sources":["../src/menuRow.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,YAAY;;;;;;;;CAQf,CAAC;AAEX;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,WAAW;;;;;;;;EAOjD;AAED,0EAA0E;AAC1E,eAAO,MAAM,eAAe,EAAG,gBAAyB,CAAC;AAEzD,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE;IAAE,GAAG,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAAC,CAAC;AASjE;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAKjE;AAED,4DAA4D;AAC5D,wBAAgB,kBAAkB,IAAI,MAAM,CAE3C"}

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,kBAAkB,EAEvB,KAAK,oBAAoB,EAG1B,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAU/C,OAAO,EAAE,KAAK,WAAW,EAAa,MAAM,UAAU,CAAC;AAGvD;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,IAAI,GAAG,IAAI,CAkB5D;AAMD,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,CACjD,SAAQ,iBAAiB,CAAC,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,cAAc,CAAC,CAAC;IAChF,MAAM,CAAC,EAAE;QACP,OAAO,EAAE,UAAU,CAAC,cAAc,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;KAChE,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,eAAe,CAAC,CAAC,CAAC;IAC3D,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC;AAkBD,wBAAgB,aAAa,CAAC,CAAC,SAAS,kBAAkB,EAAE,EAC1D,QAAQ,EACR,MAAM,EACN,WAAW,EACX,GAAG,YAAY,EAChB,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAsGvB"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,kBAAkB,EAEvB,KAAK,oBAAoB,EAG1B,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAU/C,OAAO,EAAE,KAAK,WAAW,EAAa,MAAM,UAAU,CAAC;AAGvD;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,IAAI,GAAG,IAAI,CAkB5D;AAMD,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,CACjD,SAAQ,iBAAiB,CAAC,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,cAAc,CAAC,CAAC;IAChF,MAAM,CAAC,EAAE;QACP,OAAO,EAAE,UAAU,CAAC,cAAc,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;KAChE,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,eAAe,CAAC,CAAC,CAAC;IAC3D,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC;AAkBD,wBAAgB,aAAa,CAAC,CAAC,SAAS,kBAAkB,EAAE,EAC1D,QAAQ,EACR,MAAM,EACN,WAAW,EACX,GAAG,YAAY,EAChB,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CA2GvB"}