@multiplatform.one/theme 7.83.2 → 7.84.1

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/devtools/ColorLineVisualizer.spec.tsx

@@ -0,0 +1,104 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { semanticGroups } from "../colorRules";
+import { defaultKnobs } from "../knobs";
+import { ColorLineVisualizer } from "./ColorLineVisualizer";
+import { cellSize } from "./vizConstants";
+
+const ramp = (hue: number) =>
+  Array.from({ length: 12 }, (_, i) => `hsl(${hue}, 60%, ${90 - i * 6}%)`);
+
+function normalized(color: string) {
+  const probe = document.createElement("div");
+  probe.style.background = color;
+  return probe.style.background;
+}
+
+function stepCells() {
+  return Array.from({ length: 12 }, (_, i) => screen.getAllByTitle(`$color${i + 1}`));
+}
+
+afterEach(() => {
+  cleanup();
+  document.documentElement.removeAttribute("style");
+});
+
+describe("ColorLineVisualizer", () => {
+  it("paints the twelve steps of the given ramp in order, numbered 1 to 12", () => {
+    const colors = ramp(210);
+    render(<ColorLineVisualizer knobs={defaultKnobs} isDark={false} themeColors={colors} />);
+    expect(screen.getByText("Theme")).toBeTruthy();
+    stepCells().forEach(([cell], i) => {
+      expect(cell.textContent).toBe(String(i + 1));
+      expect(cell.style.background).toBe(normalized(colors[i]));
+      expect(cell.style.width).toBe(`${cellSize}px`);
+      expect(cell.style.height).toBe(`${cellSize}px`);
+    });
+  });
+
+  it("brackets every semantic group over the steps it spans", () => {
+    render(<ColorLineVisualizer knobs={defaultKnobs} isDark={false} themeColors={ramp(30)} />);
+    for (const group of semanticGroups) {
+      const bracket = screen.getByText(group.label).parentElement as HTMLElement;
+      expect(bracket.style.left).toBe(`${(group.from - 1) * cellSize}px`);
+      expect(bracket.style.width).toBe(`${(group.to - group.from + 1) * cellSize}px`);
+    }
+  });
+
+  it("adds a half-height opposite row and an accent section only for full ramps", () => {
+    const { rerender } = render(
+      <ColorLineVisualizer
+        knobs={defaultKnobs}
+        isDark={false}
+        themeColors={ramp(210)}
+        oppositeThemeColors={ramp(200).slice(0, 11)}
+        accentColors={ramp(120).slice(0, 4)}
+      />,
+    );
+    expect(stepCells().every((cells) => cells.length === 1)).toBe(true);
+    expect(screen.queryByText("accent")).toBeNull();
+
+    const opposite = ramp(200);
+    const accent = ramp(120);
+    rerender(
+      <ColorLineVisualizer
+        knobs={defaultKnobs}
+        isDark={false}
+        themeColors={ramp(210)}
+        oppositeThemeColors={opposite}
+        accentColors={accent}
+        oppositeAccentColors={ramp(100)}
+      />,
+    );
+    expect(screen.getByText("accent")).toBeTruthy();
+    const cells = stepCells();
+    expect(cells.every((rows) => rows.length === 4)).toBe(true);
+    const [, oppositeRow, accentRow, oppositeAccentRow] = cells[0];
+    expect(oppositeRow.style.height).toBe(`${Math.round(cellSize / 2)}px`);
+    expect(oppositeRow.style.background).toBe(normalized(opposite[0]));
+    expect(accentRow.style.height).toBe(`${cellSize}px`);
+    expect(accentRow.style.background).toBe(normalized(accent[0]));
+    expect(oppositeAccentRow.style.height).toBe(`${Math.round(cellSize / 2)}px`);
+  });
+
+  it("reads the page's --color1..12 when no ramp is passed", () => {
+    const colors = ramp(330);
+    colors.forEach((color, i) =>
+      document.documentElement.style.setProperty(`--color${i + 1}`, color),
+    );
+    render(<ColorLineVisualizer knobs={defaultKnobs} isDark={false} />);
+    stepCells().forEach(([cell], i) => {
+      expect(cell.style.background).toBe(normalized(colors[i]));
+    });
+  });
+
+  it("draws its card in the scheme it is told", () => {
+    const { container, rerender } = render(
+      <ColorLineVisualizer knobs={defaultKnobs} isDark={false} themeColors={ramp(0)} />,
+    );
+    const light = (container.firstElementChild as HTMLElement).style.background;
+    rerender(<ColorLineVisualizer knobs={defaultKnobs} isDark themeColors={ramp(0)} />);
+    const dark = (container.firstElementChild as HTMLElement).style.background;
+    expect(light).not.toBe(dark);
+  });
+});

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;

