Richie
4cafd84142
Copy of the Funeral Arranger design system components, theme, tokens, and Storybook config from the original Parsons project. Pre-upgrade baseline with React 18, MUI v5, Storybook 8. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
43 lines
2.2 KiB
JSON
43 lines
2.2 KiB
JSON
{
|
|
"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" }
|
|
}
|
|
}
|
|
}
|