@multiplatform.one/theme 7.46.0 → 7.47.1

package/src/theme/Text.tsx

@@ -0,0 +1,152 @@
+/**
+ * House body-text voices for the components catalog — Text, SizableText,
+ * Paragraph and Anchor (MPO-20, LC-70 CURATED-REEXPORT-IS-CATALOG).
+ *
+ * Before this module the barrel re-exported the RAW tamagui typography
+ * primitives under bare names, registered as "typography substrate" rows in
+ * ./knobImmuneExports.ts. That registry claim was a lie in three parts:
+ * FontKnobStyles rescues family/leading/tracking on WEB ONLY (CSS variables),
+ * fontWeight and textAccent reach the primitives on NO platform, and on
+ * native nothing reaches them at all. AN-8 ("never render app text through
+ * bare typography") was unfollowable — there was no house Text to follow it
+ * with.
+ *
+ * ARCHITECTURE (Button/Spinner shadow precedent): the thinnest legal shape
+ * is a wrapper that spreads the COMPLETE knob fragments onto the raw
+ * primitive and forwards consumer props LAST (STD-EJECT-LAST). The
+ * fragments are props, not CSS, so the same code path styles web AND native
+ * — the text node itself carries fontFamily/fontWeight/color on every
+ * platform (the MPO-44/48 lesson: the frame is not the text node).
+ *
+ * WEIGHT RIDES LAST (MPO-446). `size` and `fontFamily` are variants on the
+ * raw primitive, and tamagui's getFontSized writes the font ramp's weight
+ * (`var(--f-weight-N)`) at the position that key holds in the props object.
+ * A knob weight spread before a consumer `size` lost to it, and a consumer
+ * `fontWeight` sat at the knob's position too, since a spread key keeps its
+ * first slot. So the weight is split off the fragment and written as the
+ * final prop: the knob's, or the consumer's when one is passed.
+ *
+ * Knob channels wired here:
+ *  - bodyFont   → knobProps.body.fontFamily  (every platform, not just web)
+ *  - fontWeight → knobProps.body.fontWeight  (regular 400 / bold 700 —
+ *    500/600 are not label weights; see tamagui-rendered-reference.md §9)
+ *  - textAccent → knobProps.textAccentColor  (high $color / medium+low
+ *    $color11, the AA legibility floor) on Text/SizableText/Paragraph.
+ *  - link ink → Anchor paints the accent, as the most chromatic step of the
+ *    theme's accent ramp that still clears AA on both page surfaces
+ *    (`useAccentOnSurface`). House Text owns link chrome (Clay 2026-09-26,
+ *    MPO-21 G11-A); a consumer `color` still ejects.
+ *
+ * The default is the registered body font's `$true` stop: 15/23 on web,
+ * 17/22 on native, with weight from the fontWeight knob. A consumer
+ * `fontSize` brings its own step's leading (`$2` sets 13/20, not 13/23); a
+ * numeric size on Text keeps the platform's natural leading (Paragraph's own
+ * size variant still leads it). SizableText keeps the size-token scale.
+ * Consumer size, fontSize and lineHeight still win.
+ *
+ * ONE HOME (FZ-7739, LC-137): these live in @multiplatform.one/theme, not
+ * components, so forms, web3 and table-primitives, which sit below
+ * components, render body text through the same voice. On native a raw
+ * tamagui text node carries no family and inherits none, so it ignores
+ * bodyFont; `mpo-conventions/no-voiceless-text` keeps public/ on these.
+ *
+ * Raw primitives stay reachable as TamaguiText / TamaguiSizableText /
+ * TamaguiParagraph / TamaguiAnchor (components' ./tamagui.ts escape
+ * hatches, LC-45).
+ */
+import { useAccentOnSurface } from "./readableColor";
+import { useResolvedKnobs } from "./useResolvedKnobs";
+import {
+  Anchor as RawAnchor,
+  type AnchorProps,
+  Paragraph as RawParagraph,
+  type ParagraphProps as RawParagraphProps,
+  SizableText as RawSizableText,
+  type SizableTextProps,
+  Text as RawText,
+  type TextProps as RawTextProps,
+} from "tamagui";
+
+export type { AnchorProps, SizableTextProps };
+
+interface TypographyProps {
+  variant?: "body" | "mutedMono";
+  tabular?: boolean;
+}
+
+export type TextProps = RawTextProps & TypographyProps;
+export type ParagraphProps = RawParagraphProps & TypographyProps;
+
+type Weight = TextProps["fontWeight"];
+
+/** The leading that matches a consumer font size: its own step, else none. */
+function leadingFor(fontSize: TextProps["fontSize"]): TextProps["lineHeight"] {
+  if (fontSize === undefined) return "$true";
+  return typeof fontSize === "string" && fontSize.startsWith("$")
+    ? (fontSize as TextProps["lineHeight"])
+    : undefined;
+}
+
+/** The body fragment without its weight, and the weight a voice writes last. */
+function useBodyVoice(fontWeight: Weight, { variant, tabular }: TypographyProps = {}) {
+  const { knobProps } = useResolvedKnobs();
+  const { fontWeight: knobWeight, ...body } = knobProps.body;
+  return {
+    body,
+    variantProps: variant === "mutedMono" ? knobProps.typography.mutedMono : undefined,
+    digitProps: tabular ? knobProps.typography.tabular : undefined,
+    color: knobProps.textAccentColor,
+    weight: fontWeight ?? (knobWeight as Weight),
+  };
+}
+
+export function Text({ fontWeight, variant, tabular, style, ...props }: TextProps) {
+  const { body, color, weight, variantProps, digitProps } = useBodyVoice(fontWeight, {
+    variant,
+    tabular: tabular && props.fontVariant === undefined,
+  });
+  return (
+    <RawText
+      fontSize="$true"
+      lineHeight={leadingFor(props.fontSize)}
+      {...body}
+      color={color}
+      {...variantProps}
+      {...digitProps}
+      {...props}
+      style={digitProps?.style ? [digitProps.style, ...[style].flat()] : style}
+      fontWeight={weight}
+    />
+  );
+}
+
+export function SizableText({ fontWeight, ...props }: SizableTextProps) {
+  const { body, color, weight } = useBodyVoice(fontWeight);
+  return <RawSizableText {...body} color={color} {...props} fontWeight={weight} />;
+}
+
+export function Paragraph({ fontWeight, variant, tabular, style, ...props }: ParagraphProps) {
+  const { body, color, weight, variantProps, digitProps } = useBodyVoice(fontWeight, {
+    variant,
+    tabular: tabular && props.fontVariant === undefined,
+  });
+  return (
+    <RawParagraph
+      fontSize="$true"
+      lineHeight={leadingFor(props.fontSize)}
+      {...body}
+      color={color}
+      {...variantProps}
+      {...digitProps}
+      {...props}
+      style={digitProps?.style ? [digitProps.style, ...[style].flat()] : style}
+      fontWeight={weight}
+    />
+  );
+}
+
+export function Anchor({ fontWeight, ...props }: AnchorProps) {
+  const { body, weight } = useBodyVoice(fontWeight);
+  const linkInk = useAccentOnSurface();
+  return <RawAnchor {...body} color={linkInk} {...props} fontWeight={weight} />;
+}

