[{"data":1,"prerenderedAt":5510},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-composables-border-radiuses":407,"-docs-theme-design-tokens-composables-border-radiuses-surround":5505},{"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":5498,"extension":960,"links":5499,"meta":5500,"navigation":5501,"path":166,"seo":5502,"sitemap":5503,"stem":167,"__hash__":5504},"docs_theme/docs/theme/design-tokens/02.composables/00.border-radiuses.md","Border Radiuses Design Tokens",{"type":411,"value":412,"toc":5481},"minimark",[413,417,421,425,428,463,470,477,943,965,980,987,997,1000,1717,1722,1729,1737,1742,1745,2010,2014,2021,2314,2318,2321,2890,2894,2898,2901,4213,4217,4220,5275,5279,5366,5377,5381,5477],[414,415,64],"h2",{"id":416},"overview",[418,419,420],"p",{},"The border radius composable helps you create consistent rounded corner systems with minimal code. It generates border-radius variables that can be easily referenced throughout your application, enabling flexible theming and consistent visual styling for your components.",[414,422,424],{"id":423},"why-use-border-radius-composables","Why use border radius composables?",[418,426,427],{},"Border radius composables help you:",[429,430,431,439,445,451,457],"ul",{},[432,433,434,438],"li",{},[435,436,437],"strong",{},"Maintain visual consistency",": Define corner radius values once and use them throughout your application.",[432,440,441,444],{},[435,442,443],{},"Enable flexible theming",": Override border radius variables to instantly update component styling across your application.",[432,446,447,450],{},[435,448,449],{},"Simplify component styling",": Reference semantic border radius names instead of repeating pixel values.",[432,452,453,456],{},[435,454,455],{},"Create cohesive design systems",": Establish a standard set of border radius values that work harmoniously together.",[432,458,459,462],{},[435,460,461],{},"Support theme variations",": Easily switch between sharp, rounded, or pill-shaped corners across your entire design system.",[414,464,466],{"id":465},"useborderradiusdesigntokens",[467,468,469],"code",{},"useBorderRadiusDesignTokens",[418,471,472,473,476],{},"The ",[467,474,475],{},"useBorderRadiusDesignTokens()"," function creates a set of border radius variables from a simple object of radius value definitions.",[478,479,480,826],"tabs",{},[481,482,485],"tabs-item",{"icon":483,"label":484},"i-lucide-code","Code",[486,487,493],"pre",{"className":488,"code":489,"filename":490,"language":491,"meta":492,"style":492},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useBorderRadiusDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst {\n    borderRadius,\n    borderRadiusNone,\n    borderRadiusSm,\n    borderRadiusMd,\n    borderRadiusLg,\n    borderRadiusXl,\n    borderRadiusFull,\n} = useBorderRadiusDesignTokens(s, {\n    none: '0',\n    sm: '0.25rem',\n    md: '0.375rem',\n    lg: '0.5rem',\n    xl: '0.75rem',\n    full: '9999px',\n    default: '@border-radius.md',\n} as const);\n\nexport default s;\n","styleframe.config.ts","ts","",[467,494,495,531,554,560,581,586,594,603,611,619,627,635,643,651,670,689,706,723,740,757,774,791,807,812],{"__ignoreMap":492},[496,497,500,504,508,512,515,518,521,525,528],"span",{"class":498,"line":499},"line",1,[496,501,503],{"class":502},"s7zQu","import",[496,505,507],{"class":506},"sMK4o"," {",[496,509,511],{"class":510},"sTEyZ"," styleframe",[496,513,514],{"class":506}," }",[496,516,517],{"class":502}," from",[496,519,520],{"class":506}," '",[496,522,524],{"class":523},"sfazB","styleframe",[496,526,527],{"class":506},"'",[496,529,530],{"class":506},";\n",[496,532,534,536,538,541,543,545,547,550,552],{"class":498,"line":533},2,[496,535,503],{"class":502},[496,537,507],{"class":506},[496,539,540],{"class":510}," useBorderRadiusDesignTokens",[496,542,514],{"class":506},[496,544,517],{"class":502},[496,546,520],{"class":506},[496,548,549],{"class":523},"@styleframe/theme",[496,551,527],{"class":506},[496,553,530],{"class":506},[496,555,557],{"class":498,"line":556},3,[496,558,559],{"emptyLinePlaceholder":206},"\n",[496,561,563,567,570,573,576,579],{"class":498,"line":562},4,[496,564,566],{"class":565},"spNyl","const",[496,568,569],{"class":510}," s ",[496,571,572],{"class":506},"=",[496,574,511],{"class":575},"s2Zo4",[496,577,578],{"class":510},"()",[496,580,530],{"class":506},[496,582,584],{"class":498,"line":583},5,[496,585,559],{"emptyLinePlaceholder":206},[496,587,589,591],{"class":498,"line":588},6,[496,590,566],{"class":565},[496,592,593],{"class":506}," {\n",[496,595,597,600],{"class":498,"line":596},7,[496,598,599],{"class":510},"    borderRadius",[496,601,602],{"class":506},",\n",[496,604,606,609],{"class":498,"line":605},8,[496,607,608],{"class":510},"    borderRadiusNone",[496,610,602],{"class":506},[496,612,614,617],{"class":498,"line":613},9,[496,615,616],{"class":510},"    borderRadiusSm",[496,618,602],{"class":506},[496,620,622,625],{"class":498,"line":621},10,[496,623,624],{"class":510},"    borderRadiusMd",[496,626,602],{"class":506},[496,628,630,633],{"class":498,"line":629},11,[496,631,632],{"class":510},"    borderRadiusLg",[496,634,602],{"class":506},[496,636,638,641],{"class":498,"line":637},12,[496,639,640],{"class":510},"    borderRadiusXl",[496,642,602],{"class":506},[496,644,646,649],{"class":498,"line":645},13,[496,647,648],{"class":510},"    borderRadiusFull",[496,650,602],{"class":506},[496,652,654,657,660,662,665,668],{"class":498,"line":653},14,[496,655,656],{"class":506},"}",[496,658,659],{"class":506}," =",[496,661,540],{"class":575},[496,663,664],{"class":510},"(s",[496,666,667],{"class":506},",",[496,669,593],{"class":506},[496,671,673,677,680,682,685,687],{"class":498,"line":672},15,[496,674,676],{"class":675},"swJcz","    none",[496,678,679],{"class":506},":",[496,681,520],{"class":506},[496,683,684],{"class":523},"0",[496,686,527],{"class":506},[496,688,602],{"class":506},[496,690,692,695,697,699,702,704],{"class":498,"line":691},16,[496,693,694],{"class":675},"    sm",[496,696,679],{"class":506},[496,698,520],{"class":506},[496,700,701],{"class":523},"0.25rem",[496,703,527],{"class":506},[496,705,602],{"class":506},[496,707,709,712,714,716,719,721],{"class":498,"line":708},17,[496,710,711],{"class":675},"    md",[496,713,679],{"class":506},[496,715,520],{"class":506},[496,717,718],{"class":523},"0.375rem",[496,720,527],{"class":506},[496,722,602],{"class":506},[496,724,726,729,731,733,736,738],{"class":498,"line":725},18,[496,727,728],{"class":675},"    lg",[496,730,679],{"class":506},[496,732,520],{"class":506},[496,734,735],{"class":523},"0.5rem",[496,737,527],{"class":506},[496,739,602],{"class":506},[496,741,743,746,748,750,753,755],{"class":498,"line":742},19,[496,744,745],{"class":675},"    xl",[496,747,679],{"class":506},[496,749,520],{"class":506},[496,751,752],{"class":523},"0.75rem",[496,754,527],{"class":506},[496,756,602],{"class":506},[496,758,760,763,765,767,770,772],{"class":498,"line":759},20,[496,761,762],{"class":675},"    full",[496,764,679],{"class":506},[496,766,520],{"class":506},[496,768,769],{"class":523},"9999px",[496,771,527],{"class":506},[496,773,602],{"class":506},[496,775,777,780,782,784,787,789],{"class":498,"line":776},21,[496,778,779],{"class":675},"    default",[496,781,679],{"class":506},[496,783,520],{"class":506},[496,785,786],{"class":523},"@border-radius.md",[496,788,527],{"class":506},[496,790,602],{"class":506},[496,792,794,796,799,802,805],{"class":498,"line":793},22,[496,795,656],{"class":506},[496,797,798],{"class":502}," as",[496,800,801],{"class":565}," const",[496,803,804],{"class":510},")",[496,806,530],{"class":506},[496,808,810],{"class":498,"line":809},23,[496,811,559],{"emptyLinePlaceholder":206},[496,813,815,818,821,824],{"class":498,"line":814},24,[496,816,817],{"class":502},"export",[496,819,820],{"class":502}," default",[496,822,823],{"class":510}," s",[496,825,530],{"class":506},[481,827,829],{"icon":140,"label":828},"Output",[486,830,835],{"className":831,"code":832,"filename":833,"language":834,"meta":492,"style":492},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --border-radius--none: 0;\n    --border-radius--sm: 0.25rem;\n    --border-radius--md: 0.375rem;\n    --border-radius--lg: 0.5rem;\n    --border-radius--xl: 0.75rem;\n    --border-radius--full: 9999px;\n    --border-radius: var(--border-radius--md);\n}\n","styleframe/index.css","css",[467,836,837,846,859,871,883,895,907,919,938],{"__ignoreMap":492},[496,838,839,841,844],{"class":498,"line":499},[496,840,679],{"class":506},[496,842,843],{"class":565},"root",[496,845,593],{"class":506},[496,847,848,851,853,857],{"class":498,"line":533},[496,849,850],{"class":510},"    --border-radius--none",[496,852,679],{"class":506},[496,854,856],{"class":855},"sbssI"," 0",[496,858,530],{"class":506},[496,860,861,864,866,869],{"class":498,"line":556},[496,862,863],{"class":510},"    --border-radius--sm",[496,865,679],{"class":506},[496,867,868],{"class":855}," 0.25rem",[496,870,530],{"class":506},[496,872,873,876,878,881],{"class":498,"line":562},[496,874,875],{"class":510},"    --border-radius--md",[496,877,679],{"class":506},[496,879,880],{"class":855}," 0.375rem",[496,882,530],{"class":506},[496,884,885,888,890,893],{"class":498,"line":583},[496,886,887],{"class":510},"    --border-radius--lg",[496,889,679],{"class":506},[496,891,892],{"class":855}," 0.5rem",[496,894,530],{"class":506},[496,896,897,900,902,905],{"class":498,"line":588},[496,898,899],{"class":510},"    --border-radius--xl",[496,901,679],{"class":506},[496,903,904],{"class":855}," 0.75rem",[496,906,530],{"class":506},[496,908,909,912,914,917],{"class":498,"line":596},[496,910,911],{"class":510},"    --border-radius--full",[496,913,679],{"class":506},[496,915,916],{"class":855}," 9999px",[496,918,530],{"class":506},[496,920,921,924,926,929,932,935],{"class":498,"line":605},[496,922,923],{"class":510},"    --border-radius",[496,925,679],{"class":506},[496,927,928],{"class":575}," var",[496,930,931],{"class":506},"(",[496,933,934],{"class":510},"--border-radius--md",[496,936,937],{"class":506},");\n",[496,939,940],{"class":498,"line":613},[496,941,942],{"class":506},"}\n",[418,944,945,946,949,950,953,954,957,958,953,961,964],{},"Each key in the object becomes a border radius variable with the prefix ",[467,947,948],{},"border-radius--",", and the export name is automatically converted to camelCase (e.g., ",[467,951,952],{},"sm"," → ",[467,955,956],{},"borderRadiusSm",", ",[467,959,960],{},"md",[467,962,963],{},"borderRadiusMd",").",[966,967,968,971,972,975,976,979],"tip",{},[435,969,970],{},"Pro tip:"," Use the ",[467,973,974],{},"default"," key for your most common border radius. It will create a variable named ",[467,977,978],{},"--border-radius"," without any suffix, making it the natural choice for standard rounded corners throughout your application.",[414,981,983,984],{"id":982},"integration-with-usemultiplierdesigntokens","Integration with ",[467,985,986],{},"useMultiplierDesignTokens",[418,988,989,990,992,993,996],{},"The real power of ",[467,991,469],{}," comes when combined with ",[467,994,995],{},"useMultiplierDesignTokens()"," and modular scales. This allows you to create mathematically harmonious border radius systems that maintain consistent proportions.",[418,998,999],{},"Create a border radius scale based on a modular scale ratio:",[478,1001,1002,1439],{},[481,1003,1004],{"icon":483,"label":484},[486,1005,1007],{"className":488,"code":1006,"filename":490,"language":491,"meta":492,"style":492},"import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens, useScalePowersDesignTokens, useMultiplierDesignTokens, useBorderRadiusDesignTokens, defaultScaleValues } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Use the Minor Third scale (1.2) for balanced progression\nconst { scale } = useScaleDesignTokens(s, { ...defaultScaleValues, default: '@scale.minor-third' });\n\n// Define base border radius\nconst { borderRadius } = useBorderRadiusDesignTokens(s, { default: '0.25rem' });\n\n// Create scale powers\nconst scalePowers = useScalePowersDesignTokens(s, scale);\n\n// Generate border radius variables automatically\nconst {\n    borderRadiusXs,\n    borderRadiusSm,\n    borderRadiusMd,\n    borderRadiusLg,\n    borderRadiusXl,\n    borderRadius2xl,\n} = useMultiplierDesignTokens(s, borderRadius, {\n    xs: scalePowers[-2],   // ~0.17rem\n    sm: scalePowers[-1],   // ~0.21rem\n    md: scalePowers[0],    // 0.25rem (base)\n    lg: scalePowers[1],    // ~0.30rem\n    xl: scalePowers[2],    // ~0.36rem\n    '2xl': scalePowers[3], // ~0.43rem\n});\n\nexport default s;\n",[467,1008,1009,1029,1069,1073,1087,1091,1097,1143,1147,1152,1189,1193,1198,1218,1222,1227,1233,1240,1246,1252,1258,1264,1271,1290,1314,1335,1353,1371,1389,1414,1423,1428],{"__ignoreMap":492},[496,1010,1011,1013,1015,1017,1019,1021,1023,1025,1027],{"class":498,"line":499},[496,1012,503],{"class":502},[496,1014,507],{"class":506},[496,1016,511],{"class":510},[496,1018,514],{"class":506},[496,1020,517],{"class":502},[496,1022,520],{"class":506},[496,1024,524],{"class":523},[496,1026,527],{"class":506},[496,1028,530],{"class":506},[496,1030,1031,1033,1035,1038,1040,1043,1045,1048,1050,1052,1054,1057,1059,1061,1063,1065,1067],{"class":498,"line":533},[496,1032,503],{"class":502},[496,1034,507],{"class":506},[496,1036,1037],{"class":510}," useScaleDesignTokens",[496,1039,667],{"class":506},[496,1041,1042],{"class":510}," useScalePowersDesignTokens",[496,1044,667],{"class":506},[496,1046,1047],{"class":510}," useMultiplierDesignTokens",[496,1049,667],{"class":506},[496,1051,540],{"class":510},[496,1053,667],{"class":506},[496,1055,1056],{"class":510}," defaultScaleValues",[496,1058,514],{"class":506},[496,1060,517],{"class":502},[496,1062,520],{"class":506},[496,1064,549],{"class":523},[496,1066,527],{"class":506},[496,1068,530],{"class":506},[496,1070,1071],{"class":498,"line":556},[496,1072,559],{"emptyLinePlaceholder":206},[496,1074,1075,1077,1079,1081,1083,1085],{"class":498,"line":562},[496,1076,566],{"class":565},[496,1078,569],{"class":510},[496,1080,572],{"class":506},[496,1082,511],{"class":575},[496,1084,578],{"class":510},[496,1086,530],{"class":506},[496,1088,1089],{"class":498,"line":583},[496,1090,559],{"emptyLinePlaceholder":206},[496,1092,1093],{"class":498,"line":588},[496,1094,1096],{"class":1095},"sHwdD","// Use the Minor Third scale (1.2) for balanced progression\n",[496,1098,1099,1101,1103,1106,1108,1110,1112,1114,1116,1118,1121,1124,1126,1128,1130,1132,1135,1137,1139,1141],{"class":498,"line":596},[496,1100,566],{"class":565},[496,1102,507],{"class":506},[496,1104,1105],{"class":510}," scale ",[496,1107,656],{"class":506},[496,1109,659],{"class":506},[496,1111,1037],{"class":575},[496,1113,664],{"class":510},[496,1115,667],{"class":506},[496,1117,507],{"class":506},[496,1119,1120],{"class":506}," ...",[496,1122,1123],{"class":510},"defaultScaleValues",[496,1125,667],{"class":506},[496,1127,820],{"class":675},[496,1129,679],{"class":506},[496,1131,520],{"class":506},[496,1133,1134],{"class":523},"@scale.minor-third",[496,1136,527],{"class":506},[496,1138,514],{"class":506},[496,1140,804],{"class":510},[496,1142,530],{"class":506},[496,1144,1145],{"class":498,"line":605},[496,1146,559],{"emptyLinePlaceholder":206},[496,1148,1149],{"class":498,"line":613},[496,1150,1151],{"class":1095},"// Define base border radius\n",[496,1153,1154,1156,1158,1161,1163,1165,1167,1169,1171,1173,1175,1177,1179,1181,1183,1185,1187],{"class":498,"line":621},[496,1155,566],{"class":565},[496,1157,507],{"class":506},[496,1159,1160],{"class":510}," borderRadius ",[496,1162,656],{"class":506},[496,1164,659],{"class":506},[496,1166,540],{"class":575},[496,1168,664],{"class":510},[496,1170,667],{"class":506},[496,1172,507],{"class":506},[496,1174,820],{"class":675},[496,1176,679],{"class":506},[496,1178,520],{"class":506},[496,1180,701],{"class":523},[496,1182,527],{"class":506},[496,1184,514],{"class":506},[496,1186,804],{"class":510},[496,1188,530],{"class":506},[496,1190,1191],{"class":498,"line":629},[496,1192,559],{"emptyLinePlaceholder":206},[496,1194,1195],{"class":498,"line":637},[496,1196,1197],{"class":1095},"// Create scale powers\n",[496,1199,1200,1202,1205,1207,1209,1211,1213,1216],{"class":498,"line":645},[496,1201,566],{"class":565},[496,1203,1204],{"class":510}," scalePowers ",[496,1206,572],{"class":506},[496,1208,1042],{"class":575},[496,1210,664],{"class":510},[496,1212,667],{"class":506},[496,1214,1215],{"class":510}," scale)",[496,1217,530],{"class":506},[496,1219,1220],{"class":498,"line":653},[496,1221,559],{"emptyLinePlaceholder":206},[496,1223,1224],{"class":498,"line":672},[496,1225,1226],{"class":1095},"// Generate border radius variables automatically\n",[496,1228,1229,1231],{"class":498,"line":691},[496,1230,566],{"class":565},[496,1232,593],{"class":506},[496,1234,1235,1238],{"class":498,"line":708},[496,1236,1237],{"class":510},"    borderRadiusXs",[496,1239,602],{"class":506},[496,1241,1242,1244],{"class":498,"line":725},[496,1243,616],{"class":510},[496,1245,602],{"class":506},[496,1247,1248,1250],{"class":498,"line":742},[496,1249,624],{"class":510},[496,1251,602],{"class":506},[496,1253,1254,1256],{"class":498,"line":759},[496,1255,632],{"class":510},[496,1257,602],{"class":506},[496,1259,1260,1262],{"class":498,"line":776},[496,1261,640],{"class":510},[496,1263,602],{"class":506},[496,1265,1266,1269],{"class":498,"line":793},[496,1267,1268],{"class":510},"    borderRadius2xl",[496,1270,602],{"class":506},[496,1272,1273,1275,1277,1279,1281,1283,1286,1288],{"class":498,"line":809},[496,1274,656],{"class":506},[496,1276,659],{"class":506},[496,1278,1047],{"class":575},[496,1280,664],{"class":510},[496,1282,667],{"class":506},[496,1284,1285],{"class":510}," borderRadius",[496,1287,667],{"class":506},[496,1289,593],{"class":506},[496,1291,1292,1295,1297,1300,1303,1306,1309,1311],{"class":498,"line":814},[496,1293,1294],{"class":675},"    xs",[496,1296,679],{"class":506},[496,1298,1299],{"class":510}," scalePowers[",[496,1301,1302],{"class":506},"-",[496,1304,1305],{"class":855},"2",[496,1307,1308],{"class":510},"]",[496,1310,667],{"class":506},[496,1312,1313],{"class":1095},"   // ~0.17rem\n",[496,1315,1317,1319,1321,1323,1325,1328,1330,1332],{"class":498,"line":1316},25,[496,1318,694],{"class":675},[496,1320,679],{"class":506},[496,1322,1299],{"class":510},[496,1324,1302],{"class":506},[496,1326,1327],{"class":855},"1",[496,1329,1308],{"class":510},[496,1331,667],{"class":506},[496,1333,1334],{"class":1095},"   // ~0.21rem\n",[496,1336,1338,1340,1342,1344,1346,1348,1350],{"class":498,"line":1337},26,[496,1339,711],{"class":675},[496,1341,679],{"class":506},[496,1343,1299],{"class":510},[496,1345,684],{"class":855},[496,1347,1308],{"class":510},[496,1349,667],{"class":506},[496,1351,1352],{"class":1095},"    // 0.25rem (base)\n",[496,1354,1356,1358,1360,1362,1364,1366,1368],{"class":498,"line":1355},27,[496,1357,728],{"class":675},[496,1359,679],{"class":506},[496,1361,1299],{"class":510},[496,1363,1327],{"class":855},[496,1365,1308],{"class":510},[496,1367,667],{"class":506},[496,1369,1370],{"class":1095},"    // ~0.30rem\n",[496,1372,1374,1376,1378,1380,1382,1384,1386],{"class":498,"line":1373},28,[496,1375,745],{"class":675},[496,1377,679],{"class":506},[496,1379,1299],{"class":510},[496,1381,1305],{"class":855},[496,1383,1308],{"class":510},[496,1385,667],{"class":506},[496,1387,1388],{"class":1095},"    // ~0.36rem\n",[496,1390,1392,1395,1398,1400,1402,1404,1407,1409,1411],{"class":498,"line":1391},29,[496,1393,1394],{"class":506},"    '",[496,1396,1397],{"class":675},"2xl",[496,1399,527],{"class":506},[496,1401,679],{"class":506},[496,1403,1299],{"class":510},[496,1405,1406],{"class":855},"3",[496,1408,1308],{"class":510},[496,1410,667],{"class":506},[496,1412,1413],{"class":1095}," // ~0.43rem\n",[496,1415,1417,1419,1421],{"class":498,"line":1416},30,[496,1418,656],{"class":506},[496,1420,804],{"class":510},[496,1422,530],{"class":506},[496,1424,1426],{"class":498,"line":1425},31,[496,1427,559],{"emptyLinePlaceholder":206},[496,1429,1431,1433,1435,1437],{"class":498,"line":1430},32,[496,1432,817],{"class":502},[496,1434,820],{"class":502},[496,1436,823],{"class":510},[496,1438,530],{"class":506},[481,1440,1441],{"icon":140,"label":828},[486,1442,1444],{"className":831,"code":1443,"filename":833,"language":834,"meta":492,"style":492},":root {\n    --scale--minor-third: 1.2;\n    --scale: var(--scale--minor-third);\n    --border-radius: 0.25rem;\n    --border-radius--xs: calc(var(--border-radius) * 1 / var(--scale) / var(--scale));\n    --border-radius--sm: calc(var(--border-radius) * 1 / var(--scale));\n    --border-radius--md: calc(var(--border-radius) * 1);\n    --border-radius--lg: calc(var(--border-radius) * var(--scale));\n    --border-radius--xl: calc(var(--border-radius) * var(--scale) * var(--scale));\n    --border-radius--2xl: calc(var(--border-radius) * var(--scale) * var(--scale) * var(--scale));\n}\n",[467,1445,1446,1454,1466,1482,1492,1542,1574,1598,1626,1664,1713],{"__ignoreMap":492},[496,1447,1448,1450,1452],{"class":498,"line":499},[496,1449,679],{"class":506},[496,1451,843],{"class":565},[496,1453,593],{"class":506},[496,1455,1456,1459,1461,1464],{"class":498,"line":533},[496,1457,1458],{"class":510},"    --scale--minor-third",[496,1460,679],{"class":506},[496,1462,1463],{"class":855}," 1.2",[496,1465,530],{"class":506},[496,1467,1468,1471,1473,1475,1477,1480],{"class":498,"line":556},[496,1469,1470],{"class":510},"    --scale",[496,1472,679],{"class":506},[496,1474,928],{"class":575},[496,1476,931],{"class":506},[496,1478,1479],{"class":510},"--scale--minor-third",[496,1481,937],{"class":506},[496,1483,1484,1486,1488,1490],{"class":498,"line":562},[496,1485,923],{"class":510},[496,1487,679],{"class":506},[496,1489,868],{"class":855},[496,1491,530],{"class":506},[496,1493,1494,1497,1499,1502,1504,1507,1509,1511,1513,1516,1519,1522,1524,1526,1529,1531,1533,1535,1537,1539],{"class":498,"line":583},[496,1495,1496],{"class":510},"    --border-radius--xs",[496,1498,679],{"class":506},[496,1500,1501],{"class":575}," calc",[496,1503,931],{"class":506},[496,1505,1506],{"class":575},"var",[496,1508,931],{"class":506},[496,1510,978],{"class":510},[496,1512,804],{"class":506},[496,1514,1515],{"class":506}," *",[496,1517,1518],{"class":855}," 1",[496,1520,1521],{"class":506}," /",[496,1523,928],{"class":575},[496,1525,931],{"class":506},[496,1527,1528],{"class":510},"--scale",[496,1530,804],{"class":506},[496,1532,1521],{"class":506},[496,1534,928],{"class":575},[496,1536,931],{"class":506},[496,1538,1528],{"class":510},[496,1540,1541],{"class":506},"));\n",[496,1543,1544,1546,1548,1550,1552,1554,1556,1558,1560,1562,1564,1566,1568,1570,1572],{"class":498,"line":588},[496,1545,863],{"class":510},[496,1547,679],{"class":506},[496,1549,1501],{"class":575},[496,1551,931],{"class":506},[496,1553,1506],{"class":575},[496,1555,931],{"class":506},[496,1557,978],{"class":510},[496,1559,804],{"class":506},[496,1561,1515],{"class":506},[496,1563,1518],{"class":855},[496,1565,1521],{"class":506},[496,1567,928],{"class":575},[496,1569,931],{"class":506},[496,1571,1528],{"class":510},[496,1573,1541],{"class":506},[496,1575,1576,1578,1580,1582,1584,1586,1588,1590,1592,1594,1596],{"class":498,"line":596},[496,1577,875],{"class":510},[496,1579,679],{"class":506},[496,1581,1501],{"class":575},[496,1583,931],{"class":506},[496,1585,1506],{"class":575},[496,1587,931],{"class":506},[496,1589,978],{"class":510},[496,1591,804],{"class":506},[496,1593,1515],{"class":506},[496,1595,1518],{"class":855},[496,1597,937],{"class":506},[496,1599,1600,1602,1604,1606,1608,1610,1612,1614,1616,1618,1620,1622,1624],{"class":498,"line":605},[496,1601,887],{"class":510},[496,1603,679],{"class":506},[496,1605,1501],{"class":575},[496,1607,931],{"class":506},[496,1609,1506],{"class":575},[496,1611,931],{"class":506},[496,1613,978],{"class":510},[496,1615,804],{"class":506},[496,1617,1515],{"class":506},[496,1619,928],{"class":575},[496,1621,931],{"class":506},[496,1623,1528],{"class":510},[496,1625,1541],{"class":506},[496,1627,1628,1630,1632,1634,1636,1638,1640,1642,1644,1646,1648,1650,1652,1654,1656,1658,1660,1662],{"class":498,"line":613},[496,1629,899],{"class":510},[496,1631,679],{"class":506},[496,1633,1501],{"class":575},[496,1635,931],{"class":506},[496,1637,1506],{"class":575},[496,1639,931],{"class":506},[496,1641,978],{"class":510},[496,1643,804],{"class":506},[496,1645,1515],{"class":506},[496,1647,928],{"class":575},[496,1649,931],{"class":506},[496,1651,1528],{"class":510},[496,1653,804],{"class":506},[496,1655,1515],{"class":506},[496,1657,928],{"class":575},[496,1659,931],{"class":506},[496,1661,1528],{"class":510},[496,1663,1541],{"class":506},[496,1665,1666,1669,1671,1673,1675,1677,1679,1681,1683,1685,1687,1689,1691,1693,1695,1697,1699,1701,1703,1705,1707,1709,1711],{"class":498,"line":621},[496,1667,1668],{"class":510},"    --border-radius--2xl",[496,1670,679],{"class":506},[496,1672,1501],{"class":575},[496,1674,931],{"class":506},[496,1676,1506],{"class":575},[496,1678,931],{"class":506},[496,1680,978],{"class":510},[496,1682,804],{"class":506},[496,1684,1515],{"class":506},[496,1686,928],{"class":575},[496,1688,931],{"class":506},[496,1690,1528],{"class":510},[496,1692,804],{"class":506},[496,1694,1515],{"class":506},[496,1696,928],{"class":575},[496,1698,931],{"class":506},[496,1700,1528],{"class":510},[496,1702,804],{"class":506},[496,1704,1515],{"class":506},[496,1706,928],{"class":575},[496,1708,931],{"class":506},[496,1710,1528],{"class":510},[496,1712,1541],{"class":506},[496,1714,1715],{"class":498,"line":629},[496,1716,942],{"class":506},[418,1718,472,1719,1721],{},[467,1720,995],{}," function multiplies your base border radius by the scale powers, creating a harmonious progression of corner radius values. This ensures consistent proportional relationships throughout your design system.",[418,1723,1724,1728],{},[1725,1726,1727],"a",{"href":209},"Read more about design scales"," and take advantage of the flexibility they offer.",[966,1730,1731,1733,1734,1736],{},[435,1732,970],{}," Using ",[467,1735,995],{}," with scales means you can change your entire border radius system's proportions by simply adjusting the scale ratio. Try different scales like Major Third (1.25) for more dramatic differences or Major Second (1.125) for subtle variations.",[1738,1739,1741],"h3",{"id":1740},"creating-custom-border-radius-variables","Creating Custom Border Radius Variables",[418,1743,1744],{},"You can define your own custom border radius scale to match your design system's needs:",[478,1746,1747,1948],{},[481,1748,1749],{"icon":483,"label":484},[486,1750,1752],{"className":488,"code":1751,"filename":490,"language":491,"meta":492,"style":492},"import { styleframe } from 'styleframe';\nimport { useBorderRadiusDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst {\n    borderRadius,\n    borderRadiusSquare,\n    borderRadiusRounded,\n    borderRadiusPill,\n} = useBorderRadiusDesignTokens(s, {\n    default: '0.5rem',\n    square: '0',\n    rounded: '0.5rem',\n    pill: '9999px',\n} as const);\n\nexport default s;\n",[467,1753,1754,1774,1794,1798,1812,1816,1822,1828,1835,1842,1849,1863,1877,1892,1907,1922,1934,1938],{"__ignoreMap":492},[496,1755,1756,1758,1760,1762,1764,1766,1768,1770,1772],{"class":498,"line":499},[496,1757,503],{"class":502},[496,1759,507],{"class":506},[496,1761,511],{"class":510},[496,1763,514],{"class":506},[496,1765,517],{"class":502},[496,1767,520],{"class":506},[496,1769,524],{"class":523},[496,1771,527],{"class":506},[496,1773,530],{"class":506},[496,1775,1776,1778,1780,1782,1784,1786,1788,1790,1792],{"class":498,"line":533},[496,1777,503],{"class":502},[496,1779,507],{"class":506},[496,1781,540],{"class":510},[496,1783,514],{"class":506},[496,1785,517],{"class":502},[496,1787,520],{"class":506},[496,1789,549],{"class":523},[496,1791,527],{"class":506},[496,1793,530],{"class":506},[496,1795,1796],{"class":498,"line":556},[496,1797,559],{"emptyLinePlaceholder":206},[496,1799,1800,1802,1804,1806,1808,1810],{"class":498,"line":562},[496,1801,566],{"class":565},[496,1803,569],{"class":510},[496,1805,572],{"class":506},[496,1807,511],{"class":575},[496,1809,578],{"class":510},[496,1811,530],{"class":506},[496,1813,1814],{"class":498,"line":583},[496,1815,559],{"emptyLinePlaceholder":206},[496,1817,1818,1820],{"class":498,"line":588},[496,1819,566],{"class":565},[496,1821,593],{"class":506},[496,1823,1824,1826],{"class":498,"line":596},[496,1825,599],{"class":510},[496,1827,602],{"class":506},[496,1829,1830,1833],{"class":498,"line":605},[496,1831,1832],{"class":510},"    borderRadiusSquare",[496,1834,602],{"class":506},[496,1836,1837,1840],{"class":498,"line":613},[496,1838,1839],{"class":510},"    borderRadiusRounded",[496,1841,602],{"class":506},[496,1843,1844,1847],{"class":498,"line":621},[496,1845,1846],{"class":510},"    borderRadiusPill",[496,1848,602],{"class":506},[496,1850,1851,1853,1855,1857,1859,1861],{"class":498,"line":629},[496,1852,656],{"class":506},[496,1854,659],{"class":506},[496,1856,540],{"class":575},[496,1858,664],{"class":510},[496,1860,667],{"class":506},[496,1862,593],{"class":506},[496,1864,1865,1867,1869,1871,1873,1875],{"class":498,"line":637},[496,1866,779],{"class":675},[496,1868,679],{"class":506},[496,1870,520],{"class":506},[496,1872,735],{"class":523},[496,1874,527],{"class":506},[496,1876,602],{"class":506},[496,1878,1879,1882,1884,1886,1888,1890],{"class":498,"line":645},[496,1880,1881],{"class":675},"    square",[496,1883,679],{"class":506},[496,1885,520],{"class":506},[496,1887,684],{"class":523},[496,1889,527],{"class":506},[496,1891,602],{"class":506},[496,1893,1894,1897,1899,1901,1903,1905],{"class":498,"line":653},[496,1895,1896],{"class":675},"    rounded",[496,1898,679],{"class":506},[496,1900,520],{"class":506},[496,1902,735],{"class":523},[496,1904,527],{"class":506},[496,1906,602],{"class":506},[496,1908,1909,1912,1914,1916,1918,1920],{"class":498,"line":672},[496,1910,1911],{"class":675},"    pill",[496,1913,679],{"class":506},[496,1915,520],{"class":506},[496,1917,769],{"class":523},[496,1919,527],{"class":506},[496,1921,602],{"class":506},[496,1923,1924,1926,1928,1930,1932],{"class":498,"line":691},[496,1925,656],{"class":506},[496,1927,798],{"class":502},[496,1929,801],{"class":565},[496,1931,804],{"class":510},[496,1933,530],{"class":506},[496,1935,1936],{"class":498,"line":708},[496,1937,559],{"emptyLinePlaceholder":206},[496,1939,1940,1942,1944,1946],{"class":498,"line":725},[496,1941,817],{"class":502},[496,1943,820],{"class":502},[496,1945,823],{"class":510},[496,1947,530],{"class":506},[481,1949,1950],{"icon":140,"label":828},[486,1951,1953],{"className":831,"code":1952,"filename":833,"language":834,"meta":492,"style":492},":root {\n    --border-radius--square: 0;\n    --border-radius--rounded: 0.5rem;\n    --border-radius--pill: 9999px;\n    --border-radius: 0.5rem;\n}\n",[467,1954,1955,1963,1974,1985,1996,2006],{"__ignoreMap":492},[496,1956,1957,1959,1961],{"class":498,"line":499},[496,1958,679],{"class":506},[496,1960,843],{"class":565},[496,1962,593],{"class":506},[496,1964,1965,1968,1970,1972],{"class":498,"line":533},[496,1966,1967],{"class":510},"    --border-radius--square",[496,1969,679],{"class":506},[496,1971,856],{"class":855},[496,1973,530],{"class":506},[496,1975,1976,1979,1981,1983],{"class":498,"line":556},[496,1977,1978],{"class":510},"    --border-radius--rounded",[496,1980,679],{"class":506},[496,1982,892],{"class":855},[496,1984,530],{"class":506},[496,1986,1987,1990,1992,1994],{"class":498,"line":562},[496,1988,1989],{"class":510},"    --border-radius--pill",[496,1991,679],{"class":506},[496,1993,916],{"class":855},[496,1995,530],{"class":506},[496,1997,1998,2000,2002,2004],{"class":498,"line":583},[496,1999,923],{"class":510},[496,2001,679],{"class":506},[496,2003,892],{"class":855},[496,2005,530],{"class":506},[496,2007,2008],{"class":498,"line":588},[496,2009,942],{"class":506},[1738,2011,2013],{"id":2012},"referencing-other-border-radius-values","Referencing Other Border Radius Values",[418,2015,2016,2017,2020],{},"Use the ",[467,2018,2019],{},"@"," prefix to reference another border radius value within your definitions:",[478,2022,2023,2241],{},[481,2024,2025],{"icon":483,"label":484},[486,2026,2028],{"className":488,"code":2027,"filename":490,"language":491,"meta":492,"style":492},"import { styleframe } from 'styleframe';\nimport { useBorderRadiusDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst {\n    borderRadius,\n    borderRadiusNone,\n    borderRadiusSm,\n    borderRadiusMd,\n    borderRadiusLg,\n} = useBorderRadiusDesignTokens(s, {\n    none: '0',\n    sm: '0.25rem',\n    md: '0.5rem',\n    lg: '0.75rem',\n    default: '@border-radius.md',  // References the 'md' value\n} as const);\n\nexport default s;\n",[467,2029,2030,2050,2070,2074,2088,2092,2098,2104,2110,2116,2122,2128,2142,2156,2170,2184,2198,2215,2227,2231],{"__ignoreMap":492},[496,2031,2032,2034,2036,2038,2040,2042,2044,2046,2048],{"class":498,"line":499},[496,2033,503],{"class":502},[496,2035,507],{"class":506},[496,2037,511],{"class":510},[496,2039,514],{"class":506},[496,2041,517],{"class":502},[496,2043,520],{"class":506},[496,2045,524],{"class":523},[496,2047,527],{"class":506},[496,2049,530],{"class":506},[496,2051,2052,2054,2056,2058,2060,2062,2064,2066,2068],{"class":498,"line":533},[496,2053,503],{"class":502},[496,2055,507],{"class":506},[496,2057,540],{"class":510},[496,2059,514],{"class":506},[496,2061,517],{"class":502},[496,2063,520],{"class":506},[496,2065,549],{"class":523},[496,2067,527],{"class":506},[496,2069,530],{"class":506},[496,2071,2072],{"class":498,"line":556},[496,2073,559],{"emptyLinePlaceholder":206},[496,2075,2076,2078,2080,2082,2084,2086],{"class":498,"line":562},[496,2077,566],{"class":565},[496,2079,569],{"class":510},[496,2081,572],{"class":506},[496,2083,511],{"class":575},[496,2085,578],{"class":510},[496,2087,530],{"class":506},[496,2089,2090],{"class":498,"line":583},[496,2091,559],{"emptyLinePlaceholder":206},[496,2093,2094,2096],{"class":498,"line":588},[496,2095,566],{"class":565},[496,2097,593],{"class":506},[496,2099,2100,2102],{"class":498,"line":596},[496,2101,599],{"class":510},[496,2103,602],{"class":506},[496,2105,2106,2108],{"class":498,"line":605},[496,2107,608],{"class":510},[496,2109,602],{"class":506},[496,2111,2112,2114],{"class":498,"line":613},[496,2113,616],{"class":510},[496,2115,602],{"class":506},[496,2117,2118,2120],{"class":498,"line":621},[496,2119,624],{"class":510},[496,2121,602],{"class":506},[496,2123,2124,2126],{"class":498,"line":629},[496,2125,632],{"class":510},[496,2127,602],{"class":506},[496,2129,2130,2132,2134,2136,2138,2140],{"class":498,"line":637},[496,2131,656],{"class":506},[496,2133,659],{"class":506},[496,2135,540],{"class":575},[496,2137,664],{"class":510},[496,2139,667],{"class":506},[496,2141,593],{"class":506},[496,2143,2144,2146,2148,2150,2152,2154],{"class":498,"line":645},[496,2145,676],{"class":675},[496,2147,679],{"class":506},[496,2149,520],{"class":506},[496,2151,684],{"class":523},[496,2153,527],{"class":506},[496,2155,602],{"class":506},[496,2157,2158,2160,2162,2164,2166,2168],{"class":498,"line":653},[496,2159,694],{"class":675},[496,2161,679],{"class":506},[496,2163,520],{"class":506},[496,2165,701],{"class":523},[496,2167,527],{"class":506},[496,2169,602],{"class":506},[496,2171,2172,2174,2176,2178,2180,2182],{"class":498,"line":672},[496,2173,711],{"class":675},[496,2175,679],{"class":506},[496,2177,520],{"class":506},[496,2179,735],{"class":523},[496,2181,527],{"class":506},[496,2183,602],{"class":506},[496,2185,2186,2188,2190,2192,2194,2196],{"class":498,"line":691},[496,2187,728],{"class":675},[496,2189,679],{"class":506},[496,2191,520],{"class":506},[496,2193,752],{"class":523},[496,2195,527],{"class":506},[496,2197,602],{"class":506},[496,2199,2200,2202,2204,2206,2208,2210,2212],{"class":498,"line":708},[496,2201,779],{"class":675},[496,2203,679],{"class":506},[496,2205,520],{"class":506},[496,2207,786],{"class":523},[496,2209,527],{"class":506},[496,2211,667],{"class":506},[496,2213,2214],{"class":1095},"  // References the 'md' value\n",[496,2216,2217,2219,2221,2223,2225],{"class":498,"line":725},[496,2218,656],{"class":506},[496,2220,798],{"class":502},[496,2222,801],{"class":565},[496,2224,804],{"class":510},[496,2226,530],{"class":506},[496,2228,2229],{"class":498,"line":742},[496,2230,559],{"emptyLinePlaceholder":206},[496,2232,2233,2235,2237,2239],{"class":498,"line":759},[496,2234,817],{"class":502},[496,2236,820],{"class":502},[496,2238,823],{"class":510},[496,2240,530],{"class":506},[481,2242,2243],{"icon":140,"label":828},[486,2244,2246],{"className":831,"code":2245,"filename":833,"language":834,"meta":492,"style":492},":root {\n    --border-radius--none: 0;\n    --border-radius--sm: 0.25rem;\n    --border-radius--md: 0.5rem;\n    --border-radius--lg: 0.75rem;\n    --border-radius: var(--border-radius--md);\n}\n",[467,2247,2248,2256,2266,2276,2286,2296,2310],{"__ignoreMap":492},[496,2249,2250,2252,2254],{"class":498,"line":499},[496,2251,679],{"class":506},[496,2253,843],{"class":565},[496,2255,593],{"class":506},[496,2257,2258,2260,2262,2264],{"class":498,"line":533},[496,2259,850],{"class":510},[496,2261,679],{"class":506},[496,2263,856],{"class":855},[496,2265,530],{"class":506},[496,2267,2268,2270,2272,2274],{"class":498,"line":556},[496,2269,863],{"class":510},[496,2271,679],{"class":506},[496,2273,868],{"class":855},[496,2275,530],{"class":506},[496,2277,2278,2280,2282,2284],{"class":498,"line":562},[496,2279,875],{"class":510},[496,2281,679],{"class":506},[496,2283,892],{"class":855},[496,2285,530],{"class":506},[496,2287,2288,2290,2292,2294],{"class":498,"line":583},[496,2289,887],{"class":510},[496,2291,679],{"class":506},[496,2293,904],{"class":855},[496,2295,530],{"class":506},[496,2297,2298,2300,2302,2304,2306,2308],{"class":498,"line":588},[496,2299,923],{"class":510},[496,2301,679],{"class":506},[496,2303,928],{"class":575},[496,2305,931],{"class":506},[496,2307,934],{"class":510},[496,2309,937],{"class":506},[496,2311,2312],{"class":498,"line":596},[496,2313,942],{"class":506},[414,2315,2317],{"id":2316},"using-border-radius-variables","Using Border Radius Variables",[418,2319,2320],{},"Once created, border radius variables can be used anywhere in your styles:",[478,2322,2323,2700],{},[481,2324,2325],{"icon":483,"label":484},[486,2326,2328],{"className":488,"code":2327,"filename":490,"language":491,"meta":492,"style":492},"import { styleframe } from 'styleframe';\nimport { useBorderRadiusDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { ref, selector } = s;\n\nconst { borderRadius, borderRadiusSm, borderRadiusLg, borderRadiusFull } = useBorderRadiusDesignTokens(s, {\n    default: '0.375rem',\n    sm: '0.25rem',\n    lg: '0.5rem',\n    full: '9999px',\n} as const);\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\nselector('.avatar', {\n    borderRadius: ref(borderRadiusFull),\n});\n\nexport default s;\n",[467,2329,2330,2350,2370,2374,2388,2410,2414,2449,2463,2477,2491,2505,2517,2521,2539,2552,2560,2564,2581,2594,2602,2606,2623,2636,2644,2648,2665,2678,2686,2690],{"__ignoreMap":492},[496,2331,2332,2334,2336,2338,2340,2342,2344,2346,2348],{"class":498,"line":499},[496,2333,503],{"class":502},[496,2335,507],{"class":506},[496,2337,511],{"class":510},[496,2339,514],{"class":506},[496,2341,517],{"class":502},[496,2343,520],{"class":506},[496,2345,524],{"class":523},[496,2347,527],{"class":506},[496,2349,530],{"class":506},[496,2351,2352,2354,2356,2358,2360,2362,2364,2366,2368],{"class":498,"line":533},[496,2353,503],{"class":502},[496,2355,507],{"class":506},[496,2357,540],{"class":510},[496,2359,514],{"class":506},[496,2361,517],{"class":502},[496,2363,520],{"class":506},[496,2365,549],{"class":523},[496,2367,527],{"class":506},[496,2369,530],{"class":506},[496,2371,2372],{"class":498,"line":556},[496,2373,559],{"emptyLinePlaceholder":206},[496,2375,2376,2378,2380,2382,2384,2386],{"class":498,"line":562},[496,2377,566],{"class":565},[496,2379,569],{"class":510},[496,2381,572],{"class":506},[496,2383,511],{"class":575},[496,2385,578],{"class":510},[496,2387,530],{"class":506},[496,2389,2390,2392,2394,2397,2399,2402,2404,2406,2408],{"class":498,"line":583},[496,2391,566],{"class":565},[496,2393,507],{"class":506},[496,2395,2396],{"class":510}," ref",[496,2398,667],{"class":506},[496,2400,2401],{"class":510}," selector ",[496,2403,656],{"class":506},[496,2405,659],{"class":506},[496,2407,823],{"class":510},[496,2409,530],{"class":506},[496,2411,2412],{"class":498,"line":588},[496,2413,559],{"emptyLinePlaceholder":206},[496,2415,2416,2418,2420,2422,2424,2427,2429,2432,2434,2437,2439,2441,2443,2445,2447],{"class":498,"line":596},[496,2417,566],{"class":565},[496,2419,507],{"class":506},[496,2421,1285],{"class":510},[496,2423,667],{"class":506},[496,2425,2426],{"class":510}," borderRadiusSm",[496,2428,667],{"class":506},[496,2430,2431],{"class":510}," borderRadiusLg",[496,2433,667],{"class":506},[496,2435,2436],{"class":510}," borderRadiusFull ",[496,2438,656],{"class":506},[496,2440,659],{"class":506},[496,2442,540],{"class":575},[496,2444,664],{"class":510},[496,2446,667],{"class":506},[496,2448,593],{"class":506},[496,2450,2451,2453,2455,2457,2459,2461],{"class":498,"line":605},[496,2452,779],{"class":675},[496,2454,679],{"class":506},[496,2456,520],{"class":506},[496,2458,718],{"class":523},[496,2460,527],{"class":506},[496,2462,602],{"class":506},[496,2464,2465,2467,2469,2471,2473,2475],{"class":498,"line":613},[496,2466,694],{"class":675},[496,2468,679],{"class":506},[496,2470,520],{"class":506},[496,2472,701],{"class":523},[496,2474,527],{"class":506},[496,2476,602],{"class":506},[496,2478,2479,2481,2483,2485,2487,2489],{"class":498,"line":621},[496,2480,728],{"class":675},[496,2482,679],{"class":506},[496,2484,520],{"class":506},[496,2486,735],{"class":523},[496,2488,527],{"class":506},[496,2490,602],{"class":506},[496,2492,2493,2495,2497,2499,2501,2503],{"class":498,"line":629},[496,2494,762],{"class":675},[496,2496,679],{"class":506},[496,2498,520],{"class":506},[496,2500,769],{"class":523},[496,2502,527],{"class":506},[496,2504,602],{"class":506},[496,2506,2507,2509,2511,2513,2515],{"class":498,"line":637},[496,2508,656],{"class":506},[496,2510,798],{"class":502},[496,2512,801],{"class":565},[496,2514,804],{"class":510},[496,2516,530],{"class":506},[496,2518,2519],{"class":498,"line":645},[496,2520,559],{"emptyLinePlaceholder":206},[496,2522,2523,2526,2528,2530,2533,2535,2537],{"class":498,"line":653},[496,2524,2525],{"class":575},"selector",[496,2527,931],{"class":510},[496,2529,527],{"class":506},[496,2531,2532],{"class":523},".card",[496,2534,527],{"class":506},[496,2536,667],{"class":506},[496,2538,593],{"class":506},[496,2540,2541,2543,2545,2547,2550],{"class":498,"line":672},[496,2542,599],{"class":675},[496,2544,679],{"class":506},[496,2546,2396],{"class":575},[496,2548,2549],{"class":510},"(borderRadius)",[496,2551,602],{"class":506},[496,2553,2554,2556,2558],{"class":498,"line":691},[496,2555,656],{"class":506},[496,2557,804],{"class":510},[496,2559,530],{"class":506},[496,2561,2562],{"class":498,"line":708},[496,2563,559],{"emptyLinePlaceholder":206},[496,2565,2566,2568,2570,2572,2575,2577,2579],{"class":498,"line":725},[496,2567,2525],{"class":575},[496,2569,931],{"class":510},[496,2571,527],{"class":506},[496,2573,2574],{"class":523},".button",[496,2576,527],{"class":506},[496,2578,667],{"class":506},[496,2580,593],{"class":506},[496,2582,2583,2585,2587,2589,2592],{"class":498,"line":742},[496,2584,599],{"class":675},[496,2586,679],{"class":506},[496,2588,2396],{"class":575},[496,2590,2591],{"class":510},"(borderRadiusSm)",[496,2593,602],{"class":506},[496,2595,2596,2598,2600],{"class":498,"line":759},[496,2597,656],{"class":506},[496,2599,804],{"class":510},[496,2601,530],{"class":506},[496,2603,2604],{"class":498,"line":776},[496,2605,559],{"emptyLinePlaceholder":206},[496,2607,2608,2610,2612,2614,2617,2619,2621],{"class":498,"line":793},[496,2609,2525],{"class":575},[496,2611,931],{"class":510},[496,2613,527],{"class":506},[496,2615,2616],{"class":523},".modal",[496,2618,527],{"class":506},[496,2620,667],{"class":506},[496,2622,593],{"class":506},[496,2624,2625,2627,2629,2631,2634],{"class":498,"line":809},[496,2626,599],{"class":675},[496,2628,679],{"class":506},[496,2630,2396],{"class":575},[496,2632,2633],{"class":510},"(borderRadiusLg)",[496,2635,602],{"class":506},[496,2637,2638,2640,2642],{"class":498,"line":814},[496,2639,656],{"class":506},[496,2641,804],{"class":510},[496,2643,530],{"class":506},[496,2645,2646],{"class":498,"line":1316},[496,2647,559],{"emptyLinePlaceholder":206},[496,2649,2650,2652,2654,2656,2659,2661,2663],{"class":498,"line":1337},[496,2651,2525],{"class":575},[496,2653,931],{"class":510},[496,2655,527],{"class":506},[496,2657,2658],{"class":523},".avatar",[496,2660,527],{"class":506},[496,2662,667],{"class":506},[496,2664,593],{"class":506},[496,2666,2667,2669,2671,2673,2676],{"class":498,"line":1355},[496,2668,599],{"class":675},[496,2670,679],{"class":506},[496,2672,2396],{"class":575},[496,2674,2675],{"class":510},"(borderRadiusFull)",[496,2677,602],{"class":506},[496,2679,2680,2682,2684],{"class":498,"line":1373},[496,2681,656],{"class":506},[496,2683,804],{"class":510},[496,2685,530],{"class":506},[496,2687,2688],{"class":498,"line":1391},[496,2689,559],{"emptyLinePlaceholder":206},[496,2691,2692,2694,2696,2698],{"class":498,"line":1416},[496,2693,817],{"class":502},[496,2695,820],{"class":502},[496,2697,823],{"class":510},[496,2699,530],{"class":506},[481,2701,2702],{"icon":140,"label":828},[486,2703,2705],{"className":831,"code":2704,"filename":833,"language":834,"meta":492,"style":492},":root {\n    --border-radius: 0.375rem;\n    --border-radius--sm: 0.25rem;\n    --border-radius--lg: 0.5rem;\n    --border-radius--full: 9999px;\n}\n\n.card {\n    border-radius: var(--border-radius);\n}\n\n.button {\n    border-radius: var(--border-radius--sm);\n}\n\n.modal {\n    border-radius: var(--border-radius--lg);\n}\n\n.avatar {\n    border-radius: var(--border-radius--full);\n}\n",[467,2706,2707,2715,2725,2735,2745,2755,2759,2763,2774,2790,2794,2798,2807,2822,2826,2830,2839,2854,2858,2862,2871,2886],{"__ignoreMap":492},[496,2708,2709,2711,2713],{"class":498,"line":499},[496,2710,679],{"class":506},[496,2712,843],{"class":565},[496,2714,593],{"class":506},[496,2716,2717,2719,2721,2723],{"class":498,"line":533},[496,2718,923],{"class":510},[496,2720,679],{"class":506},[496,2722,880],{"class":855},[496,2724,530],{"class":506},[496,2726,2727,2729,2731,2733],{"class":498,"line":556},[496,2728,863],{"class":510},[496,2730,679],{"class":506},[496,2732,868],{"class":855},[496,2734,530],{"class":506},[496,2736,2737,2739,2741,2743],{"class":498,"line":562},[496,2738,887],{"class":510},[496,2740,679],{"class":506},[496,2742,892],{"class":855},[496,2744,530],{"class":506},[496,2746,2747,2749,2751,2753],{"class":498,"line":583},[496,2748,911],{"class":510},[496,2750,679],{"class":506},[496,2752,916],{"class":855},[496,2754,530],{"class":506},[496,2756,2757],{"class":498,"line":588},[496,2758,942],{"class":506},[496,2760,2761],{"class":498,"line":596},[496,2762,559],{"emptyLinePlaceholder":206},[496,2764,2765,2768,2772],{"class":498,"line":605},[496,2766,2767],{"class":506},".",[496,2769,2771],{"class":2770},"sBMFI","card",[496,2773,593],{"class":506},[496,2775,2776,2780,2782,2784,2786,2788],{"class":498,"line":613},[496,2777,2779],{"class":2778},"sqsOY","    border-radius",[496,2781,679],{"class":506},[496,2783,928],{"class":575},[496,2785,931],{"class":506},[496,2787,978],{"class":510},[496,2789,937],{"class":506},[496,2791,2792],{"class":498,"line":621},[496,2793,942],{"class":506},[496,2795,2796],{"class":498,"line":629},[496,2797,559],{"emptyLinePlaceholder":206},[496,2799,2800,2802,2805],{"class":498,"line":637},[496,2801,2767],{"class":506},[496,2803,2804],{"class":2770},"button",[496,2806,593],{"class":506},[496,2808,2809,2811,2813,2815,2817,2820],{"class":498,"line":645},[496,2810,2779],{"class":2778},[496,2812,679],{"class":506},[496,2814,928],{"class":575},[496,2816,931],{"class":506},[496,2818,2819],{"class":510},"--border-radius--sm",[496,2821,937],{"class":506},[496,2823,2824],{"class":498,"line":653},[496,2825,942],{"class":506},[496,2827,2828],{"class":498,"line":672},[496,2829,559],{"emptyLinePlaceholder":206},[496,2831,2832,2834,2837],{"class":498,"line":691},[496,2833,2767],{"class":506},[496,2835,2836],{"class":2770},"modal",[496,2838,593],{"class":506},[496,2840,2841,2843,2845,2847,2849,2852],{"class":498,"line":708},[496,2842,2779],{"class":2778},[496,2844,679],{"class":506},[496,2846,928],{"class":575},[496,2848,931],{"class":506},[496,2850,2851],{"class":510},"--border-radius--lg",[496,2853,937],{"class":506},[496,2855,2856],{"class":498,"line":725},[496,2857,942],{"class":506},[496,2859,2860],{"class":498,"line":742},[496,2861,559],{"emptyLinePlaceholder":206},[496,2863,2864,2866,2869],{"class":498,"line":759},[496,2865,2767],{"class":506},[496,2867,2868],{"class":2770},"avatar",[496,2870,593],{"class":506},[496,2872,2873,2875,2877,2879,2881,2884],{"class":498,"line":776},[496,2874,2779],{"class":2778},[496,2876,679],{"class":506},[496,2878,928],{"class":575},[496,2880,931],{"class":506},[496,2882,2883],{"class":510},"--border-radius--full",[496,2885,937],{"class":506},[496,2887,2888],{"class":498,"line":793},[496,2889,942],{"class":506},[414,2891,2893],{"id":2892},"examples","Examples",[1738,2895,2897],{"id":2896},"scale-based-border-radius-system","Scale-Based Border Radius System",[418,2899,2900],{},"Create a complete border radius system using modular scales:",[478,2902,2903,3731],{},[481,2904,2905],{"icon":483,"label":484},[486,2906,2908],{"className":488,"code":2907,"filename":490,"language":491,"meta":492,"style":492},"import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens, useScalePowersDesignTokens, useMultiplierDesignTokens, useBorderRadiusDesignTokens, defaultScaleValues } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { ref, selector } = s;\n\n// Use Minor Third scale (1.2) for balanced corner progressions\nconst { scale } = useScaleDesignTokens(s, { ...defaultScaleValues, default: '@scale.minor-third' });\n\n// Define base border radius\nconst { borderRadius } = useBorderRadiusDesignTokens(s, { default: '0.375rem' });\n\n// Create scale powers\nconst scalePowers = useScalePowersDesignTokens(s, scale, [-2, -1, 0, 1, 2, 3, 4]);\n\n// Generate border radius scale\nconst {\n    borderRadiusXs,\n    borderRadiusSm,\n    borderRadiusMd,\n    borderRadiusLg,\n    borderRadiusXl,\n    borderRadius2xl,\n    borderRadius3xl,\n} = useMultiplierDesignTokens(s, borderRadius, {\n    xs: scalePowers[-2],   // ~0.26rem - badges, small buttons\n    sm: scalePowers[-1],   // ~0.31rem - buttons, inputs\n    md: scalePowers[0],    // 0.375rem (base) - cards, standard surfaces\n    lg: scalePowers[1],    // ~0.45rem - panels, large cards\n    xl: scalePowers[2],    // ~0.54rem - modals, dialogs\n    '2xl': scalePowers[3], // ~0.65rem - hero sections\n    '3xl': scalePowers[4], // ~0.78rem - large surfaces\n});\n\n// Apply to components based on size\nselector('.badge', {\n    borderRadius: ref(borderRadiusXs),\n    padding: '0.125rem 0.375rem',\n    fontSize: '0.75rem',\n});\n\nselector('.btn', {\n    borderRadius: ref(borderRadiusSm),\n    padding: '0.5rem 1rem',\n});\n\nselector('.card', {\n    borderRadius: ref(borderRadiusMd),\n    padding: '1.5rem',\n});\n\nselector('.modal', {\n    borderRadius: ref(borderRadiusLg),\n    padding: '2rem',\n});\n\nselector('.hero', {\n    borderRadius: ref(borderRadiusXl),\n    padding: '3rem',\n});\n\nexport default s;\n",[467,2909,2910,2930,2966,2970,2984,3004,3008,3013,3055,3059,3063,3099,3103,3107,3168,3172,3177,3183,3189,3195,3201,3207,3213,3219,3226,3244,3263,3282,3299,3316,3333,3354,3377,3386,3391,3397,3415,3429,3446,3462,3471,3476,3494,3507,3523,3532,3537,3554,3568,3584,3593,3598,3615,3628,3644,3653,3658,3676,3690,3706,3715,3720],{"__ignoreMap":492},[496,2911,2912,2914,2916,2918,2920,2922,2924,2926,2928],{"class":498,"line":499},[496,2913,503],{"class":502},[496,2915,507],{"class":506},[496,2917,511],{"class":510},[496,2919,514],{"class":506},[496,2921,517],{"class":502},[496,2923,520],{"class":506},[496,2925,524],{"class":523},[496,2927,527],{"class":506},[496,2929,530],{"class":506},[496,2931,2932,2934,2936,2938,2940,2942,2944,2946,2948,2950,2952,2954,2956,2958,2960,2962,2964],{"class":498,"line":533},[496,2933,503],{"class":502},[496,2935,507],{"class":506},[496,2937,1037],{"class":510},[496,2939,667],{"class":506},[496,2941,1042],{"class":510},[496,2943,667],{"class":506},[496,2945,1047],{"class":510},[496,2947,667],{"class":506},[496,2949,540],{"class":510},[496,2951,667],{"class":506},[496,2953,1056],{"class":510},[496,2955,514],{"class":506},[496,2957,517],{"class":502},[496,2959,520],{"class":506},[496,2961,549],{"class":523},[496,2963,527],{"class":506},[496,2965,530],{"class":506},[496,2967,2968],{"class":498,"line":556},[496,2969,559],{"emptyLinePlaceholder":206},[496,2971,2972,2974,2976,2978,2980,2982],{"class":498,"line":562},[496,2973,566],{"class":565},[496,2975,569],{"class":510},[496,2977,572],{"class":506},[496,2979,511],{"class":575},[496,2981,578],{"class":510},[496,2983,530],{"class":506},[496,2985,2986,2988,2990,2992,2994,2996,2998,3000,3002],{"class":498,"line":583},[496,2987,566],{"class":565},[496,2989,507],{"class":506},[496,2991,2396],{"class":510},[496,2993,667],{"class":506},[496,2995,2401],{"class":510},[496,2997,656],{"class":506},[496,2999,659],{"class":506},[496,3001,823],{"class":510},[496,3003,530],{"class":506},[496,3005,3006],{"class":498,"line":588},[496,3007,559],{"emptyLinePlaceholder":206},[496,3009,3010],{"class":498,"line":596},[496,3011,3012],{"class":1095},"// Use Minor Third scale (1.2) for balanced corner progressions\n",[496,3014,3015,3017,3019,3021,3023,3025,3027,3029,3031,3033,3035,3037,3039,3041,3043,3045,3047,3049,3051,3053],{"class":498,"line":605},[496,3016,566],{"class":565},[496,3018,507],{"class":506},[496,3020,1105],{"class":510},[496,3022,656],{"class":506},[496,3024,659],{"class":506},[496,3026,1037],{"class":575},[496,3028,664],{"class":510},[496,3030,667],{"class":506},[496,3032,507],{"class":506},[496,3034,1120],{"class":506},[496,3036,1123],{"class":510},[496,3038,667],{"class":506},[496,3040,820],{"class":675},[496,3042,679],{"class":506},[496,3044,520],{"class":506},[496,3046,1134],{"class":523},[496,3048,527],{"class":506},[496,3050,514],{"class":506},[496,3052,804],{"class":510},[496,3054,530],{"class":506},[496,3056,3057],{"class":498,"line":613},[496,3058,559],{"emptyLinePlaceholder":206},[496,3060,3061],{"class":498,"line":621},[496,3062,1151],{"class":1095},[496,3064,3065,3067,3069,3071,3073,3075,3077,3079,3081,3083,3085,3087,3089,3091,3093,3095,3097],{"class":498,"line":629},[496,3066,566],{"class":565},[496,3068,507],{"class":506},[496,3070,1160],{"class":510},[496,3072,656],{"class":506},[496,3074,659],{"class":506},[496,3076,540],{"class":575},[496,3078,664],{"class":510},[496,3080,667],{"class":506},[496,3082,507],{"class":506},[496,3084,820],{"class":675},[496,3086,679],{"class":506},[496,3088,520],{"class":506},[496,3090,718],{"class":523},[496,3092,527],{"class":506},[496,3094,514],{"class":506},[496,3096,804],{"class":510},[496,3098,530],{"class":506},[496,3100,3101],{"class":498,"line":637},[496,3102,559],{"emptyLinePlaceholder":206},[496,3104,3105],{"class":498,"line":645},[496,3106,1197],{"class":1095},[496,3108,3109,3111,3113,3115,3117,3119,3121,3124,3126,3129,3131,3133,3135,3138,3140,3142,3144,3146,3148,3150,3153,3155,3158,3160,3163,3166],{"class":498,"line":653},[496,3110,566],{"class":565},[496,3112,1204],{"class":510},[496,3114,572],{"class":506},[496,3116,1042],{"class":575},[496,3118,664],{"class":510},[496,3120,667],{"class":506},[496,3122,3123],{"class":510}," scale",[496,3125,667],{"class":506},[496,3127,3128],{"class":510}," [",[496,3130,1302],{"class":506},[496,3132,1305],{"class":855},[496,3134,667],{"class":506},[496,3136,3137],{"class":506}," -",[496,3139,1327],{"class":855},[496,3141,667],{"class":506},[496,3143,856],{"class":855},[496,3145,667],{"class":506},[496,3147,1518],{"class":855},[496,3149,667],{"class":506},[496,3151,3152],{"class":855}," 2",[496,3154,667],{"class":506},[496,3156,3157],{"class":855}," 3",[496,3159,667],{"class":506},[496,3161,3162],{"class":855}," 4",[496,3164,3165],{"class":510},"])",[496,3167,530],{"class":506},[496,3169,3170],{"class":498,"line":672},[496,3171,559],{"emptyLinePlaceholder":206},[496,3173,3174],{"class":498,"line":691},[496,3175,3176],{"class":1095},"// Generate border radius scale\n",[496,3178,3179,3181],{"class":498,"line":708},[496,3180,566],{"class":565},[496,3182,593],{"class":506},[496,3184,3185,3187],{"class":498,"line":725},[496,3186,1237],{"class":510},[496,3188,602],{"class":506},[496,3190,3191,3193],{"class":498,"line":742},[496,3192,616],{"class":510},[496,3194,602],{"class":506},[496,3196,3197,3199],{"class":498,"line":759},[496,3198,624],{"class":510},[496,3200,602],{"class":506},[496,3202,3203,3205],{"class":498,"line":776},[496,3204,632],{"class":510},[496,3206,602],{"class":506},[496,3208,3209,3211],{"class":498,"line":793},[496,3210,640],{"class":510},[496,3212,602],{"class":506},[496,3214,3215,3217],{"class":498,"line":809},[496,3216,1268],{"class":510},[496,3218,602],{"class":506},[496,3220,3221,3224],{"class":498,"line":814},[496,3222,3223],{"class":510},"    borderRadius3xl",[496,3225,602],{"class":506},[496,3227,3228,3230,3232,3234,3236,3238,3240,3242],{"class":498,"line":1316},[496,3229,656],{"class":506},[496,3231,659],{"class":506},[496,3233,1047],{"class":575},[496,3235,664],{"class":510},[496,3237,667],{"class":506},[496,3239,1285],{"class":510},[496,3241,667],{"class":506},[496,3243,593],{"class":506},[496,3245,3246,3248,3250,3252,3254,3256,3258,3260],{"class":498,"line":1337},[496,3247,1294],{"class":675},[496,3249,679],{"class":506},[496,3251,1299],{"class":510},[496,3253,1302],{"class":506},[496,3255,1305],{"class":855},[496,3257,1308],{"class":510},[496,3259,667],{"class":506},[496,3261,3262],{"class":1095},"   // ~0.26rem - badges, small buttons\n",[496,3264,3265,3267,3269,3271,3273,3275,3277,3279],{"class":498,"line":1355},[496,3266,694],{"class":675},[496,3268,679],{"class":506},[496,3270,1299],{"class":510},[496,3272,1302],{"class":506},[496,3274,1327],{"class":855},[496,3276,1308],{"class":510},[496,3278,667],{"class":506},[496,3280,3281],{"class":1095},"   // ~0.31rem - buttons, inputs\n",[496,3283,3284,3286,3288,3290,3292,3294,3296],{"class":498,"line":1373},[496,3285,711],{"class":675},[496,3287,679],{"class":506},[496,3289,1299],{"class":510},[496,3291,684],{"class":855},[496,3293,1308],{"class":510},[496,3295,667],{"class":506},[496,3297,3298],{"class":1095},"    // 0.375rem (base) - cards, standard surfaces\n",[496,3300,3301,3303,3305,3307,3309,3311,3313],{"class":498,"line":1391},[496,3302,728],{"class":675},[496,3304,679],{"class":506},[496,3306,1299],{"class":510},[496,3308,1327],{"class":855},[496,3310,1308],{"class":510},[496,3312,667],{"class":506},[496,3314,3315],{"class":1095},"    // ~0.45rem - panels, large cards\n",[496,3317,3318,3320,3322,3324,3326,3328,3330],{"class":498,"line":1416},[496,3319,745],{"class":675},[496,3321,679],{"class":506},[496,3323,1299],{"class":510},[496,3325,1305],{"class":855},[496,3327,1308],{"class":510},[496,3329,667],{"class":506},[496,3331,3332],{"class":1095},"    // ~0.54rem - modals, dialogs\n",[496,3334,3335,3337,3339,3341,3343,3345,3347,3349,3351],{"class":498,"line":1425},[496,3336,1394],{"class":506},[496,3338,1397],{"class":675},[496,3340,527],{"class":506},[496,3342,679],{"class":506},[496,3344,1299],{"class":510},[496,3346,1406],{"class":855},[496,3348,1308],{"class":510},[496,3350,667],{"class":506},[496,3352,3353],{"class":1095}," // ~0.65rem - hero sections\n",[496,3355,3356,3358,3361,3363,3365,3367,3370,3372,3374],{"class":498,"line":1430},[496,3357,1394],{"class":506},[496,3359,3360],{"class":675},"3xl",[496,3362,527],{"class":506},[496,3364,679],{"class":506},[496,3366,1299],{"class":510},[496,3368,3369],{"class":855},"4",[496,3371,1308],{"class":510},[496,3373,667],{"class":506},[496,3375,3376],{"class":1095}," // ~0.78rem - large surfaces\n",[496,3378,3380,3382,3384],{"class":498,"line":3379},33,[496,3381,656],{"class":506},[496,3383,804],{"class":510},[496,3385,530],{"class":506},[496,3387,3389],{"class":498,"line":3388},34,[496,3390,559],{"emptyLinePlaceholder":206},[496,3392,3394],{"class":498,"line":3393},35,[496,3395,3396],{"class":1095},"// Apply to components based on size\n",[496,3398,3400,3402,3404,3406,3409,3411,3413],{"class":498,"line":3399},36,[496,3401,2525],{"class":575},[496,3403,931],{"class":510},[496,3405,527],{"class":506},[496,3407,3408],{"class":523},".badge",[496,3410,527],{"class":506},[496,3412,667],{"class":506},[496,3414,593],{"class":506},[496,3416,3418,3420,3422,3424,3427],{"class":498,"line":3417},37,[496,3419,599],{"class":675},[496,3421,679],{"class":506},[496,3423,2396],{"class":575},[496,3425,3426],{"class":510},"(borderRadiusXs)",[496,3428,602],{"class":506},[496,3430,3432,3435,3437,3439,3442,3444],{"class":498,"line":3431},38,[496,3433,3434],{"class":675},"    padding",[496,3436,679],{"class":506},[496,3438,520],{"class":506},[496,3440,3441],{"class":523},"0.125rem 0.375rem",[496,3443,527],{"class":506},[496,3445,602],{"class":506},[496,3447,3449,3452,3454,3456,3458,3460],{"class":498,"line":3448},39,[496,3450,3451],{"class":675},"    fontSize",[496,3453,679],{"class":506},[496,3455,520],{"class":506},[496,3457,752],{"class":523},[496,3459,527],{"class":506},[496,3461,602],{"class":506},[496,3463,3465,3467,3469],{"class":498,"line":3464},40,[496,3466,656],{"class":506},[496,3468,804],{"class":510},[496,3470,530],{"class":506},[496,3472,3474],{"class":498,"line":3473},41,[496,3475,559],{"emptyLinePlaceholder":206},[496,3477,3479,3481,3483,3485,3488,3490,3492],{"class":498,"line":3478},42,[496,3480,2525],{"class":575},[496,3482,931],{"class":510},[496,3484,527],{"class":506},[496,3486,3487],{"class":523},".btn",[496,3489,527],{"class":506},[496,3491,667],{"class":506},[496,3493,593],{"class":506},[496,3495,3497,3499,3501,3503,3505],{"class":498,"line":3496},43,[496,3498,599],{"class":675},[496,3500,679],{"class":506},[496,3502,2396],{"class":575},[496,3504,2591],{"class":510},[496,3506,602],{"class":506},[496,3508,3510,3512,3514,3516,3519,3521],{"class":498,"line":3509},44,[496,3511,3434],{"class":675},[496,3513,679],{"class":506},[496,3515,520],{"class":506},[496,3517,3518],{"class":523},"0.5rem 1rem",[496,3520,527],{"class":506},[496,3522,602],{"class":506},[496,3524,3526,3528,3530],{"class":498,"line":3525},45,[496,3527,656],{"class":506},[496,3529,804],{"class":510},[496,3531,530],{"class":506},[496,3533,3535],{"class":498,"line":3534},46,[496,3536,559],{"emptyLinePlaceholder":206},[496,3538,3540,3542,3544,3546,3548,3550,3552],{"class":498,"line":3539},47,[496,3541,2525],{"class":575},[496,3543,931],{"class":510},[496,3545,527],{"class":506},[496,3547,2532],{"class":523},[496,3549,527],{"class":506},[496,3551,667],{"class":506},[496,3553,593],{"class":506},[496,3555,3557,3559,3561,3563,3566],{"class":498,"line":3556},48,[496,3558,599],{"class":675},[496,3560,679],{"class":506},[496,3562,2396],{"class":575},[496,3564,3565],{"class":510},"(borderRadiusMd)",[496,3567,602],{"class":506},[496,3569,3571,3573,3575,3577,3580,3582],{"class":498,"line":3570},49,[496,3572,3434],{"class":675},[496,3574,679],{"class":506},[496,3576,520],{"class":506},[496,3578,3579],{"class":523},"1.5rem",[496,3581,527],{"class":506},[496,3583,602],{"class":506},[496,3585,3587,3589,3591],{"class":498,"line":3586},50,[496,3588,656],{"class":506},[496,3590,804],{"class":510},[496,3592,530],{"class":506},[496,3594,3596],{"class":498,"line":3595},51,[496,3597,559],{"emptyLinePlaceholder":206},[496,3599,3601,3603,3605,3607,3609,3611,3613],{"class":498,"line":3600},52,[496,3602,2525],{"class":575},[496,3604,931],{"class":510},[496,3606,527],{"class":506},[496,3608,2616],{"class":523},[496,3610,527],{"class":506},[496,3612,667],{"class":506},[496,3614,593],{"class":506},[496,3616,3618,3620,3622,3624,3626],{"class":498,"line":3617},53,[496,3619,599],{"class":675},[496,3621,679],{"class":506},[496,3623,2396],{"class":575},[496,3625,2633],{"class":510},[496,3627,602],{"class":506},[496,3629,3631,3633,3635,3637,3640,3642],{"class":498,"line":3630},54,[496,3632,3434],{"class":675},[496,3634,679],{"class":506},[496,3636,520],{"class":506},[496,3638,3639],{"class":523},"2rem",[496,3641,527],{"class":506},[496,3643,602],{"class":506},[496,3645,3647,3649,3651],{"class":498,"line":3646},55,[496,3648,656],{"class":506},[496,3650,804],{"class":510},[496,3652,530],{"class":506},[496,3654,3656],{"class":498,"line":3655},56,[496,3657,559],{"emptyLinePlaceholder":206},[496,3659,3661,3663,3665,3667,3670,3672,3674],{"class":498,"line":3660},57,[496,3662,2525],{"class":575},[496,3664,931],{"class":510},[496,3666,527],{"class":506},[496,3668,3669],{"class":523},".hero",[496,3671,527],{"class":506},[496,3673,667],{"class":506},[496,3675,593],{"class":506},[496,3677,3679,3681,3683,3685,3688],{"class":498,"line":3678},58,[496,3680,599],{"class":675},[496,3682,679],{"class":506},[496,3684,2396],{"class":575},[496,3686,3687],{"class":510},"(borderRadiusXl)",[496,3689,602],{"class":506},[496,3691,3693,3695,3697,3699,3702,3704],{"class":498,"line":3692},59,[496,3694,3434],{"class":675},[496,3696,679],{"class":506},[496,3698,520],{"class":506},[496,3700,3701],{"class":523},"3rem",[496,3703,527],{"class":506},[496,3705,602],{"class":506},[496,3707,3709,3711,3713],{"class":498,"line":3708},60,[496,3710,656],{"class":506},[496,3712,804],{"class":510},[496,3714,530],{"class":506},[496,3716,3718],{"class":498,"line":3717},61,[496,3719,559],{"emptyLinePlaceholder":206},[496,3721,3723,3725,3727,3729],{"class":498,"line":3722},62,[496,3724,817],{"class":502},[496,3726,820],{"class":502},[496,3728,823],{"class":510},[496,3730,530],{"class":506},[481,3732,3733],{"icon":140,"label":828},[486,3734,3736],{"className":831,"code":3735,"filename":833,"language":834,"meta":492,"style":492},":root {\n    --scale--minor-third: 1.2;\n    --scale: var(--scale--minor-third);\n    --border-radius: 0.375rem;\n    --border-radius--xs: calc(var(--border-radius) * var(--scale-power---2));\n    --border-radius--sm: calc(var(--border-radius) * var(--scale-power---1));\n    --border-radius--md: calc(var(--border-radius) * var(--scale-power--0));\n    --border-radius--lg: calc(var(--border-radius) * var(--scale-power--1));\n    --border-radius--xl: calc(var(--border-radius) * var(--scale-power--2));\n    --border-radius--2xl: calc(var(--border-radius) * var(--scale-power--3));\n    --border-radius--3xl: calc(var(--border-radius) * var(--scale-power--4));\n}\n\n.badge {\n    border-radius: var(--border-radius--xs);\n    padding: 0.125rem 0.375rem;\n    font-size: 0.75rem;\n}\n\n.btn {\n    border-radius: var(--border-radius--sm);\n    padding: 0.5rem 1rem;\n}\n\n.card {\n    border-radius: var(--border-radius--md);\n    padding: 1.5rem;\n}\n\n.modal {\n    border-radius: var(--border-radius--lg);\n    padding: 2rem;\n}\n\n.hero {\n    border-radius: var(--border-radius--xl);\n    padding: 3rem;\n}\n",[467,3737,3738,3746,3756,3770,3780,3809,3838,3867,3896,3925,3954,3984,3988,3992,4001,4016,4029,4040,4044,4048,4057,4071,4084,4088,4092,4100,4114,4125,4129,4133,4141,4155,4166,4170,4174,4183,4198,4209],{"__ignoreMap":492},[496,3739,3740,3742,3744],{"class":498,"line":499},[496,3741,679],{"class":506},[496,3743,843],{"class":565},[496,3745,593],{"class":506},[496,3747,3748,3750,3752,3754],{"class":498,"line":533},[496,3749,1458],{"class":510},[496,3751,679],{"class":506},[496,3753,1463],{"class":855},[496,3755,530],{"class":506},[496,3757,3758,3760,3762,3764,3766,3768],{"class":498,"line":556},[496,3759,1470],{"class":510},[496,3761,679],{"class":506},[496,3763,928],{"class":575},[496,3765,931],{"class":506},[496,3767,1479],{"class":510},[496,3769,937],{"class":506},[496,3771,3772,3774,3776,3778],{"class":498,"line":562},[496,3773,923],{"class":510},[496,3775,679],{"class":506},[496,3777,880],{"class":855},[496,3779,530],{"class":506},[496,3781,3782,3784,3786,3788,3790,3792,3794,3796,3798,3800,3802,3804,3807],{"class":498,"line":583},[496,3783,1496],{"class":510},[496,3785,679],{"class":506},[496,3787,1501],{"class":575},[496,3789,931],{"class":506},[496,3791,1506],{"class":575},[496,3793,931],{"class":506},[496,3795,978],{"class":510},[496,3797,804],{"class":506},[496,3799,1515],{"class":506},[496,3801,928],{"class":575},[496,3803,931],{"class":506},[496,3805,3806],{"class":510},"--scale-power---2",[496,3808,1541],{"class":506},[496,3810,3811,3813,3815,3817,3819,3821,3823,3825,3827,3829,3831,3833,3836],{"class":498,"line":588},[496,3812,863],{"class":510},[496,3814,679],{"class":506},[496,3816,1501],{"class":575},[496,3818,931],{"class":506},[496,3820,1506],{"class":575},[496,3822,931],{"class":506},[496,3824,978],{"class":510},[496,3826,804],{"class":506},[496,3828,1515],{"class":506},[496,3830,928],{"class":575},[496,3832,931],{"class":506},[496,3834,3835],{"class":510},"--scale-power---1",[496,3837,1541],{"class":506},[496,3839,3840,3842,3844,3846,3848,3850,3852,3854,3856,3858,3860,3862,3865],{"class":498,"line":596},[496,3841,875],{"class":510},[496,3843,679],{"class":506},[496,3845,1501],{"class":575},[496,3847,931],{"class":506},[496,3849,1506],{"class":575},[496,3851,931],{"class":506},[496,3853,978],{"class":510},[496,3855,804],{"class":506},[496,3857,1515],{"class":506},[496,3859,928],{"class":575},[496,3861,931],{"class":506},[496,3863,3864],{"class":510},"--scale-power--0",[496,3866,1541],{"class":506},[496,3868,3869,3871,3873,3875,3877,3879,3881,3883,3885,3887,3889,3891,3894],{"class":498,"line":605},[496,3870,887],{"class":510},[496,3872,679],{"class":506},[496,3874,1501],{"class":575},[496,3876,931],{"class":506},[496,3878,1506],{"class":575},[496,3880,931],{"class":506},[496,3882,978],{"class":510},[496,3884,804],{"class":506},[496,3886,1515],{"class":506},[496,3888,928],{"class":575},[496,3890,931],{"class":506},[496,3892,3893],{"class":510},"--scale-power--1",[496,3895,1541],{"class":506},[496,3897,3898,3900,3902,3904,3906,3908,3910,3912,3914,3916,3918,3920,3923],{"class":498,"line":613},[496,3899,899],{"class":510},[496,3901,679],{"class":506},[496,3903,1501],{"class":575},[496,3905,931],{"class":506},[496,3907,1506],{"class":575},[496,3909,931],{"class":506},[496,3911,978],{"class":510},[496,3913,804],{"class":506},[496,3915,1515],{"class":506},[496,3917,928],{"class":575},[496,3919,931],{"class":506},[496,3921,3922],{"class":510},"--scale-power--2",[496,3924,1541],{"class":506},[496,3926,3927,3929,3931,3933,3935,3937,3939,3941,3943,3945,3947,3949,3952],{"class":498,"line":621},[496,3928,1668],{"class":510},[496,3930,679],{"class":506},[496,3932,1501],{"class":575},[496,3934,931],{"class":506},[496,3936,1506],{"class":575},[496,3938,931],{"class":506},[496,3940,978],{"class":510},[496,3942,804],{"class":506},[496,3944,1515],{"class":506},[496,3946,928],{"class":575},[496,3948,931],{"class":506},[496,3950,3951],{"class":510},"--scale-power--3",[496,3953,1541],{"class":506},[496,3955,3956,3959,3961,3963,3965,3967,3969,3971,3973,3975,3977,3979,3982],{"class":498,"line":629},[496,3957,3958],{"class":510},"    --border-radius--3xl",[496,3960,679],{"class":506},[496,3962,1501],{"class":575},[496,3964,931],{"class":506},[496,3966,1506],{"class":575},[496,3968,931],{"class":506},[496,3970,978],{"class":510},[496,3972,804],{"class":506},[496,3974,1515],{"class":506},[496,3976,928],{"class":575},[496,3978,931],{"class":506},[496,3980,3981],{"class":510},"--scale-power--4",[496,3983,1541],{"class":506},[496,3985,3986],{"class":498,"line":637},[496,3987,942],{"class":506},[496,3989,3990],{"class":498,"line":645},[496,3991,559],{"emptyLinePlaceholder":206},[496,3993,3994,3996,3999],{"class":498,"line":653},[496,3995,2767],{"class":506},[496,3997,3998],{"class":2770},"badge",[496,4000,593],{"class":506},[496,4002,4003,4005,4007,4009,4011,4014],{"class":498,"line":672},[496,4004,2779],{"class":2778},[496,4006,679],{"class":506},[496,4008,928],{"class":575},[496,4010,931],{"class":506},[496,4012,4013],{"class":510},"--border-radius--xs",[496,4015,937],{"class":506},[496,4017,4018,4020,4022,4025,4027],{"class":498,"line":691},[496,4019,3434],{"class":2778},[496,4021,679],{"class":506},[496,4023,4024],{"class":855}," 0.125rem",[496,4026,880],{"class":855},[496,4028,530],{"class":506},[496,4030,4031,4034,4036,4038],{"class":498,"line":708},[496,4032,4033],{"class":2778},"    font-size",[496,4035,679],{"class":506},[496,4037,904],{"class":855},[496,4039,530],{"class":506},[496,4041,4042],{"class":498,"line":725},[496,4043,942],{"class":506},[496,4045,4046],{"class":498,"line":742},[496,4047,559],{"emptyLinePlaceholder":206},[496,4049,4050,4052,4055],{"class":498,"line":759},[496,4051,2767],{"class":506},[496,4053,4054],{"class":2770},"btn",[496,4056,593],{"class":506},[496,4058,4059,4061,4063,4065,4067,4069],{"class":498,"line":776},[496,4060,2779],{"class":2778},[496,4062,679],{"class":506},[496,4064,928],{"class":575},[496,4066,931],{"class":506},[496,4068,2819],{"class":510},[496,4070,937],{"class":506},[496,4072,4073,4075,4077,4079,4082],{"class":498,"line":793},[496,4074,3434],{"class":2778},[496,4076,679],{"class":506},[496,4078,892],{"class":855},[496,4080,4081],{"class":855}," 1rem",[496,4083,530],{"class":506},[496,4085,4086],{"class":498,"line":809},[496,4087,942],{"class":506},[496,4089,4090],{"class":498,"line":814},[496,4091,559],{"emptyLinePlaceholder":206},[496,4093,4094,4096,4098],{"class":498,"line":1316},[496,4095,2767],{"class":506},[496,4097,2771],{"class":2770},[496,4099,593],{"class":506},[496,4101,4102,4104,4106,4108,4110,4112],{"class":498,"line":1337},[496,4103,2779],{"class":2778},[496,4105,679],{"class":506},[496,4107,928],{"class":575},[496,4109,931],{"class":506},[496,4111,934],{"class":510},[496,4113,937],{"class":506},[496,4115,4116,4118,4120,4123],{"class":498,"line":1355},[496,4117,3434],{"class":2778},[496,4119,679],{"class":506},[496,4121,4122],{"class":855}," 1.5rem",[496,4124,530],{"class":506},[496,4126,4127],{"class":498,"line":1373},[496,4128,942],{"class":506},[496,4130,4131],{"class":498,"line":1391},[496,4132,559],{"emptyLinePlaceholder":206},[496,4134,4135,4137,4139],{"class":498,"line":1416},[496,4136,2767],{"class":506},[496,4138,2836],{"class":2770},[496,4140,593],{"class":506},[496,4142,4143,4145,4147,4149,4151,4153],{"class":498,"line":1425},[496,4144,2779],{"class":2778},[496,4146,679],{"class":506},[496,4148,928],{"class":575},[496,4150,931],{"class":506},[496,4152,2851],{"class":510},[496,4154,937],{"class":506},[496,4156,4157,4159,4161,4164],{"class":498,"line":1430},[496,4158,3434],{"class":2778},[496,4160,679],{"class":506},[496,4162,4163],{"class":855}," 2rem",[496,4165,530],{"class":506},[496,4167,4168],{"class":498,"line":3379},[496,4169,942],{"class":506},[496,4171,4172],{"class":498,"line":3388},[496,4173,559],{"emptyLinePlaceholder":206},[496,4175,4176,4178,4181],{"class":498,"line":3393},[496,4177,2767],{"class":506},[496,4179,4180],{"class":2770},"hero",[496,4182,593],{"class":506},[496,4184,4185,4187,4189,4191,4193,4196],{"class":498,"line":3399},[496,4186,2779],{"class":2778},[496,4188,679],{"class":506},[496,4190,928],{"class":575},[496,4192,931],{"class":506},[496,4194,4195],{"class":510},"--border-radius--xl",[496,4197,937],{"class":506},[496,4199,4200,4202,4204,4207],{"class":498,"line":3417},[496,4201,3434],{"class":2778},[496,4203,679],{"class":506},[496,4205,4206],{"class":855}," 3rem",[496,4208,530],{"class":506},[496,4210,4211],{"class":498,"line":3431},[496,4212,942],{"class":506},[1738,4214,4216],{"id":4215},"component-specific-border-radius-system","Component-Specific Border Radius System",[418,4218,4219],{},"Create a border radius system tailored for specific component types:",[478,4221,4222,4888],{},[481,4223,4224],{"icon":483,"label":484},[486,4225,4227],{"className":488,"code":4226,"filename":490,"language":491,"meta":492,"style":492},"import { styleframe } from 'styleframe';\nimport { useBorderRadiusDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { ref, selector } = s;\n\nconst {\n    borderRadius,\n    borderRadiusButton,\n    borderRadiusCard,\n    borderRadiusInput,\n    borderRadiusModal,\n    borderRadiusBadge,\n    borderRadiusAvatar,\n} = useBorderRadiusDesignTokens(s, {\n    default: '0.375rem',\n    button: '0.375rem',\n    card: '0.5rem',\n    input: '0.25rem',\n    modal: '0.75rem',\n    badge: '0.25rem',\n    avatar: '9999px',\n} as const);\n\nselector('.btn', {\n    borderRadius: ref(borderRadiusButton),\n    padding: '0.5rem 1rem',\n});\n\nselector('.card', {\n    borderRadius: ref(borderRadiusCard),\n    padding: '1.5rem',\n});\n\nselector('.input', {\n    borderRadius: ref(borderRadiusInput),\n    padding: '0.5rem',\n    border: '1px solid #d1d5db',\n});\n\nselector('.modal', {\n    borderRadius: ref(borderRadiusModal),\n    padding: '2rem',\n});\n\nselector('.badge', {\n    borderRadius: ref(borderRadiusBadge),\n    padding: '0.25rem 0.5rem',\n    fontSize: '0.75rem',\n});\n\nselector('.avatar', {\n    borderRadius: ref(borderRadiusAvatar),\n    width: '2.5rem',\n    height: '2.5rem',\n});\n\nexport default s;\n",[467,4228,4229,4249,4269,4273,4287,4307,4311,4317,4323,4330,4337,4344,4351,4358,4365,4379,4393,4408,4423,4438,4453,4468,4483,4495,4499,4515,4528,4542,4550,4554,4570,4583,4597,4605,4609,4626,4639,4653,4669,4677,4681,4697,4710,4724,4732,4736,4752,4765,4780,4794,4802,4806,4822,4835,4851,4866,4874,4878],{"__ignoreMap":492},[496,4230,4231,4233,4235,4237,4239,4241,4243,4245,4247],{"class":498,"line":499},[496,4232,503],{"class":502},[496,4234,507],{"class":506},[496,4236,511],{"class":510},[496,4238,514],{"class":506},[496,4240,517],{"class":502},[496,4242,520],{"class":506},[496,4244,524],{"class":523},[496,4246,527],{"class":506},[496,4248,530],{"class":506},[496,4250,4251,4253,4255,4257,4259,4261,4263,4265,4267],{"class":498,"line":533},[496,4252,503],{"class":502},[496,4254,507],{"class":506},[496,4256,540],{"class":510},[496,4258,514],{"class":506},[496,4260,517],{"class":502},[496,4262,520],{"class":506},[496,4264,549],{"class":523},[496,4266,527],{"class":506},[496,4268,530],{"class":506},[496,4270,4271],{"class":498,"line":556},[496,4272,559],{"emptyLinePlaceholder":206},[496,4274,4275,4277,4279,4281,4283,4285],{"class":498,"line":562},[496,4276,566],{"class":565},[496,4278,569],{"class":510},[496,4280,572],{"class":506},[496,4282,511],{"class":575},[496,4284,578],{"class":510},[496,4286,530],{"class":506},[496,4288,4289,4291,4293,4295,4297,4299,4301,4303,4305],{"class":498,"line":583},[496,4290,566],{"class":565},[496,4292,507],{"class":506},[496,4294,2396],{"class":510},[496,4296,667],{"class":506},[496,4298,2401],{"class":510},[496,4300,656],{"class":506},[496,4302,659],{"class":506},[496,4304,823],{"class":510},[496,4306,530],{"class":506},[496,4308,4309],{"class":498,"line":588},[496,4310,559],{"emptyLinePlaceholder":206},[496,4312,4313,4315],{"class":498,"line":596},[496,4314,566],{"class":565},[496,4316,593],{"class":506},[496,4318,4319,4321],{"class":498,"line":605},[496,4320,599],{"class":510},[496,4322,602],{"class":506},[496,4324,4325,4328],{"class":498,"line":613},[496,4326,4327],{"class":510},"    borderRadiusButton",[496,4329,602],{"class":506},[496,4331,4332,4335],{"class":498,"line":621},[496,4333,4334],{"class":510},"    borderRadiusCard",[496,4336,602],{"class":506},[496,4338,4339,4342],{"class":498,"line":629},[496,4340,4341],{"class":510},"    borderRadiusInput",[496,4343,602],{"class":506},[496,4345,4346,4349],{"class":498,"line":637},[496,4347,4348],{"class":510},"    borderRadiusModal",[496,4350,602],{"class":506},[496,4352,4353,4356],{"class":498,"line":645},[496,4354,4355],{"class":510},"    borderRadiusBadge",[496,4357,602],{"class":506},[496,4359,4360,4363],{"class":498,"line":653},[496,4361,4362],{"class":510},"    borderRadiusAvatar",[496,4364,602],{"class":506},[496,4366,4367,4369,4371,4373,4375,4377],{"class":498,"line":672},[496,4368,656],{"class":506},[496,4370,659],{"class":506},[496,4372,540],{"class":575},[496,4374,664],{"class":510},[496,4376,667],{"class":506},[496,4378,593],{"class":506},[496,4380,4381,4383,4385,4387,4389,4391],{"class":498,"line":691},[496,4382,779],{"class":675},[496,4384,679],{"class":506},[496,4386,520],{"class":506},[496,4388,718],{"class":523},[496,4390,527],{"class":506},[496,4392,602],{"class":506},[496,4394,4395,4398,4400,4402,4404,4406],{"class":498,"line":708},[496,4396,4397],{"class":675},"    button",[496,4399,679],{"class":506},[496,4401,520],{"class":506},[496,4403,718],{"class":523},[496,4405,527],{"class":506},[496,4407,602],{"class":506},[496,4409,4410,4413,4415,4417,4419,4421],{"class":498,"line":725},[496,4411,4412],{"class":675},"    card",[496,4414,679],{"class":506},[496,4416,520],{"class":506},[496,4418,735],{"class":523},[496,4420,527],{"class":506},[496,4422,602],{"class":506},[496,4424,4425,4428,4430,4432,4434,4436],{"class":498,"line":742},[496,4426,4427],{"class":675},"    input",[496,4429,679],{"class":506},[496,4431,520],{"class":506},[496,4433,701],{"class":523},[496,4435,527],{"class":506},[496,4437,602],{"class":506},[496,4439,4440,4443,4445,4447,4449,4451],{"class":498,"line":759},[496,4441,4442],{"class":675},"    modal",[496,4444,679],{"class":506},[496,4446,520],{"class":506},[496,4448,752],{"class":523},[496,4450,527],{"class":506},[496,4452,602],{"class":506},[496,4454,4455,4458,4460,4462,4464,4466],{"class":498,"line":776},[496,4456,4457],{"class":675},"    badge",[496,4459,679],{"class":506},[496,4461,520],{"class":506},[496,4463,701],{"class":523},[496,4465,527],{"class":506},[496,4467,602],{"class":506},[496,4469,4470,4473,4475,4477,4479,4481],{"class":498,"line":793},[496,4471,4472],{"class":675},"    avatar",[496,4474,679],{"class":506},[496,4476,520],{"class":506},[496,4478,769],{"class":523},[496,4480,527],{"class":506},[496,4482,602],{"class":506},[496,4484,4485,4487,4489,4491,4493],{"class":498,"line":809},[496,4486,656],{"class":506},[496,4488,798],{"class":502},[496,4490,801],{"class":565},[496,4492,804],{"class":510},[496,4494,530],{"class":506},[496,4496,4497],{"class":498,"line":814},[496,4498,559],{"emptyLinePlaceholder":206},[496,4500,4501,4503,4505,4507,4509,4511,4513],{"class":498,"line":1316},[496,4502,2525],{"class":575},[496,4504,931],{"class":510},[496,4506,527],{"class":506},[496,4508,3487],{"class":523},[496,4510,527],{"class":506},[496,4512,667],{"class":506},[496,4514,593],{"class":506},[496,4516,4517,4519,4521,4523,4526],{"class":498,"line":1337},[496,4518,599],{"class":675},[496,4520,679],{"class":506},[496,4522,2396],{"class":575},[496,4524,4525],{"class":510},"(borderRadiusButton)",[496,4527,602],{"class":506},[496,4529,4530,4532,4534,4536,4538,4540],{"class":498,"line":1355},[496,4531,3434],{"class":675},[496,4533,679],{"class":506},[496,4535,520],{"class":506},[496,4537,3518],{"class":523},[496,4539,527],{"class":506},[496,4541,602],{"class":506},[496,4543,4544,4546,4548],{"class":498,"line":1373},[496,4545,656],{"class":506},[496,4547,804],{"class":510},[496,4549,530],{"class":506},[496,4551,4552],{"class":498,"line":1391},[496,4553,559],{"emptyLinePlaceholder":206},[496,4555,4556,4558,4560,4562,4564,4566,4568],{"class":498,"line":1416},[496,4557,2525],{"class":575},[496,4559,931],{"class":510},[496,4561,527],{"class":506},[496,4563,2532],{"class":523},[496,4565,527],{"class":506},[496,4567,667],{"class":506},[496,4569,593],{"class":506},[496,4571,4572,4574,4576,4578,4581],{"class":498,"line":1425},[496,4573,599],{"class":675},[496,4575,679],{"class":506},[496,4577,2396],{"class":575},[496,4579,4580],{"class":510},"(borderRadiusCard)",[496,4582,602],{"class":506},[496,4584,4585,4587,4589,4591,4593,4595],{"class":498,"line":1430},[496,4586,3434],{"class":675},[496,4588,679],{"class":506},[496,4590,520],{"class":506},[496,4592,3579],{"class":523},[496,4594,527],{"class":506},[496,4596,602],{"class":506},[496,4598,4599,4601,4603],{"class":498,"line":3379},[496,4600,656],{"class":506},[496,4602,804],{"class":510},[496,4604,530],{"class":506},[496,4606,4607],{"class":498,"line":3388},[496,4608,559],{"emptyLinePlaceholder":206},[496,4610,4611,4613,4615,4617,4620,4622,4624],{"class":498,"line":3393},[496,4612,2525],{"class":575},[496,4614,931],{"class":510},[496,4616,527],{"class":506},[496,4618,4619],{"class":523},".input",[496,4621,527],{"class":506},[496,4623,667],{"class":506},[496,4625,593],{"class":506},[496,4627,4628,4630,4632,4634,4637],{"class":498,"line":3399},[496,4629,599],{"class":675},[496,4631,679],{"class":506},[496,4633,2396],{"class":575},[496,4635,4636],{"class":510},"(borderRadiusInput)",[496,4638,602],{"class":506},[496,4640,4641,4643,4645,4647,4649,4651],{"class":498,"line":3417},[496,4642,3434],{"class":675},[496,4644,679],{"class":506},[496,4646,520],{"class":506},[496,4648,735],{"class":523},[496,4650,527],{"class":506},[496,4652,602],{"class":506},[496,4654,4655,4658,4660,4662,4665,4667],{"class":498,"line":3431},[496,4656,4657],{"class":675},"    border",[496,4659,679],{"class":506},[496,4661,520],{"class":506},[496,4663,4664],{"class":523},"1px solid #d1d5db",[496,4666,527],{"class":506},[496,4668,602],{"class":506},[496,4670,4671,4673,4675],{"class":498,"line":3448},[496,4672,656],{"class":506},[496,4674,804],{"class":510},[496,4676,530],{"class":506},[496,4678,4679],{"class":498,"line":3464},[496,4680,559],{"emptyLinePlaceholder":206},[496,4682,4683,4685,4687,4689,4691,4693,4695],{"class":498,"line":3473},[496,4684,2525],{"class":575},[496,4686,931],{"class":510},[496,4688,527],{"class":506},[496,4690,2616],{"class":523},[496,4692,527],{"class":506},[496,4694,667],{"class":506},[496,4696,593],{"class":506},[496,4698,4699,4701,4703,4705,4708],{"class":498,"line":3478},[496,4700,599],{"class":675},[496,4702,679],{"class":506},[496,4704,2396],{"class":575},[496,4706,4707],{"class":510},"(borderRadiusModal)",[496,4709,602],{"class":506},[496,4711,4712,4714,4716,4718,4720,4722],{"class":498,"line":3496},[496,4713,3434],{"class":675},[496,4715,679],{"class":506},[496,4717,520],{"class":506},[496,4719,3639],{"class":523},[496,4721,527],{"class":506},[496,4723,602],{"class":506},[496,4725,4726,4728,4730],{"class":498,"line":3509},[496,4727,656],{"class":506},[496,4729,804],{"class":510},[496,4731,530],{"class":506},[496,4733,4734],{"class":498,"line":3525},[496,4735,559],{"emptyLinePlaceholder":206},[496,4737,4738,4740,4742,4744,4746,4748,4750],{"class":498,"line":3534},[496,4739,2525],{"class":575},[496,4741,931],{"class":510},[496,4743,527],{"class":506},[496,4745,3408],{"class":523},[496,4747,527],{"class":506},[496,4749,667],{"class":506},[496,4751,593],{"class":506},[496,4753,4754,4756,4758,4760,4763],{"class":498,"line":3539},[496,4755,599],{"class":675},[496,4757,679],{"class":506},[496,4759,2396],{"class":575},[496,4761,4762],{"class":510},"(borderRadiusBadge)",[496,4764,602],{"class":506},[496,4766,4767,4769,4771,4773,4776,4778],{"class":498,"line":3556},[496,4768,3434],{"class":675},[496,4770,679],{"class":506},[496,4772,520],{"class":506},[496,4774,4775],{"class":523},"0.25rem 0.5rem",[496,4777,527],{"class":506},[496,4779,602],{"class":506},[496,4781,4782,4784,4786,4788,4790,4792],{"class":498,"line":3570},[496,4783,3451],{"class":675},[496,4785,679],{"class":506},[496,4787,520],{"class":506},[496,4789,752],{"class":523},[496,4791,527],{"class":506},[496,4793,602],{"class":506},[496,4795,4796,4798,4800],{"class":498,"line":3586},[496,4797,656],{"class":506},[496,4799,804],{"class":510},[496,4801,530],{"class":506},[496,4803,4804],{"class":498,"line":3595},[496,4805,559],{"emptyLinePlaceholder":206},[496,4807,4808,4810,4812,4814,4816,4818,4820],{"class":498,"line":3600},[496,4809,2525],{"class":575},[496,4811,931],{"class":510},[496,4813,527],{"class":506},[496,4815,2658],{"class":523},[496,4817,527],{"class":506},[496,4819,667],{"class":506},[496,4821,593],{"class":506},[496,4823,4824,4826,4828,4830,4833],{"class":498,"line":3617},[496,4825,599],{"class":675},[496,4827,679],{"class":506},[496,4829,2396],{"class":575},[496,4831,4832],{"class":510},"(borderRadiusAvatar)",[496,4834,602],{"class":506},[496,4836,4837,4840,4842,4844,4847,4849],{"class":498,"line":3630},[496,4838,4839],{"class":675},"    width",[496,4841,679],{"class":506},[496,4843,520],{"class":506},[496,4845,4846],{"class":523},"2.5rem",[496,4848,527],{"class":506},[496,4850,602],{"class":506},[496,4852,4853,4856,4858,4860,4862,4864],{"class":498,"line":3646},[496,4854,4855],{"class":675},"    height",[496,4857,679],{"class":506},[496,4859,520],{"class":506},[496,4861,4846],{"class":523},[496,4863,527],{"class":506},[496,4865,602],{"class":506},[496,4867,4868,4870,4872],{"class":498,"line":3655},[496,4869,656],{"class":506},[496,4871,804],{"class":510},[496,4873,530],{"class":506},[496,4875,4876],{"class":498,"line":3660},[496,4877,559],{"emptyLinePlaceholder":206},[496,4879,4880,4882,4884,4886],{"class":498,"line":3678},[496,4881,817],{"class":502},[496,4883,820],{"class":502},[496,4885,823],{"class":510},[496,4887,530],{"class":506},[481,4889,4890],{"icon":140,"label":828},[486,4891,4893],{"className":831,"code":4892,"filename":833,"language":834,"meta":492,"style":492},":root {\n    --border-radius: 0.375rem;\n    --border-radius--button: 0.375rem;\n    --border-radius--card: 0.5rem;\n    --border-radius--input: 0.25rem;\n    --border-radius--modal: 0.75rem;\n    --border-radius--badge: 0.25rem;\n    --border-radius--avatar: 9999px;\n}\n\n.btn {\n    border-radius: var(--border-radius--button);\n    padding: 0.5rem 1rem;\n}\n\n.card {\n    border-radius: var(--border-radius--card);\n    padding: 1.5rem;\n}\n\n.input {\n    border-radius: var(--border-radius--input);\n    padding: 0.5rem;\n    border: 1px solid #d1d5db;\n}\n\n.modal {\n    border-radius: var(--border-radius--modal);\n    padding: 2rem;\n}\n\n.badge {\n    border-radius: var(--border-radius--badge);\n    padding: 0.25rem 0.5rem;\n    font-size: 0.75rem;\n}\n\n.avatar {\n    border-radius: var(--border-radius--avatar);\n    width: 2.5rem;\n    height: 2.5rem;\n}\n",[467,4894,4895,4903,4913,4924,4935,4946,4957,4968,4979,4983,4987,4995,5010,5022,5026,5030,5038,5053,5063,5067,5071,5080,5095,5105,5125,5129,5133,5141,5156,5166,5170,5174,5182,5197,5209,5219,5223,5227,5235,5250,5261,5271],{"__ignoreMap":492},[496,4896,4897,4899,4901],{"class":498,"line":499},[496,4898,679],{"class":506},[496,4900,843],{"class":565},[496,4902,593],{"class":506},[496,4904,4905,4907,4909,4911],{"class":498,"line":533},[496,4906,923],{"class":510},[496,4908,679],{"class":506},[496,4910,880],{"class":855},[496,4912,530],{"class":506},[496,4914,4915,4918,4920,4922],{"class":498,"line":556},[496,4916,4917],{"class":510},"    --border-radius--button",[496,4919,679],{"class":506},[496,4921,880],{"class":855},[496,4923,530],{"class":506},[496,4925,4926,4929,4931,4933],{"class":498,"line":562},[496,4927,4928],{"class":510},"    --border-radius--card",[496,4930,679],{"class":506},[496,4932,892],{"class":855},[496,4934,530],{"class":506},[496,4936,4937,4940,4942,4944],{"class":498,"line":583},[496,4938,4939],{"class":510},"    --border-radius--input",[496,4941,679],{"class":506},[496,4943,868],{"class":855},[496,4945,530],{"class":506},[496,4947,4948,4951,4953,4955],{"class":498,"line":588},[496,4949,4950],{"class":510},"    --border-radius--modal",[496,4952,679],{"class":506},[496,4954,904],{"class":855},[496,4956,530],{"class":506},[496,4958,4959,4962,4964,4966],{"class":498,"line":596},[496,4960,4961],{"class":510},"    --border-radius--badge",[496,4963,679],{"class":506},[496,4965,868],{"class":855},[496,4967,530],{"class":506},[496,4969,4970,4973,4975,4977],{"class":498,"line":605},[496,4971,4972],{"class":510},"    --border-radius--avatar",[496,4974,679],{"class":506},[496,4976,916],{"class":855},[496,4978,530],{"class":506},[496,4980,4981],{"class":498,"line":613},[496,4982,942],{"class":506},[496,4984,4985],{"class":498,"line":621},[496,4986,559],{"emptyLinePlaceholder":206},[496,4988,4989,4991,4993],{"class":498,"line":629},[496,4990,2767],{"class":506},[496,4992,4054],{"class":2770},[496,4994,593],{"class":506},[496,4996,4997,4999,5001,5003,5005,5008],{"class":498,"line":637},[496,4998,2779],{"class":2778},[496,5000,679],{"class":506},[496,5002,928],{"class":575},[496,5004,931],{"class":506},[496,5006,5007],{"class":510},"--border-radius--button",[496,5009,937],{"class":506},[496,5011,5012,5014,5016,5018,5020],{"class":498,"line":645},[496,5013,3434],{"class":2778},[496,5015,679],{"class":506},[496,5017,892],{"class":855},[496,5019,4081],{"class":855},[496,5021,530],{"class":506},[496,5023,5024],{"class":498,"line":653},[496,5025,942],{"class":506},[496,5027,5028],{"class":498,"line":672},[496,5029,559],{"emptyLinePlaceholder":206},[496,5031,5032,5034,5036],{"class":498,"line":691},[496,5033,2767],{"class":506},[496,5035,2771],{"class":2770},[496,5037,593],{"class":506},[496,5039,5040,5042,5044,5046,5048,5051],{"class":498,"line":708},[496,5041,2779],{"class":2778},[496,5043,679],{"class":506},[496,5045,928],{"class":575},[496,5047,931],{"class":506},[496,5049,5050],{"class":510},"--border-radius--card",[496,5052,937],{"class":506},[496,5054,5055,5057,5059,5061],{"class":498,"line":725},[496,5056,3434],{"class":2778},[496,5058,679],{"class":506},[496,5060,4122],{"class":855},[496,5062,530],{"class":506},[496,5064,5065],{"class":498,"line":742},[496,5066,942],{"class":506},[496,5068,5069],{"class":498,"line":759},[496,5070,559],{"emptyLinePlaceholder":206},[496,5072,5073,5075,5078],{"class":498,"line":776},[496,5074,2767],{"class":506},[496,5076,5077],{"class":2770},"input",[496,5079,593],{"class":506},[496,5081,5082,5084,5086,5088,5090,5093],{"class":498,"line":793},[496,5083,2779],{"class":2778},[496,5085,679],{"class":506},[496,5087,928],{"class":575},[496,5089,931],{"class":506},[496,5091,5092],{"class":510},"--border-radius--input",[496,5094,937],{"class":506},[496,5096,5097,5099,5101,5103],{"class":498,"line":809},[496,5098,3434],{"class":2778},[496,5100,679],{"class":506},[496,5102,892],{"class":855},[496,5104,530],{"class":506},[496,5106,5107,5109,5111,5114,5117,5120,5123],{"class":498,"line":814},[496,5108,4657],{"class":2778},[496,5110,679],{"class":506},[496,5112,5113],{"class":855}," 1px",[496,5115,5116],{"class":510}," solid ",[496,5118,5119],{"class":506},"#",[496,5121,5122],{"class":510},"d1d5db",[496,5124,530],{"class":506},[496,5126,5127],{"class":498,"line":1316},[496,5128,942],{"class":506},[496,5130,5131],{"class":498,"line":1337},[496,5132,559],{"emptyLinePlaceholder":206},[496,5134,5135,5137,5139],{"class":498,"line":1355},[496,5136,2767],{"class":506},[496,5138,2836],{"class":2770},[496,5140,593],{"class":506},[496,5142,5143,5145,5147,5149,5151,5154],{"class":498,"line":1373},[496,5144,2779],{"class":2778},[496,5146,679],{"class":506},[496,5148,928],{"class":575},[496,5150,931],{"class":506},[496,5152,5153],{"class":510},"--border-radius--modal",[496,5155,937],{"class":506},[496,5157,5158,5160,5162,5164],{"class":498,"line":1391},[496,5159,3434],{"class":2778},[496,5161,679],{"class":506},[496,5163,4163],{"class":855},[496,5165,530],{"class":506},[496,5167,5168],{"class":498,"line":1416},[496,5169,942],{"class":506},[496,5171,5172],{"class":498,"line":1425},[496,5173,559],{"emptyLinePlaceholder":206},[496,5175,5176,5178,5180],{"class":498,"line":1430},[496,5177,2767],{"class":506},[496,5179,3998],{"class":2770},[496,5181,593],{"class":506},[496,5183,5184,5186,5188,5190,5192,5195],{"class":498,"line":3379},[496,5185,2779],{"class":2778},[496,5187,679],{"class":506},[496,5189,928],{"class":575},[496,5191,931],{"class":506},[496,5193,5194],{"class":510},"--border-radius--badge",[496,5196,937],{"class":506},[496,5198,5199,5201,5203,5205,5207],{"class":498,"line":3388},[496,5200,3434],{"class":2778},[496,5202,679],{"class":506},[496,5204,868],{"class":855},[496,5206,892],{"class":855},[496,5208,530],{"class":506},[496,5210,5211,5213,5215,5217],{"class":498,"line":3393},[496,5212,4033],{"class":2778},[496,5214,679],{"class":506},[496,5216,904],{"class":855},[496,5218,530],{"class":506},[496,5220,5221],{"class":498,"line":3399},[496,5222,942],{"class":506},[496,5224,5225],{"class":498,"line":3417},[496,5226,559],{"emptyLinePlaceholder":206},[496,5228,5229,5231,5233],{"class":498,"line":3431},[496,5230,2767],{"class":506},[496,5232,2868],{"class":2770},[496,5234,593],{"class":506},[496,5236,5237,5239,5241,5243,5245,5248],{"class":498,"line":3448},[496,5238,2779],{"class":2778},[496,5240,679],{"class":506},[496,5242,928],{"class":575},[496,5244,931],{"class":506},[496,5246,5247],{"class":510},"--border-radius--avatar",[496,5249,937],{"class":506},[496,5251,5252,5254,5256,5259],{"class":498,"line":3464},[496,5253,4839],{"class":2778},[496,5255,679],{"class":506},[496,5257,5258],{"class":855}," 2.5rem",[496,5260,530],{"class":506},[496,5262,5263,5265,5267,5269],{"class":498,"line":3473},[496,5264,4855],{"class":2778},[496,5266,679],{"class":506},[496,5268,5258],{"class":855},[496,5270,530],{"class":506},[496,5272,5273],{"class":498,"line":3478},[496,5274,942],{"class":506},[414,5276,5278],{"id":5277},"best-practices","Best Practices",[429,5280,5281,5287,5301,5313,5319,5325,5331,5348,5354,5360],{},[432,5282,5283,5286],{},[435,5284,5285],{},"Start with a small scale",": 3-5 border radius values are usually sufficient.",[432,5288,5289,5292,5293,957,5295,957,5297,5300],{},[435,5290,5291],{},"Use semantic names",": Choose names that describe the size or use case (e.g., ",[467,5294,952],{},[467,5296,960],{},[467,5298,5299],{},"lg",") rather than specific pixel values.",[432,5302,5303,5306,5307,5309,5310,5312],{},[435,5304,5305],{},"Integrate with scales",": Combine ",[467,5308,475],{}," with ",[467,5311,995],{}," for mathematically harmonious border radius systems that scale proportionally.",[432,5314,5315,5318],{},[435,5316,5317],{},"Maintain proportional relationships",": Larger components should generally have larger border radius values to maintain visual harmony.",[432,5320,5321,5324],{},[435,5322,5323],{},"Coordinate with spacing",": Consider using the same scale ratio for border radius as you use for spacing to maintain visual consistency across your design system.",[432,5326,5327,5330],{},[435,5328,5329],{},"Consider your brand",": Sharp corners (0) feel modern and technical, while rounded corners feel friendly and approachable. Very large radii create a playful, organic feel.",[432,5332,5333,5340,5341,5343,5344,5347],{},[435,5334,5335,5336,5339],{},"Use ",[467,5337,5338],{},"full"," for circular elements",": Set border radius to ",[467,5342,769],{}," or ",[467,5345,5346],{},"50%"," for perfectly circular avatars, badges, and icons.",[432,5349,5350,5353],{},[435,5351,5352],{},"Be consistent with component types",": All buttons should use the same radius, all cards should use the same radius, etc.",[432,5355,5356,5359],{},[435,5357,5358],{},"Test with borders",": Border radius is most noticeable on elements with borders or backgrounds—test your values in context.",[432,5361,5362,5365],{},[435,5363,5364],{},"Mind the container size",": Very large border radius values can look awkward on small elements. The radius should never exceed half the element's smallest dimension for a true rounded corner effect.",[5367,5368,5369,5372,5373,5376],"note",{},[435,5370,5371],{},"Good to know:"," We use ",[467,5374,5375],{},"as const"," to ensure the object is treated as a constant type. This helps TypeScript infer the return type of the composables and provides better type safety and autocomplete support.",[414,5378,5380],{"id":5379},"faq","FAQ",[5382,5383,5384,5404,5408,5423,5438,5449,5453,5473],"accordion",{},[5385,5386,5389,5390,5393,5394,5397,5398,5400,5401,5403],"accordion-item",{"icon":5387,"label":5388},"i-lucide-circle-help","What's the difference between border radius values in rem vs px?","Using ",[467,5391,5392],{},"rem"," units makes border radius scale with the user's font size preferences, which can be beneficial for accessibility. However, ",[467,5395,5396],{},"px"," units provide more predictable results across different font size settings. For most applications, ",[467,5399,5392],{}," is recommended for consistency with your spacing and typography systems, but ",[467,5402,5396],{}," is perfectly acceptable if you prefer absolute control.",[5385,5405,5407],{"icon":5387,"label":5406},"Should I use the same scale for border radius as spacing?","It's often beneficial to use the same scale ratio (like Minor Third 1.2) for both border radius and spacing. This creates visual harmony where corner roundness feels proportionally connected to the spacing around elements. However, border radius typically uses a smaller base value than spacing since corners are measured differently than gaps.",[5385,5409,5411,5412,5343,5414,5416,5417,5419,5420,5422],{"icon":5387,"label":5410},"Should I use percentage or pixel values for circular elements?","For perfectly circular elements (like avatars), either ",[467,5413,5346],{},[467,5415,769],{}," works. The ",[467,5418,5346],{}," approach is more semantic, but ",[467,5421,769],{}," is a common convention that ensures the element appears circular regardless of its size. Both approaches are valid—choose what feels more intuitive to your team.",[5385,5424,5426,5428,5429,5431,5432,5434,5435,5437],{"icon":5387,"label":5425},"What's the difference between useBorderRadiusDesignTokens and useMultiplierDesignTokens?",[467,5427,475],{}," creates border radius variables from explicit values you provide. ",[467,5430,995],{}," automatically generates border radius variables by multiplying a base border radius variable by scale powers. Use ",[467,5433,475],{}," for manual control or ",[467,5436,995],{}," for systematic, scale-based corner radius progressions.",[5385,5439,5441,5442,5445,5446,2767],{"icon":5387,"label":5440},"Can I animate border radius changes?","Yes! Border radius is animatable. Add a ",[467,5443,5444],{},"transition"," property to smoothly animate between different border radius values on hover or other state changes: ",[467,5447,5448],{},"transition: 'border-radius 0.2s ease'",[5385,5450,5452],{"icon":5387,"label":5451},"Should I define separate border radius values for each component?","It depends on your design system's complexity. For simple systems, 3-5 size-based values (sm, md, lg) work well. For complex systems with many component types, component-specific values (button, card, modal) can make usage more semantic and easier to maintain. Start simple and add specificity as needed.",[5385,5454,5456,5457,5459,5460,957,5463,957,5466,957,5469,5472],{"icon":5387,"label":5455},"What if I want different radius values for different corners?","You can compose border radius values using the ",[467,5458,834],{}," template function or setting ",[467,5461,5462],{},"borderTopLeftRadius",[467,5464,5465],{},"borderTopRightRadius",[467,5467,5468],{},"borderBottomRightRadius",[467,5470,5471],{},"borderBottomLeftRadius"," individually.",[5385,5474,5476],{"icon":5387,"label":5475},"Should border radius increase with component size?","Generally, yes. Larger surfaces (modals, cards) benefit from larger border radius values to maintain visual proportion. Small components (badges, small buttons) look better with tighter corner radii. This creates a harmonious scale where the roundness feels appropriate to the element's size.",[5478,5479,5480],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .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 .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":492,"searchDepth":533,"depth":533,"links":5482},[5483,5484,5485,5486,5491,5492,5496,5497],{"id":416,"depth":533,"text":64},{"id":423,"depth":533,"text":424},{"id":465,"depth":533,"text":469},{"id":982,"depth":533,"text":5487,"children":5488},"Integration with useMultiplierDesignTokens",[5489,5490],{"id":1740,"depth":556,"text":1741},{"id":2012,"depth":556,"text":2013},{"id":2316,"depth":533,"text":2317},{"id":2892,"depth":533,"text":2893,"children":5493},[5494,5495],{"id":2896,"depth":556,"text":2897},{"id":4215,"depth":556,"text":4216},{"id":5277,"depth":533,"text":5278},{"id":5379,"depth":533,"text":5380},"Create and manage border radius design tokens with CSS variables for consistent rounded corners and curved edges across your application.",null,{},{"title":165,"icon":7},{"title":409,"description":5498},{"loc":166},"0mKAbVrLXUXPOBmRcZc25TFXyqDzF2V6dTpld6qQ7XM",[5506,5508],{"title":156,"path":157,"stem":158,"description":5507,"icon":159,"children":-1},"Quickly bootstrap a complete design token system with sensible defaults using the useDesignTokensPreset composable.",{"title":169,"path":170,"stem":171,"description":5509,"icon":7,"children":-1},"Create and manage border design tokens with CSS variables for consistent border styles, widths, and colors across your application.",1776621132647]