Initial commit: FA Design System source files

Copy of the Funeral Arranger design system components, theme, tokens,
and Storybook config from the original Parsons project. Pre-upgrade
baseline with React 18, MUI v5, Storybook 8.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

tokens/component/badge.json

@@ -0,0 +1,43 @@
+{
+  "badge": {
+    "$description": "Badge component tokens — status indicator labels used in PriceCard, ServiceOption, and other contexts. Display-only, not interactive.",
+    "height": {
+      "$type": "dimension",
+      "$description": "Badge heights per size.",
+      "sm": { "$value": "22px", "$description": "Small — compact inline status indicators" },
+      "md": { "$value": "26px", "$description": "Medium — default status badges, card labels" },
+      "lg": { "$value": "32px", "$description": "Large — prominent labels, hero badges, marketing callouts" }
+    },
+    "paddingX": {
+      "$type": "dimension",
+      "$description": "Horizontal padding per size.",
+      "sm": { "$value": "{spacing.2}", "$description": "8px — compact horizontal padding" },
+      "md": { "$value": "{spacing.3}", "$description": "12px — default horizontal padding" },
+      "lg": { "$value": "{spacing.4}", "$description": "16px — generous horizontal padding" }
+    },
+    "fontSize": {
+      "$type": "dimension",
+      "$description": "Font size per badge size.",
+      "sm": { "$value": "{fontSize.2xs}", "$description": "11px — small badge text" },
+      "md": { "$value": "{fontSize.xs}", "$description": "12px — default badge text" },
+      "lg": { "$value": "{fontSize.sm}", "$description": "14px — large badge text" }
+    },
+    "iconSize": {
+      "$type": "dimension",
+      "$description": "Icon dimensions per badge size.",
+      "sm": { "$value": "12px", "$description": "12px icons in small badges" },
+      "md": { "$value": "14px", "$description": "14px icons in medium badges" },
+      "lg": { "$value": "16px", "$description": "16px icons in large badges" }
+    },
+    "iconGap": {
+      "$type": "dimension",
+      "$description": "Gap between icon and label text.",
+      "default": { "$value": "{spacing.1}", "$description": "4px icon-text gap" }
+    },
+    "borderRadius": {
+      "$type": "dimension",
+      "$description": "Badge corner radius.",
+      "default": { "$value": "{borderRadius.full}", "$description": "Pill shape — fully rounded" }
+    }
+  }
+}

tokens/component/button.json

@@ -0,0 +1,58 @@
+{
+  "button": {
+    "$description": "Button component tokens — sizing, spacing, and typography per size variant. Colours use semantic interactive tokens via MUI theme palette.",
+    "height": {
+      "$type": "dimension",
+      "$description": "Minimum heights per button size. All values are multiples of 4px. Large (48px) meets the 44px minimum touch target for mobile.",
+      "xs": { "$value": "28px", "$description": "Extra-small — compact text buttons, inline actions" },
+      "sm": { "$value": "32px", "$description": "Small — secondary actions, toolbar buttons" },
+      "md": { "$value": "40px", "$description": "Medium — default size, form submissions" },
+      "lg": { "$value": "48px", "$description": "Large — primary CTAs, mobile touch targets (meets 44px minimum)" }
+    },
+    "paddingX": {
+      "$type": "dimension",
+      "$description": "Horizontal padding per button size.",
+      "xs": { "$value": "{spacing.2}", "$description": "8px — compact horizontal padding" },
+      "sm": { "$value": "{spacing.3}", "$description": "12px — small horizontal padding" },
+      "md": { "$value": "{spacing.4}", "$description": "16px — default horizontal padding" },
+      "lg": { "$value": "{spacing.6}", "$description": "24px — generous CTA horizontal padding" }
+    },
+    "paddingY": {
+      "$type": "dimension",
+      "$description": "Vertical padding per button size.",
+      "xs": { "$value": "{spacing.1}", "$description": "4px — compact vertical padding" },
+      "sm": { "$value": "{spacing.1}", "$description": "4px — small vertical padding" },
+      "md": { "$value": "{spacing.2}", "$description": "8px — default vertical padding" },
+      "lg": { "$value": "{spacing.3}", "$description": "12px — generous CTA vertical padding" }
+    },
+    "fontSize": {
+      "$type": "dimension",
+      "$description": "Font size per button size.",
+      "xs": { "$value": "{fontSize.xs}", "$description": "12px — extra-small button text" },
+      "sm": { "$value": "{fontSize.sm}", "$description": "14px — small button text" },
+      "md": { "$value": "{fontSize.sm}", "$description": "14px — default button text" },
+      "lg": { "$value": "{fontSize.base}", "$description": "16px — large button text" }
+    },
+    "iconSize": {
+      "$type": "dimension",
+      "$description": "Icon dimensions per button size.",
+      "xs": { "$value": "14px", "$description": "14px icons in extra-small buttons" },
+      "sm": { "$value": "16px", "$description": "16px icons in small buttons" },
+      "md": { "$value": "18px", "$description": "18px icons in medium buttons" },
+      "lg": { "$value": "20px", "$description": "20px icons in large buttons" }
+    },
+    "iconGap": {
+      "$type": "dimension",
+      "$description": "Gap between icon and label text.",
+      "xs": { "$value": "{spacing.1}", "$description": "4px icon-text gap" },
+      "sm": { "$value": "{spacing.1}", "$description": "4px icon-text gap" },
+      "md": { "$value": "{spacing.2}", "$description": "8px icon-text gap" },
+      "lg": { "$value": "{spacing.2}", "$description": "8px icon-text gap" }
+    },
+    "borderRadius": {
+      "$type": "dimension",
+      "$description": "Border radius for buttons.",
+      "default": { "$value": "{borderRadius.md}", "$description": "8px — standard button rounding" }
+    }
+  }
+}

