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