@multiplatform.one/table 7.4.0 → 7.5.0

package/src/components/DataTable/index.native.tsx

@@ -38,6 +38,7 @@ import { DataTableCell } from "../DataTableCell";
 import { Table } from "@multiplatform.one/table-primitives";
 import { DataTableContext } from "./DataTableContext";
 import { DataTableDocumentList } from "./DataTableDocumentList";
+import { dataTableChrome, resolveDataTableIntent, rowIntentProps } from "./dataTableChrome";
 import { tableRowStateProps } from "./rowStateChrome";
 import { DataTableStateContext } from "./DataTableStateContext";
 import type { DataTableStateContextValue } from "./DataTableStateContext";
@@ -104,8 +105,6 @@ function mapFieldToFilterType(
   }
 }
 
-const rowHeightPx = 40;
-
 function DataTableRoot<TData extends Record<string, any> = Record<string, any>>({
   data,
   columns,
@@ -160,6 +159,10 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
   size,
   compact = false,
   disabled = false,
+  accent,
+  error,
+  warning,
+  success,
   children,
   "aria-label": ariaLabel,
   "aria-describedby": ariaDescribedBy,
@@ -171,11 +174,14 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
   // the certified compact pattern; `table` pins the grid.
   const showList = layout === "list";
   const showCards = !showList && (layout === "cards" || (layout === "auto" && !sm));
+  const intent = resolveDataTableIntent({ accent, error, warning, success });
   const { knobProps, disabledState } = useResolvedKnobs({
-    intent: undefined,
+    intent,
     component: "DataTable",
     compact,
   });
+  const chrome = dataTableChrome(String(knobProps.sizeToken));
+  const rowHeightPx = chrome.rowPx;
   // Collapsed expand-caret points toward inline-end, so it mirrors in RTL via
   // glyph swap (useDirection, Axiom 15); rotation sign flips so expanded
   // still points down.
@@ -375,7 +381,11 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
       return (
         <>
           {showRowNumbers && (
-            <Table.Cell cellWidth={50} cellHeight={cellHeight as any} cellLocation="first">
+            <Table.Cell
+              cellWidth={chrome.rowNumberCol}
+              cellHeight={cellHeight as any}
+              cellLocation="first"
+            >
               <Text fontSize={knobProps.sizeToken} color="$color10">
                 {rowIndex + 1}
               </Text>
@@ -383,7 +393,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
           )}
           {enableRowExpansion && (
             <Table.Cell
-              cellWidth={32}
+              cellWidth={chrome.expandCol}
               cellHeight={cellHeight as any}
               cellLocation={showRowNumbers ? "middle" : "first"}
             >
@@ -408,12 +418,12 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
                   }
                 >
                   <ExpandCaretIcon
-                    size={14}
+                    size={chrome.iconPx}
                     style={{ transform: row.getIsExpanded() ? expandedCaretRotation : "none" }}
                   />
                 </View>
               ) : (
-                <View width={14} />
+                <View width={chrome.iconPx} />
               )}
             </Table.Cell>
           )}
@@ -435,7 +445,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
           })}
           {showDeleteRow && !readOnly && (
             <Table.Cell
-              cellWidth={60}
+              cellWidth={chrome.deleteCol}
               cellHeight={cellHeight as any}
               cellLocation="last"
               justifyContent="center"
@@ -533,6 +543,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
           "data-table-zebra": tableZebraOn ? (index % 2 === 0 ? "even" : "odd") : "off",
         } as any)}
         {...(getRowPressProps(row, index) as any)}
+        {...(rowIntentProps(row.original) as any)}
       >
         {renderRowContent(row, index)}
       </Table.Row>
@@ -554,6 +565,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
           padding="$3"
           marginBottom="$2"
           {...(getRowPressProps(row, index) as any)}
