Add selected state and hover background to Card
- 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>
This commit is contained in:
@@ -357,5 +357,8 @@
|
||||
--fa-typography-overline-sm-font-size: var(--fa-font-size-2xs); /** 11px — accessibility floor */
|
||||
--fa-typography-overline-sm-font-weight: var(--fa-font-weight-semibold);
|
||||
--fa-card-border-default: var(--fa-color-border-default); /** Neutral border for outlined cards */
|
||||
--fa-card-border-selected: var(--fa-color-border-brand); /** Brand border for selected/active cards — warm gold accent */
|
||||
--fa-card-background-default: var(--fa-color-surface-raised); /** White — standard card background (raised surface) */
|
||||
--fa-card-background-hover: var(--fa-color-surface-subtle); /** Subtle grey fill on hover — neutral.50 for soft interactive feedback */
|
||||
--fa-card-background-selected: var(--fa-color-surface-warm); /** Warm tint for selected cards — brand.50 reinforces active state */
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user