@multiplatform.one/table 7.7.6 → 7.10.0

package/src/components/DataTable/moneyColumn.spec.tsx

@@ -0,0 +1,151 @@
+/**
+ * The money column type end to end (MPO-252).
+ *
+ * A Frappe Currency field arrives as a decimal STRING, and before this the
+ * kit had no type for that, so it fell to "text". Three consequences, all
+ * asserted here: sorting was silently wrong ("9.00" above "10.00"), the
+ * filter offered `contains` instead of `isGreaterThan`, and formatting could
+ * only read a column-level currency constant even though a ledger mixes
+ * currencies row by row.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import type React from "react";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import type { DataTableColumn } from "../../types";
+import { applyFilterToValue } from "../../utils/filterUtils";
+import { mapFieldToFilterType, operatorsForFilterType } from "../../utils/filterFields";
+import { getDefaultColumnAlign } from "../../utils/columnAlign";
+import { DataTable } from "./index";
+
+interface Posting {
+  id: string;
+  payee: string;
+  amount: string;
+  currency: string;
+}
+
+const postings: Posting[] = [
+  { id: "P-1", payee: "Nine", amount: "9.00", currency: "USD" },
+  { id: "P-2", payee: "Ten", amount: "10.00", currency: "USD" },
+  { id: "P-3", payee: "Rupees", amount: "250.75", currency: "INR" },
+  { id: "P-4", payee: "Refund", amount: "-455.87", currency: "USD" },
+];
+
+const columns: DataTableColumn<Posting>[] = [
+  { id: "payee", accessorKey: "payee", header: "Payee" },
+  {
+    id: "amount",
+    accessorKey: "amount",
+    header: "Amount",
+    field: "money",
+    // Safe to turn on now: the money type carries an exact comparator.
+    sortable: true,
+    fieldProps: { currencyField: "currency", locale: "en-US" },
+  },
+];
+
+describe("money column type", () => {
+  it("maps field money → filter type money, right-aligned by default", () => {
+    expect(mapFieldToFilterType("money")).toBe("money");
+    expect(
+      getDefaultColumnAlign({ id: "amount", field: "money" }),
+      "a money column right-aligns without a column-level currency constant",
+    ).toBe("right");
+  });
+
+  it("offers the numeric filter operators, range included", () => {
+    const operators = operatorsForFilterType("money");
+    expect(operators).toContain("isLessThan");
+    expect(operators).toContain("isGreaterThan");
+    expect(operators).toContain("isBetween");
+    expect(operators, "text operators are what a money column used to get").not.toContain(
+      "contains",
+    );
+  });
+
+  it("filters numerically on decimal strings", () => {
+    const gt = { operator: "isGreaterThan" as const, value: "9.5" };
+    expect(applyFilterToValue("10.00", gt, "money")).toBe(true);
+    expect(applyFilterToValue("9.00", gt, "money")).toBe(false);
+    // The same rows through the "text" fallback are the defect: "10.00" is
+    // greater than "9.5" as a number and LESS as a string, so the row that
+    // should match is the one that gets dropped.
+    expect(applyFilterToValue("10.00", gt, "text")).toBe(false);
+
+    const between = { operator: "isBetween" as const, value: null, values: ["0", "100"] };
+    expect(applyFilterToValue("10.00", between, "money")).toBe(true);
+    expect(applyFilterToValue("250.75", between, "money")).toBe(false);
+    expect(applyFilterToValue("-455.87", between, "money")).toBe(false);
+
+    const is = { operator: "is" as const, value: "10" };
+    expect(applyFilterToValue("10.00", is, "money"), "scale does not change equality").toBe(true);
+  });
+
+  it("sorts numerically in the table, not lexically", async () => {
+    const user = userEvent.setup();
+    const { container } = renderWithProviders(
+      <DataTable
+        data={postings}
+        columns={columns}
+        layout="table"
+        enablePagination={false}
+        readOnly
+      />,
+    );
+    await waitFor(() => expect(screen.getByText("$9.00")).toBeTruthy());
+
+    await user.click(screen.getByText("Amount"));
+    await waitFor(() => {
+      const payees = Array.from(container.querySelectorAll("tbody tr"))
+        .map((row) => row.querySelector("td")?.textContent)
+        .filter((text) => !!text);
+      // Ascending: -455.87, 9.00, 10.00, 250.75. Lexically it would have been
+      // -455.87, 10.00, 250.75, 9.00 — with 9.00 LAST.
+      expect(payees).toEqual(["Refund", "Nine", "Ten", "Rupees"]);
+    });
+  });
+
+  it("formats from the ROW's currency, not only a column-level constant", async () => {
+    renderWithProviders(
+      <DataTable
+        data={postings}
+        columns={columns}
+        layout="table"
+        enablePagination={false}
+        readOnly
+      />,
+    );
+    await waitFor(() => expect(screen.getByText("$9.00")).toBeTruthy());
+    expect(screen.getByText("$10.00")).toBeTruthy();
+    expect(screen.getByText("-$455.87")).toBeTruthy();
+    // One row carries INR and renders in INR, in the same column, at the same
+    // time — two currencies are two figures and neither converts.
+    expect(screen.getByText("₹250.75")).toBeTruthy();
+  });
+});
+
+describe("the MoneyColumn story", () => {
+  it("renders mixed currencies and a per-currency footer total", async () => {
+    // The story is the documented example. Rendering it here means it cannot
+    // rot into something that formats one currency for every row.
+    const { MoneyColumn } = await import("./DataTable.stories");
+    renderWithProviders(<>{(MoneyColumn.render as () => React.ReactNode)()}</>);
+
+    await waitFor(() => expect(screen.getByText("Coffee roaster")).toBeTruthy());
+    expect(screen.getByText("$9.00")).toBeTruthy();
+    expect(screen.getByText("₹250.75")).toBeTruthy();
+    // Two totals, not one: USD 9.00 + 10.00 - 455.87 + 9.99, INR 250.75 +
+    // 1200.00. Nothing converts between them.
+    expect(screen.getByText("-$426.88")).toBeTruthy();
+    expect(screen.getByText("₹1,450.75")).toBeTruthy();
+    for (const total of ["-$426.88", "₹1,450.75"]) {
+      expect(screen.getByText(total).closest("td")?.getAttribute("data-align")).toBe("right");
+      const content = screen.getByText(total).closest('[data-cell-align="right"]') as HTMLElement;
+      expect(content).toBeTruthy();
+      expect(content.style.textAlign).toBe("right");
+    }
+  });
+});

package/src/components/DataTable/nativeCardParity.spec.tsx

@@ -0,0 +1,95 @@
+/**
+ * One card renderer, two platforms.
+ *
+ * DataTableRoot.tsx (web) and index.native.tsx (native) are separate roots
+ * because native virtualizes through FlashList. The CARD LIST is not part
+ * of that split — a card has no platform-specific anatomy — so both roots
+ * render the same DataTableMobileCards rather than each drawing a card.
+ *
+ * MPO-285 shared the field RULE (classifyCardField, getColumnLabel) while
+ * leaving two copies of the JSX, and the two had already drifted: the
+ * native copy hardcoded its surface, and shipped without zebra striping,
+ * the selection checkbox, the empty states, and the TableCellContext that
+ * makes a field render chromeless. Sharing the rule alone does not stop
+ * that, because a new slot still has to be added twice.
+ *
+ * These assertions read source rather than render: the native root pulls in
+ * FlashList and the suite runs under happy-dom, so index.native.tsx is
+ * never the module a spec resolves. What the card DOES on native is covered
+ * by dataTableMobileCards.spec.tsx, which now describes both platforms.
+ */
+
+import { readdirSync, readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const DIR = resolve(__dirname);
+
+function read(file: string): string {
+  return readFileSync(resolve(DIR, file), "utf-8");
+}
+
+/** A `<Component ... />` element at a call site, as text. */
+function callSite(source: string, component: string): string {
+  const start = source.indexOf(`<${component}`);
+  if (start === -1) return "";
+  const end = source.indexOf("/>", start);
+  return end === -1 ? "" : source.slice(start, end);
+}
+
+/** Prop names that call site passes. */
+function propNames(source: string, component: string): Set<string> {
+  const names = new Set<string>();
+  for (const match of callSite(source, component).matchAll(/(?:^|\s)([A-Za-z][A-Za-z0-9]*)=\{/g)) {
+    names.add(match[1]!);
+  }
+  return names;
+}
+
+const cardCallSite = (source: string) => callSite(source, "DataTableMobileCards");
+
+describe("DataTable card renderer parity", () => {
+  it("the native root renders DataTableMobileCards and carries no card of its own", () => {
+    const native = read("index.native.tsx");
+    expect(native).toMatch(
+      /import \{[^}]*DataTableMobileCards[^}]*\} from "\.\/DataTableMobileCards"/,
+    );
+    expect(cardCallSite(native)).not.toBe("");
+    expect(native).not.toMatch(/renderMobileCard/);
+  });
+
+  it("the native root reaches the card field rule through the component, not directly", () => {
+    // MPO-285 left index.native.tsx importing classifyCardField/getColumnLabel
+    // to feed its own JSX. With the JSX shared there is nothing left to feed:
+    // an import here again would mean a second card had grown back.
+    const native = read("index.native.tsx");
+    expect(native).not.toMatch(/\bclassifyCardField\b/);
+    expect(native).not.toMatch(/\bgetColumnLabel\b/);
+  });
+
+  it("exactly one file in the component draws a card", () => {
+    const drawers = readdirSync(DIR)
+      .filter(
+        (file) => file.endsWith(".tsx") && !file.includes(".spec.") && !file.includes(".stories."),
+      )
+      .filter((file) => read(file).includes('testID="data-table-card"'));
+    expect(drawers).toEqual(["DataTableMobileCards.tsx"]);
+  });
+
+  // Both roots hand their row views the same contract. A prop web passes and
+  // native does not is how the card lost selection and the empty states in
+  // the first place, so it is the drift worth failing a build over.
+  it.each(["DataTableMobileCards", "DataTableDocumentList"])(
+    "native passes every %s prop web passes",
+    (component) => {
+      const web = propNames(read("DataTableRoot.tsx"), component);
+      const native = propNames(read("index.native.tsx"), component);
+      expect(web.size).toBeGreaterThan(0);
+      expect([...web].filter((prop) => !native.has(prop)).sort()).toEqual([]);
+    },
+  );
+
+  it("native hands the card list its press props, so a card is pressable there too", () => {
+    expect(cardCallSite(read("index.native.tsx"))).toMatch(/getRowPressProps/);
+  });
+});

