[{"data":1,"prerenderedAt":4622},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-composables-fluid-design-viewport":407,"-docs-theme-design-tokens-composables-fluid-design-viewport-surround":4617},{"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":4609,"extension":4610,"links":4611,"meta":4612,"navigation":4613,"path":200,"seo":4614,"sitemap":4615,"stem":201,"__hash__":4616},"docs_theme/docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport.md","Fluid Responsive Design - Viewport",{"type":411,"value":412,"toc":4588},"minimark",[413,416,420,424,428,431,466,473,479,484,487,737,740,784,794,798,804,860,863,867,870,1099,1105,1110,1114,1117,1489,1493,1496,1742,1746,1749,2167,2170,2383,2387,2391,2394,3395,3399,3402,4010,4014,4017,4413,4417,4493,4503,4507,4584],[414,415],"pro-notice",{},[417,418,64],"h2",{"id":419},"overview",[421,422,423],"p",{},"The viewport composables provide the foundation for fluid responsive design in Styleframe. They handle the mathematical calculations that make values scale smoothly between minimum and maximum viewport widths without using media queries, creating truly fluid interfaces that adapt seamlessly to any screen size.",[417,425,427],{"id":426},"why-use-viewport-composables","Why use viewport composables?",[421,429,430],{},"Viewport composables help you:",[432,433,434,442,448,454,460],"ul",{},[435,436,437,441],"li",{},[438,439,440],"strong",{},"Eliminate media query clutter",": Create values that scale smoothly without breakpoint-based jumps.",[435,443,444,447],{},[438,445,446],{},"Ensure consistent scaling",": All fluid values use the same viewport range for predictable behavior.",[435,449,450,453],{},[438,451,452],{},"Simplify responsive design",": Define min/max values and let the browser handle interpolation.",[435,455,456,459],{},[438,457,458],{},"Improve maintainability",": Change your viewport range once to update all fluid calculations.",[435,461,462,465],{},[438,463,464],{},"Create harmonious scaling",": Values transition smoothly in perfect proportion to the viewport size.",[417,467,469],{"id":468},"usefluidviewport",[470,471,472],"code",{},"useFluidViewport()",[421,474,475,476,478],{},"The ",[470,477,472],{}," composable establishes the viewport range for all fluid calculations in your theme. It creates four essential CSS variables that serve as the foundation for fluid design tokens.",[480,481,483],"h3",{"id":482},"default-viewport-range","Default Viewport Range",[421,485,486],{},"Styleframe provides a carefully chosen default viewport range that covers most common devices:",[488,489,490,654],"tabs",{},[491,492,495],"tabs-item",{"icon":493,"label":494},"i-lucide-code","Code",[496,497,503],"pre",{"className":498,"code":499,"filename":500,"language":501,"meta":502,"style":502},"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\nconst { fluidMinWidth, fluidMaxWidth, fluidScreen, fluidBreakpoint } = useFluidViewport(s);\n\nexport default s;\n","styleframe.config.ts","ts","",[470,504,505,541,564,570,591,596,635,640],{"__ignoreMap":502},[506,507,510,514,518,522,525,528,531,535,538],"span",{"class":508,"line":509},"line",1,[506,511,513],{"class":512},"s7zQu","import",[506,515,517],{"class":516},"sMK4o"," {",[506,519,521],{"class":520},"sTEyZ"," styleframe",[506,523,524],{"class":516}," }",[506,526,527],{"class":512}," from",[506,529,530],{"class":516}," '",[506,532,534],{"class":533},"sfazB","styleframe",[506,536,537],{"class":516},"'",[506,539,540],{"class":516},";\n",[506,542,544,546,548,551,553,555,557,560,562],{"class":508,"line":543},2,[506,545,513],{"class":512},[506,547,517],{"class":516},[506,549,550],{"class":520}," useFluidViewport",[506,552,524],{"class":516},[506,554,527],{"class":512},[506,556,530],{"class":516},[506,558,559],{"class":533},"@styleframe/theme",[506,561,537],{"class":516},[506,563,540],{"class":516},[506,565,567],{"class":508,"line":566},3,[506,568,569],{"emptyLinePlaceholder":206},"\n",[506,571,573,577,580,583,586,589],{"class":508,"line":572},4,[506,574,576],{"class":575},"spNyl","const",[506,578,579],{"class":520}," s ",[506,581,582],{"class":516},"=",[506,584,521],{"class":585},"s2Zo4",[506,587,588],{"class":520},"()",[506,590,540],{"class":516},[506,592,594],{"class":508,"line":593},5,[506,595,569],{"emptyLinePlaceholder":206},[506,597,599,601,603,606,609,612,614,617,619,622,625,628,630,633],{"class":508,"line":598},6,[506,600,576],{"class":575},[506,602,517],{"class":516},[506,604,605],{"class":520}," fluidMinWidth",[506,607,608],{"class":516},",",[506,610,611],{"class":520}," fluidMaxWidth",[506,613,608],{"class":516},[506,615,616],{"class":520}," fluidScreen",[506,618,608],{"class":516},[506,620,621],{"class":520}," fluidBreakpoint ",[506,623,624],{"class":516},"}",[506,626,627],{"class":516}," =",[506,629,550],{"class":585},[506,631,632],{"class":520},"(s)",[506,634,540],{"class":516},[506,636,638],{"class":508,"line":637},7,[506,639,569],{"emptyLinePlaceholder":206},[506,641,643,646,649,652],{"class":508,"line":642},8,[506,644,645],{"class":512},"export",[506,647,648],{"class":512}," default",[506,650,651],{"class":520}," s",[506,653,540],{"class":516},[491,655,657],{"icon":140,"label":656},"Output",[496,658,663],{"className":659,"code":660,"filename":661,"language":662,"meta":502,"style":502},"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}\n","styleframe/index.css","css",[470,664,665,676,689,701,713,732],{"__ignoreMap":502},[506,666,667,670,673],{"class":508,"line":509},[506,668,669],{"class":516},":",[506,671,672],{"class":575},"root",[506,674,675],{"class":516}," {\n",[506,677,678,681,683,687],{"class":508,"line":543},[506,679,680],{"class":520},"    --fluid--min-width",[506,682,669],{"class":516},[506,684,686],{"class":685},"sbssI"," 320",[506,688,540],{"class":516},[506,690,691,694,696,699],{"class":508,"line":566},[506,692,693],{"class":520},"    --fluid--max-width",[506,695,669],{"class":516},[506,697,698],{"class":685}," 1440",[506,700,540],{"class":516},[506,702,703,706,708,711],{"class":508,"line":572},[506,704,705],{"class":520},"    --fluid--screen",[506,707,669],{"class":516},[506,709,710],{"class":685}," 100vw",[506,712,540],{"class":516},[506,714,715,718,720,723,726,729],{"class":508,"line":593},[506,716,717],{"class":520},"    --fluid--breakpoint",[506,719,669],{"class":516},[506,721,722],{"class":585}," calc",[506,724,725],{"class":516},"(",[506,727,728],{"class":520},"...",[506,730,731],{"class":516},");\n",[506,733,734],{"class":508,"line":598},[506,735,736],{"class":516},"}\n",[421,738,739],{},"The default values provide:",[432,741,742,754,765,776],{},[435,743,744,749,750,753],{},[438,745,746],{},[470,747,748],{},"minWidth",": ",[470,751,752],{},"320"," - Covers small mobile devices (iPhone SE)",[435,755,756,749,761,764],{},[438,757,758],{},[470,759,760],{},"maxWidth",[470,762,763],{},"1440"," - Covers standard laptops and smaller desktops",[435,766,767,749,772,775],{},[438,768,769],{},[470,770,771],{},"screen",[470,773,774],{},"100vw"," - The current viewport width",[435,777,778,783],{},[438,779,780],{},[470,781,782],{},"breakpoint",": Calculated - Normalized progress value from 0 to 1",[785,786,787,790,791,793],"tip",{},[438,788,789],{},"Pro tip:"," Call ",[470,792,472],{}," once at the beginning of your theme configuration. All other fluid composables will automatically reference these viewport variables.",[480,795,797],{"id":796},"understanding-the-breakpoint-variable","Understanding the Breakpoint Variable",[421,799,475,800,803],{},[470,801,802],{},"fluidBreakpoint"," variable is the key to fluid scaling. It represents the current viewport's position between minimum and maximum widths as a decimal value:",[805,806,807,823],"table",{},[808,809,810],"thead",{},[811,812,813,817,820],"tr",{},[814,815,816],"th",{},"Viewport Width",[814,818,819],{},"Breakpoint Value",[814,821,822],{},"Percentage",[824,825,826,838,849],"tbody",{},[811,827,828,832,835],{},[829,830,831],"td",{},"320px (min)",[829,833,834],{},"0",[829,836,837],{},"0% through range",[811,839,840,843,846],{},[829,841,842],{},"880px (middle)",[829,844,845],{},"0.5",[829,847,848],{},"50% through range",[811,850,851,854,857],{},[829,852,853],{},"1440px (max)",[829,855,856],{},"1",[829,858,859],{},"100% through range",[421,861,862],{},"This normalized value makes it easy to interpolate between any min/max value pair.",[480,864,866],{"id":865},"customizing-the-viewport-range","Customizing the Viewport Range",[421,868,869],{},"You can customize the viewport range to match your design requirements:",[488,871,872,1036],{},[491,873,874],{"icon":493,"label":494},[496,875,877],{"className":498,"code":876,"filename":500,"language":501,"meta":502,"style":502},"import { styleframe } from 'styleframe';\nimport { useFluidViewport } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Custom viewport range for tablet-to-desktop\nconst { fluidMinWidth, fluidMaxWidth, fluidScreen, fluidBreakpoint } = useFluidViewport(s, {\n    minWidth: 768,   // Start scaling at tablet size\n    maxWidth: 1920   // Stop scaling at large desktop\n});\n\nexport default s;\n",[470,878,879,899,919,923,937,941,947,980,996,1010,1020,1025],{"__ignoreMap":502},[506,880,881,883,885,887,889,891,893,895,897],{"class":508,"line":509},[506,882,513],{"class":512},[506,884,517],{"class":516},[506,886,521],{"class":520},[506,888,524],{"class":516},[506,890,527],{"class":512},[506,892,530],{"class":516},[506,894,534],{"class":533},[506,896,537],{"class":516},[506,898,540],{"class":516},[506,900,901,903,905,907,909,911,913,915,917],{"class":508,"line":543},[506,902,513],{"class":512},[506,904,517],{"class":516},[506,906,550],{"class":520},[506,908,524],{"class":516},[506,910,527],{"class":512},[506,912,530],{"class":516},[506,914,559],{"class":533},[506,916,537],{"class":516},[506,918,540],{"class":516},[506,920,921],{"class":508,"line":566},[506,922,569],{"emptyLinePlaceholder":206},[506,924,925,927,929,931,933,935],{"class":508,"line":572},[506,926,576],{"class":575},[506,928,579],{"class":520},[506,930,582],{"class":516},[506,932,521],{"class":585},[506,934,588],{"class":520},[506,936,540],{"class":516},[506,938,939],{"class":508,"line":593},[506,940,569],{"emptyLinePlaceholder":206},[506,942,943],{"class":508,"line":598},[506,944,946],{"class":945},"sHwdD","// Custom viewport range for tablet-to-desktop\n",[506,948,949,951,953,955,957,959,961,963,965,967,969,971,973,976,978],{"class":508,"line":637},[506,950,576],{"class":575},[506,952,517],{"class":516},[506,954,605],{"class":520},[506,956,608],{"class":516},[506,958,611],{"class":520},[506,960,608],{"class":516},[506,962,616],{"class":520},[506,964,608],{"class":516},[506,966,621],{"class":520},[506,968,624],{"class":516},[506,970,627],{"class":516},[506,972,550],{"class":585},[506,974,975],{"class":520},"(s",[506,977,608],{"class":516},[506,979,675],{"class":516},[506,981,982,986,988,991,993],{"class":508,"line":642},[506,983,985],{"class":984},"swJcz","    minWidth",[506,987,669],{"class":516},[506,989,990],{"class":685}," 768",[506,992,608],{"class":516},[506,994,995],{"class":945},"   // Start scaling at tablet size\n",[506,997,999,1002,1004,1007],{"class":508,"line":998},9,[506,1000,1001],{"class":984},"    maxWidth",[506,1003,669],{"class":516},[506,1005,1006],{"class":685}," 1920",[506,1008,1009],{"class":945},"   // Stop scaling at large desktop\n",[506,1011,1013,1015,1018],{"class":508,"line":1012},10,[506,1014,624],{"class":516},[506,1016,1017],{"class":520},")",[506,1019,540],{"class":516},[506,1021,1023],{"class":508,"line":1022},11,[506,1024,569],{"emptyLinePlaceholder":206},[506,1026,1028,1030,1032,1034],{"class":508,"line":1027},12,[506,1029,645],{"class":512},[506,1031,648],{"class":512},[506,1033,651],{"class":520},[506,1035,540],{"class":516},[491,1037,1038],{"icon":140,"label":656},[496,1039,1041],{"className":659,"code":1040,"filename":661,"language":662,"meta":502,"style":502},":root {\n    --fluid--min-width: 768;\n    --fluid--max-width: 1920;\n    --fluid--screen: 100vw;\n    --fluid--breakpoint: calc(...);\n}\n",[470,1042,1043,1051,1061,1071,1081,1095],{"__ignoreMap":502},[506,1044,1045,1047,1049],{"class":508,"line":509},[506,1046,669],{"class":516},[506,1048,672],{"class":575},[506,1050,675],{"class":516},[506,1052,1053,1055,1057,1059],{"class":508,"line":543},[506,1054,680],{"class":520},[506,1056,669],{"class":516},[506,1058,990],{"class":685},[506,1060,540],{"class":516},[506,1062,1063,1065,1067,1069],{"class":508,"line":566},[506,1064,693],{"class":520},[506,1066,669],{"class":516},[506,1068,1006],{"class":685},[506,1070,540],{"class":516},[506,1072,1073,1075,1077,1079],{"class":508,"line":572},[506,1074,705],{"class":520},[506,1076,669],{"class":516},[506,1078,710],{"class":685},[506,1080,540],{"class":516},[506,1082,1083,1085,1087,1089,1091,1093],{"class":508,"line":593},[506,1084,717],{"class":520},[506,1086,669],{"class":516},[506,1088,722],{"class":585},[506,1090,725],{"class":516},[506,1092,728],{"class":520},[506,1094,731],{"class":516},[506,1096,1097],{"class":508,"line":598},[506,1098,736],{"class":516},[417,1100,1102],{"id":1101},"usefluidclamp",[470,1103,1104],{},"useFluidClamp()",[421,1106,475,1107,1109],{},[470,1108,1104],{}," composable creates individual fluid values that scale smoothly between minimum and maximum values. It's the low-level building block for all fluid design tokens.",[480,1111,1113],{"id":1112},"basic-fluid-values","Basic Fluid Values",[421,1115,1116],{},"Create a fluid value by providing minimum and maximum endpoints:",[488,1118,1119,1374],{},[491,1120,1121],{"icon":493,"label":494},[496,1122,1124],{"className":498,"code":1123,"filename":500,"language":501,"meta":502,"style":502},"import { styleframe } from 'styleframe';\nimport { useFluidViewport, useFluidClamp } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { variable, ref, selector } = s;\n\n// Set up fluid viewport range\nuseFluidViewport(s);\n\n// Create a fluid font size: 16px at mobile, 20px at desktop\nconst fluidFontSize = variable(\n    'font-size',\n    useFluidClamp(s, { min: 16, max: 20 })\n);\n\nselector('.text', {\n    fontSize: ref(fluidFontSize)\n});\n\nexport default s;\n",[470,1125,1126,1146,1171,1175,1189,1216,1220,1225,1234,1238,1243,1257,1270,1305,1312,1317,1336,1349,1358,1363],{"__ignoreMap":502},[506,1127,1128,1130,1132,1134,1136,1138,1140,1142,1144],{"class":508,"line":509},[506,1129,513],{"class":512},[506,1131,517],{"class":516},[506,1133,521],{"class":520},[506,1135,524],{"class":516},[506,1137,527],{"class":512},[506,1139,530],{"class":516},[506,1141,534],{"class":533},[506,1143,537],{"class":516},[506,1145,540],{"class":516},[506,1147,1148,1150,1152,1154,1156,1159,1161,1163,1165,1167,1169],{"class":508,"line":543},[506,1149,513],{"class":512},[506,1151,517],{"class":516},[506,1153,550],{"class":520},[506,1155,608],{"class":516},[506,1157,1158],{"class":520}," useFluidClamp",[506,1160,524],{"class":516},[506,1162,527],{"class":512},[506,1164,530],{"class":516},[506,1166,559],{"class":533},[506,1168,537],{"class":516},[506,1170,540],{"class":516},[506,1172,1173],{"class":508,"line":566},[506,1174,569],{"emptyLinePlaceholder":206},[506,1176,1177,1179,1181,1183,1185,1187],{"class":508,"line":572},[506,1178,576],{"class":575},[506,1180,579],{"class":520},[506,1182,582],{"class":516},[506,1184,521],{"class":585},[506,1186,588],{"class":520},[506,1188,540],{"class":516},[506,1190,1191,1193,1195,1198,1200,1203,1205,1208,1210,1212,1214],{"class":508,"line":593},[506,1192,576],{"class":575},[506,1194,517],{"class":516},[506,1196,1197],{"class":520}," variable",[506,1199,608],{"class":516},[506,1201,1202],{"class":520}," ref",[506,1204,608],{"class":516},[506,1206,1207],{"class":520}," selector ",[506,1209,624],{"class":516},[506,1211,627],{"class":516},[506,1213,651],{"class":520},[506,1215,540],{"class":516},[506,1217,1218],{"class":508,"line":598},[506,1219,569],{"emptyLinePlaceholder":206},[506,1221,1222],{"class":508,"line":637},[506,1223,1224],{"class":945},"// Set up fluid viewport range\n",[506,1226,1227,1230,1232],{"class":508,"line":642},[506,1228,1229],{"class":585},"useFluidViewport",[506,1231,632],{"class":520},[506,1233,540],{"class":516},[506,1235,1236],{"class":508,"line":998},[506,1237,569],{"emptyLinePlaceholder":206},[506,1239,1240],{"class":508,"line":1012},[506,1241,1242],{"class":945},"// Create a fluid font size: 16px at mobile, 20px at desktop\n",[506,1244,1245,1247,1250,1252,1254],{"class":508,"line":1022},[506,1246,576],{"class":575},[506,1248,1249],{"class":520}," fluidFontSize ",[506,1251,582],{"class":516},[506,1253,1197],{"class":585},[506,1255,1256],{"class":520},"(\n",[506,1258,1259,1262,1265,1267],{"class":508,"line":1027},[506,1260,1261],{"class":516},"    '",[506,1263,1264],{"class":533},"font-size",[506,1266,537],{"class":516},[506,1268,1269],{"class":516},",\n",[506,1271,1273,1276,1278,1280,1282,1285,1287,1290,1292,1295,1297,1300,1302],{"class":508,"line":1272},13,[506,1274,1275],{"class":585},"    useFluidClamp",[506,1277,975],{"class":520},[506,1279,608],{"class":516},[506,1281,517],{"class":516},[506,1283,1284],{"class":984}," min",[506,1286,669],{"class":516},[506,1288,1289],{"class":685}," 16",[506,1291,608],{"class":516},[506,1293,1294],{"class":984}," max",[506,1296,669],{"class":516},[506,1298,1299],{"class":685}," 20",[506,1301,524],{"class":516},[506,1303,1304],{"class":520},")\n",[506,1306,1308,1310],{"class":508,"line":1307},14,[506,1309,1017],{"class":520},[506,1311,540],{"class":516},[506,1313,1315],{"class":508,"line":1314},15,[506,1316,569],{"emptyLinePlaceholder":206},[506,1318,1320,1323,1325,1327,1330,1332,1334],{"class":508,"line":1319},16,[506,1321,1322],{"class":585},"selector",[506,1324,725],{"class":520},[506,1326,537],{"class":516},[506,1328,1329],{"class":533},".text",[506,1331,537],{"class":516},[506,1333,608],{"class":516},[506,1335,675],{"class":516},[506,1337,1339,1342,1344,1346],{"class":508,"line":1338},17,[506,1340,1341],{"class":984},"    fontSize",[506,1343,669],{"class":516},[506,1345,1202],{"class":585},[506,1347,1348],{"class":520},"(fluidFontSize)\n",[506,1350,1352,1354,1356],{"class":508,"line":1351},18,[506,1353,624],{"class":516},[506,1355,1017],{"class":520},[506,1357,540],{"class":516},[506,1359,1361],{"class":508,"line":1360},19,[506,1362,569],{"emptyLinePlaceholder":206},[506,1364,1366,1368,1370,1372],{"class":508,"line":1365},20,[506,1367,645],{"class":512},[506,1369,648],{"class":512},[506,1371,651],{"class":520},[506,1373,540],{"class":516},[491,1375,1376],{"icon":140,"label":656},[496,1377,1379],{"className":659,"code":1378,"filename":661,"language":662,"meta":502,"style":502},":root {\n    --fluid--min-width: 320;\n    --fluid--max-width: 1440;\n    --fluid--screen: 100vw;\n    --fluid--breakpoint: calc(...);\n    --font-size: calc(...);\n}\n\n.text {\n    font-size: var(--font-size);\n}\n",[470,1380,1381,1389,1399,1409,1419,1433,1448,1452,1456,1467,1485],{"__ignoreMap":502},[506,1382,1383,1385,1387],{"class":508,"line":509},[506,1384,669],{"class":516},[506,1386,672],{"class":575},[506,1388,675],{"class":516},[506,1390,1391,1393,1395,1397],{"class":508,"line":543},[506,1392,680],{"class":520},[506,1394,669],{"class":516},[506,1396,686],{"class":685},[506,1398,540],{"class":516},[506,1400,1401,1403,1405,1407],{"class":508,"line":566},[506,1402,693],{"class":520},[506,1404,669],{"class":516},[506,1406,698],{"class":685},[506,1408,540],{"class":516},[506,1410,1411,1413,1415,1417],{"class":508,"line":572},[506,1412,705],{"class":520},[506,1414,669],{"class":516},[506,1416,710],{"class":685},[506,1418,540],{"class":516},[506,1420,1421,1423,1425,1427,1429,1431],{"class":508,"line":593},[506,1422,717],{"class":520},[506,1424,669],{"class":516},[506,1426,722],{"class":585},[506,1428,725],{"class":516},[506,1430,728],{"class":520},[506,1432,731],{"class":516},[506,1434,1435,1438,1440,1442,1444,1446],{"class":508,"line":598},[506,1436,1437],{"class":520},"    --font-size",[506,1439,669],{"class":516},[506,1441,722],{"class":585},[506,1443,725],{"class":516},[506,1445,728],{"class":520},[506,1447,731],{"class":516},[506,1449,1450],{"class":508,"line":637},[506,1451,736],{"class":516},[506,1453,1454],{"class":508,"line":642},[506,1455,569],{"emptyLinePlaceholder":206},[506,1457,1458,1461,1465],{"class":508,"line":998},[506,1459,1460],{"class":516},".",[506,1462,1464],{"class":1463},"sBMFI","text",[506,1466,675],{"class":516},[506,1468,1469,1473,1475,1478,1480,1483],{"class":508,"line":1012},[506,1470,1472],{"class":1471},"sqsOY","    font-size",[506,1474,669],{"class":516},[506,1476,1477],{"class":585}," var",[506,1479,725],{"class":516},[506,1481,1482],{"class":520},"--font-size",[506,1484,731],{"class":516},[506,1486,1487],{"class":508,"line":1022},[506,1488,736],{"class":516},[480,1490,1492],{"id":1491},"using-variables-in-ranges","Using Variables in Ranges",[421,1494,1495],{},"You can pass Styleframe variables instead of literal values for more flexible configurations:",[496,1497,1499],{"className":498,"code":1498,"filename":500,"language":501,"meta":502,"style":502},"import { styleframe } from 'styleframe';\nimport { useFluidViewport, useFluidClamp } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { variable, ref } = s;\n\nuseFluidViewport(s);\n\n// Define min/max as variables\nconst fontSizeMin = variable('font-size.min', 16);\nconst fontSizeMax = variable('font-size.max', 20);\n\nconst fontSize = variable(\n    'font-size',\n    useFluidClamp(s, { min: ref(fontSizeMin), max: ref(fontSizeMax) })\n);\n\nexport default s;\n",[470,1500,1501,1521,1545,1549,1563,1584,1588,1596,1600,1605,1633,1661,1665,1678,1688,1722,1728,1732],{"__ignoreMap":502},[506,1502,1503,1505,1507,1509,1511,1513,1515,1517,1519],{"class":508,"line":509},[506,1504,513],{"class":512},[506,1506,517],{"class":516},[506,1508,521],{"class":520},[506,1510,524],{"class":516},[506,1512,527],{"class":512},[506,1514,530],{"class":516},[506,1516,534],{"class":533},[506,1518,537],{"class":516},[506,1520,540],{"class":516},[506,1522,1523,1525,1527,1529,1531,1533,1535,1537,1539,1541,1543],{"class":508,"line":543},[506,1524,513],{"class":512},[506,1526,517],{"class":516},[506,1528,550],{"class":520},[506,1530,608],{"class":516},[506,1532,1158],{"class":520},[506,1534,524],{"class":516},[506,1536,527],{"class":512},[506,1538,530],{"class":516},[506,1540,559],{"class":533},[506,1542,537],{"class":516},[506,1544,540],{"class":516},[506,1546,1547],{"class":508,"line":566},[506,1548,569],{"emptyLinePlaceholder":206},[506,1550,1551,1553,1555,1557,1559,1561],{"class":508,"line":572},[506,1552,576],{"class":575},[506,1554,579],{"class":520},[506,1556,582],{"class":516},[506,1558,521],{"class":585},[506,1560,588],{"class":520},[506,1562,540],{"class":516},[506,1564,1565,1567,1569,1571,1573,1576,1578,1580,1582],{"class":508,"line":593},[506,1566,576],{"class":575},[506,1568,517],{"class":516},[506,1570,1197],{"class":520},[506,1572,608],{"class":516},[506,1574,1575],{"class":520}," ref ",[506,1577,624],{"class":516},[506,1579,627],{"class":516},[506,1581,651],{"class":520},[506,1583,540],{"class":516},[506,1585,1586],{"class":508,"line":598},[506,1587,569],{"emptyLinePlaceholder":206},[506,1589,1590,1592,1594],{"class":508,"line":637},[506,1591,1229],{"class":585},[506,1593,632],{"class":520},[506,1595,540],{"class":516},[506,1597,1598],{"class":508,"line":642},[506,1599,569],{"emptyLinePlaceholder":206},[506,1601,1602],{"class":508,"line":998},[506,1603,1604],{"class":945},"// Define min/max as variables\n",[506,1606,1607,1609,1612,1614,1616,1618,1620,1623,1625,1627,1629,1631],{"class":508,"line":1012},[506,1608,576],{"class":575},[506,1610,1611],{"class":520}," fontSizeMin ",[506,1613,582],{"class":516},[506,1615,1197],{"class":585},[506,1617,725],{"class":520},[506,1619,537],{"class":516},[506,1621,1622],{"class":533},"font-size.min",[506,1624,537],{"class":516},[506,1626,608],{"class":516},[506,1628,1289],{"class":685},[506,1630,1017],{"class":520},[506,1632,540],{"class":516},[506,1634,1635,1637,1640,1642,1644,1646,1648,1651,1653,1655,1657,1659],{"class":508,"line":1022},[506,1636,576],{"class":575},[506,1638,1639],{"class":520}," fontSizeMax ",[506,1641,582],{"class":516},[506,1643,1197],{"class":585},[506,1645,725],{"class":520},[506,1647,537],{"class":516},[506,1649,1650],{"class":533},"font-size.max",[506,1652,537],{"class":516},[506,1654,608],{"class":516},[506,1656,1299],{"class":685},[506,1658,1017],{"class":520},[506,1660,540],{"class":516},[506,1662,1663],{"class":508,"line":1027},[506,1664,569],{"emptyLinePlaceholder":206},[506,1666,1667,1669,1672,1674,1676],{"class":508,"line":1272},[506,1668,576],{"class":575},[506,1670,1671],{"class":520}," fontSize ",[506,1673,582],{"class":516},[506,1675,1197],{"class":585},[506,1677,1256],{"class":520},[506,1679,1680,1682,1684,1686],{"class":508,"line":1307},[506,1681,1261],{"class":516},[506,1683,1264],{"class":533},[506,1685,537],{"class":516},[506,1687,1269],{"class":516},[506,1689,1690,1692,1694,1696,1698,1700,1702,1704,1707,1709,1711,1713,1715,1718,1720],{"class":508,"line":1314},[506,1691,1275],{"class":585},[506,1693,975],{"class":520},[506,1695,608],{"class":516},[506,1697,517],{"class":516},[506,1699,1284],{"class":984},[506,1701,669],{"class":516},[506,1703,1202],{"class":585},[506,1705,1706],{"class":520},"(fontSizeMin)",[506,1708,608],{"class":516},[506,1710,1294],{"class":984},[506,1712,669],{"class":516},[506,1714,1202],{"class":585},[506,1716,1717],{"class":520},"(fontSizeMax) ",[506,1719,624],{"class":516},[506,1721,1304],{"class":520},[506,1723,1724,1726],{"class":508,"line":1319},[506,1725,1017],{"class":520},[506,1727,540],{"class":516},[506,1729,1730],{"class":508,"line":1338},[506,1731,569],{"emptyLinePlaceholder":206},[506,1733,1734,1736,1738,1740],{"class":508,"line":1351},[506,1735,645],{"class":512},[506,1737,648],{"class":512},[506,1739,651],{"class":520},[506,1741,540],{"class":516},[417,1743,1745],{"id":1744},"using-viewport-variables","Using Viewport Variables",[421,1747,1748],{},"Once you've set up your fluid viewport range and created fluid values, you can reference them throughout your theme:",[496,1750,1752],{"className":498,"code":1751,"filename":500,"language":501,"meta":502,"style":502},"import { styleframe } from 'styleframe';\nimport { useFluidViewport, useFluidClamp } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { variable, ref, selector } = s;\n\n// Set up viewport range\nuseFluidViewport(s);\n\n// Create fluid design tokens\nconst spacing = variable('spacing', useFluidClamp(s, { min: 16, max: 24 }));\nconst fontSize = variable('font-size', useFluidClamp(s, { min: 16, max: 18 }));\nconst borderRadius = variable('border-radius', useFluidClamp(s, { min: 8, max: 12 }));\n\n// Use in selectors\nselector('.card', {\n    padding: ref(spacing),\n    fontSize: ref(fontSize),\n    borderRadius: ref(borderRadius)\n});\n\nselector('.container', {\n    gap: ref(spacing),\n    marginBlock: ref(spacing)\n});\n\nexport default s;\n",[470,1753,1754,1774,1798,1802,1816,1840,1844,1849,1857,1861,1866,1918,1967,2019,2023,2028,2045,2059,2072,2084,2092,2097,2115,2129,2142,2151,2156],{"__ignoreMap":502},[506,1755,1756,1758,1760,1762,1764,1766,1768,1770,1772],{"class":508,"line":509},[506,1757,513],{"class":512},[506,1759,517],{"class":516},[506,1761,521],{"class":520},[506,1763,524],{"class":516},[506,1765,527],{"class":512},[506,1767,530],{"class":516},[506,1769,534],{"class":533},[506,1771,537],{"class":516},[506,1773,540],{"class":516},[506,1775,1776,1778,1780,1782,1784,1786,1788,1790,1792,1794,1796],{"class":508,"line":543},[506,1777,513],{"class":512},[506,1779,517],{"class":516},[506,1781,550],{"class":520},[506,1783,608],{"class":516},[506,1785,1158],{"class":520},[506,1787,524],{"class":516},[506,1789,527],{"class":512},[506,1791,530],{"class":516},[506,1793,559],{"class":533},[506,1795,537],{"class":516},[506,1797,540],{"class":516},[506,1799,1800],{"class":508,"line":566},[506,1801,569],{"emptyLinePlaceholder":206},[506,1803,1804,1806,1808,1810,1812,1814],{"class":508,"line":572},[506,1805,576],{"class":575},[506,1807,579],{"class":520},[506,1809,582],{"class":516},[506,1811,521],{"class":585},[506,1813,588],{"class":520},[506,1815,540],{"class":516},[506,1817,1818,1820,1822,1824,1826,1828,1830,1832,1834,1836,1838],{"class":508,"line":593},[506,1819,576],{"class":575},[506,1821,517],{"class":516},[506,1823,1197],{"class":520},[506,1825,608],{"class":516},[506,1827,1202],{"class":520},[506,1829,608],{"class":516},[506,1831,1207],{"class":520},[506,1833,624],{"class":516},[506,1835,627],{"class":516},[506,1837,651],{"class":520},[506,1839,540],{"class":516},[506,1841,1842],{"class":508,"line":598},[506,1843,569],{"emptyLinePlaceholder":206},[506,1845,1846],{"class":508,"line":637},[506,1847,1848],{"class":945},"// Set up viewport range\n",[506,1850,1851,1853,1855],{"class":508,"line":642},[506,1852,1229],{"class":585},[506,1854,632],{"class":520},[506,1856,540],{"class":516},[506,1858,1859],{"class":508,"line":998},[506,1860,569],{"emptyLinePlaceholder":206},[506,1862,1863],{"class":508,"line":1012},[506,1864,1865],{"class":945},"// Create fluid design tokens\n",[506,1867,1868,1870,1873,1875,1877,1879,1881,1884,1886,1888,1890,1892,1894,1896,1898,1900,1902,1904,1906,1908,1911,1913,1916],{"class":508,"line":1022},[506,1869,576],{"class":575},[506,1871,1872],{"class":520}," spacing ",[506,1874,582],{"class":516},[506,1876,1197],{"class":585},[506,1878,725],{"class":520},[506,1880,537],{"class":516},[506,1882,1883],{"class":533},"spacing",[506,1885,537],{"class":516},[506,1887,608],{"class":516},[506,1889,1158],{"class":585},[506,1891,975],{"class":520},[506,1893,608],{"class":516},[506,1895,517],{"class":516},[506,1897,1284],{"class":984},[506,1899,669],{"class":516},[506,1901,1289],{"class":685},[506,1903,608],{"class":516},[506,1905,1294],{"class":984},[506,1907,669],{"class":516},[506,1909,1910],{"class":685}," 24",[506,1912,524],{"class":516},[506,1914,1915],{"class":520},"))",[506,1917,540],{"class":516},[506,1919,1920,1922,1924,1926,1928,1930,1932,1934,1936,1938,1940,1942,1944,1946,1948,1950,1952,1954,1956,1958,1961,1963,1965],{"class":508,"line":1027},[506,1921,576],{"class":575},[506,1923,1671],{"class":520},[506,1925,582],{"class":516},[506,1927,1197],{"class":585},[506,1929,725],{"class":520},[506,1931,537],{"class":516},[506,1933,1264],{"class":533},[506,1935,537],{"class":516},[506,1937,608],{"class":516},[506,1939,1158],{"class":585},[506,1941,975],{"class":520},[506,1943,608],{"class":516},[506,1945,517],{"class":516},[506,1947,1284],{"class":984},[506,1949,669],{"class":516},[506,1951,1289],{"class":685},[506,1953,608],{"class":516},[506,1955,1294],{"class":984},[506,1957,669],{"class":516},[506,1959,1960],{"class":685}," 18",[506,1962,524],{"class":516},[506,1964,1915],{"class":520},[506,1966,540],{"class":516},[506,1968,1969,1971,1974,1976,1978,1980,1982,1985,1987,1989,1991,1993,1995,1997,1999,2001,2004,2006,2008,2010,2013,2015,2017],{"class":508,"line":1272},[506,1970,576],{"class":575},[506,1972,1973],{"class":520}," borderRadius ",[506,1975,582],{"class":516},[506,1977,1197],{"class":585},[506,1979,725],{"class":520},[506,1981,537],{"class":516},[506,1983,1984],{"class":533},"border-radius",[506,1986,537],{"class":516},[506,1988,608],{"class":516},[506,1990,1158],{"class":585},[506,1992,975],{"class":520},[506,1994,608],{"class":516},[506,1996,517],{"class":516},[506,1998,1284],{"class":984},[506,2000,669],{"class":516},[506,2002,2003],{"class":685}," 8",[506,2005,608],{"class":516},[506,2007,1294],{"class":984},[506,2009,669],{"class":516},[506,2011,2012],{"class":685}," 12",[506,2014,524],{"class":516},[506,2016,1915],{"class":520},[506,2018,540],{"class":516},[506,2020,2021],{"class":508,"line":1307},[506,2022,569],{"emptyLinePlaceholder":206},[506,2024,2025],{"class":508,"line":1314},[506,2026,2027],{"class":945},"// Use in selectors\n",[506,2029,2030,2032,2034,2036,2039,2041,2043],{"class":508,"line":1319},[506,2031,1322],{"class":585},[506,2033,725],{"class":520},[506,2035,537],{"class":516},[506,2037,2038],{"class":533},".card",[506,2040,537],{"class":516},[506,2042,608],{"class":516},[506,2044,675],{"class":516},[506,2046,2047,2050,2052,2054,2057],{"class":508,"line":1338},[506,2048,2049],{"class":984},"    padding",[506,2051,669],{"class":516},[506,2053,1202],{"class":585},[506,2055,2056],{"class":520},"(spacing)",[506,2058,1269],{"class":516},[506,2060,2061,2063,2065,2067,2070],{"class":508,"line":1351},[506,2062,1341],{"class":984},[506,2064,669],{"class":516},[506,2066,1202],{"class":585},[506,2068,2069],{"class":520},"(fontSize)",[506,2071,1269],{"class":516},[506,2073,2074,2077,2079,2081],{"class":508,"line":1360},[506,2075,2076],{"class":984},"    borderRadius",[506,2078,669],{"class":516},[506,2080,1202],{"class":585},[506,2082,2083],{"class":520},"(borderRadius)\n",[506,2085,2086,2088,2090],{"class":508,"line":1365},[506,2087,624],{"class":516},[506,2089,1017],{"class":520},[506,2091,540],{"class":516},[506,2093,2095],{"class":508,"line":2094},21,[506,2096,569],{"emptyLinePlaceholder":206},[506,2098,2100,2102,2104,2106,2109,2111,2113],{"class":508,"line":2099},22,[506,2101,1322],{"class":585},[506,2103,725],{"class":520},[506,2105,537],{"class":516},[506,2107,2108],{"class":533},".container",[506,2110,537],{"class":516},[506,2112,608],{"class":516},[506,2114,675],{"class":516},[506,2116,2118,2121,2123,2125,2127],{"class":508,"line":2117},23,[506,2119,2120],{"class":984},"    gap",[506,2122,669],{"class":516},[506,2124,1202],{"class":585},[506,2126,2056],{"class":520},[506,2128,1269],{"class":516},[506,2130,2132,2135,2137,2139],{"class":508,"line":2131},24,[506,2133,2134],{"class":984},"    marginBlock",[506,2136,669],{"class":516},[506,2138,1202],{"class":585},[506,2140,2141],{"class":520},"(spacing)\n",[506,2143,2145,2147,2149],{"class":508,"line":2144},25,[506,2146,624],{"class":516},[506,2148,1017],{"class":520},[506,2150,540],{"class":516},[506,2152,2154],{"class":508,"line":2153},26,[506,2155,569],{"emptyLinePlaceholder":206},[506,2157,2159,2161,2163,2165],{"class":508,"line":2158},27,[506,2160,645],{"class":512},[506,2162,648],{"class":512},[506,2164,651],{"class":520},[506,2166,540],{"class":516},[421,2168,2169],{},"Generated CSS:",[496,2171,2173],{"className":659,"code":2172,"filename":661,"language":662,"meta":502,"style":502},":root {\n    --fluid--min-width: 320;\n    --fluid--max-width: 1440;\n    --fluid--screen: 100vw;\n    --fluid--breakpoint: calc(...);\n    --spacing: calc(...);\n    --font-size: calc(...);\n    --border-radius: calc(...);\n}\n\n.card {\n    padding: var(--spacing);\n    font-size: var(--font-size);\n    border-radius: var(--border-radius);\n}\n\n.container {\n    gap: var(--spacing);\n    margin-block: var(--spacing);\n}\n",[470,2174,2175,2183,2193,2203,2213,2227,2242,2256,2271,2275,2279,2288,2303,2317,2333,2337,2341,2350,2364,2379],{"__ignoreMap":502},[506,2176,2177,2179,2181],{"class":508,"line":509},[506,2178,669],{"class":516},[506,2180,672],{"class":575},[506,2182,675],{"class":516},[506,2184,2185,2187,2189,2191],{"class":508,"line":543},[506,2186,680],{"class":520},[506,2188,669],{"class":516},[506,2190,686],{"class":685},[506,2192,540],{"class":516},[506,2194,2195,2197,2199,2201],{"class":508,"line":566},[506,2196,693],{"class":520},[506,2198,669],{"class":516},[506,2200,698],{"class":685},[506,2202,540],{"class":516},[506,2204,2205,2207,2209,2211],{"class":508,"line":572},[506,2206,705],{"class":520},[506,2208,669],{"class":516},[506,2210,710],{"class":685},[506,2212,540],{"class":516},[506,2214,2215,2217,2219,2221,2223,2225],{"class":508,"line":593},[506,2216,717],{"class":520},[506,2218,669],{"class":516},[506,2220,722],{"class":585},[506,2222,725],{"class":516},[506,2224,728],{"class":520},[506,2226,731],{"class":516},[506,2228,2229,2232,2234,2236,2238,2240],{"class":508,"line":598},[506,2230,2231],{"class":520},"    --spacing",[506,2233,669],{"class":516},[506,2235,722],{"class":585},[506,2237,725],{"class":516},[506,2239,728],{"class":520},[506,2241,731],{"class":516},[506,2243,2244,2246,2248,2250,2252,2254],{"class":508,"line":637},[506,2245,1437],{"class":520},[506,2247,669],{"class":516},[506,2249,722],{"class":585},[506,2251,725],{"class":516},[506,2253,728],{"class":520},[506,2255,731],{"class":516},[506,2257,2258,2261,2263,2265,2267,2269],{"class":508,"line":642},[506,2259,2260],{"class":520},"    --border-radius",[506,2262,669],{"class":516},[506,2264,722],{"class":585},[506,2266,725],{"class":516},[506,2268,728],{"class":520},[506,2270,731],{"class":516},[506,2272,2273],{"class":508,"line":998},[506,2274,736],{"class":516},[506,2276,2277],{"class":508,"line":1012},[506,2278,569],{"emptyLinePlaceholder":206},[506,2280,2281,2283,2286],{"class":508,"line":1022},[506,2282,1460],{"class":516},[506,2284,2285],{"class":1463},"card",[506,2287,675],{"class":516},[506,2289,2290,2292,2294,2296,2298,2301],{"class":508,"line":1027},[506,2291,2049],{"class":1471},[506,2293,669],{"class":516},[506,2295,1477],{"class":585},[506,2297,725],{"class":516},[506,2299,2300],{"class":520},"--spacing",[506,2302,731],{"class":516},[506,2304,2305,2307,2309,2311,2313,2315],{"class":508,"line":1272},[506,2306,1472],{"class":1471},[506,2308,669],{"class":516},[506,2310,1477],{"class":585},[506,2312,725],{"class":516},[506,2314,1482],{"class":520},[506,2316,731],{"class":516},[506,2318,2319,2322,2324,2326,2328,2331],{"class":508,"line":1307},[506,2320,2321],{"class":1471},"    border-radius",[506,2323,669],{"class":516},[506,2325,1477],{"class":585},[506,2327,725],{"class":516},[506,2329,2330],{"class":520},"--border-radius",[506,2332,731],{"class":516},[506,2334,2335],{"class":508,"line":1314},[506,2336,736],{"class":516},[506,2338,2339],{"class":508,"line":1319},[506,2340,569],{"emptyLinePlaceholder":206},[506,2342,2343,2345,2348],{"class":508,"line":1338},[506,2344,1460],{"class":516},[506,2346,2347],{"class":1463},"container",[506,2349,675],{"class":516},[506,2351,2352,2354,2356,2358,2360,2362],{"class":508,"line":1351},[506,2353,2120],{"class":1471},[506,2355,669],{"class":516},[506,2357,1477],{"class":585},[506,2359,725],{"class":516},[506,2361,2300],{"class":520},[506,2363,731],{"class":516},[506,2365,2366,2369,2371,2373,2375,2377],{"class":508,"line":1360},[506,2367,2368],{"class":1471},"    margin-block",[506,2370,669],{"class":516},[506,2372,1477],{"class":585},[506,2374,725],{"class":516},[506,2376,2300],{"class":520},[506,2378,731],{"class":516},[506,2380,2381],{"class":508,"line":1365},[506,2382,736],{"class":516},[417,2384,2386],{"id":2385},"examples","Examples",[480,2388,2390],{"id":2389},"complete-fluid-spacing-system","Complete Fluid Spacing System",[421,2392,2393],{},"Create a comprehensive fluid spacing scale that adapts to viewport size:",[488,2395,2396,3039],{},[491,2397,2398],{"icon":493,"label":494},[496,2399,2401],{"className":498,"code":2400,"filename":500,"language":501,"meta":502,"style":502},"import { styleframe } from 'styleframe';\nimport { useFluidViewport, useFluidClamp } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { variable, ref, selector } = s;\n\nuseFluidViewport(s);\n\n// Create fluid spacing scale\nconst {\n    spacing,\n    spacingXs,\n    spacingSm,\n    spacingMd,\n    spacingLg,\n    spacingXl,\n} = useSpacingDesignTokens(s, {\n    xs: useFluidClamp(s, { min: 4, max: 6 }),\n    sm: useFluidClamp(s, { min: 8, max: 12 }),\n    md: useFluidClamp(s, { min: 16, max: 24 }),\n    lg: useFluidClamp(s, { min: 24, max: 32 }),\n    xl: useFluidClamp(s, { min: 32, max: 48 }),\n    default: '@font-size.md'\n})\n\n// Apply to components\nselector('.container', {\n    padding: ref(spacing),\n    gap: ref(spacingMd)\n});\n\nselector('.section', {\n    marginTop: ref(spacingXl),\n    marginBottom: ref(spacingLg)\n});\n\nselector('.hero', {\n    paddingBlock: ref(spacing3xl),\n    paddingInline: ref(spacing2xl)\n});\n\nselector('.button', {\n    paddingBlock: ref(spacingSm),\n    paddingInline: ref(spacing),\n    gap: ref(spacingXs)\n});\n\nexport default s;\n",[470,2402,2403,2423,2447,2451,2465,2489,2493,2501,2505,2510,2516,2523,2530,2537,2544,2551,2558,2573,2610,2645,2680,2716,2752,2767,2773,2777,2782,2798,2811,2823,2832,2837,2855,2870,2883,2892,2897,2915,2930,2943,2952,2957,2975,2989,3002,3014,3023,3028],{"__ignoreMap":502},[506,2404,2405,2407,2409,2411,2413,2415,2417,2419,2421],{"class":508,"line":509},[506,2406,513],{"class":512},[506,2408,517],{"class":516},[506,2410,521],{"class":520},[506,2412,524],{"class":516},[506,2414,527],{"class":512},[506,2416,530],{"class":516},[506,2418,534],{"class":533},[506,2420,537],{"class":516},[506,2422,540],{"class":516},[506,2424,2425,2427,2429,2431,2433,2435,2437,2439,2441,2443,2445],{"class":508,"line":543},[506,2426,513],{"class":512},[506,2428,517],{"class":516},[506,2430,550],{"class":520},[506,2432,608],{"class":516},[506,2434,1158],{"class":520},[506,2436,524],{"class":516},[506,2438,527],{"class":512},[506,2440,530],{"class":516},[506,2442,559],{"class":533},[506,2444,537],{"class":516},[506,2446,540],{"class":516},[506,2448,2449],{"class":508,"line":566},[506,2450,569],{"emptyLinePlaceholder":206},[506,2452,2453,2455,2457,2459,2461,2463],{"class":508,"line":572},[506,2454,576],{"class":575},[506,2456,579],{"class":520},[506,2458,582],{"class":516},[506,2460,521],{"class":585},[506,2462,588],{"class":520},[506,2464,540],{"class":516},[506,2466,2467,2469,2471,2473,2475,2477,2479,2481,2483,2485,2487],{"class":508,"line":593},[506,2468,576],{"class":575},[506,2470,517],{"class":516},[506,2472,1197],{"class":520},[506,2474,608],{"class":516},[506,2476,1202],{"class":520},[506,2478,608],{"class":516},[506,2480,1207],{"class":520},[506,2482,624],{"class":516},[506,2484,627],{"class":516},[506,2486,651],{"class":520},[506,2488,540],{"class":516},[506,2490,2491],{"class":508,"line":598},[506,2492,569],{"emptyLinePlaceholder":206},[506,2494,2495,2497,2499],{"class":508,"line":637},[506,2496,1229],{"class":585},[506,2498,632],{"class":520},[506,2500,540],{"class":516},[506,2502,2503],{"class":508,"line":642},[506,2504,569],{"emptyLinePlaceholder":206},[506,2506,2507],{"class":508,"line":998},[506,2508,2509],{"class":945},"// Create fluid spacing scale\n",[506,2511,2512,2514],{"class":508,"line":1012},[506,2513,576],{"class":575},[506,2515,675],{"class":516},[506,2517,2518,2521],{"class":508,"line":1022},[506,2519,2520],{"class":520},"    spacing",[506,2522,1269],{"class":516},[506,2524,2525,2528],{"class":508,"line":1027},[506,2526,2527],{"class":520},"    spacingXs",[506,2529,1269],{"class":516},[506,2531,2532,2535],{"class":508,"line":1272},[506,2533,2534],{"class":520},"    spacingSm",[506,2536,1269],{"class":516},[506,2538,2539,2542],{"class":508,"line":1307},[506,2540,2541],{"class":520},"    spacingMd",[506,2543,1269],{"class":516},[506,2545,2546,2549],{"class":508,"line":1314},[506,2547,2548],{"class":520},"    spacingLg",[506,2550,1269],{"class":516},[506,2552,2553,2556],{"class":508,"line":1319},[506,2554,2555],{"class":520},"    spacingXl",[506,2557,1269],{"class":516},[506,2559,2560,2562,2564,2567,2569,2571],{"class":508,"line":1338},[506,2561,624],{"class":516},[506,2563,627],{"class":516},[506,2565,2566],{"class":585}," useSpacingDesignTokens",[506,2568,975],{"class":520},[506,2570,608],{"class":516},[506,2572,675],{"class":516},[506,2574,2575,2578,2580,2582,2584,2586,2588,2590,2592,2595,2597,2599,2601,2604,2606,2608],{"class":508,"line":1351},[506,2576,2577],{"class":984},"    xs",[506,2579,669],{"class":516},[506,2581,1158],{"class":585},[506,2583,975],{"class":520},[506,2585,608],{"class":516},[506,2587,517],{"class":516},[506,2589,1284],{"class":984},[506,2591,669],{"class":516},[506,2593,2594],{"class":685}," 4",[506,2596,608],{"class":516},[506,2598,1294],{"class":984},[506,2600,669],{"class":516},[506,2602,2603],{"class":685}," 6",[506,2605,524],{"class":516},[506,2607,1017],{"class":520},[506,2609,1269],{"class":516},[506,2611,2612,2615,2617,2619,2621,2623,2625,2627,2629,2631,2633,2635,2637,2639,2641,2643],{"class":508,"line":1360},[506,2613,2614],{"class":984},"    sm",[506,2616,669],{"class":516},[506,2618,1158],{"class":585},[506,2620,975],{"class":520},[506,2622,608],{"class":516},[506,2624,517],{"class":516},[506,2626,1284],{"class":984},[506,2628,669],{"class":516},[506,2630,2003],{"class":685},[506,2632,608],{"class":516},[506,2634,1294],{"class":984},[506,2636,669],{"class":516},[506,2638,2012],{"class":685},[506,2640,524],{"class":516},[506,2642,1017],{"class":520},[506,2644,1269],{"class":516},[506,2646,2647,2650,2652,2654,2656,2658,2660,2662,2664,2666,2668,2670,2672,2674,2676,2678],{"class":508,"line":1365},[506,2648,2649],{"class":984},"    md",[506,2651,669],{"class":516},[506,2653,1158],{"class":585},[506,2655,975],{"class":520},[506,2657,608],{"class":516},[506,2659,517],{"class":516},[506,2661,1284],{"class":984},[506,2663,669],{"class":516},[506,2665,1289],{"class":685},[506,2667,608],{"class":516},[506,2669,1294],{"class":984},[506,2671,669],{"class":516},[506,2673,1910],{"class":685},[506,2675,524],{"class":516},[506,2677,1017],{"class":520},[506,2679,1269],{"class":516},[506,2681,2682,2685,2687,2689,2691,2693,2695,2697,2699,2701,2703,2705,2707,2710,2712,2714],{"class":508,"line":2094},[506,2683,2684],{"class":984},"    lg",[506,2686,669],{"class":516},[506,2688,1158],{"class":585},[506,2690,975],{"class":520},[506,2692,608],{"class":516},[506,2694,517],{"class":516},[506,2696,1284],{"class":984},[506,2698,669],{"class":516},[506,2700,1910],{"class":685},[506,2702,608],{"class":516},[506,2704,1294],{"class":984},[506,2706,669],{"class":516},[506,2708,2709],{"class":685}," 32",[506,2711,524],{"class":516},[506,2713,1017],{"class":520},[506,2715,1269],{"class":516},[506,2717,2718,2721,2723,2725,2727,2729,2731,2733,2735,2737,2739,2741,2743,2746,2748,2750],{"class":508,"line":2099},[506,2719,2720],{"class":984},"    xl",[506,2722,669],{"class":516},[506,2724,1158],{"class":585},[506,2726,975],{"class":520},[506,2728,608],{"class":516},[506,2730,517],{"class":516},[506,2732,1284],{"class":984},[506,2734,669],{"class":516},[506,2736,2709],{"class":685},[506,2738,608],{"class":516},[506,2740,1294],{"class":984},[506,2742,669],{"class":516},[506,2744,2745],{"class":685}," 48",[506,2747,524],{"class":516},[506,2749,1017],{"class":520},[506,2751,1269],{"class":516},[506,2753,2754,2757,2759,2761,2764],{"class":508,"line":2117},[506,2755,2756],{"class":984},"    default",[506,2758,669],{"class":516},[506,2760,530],{"class":516},[506,2762,2763],{"class":533},"@font-size.md",[506,2765,2766],{"class":516},"'\n",[506,2768,2769,2771],{"class":508,"line":2131},[506,2770,624],{"class":516},[506,2772,1304],{"class":520},[506,2774,2775],{"class":508,"line":2144},[506,2776,569],{"emptyLinePlaceholder":206},[506,2778,2779],{"class":508,"line":2153},[506,2780,2781],{"class":945},"// Apply to components\n",[506,2783,2784,2786,2788,2790,2792,2794,2796],{"class":508,"line":2158},[506,2785,1322],{"class":585},[506,2787,725],{"class":520},[506,2789,537],{"class":516},[506,2791,2108],{"class":533},[506,2793,537],{"class":516},[506,2795,608],{"class":516},[506,2797,675],{"class":516},[506,2799,2801,2803,2805,2807,2809],{"class":508,"line":2800},28,[506,2802,2049],{"class":984},[506,2804,669],{"class":516},[506,2806,1202],{"class":585},[506,2808,2056],{"class":520},[506,2810,1269],{"class":516},[506,2812,2814,2816,2818,2820],{"class":508,"line":2813},29,[506,2815,2120],{"class":984},[506,2817,669],{"class":516},[506,2819,1202],{"class":585},[506,2821,2822],{"class":520},"(spacingMd)\n",[506,2824,2826,2828,2830],{"class":508,"line":2825},30,[506,2827,624],{"class":516},[506,2829,1017],{"class":520},[506,2831,540],{"class":516},[506,2833,2835],{"class":508,"line":2834},31,[506,2836,569],{"emptyLinePlaceholder":206},[506,2838,2840,2842,2844,2846,2849,2851,2853],{"class":508,"line":2839},32,[506,2841,1322],{"class":585},[506,2843,725],{"class":520},[506,2845,537],{"class":516},[506,2847,2848],{"class":533},".section",[506,2850,537],{"class":516},[506,2852,608],{"class":516},[506,2854,675],{"class":516},[506,2856,2858,2861,2863,2865,2868],{"class":508,"line":2857},33,[506,2859,2860],{"class":984},"    marginTop",[506,2862,669],{"class":516},[506,2864,1202],{"class":585},[506,2866,2867],{"class":520},"(spacingXl)",[506,2869,1269],{"class":516},[506,2871,2873,2876,2878,2880],{"class":508,"line":2872},34,[506,2874,2875],{"class":984},"    marginBottom",[506,2877,669],{"class":516},[506,2879,1202],{"class":585},[506,2881,2882],{"class":520},"(spacingLg)\n",[506,2884,2886,2888,2890],{"class":508,"line":2885},35,[506,2887,624],{"class":516},[506,2889,1017],{"class":520},[506,2891,540],{"class":516},[506,2893,2895],{"class":508,"line":2894},36,[506,2896,569],{"emptyLinePlaceholder":206},[506,2898,2900,2902,2904,2906,2909,2911,2913],{"class":508,"line":2899},37,[506,2901,1322],{"class":585},[506,2903,725],{"class":520},[506,2905,537],{"class":516},[506,2907,2908],{"class":533},".hero",[506,2910,537],{"class":516},[506,2912,608],{"class":516},[506,2914,675],{"class":516},[506,2916,2918,2921,2923,2925,2928],{"class":508,"line":2917},38,[506,2919,2920],{"class":984},"    paddingBlock",[506,2922,669],{"class":516},[506,2924,1202],{"class":585},[506,2926,2927],{"class":520},"(spacing3xl)",[506,2929,1269],{"class":516},[506,2931,2933,2936,2938,2940],{"class":508,"line":2932},39,[506,2934,2935],{"class":984},"    paddingInline",[506,2937,669],{"class":516},[506,2939,1202],{"class":585},[506,2941,2942],{"class":520},"(spacing2xl)\n",[506,2944,2946,2948,2950],{"class":508,"line":2945},40,[506,2947,624],{"class":516},[506,2949,1017],{"class":520},[506,2951,540],{"class":516},[506,2953,2955],{"class":508,"line":2954},41,[506,2956,569],{"emptyLinePlaceholder":206},[506,2958,2960,2962,2964,2966,2969,2971,2973],{"class":508,"line":2959},42,[506,2961,1322],{"class":585},[506,2963,725],{"class":520},[506,2965,537],{"class":516},[506,2967,2968],{"class":533},".button",[506,2970,537],{"class":516},[506,2972,608],{"class":516},[506,2974,675],{"class":516},[506,2976,2978,2980,2982,2984,2987],{"class":508,"line":2977},43,[506,2979,2920],{"class":984},[506,2981,669],{"class":516},[506,2983,1202],{"class":585},[506,2985,2986],{"class":520},"(spacingSm)",[506,2988,1269],{"class":516},[506,2990,2992,2994,2996,2998,3000],{"class":508,"line":2991},44,[506,2993,2935],{"class":984},[506,2995,669],{"class":516},[506,2997,1202],{"class":585},[506,2999,2056],{"class":520},[506,3001,1269],{"class":516},[506,3003,3005,3007,3009,3011],{"class":508,"line":3004},45,[506,3006,2120],{"class":984},[506,3008,669],{"class":516},[506,3010,1202],{"class":585},[506,3012,3013],{"class":520},"(spacingXs)\n",[506,3015,3017,3019,3021],{"class":508,"line":3016},46,[506,3018,624],{"class":516},[506,3020,1017],{"class":520},[506,3022,540],{"class":516},[506,3024,3026],{"class":508,"line":3025},47,[506,3027,569],{"emptyLinePlaceholder":206},[506,3029,3031,3033,3035,3037],{"class":508,"line":3030},48,[506,3032,645],{"class":512},[506,3034,648],{"class":512},[506,3036,651],{"class":520},[506,3038,540],{"class":516},[491,3040,3041],{"icon":140,"label":656},[496,3042,3044],{"className":659,"code":3043,"filename":661,"language":662,"meta":502,"style":502},":root {\n    --fluid--min-width: 320;\n    --fluid--max-width: 1440;\n    --fluid--screen: 100vw;\n    --fluid--breakpoint: calc(...);\n    --spacing--xs: calc(...);\n    --spacing--sm: calc(...);\n    --spacing--md: calc(...);\n    --spacing--lg: calc(...);\n    --spacing--xl: calc(...);\n    --spacing: calc(...);\n}\n\n.container {\n    padding: var(--spacing);\n    gap: var(--spacing--md);\n}\n\n.section {\n    margin-top: var(--spacing--xl);\n    margin-bottom: var(--spacing--lg);\n}\n\n.hero {\n    padding-block: var(--spacing--3xl);\n    padding-inline: var(--spacing--2xl);\n}\n\n.button {\n    padding-block: var(--spacing--sm);\n    padding-inline: var(--spacing);\n    gap: var(--spacing--xs);\n}\n",[470,3045,3046,3054,3064,3074,3084,3098,3113,3128,3143,3158,3173,3187,3191,3195,3203,3217,3232,3236,3240,3249,3265,3281,3285,3289,3298,3314,3330,3334,3338,3347,3362,3376,3391],{"__ignoreMap":502},[506,3047,3048,3050,3052],{"class":508,"line":509},[506,3049,669],{"class":516},[506,3051,672],{"class":575},[506,3053,675],{"class":516},[506,3055,3056,3058,3060,3062],{"class":508,"line":543},[506,3057,680],{"class":520},[506,3059,669],{"class":516},[506,3061,686],{"class":685},[506,3063,540],{"class":516},[506,3065,3066,3068,3070,3072],{"class":508,"line":566},[506,3067,693],{"class":520},[506,3069,669],{"class":516},[506,3071,698],{"class":685},[506,3073,540],{"class":516},[506,3075,3076,3078,3080,3082],{"class":508,"line":572},[506,3077,705],{"class":520},[506,3079,669],{"class":516},[506,3081,710],{"class":685},[506,3083,540],{"class":516},[506,3085,3086,3088,3090,3092,3094,3096],{"class":508,"line":593},[506,3087,717],{"class":520},[506,3089,669],{"class":516},[506,3091,722],{"class":585},[506,3093,725],{"class":516},[506,3095,728],{"class":520},[506,3097,731],{"class":516},[506,3099,3100,3103,3105,3107,3109,3111],{"class":508,"line":598},[506,3101,3102],{"class":520},"    --spacing--xs",[506,3104,669],{"class":516},[506,3106,722],{"class":585},[506,3108,725],{"class":516},[506,3110,728],{"class":520},[506,3112,731],{"class":516},[506,3114,3115,3118,3120,3122,3124,3126],{"class":508,"line":637},[506,3116,3117],{"class":520},"    --spacing--sm",[506,3119,669],{"class":516},[506,3121,722],{"class":585},[506,3123,725],{"class":516},[506,3125,728],{"class":520},[506,3127,731],{"class":516},[506,3129,3130,3133,3135,3137,3139,3141],{"class":508,"line":642},[506,3131,3132],{"class":520},"    --spacing--md",[506,3134,669],{"class":516},[506,3136,722],{"class":585},[506,3138,725],{"class":516},[506,3140,728],{"class":520},[506,3142,731],{"class":516},[506,3144,3145,3148,3150,3152,3154,3156],{"class":508,"line":998},[506,3146,3147],{"class":520},"    --spacing--lg",[506,3149,669],{"class":516},[506,3151,722],{"class":585},[506,3153,725],{"class":516},[506,3155,728],{"class":520},[506,3157,731],{"class":516},[506,3159,3160,3163,3165,3167,3169,3171],{"class":508,"line":1012},[506,3161,3162],{"class":520},"    --spacing--xl",[506,3164,669],{"class":516},[506,3166,722],{"class":585},[506,3168,725],{"class":516},[506,3170,728],{"class":520},[506,3172,731],{"class":516},[506,3174,3175,3177,3179,3181,3183,3185],{"class":508,"line":1022},[506,3176,2231],{"class":520},[506,3178,669],{"class":516},[506,3180,722],{"class":585},[506,3182,725],{"class":516},[506,3184,728],{"class":520},[506,3186,731],{"class":516},[506,3188,3189],{"class":508,"line":1027},[506,3190,736],{"class":516},[506,3192,3193],{"class":508,"line":1272},[506,3194,569],{"emptyLinePlaceholder":206},[506,3196,3197,3199,3201],{"class":508,"line":1307},[506,3198,1460],{"class":516},[506,3200,2347],{"class":1463},[506,3202,675],{"class":516},[506,3204,3205,3207,3209,3211,3213,3215],{"class":508,"line":1314},[506,3206,2049],{"class":1471},[506,3208,669],{"class":516},[506,3210,1477],{"class":585},[506,3212,725],{"class":516},[506,3214,2300],{"class":520},[506,3216,731],{"class":516},[506,3218,3219,3221,3223,3225,3227,3230],{"class":508,"line":1319},[506,3220,2120],{"class":1471},[506,3222,669],{"class":516},[506,3224,1477],{"class":585},[506,3226,725],{"class":516},[506,3228,3229],{"class":520},"--spacing--md",[506,3231,731],{"class":516},[506,3233,3234],{"class":508,"line":1338},[506,3235,736],{"class":516},[506,3237,3238],{"class":508,"line":1351},[506,3239,569],{"emptyLinePlaceholder":206},[506,3241,3242,3244,3247],{"class":508,"line":1360},[506,3243,1460],{"class":516},[506,3245,3246],{"class":1463},"section",[506,3248,675],{"class":516},[506,3250,3251,3254,3256,3258,3260,3263],{"class":508,"line":1365},[506,3252,3253],{"class":1471},"    margin-top",[506,3255,669],{"class":516},[506,3257,1477],{"class":585},[506,3259,725],{"class":516},[506,3261,3262],{"class":520},"--spacing--xl",[506,3264,731],{"class":516},[506,3266,3267,3270,3272,3274,3276,3279],{"class":508,"line":2094},[506,3268,3269],{"class":1471},"    margin-bottom",[506,3271,669],{"class":516},[506,3273,1477],{"class":585},[506,3275,725],{"class":516},[506,3277,3278],{"class":520},"--spacing--lg",[506,3280,731],{"class":516},[506,3282,3283],{"class":508,"line":2099},[506,3284,736],{"class":516},[506,3286,3287],{"class":508,"line":2117},[506,3288,569],{"emptyLinePlaceholder":206},[506,3290,3291,3293,3296],{"class":508,"line":2131},[506,3292,1460],{"class":516},[506,3294,3295],{"class":1463},"hero",[506,3297,675],{"class":516},[506,3299,3300,3303,3305,3307,3309,3312],{"class":508,"line":2144},[506,3301,3302],{"class":1471},"    padding-block",[506,3304,669],{"class":516},[506,3306,1477],{"class":585},[506,3308,725],{"class":516},[506,3310,3311],{"class":520},"--spacing--3xl",[506,3313,731],{"class":516},[506,3315,3316,3319,3321,3323,3325,3328],{"class":508,"line":2153},[506,3317,3318],{"class":1471},"    padding-inline",[506,3320,669],{"class":516},[506,3322,1477],{"class":585},[506,3324,725],{"class":516},[506,3326,3327],{"class":520},"--spacing--2xl",[506,3329,731],{"class":516},[506,3331,3332],{"class":508,"line":2158},[506,3333,736],{"class":516},[506,3335,3336],{"class":508,"line":2800},[506,3337,569],{"emptyLinePlaceholder":206},[506,3339,3340,3342,3345],{"class":508,"line":2813},[506,3341,1460],{"class":516},[506,3343,3344],{"class":1463},"button",[506,3346,675],{"class":516},[506,3348,3349,3351,3353,3355,3357,3360],{"class":508,"line":2825},[506,3350,3302],{"class":1471},[506,3352,669],{"class":516},[506,3354,1477],{"class":585},[506,3356,725],{"class":516},[506,3358,3359],{"class":520},"--spacing--sm",[506,3361,731],{"class":516},[506,3363,3364,3366,3368,3370,3372,3374],{"class":508,"line":2834},[506,3365,3318],{"class":1471},[506,3367,669],{"class":516},[506,3369,1477],{"class":585},[506,3371,725],{"class":516},[506,3373,2300],{"class":520},[506,3375,731],{"class":516},[506,3377,3378,3380,3382,3384,3386,3389],{"class":508,"line":2839},[506,3379,2120],{"class":1471},[506,3381,669],{"class":516},[506,3383,1477],{"class":585},[506,3385,725],{"class":516},[506,3387,3388],{"class":520},"--spacing--xs",[506,3390,731],{"class":516},[506,3392,3393],{"class":508,"line":2857},[506,3394,736],{"class":516},[480,3396,3398],{"id":3397},"fluid-container-widths","Fluid Container Widths",[421,3400,3401],{},"Create containers that scale fluidly between viewport sizes:",[496,3403,3405],{"className":498,"code":3404,"filename":500,"language":501,"meta":502,"style":502},"import { styleframe } from 'styleframe';\nimport { useFluidViewport, useFluidClamp } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { variable, ref, selector } = s;\n\nuseFluidViewport(s);\n\n// Fluid container max-widths\nconst containerSm = variable('container.sm', useFluidClamp(s, { min: 320, max: 640 }));\nconst containerMd = variable('container.md', useFluidClamp(s, { min: 640, max: 960 }));\nconst containerLg = variable('container.lg', useFluidClamp(s, { min: 960, max: 1280 }));\nconst containerXl = variable('container.xl', useFluidClamp(s, { min: 1280, max: 1600 }));\n\nselector('.container-sm', {\n    maxWidth: ref(containerSm),\n    marginInline: 'auto',\n    paddingInline: '1rem'\n});\n\nselector('.container-md', {\n    maxWidth: ref(containerMd),\n    marginInline: 'auto',\n    paddingInline: '1.5rem'\n});\n\nselector('.container-lg', {\n    maxWidth: ref(containerLg),\n    marginInline: 'auto',\n    paddingInline: '2rem'\n});\n\nselector('.container-xl', {\n    maxWidth: ref(containerXl),\n    marginInline: 'auto',\n    paddingInline: '2.5rem'\n});\n\nexport default s;\n",[470,3406,3407,3427,3451,3455,3469,3493,3497,3505,3509,3514,3565,3616,3667,3718,3722,3739,3752,3768,3781,3789,3793,3810,3823,3837,3850,3858,3862,3879,3892,3906,3919,3927,3931,3948,3961,3975,3988,3996,4000],{"__ignoreMap":502},[506,3408,3409,3411,3413,3415,3417,3419,3421,3423,3425],{"class":508,"line":509},[506,3410,513],{"class":512},[506,3412,517],{"class":516},[506,3414,521],{"class":520},[506,3416,524],{"class":516},[506,3418,527],{"class":512},[506,3420,530],{"class":516},[506,3422,534],{"class":533},[506,3424,537],{"class":516},[506,3426,540],{"class":516},[506,3428,3429,3431,3433,3435,3437,3439,3441,3443,3445,3447,3449],{"class":508,"line":543},[506,3430,513],{"class":512},[506,3432,517],{"class":516},[506,3434,550],{"class":520},[506,3436,608],{"class":516},[506,3438,1158],{"class":520},[506,3440,524],{"class":516},[506,3442,527],{"class":512},[506,3444,530],{"class":516},[506,3446,559],{"class":533},[506,3448,537],{"class":516},[506,3450,540],{"class":516},[506,3452,3453],{"class":508,"line":566},[506,3454,569],{"emptyLinePlaceholder":206},[506,3456,3457,3459,3461,3463,3465,3467],{"class":508,"line":572},[506,3458,576],{"class":575},[506,3460,579],{"class":520},[506,3462,582],{"class":516},[506,3464,521],{"class":585},[506,3466,588],{"class":520},[506,3468,540],{"class":516},[506,3470,3471,3473,3475,3477,3479,3481,3483,3485,3487,3489,3491],{"class":508,"line":593},[506,3472,576],{"class":575},[506,3474,517],{"class":516},[506,3476,1197],{"class":520},[506,3478,608],{"class":516},[506,3480,1202],{"class":520},[506,3482,608],{"class":516},[506,3484,1207],{"class":520},[506,3486,624],{"class":516},[506,3488,627],{"class":516},[506,3490,651],{"class":520},[506,3492,540],{"class":516},[506,3494,3495],{"class":508,"line":598},[506,3496,569],{"emptyLinePlaceholder":206},[506,3498,3499,3501,3503],{"class":508,"line":637},[506,3500,1229],{"class":585},[506,3502,632],{"class":520},[506,3504,540],{"class":516},[506,3506,3507],{"class":508,"line":642},[506,3508,569],{"emptyLinePlaceholder":206},[506,3510,3511],{"class":508,"line":998},[506,3512,3513],{"class":945},"// Fluid container max-widths\n",[506,3515,3516,3518,3521,3523,3525,3527,3529,3532,3534,3536,3538,3540,3542,3544,3546,3548,3550,3552,3554,3556,3559,3561,3563],{"class":508,"line":1012},[506,3517,576],{"class":575},[506,3519,3520],{"class":520}," containerSm ",[506,3522,582],{"class":516},[506,3524,1197],{"class":585},[506,3526,725],{"class":520},[506,3528,537],{"class":516},[506,3530,3531],{"class":533},"container.sm",[506,3533,537],{"class":516},[506,3535,608],{"class":516},[506,3537,1158],{"class":585},[506,3539,975],{"class":520},[506,3541,608],{"class":516},[506,3543,517],{"class":516},[506,3545,1284],{"class":984},[506,3547,669],{"class":516},[506,3549,686],{"class":685},[506,3551,608],{"class":516},[506,3553,1294],{"class":984},[506,3555,669],{"class":516},[506,3557,3558],{"class":685}," 640",[506,3560,524],{"class":516},[506,3562,1915],{"class":520},[506,3564,540],{"class":516},[506,3566,3567,3569,3572,3574,3576,3578,3580,3583,3585,3587,3589,3591,3593,3595,3597,3599,3601,3603,3605,3607,3610,3612,3614],{"class":508,"line":1022},[506,3568,576],{"class":575},[506,3570,3571],{"class":520}," containerMd ",[506,3573,582],{"class":516},[506,3575,1197],{"class":585},[506,3577,725],{"class":520},[506,3579,537],{"class":516},[506,3581,3582],{"class":533},"container.md",[506,3584,537],{"class":516},[506,3586,608],{"class":516},[506,3588,1158],{"class":585},[506,3590,975],{"class":520},[506,3592,608],{"class":516},[506,3594,517],{"class":516},[506,3596,1284],{"class":984},[506,3598,669],{"class":516},[506,3600,3558],{"class":685},[506,3602,608],{"class":516},[506,3604,1294],{"class":984},[506,3606,669],{"class":516},[506,3608,3609],{"class":685}," 960",[506,3611,524],{"class":516},[506,3613,1915],{"class":520},[506,3615,540],{"class":516},[506,3617,3618,3620,3623,3625,3627,3629,3631,3634,3636,3638,3640,3642,3644,3646,3648,3650,3652,3654,3656,3658,3661,3663,3665],{"class":508,"line":1027},[506,3619,576],{"class":575},[506,3621,3622],{"class":520}," containerLg ",[506,3624,582],{"class":516},[506,3626,1197],{"class":585},[506,3628,725],{"class":520},[506,3630,537],{"class":516},[506,3632,3633],{"class":533},"container.lg",[506,3635,537],{"class":516},[506,3637,608],{"class":516},[506,3639,1158],{"class":585},[506,3641,975],{"class":520},[506,3643,608],{"class":516},[506,3645,517],{"class":516},[506,3647,1284],{"class":984},[506,3649,669],{"class":516},[506,3651,3609],{"class":685},[506,3653,608],{"class":516},[506,3655,1294],{"class":984},[506,3657,669],{"class":516},[506,3659,3660],{"class":685}," 1280",[506,3662,524],{"class":516},[506,3664,1915],{"class":520},[506,3666,540],{"class":516},[506,3668,3669,3671,3674,3676,3678,3680,3682,3685,3687,3689,3691,3693,3695,3697,3699,3701,3703,3705,3707,3709,3712,3714,3716],{"class":508,"line":1272},[506,3670,576],{"class":575},[506,3672,3673],{"class":520}," containerXl ",[506,3675,582],{"class":516},[506,3677,1197],{"class":585},[506,3679,725],{"class":520},[506,3681,537],{"class":516},[506,3683,3684],{"class":533},"container.xl",[506,3686,537],{"class":516},[506,3688,608],{"class":516},[506,3690,1158],{"class":585},[506,3692,975],{"class":520},[506,3694,608],{"class":516},[506,3696,517],{"class":516},[506,3698,1284],{"class":984},[506,3700,669],{"class":516},[506,3702,3660],{"class":685},[506,3704,608],{"class":516},[506,3706,1294],{"class":984},[506,3708,669],{"class":516},[506,3710,3711],{"class":685}," 1600",[506,3713,524],{"class":516},[506,3715,1915],{"class":520},[506,3717,540],{"class":516},[506,3719,3720],{"class":508,"line":1307},[506,3721,569],{"emptyLinePlaceholder":206},[506,3723,3724,3726,3728,3730,3733,3735,3737],{"class":508,"line":1314},[506,3725,1322],{"class":585},[506,3727,725],{"class":520},[506,3729,537],{"class":516},[506,3731,3732],{"class":533},".container-sm",[506,3734,537],{"class":516},[506,3736,608],{"class":516},[506,3738,675],{"class":516},[506,3740,3741,3743,3745,3747,3750],{"class":508,"line":1319},[506,3742,1001],{"class":984},[506,3744,669],{"class":516},[506,3746,1202],{"class":585},[506,3748,3749],{"class":520},"(containerSm)",[506,3751,1269],{"class":516},[506,3753,3754,3757,3759,3761,3764,3766],{"class":508,"line":1338},[506,3755,3756],{"class":984},"    marginInline",[506,3758,669],{"class":516},[506,3760,530],{"class":516},[506,3762,3763],{"class":533},"auto",[506,3765,537],{"class":516},[506,3767,1269],{"class":516},[506,3769,3770,3772,3774,3776,3779],{"class":508,"line":1351},[506,3771,2935],{"class":984},[506,3773,669],{"class":516},[506,3775,530],{"class":516},[506,3777,3778],{"class":533},"1rem",[506,3780,2766],{"class":516},[506,3782,3783,3785,3787],{"class":508,"line":1360},[506,3784,624],{"class":516},[506,3786,1017],{"class":520},[506,3788,540],{"class":516},[506,3790,3791],{"class":508,"line":1365},[506,3792,569],{"emptyLinePlaceholder":206},[506,3794,3795,3797,3799,3801,3804,3806,3808],{"class":508,"line":2094},[506,3796,1322],{"class":585},[506,3798,725],{"class":520},[506,3800,537],{"class":516},[506,3802,3803],{"class":533},".container-md",[506,3805,537],{"class":516},[506,3807,608],{"class":516},[506,3809,675],{"class":516},[506,3811,3812,3814,3816,3818,3821],{"class":508,"line":2099},[506,3813,1001],{"class":984},[506,3815,669],{"class":516},[506,3817,1202],{"class":585},[506,3819,3820],{"class":520},"(containerMd)",[506,3822,1269],{"class":516},[506,3824,3825,3827,3829,3831,3833,3835],{"class":508,"line":2117},[506,3826,3756],{"class":984},[506,3828,669],{"class":516},[506,3830,530],{"class":516},[506,3832,3763],{"class":533},[506,3834,537],{"class":516},[506,3836,1269],{"class":516},[506,3838,3839,3841,3843,3845,3848],{"class":508,"line":2131},[506,3840,2935],{"class":984},[506,3842,669],{"class":516},[506,3844,530],{"class":516},[506,3846,3847],{"class":533},"1.5rem",[506,3849,2766],{"class":516},[506,3851,3852,3854,3856],{"class":508,"line":2144},[506,3853,624],{"class":516},[506,3855,1017],{"class":520},[506,3857,540],{"class":516},[506,3859,3860],{"class":508,"line":2153},[506,3861,569],{"emptyLinePlaceholder":206},[506,3863,3864,3866,3868,3870,3873,3875,3877],{"class":508,"line":2158},[506,3865,1322],{"class":585},[506,3867,725],{"class":520},[506,3869,537],{"class":516},[506,3871,3872],{"class":533},".container-lg",[506,3874,537],{"class":516},[506,3876,608],{"class":516},[506,3878,675],{"class":516},[506,3880,3881,3883,3885,3887,3890],{"class":508,"line":2800},[506,3882,1001],{"class":984},[506,3884,669],{"class":516},[506,3886,1202],{"class":585},[506,3888,3889],{"class":520},"(containerLg)",[506,3891,1269],{"class":516},[506,3893,3894,3896,3898,3900,3902,3904],{"class":508,"line":2813},[506,3895,3756],{"class":984},[506,3897,669],{"class":516},[506,3899,530],{"class":516},[506,3901,3763],{"class":533},[506,3903,537],{"class":516},[506,3905,1269],{"class":516},[506,3907,3908,3910,3912,3914,3917],{"class":508,"line":2825},[506,3909,2935],{"class":984},[506,3911,669],{"class":516},[506,3913,530],{"class":516},[506,3915,3916],{"class":533},"2rem",[506,3918,2766],{"class":516},[506,3920,3921,3923,3925],{"class":508,"line":2834},[506,3922,624],{"class":516},[506,3924,1017],{"class":520},[506,3926,540],{"class":516},[506,3928,3929],{"class":508,"line":2839},[506,3930,569],{"emptyLinePlaceholder":206},[506,3932,3933,3935,3937,3939,3942,3944,3946],{"class":508,"line":2857},[506,3934,1322],{"class":585},[506,3936,725],{"class":520},[506,3938,537],{"class":516},[506,3940,3941],{"class":533},".container-xl",[506,3943,537],{"class":516},[506,3945,608],{"class":516},[506,3947,675],{"class":516},[506,3949,3950,3952,3954,3956,3959],{"class":508,"line":2872},[506,3951,1001],{"class":984},[506,3953,669],{"class":516},[506,3955,1202],{"class":585},[506,3957,3958],{"class":520},"(containerXl)",[506,3960,1269],{"class":516},[506,3962,3963,3965,3967,3969,3971,3973],{"class":508,"line":2885},[506,3964,3756],{"class":984},[506,3966,669],{"class":516},[506,3968,530],{"class":516},[506,3970,3763],{"class":533},[506,3972,537],{"class":516},[506,3974,1269],{"class":516},[506,3976,3977,3979,3981,3983,3986],{"class":508,"line":2894},[506,3978,2935],{"class":984},[506,3980,669],{"class":516},[506,3982,530],{"class":516},[506,3984,3985],{"class":533},"2.5rem",[506,3987,2766],{"class":516},[506,3989,3990,3992,3994],{"class":508,"line":2899},[506,3991,624],{"class":516},[506,3993,1017],{"class":520},[506,3995,540],{"class":516},[506,3997,3998],{"class":508,"line":2917},[506,3999,569],{"emptyLinePlaceholder":206},[506,4001,4002,4004,4006,4008],{"class":508,"line":2932},[506,4003,645],{"class":512},[506,4005,648],{"class":512},[506,4007,651],{"class":520},[506,4009,540],{"class":516},[480,4011,4013],{"id":4012},"fluid-border-radius-scale","Fluid Border Radius Scale",[421,4015,4016],{},"Scale border radius values smoothly for cohesive visual design:",[496,4018,4020],{"className":498,"code":4019,"filename":500,"language":501,"meta":502,"style":502},"import { styleframe } from 'styleframe';\nimport { useFluidViewport, useFluidClamp } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { variable, ref, selector } = s;\n\nuseFluidViewport(s);\n\n// Fluid border radius scale\nconst {\n    borderRadius,\n    borderRadiusSm,\n    borderRadiusMd,\n    borderRadiusLg\n} = useBorderRadiusDesignTokens(s, {\n    sm: useFluidClamp(s, { min: 4, max: 6 }),\n    md: useFluidClamp(s, { min: 12, max: 16 }),\n    lg: useFluidClamp(s, { min: 16, max: 24 }),\n    default: '@font-size.md'\n)\n\nselector('.card', {\n    borderRadius: ref(borderRadius)\n});\n\nselector('.button', {\n    borderRadius: ref(borderRadiusSm)\n});\n\nselector('.modal', {\n    borderRadius: ref(borderRadiusLg)\n});\n\nexport default s;\n",[470,4021,4022,4042,4066,4070,4084,4108,4112,4120,4124,4129,4135,4141,4148,4155,4160,4175,4209,4243,4277,4289,4293,4297,4313,4323,4329,4333,4349,4360,4366,4370,4387,4398,4404,4408],{"__ignoreMap":502},[506,4023,4024,4026,4028,4030,4032,4034,4036,4038,4040],{"class":508,"line":509},[506,4025,513],{"class":512},[506,4027,517],{"class":516},[506,4029,521],{"class":520},[506,4031,524],{"class":516},[506,4033,527],{"class":512},[506,4035,530],{"class":516},[506,4037,534],{"class":533},[506,4039,537],{"class":516},[506,4041,540],{"class":516},[506,4043,4044,4046,4048,4050,4052,4054,4056,4058,4060,4062,4064],{"class":508,"line":543},[506,4045,513],{"class":512},[506,4047,517],{"class":516},[506,4049,550],{"class":520},[506,4051,608],{"class":516},[506,4053,1158],{"class":520},[506,4055,524],{"class":516},[506,4057,527],{"class":512},[506,4059,530],{"class":516},[506,4061,559],{"class":533},[506,4063,537],{"class":516},[506,4065,540],{"class":516},[506,4067,4068],{"class":508,"line":566},[506,4069,569],{"emptyLinePlaceholder":206},[506,4071,4072,4074,4076,4078,4080,4082],{"class":508,"line":572},[506,4073,576],{"class":575},[506,4075,579],{"class":520},[506,4077,582],{"class":516},[506,4079,521],{"class":585},[506,4081,588],{"class":520},[506,4083,540],{"class":516},[506,4085,4086,4088,4090,4092,4094,4096,4098,4100,4102,4104,4106],{"class":508,"line":593},[506,4087,576],{"class":575},[506,4089,517],{"class":516},[506,4091,1197],{"class":520},[506,4093,608],{"class":516},[506,4095,1202],{"class":520},[506,4097,608],{"class":516},[506,4099,1207],{"class":520},[506,4101,624],{"class":516},[506,4103,627],{"class":516},[506,4105,651],{"class":520},[506,4107,540],{"class":516},[506,4109,4110],{"class":508,"line":598},[506,4111,569],{"emptyLinePlaceholder":206},[506,4113,4114,4116,4118],{"class":508,"line":637},[506,4115,1229],{"class":585},[506,4117,632],{"class":520},[506,4119,540],{"class":516},[506,4121,4122],{"class":508,"line":642},[506,4123,569],{"emptyLinePlaceholder":206},[506,4125,4126],{"class":508,"line":998},[506,4127,4128],{"class":945},"// Fluid border radius scale\n",[506,4130,4131,4133],{"class":508,"line":1012},[506,4132,576],{"class":575},[506,4134,675],{"class":516},[506,4136,4137,4139],{"class":508,"line":1022},[506,4138,2076],{"class":520},[506,4140,1269],{"class":516},[506,4142,4143,4146],{"class":508,"line":1027},[506,4144,4145],{"class":520},"    borderRadiusSm",[506,4147,1269],{"class":516},[506,4149,4150,4153],{"class":508,"line":1272},[506,4151,4152],{"class":520},"    borderRadiusMd",[506,4154,1269],{"class":516},[506,4156,4157],{"class":508,"line":1307},[506,4158,4159],{"class":520},"    borderRadiusLg\n",[506,4161,4162,4164,4166,4169,4171,4173],{"class":508,"line":1314},[506,4163,624],{"class":516},[506,4165,627],{"class":516},[506,4167,4168],{"class":585}," useBorderRadiusDesignTokens",[506,4170,975],{"class":520},[506,4172,608],{"class":516},[506,4174,675],{"class":516},[506,4176,4177,4179,4181,4183,4185,4187,4189,4191,4193,4195,4197,4199,4201,4203,4205,4207],{"class":508,"line":1319},[506,4178,2614],{"class":984},[506,4180,669],{"class":516},[506,4182,1158],{"class":585},[506,4184,975],{"class":520},[506,4186,608],{"class":516},[506,4188,517],{"class":516},[506,4190,1284],{"class":984},[506,4192,669],{"class":516},[506,4194,2594],{"class":685},[506,4196,608],{"class":516},[506,4198,1294],{"class":984},[506,4200,669],{"class":516},[506,4202,2603],{"class":685},[506,4204,524],{"class":516},[506,4206,1017],{"class":520},[506,4208,1269],{"class":516},[506,4210,4211,4213,4215,4217,4219,4221,4223,4225,4227,4229,4231,4233,4235,4237,4239,4241],{"class":508,"line":1338},[506,4212,2649],{"class":984},[506,4214,669],{"class":516},[506,4216,1158],{"class":585},[506,4218,975],{"class":520},[506,4220,608],{"class":516},[506,4222,517],{"class":516},[506,4224,1284],{"class":984},[506,4226,669],{"class":516},[506,4228,2012],{"class":685},[506,4230,608],{"class":516},[506,4232,1294],{"class":984},[506,4234,669],{"class":516},[506,4236,1289],{"class":685},[506,4238,524],{"class":516},[506,4240,1017],{"class":520},[506,4242,1269],{"class":516},[506,4244,4245,4247,4249,4251,4253,4255,4257,4259,4261,4263,4265,4267,4269,4271,4273,4275],{"class":508,"line":1351},[506,4246,2684],{"class":984},[506,4248,669],{"class":516},[506,4250,1158],{"class":585},[506,4252,975],{"class":520},[506,4254,608],{"class":516},[506,4256,517],{"class":516},[506,4258,1284],{"class":984},[506,4260,669],{"class":516},[506,4262,1289],{"class":685},[506,4264,608],{"class":516},[506,4266,1294],{"class":984},[506,4268,669],{"class":516},[506,4270,1910],{"class":685},[506,4272,524],{"class":516},[506,4274,1017],{"class":520},[506,4276,1269],{"class":516},[506,4278,4279,4281,4283,4285,4287],{"class":508,"line":1360},[506,4280,2756],{"class":984},[506,4282,669],{"class":516},[506,4284,530],{"class":516},[506,4286,2763],{"class":533},[506,4288,2766],{"class":516},[506,4290,4291],{"class":508,"line":1365},[506,4292,1304],{"class":520},[506,4294,4295],{"class":508,"line":2094},[506,4296,569],{"emptyLinePlaceholder":206},[506,4298,4299,4301,4303,4305,4307,4309,4311],{"class":508,"line":2099},[506,4300,1322],{"class":585},[506,4302,725],{"class":520},[506,4304,537],{"class":516},[506,4306,2038],{"class":533},[506,4308,537],{"class":516},[506,4310,608],{"class":516},[506,4312,675],{"class":516},[506,4314,4315,4317,4319,4321],{"class":508,"line":2117},[506,4316,2076],{"class":984},[506,4318,669],{"class":516},[506,4320,1202],{"class":585},[506,4322,2083],{"class":520},[506,4324,4325,4327],{"class":508,"line":2131},[506,4326,624],{"class":516},[506,4328,731],{"class":520},[506,4330,4331],{"class":508,"line":2144},[506,4332,569],{"emptyLinePlaceholder":206},[506,4334,4335,4337,4339,4341,4343,4345,4347],{"class":508,"line":2153},[506,4336,1322],{"class":585},[506,4338,725],{"class":520},[506,4340,537],{"class":516},[506,4342,2968],{"class":533},[506,4344,537],{"class":516},[506,4346,608],{"class":516},[506,4348,675],{"class":516},[506,4350,4351,4353,4355,4357],{"class":508,"line":2158},[506,4352,2076],{"class":984},[506,4354,669],{"class":516},[506,4356,1202],{"class":585},[506,4358,4359],{"class":520},"(borderRadiusSm)\n",[506,4361,4362,4364],{"class":508,"line":2800},[506,4363,624],{"class":516},[506,4365,731],{"class":520},[506,4367,4368],{"class":508,"line":2813},[506,4369,569],{"emptyLinePlaceholder":206},[506,4371,4372,4374,4376,4378,4381,4383,4385],{"class":508,"line":2825},[506,4373,1322],{"class":585},[506,4375,725],{"class":520},[506,4377,537],{"class":516},[506,4379,4380],{"class":533},".modal",[506,4382,537],{"class":516},[506,4384,608],{"class":516},[506,4386,675],{"class":516},[506,4388,4389,4391,4393,4395],{"class":508,"line":2834},[506,4390,2076],{"class":984},[506,4392,669],{"class":516},[506,4394,1202],{"class":585},[506,4396,4397],{"class":520},"(borderRadiusLg)\n",[506,4399,4400,4402],{"class":508,"line":2839},[506,4401,624],{"class":516},[506,4403,731],{"class":520},[506,4405,4406],{"class":508,"line":2857},[506,4407,569],{"emptyLinePlaceholder":206},[506,4409,4410],{"class":508,"line":2872},[506,4411,4412],{"class":520},"export default s;\n",[417,4414,4416],{"id":4415},"best-practices","Best Practices",[432,4418,4419,4428,4434,4440,4446,4452,4462,4475,4481,4487],{},[435,4420,4421,4427],{},[438,4422,4423,4424,4426],{},"Call ",[470,4425,472],{}," once",": Set up your fluid viewport range once at the beginning of your theme configuration. Multiple calls will override previous values.",[435,4429,4430,4433],{},[438,4431,4432],{},"Use meaningful value ranges",": Choose min/max values that create noticeable but not jarring differences. Aim for 25-50% change between endpoints (e.g., 16px to 24px, not 16px to 16.5px).",[435,4435,4436,4439],{},[438,4437,4438],{},"Test at multiple viewport sizes",": Always verify your fluid values at minimum, middle, and maximum viewport widths, plus various in-between sizes to ensure smooth transitions.",[435,4441,4442,4445],{},[438,4443,4444],{},"Match scaling ratios",": Keep similar scaling ratios across related values. If font sizes grow by 1.5x, consider spacing growing by a similar ratio for visual harmony.",[435,4447,4448,4451],{},[438,4449,4450],{},"Document your viewport range",": Always comment why you chose specific viewport widths. Link to analytics data or design requirements.",[435,4453,4454,4457,4458,4461],{},[438,4455,4456],{},"Consider performance",": Fluid calculations use CSS ",[470,4459,4460],{},"calc()"," which is well-optimized, but avoid nesting too many calculations (3-4 levels deep maximum).",[435,4463,4464,4471,4472,4474],{},[438,4465,4466,4467,4470],{},"Use ",[470,4468,4469],{},"useFluidFontSize()"," for typography",": For complete type systems with modular scales, use ",[470,4473,4469],{}," instead of creating individual font size clamps.",[435,4476,4477,4480],{},[438,4478,4479],{},"Combine with media queries",": Use fluid values for smooth scaling and media queries for layout changes. They complement each other.",[435,4482,4483,4486],{},[438,4484,4485],{},"Start conservative",": Begin with subtle fluid scaling and increase ranges based on testing. It's easier to scale up than fix overly aggressive scaling.",[435,4488,4489,4492],{},[438,4490,4491],{},"Create custom breakpoints sparingly",": Most projects only need one viewport range. Add custom breakpoints only when you have specific requirements for different device categories.",[4494,4495,4496,4499,4500,4502],"note",{},[438,4497,4498],{},"Good to know:"," Fluid values use CSS ",[470,4501,4460],{}," which has excellent browser support and performance. The calculations happen at render time, allowing smooth scaling at any viewport size without JavaScript.",[417,4504,4506],{"id":4505},"faq","FAQ",[4508,4509,4510,4516,4536,4540,4547,4564,4568,4572,4576,4580],"accordion",{},[4511,4512,4515],"accordion-item",{"icon":4513,"label":4514},"i-lucide-circle-help","When should I use fluid values vs media queries?","Use fluid values for properties that should scale smoothly (font sizes, spacing, border radius). Use media queries for discrete layout changes (column count, flexbox direction, display properties). Often you'll use both together: fluid values for smooth scaling and media queries for structural changes.",[4511,4517,4519,4521,4522,4524,4525,4528,4529,4532,4533,4535],{"icon":4513,"label":4518},"What's the difference between useFluidClamp() and CSS clamp()?",[470,4520,1104],{}," generates a CSS ",[470,4523,4460],{}," expression that interpolates between two values based on viewport width. CSS ",[470,4526,4527],{},"clamp()"," also takes a preferred value but uses viewport units directly (e.g., ",[470,4530,4531],{},"clamp(16px, 4vw, 20px)","). ",[470,4534,1104],{}," provides more control and consistency across your design system by using a shared breakpoint calculation.",[4511,4537,4539],{"icon":4513,"label":4538},"Can I use different viewport ranges for different properties?","Yes! Create custom breakpoint variables for different purposes. For example, use one range for body text (320-1440px) and another for hero sections (1024-1920px). This gives you fine-grained control over scaling behavior.",[4511,4541,4543,4544,4546],{"icon":4513,"label":4542},"Does useFluidClamp() work with non-pixel values?","Yes, but the formula assumes pixel-based calculations for the conversion to rem units. For best results and consistency, use numeric pixel values. For other units, you may need to handle the conversion manually or use CSS ",[470,4545,4460],{}," directly.",[4511,4548,4550,4551,4553,4554,4557,4558,4561,4562,1460],{"icon":4513,"label":4549},"How do I make a value fluid only on mobile or desktop?","Create a custom breakpoint variable with a narrow viewport range using ",[470,4552,472],{},". For mobile-only scaling, use ",[470,4555,4556],{},"minWidth: 320, maxWidth: 767",". For desktop-only, use ",[470,4559,4560],{},"minWidth: 1024, maxWidth: 1920",". Pass this custom breakpoint as the third argument to ",[470,4563,1104],{},[4511,4565,4567],{"icon":4513,"label":4566},"Can I combine fluid values with fixed values?","Absolutely! Mix fluid and fixed values as needed within the same component. For example, use fluid font sizes and spacing but fixed border widths and shadows. You can also combine fluid values with media queries for layout changes like column count or flexbox direction.",[4511,4569,4571],{"icon":4513,"label":4570},"What viewport range should I choose?","Choose a range that covers your primary user devices. Check your analytics to see common viewport sizes. The default 320-1440px covers most devices. For modern mobile-first sites, consider 375-1600px. For desktop-focused applications, try 1024-1920px. Always test with real devices and content.",[4511,4573,4575],{"icon":4513,"label":4574},"How does this compare to container queries?","Container queries respond to a parent element's size, while fluid viewport values respond to the viewport size. Both have their place. Use fluid viewport values for global scaling consistency. Use container queries when component size should depend on its container rather than the viewport.",[4511,4577,4579],{"icon":4513,"label":4578},"Can I animate fluid values?","Fluid values transition smoothly as the viewport resizes, but this happens automatically through the CSS calculation. You can apply CSS transitions to properties using fluid values if you want to animate changes from other sources (like theme switches or hover states). The fluid scaling itself happens instantly as the viewport changes.",[4511,4581,4583],{"icon":4513,"label":4582},"Should I use useFluidClamp() for everything?","No. Use fluid values for properties that benefit from smooth viewport-based scaling: spacing, typography, border radius, and container widths. Keep fixed values for properties that should remain constant: border widths, shadows, opacity, z-index, and structural layout properties. Not everything needs to scale.",[4585,4586,4587],"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 .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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":502,"searchDepth":543,"depth":543,"links":4589},[4590,4591,4592,4597,4601,4602,4607,4608],{"id":419,"depth":543,"text":64},{"id":426,"depth":543,"text":427},{"id":468,"depth":543,"text":472,"children":4593},[4594,4595,4596],{"id":482,"depth":566,"text":483},{"id":796,"depth":566,"text":797},{"id":865,"depth":566,"text":866},{"id":1101,"depth":543,"text":1104,"children":4598},[4599,4600],{"id":1112,"depth":566,"text":1113},{"id":1491,"depth":566,"text":1492},{"id":1744,"depth":543,"text":1745},{"id":2385,"depth":543,"text":2386,"children":4603},[4604,4605,4606],{"id":2389,"depth":566,"text":2390},{"id":3397,"depth":566,"text":3398},{"id":4012,"depth":566,"text":4013},{"id":4415,"depth":543,"text":4416},{"id":4505,"depth":543,"text":4506},"Create fluid, responsive design tokens that scale smoothly between viewport sizes using auto-generated complex CSS calculations.","md",null,{},{"title":199},{"title":409,"description":4609},{"loc":200},"ZHsupynfs75eyaOzWQ2LmOlK8VYNwOE31ogW7mWDjXc",[4618,4620],{"title":64,"path":194,"stem":195,"description":4619,"children":-1},"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.",{"title":203,"path":204,"stem":205,"description":4621,"children":-1},"Create fluid typography systems that scale smoothly across viewports using mathematical modular scales and CSS clamp functions.",1776621128535]