@multiplatform.one/theme 7.34.4 → 7.36.0

package/src/theme/recipes.ts

@@ -1,3 +1,4 @@
+import type { MotionRole, MotionRoleName } from "./motion";
 import type { ColorTokens, FontSizeTokens, TransitionProp } from "tamagui";
 import type { Knobs } from "./knobs";
 import type { HitSlopInsets } from "./layoutTokens";
@@ -8,7 +9,6 @@ export interface ControlStateProps {
   borderRadius?: string;
   borderWidth?: number;
   backgroundColor?: string;
-  padding?: string;
   /** Focus-visible ring (DG-A11Y-01); always ≥2 via `ensureFocusVisibleRing`. */
   outlineWidth?: number;
   outlineStyle?: "solid" | "none";
@@ -28,7 +28,7 @@ export interface ElevationPaintProps {
   shadowOffset?: { width: number; height: number };
   shadowOpacity?: number;
   shadowRadius?: number;
-  /** Web: raw boxShadow so paint does not depend on Tamagui's elevation variant. */
+  /** Web: size-formula shadow with var(--shadowColor), matching the shadow props. */
   style?: { boxShadow: string };
 }
 
@@ -45,7 +45,7 @@ export interface ElevationStateProps extends ElevationPaintProps {
  * `inputBackground`; overlays read `elevatedSurface.backgroundColor`.
  */
 export interface ElevationChromeProps extends ElevationPaintProps {
-  /** Android dp (2/4/8), not the Tamagui size token. */
+  /** Android dp is twice the size-formula offsetY. */
   elevation?: number;
 }
 
@@ -168,10 +168,11 @@ export interface KnobProps {
   controlBorderOutlined: { borderColor: string; borderWidth: number };
   /**
    * Axiom 1 child-clip cap for padded containers (Card/Panel/DialogContent):
-   * the radius token while it fits, or the padding px once it would exceed
+   * two radius keys above the control, or the padding px once it would exceed
    * the container's own inset. Spread after the radius-bearing fragment.
    */
   containerRadius: { borderRadius: string | number } & CornerSmoothingCarrier;
+  fieldRadius: { borderRadius: string | number } & CornerSmoothingCarrier;
   /** Size token on web ("$1"); numeric tokens.size value on native (RN-safe). */
   elevation: string | number | undefined;
   /**
@@ -182,9 +183,10 @@ export interface KnobProps {
   overlayElevation: string | number | undefined;
   /**
    * Complete shadow fragment for E-CONTROL / wrapper Views. Spread whole.
-   * Empty when `elevation=none`. Android `elevation` here is dp (2/4/8).
+   * Empty when `elevation=none`. Android `elevation` here is twice the size-formula offsetY.
    */
   elevationChrome: ElevationChromeProps;
+  thumbShadow: ElevationChromeProps;
   /** Resolved scheme the fragments were built for (LC-85). */
   scheme: "light" | "dark";
   surface: { backgroundColor: string; borderColor: string; borderWidth: number };
@@ -214,22 +216,27 @@ export interface KnobProps {
     shadowRadius: number;
   } & CornerSmoothingCarrier;
   inputSurface: { borderWidth: number };
+  /** Container inset role (SP-GAP): `$space.$4` of the active scale. */
   panelPadding: { padding: string };
+  /** Tight role (SP-GAP): label to control, chip to chip, icon to text. `$space.$2`. */
+  gapSm: { gap: string };
+  /** Within-group role (SP-GAP): field to field, row to row. `$space.$3`. */
   gap: { gap: string };
+  /** Between-groups role (SP-GAP): section to section. `$space.$5`. */
   gapLg: { gap: string };
   /**
-   * Size-recipe KEY (string "$4"), not a height scalar. styled() variants
-   * switch on this token; control internals read `control` / `controlType` /
-   * `controlIcon` (LC-65). Radius is not on the recipe.
+   * The size token this subtree renders controls at: Tamagui's own `size`
+   * key ("$4", "$3"), from a `size` prop or a `<Surface size>` ceiling,
+   * `$true` by default. styled() variants switch on it; control internals
+   * read `control` / `controlType` / `controlIcon` (LC-65).
    */
   sizeToken: string;
   /**
-   * Control-chrome type (labels, calendar digits, weekday headers). Paired
-   * to `size` so nested surfaces can step type with density. NEVER pass
-   * `sizeToken` as `fontSize` — that token is a control HEIGHT ($4 = 44px
-   * box), not a type step ($4 font = 14px).
+   * Control-chrome type (labels, calendar digits, weekday headers): the body
+   * key one below `sizeToken`. NEVER pass `sizeToken` as `fontSize`: that
+   * token is a control HEIGHT ($4 = 40px box), not a type step.
    */
-  label: { fontSize: FontSizeTokens; fontFamily: string; fontWeight: string };
+  label: { fontSize: FontSizeTokens; fontFamily: string; fontWeight?: string };
   /**
    * Nested hit-target (calendar days, overlay chips): visual box BELOW the
    * 44px floor, press restored with `hitSlop` (LC-54 / LC-71). Spread the
@@ -251,7 +258,35 @@ export interface KnobProps {
   controlType: { fontSize: number };
   /** Coordinated control icon box. Spread whole. */
   controlIcon: { width: number; height: number };
-  heading: { fontFamily: string; fontWeight: string };
+  /**
+   * Menu / listbox / command row box from the `menuRow` family: one size key
+   * below the control token (36 at default), padX `$3`, 44 on touch.
+   * Spread whole onto the row; Select reads `minHeight` as its row pitch.
+   */
+  menuRow: { minHeight: number; paddingHorizontal: number; gap: number };
+  /** Menu row type: the control token's own label size. Spread whole. */
+  menuRowType: { fontSize: number };
+  /** Tab box from the `tab` family: height and padX one key below the control token, 44 on touch. */
+  tab: { height: number; paddingHorizontal: number; gap: number };
+  /** Tab type: the control token's own label size. Spread whole. */
+  tabType: { fontSize: number };
+  /** Press-target extension that lifts the painted tab to the 44 press target (zero once it paints 44). */
+  tabHitSlop: HitSlopInsets;
+  /**
+   * Top-bar fragment (Navbar, DeskShell, BackofficeShell, Awesomebar): spread
+   * `frame` onto the bar row and render bar controls at `sizeToken` (wrap
+   * them in `<Surface size={bar.sizeToken}>`). `frame.minHeight` is the
+   * default control height plus the vertical padding, 52 at default.
+   */
+  bar: {
+    frame: {
+      paddingVertical: string;
+      paddingHorizontal: string;
+      minHeight: number;
+    };
+    sizeToken: "$3";
+  };
+  heading: { fontFamily: string; fontWeight?: string };
   /**
    * Page-title type step (D-11 hero-H1 dial) — the complete size fragment for
    * the single page-title heading, spread whole onto the title node. Product
@@ -261,17 +296,22 @@ export interface KnobProps {
   pageTitle: { size: FontSizeTokens };
   /** color is set only for solid semantic-intent Buttons (error/warning/success). */
   body: { fontFamily: string; fontWeight: string; color?: ColorTokens };
+  typography: {
+    mutedMono: { fontFamily: "$mono"; color: string };
+    tabular: {
+      fontVariant?: ["tabular-nums"];
+      style?: { fontVariantNumeric: "tabular-nums" };
+    };
+  };
   textWeight: { fontWeight: string };
+  motion: Record<MotionRoleName, MotionRole>;
+  /** @deprecated read a role from knobProps.motion */
   transition: TransitionProp | undefined;
   outlined: boolean;
   pointy: boolean;
   textAccent: string;
   textAccentColor: string;
   inputBackground: string;
-  space: string;
-  size: string;
-  /** Effective density mode after compact override resolution. */
-  density: string;
   /** House decision knobs — pass-through for consumers (forms/tables). */
   fieldLabelPlacement: string;
   requiredMarking: string;