Add Card atom component

- Create card component tokens (borderRadius, padding, shadow, border, background)
- Build Card component with elevated/outlined variants, interactive hover, padding presets
- Add MUI theme overrides using card tokens (shadow.md resting, border for outlined)
- Create 8 Storybook stories: Default, Variants, Interactive, PaddingPresets,
  PriceCardPreview, ServiceOptionPreview, WithImage, RichContent
- Regenerate token pipeline outputs (7 new card tokens)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-25 15:31:10 +11:00
parent e4f9edd97f
commit 7169a6559b
7 changed files with 467 additions and 1 deletions

View File

@@ -476,9 +476,21 @@ export const theme = createTheme({
MuiCard: {
styleOverrides: {
root: {
borderRadius: parseInt(t.BorderRadiusMd, 10),
borderRadius: parseInt(t.CardBorderRadiusDefault, 10),
backgroundColor: t.CardBackgroundDefault,
boxShadow: t.CardShadowDefault,
transition: 'box-shadow 150ms ease-in-out',
},
},
variants: [
{
props: { variant: 'outlined' },
style: {
boxShadow: 'none',
borderColor: t.CardBorderDefault,
},
},
],
},
MuiOutlinedInput: {
styleOverrides: {