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:
31
tokens/component/card.json
Normal file
31
tokens/component/card.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"card": {
|
||||
"$description": "Card component tokens — content container with elevation or border. Used by PriceCard, ServiceOption, and other molecule/organism compositions.",
|
||||
"borderRadius": {
|
||||
"$type": "dimension",
|
||||
"$description": "Card corner radius.",
|
||||
"default": { "$value": "{borderRadius.md}", "$description": "8px — standard card rounding" }
|
||||
},
|
||||
"padding": {
|
||||
"$type": "dimension",
|
||||
"$description": "Internal padding for card content area.",
|
||||
"default": { "$value": "{spacing.6}", "$description": "24px — standard card padding (desktop)" },
|
||||
"compact": { "$value": "{spacing.4}", "$description": "16px — compact card padding (mobile, tight layouts)" }
|
||||
},
|
||||
"shadow": {
|
||||
"$description": "Elevation shadows for card variants.",
|
||||
"default": { "$value": "{shadow.md}", "$description": "Medium shadow — resting elevated card" },
|
||||
"hover": { "$value": "{shadow.lg}", "$description": "High shadow — interactive card on hover" }
|
||||
},
|
||||
"border": {
|
||||
"$type": "color",
|
||||
"$description": "Border colours for the outlined card variant.",
|
||||
"default": { "$value": "{color.border.default}", "$description": "Neutral border for outlined cards" }
|
||||
},
|
||||
"background": {
|
||||
"$type": "color",
|
||||
"$description": "Card background colours.",
|
||||
"default": { "$value": "{color.surface.raised}", "$description": "White — standard card background (raised surface)" }
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user