[{"data":1,"prerenderedAt":4149},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens":407,"-docs-theme-design-tokens-surround":4144},{"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":4136,"extension":4137,"links":4138,"meta":4139,"navigation":4140,"path":151,"seo":4141,"sitemap":4142,"stem":152,"__hash__":4143},"docs_theme/docs/theme/design-tokens/00.index.md","Design Tokens Overview",{"type":411,"value":412,"toc":4116},"minimark",[413,417,420,425,428,469,473,476,862,865,868,872,875,880,890,1237,1243,1246,1249,1253,1279,1591,1596,1599,1602,1606,1616,1752,1757,1760,1763,1767,1777,2051,2056,2059,2062,2066,2100,2274,2279,2282,2285,2289,2299,2396,2401,2408,2415,2419,2448,2904,2909,2912,2915,2919,2945,3211,3216,3219,3222,3226,3236,3343,3348,3351,3354,3358,3410,3614,3619,3622,3625,3629,3639,3765,3770,3774,3990,3994,4058,4062,4065,4109,4112],[414,415,416],"p",{},"Design tokens are the foundation of any robust design system. They represent the visual design atoms of your application — the smallest, indivisible design decisions like colors, spacing values, typography scales, and more.",[414,418,419],{},"Styleframe's design token composables make it easy to create, manage, and scale these foundational elements with full type safety and minimal code.",[421,422,424],"h2",{"id":423},"why-use-design-token-composables","Why Use Design Token Composables?",[414,426,427],{},"Styleframe's approach to design tokens offers several key advantages:",[429,430,431,439,445,451,457,463],"ul",{},[432,433,434,438],"li",{},[435,436,437],"strong",{},"Automatic Variant Generation",": Define base values and automatically generate tints, shades, and scale-based variants",[432,440,441,444],{},[435,442,443],{},"Mathematical Consistency",": Use proven ratios from music theory and mathematics for harmonious proportions",[432,446,447,450],{},[435,448,449],{},"Type Safety",": Full TypeScript support with auto-complete for all design token values",[432,452,453,456],{},[435,454,455],{},"Flexible Theming",": Override any token to create themes without rewriting your entire design system",[432,458,459,462],{},[435,460,461],{},"Modern CSS",": Leverages OKLCH color space, CSS custom properties, and relative color syntax",[432,464,465,468],{},[435,466,467],{},"Composable",": Mix and match composables to build exactly the design system you need",[421,470,472],{"id":471},"quick-start","Quick Start",[414,474,475],{},"Here's a minimal example showing how design tokens work together:",[477,478,484],"pre",{"className":479,"code":480,"filename":481,"language":482,"meta":483,"style":483},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useColorDesignTokens, useSpacingDesignTokens, useFontSizeDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { ref, selector } = s;\n\n// Define base design tokens\nconst { colorPrimary } = useColorDesignTokens(s, { primary: '#006cff' } as const);\nconst { spacing } = useSpacingDesignTokens(s, { default: '1rem' } as const);\nconst { fontSize } = useFontSizeDesignTokens(s, { default: '1rem' } as const);\n\n// Use in your styles\nselector('.button', {\n    backgroundColor: ref(colorPrimary),\n    padding: ref(spacing),\n    fontSize: ref(fontSize),\n});\n\nexport default s;\n","styleframe.config.ts","ts","",[485,486,487,523,557,563,584,610,615,622,672,716,758,763,769,790,806,821,836,845,850],"code",{"__ignoreMap":483},[488,489,492,496,500,504,507,510,513,517,520],"span",{"class":490,"line":491},"line",1,[488,493,495],{"class":494},"s7zQu","import",[488,497,499],{"class":498},"sMK4o"," {",[488,501,503],{"class":502},"sTEyZ"," styleframe",[488,505,506],{"class":498}," }",[488,508,509],{"class":494}," from",[488,511,512],{"class":498}," '",[488,514,516],{"class":515},"sfazB","styleframe",[488,518,519],{"class":498},"'",[488,521,522],{"class":498},";\n",[488,524,526,528,530,533,536,539,541,544,546,548,550,553,555],{"class":490,"line":525},2,[488,527,495],{"class":494},[488,529,499],{"class":498},[488,531,532],{"class":502}," useColorDesignTokens",[488,534,535],{"class":498},",",[488,537,538],{"class":502}," useSpacingDesignTokens",[488,540,535],{"class":498},[488,542,543],{"class":502}," useFontSizeDesignTokens",[488,545,506],{"class":498},[488,547,509],{"class":494},[488,549,512],{"class":498},[488,551,552],{"class":515},"@styleframe/theme",[488,554,519],{"class":498},[488,556,522],{"class":498},[488,558,560],{"class":490,"line":559},3,[488,561,562],{"emptyLinePlaceholder":206},"\n",[488,564,566,570,573,576,579,582],{"class":490,"line":565},4,[488,567,569],{"class":568},"spNyl","const",[488,571,572],{"class":502}," s ",[488,574,575],{"class":498},"=",[488,577,503],{"class":578},"s2Zo4",[488,580,581],{"class":502},"()",[488,583,522],{"class":498},[488,585,587,589,591,594,596,599,602,605,608],{"class":490,"line":586},5,[488,588,569],{"class":568},[488,590,499],{"class":498},[488,592,593],{"class":502}," ref",[488,595,535],{"class":498},[488,597,598],{"class":502}," selector ",[488,600,601],{"class":498},"}",[488,603,604],{"class":498}," =",[488,606,607],{"class":502}," s",[488,609,522],{"class":498},[488,611,613],{"class":490,"line":612},6,[488,614,562],{"emptyLinePlaceholder":206},[488,616,618],{"class":490,"line":617},7,[488,619,621],{"class":620},"sHwdD","// Define base design tokens\n",[488,623,625,627,629,632,634,636,638,641,643,645,649,652,654,657,659,661,664,667,670],{"class":490,"line":624},8,[488,626,569],{"class":568},[488,628,499],{"class":498},[488,630,631],{"class":502}," colorPrimary ",[488,633,601],{"class":498},[488,635,604],{"class":498},[488,637,532],{"class":578},[488,639,640],{"class":502},"(s",[488,642,535],{"class":498},[488,644,499],{"class":498},[488,646,648],{"class":647},"swJcz"," primary",[488,650,651],{"class":498},":",[488,653,512],{"class":498},[488,655,656],{"class":515},"#006cff",[488,658,519],{"class":498},[488,660,506],{"class":498},[488,662,663],{"class":494}," as",[488,665,666],{"class":568}," const",[488,668,669],{"class":502},")",[488,671,522],{"class":498},[488,673,675,677,679,682,684,686,688,690,692,694,697,699,701,704,706,708,710,712,714],{"class":490,"line":674},9,[488,676,569],{"class":568},[488,678,499],{"class":498},[488,680,681],{"class":502}," spacing ",[488,683,601],{"class":498},[488,685,604],{"class":498},[488,687,538],{"class":578},[488,689,640],{"class":502},[488,691,535],{"class":498},[488,693,499],{"class":498},[488,695,696],{"class":647}," default",[488,698,651],{"class":498},[488,700,512],{"class":498},[488,702,703],{"class":515},"1rem",[488,705,519],{"class":498},[488,707,506],{"class":498},[488,709,663],{"class":494},[488,711,666],{"class":568},[488,713,669],{"class":502},[488,715,522],{"class":498},[488,717,719,721,723,726,728,730,732,734,736,738,740,742,744,746,748,750,752,754,756],{"class":490,"line":718},10,[488,720,569],{"class":568},[488,722,499],{"class":498},[488,724,725],{"class":502}," fontSize ",[488,727,601],{"class":498},[488,729,604],{"class":498},[488,731,543],{"class":578},[488,733,640],{"class":502},[488,735,535],{"class":498},[488,737,499],{"class":498},[488,739,696],{"class":647},[488,741,651],{"class":498},[488,743,512],{"class":498},[488,745,703],{"class":515},[488,747,519],{"class":498},[488,749,506],{"class":498},[488,751,663],{"class":494},[488,753,666],{"class":568},[488,755,669],{"class":502},[488,757,522],{"class":498},[488,759,761],{"class":490,"line":760},11,[488,762,562],{"emptyLinePlaceholder":206},[488,764,766],{"class":490,"line":765},12,[488,767,768],{"class":620},"// Use in your styles\n",[488,770,772,775,778,780,783,785,787],{"class":490,"line":771},13,[488,773,774],{"class":578},"selector",[488,776,777],{"class":502},"(",[488,779,519],{"class":498},[488,781,782],{"class":515},".button",[488,784,519],{"class":498},[488,786,535],{"class":498},[488,788,789],{"class":498}," {\n",[488,791,793,796,798,800,803],{"class":490,"line":792},14,[488,794,795],{"class":647},"    backgroundColor",[488,797,651],{"class":498},[488,799,593],{"class":578},[488,801,802],{"class":502},"(colorPrimary)",[488,804,805],{"class":498},",\n",[488,807,809,812,814,816,819],{"class":490,"line":808},15,[488,810,811],{"class":647},"    padding",[488,813,651],{"class":498},[488,815,593],{"class":578},[488,817,818],{"class":502},"(spacing)",[488,820,805],{"class":498},[488,822,824,827,829,831,834],{"class":490,"line":823},16,[488,825,826],{"class":647},"    fontSize",[488,828,651],{"class":498},[488,830,593],{"class":578},[488,832,833],{"class":502},"(fontSize)",[488,835,805],{"class":498},[488,837,839,841,843],{"class":490,"line":838},17,[488,840,601],{"class":498},[488,842,669],{"class":502},[488,844,522],{"class":498},[488,846,848],{"class":490,"line":847},18,[488,849,562],{"emptyLinePlaceholder":206},[488,851,853,856,858,860],{"class":490,"line":852},19,[488,854,855],{"class":494},"export",[488,857,696],{"class":494},[488,859,607],{"class":502},[488,861,522],{"class":498},[421,863,132],{"id":864},"composables",[414,866,867],{},"These composables form the core of your design system, providing the base values that other systems build upon.",[869,870,165],"h3",{"id":871},"border-radiuses",[414,873,874],{},"Create consistent rounded corner systems with mathematically harmonious scales.",[414,876,877],{},[435,878,879],{},"Available composables:",[429,881,882],{},[432,883,884,889],{},[435,885,886],{},[485,887,888],{},"useBorderRadiusDesignTokens()",": Define border radius values for rounded corners and circular elements",[477,891,893],{"className":479,"code":892,"filename":481,"language":482,"meta":483,"style":483},"import { styleframe } from 'styleframe';\nimport { useBorderRadiusDesignTokens, useScaleDesignTokens, useScalePowersDesignTokens, useMultiplierDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Define base border radius\nconst { \n    borderRadius,\n    borderRadiusFull,\n} = useBorderRadiusDesignTokens(s, { \n    default: '0.375rem',\n    full: '9999px',        // Circular\n});\n\n// Or create a scale-based system for harmonious progressions\nconst { scale } = useScaleDesignTokens(s);\nconst scalePowers = useScalePowersDesignTokens(s, scale);\n\nconst {\n    borderRadiusSm,\n    borderRadiusMd,\n    borderRadiusLg,\n} = useMultiplierDesignTokens(s, borderRadius, {\n    sm: scalePowers[-1],   // Smaller corners\n    md: scalePowers[0],    // Base corners\n    lg: scalePowers[1],    // Larger corners\n});\n",[485,894,895,915,951,955,969,973,978,987,994,1001,1017,1033,1052,1060,1064,1069,1089,1109,1113,1119,1127,1135,1143,1163,1189,1209,1228],{"__ignoreMap":483},[488,896,897,899,901,903,905,907,909,911,913],{"class":490,"line":491},[488,898,495],{"class":494},[488,900,499],{"class":498},[488,902,503],{"class":502},[488,904,506],{"class":498},[488,906,509],{"class":494},[488,908,512],{"class":498},[488,910,516],{"class":515},[488,912,519],{"class":498},[488,914,522],{"class":498},[488,916,917,919,921,924,926,929,931,934,936,939,941,943,945,947,949],{"class":490,"line":525},[488,918,495],{"class":494},[488,920,499],{"class":498},[488,922,923],{"class":502}," useBorderRadiusDesignTokens",[488,925,535],{"class":498},[488,927,928],{"class":502}," useScaleDesignTokens",[488,930,535],{"class":498},[488,932,933],{"class":502}," useScalePowersDesignTokens",[488,935,535],{"class":498},[488,937,938],{"class":502}," useMultiplierDesignTokens",[488,940,506],{"class":498},[488,942,509],{"class":494},[488,944,512],{"class":498},[488,946,552],{"class":515},[488,948,519],{"class":498},[488,950,522],{"class":498},[488,952,953],{"class":490,"line":559},[488,954,562],{"emptyLinePlaceholder":206},[488,956,957,959,961,963,965,967],{"class":490,"line":565},[488,958,569],{"class":568},[488,960,572],{"class":502},[488,962,575],{"class":498},[488,964,503],{"class":578},[488,966,581],{"class":502},[488,968,522],{"class":498},[488,970,971],{"class":490,"line":586},[488,972,562],{"emptyLinePlaceholder":206},[488,974,975],{"class":490,"line":612},[488,976,977],{"class":620},"// Define base border radius\n",[488,979,980,982,984],{"class":490,"line":617},[488,981,569],{"class":568},[488,983,499],{"class":498},[488,985,986],{"class":502}," \n",[488,988,989,992],{"class":490,"line":624},[488,990,991],{"class":502},"    borderRadius",[488,993,805],{"class":498},[488,995,996,999],{"class":490,"line":674},[488,997,998],{"class":502},"    borderRadiusFull",[488,1000,805],{"class":498},[488,1002,1003,1005,1007,1009,1011,1013,1015],{"class":490,"line":718},[488,1004,601],{"class":498},[488,1006,604],{"class":498},[488,1008,923],{"class":578},[488,1010,640],{"class":502},[488,1012,535],{"class":498},[488,1014,499],{"class":498},[488,1016,986],{"class":502},[488,1018,1019,1022,1024,1026,1029,1031],{"class":490,"line":760},[488,1020,1021],{"class":647},"    default",[488,1023,651],{"class":498},[488,1025,512],{"class":498},[488,1027,1028],{"class":515},"0.375rem",[488,1030,519],{"class":498},[488,1032,805],{"class":498},[488,1034,1035,1038,1040,1042,1045,1047,1049],{"class":490,"line":765},[488,1036,1037],{"class":647},"    full",[488,1039,651],{"class":498},[488,1041,512],{"class":498},[488,1043,1044],{"class":515},"9999px",[488,1046,519],{"class":498},[488,1048,535],{"class":498},[488,1050,1051],{"class":620},"        // Circular\n",[488,1053,1054,1056,1058],{"class":490,"line":771},[488,1055,601],{"class":498},[488,1057,669],{"class":502},[488,1059,522],{"class":498},[488,1061,1062],{"class":490,"line":792},[488,1063,562],{"emptyLinePlaceholder":206},[488,1065,1066],{"class":490,"line":808},[488,1067,1068],{"class":620},"// Or create a scale-based system for harmonious progressions\n",[488,1070,1071,1073,1075,1078,1080,1082,1084,1087],{"class":490,"line":823},[488,1072,569],{"class":568},[488,1074,499],{"class":498},[488,1076,1077],{"class":502}," scale ",[488,1079,601],{"class":498},[488,1081,604],{"class":498},[488,1083,928],{"class":578},[488,1085,1086],{"class":502},"(s)",[488,1088,522],{"class":498},[488,1090,1091,1093,1096,1098,1100,1102,1104,1107],{"class":490,"line":838},[488,1092,569],{"class":568},[488,1094,1095],{"class":502}," scalePowers ",[488,1097,575],{"class":498},[488,1099,933],{"class":578},[488,1101,640],{"class":502},[488,1103,535],{"class":498},[488,1105,1106],{"class":502}," scale)",[488,1108,522],{"class":498},[488,1110,1111],{"class":490,"line":847},[488,1112,562],{"emptyLinePlaceholder":206},[488,1114,1115,1117],{"class":490,"line":852},[488,1116,569],{"class":568},[488,1118,789],{"class":498},[488,1120,1122,1125],{"class":490,"line":1121},20,[488,1123,1124],{"class":502},"    borderRadiusSm",[488,1126,805],{"class":498},[488,1128,1130,1133],{"class":490,"line":1129},21,[488,1131,1132],{"class":502},"    borderRadiusMd",[488,1134,805],{"class":498},[488,1136,1138,1141],{"class":490,"line":1137},22,[488,1139,1140],{"class":502},"    borderRadiusLg",[488,1142,805],{"class":498},[488,1144,1146,1148,1150,1152,1154,1156,1159,1161],{"class":490,"line":1145},23,[488,1147,601],{"class":498},[488,1149,604],{"class":498},[488,1151,938],{"class":578},[488,1153,640],{"class":502},[488,1155,535],{"class":498},[488,1157,1158],{"class":502}," borderRadius",[488,1160,535],{"class":498},[488,1162,789],{"class":498},[488,1164,1166,1169,1171,1174,1177,1181,1184,1186],{"class":490,"line":1165},24,[488,1167,1168],{"class":647},"    sm",[488,1170,651],{"class":498},[488,1172,1173],{"class":502}," scalePowers[",[488,1175,1176],{"class":498},"-",[488,1178,1180],{"class":1179},"sbssI","1",[488,1182,1183],{"class":502},"]",[488,1185,535],{"class":498},[488,1187,1188],{"class":620},"   // Smaller corners\n",[488,1190,1192,1195,1197,1199,1202,1204,1206],{"class":490,"line":1191},25,[488,1193,1194],{"class":647},"    md",[488,1196,651],{"class":498},[488,1198,1173],{"class":502},[488,1200,1201],{"class":1179},"0",[488,1203,1183],{"class":502},[488,1205,535],{"class":498},[488,1207,1208],{"class":620},"    // Base corners\n",[488,1210,1212,1215,1217,1219,1221,1223,1225],{"class":490,"line":1211},26,[488,1213,1214],{"class":647},"    lg",[488,1216,651],{"class":498},[488,1218,1173],{"class":502},[488,1220,1180],{"class":1179},[488,1222,1183],{"class":502},[488,1224,535],{"class":498},[488,1226,1227],{"class":620},"    // Larger corners\n",[488,1229,1231,1233,1235],{"class":490,"line":1230},27,[488,1232,601],{"class":498},[488,1234,669],{"class":502},[488,1236,522],{"class":498},[414,1238,1239],{},[1240,1241,1242],"a",{"href":166},"Learn more about Border Radiuses →",[869,1244,169],{"id":1245},"borders",[414,1247,1248],{},"Create comprehensive border systems with styles, widths, and colors.",[414,1250,1251],{},[435,1252,879],{},[429,1254,1255,1263,1271],{},[432,1256,1257,1262],{},[435,1258,1259],{},[485,1260,1261],{},"useBorderStyleDesignTokens()",": Define border styles (solid, dashed, dotted, etc.)",[432,1264,1265,1270],{},[435,1266,1267],{},[485,1268,1269],{},"useBorderWidthDesignTokens()",": Create border width values (thin, medium, thick)",[432,1272,1273,1278],{},[435,1274,1275],{},[485,1276,1277],{},"useBorderColorDesignTokens()",": Define semantic border colors that reference your color system",[477,1280,1282],{"className":479,"code":1281,"filename":481,"language":482,"meta":483,"style":483},"import { styleframe } from 'styleframe';\nimport { useBorderStyleDesignTokens, useBorderWidthDesignTokens, useBorderColorDesignTokens, useColorDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { ref } = s;\n\n// Define colors first\nconst { colorPrimary } = useColorDesignTokens(s, { primary: '#006cff' } as const);\nconst { colorGray300 } = useColorDesignTokens(s, { gray300: '#d1d5db' } as const);\n\nconst { borderStyle, borderStyleDashed } = useBorderStyleDesignTokens(s);\nconst { borderWidth, borderWidthThin } = useBorderWidthDesignTokens(s);\n\n// Border colors that reference your color system\nconst { borderColor, borderColorPrimary } = useBorderColorDesignTokens(s, {\n    default: ref(colorGray300),\n    primary: ref(colorPrimary),\n} as const);\n",[485,1283,1284,1304,1339,1343,1357,1374,1378,1383,1423,1466,1470,1494,1518,1522,1527,1553,1566,1579],{"__ignoreMap":483},[488,1285,1286,1288,1290,1292,1294,1296,1298,1300,1302],{"class":490,"line":491},[488,1287,495],{"class":494},[488,1289,499],{"class":498},[488,1291,503],{"class":502},[488,1293,506],{"class":498},[488,1295,509],{"class":494},[488,1297,512],{"class":498},[488,1299,516],{"class":515},[488,1301,519],{"class":498},[488,1303,522],{"class":498},[488,1305,1306,1308,1310,1313,1315,1318,1320,1323,1325,1327,1329,1331,1333,1335,1337],{"class":490,"line":525},[488,1307,495],{"class":494},[488,1309,499],{"class":498},[488,1311,1312],{"class":502}," useBorderStyleDesignTokens",[488,1314,535],{"class":498},[488,1316,1317],{"class":502}," useBorderWidthDesignTokens",[488,1319,535],{"class":498},[488,1321,1322],{"class":502}," useBorderColorDesignTokens",[488,1324,535],{"class":498},[488,1326,532],{"class":502},[488,1328,506],{"class":498},[488,1330,509],{"class":494},[488,1332,512],{"class":498},[488,1334,552],{"class":515},[488,1336,519],{"class":498},[488,1338,522],{"class":498},[488,1340,1341],{"class":490,"line":559},[488,1342,562],{"emptyLinePlaceholder":206},[488,1344,1345,1347,1349,1351,1353,1355],{"class":490,"line":565},[488,1346,569],{"class":568},[488,1348,572],{"class":502},[488,1350,575],{"class":498},[488,1352,503],{"class":578},[488,1354,581],{"class":502},[488,1356,522],{"class":498},[488,1358,1359,1361,1363,1366,1368,1370,1372],{"class":490,"line":586},[488,1360,569],{"class":568},[488,1362,499],{"class":498},[488,1364,1365],{"class":502}," ref ",[488,1367,601],{"class":498},[488,1369,604],{"class":498},[488,1371,607],{"class":502},[488,1373,522],{"class":498},[488,1375,1376],{"class":490,"line":612},[488,1377,562],{"emptyLinePlaceholder":206},[488,1379,1380],{"class":490,"line":617},[488,1381,1382],{"class":620},"// Define colors first\n",[488,1384,1385,1387,1389,1391,1393,1395,1397,1399,1401,1403,1405,1407,1409,1411,1413,1415,1417,1419,1421],{"class":490,"line":624},[488,1386,569],{"class":568},[488,1388,499],{"class":498},[488,1390,631],{"class":502},[488,1392,601],{"class":498},[488,1394,604],{"class":498},[488,1396,532],{"class":578},[488,1398,640],{"class":502},[488,1400,535],{"class":498},[488,1402,499],{"class":498},[488,1404,648],{"class":647},[488,1406,651],{"class":498},[488,1408,512],{"class":498},[488,1410,656],{"class":515},[488,1412,519],{"class":498},[488,1414,506],{"class":498},[488,1416,663],{"class":494},[488,1418,666],{"class":568},[488,1420,669],{"class":502},[488,1422,522],{"class":498},[488,1424,1425,1427,1429,1432,1434,1436,1438,1440,1442,1444,1447,1449,1451,1454,1456,1458,1460,1462,1464],{"class":490,"line":674},[488,1426,569],{"class":568},[488,1428,499],{"class":498},[488,1430,1431],{"class":502}," colorGray300 ",[488,1433,601],{"class":498},[488,1435,604],{"class":498},[488,1437,532],{"class":578},[488,1439,640],{"class":502},[488,1441,535],{"class":498},[488,1443,499],{"class":498},[488,1445,1446],{"class":647}," gray300",[488,1448,651],{"class":498},[488,1450,512],{"class":498},[488,1452,1453],{"class":515},"#d1d5db",[488,1455,519],{"class":498},[488,1457,506],{"class":498},[488,1459,663],{"class":494},[488,1461,666],{"class":568},[488,1463,669],{"class":502},[488,1465,522],{"class":498},[488,1467,1468],{"class":490,"line":718},[488,1469,562],{"emptyLinePlaceholder":206},[488,1471,1472,1474,1476,1479,1481,1484,1486,1488,1490,1492],{"class":490,"line":760},[488,1473,569],{"class":568},[488,1475,499],{"class":498},[488,1477,1478],{"class":502}," borderStyle",[488,1480,535],{"class":498},[488,1482,1483],{"class":502}," borderStyleDashed ",[488,1485,601],{"class":498},[488,1487,604],{"class":498},[488,1489,1312],{"class":578},[488,1491,1086],{"class":502},[488,1493,522],{"class":498},[488,1495,1496,1498,1500,1503,1505,1508,1510,1512,1514,1516],{"class":490,"line":765},[488,1497,569],{"class":568},[488,1499,499],{"class":498},[488,1501,1502],{"class":502}," borderWidth",[488,1504,535],{"class":498},[488,1506,1507],{"class":502}," borderWidthThin ",[488,1509,601],{"class":498},[488,1511,604],{"class":498},[488,1513,1317],{"class":578},[488,1515,1086],{"class":502},[488,1517,522],{"class":498},[488,1519,1520],{"class":490,"line":771},[488,1521,562],{"emptyLinePlaceholder":206},[488,1523,1524],{"class":490,"line":792},[488,1525,1526],{"class":620},"// Border colors that reference your color system\n",[488,1528,1529,1531,1533,1536,1538,1541,1543,1545,1547,1549,1551],{"class":490,"line":808},[488,1530,569],{"class":568},[488,1532,499],{"class":498},[488,1534,1535],{"class":502}," borderColor",[488,1537,535],{"class":498},[488,1539,1540],{"class":502}," borderColorPrimary ",[488,1542,601],{"class":498},[488,1544,604],{"class":498},[488,1546,1322],{"class":578},[488,1548,640],{"class":502},[488,1550,535],{"class":498},[488,1552,789],{"class":498},[488,1554,1555,1557,1559,1561,1564],{"class":490,"line":823},[488,1556,1021],{"class":647},[488,1558,651],{"class":498},[488,1560,593],{"class":578},[488,1562,1563],{"class":502},"(colorGray300)",[488,1565,805],{"class":498},[488,1567,1568,1571,1573,1575,1577],{"class":490,"line":838},[488,1569,1570],{"class":647},"    primary",[488,1572,651],{"class":498},[488,1574,593],{"class":578},[488,1576,802],{"class":502},[488,1578,805],{"class":498},[488,1580,1581,1583,1585,1587,1589],{"class":490,"line":847},[488,1582,601],{"class":498},[488,1584,663],{"class":494},[488,1586,666],{"class":568},[488,1588,669],{"class":502},[488,1590,522],{"class":498},[414,1592,1593],{},[1240,1594,1595],{"href":170},"Learn more about Borders →",[869,1597,173],{"id":1598},"box-shadows",[414,1600,1601],{},"Define elevation systems using carefully crafted shadow values for visual hierarchy.",[414,1603,1604],{},[435,1605,879],{},[429,1607,1608],{},[432,1609,1610,1615],{},[435,1611,1612],{},[485,1613,1614],{},"useBoxShadowDesignTokens()",": Create box shadow variables for different elevation levels",[477,1617,1619],{"className":479,"code":1618,"filename":481,"language":482,"meta":483,"style":483},"import { styleframe } from 'styleframe';\nimport { useBoxShadowDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst {\n    boxShadow,     // Default shadow\n    boxShadowSm,   // Subtle elevation\n    boxShadowMd,   // Standard elevation\n    boxShadowLg,   // High elevation\n    boxShadowXl,   // Maximum elevation\n} = useBoxShadowDesignTokens(s);\n",[485,1620,1621,1641,1662,1666,1680,1684,1690,1700,1710,1720,1730,1740],{"__ignoreMap":483},[488,1622,1623,1625,1627,1629,1631,1633,1635,1637,1639],{"class":490,"line":491},[488,1624,495],{"class":494},[488,1626,499],{"class":498},[488,1628,503],{"class":502},[488,1630,506],{"class":498},[488,1632,509],{"class":494},[488,1634,512],{"class":498},[488,1636,516],{"class":515},[488,1638,519],{"class":498},[488,1640,522],{"class":498},[488,1642,1643,1645,1647,1650,1652,1654,1656,1658,1660],{"class":490,"line":525},[488,1644,495],{"class":494},[488,1646,499],{"class":498},[488,1648,1649],{"class":502}," useBoxShadowDesignTokens",[488,1651,506],{"class":498},[488,1653,509],{"class":494},[488,1655,512],{"class":498},[488,1657,552],{"class":515},[488,1659,519],{"class":498},[488,1661,522],{"class":498},[488,1663,1664],{"class":490,"line":559},[488,1665,562],{"emptyLinePlaceholder":206},[488,1667,1668,1670,1672,1674,1676,1678],{"class":490,"line":565},[488,1669,569],{"class":568},[488,1671,572],{"class":502},[488,1673,575],{"class":498},[488,1675,503],{"class":578},[488,1677,581],{"class":502},[488,1679,522],{"class":498},[488,1681,1682],{"class":490,"line":586},[488,1683,562],{"emptyLinePlaceholder":206},[488,1685,1686,1688],{"class":490,"line":612},[488,1687,569],{"class":568},[488,1689,789],{"class":498},[488,1691,1692,1695,1697],{"class":490,"line":617},[488,1693,1694],{"class":502},"    boxShadow",[488,1696,535],{"class":498},[488,1698,1699],{"class":620},"     // Default shadow\n",[488,1701,1702,1705,1707],{"class":490,"line":624},[488,1703,1704],{"class":502},"    boxShadowSm",[488,1706,535],{"class":498},[488,1708,1709],{"class":620},"   // Subtle elevation\n",[488,1711,1712,1715,1717],{"class":490,"line":674},[488,1713,1714],{"class":502},"    boxShadowMd",[488,1716,535],{"class":498},[488,1718,1719],{"class":620},"   // Standard elevation\n",[488,1721,1722,1725,1727],{"class":490,"line":718},[488,1723,1724],{"class":502},"    boxShadowLg",[488,1726,535],{"class":498},[488,1728,1729],{"class":620},"   // High elevation\n",[488,1731,1732,1735,1737],{"class":490,"line":760},[488,1733,1734],{"class":502},"    boxShadowXl",[488,1736,535],{"class":498},[488,1738,1739],{"class":620},"   // Maximum elevation\n",[488,1741,1742,1744,1746,1748,1750],{"class":490,"line":765},[488,1743,601],{"class":498},[488,1745,604],{"class":498},[488,1747,1649],{"class":578},[488,1749,1086],{"class":502},[488,1751,522],{"class":498},[414,1753,1754],{},[1240,1755,1756],{"href":174},"Learn more about Box Shadows →",[869,1758,177],{"id":1759},"breakpoints",[414,1761,1762],{},"Define responsive breakpoints for consistent media query behavior across your application.",[414,1764,1765],{},[435,1766,879],{},[429,1768,1769],{},[432,1770,1771,1776],{},[435,1772,1773],{},[485,1774,1775],{},"useBreakpointDesignTokens()",": Create breakpoint variables for media queries",[477,1778,1780],{"className":479,"code":1779,"filename":481,"language":482,"meta":483,"style":483},"import { styleframe } from 'styleframe';\nimport { useBreakpointDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { breakpointSm, breakpointMd, breakpointLg } = useBreakpointDesignTokens(s, {\n    sm: 576,\n    md: 768,\n    lg: 992,\n} as const);\n\nconst { media } = s;\n\n// Use in media queries\nmedia(`(min-width: ${breakpointMd.value}px)`, ({ selector }) => {\n    selector('.container', {\n        maxWidth: '960px',\n    });\n});\n",[485,1781,1782,1802,1823,1827,1841,1845,1876,1887,1898,1909,1921,1925,1942,1946,1951,2000,2018,2034,2043],{"__ignoreMap":483},[488,1783,1784,1786,1788,1790,1792,1794,1796,1798,1800],{"class":490,"line":491},[488,1785,495],{"class":494},[488,1787,499],{"class":498},[488,1789,503],{"class":502},[488,1791,506],{"class":498},[488,1793,509],{"class":494},[488,1795,512],{"class":498},[488,1797,516],{"class":515},[488,1799,519],{"class":498},[488,1801,522],{"class":498},[488,1803,1804,1806,1808,1811,1813,1815,1817,1819,1821],{"class":490,"line":525},[488,1805,495],{"class":494},[488,1807,499],{"class":498},[488,1809,1810],{"class":502}," useBreakpointDesignTokens",[488,1812,506],{"class":498},[488,1814,509],{"class":494},[488,1816,512],{"class":498},[488,1818,552],{"class":515},[488,1820,519],{"class":498},[488,1822,522],{"class":498},[488,1824,1825],{"class":490,"line":559},[488,1826,562],{"emptyLinePlaceholder":206},[488,1828,1829,1831,1833,1835,1837,1839],{"class":490,"line":565},[488,1830,569],{"class":568},[488,1832,572],{"class":502},[488,1834,575],{"class":498},[488,1836,503],{"class":578},[488,1838,581],{"class":502},[488,1840,522],{"class":498},[488,1842,1843],{"class":490,"line":586},[488,1844,562],{"emptyLinePlaceholder":206},[488,1846,1847,1849,1851,1854,1856,1859,1861,1864,1866,1868,1870,1872,1874],{"class":490,"line":612},[488,1848,569],{"class":568},[488,1850,499],{"class":498},[488,1852,1853],{"class":502}," breakpointSm",[488,1855,535],{"class":498},[488,1857,1858],{"class":502}," breakpointMd",[488,1860,535],{"class":498},[488,1862,1863],{"class":502}," breakpointLg ",[488,1865,601],{"class":498},[488,1867,604],{"class":498},[488,1869,1810],{"class":578},[488,1871,640],{"class":502},[488,1873,535],{"class":498},[488,1875,789],{"class":498},[488,1877,1878,1880,1882,1885],{"class":490,"line":617},[488,1879,1168],{"class":647},[488,1881,651],{"class":498},[488,1883,1884],{"class":1179}," 576",[488,1886,805],{"class":498},[488,1888,1889,1891,1893,1896],{"class":490,"line":624},[488,1890,1194],{"class":647},[488,1892,651],{"class":498},[488,1894,1895],{"class":1179}," 768",[488,1897,805],{"class":498},[488,1899,1900,1902,1904,1907],{"class":490,"line":674},[488,1901,1214],{"class":647},[488,1903,651],{"class":498},[488,1905,1906],{"class":1179}," 992",[488,1908,805],{"class":498},[488,1910,1911,1913,1915,1917,1919],{"class":490,"line":718},[488,1912,601],{"class":498},[488,1914,663],{"class":494},[488,1916,666],{"class":568},[488,1918,669],{"class":502},[488,1920,522],{"class":498},[488,1922,1923],{"class":490,"line":760},[488,1924,562],{"emptyLinePlaceholder":206},[488,1926,1927,1929,1931,1934,1936,1938,1940],{"class":490,"line":765},[488,1928,569],{"class":568},[488,1930,499],{"class":498},[488,1932,1933],{"class":502}," media ",[488,1935,601],{"class":498},[488,1937,604],{"class":498},[488,1939,607],{"class":502},[488,1941,522],{"class":498},[488,1943,1944],{"class":490,"line":771},[488,1945,562],{"emptyLinePlaceholder":206},[488,1947,1948],{"class":490,"line":792},[488,1949,1950],{"class":620},"// Use in media queries\n",[488,1952,1953,1956,1958,1961,1964,1967,1970,1973,1976,1978,1981,1983,1985,1988,1992,1995,1998],{"class":490,"line":808},[488,1954,1955],{"class":578},"media",[488,1957,777],{"class":502},[488,1959,1960],{"class":498},"`",[488,1962,1963],{"class":515},"(min-width: ",[488,1965,1966],{"class":498},"${",[488,1968,1969],{"class":502},"breakpointMd",[488,1971,1972],{"class":498},".",[488,1974,1975],{"class":502},"value",[488,1977,601],{"class":498},[488,1979,1980],{"class":515},"px)",[488,1982,1960],{"class":498},[488,1984,535],{"class":498},[488,1986,1987],{"class":498}," ({",[488,1989,1991],{"class":1990},"sHdIc"," selector",[488,1993,1994],{"class":498}," })",[488,1996,1997],{"class":568}," =>",[488,1999,789],{"class":498},[488,2001,2002,2005,2007,2009,2012,2014,2016],{"class":490,"line":823},[488,2003,2004],{"class":578},"    selector",[488,2006,777],{"class":647},[488,2008,519],{"class":498},[488,2010,2011],{"class":515},".container",[488,2013,519],{"class":498},[488,2015,535],{"class":498},[488,2017,789],{"class":498},[488,2019,2020,2023,2025,2027,2030,2032],{"class":490,"line":838},[488,2021,2022],{"class":647},"        maxWidth",[488,2024,651],{"class":498},[488,2026,512],{"class":498},[488,2028,2029],{"class":515},"960px",[488,2031,519],{"class":498},[488,2033,805],{"class":498},[488,2035,2036,2039,2041],{"class":490,"line":847},[488,2037,2038],{"class":498},"    }",[488,2040,669],{"class":647},[488,2042,522],{"class":498},[488,2044,2045,2047,2049],{"class":490,"line":852},[488,2046,601],{"class":498},[488,2048,669],{"class":502},[488,2050,522],{"class":498},[414,2052,2053],{},[1240,2054,2055],{"href":178},"Learn more about Breakpoints →",[869,2057,181],{"id":2058},"colors",[414,2060,2061],{},"Create comprehensive color systems with automatic variant generation using the OKLCH color space for perceptually uniform variations.",[414,2063,2064],{},[435,2065,879],{},[429,2067,2068,2076,2084,2092],{},[432,2069,2070,2075],{},[435,2071,2072],{},[485,2073,2074],{},"useColorDesignTokens()",": Define base colors from hex, rgb, or any CSS color format",[432,2077,2078,2083],{},[435,2079,2080],{},[485,2081,2082],{},"useColorLevelDesignTokens()",": Generate levels (e.g., 50, 100, 200...950)",[432,2085,2086,2091],{},[435,2087,2088],{},[485,2089,2090],{},"useColorShadeDesignTokens()",": Create darker variants by subtracting lightness",[432,2093,2094,2099],{},[435,2095,2096],{},[485,2097,2098],{},"useColorTintDesignTokens()",": Create lighter variants by adding lightness",[477,2101,2103],{"className":479,"code":2102,"filename":481,"language":482,"meta":483,"style":483},"import { styleframe } from 'styleframe';\nimport { useColorDesignTokens, useColorLevelDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { colorPrimary } = useColorDesignTokens(s, { primary: '#006cff' } as const);\n\n// Generate full level scale automatically\nconst {\n    colorPrimary50,   // 5% lightness\n    colorPrimary500,  // 50% lightness\n    colorPrimary950,  // 95% lightness\n} = useColorLevelDesignTokens(s, colorPrimary);\n",[485,2104,2105,2125,2150,2154,2168,2172,2212,2216,2221,2227,2237,2247,2257],{"__ignoreMap":483},[488,2106,2107,2109,2111,2113,2115,2117,2119,2121,2123],{"class":490,"line":491},[488,2108,495],{"class":494},[488,2110,499],{"class":498},[488,2112,503],{"class":502},[488,2114,506],{"class":498},[488,2116,509],{"class":494},[488,2118,512],{"class":498},[488,2120,516],{"class":515},[488,2122,519],{"class":498},[488,2124,522],{"class":498},[488,2126,2127,2129,2131,2133,2135,2138,2140,2142,2144,2146,2148],{"class":490,"line":525},[488,2128,495],{"class":494},[488,2130,499],{"class":498},[488,2132,532],{"class":502},[488,2134,535],{"class":498},[488,2136,2137],{"class":502}," useColorLevelDesignTokens",[488,2139,506],{"class":498},[488,2141,509],{"class":494},[488,2143,512],{"class":498},[488,2145,552],{"class":515},[488,2147,519],{"class":498},[488,2149,522],{"class":498},[488,2151,2152],{"class":490,"line":559},[488,2153,562],{"emptyLinePlaceholder":206},[488,2155,2156,2158,2160,2162,2164,2166],{"class":490,"line":565},[488,2157,569],{"class":568},[488,2159,572],{"class":502},[488,2161,575],{"class":498},[488,2163,503],{"class":578},[488,2165,581],{"class":502},[488,2167,522],{"class":498},[488,2169,2170],{"class":490,"line":586},[488,2171,562],{"emptyLinePlaceholder":206},[488,2173,2174,2176,2178,2180,2182,2184,2186,2188,2190,2192,2194,2196,2198,2200,2202,2204,2206,2208,2210],{"class":490,"line":612},[488,2175,569],{"class":568},[488,2177,499],{"class":498},[488,2179,631],{"class":502},[488,2181,601],{"class":498},[488,2183,604],{"class":498},[488,2185,532],{"class":578},[488,2187,640],{"class":502},[488,2189,535],{"class":498},[488,2191,499],{"class":498},[488,2193,648],{"class":647},[488,2195,651],{"class":498},[488,2197,512],{"class":498},[488,2199,656],{"class":515},[488,2201,519],{"class":498},[488,2203,506],{"class":498},[488,2205,663],{"class":494},[488,2207,666],{"class":568},[488,2209,669],{"class":502},[488,2211,522],{"class":498},[488,2213,2214],{"class":490,"line":617},[488,2215,562],{"emptyLinePlaceholder":206},[488,2217,2218],{"class":490,"line":624},[488,2219,2220],{"class":620},"// Generate full level scale automatically\n",[488,2222,2223,2225],{"class":490,"line":674},[488,2224,569],{"class":568},[488,2226,789],{"class":498},[488,2228,2229,2232,2234],{"class":490,"line":718},[488,2230,2231],{"class":502},"    colorPrimary50",[488,2233,535],{"class":498},[488,2235,2236],{"class":620},"   // 5% lightness\n",[488,2238,2239,2242,2244],{"class":490,"line":760},[488,2240,2241],{"class":502},"    colorPrimary500",[488,2243,535],{"class":498},[488,2245,2246],{"class":620},"  // 50% lightness\n",[488,2248,2249,2252,2254],{"class":490,"line":765},[488,2250,2251],{"class":502},"    colorPrimary950",[488,2253,535],{"class":498},[488,2255,2256],{"class":620},"  // 95% lightness\n",[488,2258,2259,2261,2263,2265,2267,2269,2272],{"class":490,"line":771},[488,2260,601],{"class":498},[488,2262,604],{"class":498},[488,2264,2137],{"class":578},[488,2266,640],{"class":502},[488,2268,535],{"class":498},[488,2270,2271],{"class":502}," colorPrimary)",[488,2273,522],{"class":498},[414,2275,2276],{},[1240,2277,2278],{"href":182},"Learn more about Colors →",[869,2280,189],{"id":2281},"easing",[414,2283,2284],{},"Define animation timing functions for consistent motion design across your application.",[414,2286,2287],{},[435,2288,879],{},[429,2290,2291],{},[432,2292,2293,2298],{},[435,2294,2295],{},[485,2296,2297],{},"useEasingDesignTokens()",": Create easing variables including CSS keywords, cubic-bezier curves, and linear() functions for spring and bounce effects",[477,2300,2302],{"className":479,"code":2301,"filename":481,"language":482,"meta":483,"style":483},"import { styleframe } from 'styleframe';\nimport { useEasingDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { easing, easingSpring, easingBounce } = useEasingDesignTokens(s);\n",[485,2303,2304,2324,2345,2349,2363,2367],{"__ignoreMap":483},[488,2305,2306,2308,2310,2312,2314,2316,2318,2320,2322],{"class":490,"line":491},[488,2307,495],{"class":494},[488,2309,499],{"class":498},[488,2311,503],{"class":502},[488,2313,506],{"class":498},[488,2315,509],{"class":494},[488,2317,512],{"class":498},[488,2319,516],{"class":515},[488,2321,519],{"class":498},[488,2323,522],{"class":498},[488,2325,2326,2328,2330,2333,2335,2337,2339,2341,2343],{"class":490,"line":525},[488,2327,495],{"class":494},[488,2329,499],{"class":498},[488,2331,2332],{"class":502}," useEasingDesignTokens",[488,2334,506],{"class":498},[488,2336,509],{"class":494},[488,2338,512],{"class":498},[488,2340,552],{"class":515},[488,2342,519],{"class":498},[488,2344,522],{"class":498},[488,2346,2347],{"class":490,"line":559},[488,2348,562],{"emptyLinePlaceholder":206},[488,2350,2351,2353,2355,2357,2359,2361],{"class":490,"line":565},[488,2352,569],{"class":568},[488,2354,572],{"class":502},[488,2356,575],{"class":498},[488,2358,503],{"class":578},[488,2360,581],{"class":502},[488,2362,522],{"class":498},[488,2364,2365],{"class":490,"line":586},[488,2366,562],{"emptyLinePlaceholder":206},[488,2368,2369,2371,2373,2376,2378,2381,2383,2386,2388,2390,2392,2394],{"class":490,"line":612},[488,2370,569],{"class":568},[488,2372,499],{"class":498},[488,2374,2375],{"class":502}," easing",[488,2377,535],{"class":498},[488,2379,2380],{"class":502}," easingSpring",[488,2382,535],{"class":498},[488,2384,2385],{"class":502}," easingBounce ",[488,2387,601],{"class":498},[488,2389,604],{"class":498},[488,2391,2332],{"class":578},[488,2393,1086],{"class":502},[488,2395,522],{"class":498},[414,2397,2398],{},[1240,2399,2400],{"href":190},"Learn more about Easing →",[869,2402,2404,2405],{"id":2403},"fluid-design","Fluid Design ",[2406,2407],"pro-icon",{},[414,2409,2410,2411,2414],{},"Create fluid typography and spacing that scales smoothly across all viewport sizes without breakpoints. Based on the Utopia fluid type scale, this system uses mathematical precision and CSS ",[485,2412,2413],{},"calc()"," functions to create seamless transitions between minimum and maximum values.",[414,2416,2417],{},[435,2418,879],{},[429,2420,2421,2429,2440],{},[432,2422,2423,2428],{},[435,2424,2425],{},[485,2426,2427],{},"useFluidViewport()",": Define viewport range (min/max widths) and calculate the fluid breakpoint variable",[432,2430,2431,2436,2437,2439],{},[435,2432,2433],{},[485,2434,2435],{},"useFluidClamp()",": Generate fluid ",[485,2438,2413],{}," calculations for any CSS property",[432,2441,2442,2447],{},[435,2443,2444],{},[485,2445,2446],{},"useFluidFontSize()",": Create complete fluid typography systems with modular scales",[477,2449,2451],{"className":479,"code":2450,"filename":481,"language":482,"meta":483,"style":483},"import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens, useScalePowersDesignTokens } from '@styleframe/theme';\nimport { useFluidViewport, useFluidFontSize } from '@styleframe/pro';\n\nconst s = styleframe();\n\n// Set up fluid viewport range (320px - 1440px)\nuseFluidViewport(s);\n\n// Define scales for mobile and desktop\nconst { scaleMin, scaleMax } = useScaleDesignTokens(s, { \n    min: '@scale.minor-third',   // 1.2 ratio for mobile\n    max: '@scale.major-third'    // 1.25 ratio for desktop\n});\n\n// Calculate scale powers\nconst scaleMinPowers = useScalePowersDesignTokens(s, scaleMin);\nconst scaleMaxPowers = useScalePowersDesignTokens(s, scaleMax);\n\n// Generate fluid font sizes that scale smoothly\nconst { fontSize, fontSizeSm, fontSizeMd, fontSizeLg } = useFluidFontSize(s, \n    { min: 16, max: 18 },  // Base font size range\n    {\n        sm: { min: scaleMinPowers[-1], max: scaleMaxPowers[-1] },\n        md: { min: scaleMinPowers[0], max: scaleMaxPowers[0] },\n        lg: { min: scaleMinPowers[1], max: scaleMaxPowers[1] },\n        default: '@font-size.md'\n    }\n);\n",[485,2452,2453,2473,2497,2524,2528,2542,2546,2551,2560,2564,2569,2597,2616,2633,2641,2645,2650,2670,2690,2694,2699,2735,2764,2769,2810,2843,2876,2891,2897],{"__ignoreMap":483},[488,2454,2455,2457,2459,2461,2463,2465,2467,2469,2471],{"class":490,"line":491},[488,2456,495],{"class":494},[488,2458,499],{"class":498},[488,2460,503],{"class":502},[488,2462,506],{"class":498},[488,2464,509],{"class":494},[488,2466,512],{"class":498},[488,2468,516],{"class":515},[488,2470,519],{"class":498},[488,2472,522],{"class":498},[488,2474,2475,2477,2479,2481,2483,2485,2487,2489,2491,2493,2495],{"class":490,"line":525},[488,2476,495],{"class":494},[488,2478,499],{"class":498},[488,2480,928],{"class":502},[488,2482,535],{"class":498},[488,2484,933],{"class":502},[488,2486,506],{"class":498},[488,2488,509],{"class":494},[488,2490,512],{"class":498},[488,2492,552],{"class":515},[488,2494,519],{"class":498},[488,2496,522],{"class":498},[488,2498,2499,2501,2503,2506,2508,2511,2513,2515,2517,2520,2522],{"class":490,"line":559},[488,2500,495],{"class":494},[488,2502,499],{"class":498},[488,2504,2505],{"class":502}," useFluidViewport",[488,2507,535],{"class":498},[488,2509,2510],{"class":502}," useFluidFontSize",[488,2512,506],{"class":498},[488,2514,509],{"class":494},[488,2516,512],{"class":498},[488,2518,2519],{"class":515},"@styleframe/pro",[488,2521,519],{"class":498},[488,2523,522],{"class":498},[488,2525,2526],{"class":490,"line":565},[488,2527,562],{"emptyLinePlaceholder":206},[488,2529,2530,2532,2534,2536,2538,2540],{"class":490,"line":586},[488,2531,569],{"class":568},[488,2533,572],{"class":502},[488,2535,575],{"class":498},[488,2537,503],{"class":578},[488,2539,581],{"class":502},[488,2541,522],{"class":498},[488,2543,2544],{"class":490,"line":612},[488,2545,562],{"emptyLinePlaceholder":206},[488,2547,2548],{"class":490,"line":617},[488,2549,2550],{"class":620},"// Set up fluid viewport range (320px - 1440px)\n",[488,2552,2553,2556,2558],{"class":490,"line":624},[488,2554,2555],{"class":578},"useFluidViewport",[488,2557,1086],{"class":502},[488,2559,522],{"class":498},[488,2561,2562],{"class":490,"line":674},[488,2563,562],{"emptyLinePlaceholder":206},[488,2565,2566],{"class":490,"line":718},[488,2567,2568],{"class":620},"// Define scales for mobile and desktop\n",[488,2570,2571,2573,2575,2578,2580,2583,2585,2587,2589,2591,2593,2595],{"class":490,"line":760},[488,2572,569],{"class":568},[488,2574,499],{"class":498},[488,2576,2577],{"class":502}," scaleMin",[488,2579,535],{"class":498},[488,2581,2582],{"class":502}," scaleMax ",[488,2584,601],{"class":498},[488,2586,604],{"class":498},[488,2588,928],{"class":578},[488,2590,640],{"class":502},[488,2592,535],{"class":498},[488,2594,499],{"class":498},[488,2596,986],{"class":502},[488,2598,2599,2602,2604,2606,2609,2611,2613],{"class":490,"line":765},[488,2600,2601],{"class":647},"    min",[488,2603,651],{"class":498},[488,2605,512],{"class":498},[488,2607,2608],{"class":515},"@scale.minor-third",[488,2610,519],{"class":498},[488,2612,535],{"class":498},[488,2614,2615],{"class":620},"   // 1.2 ratio for mobile\n",[488,2617,2618,2621,2623,2625,2628,2630],{"class":490,"line":771},[488,2619,2620],{"class":647},"    max",[488,2622,651],{"class":498},[488,2624,512],{"class":498},[488,2626,2627],{"class":515},"@scale.major-third",[488,2629,519],{"class":498},[488,2631,2632],{"class":620},"    // 1.25 ratio for desktop\n",[488,2634,2635,2637,2639],{"class":490,"line":792},[488,2636,601],{"class":498},[488,2638,669],{"class":502},[488,2640,522],{"class":498},[488,2642,2643],{"class":490,"line":808},[488,2644,562],{"emptyLinePlaceholder":206},[488,2646,2647],{"class":490,"line":823},[488,2648,2649],{"class":620},"// Calculate scale powers\n",[488,2651,2652,2654,2657,2659,2661,2663,2665,2668],{"class":490,"line":838},[488,2653,569],{"class":568},[488,2655,2656],{"class":502}," scaleMinPowers ",[488,2658,575],{"class":498},[488,2660,933],{"class":578},[488,2662,640],{"class":502},[488,2664,535],{"class":498},[488,2666,2667],{"class":502}," scaleMin)",[488,2669,522],{"class":498},[488,2671,2672,2674,2677,2679,2681,2683,2685,2688],{"class":490,"line":847},[488,2673,569],{"class":568},[488,2675,2676],{"class":502}," scaleMaxPowers ",[488,2678,575],{"class":498},[488,2680,933],{"class":578},[488,2682,640],{"class":502},[488,2684,535],{"class":498},[488,2686,2687],{"class":502}," scaleMax)",[488,2689,522],{"class":498},[488,2691,2692],{"class":490,"line":852},[488,2693,562],{"emptyLinePlaceholder":206},[488,2695,2696],{"class":490,"line":1121},[488,2697,2698],{"class":620},"// Generate fluid font sizes that scale smoothly\n",[488,2700,2701,2703,2705,2708,2710,2713,2715,2718,2720,2723,2725,2727,2729,2731,2733],{"class":490,"line":1129},[488,2702,569],{"class":568},[488,2704,499],{"class":498},[488,2706,2707],{"class":502}," fontSize",[488,2709,535],{"class":498},[488,2711,2712],{"class":502}," fontSizeSm",[488,2714,535],{"class":498},[488,2716,2717],{"class":502}," fontSizeMd",[488,2719,535],{"class":498},[488,2721,2722],{"class":502}," fontSizeLg ",[488,2724,601],{"class":498},[488,2726,604],{"class":498},[488,2728,2510],{"class":578},[488,2730,640],{"class":502},[488,2732,535],{"class":498},[488,2734,986],{"class":502},[488,2736,2737,2740,2743,2745,2748,2750,2753,2755,2758,2761],{"class":490,"line":1137},[488,2738,2739],{"class":498},"    {",[488,2741,2742],{"class":647}," min",[488,2744,651],{"class":498},[488,2746,2747],{"class":1179}," 16",[488,2749,535],{"class":498},[488,2751,2752],{"class":647}," max",[488,2754,651],{"class":498},[488,2756,2757],{"class":1179}," 18",[488,2759,2760],{"class":498}," },",[488,2762,2763],{"class":620},"  // Base font size range\n",[488,2765,2766],{"class":490,"line":1145},[488,2767,2768],{"class":498},"    {\n",[488,2770,2771,2774,2776,2778,2780,2782,2785,2787,2789,2791,2793,2795,2797,2800,2802,2804,2807],{"class":490,"line":1165},[488,2772,2773],{"class":647},"        sm",[488,2775,651],{"class":498},[488,2777,499],{"class":498},[488,2779,2742],{"class":647},[488,2781,651],{"class":498},[488,2783,2784],{"class":502}," scaleMinPowers[",[488,2786,1176],{"class":498},[488,2788,1180],{"class":1179},[488,2790,1183],{"class":502},[488,2792,535],{"class":498},[488,2794,2752],{"class":647},[488,2796,651],{"class":498},[488,2798,2799],{"class":502}," scaleMaxPowers[",[488,2801,1176],{"class":498},[488,2803,1180],{"class":1179},[488,2805,2806],{"class":502},"] ",[488,2808,2809],{"class":498},"},\n",[488,2811,2812,2815,2817,2819,2821,2823,2825,2827,2829,2831,2833,2835,2837,2839,2841],{"class":490,"line":1191},[488,2813,2814],{"class":647},"        md",[488,2816,651],{"class":498},[488,2818,499],{"class":498},[488,2820,2742],{"class":647},[488,2822,651],{"class":498},[488,2824,2784],{"class":502},[488,2826,1201],{"class":1179},[488,2828,1183],{"class":502},[488,2830,535],{"class":498},[488,2832,2752],{"class":647},[488,2834,651],{"class":498},[488,2836,2799],{"class":502},[488,2838,1201],{"class":1179},[488,2840,2806],{"class":502},[488,2842,2809],{"class":498},[488,2844,2845,2848,2850,2852,2854,2856,2858,2860,2862,2864,2866,2868,2870,2872,2874],{"class":490,"line":1211},[488,2846,2847],{"class":647},"        lg",[488,2849,651],{"class":498},[488,2851,499],{"class":498},[488,2853,2742],{"class":647},[488,2855,651],{"class":498},[488,2857,2784],{"class":502},[488,2859,1180],{"class":1179},[488,2861,1183],{"class":502},[488,2863,535],{"class":498},[488,2865,2752],{"class":647},[488,2867,651],{"class":498},[488,2869,2799],{"class":502},[488,2871,1180],{"class":1179},[488,2873,2806],{"class":502},[488,2875,2809],{"class":498},[488,2877,2878,2881,2883,2885,2888],{"class":490,"line":1230},[488,2879,2880],{"class":647},"        default",[488,2882,651],{"class":498},[488,2884,512],{"class":498},[488,2886,2887],{"class":515},"@font-size.md",[488,2889,2890],{"class":498},"'\n",[488,2892,2894],{"class":490,"line":2893},28,[488,2895,2896],{"class":498},"    }\n",[488,2898,2900,2902],{"class":490,"line":2899},29,[488,2901,669],{"class":502},[488,2903,522],{"class":498},[414,2905,2906],{},[1240,2907,2908],{"href":194},"Learn more about Fluid Design →",[869,2910,208],{"id":2911},"scales",[414,2913,2914],{},"Create harmonious proportional systems using mathematical ratios based on musical intervals and the golden ratio.",[414,2916,2917],{},[435,2918,879],{},[429,2920,2921,2929,2937],{},[432,2922,2923,2928],{},[435,2924,2925],{},[485,2926,2927],{},"useScaleDesignTokens()",": Define scale ratios (Minor Third, Perfect Fourth, Golden Ratio, etc.)",[432,2930,2931,2936],{},[435,2932,2933],{},[485,2934,2935],{},"useScalePowersDesignTokens()",": Generate size multipliers by raising scales to powers",[432,2938,2939,2944],{},[435,2940,2941],{},[485,2942,2943],{},"useMultiplierDesignTokens()",": Create variable sets by multiplying base values by scale powers",[477,2946,2948],{"className":479,"code":2947,"filename":481,"language":482,"meta":483,"style":483},"import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens, useScalePowersDesignTokens, useMultiplierDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { variable } = s;\n\nconst { scale } = useScaleDesignTokens(s);\nconst scalePowers = useScalePowersDesignTokens(s, scale);\n\nconst fontSize = variable('font-size', '1rem');\n\n// Automatically generate proportional sizes\nconst { fontSizeSm, fontSizeMd, fontSizeLg } = useMultiplierDesignTokens(s, fontSize, {\n    sm: scalePowers[-1],  // Smaller than base\n    md: scalePowers[0],  // Base size\n    lg: scalePowers[1],   // Larger than base\n});\n",[485,2949,2950,2970,2998,3002,3016,3033,3037,3055,3073,3077,3109,3113,3118,3150,3169,3186,3203],{"__ignoreMap":483},[488,2951,2952,2954,2956,2958,2960,2962,2964,2966,2968],{"class":490,"line":491},[488,2953,495],{"class":494},[488,2955,499],{"class":498},[488,2957,503],{"class":502},[488,2959,506],{"class":498},[488,2961,509],{"class":494},[488,2963,512],{"class":498},[488,2965,516],{"class":515},[488,2967,519],{"class":498},[488,2969,522],{"class":498},[488,2971,2972,2974,2976,2978,2980,2982,2984,2986,2988,2990,2992,2994,2996],{"class":490,"line":525},[488,2973,495],{"class":494},[488,2975,499],{"class":498},[488,2977,928],{"class":502},[488,2979,535],{"class":498},[488,2981,933],{"class":502},[488,2983,535],{"class":498},[488,2985,938],{"class":502},[488,2987,506],{"class":498},[488,2989,509],{"class":494},[488,2991,512],{"class":498},[488,2993,552],{"class":515},[488,2995,519],{"class":498},[488,2997,522],{"class":498},[488,2999,3000],{"class":490,"line":559},[488,3001,562],{"emptyLinePlaceholder":206},[488,3003,3004,3006,3008,3010,3012,3014],{"class":490,"line":565},[488,3005,569],{"class":568},[488,3007,572],{"class":502},[488,3009,575],{"class":498},[488,3011,503],{"class":578},[488,3013,581],{"class":502},[488,3015,522],{"class":498},[488,3017,3018,3020,3022,3025,3027,3029,3031],{"class":490,"line":586},[488,3019,569],{"class":568},[488,3021,499],{"class":498},[488,3023,3024],{"class":502}," variable ",[488,3026,601],{"class":498},[488,3028,604],{"class":498},[488,3030,607],{"class":502},[488,3032,522],{"class":498},[488,3034,3035],{"class":490,"line":612},[488,3036,562],{"emptyLinePlaceholder":206},[488,3038,3039,3041,3043,3045,3047,3049,3051,3053],{"class":490,"line":617},[488,3040,569],{"class":568},[488,3042,499],{"class":498},[488,3044,1077],{"class":502},[488,3046,601],{"class":498},[488,3048,604],{"class":498},[488,3050,928],{"class":578},[488,3052,1086],{"class":502},[488,3054,522],{"class":498},[488,3056,3057,3059,3061,3063,3065,3067,3069,3071],{"class":490,"line":624},[488,3058,569],{"class":568},[488,3060,1095],{"class":502},[488,3062,575],{"class":498},[488,3064,933],{"class":578},[488,3066,640],{"class":502},[488,3068,535],{"class":498},[488,3070,1106],{"class":502},[488,3072,522],{"class":498},[488,3074,3075],{"class":490,"line":674},[488,3076,562],{"emptyLinePlaceholder":206},[488,3078,3079,3081,3083,3085,3088,3090,3092,3095,3097,3099,3101,3103,3105,3107],{"class":490,"line":718},[488,3080,569],{"class":568},[488,3082,725],{"class":502},[488,3084,575],{"class":498},[488,3086,3087],{"class":578}," variable",[488,3089,777],{"class":502},[488,3091,519],{"class":498},[488,3093,3094],{"class":515},"font-size",[488,3096,519],{"class":498},[488,3098,535],{"class":498},[488,3100,512],{"class":498},[488,3102,703],{"class":515},[488,3104,519],{"class":498},[488,3106,669],{"class":502},[488,3108,522],{"class":498},[488,3110,3111],{"class":490,"line":760},[488,3112,562],{"emptyLinePlaceholder":206},[488,3114,3115],{"class":490,"line":765},[488,3116,3117],{"class":620},"// Automatically generate proportional sizes\n",[488,3119,3120,3122,3124,3126,3128,3130,3132,3134,3136,3138,3140,3142,3144,3146,3148],{"class":490,"line":771},[488,3121,569],{"class":568},[488,3123,499],{"class":498},[488,3125,2712],{"class":502},[488,3127,535],{"class":498},[488,3129,2717],{"class":502},[488,3131,535],{"class":498},[488,3133,2722],{"class":502},[488,3135,601],{"class":498},[488,3137,604],{"class":498},[488,3139,938],{"class":578},[488,3141,640],{"class":502},[488,3143,535],{"class":498},[488,3145,2707],{"class":502},[488,3147,535],{"class":498},[488,3149,789],{"class":498},[488,3151,3152,3154,3156,3158,3160,3162,3164,3166],{"class":490,"line":792},[488,3153,1168],{"class":647},[488,3155,651],{"class":498},[488,3157,1173],{"class":502},[488,3159,1176],{"class":498},[488,3161,1180],{"class":1179},[488,3163,1183],{"class":502},[488,3165,535],{"class":498},[488,3167,3168],{"class":620},"  // Smaller than base\n",[488,3170,3171,3173,3175,3177,3179,3181,3183],{"class":490,"line":808},[488,3172,1194],{"class":647},[488,3174,651],{"class":498},[488,3176,1173],{"class":502},[488,3178,1201],{"class":1179},[488,3180,1183],{"class":502},[488,3182,535],{"class":498},[488,3184,3185],{"class":620},"  // Base size\n",[488,3187,3188,3190,3192,3194,3196,3198,3200],{"class":490,"line":823},[488,3189,1214],{"class":647},[488,3191,651],{"class":498},[488,3193,1173],{"class":502},[488,3195,1180],{"class":1179},[488,3197,1183],{"class":502},[488,3199,535],{"class":498},[488,3201,3202],{"class":620},"   // Larger than base\n",[488,3204,3205,3207,3209],{"class":490,"line":838},[488,3206,601],{"class":498},[488,3208,669],{"class":502},[488,3210,522],{"class":498},[414,3212,3213],{},[1240,3214,3215],{"href":209},"Learn more about Scales →",[869,3217,212],{"id":3218},"spacing",[414,3220,3221],{},"Define consistent spacing systems for margins, padding, gaps, and layout spacing.",[414,3223,3224],{},[435,3225,879],{},[429,3227,3228],{},[432,3229,3230,3235],{},[435,3231,3232],{},[485,3233,3234],{},"useSpacingDesignTokens()",": Create spacing variables from explicit values or scale-based systems",[477,3237,3239],{"className":479,"code":3238,"filename":481,"language":482,"meta":483,"style":483},"import { styleframe } from 'styleframe';\nimport { useSpacingDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { spacing } = useSpacingDesignTokens(s, { default: '1rem' } as const);\n",[485,3240,3241,3261,3281,3285,3299,3303],{"__ignoreMap":483},[488,3242,3243,3245,3247,3249,3251,3253,3255,3257,3259],{"class":490,"line":491},[488,3244,495],{"class":494},[488,3246,499],{"class":498},[488,3248,503],{"class":502},[488,3250,506],{"class":498},[488,3252,509],{"class":494},[488,3254,512],{"class":498},[488,3256,516],{"class":515},[488,3258,519],{"class":498},[488,3260,522],{"class":498},[488,3262,3263,3265,3267,3269,3271,3273,3275,3277,3279],{"class":490,"line":525},[488,3264,495],{"class":494},[488,3266,499],{"class":498},[488,3268,538],{"class":502},[488,3270,506],{"class":498},[488,3272,509],{"class":494},[488,3274,512],{"class":498},[488,3276,552],{"class":515},[488,3278,519],{"class":498},[488,3280,522],{"class":498},[488,3282,3283],{"class":490,"line":559},[488,3284,562],{"emptyLinePlaceholder":206},[488,3286,3287,3289,3291,3293,3295,3297],{"class":490,"line":565},[488,3288,569],{"class":568},[488,3290,572],{"class":502},[488,3292,575],{"class":498},[488,3294,503],{"class":578},[488,3296,581],{"class":502},[488,3298,522],{"class":498},[488,3300,3301],{"class":490,"line":586},[488,3302,562],{"emptyLinePlaceholder":206},[488,3304,3305,3307,3309,3311,3313,3315,3317,3319,3321,3323,3325,3327,3329,3331,3333,3335,3337,3339,3341],{"class":490,"line":612},[488,3306,569],{"class":568},[488,3308,499],{"class":498},[488,3310,681],{"class":502},[488,3312,601],{"class":498},[488,3314,604],{"class":498},[488,3316,538],{"class":578},[488,3318,640],{"class":502},[488,3320,535],{"class":498},[488,3322,499],{"class":498},[488,3324,696],{"class":647},[488,3326,651],{"class":498},[488,3328,512],{"class":498},[488,3330,703],{"class":515},[488,3332,519],{"class":498},[488,3334,506],{"class":498},[488,3336,663],{"class":494},[488,3338,666],{"class":568},[488,3340,669],{"class":502},[488,3342,522],{"class":498},[414,3344,3345],{},[1240,3346,3347],{"href":213},"Learn more about Spacing →",[869,3349,216],{"id":3350},"typography",[414,3352,3353],{},"Comprehensive typography composables for creating consistent text styles throughout your application.",[414,3355,3356],{},[435,3357,879],{},[429,3359,3360,3368,3378,3386,3394,3402],{},[432,3361,3362,3367],{},[435,3363,3364],{},[485,3365,3366],{},"useFontFamilyDesignTokens()",": Define font family stacks (base, mono, serif, display)",[432,3369,3370,3375,3376,669],{},[435,3371,3372],{},[485,3373,3374],{},"useFontSizeDesignTokens()",": Create font size scales (works great with ",[485,3377,2943],{},[432,3379,3380,3385],{},[435,3381,3382],{},[485,3383,3384],{},"useFontWeightDesignTokens()",": Define font weight values (light, normal, bold, etc.)",[432,3387,3388,3393],{},[435,3389,3390],{},[485,3391,3392],{},"useFontStyleDesignTokens()",": Create font style variables (normal, italic, oblique)",[432,3395,3396,3401],{},[435,3397,3398],{},[485,3399,3400],{},"useLineHeightDesignTokens()",": Define line height values for optimal readability",[432,3403,3404,3409],{},[435,3405,3406],{},[485,3407,3408],{},"useLetterSpacingDesignTokens()",": Create letter spacing (tracking) variables",[477,3411,3413],{"className":479,"code":3412,"filename":481,"language":482,"meta":483,"style":483},"import { styleframe } from 'styleframe';\nimport {\n    useFontFamilyDesignTokens,\n    useFontSizeDesignTokens,\n    useFontWeightDesignTokens,\n    useLineHeightDesignTokens\n} from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { fontFamily, fontFamilyMono } = useFontFamilyDesignTokens(s);\nconst { fontSize } = useFontSizeDesignTokens(s, { default: '1rem' });\nconst { fontWeightNormal, fontWeightBold } = useFontWeightDesignTokens(s);\nconst { lineHeightTight, lineHeightNormal } = useLineHeightDesignTokens(s);\n",[485,3414,3415,3435,3441,3448,3455,3462,3467,3481,3485,3499,3503,3528,3564,3589],{"__ignoreMap":483},[488,3416,3417,3419,3421,3423,3425,3427,3429,3431,3433],{"class":490,"line":491},[488,3418,495],{"class":494},[488,3420,499],{"class":498},[488,3422,503],{"class":502},[488,3424,506],{"class":498},[488,3426,509],{"class":494},[488,3428,512],{"class":498},[488,3430,516],{"class":515},[488,3432,519],{"class":498},[488,3434,522],{"class":498},[488,3436,3437,3439],{"class":490,"line":525},[488,3438,495],{"class":494},[488,3440,789],{"class":498},[488,3442,3443,3446],{"class":490,"line":559},[488,3444,3445],{"class":502},"    useFontFamilyDesignTokens",[488,3447,805],{"class":498},[488,3449,3450,3453],{"class":490,"line":565},[488,3451,3452],{"class":502},"    useFontSizeDesignTokens",[488,3454,805],{"class":498},[488,3456,3457,3460],{"class":490,"line":586},[488,3458,3459],{"class":502},"    useFontWeightDesignTokens",[488,3461,805],{"class":498},[488,3463,3464],{"class":490,"line":612},[488,3465,3466],{"class":502},"    useLineHeightDesignTokens\n",[488,3468,3469,3471,3473,3475,3477,3479],{"class":490,"line":617},[488,3470,601],{"class":498},[488,3472,509],{"class":494},[488,3474,512],{"class":498},[488,3476,552],{"class":515},[488,3478,519],{"class":498},[488,3480,522],{"class":498},[488,3482,3483],{"class":490,"line":624},[488,3484,562],{"emptyLinePlaceholder":206},[488,3486,3487,3489,3491,3493,3495,3497],{"class":490,"line":674},[488,3488,569],{"class":568},[488,3490,572],{"class":502},[488,3492,575],{"class":498},[488,3494,503],{"class":578},[488,3496,581],{"class":502},[488,3498,522],{"class":498},[488,3500,3501],{"class":490,"line":718},[488,3502,562],{"emptyLinePlaceholder":206},[488,3504,3505,3507,3509,3512,3514,3517,3519,3521,3524,3526],{"class":490,"line":760},[488,3506,569],{"class":568},[488,3508,499],{"class":498},[488,3510,3511],{"class":502}," fontFamily",[488,3513,535],{"class":498},[488,3515,3516],{"class":502}," fontFamilyMono ",[488,3518,601],{"class":498},[488,3520,604],{"class":498},[488,3522,3523],{"class":578}," useFontFamilyDesignTokens",[488,3525,1086],{"class":502},[488,3527,522],{"class":498},[488,3529,3530,3532,3534,3536,3538,3540,3542,3544,3546,3548,3550,3552,3554,3556,3558,3560,3562],{"class":490,"line":765},[488,3531,569],{"class":568},[488,3533,499],{"class":498},[488,3535,725],{"class":502},[488,3537,601],{"class":498},[488,3539,604],{"class":498},[488,3541,543],{"class":578},[488,3543,640],{"class":502},[488,3545,535],{"class":498},[488,3547,499],{"class":498},[488,3549,696],{"class":647},[488,3551,651],{"class":498},[488,3553,512],{"class":498},[488,3555,703],{"class":515},[488,3557,519],{"class":498},[488,3559,506],{"class":498},[488,3561,669],{"class":502},[488,3563,522],{"class":498},[488,3565,3566,3568,3570,3573,3575,3578,3580,3582,3585,3587],{"class":490,"line":771},[488,3567,569],{"class":568},[488,3569,499],{"class":498},[488,3571,3572],{"class":502}," fontWeightNormal",[488,3574,535],{"class":498},[488,3576,3577],{"class":502}," fontWeightBold ",[488,3579,601],{"class":498},[488,3581,604],{"class":498},[488,3583,3584],{"class":578}," useFontWeightDesignTokens",[488,3586,1086],{"class":502},[488,3588,522],{"class":498},[488,3590,3591,3593,3595,3598,3600,3603,3605,3607,3610,3612],{"class":490,"line":792},[488,3592,569],{"class":568},[488,3594,499],{"class":498},[488,3596,3597],{"class":502}," lineHeightTight",[488,3599,535],{"class":498},[488,3601,3602],{"class":502}," lineHeightNormal ",[488,3604,601],{"class":498},[488,3606,604],{"class":498},[488,3608,3609],{"class":578}," useLineHeightDesignTokens",[488,3611,1086],{"class":502},[488,3613,522],{"class":498},[414,3615,3616],{},[1240,3617,3618],{"href":217},"Learn more about Typography →",[869,3620,220],{"id":3621},"z-index",[414,3623,3624],{},"Create a consistent z-index stacking scale with semantic layer names to prevent conflicting arbitrary values.",[414,3626,3627],{},[435,3628,879],{},[429,3630,3631],{},[432,3632,3633,3638],{},[435,3634,3635],{},[485,3636,3637],{},"useZIndexDesignTokens()",": Create z-index variables for different stacking levels",[477,3640,3642],{"className":479,"code":3641,"filename":481,"language":482,"meta":483,"style":483},"import { styleframe } from 'styleframe';\nimport { useZIndexDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst {\n    zIndex,           // Default stacking level\n    zIndexDropdown,   // Dropdowns and menus\n    zIndexModal,      // Modals and dialogs\n    zIndexToast,      // Toasts and notifications\n} = useZIndexDesignTokens(s);\n",[485,3643,3644,3664,3685,3689,3703,3707,3713,3723,3733,3743,3753],{"__ignoreMap":483},[488,3645,3646,3648,3650,3652,3654,3656,3658,3660,3662],{"class":490,"line":491},[488,3647,495],{"class":494},[488,3649,499],{"class":498},[488,3651,503],{"class":502},[488,3653,506],{"class":498},[488,3655,509],{"class":494},[488,3657,512],{"class":498},[488,3659,516],{"class":515},[488,3661,519],{"class":498},[488,3663,522],{"class":498},[488,3665,3666,3668,3670,3673,3675,3677,3679,3681,3683],{"class":490,"line":525},[488,3667,495],{"class":494},[488,3669,499],{"class":498},[488,3671,3672],{"class":502}," useZIndexDesignTokens",[488,3674,506],{"class":498},[488,3676,509],{"class":494},[488,3678,512],{"class":498},[488,3680,552],{"class":515},[488,3682,519],{"class":498},[488,3684,522],{"class":498},[488,3686,3687],{"class":490,"line":559},[488,3688,562],{"emptyLinePlaceholder":206},[488,3690,3691,3693,3695,3697,3699,3701],{"class":490,"line":565},[488,3692,569],{"class":568},[488,3694,572],{"class":502},[488,3696,575],{"class":498},[488,3698,503],{"class":578},[488,3700,581],{"class":502},[488,3702,522],{"class":498},[488,3704,3705],{"class":490,"line":586},[488,3706,562],{"emptyLinePlaceholder":206},[488,3708,3709,3711],{"class":490,"line":612},[488,3710,569],{"class":568},[488,3712,789],{"class":498},[488,3714,3715,3718,3720],{"class":490,"line":617},[488,3716,3717],{"class":502},"    zIndex",[488,3719,535],{"class":498},[488,3721,3722],{"class":620},"           // Default stacking level\n",[488,3724,3725,3728,3730],{"class":490,"line":624},[488,3726,3727],{"class":502},"    zIndexDropdown",[488,3729,535],{"class":498},[488,3731,3732],{"class":620},"   // Dropdowns and menus\n",[488,3734,3735,3738,3740],{"class":490,"line":674},[488,3736,3737],{"class":502},"    zIndexModal",[488,3739,535],{"class":498},[488,3741,3742],{"class":620},"      // Modals and dialogs\n",[488,3744,3745,3748,3750],{"class":490,"line":718},[488,3746,3747],{"class":502},"    zIndexToast",[488,3749,535],{"class":498},[488,3751,3752],{"class":620},"      // Toasts and notifications\n",[488,3754,3755,3757,3759,3761,3763],{"class":490,"line":760},[488,3756,601],{"class":498},[488,3758,604],{"class":498},[488,3760,3672],{"class":578},[488,3762,1086],{"class":502},[488,3764,522],{"class":498},[414,3766,3767],{},[1240,3768,3769],{"href":221},"Learn more about Z-Index →",[421,3771,3773],{"id":3772},"design-token-reference","Design Token Reference",[3775,3776,3777,3792],"table",{},[3778,3779,3780],"thead",{},[3781,3782,3783,3787,3789],"tr",{},[3784,3785,3786],"th",{},"Category",[3784,3788,132],{},[3784,3790,3791],{},"Purpose",[3793,3794,3795,3810,3831,3845,3868,3882,3898,3918,3933,3947,3976],"tbody",{},[3781,3796,3797,3802,3807],{},[3798,3799,3800],"td",{},[435,3801,165],{},[3798,3803,3804],{},[485,3805,3806],{},"useBorderRadiusDesignTokens",[3798,3808,3809],{},"Rounded corners and curves",[3781,3811,3812,3816,3828],{},[3798,3813,3814],{},[435,3815,169],{},[3798,3817,3818,3821,3822,3821,3825],{},[485,3819,3820],{},"useBorderStyleDesignTokens",", ",[485,3823,3824],{},"useBorderWidthDesignTokens",[485,3826,3827],{},"useBorderColorDesignTokens",[3798,3829,3830],{},"Border design tokens",[3781,3832,3833,3837,3842],{},[3798,3834,3835],{},[435,3836,177],{},[3798,3838,3839],{},[485,3840,3841],{},"useBreakpointDesignTokens",[3798,3843,3844],{},"Responsive design breakpoints",[3781,3846,3847,3851,3865],{},[3798,3848,3849],{},[435,3850,181],{},[3798,3852,3853,3821,3856,3821,3859,3821,3862],{},[485,3854,3855],{},"useColorDesignTokens",[485,3857,3858],{},"useColorLevelDesignTokens",[485,3860,3861],{},"useColorShadeDesignTokens",[485,3863,3864],{},"useColorTintDesignTokens",[3798,3866,3867],{},"Define colors and generate variants",[3781,3869,3870,3874,3879],{},[3798,3871,3872],{},[435,3873,189],{},[3798,3875,3876],{},[485,3877,3878],{},"useEasingDesignTokens",[3798,3880,3881],{},"Animation timing functions",[3781,3883,3884,3889,3895],{},[3798,3885,3886],{},[435,3887,3888],{},"Fluid",[3798,3890,3891,3894],{},[485,3892,3893],{},"useFluidTypography"," 🚧",[3798,3896,3897],{},"Viewport-responsive sizing",[3781,3899,3900,3904,3915],{},[3798,3901,3902],{},[435,3903,208],{},[3798,3905,3906,3821,3909,3821,3912],{},[485,3907,3908],{},"useScaleDesignTokens",[485,3910,3911],{},"useScalePowersDesignTokens",[485,3913,3914],{},"useMultiplierDesignTokens",[3798,3916,3917],{},"Create proportional systems",[3781,3919,3920,3925,3930],{},[3798,3921,3922],{},[435,3923,3924],{},"Shadows",[3798,3926,3927],{},[485,3928,3929],{},"useBoxShadowDesignTokens",[3798,3931,3932],{},"Elevation and depth",[3781,3934,3935,3939,3944],{},[3798,3936,3937],{},[435,3938,212],{},[3798,3940,3941],{},[485,3942,3943],{},"useSpacingDesignTokens",[3798,3945,3946],{},"Define layout spacing",[3781,3948,3949,3953,3973],{},[3798,3950,3951],{},[435,3952,216],{},[3798,3954,3955,3821,3958,3821,3961,3821,3964,3821,3967,3821,3970],{},[485,3956,3957],{},"useFontFamilyDesignTokens",[485,3959,3960],{},"useFontSizeDesignTokens",[485,3962,3963],{},"useFontWeightDesignTokens",[485,3965,3966],{},"useFontStyleDesignTokens",[485,3968,3969],{},"useLineHeightDesignTokens",[485,3971,3972],{},"useLetterSpacingDesignTokens",[3798,3974,3975],{},"Complete type systems",[3781,3977,3978,3982,3987],{},[3798,3979,3980],{},[435,3981,220],{},[3798,3983,3984],{},[485,3985,3986],{},"useZIndexDesignTokens",[3798,3988,3989],{},"Stacking order",[421,3991,3993],{"id":3992},"best-practices","Best Practices",[429,3995,3996,4002,4019,4025,4031,4040,4046,4052],{},[432,3997,3998,4001],{},[435,3999,4000],{},"Start with foundation tokens",": Define colors and scales first, then build typography and spacing on top",[432,4003,4004,4011,4012,4015,4016],{},[435,4005,4006,4007,4010],{},"Use the ",[485,4008,4009],{},"default"," key",": Creates clean variable names like ",[485,4013,4014],{},"--spacing"," instead of ",[485,4017,4018],{},"--spacing--default",[432,4020,4021,4024],{},[435,4022,4023],{},"Leverage scales for consistency",": Use modular scales for harmonious proportions across typography and spacing",[432,4026,4027,4030],{},[435,4028,4029],{},"Keep token counts reasonable",": 5-8 options per category prevents decision paralysis",[432,4032,4033,4039],{},[435,4034,4035,4036],{},"Use ",[485,4037,4038],{},"as const",": Ensures TypeScript infers correct return types for better autocomplete",[432,4041,4042,4045],{},[435,4043,4044],{},"Integrate with themes",": Design tokens work seamlessly with Styleframe's theme system",[432,4047,4048,4051],{},[435,4049,4050],{},"Combine composables",": Mix and match to create exactly the system you need",[432,4053,4054,4057],{},[435,4055,4056],{},"Document your decisions",": Explain why you chose specific ratios, colors, or scales",[421,4059,4061],{"id":4060},"next-steps","Next Steps",[414,4063,4064],{},"Ready to build your design system? Start with these guides:",[429,4066,4067,4078,4088,4101],{},[432,4068,4069,4072,4073,4075,4076],{},[435,4070,4071],{},"New to design tokens?"," Begin with ",[1240,4074,181],{"href":182}," and ",[1240,4077,212],{"href":213},[432,4079,4080,4083,4084,4075,4086],{},[435,4081,4082],{},"Building a type system?"," Check out ",[1240,4085,216],{"href":217},[1240,4087,208],{"href":209},[432,4089,4090,4093,4094,3821,4096,4098,4099],{},[435,4091,4092],{},"Creating visual hierarchy?"," Explore ",[1240,4095,173],{"href":174},[1240,4097,220],{"href":221},", and ",[1240,4100,169],{"href":170},[432,4102,4103,4106,4107],{},[435,4104,4105],{},"Working on responsive design?"," Learn about ",[1240,4108,177],{"href":178},[414,4110,4111],{},"Each design token composable is designed to work seamlessly with the others, giving you complete flexibility to build exactly the design system your project needs.",[4113,4114,4115],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .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 .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":483,"searchDepth":525,"depth":525,"links":4117},[4118,4119,4120,4133,4134,4135],{"id":423,"depth":525,"text":424},{"id":471,"depth":525,"text":472},{"id":864,"depth":525,"text":132,"children":4121},[4122,4123,4124,4125,4126,4127,4128,4129,4130,4131,4132],{"id":871,"depth":559,"text":165},{"id":1245,"depth":559,"text":169},{"id":1598,"depth":559,"text":173},{"id":1759,"depth":559,"text":177},{"id":2058,"depth":559,"text":181},{"id":2281,"depth":559,"text":189},{"id":2403,"depth":559,"text":2404},{"id":2911,"depth":559,"text":208},{"id":3218,"depth":559,"text":212},{"id":3350,"depth":559,"text":216},{"id":3621,"depth":559,"text":220},{"id":3772,"depth":525,"text":3773},{"id":3992,"depth":525,"text":3993},{"id":4060,"depth":525,"text":4061},"Explore Styleframe's comprehensive design token system. Create consistent, scalable design systems with composable functions for colors, typography, spacing, and more.","md",null,{},{"title":64,"icon":65},{"title":409,"description":4136},{"loc":151},"KRH-xdoch0yFQwokOEe8OH0eZXUeO4gbmrK2FmzvoMA",[4145,4147],{"title":286,"path":287,"stem":288,"description":4146,"children":-1},"A loading spinner component with color, size, and optional overlay — built as a multi-part recipe system with SVG-based animation.",{"title":156,"path":157,"stem":158,"description":4148,"icon":159,"children":-1},"Quickly bootstrap a complete design token system with sensible defaults using the useDesignTokensPreset composable.",1776621125939]