From 3be3afd80c3a1779c449ea4e1d4645afdb670d7a Mon Sep 17 00:00:00 2001 From: Richie Date: Wed, 25 Mar 2026 15:32:02 +1100 Subject: [PATCH] Update memory files for Card atom MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Component registry: Card → review with full details - Session log: Add session 2026-03-25f entry - Token registry: Add card component tokens Co-Authored-By: Claude Opus 4.6 (1M context) --- docs/memory/component-registry.md | 2 +- docs/memory/session-log.md | 40 +++++++++++++++++++++++++++++-- docs/memory/token-registry.md | 14 +++++++++++ 3 files changed, 53 insertions(+), 3 deletions(-) diff --git a/docs/memory/component-registry.md b/docs/memory/component-registry.md index 7466293..75f9203 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 | planned | elevated, outlined | | Content container | +| 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. | | Link | planned | default, subtle | | Navigation text | ## Molecules diff --git a/docs/memory/session-log.md b/docs/memory/session-log.md index 26ae8ff..448176c 100644 --- a/docs/memory/session-log.md +++ b/docs/memory/session-log.md @@ -285,6 +285,42 @@ Each entry follows this structure: - Should we add a character count feature? (Useful for textarea fields like special instructions) **Next steps:** -- User to review Input in Storybook -- Build next atom (Card, Badge, or Chip recommended) +- ~~User to review Input in Storybook~~ ✓ +- ~~Build next atom (Card, Badge, or Chip recommended)~~ ✓ Card done - Consider whether FormField molecule is still needed given Input's built-in label/helperText + +### Session 2026-03-25f — Card atom + +**Agent(s):** Claude Opus (via conversation) + +**Work completed:** +- Created card component tokens (`tokens/component/card.json`): borderRadius, padding (default 24px / compact 16px), shadow (default md / hover lg), border, background — 7 tokens total +- Rebuilt token pipeline — 7 new card tokens generated across CSS/JS/JSON outputs +- Updated MUI theme (`src/theme/index.ts`) with MuiCard overrides: + - Root: card token border radius, background, resting shadow (shadow.md), smooth transition + - Outlined variant: no shadow, card border colour +- Created Card component (`src/components/atoms/Card/Card.tsx`): + - Two visual variants: elevated (shadow, default) and outlined (border) + - `interactive` prop: hover shadow lift (shadow.lg), pointer cursor, focus-visible outline + - `padding` prop: "default" (24px), "compact" (16px), "none" (raw children for full-bleed) + - Uses CardContent internally for padded variants; raw children when none + - Thin wrapper pattern consistent with Button and Typography +- Created barrel export (`src/components/atoms/Card/index.ts`) +- Created 8 Storybook stories: Default, Variants, Interactive, PaddingPresets, PriceCardPreview, ServiceOptionPreview, WithImage, RichContent +- Preflight passed all 5 checks +- Committed and pushed to Gitea + +**Decisions made:** +- Card uses MUI spacing units (p: 4/6) for padding presets rather than CSS variables — consistent with MUI-first approach +- Elevation set to 0 on MuiCard; box-shadow applied directly from card tokens for precise control +- Interactive hover uses CSS variable (`var(--fa-card-shadow-hover)`) for shadow.lg +- No new design decisions needed — Card follows existing token/design conventions from design-system.md + +**Open questions:** +- Should interactive cards have a subtle border-colour change on hover in addition to shadow lift? +- 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 +- 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 5bbe874..1cfa275 100644 --- a/docs/memory/token-registry.md +++ b/docs/memory/token-registry.md @@ -191,3 +191,17 @@ the correct token for any design property. | button.iconSize.xs–lg | 14–20px | Button | Icon dimensions per size | | button.iconGap.xs–lg | → spacing.1–2 (4–8px) | Button | Icon-to-text gap per size | | button.borderRadius.default | → borderRadius.md (8px) | Button | Button corner radius | + +### Card + +`tokens/component/card.json` + +| Token path | Value / Reference | Used by | Description | +|-----------|-----------|---------|-------------| +| card.borderRadius.default | → borderRadius.md (8px) | Card | Card corner radius | +| card.padding.default | → spacing.6 (24px) | Card | Standard card padding (desktop) | +| card.padding.compact | → spacing.4 (16px) | Card | Compact card padding (mobile, tight layouts) | +| 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.background.default | → color.surface.raised (#FFFFFF) | Card | Card background (raised surface) |