{"version":3,"file":"DesignSystem.BqVooJ0Q.mjs","names":[],"sources":["https:/framerusercontent.com/modules/jkaZo3VE4FAfRMuinEFK/8C2uo6I5eyS3inwu8Xz8/DesignSystem.js"],"sourcesContent":["/**\r\n * Shopify by FramerHub Design System (self-contained — no woo dependency) - \"Warm Artisan Boutique\" Style\r\n *\r\n * A refined, approachable aesthetic designed for WooCommerce store owners\r\n * serving fashion, beauty, eco-friendly, and handmade product niches.\r\n *\r\n * Design Philosophy:\r\n * - Warm and inviting color palette (creams, terracotta, sage)\r\n * - Soft, rounded corners for approachable feel\r\n * - Generous whitespace and clear hierarchy\r\n * - Subtle micro-interactions and smooth transitions\r\n * - Premium but accessible aesthetic\r\n */// ============================================================\n// COLOR PALETTE\n// ============================================================\nexport const colors={// Primary - Warm neutrals\nbackground:\"#FDFBF7\",surface:\"#FFFFFF\",surfaceHover:\"#FAF8F5\",// Text hierarchy\ntextPrimary:\"#2D2926\",textSecondary:\"#6B635B\",textMuted:\"#9B9389\",textInverse:\"#FFFFFF\",// Accent colors\naccent:\"#C4704F\",accentHover:\"#A85A3C\",accentLight:\"#F5E6DE\",secondary:\"#7B9E87\",secondaryHover:\"#648871\",secondaryLight:\"#E8F0EA\",// Semantic colors\nsuccess:\"#6B9E78\",successLight:\"#E8F0EA\",warning:\"#D4A853\",warningLight:\"#FDF6E3\",error:\"#C95C5C\",errorLight:\"#FAEAEA\",// Borders\nborder:\"#E8E4DF\",borderHover:\"#D4CFC8\",borderFocus:\"#C4704F\",// Shadows (warm-tinted)\nshadowLight:\"rgba(45, 41, 38, 0.04)\",shadowMedium:\"rgba(45, 41, 38, 0.08)\",shadowHeavy:\"rgba(45, 41, 38, 0.12)\"};// ============================================================\n// TYPOGRAPHY\n// ============================================================\nexport const typography={// Font families - using system fonts that work in Framer\n// Designers can override via Framer's font controls\nfontFamily:{body:'-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif',heading:'-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif',mono:'\"SF Mono\", SFMono-Regular, Consolas, \"Liberation Mono\", Menlo, monospace'},// Font sizes (rem-based for accessibility, converted to px)\nfontSize:{xs:11,sm:12,base:14,md:15,lg:16,xl:18,\"2xl\":22,\"3xl\":28},// Font weights\nfontWeight:{normal:400,medium:500,semibold:600,bold:700},// Line heights\nlineHeight:{tight:1.25,normal:1.5,relaxed:1.625},// Letter spacing\nletterSpacing:{tight:-.02,normal:0,wide:.02,wider:.05}};// ============================================================\n// SPACING\n// ============================================================\nexport const spacing={0:0,1:4,2:8,3:12,4:16,5:20,6:24,8:32,10:40,12:48,16:64};// ============================================================\n// BORDERS & RADIUS\n// ============================================================\nexport const borders={radius:{sm:6,md:8,lg:12,xl:16,full:9999},width:{thin:1,medium:2}};// ============================================================\n// SHADOWS\n// ============================================================\nexport const shadows={none:\"none\",sm:`0 1px 2px ${colors.shadowLight}`,md:`0 2px 8px ${colors.shadowMedium}`,lg:`0 4px 16px ${colors.shadowMedium}`,xl:`0 8px 24px ${colors.shadowHeavy}`,// Elevated shadow for hover states\nelevated:`0 4px 20px ${colors.shadowMedium}`,// Inner shadow for inputs\ninner:`inset 0 1px 2px ${colors.shadowLight}`,// Focus ring\nfocus:`0 0 0 3px ${colors.accentLight}`};// ============================================================\n// TRANSITIONS\n// ============================================================\nexport const transitions={fast:\"all 0.15s ease\",normal:\"all 0.2s ease\",slow:\"all 0.3s ease\",// Specific properties\ncolor:\"color 0.15s ease, background-color 0.15s ease\",transform:\"transform 0.2s ease\",shadow:\"box-shadow 0.2s ease\",opacity:\"opacity 0.2s ease\"};// ============================================================\n// COMPONENT STYLES\n// ============================================================\nexport const componentStyles={// Primary Button (Add to Cart, Checkout, etc.)\nbuttonPrimary:{background:colors.accent,color:colors.textInverse,border:\"none\",borderRadius:borders.radius.md,padding:`${spacing[3]}px ${spacing[5]}px`,fontSize:typography.fontSize.base,fontWeight:typography.fontWeight.semibold,cursor:\"pointer\",transition:transitions.normal,boxShadow:shadows.sm},buttonPrimaryHover:{background:colors.accentHover,boxShadow:shadows.md,transform:\"translateY(-1px)\"},buttonPrimaryDisabled:{background:colors.border,color:colors.textMuted,cursor:\"not-allowed\",boxShadow:\"none\",transform:\"none\"},// Secondary Button\nbuttonSecondary:{background:\"transparent\",color:colors.textPrimary,border:`${borders.width.thin}px solid ${colors.border}`,borderRadius:borders.radius.md,padding:`${spacing[3]}px ${spacing[5]}px`,fontSize:typography.fontSize.base,fontWeight:typography.fontWeight.medium,cursor:\"pointer\",transition:transitions.normal},buttonSecondaryHover:{borderColor:colors.borderHover,background:colors.surfaceHover},// Ghost Button (icon buttons, quantity controls)\nbuttonGhost:{background:\"transparent\",color:colors.textSecondary,border:`${borders.width.thin}px solid ${colors.border}`,borderRadius:borders.radius.md,padding:spacing[2],fontSize:typography.fontSize.base,cursor:\"pointer\",transition:transitions.normal,display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},buttonGhostHover:{borderColor:colors.borderHover,background:colors.surfaceHover,color:colors.textPrimary},// Input fields\ninput:{width:\"100%\",padding:`${spacing[3]}px ${spacing[4]}px`,fontSize:typography.fontSize.base,color:colors.textPrimary,background:colors.surface,border:`${borders.width.thin}px solid ${colors.border}`,borderRadius:borders.radius.md,transition:transitions.fast,outline:\"none\"},inputFocus:{borderColor:colors.borderFocus,boxShadow:shadows.focus},inputError:{borderColor:colors.error,boxShadow:`0 0 0 3px ${colors.errorLight}`},// Card container\ncard:{background:colors.surface,borderRadius:borders.radius.lg,padding:spacing[4],boxShadow:shadows.sm,border:`${borders.width.thin}px solid ${colors.border}`},// Badge (sale, stock, cart count)\nbadge:{display:\"inline-flex\",alignItems:\"center\",justifyContent:\"center\",padding:`${spacing[1]}px ${spacing[2]}px`,fontSize:typography.fontSize.xs,fontWeight:typography.fontWeight.semibold,letterSpacing:typography.letterSpacing.wide,textTransform:\"uppercase\",borderRadius:borders.radius.sm},badgeAccent:{background:colors.accent,color:colors.textInverse},badgeSuccess:{background:colors.successLight,color:colors.success},badgeWarning:{background:colors.warningLight,color:colors.warning},badgeError:{background:colors.errorLight,color:colors.error},// Price display\npriceRegular:{fontSize:typography.fontSize.xl,fontWeight:typography.fontWeight.semibold,color:colors.textPrimary,letterSpacing:typography.letterSpacing.tight},priceStrikethrough:{fontSize:typography.fontSize.base,fontWeight:typography.fontWeight.normal,color:colors.textMuted,textDecoration:\"line-through\"},priceSale:{fontSize:typography.fontSize.xl,fontWeight:typography.fontWeight.semibold,color:colors.accent,letterSpacing:typography.letterSpacing.tight},// Labels\nlabel:{fontSize:typography.fontSize.sm,fontWeight:typography.fontWeight.medium,color:colors.textSecondary,marginBottom:spacing[1],display:\"block\"},// Helper/error text\nhelperText:{fontSize:typography.fontSize.xs,color:colors.textMuted,marginTop:spacing[1]},errorText:{fontSize:typography.fontSize.xs,color:colors.error,marginTop:spacing[1]},// Divider\ndivider:{height:1,background:colors.border,border:\"none\",margin:`${spacing[4]}px 0`},// Overlay (for drawers, modals)\noverlay:{position:\"fixed\",inset:0,background:\"rgba(45, 41, 38, 0.4)\",backdropFilter:\"blur(4px)\",zIndex:9998},// Drawer panel\ndrawer:{position:\"fixed\",top:0,right:0,width:400,maxWidth:\"100vw\",height:\"100%\",background:colors.surface,boxShadow:shadows.xl,zIndex:9999,display:\"flex\",flexDirection:\"column\"}};// ============================================================\n// CSS HELPER FUNCTIONS\n// ============================================================\n/**\r\n * Merge multiple style objects, with later objects overriding earlier ones\r\n */export function mergeStyles(...styles){return Object.assign({},...styles.filter(Boolean));}/**\r\n * Apply hover styles conditionally\r\n */export function withHover(baseStyle,hoverStyle,isHovered){return isHovered?{...baseStyle,...hoverStyle}:baseStyle;}/**\r\n * Apply focus styles conditionally\r\n */export function withFocus(baseStyle,focusStyle,isFocused){return isFocused?{...baseStyle,...focusStyle}:baseStyle;}/**\r\n * Apply disabled styles conditionally\r\n */export function withDisabled(baseStyle,disabledStyle,isDisabled){return isDisabled?{...baseStyle,...disabledStyle}:baseStyle;}// ============================================================\n// CANVAS PLACEHOLDER STYLES\n// ============================================================\nexport const canvasPlaceholder={container:{display:\"flex\",alignItems:\"center\",justifyContent:\"center\",padding:spacing[4],background:colors.surfaceHover,maxHeight:\"100%\",minHeight:\"450px\"},text:{fontSize:typography.fontSize.sm,fontWeight:typography.fontWeight.medium,color:colors.textMuted,letterSpacing:typography.letterSpacing.wide}};// ============================================================\n// ANIMATION KEYFRAMES (as CSS string for injection)\n// ============================================================\nexport const animationCSS=`\r\n@keyframes woo-fade-in {\r\n  from { opacity: 0; }\r\n  to { opacity: 1; }\r\n}\r\n\r\n@keyframes woo-slide-in-right {\r\n  from { transform: translateX(100%); }\r\n  to { transform: translateX(0); }\r\n}\r\n\r\n@keyframes woo-slide-out-right {\r\n  from { transform: translateX(0); }\r\n  to { transform: translateX(100%); }\r\n}\r\n\r\n@keyframes woo-scale-in {\r\n  from { transform: scale(0.95); opacity: 0; }\r\n  to { transform: scale(1); opacity: 1; }\r\n}\r\n\r\n@keyframes woo-pulse {\r\n  0%, 100% { opacity: 1; }\r\n  50% { opacity: 0.7; }\r\n}\r\n\r\n@keyframes woo-bounce {\r\n  0%, 100% { transform: scale(1); }\r\n  50% { transform: scale(1.05); }\r\n}\r\n\r\n@keyframes woo-spin {\r\n  from { transform: rotate(0deg); }\r\n  to { transform: rotate(360deg); }\r\n}\r\n`;// ============================================================\n// EXPORT DEFAULT THEME OBJECT\n// ============================================================\nexport const theme={colors,typography,spacing,borders,shadows,transitions,componentStyles,canvasPlaceholder};export default theme;\nexport const __FramerMetadata__ = {\"exports\":{\"canvasPlaceholder\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"animationCSS\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mergeStyles\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"componentStyles\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withHover\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"theme\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"transitions\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withDisabled\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withFocus\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"colors\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"borders\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"default\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"shadows\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"typography\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"spacing\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./DesignSystem.map"],"mappings":"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"}