package/src/components/DataTable/rowAccumulator.spec.tsx

@@ -0,0 +1,171 @@
+/**
+ * Row accumulator — a running balance across pages (MPO-250).
+ *
+ * The claim under test: a column can be a function of the row AND every row
+ * before it, the fold runs BEFORE pagination, and page two therefore
+ * continues rather than restarting from zero. That is what no table in the
+ * kit could do — `data` is the only channel and a `cell` renderer sees one
+ * row — and it is the default column in every register, statement and ledger.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import type { DataTableColumn, RowAccumulator } from "../../types";
+import { accumulateRows } from "../../utils/rowAccumulator";
+import { DataTable } from "./index";
+
+interface Posting {
+  id: string;
+  date: string;
+  payee: string;
+  /** Cents — integers, so this spec asserts the FOLD, not decimal arithmetic. */
+  amount: number;
+  /** Derived by the accumulator. Declared here so a column can name it. */
+  running?: number;
+}
+
+/** Twelve postings of +100 each: the running balance is 100, 200, … 1200. */
+const postings: Posting[] = Array.from({ length: 12 }, (_, i) => ({
+  id: `P-${String(i + 1).padStart(2, "0")}`,
+  date: `2026-01-${String(i + 1).padStart(2, "0")}`,
+  payee: `Payee ${String.fromCharCode(90 - i)}`, // Z, Y, X … — reverse of date order
+  amount: 100,
+}));
+
+const runningBalance: RowAccumulator<Posting, number> = {
+  initial: 0,
+  reduce: (carried, row) => carried + row.amount,
+  derive: (carried) => ({ running: carried }),
+  order: (a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0),
+  total: (carried) => carried,
+};
+
+const columns: DataTableColumn<Posting>[] = [
+  { id: "id", accessorKey: "id", header: "ID" },
+  { id: "payee", accessorKey: "payee", header: "Payee", sortable: true },
+  { id: "amount", accessorKey: "amount", header: "Amount" },
+  // Not sortable: sorting a fold column reorders it without refolding, so the
+  // figures stop reading down the column as a progression. Rendered with a
+  // marker so an assertion can tell a BALANCE of 100 from an AMOUNT of 100.
+  {
+    id: "running",
+    accessorKey: "running",
+    header: "Balance",
+    sortable: false,
+    cell: ({ row }) => `bal ${row.original.running}`,
+  },
+];
+
+describe("accumulateRows", () => {
+  it("folds in the declared order and returns the rows in it", () => {
+    const shuffled = [...postings].reverse();
+    const { rows, total } = accumulateRows(shuffled, runningBalance);
+    expect(rows.map((r) => r.id)).toEqual(postings.map((p) => p.id));
+    expect(rows.map((r) => r.running)).toEqual([
+      100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200,
+    ]);
+    expect(total, "the fold read once at the end is the footer total").toBe(1200);
+  });
+
+  it("keeps the input array identity when there is no accumulator", () => {
+    const { rows, total } = accumulateRows(postings);
+    expect(rows).toBe(postings);
+    expect(total).toBeUndefined();
+  });
+
+  it("calls a factory seed once per fold, so a mutable seed cannot leak", () => {
+    const perCurrency: RowAccumulator<Posting, Record<string, number>> = {
+      initial: () => ({}),
+      reduce: (carried, row) => {
+        carried["USD"] = (carried["USD"] ?? 0) + row.amount;
+        return carried;
+      },
+      derive: (carried) => ({ running: carried["USD"] }),
+    };
+    const first = accumulateRows(postings, perCurrency);
+    const second = accumulateRows(postings, perCurrency);
+    expect(first.rows[11]!.running).toBe(1200);
+    expect(second.rows[11]!.running, "the second fold starts from a fresh seed").toBe(1200);
+  });
+});
+
+describe("DataTable rowAccumulator", () => {
+  it("continues the running balance onto page two instead of restarting", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <DataTable
+        data={postings}
+        columns={columns}
+        rowAccumulator={runningBalance}
+        layout="table"
+        initialState={{ pagination: { pageIndex: 0, pageSize: 5 } }}
+      />,
+    );
+
+    // Page one: the fold's first five values.
+    await waitFor(() => expect(screen.getByText("P-01")).toBeTruthy());
+    expect(screen.getByText("bal 100")).toBeTruthy();
+    expect(screen.getByText("bal 500")).toBeTruthy();
+    expect(screen.queryByText("bal 600")).toBeNull();
+
+    // Page two CONTINUES. Before MPO-250 the only way to get a balance column
+    // was a per-row cell renderer, which would have restarted at 100 here.
+    await user.click(screen.getByLabelText("Go to next page"));
+    await waitFor(() => expect(screen.getByText("P-06")).toBeTruthy());
+    expect(screen.getByText("bal 600"), "page two starts where page one ended").toBeTruthy();
+    expect(screen.getByText("bal 1000")).toBeTruthy();
+    expect(screen.queryByText("bal 100"), "page one's first balance is gone").toBeNull();
+  });
+
+  it("does not refold when the user sorts on another column", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <DataTable
+        data={postings}
+        columns={columns}
+        rowAccumulator={runningBalance}
+        layout="table"
+        initialState={{ pagination: { pageIndex: 0, pageSize: 12 } }}
+      />,
+    );
+    await waitFor(() => expect(screen.getByText("P-01")).toBeTruthy());
+
+    // Payee runs backwards against date, so a payee sort puts the LAST
+    // posting first. Its balance stays 1200 — the fold order is the date
+    // order it was computed in, and sorting reorders rows for display only.
+    await user.click(screen.getByText("Payee"));
+    await waitFor(() => expect(screen.getByText("bal 1200")).toBeTruthy());
+    const rendered = screen.getAllByText(/^bal \d+$/).map((el) => el.textContent);
+    expect(rendered, "every folded figure is still on screen, attached to its own row").toContain(
+      "bal 1200",
+    );
+    expect(rendered).toContain("bal 100");
+  });
+});
+
+describe("the RunningBalance story", () => {
+  it("renders the register across two pages with figures that continue", async () => {
+    // The story is the documented example (AC: MPO-250). Rendering it here
+    // means it cannot rot into something that does not paginate.
+    const { RunningBalance } = await import("./DataTable.stories");
+    const user = userEvent.setup();
+    renderWithProviders(<>{(RunningBalance.render as () => React.ReactNode)()}</>);
+
+    await waitFor(() => expect(screen.getByText("Opening deposit")).toBeTruthy());
+    // Page one is P-01..P-05 and ends on Utilities: 2500.00 - 1800.00 - 84.50
+    // + 4123.00 - 146.00.
+    expect(screen.getByText("$4,592.50")).toBeTruthy();
+    expect(screen.queryByText("$4,573.75"), "page two's first balance is not here yet").toBeNull();
+
+    await user.click(screen.getByLabelText("Go to next page"));
+    await waitFor(() => expect(screen.getByText("Coffee roaster")).toBeTruthy());
+    // Page two picks the fold up rather than restarting: -18.75 on 4592.50.
+    expect(screen.getByText("$4,573.75"), "page two continues the fold").toBeTruthy();
+    expect(screen.getByText("$5,005.85")).toBeTruthy();
+    // The footer total is the same fold, read once at the end — every posting,
+    // not just this page.
+    expect(screen.getAllByText("$6,078.85").length).toBeGreaterThan(0);
+  });
+});

