[{"data":1,"prerenderedAt":4305},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-scales":682,"-docs-theme-design-tokens-scales-surround":4300},{"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":4293,"extension":4294,"links":4295,"meta":4296,"navigation":4297,"path":226,"seo":4298,"stem":227,"__hash__":4299},"docs_theme\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002F10.scales.md","Scales Design Tokens",{"type":686,"value":687,"toc":4277},"minimark",[688,721,725,729,733,736,764,769,779,1172,1175,1186,1204,1209,1212,1480,1509,1517,1522,1528,1818,1834,1837,1842,1848,1856,2540,2545,2560,2575,2579,2583,2586,3181,3187,3191,3194,3917,3921,3924,4051,4055,4093,4099,4103,4273],[689,690,691,695,696,700,701,704,705,709,710,713,714,700,717,720],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Design Tokens Preset:"," ",[697,698,699],"code",{},"useScaleDesignTokens"," and ",[697,702,703],{},"useScalePowersDesignTokens"," are included in the ",[706,707,708],"a",{"href":171},"Design Tokens Preset"," (",[697,711,712],{},"useDesignTokensPreset",") and you can configure them through the preset's ",[697,715,716],{},"scale",[697,718,719],{},"scalePowers"," options. For most projects, applying them via the preset is the recommended approach.",[722,723,78],"h2",{"id":724},"overview",[726,727,728],"p",{},"The scale composables help you create harmonious, proportional design systems using modular scales. They generate scale variables based on mathematical ratios and powers, enabling consistent sizing relationships across typography, spacing, and other design elements.",[722,730,732],{"id":731},"why-use-scale-composables","Why use scale composables?",[726,734,735],{},"Scale composables help you:",[737,738,739,746,752,758],"ul",{},[740,741,742,745],"li",{},[692,743,744],{},"Create harmonious proportions",": Use time-tested ratios from music theory and mathematics for visually pleasing designs.",[740,747,748,751],{},[692,749,750],{},"Maintain consistency",": Apply the same scale ratio across all sizing decisions for a cohesive design system.",[740,753,754,757],{},[692,755,756],{},"Scale systematically",": Generate size variations using powers of your base scale for predictable growth.",[740,759,760,763],{},[692,761,762],{},"Simplify sizing decisions",": Replace arbitrary values with a systematic approach to sizing.",[722,765,767],{"id":766},"usescaledesigntokens",[697,768,699],{},[726,770,771,772,775,776,778],{},"The ",[697,773,774],{},"useScaleDesignTokens()"," function creates a set of predefined scale ratio variables based on musical intervals and the golden ratio. It also creates a default ",[697,777,716],{}," variable that references one of the predefined scales.",[780,781,782,1031],"tabs",{},[783,784,786],"tabs-item",{"icon":785,"label":290},"i-lucide-code",[787,788,794],"pre",{"className":789,"code":790,"filename":791,"language":792,"meta":793,"style":793},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    scaleMinorSecond,      \u002F\u002F 1.067\n    scaleMajorSecond,      \u002F\u002F 1.125\n    scaleMinorThird,       \u002F\u002F 1.2\n    scaleMajorThird,       \u002F\u002F 1.25\n    scalePerfectFourth,    \u002F\u002F 1.333\n    scaleAugmentedFourth,  \u002F\u002F 1.414\n    scalePerfectFifth,     \u002F\u002F 1.5\n    scaleGolden,           \u002F\u002F 1.618\n    scale,                 \u002F\u002F References minor-third by default\n} = useScaleDesignTokens(s);\n\nexport default s;\n","styleframe.config.ts","ts","",[697,795,796,832,855,861,882,887,895,908,919,930,941,952,963,974,985,996,1012,1017],{"__ignoreMap":793},[797,798,801,805,809,813,816,819,822,826,829],"span",{"class":799,"line":800},"line",1,[797,802,804],{"class":803},"s7zQu","import",[797,806,808],{"class":807},"sMK4o"," {",[797,810,812],{"class":811},"sTEyZ"," styleframe",[797,814,815],{"class":807}," }",[797,817,818],{"class":803}," from",[797,820,821],{"class":807}," '",[797,823,825],{"class":824},"sfazB","styleframe",[797,827,828],{"class":807},"'",[797,830,831],{"class":807},";\n",[797,833,835,837,839,842,844,846,848,851,853],{"class":799,"line":834},2,[797,836,804],{"class":803},[797,838,808],{"class":807},[797,840,841],{"class":811}," useScaleDesignTokens",[797,843,815],{"class":807},[797,845,818],{"class":803},[797,847,821],{"class":807},[797,849,850],{"class":824},"@styleframe\u002Ftheme",[797,852,828],{"class":807},[797,854,831],{"class":807},[797,856,858],{"class":799,"line":857},3,[797,859,860],{"emptyLinePlaceholder":223},"\n",[797,862,864,868,871,874,877,880],{"class":799,"line":863},4,[797,865,867],{"class":866},"spNyl","const",[797,869,870],{"class":811}," s ",[797,872,873],{"class":807},"=",[797,875,812],{"class":876},"s2Zo4",[797,878,879],{"class":811},"()",[797,881,831],{"class":807},[797,883,885],{"class":799,"line":884},5,[797,886,860],{"emptyLinePlaceholder":223},[797,888,890,892],{"class":799,"line":889},6,[797,891,867],{"class":866},[797,893,894],{"class":807}," {\n",[797,896,898,901,904],{"class":799,"line":897},7,[797,899,900],{"class":811},"    scaleMinorSecond",[797,902,903],{"class":807},",",[797,905,907],{"class":906},"sHwdD","      \u002F\u002F 1.067\n",[797,909,911,914,916],{"class":799,"line":910},8,[797,912,913],{"class":811},"    scaleMajorSecond",[797,915,903],{"class":807},[797,917,918],{"class":906},"      \u002F\u002F 1.125\n",[797,920,922,925,927],{"class":799,"line":921},9,[797,923,924],{"class":811},"    scaleMinorThird",[797,926,903],{"class":807},[797,928,929],{"class":906},"       \u002F\u002F 1.2\n",[797,931,933,936,938],{"class":799,"line":932},10,[797,934,935],{"class":811},"    scaleMajorThird",[797,937,903],{"class":807},[797,939,940],{"class":906},"       \u002F\u002F 1.25\n",[797,942,944,947,949],{"class":799,"line":943},11,[797,945,946],{"class":811},"    scalePerfectFourth",[797,948,903],{"class":807},[797,950,951],{"class":906},"    \u002F\u002F 1.333\n",[797,953,955,958,960],{"class":799,"line":954},12,[797,956,957],{"class":811},"    scaleAugmentedFourth",[797,959,903],{"class":807},[797,961,962],{"class":906},"  \u002F\u002F 1.414\n",[797,964,966,969,971],{"class":799,"line":965},13,[797,967,968],{"class":811},"    scalePerfectFifth",[797,970,903],{"class":807},[797,972,973],{"class":906},"     \u002F\u002F 1.5\n",[797,975,977,980,982],{"class":799,"line":976},14,[797,978,979],{"class":811},"    scaleGolden",[797,981,903],{"class":807},[797,983,984],{"class":906},"           \u002F\u002F 1.618\n",[797,986,988,991,993],{"class":799,"line":987},15,[797,989,990],{"class":811},"    scale",[797,992,903],{"class":807},[797,994,995],{"class":906},"                 \u002F\u002F References minor-third by default\n",[797,997,999,1002,1005,1007,1010],{"class":799,"line":998},16,[797,1000,1001],{"class":807},"}",[797,1003,1004],{"class":807}," =",[797,1006,841],{"class":876},[797,1008,1009],{"class":811},"(s)",[797,1011,831],{"class":807},[797,1013,1015],{"class":799,"line":1014},17,[797,1016,860],{"emptyLinePlaceholder":223},[797,1018,1020,1023,1026,1029],{"class":799,"line":1019},18,[797,1021,1022],{"class":803},"export",[797,1024,1025],{"class":803}," default",[797,1027,1028],{"class":811}," s",[797,1030,831],{"class":807},[783,1032,1033],{"icon":154,"label":326},[787,1034,1039],{"className":1035,"code":1036,"filename":1037,"language":1038,"meta":793,"style":793},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --scale--minor-second: 1.067;\n    --scale--major-second: 1.125;\n    --scale--minor-third: 1.2;\n    --scale--major-third: 1.25;\n    --scale--perfect-fourth: 1.333;\n    --scale--augmented-fourth: 1.414;\n    --scale--perfect-fifth: 1.5;\n    --scale--golden: 1.618;\n    --scale: var(--scale--minor-third);\n}\n","styleframe\u002Findex.css","css",[697,1040,1041,1051,1064,1076,1088,1100,1112,1124,1136,1148,1167],{"__ignoreMap":793},[797,1042,1043,1046,1049],{"class":799,"line":800},[797,1044,1045],{"class":807},":",[797,1047,1048],{"class":866},"root",[797,1050,894],{"class":807},[797,1052,1053,1056,1058,1062],{"class":799,"line":834},[797,1054,1055],{"class":811},"    --scale--minor-second",[797,1057,1045],{"class":807},[797,1059,1061],{"class":1060},"sbssI"," 1.067",[797,1063,831],{"class":807},[797,1065,1066,1069,1071,1074],{"class":799,"line":857},[797,1067,1068],{"class":811},"    --scale--major-second",[797,1070,1045],{"class":807},[797,1072,1073],{"class":1060}," 1.125",[797,1075,831],{"class":807},[797,1077,1078,1081,1083,1086],{"class":799,"line":863},[797,1079,1080],{"class":811},"    --scale--minor-third",[797,1082,1045],{"class":807},[797,1084,1085],{"class":1060}," 1.2",[797,1087,831],{"class":807},[797,1089,1090,1093,1095,1098],{"class":799,"line":884},[797,1091,1092],{"class":811},"    --scale--major-third",[797,1094,1045],{"class":807},[797,1096,1097],{"class":1060}," 1.25",[797,1099,831],{"class":807},[797,1101,1102,1105,1107,1110],{"class":799,"line":889},[797,1103,1104],{"class":811},"    --scale--perfect-fourth",[797,1106,1045],{"class":807},[797,1108,1109],{"class":1060}," 1.333",[797,1111,831],{"class":807},[797,1113,1114,1117,1119,1122],{"class":799,"line":897},[797,1115,1116],{"class":811},"    --scale--augmented-fourth",[797,1118,1045],{"class":807},[797,1120,1121],{"class":1060}," 1.414",[797,1123,831],{"class":807},[797,1125,1126,1129,1131,1134],{"class":799,"line":910},[797,1127,1128],{"class":811},"    --scale--perfect-fifth",[797,1130,1045],{"class":807},[797,1132,1133],{"class":1060}," 1.5",[797,1135,831],{"class":807},[797,1137,1138,1141,1143,1146],{"class":799,"line":921},[797,1139,1140],{"class":811},"    --scale--golden",[797,1142,1045],{"class":807},[797,1144,1145],{"class":1060}," 1.618",[797,1147,831],{"class":807},[797,1149,1150,1153,1155,1158,1161,1164],{"class":799,"line":932},[797,1151,1152],{"class":811},"    --scale",[797,1154,1045],{"class":807},[797,1156,1157],{"class":876}," var",[797,1159,1160],{"class":807},"(",[797,1162,1163],{"class":811},"--scale--minor-third",[797,1165,1166],{"class":807},");\n",[797,1168,1169],{"class":799,"line":943},[797,1170,1171],{"class":807},"}\n",[726,1173,1174],{},"Each scale ratio is named after its musical interval or mathematical origin. These ratios have been used in design and architecture for centuries to create harmonious proportions.",[726,1176,771,1177,1179,1180,1182,1183,1185],{},[697,1178,716],{}," variable is a convenient reference to your chosen default scale. By default, it references ",[697,1181,1163],{},", but you can customize this by passing a second argument to ",[697,1184,774],{},".",[1187,1188,1189,1192,1193,700,1196,1199,1200,1203],"tip",{},[692,1190,1191],{},"Pro tip:"," The ",[692,1194,1195],{},"Perfect Fourth (1.333)",[692,1197,1198],{},"Major Third (1.25)"," are popular choices for web typography, offering a good balance between subtle and pronounced size differences. The ",[692,1201,1202],{},"Golden Ratio (1.618)"," creates more dramatic scaling, ideal for establishing clear visual hierarchy.",[1205,1206,1208],"h3",{"id":1207},"customizing-the-default-scale","Customizing the Default Scale",[726,1210,1211],{},"You can specify which scale should be the default by passing a second argument:",[780,1213,1214,1366],{},[783,1215,1216],{"icon":785,"label":290},[787,1217,1219],{"className":789,"code":1218,"filename":791,"language":792,"meta":793,"style":793},"import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens, useScalePowersDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Set Perfect Fourth as the default scale\nconst { scale } = useScaleDesignTokens(s, {\n    ...defaultScaleValues,\n    default: '@scale.perfect-fourth',\n});\n\nexport default s;\n",[697,1220,1221,1241,1266,1270,1284,1288,1293,1315,1326,1343,1352,1356],{"__ignoreMap":793},[797,1222,1223,1225,1227,1229,1231,1233,1235,1237,1239],{"class":799,"line":800},[797,1224,804],{"class":803},[797,1226,808],{"class":807},[797,1228,812],{"class":811},[797,1230,815],{"class":807},[797,1232,818],{"class":803},[797,1234,821],{"class":807},[797,1236,825],{"class":824},[797,1238,828],{"class":807},[797,1240,831],{"class":807},[797,1242,1243,1245,1247,1249,1251,1254,1256,1258,1260,1262,1264],{"class":799,"line":834},[797,1244,804],{"class":803},[797,1246,808],{"class":807},[797,1248,841],{"class":811},[797,1250,903],{"class":807},[797,1252,1253],{"class":811}," useScalePowersDesignTokens",[797,1255,815],{"class":807},[797,1257,818],{"class":803},[797,1259,821],{"class":807},[797,1261,850],{"class":824},[797,1263,828],{"class":807},[797,1265,831],{"class":807},[797,1267,1268],{"class":799,"line":857},[797,1269,860],{"emptyLinePlaceholder":223},[797,1271,1272,1274,1276,1278,1280,1282],{"class":799,"line":863},[797,1273,867],{"class":866},[797,1275,870],{"class":811},[797,1277,873],{"class":807},[797,1279,812],{"class":876},[797,1281,879],{"class":811},[797,1283,831],{"class":807},[797,1285,1286],{"class":799,"line":884},[797,1287,860],{"emptyLinePlaceholder":223},[797,1289,1290],{"class":799,"line":889},[797,1291,1292],{"class":906},"\u002F\u002F Set Perfect Fourth as the default scale\n",[797,1294,1295,1297,1299,1302,1304,1306,1308,1311,1313],{"class":799,"line":897},[797,1296,867],{"class":866},[797,1298,808],{"class":807},[797,1300,1301],{"class":811}," scale ",[797,1303,1001],{"class":807},[797,1305,1004],{"class":807},[797,1307,841],{"class":876},[797,1309,1310],{"class":811},"(s",[797,1312,903],{"class":807},[797,1314,894],{"class":807},[797,1316,1317,1320,1323],{"class":799,"line":910},[797,1318,1319],{"class":807},"    ...",[797,1321,1322],{"class":811},"defaultScaleValues",[797,1324,1325],{"class":807},",\n",[797,1327,1328,1332,1334,1336,1339,1341],{"class":799,"line":921},[797,1329,1331],{"class":1330},"swJcz","    default",[797,1333,1045],{"class":807},[797,1335,821],{"class":807},[797,1337,1338],{"class":824},"@scale.perfect-fourth",[797,1340,828],{"class":807},[797,1342,1325],{"class":807},[797,1344,1345,1347,1350],{"class":799,"line":932},[797,1346,1001],{"class":807},[797,1348,1349],{"class":811},")",[797,1351,831],{"class":807},[797,1353,1354],{"class":799,"line":943},[797,1355,860],{"emptyLinePlaceholder":223},[797,1357,1358,1360,1362,1364],{"class":799,"line":954},[797,1359,1022],{"class":803},[797,1361,1025],{"class":803},[797,1363,1028],{"class":811},[797,1365,831],{"class":807},[783,1367,1368],{"icon":154,"label":326},[787,1369,1371],{"className":1035,"code":1370,"filename":1037,"language":1038,"meta":793,"style":793},":root {\n    --scale--minor-second: 1.067;\n    --scale--major-second: 1.125;\n    --scale--minor-third: 1.2;\n    --scale--major-third: 1.25;\n    --scale--perfect-fourth: 1.333;\n    --scale--augmented-fourth: 1.414;\n    --scale--perfect-fifth: 1.5;\n    --scale--golden: 1.618;\n    --scale: var(--scale--perfect-fourth);\n}\n",[697,1372,1373,1381,1391,1401,1411,1421,1431,1441,1451,1461,1476],{"__ignoreMap":793},[797,1374,1375,1377,1379],{"class":799,"line":800},[797,1376,1045],{"class":807},[797,1378,1048],{"class":866},[797,1380,894],{"class":807},[797,1382,1383,1385,1387,1389],{"class":799,"line":834},[797,1384,1055],{"class":811},[797,1386,1045],{"class":807},[797,1388,1061],{"class":1060},[797,1390,831],{"class":807},[797,1392,1393,1395,1397,1399],{"class":799,"line":857},[797,1394,1068],{"class":811},[797,1396,1045],{"class":807},[797,1398,1073],{"class":1060},[797,1400,831],{"class":807},[797,1402,1403,1405,1407,1409],{"class":799,"line":863},[797,1404,1080],{"class":811},[797,1406,1045],{"class":807},[797,1408,1085],{"class":1060},[797,1410,831],{"class":807},[797,1412,1413,1415,1417,1419],{"class":799,"line":884},[797,1414,1092],{"class":811},[797,1416,1045],{"class":807},[797,1418,1097],{"class":1060},[797,1420,831],{"class":807},[797,1422,1423,1425,1427,1429],{"class":799,"line":889},[797,1424,1104],{"class":811},[797,1426,1045],{"class":807},[797,1428,1109],{"class":1060},[797,1430,831],{"class":807},[797,1432,1433,1435,1437,1439],{"class":799,"line":897},[797,1434,1116],{"class":811},[797,1436,1045],{"class":807},[797,1438,1121],{"class":1060},[797,1440,831],{"class":807},[797,1442,1443,1445,1447,1449],{"class":799,"line":910},[797,1444,1128],{"class":811},[797,1446,1045],{"class":807},[797,1448,1133],{"class":1060},[797,1450,831],{"class":807},[797,1452,1453,1455,1457,1459],{"class":799,"line":921},[797,1454,1140],{"class":811},[797,1456,1045],{"class":807},[797,1458,1145],{"class":1060},[797,1460,831],{"class":807},[797,1462,1463,1465,1467,1469,1471,1474],{"class":799,"line":932},[797,1464,1152],{"class":811},[797,1466,1045],{"class":807},[797,1468,1157],{"class":876},[797,1470,1160],{"class":807},[797,1472,1473],{"class":811},"--scale--perfect-fourth",[797,1475,1166],{"class":807},[797,1477,1478],{"class":799,"line":943},[797,1479,1171],{"class":807},[726,1481,1482,1483,1486,1487,1486,1490,1486,1493,1486,1496,1486,1499,1486,1502,1505,1506,1185],{},"Valid default scale values are: ",[697,1484,1485],{},"\"minor-second\"",", ",[697,1488,1489],{},"\"major-second\"",[697,1491,1492],{},"\"minor-third\"",[697,1494,1495],{},"\"major-third\"",[697,1497,1498],{},"\"perfect-fourth\"",[697,1500,1501],{},"\"augmented-fourth\"",[697,1503,1504],{},"\"perfect-fifth\"",", and ",[697,1507,1508],{},"\"golden\"",[1187,1510,1511,1513,1514,1516],{},[692,1512,1191],{}," Using the ",[697,1515,716],{}," variable makes it easy to change your entire design system's scale in one place. You can also override it at different breakpoints or for specific components.",[722,1518,1520],{"id":1519},"usescalepowersdesigntokens",[697,1521,703],{},[726,1523,771,1524,1527],{},[697,1525,1526],{},"useScalePowersDesignTokens()"," function generates size multipliers by raising a scale to different powers, creating a systematic sizing system.",[780,1529,1530,1725],{},[783,1531,1532],{"icon":785,"label":290},[787,1533,1535],{"className":789,"code":1534,"filename":791,"language":792,"meta":793,"style":793},"import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst { scalePerfectFourth } = useScaleDesignTokens(s);\n\n\u002F\u002F Create a sizing system from -3 to 6\nconst sizes = useScalePowersDesignTokens(s, scalePerfectFourth, [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6]);\n\nexport default s;\n",[697,1536,1537,1557,1577,1581,1595,1599,1618,1622,1627,1711,1715],{"__ignoreMap":793},[797,1538,1539,1541,1543,1545,1547,1549,1551,1553,1555],{"class":799,"line":800},[797,1540,804],{"class":803},[797,1542,808],{"class":807},[797,1544,812],{"class":811},[797,1546,815],{"class":807},[797,1548,818],{"class":803},[797,1550,821],{"class":807},[797,1552,825],{"class":824},[797,1554,828],{"class":807},[797,1556,831],{"class":807},[797,1558,1559,1561,1563,1565,1567,1569,1571,1573,1575],{"class":799,"line":834},[797,1560,804],{"class":803},[797,1562,808],{"class":807},[797,1564,841],{"class":811},[797,1566,815],{"class":807},[797,1568,818],{"class":803},[797,1570,821],{"class":807},[797,1572,850],{"class":824},[797,1574,828],{"class":807},[797,1576,831],{"class":807},[797,1578,1579],{"class":799,"line":857},[797,1580,860],{"emptyLinePlaceholder":223},[797,1582,1583,1585,1587,1589,1591,1593],{"class":799,"line":863},[797,1584,867],{"class":866},[797,1586,870],{"class":811},[797,1588,873],{"class":807},[797,1590,812],{"class":876},[797,1592,879],{"class":811},[797,1594,831],{"class":807},[797,1596,1597],{"class":799,"line":884},[797,1598,860],{"emptyLinePlaceholder":223},[797,1600,1601,1603,1605,1608,1610,1612,1614,1616],{"class":799,"line":889},[797,1602,867],{"class":866},[797,1604,808],{"class":807},[797,1606,1607],{"class":811}," scalePerfectFourth ",[797,1609,1001],{"class":807},[797,1611,1004],{"class":807},[797,1613,841],{"class":876},[797,1615,1009],{"class":811},[797,1617,831],{"class":807},[797,1619,1620],{"class":799,"line":897},[797,1621,860],{"emptyLinePlaceholder":223},[797,1623,1624],{"class":799,"line":910},[797,1625,1626],{"class":906},"\u002F\u002F Create a sizing system from -3 to 6\n",[797,1628,1629,1631,1634,1636,1638,1640,1642,1645,1647,1650,1653,1656,1658,1661,1664,1666,1668,1671,1673,1676,1678,1681,1683,1686,1688,1691,1693,1696,1698,1701,1703,1706,1709],{"class":799,"line":921},[797,1630,867],{"class":866},[797,1632,1633],{"class":811}," sizes ",[797,1635,873],{"class":807},[797,1637,1253],{"class":876},[797,1639,1310],{"class":811},[797,1641,903],{"class":807},[797,1643,1644],{"class":811}," scalePerfectFourth",[797,1646,903],{"class":807},[797,1648,1649],{"class":811}," [",[797,1651,1652],{"class":807},"-",[797,1654,1655],{"class":1060},"3",[797,1657,903],{"class":807},[797,1659,1660],{"class":807}," -",[797,1662,1663],{"class":1060},"2",[797,1665,903],{"class":807},[797,1667,1660],{"class":807},[797,1669,1670],{"class":1060},"1",[797,1672,903],{"class":807},[797,1674,1675],{"class":1060}," 0",[797,1677,903],{"class":807},[797,1679,1680],{"class":1060}," 1",[797,1682,903],{"class":807},[797,1684,1685],{"class":1060}," 2",[797,1687,903],{"class":807},[797,1689,1690],{"class":1060}," 3",[797,1692,903],{"class":807},[797,1694,1695],{"class":1060}," 4",[797,1697,903],{"class":807},[797,1699,1700],{"class":1060}," 5",[797,1702,903],{"class":807},[797,1704,1705],{"class":1060}," 6",[797,1707,1708],{"class":811},"])",[797,1710,831],{"class":807},[797,1712,1713],{"class":799,"line":932},[797,1714,860],{"emptyLinePlaceholder":223},[797,1716,1717,1719,1721,1723],{"class":799,"line":943},[797,1718,1022],{"class":803},[797,1720,1025],{"class":803},[797,1722,1028],{"class":811},[797,1724,831],{"class":807},[783,1726,1727],{"icon":154,"label":326},[787,1728,1730],{"className":1035,"code":1729,"filename":1037,"language":1038,"meta":793,"style":793},":root {\n    --scale--perfect-fourth: 1.333;\n}\n\n\u002F* Generated calculations:\n   Power -3: 1 \u002F 1.333 \u002F 1.333 \u002F 1.333 ≈ 0.422\n   Power -2: 1 \u002F 1.333 \u002F 1.333 ≈ 0.563\n   Power -1: 1 \u002F 1.333 ≈ 0.750\n   Power 0:  1 (base size)\n   Power 1:  1.333\n   Power 2:  1.333 * 1.333 ≈ 1.777\n   Power 3:  1.333 * 1.333 * 1.333 ≈ 2.369\n   Power 4:  1.333 * 1.333 * 1.333 * 1.333 ≈ 3.157\n   Power 5:  1.333 * 1.333 * 1.333 * 1.333 * 1.333 ≈ 4.209\n   Power 6:  1.333 * 1.333 * 1.333 * 1.333 * 1.333 * 1.333 ≈ 5.610\n*\u002F\n",[697,1731,1732,1740,1750,1754,1758,1763,1768,1773,1778,1783,1788,1793,1798,1803,1808,1813],{"__ignoreMap":793},[797,1733,1734,1736,1738],{"class":799,"line":800},[797,1735,1045],{"class":807},[797,1737,1048],{"class":866},[797,1739,894],{"class":807},[797,1741,1742,1744,1746,1748],{"class":799,"line":834},[797,1743,1104],{"class":811},[797,1745,1045],{"class":807},[797,1747,1109],{"class":1060},[797,1749,831],{"class":807},[797,1751,1752],{"class":799,"line":857},[797,1753,1171],{"class":807},[797,1755,1756],{"class":799,"line":863},[797,1757,860],{"emptyLinePlaceholder":223},[797,1759,1760],{"class":799,"line":884},[797,1761,1762],{"class":906},"\u002F* Generated calculations:\n",[797,1764,1765],{"class":799,"line":889},[797,1766,1767],{"class":906},"   Power -3: 1 \u002F 1.333 \u002F 1.333 \u002F 1.333 ≈ 0.422\n",[797,1769,1770],{"class":799,"line":897},[797,1771,1772],{"class":906},"   Power -2: 1 \u002F 1.333 \u002F 1.333 ≈ 0.563\n",[797,1774,1775],{"class":799,"line":910},[797,1776,1777],{"class":906},"   Power -1: 1 \u002F 1.333 ≈ 0.750\n",[797,1779,1780],{"class":799,"line":921},[797,1781,1782],{"class":906},"   Power 0:  1 (base size)\n",[797,1784,1785],{"class":799,"line":932},[797,1786,1787],{"class":906},"   Power 1:  1.333\n",[797,1789,1790],{"class":799,"line":943},[797,1791,1792],{"class":906},"   Power 2:  1.333 * 1.333 ≈ 1.777\n",[797,1794,1795],{"class":799,"line":954},[797,1796,1797],{"class":906},"   Power 3:  1.333 * 1.333 * 1.333 ≈ 2.369\n",[797,1799,1800],{"class":799,"line":965},[797,1801,1802],{"class":906},"   Power 4:  1.333 * 1.333 * 1.333 * 1.333 ≈ 3.157\n",[797,1804,1805],{"class":799,"line":976},[797,1806,1807],{"class":906},"   Power 5:  1.333 * 1.333 * 1.333 * 1.333 * 1.333 ≈ 4.209\n",[797,1809,1810],{"class":799,"line":987},[797,1811,1812],{"class":906},"   Power 6:  1.333 * 1.333 * 1.333 * 1.333 * 1.333 * 1.333 ≈ 5.610\n",[797,1814,1815],{"class":799,"line":998},[797,1816,1817],{"class":906},"*\u002F\n",[689,1819,1820,1823,1824,1826,1827,1833],{},[692,1821,1822],{},"Good to know:"," While ",[697,1825,1526],{}," generates the multipliers, you'll typically want to use them with ",[706,1828,1830],{"href":1829},"#usemultiplierdesigntokens",[697,1831,1832],{},"useMultiplierDesignTokens()"," to create properly named variables for your design system.",[726,1835,1836],{},"Positive powers multiply the scale (making things larger), while negative powers divide it (making things smaller). This creates a harmonious progression of sizes both above and below your base size.",[1187,1838,1839,1841],{},[692,1840,1191],{}," Most design systems use a range from -2 to 5 or -3 to 6, providing enough variation for everything from small captions to large headings without excessive options.",[722,1843,1845],{"id":1844},"usemultiplierdesigntokens",[697,1846,1847],{},"useMultiplierDesignTokens",[726,1849,771,1850,1852,1853,1855],{},[697,1851,1832],{}," function creates a set of variables by multiplying a base variable by different multipliers. This is perfect for combining with ",[697,1854,1526],{}," to create complete size scales.",[780,1857,1858,2260],{},[783,1859,1860],{"icon":785,"label":290},[787,1861,1863],{"className":789,"code":1862,"filename":791,"language":792,"meta":793,"style":793},"import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens, useScalePowersDesignTokens, useMultiplierDesignTokens, useFontSizeDesignTokens, defaultScalePowerValues } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst { scale } = useScaleDesignTokens(s);\nconst { fontSize } = useFontSizeDesignTokens(s, { default: '1rem' });\n\n\u002F\u002F Generate scale powers\nconst scalePowers = useScalePowersDesignTokens(s, scale);\n\n\u002F\u002F Create font size variables using the base fontSize and scale powers\nconst {\n    fontSizeXs,  \u002F\u002F Variable\u003C'font-size--xs'>\n    fontSizeSm,  \u002F\u002F Variable\u003C'font-size--sm'>\n    fontSizeMd,  \u002F\u002F Variable\u003C'font-size--md'>\n    fontSizeLg,  \u002F\u002F Variable\u003C'font-size--lg'>\n    fontSizeXl,  \u002F\u002F Variable\u003C'font-size--xl'>\n    fontSize2xl, \u002F\u002F Variable\u003C'font-size--2xl'>\n} = useMultiplierDesignTokens(s, fontSize, {\n    xs: scalePowers[-2],\n    sm: scalePowers[-1],\n    md: scalePowers[0],\n    lg: scalePowers[1],\n    xl: scalePowers[2],\n    '2xl': scalePowers[3],\n});\n\nexport default s;\n",[697,1864,1865,1885,1924,1928,1942,1946,1964,2002,2006,2011,2031,2035,2040,2046,2056,2066,2076,2086,2096,2107,2127,2147,2165,2182,2198,2214,2235,2244,2249],{"__ignoreMap":793},[797,1866,1867,1869,1871,1873,1875,1877,1879,1881,1883],{"class":799,"line":800},[797,1868,804],{"class":803},[797,1870,808],{"class":807},[797,1872,812],{"class":811},[797,1874,815],{"class":807},[797,1876,818],{"class":803},[797,1878,821],{"class":807},[797,1880,825],{"class":824},[797,1882,828],{"class":807},[797,1884,831],{"class":807},[797,1886,1887,1889,1891,1893,1895,1897,1899,1902,1904,1907,1909,1912,1914,1916,1918,1920,1922],{"class":799,"line":834},[797,1888,804],{"class":803},[797,1890,808],{"class":807},[797,1892,841],{"class":811},[797,1894,903],{"class":807},[797,1896,1253],{"class":811},[797,1898,903],{"class":807},[797,1900,1901],{"class":811}," useMultiplierDesignTokens",[797,1903,903],{"class":807},[797,1905,1906],{"class":811}," useFontSizeDesignTokens",[797,1908,903],{"class":807},[797,1910,1911],{"class":811}," defaultScalePowerValues",[797,1913,815],{"class":807},[797,1915,818],{"class":803},[797,1917,821],{"class":807},[797,1919,850],{"class":824},[797,1921,828],{"class":807},[797,1923,831],{"class":807},[797,1925,1926],{"class":799,"line":857},[797,1927,860],{"emptyLinePlaceholder":223},[797,1929,1930,1932,1934,1936,1938,1940],{"class":799,"line":863},[797,1931,867],{"class":866},[797,1933,870],{"class":811},[797,1935,873],{"class":807},[797,1937,812],{"class":876},[797,1939,879],{"class":811},[797,1941,831],{"class":807},[797,1943,1944],{"class":799,"line":884},[797,1945,860],{"emptyLinePlaceholder":223},[797,1947,1948,1950,1952,1954,1956,1958,1960,1962],{"class":799,"line":889},[797,1949,867],{"class":866},[797,1951,808],{"class":807},[797,1953,1301],{"class":811},[797,1955,1001],{"class":807},[797,1957,1004],{"class":807},[797,1959,841],{"class":876},[797,1961,1009],{"class":811},[797,1963,831],{"class":807},[797,1965,1966,1968,1970,1973,1975,1977,1979,1981,1983,1985,1987,1989,1991,1994,1996,1998,2000],{"class":799,"line":897},[797,1967,867],{"class":866},[797,1969,808],{"class":807},[797,1971,1972],{"class":811}," fontSize ",[797,1974,1001],{"class":807},[797,1976,1004],{"class":807},[797,1978,1906],{"class":876},[797,1980,1310],{"class":811},[797,1982,903],{"class":807},[797,1984,808],{"class":807},[797,1986,1025],{"class":1330},[797,1988,1045],{"class":807},[797,1990,821],{"class":807},[797,1992,1993],{"class":824},"1rem",[797,1995,828],{"class":807},[797,1997,815],{"class":807},[797,1999,1349],{"class":811},[797,2001,831],{"class":807},[797,2003,2004],{"class":799,"line":910},[797,2005,860],{"emptyLinePlaceholder":223},[797,2007,2008],{"class":799,"line":921},[797,2009,2010],{"class":906},"\u002F\u002F Generate scale powers\n",[797,2012,2013,2015,2018,2020,2022,2024,2026,2029],{"class":799,"line":932},[797,2014,867],{"class":866},[797,2016,2017],{"class":811}," scalePowers ",[797,2019,873],{"class":807},[797,2021,1253],{"class":876},[797,2023,1310],{"class":811},[797,2025,903],{"class":807},[797,2027,2028],{"class":811}," scale)",[797,2030,831],{"class":807},[797,2032,2033],{"class":799,"line":943},[797,2034,860],{"emptyLinePlaceholder":223},[797,2036,2037],{"class":799,"line":954},[797,2038,2039],{"class":906},"\u002F\u002F Create font size variables using the base fontSize and scale powers\n",[797,2041,2042,2044],{"class":799,"line":965},[797,2043,867],{"class":866},[797,2045,894],{"class":807},[797,2047,2048,2051,2053],{"class":799,"line":976},[797,2049,2050],{"class":811},"    fontSizeXs",[797,2052,903],{"class":807},[797,2054,2055],{"class":906},"  \u002F\u002F Variable\u003C'font-size--xs'>\n",[797,2057,2058,2061,2063],{"class":799,"line":987},[797,2059,2060],{"class":811},"    fontSizeSm",[797,2062,903],{"class":807},[797,2064,2065],{"class":906},"  \u002F\u002F Variable\u003C'font-size--sm'>\n",[797,2067,2068,2071,2073],{"class":799,"line":998},[797,2069,2070],{"class":811},"    fontSizeMd",[797,2072,903],{"class":807},[797,2074,2075],{"class":906},"  \u002F\u002F Variable\u003C'font-size--md'>\n",[797,2077,2078,2081,2083],{"class":799,"line":1014},[797,2079,2080],{"class":811},"    fontSizeLg",[797,2082,903],{"class":807},[797,2084,2085],{"class":906},"  \u002F\u002F Variable\u003C'font-size--lg'>\n",[797,2087,2088,2091,2093],{"class":799,"line":1019},[797,2089,2090],{"class":811},"    fontSizeXl",[797,2092,903],{"class":807},[797,2094,2095],{"class":906},"  \u002F\u002F Variable\u003C'font-size--xl'>\n",[797,2097,2099,2102,2104],{"class":799,"line":2098},19,[797,2100,2101],{"class":811},"    fontSize2xl",[797,2103,903],{"class":807},[797,2105,2106],{"class":906}," \u002F\u002F Variable\u003C'font-size--2xl'>\n",[797,2108,2110,2112,2114,2116,2118,2120,2123,2125],{"class":799,"line":2109},20,[797,2111,1001],{"class":807},[797,2113,1004],{"class":807},[797,2115,1901],{"class":876},[797,2117,1310],{"class":811},[797,2119,903],{"class":807},[797,2121,2122],{"class":811}," fontSize",[797,2124,903],{"class":807},[797,2126,894],{"class":807},[797,2128,2130,2133,2135,2138,2140,2142,2145],{"class":799,"line":2129},21,[797,2131,2132],{"class":1330},"    xs",[797,2134,1045],{"class":807},[797,2136,2137],{"class":811}," scalePowers[",[797,2139,1652],{"class":807},[797,2141,1663],{"class":1060},[797,2143,2144],{"class":811},"]",[797,2146,1325],{"class":807},[797,2148,2150,2153,2155,2157,2159,2161,2163],{"class":799,"line":2149},22,[797,2151,2152],{"class":1330},"    sm",[797,2154,1045],{"class":807},[797,2156,2137],{"class":811},[797,2158,1652],{"class":807},[797,2160,1670],{"class":1060},[797,2162,2144],{"class":811},[797,2164,1325],{"class":807},[797,2166,2168,2171,2173,2175,2178,2180],{"class":799,"line":2167},23,[797,2169,2170],{"class":1330},"    md",[797,2172,1045],{"class":807},[797,2174,2137],{"class":811},[797,2176,2177],{"class":1060},"0",[797,2179,2144],{"class":811},[797,2181,1325],{"class":807},[797,2183,2185,2188,2190,2192,2194,2196],{"class":799,"line":2184},24,[797,2186,2187],{"class":1330},"    lg",[797,2189,1045],{"class":807},[797,2191,2137],{"class":811},[797,2193,1670],{"class":1060},[797,2195,2144],{"class":811},[797,2197,1325],{"class":807},[797,2199,2201,2204,2206,2208,2210,2212],{"class":799,"line":2200},25,[797,2202,2203],{"class":1330},"    xl",[797,2205,1045],{"class":807},[797,2207,2137],{"class":811},[797,2209,1663],{"class":1060},[797,2211,2144],{"class":811},[797,2213,1325],{"class":807},[797,2215,2217,2220,2223,2225,2227,2229,2231,2233],{"class":799,"line":2216},26,[797,2218,2219],{"class":807},"    '",[797,2221,2222],{"class":1330},"2xl",[797,2224,828],{"class":807},[797,2226,1045],{"class":807},[797,2228,2137],{"class":811},[797,2230,1655],{"class":1060},[797,2232,2144],{"class":811},[797,2234,1325],{"class":807},[797,2236,2238,2240,2242],{"class":799,"line":2237},27,[797,2239,1001],{"class":807},[797,2241,1349],{"class":811},[797,2243,831],{"class":807},[797,2245,2247],{"class":799,"line":2246},28,[797,2248,860],{"emptyLinePlaceholder":223},[797,2250,2252,2254,2256,2258],{"class":799,"line":2251},29,[797,2253,1022],{"class":803},[797,2255,1025],{"class":803},[797,2257,1028],{"class":811},[797,2259,831],{"class":807},[783,2261,2262],{"icon":154,"label":326},[787,2263,2265],{"className":1035,"code":2264,"filename":1037,"language":1038,"meta":793,"style":793},":root {\n    --scale--perfect-fourth: 1.333;\n    --scale: var(--scale--perfect-fourth);\n    --font-size: 1rem;\n    --font-size--xs: calc(var(--font-size) * 1 \u002F var(--scale) \u002F var(--scale));\n    --font-size--sm: calc(var(--font-size) * 1 \u002F var(--scale));\n    --font-size--md: calc(var(--font-size) * 1);\n    --font-size--lg: calc(var(--font-size) * var(--scale));\n    --font-size--xl: calc(var(--font-size) * var(--scale) * var(--scale));\n    --font-size--2xl: calc(var(--font-size) * var(--scale) * var(--scale) * var(--scale));\n}\n",[697,2266,2267,2275,2285,2299,2311,2361,2394,2419,2448,2487,2536],{"__ignoreMap":793},[797,2268,2269,2271,2273],{"class":799,"line":800},[797,2270,1045],{"class":807},[797,2272,1048],{"class":866},[797,2274,894],{"class":807},[797,2276,2277,2279,2281,2283],{"class":799,"line":834},[797,2278,1104],{"class":811},[797,2280,1045],{"class":807},[797,2282,1109],{"class":1060},[797,2284,831],{"class":807},[797,2286,2287,2289,2291,2293,2295,2297],{"class":799,"line":857},[797,2288,1152],{"class":811},[797,2290,1045],{"class":807},[797,2292,1157],{"class":876},[797,2294,1160],{"class":807},[797,2296,1473],{"class":811},[797,2298,1166],{"class":807},[797,2300,2301,2304,2306,2309],{"class":799,"line":863},[797,2302,2303],{"class":811},"    --font-size",[797,2305,1045],{"class":807},[797,2307,2308],{"class":1060}," 1rem",[797,2310,831],{"class":807},[797,2312,2313,2316,2318,2321,2323,2326,2328,2331,2333,2336,2338,2341,2343,2345,2348,2350,2352,2354,2356,2358],{"class":799,"line":884},[797,2314,2315],{"class":811},"    --font-size--xs",[797,2317,1045],{"class":807},[797,2319,2320],{"class":876}," calc",[797,2322,1160],{"class":807},[797,2324,2325],{"class":876},"var",[797,2327,1160],{"class":807},[797,2329,2330],{"class":811},"--font-size",[797,2332,1349],{"class":807},[797,2334,2335],{"class":807}," *",[797,2337,1680],{"class":1060},[797,2339,2340],{"class":807}," \u002F",[797,2342,1157],{"class":876},[797,2344,1160],{"class":807},[797,2346,2347],{"class":811},"--scale",[797,2349,1349],{"class":807},[797,2351,2340],{"class":807},[797,2353,1157],{"class":876},[797,2355,1160],{"class":807},[797,2357,2347],{"class":811},[797,2359,2360],{"class":807},"));\n",[797,2362,2363,2366,2368,2370,2372,2374,2376,2378,2380,2382,2384,2386,2388,2390,2392],{"class":799,"line":889},[797,2364,2365],{"class":811},"    --font-size--sm",[797,2367,1045],{"class":807},[797,2369,2320],{"class":876},[797,2371,1160],{"class":807},[797,2373,2325],{"class":876},[797,2375,1160],{"class":807},[797,2377,2330],{"class":811},[797,2379,1349],{"class":807},[797,2381,2335],{"class":807},[797,2383,1680],{"class":1060},[797,2385,2340],{"class":807},[797,2387,1157],{"class":876},[797,2389,1160],{"class":807},[797,2391,2347],{"class":811},[797,2393,2360],{"class":807},[797,2395,2396,2399,2401,2403,2405,2407,2409,2411,2413,2415,2417],{"class":799,"line":897},[797,2397,2398],{"class":811},"    --font-size--md",[797,2400,1045],{"class":807},[797,2402,2320],{"class":876},[797,2404,1160],{"class":807},[797,2406,2325],{"class":876},[797,2408,1160],{"class":807},[797,2410,2330],{"class":811},[797,2412,1349],{"class":807},[797,2414,2335],{"class":807},[797,2416,1680],{"class":1060},[797,2418,1166],{"class":807},[797,2420,2421,2424,2426,2428,2430,2432,2434,2436,2438,2440,2442,2444,2446],{"class":799,"line":910},[797,2422,2423],{"class":811},"    --font-size--lg",[797,2425,1045],{"class":807},[797,2427,2320],{"class":876},[797,2429,1160],{"class":807},[797,2431,2325],{"class":876},[797,2433,1160],{"class":807},[797,2435,2330],{"class":811},[797,2437,1349],{"class":807},[797,2439,2335],{"class":807},[797,2441,1157],{"class":876},[797,2443,1160],{"class":807},[797,2445,2347],{"class":811},[797,2447,2360],{"class":807},[797,2449,2450,2453,2455,2457,2459,2461,2463,2465,2467,2469,2471,2473,2475,2477,2479,2481,2483,2485],{"class":799,"line":921},[797,2451,2452],{"class":811},"    --font-size--xl",[797,2454,1045],{"class":807},[797,2456,2320],{"class":876},[797,2458,1160],{"class":807},[797,2460,2325],{"class":876},[797,2462,1160],{"class":807},[797,2464,2330],{"class":811},[797,2466,1349],{"class":807},[797,2468,2335],{"class":807},[797,2470,1157],{"class":876},[797,2472,1160],{"class":807},[797,2474,2347],{"class":811},[797,2476,1349],{"class":807},[797,2478,2335],{"class":807},[797,2480,1157],{"class":876},[797,2482,1160],{"class":807},[797,2484,2347],{"class":811},[797,2486,2360],{"class":807},[797,2488,2489,2492,2494,2496,2498,2500,2502,2504,2506,2508,2510,2512,2514,2516,2518,2520,2522,2524,2526,2528,2530,2532,2534],{"class":799,"line":932},[797,2490,2491],{"class":811},"    --font-size--2xl",[797,2493,1045],{"class":807},[797,2495,2320],{"class":876},[797,2497,1160],{"class":807},[797,2499,2325],{"class":876},[797,2501,1160],{"class":807},[797,2503,2330],{"class":811},[797,2505,1349],{"class":807},[797,2507,2335],{"class":807},[797,2509,1157],{"class":876},[797,2511,1160],{"class":807},[797,2513,2347],{"class":811},[797,2515,1349],{"class":807},[797,2517,2335],{"class":807},[797,2519,1157],{"class":876},[797,2521,1160],{"class":807},[797,2523,2347],{"class":811},[797,2525,1349],{"class":807},[797,2527,2335],{"class":807},[797,2529,1157],{"class":876},[797,2531,1160],{"class":807},[797,2533,2347],{"class":811},[797,2535,2360],{"class":807},[797,2537,2538],{"class":799,"line":943},[797,2539,1171],{"class":807},[726,2541,771,2542,2544],{},[697,2543,1832],{}," function automatically:",[737,2546,2547,2550,2557],{},[740,2548,2549],{},"Creates properly named variables following the base variable's naming pattern",[740,2551,2552,2553,2556],{},"Generates ",[697,2554,2555],{},"calc()"," expressions that reference the base variable",[740,2558,2559],{},"Provides type-safe return values with correct variable names",[1187,2561,2562,2564,2565,2567,2568,2571,2572,2574],{},[692,2563,1191],{}," Using ",[697,2566,1832],{}," with scale powers keeps your design system flexible. Change the base ",[697,2569,2570],{},"fontSize"," or ",[697,2573,716],{}," variable, and all derived sizes update automatically throughout your design system.",[722,2576,2578],{"id":2577},"examples","Examples",[1205,2580,2582],{"id":2581},"typography-scale","Typography Scale",[726,2584,2585],{},"Here's how to create a complete typographic scale using a specific scale:",[780,2587,2588,2964],{},[783,2589,2590],{"icon":785,"label":290},[787,2591,2593],{"className":789,"code":2592,"filename":791,"language":792,"meta":793,"style":793},"import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens, useScalePowersDesignTokens, useMultiplierDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Set your preferred default scale\nconst { scale } = useScaleDesignTokens(s);\n\n\u002F\u002F Define base font size\nconst { fontSize } = useFontSizeDesignTokens(s, { default: '1rem' });\n\n\u002F\u002F Create typographic scale using the default scale variable\nconst scalePowers = useScalePowersDesignTokens(s, scale, [-2, -1, 0, 1, 2]);\n\n\u002F\u002F Create font size variables automatically\nconst {\n    fontSizeXs,\n    fontSizeSm,\n    fontSizeMd,\n    fontSizeLg,\n    fontSizeXl,\n} = useMultiplierDesignTokens(s, fontSize, {\n    xs: scalePowers[-2],    \u002F\u002F ~0.563rem\n    sm: scalePowers[-1],    \u002F\u002F ~0.750rem\n    md: scalePowers[0],     \u002F\u002F ~1.000rem\n    lg: scalePowers[1],     \u002F\u002F ~1.333rem\n    xl: scalePowers[2],     \u002F\u002F ~1.777rem\n});\n\nexport default s;\n",[697,2594,2595,2615,2643,2647,2661,2665,2670,2688,2692,2697,2733,2737,2742,2789,2793,2798,2804,2810,2816,2822,2828,2834,2852,2871,2890,2907,2924,2941,2949,2953],{"__ignoreMap":793},[797,2596,2597,2599,2601,2603,2605,2607,2609,2611,2613],{"class":799,"line":800},[797,2598,804],{"class":803},[797,2600,808],{"class":807},[797,2602,812],{"class":811},[797,2604,815],{"class":807},[797,2606,818],{"class":803},[797,2608,821],{"class":807},[797,2610,825],{"class":824},[797,2612,828],{"class":807},[797,2614,831],{"class":807},[797,2616,2617,2619,2621,2623,2625,2627,2629,2631,2633,2635,2637,2639,2641],{"class":799,"line":834},[797,2618,804],{"class":803},[797,2620,808],{"class":807},[797,2622,841],{"class":811},[797,2624,903],{"class":807},[797,2626,1253],{"class":811},[797,2628,903],{"class":807},[797,2630,1901],{"class":811},[797,2632,815],{"class":807},[797,2634,818],{"class":803},[797,2636,821],{"class":807},[797,2638,850],{"class":824},[797,2640,828],{"class":807},[797,2642,831],{"class":807},[797,2644,2645],{"class":799,"line":857},[797,2646,860],{"emptyLinePlaceholder":223},[797,2648,2649,2651,2653,2655,2657,2659],{"class":799,"line":863},[797,2650,867],{"class":866},[797,2652,870],{"class":811},[797,2654,873],{"class":807},[797,2656,812],{"class":876},[797,2658,879],{"class":811},[797,2660,831],{"class":807},[797,2662,2663],{"class":799,"line":884},[797,2664,860],{"emptyLinePlaceholder":223},[797,2666,2667],{"class":799,"line":889},[797,2668,2669],{"class":906},"\u002F\u002F Set your preferred default scale\n",[797,2671,2672,2674,2676,2678,2680,2682,2684,2686],{"class":799,"line":897},[797,2673,867],{"class":866},[797,2675,808],{"class":807},[797,2677,1301],{"class":811},[797,2679,1001],{"class":807},[797,2681,1004],{"class":807},[797,2683,841],{"class":876},[797,2685,1009],{"class":811},[797,2687,831],{"class":807},[797,2689,2690],{"class":799,"line":910},[797,2691,860],{"emptyLinePlaceholder":223},[797,2693,2694],{"class":799,"line":921},[797,2695,2696],{"class":906},"\u002F\u002F Define base font size\n",[797,2698,2699,2701,2703,2705,2707,2709,2711,2713,2715,2717,2719,2721,2723,2725,2727,2729,2731],{"class":799,"line":932},[797,2700,867],{"class":866},[797,2702,808],{"class":807},[797,2704,1972],{"class":811},[797,2706,1001],{"class":807},[797,2708,1004],{"class":807},[797,2710,1906],{"class":876},[797,2712,1310],{"class":811},[797,2714,903],{"class":807},[797,2716,808],{"class":807},[797,2718,1025],{"class":1330},[797,2720,1045],{"class":807},[797,2722,821],{"class":807},[797,2724,1993],{"class":824},[797,2726,828],{"class":807},[797,2728,815],{"class":807},[797,2730,1349],{"class":811},[797,2732,831],{"class":807},[797,2734,2735],{"class":799,"line":943},[797,2736,860],{"emptyLinePlaceholder":223},[797,2738,2739],{"class":799,"line":954},[797,2740,2741],{"class":906},"\u002F\u002F Create typographic scale using the default scale variable\n",[797,2743,2744,2746,2748,2750,2752,2754,2756,2759,2761,2763,2765,2767,2769,2771,2773,2775,2777,2779,2781,2783,2785,2787],{"class":799,"line":965},[797,2745,867],{"class":866},[797,2747,2017],{"class":811},[797,2749,873],{"class":807},[797,2751,1253],{"class":876},[797,2753,1310],{"class":811},[797,2755,903],{"class":807},[797,2757,2758],{"class":811}," scale",[797,2760,903],{"class":807},[797,2762,1649],{"class":811},[797,2764,1652],{"class":807},[797,2766,1663],{"class":1060},[797,2768,903],{"class":807},[797,2770,1660],{"class":807},[797,2772,1670],{"class":1060},[797,2774,903],{"class":807},[797,2776,1675],{"class":1060},[797,2778,903],{"class":807},[797,2780,1680],{"class":1060},[797,2782,903],{"class":807},[797,2784,1685],{"class":1060},[797,2786,1708],{"class":811},[797,2788,831],{"class":807},[797,2790,2791],{"class":799,"line":976},[797,2792,860],{"emptyLinePlaceholder":223},[797,2794,2795],{"class":799,"line":987},[797,2796,2797],{"class":906},"\u002F\u002F Create font size variables automatically\n",[797,2799,2800,2802],{"class":799,"line":998},[797,2801,867],{"class":866},[797,2803,894],{"class":807},[797,2805,2806,2808],{"class":799,"line":1014},[797,2807,2050],{"class":811},[797,2809,1325],{"class":807},[797,2811,2812,2814],{"class":799,"line":1019},[797,2813,2060],{"class":811},[797,2815,1325],{"class":807},[797,2817,2818,2820],{"class":799,"line":2098},[797,2819,2070],{"class":811},[797,2821,1325],{"class":807},[797,2823,2824,2826],{"class":799,"line":2109},[797,2825,2080],{"class":811},[797,2827,1325],{"class":807},[797,2829,2830,2832],{"class":799,"line":2129},[797,2831,2090],{"class":811},[797,2833,1325],{"class":807},[797,2835,2836,2838,2840,2842,2844,2846,2848,2850],{"class":799,"line":2149},[797,2837,1001],{"class":807},[797,2839,1004],{"class":807},[797,2841,1901],{"class":876},[797,2843,1310],{"class":811},[797,2845,903],{"class":807},[797,2847,2122],{"class":811},[797,2849,903],{"class":807},[797,2851,894],{"class":807},[797,2853,2854,2856,2858,2860,2862,2864,2866,2868],{"class":799,"line":2167},[797,2855,2132],{"class":1330},[797,2857,1045],{"class":807},[797,2859,2137],{"class":811},[797,2861,1652],{"class":807},[797,2863,1663],{"class":1060},[797,2865,2144],{"class":811},[797,2867,903],{"class":807},[797,2869,2870],{"class":906},"    \u002F\u002F ~0.563rem\n",[797,2872,2873,2875,2877,2879,2881,2883,2885,2887],{"class":799,"line":2184},[797,2874,2152],{"class":1330},[797,2876,1045],{"class":807},[797,2878,2137],{"class":811},[797,2880,1652],{"class":807},[797,2882,1670],{"class":1060},[797,2884,2144],{"class":811},[797,2886,903],{"class":807},[797,2888,2889],{"class":906},"    \u002F\u002F ~0.750rem\n",[797,2891,2892,2894,2896,2898,2900,2902,2904],{"class":799,"line":2200},[797,2893,2170],{"class":1330},[797,2895,1045],{"class":807},[797,2897,2137],{"class":811},[797,2899,2177],{"class":1060},[797,2901,2144],{"class":811},[797,2903,903],{"class":807},[797,2905,2906],{"class":906},"     \u002F\u002F ~1.000rem\n",[797,2908,2909,2911,2913,2915,2917,2919,2921],{"class":799,"line":2216},[797,2910,2187],{"class":1330},[797,2912,1045],{"class":807},[797,2914,2137],{"class":811},[797,2916,1670],{"class":1060},[797,2918,2144],{"class":811},[797,2920,903],{"class":807},[797,2922,2923],{"class":906},"     \u002F\u002F ~1.333rem\n",[797,2925,2926,2928,2930,2932,2934,2936,2938],{"class":799,"line":2237},[797,2927,2203],{"class":1330},[797,2929,1045],{"class":807},[797,2931,2137],{"class":811},[797,2933,1663],{"class":1060},[797,2935,2144],{"class":811},[797,2937,903],{"class":807},[797,2939,2940],{"class":906},"     \u002F\u002F ~1.777rem\n",[797,2942,2943,2945,2947],{"class":799,"line":2246},[797,2944,1001],{"class":807},[797,2946,1349],{"class":811},[797,2948,831],{"class":807},[797,2950,2951],{"class":799,"line":2251},[797,2952,860],{"emptyLinePlaceholder":223},[797,2954,2956,2958,2960,2962],{"class":799,"line":2955},30,[797,2957,1022],{"class":803},[797,2959,1025],{"class":803},[797,2961,1028],{"class":811},[797,2963,831],{"class":807},[783,2965,2966],{"icon":154,"label":326},[787,2967,2969],{"className":1035,"code":2968,"filename":1037,"language":1038,"meta":793,"style":793},":root {\n    --scale--minor-third: 1.2;\n    --scale: var(--scale--minor-third);\n    --font-size: 1rem;\n    --font-size--xs: calc(var(--font-size) * 1 \u002F var(--scale) \u002F var(--scale));\n    --font-size--sm: calc(var(--font-size) * 1 \u002F var(--scale));\n    --font-size--md: calc(var(--font-size) * 1);\n    --font-size--lg: calc(var(--font-size) * var(--scale));\n    --font-size--xl: calc(var(--font-size) * var(--scale) * var(--scale));\n}\n",[697,2970,2971,2979,2989,3003,3013,3055,3087,3111,3139,3177],{"__ignoreMap":793},[797,2972,2973,2975,2977],{"class":799,"line":800},[797,2974,1045],{"class":807},[797,2976,1048],{"class":866},[797,2978,894],{"class":807},[797,2980,2981,2983,2985,2987],{"class":799,"line":834},[797,2982,1080],{"class":811},[797,2984,1045],{"class":807},[797,2986,1085],{"class":1060},[797,2988,831],{"class":807},[797,2990,2991,2993,2995,2997,2999,3001],{"class":799,"line":857},[797,2992,1152],{"class":811},[797,2994,1045],{"class":807},[797,2996,1157],{"class":876},[797,2998,1160],{"class":807},[797,3000,1163],{"class":811},[797,3002,1166],{"class":807},[797,3004,3005,3007,3009,3011],{"class":799,"line":863},[797,3006,2303],{"class":811},[797,3008,1045],{"class":807},[797,3010,2308],{"class":1060},[797,3012,831],{"class":807},[797,3014,3015,3017,3019,3021,3023,3025,3027,3029,3031,3033,3035,3037,3039,3041,3043,3045,3047,3049,3051,3053],{"class":799,"line":884},[797,3016,2315],{"class":811},[797,3018,1045],{"class":807},[797,3020,2320],{"class":876},[797,3022,1160],{"class":807},[797,3024,2325],{"class":876},[797,3026,1160],{"class":807},[797,3028,2330],{"class":811},[797,3030,1349],{"class":807},[797,3032,2335],{"class":807},[797,3034,1680],{"class":1060},[797,3036,2340],{"class":807},[797,3038,1157],{"class":876},[797,3040,1160],{"class":807},[797,3042,2347],{"class":811},[797,3044,1349],{"class":807},[797,3046,2340],{"class":807},[797,3048,1157],{"class":876},[797,3050,1160],{"class":807},[797,3052,2347],{"class":811},[797,3054,2360],{"class":807},[797,3056,3057,3059,3061,3063,3065,3067,3069,3071,3073,3075,3077,3079,3081,3083,3085],{"class":799,"line":889},[797,3058,2365],{"class":811},[797,3060,1045],{"class":807},[797,3062,2320],{"class":876},[797,3064,1160],{"class":807},[797,3066,2325],{"class":876},[797,3068,1160],{"class":807},[797,3070,2330],{"class":811},[797,3072,1349],{"class":807},[797,3074,2335],{"class":807},[797,3076,1680],{"class":1060},[797,3078,2340],{"class":807},[797,3080,1157],{"class":876},[797,3082,1160],{"class":807},[797,3084,2347],{"class":811},[797,3086,2360],{"class":807},[797,3088,3089,3091,3093,3095,3097,3099,3101,3103,3105,3107,3109],{"class":799,"line":897},[797,3090,2398],{"class":811},[797,3092,1045],{"class":807},[797,3094,2320],{"class":876},[797,3096,1160],{"class":807},[797,3098,2325],{"class":876},[797,3100,1160],{"class":807},[797,3102,2330],{"class":811},[797,3104,1349],{"class":807},[797,3106,2335],{"class":807},[797,3108,1680],{"class":1060},[797,3110,1166],{"class":807},[797,3112,3113,3115,3117,3119,3121,3123,3125,3127,3129,3131,3133,3135,3137],{"class":799,"line":910},[797,3114,2423],{"class":811},[797,3116,1045],{"class":807},[797,3118,2320],{"class":876},[797,3120,1160],{"class":807},[797,3122,2325],{"class":876},[797,3124,1160],{"class":807},[797,3126,2330],{"class":811},[797,3128,1349],{"class":807},[797,3130,2335],{"class":807},[797,3132,1157],{"class":876},[797,3134,1160],{"class":807},[797,3136,2347],{"class":811},[797,3138,2360],{"class":807},[797,3140,3141,3143,3145,3147,3149,3151,3153,3155,3157,3159,3161,3163,3165,3167,3169,3171,3173,3175],{"class":799,"line":921},[797,3142,2452],{"class":811},[797,3144,1045],{"class":807},[797,3146,2320],{"class":876},[797,3148,1160],{"class":807},[797,3150,2325],{"class":876},[797,3152,1160],{"class":807},[797,3154,2330],{"class":811},[797,3156,1349],{"class":807},[797,3158,2335],{"class":807},[797,3160,1157],{"class":876},[797,3162,1160],{"class":807},[797,3164,2347],{"class":811},[797,3166,1349],{"class":807},[797,3168,2335],{"class":807},[797,3170,1157],{"class":876},[797,3172,1160],{"class":807},[797,3174,2347],{"class":811},[797,3176,2360],{"class":807},[797,3178,3179],{"class":799,"line":932},[797,3180,1171],{"class":807},[726,3182,3183,3184,3186],{},"Using the ",[697,3185,716],{}," variable means you can change your entire design system's proportions by overriding just one variable.",[1205,3188,3190],{"id":3189},"spacing-scale","Spacing Scale",[726,3192,3193],{},"Create a consistent spacing system using the same modular scale:",[780,3195,3196,3693],{},[783,3197,3198],{"icon":785,"label":290},[787,3199,3201],{"className":789,"code":3200,"filename":791,"language":792,"meta":793,"style":793},"import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens, useScalePowersDesignTokens, useMultiplierDesignTokens } 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\nconst scalePowers = useScalePowersDesignTokens(s, scale, [-3, -2, -1, 1, 2, 3, 4, 5]);\n\n\u002F\u002F Create spacing variables automatically\nconst {\n    spacing3xs,\n    spacing2xs,\n    spacingXs,\n    spacingMd,\n    spacingLg,\n    spacingXl,\n    spacing2xl,\n    spacing3xl,\n} = useMultiplierDesignTokens(s, spacing, {\n    '3xs': scalePowers[-3],  \u002F\u002F ~0.704rem\n    '2xs': scalePowers[-2],  \u002F\u002F ~0.790rem\n    xs: scalePowers[-1],     \u002F\u002F ~0.889rem\n    md: scalePowers[1],      \u002F\u002F ~1.125rem\n    lg: scalePowers[2],      \u002F\u002F ~1.266rem\n    xl: scalePowers[3],      \u002F\u002F ~1.424rem\n    '2xl': scalePowers[4],   \u002F\u002F ~1.602rem\n    '3xl': scalePowers[5],   \u002F\u002F ~1.802rem\n});\n\nexport default s;\n",[697,3202,3203,3223,3251,3255,3269,3273,3278,3296,3300,3305,3343,3347,3352,3412,3416,3421,3427,3434,3441,3448,3455,3462,3469,3476,3483,3502,3526,3550,3569,3586,3603,3621,3644,3668,3677,3682],{"__ignoreMap":793},[797,3204,3205,3207,3209,3211,3213,3215,3217,3219,3221],{"class":799,"line":800},[797,3206,804],{"class":803},[797,3208,808],{"class":807},[797,3210,812],{"class":811},[797,3212,815],{"class":807},[797,3214,818],{"class":803},[797,3216,821],{"class":807},[797,3218,825],{"class":824},[797,3220,828],{"class":807},[797,3222,831],{"class":807},[797,3224,3225,3227,3229,3231,3233,3235,3237,3239,3241,3243,3245,3247,3249],{"class":799,"line":834},[797,3226,804],{"class":803},[797,3228,808],{"class":807},[797,3230,841],{"class":811},[797,3232,903],{"class":807},[797,3234,1253],{"class":811},[797,3236,903],{"class":807},[797,3238,1901],{"class":811},[797,3240,815],{"class":807},[797,3242,818],{"class":803},[797,3244,821],{"class":807},[797,3246,850],{"class":824},[797,3248,828],{"class":807},[797,3250,831],{"class":807},[797,3252,3253],{"class":799,"line":857},[797,3254,860],{"emptyLinePlaceholder":223},[797,3256,3257,3259,3261,3263,3265,3267],{"class":799,"line":863},[797,3258,867],{"class":866},[797,3260,870],{"class":811},[797,3262,873],{"class":807},[797,3264,812],{"class":876},[797,3266,879],{"class":811},[797,3268,831],{"class":807},[797,3270,3271],{"class":799,"line":884},[797,3272,860],{"emptyLinePlaceholder":223},[797,3274,3275],{"class":799,"line":889},[797,3276,3277],{"class":906},"\u002F\u002F Use the Major Second scale (1.125) for subtle spacing differences\n",[797,3279,3280,3282,3284,3286,3288,3290,3292,3294],{"class":799,"line":897},[797,3281,867],{"class":866},[797,3283,808],{"class":807},[797,3285,1301],{"class":811},[797,3287,1001],{"class":807},[797,3289,1004],{"class":807},[797,3291,841],{"class":876},[797,3293,1009],{"class":811},[797,3295,831],{"class":807},[797,3297,3298],{"class":799,"line":910},[797,3299,860],{"emptyLinePlaceholder":223},[797,3301,3302],{"class":799,"line":921},[797,3303,3304],{"class":906},"\u002F\u002F Define base spacing unit\n",[797,3306,3307,3309,3311,3314,3316,3318,3321,3323,3325,3327,3329,3331,3333,3335,3337,3339,3341],{"class":799,"line":932},[797,3308,867],{"class":866},[797,3310,808],{"class":807},[797,3312,3313],{"class":811}," spacing ",[797,3315,1001],{"class":807},[797,3317,1004],{"class":807},[797,3319,3320],{"class":876}," useSpacingDesignTokens",[797,3322,1310],{"class":811},[797,3324,903],{"class":807},[797,3326,808],{"class":807},[797,3328,1025],{"class":1330},[797,3330,1045],{"class":807},[797,3332,821],{"class":807},[797,3334,1993],{"class":824},[797,3336,828],{"class":807},[797,3338,815],{"class":807},[797,3340,1349],{"class":811},[797,3342,831],{"class":807},[797,3344,3345],{"class":799,"line":943},[797,3346,860],{"emptyLinePlaceholder":223},[797,3348,3349],{"class":799,"line":954},[797,3350,3351],{"class":906},"\u002F\u002F Create spacing scale\n",[797,3353,3354,3356,3358,3360,3362,3364,3366,3368,3370,3372,3374,3376,3378,3380,3382,3384,3386,3388,3390,3392,3394,3396,3398,3400,3402,3404,3406,3408,3410],{"class":799,"line":965},[797,3355,867],{"class":866},[797,3357,2017],{"class":811},[797,3359,873],{"class":807},[797,3361,1253],{"class":876},[797,3363,1310],{"class":811},[797,3365,903],{"class":807},[797,3367,2758],{"class":811},[797,3369,903],{"class":807},[797,3371,1649],{"class":811},[797,3373,1652],{"class":807},[797,3375,1655],{"class":1060},[797,3377,903],{"class":807},[797,3379,1660],{"class":807},[797,3381,1663],{"class":1060},[797,3383,903],{"class":807},[797,3385,1660],{"class":807},[797,3387,1670],{"class":1060},[797,3389,903],{"class":807},[797,3391,1680],{"class":1060},[797,3393,903],{"class":807},[797,3395,1685],{"class":1060},[797,3397,903],{"class":807},[797,3399,1690],{"class":1060},[797,3401,903],{"class":807},[797,3403,1695],{"class":1060},[797,3405,903],{"class":807},[797,3407,1700],{"class":1060},[797,3409,1708],{"class":811},[797,3411,831],{"class":807},[797,3413,3414],{"class":799,"line":976},[797,3415,860],{"emptyLinePlaceholder":223},[797,3417,3418],{"class":799,"line":987},[797,3419,3420],{"class":906},"\u002F\u002F Create spacing variables automatically\n",[797,3422,3423,3425],{"class":799,"line":998},[797,3424,867],{"class":866},[797,3426,894],{"class":807},[797,3428,3429,3432],{"class":799,"line":1014},[797,3430,3431],{"class":811},"    spacing3xs",[797,3433,1325],{"class":807},[797,3435,3436,3439],{"class":799,"line":1019},[797,3437,3438],{"class":811},"    spacing2xs",[797,3440,1325],{"class":807},[797,3442,3443,3446],{"class":799,"line":2098},[797,3444,3445],{"class":811},"    spacingXs",[797,3447,1325],{"class":807},[797,3449,3450,3453],{"class":799,"line":2109},[797,3451,3452],{"class":811},"    spacingMd",[797,3454,1325],{"class":807},[797,3456,3457,3460],{"class":799,"line":2129},[797,3458,3459],{"class":811},"    spacingLg",[797,3461,1325],{"class":807},[797,3463,3464,3467],{"class":799,"line":2149},[797,3465,3466],{"class":811},"    spacingXl",[797,3468,1325],{"class":807},[797,3470,3471,3474],{"class":799,"line":2167},[797,3472,3473],{"class":811},"    spacing2xl",[797,3475,1325],{"class":807},[797,3477,3478,3481],{"class":799,"line":2184},[797,3479,3480],{"class":811},"    spacing3xl",[797,3482,1325],{"class":807},[797,3484,3485,3487,3489,3491,3493,3495,3498,3500],{"class":799,"line":2200},[797,3486,1001],{"class":807},[797,3488,1004],{"class":807},[797,3490,1901],{"class":876},[797,3492,1310],{"class":811},[797,3494,903],{"class":807},[797,3496,3497],{"class":811}," spacing",[797,3499,903],{"class":807},[797,3501,894],{"class":807},[797,3503,3504,3506,3509,3511,3513,3515,3517,3519,3521,3523],{"class":799,"line":2216},[797,3505,2219],{"class":807},[797,3507,3508],{"class":1330},"3xs",[797,3510,828],{"class":807},[797,3512,1045],{"class":807},[797,3514,2137],{"class":811},[797,3516,1652],{"class":807},[797,3518,1655],{"class":1060},[797,3520,2144],{"class":811},[797,3522,903],{"class":807},[797,3524,3525],{"class":906},"  \u002F\u002F ~0.704rem\n",[797,3527,3528,3530,3533,3535,3537,3539,3541,3543,3545,3547],{"class":799,"line":2237},[797,3529,2219],{"class":807},[797,3531,3532],{"class":1330},"2xs",[797,3534,828],{"class":807},[797,3536,1045],{"class":807},[797,3538,2137],{"class":811},[797,3540,1652],{"class":807},[797,3542,1663],{"class":1060},[797,3544,2144],{"class":811},[797,3546,903],{"class":807},[797,3548,3549],{"class":906},"  \u002F\u002F ~0.790rem\n",[797,3551,3552,3554,3556,3558,3560,3562,3564,3566],{"class":799,"line":2246},[797,3553,2132],{"class":1330},[797,3555,1045],{"class":807},[797,3557,2137],{"class":811},[797,3559,1652],{"class":807},[797,3561,1670],{"class":1060},[797,3563,2144],{"class":811},[797,3565,903],{"class":807},[797,3567,3568],{"class":906},"     \u002F\u002F ~0.889rem\n",[797,3570,3571,3573,3575,3577,3579,3581,3583],{"class":799,"line":2251},[797,3572,2170],{"class":1330},[797,3574,1045],{"class":807},[797,3576,2137],{"class":811},[797,3578,1670],{"class":1060},[797,3580,2144],{"class":811},[797,3582,903],{"class":807},[797,3584,3585],{"class":906},"      \u002F\u002F ~1.125rem\n",[797,3587,3588,3590,3592,3594,3596,3598,3600],{"class":799,"line":2955},[797,3589,2187],{"class":1330},[797,3591,1045],{"class":807},[797,3593,2137],{"class":811},[797,3595,1663],{"class":1060},[797,3597,2144],{"class":811},[797,3599,903],{"class":807},[797,3601,3602],{"class":906},"      \u002F\u002F ~1.266rem\n",[797,3604,3606,3608,3610,3612,3614,3616,3618],{"class":799,"line":3605},31,[797,3607,2203],{"class":1330},[797,3609,1045],{"class":807},[797,3611,2137],{"class":811},[797,3613,1655],{"class":1060},[797,3615,2144],{"class":811},[797,3617,903],{"class":807},[797,3619,3620],{"class":906},"      \u002F\u002F ~1.424rem\n",[797,3622,3624,3626,3628,3630,3632,3634,3637,3639,3641],{"class":799,"line":3623},32,[797,3625,2219],{"class":807},[797,3627,2222],{"class":1330},[797,3629,828],{"class":807},[797,3631,1045],{"class":807},[797,3633,2137],{"class":811},[797,3635,3636],{"class":1060},"4",[797,3638,2144],{"class":811},[797,3640,903],{"class":807},[797,3642,3643],{"class":906},"   \u002F\u002F ~1.602rem\n",[797,3645,3647,3649,3652,3654,3656,3658,3661,3663,3665],{"class":799,"line":3646},33,[797,3648,2219],{"class":807},[797,3650,3651],{"class":1330},"3xl",[797,3653,828],{"class":807},[797,3655,1045],{"class":807},[797,3657,2137],{"class":811},[797,3659,3660],{"class":1060},"5",[797,3662,2144],{"class":811},[797,3664,903],{"class":807},[797,3666,3667],{"class":906},"   \u002F\u002F ~1.802rem\n",[797,3669,3671,3673,3675],{"class":799,"line":3670},34,[797,3672,1001],{"class":807},[797,3674,1349],{"class":811},[797,3676,831],{"class":807},[797,3678,3680],{"class":799,"line":3679},35,[797,3681,860],{"emptyLinePlaceholder":223},[797,3683,3685,3687,3689,3691],{"class":799,"line":3684},36,[797,3686,1022],{"class":803},[797,3688,1025],{"class":803},[797,3690,1028],{"class":811},[797,3692,831],{"class":807},[783,3694,3695],{"icon":154,"label":326},[787,3696,3698],{"className":1035,"code":3697,"filename":1037,"language":1038,"meta":793,"style":793},":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}\n",[697,3699,3700,3708,3718,3732,3743,3787,3820,3845,3874,3913],{"__ignoreMap":793},[797,3701,3702,3704,3706],{"class":799,"line":800},[797,3703,1045],{"class":807},[797,3705,1048],{"class":866},[797,3707,894],{"class":807},[797,3709,3710,3712,3714,3716],{"class":799,"line":834},[797,3711,1080],{"class":811},[797,3713,1045],{"class":807},[797,3715,1085],{"class":1060},[797,3717,831],{"class":807},[797,3719,3720,3722,3724,3726,3728,3730],{"class":799,"line":857},[797,3721,1152],{"class":811},[797,3723,1045],{"class":807},[797,3725,1157],{"class":876},[797,3727,1160],{"class":807},[797,3729,1163],{"class":811},[797,3731,1166],{"class":807},[797,3733,3734,3737,3739,3741],{"class":799,"line":863},[797,3735,3736],{"class":811},"    --spacing",[797,3738,1045],{"class":807},[797,3740,2308],{"class":1060},[797,3742,831],{"class":807},[797,3744,3745,3748,3750,3752,3754,3756,3758,3761,3763,3765,3767,3769,3771,3773,3775,3777,3779,3781,3783,3785],{"class":799,"line":884},[797,3746,3747],{"class":811},"    --spacing--xs",[797,3749,1045],{"class":807},[797,3751,2320],{"class":876},[797,3753,1160],{"class":807},[797,3755,2325],{"class":876},[797,3757,1160],{"class":807},[797,3759,3760],{"class":811},"--spacing",[797,3762,1349],{"class":807},[797,3764,2335],{"class":807},[797,3766,1680],{"class":1060},[797,3768,2340],{"class":807},[797,3770,1157],{"class":876},[797,3772,1160],{"class":807},[797,3774,2347],{"class":811},[797,3776,1349],{"class":807},[797,3778,2340],{"class":807},[797,3780,1157],{"class":876},[797,3782,1160],{"class":807},[797,3784,2347],{"class":811},[797,3786,2360],{"class":807},[797,3788,3789,3792,3794,3796,3798,3800,3802,3804,3806,3808,3810,3812,3814,3816,3818],{"class":799,"line":889},[797,3790,3791],{"class":811},"    --spacing--sm",[797,3793,1045],{"class":807},[797,3795,2320],{"class":876},[797,3797,1160],{"class":807},[797,3799,2325],{"class":876},[797,3801,1160],{"class":807},[797,3803,3760],{"class":811},[797,3805,1349],{"class":807},[797,3807,2335],{"class":807},[797,3809,1680],{"class":1060},[797,3811,2340],{"class":807},[797,3813,1157],{"class":876},[797,3815,1160],{"class":807},[797,3817,2347],{"class":811},[797,3819,2360],{"class":807},[797,3821,3822,3825,3827,3829,3831,3833,3835,3837,3839,3841,3843],{"class":799,"line":897},[797,3823,3824],{"class":811},"    --spacing--md",[797,3826,1045],{"class":807},[797,3828,2320],{"class":876},[797,3830,1160],{"class":807},[797,3832,2325],{"class":876},[797,3834,1160],{"class":807},[797,3836,3760],{"class":811},[797,3838,1349],{"class":807},[797,3840,2335],{"class":807},[797,3842,1680],{"class":1060},[797,3844,1166],{"class":807},[797,3846,3847,3850,3852,3854,3856,3858,3860,3862,3864,3866,3868,3870,3872],{"class":799,"line":910},[797,3848,3849],{"class":811},"    --spacing--lg",[797,3851,1045],{"class":807},[797,3853,2320],{"class":876},[797,3855,1160],{"class":807},[797,3857,2325],{"class":876},[797,3859,1160],{"class":807},[797,3861,3760],{"class":811},[797,3863,1349],{"class":807},[797,3865,2335],{"class":807},[797,3867,1157],{"class":876},[797,3869,1160],{"class":807},[797,3871,2347],{"class":811},[797,3873,2360],{"class":807},[797,3875,3876,3879,3881,3883,3885,3887,3889,3891,3893,3895,3897,3899,3901,3903,3905,3907,3909,3911],{"class":799,"line":921},[797,3877,3878],{"class":811},"    --spacing--xl",[797,3880,1045],{"class":807},[797,3882,2320],{"class":876},[797,3884,1160],{"class":807},[797,3886,2325],{"class":876},[797,3888,1160],{"class":807},[797,3890,3760],{"class":811},[797,3892,1349],{"class":807},[797,3894,2335],{"class":807},[797,3896,1157],{"class":876},[797,3898,1160],{"class":807},[797,3900,2347],{"class":811},[797,3902,1349],{"class":807},[797,3904,2335],{"class":807},[797,3906,1157],{"class":876},[797,3908,1160],{"class":807},[797,3910,2347],{"class":811},[797,3912,2360],{"class":807},[797,3914,3915],{"class":799,"line":932},[797,3916,1171],{"class":807},[722,3918,3920],{"id":3919},"scale-reference-guide","Scale Reference Guide",[726,3922,3923],{},"Here's a reference for each scale ratio and its typical use cases:",[3925,3926,3927,3943],"table",{},[3928,3929,3930],"thead",{},[3931,3932,3933,3937,3940],"tr",{},[3934,3935,3936],"th",{},"Scale",[3934,3938,3939],{},"Ratio",[3934,3941,3942],{},"Use Case",[3944,3945,3946,3960,3973,3986,3999,4012,4025,4038],"tbody",{},[3931,3947,3948,3954,3957],{},[3949,3950,3951],"td",{},[692,3952,3953],{},"Minor Second",[3949,3955,3956],{},"1.067",[3949,3958,3959],{},"Very subtle scaling, ideal for fine-tuned adjustments",[3931,3961,3962,3967,3970],{},[3949,3963,3964],{},[692,3965,3966],{},"Major Second",[3949,3968,3969],{},"1.125",[3949,3971,3972],{},"Subtle but noticeable, great for spacing systems",[3931,3974,3975,3980,3983],{},[3949,3976,3977],{},[692,3978,3979],{},"Minor Third",[3949,3981,3982],{},"1.2",[3949,3984,3985],{},"Balanced scaling, versatile for most applications",[3931,3987,3988,3993,3996],{},[3949,3989,3990],{},[692,3991,3992],{},"Major Third",[3949,3994,3995],{},"1.25",[3949,3997,3998],{},"Popular for web typography, clear hierarchy",[3931,4000,4001,4006,4009],{},[3949,4002,4003],{},[692,4004,4005],{},"Perfect Fourth",[3949,4007,4008],{},"1.333",[3949,4010,4011],{},"Classic choice, strong but not overwhelming",[3931,4013,4014,4019,4022],{},[3949,4015,4016],{},[692,4017,4018],{},"Augmented Fourth",[3949,4020,4021],{},"1.414",[3949,4023,4024],{},"Square root of 2, mathematically derived",[3931,4026,4027,4032,4035],{},[3949,4028,4029],{},[692,4030,4031],{},"Perfect Fifth",[3949,4033,4034],{},"1.5",[3949,4036,4037],{},"Pronounced scaling, creates clear distinctions",[3931,4039,4040,4045,4048],{},[3949,4041,4042],{},[692,4043,4044],{},"Golden Ratio",[3949,4046,4047],{},"1.618",[3949,4049,4050],{},"Dramatic scaling, ideal for hero sections",[722,4052,4054],{"id":4053},"best-practices","Best Practices",[737,4056,4057,4063,4069,4075,4081,4087],{},[740,4058,4059,4062],{},[692,4060,4061],{},"Choose one primary scale"," for most of your design system to maintain consistency.",[740,4064,4065,4068],{},[692,4066,4067],{},"Use smaller ratios (1.125-1.25)"," for spacing and line-height where subtle differences work best.",[740,4070,4071,4074],{},[692,4072,4073],{},"Use larger ratios (1.333-1.618)"," for typography and major layout elements where clear hierarchy is important.",[740,4076,4077,4080],{},[692,4078,4079],{},"Limit your power range"," to avoid too many size options (typically -3 to 6 is sufficient).",[740,4082,4083,4086],{},[692,4084,4085],{},"Document your scale decisions"," so team members understand which scale to use for different purposes.",[740,4088,4089,4092],{},[692,4090,4091],{},"Test on real content"," to ensure your scale works well across different contexts and viewport sizes.",[689,4094,4095,4098],{},[692,4096,4097],{},"Interesting fact:"," Modular scales originated from music theory, where these same ratios define harmonious musical intervals. This mathematical harmony translates beautifully to visual design, creating naturally pleasing proportions.",[722,4100,4102],{"id":4101},"faq","FAQ",[4104,4105,4106,4125,4129,4133,4137,4150,4157,4249,4256,4269],"accordion",{},[4107,4108,4111,4112,2571,4114,4116,4117,4120,4121,4124],"accordion-item",{"icon":4109,"label":4110},"i-lucide-circle-help","How do I choose the right scale for my project?","Start with the ",[692,4113,1195],{},[692,4115,1198],{}," for typography — they're versatile and work well for most designs. For spacing, try the ",[692,4118,4119],{},"Major Second (1.125)"," for subtle progressions or ",[692,4122,4123],{},"Minor Third (1.2)"," for slightly more contrast. Test with real content and adjust if steps feel too similar or too far apart.",[4107,4126,4128],{"icon":4109,"label":4127},"What does 'power' mean in scale calculations?","Power refers to how many times you multiply by the scale ratio. For example, with a scale of 1.25: power 2 = 1.25², power 3 = 1.25³, and so on. Negative powers work in reverse (dividing instead of multiplying) to create smaller sizes. So power -2 = 1 ÷ 1.25².",[4107,4130,4132],{"icon":4109,"label":4131},"Why use mathematical scales instead of arbitrary multipliers?","Mathematical scales (like 1.25, 1.333, 1.618) are based on harmonious ratios found in music and nature, creating visually balanced proportions. Arbitrary multipliers (like 1.1, 1.3, 1.7) lack this mathematical foundation and often result in sizes that feel random or disconnected from each other.",[4107,4134,4136],{"icon":4109,"label":4135},"Should I use the same scale for typography and spacing?","Not necessarily. It's common to use different scales for different purposes — for example, a larger scale (1.333) for typography to create clear hierarchy, and a subtler scale (1.125) for spacing to avoid awkward gaps. The key is being consistent within each category.",[4107,4138,771,4140,4142,4143,4146,4147,4149],{"icon":4109,"label":4139},"What's the advantage of using the generic 'scale' variable?",[697,4141,716],{}," variable acts as a single control point for your design system. Instead of hardcoding specific scales like ",[697,4144,4145],{},"scalePerfectFourth",", you reference the generic ",[697,4148,716],{}," variable. This lets you switch your entire design's proportions by changing one variable at different breakpoints or in different themes, making your system more flexible and maintainable.",[4107,4151,4153,4154,4156],{"icon":4109,"label":4152},"Can I use different scales at different breakpoints?","Yes! Override the ",[697,4155,716],{}," variable at any breakpoint. For example, use a subtle scale (1.125) on mobile where space is limited, and a more dramatic scale (1.333) on desktop where larger type differences are easier to read. Your power-based sizes will automatically adjust while maintaining their relationships.",[4107,4158,4160,4166],{"icon":4109,"label":4159},"Can I change the scale after calling useScaleDesignTokens()?",[726,4161,4162,4163,4165],{},"Absolutely. Since ",[697,4164,716],{}," is a CSS variable, you can override it anywhere. For example, use the code below to switch to a tighter scale for compact UI areas while keeping the rest of your design unchanged.",[787,4167,4169],{"className":789,"code":4168,"filename":791,"language":792,"meta":793,"style":793},"s.selector('.compact', ({ variable }) => { \n    variable(scale, s.ref(scaleMajorSecond)); \n});\n",[697,4170,4171,4210,4241],{"__ignoreMap":793},[797,4172,4173,4176,4178,4181,4183,4185,4188,4190,4192,4195,4199,4202,4205,4207],{"class":799,"line":800},[797,4174,4175],{"class":811},"s",[797,4177,1185],{"class":807},[797,4179,4180],{"class":876},"selector",[797,4182,1160],{"class":811},[797,4184,828],{"class":807},[797,4186,4187],{"class":824},".compact",[797,4189,828],{"class":807},[797,4191,903],{"class":807},[797,4193,4194],{"class":807}," ({",[797,4196,4198],{"class":4197},"sHdIc"," variable",[797,4200,4201],{"class":807}," })",[797,4203,4204],{"class":866}," =>",[797,4206,808],{"class":807},[797,4208,4209],{"class":1330}," \n",[797,4211,4212,4215,4217,4219,4221,4223,4225,4228,4230,4233,4236,4239],{"class":799,"line":834},[797,4213,4214],{"class":876},"    variable",[797,4216,1160],{"class":1330},[797,4218,716],{"class":811},[797,4220,903],{"class":807},[797,4222,1028],{"class":811},[797,4224,1185],{"class":807},[797,4226,4227],{"class":876},"ref",[797,4229,1160],{"class":1330},[797,4231,4232],{"class":811},"scaleMajorSecond",[797,4234,4235],{"class":1330},"))",[797,4237,4238],{"class":807},";",[797,4240,4209],{"class":1330},[797,4242,4243,4245,4247],{"class":799,"line":857},[797,4244,1001],{"class":807},[797,4246,1349],{"class":811},[797,4248,831],{"class":807},[4107,4250,4252,4253,4255],{"icon":4109,"label":4251},"Why use CSS calc() instead of pre-calculating values?","Using ",[697,4254,2555],{}," with CSS variables keeps your scale system dynamic. When you change the base scale ratio or base size, all derived values update automatically without rebuilding your CSS. This is especially powerful for theming, responsive adjustments, and maintaining consistency across your design system.",[4107,4257,4259,4261,4262,4265,4266,4268],{"icon":4109,"label":4258},"What's the benefit of useMultiplierDesignTokens() over manual variables?",[697,4260,1832],{}," automates the creation of size variables based on your scale. Instead of manually writing ",[697,4263,4264],{},"s.variable('font-size.\u003Csize>', ...)"," for each size, it generates all variables automatically with consistent naming, creates proper ",[697,4267,2555],{}," expressions, and returns type-safe values. This reduces boilerplate and makes it easier to maintain a consistent naming convention.",[4107,4270,4272],{"icon":4109,"label":4271},"How do scales work with responsive design?","Scales and responsive design work together beautifully. You can either keep the same power levels while changing the scale ratio at different breakpoints, or keep the same ratio while adjusting base sizes. Both approaches maintain proportional harmony while adapting to different screen sizes and contexts.",[4274,4275,4276],"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 .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 .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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":793,"searchDepth":834,"depth":834,"links":4278},[4279,4280,4281,4284,4285,4286,4290,4291,4292],{"id":724,"depth":834,"text":78},{"id":731,"depth":834,"text":732},{"id":766,"depth":834,"text":699,"children":4282},[4283],{"id":1207,"depth":857,"text":1208},{"id":1519,"depth":834,"text":703},{"id":1844,"depth":834,"text":1847},{"id":2577,"depth":834,"text":2578,"children":4287},[4288,4289],{"id":2581,"depth":857,"text":2582},{"id":3189,"depth":857,"text":3190},{"id":3919,"depth":834,"text":3920},{"id":4053,"depth":834,"text":4054},{"id":4101,"depth":834,"text":4102},"Create modular scale systems for typography and spacing using mathematical ratios based on musical intervals and the golden ratio.","md",null,{},{"title":225,"icon":35},{"title":684,"description":4293},"BNIfF0ZoC3-jKFfia2BPw3xhLKaPXoGH0Yd76KpK53c",[4301,4303],{"title":220,"path":221,"stem":222,"description":4302,"children":-1},"Create fluid typography systems that scale smoothly across viewports using mathematical modular scales and CSS clamp functions.",{"title":229,"path":230,"stem":231,"description":4304,"icon":232,"children":-1},"Create and manage spacing design tokens with CSS variables for consistent layout spacing, padding, margins, and gaps across your application.",1781596323514]