[{"data":1,"prerenderedAt":4106},["ShallowReactive",2],{"navigation_en":3,"-docs-getting-started-migration-tailwind":692,"-docs-getting-started-migration-tailwind-surround":4101},{"gettingStarted":4,"api":81,"theme":172},[5,36,51,71],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",{"title":72,"icon":7,"path":73,"stem":74,"children":75,"page":7},"Migrations","\u002Fdocs\u002Fgetting-started\u002Fmigration","docs\u002Fgetting-started\u002Fmigration",[76],{"title":77,"path":78,"stem":79,"icon":80},"From TailwindCSS","\u002Fdocs\u002Fgetting-started\u002Fmigration\u002Ftailwind","docs\u002Fgetting-started\u002Fmigration\u002F01.tailwind","i-simple-icons-tailwindcss",[82],{"title":83,"path":84,"stem":85,"children":86,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[87,90,95,100,105,110,115,120,125,130,135,140,155,160,165,170],{"title":88,"path":84,"stem":85,"icon":89},"Overview","i-lucide-book-text",{"title":91,"path":92,"stem":93,"icon":94},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":96,"path":97,"stem":98,"icon":99},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":101,"path":102,"stem":103,"icon":104},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":106,"path":107,"stem":108,"icon":109},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":111,"path":112,"stem":113,"icon":114},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":116,"path":117,"stem":118,"icon":119},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":121,"path":122,"stem":123,"icon":124},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":126,"path":127,"stem":128,"icon":129},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":131,"path":132,"stem":133,"icon":134},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":136,"path":137,"stem":138,"icon":139},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":141,"path":142,"stem":143,"children":144,"icon":154},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[145,146,150],{"title":88,"path":142,"stem":143},{"title":147,"path":148,"stem":149},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":151,"path":152,"stem":153},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":156,"path":157,"stem":158,"icon":159},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":161,"path":162,"stem":163,"icon":164},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F13.imports","i-lucide-file-input",{"title":166,"path":167,"stem":168,"icon":169},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":161,"path":162,"stem":171,"icon":164},"docs\u002Fapi\u002F14.imports",[173,253,367,568,645],{"title":174,"path":175,"stem":176,"children":177,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[178,179,184,189,194,199,204,209,214,219,234,238,243,248],{"title":88,"path":175,"stem":176,"icon":89},{"title":180,"path":181,"stem":182,"icon":183},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":185,"path":186,"stem":187,"icon":188},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":190,"path":191,"stem":192,"icon":193},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":195,"path":196,"stem":197,"icon":198},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":200,"path":201,"stem":202,"icon":203},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":205,"path":206,"stem":207,"icon":208},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":210,"path":211,"stem":212,"icon":213},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":215,"path":216,"stem":217,"icon":218},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":220,"path":221,"stem":222,"children":223,"icon":114,"defaultOpen":233},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[224,225,229],{"title":88,"path":221,"stem":222},{"title":226,"path":227,"stem":228},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":230,"path":231,"stem":232},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":235,"path":236,"stem":237,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":239,"path":240,"stem":241,"icon":242},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":244,"path":245,"stem":246,"icon":247},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":249,"path":250,"stem":251,"icon":252},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":254,"path":255,"stem":256,"children":257,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[258,259,262,269,291,311,323,339,351],{"title":88,"path":255,"stem":256,"icon":89},{"title":180,"path":260,"stem":261,"icon":183},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":263,"icon":252,"defaultOpen":233,"page":7,"children":264},"Base",[265],{"title":266,"path":267,"stem":268,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":244,"icon":247,"defaultOpen":233,"page":7,"children":270},[271,275,279,283,287],{"title":272,"path":273,"stem":274,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":276,"path":277,"stem":278,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":280,"path":281,"stem":282,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":284,"path":285,"stem":286,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":288,"path":289,"stem":290,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":292,"icon":293,"defaultOpen":233,"page":7,"children":294},"Inline Text","i-lucide-whole-word",[295,299,303,307],{"title":296,"path":297,"stem":298,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":300,"path":301,"stem":302,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":304,"path":305,"stem":306,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":308,"path":309,"stem":310,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":312,"icon":313,"defaultOpen":233,"page":7,"children":314},"Media & Embeds","i-lucide-image",[315,319],{"title":316,"path":317,"stem":318,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":320,"path":321,"stem":322,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":324,"icon":325,"defaultOpen":233,"page":7,"children":326},"Forms & Tables","i-lucide-table",[327,331,335],{"title":328,"path":329,"stem":330,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":332,"path":333,"stem":334,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":336,"path":337,"stem":338,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":340,"icon":341,"defaultOpen":233,"page":7,"children":342},"Structure","i-lucide-separator-horizontal",[343,347],{"title":344,"path":345,"stem":346,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":348,"path":349,"stem":350,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":352,"icon":353,"defaultOpen":233,"page":7,"children":354},"States","i-lucide-mouse-pointer-click",[355,359,363],{"title":356,"path":357,"stem":358,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":360,"path":361,"stem":362,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":364,"path":365,"stem":366,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":368,"path":369,"stem":370,"children":371,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[372,373,385,409,437,501,528,560],{"title":88,"path":369,"stem":370,"icon":89},{"title":374,"icon":375,"defaultOpen":233,"page":7,"children":376},"Actions","i-lucide-square-mouse-pointer",[377,381],{"title":378,"path":379,"stem":380,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":382,"path":383,"stem":384,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":386,"icon":387,"defaultOpen":233,"page":7,"children":388},"Navigation","i-lucide-navigation",[389,393,397,401,405],{"title":390,"path":391,"stem":392,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":394,"path":395,"stem":396,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":398,"path":399,"stem":400,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":402,"path":403,"stem":404,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":406,"path":407,"stem":408,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":410,"icon":411,"defaultOpen":233,"page":7,"children":412},"Feedback","i-lucide-megaphone",[413,417,421,425,429,433],{"title":414,"path":415,"stem":416,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":418,"path":419,"stem":420,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":422,"path":423,"stem":424,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":426,"path":427,"stem":428,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":430,"path":431,"stem":432,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":434,"path":435,"stem":436,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":438,"icon":439,"defaultOpen":233,"page":7,"children":440},"Forms","i-lucide-text-cursor-input",[441,445,449,453,457,461,465,469,473,477,481,485,489,493,497],{"title":442,"path":443,"stem":444,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":446,"path":447,"stem":448,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":450,"path":451,"stem":452,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":454,"path":455,"stem":456,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":458,"path":459,"stem":460,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":462,"path":463,"stem":464,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":466,"path":467,"stem":468,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":470,"path":471,"stem":472,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":474,"path":475,"stem":476,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":478,"path":479,"stem":480,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":482,"path":483,"stem":484,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":486,"path":487,"stem":488,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":490,"path":491,"stem":492,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":494,"path":495,"stem":496,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":498,"path":499,"stem":500,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":502,"icon":252,"defaultOpen":233,"page":7,"children":503},"Overlays",[504,508,512,516,520,524],{"title":505,"path":506,"stem":507,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":509,"path":510,"stem":511,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":513,"path":514,"stem":515,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":517,"path":518,"stem":519,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":521,"path":522,"stem":523,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":525,"path":526,"stem":527,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":529,"icon":530,"defaultOpen":233,"page":7,"children":531},"Layout","i-lucide-layout",[532,536,540,544,548,552,556],{"title":533,"path":534,"stem":535,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":537,"path":538,"stem":539,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":541,"path":542,"stem":543,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":545,"path":546,"stem":547,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":549,"path":550,"stem":551,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":553,"path":554,"stem":555,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":557,"path":558,"stem":559,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":561,"icon":562,"defaultOpen":233,"page":7,"children":563},"AI Chat","i-lucide-message-circle",[564],{"title":565,"path":566,"stem":567,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":126,"path":569,"stem":570,"children":571,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[572,573,577,582,587,591,594,598,603,608,612,615,620,623,628,632,637,642],{"title":88,"path":569,"stem":570,"icon":89},{"title":574,"path":575,"stem":576,"icon":183},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":578,"path":579,"stem":580,"icon":581},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":583,"path":584,"stem":585,"icon":586},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":588,"path":589,"stem":590,"icon":313},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":190,"path":592,"stem":593,"icon":193},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":595,"path":596,"stem":597,"icon":129},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":599,"path":600,"stem":601,"icon":602},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":604,"path":605,"stem":606,"icon":607},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":609,"path":610,"stem":611,"icon":353},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":529,"path":613,"stem":614,"icon":530},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":616,"path":617,"stem":618,"icon":619},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":239,"path":621,"stem":622,"icon":242},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":624,"path":625,"stem":626,"icon":627},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":629,"path":630,"stem":631,"icon":325},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":633,"path":634,"stem":635,"icon":636},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":638,"path":639,"stem":640,"icon":641},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":244,"path":643,"stem":644,"icon":247},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":646,"path":647,"stem":648,"children":649,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[650,651,654,658,663,667,672,677,682,687],{"title":88,"path":647,"stem":648,"icon":89},{"title":574,"path":652,"stem":653,"icon":183},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":655,"path":656,"stem":657,"icon":581},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":659,"path":660,"stem":661,"icon":662},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":664,"path":665,"stem":666,"icon":439},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":668,"path":669,"stem":670,"icon":671},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":673,"path":674,"stem":675,"icon":676},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":678,"path":679,"stem":680,"icon":681},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":683,"path":684,"stem":685,"icon":686},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":688,"path":689,"stem":690,"icon":691},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":693,"title":77,"body":694,"description":4094,"extension":4095,"links":4096,"meta":4097,"navigation":4098,"path":78,"seo":4099,"stem":79,"__hash__":4100},"docs_gettingStarted\u002Fdocs\u002Fgetting-started\u002Fmigration\u002F01.tailwind.md",{"type":695,"value":696,"toc":4075},"minimark",[697,706,725,730,750,846,852,856,859,938,965,972,1169,1177,1181,1198,1234,1238,1252,1527,1552,1556,1732,1735,1819,1822,1966,1970,2015,2136,2147,2151,2160,2254,2324,2361,2429,2471,2485,2489,2498,2755,2766,2770,2784,2953,2960,2995,3003,3007,3021,3707,3713,3720,3820,3839,3843,3918,3921,3925,4024,4028,4071],[698,699,700,701,705],"p",{},"You already think in utilities. That instinct carries over: Styleframe also generates atomic classes you compose in markup, and both tools compile to static CSS with zero runtime cost. What changes is ",[702,703,704],"strong",{},"where the vocabulary comes from",". In Tailwind the utility set is fixed by the framework; in Styleframe you define design tokens in TypeScript and the utilities are generated from them. This guide maps one vocabulary onto the other so you can move a codebase over piece by piece.",[707,708,709,710,714,715,718,719,724],"note",{},"This is the ",[711,712,713],"em",{},"how",". For the ",[711,716,717],{},"why"," — the trade-offs between a fixed utility framework and a design-system toolkit — read the ",[720,721,723],"a",{"href":722},"\u002Fdocs\u002Fgetting-started\u002Fcomparisons\u002Ftailwind","Styleframe vs Tailwind CSS comparison"," first.",[726,727,729],"h2",{"id":728},"the-one-difference-that-explains-the-rest","The one difference that explains the rest",[698,731,732,733,737,738,741,742,745,746,749],{},"Tailwind reads ",[734,735,736],"code",{},"bg-blue-500"," from your markup and emits the matching CSS. Styleframe works the other way around: you register a design token (say ",[734,739,740],{},"colors.primary","), and Styleframe generates a ",[734,743,744],{},"_background:primary"," utility from it. The class name encodes the ",[702,747,748],{},"CSS property and the token",", not a preset scale value.",[751,752,753,768],"table",{},[754,755,756],"thead",{},[757,758,759,762,765],"tr",{},[760,761],"th",{},[760,763,764],{},"Tailwind CSS",[760,766,767],{},"Styleframe",[769,770,771,791,805,820,835],"tbody",{},[757,772,773,777,782],{},[774,775,776],"td",{},"Class shape",[774,778,779,781],{},[734,780,736],{}," (abbreviation + scale)",[774,783,784,786,787,790],{},[734,785,744],{}," (",[734,788,789],{},"_property:value",")",[757,792,793,796,802],{},[774,794,795],{},"Source of the scale",[774,797,798,799],{},"Framework defaults + ",[734,800,801],{},"@theme",[774,803,804],{},"Your design tokens, in TypeScript",[757,806,807,810,815],{},[774,808,809],{},"Arbitrary value",[774,811,812],{},[734,813,814],{},"p-[17px]",[774,816,817],{},[734,818,819],{},"_padding:[17px]",[757,821,822,825,830],{},[774,823,824],{},"State variant",[774,826,827],{},[734,828,829],{},"hover:bg-blue-600",[774,831,832],{},[734,833,834],{},"_hover:background:primary-600",[757,836,837,840,843],{},[774,838,839],{},"Type safety",[774,841,842],{},"Class strings (IDE plugin)",[774,844,845],{},"Compile-time checked tokens",[698,847,848,849,851],{},"Once you internalize ",[734,850,789],{},", most of the migration is mechanical. The tables below give you the substitutions.",[726,853,855],{"id":854},"step-1-install-styleframe","Step 1: Install Styleframe",[698,857,858],{},"Run the initializer in your project root, then import the generated stylesheet once at your app entry.",[860,861,862,896,917],"code-group",{},[863,864,870],"pre",{"className":865,"code":866,"filename":867,"language":868,"meta":869,"style":869},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpx styleframe init\npnpm install\n","pnpm","bash","",[734,871,872,888],{"__ignoreMap":869},[873,874,877,881,885],"span",{"class":875,"line":876},"line",1,[873,878,880],{"class":879},"sBMFI","pnpx",[873,882,884],{"class":883},"sfazB"," styleframe",[873,886,887],{"class":883}," init\n",[873,889,891,893],{"class":875,"line":890},2,[873,892,867],{"class":879},[873,894,895],{"class":883}," install\n",[863,897,900],{"className":865,"code":898,"filename":899,"language":868,"meta":869,"style":869},"npx styleframe init\nnpm install\n","npm",[734,901,902,911],{"__ignoreMap":869},[873,903,904,907,909],{"class":875,"line":876},[873,905,906],{"class":879},"npx",[873,908,884],{"class":883},[873,910,887],{"class":883},[873,912,913,915],{"class":875,"line":890},[873,914,899],{"class":879},[873,916,895],{"class":883},[863,918,921],{"className":865,"code":919,"filename":920,"language":868,"meta":869,"style":869},"bunx styleframe init\nbun install\n","bun",[734,922,923,932],{"__ignoreMap":869},[873,924,925,928,930],{"class":875,"line":876},[873,926,927],{"class":879},"bunx",[873,929,884],{"class":883},[873,931,887],{"class":883},[873,933,934,936],{"class":875,"line":890},[873,935,920],{"class":879},[873,937,895],{"class":883},[863,939,944],{"className":940,"code":941,"filename":942,"language":943,"meta":869,"style":869},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import 'virtual:styleframe.css';\n","main.ts","ts",[734,945,946],{"__ignoreMap":869},[873,947,948,952,956,959,962],{"class":875,"line":876},[873,949,951],{"class":950},"s7zQu","import",[873,953,955],{"class":954},"sMK4o"," '",[873,957,958],{"class":883},"virtual:styleframe.css",[873,960,961],{"class":954},"'",[873,963,964],{"class":954},";\n",[698,966,967,968,971],{},"Then add the five presets to ",[734,969,970],{},"styleframe.config.ts",". They are the closest equivalent to Tailwind's \"batteries included\" defaults: a full token system, a CSS reset, semantic element styling, roughly 200 utility classes, and state modifiers.",[863,973,975],{"className":940,"code":974,"filename":970,"language":943,"meta":869,"style":869},"import {\n    useDesignTokensPreset,\n    useGlobalPreset,\n    useModifiersPreset,\n    useSanitizePreset,\n    useUtilitiesPreset,\n} from '@styleframe\u002Ftheme';\nimport { styleframe } from 'styleframe';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseSanitizePreset(s);\nuseGlobalPreset(s);\nuseUtilitiesPreset(s);\nuseModifiersPreset(s);\n\nexport default s;\n",[734,976,977,984,993,1001,1009,1017,1025,1043,1067,1073,1094,1099,1110,1120,1130,1140,1150,1155],{"__ignoreMap":869},[873,978,979,981],{"class":875,"line":876},[873,980,951],{"class":950},[873,982,983],{"class":954}," {\n",[873,985,986,990],{"class":875,"line":890},[873,987,989],{"class":988},"sTEyZ","    useDesignTokensPreset",[873,991,992],{"class":954},",\n",[873,994,996,999],{"class":875,"line":995},3,[873,997,998],{"class":988},"    useGlobalPreset",[873,1000,992],{"class":954},[873,1002,1004,1007],{"class":875,"line":1003},4,[873,1005,1006],{"class":988},"    useModifiersPreset",[873,1008,992],{"class":954},[873,1010,1012,1015],{"class":875,"line":1011},5,[873,1013,1014],{"class":988},"    useSanitizePreset",[873,1016,992],{"class":954},[873,1018,1020,1023],{"class":875,"line":1019},6,[873,1021,1022],{"class":988},"    useUtilitiesPreset",[873,1024,992],{"class":954},[873,1026,1028,1031,1034,1036,1039,1041],{"class":875,"line":1027},7,[873,1029,1030],{"class":954},"}",[873,1032,1033],{"class":950}," from",[873,1035,955],{"class":954},[873,1037,1038],{"class":883},"@styleframe\u002Ftheme",[873,1040,961],{"class":954},[873,1042,964],{"class":954},[873,1044,1046,1048,1051,1053,1056,1058,1060,1063,1065],{"class":875,"line":1045},8,[873,1047,951],{"class":950},[873,1049,1050],{"class":954}," {",[873,1052,884],{"class":988},[873,1054,1055],{"class":954}," }",[873,1057,1033],{"class":950},[873,1059,955],{"class":954},[873,1061,1062],{"class":883},"styleframe",[873,1064,961],{"class":954},[873,1066,964],{"class":954},[873,1068,1070],{"class":875,"line":1069},9,[873,1071,1072],{"emptyLinePlaceholder":233},"\n",[873,1074,1076,1080,1083,1086,1089,1092],{"class":875,"line":1075},10,[873,1077,1079],{"class":1078},"spNyl","const",[873,1081,1082],{"class":988}," s ",[873,1084,1085],{"class":954},"=",[873,1087,884],{"class":1088},"s2Zo4",[873,1090,1091],{"class":988},"()",[873,1093,964],{"class":954},[873,1095,1097],{"class":875,"line":1096},11,[873,1098,1072],{"emptyLinePlaceholder":233},[873,1100,1102,1105,1108],{"class":875,"line":1101},12,[873,1103,1104],{"class":1088},"useDesignTokensPreset",[873,1106,1107],{"class":988},"(s)",[873,1109,964],{"class":954},[873,1111,1113,1116,1118],{"class":875,"line":1112},13,[873,1114,1115],{"class":1088},"useSanitizePreset",[873,1117,1107],{"class":988},[873,1119,964],{"class":954},[873,1121,1123,1126,1128],{"class":875,"line":1122},14,[873,1124,1125],{"class":1088},"useGlobalPreset",[873,1127,1107],{"class":988},[873,1129,964],{"class":954},[873,1131,1133,1136,1138],{"class":875,"line":1132},15,[873,1134,1135],{"class":1088},"useUtilitiesPreset",[873,1137,1107],{"class":988},[873,1139,964],{"class":954},[873,1141,1143,1146,1148],{"class":875,"line":1142},16,[873,1144,1145],{"class":1088},"useModifiersPreset",[873,1147,1107],{"class":988},[873,1149,964],{"class":954},[873,1151,1153],{"class":875,"line":1152},17,[873,1154,1072],{"emptyLinePlaceholder":233},[873,1156,1158,1161,1164,1167],{"class":875,"line":1157},18,[873,1159,1160],{"class":950},"export",[873,1162,1163],{"class":950}," default",[873,1165,1166],{"class":988}," s",[873,1168,964],{"class":954},[707,1170,1171,1173,1174,1176],{},[734,1172,1115],{}," plays the role of Tailwind's Preflight — box-sizing, margin resets, and form-element normalization via sanitize.css. ",[734,1175,1135],{}," is what generates the utility classes the tables below reference.",[726,1178,1180],{"id":1179},"step-2-map-the-utilities","Step 2: Map the utilities",[698,1182,1183,1184,1187,1188,1187,1191,1194,1195,1197],{},"The default presets ship Tailwind-flavored value keys on purpose — ",[734,1185,1186],{},"_justify-content:between",", ",[734,1189,1190],{},"_flex-direction:col",[734,1192,1193],{},"_display:hidden"," — so much of the translation is muscle memory. Where a value falls between token steps, drop to the bracket syntax (",[734,1196,819],{},").",[707,1199,1200,1203,1204,1206,1207,1213,1214,1187,1217,1187,1220,1223,1224,1187,1227,1187,1230,1233],{},[702,1201,1202],{},"Want Tailwind's short names?"," Swap ",[734,1205,1135],{}," for ",[720,1208,1210],{"href":1209},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset#useshorthandutilitiespreset",[734,1211,1212],{},"useShorthandUtilitiesPreset"," in Step 1 and the same utilities generate as ",[734,1215,1216],{},"_p:md",[734,1218,1219],{},"_m:sm",[734,1221,1222],{},"_rounded:lg"," instead of ",[734,1225,1226],{},"_padding:md",[734,1228,1229],{},"_margin:sm",[734,1231,1232],{},"_border-radius:lg"," — only the names change; grammar and tokens stay put. Read the tables below as a mechanical name swap.",[1235,1236,239],"h3",{"id":1237},"spacing",[698,1239,1240,1241,1243,1244,1247,1248,1251],{},"Tailwind's numeric spacing scale maps onto Styleframe's named ",[734,1242,1237],{}," tokens. The named scale is coarser by default; use the bracket syntax or a multiplier (",[734,1245,1246],{},"_padding:@1.5"," → ",[734,1249,1250],{},"calc(var(--spacing) * 1.5)",") for in-between values.",[751,1253,1254,1266],{},[754,1255,1256],{},[757,1257,1258,1261,1264],{},[760,1259,1260],{},"Tailwind",[760,1262,1263],{},"Value",[760,1265,767],{},[769,1267,1268,1285,1302,1319,1335,1352,1369,1386,1403,1418,1433,1467,1483,1498,1514],{},[757,1269,1270,1275,1280],{},[774,1271,1272],{},[734,1273,1274],{},"p-1",[774,1276,1277],{},[734,1278,1279],{},"0.25rem",[774,1281,1282],{},[734,1283,1284],{},"_padding:2xs",[757,1286,1287,1292,1297],{},[774,1288,1289],{},[734,1290,1291],{},"p-2",[774,1293,1294],{},[734,1295,1296],{},"0.5rem",[774,1298,1299],{},[734,1300,1301],{},"_padding:xs",[757,1303,1304,1309,1314],{},[774,1305,1306],{},[734,1307,1308],{},"p-3",[774,1310,1311],{},[734,1312,1313],{},"0.75rem",[774,1315,1316],{},[734,1317,1318],{},"_padding:sm",[757,1320,1321,1326,1331],{},[774,1322,1323],{},[734,1324,1325],{},"p-4",[774,1327,1328],{},[734,1329,1330],{},"1rem",[774,1332,1333],{},[734,1334,1226],{},[757,1336,1337,1342,1347],{},[774,1338,1339],{},[734,1340,1341],{},"p-6",[774,1343,1344],{},[734,1345,1346],{},"1.5rem",[774,1348,1349],{},[734,1350,1351],{},"_padding:lg",[757,1353,1354,1359,1364],{},[774,1355,1356],{},[734,1357,1358],{},"p-8",[774,1360,1361],{},[734,1362,1363],{},"2rem",[774,1365,1366],{},[734,1367,1368],{},"_padding:xl",[757,1370,1371,1376,1381],{},[774,1372,1373],{},[734,1374,1375],{},"p-12",[774,1377,1378],{},[734,1379,1380],{},"3rem",[774,1382,1383],{},[734,1384,1385],{},"_padding:2xl",[757,1387,1388,1393,1398],{},[774,1389,1390],{},[734,1391,1392],{},"p-16",[774,1394,1395],{},[734,1396,1397],{},"4rem",[774,1399,1400],{},[734,1401,1402],{},"_padding:3xl",[757,1404,1405,1410,1413],{},[774,1406,1407],{},[734,1408,1409],{},"px-4",[774,1411,1412],{},"inline",[774,1414,1415],{},[734,1416,1417],{},"_padding-inline:md",[757,1419,1420,1425,1428],{},[774,1421,1422],{},[734,1423,1424],{},"py-4",[774,1426,1427],{},"block",[774,1429,1430],{},[734,1431,1432],{},"_padding-block:md",[757,1434,1435,1450,1453],{},[774,1436,1437,1440,1441,1440,1444,1440,1447],{},[734,1438,1439],{},"pt-4"," \u002F ",[734,1442,1443],{},"pr-4",[734,1445,1446],{},"pb-4",[734,1448,1449],{},"pl-4",[774,1451,1452],{},"one side",[774,1454,1455,1440,1458,1440,1461,1440,1464],{},[734,1456,1457],{},"_padding-top:md",[734,1459,1460],{},"_padding-right:md",[734,1462,1463],{},"_padding-bottom:md",[734,1465,1466],{},"_padding-left:md",[757,1468,1469,1474,1478],{},[774,1470,1471],{},[734,1472,1473],{},"m-4",[774,1475,1476],{},[734,1477,1330],{},[774,1479,1480],{},[734,1481,1482],{},"_margin:md",[757,1484,1485,1490,1493],{},[774,1486,1487],{},[734,1488,1489],{},"mx-auto",[774,1491,1492],{},"center",[774,1494,1495],{},[734,1496,1497],{},"_margin-inline:auto",[757,1499,1500,1505,1509],{},[774,1501,1502],{},[734,1503,1504],{},"gap-2",[774,1506,1507],{},[734,1508,1296],{},[774,1510,1511],{},[734,1512,1513],{},"_gap:xs",[757,1515,1516,1520,1523],{},[774,1517,1518],{},[734,1519,814],{},[774,1521,1522],{},"arbitrary",[774,1524,1525],{},[734,1526,819],{},[698,1528,1529,1530,1533,1534,1537,1538,1187,1541,1187,1544,1547,1548,1551],{},"The same key scale (",[734,1531,1532],{},"2xs"," through ",[734,1535,1536],{},"3xl",") applies to ",[734,1539,1540],{},"margin",[734,1542,1543],{},"gap",[734,1545,1546],{},"gap-x",", and ",[734,1549,1550],{},"gap-y",".",[1235,1553,1555],{"id":1554},"layout-and-flexbox","Layout and flexbox",[751,1557,1558,1566],{},[754,1559,1560],{},[757,1561,1562,1564],{},[760,1563,1260],{},[760,1565,767],{},[769,1567,1568,1580,1592,1604,1615,1626,1638,1649,1661,1673,1685,1697,1708,1720],{},[757,1569,1570,1575],{},[774,1571,1572],{},[734,1573,1574],{},"flex",[774,1576,1577],{},[734,1578,1579],{},"_display:flex",[757,1581,1582,1587],{},[774,1583,1584],{},[734,1585,1586],{},"inline-flex",[774,1588,1589],{},[734,1590,1591],{},"_display:inline-flex",[757,1593,1594,1599],{},[774,1595,1596],{},[734,1597,1598],{},"grid",[774,1600,1601],{},[734,1602,1603],{},"_display:grid",[757,1605,1606,1610],{},[774,1607,1608],{},[734,1609,1427],{},[774,1611,1612],{},[734,1613,1614],{},"_display:block",[757,1616,1617,1622],{},[774,1618,1619],{},[734,1620,1621],{},"hidden",[774,1623,1624],{},[734,1625,1193],{},[757,1627,1628,1633],{},[774,1629,1630],{},[734,1631,1632],{},"flex-row",[774,1634,1635],{},[734,1636,1637],{},"_flex-direction:row",[757,1639,1640,1645],{},[774,1641,1642],{},[734,1643,1644],{},"flex-col",[774,1646,1647],{},[734,1648,1190],{},[757,1650,1651,1656],{},[774,1652,1653],{},[734,1654,1655],{},"flex-wrap",[774,1657,1658],{},[734,1659,1660],{},"_flex-wrap:wrap",[757,1662,1663,1668],{},[774,1664,1665],{},[734,1666,1667],{},"flex-1",[774,1669,1670],{},[734,1671,1672],{},"_flex:1",[757,1674,1675,1680],{},[774,1676,1677],{},[734,1678,1679],{},"items-center",[774,1681,1682],{},[734,1683,1684],{},"_align-items:center",[757,1686,1687,1692],{},[774,1688,1689],{},[734,1690,1691],{},"items-start",[774,1693,1694],{},[734,1695,1696],{},"_align-items:start",[757,1698,1699,1704],{},[774,1700,1701],{},[734,1702,1703],{},"justify-between",[774,1705,1706],{},[734,1707,1186],{},[757,1709,1710,1715],{},[774,1711,1712],{},[734,1713,1714],{},"justify-end",[774,1716,1717],{},[734,1718,1719],{},"_justify-content:end",[757,1721,1722,1727],{},[774,1723,1724],{},[734,1725,1726],{},"justify-center",[774,1728,1729],{},[734,1730,1731],{},"_justify-content:center",[1235,1733,616],{"id":1734},"sizing",[751,1736,1737,1745],{},[754,1738,1739],{},[757,1740,1741,1743],{},[760,1742,1260],{},[760,1744,767],{},[769,1746,1747,1759,1771,1783,1795,1807],{},[757,1748,1749,1754],{},[774,1750,1751],{},[734,1752,1753],{},"w-full",[774,1755,1756],{},[734,1757,1758],{},"_width:full",[757,1760,1761,1766],{},[774,1762,1763],{},[734,1764,1765],{},"w-screen",[774,1767,1768],{},[734,1769,1770],{},"_width:screen",[757,1772,1773,1778],{},[774,1774,1775],{},[734,1776,1777],{},"w-1\u002F2",[774,1779,1780],{},[734,1781,1782],{},"_width:1\u002F2",[757,1784,1785,1790],{},[774,1786,1787],{},[734,1788,1789],{},"h-full",[774,1791,1792],{},[734,1793,1794],{},"_height:full",[757,1796,1797,1802],{},[774,1798,1799],{},[734,1800,1801],{},"max-w-[640px]",[774,1803,1804],{},[734,1805,1806],{},"_max-width:[640px]",[757,1808,1809,1814],{},[774,1810,1811],{},[734,1812,1813],{},"min-w-0",[774,1815,1816],{},[734,1817,1818],{},"_min-width:[0]",[1235,1820,244],{"id":1821},"typography",[751,1823,1824,1832],{},[754,1825,1826],{},[757,1827,1828,1830],{},[760,1829,1260],{},[760,1831,767],{},[769,1833,1834,1846,1858,1870,1882,1894,1906,1918,1930,1942,1954],{},[757,1835,1836,1841],{},[774,1837,1838],{},[734,1839,1840],{},"text-sm",[774,1842,1843],{},[734,1844,1845],{},"_font-size:sm",[757,1847,1848,1853],{},[774,1849,1850],{},[734,1851,1852],{},"text-base",[774,1854,1855],{},[734,1856,1857],{},"_font-size:md",[757,1859,1860,1865],{},[774,1861,1862],{},[734,1863,1864],{},"text-lg",[774,1866,1867],{},[734,1868,1869],{},"_font-size:lg",[757,1871,1872,1877],{},[774,1873,1874],{},[734,1875,1876],{},"text-2xl",[774,1878,1879],{},[734,1880,1881],{},"_font-size:2xl",[757,1883,1884,1889],{},[774,1885,1886],{},[734,1887,1888],{},"font-medium",[774,1890,1891],{},[734,1892,1893],{},"_font-weight:medium",[757,1895,1896,1901],{},[774,1897,1898],{},[734,1899,1900],{},"font-semibold",[774,1902,1903],{},[734,1904,1905],{},"_font-weight:semibold",[757,1907,1908,1913],{},[774,1909,1910],{},[734,1911,1912],{},"font-bold",[774,1914,1915],{},[734,1916,1917],{},"_font-weight:bold",[757,1919,1920,1925],{},[774,1921,1922],{},[734,1923,1924],{},"leading-tight",[774,1926,1927],{},[734,1928,1929],{},"_line-height:tight",[757,1931,1932,1937],{},[774,1933,1934],{},[734,1935,1936],{},"leading-relaxed",[774,1938,1939],{},[734,1940,1941],{},"_line-height:relaxed",[757,1943,1944,1949],{},[774,1945,1946],{},[734,1947,1948],{},"text-left",[774,1950,1951],{},[734,1952,1953],{},"_text-align:left",[757,1955,1956,1961],{},[774,1957,1958],{},[734,1959,1960],{},"text-center",[774,1962,1963],{},[734,1964,1965],{},"_text-align:center",[1235,1967,1969],{"id":1968},"colors-backgrounds-and-borders","Colors, backgrounds, and borders",[698,1971,1972,1973,1187,1976,1979,1980,1983,1984,1187,1987,1187,1990,1187,1993,1187,1996,1999,2000,1533,2003,2006,2007,2010,2011,2014],{},"This is the biggest conceptual shift. Tailwind uses a fixed palette keyed by hue and shade (",[734,1974,1975],{},"blue-500",[734,1977,1978],{},"gray-100","). Styleframe uses ",[702,1981,1982],{},"semantic"," color tokens — ",[734,1985,1986],{},"primary",[734,1988,1989],{},"secondary",[734,1991,1992],{},"success",[734,1994,1995],{},"text",[734,1997,1998],{},"background"," — and generates an eleven-step lightness ramp (",[734,2001,2002],{},"-50",[734,2004,2005],{},"-950",") plus shades and tints for each one. You map Tailwind's ",[734,2008,2009],{},"blue-*"," to your own ",[734,2012,2013],{},"primary-*",", not to a fixed blue.",[751,2016,2017,2025],{},[754,2018,2019],{},[757,2020,2021,2023],{},[760,2022,1260],{},[760,2024,767],{},[769,2026,2027,2041,2053,2065,2077,2089,2101,2113,2124],{},[757,2028,2029,2033],{},[774,2030,2031],{},[734,2032,736],{},[774,2034,2035,2037,2038,790],{},[734,2036,744],{}," (or ",[734,2039,2040],{},"_background:primary-500",[757,2042,2043,2048],{},[774,2044,2045],{},[734,2046,2047],{},"bg-blue-600",[774,2049,2050],{},[734,2051,2052],{},"_background:primary-600",[757,2054,2055,2060],{},[774,2056,2057],{},[734,2058,2059],{},"text-white",[774,2061,2062],{},[734,2063,2064],{},"_color:white",[757,2066,2067,2072],{},[774,2068,2069],{},[734,2070,2071],{},"text-gray-600",[774,2073,2074],{},[734,2075,2076],{},"_color:text-weak",[757,2078,2079,2084],{},[774,2080,2081],{},[734,2082,2083],{},"bg-gray-100",[774,2085,2086],{},[734,2087,2088],{},"_background:gray-100",[757,2090,2091,2096],{},[774,2092,2093],{},[734,2094,2095],{},"bg-[#1da1f2]",[774,2097,2098],{},[734,2099,2100],{},"_background:[#1da1f2]",[757,2102,2103,2108],{},[774,2104,2105],{},[734,2106,2107],{},"rounded",[774,2109,2110],{},[734,2111,2112],{},"_border-radius:md",[757,2114,2115,2120],{},[774,2116,2117],{},[734,2118,2119],{},"rounded-lg",[774,2121,2122],{},[734,2123,1232],{},[757,2125,2126,2131],{},[774,2127,2128],{},[734,2129,2130],{},"rounded-full",[774,2132,2133],{},[734,2134,2135],{},"_border-radius:full",[707,2137,2138,2139,2142,2143,2146],{},"The generated levels (",[734,2140,2141],{},"primary-50","…",[734,2144,2145],{},"primary-950",") are computed in OKLCH, so the ramp stays perceptually even. Tailwind's numeric shades and Styleframe's levels are close but not identical values — map by role, not by exact hex.",[726,2148,2150],{"id":2149},"step-3-map-the-modifiers","Step 3: Map the modifiers",[698,2152,2153,2154,2156,2157,1551],{},"Tailwind prefixes a variant onto the class (",[734,2155,829],{},"). Styleframe uses the same idea with its own format: ",[734,2158,2159],{},"_\u003Cmodifier>:\u003Cproperty>:\u003Cvalue>",[751,2161,2162,2170],{},[754,2163,2164],{},[757,2165,2166,2168],{},[760,2167,1260],{},[760,2169,767],{},[769,2171,2172,2182,2194,2206,2218,2230,2242],{},[757,2173,2174,2178],{},[774,2175,2176],{},[734,2177,829],{},[774,2179,2180],{},[734,2181,834],{},[757,2183,2184,2189],{},[774,2185,2186],{},[734,2187,2188],{},"focus-visible:outline-2",[774,2190,2191],{},[734,2192,2193],{},"_focus-visible:outline-width:[2px]",[757,2195,2196,2201],{},[774,2197,2198],{},[734,2199,2200],{},"active:bg-blue-700",[774,2202,2203],{},[734,2204,2205],{},"_active:background:primary-700",[757,2207,2208,2213],{},[774,2209,2210],{},[734,2211,2212],{},"disabled:opacity-50",[774,2214,2215],{},[734,2216,2217],{},"_disabled:opacity:[0.5]",[757,2219,2220,2225],{},[774,2221,2222],{},[734,2223,2224],{},"dark:bg-gray-900",[774,2226,2227],{},[734,2228,2229],{},"_dark:background:gray-900",[757,2231,2232,2237],{},[774,2233,2234],{},[734,2235,2236],{},"md:flex",[774,2238,2239],{},[734,2240,2241],{},"_md:display:flex",[757,2243,2244,2249],{},[774,2245,2246],{},[734,2247,2248],{},"lg:px-8",[774,2250,2251],{},[734,2252,2253],{},"_lg:padding-inline:xl",[698,2255,2256,2258,2259,1187,2262,1187,2265,1187,2268,2271,2272,1187,2275,1187,2278,2281,2282,1187,2285,2288,2289,1187,2292,1187,2295,2298,2299,1187,2302,1187,2305,2308,2309,1187,2312,1187,2315,1187,2318,1187,2321,1197],{},[734,2257,1145],{}," registers pseudo-classes (",[734,2260,2261],{},"_hover:",[734,2263,2264],{},"_focus:",[734,2266,2267],{},"_focus-visible:",[734,2269,2270],{},"_active:","), form states (",[734,2273,2274],{},"_disabled:",[734,2276,2277],{},"_checked:",[734,2279,2280],{},"_invalid:","), structural selectors (",[734,2283,2284],{},"_first:",[734,2286,2287],{},"_odd:","), pseudo-elements (",[734,2290,2291],{},"_before:",[734,2293,2294],{},"_after:",[734,2296,2297],{},"_placeholder:","), media preferences (",[734,2300,2301],{},"_dark:",[734,2303,2304],{},"_motion-safe:",[734,2306,2307],{},"_print:","), and responsive breakpoints (",[734,2310,2311],{},"_sm:",[734,2313,2314],{},"_md:",[734,2316,2317],{},"_lg:",[734,2319,2320],{},"_xl:",[734,2322,2323],{},"_2xl:",[698,2325,2326,2327,2330,2331,1533,2333,2335,2336,2339,2340,2342,2343,2345,2346,2349,2350,2353,2354,2356,2357,2360],{},"The prefix ",[711,2328,2329],{},"names"," line up with Tailwind's — ",[734,2332,2311],{},[734,2334,2323],{},", mobile-first — but the default widths behind them do not. Styleframe uses the ",[734,2337,2338],{},"576 \u002F 768 \u002F 992 \u002F 1200 \u002F 1440"," scale, so only ",[734,2341,2314],{}," (768px) matches Tailwind's default. ",[734,2344,1145],{}," ships these breakpoint modifiers out of the box, so ",[734,2347,2348],{},"_md:padding:xl"," resolves to a real ",[734,2351,2352],{},"@media (min-width: 768px)"," block with no extra setup — the same ",[734,2355,789],{}," shape, just gated behind a ",[734,2358,2359],{},"min-width"," query:",[751,2362,2363,2373],{},[754,2364,2365],{},[757,2366,2367,2370],{},[760,2368,2369],{},"Prefix",[760,2371,2372],{},"Media query",[769,2374,2375,2386,2396,2407,2418],{},[757,2376,2377,2381],{},[774,2378,2379],{},[734,2380,2311],{},[774,2382,2383],{},[734,2384,2385],{},"@media (min-width: 576px)",[757,2387,2388,2392],{},[774,2389,2390],{},[734,2391,2314],{},[774,2393,2394],{},[734,2395,2352],{},[757,2397,2398,2402],{},[774,2399,2400],{},[734,2401,2317],{},[774,2403,2404],{},[734,2405,2406],{},"@media (min-width: 992px)",[757,2408,2409,2413],{},[774,2410,2411],{},[734,2412,2320],{},[774,2414,2415],{},[734,2416,2417],{},"@media (min-width: 1200px)",[757,2419,2420,2424],{},[774,2421,2422],{},[734,2423,2323],{},[774,2425,2426],{},[734,2427,2428],{},"@media (min-width: 1440px)",[863,2430,2434],{"className":2431,"code":2432,"language":2433,"meta":869,"style":869},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"_display:block _md:display:flex _lg:gap:xl\">…\u003C\u002Fdiv>\n","html",[734,2435,2436],{"__ignoreMap":869},[873,2437,2438,2441,2445,2448,2450,2453,2456,2458,2461,2463,2466,2468],{"class":875,"line":876},[873,2439,2440],{"class":954},"\u003C",[873,2442,2444],{"class":2443},"swJcz","div",[873,2446,2447],{"class":1078}," class",[873,2449,1085],{"class":954},[873,2451,2452],{"class":954},"\"",[873,2454,2455],{"class":883},"_display:block _md:display:flex _lg:gap:xl",[873,2457,2452],{"class":954},[873,2459,2460],{"class":954},">",[873,2462,2142],{"class":988},[873,2464,2465],{"class":954},"\u003C\u002F",[873,2467,2444],{"class":2443},[873,2469,2470],{"class":954},">\n",[707,2472,2473,2474,2477,2478,2481,2482,2484],{},"Need a different scale or your own breakpoint names? The modifiers are just functions. Turn off the defaults with ",[734,2475,2476],{},"useModifiersPreset(s, { responsive: false })"," and register your own with ",[734,2479,2480],{},"modifier()",", closing each one over the query you want. See ",[720,2483,131],{"href":132}," for the full API.",[726,2486,2488],{"id":2487},"step-4-translate-the-config","Step 4: Translate the config",[698,2490,2491,2492,2494,2495,2497],{},"Tailwind v4 configures theme values in CSS with ",[734,2493,801],{},". Styleframe configures them in TypeScript by passing options to ",[734,2496,1104],{},". Custom values merge with the defaults, so you only list what you add or change.",[860,2499,2500,2577],{},[863,2501,2506],{"className":2502,"code":2503,"filename":2504,"language":2505,"meta":869,"style":869},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@import \"tailwindcss\";\n\n@theme {\n    --color-primary: #0066ff;\n    --color-secondary: #7c3aed;\n    --font-sans: \"Inter\", sans-serif;\n    --radius-lg: 0.5rem;\n}\n","Tailwind — app.css","css",[734,2507,2508,2523,2527,2533,2544,2554,2567,2572],{"__ignoreMap":869},[873,2509,2510,2513,2516,2519,2521],{"class":875,"line":876},[873,2511,2512],{"class":950},"@import",[873,2514,2515],{"class":954}," \"",[873,2517,2518],{"class":883},"tailwindcss",[873,2520,2452],{"class":954},[873,2522,964],{"class":954},[873,2524,2525],{"class":875,"line":890},[873,2526,1072],{"emptyLinePlaceholder":233},[873,2528,2529,2531],{"class":875,"line":995},[873,2530,801],{"class":950},[873,2532,983],{"class":954},[873,2534,2535,2538,2541],{"class":875,"line":1003},[873,2536,2537],{"class":988},"    --color-primary: ",[873,2539,2540],{"class":954},"#",[873,2542,2543],{"class":988},"0066ff;\n",[873,2545,2546,2549,2551],{"class":875,"line":1011},[873,2547,2548],{"class":988},"    --color-secondary: ",[873,2550,2540],{"class":954},[873,2552,2553],{"class":988},"7c3aed;\n",[873,2555,2556,2559,2562,2565],{"class":875,"line":1019},[873,2557,2558],{"class":988},"    --font-sans: \"Inter\"",[873,2560,2561],{"class":954},",",[873,2563,2564],{"class":879}," sans-serif",[873,2566,964],{"class":988},[873,2568,2569],{"class":875,"line":1027},[873,2570,2571],{"class":988},"    --radius-lg: 0.5rem;\n",[873,2573,2574],{"class":875,"line":1045},[873,2575,2576],{"class":988},"}\n",[863,2578,2581],{"className":940,"code":2579,"filename":2580,"language":943,"meta":869,"style":869},"import { useDesignTokensPreset } from '@styleframe\u002Ftheme';\nimport { styleframe } from 'styleframe';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s, {\n    colors: {\n        primary: '#0066ff',\n        secondary: '#7c3aed',\n    },\n    fontFamily: {\n        base: '\"Inter\", sans-serif',\n    },\n});\n\nexport default s;\n","Styleframe — styleframe.config.ts",[734,2582,2583,2604,2624,2628,2642,2646,2657,2667,2683,2699,2704,2713,2729,2733,2741,2745],{"__ignoreMap":869},[873,2584,2585,2587,2589,2592,2594,2596,2598,2600,2602],{"class":875,"line":876},[873,2586,951],{"class":950},[873,2588,1050],{"class":954},[873,2590,2591],{"class":988}," useDesignTokensPreset",[873,2593,1055],{"class":954},[873,2595,1033],{"class":950},[873,2597,955],{"class":954},[873,2599,1038],{"class":883},[873,2601,961],{"class":954},[873,2603,964],{"class":954},[873,2605,2606,2608,2610,2612,2614,2616,2618,2620,2622],{"class":875,"line":890},[873,2607,951],{"class":950},[873,2609,1050],{"class":954},[873,2611,884],{"class":988},[873,2613,1055],{"class":954},[873,2615,1033],{"class":950},[873,2617,955],{"class":954},[873,2619,1062],{"class":883},[873,2621,961],{"class":954},[873,2623,964],{"class":954},[873,2625,2626],{"class":875,"line":995},[873,2627,1072],{"emptyLinePlaceholder":233},[873,2629,2630,2632,2634,2636,2638,2640],{"class":875,"line":1003},[873,2631,1079],{"class":1078},[873,2633,1082],{"class":988},[873,2635,1085],{"class":954},[873,2637,884],{"class":1088},[873,2639,1091],{"class":988},[873,2641,964],{"class":954},[873,2643,2644],{"class":875,"line":1011},[873,2645,1072],{"emptyLinePlaceholder":233},[873,2647,2648,2650,2653,2655],{"class":875,"line":1019},[873,2649,1104],{"class":1088},[873,2651,2652],{"class":988},"(s",[873,2654,2561],{"class":954},[873,2656,983],{"class":954},[873,2658,2659,2662,2665],{"class":875,"line":1027},[873,2660,2661],{"class":2443},"    colors",[873,2663,2664],{"class":954},":",[873,2666,983],{"class":954},[873,2668,2669,2672,2674,2676,2679,2681],{"class":875,"line":1045},[873,2670,2671],{"class":2443},"        primary",[873,2673,2664],{"class":954},[873,2675,955],{"class":954},[873,2677,2678],{"class":883},"#0066ff",[873,2680,961],{"class":954},[873,2682,992],{"class":954},[873,2684,2685,2688,2690,2692,2695,2697],{"class":875,"line":1069},[873,2686,2687],{"class":2443},"        secondary",[873,2689,2664],{"class":954},[873,2691,955],{"class":954},[873,2693,2694],{"class":883},"#7c3aed",[873,2696,961],{"class":954},[873,2698,992],{"class":954},[873,2700,2701],{"class":875,"line":1075},[873,2702,2703],{"class":954},"    },\n",[873,2705,2706,2709,2711],{"class":875,"line":1096},[873,2707,2708],{"class":2443},"    fontFamily",[873,2710,2664],{"class":954},[873,2712,983],{"class":954},[873,2714,2715,2718,2720,2722,2725,2727],{"class":875,"line":1101},[873,2716,2717],{"class":2443},"        base",[873,2719,2664],{"class":954},[873,2721,955],{"class":954},[873,2723,2724],{"class":883},"\"Inter\", sans-serif",[873,2726,961],{"class":954},[873,2728,992],{"class":954},[873,2730,2731],{"class":875,"line":1112},[873,2732,2703],{"class":954},[873,2734,2735,2737,2739],{"class":875,"line":1122},[873,2736,1030],{"class":954},[873,2738,790],{"class":988},[873,2740,964],{"class":954},[873,2742,2743],{"class":875,"line":1132},[873,2744,1072],{"emptyLinePlaceholder":233},[873,2746,2747,2749,2751,2753],{"class":875,"line":1142},[873,2748,1160],{"class":950},[873,2750,1163],{"class":950},[873,2752,1166],{"class":988},[873,2754,964],{"class":954},[698,2756,2757,2758,2142,2760,2762,2763,2765],{},"One config option replaces several Tailwind concerns at once. Because Styleframe generates the full ",[734,2759,2141],{},[734,2761,2145],{}," ramp from a single ",[734,2764,1986],{}," value, you rarely hand-list shades the way a Tailwind palette does.",[1235,2767,2769],{"id":2768},"dark-mode","Dark mode",[698,2771,2772,2773,2776,2777,2779,2780,2783],{},"In Tailwind you toggle the ",[734,2774,2775],{},"dark"," variant and repeat colors at every call site (",[734,2778,2224],{},"). In Styleframe, dark mode is a ",[702,2781,2782],{},"token override",": declare the dark values once and every recipe and utility that references those tokens updates automatically.",[863,2785,2787],{"className":940,"code":2786,"filename":970,"language":943,"meta":869,"style":869},"useDesignTokensPreset(s, {\n    colors: {\n        primary: '#0066ff',\n        background: '#ffffff',\n        text: '#0f172a',\n    },\n    themes: {\n        dark: {\n            colors: {\n                primary: '#60a5fa',\n                background: '#0f172a',\n                text: '#f1f5f9',\n            },\n        },\n    },\n});\n",[734,2788,2789,2799,2807,2821,2837,2853,2857,2866,2875,2884,2900,2915,2931,2936,2941,2945],{"__ignoreMap":869},[873,2790,2791,2793,2795,2797],{"class":875,"line":876},[873,2792,1104],{"class":1088},[873,2794,2652],{"class":988},[873,2796,2561],{"class":954},[873,2798,983],{"class":954},[873,2800,2801,2803,2805],{"class":875,"line":890},[873,2802,2661],{"class":2443},[873,2804,2664],{"class":954},[873,2806,983],{"class":954},[873,2808,2809,2811,2813,2815,2817,2819],{"class":875,"line":995},[873,2810,2671],{"class":2443},[873,2812,2664],{"class":954},[873,2814,955],{"class":954},[873,2816,2678],{"class":883},[873,2818,961],{"class":954},[873,2820,992],{"class":954},[873,2822,2823,2826,2828,2830,2833,2835],{"class":875,"line":1003},[873,2824,2825],{"class":2443},"        background",[873,2827,2664],{"class":954},[873,2829,955],{"class":954},[873,2831,2832],{"class":883},"#ffffff",[873,2834,961],{"class":954},[873,2836,992],{"class":954},[873,2838,2839,2842,2844,2846,2849,2851],{"class":875,"line":1011},[873,2840,2841],{"class":2443},"        text",[873,2843,2664],{"class":954},[873,2845,955],{"class":954},[873,2847,2848],{"class":883},"#0f172a",[873,2850,961],{"class":954},[873,2852,992],{"class":954},[873,2854,2855],{"class":875,"line":1019},[873,2856,2703],{"class":954},[873,2858,2859,2862,2864],{"class":875,"line":1027},[873,2860,2861],{"class":2443},"    themes",[873,2863,2664],{"class":954},[873,2865,983],{"class":954},[873,2867,2868,2871,2873],{"class":875,"line":1045},[873,2869,2870],{"class":2443},"        dark",[873,2872,2664],{"class":954},[873,2874,983],{"class":954},[873,2876,2877,2880,2882],{"class":875,"line":1069},[873,2878,2879],{"class":2443},"            colors",[873,2881,2664],{"class":954},[873,2883,983],{"class":954},[873,2885,2886,2889,2891,2893,2896,2898],{"class":875,"line":1075},[873,2887,2888],{"class":2443},"                primary",[873,2890,2664],{"class":954},[873,2892,955],{"class":954},[873,2894,2895],{"class":883},"#60a5fa",[873,2897,961],{"class":954},[873,2899,992],{"class":954},[873,2901,2902,2905,2907,2909,2911,2913],{"class":875,"line":1096},[873,2903,2904],{"class":2443},"                background",[873,2906,2664],{"class":954},[873,2908,955],{"class":954},[873,2910,2848],{"class":883},[873,2912,961],{"class":954},[873,2914,992],{"class":954},[873,2916,2917,2920,2922,2924,2927,2929],{"class":875,"line":1101},[873,2918,2919],{"class":2443},"                text",[873,2921,2664],{"class":954},[873,2923,955],{"class":954},[873,2925,2926],{"class":883},"#f1f5f9",[873,2928,961],{"class":954},[873,2930,992],{"class":954},[873,2932,2933],{"class":875,"line":1112},[873,2934,2935],{"class":954},"            },\n",[873,2937,2938],{"class":875,"line":1122},[873,2939,2940],{"class":954},"        },\n",[873,2942,2943],{"class":875,"line":1132},[873,2944,2703],{"class":954},[873,2946,2947,2949,2951],{"class":875,"line":1142},[873,2948,1030],{"class":954},[873,2950,790],{"class":988},[873,2952,964],{"class":954},[698,2954,2955,2956,2959],{},"The preset emits a ",[734,2957,2958],{},"[data-theme=\"dark\"]"," block. Toggle it on the root element:",[863,2961,2963],{"className":940,"code":2962,"language":943,"meta":869,"style":869},"document.documentElement.dataset.theme = 'dark';\n",[734,2964,2965],{"__ignoreMap":869},[873,2966,2967,2970,2972,2975,2977,2980,2982,2985,2987,2989,2991,2993],{"class":875,"line":876},[873,2968,2969],{"class":988},"document",[873,2971,1551],{"class":954},[873,2973,2974],{"class":988},"documentElement",[873,2976,1551],{"class":954},[873,2978,2979],{"class":988},"dataset",[873,2981,1551],{"class":954},[873,2983,2984],{"class":988},"theme ",[873,2986,1085],{"class":954},[873,2988,955],{"class":954},[873,2990,2775],{"class":883},[873,2992,961],{"class":954},[873,2994,964],{"class":954},[698,2996,2997,2998,3002],{},"The ",[720,2999,3001],{"href":3000},"\u002Fdocs\u002Fgetting-started\u002Fguides\u002Ftheme-switcher","Theme Switcher guide"," covers system-preference detection and persistence.",[726,3004,3006],{"id":3005},"step-5-replace-variant-helpers-with-recipes","Step 5: Replace variant helpers with recipes",[698,3008,3009,3010,3016,3017,3020],{},"Tailwind has no built-in component variant system, so teams reach for ",[720,3011,3015],{"href":3012,"rel":3013},"https:\u002F\u002Fcva.style",[3014],"nofollow","CVA"," or Tailwind Variants. Styleframe ships that pattern in the core API as ",[702,3018,3019],{},"recipes"," — and because they compile to typed functions, invalid variants are caught at build time instead of failing silently in a class string.",[860,3022,3023,3231],{},[863,3024,3027],{"className":940,"code":3025,"filename":3026,"language":943,"meta":869,"style":869},"import { cva } from 'class-variance-authority';\n\nexport const button = cva('rounded font-medium', {\n    variants: {\n        color: {\n            primary: 'bg-blue-500 text-white hover:bg-blue-600',\n            secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',\n        },\n        size: {\n            sm: 'text-sm px-3 py-1',\n            lg: 'text-lg px-6 py-3',\n        },\n    },\n    defaultVariants: { color: 'primary', size: 'sm' },\n});\n","Tailwind + CVA",[734,3028,3029,3051,3055,3083,3092,3101,3117,3133,3137,3146,3162,3178,3182,3186,3223],{"__ignoreMap":869},[873,3030,3031,3033,3035,3038,3040,3042,3044,3047,3049],{"class":875,"line":876},[873,3032,951],{"class":950},[873,3034,1050],{"class":954},[873,3036,3037],{"class":988}," cva",[873,3039,1055],{"class":954},[873,3041,1033],{"class":950},[873,3043,955],{"class":954},[873,3045,3046],{"class":883},"class-variance-authority",[873,3048,961],{"class":954},[873,3050,964],{"class":954},[873,3052,3053],{"class":875,"line":890},[873,3054,1072],{"emptyLinePlaceholder":233},[873,3056,3057,3059,3062,3065,3067,3069,3072,3074,3077,3079,3081],{"class":875,"line":995},[873,3058,1160],{"class":950},[873,3060,3061],{"class":1078}," const",[873,3063,3064],{"class":988}," button ",[873,3066,1085],{"class":954},[873,3068,3037],{"class":1088},[873,3070,3071],{"class":988},"(",[873,3073,961],{"class":954},[873,3075,3076],{"class":883},"rounded font-medium",[873,3078,961],{"class":954},[873,3080,2561],{"class":954},[873,3082,983],{"class":954},[873,3084,3085,3088,3090],{"class":875,"line":1003},[873,3086,3087],{"class":2443},"    variants",[873,3089,2664],{"class":954},[873,3091,983],{"class":954},[873,3093,3094,3097,3099],{"class":875,"line":1011},[873,3095,3096],{"class":2443},"        color",[873,3098,2664],{"class":954},[873,3100,983],{"class":954},[873,3102,3103,3106,3108,3110,3113,3115],{"class":875,"line":1019},[873,3104,3105],{"class":2443},"            primary",[873,3107,2664],{"class":954},[873,3109,955],{"class":954},[873,3111,3112],{"class":883},"bg-blue-500 text-white hover:bg-blue-600",[873,3114,961],{"class":954},[873,3116,992],{"class":954},[873,3118,3119,3122,3124,3126,3129,3131],{"class":875,"line":1027},[873,3120,3121],{"class":2443},"            secondary",[873,3123,2664],{"class":954},[873,3125,955],{"class":954},[873,3127,3128],{"class":883},"bg-gray-200 text-gray-800 hover:bg-gray-300",[873,3130,961],{"class":954},[873,3132,992],{"class":954},[873,3134,3135],{"class":875,"line":1045},[873,3136,2940],{"class":954},[873,3138,3139,3142,3144],{"class":875,"line":1069},[873,3140,3141],{"class":2443},"        size",[873,3143,2664],{"class":954},[873,3145,983],{"class":954},[873,3147,3148,3151,3153,3155,3158,3160],{"class":875,"line":1075},[873,3149,3150],{"class":2443},"            sm",[873,3152,2664],{"class":954},[873,3154,955],{"class":954},[873,3156,3157],{"class":883},"text-sm px-3 py-1",[873,3159,961],{"class":954},[873,3161,992],{"class":954},[873,3163,3164,3167,3169,3171,3174,3176],{"class":875,"line":1096},[873,3165,3166],{"class":2443},"            lg",[873,3168,2664],{"class":954},[873,3170,955],{"class":954},[873,3172,3173],{"class":883},"text-lg px-6 py-3",[873,3175,961],{"class":954},[873,3177,992],{"class":954},[873,3179,3180],{"class":875,"line":1101},[873,3181,2940],{"class":954},[873,3183,3184],{"class":875,"line":1112},[873,3185,2703],{"class":954},[873,3187,3188,3191,3193,3195,3198,3200,3202,3204,3206,3208,3211,3213,3215,3218,3220],{"class":875,"line":1122},[873,3189,3190],{"class":2443},"    defaultVariants",[873,3192,2664],{"class":954},[873,3194,1050],{"class":954},[873,3196,3197],{"class":2443}," color",[873,3199,2664],{"class":954},[873,3201,955],{"class":954},[873,3203,1986],{"class":883},[873,3205,961],{"class":954},[873,3207,2561],{"class":954},[873,3209,3210],{"class":2443}," size",[873,3212,2664],{"class":954},[873,3214,955],{"class":954},[873,3216,3217],{"class":883},"sm",[873,3219,961],{"class":954},[873,3221,3222],{"class":954}," },\n",[873,3224,3225,3227,3229],{"class":875,"line":1132},[873,3226,1030],{"class":954},[873,3228,790],{"class":988},[873,3230,964],{"class":954},[863,3232,3235],{"className":940,"code":3233,"filename":3234,"language":943,"meta":869,"style":869},"import { styleframe } from 'styleframe';\n\nconst s = styleframe();\nconst { recipe } = s;\n\nrecipe({\n    name: 'button',\n    base: {\n        borderRadius: '@border-radius.md',\n        fontWeight: '@font-weight.medium',\n    },\n    variants: {\n        color: {\n            primary: {\n                background: '@color.primary',\n                color: '@color.white',\n                'hover': { background: '@color.primary-600' },\n            },\n            secondary: {\n                background: '@color.gray-200',\n                color: '@color.text',\n                'hover': { background: '@color.gray-300' },\n            },\n        },\n        size: {\n            sm: { fontSize: '@font-size.sm', paddingInline: '@spacing.sm', paddingBlock: '@spacing.2xs' },\n            lg: { fontSize: '@font-size.lg', paddingInline: '@spacing.lg', paddingBlock: '@spacing.sm' },\n        },\n    },\n    defaultVariants: { color: 'primary', size: 'sm' },\n});\n\nexport default s;\n","Styleframe recipe",[734,3236,3237,3257,3261,3275,3293,3297,3307,3323,3332,3348,3364,3368,3376,3384,3392,3407,3423,3451,3455,3464,3480,3496,3522,3527,3532,3541,3592,3639,3644,3649,3682,3691,3696],{"__ignoreMap":869},[873,3238,3239,3241,3243,3245,3247,3249,3251,3253,3255],{"class":875,"line":876},[873,3240,951],{"class":950},[873,3242,1050],{"class":954},[873,3244,884],{"class":988},[873,3246,1055],{"class":954},[873,3248,1033],{"class":950},[873,3250,955],{"class":954},[873,3252,1062],{"class":883},[873,3254,961],{"class":954},[873,3256,964],{"class":954},[873,3258,3259],{"class":875,"line":890},[873,3260,1072],{"emptyLinePlaceholder":233},[873,3262,3263,3265,3267,3269,3271,3273],{"class":875,"line":995},[873,3264,1079],{"class":1078},[873,3266,1082],{"class":988},[873,3268,1085],{"class":954},[873,3270,884],{"class":1088},[873,3272,1091],{"class":988},[873,3274,964],{"class":954},[873,3276,3277,3279,3281,3284,3286,3289,3291],{"class":875,"line":1003},[873,3278,1079],{"class":1078},[873,3280,1050],{"class":954},[873,3282,3283],{"class":988}," recipe ",[873,3285,1030],{"class":954},[873,3287,3288],{"class":954}," =",[873,3290,1166],{"class":988},[873,3292,964],{"class":954},[873,3294,3295],{"class":875,"line":1011},[873,3296,1072],{"emptyLinePlaceholder":233},[873,3298,3299,3302,3304],{"class":875,"line":1019},[873,3300,3301],{"class":1088},"recipe",[873,3303,3071],{"class":988},[873,3305,3306],{"class":954},"{\n",[873,3308,3309,3312,3314,3316,3319,3321],{"class":875,"line":1027},[873,3310,3311],{"class":2443},"    name",[873,3313,2664],{"class":954},[873,3315,955],{"class":954},[873,3317,3318],{"class":883},"button",[873,3320,961],{"class":954},[873,3322,992],{"class":954},[873,3324,3325,3328,3330],{"class":875,"line":1045},[873,3326,3327],{"class":2443},"    base",[873,3329,2664],{"class":954},[873,3331,983],{"class":954},[873,3333,3334,3337,3339,3341,3344,3346],{"class":875,"line":1069},[873,3335,3336],{"class":2443},"        borderRadius",[873,3338,2664],{"class":954},[873,3340,955],{"class":954},[873,3342,3343],{"class":883},"@border-radius.md",[873,3345,961],{"class":954},[873,3347,992],{"class":954},[873,3349,3350,3353,3355,3357,3360,3362],{"class":875,"line":1075},[873,3351,3352],{"class":2443},"        fontWeight",[873,3354,2664],{"class":954},[873,3356,955],{"class":954},[873,3358,3359],{"class":883},"@font-weight.medium",[873,3361,961],{"class":954},[873,3363,992],{"class":954},[873,3365,3366],{"class":875,"line":1096},[873,3367,2703],{"class":954},[873,3369,3370,3372,3374],{"class":875,"line":1101},[873,3371,3087],{"class":2443},[873,3373,2664],{"class":954},[873,3375,983],{"class":954},[873,3377,3378,3380,3382],{"class":875,"line":1112},[873,3379,3096],{"class":2443},[873,3381,2664],{"class":954},[873,3383,983],{"class":954},[873,3385,3386,3388,3390],{"class":875,"line":1122},[873,3387,3105],{"class":2443},[873,3389,2664],{"class":954},[873,3391,983],{"class":954},[873,3393,3394,3396,3398,3400,3403,3405],{"class":875,"line":1132},[873,3395,2904],{"class":2443},[873,3397,2664],{"class":954},[873,3399,955],{"class":954},[873,3401,3402],{"class":883},"@color.primary",[873,3404,961],{"class":954},[873,3406,992],{"class":954},[873,3408,3409,3412,3414,3416,3419,3421],{"class":875,"line":1142},[873,3410,3411],{"class":2443},"                color",[873,3413,2664],{"class":954},[873,3415,955],{"class":954},[873,3417,3418],{"class":883},"@color.white",[873,3420,961],{"class":954},[873,3422,992],{"class":954},[873,3424,3425,3428,3431,3433,3435,3437,3440,3442,3444,3447,3449],{"class":875,"line":1152},[873,3426,3427],{"class":954},"                '",[873,3429,3430],{"class":2443},"hover",[873,3432,961],{"class":954},[873,3434,2664],{"class":954},[873,3436,1050],{"class":954},[873,3438,3439],{"class":2443}," background",[873,3441,2664],{"class":954},[873,3443,955],{"class":954},[873,3445,3446],{"class":883},"@color.primary-600",[873,3448,961],{"class":954},[873,3450,3222],{"class":954},[873,3452,3453],{"class":875,"line":1157},[873,3454,2935],{"class":954},[873,3456,3458,3460,3462],{"class":875,"line":3457},19,[873,3459,3121],{"class":2443},[873,3461,2664],{"class":954},[873,3463,983],{"class":954},[873,3465,3467,3469,3471,3473,3476,3478],{"class":875,"line":3466},20,[873,3468,2904],{"class":2443},[873,3470,2664],{"class":954},[873,3472,955],{"class":954},[873,3474,3475],{"class":883},"@color.gray-200",[873,3477,961],{"class":954},[873,3479,992],{"class":954},[873,3481,3483,3485,3487,3489,3492,3494],{"class":875,"line":3482},21,[873,3484,3411],{"class":2443},[873,3486,2664],{"class":954},[873,3488,955],{"class":954},[873,3490,3491],{"class":883},"@color.text",[873,3493,961],{"class":954},[873,3495,992],{"class":954},[873,3497,3499,3501,3503,3505,3507,3509,3511,3513,3515,3518,3520],{"class":875,"line":3498},22,[873,3500,3427],{"class":954},[873,3502,3430],{"class":2443},[873,3504,961],{"class":954},[873,3506,2664],{"class":954},[873,3508,1050],{"class":954},[873,3510,3439],{"class":2443},[873,3512,2664],{"class":954},[873,3514,955],{"class":954},[873,3516,3517],{"class":883},"@color.gray-300",[873,3519,961],{"class":954},[873,3521,3222],{"class":954},[873,3523,3525],{"class":875,"line":3524},23,[873,3526,2935],{"class":954},[873,3528,3530],{"class":875,"line":3529},24,[873,3531,2940],{"class":954},[873,3533,3535,3537,3539],{"class":875,"line":3534},25,[873,3536,3141],{"class":2443},[873,3538,2664],{"class":954},[873,3540,983],{"class":954},[873,3542,3544,3546,3548,3550,3553,3555,3557,3560,3562,3564,3567,3569,3571,3574,3576,3578,3581,3583,3585,3588,3590],{"class":875,"line":3543},26,[873,3545,3150],{"class":2443},[873,3547,2664],{"class":954},[873,3549,1050],{"class":954},[873,3551,3552],{"class":2443}," fontSize",[873,3554,2664],{"class":954},[873,3556,955],{"class":954},[873,3558,3559],{"class":883},"@font-size.sm",[873,3561,961],{"class":954},[873,3563,2561],{"class":954},[873,3565,3566],{"class":2443}," paddingInline",[873,3568,2664],{"class":954},[873,3570,955],{"class":954},[873,3572,3573],{"class":883},"@spacing.sm",[873,3575,961],{"class":954},[873,3577,2561],{"class":954},[873,3579,3580],{"class":2443}," paddingBlock",[873,3582,2664],{"class":954},[873,3584,955],{"class":954},[873,3586,3587],{"class":883},"@spacing.2xs",[873,3589,961],{"class":954},[873,3591,3222],{"class":954},[873,3593,3595,3597,3599,3601,3603,3605,3607,3610,3612,3614,3616,3618,3620,3623,3625,3627,3629,3631,3633,3635,3637],{"class":875,"line":3594},27,[873,3596,3166],{"class":2443},[873,3598,2664],{"class":954},[873,3600,1050],{"class":954},[873,3602,3552],{"class":2443},[873,3604,2664],{"class":954},[873,3606,955],{"class":954},[873,3608,3609],{"class":883},"@font-size.lg",[873,3611,961],{"class":954},[873,3613,2561],{"class":954},[873,3615,3566],{"class":2443},[873,3617,2664],{"class":954},[873,3619,955],{"class":954},[873,3621,3622],{"class":883},"@spacing.lg",[873,3624,961],{"class":954},[873,3626,2561],{"class":954},[873,3628,3580],{"class":2443},[873,3630,2664],{"class":954},[873,3632,955],{"class":954},[873,3634,3573],{"class":883},[873,3636,961],{"class":954},[873,3638,3222],{"class":954},[873,3640,3642],{"class":875,"line":3641},28,[873,3643,2940],{"class":954},[873,3645,3647],{"class":875,"line":3646},29,[873,3648,2703],{"class":954},[873,3650,3652,3654,3656,3658,3660,3662,3664,3666,3668,3670,3672,3674,3676,3678,3680],{"class":875,"line":3651},30,[873,3653,3190],{"class":2443},[873,3655,2664],{"class":954},[873,3657,1050],{"class":954},[873,3659,3197],{"class":2443},[873,3661,2664],{"class":954},[873,3663,955],{"class":954},[873,3665,1986],{"class":883},[873,3667,961],{"class":954},[873,3669,2561],{"class":954},[873,3671,3210],{"class":2443},[873,3673,2664],{"class":954},[873,3675,955],{"class":954},[873,3677,3217],{"class":883},[873,3679,961],{"class":954},[873,3681,3222],{"class":954},[873,3683,3685,3687,3689],{"class":875,"line":3684},31,[873,3686,1030],{"class":954},[873,3688,790],{"class":988},[873,3690,964],{"class":954},[873,3692,3694],{"class":875,"line":3693},32,[873,3695,1072],{"emptyLinePlaceholder":233},[873,3697,3699,3701,3703,3705],{"class":875,"line":3698},33,[873,3700,1160],{"class":950},[873,3702,1163],{"class":950},[873,3704,1166],{"class":988},[873,3706,964],{"class":954},[698,3708,3709,3710,1551],{},"This block layers on the Step 1 config — it references utilities and tokens the presets register, so run it on that same instance rather than a bare ",[734,3711,3712],{},"styleframe()",[698,3714,3715,3716,3719],{},"Register the recipe in a co-located ",[734,3717,3718],{},"*.styleframe.ts"," file and import the generated function to compute classes:",[863,3721,3724],{"className":940,"code":3722,"filename":3723,"language":943,"meta":869,"style":869},"import { useButtonRecipe } from '@styleframe\u002Ftheme';\nimport { styleframe } from 'virtual:styleframe';\n\nconst s = styleframe();\n\nexport const button = useButtonRecipe(s);\n\nexport default s;\n","src\u002Fcomponents\u002Fbutton.styleframe.ts",[734,3725,3726,3747,3768,3772,3786,3790,3806,3810],{"__ignoreMap":869},[873,3727,3728,3730,3732,3735,3737,3739,3741,3743,3745],{"class":875,"line":876},[873,3729,951],{"class":950},[873,3731,1050],{"class":954},[873,3733,3734],{"class":988}," useButtonRecipe",[873,3736,1055],{"class":954},[873,3738,1033],{"class":950},[873,3740,955],{"class":954},[873,3742,1038],{"class":883},[873,3744,961],{"class":954},[873,3746,964],{"class":954},[873,3748,3749,3751,3753,3755,3757,3759,3761,3764,3766],{"class":875,"line":890},[873,3750,951],{"class":950},[873,3752,1050],{"class":954},[873,3754,884],{"class":988},[873,3756,1055],{"class":954},[873,3758,1033],{"class":950},[873,3760,955],{"class":954},[873,3762,3763],{"class":883},"virtual:styleframe",[873,3765,961],{"class":954},[873,3767,964],{"class":954},[873,3769,3770],{"class":875,"line":995},[873,3771,1072],{"emptyLinePlaceholder":233},[873,3773,3774,3776,3778,3780,3782,3784],{"class":875,"line":1003},[873,3775,1079],{"class":1078},[873,3777,1082],{"class":988},[873,3779,1085],{"class":954},[873,3781,884],{"class":1088},[873,3783,1091],{"class":988},[873,3785,964],{"class":954},[873,3787,3788],{"class":875,"line":1011},[873,3789,1072],{"emptyLinePlaceholder":233},[873,3791,3792,3794,3796,3798,3800,3802,3804],{"class":875,"line":1019},[873,3793,1160],{"class":950},[873,3795,3061],{"class":1078},[873,3797,3064],{"class":988},[873,3799,1085],{"class":954},[873,3801,3734],{"class":1088},[873,3803,1107],{"class":988},[873,3805,964],{"class":954},[873,3807,3808],{"class":875,"line":1027},[873,3809,1072],{"emptyLinePlaceholder":233},[873,3811,3812,3814,3816,3818],{"class":875,"line":1045},[873,3813,1160],{"class":950},[873,3815,1163],{"class":950},[873,3817,1166],{"class":988},[873,3819,964],{"class":954},[707,3821,3822,3823,3826,3827,3830,3831,3834,3835,3838],{},"You don't have to author the button recipe by hand. ",[734,3824,3825],{},"useButtonRecipe"," ships a full color × variant × size matrix out of the box. Pass ",[734,3828,3829],{},"filter"," to prune combinations you don't use: ",[734,3832,3833],{},"useButtonRecipe(s, { filter: { variant: ['solid', 'outline'] } })",". Browse the ",[720,3836,3837],{"href":369},"component catalog"," for the rest.",[726,3840,3842],{"id":3841},"a-full-component-before-and-after","A full component, before and after",[860,3844,3845,3882],{},[863,3846,3848],{"className":2431,"code":3847,"filename":1260,"language":2433,"meta":869,"style":869},"\u003Cbutton class=\"px-4 py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600\">\n  Save changes\n\u003C\u002Fbutton>\n",[734,3849,3850,3869,3874],{"__ignoreMap":869},[873,3851,3852,3854,3856,3858,3860,3862,3865,3867],{"class":875,"line":876},[873,3853,2440],{"class":954},[873,3855,3318],{"class":2443},[873,3857,2447],{"class":1078},[873,3859,1085],{"class":954},[873,3861,2452],{"class":954},[873,3863,3864],{"class":883},"px-4 py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600",[873,3866,2452],{"class":954},[873,3868,2470],{"class":954},[873,3870,3871],{"class":875,"line":890},[873,3872,3873],{"class":988},"  Save changes\n",[873,3875,3876,3878,3880],{"class":875,"line":995},[873,3877,2465],{"class":954},[873,3879,3318],{"class":2443},[873,3881,2470],{"class":954},[863,3883,3885],{"className":2431,"code":3884,"filename":767,"language":2433,"meta":869,"style":869},"\u003Cbutton class=\"_padding-inline:md _padding-block:xs _background:primary _color:white _font-weight:semibold _border-radius:md _hover:background:primary-600\">\n  Save changes\n\u003C\u002Fbutton>\n",[734,3886,3887,3906,3910],{"__ignoreMap":869},[873,3888,3889,3891,3893,3895,3897,3899,3902,3904],{"class":875,"line":876},[873,3890,2440],{"class":954},[873,3892,3318],{"class":2443},[873,3894,2447],{"class":1078},[873,3896,1085],{"class":954},[873,3898,2452],{"class":954},[873,3900,3901],{"class":883},"_padding-inline:md _padding-block:xs _background:primary _color:white _font-weight:semibold _border-radius:md _hover:background:primary-600",[873,3903,2452],{"class":954},[873,3905,2470],{"class":954},[873,3907,3908],{"class":875,"line":890},[873,3909,3873],{"class":988},[873,3911,3912,3914,3916],{"class":875,"line":995},[873,3913,2465],{"class":954},[873,3915,3318],{"class":2443},[873,3917,2470],{"class":954},[698,3919,3920],{},"The shape is the same; the class names now point at your tokens instead of a fixed palette. For anything beyond one-off styling, reach for a recipe so the variant contract lives in one typed place.",[726,3922,3924],{"id":3923},"what-to-watch-for","What to watch for",[751,3926,3927,3937],{},[754,3928,3929],{},[757,3930,3931,3934],{},[760,3932,3933],{},"If you relied on…",[760,3935,3936],{},"In Styleframe…",[769,3938,3939,3954,3973,3987,4001,4016],{},[757,3940,3941,3947],{},[774,3942,3943,3944,790],{},"Arbitrary values everywhere (",[734,3945,3946],{},"p-[13px]",[774,3948,3949,3950,3953],{},"Supported (",[734,3951,3952],{},"_padding:[13px]","), but prefer tokens for consistency",[757,3955,3956,3961],{},[774,3957,3958,3959,790],{},"Responsive prefixes (",[734,3960,2236],{},[774,3962,3963,3964,3966,3967,3969,3970,3972],{},"Built-in ",[734,3965,2311],{},"–",[734,3968,2323],{}," prefixes — same names, but only ",[734,3971,2314],{}," shares Tailwind's default width (Step 3)",[757,3974,3975,3980],{},[774,3976,3977,3978,790],{},"A fixed color palette (",[734,3979,1975],{},[774,3981,3982,3983,3986],{},"Semantic tokens with generated ",[734,3984,3985],{},"-50…-950"," levels",[757,3988,3989,3995],{},[774,3990,3991,3994],{},[734,3992,3993],{},"@apply"," to build components",[774,3996,3997,3998,4000],{},"Author a ",[702,3999,3301],{}," — a typed variant function",[757,4002,4003,4006],{},[774,4004,4005],{},"CVA \u002F Tailwind Variants",[774,4007,3963,4008,4011,4012,4015],{},[734,4009,4010],{},"recipe()"," and the ",[734,4013,4014],{},"use*Recipe"," composables",[757,4017,4018,4021],{},[774,4019,4020],{},"The Tailwind IDE plugin",[774,4022,4023],{},"TypeScript autocomplete and compile-time checks",[726,4025,4027],{"id":4026},"next-steps","Next steps",[4029,4030,4031,4042,4052,4062],"ul",{},[4032,4033,4034,4037,4038,1551],"li",{},[702,4035,4036],{},"Get the whole system fast:"," ",[720,4039,4041],{"href":4040},"\u002Fdocs\u002Fgetting-started\u002Fguides\u002Fcreate-design-system-in-under-15-minutes","Create a Design System in Under 15 Minutes",[4032,4043,4044,4047,4048,4051],{},[702,4045,4046],{},"Go deep on tokens:"," the ",[720,4049,4050],{"href":181},"Design Tokens Preset API"," documents every option and default.",[4032,4053,4054,4037,4057,4059,4060,1551],{},[702,4055,4056],{},"Master utilities and modifiers:",[720,4058,126],{"href":127}," and ",[720,4061,131],{"href":132},[4032,4063,4064,4047,4067,4070],{},[702,4065,4066],{},"Author recipes:",[720,4068,4069],{"href":142},"Recipes API"," covers variants, compound variants, and defaults.",[4072,4073,4074],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":869,"searchDepth":890,"depth":890,"links":4076},[4077,4078,4079,4086,4087,4090,4091,4092,4093],{"id":728,"depth":890,"text":729},{"id":854,"depth":890,"text":855},{"id":1179,"depth":890,"text":1180,"children":4080},[4081,4082,4083,4084,4085],{"id":1237,"depth":995,"text":239},{"id":1554,"depth":995,"text":1555},{"id":1734,"depth":995,"text":616},{"id":1821,"depth":995,"text":244},{"id":1968,"depth":995,"text":1969},{"id":2149,"depth":890,"text":2150},{"id":2487,"depth":890,"text":2488,"children":4088},[4089],{"id":2768,"depth":995,"text":2769},{"id":3005,"depth":890,"text":3006},{"id":3841,"depth":890,"text":3842},{"id":3923,"depth":890,"text":3924},{"id":4026,"depth":890,"text":4027},"Port a Tailwind CSS project to Styleframe by mapping utilities, config, and variant helpers side by side.","md",null,{},{"icon":80},{"title":77,"description":4094},"y75BFqH9IxpurRPRFdnzWrKGjcdRiBsiMiFjE-Jg20I",[4102,4104],{"title":67,"path":68,"stem":69,"description":4103,"icon":70,"children":-1},"Integrate Styleframe with Storybook to showcase your design system with type-safe recipes, design tokens, and dark mode support.",{"title":42,"path":43,"stem":44,"description":4105,"icon":45,"children":-1},"Use the Styleframe CLI to initialize projects and build optimized CSS from your configuration files.",1784054201247]