package/src/theme/hairline.spec.ts

@@ -1,5 +1,11 @@
 import { beforeEach, describe, expect, it } from "vitest";
-import { ensureHairlineFallback, hairline, hairlineFallbackCss, hairlineWidth } from "./hairline";
+import {
+  ensureHairlineFallback,
+  hairline,
+  hairlineFallbackCss,
+  hairlineThickness,
+  hairlineWidth,
+} from "./hairline";
 
 describe("hairline (Axiom 15 OPTICS)", () => {
   it("resolves half a CSS pixel on web", () => {
@@ -43,8 +49,46 @@ describe("hairline (Axiom 15 OPTICS)", () => {
     expect(hairlineFallbackCss).toContain("border-inline-end-width: 1px !important");
     // filled-line fallbacks must pin max-height/max-width too (the `line`
     // treatment sets both, so height alone could not win)
-    expect(hairlineFallbackCss).toContain("height: 1px !important; max-height: 1px !important");
-    expect(hairlineFallbackCss).toContain("width: 1px !important; max-width: 1px !important");
+    // and never under one device pixel when zoomed out below 1dppx
+    expect(hairlineFallbackCss).toContain(
+      "height: max(1px, var(--mp-hairline, 1px)) !important; max-height: max(1px, var(--mp-hairline, 1px)) !important",
+    );
+    expect(hairlineFallbackCss).toContain(
+      "width: max(1px, var(--mp-hairline, 1px)) !important; max-width: max(1px, var(--mp-hairline, 1px)) !important",
+    );
+  });
+
+  it("keeps a zoomed-out ratio under 1 at one device pixel, past the 1px floor", () => {
+    for (const ratio of [0.5, 0.67, 0.8, 0.9]) {
+      const thickness = Math.max(1, hairlineThickness(ratio));
+      expect(thickness * ratio, `ratio ${ratio}`).toBeGreaterThanOrEqual(1);
+    }
+  });
+
+  // FZ-8395: a filled box under one device pixel snaps to 0 on alternate rows.
+  it("draws filled lines at least one device pixel at every ratio, never 0", () => {
+    for (const ratio of [1, 1.25, 1.5, 1.75, 1.8, 2, 2.25, 2.5, 2.625, 3, 3.5, 4]) {
+      const devicePx = hairlineThickness(ratio) * ratio;
+      expect(devicePx, `ratio ${ratio}`).toBeGreaterThanOrEqual(1);
+      expect(devicePx, `ratio ${ratio}`).toBeLessThan(1.1);
+      // On Blink's 1/64 px layout grid, so layout cannot round it under.
+      expect(Number.isInteger(hairlineThickness(ratio) * 64), `ratio ${ratio}`).toBe(true);
+    }
+    expect(hairlineThickness(2)).toBe(0.5);
+    expect(hairlineThickness(Number.NaN)).toBe(1);
+  });
+
+  it("sizes the filled treatments from --mp-hairline, above the inline 0.5px", () => {
+    expect(hairlineFallbackCss).toContain(
+      ".mp-hairline-h { height: var(--mp-hairline, 0.5px) !important",
+    );
+    expect(hairlineFallbackCss).toContain(
+      ".mp-hairline-w { width: var(--mp-hairline, 0.5px) !important",
+    );
+    // The low-DPI 1px block comes after, so it still wins there.
+    expect(hairlineFallbackCss.indexOf("@media")).toBeGreaterThan(
+      hairlineFallbackCss.indexOf("var(--mp-hairline"),
+    );
   });
 
   describe("fallback stylesheet mount", () => {
@@ -59,5 +103,18 @@ describe("hairline (Axiom 15 OPTICS)", () => {
       expect(tags).toHaveLength(1);
       expect(tags[0]?.textContent).toBe(hairlineFallbackCss);
     });
+
+    it("points --mp-hairline at one device pixel of the live ratio", () => {
+      const original = window.devicePixelRatio;
+      Object.defineProperty(window, "devicePixelRatio", { configurable: true, value: 1.75 });
+      try {
+        ensureHairlineFallback();
+        expect(document.documentElement.style.getPropertyValue("--mp-hairline")).toBe(
+          `${hairlineThickness(1.75)}px`,
+        );
+      } finally {
+        Object.defineProperty(window, "devicePixelRatio", { configurable: true, value: original });
+      }
+    });
   });
 });

package/src/theme/hairline.ts

@@ -81,21 +81,50 @@ export const hairline = {
 const STYLE_TAG_ID = "mp-hairline-styles";
 
 /**
- * 1px fallback for screens where 0.5px cannot map to a whole device pixel.
+ * FZ-8395: the filled lines' thickness, one device pixel rounded UP to
+ * Blink's 1/64 px layout unit. A filled box under one device pixel tall snaps
+ * to 0 or 1 device pixel depending on where its top lands, so 0.5 CSS px
+ * vanished on alternate rows at ratios between 1.5 and 2 (Windows 150-175%
+ * scaling, browser zoom). Exactly one device pixel or more never rounds to 0.
+ */
+export function hairlineThickness(devicePixelRatio: number): number {
+  const ratio = Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1;
+  return Math.ceil(64 / ratio) / 64;
+}
+
+/**
+ * The filled `line`, `vline` and `height` treatments read their thickness
+ * from `--mp-hairline` (set from the live ratio below; 0.5px until it is), and
+ * low-DPI screens get a 1px floor for every treatment; a zoomed-out ratio
+ * under 1 keeps the filled ones at one device pixel, past that floor.
  * (`-webkit-max-device-pixel-ratio` covers Safari versions without
  * `resolution` media-query support.) Exported for unit tests.
  */
-export const hairlineFallbackCss = `@media (max-resolution: 1.49dppx), (-webkit-max-device-pixel-ratio: 1.49) {
+export const hairlineFallbackCss = `.mp-hairline-h { height: var(--mp-hairline, 0.5px) !important; max-height: var(--mp-hairline, 0.5px) !important; flex-basis: var(--mp-hairline, 0.5px) !important; }
+.mp-hairline-w { width: var(--mp-hairline, 0.5px) !important; max-width: var(--mp-hairline, 0.5px) !important; flex-basis: var(--mp-hairline, 0.5px) !important; }
+@media (max-resolution: 1.49dppx), (-webkit-max-device-pixel-ratio: 1.49) {
   .mp-hairline-b { border-bottom-width: 1px !important; }
   .mp-hairline-t { border-top-width: 1px !important; }
   .mp-hairline-r { border-right-width: 1px !important; }
   .mp-hairline-l { border-left-width: 1px !important; }
-  .mp-hairline-h { height: 1px !important; max-height: 1px !important; flex-basis: 1px !important; }
-  .mp-hairline-w { width: 1px !important; max-width: 1px !important; flex-basis: 1px !important; }
+  .mp-hairline-h { height: max(1px, var(--mp-hairline, 1px)) !important; max-height: max(1px, var(--mp-hairline, 1px)) !important; flex-basis: max(1px, var(--mp-hairline, 1px)) !important; }
+  .mp-hairline-w { width: max(1px, var(--mp-hairline, 1px)) !important; max-width: max(1px, var(--mp-hairline, 1px)) !important; flex-basis: max(1px, var(--mp-hairline, 1px)) !important; }
   .mp-hairline-ie { border-inline-end-width: 1px !important; }
 }`;
 
-/** Idempotently mount the low-DPI fallback stylesheet (no-op off-DOM). */
+let watchedRatio: MediaQueryList | undefined;
+
+/** Point `--mp-hairline` at one device pixel, and again whenever the ratio changes. */
+function trackDevicePixel(): void {
+  if (typeof window === "undefined") return;
+  const ratio = window.devicePixelRatio || 1;
+  document.documentElement.style.setProperty("--mp-hairline", `${hairlineThickness(ratio)}px`);
+  watchedRatio?.removeEventListener?.("change", trackDevicePixel);
+  watchedRatio = window.matchMedia?.(`(resolution: ${ratio}dppx)`);
+  watchedRatio?.addEventListener?.("change", trackDevicePixel);
+}
+
+/** Idempotently mount the hairline stylesheet (no-op off-DOM). */
 export function ensureHairlineFallback(): void {
   if (typeof document === "undefined") return;
   if (document.getElementById(STYLE_TAG_ID)) return;
@@ -103,6 +132,7 @@ export function ensureHairlineFallback(): void {
   tag.id = STYLE_TAG_ID;
   tag.textContent = hairlineFallbackCss;
   document.head.appendChild(tag);
+  trackDevicePixel();
 }
 
 // The fallback is static CSS (no knob/theme dependency), so mount it as soon

package/src/theme/readableColor.ts

@@ -3,11 +3,13 @@ import { useTheme as useTamaguiTheme, useThemeName } from "tamagui";
 import {
   aaTextContrastRatio,
   contrastRatio,
+  holdHueToFloor,
   holdInkFloor,
   normalizeToHex,
   pickReadableForeground,
   relativeLuminance,
 } from "./colorRules";
+import { isDarkThemeName } from "./controlTiers";
 import { tintHueNames } from "./createThemes";
 
 /**
@@ -314,3 +316,50 @@ export function useAccentTintedSurface(): string | undefined {
   const paper = resolveTokenValue(theme, "color1");
   return useMemo(() => resolveAccentTintedSurface({ solid, paper }), [solid, paper]);
 }
+
+/** LC-172's floor for a hue: the spread between the strongest and weakest sRGB channel. */
+const ACTIVE_TAB_CHROMA_FLOOR = 0.1;
+
+export interface ResolveActiveTabInkInput {
+  /** The theme's identity hue on the page, when it has one. */
+  hue: string | undefined;
+  /** The theme's accent solid (`$accentBackground`). */
+  solid: string | undefined;
+  dark: boolean;
+  surfaces: readonly (string | undefined)[];
+  ink: string;
+}
+
+/**
+ * LC-150: the active tab's ink, one pick for the MPO TabBar and the system
+ * tab bar. A hued theme keeps its identity hue. A theme with no identity hue
+ * but a hued accent solid takes that solid held to AA text contrast on the
+ * page. The house hue-less theme's solid is the neutral inverse, so the tab
+ * takes the primary ink, bold mono, never the grey ramp step.
+ */
+export function resolveActiveTabInk({
+  hue,
+  solid,
+  dark,
+  surfaces,
+  ink,
+}: ResolveActiveTabInkInput): string {
+  if (hue) return hue;
+  const solidHex = solid ? normalizeToHex(solid) : null;
+  if (solidHex && chromaOf(solidHex) >= ACTIVE_TAB_CHROMA_FLOOR) {
+    return holdHueToFloor(solidHex, surfaces, dark, aaTextContrastRatio);
+  }
+  return ink;
+}
+
+/** LC-150: the live theme's active-tab ink (see {@link resolveActiveTabInk}). */
+export function useActiveTabInk(): string {
+  const dark = isDarkThemeName(useThemeName() as string | undefined);
+  const { hue, c1, c2, ink } = useIdentityHue();
+  const theme = useTamaguiTheme() as unknown as Record<string, { val?: unknown } | undefined>;
+  const solid = resolveTokenValue(theme, "accentBackground");
+  return useMemo(
+    () => resolveActiveTabInk({ hue, solid, dark, surfaces: [c1, c2], ink }),
+    [hue, solid, dark, c1, c2, ink],
+  );
+}