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
src/theme/generated/tokens.css
View File

@@ -27,7 +27,7 @@
--fa-input-height-md: 48px; /** Medium (default) — standard forms, matches Button large for alignment */
--fa-input-icon-size-default: 20px; /** 20px — icon size inside input field, matches Figma trailing icon */
--fa-provider-card-image-height: 180px; /** Fixed image height for consistent card sizing in list layouts */
--fa-provider-card-logo-size: 56px; /** Logo circle diameter — positioned bottom-left of image, overlapping content area */
--fa-provider-card-logo-size: 64px; /** Logo width/height — rounded rectangle, overlapping image bottom into content row */
--fa-radio-size-default: 20px; /** Default radio size — matches Figma 16px + padding for 44px touch target area */
--fa-radio-dot-size-default: 10px; /** Selected indicator dot — 50% of outer size */
--fa-switch-track-width: 44px; /** Track width — slightly narrower than Figma 52px for better proportion with 44px touch target */
@@ -267,9 +267,7 @@
--fa-input-font-size-default: var(--fa-font-size-base); /** 16px — prevents iOS auto-zoom on focus, matches Figma */
--fa-input-border-radius-default: var(--fa-border-radius-sm); /** 4px — subtle rounding, consistent with Figma design */
--fa-input-gap-default: var(--fa-spacing-2); /** 8px — vertical rhythm between label/input/helper, slightly more generous than Figma's 6px for readability */
--fa-provider-card-footer-background: var(--fa-color-brand-100); /** Warm beige footer — brand.100 provides subtle brand warmth */
--fa-provider-card-footer-padding-x: var(--fa-spacing-4); /** 16px horizontal padding — matches compact card padding */
--fa-provider-card-footer-padding-y: var(--fa-spacing-2); /** 8px vertical padding — compact footer bar */
--fa-provider-card-logo-border-radius: var(--fa-border-radius-md); /** 8px rounded rectangle — softer than circle, matches card border radius */
--fa-provider-card-content-padding: var(--fa-spacing-3); /** 12px content padding — tight to keep card compact in listing layout */
--fa-provider-card-content-gap: var(--fa-spacing-1); /** 4px vertical gap between content rows — tight for compact listing cards */
--fa-switch-track-border-radius: var(--fa-border-radius-full); /** Pill shape */
@@ -385,10 +383,10 @@
--fa-typography-label-sm-font-weight: var(--fa-font-weight-medium);
--fa-typography-caption-font-family: var(--fa-font-family-body);
--fa-typography-caption-font-size: var(--fa-font-size-xs); /** 12px */
--fa-typography-caption-font-weight: var(--fa-font-weight-regular);
--fa-typography-caption-font-weight: var(--fa-font-weight-medium);
--fa-typography-caption-sm-font-family: var(--fa-font-family-body);
--fa-typography-caption-sm-font-size: var(--fa-font-size-2xs); /** 11px — accessibility floor */
--fa-typography-caption-sm-font-weight: var(--fa-font-weight-regular);
--fa-typography-caption-sm-font-weight: var(--fa-font-weight-medium);
--fa-typography-overline-font-family: var(--fa-font-family-body);
--fa-typography-overline-font-size: var(--fa-font-size-xs); /** 12px */
--fa-typography-overline-font-weight: var(--fa-font-weight-semibold);

10
src/theme/generated/tokens.js
View File

@@ -73,10 +73,8 @@ export const InputBorderRadiusDefault = "4px"; // 4px — subtle rounding, consi
export const InputGapDefault = "8px"; // 8px — vertical rhythm between label/input/helper, slightly more generous than Figma's 6px for readability
export const InputIconSizeDefault = "20px"; // 20px — icon size inside input field, matches Figma trailing icon
export const ProviderCardImageHeight = "180px"; // Fixed image height for consistent card sizing in list layouts
export const ProviderCardLogoSize = "56px"; // Logo circle diameter — positioned bottom-left of image, overlapping content area
export const ProviderCardFooterBackground = "#f7ecdf"; // Warm beige footer — brand.100 provides subtle brand warmth
export const ProviderCardFooterPaddingX = "16px"; // 16px horizontal padding — matches compact card padding
export const ProviderCardFooterPaddingY = "8px"; // 8px vertical padding — compact footer bar
export const ProviderCardLogoSize = "64px"; // Logo width/height — rounded rectangle, overlapping image bottom into content row
export const ProviderCardLogoBorderRadius = "8px"; // 8px rounded rectangle — softer than circle, matches card border radius
export const ProviderCardContentPadding = "12px"; // 12px content padding — tight to keep card compact in listing layout
export const ProviderCardContentGap = "4px"; // 4px vertical gap between content rows — tight for compact listing cards
export const RadioSizeDefault = "20px"; // Default radio size — matches Figma 16px + padding for 44px touch target area
@@ -403,13 +401,13 @@ export const TypographyLabelSmLetterSpacing = "0.2px";
export const TypographyCaptionFontFamily =
"'Montserrat', 'Helvetica Neue', Arial, sans-serif";
export const TypographyCaptionFontSize = "0.75rem"; // 12px
export const TypographyCaptionFontWeight = 400;
export const TypographyCaptionFontWeight = 500;
export const TypographyCaptionLineHeight = 1.417;
export const TypographyCaptionLetterSpacing = "0.2px";
export const TypographyCaptionSmFontFamily =
"'Montserrat', 'Helvetica Neue', Arial, sans-serif";
export const TypographyCaptionSmFontSize = "0.6875rem"; // 11px — accessibility floor
export const TypographyCaptionSmFontWeight = 400;
export const TypographyCaptionSmFontWeight = 500;
export const TypographyCaptionSmLineHeight = 1.364;
export const TypographyCaptionSmLetterSpacing = "0.2px";
export const TypographyOverlineFontFamily =