richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update memory files for Card selected state

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-25 15:46:38 +11:00
parent 74ee0b87da
commit a899c9a376
3 changed files with 32 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/memory/component-registry.md
View File

@@ -25,7 +25,7 @@ duplicates) and MUST update it after completing one.
| Avatar | planned | image, initials, icon × small, medium, large | | User/entity representation | | Avatar | planned | image, initials, icon × small, medium, large | | User/entity representation |
| Divider | planned | horizontal, vertical | | Visual separator | | Divider | planned | horizontal, vertical | | Visual separator |
| Chip | planned | filled, outlined × deletable, clickable | | Tags and filters | | 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 | | Link | planned | default, subtle | | Navigation text |
## Molecules ## Molecules

29
docs/memory/session-log.md
View File

@@ -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)? - Should we add a "selected" state for ServiceOption-style cards (e.g., brand border + brand.50 background)?
**Next steps:** **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 - Build Badge or Chip atom next
- Begin PriceCard or ServiceOption molecule once Card is approved - Begin PriceCard or ServiceOption molecule once Card is approved

3
docs/memory/token-registry.md
View File

@@ -204,4 +204,7 @@ the correct token for any design property.
| card.shadow.default | → shadow.md | Card | Resting elevation — medium shadow | | card.shadow.default | → shadow.md | Card | Resting elevation — medium shadow |
| card.shadow.hover | → shadow.lg | Card | Hover elevation — interactive cards | | card.shadow.hover | → shadow.lg | Card | Hover elevation — interactive cards |
| card.border.default | → color.border.default (#E8E8E8) | Card | Outlined card border colour | | 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.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 |