diff --git a/docs/memory/component-registry.md b/docs/memory/component-registry.md index 75f9203..05ec53e 100644 --- a/docs/memory/component-registry.md +++ b/docs/memory/component-registry.md @@ -25,7 +25,7 @@ duplicates) and MUST update it after completing one. | Avatar | planned | image, initials, icon × small, medium, large | | User/entity representation | | Divider | planned | horizontal, vertical | | Visual separator | | Chip | planned | filled, outlined × deletable, clickable | | Tags and filters | -| Card | review | elevated, outlined × default, compact, none padding × interactive | card.borderRadius/padding/shadow/border/background, color.surface.raised, color.border.default, shadow.md/lg | Content container. Elevated (shadow) or outlined (border). Interactive adds hover lift. Three padding presets. | +| Card | review | elevated, outlined × default, compact, none padding × interactive × selected | card.borderRadius/padding/shadow/border/background, color.surface.raised/subtle/warm, color.border.default/brand, shadow.md/lg | Content container. Elevated (shadow) or outlined (border). Interactive adds hover bg fill + shadow lift. Selected adds brand border + warm bg. Three padding presets. | | Link | planned | default, subtle | | Navigation text | ## Molecules diff --git a/docs/memory/session-log.md b/docs/memory/session-log.md index 448176c..3290552 100644 --- a/docs/memory/session-log.md +++ b/docs/memory/session-log.md @@ -321,6 +321,33 @@ Each entry follows this structure: - Should we add a "selected" state for ServiceOption-style cards (e.g., brand border + brand.50 background)? **Next steps:** -- User to review Card in Storybook +- ~~User to review Card in Storybook~~ ✓ Feedback received — add selected + hover bg + +### Session 2026-03-25g — Card selected state + hover background + +**Agent(s):** Claude Opus (via conversation) + +**Work completed:** +- Reviewed FA 1.0 Figma designs for card usage patterns: + - ListItemPurchaseOption (2349:39505): selectable cards with 4 states × 2 viewports + - ListItemAddItem (2350:40658): toggle/switch pattern — deferred to future Toggle component +- Added `selected` prop: brand border (2px, warm gold #BA834E) + warm background (brand.50 #FEF9F5) +- Added hover background fill: interactive cards now fill with neutral.50 on hover (matching Figma's inactive→hover pattern) +- Hover on selected cards preserves warm background instead of switching to neutral +- Elevated interactive cards still get shadow lift on hover; outlined ones only get bg fill +- Added 3 new card tokens: border.selected, background.hover, background.selected +- Added 4 new stories: Selected, OptionSelect (single-select with radio semantics), MultiSelect (checkbox toggle), OnDifferentBackgrounds (white vs grey surface) +- Replaced ServiceOptionPreview story with the more complete OptionSelect and MultiSelect patterns +- Preflight passed all 5 checks +- Committed and pushed to Gitea + +**Decisions made:** +- Selected state uses 2px brand border (not 1.5px from Figma 1.0) — 2px aligns with our focus ring width and sits on the 2px sub-grid +- Selected background uses brand.50 (warm tint) not neutral.50 (grey) — warm tint reinforces the brand connection and distinguishes selected from hovered +- Hover bg fill uses neutral.50 (not brand.50) for unselected cards — keeps hover subtle and neutral +- Toggle/switch pattern from Figma (ListItemAddItem) is a separate component concern, not Card + +**Next steps:** +- User to review Card selected/hover states in Storybook - Build Badge or Chip atom next - Begin PriceCard or ServiceOption molecule once Card is approved diff --git a/docs/memory/token-registry.md b/docs/memory/token-registry.md index 1cfa275..7680721 100644 --- a/docs/memory/token-registry.md +++ b/docs/memory/token-registry.md @@ -204,4 +204,7 @@ the correct token for any design property. | card.shadow.default | → shadow.md | Card | Resting elevation — medium shadow | | card.shadow.hover | → shadow.lg | Card | Hover elevation — interactive cards | | card.border.default | → color.border.default (#E8E8E8) | Card | Outlined card border colour | +| card.border.selected | → color.border.brand (#BA834E) | Card | Brand border for selected/active cards | | card.background.default | → color.surface.raised (#FFFFFF) | Card | Card background (raised surface) | +| card.background.hover | → color.surface.subtle (#FAFAFA) | Card | Subtle grey fill on hover for interactive cards | +| card.background.selected | → color.surface.warm (#FEF9F5) | Card | Warm tint for selected cards |