@multiplatform.one/forms 7.34.4 → 7.36.0

package/src/fields/TimePicker/index.native.tsx

@@ -48,7 +48,6 @@ export type TimePickerProps = {
   placeholder?: string;
   clockIcon?: import("react").ReactNode;
   skeleton?: boolean;
-  compact?: boolean;
   native?: boolean;
 };
 
@@ -96,12 +95,10 @@ export function TimePicker(props: TimePickerProps) {
     placeholder = t("Select time"),
     clockIcon,
     skeleton,
-    compact,
   } = props;
   const { resolvedForm, knobProps, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const [open, setOpen] = useState(false);
@@ -142,7 +139,6 @@ export function TimePicker(props: TimePickerProps) {
           value={valueIsInvalid ? "" : formatTimeDisplay(current, timeFormat, showSeconds)}
           placeholder={placeholder}
           disabled={disabled}
-          error={hasError}
           id={id}
           clockIcon={clockIcon}
           onOpen={() => {}}
@@ -185,7 +181,10 @@ export function TimePicker(props: TimePickerProps) {
         onBlur={onBlur}
         disabled={disabled}
       >
-        <InputParts size={size || knobProps.sizeToken}>
+        <InputParts
+          size={size || knobProps.sizeToken}
+          {...(formatError || error ? { theme: "error" } : undefined)}
+        >
           {renderControl(value, !!(formatError || error), undefined, readOnly)}
         </InputParts>
       </FieldLayout>
@@ -214,7 +213,10 @@ export function TimePicker(props: TimePickerProps) {
             knobProps={knobProps}
             disabled={disabled}
           >
-            <InputParts size={size || knobProps.sizeToken}>
+            <InputParts
+              size={size || knobProps.sizeToken}
+              {...(resolvedError ? { theme: "error" } : undefined)}
+            >
               {renderControl(
                 current,
                 !!resolvedError,

package/src/fields/TimePicker/parts.tsx

@@ -68,7 +68,7 @@ export function TimePanel({
   minuteStep: number;
   showSeconds: boolean;
 }) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs();
   const { h, m, s } = parseTimeString(value);
 
   return (
@@ -118,7 +118,6 @@ interface TimePickerInputTriggerProps {
   value: string;
   placeholder: string;
   disabled?: boolean;
-  error?: boolean;
   id?: string;
   clockIcon?: ReactNode;
   onOpen: () => void;
@@ -133,7 +132,6 @@ export function TimePickerInputTrigger({
   value,
   placeholder,
   disabled,
-  error,
   id,
   clockIcon,
   onOpen,
@@ -153,7 +151,6 @@ export function TimePickerInputTrigger({
       pointerEvents={isWeb ? undefined : "none"}
     >
       <InputParts.Box
-        theme={error ? "error" : undefined}
         // Yoga has no intrinsic TextInput width: without this the empty
         // trigger collapses to its clock glyph on native (MPO-363).
         {...(isWeb ? undefined : { flex: 1, minWidth: 0 })}

package/src/fields/TimeRangeScrubber/index.tsx

@@ -1,3 +1,4 @@
+import { transitionProps, motionRoleProperties } from "@multiplatform.one/theme";
 import {
   defaultKnobs,
   ensureFocusVisibleRing,
@@ -104,7 +105,6 @@ export interface TimeRangeScrubberProps {
   size?: SizeTokens;
   id?: string;
   skeleton?: boolean;
-  compact?: boolean;
   /** DateRangePicker value — `{ start: Date | null; end: Date | null }`. */
   value?: DateRange | null;
   defaultValue?: DateRange | null;
@@ -808,7 +808,9 @@ function TimeRangeScrubberControl({
               data-session={session}
               data-transition={transition}
               hitSlop={pressTargetHitSlop(gripSize)}
-              transition={transition}
+              {...transitionProps({ transition, animateOnly: motionRoleProperties.control }, [
+                "left",
+              ])}
               {...gripFocus}
               onFocus={() => {
                 if (isWeb && wasKeyboardFocus()) setKbFocus("grip");
@@ -907,7 +909,6 @@ export function TimeRangeScrubber({
   size,
   id: idProp,
   skeleton,
-  compact,
   value: valueProp,
   defaultValue,
   onChange,
@@ -931,7 +932,6 @@ export function TimeRangeScrubber({
   const { resolvedForm, knobProps, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name, (value) => {
     if (value == null) return true;
@@ -972,7 +972,9 @@ export function TimeRangeScrubber({
   const value = valueProp !== undefined ? valueProp : internalValue;
   const windowValue = windowProp ?? internalWindow;
   const scrubTime = scrubProp ?? internalScrub;
-  const liveTransition = knobProps.transition ? String(knobProps.transition) : undefined;
+  const liveTransition = knobProps.motion.control.transition
+    ? String(knobProps.motion.control.transition)
+    : undefined;
 
   const handleChange = (
     next: DateRange | null,

package/src/fields/ToggleGroup/ToggleGroup.spec.tsx

@@ -18,10 +18,7 @@ import { __resetDevWarnSeen } from "../../shared/devWarn";
 import { Form } from "../../Form";
 import { ToggleGroup } from "./index";
 
-// The stock test themes carry no accent ramp, so token resolution for the
-// LC-05 selected mark is invisible under renderWithProviders. Mount the house
-// builder themes (the same ones apps run) to assert the real resolved fill —
-// the pattern Progress.spec.tsx established.
+// House themes exercise the same selection tokens in both schemes.
 const houseThemes = createThemesBuilder(
   defaultBaseTheme,
   defaultAccentTheme,
@@ -34,22 +31,14 @@ const houseConfig = createTamagui({
   themes: houseThemes as any,
 });
 
-function renderWithHouseThemes(ui: ReactElement) {
+function renderWithHouseThemes(ui: ReactElement, scheme = "light") {
   return render(
-    <TamaguiProvider config={houseConfig} defaultTheme="light" disableInjectCSS>
+    <TamaguiProvider config={houseConfig} defaultTheme={scheme} disableInjectCSS>
       {ui}
     </TamaguiProvider>,
   );
 }
 
-/**
- * First three numeric groups (h, s, l) of an hsla() string — the digit prefix
- * Tamagui embeds in the atomic class it generates for a concrete color value.
- */
-function hslDigits(hsla: string): string {
-  return (hsla.match(/\d+/g) ?? []).slice(0, 3).join("");
-}
-
 const options = [
   { label: "Left", value: "left" },
   { label: "Center", value: "center" },
@@ -208,25 +197,24 @@ describe("ToggleGroup", () => {
     });
   });
 
-  describe("selected mark (LC-05 ONE-EMPHASIS / D-01)", () => {
-    it("fills the selected segment with the accent-tinted surface, never the neutral tier", () => {
-      const { container } = renderWithHouseThemes(
-        <ToggleGroup label="Alignment" options={options} defaultValue="left" />,
-      );
-      // Segmented-control selection strength is pinned at TINTED (D-01
-      // ViewSwitcher rider): the accent ramp's surface tier in a light scheme
-      // is its palest step (accent11) — the same channel ViewSwitcher takes.
-      const tint = houseThemes.light.accent11;
-      expect(tint).toBeTruthy();
-      const selected = container.querySelector('[data-state="on"]') as HTMLElement;
-      const idle = container.querySelector('[data-state="off"]') as HTMLElement;
-      expect(selected).toBeTruthy();
-      expect(idle).toBeTruthy();
-      expect(selected.className).toContain(`_bg-hsla${hslDigits(tint)}`);
-      expect(idle.className).not.toContain(`_bg-hsla${hslDigits(tint)}`);
-      // Ink marks selection nowhere: the old neutral $color8 fill is gone.
-      expect(selected.className).not.toContain("_bg-color8");
-    });
+  describe("neutral selection tier (LC-05)", () => {
+    it.each(["light", "dark"])(
+      "paints the selected segment with neutral fill and ink in %s",
+      (scheme) => {
+        const { container } = renderWithHouseThemes(
+          <ToggleGroup label="Alignment" options={options} defaultValue="left" />,
+          scheme,
+        );
+        const selected = container.querySelector('[data-state="on"]') as HTMLElement;
+        const idle = container.querySelector('[data-state="off"]') as HTMLElement;
+        expect(selected).toBeTruthy();
+        expect(idle).toBeTruthy();
+        expect(selected.className).toContain("_bg-color4");
+        expect(idle.className).not.toContain("_bg-color4");
+        const label = selected.querySelector('[class*="_col-color12"]');
+        expect(label).toBeTruthy();
+      },
+    );
   });
 
   describe("segmented anatomy (LC-71 / LC-72)", () => {

package/src/fields/ToggleGroup/ToggleGroup.stories.tsx

@@ -53,10 +53,6 @@ const meta: Meta<typeof ToggleGroup> = {
       control: "boolean",
       description: "Whether the toggle group is read-only",
     },
-    compact: {
-      control: "boolean",
-      description: "Density override (space only — LC-76)",
-    },
     skeleton: {
       control: "boolean",
       description: "Render the LC-20 skeleton that mirrors the segment row",
@@ -242,7 +238,7 @@ export const Sizes: Story = {
         ]}
       />
       <ToggleGroup
-        label="Medium (default)"
+        label="Medium ($3)"
         size="$3"
         type="single"
         defaultValue="center"
@@ -324,7 +320,7 @@ export const Comparison: Story = {
       const [tamaguiVal, setTamaguiVal] = useState("left");
       return (
         <XStack gap="$6" alignItems="flex-start" padding="$4">
-          <YStack gap="$3" width={300}>
+          <YStack gap="$3" width={300} maxWidth="100%">
             <Paragraph size="$2" color="$placeholderColor">
               Custom ToggleGroup
             </Paragraph>
@@ -339,7 +335,7 @@ export const Comparison: Story = {
             />
           </YStack>
 
-          <YStack gap="$3" width={300}>
+          <YStack gap="$3" width={300} maxWidth="100%">
             <Paragraph size="$2" color="$placeholderColor">
               Tamagui ToggleGroup
             </Paragraph>
@@ -372,8 +368,8 @@ export const SkeletonState: Story = {
 
 export const Compact: Story = {
   args: {
+    size: "$3",
     label: "Alignment",
-    compact: true,
     type: "single",
     defaultValue: "center",
     options: alignmentOptions,

package/src/fields/ToggleGroup/index.tsx

@@ -1,3 +1,6 @@
+import { motionDurationMs } from "@multiplatform.one/theme";
+import { cssAnimationConfig } from "@multiplatform.one/theme";
+import { transitionProps } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import { useState } from "react";
 import {
@@ -8,8 +11,6 @@ import {
   keyboardFocusRingProps,
   pressTargetHitSlop,
   stackRadiusProps,
-  useAccentTintedSurface,
-  useReadableTextOn,
   wasKeyboardFocus,
 } from "@multiplatform.one/theme";
 import type { AnyFormApi } from "../../types";
@@ -17,7 +18,12 @@ import type { LabelProps, SizeTokens } from "tamagui";
 import { SizableText, ToggleGroup as TamaguiToggleGroup, View, isWeb, styled } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
-import { formButtonColors, formCommonColors, formInputColors } from "../../shared/colorRamps";
+import {
+  formButtonColors,
+  formCommonColors,
+  formInputColors,
+  formSelectionColors,
+} from "../../shared/colorRamps";
 import { warnBareDisabled } from "../../shared/devWarn";
 import { choiceItemA11y, composeA11yName } from "../../shared/nativeA11y";
 import {
@@ -50,18 +56,6 @@ const ToggleItemFrame = styled(TamaguiToggleGroup.Item, {
   focusVisibleStyle: { outlineWidth: 0 },
 });
 
-/** Theme animationConfig durations — unstyled ToggleFrame drops Tamagui's transition class. */
-const SEGMENT_MOTION_MS: Record<string, number> = {
-  bouncy: 200,
-  lazy: 600,
-  slow: 500,
-  medium: 250,
-  quick: 100,
-  tooltip: 400,
-  snappy: 80,
-  gentle: 450,
-};
-
 /** State recipes may carry border/outline; segments accept FILL only (LC-71). */
 function segmentFillState(
   props: { backgroundColor?: unknown } | undefined,
@@ -156,8 +150,6 @@ export interface ToggleGroupProps {
   children?: ReactNode;
   /** When true, renders a skeleton placeholder instead of the toggle group */
   skeleton?: boolean;
-  /** When true, uses compact sizing */
-  compact?: boolean;
   /**
    * MPO-283 — accessible name for the whole group.
    *
@@ -204,7 +196,6 @@ export function ToggleGroup({
   orientation = "horizontal",
   children,
   skeleton,
-  compact,
   accessibilityLabel,
   accessibilityHint,
   "aria-label": ariaLabel,
@@ -223,14 +214,10 @@ export function ToggleGroup({
   const { resolvedForm, knobProps, control, text, elevation, disabledState, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
   });
-  // LC-05 / D-01: selection is ONE accent language across every choice-control
-  // family. Segmented-control STRENGTH is pinned at TINTED (the D-01
-  // ViewSwitcher rider — not the solid an accent CTA takes).
-  const selectedTint = useAccentTintedSurface();
-  const selectedFill = selectedTint ?? formButtonColors.border.active;
-  const onSelectedLabel = useReadableTextOn(selectedFill);
+  // LC-05: selected segments share the neutral selection fill and ink.
+  const selectedFill = formSelectionColors.background;
+  const onSelectedLabel = formSelectionColors.ink;
   // Chromium drops keyboard modality when tamagui's group redirects focus to
   // an item, so :focus-visible/focusVisibleStyle can miss — paint the ring
   // manually on keyboard-origin focus (see theme keyboardFocusRing).
@@ -246,16 +233,17 @@ export function ToggleGroup({
   const segmentHitSlop = pressTargetHitSlop(knobProps.control.height);
   // SB-M-221 / LC-68: tween fill on the unstyled item via CSS (Tamagui's
   // `transition` token does not emit a class here). animation=none → snap.
-  const motionMs =
-    typeof knobProps.transition === "string" ? SEGMENT_MOTION_MS[knobProps.transition] : undefined;
+  const motionMs = motionDurationMs(knobProps.motion.control.transition);
   const segmentMotionStyle =
-    isWeb && motionMs != null
+    isWeb && motionMs > 0
       ? {
           className: "mp-toggle-transition",
           style: {
-            transitionProperty: "background-color, color, border-color, outline-color",
+            transitionProperty: "background-color, border-color, color, opacity, transform",
             transitionDuration: `${motionMs}ms`,
-            transitionTimingFunction: "ease",
+            transitionTimingFunction: cssAnimationConfig[
+              knobProps.motion.control.transition as keyof typeof cssAnimationConfig
+            ]?.replace(/^\d+ms\s+/, ""),
           },
         }
       : undefined;
@@ -392,7 +380,7 @@ export function ToggleGroup({
           borderColor="transparent"
           margin={0}
           outlineWidth={0}
-          transition={knobProps.transition}
+          {...transitionProps(knobProps.motion.control)}
           disabled={itemDisabled}
           {...(itemDescribedBy ? { "aria-describedby": itemDescribedBy } : undefined)}
           // LC-40 DISABLED-VISIBLE: a disabled segment drops the live selected
@@ -432,8 +420,7 @@ export function ToggleGroup({
                 }
           }
           // LC-71: ring rides the keyboard-focused item (inset, clipped
-          // group). Never a selection border. ToggleFrame's focus fill is
-          // re-asserted so the accent chip does not grey out on choose.
+          // group). Focus preserves the selection fill without adding a border.
           focusStyle={{
             ...(selected && !itemDisabled ? activeColors : undefined),
             ...(kbFocusValue === option.value ? keyboardFocusRingProps : { outlineWidth: 0 }),
@@ -479,9 +466,7 @@ export function ToggleGroup({
             userSelect="none"
             {...knobProps.controlType}
             {...knobProps.body}
-            {...(selected && !itemDisabled && onSelectedLabel
-              ? { color: onSelectedLabel }
-              : undefined)}
+            {...(selected && !itemDisabled ? { color: onSelectedLabel } : undefined)}
             {...(itemDisabled ? disabledState.textKnobProps : undefined)}
             hoverStyle={text.hoverKnobProps}
             pressStyle={text.pressKnobProps}

package/src/fields/nativeDateTime/OsDateTimeSheet.tsx

@@ -51,7 +51,7 @@ export function OsDateTimeSheet({
   const { knobProps } = useResolvedKnobs();
   const themeVariant = useNativePickerScheme();
   const theme = useTheme();
-  const accentColor = theme.accentBackground?.val;
+  const accentColor = theme.accentColor?.val;
   const isIOS = Platform.OS === "ios";
   const [showTimePicker, setShowTimePicker] = useState(false);
   const [temp, setTemp] = useState(value);
@@ -149,7 +149,7 @@ export function OsDateTimeSheet({
               {t("Date picker unavailable — requires @react-native-community/datetimepicker")}
             </Text>
             <Pressable onPress={onCancel} accessibilityRole="button">
-              <Text color="$accentBackground">{t("Cancel")}</Text>
+              <Text color="$accentColor">{t("Cancel")}</Text>
             </Pressable>
           </YStack>
         </Pressable>
@@ -194,11 +194,11 @@ export function OsDateTimeSheet({
               </Pressable>
               {mode === "datetime" && !showTimePicker ? (
                 <Pressable onPress={() => setShowTimePicker(true)} accessibilityRole="button">
-                  <Text color="$accentBackground">{t("Next")}</Text>
+                  <Text color="$accentColor">{t("Next")}</Text>
                 </Pressable>
               ) : (
                 <Pressable onPress={confirm} accessibilityRole="button">
-                  <Text color="$accentBackground">{t("Done")}</Text>
+                  <Text color="$accentColor">{t("Done")}</Text>
                 </Pressable>
               )}
             </XStack>

package/src/fields/pickerActivation.spec.tsx

@@ -76,8 +76,10 @@ describe("sheet picker pointer activation", () => {
   it("clear changes the value without opening the sheet", async () => {
     const result = renderWithProviders(<ClearHarness />);
     const clear = result.getByRole("button", { name: "Clear" });
-    expect(clear.className).toContain("_miw-44px");
-    expect(clear.className).toContain("_mih-44px");
+    expect(clear.className).not.toContain("_miw-44px");
+    expect(clear.className).not.toContain("_mih-44px");
+    expect(clear.className).toContain("_w-37px");
+    expect(clear.getAttribute("data-mp-press-slop")).toBe("2");
     fireEvent.click(clear, { detail: 1 });
     await waitFor(() => expect(result.getByText("Selected:none")).toBeTruthy());
     expect(result.getByRole("combobox", { name: "Choice" }).getAttribute("aria-expanded")).toBe(

package/src/fields/pickerRows.spec.tsx

@@ -17,6 +17,8 @@ vi.mock("@multiplatform.one/theme", async (importOriginal) => {
         knobProps: {
           ...result.knobProps,
           control: { ...result.knobProps.control, height: recipe.height },
+          // Select rows pitch at the menuRow family (WP-c1); Combobox rows at control.
+          menuRow: { ...result.knobProps.menuRow, minHeight: recipe.height },
         },
       };
     },

package/src/formSpacing.ts

@@ -1,9 +1,9 @@
 /**
  * Fallback form rhythm tokens (DG-FORM-06). Prefer `knobProps.gap` /
- * `knobProps.gapLg` (space/density) at the layout primitives — these
- * constants are the medium-space snapshot, not a size mapping.
+ * `knobProps.gapLg` (the spacing roles) at the layout primitives. These are
+ * the roles' `$space` keys, not a size mapping.
  */
-export const formFieldGap = "$4" as const;
+export const formFieldGap = "$3" as const;
 export const formSectionGap = "$8" as const;
 
 /** Default readable form width (DG-FORM-08 ~480–600px). */

package/src/index.ts

@@ -103,7 +103,7 @@ export type { InputProps } from "./fields/Input";
 export { Input as InputParts } from "./InputParts";
 
 export { SearchInput } from "./fields/SearchInput";
-export type { SearchInputProps } from "./fields/SearchInput";
+export type { SearchInputHandle, SearchInputProps } from "./fields/SearchInput";
 
 export { TextArea } from "./fields/TextArea";
 export type { TextAreaProps } from "./fields/TextArea";
@@ -361,13 +361,23 @@ export { TableCellContext, useTableCellContext, useIsInTableCell } from "./share
 export type { TableCellContextValue } from "./shared/tableCellContext";
 
 // ── Form color ramps (adapters must consume these, never raw tokens) ─
-export { formCommonColors, formDropzoneColors } from "./shared/colorRamps";
+export {
+  formCommonColors,
+  formDropzoneColors,
+  formSelectionColors,
+  formSelectedColors,
+} from "./shared/colorRamps";
 
 // ── Chip, Skeleton, Wheel (used by forms; re-exported for components consumers) ─
 export { Chip, ChipFrame, ChipText, chipIconSize } from "./Chip";
 export type { ChipProps, ChipVariant, ChipColor, ChipSize, ChipFrameProps } from "./Chip";
-export { Skeleton, SkeletonText, SkeletonCircle } from "./Skeleton";
-export type { SkeletonProps, SkeletonVariant, SkeletonFrameProps } from "./Skeleton";
+export { Skeleton, SkeletonText, SkeletonCircle, SkeletonGroup } from "./Skeleton";
+export type {
+  SkeletonProps,
+  SkeletonVariant,
+  SkeletonFrameProps,
+  SkeletonTextSize,
+} from "./Skeleton";
 export { Wheel } from "./Wheel";
 export type {
   WheelProps,
@@ -390,3 +400,11 @@ export {
   type DeepKeys,
   type DeepValue,
 } from "@tanstack/react-form";
+export { useMediaPicker } from "./MediaPicker/useMediaPicker";
+export { MediaPickerError } from "./MediaPicker/types";
+export type {
+  MediaSource,
+  MediaPickOptions,
+  PickedMedia,
+  MediaPickerErrorCode,
+} from "./MediaPicker/types";

package/src/shared/TimeColumn.tsx

@@ -67,7 +67,7 @@ export function TimeWheels({
   showSeconds,
   onChange,
 }: TimeWheelsProps) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs();
   const itemHeight = knobProps.nestedControl.px;
   const minutes = useMemo(() => generateRange(0, 59, minuteStep), [minuteStep]);
   const { h: hour12, period } = to12Hour(hour24);

package/src/shared/colorRamps.ts

@@ -38,16 +38,9 @@ export const formInputColors = {
 
 export const formControlColors = {
   background: "$color5",
-  border: "$color7",
-  /**
-   * Control BOUNDARY tier (DF-06 / WCAG 1.4.11): the outline that must carry
-   * a control's shape against the page needs ≥3:1 — `border` ($color7)
-   * measured 1.52:1 light / 1.69:1 dark vs page, fine as an inner seam but
-   * invisible as the only edge. $color10 is the muted-ink tier (≥3:1 on
-   * color1/2 in both schemes). Radio rings use this; single-border controls
-   * that rely on their outline alone should too.
-   */
-  boundary: "$color10",
+  border: "$borderColor",
+  /** DF-06 / WCAG 1.4.11: the build holds ≥3:1 on page, surface1 and control well. */
+  boundary: "$boundaryColor",
   thumb: {
     base: "$color10",
     hover: "$color9",
@@ -55,13 +48,19 @@ export const formControlColors = {
   },
 } as const;
 
+// LC-05: the neutral selection tier, shared with componentColors.selection.
+export const formSelectionColors = {
+  background: "$color4",
+  hover: "$color5",
+  press: "$color5",
+  ink: "$color12",
+  ring: "$color8",
+} as const;
+
 /**
- * Selected/checked MARK channel (LC-05 ONE-EMPHASIS).
- *
- * Every choice control in the field family marks its selection with the ACTIVE
- * ACCENT — the radio dot, the filled rating star and the checked Switch track
- * all resolve here — so a user learns one meaning for the accent instead of
- * decoding a per-control dialect. Ink marks selection nowhere (D-01).
+ * LC-05 MARK channel: Switch on-track, Checkbox mark, RadioGroup dot, Rating
+ * fill, Slider/Progress fill and option tick use the accent solid. Selected
+ * options, segments and rows take formSelectionColors.
  * Marks are non-text chrome, so the floor they must clear is the 3:1
  * graphical-object tier, not the 4.5:1 text tier; text placed ON this fill
  * takes `useReadableTextOn` rather than an assumed anchor.
@@ -70,17 +69,16 @@ export const formSelectedColors = {
   mark: "$accentBackground",
 } as const;
 
-// Bento switch polarity: accent track when on, light thumb. Separate from
-// formControlColors.thumb, which Slider still uses with inverted polarity.
-// Checked state uses the accent solid so on/off reads at a glance and
-// matches the accent CTAs on the same screen (SB-D-19).
+// The off track is a named grey picked per scheme by holdSwitchTrack (createThemes.ts):
+// a tinted theme's $color9 is its solid hue, and dark's $gray10 matches the accent on track.
 export const formSwitchColors = {
   track: {
     on: formSelectedColors.mark,
-    off: "$color5",
+    off: "$switchTrackOff",
+    offHover: "$switchTrackOffHover",
+    offPress: "$switchTrackOffPress",
   },
-  thumb: "$color1",
-  thumbBorder: "$borderColor",
+  thumb: "$switchThumb",
 } as const;
 
 export const formCardColors = {
@@ -89,7 +87,7 @@ export const formCardColors = {
     active: "$color3",
   },
   border: {
-    base: "$color6",
+    base: "$borderColor",
     hover: "$color7",
     active: "$color7",
   },
@@ -136,5 +134,5 @@ export const formCommonColors = {
   // Same AA reason as componentColors.semantic: $red10 is under 4.5:1 for
   // small error text on color1/2 surfaces.
   error: "$red11",
-  divider: "$color8",
+  divider: "$borderColor",
 } as const;