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

Add Card atom component

Browse Source 
- Create card component tokens (borderRadius, padding, shadow, border, background)
- Build Card component with elevated/outlined variants, interactive hover, padding presets
- Add MUI theme overrides using card tokens (shadow.md resting, border for outlined)
- Create 8 Storybook stories: Default, Variants, Interactive, PaddingPresets,
  PriceCardPreview, ServiceOptionPreview, WithImage, RichContent
- Regenerate token pipeline outputs (7 new card tokens)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-25 15:31:10 +11:00
parent e4f9edd97f
commit 7169a6559b
7 changed files with 467 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/theme/generated/tokens.css
View File

@@ -223,6 +223,11 @@
--fa-button-icon-gap-md: var(--fa-spacing-2); /** 8px icon-text gap */
--fa-button-icon-gap-lg: var(--fa-spacing-2); /** 8px icon-text gap */
--fa-button-border-radius-default: var(--fa-border-radius-md); /** 8px — standard button rounding */
--fa-card-border-radius-default: var(--fa-border-radius-md); /** 8px — standard card rounding */
--fa-card-padding-default: var(--fa-spacing-6); /** 24px — standard card padding (desktop) */
--fa-card-padding-compact: var(--fa-spacing-4); /** 16px — compact card padding (mobile, tight layouts) */
--fa-card-shadow-default: var(--fa-shadow-md); /** Medium shadow — resting elevated card */
--fa-card-shadow-hover: var(--fa-shadow-lg); /** High shadow — interactive card on hover */
--fa-input-padding-x-default: var(--fa-spacing-3); /** 12px — inner horizontal padding matching Figma design */
--fa-input-padding-y-sm: var(--fa-spacing-2); /** 8px — compact vertical padding for small size */
--fa-input-padding-y-md: var(--fa-spacing-3); /** 12px — standard vertical padding for medium size */
@@ -351,4 +356,6 @@
--fa-typography-overline-sm-font-family: var(--fa-font-family-body);
--fa-typography-overline-sm-font-size: var(--fa-font-size-2xs); /** 11px — accessibility floor */
--fa-typography-overline-sm-font-weight: var(--fa-font-weight-semibold);
--fa-card-border-default: var(--fa-color-border-default); /** Neutral border for outlined cards */
--fa-card-background-default: var(--fa-color-surface-raised); /** White — standard card background (raised surface) */
}

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

@@ -27,6 +27,13 @@ export const ButtonIconGapSm = "4px"; // 4px icon-text gap
export const ButtonIconGapMd = "8px"; // 8px icon-text gap
export const ButtonIconGapLg = "8px"; // 8px icon-text gap
export const ButtonBorderRadiusDefault = "8px"; // 8px — standard button rounding
export const CardBorderRadiusDefault = "8px"; // 8px — standard card rounding
export const CardPaddingDefault = "24px"; // 24px — standard card padding (desktop)
export const CardPaddingCompact = "16px"; // 16px — compact card padding (mobile, tight layouts)
export const CardShadowDefault = "0 4px 6px rgba(0,0,0,0.07)"; // Medium shadow — resting elevated card
export const CardShadowHover = "0 10px 15px rgba(0,0,0,0.1)"; // High shadow — interactive card on hover
export const CardBorderDefault = "#e8e8e8"; // Neutral border for outlined cards
export const CardBackgroundDefault = "#ffffff"; // White — standard card background (raised surface)
export const InputHeightSm = "40px"; // Small — compact forms, admin layouts, matches Button medium height
export const InputHeightMd = "48px"; // Medium (default) — standard forms, matches Button large for alignment
export const InputPaddingXDefault = "12px"; // 12px — inner horizontal padding matching Figma design