package/src/theme/ThemeProvider.stories.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
-import { SizableText, YStack } from "tamagui";
+import { YStack } from "tamagui";
+import { SizableText } from "./Text";
 
 export default {
   title: "Theme/ThemeProvider",

package/src/theme/Tint.stories.tsx

@@ -1,8 +1,9 @@
 import { type ReactNode, useMemo } from "react";
-import { SizableText, XStack, YStack } from "tamagui";
+import { XStack, YStack } from "tamagui";
 import { PresetContext, usePresetContext } from "./PresetContext";
 import { defaultPreset } from "./presets";
 import { Tint, useTintDepth } from "./Tint";
+import { SizableText } from "./Text";
 
 export default {
   title: "Theme/Tint",

package/src/theme/accentFloor.spec.ts

@@ -32,8 +32,8 @@ describe("MPO-448 / MPO-449: the built accent pair holds Axiom 12", () => {
       expect(ratio(fill, theme.color1)).toBeGreaterThanOrEqual(3);
     });
 
-    it(`${scheme} $accentColor reads at 4.5:1 on $color1 through $color3`, () => {
-      for (const surface of [theme.color1, theme.color2, theme.color3]) {
+    it(`${scheme} $accentColor reads at 4.5:1 on $color1 through $color4`, () => {
+      for (const surface of [theme.color1, theme.color2, theme.color3, theme.color4]) {
         expect(ratio(theme.accentColor, surface)).toBeGreaterThanOrEqual(4.5);
       }
     });
@@ -63,7 +63,9 @@ describe("MPO-448 / MPO-449: the built accent pair holds Axiom 12", () => {
       );
       expect(theme.accentColor).toBe(
         nearest(stockThemes[scheme].accentColor, steps, (ink) =>
-          [theme.color1, theme.color2, theme.color3].every((surface) => ratio(ink, surface) >= 4.5),
+          [theme.color1, theme.color2, theme.color3, theme.color4].every(
+            (surface) => ratio(ink, surface) >= 4.5,
+          ),
         ),
       );
     }

package/src/theme/accentOnSurface.palette.spec.tsx

@@ -0,0 +1,75 @@
+/**
+ * FZ-7783. A config whose accent palette is itself a hue keeps that hue as
+ * accent ink with no tint in play. Its own file: Tamagui holds one global
+ * config, and the house config in accentOnSurface.spec.tsx would shadow it.
+ */
+import * as Colors from "@tamagui/colors";
+import { cleanup, render } from "@testing-library/react";
+import { TamaguiProvider, useTheme } from "tamagui";
+import { afterEach, beforeAll, expect, it } from "vitest";
+import { activateThemeConfig } from "./activateThemeConfig";
+import {
+  aaTextContrastRatio,
+  contrastRatio,
+  normalizeToHex,
+  relativeLuminance,
+} from "./colorRules";
+import { createDefaultThemeConfig } from "./createDefaultThemeConfig";
+import { useAccentOnSurface } from "./readableColor";
+
+const accented = createDefaultThemeConfig({
+  accent: {
+    lightPalette: Object.values(Colors.purple),
+    darkPalette: Object.values(Colors.purpleDark),
+  },
+});
+
+function chroma(color: string): number {
+  const hex = normalizeToHex(color);
+  if (!hex) return 0;
+  const rgb = [1, 3, 5].map((offset) => parseInt(hex.slice(offset, offset + 2), 16) / 255);
+  return Math.max(...rgb) - Math.min(...rgb);
+}
+
+function ratio(a: string, b: string): number {
+  return contrastRatio(
+    relativeLuminance(normalizeToHex(a)!),
+    relativeLuminance(normalizeToHex(b)!),
+  );
+}
+
+interface Seen {
+  accent?: string;
+  surfaces?: string[];
+  accentSteps?: string[];
+}
+
+function Probe({ seen }: { seen: Seen }) {
+  const theme = useTheme() as unknown as Record<string, { val?: string } | undefined>;
+  seen.accent = useAccentOnSurface();
+  seen.surfaces = [theme.color1?.val ?? "", theme.color2?.val ?? ""];
+  seen.accentSteps = Array.from({ length: 12 }, (_, i) => theme[`accent${i + 1}`]?.val ?? "");
+  return null;
+}
+
+beforeAll(() => activateThemeConfig(accented));
+afterEach(cleanup);
+
+for (const scheme of ["light", "dark"] as const) {
+  it(`${scheme} reads the accent ramp's hue`, () => {
+    const seen: Seen = {};
+    render(
+      <TamaguiProvider config={accented.tamagui} defaultTheme={scheme} disableInjectCSS>
+        <Probe seen={seen} />
+      </TamaguiProvider>,
+    );
+    expect(chroma(seen.accentSteps![8]), "accent9 is the purple ramp").toBeGreaterThan(0.1);
+    expect(chroma(seen.accent!), `${scheme} accent ink ${seen.accent} is grey`).toBeGreaterThan(
+      0.1,
+    );
+    expect(seen.accentSteps).toContain(seen.accent);
+    for (const surface of seen.surfaces!) {
+      expect(ratio(seen.accent!, surface)).toBeGreaterThanOrEqual(aaTextContrastRatio);
+    }
+  });
+}

package/src/theme/accentOnSurface.spec.tsx

@@ -0,0 +1,149 @@
+/**
+ * FZ-7783, LC-123 COLOUR-OVER-PRESET. Accent ink is the colour theme's hue.
+ * A tint re-ramps the neutral family and leaves the accent ramp neutral, so
+ * an ink read from the ramp alone came back grey under orange or purple and
+ * every consumer (links, Toast, DatePicker, table filters, Button) painted
+ * it. Every preset × colour theme × scheme here fails on a grey result.
+ */
+import type { ThemeName } from "@tamagui/web";
+import { cleanup, render } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { TamaguiProvider, Theme, useTheme, useThemeName } from "tamagui";
+import { afterAll, afterEach, beforeAll, describe, expect, it } from "vitest";
+import { Preset } from "./Preset";
+import { activateThemeConfig } from "./activateThemeConfig";
+import {
+  aaTextContrastRatio,
+  contrastRatio,
+  normalizeToHex,
+  relativeLuminance,
+} from "./colorRules";
+import { createDefaultThemeConfig } from "./createDefaultThemeConfig";
+import { boldPreset, defaultPreset, densePreset, heroPreset, roomyPreset } from "./presets";
+import { useAccentOnSurface, useIdentityInkOnSurface } from "./readableColor";
+import { clearPresets, registerPreset } from "./shared";
+
+const presets = {
+  default: defaultPreset,
+  bold: boldPreset,
+  hero: heroPreset,
+  dense: densePreset,
+  roomy: roomyPreset,
+};
+const colourThemes = ["blue", "red", "green", "yellow", "orange", "pink", "purple"] as const;
+const schemes = ["light", "dark"] as const;
+const house = createDefaultThemeConfig({ presets });
+const chromaFloor = 0.1;
+
+function chroma(color: string): number {
+  const hex = normalizeToHex(color);
+  if (!hex) return 0;
+  const rgb = [1, 3, 5].map((offset) => parseInt(hex.slice(offset, offset + 2), 16) / 255);
+  return Math.max(...rgb) - Math.min(...rgb);
+}
+
+function ratio(a: string, b: string): number {
+  return contrastRatio(
+    relativeLuminance(normalizeToHex(a)!),
+    relativeLuminance(normalizeToHex(b)!),
+  );
+}
+
+interface Seen {
+  name?: string;
+  accent?: string;
+  identity?: string;
+  surfaces?: string[];
+  accentSteps?: string[];
+}
+
+function Probe({ seen }: { seen: Seen }) {
+  const theme = useTheme() as unknown as Record<string, { val?: string } | undefined>;
+  seen.name = useThemeName();
+  seen.accent = useAccentOnSurface();
+  seen.identity = useIdentityInkOnSurface();
+  seen.surfaces = [theme.color1?.val ?? "", theme.color2?.val ?? ""];
+  seen.accentSteps = Array.from({ length: 12 }, (_, i) => theme[`accent${i + 1}`]?.val ?? "");
+  return null;
+}
+
+function probe(scheme: string, tree: (node: ReactElement) => ReactElement): Seen {
+  const seen: Seen = {};
+  render(
+    <TamaguiProvider config={house.tamagui} defaultTheme={scheme} disableInjectCSS>
+      {tree(<Probe seen={seen} />)}
+    </TamaguiProvider>,
+  );
+  return seen;
+}
+
+function expectColouredInk(seen: Seen) {
+  expect(seen.accent, `${seen.name} accent ink`).toBeDefined();
+  expect(chroma(seen.accent!), `${seen.name} accent ink ${seen.accent} is grey`).toBeGreaterThan(
+    chromaFloor,
+  );
+  for (const surface of seen.surfaces!) {
+    expect(ratio(seen.accent!, surface)).toBeGreaterThanOrEqual(aaTextContrastRatio);
+  }
+  expect(seen.accent).toBe(seen.identity);
+}
+
+beforeAll(() => {
+  clearPresets();
+  for (const [name, preset] of Object.entries(presets)) registerPreset(name, preset);
+  activateThemeConfig(house);
+});
+afterEach(cleanup);
+afterAll(clearPresets);
+
+describe("accent ink follows the colour theme (FZ-7783, LC-123)", () => {
+  for (const scheme of schemes) {
+    for (const presetName of Object.keys(presets)) {
+      for (const colour of colourThemes) {
+        it(`${scheme} ${presetName} × ${colour} paints a ${colour} accent ink`, () => {
+          const seen = probe(scheme, (node) => (
+            <Preset preset={presetName} theme={colour as ThemeName}>
+              {node}
+            </Preset>
+          ));
+          expect(seen.name).toBe(`${scheme}_${colour}`);
+          expectColouredInk(seen);
+        });
+      }
+
+      const own = presets[presetName as keyof typeof presets].theme;
+      if (own) {
+        it(`${scheme} ${presetName} with no pick paints its own ${own} accent ink`, () => {
+          const seen = probe(scheme, (node) => (
+            <Preset preset={presetName} theme={""}>
+              {node}
+            </Preset>
+          ));
+          expect(seen.name).toBe(`${scheme}_${own}`);
+          expectColouredInk(seen);
+        });
+      }
+    }
+
+    it(`${scheme} with no colour keeps the neutral accent ramp's least-contrast AA step`, () => {
+      const seen = probe(scheme, (node) => <Preset preset="default">{node}</Preset>);
+      expect(seen.name).toBe(scheme);
+      const passing = seen.accentSteps!.filter((step) =>
+        seen.surfaces!.every((surface) => ratio(step, surface) >= aaTextContrastRatio),
+      );
+      const quietest = passing.reduce((best, step) =>
+        Math.min(...seen.surfaces!.map((s) => ratio(step, s))) <
+        Math.min(...seen.surfaces!.map((s) => ratio(best, s)))
+          ? step
+          : best,
+      );
+      expect(seen.accent).toBe(quietest);
+    });
+
+    it(`${scheme} inside a nested Theme hue paints that hue`, () => {
+      const seen = probe(scheme, (node) => <Theme name="purple">{node}</Theme>);
+      expect(seen.name).toBe(`${scheme}_purple`);
+      expectColouredInk(seen);
+    });
+  }
+});

package/src/theme/colorThemeAccent.spec.ts

@@ -24,10 +24,13 @@ describe("FZ-7715: a colour theme owns its accent", () => {
         const scope = themes[`${scheme}_${hue}`];
         const ramp = Array.from({ length: 12 }, (_, i) => themes[scheme][`${hue}${i + 1}`]);
         expect(ramp).toContain(scope.accentBackground);
-        expect(ramp).toContain(scope.accentColor);
+        const grounds = [scope.color1, scope.color2, scope.color3, scope.color4];
+        if (grounds.every((ground) => ratio(ramp[10], ground) >= 4.5))
+          expect(scope.accentColor).toBe(ramp[10]);
+        else expect(ramp.slice(0, 11)).not.toContain(scope.accentColor);
         expect(scope.accentBackground).not.toBe(themes[scheme].accentBackground);
         expect(ratio(scope.accentBackground, scope.color1)).toBeGreaterThanOrEqual(3);
-        for (const surface of [scope.color1, scope.color2, scope.color3]) {
+        for (const surface of grounds) {
           expect(ratio(scope.accentColor, surface)).toBeGreaterThanOrEqual(4.5);
         }
         const selected = config.themes[`${scheme}_${hue}_accent`] as unknown as Record<

package/src/theme/cookies.spec.ts

@@ -274,13 +274,13 @@ describe("computeOverrides", () => {
     const current: Knobs = {
       ...defaultKnobs,
       fieldLabelPlacement: "side",
-      tableZebra: "on",
+      tableZebra: "off",
       formAutofocus: "on",
     };
     const overrides = computeOverrides(defaultKnobs, current);
     expect(overrides).toEqual({
       fieldLabelPlacement: "side",
-      tableZebra: "on",
+      tableZebra: "off",
       formAutofocus: "on",
     });
 

package/src/theme/createDefaultThemeConfig.spec.ts

@@ -413,10 +413,10 @@ describe("the v5 theme matrix", () => {
 
   // FZ-7715 added one accent solid per hue and scheme (16 themes) so
   // `theme="accent"` follows a picked colour; the budget moved 260 -> 280 KB.
-  it("ships 478 themes and the heading-scope category fonts in under 280 KB of CSS (the v4 matrix and stock spread shipped 913 KB)", async () => {
+  it("ships 478 themes and the heading-scope category fonts in under 282 KB of CSS (the v4 matrix and stock spread shipped 913 KB)", async () => {
     const { createTamagui: build } = await vi.importActual<typeof import("tamagui")>("tamagui");
     const css = build(config.tamagui).getCSS();
     expect(Object.keys(themes)).toHaveLength(478);
-    expect(Buffer.byteLength(css, "utf8")).toBeLessThan(280_000);
+    expect(Buffer.byteLength(css, "utf8")).toBeLessThan(282_000);
   });
 });

package/src/theme/createThemes.ts

@@ -10,6 +10,7 @@ import {
   pickReadableForeground,
   relativeLuminance,
 } from "./colorRules";
+import { themeRampHues } from "./ramps";
 
 /**
  * MPO-40. Radix step 11 targets its own surface, but intent ink also paints on
@@ -270,8 +271,9 @@ function nearestHoldingStep(
 /**
  * MPO-448 / MPO-449. Keep the accent fill readable with its better base anchor
  * (4.5:1), and visible against the page (3:1). Accent ink needs 4.5:1 on
- * color1..color3. Walk to the nearest holding accent step; themes with their
- * own pair keep it.
+ * color1..color4: color4 is the selection surface a selected chip labels in
+ * accent ink (LC-131). Walk to the nearest holding accent step; themes with
+ * their own pair keep it.
  */
 function holdAccentFloor(
   themes: Record<string, Record<string, string>>,
@@ -282,7 +284,7 @@ function holdAccentFloor(
     if (!base?.accentBackground || !base.accentColor) continue;
     const paper = luminanceOf(base.color1);
     const ink = luminanceOf(base.color12);
-    const surfaces = [base.color1, base.color2, base.color3].map(luminanceOf);
+    const surfaces = [base.color1, base.color2, base.color3, base.color4].map(luminanceOf);
     if (paper === null || ink === null || surfaces.some((lum) => lum === null)) continue;
     const steps = Array.from({ length: 12 }, (_, index) => base[`accent${index + 1}`]);
     const fill = nearestHoldingStep(
@@ -311,6 +313,56 @@ function holdAccentFloor(
   return out;
 }
 
+/**
+ * LC-131 SELECTED-STATE. A selected choice part paints a soft accent tint with
+ * accent ink. The tint is the accent step nearest the scheme's neutral
+ * selection surface ($color4), kept 1.1:1 off both the page and $color4 so it
+ * reads as a tint and never as the neutral tier. The ink is the accent step
+ * nearest $accentColor that holds 4.5:1 on the tint. Only the scheme roots
+ * carry the keys; every child theme inherits them.
+ */
+const selectedTintContrastRatio = 1.1;
+
+function holdSelectedState(
+  themes: Record<string, Record<string, string>>,
+): Record<string, Record<string, string>> {
+  const out: Record<string, Record<string, string>> = { ...themes };
+  for (const scheme of ["light", "dark"] as const) {
+    const base = themes[scheme];
+    if (!base?.accentColor) continue;
+    const steps = Array.from({ length: 12 }, (_, index) => base[`accent${index + 1}`]);
+    const paint = selectedPaint(base, steps, base.accentColor);
+    if (paint) out[scheme] = { ...base, ...paint };
+  }
+  return out;
+}
+
+/** The selected tint and ink for one scope, from the accent ramp `steps`. */
+function selectedPaint(
+  scope: Record<string, string>,
+  steps: (string | undefined)[],
+  accentColor: string,
+): { selectedBackground: string; selectedColor: string } | undefined {
+  const page = luminanceOf(scope.color1);
+  const neutral = luminanceOf(scope.color4);
+  if (page === null || neutral === null) return undefined;
+  const tint = nearestHoldingStep(
+    scope.color4,
+    steps,
+    (lum) =>
+      contrastRatio(lum, page) >= selectedTintContrastRatio &&
+      contrastRatio(lum, neutral) >= selectedTintContrastRatio,
+  );
+  const tintLum = luminanceOf(tint);
+  if (tint === scope.color4 || tintLum === null) return undefined;
+  const ink = nearestHoldingStep(
+    accentColor,
+    steps,
+    (lum) => contrastRatio(lum, tintLum) >= aaTextContrastRatio,
+  );
+  return { selectedBackground: tint, selectedColor: ink };
+}
+
 /**
  * FZ-7158 WP-b2 / DF-06. The off Switch track is the first grey step that
  * holds 3:1 under the white thumb and 1.5:1 from the accent on track, and
@@ -419,7 +471,7 @@ function holdSyntaxFloor(
   return out;
 }
 
-const namedInkHues = Object.keys(defaultChildrenThemes).filter((hue) => hue !== "neutral");
+const namedInkHues = themeRampHues;
 
 /**
  * Radix aims a hue's step 11 at 4.5:1 on its own steps 1-2, but status text,
@@ -455,13 +507,33 @@ function holdNamedInkFloor(
   return out;
 }
 
+/**
+ * Step 11 walked toward step 12 in twentieths until it holds, so accent ink
+ * that misses a floor by a little keeps its hue instead of jumping to step 12.
+ */
+function walkToHoldingInk(
+  step11: string,
+  step12: string,
+  holds: (lum: number) => boolean,
+): string | null {
+  const from = normalizeToHex(step11);
+  const to = normalizeToHex(step12);
+  if (!from || !to) return null;
+  if (holds(relativeLuminance(from))) return step11;
+  for (let step = 1; step <= 20; step++) {
+    const candidate = mixHex(from, to, step / 20);
+    if (holds(relativeLuminance(candidate))) return candidate;
+  }
+  return null;
+}
+
 /**
  * FZ-7715. A colour theme is the accent. The house accent is the neutral
  * inverse, and the hue sub-themes (light_green, dark_pink, ...) inherited it,
  * so `theme="accent"` and `$accentBackground` stayed black under any colour a
  * user or a preset picked. Each hue scope gets an accent fill from its own
  * ramp, held to 3:1 on its page with a 4.5:1 label, accent ink held to 4.5:1
- * on color1..color3, and a `<scheme>_<hue>_accent` solid that Tamagui resolves
+ * on color1..color4, and a `<scheme>_<hue>_accent` solid that Tamagui resolves
  * for `theme="accent"` (and every component under it) inside the hue.
  */
 function holdColorThemeAccent(
@@ -478,7 +550,7 @@ function holdColorThemeAccent(
       if (!scope || ramp.some((step) => !step)) continue;
       const paper = luminanceOf(scope.color1);
       const ink = luminanceOf(scope.color12);
-      const surfaces = [scope.color1, scope.color2, scope.color3].map(luminanceOf);
+      const surfaces = [scope.color1, scope.color2, scope.color3, scope.color4].map(luminanceOf);
       if (paper === null || ink === null || surfaces.some((lum) => lum === null)) continue;
       const fill = nearestHoldingStep(
         ramp[8],
@@ -487,13 +559,19 @@ function holdColorThemeAccent(
           Math.max(contrastRatio(lum, paper), contrastRatio(lum, ink)) >= aaTextContrastRatio &&
           contrastRatio(lum, paper) >= minContrastRatio,
       );
-      const accentInk = nearestHoldingStep(ramp[10], ramp, (lum) =>
-        surfaces.every((surface) => contrastRatio(lum, surface as number) >= aaTextContrastRatio),
-      );
+      const holdsInk = (lum: number) =>
+        surfaces.every((surface) => contrastRatio(lum, surface as number) >= aaTextContrastRatio);
+      const accentInk =
+        walkToHoldingInk(ramp[10], ramp[11], holdsInk) ??
+        nearestHoldingStep(ramp[10], ramp, holdsInk);
       const fillStep = ramp.indexOf(fill);
       const fillHover = ramp[Math.min(fillStep + 1, ramp.length - 1)];
       const onFill = holdInkFloor(fill, pickReadableForeground(fill, scope.color1, scope.color12));
-      const accent: Record<string, string> = { accentBackground: fill, accentColor: accentInk };
+      const accent: Record<string, string> = {
+        accentBackground: fill,
+        accentColor: accentInk,
+        ...selectedPaint(scope, ramp, accentInk),
+      };
       // A hue fill can sit on the root's off grey (light pink on gray10): walk
       // outward from the root's step to the nearest one that holds again.
       const rootOff = Number(
@@ -658,7 +736,9 @@ export function createThemesBuilder(
     holdSwitchTrack(
       holdSyntaxFloor(
         holdNamedInkFloor(
-          holdAccentFloor(neutralizeSemanticEntryText(neutralizeTintText(initialTheme))),
+          holdSelectedState(
+            holdAccentFloor(neutralizeSemanticEntryText(neutralizeTintText(initialTheme))),
+          ),
         ),
       ),
     ),

package/src/theme/defaults/builderOptions.ts

@@ -62,8 +62,26 @@ function pickBoundaryColor(theme: Record<string, string>): string {
   return best;
 }
 
+/**
+ * LC-148 HAIRLINE-TOKEN: `$borderColor` one ramp step toward the page. Where
+ * the `small` border stop can't draw finer than 1px (web), the resolver paints
+ * it in this colour so `small` still reads lighter than `medium`. Ramp themes
+ * carry it and component sub-themes inherit theirs: a copy on every theme
+ * overruns the CSS budget in createDefaultThemeConfig.spec.ts.
+ */
+function pickHairlineBorderColor(
+  border: string | undefined,
+  step: (n: number) => string | undefined,
+): string | undefined {
+  if (!border) return undefined;
+  for (let n = 2; n <= 12; n++) if (step(n) === border) return step(n - 1);
+  return undefined;
+}
+
 function getBaseTheme(theme: Record<string, string>) {
+  const borderColorHairline = pickHairlineBorderColor(theme.borderColor, (n) => theme[`color${n}`]);
   return {
+    ...(borderColorHairline ? { borderColorHairline } : null),
     outlineColor: pickFocusRingColor(theme),
     boundaryColor: pickBoundaryColor(theme),
     switchThumb: "#ffffff",