package/src/components/DataTableBulkActions/index.tsx

@@ -159,7 +159,6 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
         {showSelectAllMatching && (
           <Button
             size={knobProps.sizeToken}
-            variant="outlined"
             onPress={() => ctx?.table.toggleAllRowsSelected(true)}
             aria-label={`Select all ${matchingCount} matching rows`}
             {...knobProps.borderRadius}
@@ -173,7 +172,6 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
             <Button
               key={action.id}
               size={knobProps.sizeToken}
-              variant="outlined"
               theme={action.variant === "destructive" ? "red" : undefined}
               disabled={action.disabled}
               // DG-ST-03: reason renders via the Button explain affordance;
@@ -199,7 +197,6 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
 
         <Button
           size={knobProps.sizeToken}
-          variant="outlined"
           onPress={onClearSelection}
           aria-label="Clear selection"
           {...knobProps.borderRadius}
@@ -265,7 +262,6 @@ function BulkActionsOverflowMenu<T = any>({
     >
       <Button
         size={knobProps.sizeToken}
-        variant="outlined"
         icon={<DotsThreeIcon size={iconPx} />}
         aria-label="More bulk actions"
         {...knobProps.borderRadius}

package/src/components/DataTableCell/index.tsx

@@ -53,9 +53,10 @@ import { Star } from "@phosphor-icons/react";
 import { RichTextEditor } from "@multiplatform.one/rich-text";
 import { useResolvedKnobs, ensureCompositeFocusRing } from "@multiplatform.one/theme";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { View, isWeb } from "tamagui";
+import { Text, View, isWeb } from "tamagui";
 import type { DataTableFieldProps, DataTableField } from "../../types";
 import { alignToFlex, getDefaultColumnAlign } from "../../utils/columnAlign";
+import { formatMoney } from "../../utils/money";
 import { t } from "../../shared/t";
 
 export interface DataTableCellProps {
@@ -125,7 +126,9 @@ export function DataTableCell({
     max,
     step,
     precision,
-    currency: _currency,
+    currency,
+    currencyField,
+    locale,
     defaultCountry,
     otpLength,
     mentions,
@@ -171,6 +174,29 @@ export function DataTableCell({
     );
   }
 
+  // A money cell is DISPLAY, in both modes. A Currency field is a decimal
+  // STRING (a float would round it) and a grid row is not where a ledger
+  // figure gets retyped — money is edited through the form surfaces (MPO-252).
+  //
+  // Formatting reads the ROW's own currency first, because a ledger genuinely
+  // mixes currencies row by row; the column-level `currency` constant is the
+  // fallback for rows carrying none. Nothing here converts between codes —
+  // two currencies are two figures. See utils/money.ts.
+  if (field === "money") {
+    const rowCurrency = currencyField
+      ? (rowData as Record<string, unknown> | undefined)?.[currencyField]
+      : undefined;
+    const resolvedCurrency =
+      typeof rowCurrency === "string" && rowCurrency ? rowCurrency : currency;
+    return (
+      <CellWrapper justify={cellJustify}>
+        <Text numberOfLines={1} aria-label={cellName}>
+          {formatMoney(value, resolvedCurrency, locale)}
+        </Text>
+      </CellWrapper>
+    );
+  }
+
   // Read-only cells route through FieldDisplay (lightweight, view-only) rather
   // than mounting the full Edit component with disabled={true}. This keeps
   // large tables performant and gives heavy fields a purpose-built compact

package/src/components/DataTableColumnPinning/DataTableColumnPinning.stories.tsx

@@ -227,7 +227,6 @@ function BasicPinningExample() {
                             onPress={() => pinning.togglePin(header.column.id, "left")}
                             disabled={!isPinned && position !== "left" && !pinning.canPin("left")}
                             circular
-                            variant={position === "left" ? "outlined" : undefined}
                             aria-label={
                               isPinned && position === "left"
                                 ? `Unpin ${headerLabel} column`
@@ -240,7 +239,6 @@ function BasicPinningExample() {
                             onPress={() => pinning.togglePin(header.column.id, "right")}
                             disabled={!isPinned && position !== "right" && !pinning.canPin("right")}
                             circular
-                            variant={position === "right" ? "outlined" : undefined}
                             aria-label={
                               isPinned && position === "right"
                                 ? `Unpin ${headerLabel} column`
@@ -483,7 +481,6 @@ export const MaxPinnedColumns: Story = {
                     size="$2"
                     onPress={() => pinning.togglePin(column.id, "left")}
                     disabled={!pinning.isPinned(column.id) && !pinning.canPin("left")}
-                    variant={pinning.getPinPosition(column.id) === "left" ? "outlined" : undefined}
                   >
                     {pinning.getPinPosition(column.id) === "left" ? "Unpin" : "Pin Left"}
                   </Button>
@@ -491,7 +488,6 @@ export const MaxPinnedColumns: Story = {
                     size="$2"
                     onPress={() => pinning.togglePin(column.id, "right")}
                     disabled={!pinning.isPinned(column.id) && !pinning.canPin("right")}
-                    variant={pinning.getPinPosition(column.id) === "right" ? "outlined" : undefined}
                   >
                     {pinning.getPinPosition(column.id) === "right" ? "Unpin" : "Pin Right"}
                   </Button>

package/src/components/DataTableDateFilter/index.tsx

@@ -326,7 +326,6 @@ export function DataTableDateFilter({
       <Popover.Trigger asChild>
         <Button
           size={knobProps.sizeToken}
-          variant="outlined"
           disabled={disabled}
           icon={<CalendarIcon size={iconPx} />}
           justifyContent="flex-start"
@@ -370,7 +369,6 @@ export function DataTableDateFilter({
               {value && (
                 <Button
                   size={knobProps.sizeToken}
-                  variant="outlined"
                   onPress={handleClear}
                   icon={<XIcon size={iconPx} />}
                 >
@@ -391,7 +389,6 @@ export function DataTableDateFilter({
                       <Button
                         key={preset.id}
                         size={knobProps.sizeToken}
-                        variant="outlined"
                         justifyContent="flex-start"
                         onPress={() => handlePresetSelect(preset)}
                         {...(activePresetId === preset.id
@@ -418,7 +415,6 @@ export function DataTableDateFilter({
                 <Button
                   flex={1}
                   size={knobProps.sizeToken}
-                  variant="outlined"
                   onPress={() => handleCustomDateSelect(new Date().toISOString(), "is")}
                 >
                   {t("Today")}
@@ -426,7 +422,6 @@ export function DataTableDateFilter({
                 <Button
                   flex={1}
                   size={knobProps.sizeToken}
-                  variant="outlined"
                   onPress={() =>
                     handleCustomDateSelect(
                       new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
@@ -447,7 +442,6 @@ export function DataTableDateFilter({
                   <Button
                     flex={1}
                     size={knobProps.sizeToken}
-                    variant="outlined"
                     onPress={() =>
                       handleDateRangeSelect(
                         new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
@@ -460,7 +454,6 @@ export function DataTableDateFilter({
                   <Button
                     flex={1}
                     size={knobProps.sizeToken}
-                    variant="outlined"
                     onPress={() =>
                       handleDateRangeSelect(
                         new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),

package/src/components/DataTableFilterButton/index.tsx

@@ -348,7 +348,7 @@ export function DataTableFilterButton() {
 
             {editingExisting && (
               <XStack justifyContent="flex-end">
-                <Button size="$2" variant="outlined" onPress={handleRemoveCurrent}>
+                <Button size="$2" onPress={handleRemoveCurrent}>
                   {t("Remove filter")}
                 </Button>
               </XStack>

package/src/components/DataTableFilterChips/FilterChip.spec.tsx

@@ -18,6 +18,12 @@ describe("FilterChip", () => {
     renderWithProviders(<FilterChip label="Email: contains corp" onRemove={vi.fn()} />);
     expect(screen.getByText("Email: contains corp")).toBeTruthy();
     expect(screen.getByRole("button", { name: "Remove" })).toBeTruthy();
+    const fill = screen
+      .getByRole("button", { name: "Remove" })
+      .querySelector("svg")
+      ?.getAttribute("fill");
+    expect(fill).toBeTruthy();
+    expect(fill?.startsWith("$")).toBe(false);
   });
 
   it("with onPress the pill is an edit button; both focusables are tab stops (LC-71)", () => {

package/src/components/DataTableFilterChips/FilterChip.tsx

@@ -16,7 +16,7 @@ import {
   pressTargetStyle,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
-import { View, styled } from "tamagui";
+import { View, styled, useTheme } from "tamagui";
 import { t } from "../../shared/t";
 
 export interface FilterChipProps {
@@ -49,6 +49,7 @@ const DismissRing = styled(View, {
 
 export function FilterChip({ label, onRemove, onPress }: FilterChipProps) {
   const { knobProps } = useResolvedKnobs();
+  const theme = useTheme();
   if (typeof document !== "undefined") ensureCompositeFocusRing();
 
   const resolvedSize = (knobProps.sizeToken as ChipSize) || "$3";
@@ -114,7 +115,7 @@ export function FilterChip({ label, onRemove, onPress }: FilterChipProps) {
         }
       >
         <DismissRing className="mp-chip-dismiss-ring" borderRadius={knobProps.pointy ? 0 : 1000}>
-          <XIcon size={iconSize} color="$color12" />
+          <XIcon size={iconSize} color={theme.color12?.val ?? "currentColor"} />
         </DismissRing>
       </DismissButton>
     </ChipFrame>

package/src/components/DataTableFilters/index.tsx

@@ -255,7 +255,7 @@ function FilterBuilder({
       ) : null}
 
       <XStack gap="$2" justifyContent="flex-end">
-        <Button size="$3" compact variant="outlined" onPress={onCancel}>
+        <Button size="$3" compact onPress={onCancel}>
           {t("Cancel")}
         </Button>
         <Button