[{"data":1,"prerenderedAt":602},["ShallowReactive",2],{"navigation_en":3,"-docs-getting-started-introduction":415,"-docs-getting-started-introduction-surround":599},{"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,297,370],{"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,289,293],{"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":290,"path":291,"stem":292},"Dropdown","/docs/theme/components/composables/dropdown","docs/theme/components/02.composables/14.dropdown",{"title":294,"path":295,"stem":296},"Hamburger Menu","/docs/theme/components/composables/hamburger-menu","docs/theme/components/02.composables/14.hamburger-menu",{"title":102,"path":298,"stem":299,"children":300,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[301,302,305],{"title":64,"path":298,"stem":299,"icon":65},{"title":156,"path":303,"stem":304,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":306,"stem":307,"children":308,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[309,313,317,321,324,328,332,336,340,344,348,351,355,359,363,367],{"title":310,"path":311,"stem":312,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":314,"path":315,"stem":316,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":318,"path":319,"stem":320,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":322,"stem":323,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":325,"path":326,"stem":327,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":329,"path":330,"stem":331,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":333,"path":334,"stem":335,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":337,"path":338,"stem":339,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":341,"path":342,"stem":343,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":345,"path":346,"stem":347,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":349,"stem":350,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":352,"path":353,"stem":354,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":356,"path":357,"stem":358,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":360,"path":361,"stem":362,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":364,"path":365,"stem":366,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":368,"stem":369,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":371,"path":372,"stem":373,"children":374,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[375,376,379],{"title":64,"path":372,"stem":373,"icon":65},{"title":156,"path":377,"stem":378,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":380,"stem":381,"children":382,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[383,387,391,395,399,403,407,411],{"title":384,"path":385,"stem":386,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":388,"path":389,"stem":390,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":392,"path":393,"stem":394,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":396,"path":397,"stem":398,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":400,"path":401,"stem":402,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":404,"path":405,"stem":406,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":408,"path":409,"stem":410,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":412,"path":413,"stem":414,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":416,"title":12,"body":417,"description":590,"extension":591,"links":592,"meta":593,"navigation":594,"path":13,"seo":595,"sitemap":597,"stem":14,"__hash__":598},"docs_gettingStarted/docs/getting-started/01.introduction.md",{"type":418,"value":419,"toc":579},"minimark",[420,429,434,468,473,484,498,501,505,508,540,544,555,558,562],[421,422,423,424,428],"p",{},"Welcome to ",[425,426,427],"strong",{},"styleframe"," — the open-source tool for writing type-safe, composable, and future-proof CSS in TypeScript. Build robust, scalable Design Systems in minutes, catch style bugs before they ship, and supercharge your Front-End workflow with a developer experience you'll actually love.",[430,431,433],"h2",{"id":432},"why-styleframe","Why styleframe?",[435,436,437,444,450,456,462],"ul",{},[438,439,440,443],"li",{},[425,441,442],{},"Type-Safe CSS API",": All your styles are validated at compile time. No more typos, no more runtime surprises.",[438,445,446,449],{},[425,447,448],{},"Composable & Modular",": Mix, match, and reuse style logic using simple functions, variables, and plugins. Build your design system from ready-made parts.",[438,451,452,455],{},[425,453,454],{},"Built-in Theming",": Create light/dark modes and custom themes with zero pain—just a few lines of code.",[438,457,458,461],{},[425,459,460],{},"Framework Agnostic",": Works seamlessly with React, Vue, Svelte, Solid, Astro, and more.",[438,463,464,467],{},[425,465,466],{},"First-Class Developer Experience",": Enjoy IDE auto-complete, in-editor docs, and static analysis—right where you code.",[469,470,472],"h3",{"id":471},"how-does-it-work","How does it work?",[421,474,475,476,479,480,483],{},"Styleframe is built as a ",[425,477,478],{},"transpiler-first system",". You write your design tokens, selectors, utilities, and recipes in TypeScript, and Styleframe tokenizes everything into an internal representation. From there, the transpiler generates ",[425,481,482],{},"dual outputs",":",[435,485,486,492],{},[438,487,488,491],{},[425,489,490],{},"CSS output",": variables, selectors, utilities, themes, keyframes",[438,493,494,497],{},[425,495,496],{},"TypeScript output",": typed recipe functions with full IDE autocomplete",[421,499,500],{},"This architecture means you can have complete control over customizing how your system is output. You could even use the generated tokens to render documentation for your design system components.",[469,502,504],{"id":503},"what-can-you-build-with-styleframe","What can you build with styleframe?",[421,506,507],{},"Styleframe is completely framework-agnostic and integrates seamlessly into any modern Front-End stack, including React, Vue, Svelte, Solid, Astro, and beyond.",[435,509,510,516,522,528,534],{},[438,511,512,515],{},[425,513,514],{},"Design tokens"," (colors, spacing, typography) that live in TypeScript and generate real CSS variables.",[438,517,518,521],{},[425,519,520],{},"Reusable component styles"," for buttons, cards, layouts, and more.",[438,523,524,527],{},[425,525,526],{},"Runtime Recipes"," for styling your components based on props.",[438,529,530,533],{},[425,531,532],{},"Custom themes"," for brands, products, or just dark mode fans.",[438,535,536,539],{},[425,537,538],{},"A fully custom design system"," without writing a single line of raw CSS.",[430,541,543],{"id":542},"who-is-styleframe-for","Who is styleframe for?",[435,545,546,549,552],{},[438,547,548],{},"Front-End developers who want fewer bugs and more confidence in their code.",[438,550,551],{},"Teams and companies building or maintaining Design Systems.",[438,553,554],{},"Anyone tired of fighting CSS tools that don't scale or catch mistakes.",[421,556,557],{},"If you're ready for a new, more reliable way to write and manage styles, styleframe is here for you. ❤️",[430,559,561],{"id":560},"questions-feedback","Questions? Feedback?",[421,563,564,565,572,573,578],{},"If you have questions or feedback, or just want to see what others are building, ",[566,567,571],"a",{"href":568,"rel":569},"https://discord.gg/KCVwuGz44M",[570],"nofollow","join our community on Discord"," or ",[566,574,577],{"href":575,"rel":576},"https://github.com/styleframe-dev/styleframe/issues",[570],"open an issue on GitHub",". Styleframe is open source and built in public - we'd love for you to be part of the journey.",{"title":580,"searchDepth":581,"depth":581,"links":582},"",2,[583,588,589],{"id":432,"depth":581,"text":433,"children":584},[585,587],{"id":471,"depth":586,"text":472},3,{"id":503,"depth":586,"text":504},{"id":542,"depth":581,"text":543},{"id":560,"depth":581,"text":561},"Welcome to styleframe - the open-source tool for writing type-safe, composable, and future-proof CSS in TypeScript.","md",null,{},{"icon":15},{"title":12,"description":596},"Welcome to styleframe - the open-source tool for writing type-safe, composable, and future-proof CSS in TypeScript.  Build robust, scalable Design Systems in minutes, catch style bugs before they ship, and supercharge your Front-End workflow with a developer experience you'll actually love.",{"loc":13},"rZs8H-Yhj04taCy7oenRBZprLCit0R4YS0s4sMBQmoA",[592,600],{"title":17,"path":18,"stem":19,"description":601,"icon":20,"children":-1},"Get started with styleframe in your project. Choose the installation method that best fits your setup.",1777196419374]