tokens/component/card.json

@@ -0,0 +1,34 @@
+{
+  "card": {
+    "$description": "Card component tokens — content container with elevation or border. Used by PriceCard, ServiceOption, and other molecule/organism compositions.",
+    "borderRadius": {
+      "$type": "dimension",
+      "$description": "Card corner radius.",
+      "default": { "$value": "{borderRadius.md}", "$description": "8px — standard card rounding" }
+    },
+    "padding": {
+      "$type": "dimension",
+      "$description": "Internal padding for card content area.",
+      "default": { "$value": "{spacing.6}", "$description": "24px — standard card padding (desktop)" },
+      "compact": { "$value": "{spacing.4}", "$description": "16px — compact card padding (mobile, tight layouts)" }
+    },
+    "shadow": {
+      "$description": "Elevation shadows for card variants.",
+      "default": { "$value": "{shadow.md}", "$description": "Medium shadow — resting elevated card" },
+      "hover": { "$value": "{shadow.lg}", "$description": "High shadow — interactive card on hover" }
+    },
+    "border": {
+      "$type": "color",
+      "$description": "Border colours for card variants and states.",
+      "default": { "$value": "{color.border.default}", "$description": "Neutral border for outlined cards" },
+      "selected": { "$value": "{color.border.brand}", "$description": "Brand border for selected/active cards — warm gold accent" }
+    },
+    "background": {
+      "$type": "color",
+      "$description": "Card background colours.",
+      "default": { "$value": "{color.surface.raised}", "$description": "White — standard card background (raised surface)" },
+      "hover": { "$value": "{color.surface.subtle}", "$description": "Subtle grey fill on hover — neutral.50 for soft interactive feedback" },
+      "selected": { "$value": "{color.surface.warm}", "$description": "Warm tint for selected cards — brand.50 reinforces active state" }
+    }
+  }
+}

tokens/component/chip.json

@@ -0,0 +1,45 @@
+{
+  "chip": {
+    "$description": "Chip component tokens — interactive tags for filtering, selection, and dismissible labels. Used in ServiceOption, search filters, and arrangement forms.",
+    "height": {
+      "$type": "dimension",
+      "$description": "Chip heights per size.",
+      "sm": { "$value": "28px", "$description": "Small — compact inline tags, tight layouts" },
+      "md": { "$value": "32px", "$description": "Medium — default interactive chips, filter tags" }
+    },
+    "paddingX": {
+      "$type": "dimension",
+      "$description": "Horizontal padding per size.",
+      "sm": { "$value": "{spacing.2}", "$description": "8px — compact horizontal padding" },
+      "md": { "$value": "{spacing.3}", "$description": "12px — default horizontal padding" }
+    },
+    "fontSize": {
+      "$type": "dimension",
+      "$description": "Font size per chip size.",
+      "sm": { "$value": "{fontSize.xs}", "$description": "12px — small chip text" },
+      "md": { "$value": "{fontSize.sm}", "$description": "14px — default chip text" }
+    },
+    "iconSize": {
+      "$type": "dimension",
+      "$description": "Leading icon dimensions per chip size.",
+      "sm": { "$value": "16px", "$description": "16px icons in small chips" },
+      "md": { "$value": "18px", "$description": "18px icons in medium chips" }
+    },
+    "deleteIconSize": {
+      "$type": "dimension",
+      "$description": "Delete/close icon dimensions per chip size.",
+      "sm": { "$value": "14px", "$description": "14px delete icon in small chips" },
+      "md": { "$value": "16px", "$description": "16px delete icon in medium chips" }
+    },
+    "iconGap": {
+      "$type": "dimension",
+      "$description": "Gap between icon/delete-icon and label text.",
+      "default": { "$value": "{spacing.1}", "$description": "4px icon-text gap" }
+    },
+    "borderRadius": {
+      "$type": "dimension",
+      "$description": "Chip corner radius.",
+      "default": { "$value": "{borderRadius.full}", "$description": "Pill shape — fully rounded" }
+    }
+  }
+}

