@multiplatform.one/components 7.29.1 → 7.30.0

package/src/Dialog.spec.tsx

@@ -0,0 +1,165 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { X } from "@tamagui/lucide-icons-2";
+import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { AlertDialog as TamaguiAlertDialog, Dialog as TamaguiDialog } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { AlertDialog, Button, Dialog } from "./index";
+
+const catalog = vi.hoisted(() => ({ current: {} as Record<string, string> }));
+
+vi.mock("./shared/i18n", () => ({
+  useTranslation: () => ({ t: (key: string) => catalog.current[key] ?? key }),
+}));
+
+afterEach(() => {
+  cleanup();
+  catalog.current = {};
+});
+
+function OpenDialog({ children }: { children: ReactNode }) {
+  return (
+    <Dialog open>
+      <Dialog.Portal>
+        <Dialog.Content>
+          <Dialog.Title>Edit profile</Dialog.Title>
+          {children}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog>
+  );
+}
+
+function OpenAlertDialog({ children }: { children: ReactNode }) {
+  return (
+    <AlertDialog open>
+      <AlertDialog.Portal>
+        <AlertDialog.Content>
+          <AlertDialog.Title>Delete account?</AlertDialog.Title>
+          {children}
+        </AlertDialog.Content>
+      </AlertDialog.Portal>
+    </AlertDialog>
+  );
+}
+
+const noDialogClose = () =>
+  expect(screen.queryAllByRole("button", { name: "Dialog Close" })).toHaveLength(0);
+
+describe("house Dialog.Close is named by what it shows (MPO-476)", () => {
+  it("keeps each asChild button's visible label as its accessible name", () => {
+    renderWithProviders(
+      <OpenDialog>
+        <Dialog.Close asChild>
+          <Button>Cancel</Button>
+        </Dialog.Close>
+        <Dialog.Close asChild>
+          <Button theme="accent">Save changes</Button>
+        </Dialog.Close>
+      </OpenDialog>,
+    );
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Save changes" })).toBeTruthy();
+    noDialogClose();
+  });
+
+  it("names a bare close with text by that text", () => {
+    renderWithProviders(
+      <OpenDialog>
+        <Dialog.Close>Done</Dialog.Close>
+      </OpenDialog>,
+    );
+    expect(screen.getByRole("button", { name: "Done" })).toBeTruthy();
+    noDialogClose();
+  });
+
+  it("gives an icon-only close the localized Close", () => {
+    catalog.current = { Close: "మూసివేయి" };
+    renderWithProviders(
+      <OpenDialog>
+        <Dialog.Close asChild>
+          <Button circular icon={X} />
+        </Dialog.Close>
+        <Dialog.Close>
+          <X />
+        </Dialog.Close>
+      </OpenDialog>,
+    );
+    expect(screen.getAllByRole("button", { name: "మూసివేయి" })).toHaveLength(2);
+    noDialogClose();
+  });
+
+  it("keeps an explicit label on the part or its child", () => {
+    renderWithProviders(
+      <OpenDialog>
+        <Dialog.Close asChild>
+          <Button circular icon={X} aria-label="Close dialog" />
+        </Dialog.Close>
+        <Dialog.Close aria-label="Dismiss">
+          <X />
+        </Dialog.Close>
+      </OpenDialog>,
+    );
+    expect(screen.getByRole("button", { name: "Close dialog" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Dismiss" })).toBeTruthy();
+  });
+
+  it("still closes the dialog", async () => {
+    renderWithProviders(
+      <Dialog defaultOpen>
+        <Dialog.Portal>
+          <Dialog.Content>
+            <Dialog.Title>Edit profile</Dialog.Title>
+            <Dialog.Close asChild>
+              <Button>Cancel</Button>
+            </Dialog.Close>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+    await waitFor(() => expect(screen.queryByText("Edit profile")).toBeNull());
+  });
+
+  it("changes only Close; every other part is tamagui's", () => {
+    expect(Dialog.Close).not.toBe(TamaguiDialog.Close);
+    for (const part of ["Trigger", "Portal", "Overlay", "Content", "Title", "Description"]) {
+      expect(Dialog[part as keyof typeof Dialog]).toBe(
+        TamaguiDialog[part as keyof typeof TamaguiDialog],
+      );
+    }
+  });
+});
+
+describe("house AlertDialog Cancel and Action are named by what they show (MPO-476)", () => {
+  it("keeps each asChild button's visible label as its accessible name", () => {
+    renderWithProviders(
+      <OpenAlertDialog>
+        <AlertDialog.Cancel asChild>
+          <Button>Cancel</Button>
+        </AlertDialog.Cancel>
+        <AlertDialog.Action asChild>
+          <Button theme="error">Yes, delete</Button>
+        </AlertDialog.Action>
+        <AlertDialog.Destructive asChild>
+          <Button theme="error">Delete forever</Button>
+        </AlertDialog.Destructive>
+      </OpenAlertDialog>,
+    );
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Yes, delete" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Delete forever" })).toBeTruthy();
+    noDialogClose();
+  });
+
+  it("changes only the close parts; every other part is tamagui's", () => {
+    for (const part of ["Cancel", "Action", "Destructive"] as const) {
+      expect(AlertDialog[part]).not.toBe(TamaguiAlertDialog[part]);
+    }
+    for (const part of ["Trigger", "Portal", "Overlay", "Content", "Title", "Description"]) {
+      expect(AlertDialog[part as keyof typeof AlertDialog]).toBe(
+        TamaguiAlertDialog[part as keyof typeof TamaguiAlertDialog],
+      );
+    }
+  });
+});

package/src/Dialog.tsx

@@ -0,0 +1,80 @@
+/**
+ * House Dialog and AlertDialog: the tamagui roots with their close parts named
+ * by what they show (MPO-476).
+ *
+ * tamagui 2.7's Dialog.Close sets `aria-label="Dialog Close"` and asChild
+ * merges it onto the child, so `<Dialog.Close asChild><Button>Cancel</Button>`
+ * was announced "Dialog Close", in English, in every locale. AlertDialog's
+ * Cancel, Action and Destructive render the same Close. A visible label that
+ * is not in the accessible name fails WCAG 2.5.3.
+ *
+ * Here a close part with text (its own, or its asChild child's) is named by
+ * that text. One with no text and no label of its own, an icon-only X, gets
+ * the catalog's localized "Close". An explicit label on the part or on its
+ * child still wins. Every other part is the tamagui one.
+ */
+import { isValidElement, type ComponentType, type ReactNode } from "react";
+import {
+  AlertDialog as TamaguiAlertDialog,
+  Dialog as TamaguiDialog,
+  withStaticProperties,
+  type GetProps,
+} from "tamagui";
+import { useTranslation } from "./shared/i18n";
+
+type Labelled = {
+  "aria-label"?: unknown;
+  "aria-labelledby"?: unknown;
+  accessibilityLabel?: unknown;
+};
+
+function hasText(node: ReactNode): boolean {
+  if (typeof node === "string") return node.trim().length > 0;
+  if (typeof node === "number" || typeof node === "bigint") return true;
+  if (Array.isArray(node)) return node.some(hasText);
+  if (isValidElement<{ children?: ReactNode }>(node)) return hasText(node.props.children);
+  return false;
+}
+
+function isLabelled(props: Labelled): boolean {
+  return (
+    props["aria-label"] != null ||
+    props["aria-labelledby"] != null ||
+    props.accessibilityLabel != null
+  );
+}
+
+function needsCloseName(props: Labelled & { asChild?: unknown; children?: ReactNode }): boolean {
+  if (isLabelled(props)) return false;
+  const { asChild, children } = props;
+  if (asChild && isValidElement<Labelled & { children?: ReactNode }>(children)) {
+    return !isLabelled(children.props) && !hasText(children.props.children);
+  }
+  return !hasText(children);
+}
+
+function namedByContent<C extends ComponentType<any>>(Part: C, displayName: string) {
+  const Raw = Part as ComponentType<any>;
+
+  function LocalizedClose(props: GetProps<C>) {
+    const { t } = useTranslation();
+    return <Raw aria-label={t("Close")} {...props} />;
+  }
+
+  function Close(props: GetProps<C>) {
+    if (needsCloseName(props)) return <LocalizedClose {...props} />;
+    return <Raw aria-label={undefined} {...props} />;
+  }
+  Close.displayName = displayName;
+  return Close;
+}
+
+export const Dialog: typeof TamaguiDialog = withStaticProperties(TamaguiDialog, {
+  Close: namedByContent(TamaguiDialog.Close, "DialogClose"),
+});
+
+export const AlertDialog: typeof TamaguiAlertDialog = withStaticProperties(TamaguiAlertDialog, {
+  Cancel: namedByContent(TamaguiAlertDialog.Cancel, "AlertDialogCancel"),
+  Action: namedByContent(TamaguiAlertDialog.Action, "AlertDialogAction"),
+  Destructive: namedByContent(TamaguiAlertDialog.Destructive, "AlertDialogDestructive"),
+});

package/src/DialogContent.stories.tsx

@@ -4,7 +4,8 @@ import { useState } from "react";
 // DialogContent so it inherits the compact nested-scale step (LC-73); the
 // dialog frame itself does not ring (LC-71).
 import { Button } from "@multiplatform.one/forms";
-import { Dialog, Paragraph, XStack, YStack } from "tamagui";
+import { Paragraph, XStack, YStack } from "tamagui";
+import { Dialog } from "./Dialog";
 import { DialogContent, DialogOverlay } from "./surfaces";
 
 function DialogHarness({

package/src/code/HighlightedCode/HighlightedCode.stories.tsx

@@ -1,56 +1,32 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import type { ComponentProps } from "react";
-import { YStack, useThemeName } from "tamagui";
+import { YStack } from "tamagui";
 import { HighlightedCode } from "./index";
 import type { HighlightLine } from "../Highlighter";
 
-// one-dark-ish palette for dark scheme, github-light-ish (WCAG AA on light
-// surfaces) palette for light scheme
-const darkSampleTokens: HighlightLine[] = [
+// What highlightCode returns under the house syntax theme: theme tokens, so
+// one fixture reads in both schemes (MPO-474).
+const sampleTokens: HighlightLine[] = [
   [
-    { content: "const ", color: "#c678dd" },
-    { content: "hello", color: "#e06c75" },
-    { content: " = ", color: "#56b6c2" },
-    { content: "'world'", color: "#98c379" },
-    { content: ";", color: "#abb2bf" },
+    { content: "const", color: "$syntaxPurple" },
+    { content: " ", color: "$color12" },
+    { content: "hello", color: "$syntaxBlue" },
+    { content: " ", color: "$color12" },
+    { content: "=", color: "$syntaxPurple" },
+    { content: " ", color: "$color12" },
+    { content: "'world'", color: "$syntaxGreen" },
+    { content: ";", color: "$color12" },
   ],
   [
-    { content: "console", color: "#e5c07b" },
-    { content: ".", color: "#abb2bf" },
-    { content: "log", color: "#61afef" },
-    { content: "(", color: "#abb2bf" },
-    { content: "hello", color: "#e06c75" },
-    { content: ");", color: "#abb2bf" },
+    { content: "console.", color: "$color12" },
+    { content: "log", color: "$syntaxBlue" },
+    { content: "(hello);", color: "$color12" },
   ],
 ];
 
-const lightSampleTokens: HighlightLine[] = [
-  [
-    { content: "const ", color: "#cf222e" },
-    { content: "hello", color: "#8250df" },
-    { content: " = ", color: "#0550ae" },
-    { content: "'world'", color: "#0a3069" },
-    { content: ";", color: "#57606a" },
-  ],
-  [
-    { content: "console", color: "#953800" },
-    { content: ".", color: "#57606a" },
-    { content: "log", color: "#8250df" },
-    { content: "(", color: "#57606a" },
-    { content: "hello", color: "#8250df" },
-    { content: ");", color: "#57606a" },
-  ],
-];
-
-function useSampleTokens(): HighlightLine[] {
-  const themeName = useThemeName();
-  return themeName?.includes("dark") ? darkSampleTokens : lightSampleTokens;
-}
-
-const SampleHighlightedCode = (props: Omit<ComponentProps<typeof HighlightedCode>, "tokens">) => {
-  const tokens = useSampleTokens();
-  return <HighlightedCode tokens={tokens} {...props} />;
-};
+const SampleHighlightedCode = (props: Omit<ComponentProps<typeof HighlightedCode>, "tokens">) => (
+  <HighlightedCode tokens={sampleTokens} {...props} />
+);
 
 const meta: Meta<typeof HighlightedCode> = {
   title: "Components/HighlightedCode",

package/src/code/Highlighter/houseSyntaxTheme.spec.ts

@@ -0,0 +1,77 @@
+/**
+ * MPO-474: the shiki stack paints theme tokens, not GitHub hex. github-light
+ * measured 3.13 to 4.35:1 on the house code surfaces and github-dark's comment
+ * 3.77:1, and neither palette follows the scheme or the knobs.
+ */
+
+import { bundledThemes } from "shiki";
+import { describe, expect, it } from "vitest";
+import { highlightCode, houseSyntaxTheme } from "./index";
+
+const houseInk = /^\$(color11|color12|syntax(Purple|Green|Blue|Orange|Red))$/;
+
+const sample = `// Greets a user
+export function greet(user: User, retries = 3): string {
+  const label = \`Hello, \${user.name}\`;
+  console.log(label, true, null);
+  return label;
+}`;
+
+async function inkOf(code: string, language: string, content: string, theme?: string) {
+  const lines = await highlightCode(code, language, theme);
+  const token = lines.flat().find((candidate) => candidate.content.trim() === content);
+  expect(token, `no token ${JSON.stringify(content)}`).toBeTruthy();
+  return token!.color;
+}
+
+describe("MPO-474: the default highlighter theme paints the held syntax tokens", () => {
+  it("every token of a TypeScript sample takes a house ink", { timeout: 30000 }, async () => {
+    const lines = await highlightCode(sample, "typescript");
+    const inks = new Set(lines.flat().map((token) => token.color));
+    expect(inks.size).toBeGreaterThan(4);
+    for (const color of inks) expect(color).toMatch(houseInk);
+  });
+
+  it.each([
+    ["// Greets a user", "$color11"],
+    ["export", "$syntaxPurple"],
+    ["function", "$syntaxPurple"],
+    ["greet", "$syntaxBlue"],
+    ["User", "$syntaxBlue"],
+    ["3", "$syntaxBlue"],
+    ["true", "$syntaxBlue"],
+    ["string", "$syntaxOrange"],
+    ["retries", "$syntaxOrange"],
+    ["`Hello, ${", "$syntaxGreen"],
+  ])("%s paints %s", { timeout: 30000 }, async (content, ink) => {
+    expect(await inkOf(sample, "typescript", content)).toBe(ink);
+  });
+
+  it("diff lines paint the red and green the washes are held for", { timeout: 30000 }, async () => {
+    const diff = "- const retries = 1;\n+ const retries = 3;";
+    expect(await inkOf(diff, "diff", "- const retries = 1;")).toBe("$syntaxRed");
+    expect(await inkOf(diff, "diff", "+ const retries = 3;")).toBe("$syntaxGreen");
+  });
+
+  it("markup tags paint green like the editor's", { timeout: 30000 }, async () => {
+    expect(await inkOf('<a href="/x">hi</a>', "html", "a")).toBe("$syntaxGreen");
+  });
+
+  it("an explicit theme still ejects to its literal palette", { timeout: 30000 }, async () => {
+    expect((await inkOf(sample, "typescript", "export", "github-light"))?.toLowerCase()).toBe(
+      "#d73a49",
+    );
+  });
+
+  it("keeps github-light's scope rules one for one, painted only in house ink", async () => {
+    const githubLight = (await bundledThemes["github-light"]()).default;
+    const scopesOf = (settings: { scope?: string | string[] }[]) =>
+      settings.map((setting) => [setting.scope ?? []].flat().join(",")).filter(Boolean);
+    expect(scopesOf(houseSyntaxTheme.settings)).toEqual(
+      scopesOf(githubLight.tokenColors ?? githubLight.settings ?? []),
+    );
+    for (const setting of houseSyntaxTheme.settings) {
+      if (setting.settings.foreground) expect(setting.settings.foreground).toMatch(houseInk);
+    }
+  });
+});

package/src/code/Highlighter/houseSyntaxTheme.ts

@@ -0,0 +1,151 @@
+/**
+ * The house shiki theme (MPO-474): github-light's scope rules one for one,
+ * each painted with a theme token in the rich-text editor's roles, so code
+ * ink follows the scheme and tint and holds `holdSyntaxFloor`'s 4.5:1. Shiki
+ * passes a non-hex colour through untouched (a placeholder while tokenizing,
+ * restored on every token), which is what lets a theme name Tamagui tokens.
+ */
+
+export interface HouseSyntaxThemeSetting {
+  scope?: string | string[];
+  settings: { foreground?: string; background?: string; fontStyle?: string };
+}
+
+export interface HouseSyntaxTheme {
+  name: string;
+  fg: string;
+  bg: string;
+  settings: HouseSyntaxThemeSetting[];
+}
+
+const ink = {
+  plain: "$color12",
+  muted: "$color11",
+  keyword: "$syntaxPurple",
+  name: "$syntaxBlue",
+  constant: "$syntaxBlue",
+  builtin: "$syntaxOrange",
+  variable: "$syntaxOrange",
+  string: "$syntaxGreen",
+  tag: "$syntaxGreen",
+  inserted: "$syntaxGreen",
+  deleted: "$syntaxRed",
+} as const;
+
+export const houseSyntaxTheme: HouseSyntaxTheme = {
+  name: "house",
+  fg: ink.plain,
+  bg: "$color3",
+  settings: [
+    { settings: { foreground: ink.plain, background: "$color3" } },
+    {
+      scope: ["comment", "punctuation.definition.comment", "string.comment"],
+      settings: { foreground: ink.muted },
+    },
+    {
+      scope: [
+        "constant",
+        "entity.name.constant",
+        "variable.other.constant",
+        "variable.other.enummember",
+        "variable.language",
+      ],
+      settings: { foreground: ink.constant },
+    },
+    { scope: ["entity", "entity.name"], settings: { foreground: ink.name } },
+    { scope: "variable.parameter.function", settings: { foreground: ink.plain } },
+    { scope: "entity.name.tag", settings: { foreground: ink.tag } },
+    { scope: "keyword", settings: { foreground: ink.keyword } },
+    { scope: ["storage", "storage.type"], settings: { foreground: ink.keyword } },
+    {
+      scope: ["storage.modifier.package", "storage.modifier.import", "storage.type.java"],
+      settings: { foreground: ink.plain },
+    },
+    {
+      scope: [
+        "string",
+        "punctuation.definition.string",
+        "string punctuation.section.embedded source",
+      ],
+      settings: { foreground: ink.string },
+    },
+    { scope: "support", settings: { foreground: ink.builtin } },
+    { scope: "meta.property-name", settings: { foreground: ink.constant } },
+    { scope: "variable", settings: { foreground: ink.variable } },
+    { scope: "variable.other", settings: { foreground: ink.plain } },
+    { scope: "invalid.broken", settings: { foreground: ink.deleted, fontStyle: "italic" } },
+    { scope: "invalid.deprecated", settings: { foreground: ink.deleted, fontStyle: "italic" } },
+    { scope: "invalid.illegal", settings: { foreground: ink.deleted, fontStyle: "italic" } },
+    { scope: "invalid.unimplemented", settings: { foreground: ink.deleted, fontStyle: "italic" } },
+    {
+      scope: "carriage-return",
+      settings: { foreground: ink.deleted, fontStyle: "italic underline" },
+    },
+    { scope: "message.error", settings: { foreground: ink.deleted } },
+    { scope: "string variable", settings: { foreground: ink.variable } },
+    { scope: ["source.regexp", "string.regexp"], settings: { foreground: ink.string } },
+    {
+      scope: [
+        "string.regexp.character-class",
+        "string.regexp constant.character.escape",
+        "string.regexp source.ruby.embedded",
+        "string.regexp string.regexp.arbitrary-repitition",
+      ],
+      settings: { foreground: ink.string },
+    },
+    {
+      scope: "string.regexp constant.character.escape",
+      settings: { foreground: ink.string, fontStyle: "bold" },
+    },
+    { scope: "support.constant", settings: { foreground: ink.builtin } },
+    { scope: "support.variable", settings: { foreground: ink.builtin } },
+    { scope: "meta.module-reference", settings: { foreground: ink.constant } },
+    {
+      scope: "punctuation.definition.list.begin.markdown",
+      settings: { foreground: ink.variable },
+    },
+    {
+      scope: ["markup.heading", "markup.heading entity.name"],
+      settings: { foreground: ink.name, fontStyle: "bold" },
+    },
+    { scope: "markup.quote", settings: { foreground: ink.muted } },
+    { scope: "markup.italic", settings: { foreground: ink.plain, fontStyle: "italic" } },
+    { scope: "markup.bold", settings: { foreground: ink.plain, fontStyle: "bold" } },
+    { scope: ["markup.underline"], settings: { fontStyle: "underline" } },
+    { scope: ["markup.strikethrough"], settings: { fontStyle: "strikethrough" } },
+    { scope: "markup.inline.raw", settings: { foreground: ink.constant } },
+    {
+      scope: ["markup.deleted", "meta.diff.header.from-file", "punctuation.definition.deleted"],
+      settings: { foreground: ink.deleted },
+    },
+    {
+      scope: ["markup.inserted", "meta.diff.header.to-file", "punctuation.definition.inserted"],
+      settings: { foreground: ink.inserted },
+    },
+    {
+      scope: ["markup.changed", "punctuation.definition.changed"],
+      settings: { foreground: ink.variable },
+    },
+    { scope: ["markup.ignored", "markup.untracked"], settings: { foreground: ink.constant } },
+    { scope: "meta.diff.range", settings: { foreground: ink.keyword, fontStyle: "bold" } },
+    { scope: "meta.diff.header", settings: { foreground: ink.constant } },
+    { scope: "meta.separator", settings: { foreground: ink.constant, fontStyle: "bold" } },
+    { scope: "meta.output", settings: { foreground: ink.constant } },
+    {
+      scope: [
+        "brackethighlighter.tag",
+        "brackethighlighter.curly",
+        "brackethighlighter.round",
+        "brackethighlighter.square",
+        "brackethighlighter.angle",
+        "brackethighlighter.quote",
+      ],
+      settings: { foreground: ink.muted },
+    },
+    { scope: "brackethighlighter.unmatched", settings: { foreground: ink.deleted } },
+    {
+      scope: ["constant.other.reference.link", "string.other.link"],
+      settings: { foreground: ink.string, fontStyle: "underline" },
+    },
+  ],
+};

package/src/code/Highlighter/index.ts

@@ -7,11 +7,14 @@
  */
 
 import { createContext, useContext, useEffect, useState } from "react";
-import { useThemeName } from "tamagui";
+import { houseSyntaxTheme } from "./houseSyntaxTheme";
+
+export * from "./houseSyntaxTheme";
 
 /** A single highlighted token with inline color */
 export interface HighlightToken {
   content: string;
+  /** A theme token such as `$syntaxBlue` under the house theme, or a named theme's hex */
   color?: string;
   fontStyle?: number; // 0=normal, 1=italic, 2=bold, 3=bold+italic
 }
@@ -37,11 +40,7 @@ export function useShikiTokens(
   theme?: string,
 ): HighlightLine[] | null {
   const ctx = useContext(ShikiContext);
-  const themeName = useThemeName();
-  // Default shiki theme follows the app scheme so light mode gets a
-  // dark-on-light token palette instead of github-dark's light inks
-  const schemeDefault = themeName?.includes("dark") ? "github-dark" : "github-light";
-  const resolvedTheme = theme || ctx.theme || schemeDefault;
+  const resolvedTheme = theme || ctx.theme || houseSyntaxTheme.name;
   const [tokens, setTokens] = useState<HighlightLine[] | null>(null);
 
   useEffect(() => {
@@ -101,7 +100,7 @@ function getHighlighter(): Promise<any> {
 export async function highlightCode(
   code: string,
   language: string,
-  theme = "github-dark",
+  theme = houseSyntaxTheme.name,
 ): Promise<HighlightLine[]> {
   try {
     const highlighter = await Promise.race([
@@ -111,7 +110,7 @@ export async function highlightCode(
       ),
     ]);
     await Promise.all([
-      highlighter.loadTheme(theme as any),
+      highlighter.loadTheme((theme === houseSyntaxTheme.name ? houseSyntaxTheme : theme) as any),
       // Unknown languages fall back to plain text below; theme failures
       // reject into the catch (matching the old shorthand behavior).
       highlighter.loadLanguage(language as any).catch(() => {}),

package/src/code/syntaxInk.spec.tsx

@@ -0,0 +1,50 @@
+/**
+ * MPO-474: every shiki surface (CodeBlock, MDXCodeBlock, markdown CodeBlock,
+ * CodeEditorField) tokenizes through useShikiTokens and paints through
+ * HighlightedCode. By default the ink is a theme token in either scheme, so
+ * Tamagui emits the token's class (`_col-syntaxPurpl…`), not a hex class
+ * (`_col-D73A4935`) that no scheme or knob can reach.
+ */
+
+import { createDefaultThemeConfig } from "@multiplatform.one/theme";
+import { cleanup, render, waitFor } from "@testing-library/react";
+import { TamaguiProvider } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { HighlightedCode } from "./HighlightedCode";
+import { useShikiTokens } from "./Highlighter";
+
+afterEach(cleanup);
+
+const houseConfig = createDefaultThemeConfig();
+// Tamagui keeps a token's first 11 characters in its atomic class and hashes the rest.
+const inkClass = (token: string) => new RegExp(`_col-${token.slice(0, 11)}`);
+
+function Probe({ code, language, theme }: { code: string; language: string; theme?: string }) {
+  const tokens = useShikiTokens(code, language, theme);
+  return <HighlightedCode tokens={tokens}>{code}</HighlightedCode>;
+}
+
+function tokenSpan(container: HTMLElement, text: string) {
+  const matches = Array.from(container.querySelectorAll("span")).filter(
+    (span) => span.textContent === text,
+  );
+  return matches.find((span) => !matches.some((other) => other !== span && span.contains(other)));
+}
+
+describe("MPO-474: shiki ink is a theme token in both schemes", () => {
+  for (const scheme of ["light", "dark"] as const) {
+    it(`${scheme}: keyword, string and comment take the held tokens`, async () => {
+      const { container } = render(
+        <TamaguiProvider config={houseConfig.tamagui} defaultTheme={scheme} disableInjectCSS>
+          <Probe code={'// note\nconst greeting = "hi";'} language="typescript" />
+        </TamaguiProvider>,
+      );
+      await waitFor(
+        () => expect(tokenSpan(container, "const")?.className).toMatch(inkClass("syntaxPurple")),
+        { timeout: 30000 },
+      );
+      expect(tokenSpan(container, '"hi"')?.className).toMatch(inkClass("syntaxGreen"));
+      expect(tokenSpan(container, "// note")?.className).toMatch(inkClass("color11"));
+    }, 35000);
+  }
+});

package/src/knobImmuneExports.ts

@@ -63,9 +63,6 @@ export const knobImmuneExports: Readonly<Record<string, string>> = {
   // Logic shells with no painted frame of their own; the knob channel lands
   // on the house content surfaces designed to fill them (DialogContent,
   // PopoverContent, SheetFrame, ConfirmDialog).
-  Dialog: "composition root (logic/portal shell); knobs land on house DialogContent",
-  AlertDialog:
-    "composition root; knobs land on house ConfirmDialog / DialogContent surfaces composed inside",
   Popover: "composition root; knobs land on house PopoverContent",
   Sheet: "composition root; knobs land on house SheetFrame",
   Portal: "reparenting utility; renders children elsewhere, paints nothing",