@multiplatform.one/forms 7.34.3 → 7.35.0

package/src/fields/Checkbox/CheckboxBox.spec.tsx

@@ -9,9 +9,19 @@
  * silently — nothing today would notice if the hit target grew a wash or the
  * glyph started stealing the press.
  */
-import { cleanup } from "@testing-library/react";
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { configWithoutAnimations } from "@tamagui/config";
+import { createTamagui, TamaguiProvider } from "tamagui";
+import {
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+} from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { afterEach, describe, expect, it, vi } from "vitest";
+import { Checkbox } from "./index";
 import {
   CHECKBOX_GLYPH_MAX_RADIUS_TOKEN,
   CHECKBOX_TARGET_PX,
@@ -25,6 +35,19 @@ import {
   isCircularCheckboxRadius,
 } from "./CheckboxBox";
 
+const houseConfig = createTamagui({
+  ...configWithoutAnimations,
+  themes: createThemesBuilder(defaultBaseTheme, defaultAccentTheme, defaultBuilderOptions).themes(),
+});
+
+function renderWithHouseThemes(ui: ReactElement) {
+  return render(
+    <TamaguiProvider config={houseConfig} defaultTheme="light" disableInjectCSS>
+      {ui}
+    </TamaguiProvider>,
+  );
+}
+
 afterEach(cleanup);
 
 /**
@@ -228,9 +251,9 @@ describe("CheckboxBox — keyboard-modality focus handlers", () => {
   it("tracks hover in and out", () => {
     const setHovered = vi.fn();
     const handlers = checkboxKbFocusHandlers(vi.fn(), setHovered);
-    handlers.onHoverIn?.({});
+    handlers.onMouseEnter?.({});
     expect(setHovered).toHaveBeenLastCalledWith(true);
-    handlers.onHoverOut?.({});
+    handlers.onMouseLeave?.({});
     expect(setHovered).toHaveBeenLastCalledWith(false);
   });
 
@@ -245,10 +268,14 @@ describe("CheckboxBox — keyboard-modality focus handlers", () => {
     const event = { id: 1 };
     handlers.onFocus?.(event);
     handlers.onBlur?.(event);
-    handlers.onHoverIn?.(event);
-    handlers.onHoverOut?.(event);
+    handlers.onMouseEnter?.(event);
+    handlers.onMouseLeave?.(event);
     expect(rest.onFocus).toHaveBeenCalledWith(event);
     expect(rest.onBlur).toHaveBeenCalledWith(event);
+    expect(handlers.onHoverIn).toBeUndefined();
+    expect(handlers.onHoverOut).toBeUndefined();
+    expect(rest.onHoverIn).toHaveBeenCalledTimes(1);
+    expect(rest.onHoverOut).toHaveBeenCalledTimes(1);
     expect(rest.onHoverIn).toHaveBeenCalledWith(event);
     expect(rest.onHoverOut).toHaveBeenCalledWith(event);
   });
@@ -258,8 +285,8 @@ describe("CheckboxBox — keyboard-modality focus handlers", () => {
     expect(() => {
       handlers.onFocus?.({});
       handlers.onBlur?.({});
-      handlers.onHoverIn?.({});
-      handlers.onHoverOut?.({});
+      handlers.onMouseEnter?.({});
+      handlers.onMouseLeave?.({});
     }).not.toThrow();
   });
 });
@@ -332,18 +359,16 @@ describe("CheckboxGlyphBox — the painted box", () => {
   });
 
   it("takes the checked border off the boundary ramp entirely, so it is a fill and not a second outline", () => {
-    const { container } = renderWithProviders(
+    const { container } = renderWithHouseThemes(
       <CheckboxGlyphBox glyphSize={20} isMarked kbFocus={false} borderWidth={2} borderRadius={5} />,
     );
     const painted = classesOf(glyph(container));
-    expect(painted).not.toContain("_btc-color10");
+    expect(painted).not.toContain("_btc-boundaryCol");
     expect(painted).not.toContain("_btc-color11");
   });
 
   it("moves the idle border from the boundary tier to the press tier on hover", () => {
-    // formControlColors.boundary = $color10 (DF-06: the edge that carries the
-    // shape, >=3:1), thumb.press = $color11.
-    const idle = renderWithProviders(
+    const idle = renderWithHouseThemes(
       <CheckboxGlyphBox
         glyphSize={20}
         isMarked={false}
@@ -352,9 +377,9 @@ describe("CheckboxGlyphBox — the painted box", () => {
         borderRadius={5}
       />,
     );
-    expect(classesOf(glyph(idle.container))).toContain("_btc-color10");
+    expect(classesOf(glyph(idle.container))).toContain("_btc-boundaryCol");
     cleanup();
-    const hovered = renderWithProviders(
+    const hovered = renderWithHouseThemes(
       <CheckboxGlyphBox
         glyphSize={20}
         isMarked={false}
@@ -393,3 +418,14 @@ describe("CheckboxGlyphBox — the painted box", () => {
     expect(container.querySelector("[data-mark]")).toBeTruthy();
   });
 });
+
+it("changes an unchecked Checkbox's border on mouse enter and restores it on leave", () => {
+  const { container, getByRole } = renderWithHouseThemes(<Checkbox label="x" />);
+  const box = glyph(container);
+  const frame = getByRole("checkbox");
+  expect(box.className).toContain("_btc-boundaryCol");
+  fireEvent.mouseEnter(frame);
+  expect(box.className).toContain("_btc-color11");
+  fireEvent.mouseLeave(frame);
+  expect(box.className).toContain("_btc-boundaryCol");
+});

package/src/fields/Checkbox/CheckboxBox.tsx

@@ -112,11 +112,13 @@ export function checkboxKbFocusHandlers(
       setKbFocus(false);
       rest?.onBlur?.(e);
     },
-    onHoverIn: (e: any) => {
+    onHoverIn: undefined,
+    onHoverOut: undefined,
+    onMouseEnter: (e: any) => {
       setHovered(true);
       rest?.onHoverIn?.(e);
     },
-    onHoverOut: (e: any) => {
+    onMouseLeave: (e: any) => {
       setHovered(false);
       rest?.onHoverOut?.(e);
     },

package/src/fields/Checkbox/CheckboxCard.heading.spec.tsx

@@ -0,0 +1,29 @@
+import { createDefaultThemeConfig, Preset } from "@multiplatform.one/theme";
+import { cleanup, render } from "@testing-library/react";
+import { TamaguiProvider } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { CheckboxCardLabel } from "./CheckboxCard";
+
+const themeConfig = createDefaultThemeConfig();
+
+afterEach(cleanup);
+
+describe("CheckboxCardLabel heading weight table", () => {
+  for (const fontWeight of ["regular", "bold"] as const) {
+    for (const [size, expected] of [
+      ["$4", "600"],
+      ["$6", "700"],
+    ] as const) {
+      it(`uses ${expected} at ${size} under ${fontWeight} without a knob weight override`, () => {
+        const { getByText } = render(
+          <TamaguiProvider config={themeConfig.tamagui} defaultTheme="light">
+            <Preset overrides={{ fontWeight }}>
+              <CheckboxCardLabel size={size}>Card option</CheckboxCardLabel>
+            </Preset>
+          </TamaguiProvider>,
+        );
+        expect(getComputedStyle(getByText("Card option")).fontWeight).toBe(expected);
+      });
+    }
+  }
+});

package/src/fields/Checkbox/CheckboxCard.spec.tsx

@@ -8,7 +8,16 @@
  * extra border" and T-HELPER's "the description is one step under the field
  * size" — both are one-line edits away from silently regressing.
  */
-import { cleanup } from "@testing-library/react";
+import { cleanup, render } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { configWithoutAnimations } from "@tamagui/config";
+import { createTamagui, TamaguiProvider } from "tamagui";
+import {
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+} from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { afterEach, describe, expect, it } from "vitest";
 import {
@@ -20,6 +29,21 @@ import {
   getCheckboxCardLayout,
 } from "./CheckboxCard";
 
+import { CheckboxGlyphBox } from "./CheckboxBox";
+
+const houseConfig = createTamagui({
+  ...configWithoutAnimations,
+  themes: createThemesBuilder(defaultBaseTheme, defaultAccentTheme, defaultBuilderOptions).themes(),
+});
+
+function renderWithHouseThemes(ui: ReactElement) {
+  return render(
+    <TamaguiProvider config={houseConfig} defaultTheme="light" disableInjectCSS>
+      {ui}
+    </TamaguiProvider>,
+  );
+}
+
 afterEach(cleanup);
 
 /**
@@ -69,34 +93,27 @@ describe("getCardDescriptionSize — T-HELPER is one step under the field", () =
   });
 });
 
-describe("getCheckboxCardLayout — compact metrics off the space knob", () => {
-  it("gives each space stop its own padding and gap", () => {
-    expect(getCheckboxCardLayout("none")).toEqual({
-      paddingVertical: "$2.5",
-      paddingHorizontal: "$3",
-      gap: "$2.5",
+describe("getCheckboxCardLayout — card metrics off the size token", () => {
+  it("the default token takes the ~$3 row; a larger token steps a half key up", () => {
+    expect(getCheckboxCardLayout("$true")).toEqual({
+      paddingVertical: "$3",
+      paddingHorizontal: "$3.5",
+      gap: "$3",
     });
-    expect(getCheckboxCardLayout("large")).toEqual({
+    expect(getCheckboxCardLayout("$5")).toEqual({
       paddingVertical: "$3.5",
       paddingHorizontal: "$4",
       gap: "$3.5",
     });
   });
 
-  it("makes small and medium deliberately identical", () => {
-    expect(getCheckboxCardLayout("small")).toEqual(getCheckboxCardLayout("medium"));
-  });
-
-  it("falls back to medium for an unknown stop rather than throwing", () => {
-    expect(getCheckboxCardLayout("enormous")).toEqual(getCheckboxCardLayout("medium"));
-    expect(getCheckboxCardLayout("")).toEqual(getCheckboxCardLayout("medium"));
+  it("a smaller token keeps the default row", () => {
+    expect(getCheckboxCardLayout("$3")).toEqual(getCheckboxCardLayout("$true"));
   });
 
-  it("grows monotonically from none to large", () => {
-    const stops = ["none", "small", "large"].map((s) => getCheckboxCardLayout(s));
-    const num = (token: string) => Number(token.replace("$", ""));
-    expect(num(stops[0].paddingVertical)).toBeLessThanOrEqual(num(stops[1].paddingVertical));
-    expect(num(stops[1].paddingVertical)).toBeLessThan(num(stops[2].paddingVertical));
+  it("an unknown token reads as the default rather than throwing", () => {
+    expect(getCheckboxCardLayout("enormous")).toEqual(getCheckboxCardLayout("$true"));
+    expect(getCheckboxCardLayout("")).toEqual(getCheckboxCardLayout("$true"));
   });
 });
 
@@ -113,18 +130,18 @@ describe("CheckboxCardFrame — control leading, whole card interactive", () =>
     expect(painted(container, "_fd-row")).toContain("_cur-pointer");
   });
 
-  it("carries exactly one border at rest, on the $color6 seam", () => {
+  it("carries exactly one border at rest, using the template border", () => {
     const { container } = renderWithProviders(<CheckboxCardFrame />);
     const card = painted(container, "_fd-row");
     expect(card).toContain("_btw-1px");
-    expect(card).toContain("_btc-color6");
+    expect(card).toContain("_btc-borderColor");
   });
 
-  it("moves the border one step up the ramp on hover, and only on hover", () => {
+  it("uses the hover border only on hover", () => {
     const { container } = renderWithProviders(<CheckboxCardFrame />);
     const card = painted(container, "_fd-row");
     expect(card).toContain("_btc-0hover-color7");
-    expect(card).toContain("_btc-color6");
+    expect(card).toContain("_btc-borderColor");
   });
 
   it("LC-71: active changes the FILL and leaves the border exactly where it was", () => {
@@ -138,7 +155,24 @@ describe("CheckboxCardFrame — control leading, whole card interactive", () =>
     expect(activeCard).not.toContain("_bg-color2");
     // the border is untouched: same width, same colour, no second outline
     expect(activeCard).toContain("_btw-1px");
-    expect(activeCard).toContain("_btc-color6");
+    expect(activeCard).toContain("_btc-borderColor");
+  });
+
+  it("the empty checkbox inside the card paints the held boundary ink", () => {
+    const { container } = renderWithHouseThemes(
+      <CheckboxCardFrame>
+        <CheckboxGlyphBox
+          glyphSize={20}
+          isMarked={false}
+          kbFocus={false}
+          borderWidth={2}
+          borderRadius={5}
+        />
+      </CheckboxCardFrame>,
+    );
+    expect(classesOf(container.querySelector("[data-checkbox-box='true']"))).toContain(
+      "_btc-boundaryCol",
+    );
   });
 
   it("renders the control and the text column it is given", () => {
@@ -168,10 +202,11 @@ describe("CheckboxCardContent — the text column", () => {
 });
 
 describe("CheckboxCardLabel and CheckboxCardDescription", () => {
-  it("makes the label the bold, full-contrast first line", () => {
+  it("uses the default heading weight table and full contrast", () => {
     const { container } = renderWithProviders(<CheckboxCardLabel>Label</CheckboxCardLabel>);
     const label = classesOf(container.querySelector("p"));
-    expect(label).toContain("_fow-600");
+    expect(label).toContain("font_heading");
+    expect(label).toContain("_fow-f-weight-4");
     expect(label).toContain("_lh-20px");
     expect(label).toContain("_col-color12");
   });

package/src/fields/Checkbox/CheckboxCard.tsx

@@ -1,3 +1,4 @@
+import { sizeTokenStep } from "@multiplatform.one/theme";
 import type { FontSizeTokens, SizeTokens } from "tamagui";
 import { Paragraph, View, styled } from "tamagui";
 import { formCardColors, formCommonColors } from "../../shared/colorRamps";
@@ -41,9 +42,8 @@ export const CheckboxCardContent = styled(View, {
   gap: "$0.5",
 });
 
-/** Bold first line, right of the control. */
 export const CheckboxCardLabel = styled(Paragraph, {
-  fontWeight: "600",
+  fontFamily: "$heading",
   color: "$color12",
   lineHeight: 20,
 });
@@ -70,20 +70,18 @@ export function getCardDescriptionSize(size?: SizeTokens): FontSizeTokens {
 }
 
 /**
- * Compact card metrics from the space knob (~$3/$3.5 vertical) — deliberately
- * tighter than `panelPadding`, which is panel-scale and reads as dead space
- * around a single row of text.
+ * Card metrics at a size token (~$3/$3.5 vertical) — deliberately tighter
+ * than `panelPadding`, which is panel-scale and reads as dead space around a
+ * single row of text. A token above `$true` steps a half key up; the default
+ * and smaller tokens share one row.
  */
-export function getCheckboxCardLayout(space: string): {
+export function getCheckboxCardLayout(sizeToken: string): {
   paddingVertical: string;
   paddingHorizontal: string;
   gap: string;
 } {
-  const map: Record<string, { paddingVertical: string; paddingHorizontal: string; gap: string }> = {
-    none: { paddingVertical: "$2.5", paddingHorizontal: "$3", gap: "$2.5" },
-    small: { paddingVertical: "$3", paddingHorizontal: "$3.5", gap: "$3" },
-    medium: { paddingVertical: "$3", paddingHorizontal: "$3.5", gap: "$3" },
-    large: { paddingVertical: "$3.5", paddingHorizontal: "$4", gap: "$3.5" },
-  };
-  return map[space] ?? map.medium;
+  if (sizeTokenStep(sizeToken) > 0) {
+    return { paddingVertical: "$3.5", paddingHorizontal: "$4", gap: "$3.5" };
+  }
+  return { paddingVertical: "$3", paddingHorizontal: "$3.5", gap: "$3" };
 }

package/src/fields/Checkbox/CheckboxGroup.stories.tsx

@@ -19,7 +19,6 @@ const meta: Meta<typeof CheckboxGroup> = {
     disabled: { control: "boolean" },
     readOnly: { control: "boolean" },
     skeleton: { control: "boolean" },
-    compact: { control: "boolean" },
     orientation: { control: "select", options: ["vertical", "horizontal"] },
     size: { control: "select", options: ["$2", "$3", "$4"] },
   },

package/src/fields/Checkbox/CheckboxGroup.tsx

@@ -65,8 +65,6 @@ export interface CheckboxGroupProps {
   checkboxProps?: Omit<TamaguiCheckboxProps, "checked" | "id" | "onCheckedChange" | "children">;
   children?: ReactNode;
   skeleton?: boolean;
-  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-  compact?: boolean;
   /**
    * When true, renders each option as a selection card (LC-22): checkbox in a
    * leading slot, bold label to its right, muted `option.description` under
@@ -98,7 +96,6 @@ export function CheckboxGroup({
   checkboxProps,
   children,
   skeleton,
-  compact,
   card,
 }: CheckboxGroupProps) {
   // Canonical `onChange` and the alias `onValueChange` both fire from the
@@ -110,7 +107,6 @@ export function CheckboxGroup({
   const { resolvedForm, knobProps, disabledState, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   // Uncontrolled state for standalone use (no form, no value prop) — without
@@ -128,7 +124,7 @@ export function CheckboxGroup({
     // next item's square.
     const optionCount = options?.length ?? 3;
     const Container = orientation === "horizontal" ? XStack : YStack;
-    const inlineGap = getCheckboxInlineGap(knobProps.space);
+    const inlineGap = getCheckboxInlineGap(knobProps.sizeToken);
     const controlRadius = clampCheckboxGlyphRadius(knobProps.borderRadius.borderRadius, {
       pointy: knobProps.pointy,
     });
@@ -180,7 +176,7 @@ export function CheckboxGroup({
     const Container = orientation === "horizontal" ? XStack : YStack;
 
     if (card) {
-      const layout = getCheckboxCardLayout(knobProps.space);
+      const layout = getCheckboxCardLayout(knobProps.sizeToken);
       const descriptionSize = getCardDescriptionSize(size || knobProps.sizeToken);
       return (
         <Container gap="$2">
@@ -230,12 +226,9 @@ export function CheckboxGroup({
                   }}
                 />
                 <CheckboxCardContent>
-                  {/* fontWeight after size: the size variant's font weight
-                      would otherwise override the styled bold default */}
                   <CheckboxCardLabel
                     id={labelId}
                     size={(size || knobProps.sizeToken) as FontSizeTokens}
-                    fontWeight="600"
                   >
                     {option.label}
                   </CheckboxCardLabel>

package/src/fields/Checkbox/index.tsx

@@ -1,3 +1,4 @@
+import { transitionProps } from "@multiplatform.one/theme";
 import type { RovingFocusGroupProps, RovingFocusItemProps } from "@tamagui/roving-focus";
 import { RovingFocusGroup } from "@tamagui/roving-focus";
 import { CheckIcon as CheckRegular } from "@phosphor-icons/react";
@@ -165,7 +166,7 @@ const CheckboxesCheckbox = TamaguiCheckbox.styleable((checkboxProps, ref) => {
       ref={ref}
       value={focusItemValue}
       size={knobProps.sizeToken}
-      transition={knobProps.transition}
+      {...transitionProps(knobProps.motion.control)}
       {...combinedProps}
       {...checkboxTargetFrameProps}
       {...checkboxKbFocusHandlers(setKbFocus, setHovered, {
@@ -181,7 +182,7 @@ const CheckboxesCheckbox = TamaguiCheckbox.styleable((checkboxProps, ref) => {
         hovered={hovered}
         borderWidth={boxBorderWidth}
         borderRadius={cappedRadius === 0 ? 0 : cappedRadius}
-        transition={knobProps.transition}
+        {...transitionProps(knobProps.motion.control)}
       >
         {children}
       </CheckboxGlyphBox>
@@ -195,7 +196,7 @@ const CheckboxCard = CheckboxCardFrame.styleable<{ unstyled?: boolean; active?:
     const { value } = FocusItemContext.useStyledContext();
     const { knobProps } = useResolvedKnobs();
     const selected = values[value];
-    const layout = getCheckboxCardLayout(knobProps.space);
+    const layout = getCheckboxCardLayout(knobProps.sizeToken);
 
     return (
       <CheckboxCardFrame

package/src/fields/ColorPicker/ColorPicker.stories.tsx

@@ -100,7 +100,7 @@ export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
       <ColorPicker label="Small" size="$2" placeholder="Pick a color" />
-      <ColorPicker label="Medium (default)" size="$3" placeholder="Pick a color" />
+      <ColorPicker label="Medium ($3)" size="$3" placeholder="Pick a color" />
       <ColorPicker label="Large" size="$4" placeholder="Pick a color" />
     </YStack>
   ),

package/src/fields/ColorPicker/index.tsx

@@ -1,6 +1,11 @@
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { Pipette } from "@tamagui/lucide-icons-2";
-import { useResolvedKnobs, useChartPalette, normalizeToHex } from "@multiplatform.one/theme";
+import {
+  normalizeToHex,
+  sizeTokenStop,
+  useChartPalette,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { type Popover, View, XStack, YStack, isWeb, useProps, useTheme } from "tamagui";
 import { Button } from "../../Button";
@@ -78,8 +83,6 @@ export type ColorPickerProps<
     onValueChange?: (value: string) => void;
     /** When true, renders a skeleton placeholder instead of the color picker */
     skeleton?: boolean;
-    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-    compact?: boolean;
   };
 
 // ---------------------------------------------------------------------------
@@ -322,9 +325,9 @@ function ColorBody({
   onHexInput,
   onSelectPreset,
 }: ColorBodyProps) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
-  const panelSize = panelSizeMap[knobProps.size] ?? 192;
-  const previewSize = SWATCH_PX[knobProps.size] ?? 24;
+  const { knobProps } = useResolvedKnobs();
+  const panelSize = panelSizeMap[sizeTokenStop(knobProps.sizeToken)] ?? 192;
+  const previewSize = SWATCH_PX[sizeTokenStop(knobProps.sizeToken)] ?? 24;
   const [hexInputValue, setHexInputValue] = useState(selectedColor);
   const [hexEditing, setHexEditing] = useState(false);
   useEffect(() => {
@@ -428,7 +431,7 @@ function ColorBody({
           <Button
             size={knobProps.sizeToken}
             chromeless
-            icon={<Pipette size={CHIP_PX[knobProps.size] ?? 18} />}
+            icon={<Pipette size={CHIP_PX[sizeTokenStop(knobProps.sizeToken)] ?? 18} />}
             onPress={handleEyeDropper}
             cursor="pointer"
             aria-label={t("Eyedropper")}
@@ -597,12 +600,15 @@ function ColorPickerControl({
   if (readOnly) {
     const displayValue = value || selectedColor || placeholder;
     return (
-      <InputParts.Box theme={hasError ? "error" : undefined}>
+      <InputParts.Box>
         <View paddingInlineStart="$2" alignSelf="center">
           <View
-            width={CHIP_PX[knobProps.size] ?? 18}
-            height={CHIP_PX[knobProps.size] ?? 18}
-            borderRadius={binaryRadius(knobProps.pointy, CHIP_PX[knobProps.size] ?? 18)}
+            width={CHIP_PX[sizeTokenStop(knobProps.sizeToken)] ?? 18}
+            height={CHIP_PX[sizeTokenStop(knobProps.sizeToken)] ?? 18}
+            borderRadius={binaryRadius(
+              knobProps.pointy,
+              CHIP_PX[sizeTokenStop(knobProps.sizeToken)] ?? 18,
+            )}
             borderWidth={1}
             borderColor="$color10"
             backgroundColor={displayValue || "transparent"}
@@ -710,7 +716,6 @@ export function ColorPicker<
     onChange,
     onValueChange,
     skeleton,
-    compact,
     id: idProp,
   } = useProps(props);
 
@@ -727,7 +732,7 @@ export function ColorPicker<
     [onChange, onValueChange],
   );
 
-  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const [standaloneValue, setStandaloneValue] = useState<string>(
     () => (controlledValue ?? (defaultValue as string)) || "",
@@ -793,7 +798,10 @@ export function ColorPicker<
         // the sibling label/helper readable) — it needs the disabled state.
         disabled={disabled}
       >
-        <InputParts size={size || knobProps.sizeToken}>
+        <InputParts
+          size={size || knobProps.sizeToken}
+          {...(errorProp || standaloneFormatError ? { theme: "error" } : undefined)}
+        >
           <ColorPickerControl
             value={effectiveValue}
             format={_format}
@@ -847,7 +855,10 @@ export function ColorPicker<
             // LC-40: see standalone branch — FieldLayout carries dimWhole.
             disabled={disabled}
           >
-            <InputParts size={size || knobProps.sizeToken}>
+            <InputParts
+              size={size || knobProps.sizeToken}
+              {...(resolvedError || fieldFormatError ? { theme: "error" } : undefined)}
+            >
               <ColorPickerControl
                 value={fieldValue}
                 format={_format}

package/src/fields/ColorPicker/parts.tsx

@@ -2,6 +2,7 @@ import { Check, Palette, X } from "@tamagui/lucide-icons-2";
 import {
   ensureFocusVisibleRing,
   keyboardFocusRingProps,
+  sizeTokenStop,
   useReadableTextOn,
   useResolvedKnobs,
   wasKeyboardFocus,
@@ -361,7 +362,7 @@ function ColorRail({
   testID: string;
   children: ReactNode;
 }) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs();
   const railRef = useRef<Measurable | null>(null);
   const vertical = orientation === "vertical";
   const handleSize = HANDLE_SIZE;
@@ -485,7 +486,7 @@ export function SaturationPanel({
   onChangeSV,
   size = 192,
 }: SaturationPanelProps) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs();
   const panelRef = useRef<Measurable | null>(null);
   const handleSize = HANDLE_SIZE;
   const pointy = knobProps.pointy;
@@ -790,7 +791,7 @@ export function PresetSwatches({
   onSelect,
   width,
 }: PresetSwatchesProps) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs();
   const [focusIndex, setFocusIndex] = useState(0);
   const entries = useMemo(() => {
     if (!Array.isArray(presetColors)) return [];
@@ -799,7 +800,7 @@ export function PresetSwatches({
 
   if (entries.length === 0) return null;
 
-  const swatchSize = SWATCH_PX[knobProps.size] ?? 24;
+  const swatchSize = SWATCH_PX[sizeTokenStop(knobProps.sizeToken)] ?? 24;
   const gapPx = knobProps.control.gap;
   const cols = Math.max(1, width ? Math.floor((width + gapPx) / (swatchSize + gapPx)) : 8);
 
@@ -915,7 +916,7 @@ export const ColorPickerInputTrigger = InputParts.Area.styleable<ColorPickerInpu
       "aria-required": ariaRequired,
       "aria-invalid": ariaInvalid,
     } = props;
-    const chip = CHIP_PX[knobProps.size] ?? 18;
+    const chip = CHIP_PX[sizeTokenStop(knobProps.sizeToken)] ?? 18;
     const chipRadius = binaryRadius(knobProps.pointy, chip);
     return (
       <View ref={ref}>
@@ -924,11 +925,9 @@ export const ColorPickerInputTrigger = InputParts.Area.styleable<ColorPickerInpu
           // Native: FloatingPanel owns open — a second onPress double-toggles closed.
           onPress={isWeb && !disabled ? onButtonPress : undefined}
           size={knobProps.sizeToken}
+          {...(error ? { theme: "error" } : undefined)}
         >
-          <InputParts.Box
-            theme={error ? "error" : undefined}
-            {...(disabled ? { opacity: 0.5, pointerEvents: "none" } : undefined)}
-          >
+          <InputParts.Box {...(disabled ? { opacity: 0.5, pointerEvents: "none" } : undefined)}>
             <InputParts.Icon adornment="leading">
               <View
                 testID="color-picker-trigger-swatch"