{ "input": { "$description": "Input component tokens — sizing and spacing per size variant. Colours use semantic tokens via MUI theme palette, consistent with Button approach.", "height": { "$type": "dimension", "$description": "Input field heights. Medium matches Button large (48px) for alignment in search bars. Small matches Button medium (40px) for compact layouts.", "sm": { "$value": "40px", "$description": "Small — compact forms, admin layouts, matches Button medium height" }, "md": { "$value": "48px", "$description": "Medium (default) — standard forms, matches Button large for alignment" } }, "paddingX": { "$type": "dimension", "$description": "Horizontal padding inside the input field.", "default": { "$value": "{spacing.3}", "$description": "12px — inner horizontal padding matching Figma design" } }, "paddingY": { "$type": "dimension", "$description": "Vertical padding inside the input field per size.", "sm": { "$value": "{spacing.2}", "$description": "8px — compact vertical padding for small size" }, "md": { "$value": "{spacing.3}", "$description": "12px — standard vertical padding for medium size" } }, "fontSize": { "$type": "dimension", "$description": "Font size of the input value and placeholder text.", "default": { "$value": "{fontSize.base}", "$description": "16px — prevents iOS auto-zoom on focus, matches Figma" } }, "borderRadius": { "$type": "dimension", "$description": "Border radius for the input field.", "default": { "$value": "{borderRadius.sm}", "$description": "4px — subtle rounding, consistent with Figma design" } }, "gap": { "$type": "dimension", "$description": "Vertical gap between label, input field, and helper text.", "default": { "$value": "{spacing.2}", "$description": "8px — vertical rhythm between label/input/helper, slightly more generous than Figma's 6px for readability" } }, "iconSize": { "$type": "dimension", "$description": "Dimensions for leading/trailing icons inside the input.", "default": { "$value": "20px", "$description": "20px — icon size inside input field, matches Figma trailing icon" } } } }