[{"data":1,"prerenderedAt":315},["ShallowReactive",2],{"component-design-system":3},{"id":4,"title":5,"body":6,"category":297,"description":278,"examples":298,"extension":305,"meta":306,"navigation":308,"order":309,"path":310,"props":311,"seo":312,"slots":311,"stem":313,"__hash__":314},"components\u002Fcomponents\u002Fdesign-system.md","Design System Overview",{"type":7,"value":8,"toc":277},"minimark",[9,14,23,28,56,60,64,67,113,117,120,152,156,159,197,201,205,219,223,237,241,249,253,256,260,263],[10,11,13],"h2",{"id":12},"core-principles","Core Principles",[15,16,17,18,22],"p",{},"Our design system follows a ",[19,20,21],"strong",{},"programmatic approach"," where component props dynamically set CSS custom properties, enabling flexible theming and consistent spacing without relying on CSS attribute selectors.",[24,25,27],"h3",{"id":26},"key-benefits","Key Benefits",[29,30,31,38,44,50],"ol",{},[32,33,34,37],"li",{},[19,35,36],{},"Runtime Flexibility",": Props can accept any valid design token value",[32,39,40,43],{},[19,41,42],{},"Performance",": No CSS specificity battles or attribute selector overhead",[32,45,46,49],{},[19,47,48],{},"Maintainability",": Single source of truth for design token values",[32,51,52,55],{},[19,53,54],{},"Scalability",": Easy to extend with new size or color variants",[10,57,59],{"id":58},"design-token-system","Design Token System",[24,61,63],{"id":62},"spacing-scale","Spacing Scale",[15,65,66],{},"The system uses a consistent spacing scale accessible via CSS custom properties:",[68,69,70,77,83,89,95,101,107],"ul",{},[32,71,72,76],{},[73,74,75],"code",{},"--space-xs"," - Extra small spacing",[32,78,79,82],{},[73,80,81],{},"--space-s"," - Small spacing",[32,84,85,88],{},[73,86,87],{},"--space-m"," - Medium spacing",[32,90,91,94],{},[73,92,93],{},"--space-l"," - Large spacing (default for most components)",[32,96,97,100],{},[73,98,99],{},"--space-xl"," - Extra large spacing",[32,102,103,106],{},[73,104,105],{},"--space-2xl"," - 2x large spacing",[32,108,109,112],{},[73,110,111],{},"--space-3xl"," - 3x large spacing",[24,114,116],{"id":115},"color-tokens","Color Tokens",[15,118,119],{},"Colors follow a systematic naming convention:",[68,121,122,128,134,140,146],{},[32,123,124,127],{},[73,125,126],{},"--color-primary"," - Primary brand color",[32,129,130,133],{},[73,131,132],{},"--color-primary-tint-20"," - 20% tint of primary",[32,135,136,139],{},[73,137,138],{},"--color-primary-tint-95"," - 95% tint of primary (very light)",[32,141,142,145],{},[73,143,144],{},"--color-secondary"," - Secondary color",[32,147,148,151],{},[73,149,150],{},"--color-neutral-tint-95"," - Light neutral background",[10,153,155],{"id":154},"implementation-pattern","Implementation Pattern",[15,157,158],{},"All components follow this consistent pattern:",[29,160,161,175,185,191],{},[32,162,163,166,167,170,171,174],{},[19,164,165],{},"Props Definition",": Accept ",[73,168,169],{},"size"," and ",[73,172,173],{},"backgroundColor"," props with sensible defaults",[32,176,177,180,181,184],{},[19,178,179],{},"Style Binding",": Use ",[73,182,183],{},":style"," to set CSS custom properties dynamically",[32,186,187,190],{},[19,188,189],{},"CSS Variables",": Define fallback values and consume the dynamic properties",[32,192,193,196],{},[19,194,195],{},"Validation",": Ensure prop values match available design tokens",[10,198,200],{"id":199},"component-categories","Component Categories",[24,202,204],{"id":203},"layout-components","Layout Components",[68,206,207,213],{},[32,208,209,212],{},[19,210,211],{},"ccm-section",": Foundational spacing and background wrapper",[32,214,215,218],{},[19,216,217],{},"ccm-hero",": Header component with flexible content areas",[24,220,222],{"id":221},"content-components","Content Components",[68,224,225,231],{},[32,226,227,230],{},[19,228,229],{},"ccm-card",": Responsive linking cards with image support",[32,232,233,236],{},[19,234,235],{},"ccm-button",": Interactive elements with consistent styling",[24,238,240],{"id":239},"utility-components","Utility Components",[68,242,243],{},[32,244,245,248],{},[19,246,247],{},"ccm-topbar",": Navigation and header utilities",[10,250,252],{"id":251},"responsive-strategy","Responsive Strategy",[15,254,255],{},"Components use CSS Grid, Flexbox, and media queries for responsive behavior rather than breakpoint-specific classes. This approach provides more predictable layouts and better performance.",[10,257,259],{"id":258},"future-considerations","Future Considerations",[15,261,262],{},"This programmatic approach enables future enhancements like:",[68,264,265,268,271,274],{},[32,266,267],{},"Theme switching capabilities",[32,269,270],{},"User preference customization",[32,272,273],{},"Dynamic design token loading",[32,275,276],{},"Component variant systems",{"title":278,"searchDepth":279,"depth":279,"links":280},"",2,[281,285,289,290,295,296],{"id":12,"depth":279,"text":13,"children":282},[283],{"id":26,"depth":284,"text":27},3,{"id":58,"depth":279,"text":59,"children":286},[287,288],{"id":62,"depth":284,"text":63},{"id":115,"depth":284,"text":116},{"id":154,"depth":279,"text":155},{"id":199,"depth":279,"text":200,"children":291},[292,293,294],{"id":203,"depth":284,"text":204},{"id":221,"depth":284,"text":222},{"id":239,"depth":284,"text":240},{"id":251,"depth":279,"text":252},{"id":258,"depth":279,"text":259},"Foundation",[299,302],{"title":300,"code":301},"Programmatic Pattern","\u003C!-- Template -->\n\u003Ccomponent \n  :style=\"{\n    '--_component-padding': `var(--space-${size})`,\n    '--_component-bg': `var(--${backgroundColor})`\n  }\"\n>\n\n\u003C!-- CSS -->\n\u003Cstyle>\n.component {\n  --_component-padding: var(--space-l); \u002F* fallback *\u002F\n  --_component-bg: transparent; \u002F* fallback *\u002F\n  \n  padding: var(--_component-padding);\n  background: var(--_component-bg);\n}\n\u003C\u002Fstyle>\n",{"title":303,"code":304},"Size Prop Implementation","const props = defineProps({\n  size: {\n    type: String,\n    default: 'l',\n    validator: (value) => ['xs', 's', 'm', 'l', 'xl', '2xl', '3xl'].includes(value)\n  }\n})\n","md",{"tagline":307},"Programmatic approach to consistent, scalable component design",true,1,"\u002Fcomponents\u002Fdesign-system",null,{"title":5,"description":278},"components\u002Fdesign-system","s70hp_eJEP2KOBmJsDVYNpWokxbavPzbcxQjjSOhdHU",1791043162394]