+          {...(rowIntentProps(rowData) as any)}
         >
           {showRowNumbers && (
             <View
@@ -813,7 +825,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
                       alignCells={{ x: "start", y: "center" }}
                       alignHeaderCells={{ x: "start", y: "center" }}
                       cellHeight={cellHeight}
-                      {...knobProps.borderRadius}
+                      {...knobProps.borderRadiusOuter}
                       width="100%"
                       marginBottom={enablePagination ? "$10" : undefined}
                       aria-label={ariaLabel || "Data table"}
@@ -830,22 +842,28 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
                             key={headerGroup.id}
                             backgroundColor="$color2"
                             rowLocation={groupIndex === 0 ? "first" : "middle"}
-                            borderTopRightRadius="$4"
-                            borderTopLeftRadius="$4"
+                            borderTopRightRadius={knobProps.borderRadiusOuter.borderRadius}
+                            borderTopLeftRadius={knobProps.borderRadiusOuter.borderRadius}
                             borderBottomLeftRadius="$0"
                             borderBottomRightRadius="$0"
                             aria-rowindex={groupIndex}
                           >
                             {showRowNumbers && (
-                              <Table.HeaderCell cellWidth={50} cellHeight={cellHeight as any}>
-                                <Text fontSize="$4" fontWeight="600">
+                              <Table.HeaderCell
+                                cellWidth={chrome.rowNumberCol}
+                                cellHeight={cellHeight as any}
+                              >
+                                <Text fontSize={knobProps.sizeToken} fontWeight="600">
                                   #
                                 </Text>
                               </Table.HeaderCell>
                             )}
                             {enableRowExpansion && (
-                              <Table.HeaderCell cellWidth={32} cellHeight={cellHeight as any}>
-                                <View width={14} />
+                              <Table.HeaderCell
+                                cellWidth={chrome.expandCol}
+                                cellHeight={cellHeight as any}
+                              >
+                                <View width={chrome.iconPx} />
                               </Table.HeaderCell>
                             )}
                             {headerGroup.headers.map((header, headerIndex) => {
@@ -888,7 +906,11 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
                                     justifyContent="flex-start"
                                     flex={1}
                                   >
-                                    <Text fontSize="$4" selectable={false} userSelect="none">
+                                    <Text
+                                      fontSize={knobProps.sizeToken}
+                                      selectable={false}
+                                      userSelect="none"
+                                    >
                                       {header.isPlaceholder
                                         ? null
                                         : flexRender(
@@ -902,14 +924,18 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
                                         role="presentation"
                                         color={sortDirection ? "$color10" : "$color8"}
                                       >
-                                        {sortDirection === "asc" && <CaretDownIcon size={14} />}
+                                        {sortDirection === "asc" && (
+                                          <CaretDownIcon size={chrome.iconPx} />
+                                        )}
                                         {sortDirection === "desc" && (
                                           <CaretDownIcon
-                                            size={14}
+                                            size={chrome.iconPx}
                                             style={{ transform: "rotate(180deg)" }}
                                           />
                                         )}
-                                        {sortDirection === false && <CaretUpDownIcon size={14} />}
+                                        {sortDirection === false && (
+                                          <CaretUpDownIcon size={chrome.iconPx} />
+                                        )}
                                       </Text>
                                     )}
                                     {pinning && (
@@ -925,7 +951,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
                             })}
                             {showDeleteRow && !readOnly && (
                               <Table.HeaderCell
-                                cellWidth={60}
+                                cellWidth={chrome.deleteCol}
                                 cellHeight={cellHeight as any}
                                 cellLocation="last"
                               />

package/src/components/DataTableBulkActions/index.tsx

@@ -6,6 +6,7 @@ import { Button, zIndex } from "@multiplatform.one/forms";
 import { ConfirmDialog, DropdownMenu } from "@multiplatform.one/components";
 import { Text, View, XStack } from "tamagui";
 import type { BulkAction } from "../../types";
+import { iconSizeForToken } from "../../utils/chromeIcons";
 import { withInterp } from "../../utils/withInterp";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
 
@@ -137,7 +138,7 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
         data-bulk-bar-placement={placement}
       >
         {showSelectionCount && (
-          <Text fontSize="$3" fontWeight="600" color={countColor}>
+          <Text {...knobProps.label} fontWeight="400" color={countColor}>
             {/* D-15: one whole-sentence key per variant (never concatenated
                 fragments — word order is locale-owned); withInterp fills the
                 params when no i18n instance is mounted (house table pattern). */}
@@ -167,7 +168,7 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
           </Button>
         )}
 
-        <XStack gap="$2" flex={1}>
+        <XStack {...knobProps.gap} flex={1}>
           {visibleActions.map((action) => (
             <Button
               key={action.id}
@@ -246,6 +247,7 @@ function BulkActionsOverflowMenu<T = any>({
   isExecuting,
 }: BulkActionsOverflowMenuProps<T>) {
   const { knobProps } = useResolvedKnobs();
+  const iconPx = iconSizeForToken(String(knobProps.sizeToken));
   return (
     <DropdownMenu
       items={actions.map((action) => ({
@@ -264,7 +266,7 @@ function BulkActionsOverflowMenu<T = any>({
       <Button
         size={knobProps.sizeToken}
         variant="outlined"
-        icon={<DotsThreeIcon size={16} />}
+        icon={<DotsThreeIcon size={iconPx} />}
         aria-label="More bulk actions"
         {...knobProps.borderRadius}
       />

package/src/components/DataTableCell/CellModalEditor.native.tsx

@@ -95,7 +95,6 @@ export function CellModalEditor({
           width="100%"
           paddingHorizontal="$1"
           paddingVertical="$1"
-          borderRadius="$2"
           {...(label
             ? { accessibilityLabel: label, accessibilityRole: "button" as const }
             : undefined)}
@@ -104,12 +103,10 @@ export function CellModalEditor({
         </View>
       }
     >
-      <YStack gap="$3">
-        <Text {...knobProps.heading} fontSize="$5" fontWeight="600">
-          {title ?? t("Edit")}
-        </Text>
+      <YStack {...knobProps.gap}>
+        <Text {...knobProps.heading}>{title ?? t("Edit")}</Text>
         <YStack minHeight={0}>{children(draft ? draft.value : value, handleDraftChange)}</YStack>
-        <XStack gap="$2" justifyContent="flex-end">
+        <XStack {...knobProps.gap} justifyContent="flex-end">
           {/* LC-30 CANCEL-ALWAYS-LIVE: the discard exit never disables. */}
           <Button onPress={handleCancel}>{t("Cancel")}</Button>
           <Button onPress={() => handleOpenChange(false)}>{t("Done")}</Button>

package/src/components/DataTableCell/CellModalEditor.tsx

@@ -12,12 +12,12 @@
  * footer stays within the two-action dialog budget (LC-31).
  */
 
-import { DialogOverlay } from "@multiplatform.one/components";
-import { FieldDisplay, type FieldDisplayType } from "@multiplatform.one/forms";
+import { DialogContent, DialogOverlay } from "@multiplatform.one/components";
+import { Button, FieldDisplay, type FieldDisplayType } from "@multiplatform.one/forms";
 import { TableCellContext } from "@multiplatform.one/table-primitives";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useCallback, useRef, useState, type ReactNode } from "react";
-import { Button, Dialog, Text, View, XStack, YStack, isWeb } from "tamagui";
+import { Dialog, View, XStack, YStack, isWeb } from "tamagui";
 import { t } from "../../shared/t";
 
 export interface CellModalEditorProps {
@@ -127,7 +127,6 @@ export function CellModalEditor({
         width="100%"
         paddingHorizontal="$1"
         paddingVertical="$1"
-        borderRadius="$2"
         hoverStyle={!triggerLocked ? { backgroundColor: "$backgroundHover" } : undefined}
         // LC-71: parent CellWrapper paints the one ring on the cell boundary.
         outlineWidth={0}
@@ -148,13 +147,7 @@ export function CellModalEditor({
       <Dialog open={open} onOpenChange={handleOpenChange} modal>
         <Dialog.Portal>
           <DialogOverlay opacity={0.5} />
-          <Dialog.Content
-            borderWidth={1}
-            borderColor="$borderColor"
-            elevation={knobProps.elevation}
-            transition={knobProps.transition}
-            enterStyle={{ y: -10, opacity: 0, scale: 0.96 }}
-            exitStyle={{ y: 10, opacity: 0, scale: 0.96 }}
+          <DialogContent
             maxWidth={720}
             maxHeight="80vh"
             width="90vw"
@@ -164,29 +157,25 @@ export function CellModalEditor({
               discardRef.current = true;
             }}
           >
-            <Dialog.Title>
-              <Text fontSize="$5" fontWeight="600">
-                {title ?? t("Edit")}
-              </Text>
-            </Dialog.Title>
+            <Dialog.Title {...knobProps.heading}>{title ?? t("Edit")}</Dialog.Title>
             {/* flexShrink (not flex-basis 0): in the auto-height dialog a
                 basis-0 wrapper collapses and its children paint over the
                 footer / past the dialog frame (LC-10). The context reset
                 restores full field chrome — the modal is not a table cell,
                 but React context flows through the Dialog portal. */}
-            <YStack flexShrink={1} minHeight={0} marginTop="$3" marginBottom="$4">
+            <YStack flexShrink={1} minHeight={0}>
               <TableCellContext.Provider value={{ inTableCell: false }}>
                 {children(draft ? draft.value : value, handleDraftChange)}
               </TableCellContext.Provider>
             </YStack>
-            <XStack gap="$2" justifyContent="flex-end">
+            <XStack {...knobProps.gap} justifyContent="flex-end">
               {/* LC-30 CANCEL-ALWAYS-LIVE: the discard exit never disables. */}
               <Button onPress={handleCancel}>{t("Cancel")}</Button>
-              <Dialog.Close asChild>
-                <Button theme="accent">{t("Done")}</Button>
-              </Dialog.Close>
+              <Button theme="accent" onPress={() => handleOpenChange(false)}>
+                {t("Done")}
+              </Button>
             </XStack>
-          </Dialog.Content>
+          </DialogContent>
         </Dialog.Portal>
       </Dialog>
     </>

package/src/components/DataTableCell/CellOptionsEditor.tsx

@@ -57,7 +57,6 @@ export function CellOptionsEditor({
       width="100%"
       paddingHorizontal="$1"
       paddingVertical="$1"
-      borderRadius="$2"
       opacity={disabled ? 0.5 : 1}
       // LC-71: the parent CellWrapper paints the one ring; this face must
       // not add a second outline on keyboard focus.

package/src/components/DataTableCell/cellDraftPolicy.spec.tsx

@@ -255,7 +255,14 @@ vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
   Signature: createMock("Signature"),
   Geolocation: createMock("Geolocation"),
   ColorPicker: createMock("ColorPicker"),
-  Button: createMock("Button"),
+  Button: ({
+    children,
+    onPress,
+    ...props
+  }: {
+    children?: React.ReactNode;
+    onPress?: (event: unknown) => void;
+  }) => React.createElement("button", { type: "button", ...props, onClick: onPress }, children),
   FieldDisplay: (props: any) =>
     React.createElement("div", {
       "data-testid": "mock-FieldDisplay",

package/src/components/DataTableCell/cellModalEditor.spec.tsx

@@ -0,0 +1,82 @@
+/**
+ * CellModalEditor design-law tests — the modal is SF-OVERLAY / E-OVERLAY.
+ *
+ * The house DialogContent owns elevatedSurface + containerRadius + transition
+ * (LC-18). A fixed 1px border on Dialog.Content was the recorded GAP; this
+ * spec locks the recipe path so it cannot regress to a handwritten frame.
+ */
+
+import React from "react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+const dialogContentProps: Record<string, unknown>[] = [];
+
+vi.mock("@multiplatform.one/components", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@multiplatform.one/components")>();
+  return {
+    ...actual,
+    DialogContent: (props: Record<string, unknown>) => {
+      dialogContentProps.push(props);
+      return React.createElement(
+        "div",
+        { "data-testid": "cell-modal-dialog-content" },
+        props.children as React.ReactNode,
+      );
+    },
+  };
+});
+
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/forms")>()),
+  FieldDisplay: (props: { field?: string }) =>
+    React.createElement("div", {
+      "data-testid": "mock-FieldDisplay",
+      "data-field": props.field,
+    }),
+  Button: ({
+    children,
+    onPress,
+    ...props
+  }: {
+    children?: React.ReactNode;
+    onPress?: (event: unknown) => void;
+  }) => React.createElement("button", { type: "button", ...props, onClick: onPress }, children),
+}));
+
+import { CellModalEditor } from "./CellModalEditor";
+
+describe("CellModalEditor — overlay recipes", () => {
+  it("opens DialogContent without a fixed 1px border (SF-OVERLAY recipe path)", async () => {
+    dialogContentProps.length = 0;
+    renderWithProviders(
+      <CellModalEditor
+        field="textarea"
+        value="hello"
+        onCommit={vi.fn()}
+        title="Edit text"
+        label="Notes"
+      >
+        {(draft, onDraftChange) =>
+          React.createElement("textarea", {
+            "data-testid": "draft-editor",
+            value: draft,
+            onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) =>
+              onDraftChange(event.target.value),
+          })
+        }
+      </CellModalEditor>,
+    );
+
+    fireEvent.click(screen.getByTestId("mock-FieldDisplay"));
+    await waitFor(() => expect(screen.getByTestId("cell-modal-dialog-content")).toBeTruthy());
+
+    const frame = dialogContentProps.at(-1);
+    expect(frame).toBeTruthy();
+    expect(frame?.borderWidth).toBeUndefined();
+    expect(frame?.borderColor).toBeUndefined();
+    expect(screen.getByRole("button", { name: "Cancel" })).not.toBeDisabled();
+    expect(screen.getByRole("button", { name: "Done" })).toBeTruthy();
+  });
+});

package/src/components/DataTableCell/dataTableCell.spec.tsx

@@ -83,7 +83,14 @@ vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
   Signature: createMock("Signature"),
   Geolocation: createMock("Geolocation"),
   ColorPicker: createMock("ColorPicker"),
-  Button: createMock("Button"),
+  Button: ({
+    children,
+    onPress,
+    ...props
+  }: {
+    children?: React.ReactNode;
+    onPress?: (event: unknown) => void;
+  }) => React.createElement("button", { type: "button", ...props, onClick: onPress }, children),
   // Compact in-cell summary used by CellModalEditor; expose the routed field
   // type so tests can assert which field the cell delegates to.
   FieldDisplay: (props: any) =>

package/src/components/DataTableColumnPinning/index.tsx

@@ -10,6 +10,7 @@ import { useCallback, useMemo, useState } from "react";
 import { Text, View, isWeb, styled } from "tamagui";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
 import { t } from "../../shared/t";
+import { iconSizeForToken } from "../../utils/chromeIcons";
 
 // DG-LAY-04 / SP-FIXED: the pin glyph stays small (~22px incl. padding) but the
 // press target is floored at 44×44 via hitSlop; negative margins keep header
@@ -85,6 +86,7 @@ export function DataTableColumnPinning<TData>(props: DataTableColumnPinningProps
   const { onPinChange, maxPinnedColumns = 3, allowPinning = true, disabled = false } = props;
 
   const { knobProps } = useResolvedKnobs();
+  const iconPx = iconSizeForToken(String(knobProps.sizeToken));
 
   // Get fresh table state on each render
   const pinnedColumns = table.getState().columnPinning || {
@@ -271,16 +273,16 @@ export function DataTableColumnPinning<TData>(props: DataTableColumnPinningProps
             flexDirection="row"
             alignItems="center"
             justifyContent="center"
-            gap={2}
+            gap={knobProps.gap.gap}
             {...(next === "none" ? undefined : { hoverStyle: { backgroundColor: "$color4" } })}
           >
             <PushPinIcon
-              size={14}
+              size={iconPx}
               color={pinned ? "var(--accentColor)" : "var(--color10)"}
               weight={pinned ? "fill" : "regular"}
             />
             {pinned && currentPosition ? (
-              <Text fontSize={10} color="$color10">
+              <Text {...knobProps.label} fontWeight="400" color="$color10">
                 {currentPosition === "left" ? "L" : "R"}
               </Text>
             ) : null}
@@ -288,7 +290,7 @@ export function DataTableColumnPinning<TData>(props: DataTableColumnPinningProps
         </View>
       );
     },
-    [allowPinning, disabled, getPinPosition, canPin, cyclePin, table],
+    [allowPinning, disabled, getPinPosition, canPin, cyclePin, table, iconPx, knobProps],
   );
 
   const pinnedLeftColumns = useMemo(() => {

package/src/components/DataTableDateFilter/index.tsx

@@ -21,6 +21,7 @@ import {
   getVariableValue,
 } from "tamagui";
 import { t } from "../../shared/t";
+import { iconSizeForToken } from "../../utils/chromeIcons";
 
 export type DateFilterOperator =
   | "is"
@@ -91,6 +92,7 @@ export function DataTableDateFilter({
 }: DataTableDateFilterProps) {
   const { knobProps } = useResolvedKnobs();
   const sz = knobProps.sizeToken;
+  const iconPx = iconSizeForToken(String(sz));
   const triggerMinWidth = sz === "$3" ? 160 : sz === "$5" ? 240 : 200;
   const popoverMinWidth = sz === "$3" ? 280 : sz === "$5" ? 360 : 320;
   // Row height derives from the same size token the preset Buttons render
@@ -114,25 +116,25 @@ export function DataTableDateFilter({
       id: "today",
       label: t("Today"),
       operator: "isToday",
-      icon: <CalendarIcon size={16} />,
+      icon: <CalendarIcon size={iconPx} />,
     },
     {
       id: "yesterday",
       label: t("Yesterday"),
       operator: "isYesterday",
-      icon: <CalendarIcon size={16} />,
+      icon: <CalendarIcon size={iconPx} />,
     },
     {
       id: "thisWeek",
       label: t("This Week"),
       operator: "isThisWeek",
-      icon: <CalendarDotsIcon size={16} />,
+      icon: <CalendarDotsIcon size={iconPx} />,
     },
     {
       id: "thisMonth",
       label: t("This Month"),
       operator: "isThisMonth",
-      icon: <CalendarDotsIcon size={16} />,
+      icon: <CalendarDotsIcon size={iconPx} />,
     },
     {
       id: "last7days",
@@ -142,7 +144,7 @@ export function DataTableDateFilter({
         new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
         new Date().toISOString(),
       ],
-      icon: <CalendarBlankIcon size={16} />,
+      icon: <CalendarBlankIcon size={iconPx} />,
     },
     {
       id: "last30days",
@@ -152,19 +154,19 @@ export function DataTableDateFilter({
         new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),
         new Date().toISOString(),
       ],
-      icon: <CalendarBlankIcon size={16} />,
+      icon: <CalendarBlankIcon size={iconPx} />,
     },
     {
       id: "empty",
       label: t("Is Empty"),
       operator: "isEmpty",
-      icon: <XIcon size={16} />,
+      icon: <XIcon size={iconPx} />,
     },
     {
       id: "notEmpty",
       label: t("Is Not Empty"),
       operator: "isNotEmpty",
-      icon: <ClockIcon size={16} />,
+      icon: <ClockIcon size={iconPx} />,
     },
   ];
 
@@ -326,7 +328,7 @@ export function DataTableDateFilter({
           size={knobProps.sizeToken}
           variant="outlined"
           disabled={disabled}
-          icon={<CalendarIcon size={16} />}
+          icon={<CalendarIcon size={iconPx} />}
           justifyContent="flex-start"
           minWidth={triggerMinWidth}
         >
@@ -341,7 +343,7 @@ export function DataTableDateFilter({
           >
             {getDisplayValue()}
           </Text>
-          <CaretDownIcon size={16} />
+          <CaretDownIcon size={iconPx} />
         </Button>
       </Popover.Trigger>
 
@@ -362,15 +364,15 @@ export function DataTableDateFilter({
         <Popover.ScrollView minHeight={0}>
           <YStack {...knobProps.panelPadding} {...knobProps.gapLg}>
             <XStack justifyContent="space-between" alignItems="center">
-              <Text fontSize="$5" fontWeight="600">
+              <Text {...knobProps.label} fontWeight="400">
                 {t("Date Filter")}
               </Text>
               {value && (
                 <Button
-                  size="$2"
+                  size={knobProps.sizeToken}
                   variant="outlined"
                   onPress={handleClear}
-                  icon={<XIcon size={16} />}
+                  icon={<XIcon size={iconPx} />}
                 >
                   {t("Clear")}
                 </Button>
@@ -380,7 +382,7 @@ export function DataTableDateFilter({
             {/* Quick Presets */}
             {showPresets && (
               <YStack gap="$2">
-                <Text fontSize="$4" fontWeight="500">
+                <Text {...knobProps.label} fontWeight="400">
                   {t("Quick Filters")}
                 </Text>
                 <ScrollView maxHeight={presetListMaxHeight}>
@@ -408,7 +410,7 @@ export function DataTableDateFilter({
 
             {/* Custom Date Selection */}
             <YStack {...knobProps.gap}>
-              <Text fontSize="$4" fontWeight="500">
+              <Text {...knobProps.label} fontWeight="400">
                 {t("Custom Date")}
               </Text>
 
@@ -438,7 +440,7 @@ export function DataTableDateFilter({
 
               {/* Date Range */}
               <YStack gap="$2">
-                <Text fontSize="$3" fontWeight="500">
+                <Text {...knobProps.label} fontWeight="400">
                   {t("Date Range")}
                 </Text>
                 <XStack gap="$2">
@@ -473,7 +475,7 @@ export function DataTableDateFilter({
 
               {/* DatePicker-based Custom Range Selection */}
               <YStack gap="$2">
-                <Text fontSize="$3" fontWeight="500">
+                <Text {...knobProps.label} fontWeight="400">
                   {t("Custom Range")}
                 </Text>
                 <XStack gap="$2">