[{"data":1,"prerenderedAt":2040},["ShallowReactive",2],{"navigation_en":3,"-docs-getting-started-tooling-cli":407,"-docs-getting-started-tooling-cli-surround":2035},{"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":38,"body":409,"description":2027,"extension":2028,"links":2029,"meta":2030,"navigation":2031,"path":39,"seo":2032,"sitemap":2033,"stem":40,"__hash__":2034},"docs_gettingStarted/docs/getting-started/05.tooling/01.cli.md",{"type":410,"value":411,"toc":2013},"minimark",[412,416,420,424,427,456,459,462,543,547,562,565,572,599,604,662,666,718,751,766,768,773,804,807,894,897,974,985,988,996,998,1005,1032,1048,1050,1055,1088,1094,1108,1110,1117,1140,1144,1255,1258,1357,1371,1373,1380,1403,1406,1547,1550,1700,1714,1716,1720,1772,1785,1789,2009],[413,414,64],"h2",{"id":415},"overview",[417,418,419],"p",{},"The Styleframe CLI is a command-line interface that helps you initialize new projects and build production-ready CSS from your Styleframe configuration. It provides a streamlined workflow from project setup to optimized style generation.",[413,421,423],{"id":422},"why-use-the-cli","Why use the CLI?",[417,425,426],{},"The CLI helps you:",[428,429,430,438,444,450],"ul",{},[431,432,433,437],"li",{},[434,435,436],"strong",{},"Quick project setup",": Initialize Styleframe configuration and dependencies with a single command.",[431,439,440,443],{},[434,441,442],{},"Optimized builds",": Generate production-ready CSS from your configuration files.",[431,445,446,449],{},[434,447,448],{},"Flexible output",": Control where and how your styles are generated.",[431,451,452,455],{},[434,453,454],{},"Consistent workflow",": Integrate Styleframe into your development and deployment pipelines.",[413,457,17],{"id":458},"installation",[417,460,461],{},"Install the CLI as a development dependency:",[463,464,465,494,511,527],"code-group",{},[466,467,473],"pre",{"className":468,"code":469,"filename":470,"language":471,"meta":472,"style":472},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm install -g styleframe\n","pnpm","bash","",[474,475,476],"code",{"__ignoreMap":472},[477,478,481,484,488,491],"span",{"class":479,"line":480},"line",1,[477,482,470],{"class":483},"sBMFI",[477,485,487],{"class":486},"sfazB"," install",[477,489,490],{"class":486}," -g",[477,492,493],{"class":486}," styleframe\n",[466,495,498],{"className":468,"code":496,"filename":497,"language":471,"meta":472,"style":472},"yarn add -g styleframe\n","yarn",[474,499,500],{"__ignoreMap":472},[477,501,502,504,507,509],{"class":479,"line":480},[477,503,497],{"class":483},[477,505,506],{"class":486}," add",[477,508,490],{"class":486},[477,510,493],{"class":486},[466,512,515],{"className":468,"code":513,"filename":514,"language":471,"meta":472,"style":472},"npm install -g styleframe\n","npm",[474,516,517],{"__ignoreMap":472},[477,518,519,521,523,525],{"class":479,"line":480},[477,520,514],{"class":483},[477,522,487],{"class":486},[477,524,490],{"class":486},[477,526,493],{"class":486},[466,528,531],{"className":468,"code":529,"filename":530,"language":471,"meta":472,"style":472},"bun add -g styleframe\n","bun",[474,532,533],{"__ignoreMap":472},[477,534,535,537,539,541],{"class":479,"line":480},[477,536,530],{"class":483},[477,538,506],{"class":486},[477,540,490],{"class":486},[477,542,493],{"class":486},[413,544,546],{"id":545},"commands","Commands",[417,548,549,550,553,554,557,558,561],{},"The CLI provides three primary commands: ",[474,551,552],{},"init"," for project setup, ",[474,555,556],{},"build"," for generating CSS output, and ",[474,559,560],{},"figma"," for syncing design variables with Figma.",[563,564],"hr",{},[566,567,568],"h3",{"id":552},[477,569,552],{"className":570},[571],"text-primary",[573,574,575],"field-group",{},[576,577,579,596],"field",{"type":578},"command",[466,580,582],{"className":468,"code":581,"language":471,"meta":472,"style":472},"styleframe init [options]\n",[474,583,584],{"__ignoreMap":472},[477,585,586,589,592],{"class":479,"line":480},[477,587,588],{"class":483},"styleframe",[477,590,591],{"class":486}," init",[477,593,595],{"class":594},"sTEyZ"," [options]\n",[417,597,598],{},"Initialize a new Styleframe project in your current directory.",[600,601,603],"h4",{"id":602},"options","Options",[605,606,607,629],"table",{},[608,609,610],"thead",{},[611,612,613,617,620,623,626],"tr",{},[614,615,616],"th",{},"Option",[614,618,619],{},"Alias",[614,621,622],{},"Type",[614,624,625],{},"Default",[614,627,628],{},"Description",[630,631,632],"tbody",{},[611,633,634,640,649,654,659],{},[635,636,637],"td",{},[474,638,639],{},"--cwd",[635,641,642,645,646],{},[474,643,644],{},"-d",", ",[474,647,648],{},"--dir",[635,650,651],{},[474,652,653],{},"string",[635,655,656],{},[474,657,658],{},"process.cwd()",[635,660,661],{},"Directory where the project will be initialized",[600,663,665],{"id":664},"usage","Usage",[667,668,669,686],"tabs",{},[670,671,674],"tabs-item",{"icon":672,"label":673},"i-lucide-terminal","Current Directory",[466,675,677],{"className":468,"code":676,"language":471,"meta":472,"style":472},"styleframe init\n",[474,678,679],{"__ignoreMap":472},[477,680,681,683],{"class":479,"line":480},[477,682,588],{"class":483},[477,684,685],{"class":486}," init\n",[670,687,689],{"icon":672,"label":688},"Specific Directory",[466,690,692],{"className":468,"code":691,"language":471,"meta":472,"style":472},"styleframe init --cwd ./my-project\nstyleframe init -d ./my-project\n",[474,693,694,706],{"__ignoreMap":472},[477,695,696,698,700,703],{"class":479,"line":480},[477,697,588],{"class":483},[477,699,591],{"class":486},[477,701,702],{"class":486}," --cwd",[477,704,705],{"class":486}," ./my-project\n",[477,707,709,711,713,716],{"class":479,"line":708},2,[477,710,588],{"class":483},[477,712,591],{"class":486},[477,714,715],{"class":486}," -d",[477,717,705],{"class":486},[719,720,721,728,735,745,748],"ol",{},[431,722,723,724,727],{},"Creates a ",[474,725,726],{},"styleframe.config.ts"," file with basic configuration",[431,729,730,731,734],{},"Creates or updates ",[474,732,733],{},"tsconfig.json"," with styleframe includes",[431,736,737,738,740,741,744],{},"Adds all ",[474,739,588],{}," packages to your ",[474,742,743],{},"package.json"," dependencies",[431,746,747],{},"Detects and configures your framework (Vite or Nuxt), if applicable",[431,749,750],{},"Skips creating files that already exist (won't overwrite existing config)",[752,753,755,758,759,761,762,765],"tip",{"icon":754},"i-lucide-lightbulb",[434,756,757],{},"Pro tip",": After running ",[474,760,552],{},", don't forget to run ",[474,763,764],{},"npm install"," to install the added dependencies.",[563,767],{},[566,769,770],{"id":556},[477,771,556],{"className":772},[571],[573,774,775],{},[576,776,777,801],{"type":578},[466,778,780],{"className":468,"code":779,"language":471,"meta":472,"style":472},"styleframe build [entry] [options]\n",[474,781,782],{"__ignoreMap":472},[477,783,784,786,789,792,796,798],{"class":479,"line":480},[477,785,588],{"class":483},[477,787,788],{"class":486}," build",[477,790,791],{"class":594}," [entry] ",[477,793,795],{"class":794},"sMK4o","[",[477,797,602],{"class":594},[477,799,800],{"class":794},"]\n",[417,802,803],{},"Build your Styleframe project and generate CSS output files.",[600,805,603],{"id":806},"options-1",[605,808,809,823],{},[608,810,811],{},[611,812,813,815,817,819,821],{},[614,814,616],{},[614,816,619],{},[614,818,622],{},[614,820,625],{},[614,822,628],{},[630,824,825,846,872],{},[611,826,827,832,835,839,843],{},[635,828,829],{},[474,830,831],{},"entry",[635,833,834],{},"-",[635,836,837],{},[474,838,653],{},[635,840,841],{},[474,842,726],{},[635,844,845],{},"Entry point file(s) for the build",[611,847,848,853,861,865,869],{},[635,849,850],{},[474,851,852],{},"--outputDir",[635,854,855,645,858],{},[474,856,857],{},"-o",[474,859,860],{},"--out",[635,862,863],{},[474,864,653],{},[635,866,867],{},[474,868,588],{},[635,870,871],{},"Output directory for built files",[611,873,874,879,881,886,891],{},[635,875,876],{},[474,877,878],{},"--clean",[635,880,834],{},[635,882,883],{},[474,884,885],{},"boolean",[635,887,888],{},[474,889,890],{},"false",[635,892,893],{},"Clean output directory before build",[600,895,665],{"id":896},"usage-1",[667,898,899,914,931],{},[670,900,902],{"icon":672,"label":901},"Default Build",[466,903,905],{"className":468,"code":904,"language":471,"meta":472,"style":472},"styleframe build\n",[474,906,907],{"__ignoreMap":472},[477,908,909,911],{"class":479,"line":480},[477,910,588],{"class":483},[477,912,913],{"class":486}," build\n",[670,915,917],{"icon":672,"label":916},"Custom Entry",[466,918,920],{"className":468,"code":919,"language":471,"meta":472,"style":472},"styleframe build my-styles.config.ts\n",[474,921,922],{"__ignoreMap":472},[477,923,924,926,928],{"class":479,"line":480},[477,925,588],{"class":483},[477,927,788],{"class":486},[477,929,930],{"class":486}," my-styles.config.ts\n",[670,932,934],{"icon":672,"label":933},"Custom Output",[466,935,937],{"className":468,"code":936,"language":471,"meta":472,"style":472},"styleframe build --outputDir dist/styles\nstyleframe build -o dist/styles\nstyleframe build --out dist/styles\n",[474,938,939,951,962],{"__ignoreMap":472},[477,940,941,943,945,948],{"class":479,"line":480},[477,942,588],{"class":483},[477,944,788],{"class":486},[477,946,947],{"class":486}," --outputDir",[477,949,950],{"class":486}," dist/styles\n",[477,952,953,955,957,960],{"class":479,"line":708},[477,954,588],{"class":483},[477,956,788],{"class":486},[477,958,959],{"class":486}," -o",[477,961,950],{"class":486},[477,963,965,967,969,972],{"class":479,"line":964},3,[477,966,588],{"class":483},[477,968,788],{"class":486},[477,970,971],{"class":486}," --out",[477,973,950],{"class":486},[719,975,976,979,982],{},[431,977,978],{},"Loads your Styleframe configuration from the entry file",[431,980,981],{},"Processes all styles, variables, themes, and utilities",[431,983,984],{},"Generates optimized CSS files in the specified output directory",[417,986,987],{},"The build command generates a structured output directory:",[466,989,994],{"className":990,"code":992,"language":993},[991],"language-text","styleframe/\n├── index.css          # Main compiled CSS\n└── index.ts           # Main compiled TypeScript\n","text",[474,995,992],{"__ignoreMap":472},[563,997],{},[566,999,1001,1004],{"id":1000},"watch",[477,1002,1000],{"className":1003},[571]," 🚧",[573,1006,1007],{},[576,1008,1009,1029],{"type":578},[466,1010,1012],{"className":468,"code":1011,"language":471,"meta":472,"style":472},"styleframe watch [entry] [options]\n",[474,1013,1014],{"__ignoreMap":472},[477,1015,1016,1018,1021,1023,1025,1027],{"class":479,"line":480},[477,1017,588],{"class":483},[477,1019,1020],{"class":486}," watch",[477,1022,791],{"class":594},[477,1024,795],{"class":794},[477,1026,602],{"class":594},[477,1028,800],{"class":794},[417,1030,1031],{},"Watch mode is planned for a future release. It will automatically rebuild your styles when configuration files change.",[1033,1034,1036,1039,1040,1047],"note",{"icon":1035},"i-lucide-clock",[434,1037,1038],{},"Coming soon",": Track progress in the ",[1041,1042,1046],"a",{"href":1043,"rel":1044},"https://github.com/styleframe-dev/styleframe",[1045],"nofollow","GitHub repository",".",[563,1049],{},[566,1051,1052],{"id":560},[477,1053,560],{"className":1054},[571],[573,1056,1057],{},[576,1058,1059,1085],{"type":578},[466,1060,1062],{"className":468,"code":1061,"language":471,"meta":472,"style":472},"styleframe figma \u003Csubcommand> [options]\n",[474,1063,1064],{"__ignoreMap":472},[477,1065,1066,1068,1071,1074,1077,1080,1083],{"class":479,"line":480},[477,1067,588],{"class":483},[477,1069,1070],{"class":486}," figma",[477,1072,1073],{"class":794}," \u003C",[477,1075,1076],{"class":486},"subcomman",[477,1078,1079],{"class":594},"d",[477,1081,1082],{"class":794},">",[477,1084,595],{"class":594},[417,1086,1087],{},"Sync Styleframe variables with Figma using the DTCG (Design Tokens Community Group) format.",[417,1089,1090,1091,1093],{},"The ",[474,1092,560],{}," command provides two subcommands for bidirectional synchronization:",[428,1095,1096,1102],{},[431,1097,1098,1101],{},[434,1099,1100],{},"export",": Export Styleframe variables to DTCG format JSON for importing into Figma",[431,1103,1104,1107],{},[434,1105,1106],{},"import",": Generate Styleframe TypeScript code from DTCG format JSON exported from Figma",[563,1109],{},[600,1111,1113],{"id":1112},"figma-export",[477,1114,1116],{"className":1115},[571],"figma export",[573,1118,1119],{},[576,1120,1121,1137],{"type":578},[466,1122,1124],{"className":468,"code":1123,"language":471,"meta":472,"style":472},"styleframe figma export [options]\n",[474,1125,1126],{"__ignoreMap":472},[477,1127,1128,1130,1132,1135],{"class":479,"line":480},[477,1129,588],{"class":483},[477,1131,1070],{"class":486},[477,1133,1134],{"class":486}," export",[477,1136,595],{"class":594},[417,1138,1139],{},"Export Styleframe variables to DTCG format JSON.",[1141,1142,603],"h5",{"id":1143},"options-2",[605,1145,1146,1160],{},[608,1147,1148],{},[611,1149,1150,1152,1154,1156,1158],{},[614,1151,616],{},[614,1153,619],{},[614,1155,622],{},[614,1157,625],{},[614,1159,628],{},[630,1161,1162,1185,1208,1234],{},[611,1163,1164,1169,1174,1178,1182],{},[635,1165,1166],{},[474,1167,1168],{},"--config",[635,1170,1171],{},[474,1172,1173],{},"-c",[635,1175,1176],{},[474,1177,653],{},[635,1179,1180],{},[474,1181,726],{},[635,1183,1184],{},"Path to the Styleframe config file",[611,1186,1187,1192,1196,1200,1205],{},[635,1188,1189],{},[474,1190,1191],{},"--output",[635,1193,1194],{},[474,1195,857],{},[635,1197,1198],{},[474,1199,653],{},[635,1201,1202],{},[474,1203,1204],{},"tokens.json",[635,1206,1207],{},"Output JSON file path",[611,1209,1210,1215,1223,1227,1231],{},[635,1211,1212],{},[474,1213,1214],{},"--collection",[635,1216,1217,645,1220],{},[474,1218,1219],{},"-n",[474,1221,1222],{},"--name",[635,1224,1225],{},[474,1226,653],{},[635,1228,1229],{},[474,1230,150],{},[635,1232,1233],{},"Name for the Figma collection",[611,1235,1236,1241,1243,1247,1252],{},[635,1237,1238],{},[474,1239,1240],{},"--baseFontSize",[635,1242,834],{},[635,1244,1245],{},[474,1246,653],{},[635,1248,1249],{},[474,1250,1251],{},"16",[635,1253,1254],{},"Base font size for rem conversion (in pixels)",[1141,1256,665],{"id":1257},"usage-2",[667,1259,1260,1277,1312],{},[670,1261,1263],{"icon":672,"label":1262},"Default Export",[466,1264,1266],{"className":468,"code":1265,"language":471,"meta":472,"style":472},"styleframe figma export\n",[474,1267,1268],{"__ignoreMap":472},[477,1269,1270,1272,1274],{"class":479,"line":480},[477,1271,588],{"class":483},[477,1273,1070],{"class":486},[477,1275,1276],{"class":486}," export\n",[670,1278,1280],{"icon":672,"label":1279},"Custom Config",[466,1281,1283],{"className":468,"code":1282,"language":471,"meta":472,"style":472},"styleframe figma export --config src/styleframe.config.ts\nstyleframe figma export -c src/styleframe.config.ts\n",[474,1284,1285,1299],{"__ignoreMap":472},[477,1286,1287,1289,1291,1293,1296],{"class":479,"line":480},[477,1288,588],{"class":483},[477,1290,1070],{"class":486},[477,1292,1134],{"class":486},[477,1294,1295],{"class":486}," --config",[477,1297,1298],{"class":486}," src/styleframe.config.ts\n",[477,1300,1301,1303,1305,1307,1310],{"class":479,"line":708},[477,1302,588],{"class":483},[477,1304,1070],{"class":486},[477,1306,1134],{"class":486},[477,1308,1309],{"class":486}," -c",[477,1311,1298],{"class":486},[670,1313,1315],{"icon":672,"label":1314},"Custom Collection",[466,1316,1318],{"className":468,"code":1317,"language":471,"meta":472,"style":472},"styleframe figma export --collection \"My Design System\"\nstyleframe figma export -n \"My Design System\"\n",[474,1319,1320,1340],{"__ignoreMap":472},[477,1321,1322,1324,1326,1328,1331,1334,1337],{"class":479,"line":480},[477,1323,588],{"class":483},[477,1325,1070],{"class":486},[477,1327,1134],{"class":486},[477,1329,1330],{"class":486}," --collection",[477,1332,1333],{"class":794}," \"",[477,1335,1336],{"class":486},"My Design System",[477,1338,1339],{"class":794},"\"\n",[477,1341,1342,1344,1346,1348,1351,1353,1355],{"class":479,"line":708},[477,1343,588],{"class":483},[477,1345,1070],{"class":486},[477,1347,1134],{"class":486},[477,1349,1350],{"class":486}," -n",[477,1352,1333],{"class":794},[477,1354,1336],{"class":486},[477,1356,1339],{"class":794},[719,1358,1359,1362,1365,1368],{},[431,1360,1361],{},"Loads your Styleframe configuration from the config file",[431,1363,1364],{},"Extracts all variables from root and themes",[431,1366,1367],{},"Converts variables to Figma-compatible types (color, number, string, boolean)",[431,1369,1370],{},"Generates DTCG-formatted JSON with theme support as Figma modes",[563,1372],{},[600,1374,1376],{"id":1375},"figma-import",[477,1377,1379],{"className":1378},[571],"figma import",[573,1381,1382],{},[576,1383,1384,1400],{"type":578},[466,1385,1387],{"className":468,"code":1386,"language":471,"meta":472,"style":472},"styleframe figma import [options]\n",[474,1388,1389],{"__ignoreMap":472},[477,1390,1391,1393,1395,1398],{"class":479,"line":480},[477,1392,588],{"class":483},[477,1394,1070],{"class":486},[477,1396,1397],{"class":486}," import",[477,1399,595],{"class":594},[417,1401,1402],{},"Generate Styleframe TypeScript code from DTCG format JSON.",[1141,1404,603],{"id":1405},"options-3",[605,1407,1408,1422],{},[608,1409,1410],{},[611,1411,1412,1414,1416,1418,1420],{},[614,1413,616],{},[614,1415,619],{},[614,1417,622],{},[614,1419,625],{},[614,1421,628],{},[630,1423,1424,1445,1467,1488,1508,1526],{},[611,1425,1426,1431,1436,1440,1442],{},[635,1427,1428],{},[474,1429,1430],{},"--input",[635,1432,1433],{},[474,1434,1435],{},"-i",[635,1437,1438],{},[474,1439,653],{},[635,1441,834],{},[635,1443,1444],{},"Input DTCG JSON file path (required)",[611,1446,1447,1451,1455,1459,1464],{},[635,1448,1449],{},[474,1450,1191],{},[635,1452,1453],{},[474,1454,857],{},[635,1456,1457],{},[474,1458,653],{},[635,1460,1461],{},[474,1462,1463],{},"tokens.styleframe.ts",[635,1465,1466],{},"Output Styleframe TypeScript file path",[611,1468,1469,1474,1476,1480,1485],{},[635,1470,1471],{},[474,1472,1473],{},"--composables",[635,1475,834],{},[635,1477,1478],{},[474,1479,885],{},[635,1481,1482],{},[474,1483,1484],{},"true",[635,1486,1487],{},"Use @styleframe/theme composables (useColorDesignTokens, useSpacingDesignTokens, etc.)",[611,1489,1490,1495,1497,1501,1505],{},[635,1491,1492],{},[474,1493,1494],{},"--rem",[635,1496,834],{},[635,1498,1499],{},[474,1500,885],{},[635,1502,1503],{},[474,1504,890],{},[635,1506,1507],{},"Use rem units for dimensions instead of px",[611,1509,1510,1514,1516,1520,1524],{},[635,1511,1512],{},[474,1513,1240],{},[635,1515,834],{},[635,1517,1518],{},[474,1519,653],{},[635,1521,1522],{},[474,1523,1251],{},[635,1525,1254],{},[611,1527,1528,1533,1535,1539,1544],{},[635,1529,1530],{},[474,1531,1532],{},"--instanceName",[635,1534,834],{},[635,1536,1537],{},[474,1538,653],{},[635,1540,1541],{},[474,1542,1543],{},"s",[635,1545,1546],{},"Name for the Styleframe instance variable",[1141,1548,665],{"id":1549},"usage-3",[667,1551,1552,1587,1629,1674],{},[670,1553,1555],{"icon":672,"label":1554},"Basic Import",[466,1556,1558],{"className":468,"code":1557,"language":471,"meta":472,"style":472},"styleframe figma import --input tokens.json\nstyleframe figma import -i tokens.json\n",[474,1559,1560,1574],{"__ignoreMap":472},[477,1561,1562,1564,1566,1568,1571],{"class":479,"line":480},[477,1563,588],{"class":483},[477,1565,1070],{"class":486},[477,1567,1397],{"class":486},[477,1569,1570],{"class":486}," --input",[477,1572,1573],{"class":486}," tokens.json\n",[477,1575,1576,1578,1580,1582,1585],{"class":479,"line":708},[477,1577,588],{"class":483},[477,1579,1070],{"class":486},[477,1581,1397],{"class":486},[477,1583,1584],{"class":486}," -i",[477,1586,1573],{"class":486},[670,1588,1589],{"icon":672,"label":933},[466,1590,1592],{"className":468,"code":1591,"language":471,"meta":472,"style":472},"styleframe figma import -i tokens.json --output src/tokens.styleframe.ts\nstyleframe figma import -i tokens.json -o src/tokens.styleframe.ts\n",[474,1593,1594,1613],{"__ignoreMap":472},[477,1595,1596,1598,1600,1602,1604,1607,1610],{"class":479,"line":480},[477,1597,588],{"class":483},[477,1599,1070],{"class":486},[477,1601,1397],{"class":486},[477,1603,1584],{"class":486},[477,1605,1606],{"class":486}," tokens.json",[477,1608,1609],{"class":486}," --output",[477,1611,1612],{"class":486}," src/tokens.styleframe.ts\n",[477,1614,1615,1617,1619,1621,1623,1625,1627],{"class":479,"line":708},[477,1616,588],{"class":483},[477,1618,1070],{"class":486},[477,1620,1397],{"class":486},[477,1622,1584],{"class":486},[477,1624,1606],{"class":486},[477,1626,959],{"class":486},[477,1628,1612],{"class":486},[670,1630,1632],{"icon":672,"label":1631},"With rem Units",[466,1633,1635],{"className":468,"code":1634,"language":471,"meta":472,"style":472},"styleframe figma import -i tokens.json --rem\nstyleframe figma import -i tokens.json --rem --baseFontSize 14\n",[474,1636,1637,1652],{"__ignoreMap":472},[477,1638,1639,1641,1643,1645,1647,1649],{"class":479,"line":480},[477,1640,588],{"class":483},[477,1642,1070],{"class":486},[477,1644,1397],{"class":486},[477,1646,1584],{"class":486},[477,1648,1606],{"class":486},[477,1650,1651],{"class":486}," --rem\n",[477,1653,1654,1656,1658,1660,1662,1664,1667,1670],{"class":479,"line":708},[477,1655,588],{"class":483},[477,1657,1070],{"class":486},[477,1659,1397],{"class":486},[477,1661,1584],{"class":486},[477,1663,1606],{"class":486},[477,1665,1666],{"class":486}," --rem",[477,1668,1669],{"class":486}," --baseFontSize",[477,1671,1673],{"class":1672},"sbssI"," 14\n",[670,1675,1677],{"icon":672,"label":1676},"Without Composables",[466,1678,1680],{"className":468,"code":1679,"language":471,"meta":472,"style":472},"styleframe figma import -i tokens.json --composables false\n",[474,1681,1682],{"__ignoreMap":472},[477,1683,1684,1686,1688,1690,1692,1694,1697],{"class":479,"line":480},[477,1685,588],{"class":483},[477,1687,1070],{"class":486},[477,1689,1397],{"class":486},[477,1691,1584],{"class":486},[477,1693,1606],{"class":486},[477,1695,1696],{"class":486}," --composables",[477,1698,1699],{"class":794}," false\n",[719,1701,1702,1705,1708,1711],{},[431,1703,1704],{},"Reads and parses the input DTCG JSON file",[431,1706,1707],{},"Converts DTCG format to Styleframe variables and themes",[431,1709,1710],{},"Generates TypeScript code with proper imports and variable definitions",[431,1712,1713],{},"Optionally uses @styleframe/theme composables for common patterns",[563,1715],{},[413,1717,1719],{"id":1718},"best-practices","Best Practices",[428,1721,1722,1731,1740,1750,1759],{},[431,1723,1724,1727,1728,1730],{},[434,1725,1726],{},"Use npm scripts",": Define CLI commands in your ",[474,1729,743],{}," for consistent execution across your team.",[431,1732,1733,1736,1737,1739],{},[434,1734,1735],{},"Version control configs",": Commit your ",[474,1738,726],{}," to ensure consistent styling across environments.",[431,1741,1742,1745,1746,1749],{},[434,1743,1744],{},"Integrate with CI/CD",": Run ",[474,1747,1748],{},"styleframe build"," in your deployment pipeline to generate production CSS.",[431,1751,1752,1755,1756,1758],{},[434,1753,1754],{},"Organize output",": Use ",[474,1757,852],{}," to organize generated files according to your project structure.",[431,1760,1761,1764,1765,1768,1769,1047],{},[434,1762,1763],{},"Descriptive naming",": Use clear names for multiple configs like ",[474,1766,1767],{},"styleframe.theme.config.ts"," or ",[474,1770,1771],{},"styleframe.components.config.ts",[1773,1774,1776,1779,1780,1784],"warning",{"icon":1775},"i-lucide-alert-triangle",[434,1777,1778],{},"Use native integrations",": We recommend using native integrations with ",[1041,1781,1783],{"href":1782},"/docs/getting-started/installation/vite","Vite"," and other tools for building projects using styleframe.",[413,1786,1788],{"id":1787},"faq","FAQ",[1790,1791,1792,1825,1848,1856,1895,1899,1913,1928],"accordion",{},[1793,1794,1797,1811],"accordion-item",{"icon":1795,"label":1796},"i-lucide-circle-help","Command not found: styleframe",[417,1798,1799,1800,1802,1803,1806,1807,1810],{},"Ensure ",[474,1801,588],{}," is present in your ",[474,1804,1805],{},"node_modules/.bin"," directory. Alternatively, try running the command with ",[474,1808,1809],{},"npx",":",[466,1812,1814],{"className":468,"code":1813,"language":471,"meta":472,"style":472},"npx styleframe init\n",[474,1815,1816],{"__ignoreMap":472},[477,1817,1818,1820,1823],{"class":479,"line":480},[477,1819,1809],{"class":483},[477,1821,1822],{"class":486}," styleframe",[477,1824,685],{"class":486},[1793,1826,1828,1834],{"icon":1795,"label":1827},"Configuration file not found",[417,1829,1830,1831,1833],{},"The CLI looks for ",[474,1832,726],{}," by default. Either create this file or specify your config path:",[466,1835,1837],{"className":468,"code":1836,"language":471,"meta":472,"style":472},"styleframe build path/to/your/config.ts\n",[474,1838,1839],{"__ignoreMap":472},[477,1840,1841,1843,1845],{"class":479,"line":480},[477,1842,588],{"class":483},[477,1844,788],{"class":486},[477,1846,1847],{"class":486}," path/to/your/config.ts\n",[1793,1849,1851,1852,1855],{"icon":1795,"label":1850},"Can I use JavaScript instead of TypeScript for config?","Currently, the CLI expects TypeScript configuration files (",[474,1853,1854],{},".ts","). You can still write your application code in JavaScript while using TypeScript only for the config file.",[1793,1857,1859,1862],{"icon":1795,"label":1858},"How do I use multiple configuration files?",[417,1860,1861],{},"Run the build command with different entry points and output directories:",[466,1863,1865],{"className":468,"code":1864,"language":471,"meta":472,"style":472},"styleframe build styleframe.theme.config.ts -o dist/theme\nstyleframe build styleframe.components.config.ts -o dist/components\n",[474,1866,1867,1881],{"__ignoreMap":472},[477,1868,1869,1871,1873,1876,1878],{"class":479,"line":480},[477,1870,588],{"class":483},[477,1872,788],{"class":486},[477,1874,1875],{"class":486}," styleframe.theme.config.ts",[477,1877,959],{"class":486},[477,1879,1880],{"class":486}," dist/theme\n",[477,1882,1883,1885,1887,1890,1892],{"class":479,"line":708},[477,1884,588],{"class":483},[477,1886,788],{"class":486},[477,1888,1889],{"class":486}," styleframe.components.config.ts",[477,1891,959],{"class":486},[477,1893,1894],{"class":486}," dist/components\n",[1793,1896,1898],{"icon":1795,"label":1897},"Build fails with module errors","Ensure all dependencies are installed and your configuration file has valid TypeScript syntax. Verify that you've exported your Styleframe instance as the default export.",[1793,1900,1902,1903,1905,1906,1912],{"icon":1795,"label":1901},"Does the CLI support custom configuration options?","Configuration options are defined in your ",[474,1904,726],{}," file using the ",[1041,1907,1909],{"href":1908},"/docs/api/instance#configuration-options",[474,1910,1911],{},"styleframe()"," function. The CLI respects all configuration options you set there.",[1793,1914,1916,1917,1919,1920,1923,1924,1927],{"icon":1795,"label":1915},"Can I programmatically use CLI commands?","While primarily designed for CLI use, you can import and use the underlying ",[474,1918,556],{}," and ",[474,1921,1922],{},"loadConfiguration"," functions directly from ",[474,1925,1926],{},"@styleframe/loader"," in Node.js scripts.",[1793,1929,1931,1937,1958],{"icon":1795,"label":1930},"How do I sync variables with Figma?",[417,1932,1933,1934,1936],{},"Use the ",[474,1935,560],{}," command for bidirectional sync:",[719,1938,1939,1948],{},[431,1940,1941,1745,1944,1947],{},[434,1942,1943],{},"Export to Figma",[474,1945,1946],{},"styleframe figma export"," to generate a DTCG JSON file, then import it into Figma using the Variables Import plugin",[431,1949,1950,1953,1954,1957],{},[434,1951,1952],{},"Import from Figma",": Export your Figma variables as DTCG JSON, then run ",[474,1955,1956],{},"styleframe figma import -i tokens.json"," to generate Styleframe code",[466,1959,1961],{"className":468,"code":1960,"language":471,"meta":472,"style":472},"# Export Styleframe → Figma\nstyleframe figma export -o tokens.json\n\n# Import Figma → Styleframe\nstyleframe figma import -i tokens.json -o src/tokens.styleframe.ts\n",[474,1962,1963,1969,1981,1986,1992],{"__ignoreMap":472},[477,1964,1965],{"class":479,"line":480},[477,1966,1968],{"class":1967},"sHwdD","# Export Styleframe → Figma\n",[477,1970,1971,1973,1975,1977,1979],{"class":479,"line":708},[477,1972,588],{"class":483},[477,1974,1070],{"class":486},[477,1976,1134],{"class":486},[477,1978,959],{"class":486},[477,1980,1573],{"class":486},[477,1982,1983],{"class":479,"line":964},[477,1984,1985],{"emptyLinePlaceholder":206},"\n",[477,1987,1989],{"class":479,"line":1988},4,[477,1990,1991],{"class":1967},"# Import Figma → Styleframe\n",[477,1993,1995,1997,1999,2001,2003,2005,2007],{"class":479,"line":1994},5,[477,1996,588],{"class":483},[477,1998,1070],{"class":486},[477,2000,1397],{"class":486},[477,2002,1584],{"class":486},[477,2004,1606],{"class":486},[477,2006,959],{"class":486},[477,2008,1612],{"class":486},[2010,2011,2012],"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":472,"searchDepth":708,"depth":708,"links":2014},[2015,2016,2017,2018,2025,2026],{"id":415,"depth":708,"text":64},{"id":422,"depth":708,"text":423},{"id":458,"depth":708,"text":17},{"id":545,"depth":708,"text":546,"children":2019},[2020,2021,2022,2024],{"id":552,"depth":964,"text":552},{"id":556,"depth":964,"text":556},{"id":1000,"depth":964,"text":2023},"watch 🚧",{"id":560,"depth":964,"text":560},{"id":1718,"depth":708,"text":1719},{"id":1787,"depth":708,"text":1788},"Use the Styleframe CLI to initialize projects and build optimized CSS from your configuration files.","md",null,{},{"icon":41},{"title":38,"description":2027},{"loc":39},"WwWQ5ucw4MUGmoeZKKKLLrC8HSjXwHE2YC9l8A8Utx8",[2036,2038],{"title":27,"path":28,"stem":29,"description":2037,"icon":30,"children":-1},"See how Styleframe compares to other CSS-in-TypeScript solutions and styling frameworks",{"title":43,"path":44,"stem":45,"description":2039,"icon":46,"children":-1},"Automatically detect utility class names in your source files and generate the corresponding CSS at build time — no manual value definitions needed.",1776621131447]