[{"data":1,"prerenderedAt":2894},["ShallowReactive",2],{"navigation_en":3,"-docs-getting-started-integrations-figma-plugin":539,"-docs-getting-started-integrations-figma-plugin-surround":2889},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"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],{"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/06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","/docs/getting-started/licensing","docs/getting-started/07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","/docs/getting-started/tooling","docs/getting-started/tooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/tooling/01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/tooling/02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","/docs/getting-started/integrations","docs/getting-started/integrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","/docs/getting-started/integrations/dtcg","docs/getting-started/integrations/01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","/docs/getting-started/integrations/figma-plugin","docs/getting-started/integrations/02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","/docs/getting-started/integrations/storybook","docs/getting-started/integrations/03.storybook","i-simple-icons-storybook",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","/docs/api","docs/api/00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":141,"path":142,"stem":143},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs/api/14.imports",[163,236,330,421,494],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[168,169,174],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":146,"icon":149,"defaultOpen":7,"path":175,"stem":176,"children":177,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[178,182,186,190,194,198,202,206,220,224,228,232],{"title":179,"path":180,"stem":181,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":183,"path":184,"stem":185,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":187,"path":188,"stem":189,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":191,"path":192,"stem":193,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":195,"path":196,"stem":197,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":199,"path":200,"stem":201,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":203,"path":204,"stem":205,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":207,"path":208,"stem":209,"children":210,"icon":7,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[211,212,216],{"title":78,"path":208,"stem":209},{"title":213,"path":214,"stem":215},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":217,"path":218,"stem":219},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",{"title":221,"path":222,"stem":223,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":225,"path":226,"stem":227,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":229,"path":230,"stem":231,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":233,"path":234,"stem":235,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":237,"path":238,"stem":239,"children":240,"icon":7},"Elements","/docs/theme/elements","docs/theme/elements/00.index",[241,242,246],{"title":78,"path":238,"stem":239,"icon":79},{"title":243,"path":244,"stem":245,"icon":173},"Preset","/docs/theme/elements/preset","docs/theme/elements/01.preset",{"title":146,"icon":149,"defaultOpen":7,"path":247,"stem":248,"children":249,"page":7},"/docs/theme/elements/composables","docs/theme/elements/02.composables",[250,254,258,262,266,270,274,278,282,286,290,294,298,302,306,310,314,318,322,326],{"title":251,"path":252,"stem":253,"icon":7},"Abbreviation","/docs/theme/elements/composables/abbreviation","docs/theme/elements/02.composables/00.abbreviation",{"title":255,"path":256,"stem":257,"icon":7},"Address","/docs/theme/elements/composables/address","docs/theme/elements/02.composables/01.address",{"title":259,"path":260,"stem":261,"icon":7},"Body","/docs/theme/elements/composables/body","docs/theme/elements/02.composables/02.body",{"title":263,"path":264,"stem":265,"icon":7},"Caption","/docs/theme/elements/composables/caption","docs/theme/elements/02.composables/03.caption",{"title":267,"path":268,"stem":269,"icon":7},"Code","/docs/theme/elements/composables/code","docs/theme/elements/02.composables/04.code",{"title":271,"path":272,"stem":273,"icon":7},"Definition Lists","/docs/theme/elements/composables/definition-lists","docs/theme/elements/02.composables/05.definition-lists",{"title":275,"path":276,"stem":277,"icon":7},"Focus","/docs/theme/elements/composables/focus","docs/theme/elements/02.composables/06.focus",{"title":279,"path":280,"stem":281,"icon":7},"Headings","/docs/theme/elements/composables/headings","docs/theme/elements/02.composables/07.headings",{"title":283,"path":284,"stem":285,"icon":7},"Horizontal Rule","/docs/theme/elements/composables/horizontal-rule","docs/theme/elements/02.composables/08.horizontal-rule",{"title":287,"path":288,"stem":289,"icon":7},"Iframe","/docs/theme/elements/composables/iframe","docs/theme/elements/02.composables/09.iframe",{"title":291,"path":292,"stem":293,"icon":7},"Image","/docs/theme/elements/composables/image","docs/theme/elements/02.composables/10.image",{"title":295,"path":296,"stem":297,"icon":7},"Kbd","/docs/theme/elements/composables/kbd","docs/theme/elements/02.composables/11.kbd",{"title":299,"path":300,"stem":301,"icon":7},"Legend","/docs/theme/elements/composables/legend","docs/theme/elements/02.composables/12.legend",{"title":303,"path":304,"stem":305,"icon":7},"Links","/docs/theme/elements/composables/links","docs/theme/elements/02.composables/13.links",{"title":307,"path":308,"stem":309,"icon":7},"Lists","/docs/theme/elements/composables/lists","docs/theme/elements/02.composables/14.lists",{"title":311,"path":312,"stem":313,"icon":7},"Mark","/docs/theme/elements/composables/mark","docs/theme/elements/02.composables/15.mark",{"title":315,"path":316,"stem":317,"icon":7},"Output","/docs/theme/elements/composables/output","docs/theme/elements/02.composables/16.output",{"title":319,"path":320,"stem":321,"icon":7},"Paragraphs","/docs/theme/elements/composables/paragraphs","docs/theme/elements/02.composables/17.paragraphs",{"title":323,"path":324,"stem":325,"icon":7},"Selection","/docs/theme/elements/composables/selection","docs/theme/elements/02.composables/18.selection",{"title":327,"path":328,"stem":329,"icon":7},"Summary","/docs/theme/elements/composables/summary","docs/theme/elements/02.composables/19.summary",{"title":331,"path":332,"stem":333,"children":334,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[335,336],{"title":78,"path":332,"stem":333,"icon":79},{"title":146,"icon":149,"defaultOpen":337,"path":338,"stem":339,"children":340,"page":7},true,"/docs/theme/components/composables","docs/theme/components/02.composables",[341,345,349,353,357,361,365,369,373,377,381,385,389,393,397,401,405,409,413,417],{"title":342,"path":343,"stem":344},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":346,"path":347,"stem":348},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":350,"path":351,"stem":352},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":354,"path":355,"stem":356},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":358,"path":359,"stem":360},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":362,"path":363,"stem":364},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":366,"path":367,"stem":368},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":370,"path":371,"stem":372},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":374,"path":375,"stem":376},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":378,"path":379,"stem":380},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":382,"path":383,"stem":384},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":386,"path":387,"stem":388},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":390,"path":391,"stem":392},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":394,"path":395,"stem":396},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":398,"path":399,"stem":400},"Dropdown","/docs/theme/components/composables/dropdown","docs/theme/components/02.composables/14.dropdown",{"title":402,"path":403,"stem":404},"Hamburger Menu","/docs/theme/components/composables/hamburger-menu","docs/theme/components/02.composables/14.hamburger-menu",{"title":406,"path":407,"stem":408},"Breadcrumb","/docs/theme/components/composables/breadcrumb","docs/theme/components/02.composables/15.breadcrumb",{"title":410,"path":411,"stem":412},"Media","/docs/theme/components/composables/media","docs/theme/components/02.composables/15.media",{"title":414,"path":415,"stem":416},"PageHero","/docs/theme/components/composables/page-hero","docs/theme/components/02.composables/15.page-hero",{"title":418,"path":419,"stem":420},"Pagination","/docs/theme/components/composables/pagination","docs/theme/components/02.composables/15.pagination",{"title":116,"path":422,"stem":423,"children":424,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[425,426,429],{"title":78,"path":422,"stem":423,"icon":79},{"title":170,"path":427,"stem":428,"icon":173},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":146,"icon":149,"defaultOpen":7,"path":430,"stem":431,"children":432,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[433,437,441,445,448,452,456,460,464,468,472,475,479,483,487,491],{"title":434,"path":435,"stem":436,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":438,"path":439,"stem":440,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":442,"path":443,"stem":444,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":183,"path":446,"stem":447,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":449,"path":450,"stem":451,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":453,"path":454,"stem":455,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":457,"path":458,"stem":459,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":461,"path":462,"stem":463,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":465,"path":466,"stem":467,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":469,"path":470,"stem":471,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":225,"path":473,"stem":474,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":476,"path":477,"stem":478,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":480,"path":481,"stem":482,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":484,"path":485,"stem":486,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":488,"path":489,"stem":490,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":229,"path":492,"stem":493,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":495,"path":496,"stem":497,"children":498,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[499,500,503],{"title":78,"path":496,"stem":497,"icon":79},{"title":170,"path":501,"stem":502,"icon":173},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":146,"icon":149,"defaultOpen":7,"path":504,"stem":505,"children":506,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[507,511,515,519,523,527,531,535],{"title":508,"path":509,"stem":510,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":512,"path":513,"stem":514,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":516,"path":517,"stem":518,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":520,"path":521,"stem":522,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":524,"path":525,"stem":526,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":528,"path":529,"stem":530,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":532,"path":533,"stem":534,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":536,"path":537,"stem":538,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":540,"title":62,"body":541,"description":2882,"extension":2681,"links":2883,"meta":2884,"navigation":2885,"path":63,"seo":2886,"sitemap":2887,"stem":64,"__hash__":2888},"docs_gettingStarted/docs/getting-started/integrations/02.figma-plugin.md",{"type":542,"value":543,"toc":2856},"minimark",[544,548,552,558,592,596,599,610,614,656,667,670,674,685,689,698,701,746,749,763,767,771,778,781,820,823,841,843,847,850,854,857,886,975,980,1058,1063,1197,1219,1223,1226,1257,1383,1387,1516,1521,1935,1937,1941,1944,1948,2225,2229,2246,2250,2269,2273,2276,2280,2283,2318,2327,2719,2727,2731,2771,2775,2852],[545,546,78],"h2",{"id":547},"overview",[549,550,551],"p",{},"The Styleframe Figma Plugin enables bidirectional synchronization of design tokens between your codebase and Figma. Export your Styleframe variables to Figma, or import Figma variables back into your codebase—all using the industry-standard W3C DTCG (Design Tokens Community Group) format.",[549,553,554],{},[555,556,557],"strong",{},"Key features:",[559,560,561,568,574,580,586],"ul",{},[562,563,564,567],"li",{},[555,565,566],{},"Code-first architecture",": Your Styleframe config is the single source of truth",[562,569,570,573],{},[555,571,572],{},"Bidirectional sync",": Import tokens into Figma or export Figma variables to code",[562,575,576,579],{},[555,577,578],{},"Multi-mode support",": Light, dark, and custom themes are preserved as Figma modes",[562,581,582,585],{},[555,583,584],{},"Type-safe",": Colors, dimensions, strings, and booleans are mapped correctly",[562,587,588,591],{},[555,589,590],{},"Free and open source",": No subscriptions or seat limits",[545,593,595],{"id":594},"prerequisites","Prerequisites",[549,597,598],{},"Before you begin, ensure you have:",[559,600,601,604,607],{},[562,602,603],{},"A Styleframe project with design tokens defined",[562,605,606],{},"A Figma account (free or paid)",[562,608,609],{},"Node.js 18+ installed (for CLI commands)",[545,611,613],{"id":612},"installing-the-figma-plugin","Installing the Figma Plugin",[615,616,617,622,634,638,645,649],"steps",{},[618,619,621],"h3",{"id":620},"visit-the-figma-community","Visit the Figma Community",[549,623,624,625,633],{},"Go to the ",[626,627,632],"a",{"href":628,"rel":629,"target":631},"https://www.figma.com/community/plugin/1597716416772135340/styleframe",[630],"nofollow","_blank","Styleframe Sync plugin"," page on the Figma Community.",[618,635,637],{"id":636},"open-in-your-figma-file","Open in your Figma file",[549,639,640,641,644],{},"Click ",[555,642,643],{},"\"Open in...\""," and select your Figma file.",[618,646,648],{"id":647},"access-the-plugin","Access the plugin",[549,650,651,652,655],{},"The plugin will appear in your Figma ",[555,653,654],{},"Plugins"," menu.",[657,658,659,662,663,666],"tip",{},[555,660,661],{},"Pro tip:"," Right-click in Figma and go to ",[555,664,665],{},"Plugins > Styleframe"," to quickly access the plugin.",[668,669],"hr",{},[545,671,673],{"id":672},"using-the-figma-plugin","Using the Figma Plugin",[549,675,676,677,680,681,684],{},"The plugin has two tabs: ",[555,678,679],{},"Import"," for bringing tokens into Figma, and ",[555,682,683],{},"Export"," for extracting Figma variables.",[618,686,688],{"id":687},"importing-tokens-into-figma","Importing Tokens into Figma",[549,690,691],{},[692,693],"img",{"alt":694,"className":695,"src":697},"Styleframe - Import Design Tokens into Figma",[696],"w-fit","/assets/images/figma-import.png",[549,699,700],{},"Import your Styleframe design tokens into Figma as native Figma Variables:",[702,703,704,715,724,735,741],"ol",{},[562,705,706,709,710,714],{},[555,707,708],{},"Export your tokens"," using the CLI (see ",[626,711,713],{"href":712},"#exporting-tokens-code--figma","CLI Export"," below)",[562,716,717,720,721,723],{},[555,718,719],{},"Open the plugin"," in Figma and select the ",[555,722,679],{}," tab",[562,725,726,729,730,734],{},[555,727,728],{},"Drag and drop"," your ",[731,732,733],"code",{},"tokens.json"," file into the drop zone (or click to browse)",[562,736,737,740],{},[555,738,739],{},"Preview"," the variables that will be created",[562,742,640,743,745],{},[555,744,679],{}," to create the Figma variable collection",[549,747,748],{},"The plugin automatically:",[559,750,751,754,757,760],{},[562,752,753],{},"Creates a new variable collection with your tokens",[562,755,756],{},"Sets up modes for each theme (Light, Dark, etc.)",[562,758,759],{},"Maps token types to Figma variable types (Color, Number, String, Boolean)",[562,761,762],{},"Preserves token aliases as Figma variable references",[764,765,766],"note",{},"If a collection with the same name already exists, variables will be updated rather than duplicated.",[618,768,770],{"id":769},"exporting-tokens-from-figma","Exporting Tokens from Figma",[549,772,773],{},[692,774],{"alt":775,"className":776,"src":777},"Styleframe - Export Design Tokens from Figma",[696],"/assets/images/figma-export.png",[549,779,780],{},"Export Figma Variables to the DTCG format for use in your codebase:",[702,782,783,790,796,801,811],{},[562,784,785,787,788,723],{},[555,786,719],{}," and select the ",[555,789,683],{},[562,791,792,795],{},[555,793,794],{},"Select a collection"," from the dropdown menu",[562,797,640,798,800],{},[555,799,683],{}," to generate the DTCG JSON",[562,802,803,806,807,810],{},[555,804,805],{},"Copy"," the JSON to your clipboard or ",[555,808,809],{},"Download"," as a file",[562,812,813,709,816,714],{},[555,814,815],{},"Import into Styleframe",[626,817,819],{"href":818},"#importing-tokens-figma--code","CLI Import",[549,821,822],{},"The export preserves:",[559,824,825,828,835,838],{},[562,826,827],{},"All variable values across modes",[562,829,830,831,834],{},"Variable aliases as DTCG references (",[731,832,833],{},"{token.path}",")",[562,836,837],{},"Token types and descriptions",[562,839,840],{},"Hierarchical token structure",[668,842],{},[545,844,846],{"id":845},"using-the-cli","Using the CLI",[549,848,849],{},"The Styleframe CLI provides commands for automating token synchronization in your development workflow.",[618,851,853],{"id":852},"exporting-tokens-code-figma","Exporting Tokens (Code → Figma)",[549,855,856],{},"Export your Styleframe variables to Figma-compatible per-mode files:",[858,859,864],"pre",{"className":860,"code":861,"language":862,"meta":863,"style":863},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","styleframe figma export [options]\n","bash","",[731,865,866],{"__ignoreMap":863},[867,868,871,875,879,882],"span",{"class":869,"line":870},"line",1,[867,872,874],{"class":873},"sBMFI","styleframe",[867,876,878],{"class":877},"sfazB"," figma",[867,880,881],{"class":877}," export",[867,883,885],{"class":884},"sTEyZ"," [options]\n",[887,888,889,908],"table",{},[890,891,892],"thead",{},[893,894,895,899,902,905],"tr",{},[896,897,898],"th",{},"Option",[896,900,901],{},"Alias",[896,903,904],{},"Default",[896,906,907],{},"Description",[909,910,911,932,956],"tbody",{},[893,912,913,919,924,929],{},[914,915,916],"td",{},[731,917,918],{},"--config",[914,920,921],{},[731,922,923],{},"-c",[914,925,926],{},[731,927,928],{},"styleframe.config.ts",[914,930,931],{},"Path to Styleframe config file",[893,933,934,939,944,949],{},[914,935,936],{},[731,937,938],{},"--output",[914,940,941],{},[731,942,943],{},"-o",[914,945,946],{},[731,947,948],{},".",[914,950,951,952,955],{},"Output directory for per-mode ",[731,953,954],{},".tokens.json"," files",[893,957,958,963,968,972],{},[914,959,960],{},[731,961,962],{},"--collection",[914,964,965],{},[731,966,967],{},"-n",[914,969,970],{},[731,971,164],{},[914,973,974],{},"Name for the Figma collection",[549,976,977],{},[555,978,979],{},"Example usage:",[858,981,983],{"className":860,"code":982,"language":862,"meta":863,"style":863},"# Export to current directory\nstyleframe figma export\n\n# Export to a dedicated folder\nstyleframe figma export -o tokens/\n\n# Custom config\nstyleframe figma export -c src/styleframe.config.ts -o tokens/\n",[731,984,985,991,1001,1007,1013,1028,1033,1039],{"__ignoreMap":863},[867,986,987],{"class":869,"line":870},[867,988,990],{"class":989},"sHwdD","# Export to current directory\n",[867,992,994,996,998],{"class":869,"line":993},2,[867,995,874],{"class":873},[867,997,878],{"class":877},[867,999,1000],{"class":877}," export\n",[867,1002,1004],{"class":869,"line":1003},3,[867,1005,1006],{"emptyLinePlaceholder":337},"\n",[867,1008,1010],{"class":869,"line":1009},4,[867,1011,1012],{"class":989},"# Export to a dedicated folder\n",[867,1014,1016,1018,1020,1022,1025],{"class":869,"line":1015},5,[867,1017,874],{"class":873},[867,1019,878],{"class":877},[867,1021,881],{"class":877},[867,1023,1024],{"class":877}," -o",[867,1026,1027],{"class":877}," tokens/\n",[867,1029,1031],{"class":869,"line":1030},6,[867,1032,1006],{"emptyLinePlaceholder":337},[867,1034,1036],{"class":869,"line":1035},7,[867,1037,1038],{"class":989},"# Custom config\n",[867,1040,1042,1044,1046,1048,1051,1054,1056],{"class":869,"line":1041},8,[867,1043,874],{"class":873},[867,1045,878],{"class":877},[867,1047,881],{"class":877},[867,1049,1050],{"class":877}," -c",[867,1052,1053],{"class":877}," src/styleframe.config.ts",[867,1055,1024],{"class":877},[867,1057,1027],{"class":877},[549,1059,1060],{},[555,1061,1062],{},"Sample output:",[858,1064,1066],{"className":860,"code":1065,"language":862,"meta":863,"style":863},"Loading configuration from \"styleframe.config.ts\"...\nBuilding DTCG document...\nFlattening to Figma-compatible format...\nWrote \"tokens/Default.tokens.json\" (450 tokens)\nWrote \"tokens/Dark.tokens.json\" (450 tokens)\nExported 450 tokens as 2 Figma-compatible mode file(s) to \"tokens\"\n",[731,1067,1068,1091,1102,1116,1137,1154],{"__ignoreMap":863},[867,1069,1070,1073,1076,1079,1083,1085,1088],{"class":869,"line":870},[867,1071,1072],{"class":873},"Loading",[867,1074,1075],{"class":877}," configuration",[867,1077,1078],{"class":877}," from",[867,1080,1082],{"class":1081},"sMK4o"," \"",[867,1084,928],{"class":877},[867,1086,1087],{"class":1081},"\"",[867,1089,1090],{"class":877},"...\n",[867,1092,1093,1096,1099],{"class":869,"line":993},[867,1094,1095],{"class":873},"Building",[867,1097,1098],{"class":877}," DTCG",[867,1100,1101],{"class":877}," document...\n",[867,1103,1104,1107,1110,1113],{"class":869,"line":1003},[867,1105,1106],{"class":873},"Flattening",[867,1108,1109],{"class":877}," to",[867,1111,1112],{"class":877}," Figma-compatible",[867,1114,1115],{"class":877}," format...\n",[867,1117,1118,1121,1123,1126,1128,1131,1134],{"class":869,"line":1009},[867,1119,1120],{"class":873},"Wrote",[867,1122,1082],{"class":1081},[867,1124,1125],{"class":877},"tokens/Default.tokens.json",[867,1127,1087],{"class":1081},[867,1129,1130],{"class":884}," (450 ",[867,1132,1133],{"class":877},"tokens",[867,1135,1136],{"class":884},")\n",[867,1138,1139,1141,1143,1146,1148,1150,1152],{"class":869,"line":1015},[867,1140,1120],{"class":873},[867,1142,1082],{"class":1081},[867,1144,1145],{"class":877},"tokens/Dark.tokens.json",[867,1147,1087],{"class":1081},[867,1149,1130],{"class":884},[867,1151,1133],{"class":877},[867,1153,1136],{"class":884},[867,1155,1156,1159,1163,1166,1169,1172,1174,1177,1180,1183,1186,1188,1190,1192,1194],{"class":869,"line":1030},[867,1157,1158],{"class":873},"Exported",[867,1160,1162],{"class":1161},"sbssI"," 450",[867,1164,1165],{"class":877}," tokens",[867,1167,1168],{"class":877}," as",[867,1170,1171],{"class":1161}," 2",[867,1173,1112],{"class":877},[867,1175,1176],{"class":877}," mode",[867,1178,1179],{"class":877}," file",[867,1181,1182],{"class":1081},"(",[867,1184,1185],{"class":873},"s",[867,1187,834],{"class":1081},[867,1189,1109],{"class":877},[867,1191,1082],{"class":1081},[867,1193,1133],{"class":877},[867,1195,1196],{"class":1081},"\"\n",[764,1198,1199,1200,1203,1204,1207,1208,1207,1211,1214,1215,1218],{},"The ",[731,1201,1202],{},"figma export"," command produces per-mode files using only the three types Figma supports (",[731,1205,1206],{},"number",", ",[731,1209,1210],{},"color",[731,1212,1213],{},"string","). For spec-conformant DTCG with full type richness (for tools like Style Dictionary or Tokens Studio), use ",[731,1216,1217],{},"styleframe dtcg export"," instead.",[618,1220,1222],{"id":1221},"importing-tokens-figma-code","Importing Tokens (Figma → Code)",[549,1224,1225],{},"Generate Styleframe TypeScript code from Figma-compatible per-mode files:",[858,1227,1229],{"className":860,"code":1228,"language":862,"meta":863,"style":863},"styleframe figma import --input \u003Cpath> [options]\n",[731,1230,1231],{"__ignoreMap":863},[867,1232,1233,1235,1237,1240,1243,1246,1249,1252,1255],{"class":869,"line":870},[867,1234,874],{"class":873},[867,1236,878],{"class":877},[867,1238,1239],{"class":877}," import",[867,1241,1242],{"class":877}," --input",[867,1244,1245],{"class":1081}," \u003C",[867,1247,1248],{"class":877},"pat",[867,1250,1251],{"class":884},"h",[867,1253,1254],{"class":1081},">",[867,1256,885],{"class":884},[887,1258,1259,1271],{},[890,1260,1261],{},[893,1262,1263,1265,1267,1269],{},[896,1264,898],{},[896,1266,901],{},[896,1268,904],{},[896,1270,907],{},[909,1272,1273,1297,1315,1333,1350,1367],{},[893,1274,1275,1280,1285,1291],{},[914,1276,1277],{},[731,1278,1279],{},"--input",[914,1281,1282],{},[731,1283,1284],{},"-i",[914,1286,1287],{},[1288,1289,1290],"em",{},"required",[914,1292,1293,1294,1296],{},"Input ",[731,1295,954],{}," file or directory of per-mode files",[893,1298,1299,1303,1307,1312],{},[914,1300,1301],{},[731,1302,938],{},[914,1304,1305],{},[731,1306,943],{},[914,1308,1309],{},[731,1310,1311],{},"tokens.styleframe.ts",[914,1313,1314],{},"Output TypeScript file path",[893,1316,1317,1322,1325,1330],{},[914,1318,1319],{},[731,1320,1321],{},"--composables",[914,1323,1324],{},"-",[914,1326,1327],{},[731,1328,1329],{},"true",[914,1331,1332],{},"Use @styleframe/theme composables",[893,1334,1335,1340,1342,1347],{},[914,1336,1337],{},[731,1338,1339],{},"--rem",[914,1341,1324],{},[914,1343,1344],{},[731,1345,1346],{},"false",[914,1348,1349],{},"Use rem units for dimensions",[893,1351,1352,1357,1359,1364],{},[914,1353,1354],{},[731,1355,1356],{},"--baseFontSize",[914,1358,1324],{},[914,1360,1361],{},[731,1362,1363],{},"16",[914,1365,1366],{},"Base font size for rem conversion",[893,1368,1369,1374,1376,1380],{},[914,1370,1371],{},[731,1372,1373],{},"--instanceName",[914,1375,1324],{},[914,1377,1378],{},[731,1379,1185],{},[914,1381,1382],{},"Styleframe instance variable name",[549,1384,1385],{},[555,1386,979],{},[858,1388,1390],{"className":860,"code":1389,"language":862,"meta":863,"style":863},"# Import from a directory of per-mode files\nstyleframe figma import -i tokens/\n\n# Import a single file\nstyleframe figma import -i Default.tokens.json\n\n# Custom output path\nstyleframe figma import -i tokens/ -o src/theme/tokens.ts\n\n# With rem units\nstyleframe figma import -i tokens/ --rem\n\n# Without composables (plain variables)\nstyleframe figma import -i tokens/ --composables false\n",[731,1391,1392,1397,1410,1414,1419,1432,1436,1441,1459,1464,1470,1486,1491,1497],{"__ignoreMap":863},[867,1393,1394],{"class":869,"line":870},[867,1395,1396],{"class":989},"# Import from a directory of per-mode files\n",[867,1398,1399,1401,1403,1405,1408],{"class":869,"line":993},[867,1400,874],{"class":873},[867,1402,878],{"class":877},[867,1404,1239],{"class":877},[867,1406,1407],{"class":877}," -i",[867,1409,1027],{"class":877},[867,1411,1412],{"class":869,"line":1003},[867,1413,1006],{"emptyLinePlaceholder":337},[867,1415,1416],{"class":869,"line":1009},[867,1417,1418],{"class":989},"# Import a single file\n",[867,1420,1421,1423,1425,1427,1429],{"class":869,"line":1015},[867,1422,874],{"class":873},[867,1424,878],{"class":877},[867,1426,1239],{"class":877},[867,1428,1407],{"class":877},[867,1430,1431],{"class":877}," Default.tokens.json\n",[867,1433,1434],{"class":869,"line":1030},[867,1435,1006],{"emptyLinePlaceholder":337},[867,1437,1438],{"class":869,"line":1035},[867,1439,1440],{"class":989},"# Custom output path\n",[867,1442,1443,1445,1447,1449,1451,1454,1456],{"class":869,"line":1041},[867,1444,874],{"class":873},[867,1446,878],{"class":877},[867,1448,1239],{"class":877},[867,1450,1407],{"class":877},[867,1452,1453],{"class":877}," tokens/",[867,1455,1024],{"class":877},[867,1457,1458],{"class":877}," src/theme/tokens.ts\n",[867,1460,1462],{"class":869,"line":1461},9,[867,1463,1006],{"emptyLinePlaceholder":337},[867,1465,1467],{"class":869,"line":1466},10,[867,1468,1469],{"class":989},"# With rem units\n",[867,1471,1473,1475,1477,1479,1481,1483],{"class":869,"line":1472},11,[867,1474,874],{"class":873},[867,1476,878],{"class":877},[867,1478,1239],{"class":877},[867,1480,1407],{"class":877},[867,1482,1453],{"class":877},[867,1484,1485],{"class":877}," --rem\n",[867,1487,1489],{"class":869,"line":1488},12,[867,1490,1006],{"emptyLinePlaceholder":337},[867,1492,1494],{"class":869,"line":1493},13,[867,1495,1496],{"class":989},"# Without composables (plain variables)\n",[867,1498,1500,1502,1504,1506,1508,1510,1513],{"class":869,"line":1499},14,[867,1501,874],{"class":873},[867,1503,878],{"class":877},[867,1505,1239],{"class":877},[867,1507,1407],{"class":877},[867,1509,1453],{"class":877},[867,1511,1512],{"class":877}," --composables",[867,1514,1515],{"class":1081}," false\n",[549,1517,1518],{},[555,1519,1520],{},"Generated code example:",[858,1522,1526],{"className":1523,"code":1524,"language":1525,"meta":863,"style":863},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useColorDesignTokens, useSpacingDesignTokens } from \"@styleframe/theme\";\n\nconst s = styleframe();\nconst { variable, ref, theme } = s;\n\n// Color variables\nconst { colorPrimary, colorSecondary } = useColorDesignTokens(s, {\n  primary: \"#006cff\",\n  secondary: \"#6c757d\",\n});\n\n// Spacing variables\nconst { spacingSm, spacingMd, spacingLg } = useSpacingDesignTokens(s, {\n  sm: \"8px\",\n  md: \"16px\",\n  lg: \"24px\",\n});\n\ntheme(\"dark\", (ctx) => {\n  ctx.variable(colorPrimary, \"#60a5fa\");\n  ctx.variable(colorSecondary, \"#9ca3af\");\n});\n\nexport default s;\n","ts",[731,1527,1528,1554,1582,1586,1606,1636,1640,1645,1673,1692,1708,1716,1720,1725,1756,1773,1790,1807,1816,1821,1852,1881,1908,1917,1922],{"__ignoreMap":863},[867,1529,1530,1534,1537,1540,1543,1545,1547,1549,1551],{"class":869,"line":870},[867,1531,1533],{"class":1532},"s7zQu","import",[867,1535,1536],{"class":1081}," {",[867,1538,1539],{"class":884}," styleframe",[867,1541,1542],{"class":1081}," }",[867,1544,1078],{"class":1532},[867,1546,1082],{"class":1081},[867,1548,874],{"class":877},[867,1550,1087],{"class":1081},[867,1552,1553],{"class":1081},";\n",[867,1555,1556,1558,1560,1563,1566,1569,1571,1573,1575,1578,1580],{"class":869,"line":993},[867,1557,1533],{"class":1532},[867,1559,1536],{"class":1081},[867,1561,1562],{"class":884}," useColorDesignTokens",[867,1564,1565],{"class":1081},",",[867,1567,1568],{"class":884}," useSpacingDesignTokens",[867,1570,1542],{"class":1081},[867,1572,1078],{"class":1532},[867,1574,1082],{"class":1081},[867,1576,1577],{"class":877},"@styleframe/theme",[867,1579,1087],{"class":1081},[867,1581,1553],{"class":1081},[867,1583,1584],{"class":869,"line":1003},[867,1585,1006],{"emptyLinePlaceholder":337},[867,1587,1588,1592,1595,1598,1601,1604],{"class":869,"line":1009},[867,1589,1591],{"class":1590},"spNyl","const",[867,1593,1594],{"class":884}," s ",[867,1596,1597],{"class":1081},"=",[867,1599,1539],{"class":1600},"s2Zo4",[867,1602,1603],{"class":884},"()",[867,1605,1553],{"class":1081},[867,1607,1608,1610,1612,1615,1617,1620,1622,1625,1628,1631,1634],{"class":869,"line":1015},[867,1609,1591],{"class":1590},[867,1611,1536],{"class":1081},[867,1613,1614],{"class":884}," variable",[867,1616,1565],{"class":1081},[867,1618,1619],{"class":884}," ref",[867,1621,1565],{"class":1081},[867,1623,1624],{"class":884}," theme ",[867,1626,1627],{"class":1081},"}",[867,1629,1630],{"class":1081}," =",[867,1632,1633],{"class":884}," s",[867,1635,1553],{"class":1081},[867,1637,1638],{"class":869,"line":1030},[867,1639,1006],{"emptyLinePlaceholder":337},[867,1641,1642],{"class":869,"line":1035},[867,1643,1644],{"class":989},"// Color variables\n",[867,1646,1647,1649,1651,1654,1656,1659,1661,1663,1665,1668,1670],{"class":869,"line":1041},[867,1648,1591],{"class":1590},[867,1650,1536],{"class":1081},[867,1652,1653],{"class":884}," colorPrimary",[867,1655,1565],{"class":1081},[867,1657,1658],{"class":884}," colorSecondary ",[867,1660,1627],{"class":1081},[867,1662,1630],{"class":1081},[867,1664,1562],{"class":1600},[867,1666,1667],{"class":884},"(s",[867,1669,1565],{"class":1081},[867,1671,1672],{"class":1081}," {\n",[867,1674,1675,1679,1682,1684,1687,1689],{"class":869,"line":1461},[867,1676,1678],{"class":1677},"swJcz","  primary",[867,1680,1681],{"class":1081},":",[867,1683,1082],{"class":1081},[867,1685,1686],{"class":877},"#006cff",[867,1688,1087],{"class":1081},[867,1690,1691],{"class":1081},",\n",[867,1693,1694,1697,1699,1701,1704,1706],{"class":869,"line":1466},[867,1695,1696],{"class":1677},"  secondary",[867,1698,1681],{"class":1081},[867,1700,1082],{"class":1081},[867,1702,1703],{"class":877},"#6c757d",[867,1705,1087],{"class":1081},[867,1707,1691],{"class":1081},[867,1709,1710,1712,1714],{"class":869,"line":1472},[867,1711,1627],{"class":1081},[867,1713,834],{"class":884},[867,1715,1553],{"class":1081},[867,1717,1718],{"class":869,"line":1488},[867,1719,1006],{"emptyLinePlaceholder":337},[867,1721,1722],{"class":869,"line":1493},[867,1723,1724],{"class":989},"// Spacing variables\n",[867,1726,1727,1729,1731,1734,1736,1739,1741,1744,1746,1748,1750,1752,1754],{"class":869,"line":1499},[867,1728,1591],{"class":1590},[867,1730,1536],{"class":1081},[867,1732,1733],{"class":884}," spacingSm",[867,1735,1565],{"class":1081},[867,1737,1738],{"class":884}," spacingMd",[867,1740,1565],{"class":1081},[867,1742,1743],{"class":884}," spacingLg ",[867,1745,1627],{"class":1081},[867,1747,1630],{"class":1081},[867,1749,1568],{"class":1600},[867,1751,1667],{"class":884},[867,1753,1565],{"class":1081},[867,1755,1672],{"class":1081},[867,1757,1759,1762,1764,1766,1769,1771],{"class":869,"line":1758},15,[867,1760,1761],{"class":1677},"  sm",[867,1763,1681],{"class":1081},[867,1765,1082],{"class":1081},[867,1767,1768],{"class":877},"8px",[867,1770,1087],{"class":1081},[867,1772,1691],{"class":1081},[867,1774,1776,1779,1781,1783,1786,1788],{"class":869,"line":1775},16,[867,1777,1778],{"class":1677},"  md",[867,1780,1681],{"class":1081},[867,1782,1082],{"class":1081},[867,1784,1785],{"class":877},"16px",[867,1787,1087],{"class":1081},[867,1789,1691],{"class":1081},[867,1791,1793,1796,1798,1800,1803,1805],{"class":869,"line":1792},17,[867,1794,1795],{"class":1677},"  lg",[867,1797,1681],{"class":1081},[867,1799,1082],{"class":1081},[867,1801,1802],{"class":877},"24px",[867,1804,1087],{"class":1081},[867,1806,1691],{"class":1081},[867,1808,1810,1812,1814],{"class":869,"line":1809},18,[867,1811,1627],{"class":1081},[867,1813,834],{"class":884},[867,1815,1553],{"class":1081},[867,1817,1819],{"class":869,"line":1818},19,[867,1820,1006],{"emptyLinePlaceholder":337},[867,1822,1824,1827,1829,1831,1834,1836,1838,1841,1845,1847,1850],{"class":869,"line":1823},20,[867,1825,1826],{"class":1600},"theme",[867,1828,1182],{"class":884},[867,1830,1087],{"class":1081},[867,1832,1833],{"class":877},"dark",[867,1835,1087],{"class":1081},[867,1837,1565],{"class":1081},[867,1839,1840],{"class":1081}," (",[867,1842,1844],{"class":1843},"sHdIc","ctx",[867,1846,834],{"class":1081},[867,1848,1849],{"class":1590}," =>",[867,1851,1672],{"class":1081},[867,1853,1855,1858,1860,1863,1865,1868,1870,1872,1875,1877,1879],{"class":869,"line":1854},21,[867,1856,1857],{"class":884},"  ctx",[867,1859,948],{"class":1081},[867,1861,1862],{"class":1600},"variable",[867,1864,1182],{"class":1677},[867,1866,1867],{"class":884},"colorPrimary",[867,1869,1565],{"class":1081},[867,1871,1082],{"class":1081},[867,1873,1874],{"class":877},"#60a5fa",[867,1876,1087],{"class":1081},[867,1878,834],{"class":1677},[867,1880,1553],{"class":1081},[867,1882,1884,1886,1888,1890,1892,1895,1897,1899,1902,1904,1906],{"class":869,"line":1883},22,[867,1885,1857],{"class":884},[867,1887,948],{"class":1081},[867,1889,1862],{"class":1600},[867,1891,1182],{"class":1677},[867,1893,1894],{"class":884},"colorSecondary",[867,1896,1565],{"class":1081},[867,1898,1082],{"class":1081},[867,1900,1901],{"class":877},"#9ca3af",[867,1903,1087],{"class":1081},[867,1905,834],{"class":1677},[867,1907,1553],{"class":1081},[867,1909,1911,1913,1915],{"class":869,"line":1910},23,[867,1912,1627],{"class":1081},[867,1914,834],{"class":884},[867,1916,1553],{"class":1081},[867,1918,1920],{"class":869,"line":1919},24,[867,1921,1006],{"emptyLinePlaceholder":337},[867,1923,1925,1928,1931,1933],{"class":869,"line":1924},25,[867,1926,1927],{"class":1532},"export",[867,1929,1930],{"class":1532}," default",[867,1932,1633],{"class":884},[867,1934,1553],{"class":1081},[668,1936],{},[545,1938,1940],{"id":1939},"recommended-workflow","Recommended Workflow",[549,1942,1943],{},"Here's a typical workflow for syncing tokens between Styleframe and Figma:",[618,1945,1947],{"id":1946},"_1-define-tokens-in-styleframe","1. Define tokens in Styleframe",[858,1949,1951],{"className":1523,"code":1950,"language":1525,"meta":863,"style":863},"// styleframe.config.ts\nimport { styleframe } from 'styleframe';\n\nconst s = styleframe();\nconst { variable, theme, ref } = s;\n\nconst colorPrimary = variable('color.primary', '#006cff');\nconst colorBackground = variable('color.background', '#ffffff');\nconst spacingMd = variable('spacing.md', '16px');\n\ntheme('dark', (ctx) => {\n  ctx.variable(colorPrimary, '#60a5fa');\n  ctx.variable(colorBackground, '#1a1a1a');\n});\n\nexport default s;\n",[731,1952,1953,1958,1980,1984,1998,2024,2028,2060,2093,2125,2129,2153,2177,2203,2211,2215],{"__ignoreMap":863},[867,1954,1955],{"class":869,"line":870},[867,1956,1957],{"class":989},"// styleframe.config.ts\n",[867,1959,1960,1962,1964,1966,1968,1970,1973,1975,1978],{"class":869,"line":993},[867,1961,1533],{"class":1532},[867,1963,1536],{"class":1081},[867,1965,1539],{"class":884},[867,1967,1542],{"class":1081},[867,1969,1078],{"class":1532},[867,1971,1972],{"class":1081}," '",[867,1974,874],{"class":877},[867,1976,1977],{"class":1081},"'",[867,1979,1553],{"class":1081},[867,1981,1982],{"class":869,"line":1003},[867,1983,1006],{"emptyLinePlaceholder":337},[867,1985,1986,1988,1990,1992,1994,1996],{"class":869,"line":1009},[867,1987,1591],{"class":1590},[867,1989,1594],{"class":884},[867,1991,1597],{"class":1081},[867,1993,1539],{"class":1600},[867,1995,1603],{"class":884},[867,1997,1553],{"class":1081},[867,1999,2000,2002,2004,2006,2008,2011,2013,2016,2018,2020,2022],{"class":869,"line":1015},[867,2001,1591],{"class":1590},[867,2003,1536],{"class":1081},[867,2005,1614],{"class":884},[867,2007,1565],{"class":1081},[867,2009,2010],{"class":884}," theme",[867,2012,1565],{"class":1081},[867,2014,2015],{"class":884}," ref ",[867,2017,1627],{"class":1081},[867,2019,1630],{"class":1081},[867,2021,1633],{"class":884},[867,2023,1553],{"class":1081},[867,2025,2026],{"class":869,"line":1030},[867,2027,1006],{"emptyLinePlaceholder":337},[867,2029,2030,2032,2035,2037,2039,2041,2043,2046,2048,2050,2052,2054,2056,2058],{"class":869,"line":1035},[867,2031,1591],{"class":1590},[867,2033,2034],{"class":884}," colorPrimary ",[867,2036,1597],{"class":1081},[867,2038,1614],{"class":1600},[867,2040,1182],{"class":884},[867,2042,1977],{"class":1081},[867,2044,2045],{"class":877},"color.primary",[867,2047,1977],{"class":1081},[867,2049,1565],{"class":1081},[867,2051,1972],{"class":1081},[867,2053,1686],{"class":877},[867,2055,1977],{"class":1081},[867,2057,834],{"class":884},[867,2059,1553],{"class":1081},[867,2061,2062,2064,2067,2069,2071,2073,2075,2078,2080,2082,2084,2087,2089,2091],{"class":869,"line":1041},[867,2063,1591],{"class":1590},[867,2065,2066],{"class":884}," colorBackground ",[867,2068,1597],{"class":1081},[867,2070,1614],{"class":1600},[867,2072,1182],{"class":884},[867,2074,1977],{"class":1081},[867,2076,2077],{"class":877},"color.background",[867,2079,1977],{"class":1081},[867,2081,1565],{"class":1081},[867,2083,1972],{"class":1081},[867,2085,2086],{"class":877},"#ffffff",[867,2088,1977],{"class":1081},[867,2090,834],{"class":884},[867,2092,1553],{"class":1081},[867,2094,2095,2097,2100,2102,2104,2106,2108,2111,2113,2115,2117,2119,2121,2123],{"class":869,"line":1461},[867,2096,1591],{"class":1590},[867,2098,2099],{"class":884}," spacingMd ",[867,2101,1597],{"class":1081},[867,2103,1614],{"class":1600},[867,2105,1182],{"class":884},[867,2107,1977],{"class":1081},[867,2109,2110],{"class":877},"spacing.md",[867,2112,1977],{"class":1081},[867,2114,1565],{"class":1081},[867,2116,1972],{"class":1081},[867,2118,1785],{"class":877},[867,2120,1977],{"class":1081},[867,2122,834],{"class":884},[867,2124,1553],{"class":1081},[867,2126,2127],{"class":869,"line":1466},[867,2128,1006],{"emptyLinePlaceholder":337},[867,2130,2131,2133,2135,2137,2139,2141,2143,2145,2147,2149,2151],{"class":869,"line":1472},[867,2132,1826],{"class":1600},[867,2134,1182],{"class":884},[867,2136,1977],{"class":1081},[867,2138,1833],{"class":877},[867,2140,1977],{"class":1081},[867,2142,1565],{"class":1081},[867,2144,1840],{"class":1081},[867,2146,1844],{"class":1843},[867,2148,834],{"class":1081},[867,2150,1849],{"class":1590},[867,2152,1672],{"class":1081},[867,2154,2155,2157,2159,2161,2163,2165,2167,2169,2171,2173,2175],{"class":869,"line":1488},[867,2156,1857],{"class":884},[867,2158,948],{"class":1081},[867,2160,1862],{"class":1600},[867,2162,1182],{"class":1677},[867,2164,1867],{"class":884},[867,2166,1565],{"class":1081},[867,2168,1972],{"class":1081},[867,2170,1874],{"class":877},[867,2172,1977],{"class":1081},[867,2174,834],{"class":1677},[867,2176,1553],{"class":1081},[867,2178,2179,2181,2183,2185,2187,2190,2192,2194,2197,2199,2201],{"class":869,"line":1493},[867,2180,1857],{"class":884},[867,2182,948],{"class":1081},[867,2184,1862],{"class":1600},[867,2186,1182],{"class":1677},[867,2188,2189],{"class":884},"colorBackground",[867,2191,1565],{"class":1081},[867,2193,1972],{"class":1081},[867,2195,2196],{"class":877},"#1a1a1a",[867,2198,1977],{"class":1081},[867,2200,834],{"class":1677},[867,2202,1553],{"class":1081},[867,2204,2205,2207,2209],{"class":869,"line":1499},[867,2206,1627],{"class":1081},[867,2208,834],{"class":884},[867,2210,1553],{"class":1081},[867,2212,2213],{"class":869,"line":1758},[867,2214,1006],{"emptyLinePlaceholder":337},[867,2216,2217,2219,2221,2223],{"class":869,"line":1775},[867,2218,1927],{"class":1532},[867,2220,1930],{"class":1532},[867,2222,1633],{"class":884},[867,2224,1553],{"class":1081},[618,2226,2228],{"id":2227},"_2-export-to-figma-compatible-format","2. Export to Figma-compatible format",[858,2230,2232],{"className":860,"code":2231,"language":862,"meta":863,"style":863},"styleframe figma export -o tokens/\n",[731,2233,2234],{"__ignoreMap":863},[867,2235,2236,2238,2240,2242,2244],{"class":869,"line":870},[867,2237,874],{"class":873},[867,2239,878],{"class":877},[867,2241,881],{"class":877},[867,2243,1024],{"class":877},[867,2245,1027],{"class":877},[618,2247,2249],{"id":2248},"_3-import-into-figma","3. Import into Figma",[702,2251,2252,2255,2266],{},[562,2253,2254],{},"Open the Styleframe Sync plugin in Figma",[562,2256,2257,2258,2261,2262,2265],{},"Drag ",[731,2259,2260],{},"Default.tokens.json"," (and optionally ",[731,2263,2264],{},"Dark.tokens.json",") into the Import tab",[562,2267,2268],{},"Click Import",[618,2270,2272],{"id":2271},"_4-design-in-figma","4. Design in Figma",[549,2274,2275],{},"Use your variables in Figma as needed for components, styles, and layouts.",[545,2277,2279],{"id":2278},"dtcg-format","DTCG Format",[549,2281,2282],{},"Styleframe uses the W3C Design Tokens Community Group (DTCG) format for token interchange. The CLI provides two export modes:",[559,2284,2285,2301],{},[562,2286,2287,2292,2293,1207,2295,2297,2298,2300],{},[555,2288,2289],{},[731,2290,2291],{},"styleframe figma export"," — Figma-compatible DTCG. Uses only ",[731,2294,1206],{},[731,2296,1210],{},", and ",[731,2299,1213],{}," types with flat values. Writes one complete file per mode. Ready for direct Figma import.",[562,2302,2303,2307,2308,1207,2311,1207,2314,2317],{},[555,2304,2305],{},[731,2306,1217],{}," — Spec-conformant DTCG. Uses the full type system (",[731,2309,2310],{},"dimension",[731,2312,2313],{},"cubicBezier",[731,2315,2316],{},"fontFamily",", etc.) with structured values plus a Resolver Module document for multi-mode configs. For Style Dictionary, Tokens Studio, and other DTCG-compatible tools.",[549,2319,2320,2323,2324,2326],{},[555,2321,2322],{},"Figma-compatible format"," (produced by ",[731,2325,2291],{},"):",[858,2328,2332],{"className":2329,"code":2330,"language":2331,"meta":863,"style":863},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"$extensions\": {\n    \"com.figma.modeName\": \"Default\"\n  },\n  \"color\": {\n    \"$type\": \"color\",\n    \"primary\": {\n      \"$value\": {\n        \"colorSpace\": \"srgb\",\n        \"components\": [0, 0.478, 0.6],\n        \"alpha\": 1,\n        \"hex\": \"#007a99\"\n      }\n    },\n    \"background\": {\n      \"$value\": {\n        \"colorSpace\": \"srgb\",\n        \"components\": [0.973, 0.98, 0.988],\n        \"alpha\": 1,\n        \"hex\": \"#f8fafe\"\n      }\n    }\n  },\n  \"spacing\": {\n    \"$type\": \"number\",\n    \"md\": {\n      \"$value\": 16\n    }\n  }\n}\n","json",[731,2333,2334,2339,2353,2371,2376,2388,2407,2420,2434,2455,2485,2501,2519,2524,2529,2542,2554,2572,2599,2613,2630,2634,2639,2643,2656,2674,2688,2702,2707,2713],{"__ignoreMap":863},[867,2335,2336],{"class":869,"line":870},[867,2337,2338],{"class":1081},"{\n",[867,2340,2341,2344,2347,2349,2351],{"class":869,"line":993},[867,2342,2343],{"class":1081},"  \"",[867,2345,2346],{"class":1590},"$extensions",[867,2348,1087],{"class":1081},[867,2350,1681],{"class":1081},[867,2352,1672],{"class":1081},[867,2354,2355,2358,2361,2363,2365,2367,2369],{"class":869,"line":1003},[867,2356,2357],{"class":1081},"    \"",[867,2359,2360],{"class":873},"com.figma.modeName",[867,2362,1087],{"class":1081},[867,2364,1681],{"class":1081},[867,2366,1082],{"class":1081},[867,2368,904],{"class":877},[867,2370,1196],{"class":1081},[867,2372,2373],{"class":869,"line":1009},[867,2374,2375],{"class":1081},"  },\n",[867,2377,2378,2380,2382,2384,2386],{"class":869,"line":1015},[867,2379,2343],{"class":1081},[867,2381,1210],{"class":1590},[867,2383,1087],{"class":1081},[867,2385,1681],{"class":1081},[867,2387,1672],{"class":1081},[867,2389,2390,2392,2395,2397,2399,2401,2403,2405],{"class":869,"line":1030},[867,2391,2357],{"class":1081},[867,2393,2394],{"class":873},"$type",[867,2396,1087],{"class":1081},[867,2398,1681],{"class":1081},[867,2400,1082],{"class":1081},[867,2402,1210],{"class":877},[867,2404,1087],{"class":1081},[867,2406,1691],{"class":1081},[867,2408,2409,2411,2414,2416,2418],{"class":869,"line":1035},[867,2410,2357],{"class":1081},[867,2412,2413],{"class":873},"primary",[867,2415,1087],{"class":1081},[867,2417,1681],{"class":1081},[867,2419,1672],{"class":1081},[867,2421,2422,2425,2428,2430,2432],{"class":869,"line":1041},[867,2423,2424],{"class":1081},"      \"",[867,2426,2427],{"class":1161},"$value",[867,2429,1087],{"class":1081},[867,2431,1681],{"class":1081},[867,2433,1672],{"class":1081},[867,2435,2436,2439,2442,2444,2446,2448,2451,2453],{"class":869,"line":1461},[867,2437,2438],{"class":1081},"        \"",[867,2440,2441],{"class":1677},"colorSpace",[867,2443,1087],{"class":1081},[867,2445,1681],{"class":1081},[867,2447,1082],{"class":1081},[867,2449,2450],{"class":877},"srgb",[867,2452,1087],{"class":1081},[867,2454,1691],{"class":1081},[867,2456,2457,2459,2462,2464,2466,2469,2472,2474,2477,2479,2482],{"class":869,"line":1466},[867,2458,2438],{"class":1081},[867,2460,2461],{"class":1677},"components",[867,2463,1087],{"class":1081},[867,2465,1681],{"class":1081},[867,2467,2468],{"class":1081}," [",[867,2470,2471],{"class":1161},"0",[867,2473,1565],{"class":1081},[867,2475,2476],{"class":1161}," 0.478",[867,2478,1565],{"class":1081},[867,2480,2481],{"class":1161}," 0.6",[867,2483,2484],{"class":1081},"],\n",[867,2486,2487,2489,2492,2494,2496,2499],{"class":869,"line":1472},[867,2488,2438],{"class":1081},[867,2490,2491],{"class":1677},"alpha",[867,2493,1087],{"class":1081},[867,2495,1681],{"class":1081},[867,2497,2498],{"class":1161}," 1",[867,2500,1691],{"class":1081},[867,2502,2503,2505,2508,2510,2512,2514,2517],{"class":869,"line":1488},[867,2504,2438],{"class":1081},[867,2506,2507],{"class":1677},"hex",[867,2509,1087],{"class":1081},[867,2511,1681],{"class":1081},[867,2513,1082],{"class":1081},[867,2515,2516],{"class":877},"#007a99",[867,2518,1196],{"class":1081},[867,2520,2521],{"class":869,"line":1493},[867,2522,2523],{"class":1081},"      }\n",[867,2525,2526],{"class":869,"line":1499},[867,2527,2528],{"class":1081},"    },\n",[867,2530,2531,2533,2536,2538,2540],{"class":869,"line":1758},[867,2532,2357],{"class":1081},[867,2534,2535],{"class":873},"background",[867,2537,1087],{"class":1081},[867,2539,1681],{"class":1081},[867,2541,1672],{"class":1081},[867,2543,2544,2546,2548,2550,2552],{"class":869,"line":1775},[867,2545,2424],{"class":1081},[867,2547,2427],{"class":1161},[867,2549,1087],{"class":1081},[867,2551,1681],{"class":1081},[867,2553,1672],{"class":1081},[867,2555,2556,2558,2560,2562,2564,2566,2568,2570],{"class":869,"line":1792},[867,2557,2438],{"class":1081},[867,2559,2441],{"class":1677},[867,2561,1087],{"class":1081},[867,2563,1681],{"class":1081},[867,2565,1082],{"class":1081},[867,2567,2450],{"class":877},[867,2569,1087],{"class":1081},[867,2571,1691],{"class":1081},[867,2573,2574,2576,2578,2580,2582,2584,2587,2589,2592,2594,2597],{"class":869,"line":1809},[867,2575,2438],{"class":1081},[867,2577,2461],{"class":1677},[867,2579,1087],{"class":1081},[867,2581,1681],{"class":1081},[867,2583,2468],{"class":1081},[867,2585,2586],{"class":1161},"0.973",[867,2588,1565],{"class":1081},[867,2590,2591],{"class":1161}," 0.98",[867,2593,1565],{"class":1081},[867,2595,2596],{"class":1161}," 0.988",[867,2598,2484],{"class":1081},[867,2600,2601,2603,2605,2607,2609,2611],{"class":869,"line":1818},[867,2602,2438],{"class":1081},[867,2604,2491],{"class":1677},[867,2606,1087],{"class":1081},[867,2608,1681],{"class":1081},[867,2610,2498],{"class":1161},[867,2612,1691],{"class":1081},[867,2614,2615,2617,2619,2621,2623,2625,2628],{"class":869,"line":1823},[867,2616,2438],{"class":1081},[867,2618,2507],{"class":1677},[867,2620,1087],{"class":1081},[867,2622,1681],{"class":1081},[867,2624,1082],{"class":1081},[867,2626,2627],{"class":877},"#f8fafe",[867,2629,1196],{"class":1081},[867,2631,2632],{"class":869,"line":1854},[867,2633,2523],{"class":1081},[867,2635,2636],{"class":869,"line":1883},[867,2637,2638],{"class":1081},"    }\n",[867,2640,2641],{"class":869,"line":1910},[867,2642,2375],{"class":1081},[867,2644,2645,2647,2650,2652,2654],{"class":869,"line":1919},[867,2646,2343],{"class":1081},[867,2648,2649],{"class":1590},"spacing",[867,2651,1087],{"class":1081},[867,2653,1681],{"class":1081},[867,2655,1672],{"class":1081},[867,2657,2658,2660,2662,2664,2666,2668,2670,2672],{"class":869,"line":1924},[867,2659,2357],{"class":1081},[867,2661,2394],{"class":873},[867,2663,1087],{"class":1081},[867,2665,1681],{"class":1081},[867,2667,1082],{"class":1081},[867,2669,1206],{"class":877},[867,2671,1087],{"class":1081},[867,2673,1691],{"class":1081},[867,2675,2677,2679,2682,2684,2686],{"class":869,"line":2676},26,[867,2678,2357],{"class":1081},[867,2680,2681],{"class":873},"md",[867,2683,1087],{"class":1081},[867,2685,1681],{"class":1081},[867,2687,1672],{"class":1081},[867,2689,2691,2693,2695,2697,2699],{"class":869,"line":2690},27,[867,2692,2424],{"class":1081},[867,2694,2427],{"class":1161},[867,2696,1087],{"class":1081},[867,2698,1681],{"class":1081},[867,2700,2701],{"class":1161}," 16\n",[867,2703,2705],{"class":869,"line":2704},28,[867,2706,2638],{"class":1081},[867,2708,2710],{"class":869,"line":2709},29,[867,2711,2712],{"class":1081},"  }\n",[867,2714,2716],{"class":869,"line":2715},30,[867,2717,2718],{"class":1081},"}\n",[657,2720,2721,2722,948],{},"Learn more about the DTCG format at ",[626,2723,2726],{"href":2724,"rel":2725,"target":631},"https://www.designtokens.org/",[630],"designtokens.org",[545,2728,2730],{"id":2729},"best-practices","Best Practices",[559,2732,2733,2739,2751,2761],{},[562,2734,2735,2738],{},[555,2736,2737],{},"Keep code as the source of truth",": Define tokens in Styleframe first, then sync to Figma",[562,2740,2741,2744,2745,2747,2748],{},[555,2742,2743],{},"Use semantic token names",": ",[731,2746,2045],{}," instead of ",[731,2749,2750],{},"color.blue",[562,2752,2753,2756,2757,2760],{},[555,2754,2755],{},"Organize with groups",": Use dot notation (",[731,2758,2759],{},"color.background.primary",") for hierarchy",[562,2762,2763,2766,2767,2770],{},[555,2764,2765],{},"Export tokens in CI/CD",": Automate ",[731,2768,2769],{},"styleframe dtcg export -o tokens/"," on every commit to generate fresh token files",[545,2772,2774],{"id":2773},"faq","FAQ",[2776,2777,2778,2812,2816,2827,2844,2848],"accordion",{},[2779,2780,2783,2786],"accordion-item",{"icon":2781,"label":2782},"i-lucide-circle-help","What token types are supported?",[549,2784,2785],{},"Styleframe supports four token types that map to Figma variable types:",[559,2787,2788,2794,2800,2806],{},[562,2789,2790,2793],{},[555,2791,2792],{},"Color",": CSS color values (hex, rgb, hsl, etc.) → Figma Color",[562,2795,2796,2799],{},[555,2797,2798],{},"Number/Dimension",": Numeric values with units (16px, 1rem) → Figma Number",[562,2801,2802,2805],{},[555,2803,2804],{},"String",": Text values → Figma String",[562,2807,2808,2811],{},[555,2809,2810],{},"Boolean",": true/false values → Figma Boolean",[2779,2813,2815],{"icon":2781,"label":2814},"How are themes/modes handled?","Styleframe themes become Figma modes. When you export tokens, the default theme becomes the first mode (usually \"Light\"), and each additional theme (like \"dark\") becomes a separate mode. Token overrides in themes are preserved as mode-specific values.",[2779,2817,2819,2820,2823,2824,2826],{"icon":2781,"label":2818},"Are variable aliases preserved?","Yes! When you export from Styleframe, token references using ",[731,2821,2822],{},"ref()"," are converted to DTCG alias syntax (",[731,2825,833],{},"). When imported into Figma, these become native Figma variable references. The same applies in reverse when exporting from Figma.",[2779,2828,2830,2831,2833,2834,2839,2840,2843],{"icon":2781,"label":2829},"Can I use this with CI/CD pipelines?","Yes, the CLI is designed for automation. Add ",[731,2832,1217],{}," to your build pipeline to generate fresh token files on every commit. Note that Figma's ",[626,2835,2838],{"href":2836,"rel":2837,"target":631},"https://developers.figma.com/docs/rest-api/variables-endpoints/",[630],"Variables REST API"," for programmatically importing tokens is only available to ",[555,2841,2842],{},"Enterprise"," organization members. For other plans, you'll need to use the plugin manually to import the generated JSON.",[2779,2845,2847],{"icon":2781,"label":2846},"What happens to existing Figma variables?","When importing tokens, the plugin updates existing variables with matching names rather than creating duplicates. New variables are added, and existing values are overwritten with the imported values.",[2779,2849,2851],{"icon":2781,"label":2850},"Is the plugin free?","Yes, the Figma plugin and CLI are completely free and open source. No subscriptions, no seat limits, no premium features hidden behind a paywall.",[2853,2854,2855],"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 pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":863,"searchDepth":993,"depth":993,"links":2857},[2858,2859,2860,2865,2869,2873,2879,2880,2881],{"id":547,"depth":993,"text":78},{"id":594,"depth":993,"text":595},{"id":612,"depth":993,"text":613,"children":2861},[2862,2863,2864],{"id":620,"depth":1003,"text":621},{"id":636,"depth":1003,"text":637},{"id":647,"depth":1003,"text":648},{"id":672,"depth":993,"text":673,"children":2866},[2867,2868],{"id":687,"depth":1003,"text":688},{"id":769,"depth":1003,"text":770},{"id":845,"depth":993,"text":846,"children":2870},[2871,2872],{"id":852,"depth":1003,"text":853},{"id":1221,"depth":1003,"text":1222},{"id":1939,"depth":993,"text":1940,"children":2874},[2875,2876,2877,2878],{"id":1946,"depth":1003,"text":1947},{"id":2227,"depth":1003,"text":2228},{"id":2248,"depth":1003,"text":2249},{"id":2271,"depth":1003,"text":2272},{"id":2278,"depth":993,"text":2279},{"id":2729,"depth":993,"text":2730},{"id":2773,"depth":993,"text":2774},"Sync your Styleframe design tokens with Figma using the plugin and CLI commands for bidirectional token synchronization.",null,{},{"icon":65},{"title":62,"description":2882},{"loc":63},"5mysTVbuXjxKd1JAWcT60COMpWx7PHnv1akqp3-ckYw",[2890,2892],{"title":57,"path":58,"stem":59,"description":2891,"icon":60,"children":-1},"A spec-conformant parser, validator, and serializer for the W3C Design Tokens Community Group format — the interchange layer behind the styleframe dtcg export command.",{"title":67,"path":68,"stem":69,"description":2893,"icon":70,"children":-1},"Integrate Styleframe with Storybook to showcase your design system with type-safe recipes, design tokens, and dark mode support.",1779257164046]