tokens/component/input.json

@@ -0,0 +1,42 @@
+{
+  "input": {
+    "$description": "Input component tokens — sizing and spacing per size variant. Colours use semantic tokens via MUI theme palette, consistent with Button approach.",
+    "height": {
+      "$type": "dimension",
+      "$description": "Input field heights. Medium matches Button large (48px) for alignment in search bars. Small matches Button medium (40px) for compact layouts.",
+      "sm": { "$value": "40px", "$description": "Small — compact forms, admin layouts, matches Button medium height" },
+      "md": { "$value": "48px", "$description": "Medium (default) — standard forms, matches Button large for alignment" }
+    },
+    "paddingX": {
+      "$type": "dimension",
+      "$description": "Horizontal padding inside the input field.",
+      "default": { "$value": "{spacing.3}", "$description": "12px — inner horizontal padding matching Figma design" }
+    },
+    "paddingY": {
+      "$type": "dimension",
+      "$description": "Vertical padding inside the input field per size.",
+      "sm": { "$value": "{spacing.2}", "$description": "8px — compact vertical padding for small size" },
+      "md": { "$value": "{spacing.3}", "$description": "12px — standard vertical padding for medium size" }
+    },
+    "fontSize": {
+      "$type": "dimension",
+      "$description": "Font size of the input value and placeholder text.",
+      "default": { "$value": "{fontSize.base}", "$description": "16px — prevents iOS auto-zoom on focus, matches Figma" }
+    },
+    "borderRadius": {
+      "$type": "dimension",
+      "$description": "Border radius for the input field.",
+      "default": { "$value": "{borderRadius.sm}", "$description": "4px — subtle rounding, consistent with Figma design" }
+    },
+    "gap": {
+      "$type": "dimension",
+      "$description": "Vertical gap between label, input field, and helper text.",
+      "default": { "$value": "{spacing.2}", "$description": "8px — vertical rhythm between label/input/helper, slightly more generous than Figma's 6px for readability" }
+    },
+    "iconSize": {
+      "$type": "dimension",
+      "$description": "Dimensions for leading/trailing icons inside the input.",
+      "default": { "$value": "20px", "$description": "20px — icon size inside input field, matches Figma trailing icon" }
+    }
+  }
+}

tokens/component/mapPin.json

@@ -0,0 +1,17 @@
+{
+  "mapPin": {
+    "$description": "MapPin atom tokens — price-pill map markers for provider/venue map views. Verified (brand) vs unverified (neutral) visual distinction.",
+    "height": { "$type": "dimension", "$value": "28px", "$description": "Pill height — compact for map density" },
+    "paddingX": { "$type": "dimension", "$value": "{spacing.3}", "$description": "12px horizontal padding inside pill" },
+    "fontSize": { "$type": "dimension", "$value": "12px", "$description": "Small but legible price text" },
+    "borderRadius": { "$type": "dimension", "$value": "{borderRadius.full}", "$description": "Fully rounded pill shape" },
+    "dot": {
+      "$description": "Dot variant for pins without a price label.",
+      "size": { "$type": "dimension", "$value": "12px", "$description": "Small circle marker" }
+    },
+    "nub": {
+      "$description": "Downward-pointing nub anchoring the pill to the map location.",
+      "size": { "$type": "dimension", "$value": "6px", "$description": "Nub triangle size" }
+    }
+  }
+}

tokens/component/miniCard.json

