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

Refine ProviderCard v2 — logo, price, badges, footer, unverified treatment

Browse Source 
- Logo: circle → 64px rounded rectangle (8px radius), positioned fully
  inside image area with white border + shadow
- Footer removed — redundant since whole card is clickable and price
  is already in content area
- Price: split "Packages from" (body2) + price (h6/500wt) for lighter
  ecommerce feel, replaces blocky labelLg/700
- Verified badge bumped to medium size for visibility
- Capability badge: medium size, trailing info icon + capabilityDescription
  tooltip prop for plain-language definitions on hover
- Unverified cards: 3px top accent bar, list on neutral.50 background
- Caption/CaptionSm weight: 400 → 500 system-wide (extends D019)
- Meta row: body2 → caption size for clearer tertiary hierarchy

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-25 18:28:28 +11:00
parent 811736dbb9
commit 891ded2fdb
9 changed files with 160 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -272,9 +272,7 @@ the correct token for any design property.
| Token path | Value / Reference | Used by | Description |
|-----------|-----------|---------|-------------|
| providerCard.image.height | 180px | ProviderCard | Hero image fixed height |
| providerCard.logo.size | 48px | ProviderCard | Logo circle diameter |
| providerCard.footer.background | → color.brand.100 (#F7ECDF) | ProviderCard | Warm beige footer bar |
| providerCard.footer.paddingX | → spacing.4 (16px) | ProviderCard | Footer horizontal padding |
| providerCard.footer.paddingY | → spacing.3 (12px) | ProviderCard | Footer vertical padding |
| providerCard.content.padding | → spacing.4 (16px) | ProviderCard | Content area padding |
| providerCard.content.gap | → spacing.2 (8px) | ProviderCard | Gap between content rows |
| providerCard.logo.size | 64px | ProviderCard | Logo width/height — rounded rectangle inside image area |
| providerCard.logo.borderRadius | → borderRadius.md (8px) | ProviderCard | Rounded rectangle corners |
| providerCard.content.padding | → spacing.3 (12px) | ProviderCard | Content area padding |
| providerCard.content.gap | → spacing.1 (4px) | ProviderCard | Gap between content rows |