@multiplatform.one/theme 7.83.1 → 7.84.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.83.1",
+  "version": "7.84.0",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -17,6 +17,7 @@
   },
   "source": "src/index.ts",
   "files": [
+    "dist",
     "src",
     "!src/**/__snapshots__",
     "expo.cjs",
@@ -33,32 +34,74 @@
     ".": {
       "source": "./src/index.ts",
       "types": "./types/index.d.ts",
-      "default": "./src/index.ts"
+      "react-native": {
+        "types": "./types/index.d.ts",
+        "import": "./dist/esm/index.native.js",
+        "require": "./dist/cjs/index.native.js"
+      },
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/esm/index.mjs"
     },
     "./audit": {
       "source": "./src/audit/index.ts",
       "types": "./types/audit/index.d.ts",
-      "default": "./src/audit/index.ts"
+      "react-native": {
+        "types": "./types/audit/index.d.ts",
+        "import": "./dist/esm/audit/index.native.js",
+        "require": "./dist/cjs/audit/index.native.js"
+      },
+      "import": "./dist/esm/audit/index.mjs",
+      "require": "./dist/cjs/audit/index.cjs",
+      "default": "./dist/esm/audit/index.mjs"
     },
     "./scale-attribute": {
       "source": "./src/theme/scale/scaleAttribute.ts",
       "types": "./types/theme/scale/scaleAttribute.d.ts",
-      "default": "./src/theme/scale/scaleAttribute.ts"
+      "react-native": {
+        "types": "./types/theme/scale/scaleAttribute.d.ts",
+        "import": "./dist/esm/theme/scale/scaleAttribute.native.js",
+        "require": "./dist/cjs/theme/scale/scaleAttribute.native.js"
+      },
+      "import": "./dist/esm/theme/scale/scaleAttribute.mjs",
+      "require": "./dist/cjs/theme/scale/scaleAttribute.cjs",
+      "default": "./dist/esm/theme/scale/scaleAttribute.mjs"
     },
     "./design-tokens": {
       "source": "./src/audit/designTokens.ts",
       "types": "./types/audit/designTokens.d.ts",
-      "default": "./src/audit/designTokens.ts"
+      "react-native": {
+        "types": "./types/audit/designTokens.d.ts",
+        "import": "./dist/esm/audit/designTokens.native.js",
+        "require": "./dist/cjs/audit/designTokens.native.js"
+      },
+      "import": "./dist/esm/audit/designTokens.mjs",
+      "require": "./dist/cjs/audit/designTokens.cjs",
+      "default": "./dist/esm/audit/designTokens.mjs"
     },
     "./ramps": {
       "source": "./src/theme/ramps.ts",
       "types": "./types/theme/ramps.d.ts",
-      "default": "./src/theme/ramps.ts"
+      "react-native": {
+        "types": "./types/theme/ramps.d.ts",
+        "import": "./dist/esm/theme/ramps.native.js",
+        "require": "./dist/cjs/theme/ramps.native.js"
+      },
+      "import": "./dist/esm/theme/ramps.mjs",
+      "require": "./dist/cjs/theme/ramps.cjs",
+      "default": "./dist/esm/theme/ramps.mjs"
     },
     "./motion": {
       "source": "./src/theme/motionTiming.ts",
       "types": "./types/theme/motionTiming.d.ts",
-      "default": "./src/theme/motionTiming.ts"
+      "react-native": {
+        "types": "./types/theme/motionTiming.d.ts",
+        "import": "./dist/esm/theme/motionTiming.native.js",
+        "require": "./dist/cjs/theme/motionTiming.native.js"
+      },
+      "import": "./dist/esm/theme/motionTiming.mjs",
+      "require": "./dist/cjs/theme/motionTiming.cjs",
+      "default": "./dist/esm/theme/motionTiming.mjs"
     },
     "./expo": {
       "source": "./src/expo.ts",
@@ -72,8 +115,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.83.1",
-    "@multiplatform.one/store": "^7.83.1",
+    "@multiplatform.one/platform": "^7.84.0",
+    "@multiplatform.one/store": "^7.84.0",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -89,10 +132,11 @@
   },
   "devDependencies": {
     "@expo/prebuild-config": "55.0.18",
-    "@multiplatform.one/config": "7.83.1",
-    "@multiplatform.one/test-utils": "7.83.1",
+    "@multiplatform.one/config": "7.84.0",
+    "@multiplatform.one/test-utils": "7.84.0",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
+    "@tamagui/build": "2.7.6",
     "@tamagui/font-inter": "2.7.6",
     "@testing-library/react": "^16.3.3",
     "@vitejs/plugin-react": "^6.1.2",
@@ -128,6 +172,6 @@
   "scripts": {
     "test": "vitest run --coverage --coverage.provider=v8 --coverage.reporter=text --coverage.reporter=lcov --coverage.reporter=html",
     "typecheck": "tsgo --noEmit",
-    "build": "tsc -p tsconfig.build.json"
+    "build": "rm -rf dist types 2>/dev/null && tamagui-build --ts-project ./tsconfig.build.json --exclude '\\.spec\\.|\\.test\\.|\\.stories\\.'"
   }
 }

package/src/expo.ts

@@ -1,4 +1,5 @@
 import { normalizeCSSColor } from "@tamagui/normalize-css-color";
+import { interFaceFile, interFaceNames } from "./fonts/interFaces";
 import { createThemesBuilder } from "./theme/createThemes";
 import { defaultAccentTheme } from "./theme/defaults/accent";
 import { defaultBaseTheme } from "./theme/defaults/base";
@@ -65,3 +66,22 @@ export function createExpoThemeColors({
     adaptiveIcon: { backgroundColor: adaptiveIconScheme === "dark" ? dark : light },
   };
 }
+
+/**
+ * The expo-font config plugin entry that embeds MPO's Inter faces in the
+ * native binary (FZ-8572), plus any extra font files an app passes. A
+ * production vxrn bundle carries no .otf assets, so a face that is only
+ * loaded at runtime falls back to the system font. Embedding needs a
+ * prebuild and a new binary; an OTA cannot add it.
+ */
+export function interExpoFontPlugin(extraFonts: string[] = []): ["expo-font", { fonts: string[] }] {
+  return [
+    "expo-font",
+    {
+      fonts: [
+        ...Object.values(interFaceNames).map((name) => require.resolve(interFaceFile(name))),
+        ...extraFonts,
+      ],
+    },
+  ];
+}

package/src/fonts/createFontLoader.ts

@@ -3,11 +3,15 @@ import type { FontLoader, FontLoaderConfig } from "./types";
 export function createFontLoader(config: FontLoaderConfig): FontLoader {
   const fontMap: Record<string, number> = {};
   if (config.inter) {
+    // Keys are interFaceNames (./interFaces.ts); Metro needs literal paths.
+    // An app that embeds them through interExpoFontPlugin finds them already
+    // registered, and expo-font skips the load.
     fontMap.Inter = require("@tamagui/font-inter/otf/Inter-Regular.otf");
-    fontMap.InterMedium = require("@tamagui/font-inter/otf/Inter-Medium.otf");
-    fontMap.InterSemiBold = require("@tamagui/font-inter/otf/Inter-SemiBold.otf");
-    fontMap.InterExtraBold = require("@tamagui/font-inter/otf/Inter-ExtraBold.otf");
-    fontMap.InterBold = require("@tamagui/font-inter/otf/Inter-Bold.otf");
+    fontMap["Inter-Regular"] = require("@tamagui/font-inter/otf/Inter-Regular.otf");
+    fontMap["Inter-Medium"] = require("@tamagui/font-inter/otf/Inter-Medium.otf");
+    fontMap["Inter-SemiBold"] = require("@tamagui/font-inter/otf/Inter-SemiBold.otf");
+    fontMap["Inter-Bold"] = require("@tamagui/font-inter/otf/Inter-Bold.otf");
+    fontMap["Inter-ExtraBold"] = require("@tamagui/font-inter/otf/Inter-ExtraBold.otf");
   }
   for (const font of config.fonts) {
     if (font.nativeModule) {

package/src/fonts/index.ts

@@ -1,2 +1,3 @@
 export * from "./createFontLoader";
+export * from "./interFaces";
 export * from "./types";

package/src/fonts/interFaces.spec.ts

@@ -0,0 +1,87 @@
+/**
+ * FZ-8572: every Inter face the native face map asks for is a font the app
+ * embeds (interExpoFontPlugin) and loads (createFontLoader), under the
+ * PostScript name iOS registers an embedded file by. The face map used to ask
+ * for "InterMedium" and friends, aliases that exist only when expo-font loads
+ * the OTFs at runtime; a production vxrn bundle carries no .otf assets, so
+ * 500 to 800 fell back to the system font.
+ */
+
+import { readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { describe, expect, it } from "vitest";
+import { interExpoFontPlugin } from "../expo";
+import { defaultBodyFont, defaultHeadingFont } from "../theme/defaults/fonts";
+import { createFontLoader } from "./createFontLoader.js";
+import { interFaceFile, interFaceNames } from "./interFaces";
+
+const require = createRequire(import.meta.url);
+
+/** An OpenType font's PostScript name (name ID 6) and OS/2 weight class. */
+function readFace(path: string): { postScript: string; weight: number } {
+  const data = readFileSync(path);
+  const tables = new Map<string, number>();
+  for (let i = 0; i < data.readUInt16BE(4); i++) {
+    const record = 12 + i * 16;
+    tables.set(data.toString("latin1", record, record + 4), data.readUInt32BE(record + 8));
+  }
+  const name = tables.get("name")!;
+  const strings = name + data.readUInt16BE(name + 4);
+  let postScript = "";
+  for (let i = 0; i < data.readUInt16BE(name + 2); i++) {
+    const record = name + 6 + i * 12;
+    if (data.readUInt16BE(record + 6) !== 6) continue;
+    const length = data.readUInt16BE(record + 8);
+    const start = strings + data.readUInt16BE(record + 10);
+    const raw = data.subarray(start, start + length);
+    postScript =
+      data.readUInt16BE(record) === 1 ? raw.toString("latin1") : raw.swap16().toString("utf16le");
+    break;
+  }
+  return { postScript, weight: data.readUInt16BE(tables.get("OS/2")! + 4) };
+}
+
+const faces = Object.entries(interFaceNames).map(
+  ([weight, name]) => [Number(weight), name] as const,
+);
+
+describe("Inter faces are embedded and loaded under the names the face map uses (FZ-8572)", () => {
+  it.each(faces)("weight %i ships an OTF whose PostScript name is %s", (weight, name) => {
+    expect(readFace(require.resolve(interFaceFile(name)))).toEqual({ postScript: name, weight });
+  });
+
+  it("the expo-font plugin embeds exactly the face-map files", () => {
+    const [plugin, { fonts }] = interExpoFontPlugin();
+    expect(plugin).toBe("expo-font");
+    expect(fonts).toEqual(faces.map(([, name]) => require.resolve(interFaceFile(name))));
+  });
+
+  it("the plugin keeps an app's extra fonts after the Inter faces", () => {
+    expect(interExpoFontPlugin(["./fonts/Extra.otf"])[1].fonts.at(-1)).toBe("./fonts/Extra.otf");
+  });
+
+  it("the native face map names only embedded faces, at every weight", () => {
+    const embedded = new Set<string>(Object.values(interFaceNames));
+    for (const font of [defaultHeadingFont, defaultBodyFont]) {
+      const face = font.face as Record<string, { normal?: string }>;
+      for (const [weight, name] of faces) expect(face[weight]?.normal).toBe(name);
+      for (const { normal } of Object.values(face)) {
+        if (normal !== font.family) expect(embedded).toContain(normal);
+      }
+    }
+  });
+
+  it("the runtime loader registers every face-map name", () => {
+    const original = require.extensions[".otf"];
+    require.extensions[".otf"] = (module) => {
+      module.exports = 1;
+    };
+    try {
+      const fonts = createFontLoader({ inter: true, fonts: [] }).importFonts();
+      for (const [, name] of faces) expect(fonts).toHaveProperty([name]);
+    } finally {
+      if (original) require.extensions[".otf"] = original;
+      else delete require.extensions[".otf"];
+    }
+  });
+});

package/src/fonts/interFaces.ts

@@ -0,0 +1,26 @@
+/**
+ * The Inter faces MPO ships, by weight, named by each OTF's PostScript name
+ * (FZ-8572). One table feeds the native face map, the runtime font loader and
+ * the expo-font config plugin, so every name tamagui asks for on native is a
+ * font the app either embeds or loads.
+ *
+ * PostScript names, not aliases: the expo-font config plugin embeds a file
+ * and iOS registers it under its PostScript name, and Android resolves a
+ * family by the file's base name in assets/fonts. @tamagui/font-inter names
+ * each file after its PostScript name, so `Inter-SemiBold` is all three.
+ */
+export const interFaceNames = {
+  400: "Inter-Regular",
+  500: "Inter-Medium",
+  600: "Inter-SemiBold",
+  700: "Inter-Bold",
+  800: "Inter-ExtraBold",
+} as const;
+
+export type InterWeight = keyof typeof interFaceNames;
+export type InterFaceName = (typeof interFaceNames)[InterWeight];
+
+/** The OTF file in @tamagui/font-inter for a face. */
+export function interFaceFile(name: InterFaceName): string {
+  return `@tamagui/font-inter/otf/${name}.otf`;
+}

package/src/theme/accentButtonLabel.spec.ts

@@ -0,0 +1,116 @@
+/**
+ * LC-172 FILL-CONTRAST for the stock accent Button (FZ-7697). `<Button accent>`
+ * is `theme="accent"` on a `Button` frame, so it paints from whichever theme
+ * Tamagui's name walk lands on: the scope's segments from longest to shortest,
+ * `<base>_accent_Button` before `<base>_accent`. The house scope finds
+ * `<scheme>_accent_Button` (template surface2), a hue scope its
+ * `<scheme>_<hue>_accent` solid, and an intent scope falls back to the
+ * scheme's. Every scope a Button can render under (each scheme bare, every hue
+ * and intent scope) must give its accent Button and its bare accent sub-theme a
+ * label that clears WCAG AA 4.5:1 and APCA Lc 60 on its fill.
+ */
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("tamagui", () => ({
+  createTamagui: vi.fn((config: Record<string, unknown>) => config),
+}));
+vi.mock("./animations/index", () => ({ animations: {} }));
+
+import {
+  aaTextContrastRatio,
+  contrastRatio,
+  normalizeToHex,
+  relativeLuminance,
+} from "./colorRules";
+import { createDefaultThemeConfig } from "./createDefaultThemeConfig";
+import { resolveAllThemes } from "./dedupeInherited";
+import { apcaContrast, fillLabelLcFloor } from "./fillContrast";
+import {
+  boldPreset,
+  consolePreset,
+  defaultPreset,
+  densePreset,
+  heroPreset,
+  roomyPreset,
+  storefrontPreset,
+} from "./presets";
+
+const resolved = resolveAllThemes(
+  createDefaultThemeConfig().tamagui.themes as unknown as Record<string, Record<string, unknown>>,
+);
+
+const scopes = Object.keys(resolved).filter(
+  (name) => /^(light|dark)(_[a-z]+)?$/.test(name) && !/_(accent|active)$/.test(name),
+);
+
+function accentThemeName(scope: string, componentName?: string) {
+  const parts = scope.split("_");
+  for (let end = parts.length; end > 0; end--) {
+    const base = parts.slice(0, end).join("_");
+    const candidates = componentName
+      ? [`${base}_accent_${componentName}`, `${base}_accent`]
+      : [`${base}_accent`];
+    const found = candidates.find((name) => name in resolved);
+    if (found) return found;
+  }
+  return undefined;
+}
+
+function measure(name: string) {
+  const theme = resolved[name];
+  expect(theme, name).toBeDefined();
+  const fill = normalizeToHex(String(theme?.background));
+  const label = normalizeToHex(String(theme?.color));
+  expect(
+    fill && label,
+    `${name}: ${String(theme?.color)} on ${String(theme?.background)}`,
+  ).toBeTruthy();
+  return {
+    fill: fill as string,
+    label: label as string,
+    wcag: contrastRatio(relativeLuminance(fill as string), relativeLuminance(label as string)),
+    lc: Math.abs(apcaContrast(label as string, fill as string)),
+  };
+}
+
+describe("LC-172: the stock accent Button's label is readable on its fill (FZ-7697)", () => {
+  it("covers both schemes, the hueless house scope and every hue", () => {
+    expect(scopes).toEqual(expect.arrayContaining(["light", "dark", "light_blue", "dark_purple"]));
+    expect(scopes.length).toBeGreaterThanOrEqual(18);
+  });
+
+  it("covers the scope every catalog preset renders under", () => {
+    for (const preset of [
+      defaultPreset,
+      heroPreset,
+      boldPreset,
+      densePreset,
+      roomyPreset,
+      consolePreset,
+      storefrontPreset,
+    ]) {
+      for (const scheme of ["light", "dark"]) {
+        const scope = preset.theme ? `${scheme}_${preset.theme}` : scheme;
+        expect(scopes, scope).toContain(scope);
+      }
+    }
+  });
+
+  it("resolves the house scope's accent Button to its own component theme", () => {
+    expect(accentThemeName("light", "Button")).toBe("light_accent_Button");
+    expect(accentThemeName("dark", "Button")).toBe("dark_accent_Button");
+  });
+
+  for (const scope of scopes) {
+    for (const componentName of [undefined, "Button"]) {
+      const target = componentName ? `${scope} accent ${componentName}` : `${scope} accent`;
+      it(`${target}: the label clears WCAG AA 4.5 and APCA Lc 60 on the fill`, () => {
+        const name = accentThemeName(scope, componentName);
+        expect(name, `${target} resolves to no theme`).toBeDefined();
+        const { fill, label, wcag, lc } = measure(name as string);
+        expect(wcag, `${label} on ${fill}`).toBeGreaterThanOrEqual(aaTextContrastRatio);
+        expect(lc, `${label} on ${fill}`).toBeGreaterThanOrEqual(fillLabelLcFloor);
+      });
+    }
+  }
+});

package/src/theme/colorRules.ts

@@ -326,6 +326,47 @@ export function holdInkFloor(fill: string, ink: string, floor = aaTextContrastRa
   return onWhite >= onBlack ? "#ffffff" : "#000000";
 }
 
+function mix(hex: string, pole: number, share: number): string {
+  return `#${[1, 3, 5]
+    .map((offset) => {
+      const channel = parseInt(hex.slice(offset, offset + 2), 16);
+      return Math.round(channel + (pole - channel) * share)
+        .toString(16)
+        .padStart(2, "0");
+    })
+    .join("")}`;
+}
+
+/**
+ * `hue` moved toward the scheme's ink pole (black on a light page, white on a
+ * dark one) by the least amount that clears `floor` on every surface, so the
+ * hue survives and only its lightness gives.
+ */
+export function holdHueToFloor(
+  hue: string,
+  surfaces: readonly (string | undefined)[],
+  dark: boolean,
+  floor: number,
+): string {
+  const hueHex = normalizeToHex(hue);
+  const lums = surfaces
+    .map((surface) => (surface ? normalizeToHex(surface) : null))
+    .filter((hex): hex is string => hex != null)
+    .map(relativeLuminance);
+  if (!hueHex || lums.length === 0) return hue;
+  const clears = (hex: string) => {
+    const lum = relativeLuminance(hex);
+    return lums.every((surface) => contrastRatio(lum, surface) >= floor);
+  };
+  if (clears(hueHex)) return hue;
+  const pole = dark ? 255 : 0;
+  for (let step = 1; step <= 50; step++) {
+    const candidate = mix(hueHex, pole, step * 0.02);
+    if (clears(candidate)) return candidate;
+  }
+  return dark ? "#ffffff" : "#000000";
+}
+
 /**
  * Given a 12-color scale (hex strings), a background step, and a starting
  * text step, scan towards `preferredDir` for the first step whose contrast

package/src/theme/controlTiers.ts

@@ -15,9 +15,11 @@
  *   wash on hover and press. The bar's position carries the affordance.
  *
  * Disabled, both tiers drain the fill to transparent and set the ink on
- * `$color9`, which clears AA on the page in both schemes on the stock ramp;
- * the tinted tier keeps LC-40's `$color6` edge so the drained box still reads
- * as a control.
+ * `$textMuted`, the secondary ink (LC-152), which clears 7:1 on the page in
+ * both schemes. Under a tint it stays neutral: a tint's `$color9` is its
+ * hue's solid step, the colour of a live action, so a disabled label inked
+ * with it read as available (FZ-8939, LC-40). The tinted tier keeps LC-40's
+ * `$color6` edge so the drained box still reads as a control.
  */
 export type ControlTier = "tinted" | "plain";
 
@@ -60,7 +62,7 @@ export function controlTierDisabled(tier: ControlTier): {
   return {
     backgroundColor: "transparent",
     borderColor: tier === "tinted" ? "$color6" : "transparent",
-    color: "$color9",
+    color: "$textMuted",
   };
 }
 

package/src/theme/defaults/fonts.spec.ts

@@ -304,10 +304,17 @@ describe("heading scope categories", () => {
     try {
       const fonts = createFontLoader({ inter: true, fonts: [] }).importFonts();
       expect(Object.keys(fonts).sort()).toEqual(
-        ["Inter", "InterMedium", "InterSemiBold", "InterBold", "InterExtraBold"].sort(),
+        [
+          "Inter",
+          "Inter-Regular",
+          "Inter-Medium",
+          "Inter-SemiBold",
+          "Inter-Bold",
+          "Inter-ExtraBold",
+        ].sort(),
       );
       for (const font of [defaultHeadingFont, defaultBodyFont]) {
-        expect(font.face[500]?.normal).toBe("InterMedium");
+        expect(font.face[500]?.normal).toBe("Inter-Medium");
         for (const face of Object.values(font.face)) {
           expect(fonts).toHaveProperty(face.normal!.split(",")[0]!.trim());
         }

package/src/theme/defaults/fonts.ts

@@ -4,6 +4,7 @@ import { createInterFont } from "@tamagui/font-inter";
 // whole `tamagui` module down to `createTamagui`, and this module is on that
 // spec's import graph.
 import { createFont, type GenericFont } from "@tamagui/web";
+import { interFaceNames } from "../../fonts/interFaces";
 import { flooredLineHeight, fontCategoryMetrics } from "../fontCategoryMetrics";
 import { fontCategoryStacks } from "../fontCategoryStacks";
 import type { FontCategory } from "../knobs";
@@ -93,14 +94,10 @@ export const bodyFontLineHeights: Record<string, number> = {
   ...defaultTypeTables.bodyLineHeights,
 };
 
-/** Shipped Inter faces: 400/500/600/700/800. */
-const interFaces = {
-  400: { normal: "Inter" },
-  500: { normal: "InterMedium" },
-  600: { normal: "InterSemiBold" },
-  700: { normal: "InterBold" },
-  800: { normal: "InterExtraBold" },
-} as const;
+/** Shipped Inter faces: 400/500/600/700/800, by PostScript name (FZ-8572). */
+const interFaces = Object.fromEntries(
+  Object.entries(interFaceNames).map(([weight, name]) => [weight, { normal: name }]),
+) as { [W in keyof typeof interFaceNames]: { normal: (typeof interFaceNames)[W] } };
 
 /**
  * Concrete family stacks for each `headingFont`/`bodyFont` category. Alias of

package/src/theme/glyphTint.spec.ts

@@ -1,12 +1,12 @@
 import { describe, expect, it } from "vitest";
-import { contrastRatio, relativeLuminance } from "./colorRules";
+import { contrastRatio, holdHueToFloor, relativeLuminance } from "./colorRules";
 import {
   GLYPH_CONTRAST_FLOOR,
   glyphTintFallback,
-  holdHueToFloor,
   platformSystemTint,
   resolveGlyphTint,
 } from "./glyphTint";
+import { resolveActiveTabInk } from "./readableColor";
 
 const ratio = (a: string, b: string) => contrastRatio(relativeLuminance(a), relativeLuminance(b));
 
@@ -51,3 +51,31 @@ describe("LC-176 glyph tint (FZ-8020 r4)", () => {
     expect(parseInt(held.slice(5, 7), 16)).toBeGreaterThan(parseInt(held.slice(1, 3), 16));
   });
 });
+
+describe("LC-150 active tab ink (FZ-7995 r3)", () => {
+  const light = { dark: false, surfaces: ["#f7f7f7", "#ffffff"], ink: "#111111" };
+  const dark = { dark: true, surfaces: ["#111111", "#191919"], ink: "#eeeeee" };
+  const chroma = (hex: string) => {
+    const rgb = [1, 3, 5].map((offset) => parseInt(hex.slice(offset, offset + 2), 16));
+    return Math.max(...rgb) - Math.min(...rgb);
+  };
+
+  it("keeps a hued theme's identity hue", () => {
+    expect(resolveActiveTabInk({ ...light, hue: "#c2410c", solid: "#0090ff" })).toBe("#c2410c");
+  });
+
+  for (const cell of [light, dark]) {
+    const scheme = cell.dark ? "dark" : "light";
+    it(`${scheme}, no hue: takes the accent solid, held to AA on every page surface`, () => {
+      const ink = resolveActiveTabInk({ ...cell, hue: undefined, solid: "#0090ff" });
+      expect(ink).not.toBe(cell.ink);
+      expect(chroma(ink)).toBeGreaterThanOrEqual(0.1 * 255);
+      for (const surface of cell.surfaces) expect(ratio(ink, surface)).toBeGreaterThanOrEqual(4.5);
+    });
+  }
+
+  it("falls back to the primary ink only when the solid has no hue", () => {
+    expect(resolveActiveTabInk({ ...light, hue: undefined, solid: "#6f6f6f" })).toBe("#111111");
+    expect(resolveActiveTabInk({ ...light, hue: undefined, solid: undefined })).toBe("#111111");
+  });
+});

package/src/theme/glyphTint.ts

@@ -1,11 +1,6 @@
 import { createContext, useContext, useMemo } from "react";
 import { useThemeName } from "tamagui";
-import {
-  aaTextContrastRatio,
-  contrastRatio,
-  normalizeToHex,
-  relativeLuminance,
-} from "./colorRules";
+import { aaTextContrastRatio, holdHueToFloor } from "./colorRules";
 import { isDarkThemeName } from "./controlTiers";
 import { useIdentityHue } from "./readableColor";
 
@@ -47,47 +42,6 @@ const GlyphTintFallbackContext = createContext<GlyphTintFallback>(glyphTintFallb
 /** Renders a subtree under another fallback, so one Storybook build can compare them. */
 export const GlyphTintFallbackProvider = GlyphTintFallbackContext.Provider;
 
-function mix(hex: string, pole: number, share: number): string {
-  return `#${[1, 3, 5]
-    .map((offset) => {
-      const channel = parseInt(hex.slice(offset, offset + 2), 16);
-      return Math.round(channel + (pole - channel) * share)
-        .toString(16)
-        .padStart(2, "0");
-    })
-    .join("")}`;
-}
-
-/**
- * `hue` moved toward the scheme's ink pole (black on a light page, white on a
- * dark one) by the least amount that clears `floor` on every surface, so the
- * hue survives and only its lightness gives.
- */
-export function holdHueToFloor(
-  hue: string,
-  surfaces: readonly (string | undefined)[],
-  dark: boolean,
-  floor: number,
-): string {
-  const hueHex = normalizeToHex(hue);
-  const lums = surfaces
-    .map((surface) => (surface ? normalizeToHex(surface) : null))
-    .filter((hex): hex is string => hex != null)
-    .map(relativeLuminance);
-  if (!hueHex || lums.length === 0) return hue;
-  const clears = (hex: string) => {
-    const lum = relativeLuminance(hex);
-    return lums.every((surface) => contrastRatio(lum, surface) >= floor);
-  };
-  if (clears(hueHex)) return hue;
-  const pole = dark ? 255 : 0;
-  for (let step = 1; step <= 50; step++) {
-    const candidate = mix(hueHex, pole, step * 0.02);
-    if (clears(candidate)) return candidate;
-  }
-  return dark ? "#ffffff" : "#000000";
-}
-
 export interface ResolveGlyphTintInput {
   /** The theme's own identity hue on the page, when it has one. */
   hue: string | undefined;