@@ -0,0 +1,15 @@
+{
+  "miniCard": {
+    "$description": "MiniCard molecule tokens — compact vertical card for providers, venues, packages in grids, recommendations, and map popups.",
+    "image": {
+      "$type": "dimension",
+      "$description": "Hero image area dimensions.",
+      "height": { "$value": "120px", "$description": "Shorter image than full listing cards (180px) for compact grids" }
+    },
+    "content": {
+      "$description": "Content area spacing.",
+      "padding": { "$type": "dimension", "$value": "{spacing.3}", "$description": "12px — matches ProviderCard/VenueCard content padding" },
+      "gap": { "$type": "dimension", "$value": "{spacing.1}", "$description": "4px vertical gap between content rows" }
+    }
+  }
+}

tokens/component/providerCard.json

@@ -0,0 +1,36 @@
+{
+  "providerCard": {
+    "$description": "ProviderCard molecule tokens — listing card for funeral providers on the select screen. Supports verified (image + logo + badge) and unverified (text-only) variants.",
+    "image": {
+      "$type": "dimension",
+      "$description": "Hero image area dimensions.",
+      "height": { "$value": "180px", "$description": "Fixed image height for consistent card sizing in list layouts" }
+    },
+    "logo": {
+      "$description": "Provider logo overlay dimensions.",
+      "size": {
+        "$type": "dimension",
+        "$value": "64px",
+        "$description": "Logo width/height — rounded rectangle, overlapping image bottom into content row"
+      },
+      "borderRadius": {
+        "$type": "dimension",
+        "$value": "{borderRadius.md}",
+        "$description": "8px rounded rectangle — softer than circle, matches card border radius"
+      }
+    },
+    "content": {
+      "$description": "Content area spacing.",
+      "padding": {
+        "$type": "dimension",
+        "$value": "{spacing.3}",
+        "$description": "12px content padding — tight to keep card compact in listing layout"
+      },
+      "gap": {
+        "$type": "dimension",
+        "$value": "{spacing.1}",
+        "$description": "4px vertical gap between content rows — tight for compact listing cards"
+      }
+    }
+  }
+}

tokens/component/radio.json

@@ -0,0 +1,15 @@
+{
+  "radio": {
+    "$description": "Radio component tokens — single-select control for mutually exclusive options. Used in service selection, payment method, and arrangement forms.",
+    "size": {
+      "$type": "dimension",
+      "$description": "Radio button outer circle size.",
+      "default": { "$value": "20px", "$description": "Default radio size — matches Figma 16px + padding for 44px touch target area" }
+    },
+    "dotSize": {
+      "$type": "dimension",
+      "$description": "Inner dot size when selected.",
+      "default": { "$value": "10px", "$description": "Selected indicator dot — 50% of outer size" }
+    }
+  }
+}

tokens/component/switch.json

@@ -0,0 +1,17 @@
+{
+  "switch": {
+    "$description": "Switch component tokens — toggle control for enabling/disabling options. Used in arrangement forms for add-on services.",
+    "track": {
+      "$type": "dimension",
+      "$description": "Switch track dimensions.",
+      "width": { "$value": "44px", "$description": "Track width — slightly narrower than Figma 52px for better proportion with 44px touch target" },
+      "height": { "$value": "24px", "$description": "Track height" },
+      "borderRadius": { "$value": "{borderRadius.full}", "$description": "Pill shape" }
+    },
+    "thumb": {
+      "$type": "dimension",
+      "$description": "Switch thumb (knob) dimensions.",
+      "size": { "$value": "18px", "$description": "Thumb diameter — sits inside the track with 3px inset" }
+    }
+  }
+}

tokens/component/venueCard.json

@@ -0,0 +1,23 @@
+{
+  "venueCard": {
+    "$description": "VenueCard molecule tokens — listing card for service venues on the venue select screen. Always has a photo, location, capacity, and price. Simpler than ProviderCard — no verification tiers or logo.",
+    "image": {
+      "$type": "dimension",
+      "$description": "Hero image area dimensions.",
+      "height": { "$value": "180px", "$description": "Fixed image height — matches ProviderCard for consistent list layout when both card types appear in search results" }
+    },
+    "content": {
+      "$description": "Content area spacing.",
+      "padding": {
+        "$type": "dimension",
+        "$value": "{spacing.3}",
+        "$description": "12px content padding — matches ProviderCard for visual consistency"
+      },
+      "gap": {
+        "$type": "dimension",
+        "$value": "{spacing.1}",
+        "$description": "4px vertical gap between content rows — tight for compact listing cards"
+      }
+    }
+  }
+}