[{"data":1,"prerenderedAt":2137},["ShallowReactive",2],{"navigation_en":3,"-docs-getting-started-comparisons-vanilla-extract":407,"-docs-getting-started-comparisons-vanilla-extract-surround":2136},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":409,"body":410,"description":2128,"extension":1995,"links":2129,"meta":2130,"navigation":7,"path":2131,"seo":2132,"sitemap":2133,"stem":2134,"__hash__":2135},"docs_gettingStarted/docs/getting-started/04.comparisons/01.vanilla-extract.md","Styleframe vs. Vanilla Extract",{"type":411,"value":412,"toc":2104},"minimark",[413,417,438,452,456,459,482,489,493,496,509,513,516,560,564,685,689,695,708,717,745,748,752,757,762,765,776,779,793,796,811,815,818,829,832,835,854,857,868,871,885,888,899,903,906,917,920,931,934,937,941,944,955,958,966,969,979,983,986,997,1000,1010,1013,1021,1025,1028,1039,1042,1050,1054,1057,1060,1074,1077,1088,1092,1095,1103,1106,1110,1113,1133,1136,1140,1143,1146,1149,1539,1576,1579,1848,2006,2033,2037,2044,2048,2081,2085,2100],[414,415,64],"h2",{"id":416},"overview",[418,419,420,421,425,426,429,430,433,434,437],"p",{},"Both ",[422,423,424],"strong",{},"Styleframe"," and ",[422,427,428],{},"Vanilla Extract"," generate ",[422,431,432],{},"static CSS at build time"," while letting you write styles in TypeScript. They share the same big benefits (zero runtime on the client, type safety, SSR-friendly output), but they differ in ",[422,435,436],{},"how much structure they provide out of the box",".",[439,440,441,447],"ul",{},[442,443,444,446],"li",{},[422,445,424],{},": design-system-first APIs (tokens, themes, utilities, recipes) with guided conventions.",[442,448,449,451],{},[422,450,428],{},": a minimal, low-level core that you compose with additional packages/patterns as your system grows.",[414,453,455],{"id":454},"who-this-comparison-is-for","Who this comparison is for",[418,457,458],{},"This document is written for teams who are:",[439,460,461,468,475],{},[442,462,463,464,467],{},"Building or formalizing a ",[422,465,466],{},"design system"," (not just styling a single app).",[442,469,470,471,474],{},"Managing ",[422,472,473],{},"tokens + theming"," (light/dark, brand themes, product variants).",[442,476,477,478,481],{},"Coordinating patterns across ",[422,479,480],{},"multiple contributors"," and multiple component libraries/apps.",[418,483,484,485,488],{},"If your main goal is \"write type-safe styles in TS and extract CSS,\" both are strong options. The choice usually comes down to how much ",[422,486,487],{},"standard structure"," you want for tokens, themes, variants, and utilities.",[414,490,492],{"id":491},"scope-of-comparison","Scope of comparison",[418,494,495],{},"Where relevant, the comparison below considers:",[439,497,498,503],{},[442,499,500,502],{},[422,501,424],{},", which provides an integrated \"design system toolkit\" (variables/tokens, themes, utilities, recipes) with consistent conventions.",[442,504,505,506,508],{},"versus ",[422,507,428],{},", plus the common companion pieces teams adopt for design systems (theme contracts/themes, recipes, sprinkles/atomics, internal conventions),",[414,510,512],{"id":511},"decision-criteria","Decision criteria",[418,514,515],{},"We’ll compare across the things that tend to matter most in large-scale systems:",[439,517,518,524,530,536,542,548,554],{},[442,519,520,523],{},[422,521,522],{},"System structure & governance"," (how easy it is to standardize patterns)",[442,525,526,529],{},[422,527,528],{},"Tokens & theming"," (how tokens are defined, referenced, and evolved)",[442,531,532,535],{},[422,533,534],{},"Variants & recipes"," (component variant ergonomics and type safety)",[442,537,538,541],{},[422,539,540],{},"Utilities / atomics"," (layout primitives, spacing, color utilities)",[442,543,544,547],{},[422,545,546],{},"Developer experience & onboarding"," (how quickly a team converges on shared practices)",[442,549,550,553],{},[422,551,552],{},"SSR & performance"," (how CSS is emitted and consumed)",[442,555,556,559],{},[422,557,558],{},"Scaling over time"," (what you typically add as the system grows)",[414,561,563],{"id":562},"at-a-glance","At a glance",[565,566,567,581],"table",{},[568,569,570],"thead",{},[571,572,573,577,579],"tr",{},[574,575,576],"th",{},"Area",[574,578,424],{},[574,580,428],{},[582,583,584,596,607,618,636,649,660,674],"tbody",{},[571,585,586,590,593],{},[587,588,589],"td",{},"Core philosophy",[587,591,592],{},"Design Systems toolkit (tokens + patterns)",[587,594,595],{},"Minimal primitives (compose your own system)",[571,597,598,601,604],{},[587,599,600],{},"Architecture",[587,602,603],{},"Transpiler-first (dual CSS + TS output)",[587,605,606],{},"CSS extraction from style objects",[571,608,609,612,615],{},[587,610,611],{},"Tokens",[587,613,614],{},"Built-in variables + refs",[587,616,617],{},"Theme contracts/vars (team conventions on top)",[571,619,620,623,630],{},[587,621,622],{},"Variants",[587,624,625,626],{},"Built-in ",[627,628,629],"code",{},"recipe()",[587,631,632,633],{},"Commonly via ",[627,634,635],{},"@vanilla-extract/recipes",[571,637,638,640,646],{},[587,639,540],{},[587,641,625,642,645],{},[627,643,644],{},"utility()"," patterns",[587,647,648],{},"Often via Sprinkles or custom utilities",[571,650,651,654,657],{},[587,652,653],{},"DX onboarding",[587,655,656],{},"Guided setup + conventions",[587,658,659],{},"Install + bundler plugin",[571,661,662,665,668],{},[587,663,664],{},"Output",[587,666,667],{},"Static CSS + typed TypeScript runtime",[587,669,670,671],{},"Static CSS extracted from ",[627,672,673],{},".css.ts",[571,675,676,679,682],{},[587,677,678],{},"Best for",[587,680,681],{},"Large design systems, multi-team consistency",[587,683,684],{},"Teams wanting a thin, flexible base",[414,686,688],{"id":687},"architectural-differences","Architectural differences",[418,690,691,692,437],{},"The most fundamental difference between Styleframe and Vanilla Extract is ",[422,693,694],{},"how they generate output",[418,696,697,699,700,702,703,707],{},[422,698,428],{}," extracts CSS from your ",[627,701,673],{}," files at build time. The TypeScript you write ",[704,705,706],"em",{},"is"," the source of truth - style objects become CSS, and class name references are typed because they come from those same objects. This is elegant and works well, but it means the output format is fixed: you get CSS and typed class name exports.",[418,709,710,712,713,716],{},[422,711,424],{}," takes a different approach: it's built as a ",[422,714,715],{},"transpiler-first system",". Your TypeScript is first tokenized into an internal AST (Abstract Syntax Tree), and then transpile functions generate the final output. This architecture enables:",[439,718,719,733,739],{},[442,720,721,724,725,728,729,732],{},[422,722,723],{},"Dual output",": From one ",[627,726,727],{},".styleframe.ts"," file, you get both static CSS ",[704,730,731],{},"and"," typed TypeScript runtime functions (e.g., recipe functions with full IDE autocomplete).",[442,734,735,738],{},[422,736,737],{},"Customizable output formats",": Recipes can be transpiled to follow a CVA-like API, a Vanilla Extract-style output, or something entirely custom - depending on your needs.",[442,740,741,744],{},[422,742,743],{},"Extensible consumers",": The transpiler uses a consumer pattern, so you could add custom output formats (JSON for documentation, design token exports, etc.) without changing your source.",[418,746,747],{},"In practice, this means Styleframe can adapt to your team's conventions rather than requiring you to adapt to it. You could even use the generated tokens to render documentation for your design system components.",[414,749,751],{"id":750},"detailed-comparison","Detailed comparison",[753,754,756],"h3",{"id":755},"_1-system-structure-governance","1. System structure & governance",[758,759,761],"h4",{"id":760},"what-teams-typically-need","What teams typically need",[418,763,764],{},"As systems grow, the hard part often becomes consistency:",[439,766,767,770,773],{},[442,768,769],{},"Shared token naming and usage patterns",[442,771,772],{},"A clear place to put \"system primitives\" (themes, utilities, recipes)",[442,774,775],{},"A way to avoid drift across packages, repos, and teams",[758,777,424],{"id":778},"styleframe",[439,780,781,784,787],{},[442,782,783],{},"Convention-driven: common design system building blocks map to dedicated APIs (variables, composables, recipes).",[442,785,786],{},"\"Batteries included\" workflow: tokens, themes, variants, and utilities share one mental model.",[442,788,789,790,437],{},"Works well when you want ",[422,791,792],{},"consistent patterns across many contributors",[758,794,428],{"id":795},"vanilla-extract",[439,797,798,801,804],{},[442,799,800],{},"The core is intentionally small: typed style objects returning class names.",[442,802,803],{},"You decide the architecture: tokens, variants, and utilities are assembled from core + ecosystem packages and/or internal patterns.",[442,805,806,807,810],{},"Great for teams that want ",[422,808,809],{},"maximum control"," and don’t mind establishing internal conventions.",[753,812,814],{"id":813},"_2-tokens-and-variables","2. Tokens and variables",[758,816,761],{"id":817},"what-teams-typically-need-1",[439,819,820,823,826],{},[442,821,822],{},"Tokens defined once and referenced everywhere",[442,824,825],{},"Safe refactoring (renames, deprecations, migrations)",[442,827,828],{},"A predictable naming scheme and scoping model",[758,830,424],{"id":831},"styleframe-1",[418,833,834],{},"Styleframe treats design tokens as first-class and promotes dot-notation naming that compiles to CSS custom properties.",[418,836,837,838,841,842,845,846,849,850,853],{},"Styleframe also emphasizes ",[422,839,840],{},"token references"," (",[627,843,844],{},"variable()"," + ",[627,847,848],{},"ref()",") and composables that can reduce accidental duplication (e.g., via ",[627,851,852],{},"default: true"," patterns when composing).",[758,855,428],{"id":856},"vanilla-extract-1",[418,858,859,860,863,864,867],{},"Vanilla Extract commonly models tokens using theme contracts and ",[627,861,862],{},"vars",", which you then reference in ",[627,865,866],{},"style()"," calls.",[418,869,870],{},"A typical shape is:",[439,872,873,876,879],{},[442,874,875],{},"define a contract (the \"shape\" of tokens),",[442,877,878],{},"create one or more themes that fill that contract,",[442,880,881,882,884],{},"reference the resulting ",[627,883,862],{}," in component styles.",[418,886,887],{},"This can be very explicit and flexible, especially when you want full control over how tokens are organized across packages.",[418,889,890,891,894,895,898],{},"Both approaches can produce clean CSS variables. The practical difference is usually whether token definitions, theming, and reuse patterns are ",[422,892,893],{},"integrated into one toolkit"," (Styleframe) or ",[422,896,897],{},"composed from primitives + conventions"," (Vanilla Extract).",[753,900,902],{"id":901},"_3-theming","3. Theming",[758,904,761],{"id":905},"what-teams-typically-need-2",[439,907,908,911,914],{},[442,909,910],{},"Light/dark themes",[442,912,913],{},"Brand/product themes",[442,915,916],{},"Scoping (root, subtree, per-app) and overrides",[758,918,424],{"id":919},"styleframe-2",[418,921,922,923,926,927,930],{},"Styleframe provides a dedicated ",[627,924,925],{},"theme()"," API that integrates with its variable system. Themes are added using ",[627,928,929],{},"data-theme"," or custom selectors, which simplifies switching and supports nested themes (e.g., a dark sidebar inside a light app). You can override both variables and selectors within a theme definition.",[758,932,428],{"id":933},"vanilla-extract-2",[418,935,936],{},"Vanilla Extract commonly uses theme contracts + theme classes, which can be a strong fit if you prefer theming to be an explicit, modular layer you can reorganize as your system evolves. Teams apply themes by toggling CSS classes.",[753,938,940],{"id":939},"_4-variants-and-component-recipes","4. Variants and component recipes",[758,942,761],{"id":943},"what-teams-typically-need-3",[439,945,946,949,952],{},[442,947,948],{},"A standard way to model component variants (size, tone, intent)",[442,950,951],{},"Type-safe selection of variants",[442,953,954],{},"A consistent pattern for compound variants and defaults",[758,956,424],{"id":957},"styleframe-3",[439,959,960,963],{},[442,961,962],{},"Styleframe ships a recipe concept as part of the core \"design system toolkit\".",[442,964,965],{},"Recipes model component variants (e.g., size, tone) with a type-safe selector that outputs class names.",[758,967,428],{"id":968},"vanilla-extract-3",[439,970,971,976],{},[442,972,973,974,437],{},"Vanilla Extract typically pulls variants in via ",[627,975,635],{},[442,977,978],{},"This keeps the core minimal and lets teams opt into variants where needed, but it also means you’ll define (or adopt) conventions for how recipes are structured and shared across packages.",[753,980,982],{"id":981},"_5-utilities-atomics","5. Utilities / atomics",[758,984,761],{"id":985},"what-teams-typically-need-4",[439,987,988,991,994],{},[442,989,990],{},"Layout primitives and spacing utilities",[442,992,993],{},"A consistent \"utility vocabulary\" across teams",[442,995,996],{},"A way to avoid one-off ad-hoc utility creation",[758,998,424],{"id":999},"styleframe-4",[439,1001,1002,1007],{},[442,1003,625,1004,1006],{},[627,1005,644],{}," patterns can make it straightforward to define and share a consistent utility layer.",[442,1008,1009],{},"Because utilities live alongside tokens/themes/recipes, teams often end up with a single place to learn \"how we build styles here.\"",[758,1011,428],{"id":1012},"vanilla-extract-4",[439,1014,1015,1018],{},[442,1016,1017],{},"Many teams reach for Sprinkles (or build custom utilities).",[442,1019,1020],{},"This can be a good fit if you want utilities to be a separate, carefully scoped layer - or if you want to avoid utilities entirely and rely on component styles.",[753,1022,1024],{"id":1023},"_6-developer-experience-and-onboarding","6. Developer experience and onboarding",[758,1026,424],{"id":1027},"styleframe-5",[439,1029,1030,1033,1036],{},[442,1031,1032],{},"CLI-driven setup + conventions can reduce \"blank page\" decisions.",[442,1034,1035],{},"Dedicated primitives (variables/composables/recipes) can make systems more discoverable, especially for new contributors.",[442,1037,1038],{},"New team members can ramp up faster when tokens, themes, and utilities follow a consistent pattern.",[758,1040,428],{"id":1041},"vanilla-extract-5",[439,1043,1044,1047],{},[442,1045,1046],{},"Very approachable if you like working close to CSS concepts.",[442,1048,1049],{},"Install + bundler plugin; conventions are up to you, which works well when your team already has strong style architecture preferences.",[753,1051,1053],{"id":1052},"_7-type-safety-and-reliability","7. Type safety and reliability",[418,1055,1056],{},"Both approaches are strongly typed because you author styles in TypeScript and extract to static CSS.",[758,1058,424],{"id":1059},"styleframe-6",[439,1061,1062],{},[442,1063,1064,1065,841,1067,845,1069,1071,1072,437],{},"Emphasizes ",[422,1066,840],{},[627,1068,844],{},[627,1070,848],{},") and composables that can avoid accidental duplication via patterns like ",[627,1073,852],{},[758,1075,428],{"id":1076},"vanilla-extract-6",[439,1078,1079],{},[442,1080,1064,1081,1084,1085,1087],{},[422,1082,1083],{},"theme contracts"," and typed ",[627,1086,862],{}," usage, with additional type-safe helpers via ecosystem packages.",[753,1089,1091],{"id":1090},"_8-ssr-and-performance","8. SSR and performance",[418,1093,1094],{},"Both are zero-runtime on the client:",[439,1096,1097,1100],{},[442,1098,1099],{},"CSS is extracted at build time.",[442,1101,1102],{},"SSR/SSG frameworks can serve HTML with classes already applied and CSS already linked/loaded.",[418,1104,1105],{},"The only \"runtime\" work in either approach is optional variant selection helpers (e.g., recipe functions) which generally resolve to class names.",[753,1107,1109],{"id":1108},"_9-scaling-over-time","9. Scaling over time",[418,1111,1112],{},"A practical way to think about the difference is how each approach tends to evolve:",[439,1114,1115,1121,1127],{},[442,1116,1117,1120],{},[422,1118,1119],{},"Day 1:"," both feel straightforward - type-safe TS authoring with extracted CSS.",[442,1122,1123,1126],{},[422,1124,1125],{},"Month 3:"," teams usually standardize tokens/themes/variants/utilities and document conventions.",[442,1128,1129,1132],{},[422,1130,1131],{},"Year 1:"," consistency, enforcement, and discoverability matter as much as raw styling capability.",[418,1134,1135],{},"Styleframe’s value often shows up when you want tokens/themes/variants/utilities to remain cohesive as the system grows, while Vanilla Extract’s value often shows up when you want to keep the base minimal and assemble only what you need.",[414,1137,1139],{"id":1138},"side-by-side-example-same-outcome-different-assembly","Side-by-side example (same outcome, different assembly)",[418,1141,1142],{},"Below is a conceptual \"same goal\" example: define tokens, apply a theme, and create a button with variants.",[418,1144,1145],{},"The goal here isn’t to show the only way to do it in either ecosystem - just a representative \"design system\" shape.",[758,1147,424],{"id":1148},"styleframe-7",[1150,1151,1157],"pre",{"className":1152,"code":1153,"filename":1154,"language":1155,"meta":1156,"style":1156},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\n\nconst s = styleframe();\nconst { variable, ref, selector /* recipe, theme, utility, ... */ } = s;\n\nconst colorPrimary = variable(\"color.primary\", \"#006cff\");\nconst colorWhite = variable(\"color.white\", \"#ffffff\");\nconst borderRadiusSm = variable(\"border-radius.sm\", \"6px\");\nconst spacingMd = variable(\"spacing.md\", \"1rem\");\n\n/**\n * Minimal example: a button style referencing tokens.\n * (Variants would typically be modeled via recipe() in Styleframe.)\n */\nselector(\".button\", {\n  backgroundColor: ref(colorPrimary),\n  color: ref(colorWhite),\n  borderRadius: ref(borderRadiusSm),\n  padding: ref(spacingMd),\n});\n\nexport default s;\n","styleframe.config.ts","ts","",[627,1158,1159,1194,1200,1221,1256,1261,1297,1331,1365,1399,1404,1410,1416,1422,1428,1448,1466,1481,1496,1511,1521,1526],{"__ignoreMap":1156},[1160,1161,1164,1168,1172,1176,1179,1182,1185,1188,1191],"span",{"class":1162,"line":1163},"line",1,[1160,1165,1167],{"class":1166},"s7zQu","import",[1160,1169,1171],{"class":1170},"sMK4o"," {",[1160,1173,1175],{"class":1174},"sTEyZ"," styleframe",[1160,1177,1178],{"class":1170}," }",[1160,1180,1181],{"class":1166}," from",[1160,1183,1184],{"class":1170}," \"",[1160,1186,778],{"class":1187},"sfazB",[1160,1189,1190],{"class":1170},"\"",[1160,1192,1193],{"class":1170},";\n",[1160,1195,1197],{"class":1162,"line":1196},2,[1160,1198,1199],{"emptyLinePlaceholder":206},"\n",[1160,1201,1203,1207,1210,1213,1216,1219],{"class":1162,"line":1202},3,[1160,1204,1206],{"class":1205},"spNyl","const",[1160,1208,1209],{"class":1174}," s ",[1160,1211,1212],{"class":1170},"=",[1160,1214,1175],{"class":1215},"s2Zo4",[1160,1217,1218],{"class":1174},"()",[1160,1220,1193],{"class":1170},[1160,1222,1224,1226,1228,1231,1234,1237,1239,1242,1246,1248,1251,1254],{"class":1162,"line":1223},4,[1160,1225,1206],{"class":1205},[1160,1227,1171],{"class":1170},[1160,1229,1230],{"class":1174}," variable",[1160,1232,1233],{"class":1170},",",[1160,1235,1236],{"class":1174}," ref",[1160,1238,1233],{"class":1170},[1160,1240,1241],{"class":1174}," selector ",[1160,1243,1245],{"class":1244},"sHwdD","/* recipe, theme, utility, ... */",[1160,1247,1178],{"class":1170},[1160,1249,1250],{"class":1170}," =",[1160,1252,1253],{"class":1174}," s",[1160,1255,1193],{"class":1170},[1160,1257,1259],{"class":1162,"line":1258},5,[1160,1260,1199],{"emptyLinePlaceholder":206},[1160,1262,1264,1266,1269,1271,1273,1276,1278,1281,1283,1285,1287,1290,1292,1295],{"class":1162,"line":1263},6,[1160,1265,1206],{"class":1205},[1160,1267,1268],{"class":1174}," colorPrimary ",[1160,1270,1212],{"class":1170},[1160,1272,1230],{"class":1215},[1160,1274,1275],{"class":1174},"(",[1160,1277,1190],{"class":1170},[1160,1279,1280],{"class":1187},"color.primary",[1160,1282,1190],{"class":1170},[1160,1284,1233],{"class":1170},[1160,1286,1184],{"class":1170},[1160,1288,1289],{"class":1187},"#006cff",[1160,1291,1190],{"class":1170},[1160,1293,1294],{"class":1174},")",[1160,1296,1193],{"class":1170},[1160,1298,1300,1302,1305,1307,1309,1311,1313,1316,1318,1320,1322,1325,1327,1329],{"class":1162,"line":1299},7,[1160,1301,1206],{"class":1205},[1160,1303,1304],{"class":1174}," colorWhite ",[1160,1306,1212],{"class":1170},[1160,1308,1230],{"class":1215},[1160,1310,1275],{"class":1174},[1160,1312,1190],{"class":1170},[1160,1314,1315],{"class":1187},"color.white",[1160,1317,1190],{"class":1170},[1160,1319,1233],{"class":1170},[1160,1321,1184],{"class":1170},[1160,1323,1324],{"class":1187},"#ffffff",[1160,1326,1190],{"class":1170},[1160,1328,1294],{"class":1174},[1160,1330,1193],{"class":1170},[1160,1332,1334,1336,1339,1341,1343,1345,1347,1350,1352,1354,1356,1359,1361,1363],{"class":1162,"line":1333},8,[1160,1335,1206],{"class":1205},[1160,1337,1338],{"class":1174}," borderRadiusSm ",[1160,1340,1212],{"class":1170},[1160,1342,1230],{"class":1215},[1160,1344,1275],{"class":1174},[1160,1346,1190],{"class":1170},[1160,1348,1349],{"class":1187},"border-radius.sm",[1160,1351,1190],{"class":1170},[1160,1353,1233],{"class":1170},[1160,1355,1184],{"class":1170},[1160,1357,1358],{"class":1187},"6px",[1160,1360,1190],{"class":1170},[1160,1362,1294],{"class":1174},[1160,1364,1193],{"class":1170},[1160,1366,1368,1370,1373,1375,1377,1379,1381,1384,1386,1388,1390,1393,1395,1397],{"class":1162,"line":1367},9,[1160,1369,1206],{"class":1205},[1160,1371,1372],{"class":1174}," spacingMd ",[1160,1374,1212],{"class":1170},[1160,1376,1230],{"class":1215},[1160,1378,1275],{"class":1174},[1160,1380,1190],{"class":1170},[1160,1382,1383],{"class":1187},"spacing.md",[1160,1385,1190],{"class":1170},[1160,1387,1233],{"class":1170},[1160,1389,1184],{"class":1170},[1160,1391,1392],{"class":1187},"1rem",[1160,1394,1190],{"class":1170},[1160,1396,1294],{"class":1174},[1160,1398,1193],{"class":1170},[1160,1400,1402],{"class":1162,"line":1401},10,[1160,1403,1199],{"emptyLinePlaceholder":206},[1160,1405,1407],{"class":1162,"line":1406},11,[1160,1408,1409],{"class":1244},"/**\n",[1160,1411,1413],{"class":1162,"line":1412},12,[1160,1414,1415],{"class":1244}," * Minimal example: a button style referencing tokens.\n",[1160,1417,1419],{"class":1162,"line":1418},13,[1160,1420,1421],{"class":1244}," * (Variants would typically be modeled via recipe() in Styleframe.)\n",[1160,1423,1425],{"class":1162,"line":1424},14,[1160,1426,1427],{"class":1244}," */\n",[1160,1429,1431,1434,1436,1438,1441,1443,1445],{"class":1162,"line":1430},15,[1160,1432,1433],{"class":1215},"selector",[1160,1435,1275],{"class":1174},[1160,1437,1190],{"class":1170},[1160,1439,1440],{"class":1187},".button",[1160,1442,1190],{"class":1170},[1160,1444,1233],{"class":1170},[1160,1446,1447],{"class":1170}," {\n",[1160,1449,1451,1455,1458,1460,1463],{"class":1162,"line":1450},16,[1160,1452,1454],{"class":1453},"swJcz","  backgroundColor",[1160,1456,1457],{"class":1170},":",[1160,1459,1236],{"class":1215},[1160,1461,1462],{"class":1174},"(colorPrimary)",[1160,1464,1465],{"class":1170},",\n",[1160,1467,1469,1472,1474,1476,1479],{"class":1162,"line":1468},17,[1160,1470,1471],{"class":1453},"  color",[1160,1473,1457],{"class":1170},[1160,1475,1236],{"class":1215},[1160,1477,1478],{"class":1174},"(colorWhite)",[1160,1480,1465],{"class":1170},[1160,1482,1484,1487,1489,1491,1494],{"class":1162,"line":1483},18,[1160,1485,1486],{"class":1453},"  borderRadius",[1160,1488,1457],{"class":1170},[1160,1490,1236],{"class":1215},[1160,1492,1493],{"class":1174},"(borderRadiusSm)",[1160,1495,1465],{"class":1170},[1160,1497,1499,1502,1504,1506,1509],{"class":1162,"line":1498},19,[1160,1500,1501],{"class":1453},"  padding",[1160,1503,1457],{"class":1170},[1160,1505,1236],{"class":1215},[1160,1507,1508],{"class":1174},"(spacingMd)",[1160,1510,1465],{"class":1170},[1160,1512,1514,1517,1519],{"class":1162,"line":1513},20,[1160,1515,1516],{"class":1170},"}",[1160,1518,1294],{"class":1174},[1160,1520,1193],{"class":1170},[1160,1522,1524],{"class":1162,"line":1523},21,[1160,1525,1199],{"emptyLinePlaceholder":206},[1160,1527,1529,1532,1535,1537],{"class":1162,"line":1528},22,[1160,1530,1531],{"class":1166},"export",[1160,1533,1534],{"class":1166}," default",[1160,1536,1253],{"class":1174},[1160,1538,1193],{"class":1170},[1150,1540,1543],{"className":1152,"code":1541,"filename":1542,"language":1155,"meta":1156,"style":1156},"\u003Cbutton class=\"button\">Click me\u003C/button>\n","Button.tsx",[627,1544,1545],{"__ignoreMap":1156},[1160,1546,1547,1550,1553,1555,1557,1560,1562,1565,1568,1571,1573],{"class":1162,"line":1163},[1160,1548,1549],{"class":1170},"\u003C",[1160,1551,1552],{"class":1174},"button class",[1160,1554,1212],{"class":1170},[1160,1556,1190],{"class":1170},[1160,1558,1559],{"class":1187},"button",[1160,1561,1190],{"class":1170},[1160,1563,1564],{"class":1170},">",[1160,1566,1567],{"class":1174},"Click me",[1160,1569,1570],{"class":1170},"\u003C/",[1160,1572,1559],{"class":1174},[1160,1574,1575],{"class":1170},">\n",[758,1577,428],{"id":1578},"vanilla-extract-7",[1150,1580,1583],{"className":1152,"code":1581,"filename":1582,"language":1155,"meta":1156,"style":1156},"import { createThemeContract, createTheme } from \"@vanilla-extract/css\";\n\nexport const vars = createThemeContract({\n  color: {\n    primary: null,\n    white: null,\n  },\n  radius: {\n    sm: null,\n  },\n  spacing: {\n    md: null,\n  },\n});\n\nexport const lightTheme = createTheme(vars, {\n  color: {\n    primary: \"#006cff\",\n    white: \"#ffffff\",\n  },\n  radius: {\n    sm: \"6px\",\n  },\n  spacing: {\n    md: \"1rem\",\n  },\n});\n","vanilla-extract.css.ts",[627,1584,1585,1612,1616,1635,1643,1653,1662,1667,1676,1685,1689,1698,1707,1711,1719,1723,1743,1751,1765,1779,1783,1791,1805,1810,1819,1834,1839],{"__ignoreMap":1156},[1160,1586,1587,1589,1591,1594,1596,1599,1601,1603,1605,1608,1610],{"class":1162,"line":1163},[1160,1588,1167],{"class":1166},[1160,1590,1171],{"class":1170},[1160,1592,1593],{"class":1174}," createThemeContract",[1160,1595,1233],{"class":1170},[1160,1597,1598],{"class":1174}," createTheme",[1160,1600,1178],{"class":1170},[1160,1602,1181],{"class":1166},[1160,1604,1184],{"class":1170},[1160,1606,1607],{"class":1187},"@vanilla-extract/css",[1160,1609,1190],{"class":1170},[1160,1611,1193],{"class":1170},[1160,1613,1614],{"class":1162,"line":1196},[1160,1615,1199],{"emptyLinePlaceholder":206},[1160,1617,1618,1620,1623,1626,1628,1630,1632],{"class":1162,"line":1202},[1160,1619,1531],{"class":1166},[1160,1621,1622],{"class":1205}," const",[1160,1624,1625],{"class":1174}," vars ",[1160,1627,1212],{"class":1170},[1160,1629,1593],{"class":1215},[1160,1631,1275],{"class":1174},[1160,1633,1634],{"class":1170},"{\n",[1160,1636,1637,1639,1641],{"class":1162,"line":1223},[1160,1638,1471],{"class":1453},[1160,1640,1457],{"class":1170},[1160,1642,1447],{"class":1170},[1160,1644,1645,1648,1650],{"class":1162,"line":1258},[1160,1646,1647],{"class":1453},"    primary",[1160,1649,1457],{"class":1170},[1160,1651,1652],{"class":1170}," null,\n",[1160,1654,1655,1658,1660],{"class":1162,"line":1263},[1160,1656,1657],{"class":1453},"    white",[1160,1659,1457],{"class":1170},[1160,1661,1652],{"class":1170},[1160,1663,1664],{"class":1162,"line":1299},[1160,1665,1666],{"class":1170},"  },\n",[1160,1668,1669,1672,1674],{"class":1162,"line":1333},[1160,1670,1671],{"class":1453},"  radius",[1160,1673,1457],{"class":1170},[1160,1675,1447],{"class":1170},[1160,1677,1678,1681,1683],{"class":1162,"line":1367},[1160,1679,1680],{"class":1453},"    sm",[1160,1682,1457],{"class":1170},[1160,1684,1652],{"class":1170},[1160,1686,1687],{"class":1162,"line":1401},[1160,1688,1666],{"class":1170},[1160,1690,1691,1694,1696],{"class":1162,"line":1406},[1160,1692,1693],{"class":1453},"  spacing",[1160,1695,1457],{"class":1170},[1160,1697,1447],{"class":1170},[1160,1699,1700,1703,1705],{"class":1162,"line":1412},[1160,1701,1702],{"class":1453},"    md",[1160,1704,1457],{"class":1170},[1160,1706,1652],{"class":1170},[1160,1708,1709],{"class":1162,"line":1418},[1160,1710,1666],{"class":1170},[1160,1712,1713,1715,1717],{"class":1162,"line":1424},[1160,1714,1516],{"class":1170},[1160,1716,1294],{"class":1174},[1160,1718,1193],{"class":1170},[1160,1720,1721],{"class":1162,"line":1430},[1160,1722,1199],{"emptyLinePlaceholder":206},[1160,1724,1725,1727,1729,1732,1734,1736,1739,1741],{"class":1162,"line":1450},[1160,1726,1531],{"class":1166},[1160,1728,1622],{"class":1205},[1160,1730,1731],{"class":1174}," lightTheme ",[1160,1733,1212],{"class":1170},[1160,1735,1598],{"class":1215},[1160,1737,1738],{"class":1174},"(vars",[1160,1740,1233],{"class":1170},[1160,1742,1447],{"class":1170},[1160,1744,1745,1747,1749],{"class":1162,"line":1468},[1160,1746,1471],{"class":1453},[1160,1748,1457],{"class":1170},[1160,1750,1447],{"class":1170},[1160,1752,1753,1755,1757,1759,1761,1763],{"class":1162,"line":1483},[1160,1754,1647],{"class":1453},[1160,1756,1457],{"class":1170},[1160,1758,1184],{"class":1170},[1160,1760,1289],{"class":1187},[1160,1762,1190],{"class":1170},[1160,1764,1465],{"class":1170},[1160,1766,1767,1769,1771,1773,1775,1777],{"class":1162,"line":1498},[1160,1768,1657],{"class":1453},[1160,1770,1457],{"class":1170},[1160,1772,1184],{"class":1170},[1160,1774,1324],{"class":1187},[1160,1776,1190],{"class":1170},[1160,1778,1465],{"class":1170},[1160,1780,1781],{"class":1162,"line":1513},[1160,1782,1666],{"class":1170},[1160,1784,1785,1787,1789],{"class":1162,"line":1523},[1160,1786,1671],{"class":1453},[1160,1788,1457],{"class":1170},[1160,1790,1447],{"class":1170},[1160,1792,1793,1795,1797,1799,1801,1803],{"class":1162,"line":1528},[1160,1794,1680],{"class":1453},[1160,1796,1457],{"class":1170},[1160,1798,1184],{"class":1170},[1160,1800,1358],{"class":1187},[1160,1802,1190],{"class":1170},[1160,1804,1465],{"class":1170},[1160,1806,1808],{"class":1162,"line":1807},23,[1160,1809,1666],{"class":1170},[1160,1811,1813,1815,1817],{"class":1162,"line":1812},24,[1160,1814,1693],{"class":1453},[1160,1816,1457],{"class":1170},[1160,1818,1447],{"class":1170},[1160,1820,1822,1824,1826,1828,1830,1832],{"class":1162,"line":1821},25,[1160,1823,1702],{"class":1453},[1160,1825,1457],{"class":1170},[1160,1827,1184],{"class":1170},[1160,1829,1392],{"class":1187},[1160,1831,1190],{"class":1170},[1160,1833,1465],{"class":1170},[1160,1835,1837],{"class":1162,"line":1836},26,[1160,1838,1666],{"class":1170},[1160,1840,1842,1844,1846],{"class":1162,"line":1841},27,[1160,1843,1516],{"class":1170},[1160,1845,1294],{"class":1174},[1160,1847,1193],{"class":1170},[1150,1849,1852],{"className":1152,"code":1850,"filename":1851,"language":1155,"meta":1156,"style":1156},"import { style } from \"@vanilla-extract/css\";\nimport { vars } from \"./vanilla-extract.css\";\n\nexport const button = style({\n  background: vars.color.primary,\n  color: vars.color.white,\n  borderRadius: vars.radius.sm,\n  padding: vars.spacing.md,\n});\n","Button.ts",[627,1853,1854,1875,1897,1901,1918,1939,1958,1978,1998],{"__ignoreMap":1156},[1160,1855,1856,1858,1860,1863,1865,1867,1869,1871,1873],{"class":1162,"line":1163},[1160,1857,1167],{"class":1166},[1160,1859,1171],{"class":1170},[1160,1861,1862],{"class":1174}," style",[1160,1864,1178],{"class":1170},[1160,1866,1181],{"class":1166},[1160,1868,1184],{"class":1170},[1160,1870,1607],{"class":1187},[1160,1872,1190],{"class":1170},[1160,1874,1193],{"class":1170},[1160,1876,1877,1879,1881,1884,1886,1888,1890,1893,1895],{"class":1162,"line":1196},[1160,1878,1167],{"class":1166},[1160,1880,1171],{"class":1170},[1160,1882,1883],{"class":1174}," vars",[1160,1885,1178],{"class":1170},[1160,1887,1181],{"class":1166},[1160,1889,1184],{"class":1170},[1160,1891,1892],{"class":1187},"./vanilla-extract.css",[1160,1894,1190],{"class":1170},[1160,1896,1193],{"class":1170},[1160,1898,1899],{"class":1162,"line":1202},[1160,1900,1199],{"emptyLinePlaceholder":206},[1160,1902,1903,1905,1907,1910,1912,1914,1916],{"class":1162,"line":1223},[1160,1904,1531],{"class":1166},[1160,1906,1622],{"class":1205},[1160,1908,1909],{"class":1174}," button ",[1160,1911,1212],{"class":1170},[1160,1913,1862],{"class":1215},[1160,1915,1275],{"class":1174},[1160,1917,1634],{"class":1170},[1160,1919,1920,1923,1925,1927,1929,1932,1934,1937],{"class":1162,"line":1258},[1160,1921,1922],{"class":1453},"  background",[1160,1924,1457],{"class":1170},[1160,1926,1883],{"class":1174},[1160,1928,437],{"class":1170},[1160,1930,1931],{"class":1174},"color",[1160,1933,437],{"class":1170},[1160,1935,1936],{"class":1174},"primary",[1160,1938,1465],{"class":1170},[1160,1940,1941,1943,1945,1947,1949,1951,1953,1956],{"class":1162,"line":1263},[1160,1942,1471],{"class":1453},[1160,1944,1457],{"class":1170},[1160,1946,1883],{"class":1174},[1160,1948,437],{"class":1170},[1160,1950,1931],{"class":1174},[1160,1952,437],{"class":1170},[1160,1954,1955],{"class":1174},"white",[1160,1957,1465],{"class":1170},[1160,1959,1960,1962,1964,1966,1968,1971,1973,1976],{"class":1162,"line":1299},[1160,1961,1486],{"class":1453},[1160,1963,1457],{"class":1170},[1160,1965,1883],{"class":1174},[1160,1967,437],{"class":1170},[1160,1969,1970],{"class":1174},"radius",[1160,1972,437],{"class":1170},[1160,1974,1975],{"class":1174},"sm",[1160,1977,1465],{"class":1170},[1160,1979,1980,1982,1984,1986,1988,1991,1993,1996],{"class":1162,"line":1333},[1160,1981,1501],{"class":1453},[1160,1983,1457],{"class":1170},[1160,1985,1883],{"class":1174},[1160,1987,437],{"class":1170},[1160,1989,1990],{"class":1174},"spacing",[1160,1992,437],{"class":1170},[1160,1994,1995],{"class":1174},"md",[1160,1997,1465],{"class":1170},[1160,1999,2000,2002,2004],{"class":1162,"line":1367},[1160,2001,1516],{"class":1170},[1160,2003,1294],{"class":1174},[1160,2005,1193],{"class":1170},[1150,2007,2009],{"className":1152,"code":2008,"filename":1542,"language":1155,"meta":1156,"style":1156},"\u003Cbutton class={button}>Click me\u003C/button>\n",[627,2010,2011],{"__ignoreMap":1156},[1160,2012,2013,2015,2017,2020,2022,2025,2027,2029,2031],{"class":1162,"line":1163},[1160,2014,1549],{"class":1170},[1160,2016,1552],{"class":1174},[1160,2018,2019],{"class":1170},"={",[1160,2021,1559],{"class":1174},[1160,2023,2024],{"class":1170},"}>",[1160,2026,1567],{"class":1174},[1160,2028,1570],{"class":1170},[1160,2030,1559],{"class":1174},[1160,2032,1575],{"class":1170},[414,2034,2036],{"id":2035},"choosing-between-them","Choosing between them",[418,2038,2039,2040,2043],{},"A practical heuristic: if you find yourself needing ",[422,2041,2042],{},"tokens + themes + recipes + atomic utilities"," early, an integrated toolkit like styleframe will reduce the number of separate building blocks you need to adopt and document.",[753,2045,2047],{"id":2046},"choose-styleframe-if","Choose Styleframe if…",[439,2049,2050,2057,2064,2067,2074],{},[442,2051,2052,2053,2056],{},"You're building a ",[422,2054,2055],{},"large-scale design system"," with multiple token domains (color, spacing, typography, radii, etc.).",[442,2058,2059,2060,2063],{},"You want ",[422,2061,2062],{},"one consistent set of primitives"," for tokens, themes, utilities, and variants.",[442,2065,2066],{},"You expect many contributors and want conventions to be discoverable and enforced.",[442,2068,2069,2070,2073],{},"You plan to use your design system code for ",[422,2071,2072],{},"more than just CSS"," - like generating documentation or design system specs.",[442,2075,2076,2077,2080],{},"You want complete control and customization over ",[422,2078,2079],{},"how your code is output"," (naming conventions, output formats) without forking or workarounds.",[753,2082,2084],{"id":2083},"choose-vanilla-extract-if","Choose Vanilla Extract if…",[439,2086,2087,2094,2097],{},[442,2088,2089,2090,2093],{},"You want a very ",[422,2091,2092],{},"minimal core"," and prefer assembling only what you need.",[442,2095,2096],{},"Your team already has established conventions for tokens/variants/utilities and doesn’t want additional abstraction.",[442,2098,2099],{},"You’re optimizing for incremental adoption inside an existing codebase with established build tooling.",[2101,2102,2103],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":1156,"searchDepth":1196,"depth":1196,"links":2105},[2106,2107,2108,2109,2110,2111,2112,2123,2124],{"id":416,"depth":1196,"text":64},{"id":454,"depth":1196,"text":455},{"id":491,"depth":1196,"text":492},{"id":511,"depth":1196,"text":512},{"id":562,"depth":1196,"text":563},{"id":687,"depth":1196,"text":688},{"id":750,"depth":1196,"text":751,"children":2113},[2114,2115,2116,2117,2118,2119,2120,2121,2122],{"id":755,"depth":1202,"text":756},{"id":813,"depth":1202,"text":814},{"id":901,"depth":1202,"text":902},{"id":939,"depth":1202,"text":940},{"id":981,"depth":1202,"text":982},{"id":1023,"depth":1202,"text":1024},{"id":1052,"depth":1202,"text":1053},{"id":1090,"depth":1202,"text":1091},{"id":1108,"depth":1202,"text":1109},{"id":1138,"depth":1196,"text":1139},{"id":2035,"depth":1196,"text":2036,"children":2125},[2126,2127],{"id":2046,"depth":1202,"text":2047},{"id":2083,"depth":1202,"text":2084},"Comparing Styleframe and Vanilla Extract - two zero-runtime, type-safe CSS-in-TypeScript approaches for large-scale design systems.",null,{},"/docs/getting-started/comparisons/vanilla-extract",{"title":409,"description":2128},{"loc":2131},"docs/getting-started/04.comparisons/01.vanilla-extract","g56QBLAmToc4Q5ePsgMSCAGIm6bMNofS0iP5hyN3Z-I",[2129,2129],1776621141584]