[{"data":1,"prerenderedAt":2302},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-fluid-design-typography":682,"-docs-theme-design-tokens-fluid-design-typography-surround":2297},{"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":2290,"extension":2291,"links":2292,"meta":2293,"navigation":2294,"path":221,"seo":2295,"stem":222,"__hash__":2296},"docs_theme\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography.md","Fluid Responsive Design - Typography",{"type":686,"value":687,"toc":2276},"minimark",[688,714,718,738,741,745,748,782,786,810,1332,1352,1357,1393,1814,1818,1821,1825,1963,1967,1970,2081,2086,2090,2134,2138,2218,2222,2272],[689,690,691,695,696,700,701,705,706,709,710,713],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Design Tokens Preset:"," Fluid font sizing is enabled by default in the ",[697,698,699],"a",{"href":171},"Design Tokens Preset"," (",[702,703,704],"code",{},"useDesignTokensPreset",") and you can configure it through the preset's ",[702,707,708],{},"fluidFontSize"," and ",[702,711,712],{},"fluidScale"," options. For most projects, applying it via the preset is the recommended approach.",[715,716,78],"h2",{"id":717},"overview",[719,720,721,722,725,726,729,730,733,734,737],"p",{},"The ",[702,723,724],{},"useFontSizeDesignTokens()"," composable produces font-size variables from a mix of static values and fluid pixel ranges. Tuple ",[702,727,728],{},"[min, max]"," and object ",[702,731,732],{},"{ min, max }"," values are clamped between viewport breakpoints; strings, numbers, and ",[702,735,736],{},"@","-references stay fixed. Static and fluid entries can coexist in the same call.",[719,739,740],{},"Unlike traditional responsive typography that jumps between fixed sizes at breakpoints, fluid typography creates smooth, continuous transitions that look perfect at every viewport width.",[715,742,744],{"id":743},"why-use-fluid-typography","Why use fluid typography?",[719,746,747],{},"Fluid typography helps you:",[749,750,751,758,764,770,776],"ul",{},[752,753,754,757],"li",{},[692,755,756],{},"Eliminate breakpoint jumps",": Text scales smoothly instead of jumping between fixed sizes at media queries.",[752,759,760,763],{},[692,761,762],{},"Maintain perfect proportions",": Use modular scales to ensure harmonious relationships at every viewport width.",[752,765,766,769],{},[692,767,768],{},"Reduce code complexity",": Define your entire type system once instead of managing multiple breakpoints.",[752,771,772,775],{},[692,773,774],{},"Improve readability",": Automatically optimize text size for the available space.",[752,777,778,781],{},[692,779,780],{},"Create responsive hierarchies",": Scale relationships between different text sizes remain consistent.",[715,783,785],{"id":784},"mixing-fluid-and-static-font-sizes","Mixing fluid and static font sizes",[719,787,788,789,791,792,794,795,797,798,801,802,805,806,809],{},"Pass each size key one of: a static value (string, number, or ",[702,790,736],{},"-reference), a ",[702,793,728],{}," tuple of absolute pixel values, or a ",[702,796,732],{}," object. Range values interpolate across the viewport between the ",[702,799,800],{},"breakpoint"," reference, which defaults to ",[702,803,804],{},"@fluid.breakpoint"," from ",[702,807,808],{},"useFluidViewportDesignTokens()",".",[811,812,813,1141],"tabs",{},[814,815,817],"tabs-item",{"icon":816,"label":290},"i-lucide-code",[818,819,825],"pre",{"className":820,"code":821,"filename":822,"language":823,"meta":824,"style":824},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport {\n    useFluidViewportDesignTokens,\n    useFontSizeDesignTokens,\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseFluidViewportDesignTokens(s);\n\nconst {\n    fontSize,\n    fontSizeSm,\n    fontSizeMd,\n    fontSizeLg,\n} = useFontSizeDesignTokens(s, {\n    default: '@font-size.md',\n    sm: '0.875rem',                 \u002F\u002F fixed\n    md: [16, 18],                   \u002F\u002F fluid: clamp 16px → 18px\n    lg: { min: 18, max: 24 },       \u002F\u002F fluid (object form)\n});\n\nexport default s;\n","styleframe.config.ts","ts","",[702,826,827,863,871,880,888,905,911,932,937,948,953,960,968,976,984,992,1011,1030,1051,1079,1112,1122,1127],{"__ignoreMap":824},[828,829,832,836,840,844,847,850,853,857,860],"span",{"class":830,"line":831},"line",1,[828,833,835],{"class":834},"s7zQu","import",[828,837,839],{"class":838},"sMK4o"," {",[828,841,843],{"class":842},"sTEyZ"," styleframe",[828,845,846],{"class":838}," }",[828,848,849],{"class":834}," from",[828,851,852],{"class":838}," '",[828,854,856],{"class":855},"sfazB","styleframe",[828,858,859],{"class":838},"'",[828,861,862],{"class":838},";\n",[828,864,866,868],{"class":830,"line":865},2,[828,867,835],{"class":834},[828,869,870],{"class":838}," {\n",[828,872,874,877],{"class":830,"line":873},3,[828,875,876],{"class":842},"    useFluidViewportDesignTokens",[828,878,879],{"class":838},",\n",[828,881,883,886],{"class":830,"line":882},4,[828,884,885],{"class":842},"    useFontSizeDesignTokens",[828,887,879],{"class":838},[828,889,891,894,896,898,901,903],{"class":830,"line":890},5,[828,892,893],{"class":838},"}",[828,895,849],{"class":834},[828,897,852],{"class":838},[828,899,900],{"class":855},"@styleframe\u002Ftheme",[828,902,859],{"class":838},[828,904,862],{"class":838},[828,906,908],{"class":830,"line":907},6,[828,909,910],{"emptyLinePlaceholder":223},"\n",[828,912,914,918,921,924,927,930],{"class":830,"line":913},7,[828,915,917],{"class":916},"spNyl","const",[828,919,920],{"class":842}," s ",[828,922,923],{"class":838},"=",[828,925,843],{"class":926},"s2Zo4",[828,928,929],{"class":842},"()",[828,931,862],{"class":838},[828,933,935],{"class":830,"line":934},8,[828,936,910],{"emptyLinePlaceholder":223},[828,938,940,943,946],{"class":830,"line":939},9,[828,941,942],{"class":926},"useFluidViewportDesignTokens",[828,944,945],{"class":842},"(s)",[828,947,862],{"class":838},[828,949,951],{"class":830,"line":950},10,[828,952,910],{"emptyLinePlaceholder":223},[828,954,956,958],{"class":830,"line":955},11,[828,957,917],{"class":916},[828,959,870],{"class":838},[828,961,963,966],{"class":830,"line":962},12,[828,964,965],{"class":842},"    fontSize",[828,967,879],{"class":838},[828,969,971,974],{"class":830,"line":970},13,[828,972,973],{"class":842},"    fontSizeSm",[828,975,879],{"class":838},[828,977,979,982],{"class":830,"line":978},14,[828,980,981],{"class":842},"    fontSizeMd",[828,983,879],{"class":838},[828,985,987,990],{"class":830,"line":986},15,[828,988,989],{"class":842},"    fontSizeLg",[828,991,879],{"class":838},[828,993,995,997,1000,1003,1006,1009],{"class":830,"line":994},16,[828,996,893],{"class":838},[828,998,999],{"class":838}," =",[828,1001,1002],{"class":926}," useFontSizeDesignTokens",[828,1004,1005],{"class":842},"(s",[828,1007,1008],{"class":838},",",[828,1010,870],{"class":838},[828,1012,1014,1018,1021,1023,1026,1028],{"class":830,"line":1013},17,[828,1015,1017],{"class":1016},"swJcz","    default",[828,1019,1020],{"class":838},":",[828,1022,852],{"class":838},[828,1024,1025],{"class":855},"@font-size.md",[828,1027,859],{"class":838},[828,1029,879],{"class":838},[828,1031,1033,1036,1038,1040,1043,1045,1047],{"class":830,"line":1032},18,[828,1034,1035],{"class":1016},"    sm",[828,1037,1020],{"class":838},[828,1039,852],{"class":838},[828,1041,1042],{"class":855},"0.875rem",[828,1044,859],{"class":838},[828,1046,1008],{"class":838},[828,1048,1050],{"class":1049},"sHwdD","                 \u002F\u002F fixed\n",[828,1052,1054,1057,1059,1062,1066,1068,1071,1074,1076],{"class":830,"line":1053},19,[828,1055,1056],{"class":1016},"    md",[828,1058,1020],{"class":838},[828,1060,1061],{"class":842}," [",[828,1063,1065],{"class":1064},"sbssI","16",[828,1067,1008],{"class":838},[828,1069,1070],{"class":1064}," 18",[828,1072,1073],{"class":842},"]",[828,1075,1008],{"class":838},[828,1077,1078],{"class":1049},"                   \u002F\u002F fluid: clamp 16px → 18px\n",[828,1080,1082,1085,1087,1089,1092,1094,1096,1098,1101,1103,1106,1109],{"class":830,"line":1081},20,[828,1083,1084],{"class":1016},"    lg",[828,1086,1020],{"class":838},[828,1088,839],{"class":838},[828,1090,1091],{"class":1016}," min",[828,1093,1020],{"class":838},[828,1095,1070],{"class":1064},[828,1097,1008],{"class":838},[828,1099,1100],{"class":1016}," max",[828,1102,1020],{"class":838},[828,1104,1105],{"class":1064}," 24",[828,1107,1108],{"class":838}," },",[828,1110,1111],{"class":1049},"       \u002F\u002F fluid (object form)\n",[828,1113,1115,1117,1120],{"class":830,"line":1114},21,[828,1116,893],{"class":838},[828,1118,1119],{"class":842},")",[828,1121,862],{"class":838},[828,1123,1125],{"class":830,"line":1124},22,[828,1126,910],{"emptyLinePlaceholder":223},[828,1128,1130,1133,1136,1139],{"class":830,"line":1129},23,[828,1131,1132],{"class":834},"export",[828,1134,1135],{"class":834}," default",[828,1137,1138],{"class":842}," s",[828,1140,862],{"class":838},[814,1142,1143],{"icon":154,"label":326},[818,1144,1149],{"className":1145,"code":1146,"filename":1147,"language":1148,"meta":824,"style":824},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --fluid--min-width: 320;\n    --fluid--max-width: 1440;\n    --fluid--screen: 100vw;\n    --fluid--breakpoint: calc(...);\n    --font-size--sm: 0.875rem;\n    --font-size--md: calc((16 \u002F 16 * 1rem) + (18 - 16) * var(--fluid--breakpoint));\n    --font-size--lg: calc((18 \u002F 16 * 1rem) + (24 - 18) * var(--fluid--breakpoint));\n    --font-size: var(--font-size--md);\n}\n","styleframe\u002Findex.css","css",[702,1150,1151,1160,1172,1184,1196,1215,1227,1272,1310,1327],{"__ignoreMap":824},[828,1152,1153,1155,1158],{"class":830,"line":831},[828,1154,1020],{"class":838},[828,1156,1157],{"class":916},"root",[828,1159,870],{"class":838},[828,1161,1162,1165,1167,1170],{"class":830,"line":865},[828,1163,1164],{"class":842},"    --fluid--min-width",[828,1166,1020],{"class":838},[828,1168,1169],{"class":1064}," 320",[828,1171,862],{"class":838},[828,1173,1174,1177,1179,1182],{"class":830,"line":873},[828,1175,1176],{"class":842},"    --fluid--max-width",[828,1178,1020],{"class":838},[828,1180,1181],{"class":1064}," 1440",[828,1183,862],{"class":838},[828,1185,1186,1189,1191,1194],{"class":830,"line":882},[828,1187,1188],{"class":842},"    --fluid--screen",[828,1190,1020],{"class":838},[828,1192,1193],{"class":1064}," 100vw",[828,1195,862],{"class":838},[828,1197,1198,1201,1203,1206,1209,1212],{"class":830,"line":890},[828,1199,1200],{"class":842},"    --fluid--breakpoint",[828,1202,1020],{"class":838},[828,1204,1205],{"class":926}," calc",[828,1207,1208],{"class":838},"(",[828,1210,1211],{"class":842},"...",[828,1213,1214],{"class":838},");\n",[828,1216,1217,1220,1222,1225],{"class":830,"line":907},[828,1218,1219],{"class":842},"    --font-size--sm",[828,1221,1020],{"class":838},[828,1223,1224],{"class":1064}," 0.875rem",[828,1226,862],{"class":838},[828,1228,1229,1232,1234,1236,1238,1240,1242,1245,1248,1251,1254,1256,1259,1262,1265,1267,1270],{"class":830,"line":913},[828,1230,1231],{"class":842},"    --font-size--md",[828,1233,1020],{"class":838},[828,1235,1205],{"class":926},[828,1237,1208],{"class":838},[828,1239,1208],{"class":842},[828,1241,1065],{"class":1064},[828,1243,1244],{"class":838}," \u002F",[828,1246,1247],{"class":1064}," 16",[828,1249,1250],{"class":838}," *",[828,1252,1253],{"class":1064}," 1rem",[828,1255,1119],{"class":838},[828,1257,1258],{"class":842}," + (",[828,1260,1261],{"class":1064},"18",[828,1263,1264],{"class":842}," - ",[828,1266,1065],{"class":1064},[828,1268,1269],{"class":842},") * var(--fluid--breakpoint))",[828,1271,862],{"class":838},[828,1273,1274,1277,1279,1281,1283,1285,1287,1289,1291,1293,1295,1297,1299,1302,1304,1306,1308],{"class":830,"line":934},[828,1275,1276],{"class":842},"    --font-size--lg",[828,1278,1020],{"class":838},[828,1280,1205],{"class":926},[828,1282,1208],{"class":838},[828,1284,1208],{"class":842},[828,1286,1261],{"class":1064},[828,1288,1244],{"class":838},[828,1290,1247],{"class":1064},[828,1292,1250],{"class":838},[828,1294,1253],{"class":1064},[828,1296,1119],{"class":838},[828,1298,1258],{"class":842},[828,1300,1301],{"class":1064},"24",[828,1303,1264],{"class":842},[828,1305,1261],{"class":1064},[828,1307,1269],{"class":842},[828,1309,862],{"class":838},[828,1311,1312,1315,1317,1320,1322,1325],{"class":830,"line":939},[828,1313,1314],{"class":842},"    --font-size",[828,1316,1020],{"class":838},[828,1318,1319],{"class":926}," var",[828,1321,1208],{"class":838},[828,1323,1324],{"class":842},"--font-size--md",[828,1326,1214],{"class":838},[828,1328,1329],{"class":830,"line":950},[828,1330,1331],{"class":838},"}\n",[1333,1334,1335,1338,1339,1341,1342,1345,1346,1348,1349,809],"tip",{},[692,1336,1337],{},"Pro tip:"," Always call ",[702,1340,808],{}," before using fluid ranges. The default ",[702,1343,1344],{},"fluid.breakpoint"," reference comes from there. You can also pass a custom ",[702,1347,800],{}," via the options bag: ",[702,1350,1351],{},"useFontSizeDesignTokens(s, values, { breakpoint: customRef })",[1353,1354,1356],"h3",{"id":1355},"pairing-fluid-ranges-with-modular-scales","Pairing fluid ranges with modular scales",[719,1358,1359,1360,1363,1364,1367,1368,1363,1371,1374,1375,1378,1379,1382,1383,1385,1386,1389,1390,809],{},"To preserve a live link to a modular scale (so changing the scale changes every fluid font size), define the pixel base as ",[702,1361,1362],{},"min","\u002F",[702,1365,1366],{},"max"," keys and build the ranges from CSS expressions that multiply ",[702,1369,1370],{},"@font-size.min",[702,1372,1373],{},"@font-size.max"," by ",[702,1376,1377],{},"@scale.min-powers.\u003Cn>"," \u002F ",[702,1380,1381],{},"@scale.max-powers.\u003Cn>",". The default ",[702,1384,704],{}," configuration uses this exact pattern, so the live link survives any later override of ",[702,1387,1388],{},"useScaleDesignTokens"," or ",[702,1391,1392],{},"useScalePowersDesignTokens",[818,1394,1396],{"className":820,"code":1395,"language":823,"meta":824,"style":824},"import { styleframe } from 'styleframe';\nimport {\n    useFluidViewportDesignTokens,\n    useFontSizeDesignTokens,\n    useScaleDesignTokens,\n    useScalePowersDesignTokens,\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseFluidViewportDesignTokens(s);\n\nconst { scaleMin, scaleMax } = useScaleDesignTokens(s, {\n    min: '@scale.minor-third',\n    max: '@scale.major-third',\n});\n\nuseScalePowersDesignTokens(s, scaleMin); \u002F\u002F emits scale.min-powers.\u003Cn>\nuseScalePowersDesignTokens(s, scaleMax); \u002F\u002F emits scale.max-powers.\u003Cn>\n\nuseFontSizeDesignTokens(s, {\n    min: 16,                              \u002F\u002F --font-size--min (configurable base)\n    max: 18,                              \u002F\u002F --font-size--max (configurable base)\n    default: '@font-size.md',\n    xs: ['@font-size.min * @scale.min-powers.-2', '@font-size.max * @scale.max-powers.-2'],\n    sm: ['@font-size.min * @scale.min-powers.-1', '@font-size.max * @scale.max-powers.-1'],\n    md: ['@font-size.min * @scale.min-powers.0', '@font-size.max * @scale.max-powers.0'],\n    lg: ['@font-size.min * @scale.min-powers.1', '@font-size.max * @scale.max-powers.1'],\n    xl: ['@font-size.min * @scale.min-powers.2', '@font-size.max * @scale.max-powers.2'],\n});\n",[702,1397,1398,1418,1424,1430,1436,1443,1450,1464,1468,1482,1486,1494,1498,1525,1541,1557,1565,1569,1586,1602,1606,1617,1630,1643,1658,1688,1717,1746,1775,1805],{"__ignoreMap":824},[828,1399,1400,1402,1404,1406,1408,1410,1412,1414,1416],{"class":830,"line":831},[828,1401,835],{"class":834},[828,1403,839],{"class":838},[828,1405,843],{"class":842},[828,1407,846],{"class":838},[828,1409,849],{"class":834},[828,1411,852],{"class":838},[828,1413,856],{"class":855},[828,1415,859],{"class":838},[828,1417,862],{"class":838},[828,1419,1420,1422],{"class":830,"line":865},[828,1421,835],{"class":834},[828,1423,870],{"class":838},[828,1425,1426,1428],{"class":830,"line":873},[828,1427,876],{"class":842},[828,1429,879],{"class":838},[828,1431,1432,1434],{"class":830,"line":882},[828,1433,885],{"class":842},[828,1435,879],{"class":838},[828,1437,1438,1441],{"class":830,"line":890},[828,1439,1440],{"class":842},"    useScaleDesignTokens",[828,1442,879],{"class":838},[828,1444,1445,1448],{"class":830,"line":907},[828,1446,1447],{"class":842},"    useScalePowersDesignTokens",[828,1449,879],{"class":838},[828,1451,1452,1454,1456,1458,1460,1462],{"class":830,"line":913},[828,1453,893],{"class":838},[828,1455,849],{"class":834},[828,1457,852],{"class":838},[828,1459,900],{"class":855},[828,1461,859],{"class":838},[828,1463,862],{"class":838},[828,1465,1466],{"class":830,"line":934},[828,1467,910],{"emptyLinePlaceholder":223},[828,1469,1470,1472,1474,1476,1478,1480],{"class":830,"line":939},[828,1471,917],{"class":916},[828,1473,920],{"class":842},[828,1475,923],{"class":838},[828,1477,843],{"class":926},[828,1479,929],{"class":842},[828,1481,862],{"class":838},[828,1483,1484],{"class":830,"line":950},[828,1485,910],{"emptyLinePlaceholder":223},[828,1487,1488,1490,1492],{"class":830,"line":955},[828,1489,942],{"class":926},[828,1491,945],{"class":842},[828,1493,862],{"class":838},[828,1495,1496],{"class":830,"line":962},[828,1497,910],{"emptyLinePlaceholder":223},[828,1499,1500,1502,1504,1507,1509,1512,1514,1516,1519,1521,1523],{"class":830,"line":970},[828,1501,917],{"class":916},[828,1503,839],{"class":838},[828,1505,1506],{"class":842}," scaleMin",[828,1508,1008],{"class":838},[828,1510,1511],{"class":842}," scaleMax ",[828,1513,893],{"class":838},[828,1515,999],{"class":838},[828,1517,1518],{"class":926}," useScaleDesignTokens",[828,1520,1005],{"class":842},[828,1522,1008],{"class":838},[828,1524,870],{"class":838},[828,1526,1527,1530,1532,1534,1537,1539],{"class":830,"line":978},[828,1528,1529],{"class":1016},"    min",[828,1531,1020],{"class":838},[828,1533,852],{"class":838},[828,1535,1536],{"class":855},"@scale.minor-third",[828,1538,859],{"class":838},[828,1540,879],{"class":838},[828,1542,1543,1546,1548,1550,1553,1555],{"class":830,"line":986},[828,1544,1545],{"class":1016},"    max",[828,1547,1020],{"class":838},[828,1549,852],{"class":838},[828,1551,1552],{"class":855},"@scale.major-third",[828,1554,859],{"class":838},[828,1556,879],{"class":838},[828,1558,1559,1561,1563],{"class":830,"line":994},[828,1560,893],{"class":838},[828,1562,1119],{"class":842},[828,1564,862],{"class":838},[828,1566,1567],{"class":830,"line":1013},[828,1568,910],{"emptyLinePlaceholder":223},[828,1570,1571,1573,1575,1577,1580,1583],{"class":830,"line":1032},[828,1572,1392],{"class":926},[828,1574,1005],{"class":842},[828,1576,1008],{"class":838},[828,1578,1579],{"class":842}," scaleMin)",[828,1581,1582],{"class":838},";",[828,1584,1585],{"class":1049}," \u002F\u002F emits scale.min-powers.\u003Cn>\n",[828,1587,1588,1590,1592,1594,1597,1599],{"class":830,"line":1053},[828,1589,1392],{"class":926},[828,1591,1005],{"class":842},[828,1593,1008],{"class":838},[828,1595,1596],{"class":842}," scaleMax)",[828,1598,1582],{"class":838},[828,1600,1601],{"class":1049}," \u002F\u002F emits scale.max-powers.\u003Cn>\n",[828,1603,1604],{"class":830,"line":1081},[828,1605,910],{"emptyLinePlaceholder":223},[828,1607,1608,1611,1613,1615],{"class":830,"line":1114},[828,1609,1610],{"class":926},"useFontSizeDesignTokens",[828,1612,1005],{"class":842},[828,1614,1008],{"class":838},[828,1616,870],{"class":838},[828,1618,1619,1621,1623,1625,1627],{"class":830,"line":1124},[828,1620,1529],{"class":1016},[828,1622,1020],{"class":838},[828,1624,1247],{"class":1064},[828,1626,1008],{"class":838},[828,1628,1629],{"class":1049},"                              \u002F\u002F --font-size--min (configurable base)\n",[828,1631,1632,1634,1636,1638,1640],{"class":830,"line":1129},[828,1633,1545],{"class":1016},[828,1635,1020],{"class":838},[828,1637,1070],{"class":1064},[828,1639,1008],{"class":838},[828,1641,1642],{"class":1049},"                              \u002F\u002F --font-size--max (configurable base)\n",[828,1644,1646,1648,1650,1652,1654,1656],{"class":830,"line":1645},24,[828,1647,1017],{"class":1016},[828,1649,1020],{"class":838},[828,1651,852],{"class":838},[828,1653,1025],{"class":855},[828,1655,859],{"class":838},[828,1657,879],{"class":838},[828,1659,1661,1664,1666,1668,1670,1673,1675,1677,1679,1682,1684,1686],{"class":830,"line":1660},25,[828,1662,1663],{"class":1016},"    xs",[828,1665,1020],{"class":838},[828,1667,1061],{"class":842},[828,1669,859],{"class":838},[828,1671,1672],{"class":855},"@font-size.min * @scale.min-powers.-2",[828,1674,859],{"class":838},[828,1676,1008],{"class":838},[828,1678,852],{"class":838},[828,1680,1681],{"class":855},"@font-size.max * @scale.max-powers.-2",[828,1683,859],{"class":838},[828,1685,1073],{"class":842},[828,1687,879],{"class":838},[828,1689,1691,1693,1695,1697,1699,1702,1704,1706,1708,1711,1713,1715],{"class":830,"line":1690},26,[828,1692,1035],{"class":1016},[828,1694,1020],{"class":838},[828,1696,1061],{"class":842},[828,1698,859],{"class":838},[828,1700,1701],{"class":855},"@font-size.min * @scale.min-powers.-1",[828,1703,859],{"class":838},[828,1705,1008],{"class":838},[828,1707,852],{"class":838},[828,1709,1710],{"class":855},"@font-size.max * @scale.max-powers.-1",[828,1712,859],{"class":838},[828,1714,1073],{"class":842},[828,1716,879],{"class":838},[828,1718,1720,1722,1724,1726,1728,1731,1733,1735,1737,1740,1742,1744],{"class":830,"line":1719},27,[828,1721,1056],{"class":1016},[828,1723,1020],{"class":838},[828,1725,1061],{"class":842},[828,1727,859],{"class":838},[828,1729,1730],{"class":855},"@font-size.min * @scale.min-powers.0",[828,1732,859],{"class":838},[828,1734,1008],{"class":838},[828,1736,852],{"class":838},[828,1738,1739],{"class":855},"@font-size.max * @scale.max-powers.0",[828,1741,859],{"class":838},[828,1743,1073],{"class":842},[828,1745,879],{"class":838},[828,1747,1749,1751,1753,1755,1757,1760,1762,1764,1766,1769,1771,1773],{"class":830,"line":1748},28,[828,1750,1084],{"class":1016},[828,1752,1020],{"class":838},[828,1754,1061],{"class":842},[828,1756,859],{"class":838},[828,1758,1759],{"class":855},"@font-size.min * @scale.min-powers.1",[828,1761,859],{"class":838},[828,1763,1008],{"class":838},[828,1765,852],{"class":838},[828,1767,1768],{"class":855},"@font-size.max * @scale.max-powers.1",[828,1770,859],{"class":838},[828,1772,1073],{"class":842},[828,1774,879],{"class":838},[828,1776,1778,1781,1783,1785,1787,1790,1792,1794,1796,1799,1801,1803],{"class":830,"line":1777},29,[828,1779,1780],{"class":1016},"    xl",[828,1782,1020],{"class":838},[828,1784,1061],{"class":842},[828,1786,859],{"class":838},[828,1788,1789],{"class":855},"@font-size.min * @scale.min-powers.2",[828,1791,859],{"class":838},[828,1793,1008],{"class":838},[828,1795,852],{"class":838},[828,1797,1798],{"class":855},"@font-size.max * @scale.max-powers.2",[828,1800,859],{"class":838},[828,1802,1073],{"class":842},[828,1804,879],{"class":838},[828,1806,1808,1810,1812],{"class":830,"line":1807},30,[828,1809,893],{"class":838},[828,1811,1119],{"class":842},[828,1813,862],{"class":838},[715,1815,1817],{"id":1816},"understanding-modular-scales","Understanding Modular Scales",[719,1819,1820],{},"Modular scales create harmonious proportions by multiplying a base value by consistent ratios. The scale ratio determines how dramatically your font sizes grow.",[1353,1822,1824],{"id":1823},"common-scale-ratios","Common Scale Ratios",[1826,1827,1828,1847],"table",{},[1829,1830,1831],"thead",{},[1832,1833,1834,1838,1841,1844],"tr",{},[1835,1836,1837],"th",{},"Scale Name",[1835,1839,1840],{},"Ratio",[1835,1842,1843],{},"Character",[1835,1845,1846],{},"Best For",[1848,1849,1850,1867,1883,1899,1915,1931,1947],"tbody",{},[1832,1851,1852,1858,1861,1864],{},[1853,1854,1855],"td",{},[692,1856,1857],{},"Minor Second",[1853,1859,1860],{},"1.067",[1853,1862,1863],{},"Very subtle",[1853,1865,1866],{},"Minimal designs, tight hierarchies",[1832,1868,1869,1874,1877,1880],{},[1853,1870,1871],{},[692,1872,1873],{},"Major Second",[1853,1875,1876],{},"1.125",[1853,1878,1879],{},"Subtle",[1853,1881,1882],{},"Clean, understated designs",[1832,1884,1885,1890,1893,1896],{},[1853,1886,1887],{},[692,1888,1889],{},"Minor Third",[1853,1891,1892],{},"1.2",[1853,1894,1895],{},"Balanced",[1853,1897,1898],{},"Most websites, readable hierarchies",[1832,1900,1901,1906,1909,1912],{},[1853,1902,1903],{},[692,1904,1905],{},"Major Third",[1853,1907,1908],{},"1.25",[1853,1910,1911],{},"Distinct",[1853,1913,1914],{},"Marketing sites, clear hierarchy",[1832,1916,1917,1922,1925,1928],{},[1853,1918,1919],{},[692,1920,1921],{},"Perfect Fourth",[1853,1923,1924],{},"1.333",[1853,1926,1927],{},"Bold",[1853,1929,1930],{},"Editorial content, strong contrast",[1832,1932,1933,1938,1941,1944],{},[1853,1934,1935],{},[692,1936,1937],{},"Perfect Fifth",[1853,1939,1940],{},"1.5",[1853,1942,1943],{},"Dramatic",[1853,1945,1946],{},"Landing pages, hero sections",[1832,1948,1949,1954,1957,1960],{},[1853,1950,1951],{},[692,1952,1953],{},"Golden Ratio",[1853,1955,1956],{},"1.618",[1853,1958,1959],{},"Striking",[1853,1961,1962],{},"Art, design-forward sites",[1353,1964,1966],{"id":1965},"choosing-scale-ratios","Choosing Scale Ratios",[719,1968,1969],{},"Choose different scales for mobile and desktop to optimize readability at different viewport sizes:",[818,1971,1973],{"className":820,"code":1972,"filename":822,"language":823,"meta":824,"style":824},"import { useScaleDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst { scaleMin, scaleMax } = useScaleDesignTokens(s, {\n    min: '@scale.minor-third',   \u002F\u002F Minor Third scale for mobile\n    max: '@scale.major-third'    \u002F\u002F Major Third scale for desktop\n});\n",[702,1974,1975,1995,1999,2013,2017,2041,2058,2073],{"__ignoreMap":824},[828,1976,1977,1979,1981,1983,1985,1987,1989,1991,1993],{"class":830,"line":831},[828,1978,835],{"class":834},[828,1980,839],{"class":838},[828,1982,1518],{"class":842},[828,1984,846],{"class":838},[828,1986,849],{"class":834},[828,1988,852],{"class":838},[828,1990,900],{"class":855},[828,1992,859],{"class":838},[828,1994,862],{"class":838},[828,1996,1997],{"class":830,"line":865},[828,1998,910],{"emptyLinePlaceholder":223},[828,2000,2001,2003,2005,2007,2009,2011],{"class":830,"line":873},[828,2002,917],{"class":916},[828,2004,920],{"class":842},[828,2006,923],{"class":838},[828,2008,843],{"class":926},[828,2010,929],{"class":842},[828,2012,862],{"class":838},[828,2014,2015],{"class":830,"line":882},[828,2016,910],{"emptyLinePlaceholder":223},[828,2018,2019,2021,2023,2025,2027,2029,2031,2033,2035,2037,2039],{"class":830,"line":890},[828,2020,917],{"class":916},[828,2022,839],{"class":838},[828,2024,1506],{"class":842},[828,2026,1008],{"class":838},[828,2028,1511],{"class":842},[828,2030,893],{"class":838},[828,2032,999],{"class":838},[828,2034,1518],{"class":926},[828,2036,1005],{"class":842},[828,2038,1008],{"class":838},[828,2040,870],{"class":838},[828,2042,2043,2045,2047,2049,2051,2053,2055],{"class":830,"line":907},[828,2044,1529],{"class":1016},[828,2046,1020],{"class":838},[828,2048,852],{"class":838},[828,2050,1536],{"class":855},[828,2052,859],{"class":838},[828,2054,1008],{"class":838},[828,2056,2057],{"class":1049},"   \u002F\u002F Minor Third scale for mobile\n",[828,2059,2060,2062,2064,2066,2068,2070],{"class":830,"line":913},[828,2061,1545],{"class":1016},[828,2063,1020],{"class":838},[828,2065,852],{"class":838},[828,2067,1552],{"class":855},[828,2069,859],{"class":838},[828,2071,2072],{"class":1049},"    \u002F\u002F Major Third scale for desktop\n",[828,2074,2075,2077,2079],{"class":830,"line":934},[828,2076,893],{"class":838},[828,2078,1119],{"class":842},[828,2080,862],{"class":838},[1333,2082,2083,2085],{},[692,2084,1337],{}," Use tighter scales (1.125 - 1.25) on mobile to prevent text from becoming too large, and more dramatic scales (1.25 - 1.5) on desktop to enhance visual hierarchy.",[715,2087,2089],{"id":2088},"best-practices","Best Practices",[749,2091,2092,2098,2104,2110,2122,2128],{},[752,2093,2094,2097],{},[692,2095,2096],{},"Choose appropriate base size range",": Keep body text scaling subtle for better readability. 16px to 18px (12.5% increase) is ideal. Avoid extreme ranges like 12px to 20px (67% increase) which harm readability.",[752,2099,2100,2103],{},[692,2101,2102],{},"Use consistent scale ratios",": Stick to proven modular scales. Common combinations include Minor Third to Major Third (1.2 to 1.25), or Minor Third to Perfect Fourth (1.2 to 1.333).",[752,2105,2106,2109],{},[692,2107,2108],{},"Ensure mobile scale is smaller"," than or equal to desktop scale.",[752,2111,2112,2118,2119,2121],{},[692,2113,2114,2115,2117],{},"Always call ",[702,2116,808],{}," first",": Fluid ranges reference ",[702,2120,804],{}," by default.",[752,2123,2124,2127],{},[692,2125,2126],{},"Limit the number of font sizes",": Aim for a smaller number of distinct sizes to maintain clear hierarchy without creating confusion. Too many sizes (12+) lead to inconsistency.",[752,2129,2130,2133],{},[692,2131,2132],{},"Test at multiple viewports",": Verify typography at mobile, tablet, and desktop sizes. Ensure body text remains readable with 45-75 characters per line.",[715,2135,2137],{"id":2136},"faq","FAQ",[2139,2140,2141,2165,2172,2176,2196,2210],"accordion",{},[2142,2143,2146],"accordion-item",{"icon":2144,"label":2145},"i-lucide-circle-help","When should I use ranges vs. useFluidClamp() directly?",[749,2147,2148,2158],{},[752,2149,2150,2151,2154,2155,2157],{},"Use ranges (",[702,2152,2153],{},"md: [16, 18]",") inside ",[702,2156,724],{}," for typography systems — the composable owns the variable name and integrates with the static scale.",[752,2159,2160,2161,2164],{},"Use ",[702,2162,2163],{},"useFluidClamp(s, [min, max])"," directly for one-off fluid values on any CSS property (spacing, border radius, etc.).",[2142,2166,2168,2169,2171],{"icon":2144,"label":2167},"Can I mix fluid and static sizes?","Yes. Pass tuples for fluid keys and plain values for fixed keys in the same ",[702,2170,724],{}," call. Order does not matter and the two forms can interleave.",[2142,2173,2175],{"icon":2144,"label":2174},"How do I choose the right scale ratio?","Start with these guidelines: 1.125-1.2 for minimal hierarchy (minimal designs), 1.2-1.25 for balanced hierarchy (most websites), 1.25-1.333 for strong hierarchy (editorial content), 1.333-1.5 for very bold hierarchy (marketing\u002Flanding pages), and 1.5+ for extreme contrast (use sparingly). The Minor Third (1.2) to Major Third (1.25) combination is a safe starting point. Always test with your actual content and adjust based on visual results.",[2142,2177,2179,2180,2183,2184,2187,2188,2191,2192,2195],{"icon":2144,"label":2178},"How do I handle line heights with fluid typography?","Use fixed line height ratios that scale proportionally with font size. Import ",[702,2181,2182],{},"useLineHeightDesignTokens()"," to get consistent ratios like ",[702,2185,2186],{},"lineHeightTight"," (1.25), ",[702,2189,2190],{},"lineHeightNormal"," (1.5), and ",[702,2193,2194],{},"lineHeightRelaxed"," (1.75). When you apply these to elements with fluid font sizes, the line height automatically scales proportionally, maintaining readable spacing at all viewport sizes without additional calculations.",[2142,2197,2199,2200,2202,2203,709,2206,2209],{"icon":2144,"label":2198},"Does fluid typography work with variable fonts?","Absolutely! Variable fonts work seamlessly with fluid typography. Combine ",[702,2201,724],{}," with ",[702,2204,2205],{},"useFontFamilyDesignTokens()",[702,2207,2208],{},"useFontWeightDesignTokens()"," to create sophisticated typography systems. Variable fonts offer the added benefit of smooth weight transitions and optical sizing adjustments that complement the fluid scaling, resulting in even better typographic quality across viewport sizes.",[2142,2211,2213,2214,2217],{"icon":2144,"label":2212},"What's the recommended viewport range for fluid typography?","The default range of 320px to 1440px works well for most projects, accommodating the smallest mobile devices up to most desktop monitors. You can customize this with ",[702,2215,2216],{},"useFluidViewportDesignTokens(s, { minWidth: 375, maxWidth: 1920 })"," if needed. The key is choosing a range that matches your actual user viewport distribution.",[715,2219,2221],{"id":2220},"next-steps","Next Steps",[749,2223,2224,2237,2244,2251,2260],{},[752,2225,2226,2231,2232,709,2234],{},[692,2227,2228],{},[697,2229,2230],{"href":217},"Clamp Function",": Learn about ",[702,2233,808],{},[702,2235,2236],{},"useFluidClamp()",[752,2238,2239,2243],{},[692,2240,2241],{},[697,2242,225],{"href":226},": Deep dive into modular scales and scale powers",[752,2245,2246,2250],{},[692,2247,2248],{},[697,2249,234],{"href":235},": Explore the static font-size composable and other typography tokens",[752,2252,2253,2259],{},[692,2254,2255],{},[697,2256,2258],{"href":2257},"\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography#uselineheightdesigntokens","Line Height",": Create proportional line heights",[752,2261,2262,2271],{},[692,2263,2264],{},[697,2265,2270],{"href":2266,"rel":2267,"target":2269},"https:\u002F\u002Futopia.fyi\u002F",[2268],"nofollow","_blank","Utopia Fluid Type Scale",": Explore the mathematical foundation behind fluid typography",[2273,2274,2275],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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);}",{"title":824,"searchDepth":865,"depth":865,"links":2277},[2278,2279,2280,2283,2287,2288,2289],{"id":717,"depth":865,"text":78},{"id":743,"depth":865,"text":744},{"id":784,"depth":865,"text":785,"children":2281},[2282],{"id":1355,"depth":873,"text":1356},{"id":1816,"depth":865,"text":1817,"children":2284},[2285,2286],{"id":1823,"depth":873,"text":1824},{"id":1965,"depth":873,"text":1966},{"id":2088,"depth":865,"text":2089},{"id":2136,"depth":865,"text":2137},{"id":2220,"depth":865,"text":2221},"Create fluid typography systems that scale smoothly across viewports using mathematical modular scales and CSS clamp functions.","md",null,{},{"title":220},{"title":684,"description":2290},"kc9NauLEMxXxmFwcZfZFVZbXYRwSL7dTqw9jeA6EFdE",[2298,2300],{"title":216,"path":217,"stem":218,"description":2299,"children":-1},"Create fluid, responsive design tokens that scale smoothly between viewport sizes using auto-generated complex CSS calculations.",{"title":225,"path":226,"stem":227,"description":2301,"icon":35,"children":-1},"Create modular scale systems for typography and spacing using mathematical ratios based on musical intervals and the golden ratio.",1781596325587]