[{"data":1,"prerenderedAt":1849},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-composables-fluid-design":407,"-docs-theme-design-tokens-composables-fluid-design-surround":1844},{"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":1836,"extension":1837,"links":1838,"meta":1839,"navigation":1840,"path":194,"seo":1841,"sitemap":1842,"stem":195,"__hash__":1843},"docs_theme/docs/theme/design-tokens/02.composables/07.fluid-design/01.index.md","Fluid Responsive Design",{"type":411,"value":412,"toc":1822},"minimark",[413,416,420,431,434,439,442,488,492,498,501,533,536,540,543,763,766,769,773,776,781,791,951,956,960,963,967,980,1180,1185,1188,1191,1195,1205,1616,1621,1625,1693,1697,1735,1739,1742,1780,1784,1818],[414,415],"pro-notice",{},[417,418,419],"p",{},"Fluid responsive design is a modern approach to creating layouts and typography that scale seamlessly across all screen sizes. Instead of jumping between fixed values at breakpoints, fluid design uses CSS calculation functions with viewport-relative units to create smooth, continuous transitions that adapt perfectly to any viewport width.",[417,421,422,423,430],{},"Styleframe's fluid design system is inspired by the ",[424,425,429],"a",{"href":426,"rel":427},"https://utopia.fyi/",[428],"nofollow","Utopia Fluid Type Scale",", using mathematical principles to calculate optimal sizes that maintain perfect proportions and readability across all devices.",[432,433],"fluid-responsive-design-demo",{},[435,436,438],"h2",{"id":437},"why-use-fluid-design","Why Use Fluid Design?",[417,440,441],{},"Styleframe's fluid design composables offer several advantages over traditional responsive approaches:",[443,444,445,453,459,465,471,482],"ul",{},[446,447,448,452],"li",{},[449,450,451],"strong",{},"Seamless Scaling",": Text and spacing adapt continuously without sudden jumps at breakpoints",[446,454,455,458],{},[449,456,457],{},"Perfect Readability",": Maintains optimal character count and visual hierarchy at every screen size",[446,460,461,464],{},[449,462,463],{},"Reduced Complexity",": Replace dozens of media queries with single fluid calculations",[446,466,467,470],{},[449,468,469],{},"Mathematical Consistency",": Uses proven modular scales for harmonious proportions",[446,472,473,476,477,481],{},[449,474,475],{},"Performance Optimized",": Complex CSS ",[478,479,480],"code",{},"calc()"," functions calculated by the browser at render time",[446,483,484,487],{},[449,485,486],{},"Accessibility Friendly",": Respects user preferences, zoom, and font size settings",[435,489,491],{"id":490},"how-fluid-design-works","How Fluid Design Works",[417,493,494,495,497],{},"Styleframe's fluid design uses CSS ",[478,496,480],{}," functions with custom properties to create smooth scaling between minimum and maximum values. The system calculates a fluid breakpoint variable that represents the current viewport's scale between your min and max widths.",[417,499,500],{},"The fluid calculation considers:",[443,502,503,509,515,521,527],{},[446,504,505,508],{},[449,506,507],{},"Minimum viewport width"," (typically 320px for mobile)",[446,510,511,514],{},[449,512,513],{},"Maximum viewport width"," (typically 1440px for desktop)",[446,516,517,520],{},[449,518,519],{},"Minimum value"," (size at smallest viewport)",[446,522,523,526],{},[449,524,525],{},"Maximum value"," (size at largest viewport)",[446,528,529,532],{},[449,530,531],{},"Fluid breakpoint"," (automatically calculated viewport position)",[417,534,535],{},"The result is a value that scales smoothly and proportionally between the minimum and maximum, adapting in real-time as the viewport changes.",[435,537,539],{"id":538},"comparison-traditional-breakpoints-vs-fluid-responsive-design","Comparison: Traditional Breakpoints vs. Fluid Responsive Design",[417,541,542],{},"See how fluid design eliminates the need for multiple breakpoints by creating smooth, continuous scaling with a single CSS value.",[544,545,546,714],"tabs",{},[547,548,551],"tabs-item",{"icon":549,"label":550},"i-lucide-layout-list","Traditional Responsive",[552,553,559],"pre",{"className":554,"code":555,"filename":556,"language":557,"meta":558,"style":558},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","/* Multiple breakpoints required */\n.heading {\n    font-size: 24px;\n}\n\n@media (min-width: 768px) {\n    .heading { font-size: 28px; }\n}\n\n@media (min-width: 1440px) {\n    .heading { font-size: 32px; }\n}\n","styleframe/index.css","css","",[478,560,561,570,584,601,607,613,636,661,666,671,689,709],{"__ignoreMap":558},[562,563,566],"span",{"class":564,"line":565},"line",1,[562,567,569],{"class":568},"sHwdD","/* Multiple breakpoints required */\n",[562,571,573,577,581],{"class":564,"line":572},2,[562,574,576],{"class":575},"sMK4o",".",[562,578,580],{"class":579},"sBMFI","heading",[562,582,583],{"class":575}," {\n",[562,585,587,591,594,598],{"class":564,"line":586},3,[562,588,590],{"class":589},"sqsOY","    font-size",[562,592,593],{"class":575},":",[562,595,597],{"class":596},"sbssI"," 24px",[562,599,600],{"class":575},";\n",[562,602,604],{"class":564,"line":603},4,[562,605,606],{"class":575},"}\n",[562,608,610],{"class":564,"line":609},5,[562,611,612],{"emptyLinePlaceholder":206},"\n",[562,614,616,620,623,626,628,631,634],{"class":564,"line":615},6,[562,617,619],{"class":618},"s7zQu","@media",[562,621,622],{"class":575}," (",[562,624,625],{"class":579},"min-width",[562,627,593],{"class":575},[562,629,630],{"class":596}," 768px",[562,632,633],{"class":575},")",[562,635,583],{"class":575},[562,637,639,642,644,647,650,652,655,658],{"class":564,"line":638},7,[562,640,641],{"class":575},"    .",[562,643,580],{"class":579},[562,645,646],{"class":575}," {",[562,648,649],{"class":589}," font-size",[562,651,593],{"class":575},[562,653,654],{"class":596}," 28px",[562,656,657],{"class":575},";",[562,659,660],{"class":575}," }\n",[562,662,664],{"class":564,"line":663},8,[562,665,606],{"class":575},[562,667,669],{"class":564,"line":668},9,[562,670,612],{"emptyLinePlaceholder":206},[562,672,674,676,678,680,682,685,687],{"class":564,"line":673},10,[562,675,619],{"class":618},[562,677,622],{"class":575},[562,679,625],{"class":579},[562,681,593],{"class":575},[562,683,684],{"class":596}," 1440px",[562,686,633],{"class":575},[562,688,583],{"class":575},[562,690,692,694,696,698,700,702,705,707],{"class":564,"line":691},11,[562,693,641],{"class":575},[562,695,580],{"class":579},[562,697,646],{"class":575},[562,699,649],{"class":589},[562,701,593],{"class":575},[562,703,704],{"class":596}," 32px",[562,706,657],{"class":575},[562,708,660],{"class":575},[562,710,712],{"class":564,"line":711},12,[562,713,606],{"class":575},[547,715,718],{"icon":716,"label":717},"i-lucide-waves","Fluid Responsive",[552,719,721],{"className":554,"code":720,"filename":556,"language":557,"meta":558,"style":558},"/* Single fluid value */\n.heading {\n    font-size: var(--font-size--xl); /* Smooth scaling from 24px to 32px */\n}\n",[478,722,723,728,736,759],{"__ignoreMap":558},[562,724,725],{"class":564,"line":565},[562,726,727],{"class":568},"/* Single fluid value */\n",[562,729,730,732,734],{"class":564,"line":572},[562,731,576],{"class":575},[562,733,580],{"class":579},[562,735,583],{"class":575},[562,737,738,740,742,746,749,753,756],{"class":564,"line":586},[562,739,590],{"class":589},[562,741,593],{"class":575},[562,743,745],{"class":744},"s2Zo4"," var",[562,747,748],{"class":575},"(",[562,750,752],{"class":751},"sTEyZ","--font-size--xl",[562,754,755],{"class":575},");",[562,757,758],{"class":568}," /* Smooth scaling from 24px to 32px */\n",[562,760,761],{"class":564,"line":603},[562,762,606],{"class":575},[435,764,132],{"id":765},"composables",[417,767,768],{},"These composables enable you to create smooth, viewport-responsive sizing without breakpoints.",[770,771,199],"h3",{"id":772},"fluid-viewport",[417,774,775],{},"Establish the viewport range for all fluid calculations in your design system.",[417,777,778],{},[449,779,780],{},"Available composables:",[443,782,783],{},[446,784,785,790],{},[449,786,787],{},[478,788,789],{},"useFluidViewport()",": Define minimum and maximum viewport widths and calculate the fluid breakpoint variable",[552,792,797],{"className":793,"code":794,"filename":795,"language":796,"meta":558,"style":558},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useFluidViewport } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Use defaults (320px - 1440px)\nuseFluidViewport(s);\n\n// Or customize the range\nuseFluidViewport(s, {\n    minWidth: 375,  // Start scaling at 375px\n    maxWidth: 1920  // Stop scaling at 1920px\n});\n","styleframe.config.ts","ts",[478,798,799,827,849,853,872,876,881,891,895,900,912,928,941],{"__ignoreMap":558},[562,800,801,804,806,809,812,815,818,822,825],{"class":564,"line":565},[562,802,803],{"class":618},"import",[562,805,646],{"class":575},[562,807,808],{"class":751}," styleframe",[562,810,811],{"class":575}," }",[562,813,814],{"class":618}," from",[562,816,817],{"class":575}," '",[562,819,821],{"class":820},"sfazB","styleframe",[562,823,824],{"class":575},"'",[562,826,600],{"class":575},[562,828,829,831,833,836,838,840,842,845,847],{"class":564,"line":572},[562,830,803],{"class":618},[562,832,646],{"class":575},[562,834,835],{"class":751}," useFluidViewport",[562,837,811],{"class":575},[562,839,814],{"class":618},[562,841,817],{"class":575},[562,843,844],{"class":820},"@styleframe/theme",[562,846,824],{"class":575},[562,848,600],{"class":575},[562,850,851],{"class":564,"line":586},[562,852,612],{"emptyLinePlaceholder":206},[562,854,855,859,862,865,867,870],{"class":564,"line":603},[562,856,858],{"class":857},"spNyl","const",[562,860,861],{"class":751}," s ",[562,863,864],{"class":575},"=",[562,866,808],{"class":744},[562,868,869],{"class":751},"()",[562,871,600],{"class":575},[562,873,874],{"class":564,"line":609},[562,875,612],{"emptyLinePlaceholder":206},[562,877,878],{"class":564,"line":615},[562,879,880],{"class":568},"// Use defaults (320px - 1440px)\n",[562,882,883,886,889],{"class":564,"line":638},[562,884,885],{"class":744},"useFluidViewport",[562,887,888],{"class":751},"(s)",[562,890,600],{"class":575},[562,892,893],{"class":564,"line":663},[562,894,612],{"emptyLinePlaceholder":206},[562,896,897],{"class":564,"line":668},[562,898,899],{"class":568},"// Or customize the range\n",[562,901,902,904,907,910],{"class":564,"line":673},[562,903,885],{"class":744},[562,905,906],{"class":751},"(s",[562,908,909],{"class":575},",",[562,911,583],{"class":575},[562,913,914,918,920,923,925],{"class":564,"line":691},[562,915,917],{"class":916},"swJcz","    minWidth",[562,919,593],{"class":575},[562,921,922],{"class":596}," 375",[562,924,909],{"class":575},[562,926,927],{"class":568},"  // Start scaling at 375px\n",[562,929,930,933,935,938],{"class":564,"line":711},[562,931,932],{"class":916},"    maxWidth",[562,934,593],{"class":575},[562,936,937],{"class":596}," 1920",[562,939,940],{"class":568},"  // Stop scaling at 1920px\n",[562,942,944,947,949],{"class":564,"line":943},13,[562,945,946],{"class":575},"}",[562,948,633],{"class":751},[562,950,600],{"class":575},[417,952,953],{},[424,954,955],{"href":200},"Learn more about the Fluid Viewport →",[770,957,959],{"id":958},"clamp-function","Clamp Function",[417,961,962],{},"Create individual fluid values using clamp calculations for any CSS property.",[417,964,965],{},[449,966,780],{},[443,968,969],{},[446,970,971,976,977,979],{},[449,972,973],{},[478,974,975],{},"useFluidClamp()",": Generate fluid ",[478,978,480],{}," calculations for custom properties",[552,981,983],{"className":793,"code":982,"filename":795,"language":796,"meta":558,"style":558},"import { styleframe } from 'styleframe';\nimport { useSpacingDesignTokens } from '@styleframe/theme';\nimport { useFluidViewport, useFluidClamp } from '@styleframe/pro';\n\nconst s = styleframe();\nconst { variable } = s;\n\nuseFluidViewport(s);\n\n// Create a fluid spacing variable\nconst { spacingLg } = useSpacingDesignTokens(s, {\n    lg: useFluidClamp(s, { min: 24, max: 48 }) // Scales from 24px to 48px\n});\n",[478,984,985,1005,1026,1052,1056,1070,1089,1093,1101,1105,1110,1131,1172],{"__ignoreMap":558},[562,986,987,989,991,993,995,997,999,1001,1003],{"class":564,"line":565},[562,988,803],{"class":618},[562,990,646],{"class":575},[562,992,808],{"class":751},[562,994,811],{"class":575},[562,996,814],{"class":618},[562,998,817],{"class":575},[562,1000,821],{"class":820},[562,1002,824],{"class":575},[562,1004,600],{"class":575},[562,1006,1007,1009,1011,1014,1016,1018,1020,1022,1024],{"class":564,"line":572},[562,1008,803],{"class":618},[562,1010,646],{"class":575},[562,1012,1013],{"class":751}," useSpacingDesignTokens",[562,1015,811],{"class":575},[562,1017,814],{"class":618},[562,1019,817],{"class":575},[562,1021,844],{"class":820},[562,1023,824],{"class":575},[562,1025,600],{"class":575},[562,1027,1028,1030,1032,1034,1036,1039,1041,1043,1045,1048,1050],{"class":564,"line":586},[562,1029,803],{"class":618},[562,1031,646],{"class":575},[562,1033,835],{"class":751},[562,1035,909],{"class":575},[562,1037,1038],{"class":751}," useFluidClamp",[562,1040,811],{"class":575},[562,1042,814],{"class":618},[562,1044,817],{"class":575},[562,1046,1047],{"class":820},"@styleframe/pro",[562,1049,824],{"class":575},[562,1051,600],{"class":575},[562,1053,1054],{"class":564,"line":603},[562,1055,612],{"emptyLinePlaceholder":206},[562,1057,1058,1060,1062,1064,1066,1068],{"class":564,"line":609},[562,1059,858],{"class":857},[562,1061,861],{"class":751},[562,1063,864],{"class":575},[562,1065,808],{"class":744},[562,1067,869],{"class":751},[562,1069,600],{"class":575},[562,1071,1072,1074,1076,1079,1081,1084,1087],{"class":564,"line":615},[562,1073,858],{"class":857},[562,1075,646],{"class":575},[562,1077,1078],{"class":751}," variable ",[562,1080,946],{"class":575},[562,1082,1083],{"class":575}," =",[562,1085,1086],{"class":751}," s",[562,1088,600],{"class":575},[562,1090,1091],{"class":564,"line":638},[562,1092,612],{"emptyLinePlaceholder":206},[562,1094,1095,1097,1099],{"class":564,"line":663},[562,1096,885],{"class":744},[562,1098,888],{"class":751},[562,1100,600],{"class":575},[562,1102,1103],{"class":564,"line":668},[562,1104,612],{"emptyLinePlaceholder":206},[562,1106,1107],{"class":564,"line":673},[562,1108,1109],{"class":568},"// Create a fluid spacing variable\n",[562,1111,1112,1114,1116,1119,1121,1123,1125,1127,1129],{"class":564,"line":691},[562,1113,858],{"class":857},[562,1115,646],{"class":575},[562,1117,1118],{"class":751}," spacingLg ",[562,1120,946],{"class":575},[562,1122,1083],{"class":575},[562,1124,1013],{"class":744},[562,1126,906],{"class":751},[562,1128,909],{"class":575},[562,1130,583],{"class":575},[562,1132,1133,1136,1138,1140,1142,1144,1146,1149,1151,1154,1156,1159,1161,1164,1166,1169],{"class":564,"line":711},[562,1134,1135],{"class":916},"    lg",[562,1137,593],{"class":575},[562,1139,1038],{"class":744},[562,1141,906],{"class":751},[562,1143,909],{"class":575},[562,1145,646],{"class":575},[562,1147,1148],{"class":916}," min",[562,1150,593],{"class":575},[562,1152,1153],{"class":596}," 24",[562,1155,909],{"class":575},[562,1157,1158],{"class":916}," max",[562,1160,593],{"class":575},[562,1162,1163],{"class":596}," 48",[562,1165,811],{"class":575},[562,1167,1168],{"class":751},") ",[562,1170,1171],{"class":568},"// Scales from 24px to 48px\n",[562,1173,1174,1176,1178],{"class":564,"line":943},[562,1175,946],{"class":575},[562,1177,633],{"class":751},[562,1179,600],{"class":575},[417,1181,1182],{},[424,1183,1184],{"href":200},"Learn more about Clamp Functions →",[770,1186,203],{"id":1187},"fluid-typography",[417,1189,1190],{},"Generate complete fluid typography scales with mathematical precision using modular scales.",[417,1192,1193],{},[449,1194,780],{},[443,1196,1197],{},[446,1198,1199,1204],{},[449,1200,1201],{},[478,1202,1203],{},"useFluidFontSize()",": Create fluid font size systems that scale across viewport sizes",[552,1206,1208],{"className":793,"code":1207,"filename":795,"language":796,"meta":558,"style":558},"import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens, useScalePowersDesignTokens } from '@styleframe/theme';\nimport { useFluidViewport, useFluidFontSize } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { fluidBreakpoint } = useFluidViewport(s);\n\nconst { scaleMinorThird, scaleMajorThird } = useScaleDesignTokens(s);\n\nconst scaleMinPowers = useScalePowersDesignTokens(s, scaleMinorThird);\nconst scaleMaxPowers = useScalePowersDesignTokens(s, scaleMajorThird);\n\nconst { fontSize, fontSizeSm, fontSizeMd, fontSizeLg } = useFluidFontSize(s, \n    { min: 16, max: 18 },\n    {\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        default: '@font-size.md'\n    },\n    fluidBreakpoint\n);\n",[478,1209,1210,1230,1256,1281,1285,1299,1303,1322,1326,1350,1354,1374,1394,1398,1436,1461,1467,1512,1547,1581,1597,1603,1609],{"__ignoreMap":558},[562,1211,1212,1214,1216,1218,1220,1222,1224,1226,1228],{"class":564,"line":565},[562,1213,803],{"class":618},[562,1215,646],{"class":575},[562,1217,808],{"class":751},[562,1219,811],{"class":575},[562,1221,814],{"class":618},[562,1223,817],{"class":575},[562,1225,821],{"class":820},[562,1227,824],{"class":575},[562,1229,600],{"class":575},[562,1231,1232,1234,1236,1239,1241,1244,1246,1248,1250,1252,1254],{"class":564,"line":572},[562,1233,803],{"class":618},[562,1235,646],{"class":575},[562,1237,1238],{"class":751}," useScaleDesignTokens",[562,1240,909],{"class":575},[562,1242,1243],{"class":751}," useScalePowersDesignTokens",[562,1245,811],{"class":575},[562,1247,814],{"class":618},[562,1249,817],{"class":575},[562,1251,844],{"class":820},[562,1253,824],{"class":575},[562,1255,600],{"class":575},[562,1257,1258,1260,1262,1264,1266,1269,1271,1273,1275,1277,1279],{"class":564,"line":586},[562,1259,803],{"class":618},[562,1261,646],{"class":575},[562,1263,835],{"class":751},[562,1265,909],{"class":575},[562,1267,1268],{"class":751}," useFluidFontSize",[562,1270,811],{"class":575},[562,1272,814],{"class":618},[562,1274,817],{"class":575},[562,1276,844],{"class":820},[562,1278,824],{"class":575},[562,1280,600],{"class":575},[562,1282,1283],{"class":564,"line":603},[562,1284,612],{"emptyLinePlaceholder":206},[562,1286,1287,1289,1291,1293,1295,1297],{"class":564,"line":609},[562,1288,858],{"class":857},[562,1290,861],{"class":751},[562,1292,864],{"class":575},[562,1294,808],{"class":744},[562,1296,869],{"class":751},[562,1298,600],{"class":575},[562,1300,1301],{"class":564,"line":615},[562,1302,612],{"emptyLinePlaceholder":206},[562,1304,1305,1307,1309,1312,1314,1316,1318,1320],{"class":564,"line":638},[562,1306,858],{"class":857},[562,1308,646],{"class":575},[562,1310,1311],{"class":751}," fluidBreakpoint ",[562,1313,946],{"class":575},[562,1315,1083],{"class":575},[562,1317,835],{"class":744},[562,1319,888],{"class":751},[562,1321,600],{"class":575},[562,1323,1324],{"class":564,"line":663},[562,1325,612],{"emptyLinePlaceholder":206},[562,1327,1328,1330,1332,1335,1337,1340,1342,1344,1346,1348],{"class":564,"line":668},[562,1329,858],{"class":857},[562,1331,646],{"class":575},[562,1333,1334],{"class":751}," scaleMinorThird",[562,1336,909],{"class":575},[562,1338,1339],{"class":751}," scaleMajorThird ",[562,1341,946],{"class":575},[562,1343,1083],{"class":575},[562,1345,1238],{"class":744},[562,1347,888],{"class":751},[562,1349,600],{"class":575},[562,1351,1352],{"class":564,"line":673},[562,1353,612],{"emptyLinePlaceholder":206},[562,1355,1356,1358,1361,1363,1365,1367,1369,1372],{"class":564,"line":691},[562,1357,858],{"class":857},[562,1359,1360],{"class":751}," scaleMinPowers ",[562,1362,864],{"class":575},[562,1364,1243],{"class":744},[562,1366,906],{"class":751},[562,1368,909],{"class":575},[562,1370,1371],{"class":751}," scaleMinorThird)",[562,1373,600],{"class":575},[562,1375,1376,1378,1381,1383,1385,1387,1389,1392],{"class":564,"line":711},[562,1377,858],{"class":857},[562,1379,1380],{"class":751}," scaleMaxPowers ",[562,1382,864],{"class":575},[562,1384,1243],{"class":744},[562,1386,906],{"class":751},[562,1388,909],{"class":575},[562,1390,1391],{"class":751}," scaleMajorThird)",[562,1393,600],{"class":575},[562,1395,1396],{"class":564,"line":943},[562,1397,612],{"emptyLinePlaceholder":206},[562,1399,1401,1403,1405,1408,1410,1413,1415,1418,1420,1423,1425,1427,1429,1431,1433],{"class":564,"line":1400},14,[562,1402,858],{"class":857},[562,1404,646],{"class":575},[562,1406,1407],{"class":751}," fontSize",[562,1409,909],{"class":575},[562,1411,1412],{"class":751}," fontSizeSm",[562,1414,909],{"class":575},[562,1416,1417],{"class":751}," fontSizeMd",[562,1419,909],{"class":575},[562,1421,1422],{"class":751}," fontSizeLg ",[562,1424,946],{"class":575},[562,1426,1083],{"class":575},[562,1428,1268],{"class":744},[562,1430,906],{"class":751},[562,1432,909],{"class":575},[562,1434,1435],{"class":751}," \n",[562,1437,1439,1442,1444,1446,1449,1451,1453,1455,1458],{"class":564,"line":1438},15,[562,1440,1441],{"class":575},"    {",[562,1443,1148],{"class":916},[562,1445,593],{"class":575},[562,1447,1448],{"class":596}," 16",[562,1450,909],{"class":575},[562,1452,1158],{"class":916},[562,1454,593],{"class":575},[562,1456,1457],{"class":596}," 18",[562,1459,1460],{"class":575}," },\n",[562,1462,1464],{"class":564,"line":1463},16,[562,1465,1466],{"class":575},"    {\n",[562,1468,1470,1473,1475,1477,1479,1481,1484,1487,1490,1493,1495,1497,1499,1502,1504,1506,1509],{"class":564,"line":1469},17,[562,1471,1472],{"class":916},"        sm",[562,1474,593],{"class":575},[562,1476,646],{"class":575},[562,1478,1148],{"class":916},[562,1480,593],{"class":575},[562,1482,1483],{"class":751}," scaleMinPowers[",[562,1485,1486],{"class":575},"-",[562,1488,1489],{"class":596},"1",[562,1491,1492],{"class":751},"]",[562,1494,909],{"class":575},[562,1496,1158],{"class":916},[562,1498,593],{"class":575},[562,1500,1501],{"class":751}," scaleMaxPowers[",[562,1503,1486],{"class":575},[562,1505,1489],{"class":596},[562,1507,1508],{"class":751},"] ",[562,1510,1511],{"class":575},"},\n",[562,1513,1515,1518,1520,1522,1524,1526,1528,1531,1533,1535,1537,1539,1541,1543,1545],{"class":564,"line":1514},18,[562,1516,1517],{"class":916},"        md",[562,1519,593],{"class":575},[562,1521,646],{"class":575},[562,1523,1148],{"class":916},[562,1525,593],{"class":575},[562,1527,1483],{"class":751},[562,1529,1530],{"class":596},"0",[562,1532,1492],{"class":751},[562,1534,909],{"class":575},[562,1536,1158],{"class":916},[562,1538,593],{"class":575},[562,1540,1501],{"class":751},[562,1542,1530],{"class":596},[562,1544,1508],{"class":751},[562,1546,1511],{"class":575},[562,1548,1550,1553,1555,1557,1559,1561,1563,1565,1567,1569,1571,1573,1575,1577,1579],{"class":564,"line":1549},19,[562,1551,1552],{"class":916},"        lg",[562,1554,593],{"class":575},[562,1556,646],{"class":575},[562,1558,1148],{"class":916},[562,1560,593],{"class":575},[562,1562,1483],{"class":751},[562,1564,1489],{"class":596},[562,1566,1492],{"class":751},[562,1568,909],{"class":575},[562,1570,1158],{"class":916},[562,1572,593],{"class":575},[562,1574,1501],{"class":751},[562,1576,1489],{"class":596},[562,1578,1508],{"class":751},[562,1580,1511],{"class":575},[562,1582,1584,1587,1589,1591,1594],{"class":564,"line":1583},20,[562,1585,1586],{"class":916},"        default",[562,1588,593],{"class":575},[562,1590,817],{"class":575},[562,1592,1593],{"class":820},"@font-size.md",[562,1595,1596],{"class":575},"'\n",[562,1598,1600],{"class":564,"line":1599},21,[562,1601,1602],{"class":575},"    },\n",[562,1604,1606],{"class":564,"line":1605},22,[562,1607,1608],{"class":751},"    fluidBreakpoint\n",[562,1610,1612,1614],{"class":564,"line":1611},23,[562,1613,633],{"class":751},[562,1615,600],{"class":575},[417,1617,1618],{},[424,1619,1620],{"href":204},"Learn more about Fluid Typography →",[435,1622,1624],{"id":1623},"fluid-design-reference","Fluid Design Reference",[1626,1627,1628,1644],"table",{},[1629,1630,1631],"thead",{},[1632,1633,1634,1638,1641],"tr",{},[1635,1636,1637],"th",{},"Composable",[1635,1639,1640],{},"Purpose",[1635,1642,1643],{},"Use Case",[1645,1646,1647,1662,1679],"tbody",{},[1632,1648,1649,1656,1659],{},[1650,1651,1652],"td",{},[449,1653,1654],{},[478,1655,789],{},[1650,1657,1658],{},"Set up fluid viewport ranges and breakpoint",[1650,1660,1661],{},"Define min/max viewport widths",[1632,1663,1664,1670,1676],{},[1650,1665,1666],{},[449,1667,1668],{},[478,1669,975],{},[1650,1671,1672,1673,1675],{},"Create fluid ",[478,1674,480],{}," calculations",[1650,1677,1678],{},"Custom fluid properties (spacing, sizing)",[1632,1680,1681,1687,1690],{},[1650,1682,1683],{},[449,1684,1685],{},[478,1686,1203],{},[1650,1688,1689],{},"Generate fluid typography scales",[1650,1691,1692],{},"Complete fluid type systems",[435,1694,1696],{"id":1695},"best-practices","Best Practices",[443,1698,1699,1705,1711,1717,1723,1729],{},[446,1700,1701,1704],{},[449,1702,1703],{},"Start with sensible ranges",": Choose viewport ranges that match your target devices (typically 320px-1440px)",[446,1706,1707,1710],{},[449,1708,1709],{},"Use consistent scales",": Stick to proven modular scales (Minor Third, Major Third, etc.) for harmonious results",[446,1712,1713,1716],{},[449,1714,1715],{},"Test thoroughly",": Fluid design looks different at every width—test at multiple viewport sizes",[446,1718,1719,1722],{},[449,1720,1721],{},"Combine with media queries",": Use fluid sizing with breakpoint-based layout changes",[446,1724,1725,1728],{},[449,1726,1727],{},"Document your decisions",": Explain your scale choices and viewport ranges in your theme",[446,1730,1731,1734],{},[449,1732,1733],{},"Keep it simple",": Not every property needs to be fluid—focus on typography and spacing first",[435,1736,1738],{"id":1737},"next-steps","Next Steps",[417,1740,1741],{},"Ready to implement fluid design? Start with these guides:",[443,1743,1744,1753,1762,1771],{},[446,1745,1746,1749,1750,1752],{},[449,1747,1748],{},"New to fluid design?"," Begin with ",[424,1751,959],{"href":200}," to understand the foundation",[446,1754,1755,1758,1759,1761],{},[449,1756,1757],{},"Building fluid typography?"," Check out ",[424,1760,203],{"href":204}," for complete type systems",[446,1763,1764,1767,1768,1770],{},[449,1765,1766],{},"Want mathematical consistency?"," Learn about ",[424,1769,208],{"href":209}," for harmonious proportions",[446,1772,1773,1776,1777,1779],{},[449,1774,1775],{},"Combining with fixed tokens?"," Explore ",[424,1778,216],{"href":217}," for hybrid approaches",[435,1781,1783],{"id":1782},"resources","Resources",[443,1785,1786,1794,1804],{},[446,1787,1788,1793],{},[449,1789,1790],{},[424,1791,429],{"href":426,"rel":1792},[428],": The inspiration for Styleframe's fluid design system",[446,1795,1796,1803],{},[449,1797,1798],{},[424,1799,1802],{"href":1800,"rel":1801},"https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/",[428],"Modern Fluid Typography",": Deep dive into fluid typography techniques",[446,1805,1806,1813,1814,1817],{},[449,1807,1808],{},[424,1809,1812],{"href":1810,"rel":1811},"https://developer.mozilla.org/en-US/docs/Web/CSS/clamp",[428],"CSS Clamp",": MDN documentation on the ",[478,1815,1816],{},"clamp()"," function",[1819,1820,1821],"style",{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":558,"searchDepth":572,"depth":572,"links":1823},[1824,1825,1826,1827,1832,1833,1834,1835],{"id":437,"depth":572,"text":438},{"id":490,"depth":572,"text":491},{"id":538,"depth":572,"text":539},{"id":765,"depth":572,"text":132,"children":1828},[1829,1830,1831],{"id":772,"depth":586,"text":199},{"id":958,"depth":586,"text":959},{"id":1187,"depth":586,"text":203},{"id":1623,"depth":572,"text":1624},{"id":1695,"depth":572,"text":1696},{"id":1737,"depth":572,"text":1738},{"id":1782,"depth":572,"text":1783},"Create fluid, responsive designs that scale smoothly across all viewport sizes using mathematical precision. Based on the Utopia fluid type scale for optimal readability without breakpoints.","md",null,{},{"title":64},{"title":409,"description":1836},{"loc":194},"HdTEd5PAQiSVXkz3AvjyM9-czHh0hSwqrK0zuzRJNSk",[1845,1847],{"title":189,"path":190,"stem":191,"description":1846,"icon":7,"children":-1},"Create and manage easing design tokens with CSS variables for consistent animation timing across your application.",{"title":199,"path":200,"stem":201,"description":1848,"children":-1},"Create fluid, responsive design tokens that scale smoothly between viewport sizes using auto-generated complex CSS calculations.",1776621128433]