Add Card atom component
- 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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user