@multiplatform.one/forms 7.34.4 → 7.36.0

package/src/fields/Barcode/index.tsx

@@ -1,4 +1,4 @@
-import { ensureFocusVisibleRing, type KnobProps } from "@multiplatform.one/theme";
+import { ensureFocusVisibleRing, sizeTokenStep, type KnobProps } from "@multiplatform.one/theme";
 import { BarcodeIcon, CameraIcon, XIcon } from "@phosphor-icons/react";
 import type { ReactNode } from "react";
 import { useRef, useState } from "react";
@@ -29,7 +29,6 @@ function BarcodeInput({
   readOnly,
   enableScan,
   formats,
-  compact,
   knobProps,
   barcodeIcon,
   scanIcon,
@@ -45,7 +44,6 @@ function BarcodeInput({
   readOnly: boolean;
   enableScan: boolean;
   formats?: string[];
-  compact?: boolean;
   knobProps: KnobProps;
   barcodeIcon?: ReactNode;
   scanIcon?: ReactNode;
@@ -95,15 +93,11 @@ function BarcodeInput({
 
   return (
     <>
-      <InputParts size={knobProps.sizeToken}>
+      <InputParts size={knobProps.sizeToken} {...(hasError ? { theme: "error" } : undefined)}>
         {/* LC-71: Scan (and Clear) live inside Input.Box so the composite ring
             wraps the whole perceived control — never a sibling house Button
             that the inner-Area ring would leave outside. */}
-        <InputParts.Box
-          testID="barcode-field"
-          disabled={disabled}
-          theme={hasError ? "error" : undefined}
-        >
+        <InputParts.Box testID="barcode-field" disabled={disabled}>
           {barcodeIcon ? (
             <InputParts.Icon adornment="leading">{barcodeIcon}</InputParts.Icon>
           ) : null}
@@ -174,7 +168,7 @@ function BarcodeInput({
           // through the same alias table, so draw and decode stay in lockstep.
           <BarcodePreview
             value={value}
-            height={compact ? 24 : 36}
+            height={sizeTokenStep(knobProps.sizeToken) < 0 ? 24 : 36}
             moduleWidth={1}
             format={formats?.[0]}
           />
@@ -187,7 +181,6 @@ function BarcodeInput({
         onClose={() => setIsScanning(false)}
         knobProps={knobProps}
         formats={formats}
-        compact={compact}
       />
       {scanError && (
         <Text {...knobProps.body} color={formCommonColors.error} fontSize="$2">
@@ -232,8 +225,6 @@ export interface BarcodeProps {
   stopIcon?: ReactNode;
   /** When true, renders a skeleton placeholder instead of the barcode field */
   skeleton?: boolean;
-  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-  compact?: boolean;
 }
 
 // Package icon defaults (UX-010): React elements are immutable descriptors,
@@ -266,12 +257,10 @@ export function Barcode({
   scanIcon = defaultScanIcon,
   stopIcon = defaultStopIcon,
   skeleton,
-  compact,
 }: BarcodeProps) {
   const { resolvedForm, knobProps, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const isControlled = value !== undefined;
@@ -318,7 +307,6 @@ export function Barcode({
           readOnly={!!readOnly}
           enableScan={enableScan}
           formats={formats}
-          compact={compact}
           knobProps={knobProps}
           required={required}
           hasError={!!error}
@@ -364,7 +352,6 @@ export function Barcode({
               readOnly={!!readOnly}
               enableScan={enableScan}
               formats={formats}
-              compact={compact}
               knobProps={knobProps}
               required={required}
               hasError={!!resolvedError}

package/src/fields/Barcode/scannerTypes.ts

@@ -1,3 +1,4 @@
+import { sizeTokenStep } from "@multiplatform.one/theme";
 import type { KnobProps } from "@multiplatform.one/theme";
 import type { CapabilityPreflightResult } from "../../shared/capabilityPreflight";
 
@@ -17,8 +18,6 @@ export interface BarcodeScannerProps {
   knobProps: KnobProps;
   /** Restrict the decoder to these symbologies. Omit / empty = all supported. */
   formats?: string[];
-  /** Compact density — shorter scanner viewport (LC-10 / LC-73). */
-  compact?: boolean;
 }
 
 /**
@@ -107,7 +106,10 @@ const HTML5_FORMAT_ALIASES: Record<string, string> = {
 };
 
 function normalizeFormatToken(value: string): string {
-  return value.trim().toLowerCase().replace(/[\s-]+/g, "_");
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/[\s-]+/g, "_");
 }
 
 /**
@@ -162,7 +164,7 @@ export function resolveHtml5FormatIds(
   return ids.length ? ids : undefined;
 }
 
-/** Contained scanner viewport height (LC-10). Compact steps down (LC-73). */
-export function scannerViewportHeight(compact?: boolean): number {
-  return compact ? 180 : 240;
+/** Contained scanner viewport height (LC-10). Below the default size token it steps down. */
+export function scannerViewportHeight(sizeToken: string): number {
+  return sizeTokenStep(sizeToken) < 0 ? 180 : 240;
 }

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

@@ -21,7 +21,6 @@ const meta: Meta<typeof Checkbox> = {
     disabled: { control: "boolean" },
     readOnly: { control: "boolean" },
     skeleton: { control: "boolean" },
-    compact: { control: "boolean" },
     pointy: { control: "boolean" },
     size: { control: "select", options: ["$2", "$3", "$4"] },
     checked: { control: "boolean" },
@@ -107,7 +106,7 @@ export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
       <Checkbox label="Small" size="$2" />
-      <Checkbox label="Medium (default)" size="$3" />
+      <Checkbox label="Medium ($3)" size="$3" />
       <Checkbox label="Large" size="$4" />
     </YStack>
   ),

package/src/fields/Checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
 import { CheckIcon as CheckRegular, MinusIcon as MinusRegular } from "@phosphor-icons/react";
-import { transitionProps, useReadableTextOn } from "@multiplatform.one/theme";
+import { sizeTokenStep, transitionProps, useReadableTextOn } from "@multiplatform.one/theme";
 import type { AnyFormApi } from "../../types";
 import type { ReactNode } from "react";
 import { useMemo, useState } from "react";
@@ -72,23 +72,17 @@ export interface CheckboxProps {
   pointy?: boolean;
   /** When true, renders a skeleton placeholder instead of the checkbox */
   skeleton?: boolean;
-  /** When true, uses compact sizing */
-  compact?: boolean;
 }
 
 /**
- * Gap between the checkbox control and its label, by space knob.
- * Shared with the skeleton branches so loading geometry mirrors the
- * real anatomy (LC-20 SKELETON-MIRRORS-ANATOMY).
+ * Gap between the checkbox control and its label at a size token: `$2` at
+ * the default control size, a half key either side. Shared with the
+ * skeleton branches so loading geometry mirrors the real anatomy (LC-20
+ * SKELETON-MIRRORS-ANATOMY).
  */
-export function getCheckboxInlineGap(space: string): string {
-  const inlineGapMap: Record<string, string> = {
-    none: "$1",
-    small: "$1.5",
-    medium: "$2",
-    large: "$2.5",
-  };
-  return inlineGapMap[space] || "$2";
+export function getCheckboxInlineGap(sizeToken: string): string {
+  const step = sizeTokenStep(sizeToken);
+  return step < 0 ? "$1.5" : step > 0 ? "$2.5" : "$2";
 }
 
 export function Checkbox({
@@ -113,7 +107,6 @@ export function Checkbox({
   children,
   pointy,
   skeleton,
-  compact,
 }: CheckboxProps) {
   // Canonical `onChange` and the alias `onCheckedChange` both fire from a
   // single emit site (same reconciliation as Switch).
@@ -124,7 +117,6 @@ export function Checkbox({
   const { resolvedForm, knobProps, text, elevation, disabledState, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name, (v) => !v);
   const resolvedPointy = pointy ?? knobProps.pointy;
@@ -143,7 +135,7 @@ export function Checkbox({
     cappedRadius === 0
       ? { borderWidth: knobProps.borderRadius.borderWidth, borderRadius: 0 }
       : { borderWidth: knobProps.borderRadius.borderWidth, borderRadius: cappedRadius };
-  const inlineGap = getCheckboxInlineGap(knobProps.space);
+  const inlineGap = getCheckboxInlineGap(knobProps.sizeToken);
   const baseLabelColor = error ? formCommonColors.error : knobProps.textAccentColor;
   const labelHoverStyle = { color: baseLabelColor, ...text.hoverKnobProps };
   const labelPressStyle = { color: baseLabelColor, ...text.pressKnobProps };
@@ -186,7 +178,7 @@ export function Checkbox({
         // Same native-responder steal as CheckboxGlyphBox — Indicator/SVG
         // must not claim the press that belongs to the 44px frame.
         pointerEvents="none"
-        {...transitionProps(knobProps.transition)}
+        {...transitionProps(knobProps.motion.control)}
       >
         {currentChecked === "indeterminate" ? (
           <MinusRegular
@@ -232,7 +224,7 @@ export function Checkbox({
         hovered={hovered}
         borderWidth={boxBorderWidth}
         borderRadius={resolvedRadius.borderRadius ?? 0}
-        transition={knobProps.transition}
+        {...transitionProps(knobProps.motion.control)}
       >
         {renderIndicator(currentChecked, iconSize)}
       </CheckboxGlyphBox>
@@ -274,7 +266,7 @@ export function Checkbox({
     // radius the real box uses, the same box↔label gap — and the 44px
     // pressable target box around the 20px glyph (same as RadioGroup).
     return (
-      <FieldLayout id={id} size={size} knobProps={knobProps} compactSpacing>
+      <FieldLayout id={id} size={size} knobProps={knobProps}>
         <XStack gap={inlineGap} alignItems="center">
           <View width={targetSize} height={targetSize} alignItems="center" justifyContent="center">
             <Skeleton
@@ -297,7 +289,7 @@ export function Checkbox({
     const checkboxEl = (
       <CheckboxFieldFrame
         size={resolvedSize as SizeTokens}
-        transition={knobProps.transition}
+        {...transitionProps(knobProps.motion.control)}
         {...checkboxProps}
         {...checkboxTargetFrameProps}
         {...checkboxKbFocusHandlers(setKbFocus, setHovered, {
@@ -438,7 +430,7 @@ export function Checkbox({
                 const checkboxElement = (
                   <CheckboxFieldFrame
                     size={resolvedSize as SizeTokens}
-                    transition={knobProps.transition}
+                    {...transitionProps(knobProps.motion.control)}
                     {...checkboxProps}
                     {...checkboxTargetFrameProps}
                     {...checkboxKbFocusHandlers(setKbFocus, setHovered, {

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"] },
   },