@terpjs/react-core 0.6.1 → 0.8.0

package/src/theme.test.tsx

@@ -34,6 +34,45 @@ describe("ThemeProvider + ThemeToggle", () => {
     expect(window.localStorage.getItem(THEME_STORAGE_KEY)).toBe("dark");
   });
 
+  it("applies a named theme beyond light and dark", () => {
+    // The named themes are the reason the semantic token layer exists. They are compiled,
+    // contrast-gated and published, and none of that reaches a user unless the control can
+    // actually pin one — so the whole path is exercised for one of them.
+    render(
+      <ThemeProvider>
+        <ThemeToggle />
+      </ThemeProvider>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Theme" }));
+    fireEvent.click(screen.getByRole("menuitemradio", { name: "Midnight" }));
+    expect(document.documentElement.getAttribute("data-theme")).toBe("midnight");
+    expect(window.localStorage.getItem(THEME_STORAGE_KEY)).toBe("midnight");
+  });
+
+  it("offers every shipped theme, not only light and dark", () => {
+    // `theme.themes.test.ts` proves the list matches the contract's; this proves the list
+    // reaches the menu, which is a different failure — a name in `THEMES` that never renders.
+    render(
+      <ThemeProvider>
+        <ThemeToggle />
+      </ThemeProvider>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Theme" }));
+    for (const label of ["Light", "Dark", "Midnight", "Twilight", "High contrast", "System"]) {
+      expect(screen.getByRole("menuitemradio", { name: label })).toBeInTheDocument();
+    }
+  });
+
+  it("accepts a named theme as the app default", () => {
+    // How an app ships on a named theme: one prop, no other change anywhere.
+    render(
+      <ThemeProvider defaultTheme="contrast">
+        <ThemeToggle />
+      </ThemeProvider>,
+    );
+    expect(document.documentElement.getAttribute("data-theme")).toBe("contrast");
+  });
+
   it("restores a persisted choice over the app default", () => {
     window.localStorage.setItem(THEME_STORAGE_KEY, "light");
     render(

package/src/theme.themes.test.ts

@@ -0,0 +1,124 @@
+import { readFileSync } from "node:fs";
+
+import { describe, expect, it } from "vitest";
+
+import { DEFAULT_STRINGS } from "./uiText";
+
+// react-core's theme list against the contract's published one.
+//
+// `Theme` in `theme.tsx` is a hand-written union of the stylesheet's theme names, and
+// `THEME_ICONS` and the label map are records over it. That is a restatement of a published
+// contract, so it can drift from it — and both directions fail quietly:
+//
+//   * A theme the sheet ships that this union omits is a palette no app can ever select. It
+//     is compiled, gated for contrast and completeness, published in the manifest, and
+//     unreachable.
+//   * A theme this union offers that the sheet has no block for is a menu entry that sets
+//     `data-theme` to a value nothing matches, so the app silently renders the base theme
+//     while the control reports the choice took.
+//
+// The union is not derived from the manifest at runtime on purpose: react-core publishes
+// unbuilt TypeScript and imports nothing but React, so resolving a sibling package's JSON
+// module would add a bundler and tsconfig requirement to every consumer. A test reading the
+// file from disk is the same discipline the other mirrored tables in this repo use — the copy
+// stays a copy, and the copy is checked.
+
+const manifest: {
+  base: string;
+  systemDark: string;
+  themes: { name: string; label: string; appearance: "light" | "dark" }[];
+} = JSON.parse(
+  readFileSync(new URL("../../contract/src/tokens.manifest.json", import.meta.url), "utf-8"),
+);
+
+// Read as source rather than imported, because the union is a type: it does not survive to
+// runtime, and `THEMES` alone would not prove the type and the array agree.
+const themeSource = readFileSync(new URL("./theme.tsx", import.meta.url), "utf-8");
+
+/** The names in `export type Theme = "a" | "b" | …`. */
+function unionMembers(): string[] {
+  const match = /export type Theme =([^;]+);/.exec(themeSource);
+  if (!match) throw new Error("theme.tsx: could not find `export type Theme`");
+  return [...match[1]!.matchAll(/"([a-z-]+)"/g)].map((entry) => entry[1]!);
+}
+
+/** The names in the `THEMES` array literal. */
+function themesArray(): string[] {
+  const match = /const THEMES: readonly Theme\[\] = \[([^\]]+)\]/.exec(themeSource);
+  if (!match) throw new Error("theme.tsx: could not find the `THEMES` array");
+  return [...match[1]!.matchAll(/"([a-z-]+)"/g)].map((entry) => entry[1]!);
+}
+
+/** The keys of a `Record<Theme, …>` literal assigned to `name`. */
+function recordKeys(name: string): string[] {
+  const match = new RegExp(`const ${name}: Record<Theme, [^>]+> = \\{([^}]+)\\}`).exec(
+    themeSource,
+  );
+  if (!match) throw new Error(`theme.tsx: could not find \`${name}\``);
+  return [...match[1]!.matchAll(/^\s*([a-z-]+):/gm)].map((entry) => entry[1]!);
+}
+
+/** Every theme the stylesheet ships, in registry order. */
+const shipped = manifest.themes.map((theme) => theme.name);
+
+/** What the control offers: every shipped theme, plus the OS-preference entry. */
+const OS_PREFERENCE = "system";
+const expected = [...shipped, OS_PREFERENCE];
+
+describe("react-core's theme list", () => {
+  it("reads the sources it is asserting about", () => {
+    // Every assertion below is a comparison against a regex match. A regex that stopped
+    // matching — a reformatted union, a renamed constant — would compare two empty lists and
+    // report green, which is the one failure mode a parity test cannot afford.
+    expect(shipped.length).toBeGreaterThanOrEqual(3);
+    expect(unionMembers().length).toBe(expected.length);
+    expect(themesArray().length).toBe(expected.length);
+  });
+
+  it("offers exactly the themes the contract ships, plus system", () => {
+    // The union is the app-facing type: a theme missing here cannot be passed to
+    // `ThemeProvider` at all, however completely the stylesheet defines it.
+    expect(unionMembers()).toEqual(expected);
+  });
+
+  it("lists them in the same order in the THEMES array", () => {
+    // `THEMES` is what `ThemeToggle` maps over and what `readStoredTheme` validates against,
+    // so a name in the type but not the array is selectable in code and absent from the menu.
+    expect(themesArray()).toEqual(expected);
+  });
+
+  it("gives every theme an icon, and no two the same", () => {
+    // A picker whose entries share a glyph is a picker whose icons carry no information, and
+    // the trigger renders the active theme's icon — so a duplicate makes two states identical.
+    expect(recordKeys("THEME_ICONS")).toEqual(expected);
+    const glyphs = [...themeSource.matchAll(/^\s{2}([a-z-]+): "([a-z-]+)",$/gm)]
+      .filter((entry) => expected.includes(entry[1]!))
+      .map((entry) => entry[2]!);
+    expect(glyphs).toHaveLength(expected.length);
+    expect(new Set(glyphs).size).toBe(glyphs.length);
+  });
+
+  it("has a translated label for every theme", () => {
+    // The label map is `Record<Theme, string>` so the compiler catches a missing entry, but
+    // not one pointing at a string key that does not exist in the catalog.
+    for (const name of expected) {
+      const key = `theme${name[0]!.toUpperCase()}${name.slice(1)}`;
+      expect(
+        Object.hasOwn(DEFAULT_STRINGS, key),
+        `${name} needs a ${key} string (LOCALE_NL's completeness gate then forces the Dutch one)`,
+      ).toBe(true);
+    }
+  });
+
+  it("keeps the OS-preference entry from colliding with a theme name", () => {
+    // "system" is a sentinel, not a theme: it means *remove* `data-theme` and let the sheet's
+    // `prefers-color-scheme` block decide. A shipped theme actually named `system` would make
+    // the sentinel ambiguous — selecting it would clear the attribute rather than pin the
+    // theme, and the two would be indistinguishable in storage.
+    expect(shipped).not.toContain(OS_PREFERENCE);
+    // Both ends of what the sentinel resolves to have to be themes the control also offers,
+    // or "System" would render a palette the user cannot pick deliberately.
+    expect(shipped).toContain(manifest.systemDark);
+    expect(shipped).toContain(manifest.base);
+  });
+});

package/src/theme.tsx

@@ -7,16 +7,37 @@ import { useStrings } from "./uiText";
 
 /**
  * The visual theme: an explicit choice, or "system" to follow the OS preference.
- * The token stylesheet (`@terpjs/contract/tokens.css`) carries both palettes: it applies
- * the dark colours under `<html data-theme="dark">` and — with no attribute — under
- * `@media (prefers-color-scheme: dark)`, so "system" simply removes the attribute.
+ *
+ * The token stylesheet (`@terpjs/contract/tokens.css`) carries every palette: it applies
+ * each named theme's colours under `<html data-theme="<name>">` and — with no attribute —
+ * applies the dark palette under `@media (prefers-color-scheme: dark)`, so "system" simply
+ * removes the attribute.
+ *
+ * The names are the stylesheet's, so this union is a restatement of a published contract
+ * and could drift from it silently — a theme the sheet ships that no app can select, or one
+ * this offers that resolves to nothing. `theme.themes.test.ts` holds it against the token
+ * manifest. The union is written out rather than derived from the manifest at runtime because
+ * react-core publishes unbuilt source and imports nothing but React: resolving a JSON module
+ * from a sibling package would add a requirement to every consumer's bundler and tsconfig,
+ * which is the consumption-model change the framework spends real effort avoiding.
  */
-export type Theme = "light" | "dark" | "system";
+export type Theme = "light" | "dark" | "midnight" | "twilight" | "contrast" | "system";
+
+const THEMES: readonly Theme[] = [
+  "light",
+  "dark",
+  "midnight",
+  "twilight",
+  "contrast",
+  "system",
+];
 
-const THEMES: readonly Theme[] = ["light", "dark", "system"];
 const THEME_ICONS: Record<Theme, string> = {
   light: "sun",
   dark: "moon",
+  midnight: "moon-stars",
+  twilight: "sunset",
+  contrast: "contrast",
   system: "monitor",
 };
 
@@ -46,10 +67,13 @@ export interface ThemeProviderProps {
 }
 
 /**
- * Owns the light/dark theme choice: applies it as `data-theme` on `<html>` (the token
- * stylesheet does the rest — no component changes anywhere) and persists it in
- * `localStorage`. `renderTerpApp` mounts one for every app; pair with {@link ThemeToggle}
- * (the default {@link UserMenu} already includes it).
+ * Owns the theme choice: applies it as `data-theme` on `<html>` (the token stylesheet does
+ * the rest — no component changes anywhere) and persists it in `localStorage`.
+ * `renderTerpApp` mounts one for every app; pair with {@link ThemeToggle} (the default
+ * {@link UserMenu} already includes it).
+ *
+ * `defaultTheme` is how an app ships on a named theme — `defaultTheme="midnight"` and
+ * nothing else — since it applies until the user chooses otherwise.
  */
 export function ThemeProvider({ defaultTheme = "system", children }: ThemeProviderProps) {
   const [theme, setThemeState] = useState<Theme>(() => {
@@ -93,8 +117,8 @@ export interface ThemeToggleProps {
 }
 
 /**
- * The standard theme control: a token-themed light/dark/system menu. Renders nothing
- * outside a {@link ThemeProvider}, so shared chrome (the shell header) can
+ * The standard theme control: a token-themed menu over every shipped theme plus "system".
+ * Renders nothing outside a {@link ThemeProvider}, so shared chrome (the shell header) can
  * include it unconditionally.
  */
 export function ThemeToggle({ variant = "stacked" }: ThemeToggleProps) {
@@ -106,10 +130,34 @@ export function ThemeToggle({ variant = "stacked" }: ThemeToggleProps) {
   const labels: Record<Theme, string> = {
     light: strings.themeLight,
     dark: strings.themeDark,
+    midnight: strings.themeMidnight,
+    twilight: strings.themeTwilight,
+    contrast: strings.themeContrast,
     system: strings.themeSystem,
   };
+  // Hoisted out of the attribute rather than inlined as `variant === "inline"`, and not for
+  // readability: the marker inventory scanner reads every string literal inside a
+  // `data-terp={…}` expression as a marker, so the comparison's own "inline" was picked up as
+  // a component marker that nothing styles. Keep marker expressions to marker literals.
+  const isInline = variant === "inline";
   const menu = (
     <Menu
+      // The rendered root of the inline variant IS this Menu's popover wrapper — the
+      // component adds no element of its own — so the marker has to travel through Menu to
+      // land there. Both variants wear the same name because they are the same component;
+      // data-variant is what tells them apart.
+      // Claim the root ONLY when this Menu is the root, which is the inline variant. The
+      // stacked variant renders its own div and puts the menu inside it, so stamping the
+      // same marker unconditionally put it on BOTH elements — and the inner wrapper then
+      // matched the stacked grid rule instead of the popover wrapper's geometry. The
+      // baselines did not catch that: a one-child grid and a one-child inline-flex box
+      // shrink-wrap to the same pixels, so it was wrong and invisible at the same time.
+      data-terp={isInline ? "theme-toggle" : undefined}
+      data-variant={isInline ? "inline" : undefined}
+      // Unconditional, unlike the root marker: the panel is the same panel in both variants, so
+      // a rule for it must reach both. Deriving the owner from the conditional root marker made
+      // this panel "theme-toggle" when inline and "popover" when stacked.
+      data-owner="theme-toggle"
       trigger={<Icon name={THEME_ICONS[context.theme]} size="1.15rem" />}
       triggerLabel={strings.theme}
     >
@@ -131,12 +179,12 @@ export function ThemeToggle({ variant = "stacked" }: ThemeToggleProps) {
       )}
     </Menu>
   );
-  if (variant === "inline") {
+  if (isInline) {
     return menu;
   }
   return (
-    <div style={{ display: "grid", justifyItems: "start", gap: "var(--space-1)", fontSize: "var(--font-size-sm)" }}>
-      <span style={{ color: "var(--color-neutral-600)" }}>{strings.theme}</span>
+    <div data-terp="theme-toggle" data-variant="stacked">
+      <span data-terp="theme-toggle-label">{strings.theme}</span>
       {menu}
     </div>
   );

package/src/toast.tsx

@@ -1,10 +1,13 @@
 import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
 
 import { Icon } from "./icons";
+import { injectTerpStyles } from "./styles";
 import { useStrings, useUiText } from "./uiText";
 import type { UiText } from "./uiText";
 
+injectTerpStyles();
+
 export type ToastVariant = "success" | "error" | "warning";
 
 export interface ToastOptions {
@@ -36,65 +39,30 @@ const ToastContext = createContext<ToastApi | null>(null);
 
 const DEFAULT_DURATION_MS = 5000;
 
-const viewportStyle: CSSProperties = {
-  position: "fixed",
-  bottom: "var(--space-4)",
-  right: "var(--space-4)",
-  display: "grid",
-  gap: "var(--space-2)",
-  zIndex: 100,
-  maxWidth: "min(22.5rem, calc(100vw - 2 * var(--space-4)))",
-};
-
-const toastStyle = (variant: ToastVariant): CSSProperties => ({
-  display: "grid",
-  gridTemplateColumns: "auto 1fr auto",
-  alignItems: "start",
-  gap: "var(--space-2)",
-  padding: "var(--space-3) var(--space-4)",
-  borderRadius: "var(--radius-md)",
-  border: `1px solid ${borderColor[variant]}`,
-  borderInlineStart: `3px solid ${titleColor[variant]}`,
-  background: "var(--color-neutral-0)",
-  color: "var(--color-neutral-900)",
-  fontSize: "var(--font-size-sm)",
-  boxShadow: "var(--shadow-md)",
-});
-
-const titleColor: Record<ToastVariant, string> = {
-  success: "var(--color-status-success)",
-  error: "var(--color-status-danger)",
-  warning: "var(--color-status-warning)",
-};
-
-const borderColor: Record<ToastVariant, string> = {
-  success: "var(--color-status-success-soft)",
-  error: "var(--color-status-danger-soft)",
-  warning: "var(--color-status-warning-soft)",
-};
-
 const iconName: Record<ToastVariant, string> = {
   success: "check",
   error: "x",
   warning: "bell",
 };
 
-const iconWrapStyle = (variant: ToastVariant): CSSProperties => ({
-  color: titleColor[variant],
-  display: "inline-flex",
-  alignItems: "center",
-  paddingTop: "2px",
-});
-
-const dismissStyle: CSSProperties = {
-  border: "none",
-  background: "none",
-  padding: "var(--space-1)",
-  cursor: "pointer",
-  color: "var(--color-neutral-500)",
-  fontSize: "var(--font-size-base)",
-  lineHeight: 1,
-  borderRadius: "var(--radius-sm)",
+/**
+ * The `data-tone` value each variant paints as.
+ *
+ * `data-tone` rather than `data-variant`, because a toast's success/error/warning IS a status
+ * tone and `Badge` and `Alert` already key theirs that way — an app restyling one tone should
+ * not have to learn two attribute names for the same idea. The one translation is `error` to
+ * `danger`: the shared tone vocabulary is {neutral, info, success, warning, danger}, and
+ * admitting a fourth synonym to it would mean `[data-terp="toast"][data-tone="danger"]`
+ * silently matching nothing for someone who reasoned by analogy from the alert. The mapping is
+ * not new indirection either — the component already resolved `error` to
+ * `--color-status-danger` for its colours; this states it once instead.
+ *
+ * `toast.error()` is unchanged: the method name is the API, and this is the DOM.
+ */
+const toneOf: Record<ToastVariant, string> = {
+  success: "success",
+  error: "danger",
+  warning: "warning",
 };
 
 function ToastCard({ toast, onDismiss }: { toast: ToastItem; onDismiss: () => void }) {
@@ -106,30 +74,26 @@ function ToastCard({ toast, onDismiss }: { toast: ToastItem; onDismiss: () => vo
     warning: strings.warningTitle,
   };
   return (
-    <div role={toast.variant === "success" ? "status" : "alert"} style={toastStyle(toast.variant)}>
-      <span aria-hidden="true" style={iconWrapStyle(toast.variant)}>
+    <div
+      role={toast.variant === "success" ? "status" : "alert"}
+      data-terp="toast"
+      data-tone={toneOf[toast.variant]}
+    >
+      <span aria-hidden="true" data-terp="toast-icon">
         <Icon name={iconName[toast.variant]} size="1.1rem" />
       </span>
-      <div style={{ display: "grid", gap: "var(--space-1)" }}>
-        <strong
-          style={{
-            color: titleColor[toast.variant],
-            fontWeight: "var(--font-weight-semibold)" as never,
-          }}
-        >
+      <div data-terp="toast-body">
+        <strong data-terp="toast-title">
           {resolve(toast.title ?? defaultTitle[toast.variant])}
         </strong>
         {toast.description !== null && toast.description !== undefined && (
           <div>{toast.description}</div>
         )}
       </div>
-      <button
-        type="button"
-        data-terp="iconbutton"
-        aria-label={strings.dismiss}
-        style={dismissStyle}
-        onClick={onDismiss}
-      >
+      {/* Keeps the shared iconbutton marker and is addressed structurally, the way the
+          combobox's clear button and the calendar's month arrows are: it is an icon button,
+          and the only thing distinguishing it is where it sits. */}
+      <button type="button" data-terp="iconbutton" aria-label={strings.dismiss} onClick={onDismiss}>
         ×
       </button>
     </div>
@@ -189,7 +153,7 @@ export function ToastProvider({ children }: ToastProviderProps) {
     <ToastContext.Provider value={api}>
       {children}
       {toasts.length > 0 && (
-        <div style={viewportStyle}>
+        <div data-terp="toast-viewport">
           {toasts.map((toast) => (
             <ToastCard key={toast.id} toast={toast} onDismiss={() => dismiss(toast.id)} />
           ))}

package/src/tokens.guard.test.ts

@@ -7,18 +7,9 @@ const tokensCss = readFileSync(
   "utf-8",
 );
 
-// Typed locally so the package keeps its deliberate `"types": []` isolation:
-// react-core source must never see ambient Node globals. The source scan uses
-// Vite's raw glob; only the CSS sheet needs fs (declared minimally in raw.d.ts).
-declare global {
-  interface ImportMeta {
-    glob: (
-      pattern: string,
-      options: { query: "?raw"; import: "default"; eager: true },
-    ) => Record<string, string>;
-  }
-}
-
+// The package keeps its deliberate `"types": []` isolation: react-core source must never
+// see ambient Node globals. The source scan uses Vite's raw glob and the sheet needs fs;
+// both are declared minimally in raw.d.ts, shared with the other scanning tests.
 const sources = import.meta.glob("./**/*.{ts,tsx}", {
   query: "?raw",
   import: "default",

package/src/ui/Alert.test.tsx

@@ -16,4 +16,16 @@ describe("Alert", () => {
     render(<Alert tone="danger">Delete failed.</Alert>);
     expect(screen.getByRole("alert")).toHaveTextContent("Delete failed.");
   });
+
+  it("names its tone on the banner, which is what paints the frame and the glyph", () => {
+    render(<Alert tone="warning">Check the mapping.</Alert>);
+    const banner = screen.getByRole("alert");
+    expect(banner).toHaveAttribute("data-tone", "warning");
+    expect(banner.getAttribute("style")).toBeNull();
+  });
+
+  it("defaults to the info tone", () => {
+    render(<Alert>Nothing to do.</Alert>);
+    expect(screen.getByRole("status")).toHaveAttribute("data-tone", "info");
+  });
 });

package/src/ui/Alert.tsx

@@ -1,9 +1,12 @@
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
 
+import { injectTerpStyles } from "../styles";
 import { useUiText } from "../uiText";
 import type { UiText } from "../uiText";
 import type { BadgeTone } from "./Badge";
 
+injectTerpStyles();
+
 export type AlertTone = BadgeTone;
 
 export interface AlertProps {
@@ -12,43 +15,6 @@ export interface AlertProps {
   children: ReactNode;
 }
 
-const toneColor: Record<AlertTone, string> = {
-  neutral: "var(--color-neutral-600)",
-  info: "var(--color-status-info)",
-  success: "var(--color-status-success)",
-  warning: "var(--color-status-warning)",
-  danger: "var(--color-status-danger)",
-};
-
-const toneSoft: Record<AlertTone, string> = {
-  neutral: "var(--color-neutral-50)",
-  info: "var(--color-status-info-soft)",
-  success: "var(--color-status-success-soft)",
-  warning: "var(--color-status-warning-soft)",
-  danger: "var(--color-status-danger-soft)",
-};
-
-const alertStyle = (tone: AlertTone): CSSProperties => ({
-  display: "grid",
-  gridTemplateColumns: "auto 1fr",
-  gap: "var(--space-3)",
-  padding: "var(--space-3) var(--space-4)",
-  border: `1px solid ${toneColor[tone]}`,
-  borderRadius: "var(--radius-md)",
-  color: "var(--color-neutral-900)",
-  background: toneSoft[tone],
-});
-
-const iconWrapStyle = (tone: AlertTone): CSSProperties => ({
-  color: toneColor[tone],
-  display: "inline-flex",
-  alignItems: "flex-start",
-  paddingTop: "2px",
-});
-
-const bodyStyle: CSSProperties = { display: "grid", gap: "var(--space-1)", minWidth: 0 };
-const titleStyle: CSSProperties = { fontWeight: "var(--font-weight-semibold)" as never };
-
 const glyphProps = {
   width: 20,
   height: 20,
@@ -95,18 +61,24 @@ const toneIcon: Record<AlertTone, ReactNode> = {
   ),
 };
 
-/** Inline banner for persistent feedback; warnings and errors announce as alerts. */
+/**
+ * Inline banner for persistent feedback; warnings and errors announce as alerts.
+ *
+ * The tone is a `data-tone` attribute rather than a style object: the sheet paints the
+ * frame, the tint and the glyph from it, and the body restates the reading colour so the
+ * copy stays neutral while the frame carries the tone (ADR 0094).
+ */
 export function Alert({ tone = "info", title, children }: AlertProps) {
   const resolve = useUiText();
   return (
     <div
       role={tone === "warning" || tone === "danger" ? "alert" : "status"}
       data-terp="alert"
-      style={alertStyle(tone)}
+      data-tone={tone}
     >
-      <span style={iconWrapStyle(tone)}>{toneIcon[tone]}</span>
-      <div style={bodyStyle}>
-        {title !== undefined && <strong style={titleStyle}>{resolve(title)}</strong>}
+      <span data-terp="alert-icon">{toneIcon[tone]}</span>
+      <div data-terp="alert-body">
+        {title !== undefined && <strong data-terp="alert-title">{resolve(title)}</strong>}
         <div>{children}</div>
       </div>
     </div>

package/src/ui/Badge.test.tsx

@@ -7,13 +7,24 @@ import { Badge } from "./Badge";
 afterEach(cleanup);
 
 describe("Badge", () => {
-  it("renders a token-styled status pill", () => {
+  // The tone is asserted as the attribute the sheet keys on, not as a resolved colour
+  // (ADR 0094) — which is also the tone DataView reads to tint a row, so the two can
+  // never disagree about what "success" means.
+  it("names its tone on the pill and carries no inline styling", () => {
     render(<Badge label="Active" tone="success" />);
-    expect(screen.getByText("Active").style.color).toContain("var(--color-status-success)");
+    const pill = screen.getByText("Active");
+    expect(pill).toHaveAttribute("data-terp", "badge");
+    expect(pill).toHaveAttribute("data-tone", "success");
+    expect(pill.getAttribute("style")).toBeNull();
   });
 
   it("takes its text as children too, the way every other component does", () => {
     render(<Badge tone="danger">No drift</Badge>);
-    expect(screen.getByText("No drift").style.color).toContain("var(--color-status-danger)");
+    expect(screen.getByText("No drift")).toHaveAttribute("data-tone", "danger");
+  });
+
+  it("defaults to the neutral tone", () => {
+    render(<Badge label="Draft" />);
+    expect(screen.getByText("Draft")).toHaveAttribute("data-tone", "neutral");
   });
 });

package/src/ui/Badge.tsx

@@ -1,8 +1,9 @@
-import type { CSSProperties } from "react";
-
+import { injectTerpStyles } from "../styles";
 import { useUiText } from "../uiText";
 import type { UiText } from "../uiText";
 
+injectTerpStyles();
+
 export type BadgeTone = "neutral" | "info" | "success" | "warning" | "danger";
 
 /**
@@ -18,17 +19,14 @@ export type BadgeProps = { tone?: BadgeTone } & (
   | { children: UiText; label?: never }
 );
 
-const toneColor: Record<BadgeTone, string> = {
-  neutral: "var(--color-neutral-600)",
-  info: "var(--color-status-info)",
-  success: "var(--color-status-success)",
-  warning: "var(--color-status-warning)",
-  danger: "var(--color-status-danger)",
-};
-
 /**
  * Soft tint per tone — exported (not via the package barrel) so DataView's row/card
  * tinting resolves a tone to the exact same tokens the Badge pill uses.
+ *
+ * The pill itself no longer reads this map: its tones are rules in the sheet, keyed on
+ * `data-tone` (ADR 0094). It stays because DataView tints rows and cards from an inline
+ * background and still needs the tone-to-token mapping; that call site is the one that
+ * removes this export, when the DataView cluster migrates.
  */
 export const toneSoftColors: Record<BadgeTone, string> = {
   neutral: "var(--color-neutral-100)",
@@ -38,23 +36,13 @@ export const toneSoftColors: Record<BadgeTone, string> = {
   danger: "var(--color-status-danger-soft)",
 };
 
-const badgeStyle = (tone: BadgeTone): CSSProperties => ({
-  display: "inline-flex",
-  alignItems: "center",
-  border: `1px solid ${toneSoftColors[tone]}`,
-  borderRadius: "var(--radius-full)",
-  padding: "2px var(--space-2)",
-  color: toneColor[tone],
-  background: toneSoftColors[tone],
-  fontSize: "var(--font-size-xs)",
-  fontWeight: "var(--font-weight-semibold)" as never,
-  lineHeight: 1.4,
-  whiteSpace: "nowrap",
-});
-
 /** Small token-styled status pill — flat soft tint with a matching text colour. */
 export function Badge({ label, children, tone = "neutral" }: BadgeProps) {
   const resolve = useUiText();
-  return <span style={badgeStyle(tone)}>{resolve((label ?? children) as UiText)}</span>;
+  return (
+    <span data-terp="badge" data-tone={tone}>
+      {resolve((label ?? children) as UiText)}
+    </span>
+  );
 }