Richie
74ee0b87da
- Add `selected` prop: brand border (warm gold) + warm background tint (brand.50) - Add hover background fill (neutral.50) for interactive cards - Add 3 new card tokens: border.selected, background.hover, background.selected - Add stories: Selected, OptionSelect (single-select), MultiSelect (toggle), OnDifferentBackgrounds (white vs grey surface comparison) - Informed by FA 1.0 Figma ListItemPurchaseOption pattern (node 2349:39505) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
35 lines
1.9 KiB
JSON
35 lines
1.9 KiB
JSON
{
|
|
"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 card variants and states.",
|
|
"default": { "$value": "{color.border.default}", "$description": "Neutral border for outlined cards" },
|
|
"selected": { "$value": "{color.border.brand}", "$description": "Brand border for selected/active cards — warm gold accent" }
|
|
},
|
|
"background": {
|
|
"$type": "color",
|
|
"$description": "Card background colours.",
|
|
"default": { "$value": "{color.surface.raised}", "$description": "White — standard card background (raised surface)" },
|
|
"hover": { "$value": "{color.surface.subtle}", "$description": "Subtle grey fill on hover — neutral.50 for soft interactive feedback" },
|
|
"selected": { "$value": "{color.surface.warm}", "$description": "Warm tint for selected cards — brand.50 reinforces active state" }
|
|
}
|
|
}
|
|
}
|