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>
59 lines
3.3 KiB
JSON
59 lines
3.3 KiB
JSON
{
|
|
"button": {
|
|
"$description": "Button component tokens — sizing, spacing, and typography per size variant. Colours use semantic interactive tokens via MUI theme palette.",
|
|
"height": {
|
|
"$type": "dimension",
|
|
"$description": "Minimum heights per button size. All values are multiples of 4px. Large (48px) meets the 44px minimum touch target for mobile.",
|
|
"xs": { "$value": "28px", "$description": "Extra-small — compact text buttons, inline actions" },
|
|
"sm": { "$value": "32px", "$description": "Small — secondary actions, toolbar buttons" },
|
|
"md": { "$value": "40px", "$description": "Medium — default size, form submissions" },
|
|
"lg": { "$value": "48px", "$description": "Large — primary CTAs, mobile touch targets (meets 44px minimum)" }
|
|
},
|
|
"paddingX": {
|
|
"$type": "dimension",
|
|
"$description": "Horizontal padding per button size.",
|
|
"xs": { "$value": "{spacing.2}", "$description": "8px — compact horizontal padding" },
|
|
"sm": { "$value": "{spacing.3}", "$description": "12px — small horizontal padding" },
|
|
"md": { "$value": "{spacing.4}", "$description": "16px — default horizontal padding" },
|
|
"lg": { "$value": "{spacing.6}", "$description": "24px — generous CTA horizontal padding" }
|
|
},
|
|
"paddingY": {
|
|
"$type": "dimension",
|
|
"$description": "Vertical padding per button size.",
|
|
"xs": { "$value": "{spacing.1}", "$description": "4px — compact vertical padding" },
|
|
"sm": { "$value": "{spacing.1}", "$description": "4px — small vertical padding" },
|
|
"md": { "$value": "{spacing.2}", "$description": "8px — default vertical padding" },
|
|
"lg": { "$value": "{spacing.3}", "$description": "12px — generous CTA vertical padding" }
|
|
},
|
|
"fontSize": {
|
|
"$type": "dimension",
|
|
"$description": "Font size per button size.",
|
|
"xs": { "$value": "{fontSize.xs}", "$description": "12px — extra-small button text" },
|
|
"sm": { "$value": "{fontSize.sm}", "$description": "14px — small button text" },
|
|
"md": { "$value": "{fontSize.sm}", "$description": "14px — default button text" },
|
|
"lg": { "$value": "{fontSize.base}", "$description": "16px — large button text" }
|
|
},
|
|
"iconSize": {
|
|
"$type": "dimension",
|
|
"$description": "Icon dimensions per button size.",
|
|
"xs": { "$value": "14px", "$description": "14px icons in extra-small buttons" },
|
|
"sm": { "$value": "16px", "$description": "16px icons in small buttons" },
|
|
"md": { "$value": "18px", "$description": "18px icons in medium buttons" },
|
|
"lg": { "$value": "20px", "$description": "20px icons in large buttons" }
|
|
},
|
|
"iconGap": {
|
|
"$type": "dimension",
|
|
"$description": "Gap between icon and label text.",
|
|
"xs": { "$value": "{spacing.1}", "$description": "4px icon-text gap" },
|
|
"sm": { "$value": "{spacing.1}", "$description": "4px icon-text gap" },
|
|
"md": { "$value": "{spacing.2}", "$description": "8px icon-text gap" },
|
|
"lg": { "$value": "{spacing.2}", "$description": "8px icon-text gap" }
|
|
},
|
|
"borderRadius": {
|
|
"$type": "dimension",
|
|
"$description": "Border radius for buttons.",
|
|
"default": { "$value": "{borderRadius.md}", "$description": "8px — standard button rounding" }
|
|
}
|
|
}
|
|
}
|