[{"data":1,"prerenderedAt":3861},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-spacing":682,"-docs-theme-design-tokens-spacing-surround":3856},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":141,"path":142,"stem":143},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs\u002Fapi\u002F14.imports",[163,243,357,558,635],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[168,169,174,179,184,189,194,199,204,209,224,228,233,238],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":175,"path":176,"stem":177,"icon":178},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":180,"path":181,"stem":182,"icon":183},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":185,"path":186,"stem":187,"icon":188},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":190,"path":191,"stem":192,"icon":193},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":195,"path":196,"stem":197,"icon":198},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":200,"path":201,"stem":202,"icon":203},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":205,"path":206,"stem":207,"icon":208},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":210,"path":211,"stem":212,"children":213,"icon":104,"defaultOpen":223},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[214,215,219],{"title":78,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":225,"path":226,"stem":227,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":229,"path":230,"stem":231,"icon":232},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":234,"path":235,"stem":236,"icon":237},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":239,"path":240,"stem":241,"icon":242},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":244,"path":245,"stem":246,"children":247,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[248,249,252,259,281,301,313,329,341],{"title":78,"path":245,"stem":246,"icon":79},{"title":170,"path":250,"stem":251,"icon":173},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":253,"icon":242,"defaultOpen":223,"page":7,"children":254},"Base",[255],{"title":256,"path":257,"stem":258,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":234,"icon":237,"defaultOpen":223,"page":7,"children":260},[261,265,269,273,277],{"title":262,"path":263,"stem":264,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":266,"path":267,"stem":268,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":270,"path":271,"stem":272,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":274,"path":275,"stem":276,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":278,"path":279,"stem":280,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":282,"icon":283,"defaultOpen":223,"page":7,"children":284},"Inline Text","i-lucide-whole-word",[285,289,293,297],{"title":286,"path":287,"stem":288,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":290,"path":291,"stem":292,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":294,"path":295,"stem":296,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":298,"path":299,"stem":300,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":302,"icon":303,"defaultOpen":223,"page":7,"children":304},"Media & Embeds","i-lucide-image",[305,309],{"title":306,"path":307,"stem":308,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":310,"path":311,"stem":312,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":314,"icon":315,"defaultOpen":223,"page":7,"children":316},"Forms & Tables","i-lucide-table",[317,321,325],{"title":318,"path":319,"stem":320,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":322,"path":323,"stem":324,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":326,"path":327,"stem":328,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":330,"icon":331,"defaultOpen":223,"page":7,"children":332},"Structure","i-lucide-separator-horizontal",[333,337],{"title":334,"path":335,"stem":336,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":338,"path":339,"stem":340,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":342,"icon":343,"defaultOpen":223,"page":7,"children":344},"States","i-lucide-mouse-pointer-click",[345,349,353],{"title":346,"path":347,"stem":348,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":350,"path":351,"stem":352,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":354,"path":355,"stem":356,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":358,"path":359,"stem":360,"children":361,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[362,363,375,399,427,491,518,550],{"title":78,"path":359,"stem":360,"icon":79},{"title":364,"icon":365,"defaultOpen":223,"page":7,"children":366},"Actions","i-lucide-square-mouse-pointer",[367,371],{"title":368,"path":369,"stem":370,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":372,"path":373,"stem":374,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":376,"icon":377,"defaultOpen":223,"page":7,"children":378},"Navigation","i-lucide-navigation",[379,383,387,391,395],{"title":380,"path":381,"stem":382,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":384,"path":385,"stem":386,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":388,"path":389,"stem":390,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":392,"path":393,"stem":394,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":396,"path":397,"stem":398,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":400,"icon":401,"defaultOpen":223,"page":7,"children":402},"Feedback","i-lucide-megaphone",[403,407,411,415,419,423],{"title":404,"path":405,"stem":406,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":408,"path":409,"stem":410,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":412,"path":413,"stem":414,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":416,"path":417,"stem":418,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":420,"path":421,"stem":422,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":424,"path":425,"stem":426,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":428,"icon":429,"defaultOpen":223,"page":7,"children":430},"Forms","i-lucide-text-cursor-input",[431,435,439,443,447,451,455,459,463,467,471,475,479,483,487],{"title":432,"path":433,"stem":434,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":436,"path":437,"stem":438,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":440,"path":441,"stem":442,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":444,"path":445,"stem":446,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":448,"path":449,"stem":450,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":452,"path":453,"stem":454,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":456,"path":457,"stem":458,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":460,"path":461,"stem":462,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":464,"path":465,"stem":466,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":468,"path":469,"stem":470,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":472,"path":473,"stem":474,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":476,"path":477,"stem":478,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":480,"path":481,"stem":482,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":484,"path":485,"stem":486,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":488,"path":489,"stem":490,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":492,"icon":242,"defaultOpen":223,"page":7,"children":493},"Overlays",[494,498,502,506,510,514],{"title":495,"path":496,"stem":497,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":499,"path":500,"stem":501,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":503,"path":504,"stem":505,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":507,"path":508,"stem":509,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":511,"path":512,"stem":513,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":515,"path":516,"stem":517,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":519,"icon":520,"defaultOpen":223,"page":7,"children":521},"Layout","i-lucide-layout",[522,526,530,534,538,542,546],{"title":523,"path":524,"stem":525,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":527,"path":528,"stem":529,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":531,"path":532,"stem":533,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":535,"path":536,"stem":537,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":539,"path":540,"stem":541,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":543,"path":544,"stem":545,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":547,"path":548,"stem":549,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":551,"icon":552,"defaultOpen":223,"page":7,"children":553},"AI Chat","i-lucide-message-circle",[554],{"title":555,"path":556,"stem":557,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":116,"path":559,"stem":560,"children":561,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[562,563,567,572,577,581,584,588,593,598,602,605,610,613,618,622,627,632],{"title":78,"path":559,"stem":560,"icon":79},{"title":564,"path":565,"stem":566,"icon":173},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":568,"path":569,"stem":570,"icon":571},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":573,"path":574,"stem":575,"icon":576},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":578,"path":579,"stem":580,"icon":303},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":180,"path":582,"stem":583,"icon":183},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":585,"path":586,"stem":587,"icon":119},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":589,"path":590,"stem":591,"icon":592},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":594,"path":595,"stem":596,"icon":597},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":599,"path":600,"stem":601,"icon":343},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":519,"path":603,"stem":604,"icon":520},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":606,"path":607,"stem":608,"icon":609},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":229,"path":611,"stem":612,"icon":232},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":614,"path":615,"stem":616,"icon":617},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":619,"path":620,"stem":621,"icon":315},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":623,"path":624,"stem":625,"icon":626},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":628,"path":629,"stem":630,"icon":631},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":234,"path":633,"stem":634,"icon":237},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":636,"path":637,"stem":638,"children":639,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[640,641,644,648,653,657,662,667,672,677],{"title":78,"path":637,"stem":638,"icon":79},{"title":564,"path":642,"stem":643,"icon":173},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":645,"path":646,"stem":647,"icon":571},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":649,"path":650,"stem":651,"icon":652},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":654,"path":655,"stem":656,"icon":429},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":658,"path":659,"stem":660,"icon":661},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":663,"path":664,"stem":665,"icon":666},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":668,"path":669,"stem":670,"icon":671},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":673,"path":674,"stem":675,"icon":676},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":678,"path":679,"stem":680,"icon":681},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":683,"title":684,"body":685,"description":3850,"extension":1208,"links":3851,"meta":3852,"navigation":3853,"path":230,"seo":3854,"stem":231,"__hash__":3855},"docs_theme\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing.md","Spacing Design Tokens",{"type":686,"value":687,"toc":3836},"minimark",[688,714,718,722,726,729,757,762,769,1187,1213,1227,1234,1244,1247,1936,1941,1947,1955,1959,1962,2484,2488,2493,2496,2761,2765,2768,3668,3672,3725,3735,3739,3832],[689,690,691,695,696,700,701,705,706,709,710,713],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Design Tokens Preset:"," ",[697,698,699],"code",{},"useSpacingDesignTokens"," is included in the ",[702,703,704],"a",{"href":171},"Design Tokens Preset"," (",[697,707,708],{},"useDesignTokensPreset",") and you can configure it through the preset's ",[697,711,712],{},"spacing"," option. For most projects, applying it via the preset is the recommended approach.",[715,716,78],"h2",{"id":717},"overview",[719,720,721],"p",{},"The spacing composables help you create consistent spacing systems with minimal code. They generate spacing variables that can be easily referenced throughout your application, enabling flexible theming and consistent spatial relationships between elements.",[715,723,725],{"id":724},"why-use-spacing-composables","Why use spacing composables?",[719,727,728],{},"Spacing composables help you:",[730,731,732,739,745,751],"ul",{},[733,734,735,738],"li",{},[692,736,737],{},"Centralize spacing values",": Define all your spacing units in one place for easy management.",[733,740,741,744],{},[692,742,743],{},"Enable flexible theming",": Override spacing values to instantly update layouts across your application.",[733,746,747,750],{},[692,748,749],{},"Maintain consistency",": Use semantic names to ensure consistent spacing usage throughout your design system.",[733,752,753,756],{},[692,754,755],{},"Create harmonious scales",": Integrate with modular scales to generate mathematically proportional spacing systems.",[715,758,760],{"id":759},"usespacingdesigntokens",[697,761,699],{},[719,763,764,765,768],{},"The ",[697,766,767],{},"useSpacingDesignTokens()"," function creates a set of spacing variables from a simple object of spacing value definitions.",[770,771,772,1091],"tabs",{},[773,774,776],"tabs-item",{"icon":775,"label":290},"i-lucide-code",[777,778,784],"pre",{"className":779,"code":780,"filename":781,"language":782,"meta":783,"style":783},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useSpacingDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    spacing,\n    spacingXs,\n    spacingSm,\n    spacingMd,\n    spacingLg,\n    spacingXl,\n} = useSpacingDesignTokens(s, {\n    default: '1rem',\n    xs: '0.25rem',\n    sm: '0.5rem',\n    md: '1rem',\n    lg: '1.5rem',\n    xl: '2rem',\n} as const);\n\nexport default s;\n","styleframe.config.ts","ts","",[697,785,786,822,845,851,872,877,885,894,902,910,918,926,934,953,972,989,1006,1022,1039,1056,1072,1077],{"__ignoreMap":783},[787,788,791,795,799,803,806,809,812,816,819],"span",{"class":789,"line":790},"line",1,[787,792,794],{"class":793},"s7zQu","import",[787,796,798],{"class":797},"sMK4o"," {",[787,800,802],{"class":801},"sTEyZ"," styleframe",[787,804,805],{"class":797}," }",[787,807,808],{"class":793}," from",[787,810,811],{"class":797}," '",[787,813,815],{"class":814},"sfazB","styleframe",[787,817,818],{"class":797},"'",[787,820,821],{"class":797},";\n",[787,823,825,827,829,832,834,836,838,841,843],{"class":789,"line":824},2,[787,826,794],{"class":793},[787,828,798],{"class":797},[787,830,831],{"class":801}," useSpacingDesignTokens",[787,833,805],{"class":797},[787,835,808],{"class":793},[787,837,811],{"class":797},[787,839,840],{"class":814},"@styleframe\u002Ftheme",[787,842,818],{"class":797},[787,844,821],{"class":797},[787,846,848],{"class":789,"line":847},3,[787,849,850],{"emptyLinePlaceholder":223},"\n",[787,852,854,858,861,864,867,870],{"class":789,"line":853},4,[787,855,857],{"class":856},"spNyl","const",[787,859,860],{"class":801}," s ",[787,862,863],{"class":797},"=",[787,865,802],{"class":866},"s2Zo4",[787,868,869],{"class":801},"()",[787,871,821],{"class":797},[787,873,875],{"class":789,"line":874},5,[787,876,850],{"emptyLinePlaceholder":223},[787,878,880,882],{"class":789,"line":879},6,[787,881,857],{"class":856},[787,883,884],{"class":797}," {\n",[787,886,888,891],{"class":789,"line":887},7,[787,889,890],{"class":801},"    spacing",[787,892,893],{"class":797},",\n",[787,895,897,900],{"class":789,"line":896},8,[787,898,899],{"class":801},"    spacingXs",[787,901,893],{"class":797},[787,903,905,908],{"class":789,"line":904},9,[787,906,907],{"class":801},"    spacingSm",[787,909,893],{"class":797},[787,911,913,916],{"class":789,"line":912},10,[787,914,915],{"class":801},"    spacingMd",[787,917,893],{"class":797},[787,919,921,924],{"class":789,"line":920},11,[787,922,923],{"class":801},"    spacingLg",[787,925,893],{"class":797},[787,927,929,932],{"class":789,"line":928},12,[787,930,931],{"class":801},"    spacingXl",[787,933,893],{"class":797},[787,935,937,940,943,945,948,951],{"class":789,"line":936},13,[787,938,939],{"class":797},"}",[787,941,942],{"class":797}," =",[787,944,831],{"class":866},[787,946,947],{"class":801},"(s",[787,949,950],{"class":797},",",[787,952,884],{"class":797},[787,954,956,960,963,965,968,970],{"class":789,"line":955},14,[787,957,959],{"class":958},"swJcz","    default",[787,961,962],{"class":797},":",[787,964,811],{"class":797},[787,966,967],{"class":814},"1rem",[787,969,818],{"class":797},[787,971,893],{"class":797},[787,973,975,978,980,982,985,987],{"class":789,"line":974},15,[787,976,977],{"class":958},"    xs",[787,979,962],{"class":797},[787,981,811],{"class":797},[787,983,984],{"class":814},"0.25rem",[787,986,818],{"class":797},[787,988,893],{"class":797},[787,990,992,995,997,999,1002,1004],{"class":789,"line":991},16,[787,993,994],{"class":958},"    sm",[787,996,962],{"class":797},[787,998,811],{"class":797},[787,1000,1001],{"class":814},"0.5rem",[787,1003,818],{"class":797},[787,1005,893],{"class":797},[787,1007,1009,1012,1014,1016,1018,1020],{"class":789,"line":1008},17,[787,1010,1011],{"class":958},"    md",[787,1013,962],{"class":797},[787,1015,811],{"class":797},[787,1017,967],{"class":814},[787,1019,818],{"class":797},[787,1021,893],{"class":797},[787,1023,1025,1028,1030,1032,1035,1037],{"class":789,"line":1024},18,[787,1026,1027],{"class":958},"    lg",[787,1029,962],{"class":797},[787,1031,811],{"class":797},[787,1033,1034],{"class":814},"1.5rem",[787,1036,818],{"class":797},[787,1038,893],{"class":797},[787,1040,1042,1045,1047,1049,1052,1054],{"class":789,"line":1041},19,[787,1043,1044],{"class":958},"    xl",[787,1046,962],{"class":797},[787,1048,811],{"class":797},[787,1050,1051],{"class":814},"2rem",[787,1053,818],{"class":797},[787,1055,893],{"class":797},[787,1057,1059,1061,1064,1067,1070],{"class":789,"line":1058},20,[787,1060,939],{"class":797},[787,1062,1063],{"class":793}," as",[787,1065,1066],{"class":856}," const",[787,1068,1069],{"class":801},")",[787,1071,821],{"class":797},[787,1073,1075],{"class":789,"line":1074},21,[787,1076,850],{"emptyLinePlaceholder":223},[787,1078,1080,1083,1086,1089],{"class":789,"line":1079},22,[787,1081,1082],{"class":793},"export",[787,1084,1085],{"class":793}," default",[787,1087,1088],{"class":801}," s",[787,1090,821],{"class":797},[773,1092,1093],{"icon":154,"label":326},[777,1094,1099],{"className":1095,"code":1096,"filename":1097,"language":1098,"meta":783,"style":783},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --spacing: 1rem;\n    --spacing--xs: 0.25rem;\n    --spacing--sm: 0.5rem;\n    --spacing--md: 1rem;\n    --spacing--lg: 1.5rem;\n    --spacing--xl: 2rem;\n}\n","styleframe\u002Findex.css","css",[697,1100,1101,1110,1123,1135,1147,1158,1170,1182],{"__ignoreMap":783},[787,1102,1103,1105,1108],{"class":789,"line":790},[787,1104,962],{"class":797},[787,1106,1107],{"class":856},"root",[787,1109,884],{"class":797},[787,1111,1112,1115,1117,1121],{"class":789,"line":824},[787,1113,1114],{"class":801},"    --spacing",[787,1116,962],{"class":797},[787,1118,1120],{"class":1119},"sbssI"," 1rem",[787,1122,821],{"class":797},[787,1124,1125,1128,1130,1133],{"class":789,"line":847},[787,1126,1127],{"class":801},"    --spacing--xs",[787,1129,962],{"class":797},[787,1131,1132],{"class":1119}," 0.25rem",[787,1134,821],{"class":797},[787,1136,1137,1140,1142,1145],{"class":789,"line":853},[787,1138,1139],{"class":801},"    --spacing--sm",[787,1141,962],{"class":797},[787,1143,1144],{"class":1119}," 0.5rem",[787,1146,821],{"class":797},[787,1148,1149,1152,1154,1156],{"class":789,"line":874},[787,1150,1151],{"class":801},"    --spacing--md",[787,1153,962],{"class":797},[787,1155,1120],{"class":1119},[787,1157,821],{"class":797},[787,1159,1160,1163,1165,1168],{"class":789,"line":879},[787,1161,1162],{"class":801},"    --spacing--lg",[787,1164,962],{"class":797},[787,1166,1167],{"class":1119}," 1.5rem",[787,1169,821],{"class":797},[787,1171,1172,1175,1177,1180],{"class":789,"line":887},[787,1173,1174],{"class":801},"    --spacing--xl",[787,1176,962],{"class":797},[787,1178,1179],{"class":1119}," 2rem",[787,1181,821],{"class":797},[787,1183,1184],{"class":789,"line":896},[787,1185,1186],{"class":797},"}\n",[719,1188,1189,1190,1192,1193,1196,1197,1199,1200,1196,1203,1199,1206,1196,1209,1212],{},"Each key in the object becomes a spacing variable with the prefix ",[697,1191,712],{},", and the export name is automatically converted to camelCase (e.g., ",[697,1194,1195],{},"default"," → ",[697,1198,712],{},", ",[697,1201,1202],{},"xs",[697,1204,1205],{},"spacingXs",[697,1207,1208],{},"md",[697,1210,1211],{},"spacingMd",").",[1214,1215,1216,1219,1220,1222,1223,1226],"tip",{},[692,1217,1218],{},"Pro tip:"," Use the ",[697,1221,1195],{}," key for your base spacing unit. It will create a variable named ",[697,1224,1225],{},"--spacing"," without any suffix, making it the natural choice for standard spacing throughout your application.",[715,1228,1230,1231],{"id":1229},"integration-with-usemultiplierdesigntokens","Integration with ",[697,1232,1233],{},"useMultiplierDesignTokens",[719,1235,1236,1237,1239,1240,1243],{},"The real power of ",[697,1238,699],{}," comes when combined with ",[697,1241,1242],{},"useMultiplierDesignTokens()"," and modular scales. This allows you to create mathematically harmonious spacing systems that maintain consistent proportions.",[719,1245,1246],{},"Create a spacing scale based on a modular scale ratio:",[770,1248,1249,1656],{},[773,1250,1251],{"icon":775,"label":290},[777,1252,1254],{"className":779,"code":1253,"filename":781,"language":782,"meta":783,"style":783},"import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens, useScalePowersDesignTokens, useMultiplierDesignTokens, useSpacingDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Use the Major Second scale (1.125) for subtle spacing differences\nconst { scale } = useScaleDesignTokens(s);\n\n\u002F\u002F Define base spacing unit\nconst { spacing } = useSpacingDesignTokens(s, { default: '1rem' });\n\n\u002F\u002F Create spacing scale powers\nconst scalePowers = useScalePowersDesignTokens(s, scale);\n\n\u002F\u002F Generate spacing variables automatically\nconst {\n    spacingXs,\n    spacingSm,\n    spacingMd,\n    spacingLg,\n    spacingXl,\n    spacing2xl,\n} = useMultiplierDesignTokens(s, spacing, {\n    xs: scalePowers[-2],   \u002F\u002F ~0.79rem\n    sm: scalePowers[-1],   \u002F\u002F ~0.89rem\n    md: scalePowers[0],    \u002F\u002F 1rem (base)\n    lg: scalePowers[1],    \u002F\u002F ~1.13rem\n    xl: scalePowers[2],    \u002F\u002F ~1.27rem\n    '2xl': scalePowers[3], \u002F\u002F ~1.42rem\n});\n\nexport default s;\n",[697,1255,1256,1276,1311,1315,1329,1333,1339,1359,1363,1368,1405,1409,1414,1434,1438,1443,1449,1455,1461,1467,1473,1479,1486,1506,1530,1551,1570,1588,1606,1631,1640,1645],{"__ignoreMap":783},[787,1257,1258,1260,1262,1264,1266,1268,1270,1272,1274],{"class":789,"line":790},[787,1259,794],{"class":793},[787,1261,798],{"class":797},[787,1263,802],{"class":801},[787,1265,805],{"class":797},[787,1267,808],{"class":793},[787,1269,811],{"class":797},[787,1271,815],{"class":814},[787,1273,818],{"class":797},[787,1275,821],{"class":797},[787,1277,1278,1280,1282,1285,1287,1290,1292,1295,1297,1299,1301,1303,1305,1307,1309],{"class":789,"line":824},[787,1279,794],{"class":793},[787,1281,798],{"class":797},[787,1283,1284],{"class":801}," useScaleDesignTokens",[787,1286,950],{"class":797},[787,1288,1289],{"class":801}," useScalePowersDesignTokens",[787,1291,950],{"class":797},[787,1293,1294],{"class":801}," useMultiplierDesignTokens",[787,1296,950],{"class":797},[787,1298,831],{"class":801},[787,1300,805],{"class":797},[787,1302,808],{"class":793},[787,1304,811],{"class":797},[787,1306,840],{"class":814},[787,1308,818],{"class":797},[787,1310,821],{"class":797},[787,1312,1313],{"class":789,"line":847},[787,1314,850],{"emptyLinePlaceholder":223},[787,1316,1317,1319,1321,1323,1325,1327],{"class":789,"line":853},[787,1318,857],{"class":856},[787,1320,860],{"class":801},[787,1322,863],{"class":797},[787,1324,802],{"class":866},[787,1326,869],{"class":801},[787,1328,821],{"class":797},[787,1330,1331],{"class":789,"line":874},[787,1332,850],{"emptyLinePlaceholder":223},[787,1334,1335],{"class":789,"line":879},[787,1336,1338],{"class":1337},"sHwdD","\u002F\u002F Use the Major Second scale (1.125) for subtle spacing differences\n",[787,1340,1341,1343,1345,1348,1350,1352,1354,1357],{"class":789,"line":887},[787,1342,857],{"class":856},[787,1344,798],{"class":797},[787,1346,1347],{"class":801}," scale ",[787,1349,939],{"class":797},[787,1351,942],{"class":797},[787,1353,1284],{"class":866},[787,1355,1356],{"class":801},"(s)",[787,1358,821],{"class":797},[787,1360,1361],{"class":789,"line":896},[787,1362,850],{"emptyLinePlaceholder":223},[787,1364,1365],{"class":789,"line":904},[787,1366,1367],{"class":1337},"\u002F\u002F Define base spacing unit\n",[787,1369,1370,1372,1374,1377,1379,1381,1383,1385,1387,1389,1391,1393,1395,1397,1399,1401,1403],{"class":789,"line":912},[787,1371,857],{"class":856},[787,1373,798],{"class":797},[787,1375,1376],{"class":801}," spacing ",[787,1378,939],{"class":797},[787,1380,942],{"class":797},[787,1382,831],{"class":866},[787,1384,947],{"class":801},[787,1386,950],{"class":797},[787,1388,798],{"class":797},[787,1390,1085],{"class":958},[787,1392,962],{"class":797},[787,1394,811],{"class":797},[787,1396,967],{"class":814},[787,1398,818],{"class":797},[787,1400,805],{"class":797},[787,1402,1069],{"class":801},[787,1404,821],{"class":797},[787,1406,1407],{"class":789,"line":920},[787,1408,850],{"emptyLinePlaceholder":223},[787,1410,1411],{"class":789,"line":928},[787,1412,1413],{"class":1337},"\u002F\u002F Create spacing scale powers\n",[787,1415,1416,1418,1421,1423,1425,1427,1429,1432],{"class":789,"line":936},[787,1417,857],{"class":856},[787,1419,1420],{"class":801}," scalePowers ",[787,1422,863],{"class":797},[787,1424,1289],{"class":866},[787,1426,947],{"class":801},[787,1428,950],{"class":797},[787,1430,1431],{"class":801}," scale)",[787,1433,821],{"class":797},[787,1435,1436],{"class":789,"line":955},[787,1437,850],{"emptyLinePlaceholder":223},[787,1439,1440],{"class":789,"line":974},[787,1441,1442],{"class":1337},"\u002F\u002F Generate spacing variables automatically\n",[787,1444,1445,1447],{"class":789,"line":991},[787,1446,857],{"class":856},[787,1448,884],{"class":797},[787,1450,1451,1453],{"class":789,"line":1008},[787,1452,899],{"class":801},[787,1454,893],{"class":797},[787,1456,1457,1459],{"class":789,"line":1024},[787,1458,907],{"class":801},[787,1460,893],{"class":797},[787,1462,1463,1465],{"class":789,"line":1041},[787,1464,915],{"class":801},[787,1466,893],{"class":797},[787,1468,1469,1471],{"class":789,"line":1058},[787,1470,923],{"class":801},[787,1472,893],{"class":797},[787,1474,1475,1477],{"class":789,"line":1074},[787,1476,931],{"class":801},[787,1478,893],{"class":797},[787,1480,1481,1484],{"class":789,"line":1079},[787,1482,1483],{"class":801},"    spacing2xl",[787,1485,893],{"class":797},[787,1487,1489,1491,1493,1495,1497,1499,1502,1504],{"class":789,"line":1488},23,[787,1490,939],{"class":797},[787,1492,942],{"class":797},[787,1494,1294],{"class":866},[787,1496,947],{"class":801},[787,1498,950],{"class":797},[787,1500,1501],{"class":801}," spacing",[787,1503,950],{"class":797},[787,1505,884],{"class":797},[787,1507,1509,1511,1513,1516,1519,1522,1525,1527],{"class":789,"line":1508},24,[787,1510,977],{"class":958},[787,1512,962],{"class":797},[787,1514,1515],{"class":801}," scalePowers[",[787,1517,1518],{"class":797},"-",[787,1520,1521],{"class":1119},"2",[787,1523,1524],{"class":801},"]",[787,1526,950],{"class":797},[787,1528,1529],{"class":1337},"   \u002F\u002F ~0.79rem\n",[787,1531,1533,1535,1537,1539,1541,1544,1546,1548],{"class":789,"line":1532},25,[787,1534,994],{"class":958},[787,1536,962],{"class":797},[787,1538,1515],{"class":801},[787,1540,1518],{"class":797},[787,1542,1543],{"class":1119},"1",[787,1545,1524],{"class":801},[787,1547,950],{"class":797},[787,1549,1550],{"class":1337},"   \u002F\u002F ~0.89rem\n",[787,1552,1554,1556,1558,1560,1563,1565,1567],{"class":789,"line":1553},26,[787,1555,1011],{"class":958},[787,1557,962],{"class":797},[787,1559,1515],{"class":801},[787,1561,1562],{"class":1119},"0",[787,1564,1524],{"class":801},[787,1566,950],{"class":797},[787,1568,1569],{"class":1337},"    \u002F\u002F 1rem (base)\n",[787,1571,1573,1575,1577,1579,1581,1583,1585],{"class":789,"line":1572},27,[787,1574,1027],{"class":958},[787,1576,962],{"class":797},[787,1578,1515],{"class":801},[787,1580,1543],{"class":1119},[787,1582,1524],{"class":801},[787,1584,950],{"class":797},[787,1586,1587],{"class":1337},"    \u002F\u002F ~1.13rem\n",[787,1589,1591,1593,1595,1597,1599,1601,1603],{"class":789,"line":1590},28,[787,1592,1044],{"class":958},[787,1594,962],{"class":797},[787,1596,1515],{"class":801},[787,1598,1521],{"class":1119},[787,1600,1524],{"class":801},[787,1602,950],{"class":797},[787,1604,1605],{"class":1337},"    \u002F\u002F ~1.27rem\n",[787,1607,1609,1612,1615,1617,1619,1621,1624,1626,1628],{"class":789,"line":1608},29,[787,1610,1611],{"class":797},"    '",[787,1613,1614],{"class":958},"2xl",[787,1616,818],{"class":797},[787,1618,962],{"class":797},[787,1620,1515],{"class":801},[787,1622,1623],{"class":1119},"3",[787,1625,1524],{"class":801},[787,1627,950],{"class":797},[787,1629,1630],{"class":1337}," \u002F\u002F ~1.42rem\n",[787,1632,1634,1636,1638],{"class":789,"line":1633},30,[787,1635,939],{"class":797},[787,1637,1069],{"class":801},[787,1639,821],{"class":797},[787,1641,1643],{"class":789,"line":1642},31,[787,1644,850],{"emptyLinePlaceholder":223},[787,1646,1648,1650,1652,1654],{"class":789,"line":1647},32,[787,1649,1082],{"class":793},[787,1651,1085],{"class":793},[787,1653,1088],{"class":801},[787,1655,821],{"class":797},[773,1657,1658],{"icon":154,"label":326},[777,1659,1661],{"className":1095,"code":1660,"filename":1097,"language":1098,"meta":783,"style":783},":root {\n    --scale--minor-third: 1.2;\n    --scale: var(--scale--minor-third);\n    --spacing: 1rem;\n    --spacing--xs: calc(var(--spacing) * 1 \u002F var(--scale) \u002F var(--scale));\n    --spacing--sm: calc(var(--spacing) * 1 \u002F var(--scale));\n    --spacing--md: calc(var(--spacing) * 1);\n    --spacing--lg: calc(var(--spacing) * var(--scale));\n    --spacing--xl: calc(var(--spacing) * var(--scale) * var(--scale));\n    --spacing--2xl: calc(var(--spacing) * var(--scale) * var(--scale) * var(--scale));\n}\n",[697,1662,1663,1671,1683,1702,1712,1761,1793,1817,1845,1883,1932],{"__ignoreMap":783},[787,1664,1665,1667,1669],{"class":789,"line":790},[787,1666,962],{"class":797},[787,1668,1107],{"class":856},[787,1670,884],{"class":797},[787,1672,1673,1676,1678,1681],{"class":789,"line":824},[787,1674,1675],{"class":801},"    --scale--minor-third",[787,1677,962],{"class":797},[787,1679,1680],{"class":1119}," 1.2",[787,1682,821],{"class":797},[787,1684,1685,1688,1690,1693,1696,1699],{"class":789,"line":847},[787,1686,1687],{"class":801},"    --scale",[787,1689,962],{"class":797},[787,1691,1692],{"class":866}," var",[787,1694,1695],{"class":797},"(",[787,1697,1698],{"class":801},"--scale--minor-third",[787,1700,1701],{"class":797},");\n",[787,1703,1704,1706,1708,1710],{"class":789,"line":853},[787,1705,1114],{"class":801},[787,1707,962],{"class":797},[787,1709,1120],{"class":1119},[787,1711,821],{"class":797},[787,1713,1714,1716,1718,1721,1723,1726,1728,1730,1732,1735,1738,1741,1743,1745,1748,1750,1752,1754,1756,1758],{"class":789,"line":874},[787,1715,1127],{"class":801},[787,1717,962],{"class":797},[787,1719,1720],{"class":866}," calc",[787,1722,1695],{"class":797},[787,1724,1725],{"class":866},"var",[787,1727,1695],{"class":797},[787,1729,1225],{"class":801},[787,1731,1069],{"class":797},[787,1733,1734],{"class":797}," *",[787,1736,1737],{"class":1119}," 1",[787,1739,1740],{"class":797}," \u002F",[787,1742,1692],{"class":866},[787,1744,1695],{"class":797},[787,1746,1747],{"class":801},"--scale",[787,1749,1069],{"class":797},[787,1751,1740],{"class":797},[787,1753,1692],{"class":866},[787,1755,1695],{"class":797},[787,1757,1747],{"class":801},[787,1759,1760],{"class":797},"));\n",[787,1762,1763,1765,1767,1769,1771,1773,1775,1777,1779,1781,1783,1785,1787,1789,1791],{"class":789,"line":879},[787,1764,1139],{"class":801},[787,1766,962],{"class":797},[787,1768,1720],{"class":866},[787,1770,1695],{"class":797},[787,1772,1725],{"class":866},[787,1774,1695],{"class":797},[787,1776,1225],{"class":801},[787,1778,1069],{"class":797},[787,1780,1734],{"class":797},[787,1782,1737],{"class":1119},[787,1784,1740],{"class":797},[787,1786,1692],{"class":866},[787,1788,1695],{"class":797},[787,1790,1747],{"class":801},[787,1792,1760],{"class":797},[787,1794,1795,1797,1799,1801,1803,1805,1807,1809,1811,1813,1815],{"class":789,"line":887},[787,1796,1151],{"class":801},[787,1798,962],{"class":797},[787,1800,1720],{"class":866},[787,1802,1695],{"class":797},[787,1804,1725],{"class":866},[787,1806,1695],{"class":797},[787,1808,1225],{"class":801},[787,1810,1069],{"class":797},[787,1812,1734],{"class":797},[787,1814,1737],{"class":1119},[787,1816,1701],{"class":797},[787,1818,1819,1821,1823,1825,1827,1829,1831,1833,1835,1837,1839,1841,1843],{"class":789,"line":896},[787,1820,1162],{"class":801},[787,1822,962],{"class":797},[787,1824,1720],{"class":866},[787,1826,1695],{"class":797},[787,1828,1725],{"class":866},[787,1830,1695],{"class":797},[787,1832,1225],{"class":801},[787,1834,1069],{"class":797},[787,1836,1734],{"class":797},[787,1838,1692],{"class":866},[787,1840,1695],{"class":797},[787,1842,1747],{"class":801},[787,1844,1760],{"class":797},[787,1846,1847,1849,1851,1853,1855,1857,1859,1861,1863,1865,1867,1869,1871,1873,1875,1877,1879,1881],{"class":789,"line":904},[787,1848,1174],{"class":801},[787,1850,962],{"class":797},[787,1852,1720],{"class":866},[787,1854,1695],{"class":797},[787,1856,1725],{"class":866},[787,1858,1695],{"class":797},[787,1860,1225],{"class":801},[787,1862,1069],{"class":797},[787,1864,1734],{"class":797},[787,1866,1692],{"class":866},[787,1868,1695],{"class":797},[787,1870,1747],{"class":801},[787,1872,1069],{"class":797},[787,1874,1734],{"class":797},[787,1876,1692],{"class":866},[787,1878,1695],{"class":797},[787,1880,1747],{"class":801},[787,1882,1760],{"class":797},[787,1884,1885,1888,1890,1892,1894,1896,1898,1900,1902,1904,1906,1908,1910,1912,1914,1916,1918,1920,1922,1924,1926,1928,1930],{"class":789,"line":912},[787,1886,1887],{"class":801},"    --spacing--2xl",[787,1889,962],{"class":797},[787,1891,1720],{"class":866},[787,1893,1695],{"class":797},[787,1895,1725],{"class":866},[787,1897,1695],{"class":797},[787,1899,1225],{"class":801},[787,1901,1069],{"class":797},[787,1903,1734],{"class":797},[787,1905,1692],{"class":866},[787,1907,1695],{"class":797},[787,1909,1747],{"class":801},[787,1911,1069],{"class":797},[787,1913,1734],{"class":797},[787,1915,1692],{"class":866},[787,1917,1695],{"class":797},[787,1919,1747],{"class":801},[787,1921,1069],{"class":797},[787,1923,1734],{"class":797},[787,1925,1692],{"class":866},[787,1927,1695],{"class":797},[787,1929,1747],{"class":801},[787,1931,1760],{"class":797},[787,1933,1934],{"class":789,"line":920},[787,1935,1186],{"class":797},[719,1937,764,1938,1940],{},[697,1939,1242],{}," function multiplies your base spacing by the scale powers, creating a harmonious progression of spacing values. This ensures consistent proportional relationships throughout your design system.",[719,1942,1943,1946],{},[702,1944,1945],{"href":226},"Read more about design scales"," and take advantage of the flexibility they offer.",[1214,1948,1949,1951,1952,1954],{},[692,1950,1218],{}," Using ",[697,1953,1242],{}," with scales means you can change your entire spacing system's proportions by simply adjusting the scale ratio. Try different scales like Perfect Fourth (1.333) for more dramatic spacing differences or Major Second (1.125) for subtle variations.",[715,1956,1958],{"id":1957},"using-spacing-variables","Using Spacing Variables",[719,1960,1961],{},"Once created, spacing variables can be used anywhere in your styles:",[770,1963,1964,2314],{},[773,1965,1966],{"icon":775,"label":290},[777,1967,1969],{"className":779,"code":1968,"filename":781,"language":782,"meta":783,"style":783},"import { styleframe } from 'styleframe';\nimport { useSpacingDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { ref, selector, css } = s;\n\nconst { spacing, spacingSm, spacingLg } = useSpacingDesignTokens(s, {\n    default: '1rem',\n    sm: '0.5rem',\n    lg: '1.5rem',\n} as const);\n\nselector('.card', {\n    padding: ref(spacing),\n    marginBottom: ref(spacingLg),\n});\n\nselector('.button', {\n    padding: css`${spacingSm} ${spacing}`,\n});\n\nselector('.container', {\n    gap: ref(spacing),\n});\n\nexport default s;\n",[697,1970,1971,1991,2011,2015,2029,2056,2060,2090,2104,2118,2132,2144,2148,2166,2180,2194,2202,2206,2223,2250,2258,2262,2279,2292,2300,2304],{"__ignoreMap":783},[787,1972,1973,1975,1977,1979,1981,1983,1985,1987,1989],{"class":789,"line":790},[787,1974,794],{"class":793},[787,1976,798],{"class":797},[787,1978,802],{"class":801},[787,1980,805],{"class":797},[787,1982,808],{"class":793},[787,1984,811],{"class":797},[787,1986,815],{"class":814},[787,1988,818],{"class":797},[787,1990,821],{"class":797},[787,1992,1993,1995,1997,1999,2001,2003,2005,2007,2009],{"class":789,"line":824},[787,1994,794],{"class":793},[787,1996,798],{"class":797},[787,1998,831],{"class":801},[787,2000,805],{"class":797},[787,2002,808],{"class":793},[787,2004,811],{"class":797},[787,2006,840],{"class":814},[787,2008,818],{"class":797},[787,2010,821],{"class":797},[787,2012,2013],{"class":789,"line":847},[787,2014,850],{"emptyLinePlaceholder":223},[787,2016,2017,2019,2021,2023,2025,2027],{"class":789,"line":853},[787,2018,857],{"class":856},[787,2020,860],{"class":801},[787,2022,863],{"class":797},[787,2024,802],{"class":866},[787,2026,869],{"class":801},[787,2028,821],{"class":797},[787,2030,2031,2033,2035,2038,2040,2043,2045,2048,2050,2052,2054],{"class":789,"line":874},[787,2032,857],{"class":856},[787,2034,798],{"class":797},[787,2036,2037],{"class":801}," ref",[787,2039,950],{"class":797},[787,2041,2042],{"class":801}," selector",[787,2044,950],{"class":797},[787,2046,2047],{"class":801}," css ",[787,2049,939],{"class":797},[787,2051,942],{"class":797},[787,2053,1088],{"class":801},[787,2055,821],{"class":797},[787,2057,2058],{"class":789,"line":879},[787,2059,850],{"emptyLinePlaceholder":223},[787,2061,2062,2064,2066,2068,2070,2073,2075,2078,2080,2082,2084,2086,2088],{"class":789,"line":887},[787,2063,857],{"class":856},[787,2065,798],{"class":797},[787,2067,1501],{"class":801},[787,2069,950],{"class":797},[787,2071,2072],{"class":801}," spacingSm",[787,2074,950],{"class":797},[787,2076,2077],{"class":801}," spacingLg ",[787,2079,939],{"class":797},[787,2081,942],{"class":797},[787,2083,831],{"class":866},[787,2085,947],{"class":801},[787,2087,950],{"class":797},[787,2089,884],{"class":797},[787,2091,2092,2094,2096,2098,2100,2102],{"class":789,"line":896},[787,2093,959],{"class":958},[787,2095,962],{"class":797},[787,2097,811],{"class":797},[787,2099,967],{"class":814},[787,2101,818],{"class":797},[787,2103,893],{"class":797},[787,2105,2106,2108,2110,2112,2114,2116],{"class":789,"line":904},[787,2107,994],{"class":958},[787,2109,962],{"class":797},[787,2111,811],{"class":797},[787,2113,1001],{"class":814},[787,2115,818],{"class":797},[787,2117,893],{"class":797},[787,2119,2120,2122,2124,2126,2128,2130],{"class":789,"line":912},[787,2121,1027],{"class":958},[787,2123,962],{"class":797},[787,2125,811],{"class":797},[787,2127,1034],{"class":814},[787,2129,818],{"class":797},[787,2131,893],{"class":797},[787,2133,2134,2136,2138,2140,2142],{"class":789,"line":920},[787,2135,939],{"class":797},[787,2137,1063],{"class":793},[787,2139,1066],{"class":856},[787,2141,1069],{"class":801},[787,2143,821],{"class":797},[787,2145,2146],{"class":789,"line":928},[787,2147,850],{"emptyLinePlaceholder":223},[787,2149,2150,2153,2155,2157,2160,2162,2164],{"class":789,"line":936},[787,2151,2152],{"class":866},"selector",[787,2154,1695],{"class":801},[787,2156,818],{"class":797},[787,2158,2159],{"class":814},".card",[787,2161,818],{"class":797},[787,2163,950],{"class":797},[787,2165,884],{"class":797},[787,2167,2168,2171,2173,2175,2178],{"class":789,"line":955},[787,2169,2170],{"class":958},"    padding",[787,2172,962],{"class":797},[787,2174,2037],{"class":866},[787,2176,2177],{"class":801},"(spacing)",[787,2179,893],{"class":797},[787,2181,2182,2185,2187,2189,2192],{"class":789,"line":974},[787,2183,2184],{"class":958},"    marginBottom",[787,2186,962],{"class":797},[787,2188,2037],{"class":866},[787,2190,2191],{"class":801},"(spacingLg)",[787,2193,893],{"class":797},[787,2195,2196,2198,2200],{"class":789,"line":991},[787,2197,939],{"class":797},[787,2199,1069],{"class":801},[787,2201,821],{"class":797},[787,2203,2204],{"class":789,"line":1008},[787,2205,850],{"emptyLinePlaceholder":223},[787,2207,2208,2210,2212,2214,2217,2219,2221],{"class":789,"line":1024},[787,2209,2152],{"class":866},[787,2211,1695],{"class":801},[787,2213,818],{"class":797},[787,2215,2216],{"class":814},".button",[787,2218,818],{"class":797},[787,2220,950],{"class":797},[787,2222,884],{"class":797},[787,2224,2225,2227,2229,2232,2235,2238,2240,2243,2245,2248],{"class":789,"line":1041},[787,2226,2170],{"class":958},[787,2228,962],{"class":797},[787,2230,2231],{"class":866}," css",[787,2233,2234],{"class":797},"`${",[787,2236,2237],{"class":801},"spacingSm",[787,2239,939],{"class":797},[787,2241,2242],{"class":797}," ${",[787,2244,712],{"class":801},[787,2246,2247],{"class":797},"}`",[787,2249,893],{"class":797},[787,2251,2252,2254,2256],{"class":789,"line":1058},[787,2253,939],{"class":797},[787,2255,1069],{"class":801},[787,2257,821],{"class":797},[787,2259,2260],{"class":789,"line":1074},[787,2261,850],{"emptyLinePlaceholder":223},[787,2263,2264,2266,2268,2270,2273,2275,2277],{"class":789,"line":1079},[787,2265,2152],{"class":866},[787,2267,1695],{"class":801},[787,2269,818],{"class":797},[787,2271,2272],{"class":814},".container",[787,2274,818],{"class":797},[787,2276,950],{"class":797},[787,2278,884],{"class":797},[787,2280,2281,2284,2286,2288,2290],{"class":789,"line":1488},[787,2282,2283],{"class":958},"    gap",[787,2285,962],{"class":797},[787,2287,2037],{"class":866},[787,2289,2177],{"class":801},[787,2291,893],{"class":797},[787,2293,2294,2296,2298],{"class":789,"line":1508},[787,2295,939],{"class":797},[787,2297,1069],{"class":801},[787,2299,821],{"class":797},[787,2301,2302],{"class":789,"line":1532},[787,2303,850],{"emptyLinePlaceholder":223},[787,2305,2306,2308,2310,2312],{"class":789,"line":1553},[787,2307,1082],{"class":793},[787,2309,1085],{"class":793},[787,2311,1088],{"class":801},[787,2313,821],{"class":797},[773,2315,2316],{"icon":154,"label":326},[777,2317,2319],{"className":1095,"code":2318,"filename":1097,"language":1098,"meta":783,"style":783},":root {\n    --spacing: 1rem;\n    --spacing--sm: 0.5rem;\n    --spacing--lg: 1.5rem;\n}\n\n.card {\n    padding: var(--spacing);\n    margin-bottom: var(--spacing--lg);\n}\n\n.button {\n    padding: var(--spacing--sm) var(--spacing);\n}\n\n.container {\n    gap: var(--spacing);\n}\n",[697,2320,2321,2329,2339,2349,2359,2363,2367,2378,2393,2409,2413,2417,2426,2449,2453,2457,2466,2480],{"__ignoreMap":783},[787,2322,2323,2325,2327],{"class":789,"line":790},[787,2324,962],{"class":797},[787,2326,1107],{"class":856},[787,2328,884],{"class":797},[787,2330,2331,2333,2335,2337],{"class":789,"line":824},[787,2332,1114],{"class":801},[787,2334,962],{"class":797},[787,2336,1120],{"class":1119},[787,2338,821],{"class":797},[787,2340,2341,2343,2345,2347],{"class":789,"line":847},[787,2342,1139],{"class":801},[787,2344,962],{"class":797},[787,2346,1144],{"class":1119},[787,2348,821],{"class":797},[787,2350,2351,2353,2355,2357],{"class":789,"line":853},[787,2352,1162],{"class":801},[787,2354,962],{"class":797},[787,2356,1167],{"class":1119},[787,2358,821],{"class":797},[787,2360,2361],{"class":789,"line":874},[787,2362,1186],{"class":797},[787,2364,2365],{"class":789,"line":879},[787,2366,850],{"emptyLinePlaceholder":223},[787,2368,2369,2372,2376],{"class":789,"line":887},[787,2370,2371],{"class":797},".",[787,2373,2375],{"class":2374},"sBMFI","card",[787,2377,884],{"class":797},[787,2379,2380,2383,2385,2387,2389,2391],{"class":789,"line":896},[787,2381,2170],{"class":2382},"sqsOY",[787,2384,962],{"class":797},[787,2386,1692],{"class":866},[787,2388,1695],{"class":797},[787,2390,1225],{"class":801},[787,2392,1701],{"class":797},[787,2394,2395,2398,2400,2402,2404,2407],{"class":789,"line":904},[787,2396,2397],{"class":2382},"    margin-bottom",[787,2399,962],{"class":797},[787,2401,1692],{"class":866},[787,2403,1695],{"class":797},[787,2405,2406],{"class":801},"--spacing--lg",[787,2408,1701],{"class":797},[787,2410,2411],{"class":789,"line":912},[787,2412,1186],{"class":797},[787,2414,2415],{"class":789,"line":920},[787,2416,850],{"emptyLinePlaceholder":223},[787,2418,2419,2421,2424],{"class":789,"line":928},[787,2420,2371],{"class":797},[787,2422,2423],{"class":2374},"button",[787,2425,884],{"class":797},[787,2427,2428,2430,2432,2434,2436,2439,2441,2443,2445,2447],{"class":789,"line":936},[787,2429,2170],{"class":2382},[787,2431,962],{"class":797},[787,2433,1692],{"class":866},[787,2435,1695],{"class":797},[787,2437,2438],{"class":801},"--spacing--sm",[787,2440,1069],{"class":797},[787,2442,1692],{"class":866},[787,2444,1695],{"class":797},[787,2446,1225],{"class":801},[787,2448,1701],{"class":797},[787,2450,2451],{"class":789,"line":955},[787,2452,1186],{"class":797},[787,2454,2455],{"class":789,"line":974},[787,2456,850],{"emptyLinePlaceholder":223},[787,2458,2459,2461,2464],{"class":789,"line":991},[787,2460,2371],{"class":797},[787,2462,2463],{"class":2374},"container",[787,2465,884],{"class":797},[787,2467,2468,2470,2472,2474,2476,2478],{"class":789,"line":1008},[787,2469,2283],{"class":2382},[787,2471,962],{"class":797},[787,2473,1692],{"class":866},[787,2475,1695],{"class":797},[787,2477,1225],{"class":801},[787,2479,1701],{"class":797},[787,2481,2482],{"class":789,"line":1024},[787,2483,1186],{"class":797},[715,2485,2487],{"id":2486},"examples","Examples",[2489,2490,2492],"h3",{"id":2491},"semantic-spacing-names","Semantic Spacing Names",[719,2494,2495],{},"Use semantic names to make spacing intent clear:",[770,2497,2498,2699],{},[773,2499,2500],{"icon":775,"label":290},[777,2501,2503],{"className":779,"code":2502,"filename":781,"language":782,"meta":783,"style":783},"import { styleframe } from 'styleframe';\nimport { useSpacingDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    spacing,\n    spacingTight,\n    spacingComfortable,\n    spacingLoose,\n} = useSpacingDesignTokens(s, {\n    default: '1rem',\n    tight: '0.5rem',\n    comfortable: '1.5rem',\n    loose: '2rem',\n} as const);\n\nexport default s;\n",[697,2504,2505,2525,2545,2549,2563,2567,2573,2579,2586,2593,2600,2614,2628,2643,2658,2673,2685,2689],{"__ignoreMap":783},[787,2506,2507,2509,2511,2513,2515,2517,2519,2521,2523],{"class":789,"line":790},[787,2508,794],{"class":793},[787,2510,798],{"class":797},[787,2512,802],{"class":801},[787,2514,805],{"class":797},[787,2516,808],{"class":793},[787,2518,811],{"class":797},[787,2520,815],{"class":814},[787,2522,818],{"class":797},[787,2524,821],{"class":797},[787,2526,2527,2529,2531,2533,2535,2537,2539,2541,2543],{"class":789,"line":824},[787,2528,794],{"class":793},[787,2530,798],{"class":797},[787,2532,831],{"class":801},[787,2534,805],{"class":797},[787,2536,808],{"class":793},[787,2538,811],{"class":797},[787,2540,840],{"class":814},[787,2542,818],{"class":797},[787,2544,821],{"class":797},[787,2546,2547],{"class":789,"line":847},[787,2548,850],{"emptyLinePlaceholder":223},[787,2550,2551,2553,2555,2557,2559,2561],{"class":789,"line":853},[787,2552,857],{"class":856},[787,2554,860],{"class":801},[787,2556,863],{"class":797},[787,2558,802],{"class":866},[787,2560,869],{"class":801},[787,2562,821],{"class":797},[787,2564,2565],{"class":789,"line":874},[787,2566,850],{"emptyLinePlaceholder":223},[787,2568,2569,2571],{"class":789,"line":879},[787,2570,857],{"class":856},[787,2572,884],{"class":797},[787,2574,2575,2577],{"class":789,"line":887},[787,2576,890],{"class":801},[787,2578,893],{"class":797},[787,2580,2581,2584],{"class":789,"line":896},[787,2582,2583],{"class":801},"    spacingTight",[787,2585,893],{"class":797},[787,2587,2588,2591],{"class":789,"line":904},[787,2589,2590],{"class":801},"    spacingComfortable",[787,2592,893],{"class":797},[787,2594,2595,2598],{"class":789,"line":912},[787,2596,2597],{"class":801},"    spacingLoose",[787,2599,893],{"class":797},[787,2601,2602,2604,2606,2608,2610,2612],{"class":789,"line":920},[787,2603,939],{"class":797},[787,2605,942],{"class":797},[787,2607,831],{"class":866},[787,2609,947],{"class":801},[787,2611,950],{"class":797},[787,2613,884],{"class":797},[787,2615,2616,2618,2620,2622,2624,2626],{"class":789,"line":928},[787,2617,959],{"class":958},[787,2619,962],{"class":797},[787,2621,811],{"class":797},[787,2623,967],{"class":814},[787,2625,818],{"class":797},[787,2627,893],{"class":797},[787,2629,2630,2633,2635,2637,2639,2641],{"class":789,"line":936},[787,2631,2632],{"class":958},"    tight",[787,2634,962],{"class":797},[787,2636,811],{"class":797},[787,2638,1001],{"class":814},[787,2640,818],{"class":797},[787,2642,893],{"class":797},[787,2644,2645,2648,2650,2652,2654,2656],{"class":789,"line":955},[787,2646,2647],{"class":958},"    comfortable",[787,2649,962],{"class":797},[787,2651,811],{"class":797},[787,2653,1034],{"class":814},[787,2655,818],{"class":797},[787,2657,893],{"class":797},[787,2659,2660,2663,2665,2667,2669,2671],{"class":789,"line":974},[787,2661,2662],{"class":958},"    loose",[787,2664,962],{"class":797},[787,2666,811],{"class":797},[787,2668,1051],{"class":814},[787,2670,818],{"class":797},[787,2672,893],{"class":797},[787,2674,2675,2677,2679,2681,2683],{"class":789,"line":991},[787,2676,939],{"class":797},[787,2678,1063],{"class":793},[787,2680,1066],{"class":856},[787,2682,1069],{"class":801},[787,2684,821],{"class":797},[787,2686,2687],{"class":789,"line":1008},[787,2688,850],{"emptyLinePlaceholder":223},[787,2690,2691,2693,2695,2697],{"class":789,"line":1024},[787,2692,1082],{"class":793},[787,2694,1085],{"class":793},[787,2696,1088],{"class":801},[787,2698,821],{"class":797},[773,2700,2701],{"icon":154,"label":326},[777,2702,2704],{"className":1095,"code":2703,"filename":1097,"language":1098,"meta":783,"style":783},":root {\n    --spacing: 1rem;\n    --spacing--tight: 0.5rem;\n    --spacing--comfortable: 1.5rem;\n    --spacing--loose: 2rem;\n}\n",[697,2705,2706,2714,2724,2735,2746,2757],{"__ignoreMap":783},[787,2707,2708,2710,2712],{"class":789,"line":790},[787,2709,962],{"class":797},[787,2711,1107],{"class":856},[787,2713,884],{"class":797},[787,2715,2716,2718,2720,2722],{"class":789,"line":824},[787,2717,1114],{"class":801},[787,2719,962],{"class":797},[787,2721,1120],{"class":1119},[787,2723,821],{"class":797},[787,2725,2726,2729,2731,2733],{"class":789,"line":847},[787,2727,2728],{"class":801},"    --spacing--tight",[787,2730,962],{"class":797},[787,2732,1144],{"class":1119},[787,2734,821],{"class":797},[787,2736,2737,2740,2742,2744],{"class":789,"line":853},[787,2738,2739],{"class":801},"    --spacing--comfortable",[787,2741,962],{"class":797},[787,2743,1167],{"class":1119},[787,2745,821],{"class":797},[787,2747,2748,2751,2753,2755],{"class":789,"line":874},[787,2749,2750],{"class":801},"    --spacing--loose",[787,2752,962],{"class":797},[787,2754,1179],{"class":1119},[787,2756,821],{"class":797},[787,2758,2759],{"class":789,"line":879},[787,2760,1186],{"class":797},[2489,2762,2764],{"id":2763},"complete-spacing-system","Complete Spacing System",[719,2766,2767],{},"Here's a comprehensive example showing a full spacing system with multiple scales:",[770,2769,2770,3358],{},[773,2771,2772],{"icon":775,"label":290},[777,2773,2775],{"className":779,"code":2774,"filename":781,"language":782,"meta":783,"style":783},"import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens, useScalePowersDesignTokens, useMultiplierDesignTokens, useSpacingDesignTokens, defaultScaleValues } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Use Minor Third scale (1.2) for balanced spacing\nconst { scale } = useScaleDesignTokens(s, { ...defaultScaleValues, default: '@scale.minor-third' });\n\n\u002F\u002F Define base spacing units\nconst { spacing, spacingGutter, spacingSection } = useSpacingDesignTokens(s, {\n    default: '1rem',        \u002F\u002F Base unit for general spacing\n    gutter: '1.5rem',       \u002F\u002F For grid gutters\n    section: '4rem',        \u002F\u002F For section spacing\n} as const);\n\n\u002F\u002F Create scale powers for the base spacing\nconst scalePowers = useScalePowersDesignTokens(s, scale, [-3, -2, -1, 0, 1, 2, 3, 4]);\n\n\u002F\u002F Generate base spacing scale\nconst {\n    spacing3xs,\n    spacing2xs,\n    spacingXs,\n    spacingSm,\n    spacingMd,\n    spacingLg,\n    spacingXl,\n    spacing2xl,\n} = useMultiplierDesignTokens(s, spacing, {\n    '3xs': scalePowers[-3],  \u002F\u002F ~0.58rem\n    '2xs': scalePowers[-2],  \u002F\u002F ~0.69rem\n    xs: scalePowers[-1],     \u002F\u002F ~0.83rem\n    sm: scalePowers[0],      \u002F\u002F 1rem (base)\n    md: scalePowers[1],      \u002F\u002F ~1.2rem\n    lg: scalePowers[2],      \u002F\u002F ~1.44rem\n    xl: scalePowers[3],      \u002F\u002F ~1.73rem\n    '2xl': scalePowers[4],   \u002F\u002F ~2.07rem\n});\n\nexport default s;\n",[697,2776,2777,2797,2834,2838,2852,2856,2861,2906,2910,2915,2945,2962,2980,2999,3011,3015,3020,3088,3092,3097,3103,3110,3117,3123,3129,3135,3141,3147,3153,3171,3195,3219,3238,3256,3274,3292,3310,3333,3342,3347],{"__ignoreMap":783},[787,2778,2779,2781,2783,2785,2787,2789,2791,2793,2795],{"class":789,"line":790},[787,2780,794],{"class":793},[787,2782,798],{"class":797},[787,2784,802],{"class":801},[787,2786,805],{"class":797},[787,2788,808],{"class":793},[787,2790,811],{"class":797},[787,2792,815],{"class":814},[787,2794,818],{"class":797},[787,2796,821],{"class":797},[787,2798,2799,2801,2803,2805,2807,2809,2811,2813,2815,2817,2819,2822,2824,2826,2828,2830,2832],{"class":789,"line":824},[787,2800,794],{"class":793},[787,2802,798],{"class":797},[787,2804,1284],{"class":801},[787,2806,950],{"class":797},[787,2808,1289],{"class":801},[787,2810,950],{"class":797},[787,2812,1294],{"class":801},[787,2814,950],{"class":797},[787,2816,831],{"class":801},[787,2818,950],{"class":797},[787,2820,2821],{"class":801}," defaultScaleValues",[787,2823,805],{"class":797},[787,2825,808],{"class":793},[787,2827,811],{"class":797},[787,2829,840],{"class":814},[787,2831,818],{"class":797},[787,2833,821],{"class":797},[787,2835,2836],{"class":789,"line":847},[787,2837,850],{"emptyLinePlaceholder":223},[787,2839,2840,2842,2844,2846,2848,2850],{"class":789,"line":853},[787,2841,857],{"class":856},[787,2843,860],{"class":801},[787,2845,863],{"class":797},[787,2847,802],{"class":866},[787,2849,869],{"class":801},[787,2851,821],{"class":797},[787,2853,2854],{"class":789,"line":874},[787,2855,850],{"emptyLinePlaceholder":223},[787,2857,2858],{"class":789,"line":879},[787,2859,2860],{"class":1337},"\u002F\u002F Use Minor Third scale (1.2) for balanced spacing\n",[787,2862,2863,2865,2867,2869,2871,2873,2875,2877,2879,2881,2884,2887,2889,2891,2893,2895,2898,2900,2902,2904],{"class":789,"line":887},[787,2864,857],{"class":856},[787,2866,798],{"class":797},[787,2868,1347],{"class":801},[787,2870,939],{"class":797},[787,2872,942],{"class":797},[787,2874,1284],{"class":866},[787,2876,947],{"class":801},[787,2878,950],{"class":797},[787,2880,798],{"class":797},[787,2882,2883],{"class":797}," ...",[787,2885,2886],{"class":801},"defaultScaleValues",[787,2888,950],{"class":797},[787,2890,1085],{"class":958},[787,2892,962],{"class":797},[787,2894,811],{"class":797},[787,2896,2897],{"class":814},"@scale.minor-third",[787,2899,818],{"class":797},[787,2901,805],{"class":797},[787,2903,1069],{"class":801},[787,2905,821],{"class":797},[787,2907,2908],{"class":789,"line":896},[787,2909,850],{"emptyLinePlaceholder":223},[787,2911,2912],{"class":789,"line":904},[787,2913,2914],{"class":1337},"\u002F\u002F Define base spacing units\n",[787,2916,2917,2919,2921,2923,2925,2928,2930,2933,2935,2937,2939,2941,2943],{"class":789,"line":912},[787,2918,857],{"class":856},[787,2920,798],{"class":797},[787,2922,1501],{"class":801},[787,2924,950],{"class":797},[787,2926,2927],{"class":801}," spacingGutter",[787,2929,950],{"class":797},[787,2931,2932],{"class":801}," spacingSection ",[787,2934,939],{"class":797},[787,2936,942],{"class":797},[787,2938,831],{"class":866},[787,2940,947],{"class":801},[787,2942,950],{"class":797},[787,2944,884],{"class":797},[787,2946,2947,2949,2951,2953,2955,2957,2959],{"class":789,"line":920},[787,2948,959],{"class":958},[787,2950,962],{"class":797},[787,2952,811],{"class":797},[787,2954,967],{"class":814},[787,2956,818],{"class":797},[787,2958,950],{"class":797},[787,2960,2961],{"class":1337},"        \u002F\u002F Base unit for general spacing\n",[787,2963,2964,2967,2969,2971,2973,2975,2977],{"class":789,"line":928},[787,2965,2966],{"class":958},"    gutter",[787,2968,962],{"class":797},[787,2970,811],{"class":797},[787,2972,1034],{"class":814},[787,2974,818],{"class":797},[787,2976,950],{"class":797},[787,2978,2979],{"class":1337},"       \u002F\u002F For grid gutters\n",[787,2981,2982,2985,2987,2989,2992,2994,2996],{"class":789,"line":936},[787,2983,2984],{"class":958},"    section",[787,2986,962],{"class":797},[787,2988,811],{"class":797},[787,2990,2991],{"class":814},"4rem",[787,2993,818],{"class":797},[787,2995,950],{"class":797},[787,2997,2998],{"class":1337},"        \u002F\u002F For section spacing\n",[787,3000,3001,3003,3005,3007,3009],{"class":789,"line":955},[787,3002,939],{"class":797},[787,3004,1063],{"class":793},[787,3006,1066],{"class":856},[787,3008,1069],{"class":801},[787,3010,821],{"class":797},[787,3012,3013],{"class":789,"line":974},[787,3014,850],{"emptyLinePlaceholder":223},[787,3016,3017],{"class":789,"line":991},[787,3018,3019],{"class":1337},"\u002F\u002F Create scale powers for the base spacing\n",[787,3021,3022,3024,3026,3028,3030,3032,3034,3037,3039,3042,3044,3046,3048,3051,3053,3055,3057,3059,3061,3064,3066,3068,3070,3073,3075,3078,3080,3083,3086],{"class":789,"line":1008},[787,3023,857],{"class":856},[787,3025,1420],{"class":801},[787,3027,863],{"class":797},[787,3029,1289],{"class":866},[787,3031,947],{"class":801},[787,3033,950],{"class":797},[787,3035,3036],{"class":801}," scale",[787,3038,950],{"class":797},[787,3040,3041],{"class":801}," [",[787,3043,1518],{"class":797},[787,3045,1623],{"class":1119},[787,3047,950],{"class":797},[787,3049,3050],{"class":797}," -",[787,3052,1521],{"class":1119},[787,3054,950],{"class":797},[787,3056,3050],{"class":797},[787,3058,1543],{"class":1119},[787,3060,950],{"class":797},[787,3062,3063],{"class":1119}," 0",[787,3065,950],{"class":797},[787,3067,1737],{"class":1119},[787,3069,950],{"class":797},[787,3071,3072],{"class":1119}," 2",[787,3074,950],{"class":797},[787,3076,3077],{"class":1119}," 3",[787,3079,950],{"class":797},[787,3081,3082],{"class":1119}," 4",[787,3084,3085],{"class":801},"])",[787,3087,821],{"class":797},[787,3089,3090],{"class":789,"line":1024},[787,3091,850],{"emptyLinePlaceholder":223},[787,3093,3094],{"class":789,"line":1041},[787,3095,3096],{"class":1337},"\u002F\u002F Generate base spacing scale\n",[787,3098,3099,3101],{"class":789,"line":1058},[787,3100,857],{"class":856},[787,3102,884],{"class":797},[787,3104,3105,3108],{"class":789,"line":1074},[787,3106,3107],{"class":801},"    spacing3xs",[787,3109,893],{"class":797},[787,3111,3112,3115],{"class":789,"line":1079},[787,3113,3114],{"class":801},"    spacing2xs",[787,3116,893],{"class":797},[787,3118,3119,3121],{"class":789,"line":1488},[787,3120,899],{"class":801},[787,3122,893],{"class":797},[787,3124,3125,3127],{"class":789,"line":1508},[787,3126,907],{"class":801},[787,3128,893],{"class":797},[787,3130,3131,3133],{"class":789,"line":1532},[787,3132,915],{"class":801},[787,3134,893],{"class":797},[787,3136,3137,3139],{"class":789,"line":1553},[787,3138,923],{"class":801},[787,3140,893],{"class":797},[787,3142,3143,3145],{"class":789,"line":1572},[787,3144,931],{"class":801},[787,3146,893],{"class":797},[787,3148,3149,3151],{"class":789,"line":1590},[787,3150,1483],{"class":801},[787,3152,893],{"class":797},[787,3154,3155,3157,3159,3161,3163,3165,3167,3169],{"class":789,"line":1608},[787,3156,939],{"class":797},[787,3158,942],{"class":797},[787,3160,1294],{"class":866},[787,3162,947],{"class":801},[787,3164,950],{"class":797},[787,3166,1501],{"class":801},[787,3168,950],{"class":797},[787,3170,884],{"class":797},[787,3172,3173,3175,3178,3180,3182,3184,3186,3188,3190,3192],{"class":789,"line":1633},[787,3174,1611],{"class":797},[787,3176,3177],{"class":958},"3xs",[787,3179,818],{"class":797},[787,3181,962],{"class":797},[787,3183,1515],{"class":801},[787,3185,1518],{"class":797},[787,3187,1623],{"class":1119},[787,3189,1524],{"class":801},[787,3191,950],{"class":797},[787,3193,3194],{"class":1337},"  \u002F\u002F ~0.58rem\n",[787,3196,3197,3199,3202,3204,3206,3208,3210,3212,3214,3216],{"class":789,"line":1642},[787,3198,1611],{"class":797},[787,3200,3201],{"class":958},"2xs",[787,3203,818],{"class":797},[787,3205,962],{"class":797},[787,3207,1515],{"class":801},[787,3209,1518],{"class":797},[787,3211,1521],{"class":1119},[787,3213,1524],{"class":801},[787,3215,950],{"class":797},[787,3217,3218],{"class":1337},"  \u002F\u002F ~0.69rem\n",[787,3220,3221,3223,3225,3227,3229,3231,3233,3235],{"class":789,"line":1647},[787,3222,977],{"class":958},[787,3224,962],{"class":797},[787,3226,1515],{"class":801},[787,3228,1518],{"class":797},[787,3230,1543],{"class":1119},[787,3232,1524],{"class":801},[787,3234,950],{"class":797},[787,3236,3237],{"class":1337},"     \u002F\u002F ~0.83rem\n",[787,3239,3241,3243,3245,3247,3249,3251,3253],{"class":789,"line":3240},33,[787,3242,994],{"class":958},[787,3244,962],{"class":797},[787,3246,1515],{"class":801},[787,3248,1562],{"class":1119},[787,3250,1524],{"class":801},[787,3252,950],{"class":797},[787,3254,3255],{"class":1337},"      \u002F\u002F 1rem (base)\n",[787,3257,3259,3261,3263,3265,3267,3269,3271],{"class":789,"line":3258},34,[787,3260,1011],{"class":958},[787,3262,962],{"class":797},[787,3264,1515],{"class":801},[787,3266,1543],{"class":1119},[787,3268,1524],{"class":801},[787,3270,950],{"class":797},[787,3272,3273],{"class":1337},"      \u002F\u002F ~1.2rem\n",[787,3275,3277,3279,3281,3283,3285,3287,3289],{"class":789,"line":3276},35,[787,3278,1027],{"class":958},[787,3280,962],{"class":797},[787,3282,1515],{"class":801},[787,3284,1521],{"class":1119},[787,3286,1524],{"class":801},[787,3288,950],{"class":797},[787,3290,3291],{"class":1337},"      \u002F\u002F ~1.44rem\n",[787,3293,3295,3297,3299,3301,3303,3305,3307],{"class":789,"line":3294},36,[787,3296,1044],{"class":958},[787,3298,962],{"class":797},[787,3300,1515],{"class":801},[787,3302,1623],{"class":1119},[787,3304,1524],{"class":801},[787,3306,950],{"class":797},[787,3308,3309],{"class":1337},"      \u002F\u002F ~1.73rem\n",[787,3311,3313,3315,3317,3319,3321,3323,3326,3328,3330],{"class":789,"line":3312},37,[787,3314,1611],{"class":797},[787,3316,1614],{"class":958},[787,3318,818],{"class":797},[787,3320,962],{"class":797},[787,3322,1515],{"class":801},[787,3324,3325],{"class":1119},"4",[787,3327,1524],{"class":801},[787,3329,950],{"class":797},[787,3331,3332],{"class":1337},"   \u002F\u002F ~2.07rem\n",[787,3334,3336,3338,3340],{"class":789,"line":3335},38,[787,3337,939],{"class":797},[787,3339,1069],{"class":801},[787,3341,821],{"class":797},[787,3343,3345],{"class":789,"line":3344},39,[787,3346,850],{"emptyLinePlaceholder":223},[787,3348,3350,3352,3354,3356],{"class":789,"line":3349},40,[787,3351,1082],{"class":793},[787,3353,1085],{"class":793},[787,3355,1088],{"class":801},[787,3357,821],{"class":797},[773,3359,3360],{"icon":154,"label":326},[777,3361,3363],{"className":1095,"code":3362,"filename":1097,"language":1098,"meta":783,"style":783},":root {\n    --scale--minor-third: 1.2;\n    --scale: var(--scale--minor-third);\n    --spacing: 1rem;\n    --spacing--gutter: 1.5rem;\n    --spacing--section: 4rem;\n    --spacing--3xs: calc(var(--spacing) * var(--scale-power---3));\n    --spacing--2xs: calc(var(--spacing) * var(--scale-power---2));\n    --spacing--xs: calc(var(--spacing) * var(--scale-power---1));\n    --spacing--sm: calc(var(--spacing) * var(--scale-power--0));\n    --spacing--md: calc(var(--spacing) * var(--scale-power--1));\n    --spacing--lg: calc(var(--spacing) * var(--scale-power--2));\n    --spacing--xl: calc(var(--spacing) * var(--scale-power--3));\n    --spacing--2xl: calc(var(--spacing) * var(--scale-power--4));\n}\n",[697,3364,3365,3373,3383,3397,3407,3418,3430,3460,3490,3519,3548,3577,3606,3635,3664],{"__ignoreMap":783},[787,3366,3367,3369,3371],{"class":789,"line":790},[787,3368,962],{"class":797},[787,3370,1107],{"class":856},[787,3372,884],{"class":797},[787,3374,3375,3377,3379,3381],{"class":789,"line":824},[787,3376,1675],{"class":801},[787,3378,962],{"class":797},[787,3380,1680],{"class":1119},[787,3382,821],{"class":797},[787,3384,3385,3387,3389,3391,3393,3395],{"class":789,"line":847},[787,3386,1687],{"class":801},[787,3388,962],{"class":797},[787,3390,1692],{"class":866},[787,3392,1695],{"class":797},[787,3394,1698],{"class":801},[787,3396,1701],{"class":797},[787,3398,3399,3401,3403,3405],{"class":789,"line":853},[787,3400,1114],{"class":801},[787,3402,962],{"class":797},[787,3404,1120],{"class":1119},[787,3406,821],{"class":797},[787,3408,3409,3412,3414,3416],{"class":789,"line":874},[787,3410,3411],{"class":801},"    --spacing--gutter",[787,3413,962],{"class":797},[787,3415,1167],{"class":1119},[787,3417,821],{"class":797},[787,3419,3420,3423,3425,3428],{"class":789,"line":879},[787,3421,3422],{"class":801},"    --spacing--section",[787,3424,962],{"class":797},[787,3426,3427],{"class":1119}," 4rem",[787,3429,821],{"class":797},[787,3431,3432,3435,3437,3439,3441,3443,3445,3447,3449,3451,3453,3455,3458],{"class":789,"line":887},[787,3433,3434],{"class":801},"    --spacing--3xs",[787,3436,962],{"class":797},[787,3438,1720],{"class":866},[787,3440,1695],{"class":797},[787,3442,1725],{"class":866},[787,3444,1695],{"class":797},[787,3446,1225],{"class":801},[787,3448,1069],{"class":797},[787,3450,1734],{"class":797},[787,3452,1692],{"class":866},[787,3454,1695],{"class":797},[787,3456,3457],{"class":801},"--scale-power---3",[787,3459,1760],{"class":797},[787,3461,3462,3465,3467,3469,3471,3473,3475,3477,3479,3481,3483,3485,3488],{"class":789,"line":896},[787,3463,3464],{"class":801},"    --spacing--2xs",[787,3466,962],{"class":797},[787,3468,1720],{"class":866},[787,3470,1695],{"class":797},[787,3472,1725],{"class":866},[787,3474,1695],{"class":797},[787,3476,1225],{"class":801},[787,3478,1069],{"class":797},[787,3480,1734],{"class":797},[787,3482,1692],{"class":866},[787,3484,1695],{"class":797},[787,3486,3487],{"class":801},"--scale-power---2",[787,3489,1760],{"class":797},[787,3491,3492,3494,3496,3498,3500,3502,3504,3506,3508,3510,3512,3514,3517],{"class":789,"line":904},[787,3493,1127],{"class":801},[787,3495,962],{"class":797},[787,3497,1720],{"class":866},[787,3499,1695],{"class":797},[787,3501,1725],{"class":866},[787,3503,1695],{"class":797},[787,3505,1225],{"class":801},[787,3507,1069],{"class":797},[787,3509,1734],{"class":797},[787,3511,1692],{"class":866},[787,3513,1695],{"class":797},[787,3515,3516],{"class":801},"--scale-power---1",[787,3518,1760],{"class":797},[787,3520,3521,3523,3525,3527,3529,3531,3533,3535,3537,3539,3541,3543,3546],{"class":789,"line":912},[787,3522,1139],{"class":801},[787,3524,962],{"class":797},[787,3526,1720],{"class":866},[787,3528,1695],{"class":797},[787,3530,1725],{"class":866},[787,3532,1695],{"class":797},[787,3534,1225],{"class":801},[787,3536,1069],{"class":797},[787,3538,1734],{"class":797},[787,3540,1692],{"class":866},[787,3542,1695],{"class":797},[787,3544,3545],{"class":801},"--scale-power--0",[787,3547,1760],{"class":797},[787,3549,3550,3552,3554,3556,3558,3560,3562,3564,3566,3568,3570,3572,3575],{"class":789,"line":920},[787,3551,1151],{"class":801},[787,3553,962],{"class":797},[787,3555,1720],{"class":866},[787,3557,1695],{"class":797},[787,3559,1725],{"class":866},[787,3561,1695],{"class":797},[787,3563,1225],{"class":801},[787,3565,1069],{"class":797},[787,3567,1734],{"class":797},[787,3569,1692],{"class":866},[787,3571,1695],{"class":797},[787,3573,3574],{"class":801},"--scale-power--1",[787,3576,1760],{"class":797},[787,3578,3579,3581,3583,3585,3587,3589,3591,3593,3595,3597,3599,3601,3604],{"class":789,"line":928},[787,3580,1162],{"class":801},[787,3582,962],{"class":797},[787,3584,1720],{"class":866},[787,3586,1695],{"class":797},[787,3588,1725],{"class":866},[787,3590,1695],{"class":797},[787,3592,1225],{"class":801},[787,3594,1069],{"class":797},[787,3596,1734],{"class":797},[787,3598,1692],{"class":866},[787,3600,1695],{"class":797},[787,3602,3603],{"class":801},"--scale-power--2",[787,3605,1760],{"class":797},[787,3607,3608,3610,3612,3614,3616,3618,3620,3622,3624,3626,3628,3630,3633],{"class":789,"line":936},[787,3609,1174],{"class":801},[787,3611,962],{"class":797},[787,3613,1720],{"class":866},[787,3615,1695],{"class":797},[787,3617,1725],{"class":866},[787,3619,1695],{"class":797},[787,3621,1225],{"class":801},[787,3623,1069],{"class":797},[787,3625,1734],{"class":797},[787,3627,1692],{"class":866},[787,3629,1695],{"class":797},[787,3631,3632],{"class":801},"--scale-power--3",[787,3634,1760],{"class":797},[787,3636,3637,3639,3641,3643,3645,3647,3649,3651,3653,3655,3657,3659,3662],{"class":789,"line":955},[787,3638,1887],{"class":801},[787,3640,962],{"class":797},[787,3642,1720],{"class":866},[787,3644,1695],{"class":797},[787,3646,1725],{"class":866},[787,3648,1695],{"class":797},[787,3650,1225],{"class":801},[787,3652,1069],{"class":797},[787,3654,1734],{"class":797},[787,3656,1692],{"class":866},[787,3658,1695],{"class":797},[787,3660,3661],{"class":801},"--scale-power--4",[787,3663,1760],{"class":797},[787,3665,3666],{"class":789,"line":974},[787,3667,1186],{"class":797},[715,3669,3671],{"id":3670},"best-practices","Best Practices",[730,3673,3674,3683,3695,3707,3713,3719],{},[733,3675,3676,3679,3680,3682],{},[692,3677,3678],{},"Start with a base unit",": Use ",[697,3681,967],{}," (16px) as your base spacing unit and build everything else from it.",[733,3684,3685,3691,3692,3694],{},[692,3686,3687,3688,3690],{},"Use the ",[697,3689,1195],{}," key",": This creates a clean ",[697,3693,1225],{}," variable that's perfect for general-purpose spacing.",[733,3696,3697,3700,3701,3703,3704,3706],{},[692,3698,3699],{},"Integrate with scales",": Combine ",[697,3702,767],{}," with ",[697,3705,1242],{}," for mathematically harmonious spacing systems.",[733,3708,3709,3712],{},[692,3710,3711],{},"Limit your scale",": Too many spacing options can lead to inconsistency. Aim for 5-8 spacing values.",[733,3714,3715,3718],{},[692,3716,3717],{},"Consider both directions",": Think about vertical rhythm (margins, padding-block) and horizontal spacing (gaps, padding-inline).",[733,3720,3721,3724],{},[692,3722,3723],{},"Test with real content",": Ensure your spacing works across different component sizes and content densities.",[689,3726,3727,3730,3731,3734],{},[692,3728,3729],{},"Good to know:"," We use ",[697,3732,3733],{},"as const"," to ensure the object is treated as a constant type. This helps TypeScript infer the return type of the composables and provides better type safety and autocomplete support.",[715,3736,3738],{"id":3737},"faq","FAQ",[3740,3741,3742,3748,3756,3772,3802,3817],"accordion",{},[3743,3744,3747],"accordion-item",{"icon":3745,"label":3746},"i-lucide-circle-help","Should I use the same scale for spacing and typography?","Not necessarily. While you can use the same scale, it's often better to use a smaller ratio for spacing (like Major Second: 1.125) than for typography (like Perfect Fourth: 1.333). Spacing benefits from subtle progressions, while typography needs clearer distinctions for hierarchy.",[3743,3749,3751,3752,3755],{"icon":3745,"label":3750},"How many spacing values should I have?","Aim for 5-8 spacing values in your core scale. More than that can lead to decision paralysis and inconsistency. If you need more specific spacing for certain components, create semantic named variables (like ",[697,3753,3754],{},"card--padding",") rather than expanding your core scale.",[3743,3757,3759,3760,3763,3764,3767,3768,3771],{"icon":3745,"label":3758},"Should I use rem, em, or px for spacing?","Use ",[697,3761,3762],{},"rem"," for most spacing to respect user font size preferences and maintain consistent proportions. Use ",[697,3765,3766],{},"em"," for component-internal spacing that should scale with the component's font size. Avoid ",[697,3769,3770],{},"px"," unless you need pixel-perfect precision that shouldn't scale.",[3743,3773,3775,3778,3797],{"icon":3745,"label":3774},"How do I handle spacing in responsive designs?",[719,3776,3777],{},"You have several options:",[3779,3780,3781,3787,3790],"ol",{},[733,3782,3759,3783,3786],{},[697,3784,3785],{},"clamp()"," for fluid spacing that automatically adjusts,",[733,3788,3789],{},"Override spacing variables at different breakpoints, or",[733,3791,3792,3793,3796],{},"Use viewport units like ",[697,3794,3795],{},"vw"," in your calculations.",[719,3798,764,3799,3801],{},[697,3800,3785],{}," approach is often the most elegant.",[3743,3803,3805,3806,3809,3810,3813,3814,1212],{"icon":3745,"label":3804},"Can I use negative spacing values?","Yes! Negative spacing is useful for overlapping effects or compensating for optical spacing. You can create negative spacing variables by using negative values (e.g., ",[697,3807,3808],{},"'negative': '-0.5rem'",") or by wrapping a spacing reference in ",[697,3811,3812],{},"calc()"," (e.g., ",[697,3815,3816],{},"calc(${s.ref(spacing)} * -1)",[3743,3818,3820,3822,3823,3825,3826,3828,3829,3831],{"icon":3745,"label":3819},"What's the difference between useSpacingDesignTokens and useMultiplierDesignTokens?",[697,3821,767],{}," creates spacing variables from explicit values you provide. ",[697,3824,1242],{}," automatically generates spacing variables by multiplying a base spacing variable by scale powers. Use ",[697,3827,767],{}," for manual control or ",[697,3830,1242],{}," for systematic, scale-based spacing.",[3833,3834,3835],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":783,"searchDepth":824,"depth":824,"links":3837},[3838,3839,3840,3841,3843,3844,3848,3849],{"id":717,"depth":824,"text":78},{"id":724,"depth":824,"text":725},{"id":759,"depth":824,"text":699},{"id":1229,"depth":824,"text":3842},"Integration with useMultiplierDesignTokens",{"id":1957,"depth":824,"text":1958},{"id":2486,"depth":824,"text":2487,"children":3845},[3846,3847],{"id":2491,"depth":847,"text":2492},{"id":2763,"depth":847,"text":2764},{"id":3670,"depth":824,"text":3671},{"id":3737,"depth":824,"text":3738},"Create and manage spacing design tokens with CSS variables for consistent layout spacing, padding, margins, and gaps across your application.",null,{},{"title":229,"icon":232},{"title":684,"description":3850},"DfwOJU68CTjrI3eNRL7qbp5oTu0NNkeftk3K-I-WzA4",[3857,3859],{"title":225,"path":226,"stem":227,"description":3858,"icon":35,"children":-1},"Create modular scale systems for typography and spacing using mathematical ratios based on musical intervals and the golden ratio.",{"title":234,"path":235,"stem":236,"description":3860,"icon":237,"children":-1},"Create and manage typography design tokens with CSS variables for consistent text styling across your application.",1781596324129]