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