[{"data":1,"prerenderedAt":1752},["ShallowReactive",2],{"navigation_en":3,"-docs-getting-started-tooling-dtcg":449,"-docs-getting-started-tooling-dtcg-surround":1747},{"gettingStarted":4,"api":76,"theme":167},[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,34,40,66,71],{"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,"to":30,"target":31,"external":32,"icon":33},"Storybook","/docs/getting-started/storybook","docs/getting-started/04.storybook","https://storybook.styleframe.dev","_blank",true,"i-simple-icons-storybook",{"title":35,"path":36,"stem":37,"to":38,"target":31,"external":32,"icon":39},"Playground","/docs/getting-started/playground","docs/getting-started/05.playground","https://play.styleframe.dev","i-simple-icons-playwright",{"title":41,"icon":42,"path":43,"stem":44,"children":45,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/06.tooling",[46,51,56,61],{"title":47,"path":48,"stem":49,"icon":50},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/06.tooling/01.cli","i-lucide-square-terminal",{"title":52,"path":53,"stem":54,"icon":55},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/06.tooling/02.scanner","i-lucide-view",{"title":57,"path":58,"stem":59,"icon":60},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/06.tooling/03.figma-plugin","i-simple-icons-figma",{"title":62,"path":63,"stem":64,"icon":65},"DTCG","/docs/getting-started/tooling/dtcg","docs/getting-started/06.tooling/04.dtcg","i-lucide-square-code",{"title":67,"path":68,"stem":69,"icon":70},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/07.comparisons","i-lucide-file-diff",{"title":72,"path":73,"stem":74,"icon":75},"Licensing","/docs/getting-started/licensing","docs/getting-started/08.licensing","i-lucide-scale",[77],{"title":78,"path":79,"stem":80,"children":81,"icon":7},"API Reference","/docs/api","docs/api/00.index",[82,85,90,95,100,105,110,115,120,125,130,135,150,155,160,165],{"title":83,"path":79,"stem":80,"icon":84},"Overview","i-lucide-book-text",{"title":86,"path":87,"stem":88,"icon":89},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":91,"path":92,"stem":93,"icon":94},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":96,"path":97,"stem":98,"icon":99},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":101,"path":102,"stem":103,"icon":104},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":106,"path":107,"stem":108,"icon":109},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":111,"path":112,"stem":113,"icon":114},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":116,"path":117,"stem":118,"icon":119},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":121,"path":122,"stem":123,"icon":124},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":126,"path":127,"stem":128,"icon":129},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":131,"path":132,"stem":133,"icon":134},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":136,"path":137,"stem":138,"children":139,"icon":149},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[140,141,145],{"title":83,"path":137,"stem":138},{"title":142,"path":143,"stem":144},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":146,"path":147,"stem":148},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":151,"path":152,"stem":153,"icon":154},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":156,"path":157,"stem":158,"icon":159},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":161,"path":162,"stem":163,"icon":164},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":156,"path":157,"stem":166,"icon":159},"docs/api/14.imports",[168,241,331,404],{"title":169,"path":170,"stem":171,"children":172,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[173,174,179],{"title":83,"path":170,"stem":171,"icon":84},{"title":175,"path":176,"stem":177,"icon":178},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":151,"icon":154,"defaultOpen":7,"path":180,"stem":181,"children":182,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[183,187,191,195,199,203,207,211,225,229,233,237],{"title":184,"path":185,"stem":186,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":188,"path":189,"stem":190,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":192,"path":193,"stem":194,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":196,"path":197,"stem":198,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":200,"path":201,"stem":202,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":204,"path":205,"stem":206,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":208,"path":209,"stem":210,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":212,"path":213,"stem":214,"children":215,"icon":7,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[216,217,221],{"title":83,"path":213,"stem":214},{"title":218,"path":219,"stem":220},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":222,"path":223,"stem":224},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",{"title":226,"path":227,"stem":228,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":230,"path":231,"stem":232,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":234,"path":235,"stem":236,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":238,"path":239,"stem":240,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":242,"path":243,"stem":244,"children":245,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[246,247],{"title":83,"path":243,"stem":244,"icon":84},{"title":151,"icon":154,"defaultOpen":32,"path":248,"stem":249,"children":250,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[251,255,259,263,267,271,275,279,283,287,291,295,299,303,307,311,315,319,323,327],{"title":252,"path":253,"stem":254},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":256,"path":257,"stem":258},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":260,"path":261,"stem":262},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":264,"path":265,"stem":266},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":268,"path":269,"stem":270},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":272,"path":273,"stem":274},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":276,"path":277,"stem":278},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":280,"path":281,"stem":282},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":284,"path":285,"stem":286},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":288,"path":289,"stem":290},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":292,"path":293,"stem":294},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":296,"path":297,"stem":298},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":300,"path":301,"stem":302},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":304,"path":305,"stem":306},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":308,"path":309,"stem":310},"Dropdown","/docs/theme/components/composables/dropdown","docs/theme/components/02.composables/14.dropdown",{"title":312,"path":313,"stem":314},"Hamburger Menu","/docs/theme/components/composables/hamburger-menu","docs/theme/components/02.composables/14.hamburger-menu",{"title":316,"path":317,"stem":318},"Breadcrumb","/docs/theme/components/composables/breadcrumb","docs/theme/components/02.composables/15.breadcrumb",{"title":320,"path":321,"stem":322},"Media","/docs/theme/components/composables/media","docs/theme/components/02.composables/15.media",{"title":324,"path":325,"stem":326},"PageHero","/docs/theme/components/composables/page-hero","docs/theme/components/02.composables/15.page-hero",{"title":328,"path":329,"stem":330},"Pagination","/docs/theme/components/composables/pagination","docs/theme/components/02.composables/15.pagination",{"title":121,"path":332,"stem":333,"children":334,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[335,336,339],{"title":83,"path":332,"stem":333,"icon":84},{"title":175,"path":337,"stem":338,"icon":178},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":151,"icon":154,"defaultOpen":7,"path":340,"stem":341,"children":342,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[343,347,351,355,358,362,366,370,374,378,382,385,389,393,397,401],{"title":344,"path":345,"stem":346,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":348,"path":349,"stem":350,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":352,"path":353,"stem":354,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":188,"path":356,"stem":357,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":359,"path":360,"stem":361,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":363,"path":364,"stem":365,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":367,"path":368,"stem":369,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":371,"path":372,"stem":373,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":375,"path":376,"stem":377,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":379,"path":380,"stem":381,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":230,"path":383,"stem":384,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":386,"path":387,"stem":388,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":390,"path":391,"stem":392,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":394,"path":395,"stem":396,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":398,"path":399,"stem":400,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":234,"path":402,"stem":403,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":405,"path":406,"stem":407,"children":408,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[409,410,413],{"title":83,"path":406,"stem":407,"icon":84},{"title":175,"path":411,"stem":412,"icon":178},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":151,"icon":154,"defaultOpen":7,"path":414,"stem":415,"children":416,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[417,421,425,429,433,437,441,445],{"title":418,"path":419,"stem":420,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":422,"path":423,"stem":424,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":426,"path":427,"stem":428,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":430,"path":431,"stem":432,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":434,"path":435,"stem":436,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":438,"path":439,"stem":440,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":442,"path":443,"stem":444,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":446,"path":447,"stem":448,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":450,"title":62,"body":451,"description":1739,"extension":1740,"links":1741,"meta":1742,"navigation":1743,"path":63,"seo":1744,"sitemap":1745,"stem":64,"__hash__":1746},"docs_gettingStarted/docs/getting-started/06.tooling/04.dtcg.md",{"type":452,"value":453,"toc":1720},"minimark",[454,458,492,499,503,506,529,533,651,655,658,663,738,742,814,818,847,851,903,907,960,964,967,1023,1026,1073,1077,1103,1107,1115,1161,1192,1198,1206,1210,1216,1278,1593,1597,1608,1667,1670,1674,1716],[455,456,83],"h2",{"id":457},"overview",[459,460,461,462,466,467,474,475,479,480,483,484,487,488,491],"p",{},"The ",[463,464,465],"code",{},"@styleframe/dtcg"," package is a spec-conformant parser, validator, and serializer for the ",[468,469,473],"a",{"href":470,"rel":471,"target":31},"https://www.designtokens.org/",[472],"nofollow","W3C Design Tokens Community Group (DTCG)"," format (2025.10). It implements the ",[476,477,478],"strong",{},"Format",", ",[476,481,482],{},"Color",", and ",[476,485,486],{},"Resolver"," modules and is the interchange layer behind the ",[463,489,490],{},"styleframe dtcg export"," CLI command.",[459,493,494,495,498],{},"The package is ",[476,496,497],{},"runtime-agnostic"," — no filesystem, no DOM, no framework assumptions. You can use it directly to parse, validate, transform, or emit DTCG documents from any Node.js or browser environment.",[455,500,502],{"id":501},"what-is-dtcg","What is DTCG?",[459,504,505],{},"DTCG is a portable JSON format for design tokens, standardised by the W3C Design Tokens Community Group. It defines how colours, dimensions, typography, shadows, and other design primitives should be represented so they can flow between tools — Figma, Tokens Studio, Style Dictionary, and any other DTCG-compatible system.",[507,508,509,512,513,479,518,483,523,528],"tip",{"icon":25},[476,510,511],{},"Learn more",": Read the ",[468,514,517],{"href":515,"rel":516,"target":31},"https://www.designtokens.org/format/",[472],"Design Tokens Format Module",[468,519,522],{"href":520,"rel":521,"target":31},"https://www.designtokens.org/color/",[472],"Color Module",[468,524,527],{"href":525,"rel":526,"target":31},"https://www.designtokens.org/resolver/",[472],"Resolver Module"," specifications.",[455,530,532],{"id":531},"why-a-dedicated-package","Why a dedicated package?",[534,535,536,587,615,625,631,645],"ul",{},[537,538,539,542,543,479,546,479,549,479,552,479,555,479,558,479,561,479,564,567,568,479,571,479,574,479,577,479,580,479,583,586],"li",{},[476,540,541],{},"Standards compliance",": Implements all eight primitive types (",[463,544,545],{},"color",[463,547,548],{},"dimension",[463,550,551],{},"fontFamily",[463,553,554],{},"fontWeight",[463,556,557],{},"duration",[463,559,560],{},"cubicBezier",[463,562,563],{},"number",[463,565,566],{},"string",") and all six composite types (",[463,569,570],{},"border",[463,572,573],{},"strokeStyle",[463,575,576],{},"transition",[463,578,579],{},"shadow",[463,581,582],{},"gradient",[463,584,585],{},"typography",").",[537,588,589,592,593,479,596,479,599,479,602,479,605,479,608,479,611,614],{},[476,590,591],{},"Full color coverage",": Supports all 14 color spaces from the Color Module (",[463,594,595],{},"srgb",[463,597,598],{},"oklch",[463,600,601],{},"display-p3",[463,603,604],{},"lab",[463,606,607],{},"lch",[463,609,610],{},"hsl",[463,612,613],{},"hwb",", …).",[537,616,617,620,621,624],{},[476,618,619],{},"Lossless aliases",": Transitive alias resolution (",[463,622,623],{},"A → B → C",") with circular-reference detection.",[537,626,627,630],{},[476,628,629],{},"Multi-theme via Resolver",": Native support for the Resolver Module — sets, modifiers, and explicit resolution order for theme bundles.",[537,632,633,636,637,640,641,644],{},[476,634,635],{},"Type-safe classification",": ",[463,638,639],{},"classifyValue()"," infers a DTCG ",[463,642,643],{},"$type"," from a raw value plus optional path hint, so untyped inputs get the right type stamp.",[537,646,647,650],{},[476,648,649],{},"Framework-agnostic",": No filesystem, DOM, or framework dependencies. Bring your own I/O.",[455,652,654],{"id":653},"whats-included","What's included",[459,656,657],{},"The package is organised by spec concern. Each group below covers a slice of the DTCG specification.",[659,660,662],"h3",{"id":661},"parse-validate-walk","Parse, validate, walk",[664,665,666,679],"table",{},[667,668,669],"thead",{},[670,671,672,676],"tr",{},[673,674,675],"th",{},"Symbol",[673,677,678],{},"Purpose",[680,681,682,701,714,728],"tbody",{},[670,683,684,690],{},[685,686,687],"td",{},[463,688,689],{},"parse(input)",[685,691,692,693,696,697,700],{},"Parse a ",[463,694,695],{},".tokens.json"," document; throws ",[463,698,699],{},"ParseError"," on invalid shape",[670,702,703,708],{},[685,704,705],{},[463,706,707],{},"validate(doc)",[685,709,710,711],{},"Validate against the spec; returns ",[463,712,713],{},"ValidationError[]",[670,715,716,721],{},[685,717,718],{},[463,719,720],{},"validateResolver(doc)",[685,722,723,724,727],{},"Validate a ",[463,725,726],{},".resolver.json"," document",[670,729,730,735],{},[685,731,732],{},[463,733,734],{},"walk(doc)",[685,736,737],{},"Iterate every token and group with its path",[659,739,741],{"id":740},"aliases","Aliases",[664,743,744,752],{},[667,745,746],{},[670,747,748,750],{},[673,749,675],{},[673,751,678],{},[680,753,754,767,777,787,797],{},[670,755,756,761],{},[685,757,758],{},[463,759,760],{},"parseAlias(string)",[685,762,763,764],{},"Extract the path from ",[463,765,766],{},"\"{color.primary}\"",[670,768,769,774],{},[685,770,771],{},[463,772,773],{},"formatAlias(path)",[685,775,776],{},"Wrap a path in alias syntax",[670,778,779,784],{},[685,780,781],{},[463,782,783],{},"resolveAliases(doc)",[685,785,786],{},"Flatten transitive aliases; throws on cycles or unknown references",[670,788,789,794],{},[685,790,791],{},[463,792,793],{},"lookupToken(doc, path)",[685,795,796],{},"Find a token by path",[670,798,799,811],{},[685,800,801,804,805,804,808],{},[463,802,803],{},"splitPath"," / ",[463,806,807],{},"joinPath",[463,809,810],{},"appendPath",[685,812,813],{},"Path-string utilities",[659,815,817],{"id":816},"inheritance","Inheritance",[664,819,820,828],{},[667,821,822],{},[670,823,824,826],{},[673,825,675],{},[673,827,678],{},[680,829,830],{},[670,831,832,837],{},[685,833,834],{},[463,835,836],{},"applyInheritance(doc)",[685,838,839,840,842,843,846],{},"Propagate ",[463,841,643],{}," and ",[463,844,845],{},"$deprecated"," from parent groups to children",[659,848,850],{"id":849},"type-guards","Type guards",[459,852,853,854,479,857,479,860,479,863,479,866,479,869,479,872,479,875,479,878,479,881,479,884,479,887,479,890,479,893,479,896,479,899,902],{},"Runtime guards for narrowing union types: ",[463,855,856],{},"isToken",[463,858,859],{},"isGroup",[463,861,862],{},"isAlias",[463,864,865],{},"isColorValue",[463,867,868],{},"isDimensionValue",[463,870,871],{},"isDurationValue",[463,873,874],{},"isFontFamilyValue",[463,876,877],{},"isFontWeightValue",[463,879,880],{},"isNumberValue",[463,882,883],{},"isCubicBezierValue",[463,885,886],{},"isBorderValue",[463,888,889],{},"isShadowValue",[463,891,892],{},"isGradientValue",[463,894,895],{},"isTransitionValue",[463,897,898],{},"isTypographyValue",[463,900,901],{},"isStrokeStyleValue",", and more.",[659,904,906],{"id":905},"classification","Classification",[664,908,909,917],{},[667,910,911],{},[670,912,913,915],{},[673,914,675],{},[673,916,678],{},[680,918,919,929,943],{},[670,920,921,926],{},[685,922,923],{},[463,924,925],{},"classifyValue(value, { path? })",[685,927,928],{},"Detect a DTCG type from a raw value plus optional path hint",[670,930,931,936],{},[685,932,933],{},[463,934,935],{},"parseCubicBezier(string)",[685,937,938,939,942],{},"Parse ",[463,940,941],{},"\"cubic-bezier(0.42, 0, 1, 1)\""," into a tuple",[670,944,945,950],{},[685,946,947],{},[463,948,949],{},"easingKeywordToBezier(name)",[685,951,952,953,479,956,959],{},"Convert CSS easing keywords (",[463,954,955],{},"ease",[463,957,958],{},"ease-in-out",", …) to cubic-bezier arrays",[659,961,963],{"id":962},"per-type-namespaces","Per-type namespaces",[459,965,966],{},"Each value type ships parse / format / convert helpers under its own namespace:",[534,968,969,981,994,1005],{},[537,970,971,974,975,980],{},[463,972,973],{},"color.*"," — 14 color spaces, ",[468,976,979],{"href":977,"rel":978,"target":31},"https://culorijs.org",[472],"culori","-backed conversion",[537,982,983,986,987,479,990,993],{},[463,984,985],{},"dimension.*"," — parse and format ",[463,988,989],{},"\"16px\"",[463,991,992],{},"\"2rem\"",", etc.",[537,995,996,986,999,479,1002],{},[463,997,998],{},"duration.*",[463,1000,1001],{},"\"100ms\"",[463,1003,1004],{},"\"1.5s\"",[537,1006,1007,1010,1011,479,1013,479,1015,479,1017,479,1019,479,1021],{},[463,1008,1009],{},"composite.*"," — helpers for ",[463,1012,570],{},[463,1014,573],{},[463,1016,576],{},[463,1018,579],{},[463,1020,582],{},[463,1022,585],{},[659,1024,527],{"id":1025},"resolver-module",[664,1027,1028,1036],{},[667,1029,1030],{},[670,1031,1032,1034],{},[673,1033,675],{},[673,1035,678],{},[680,1037,1038,1053,1063],{},[670,1039,1040,1045],{},[685,1041,1042],{},[463,1043,1044],{},"parseResolver(json)",[685,1046,692,1047,1049,1050],{},[463,1048,726],{}," document with sets, modifiers, and ",[463,1051,1052],{},"resolutionOrder",[670,1054,1055,1060],{},[685,1056,1057],{},[463,1058,1059],{},"resolveResolver(doc, context, fileLoader)",[685,1061,1062],{},"Resolve sets and apply modifiers; async file loading via callback",[670,1064,1065,1070],{},[685,1066,1067],{},[463,1068,1069],{},"mergeDocuments(...docs)",[685,1071,1072],{},"Merge multiple DTCG documents into one",[659,1074,1076],{"id":1075},"extensions","Extensions",[664,1078,1079,1087],{},[667,1080,1081],{},[670,1082,1083,1085],{},[673,1084,675],{},[673,1086,678],{},[680,1088,1089],{},[670,1090,1091,1096],{},[685,1092,1093],{},[463,1094,1095],{},"isValidNamespace(string)",[685,1097,1098,1099,1102],{},"Validate reverse-DNS vendor namespaces (e.g. ",[463,1100,1101],{},"dev.styleframe.*",")",[455,1104,1106],{"id":1105},"cli-integration","CLI integration",[459,1108,461,1109,1114],{},[468,1110,1112],{"href":1111},"/docs/getting-started/tooling/cli#dtcg",[463,1113,490],{}," command is the primary consumer of this package. The flow is:",[1116,1117,1118,1125,1128,1137,1150],"ol",{},[537,1119,1120,1121,1124],{},"Load your Styleframe configuration via ",[463,1122,1123],{},"@styleframe/loader",".",[537,1126,1127],{},"Evaluate every variable to a primitive or CSS expression.",[537,1129,1130,1131,1133,1134,1136],{},"Use ",[463,1132,639],{}," to stamp the correct ",[463,1135,643],{}," on each token.",[537,1138,1130,1139,1142,1143,1146,1147,586],{},[463,1140,1141],{},"formatAlias()"," to preserve ",[463,1144,1145],{},"ref()"," references as DTCG aliases (",[463,1148,1149],{},"{token.path}",[537,1151,1152,1153,1156,1157,1160],{},"Emit a spec-conformant ",[463,1154,1155],{},"tokens.json"," — and a ",[463,1158,1159],{},"tokens.resolver.json"," if your project defines themes.",[1162,1163,1168],"pre",{"className":1164,"code":1165,"language":1166,"meta":1167,"style":1167},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","styleframe dtcg export -o tokens.json\n","bash","",[463,1169,1170],{"__ignoreMap":1167},[1171,1172,1175,1179,1183,1186,1189],"span",{"class":1173,"line":1174},"line",1,[1171,1176,1178],{"class":1177},"sBMFI","styleframe",[1171,1180,1182],{"class":1181},"sfazB"," dtcg",[1171,1184,1185],{"class":1181}," export",[1171,1187,1188],{"class":1181}," -o",[1171,1190,1191],{"class":1181}," tokens.json\n",[459,1193,1194,1195,1197],{},"The output is consumable by any DTCG-compatible tool — including Tokens Studio, Style Dictionary, and the Styleframe Figma plugin (which performs DTCG → Figma value conversion). For the full Figma round-trip workflow, see the ",[468,1196,57],{"href":58}," page.",[1199,1200,1202,1203,1205],"note",{"icon":1201},"i-lucide-info","The CLI's value-conversion concerns (rem ↔ px, fluid expressions, Figma-specific lossiness) live in the consumer layers — not in ",[463,1204,465],{},". The package itself only emits and consumes spec-compliant DTCG.",[455,1207,1209],{"id":1208},"programmatic-usage","Programmatic usage",[459,1211,1212,1213,1215],{},"You can use ",[463,1214,465],{}," directly as a library in any tooling pipeline.",[1217,1218,1219,1235,1249,1264],"code-group",{},[1162,1220,1223],{"className":1164,"code":1221,"filename":1222,"language":1166,"meta":1167,"style":1167},"pnpm add @styleframe/dtcg\n","pnpm",[463,1224,1225],{"__ignoreMap":1167},[1171,1226,1227,1229,1232],{"class":1173,"line":1174},[1171,1228,1222],{"class":1177},[1171,1230,1231],{"class":1181}," add",[1171,1233,1234],{"class":1181}," @styleframe/dtcg\n",[1162,1236,1239],{"className":1164,"code":1237,"filename":1238,"language":1166,"meta":1167,"style":1167},"yarn add @styleframe/dtcg\n","yarn",[463,1240,1241],{"__ignoreMap":1167},[1171,1242,1243,1245,1247],{"class":1173,"line":1174},[1171,1244,1238],{"class":1177},[1171,1246,1231],{"class":1181},[1171,1248,1234],{"class":1181},[1162,1250,1253],{"className":1164,"code":1251,"filename":1252,"language":1166,"meta":1167,"style":1167},"npm install @styleframe/dtcg\n","npm",[463,1254,1255],{"__ignoreMap":1167},[1171,1256,1257,1259,1262],{"class":1173,"line":1174},[1171,1258,1252],{"class":1177},[1171,1260,1261],{"class":1181}," install",[1171,1263,1234],{"class":1181},[1162,1265,1268],{"className":1164,"code":1266,"filename":1267,"language":1166,"meta":1167,"style":1167},"bun add @styleframe/dtcg\n","bun",[463,1269,1270],{"__ignoreMap":1167},[1171,1271,1272,1274,1276],{"class":1173,"line":1174},[1171,1273,1267],{"class":1177},[1171,1275,1231],{"class":1181},[1171,1277,1234],{"class":1181},[1162,1279,1283],{"className":1280,"code":1281,"language":1282,"meta":1167,"style":1167},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import {\n    parse,\n    validate,\n    applyInheritance,\n    resolveAliases,\n    walk,\n} from '@styleframe/dtcg';\n\nconst doc = parse(jsonString);\nconst errors = validate(doc);\nif (errors.length > 0) {\n    throw new Error(`Invalid DTCG document: ${errors[0].message}`);\n}\n\nconst inherited = applyInheritance(doc);\nconst resolved = resolveAliases(inherited);\n\nfor (const entry of walk(resolved)) {\n    console.log(entry.path, entry.token);\n}\n","ts",[463,1284,1285,1295,1305,1313,1321,1329,1337,1357,1363,1385,1403,1430,1476,1482,1487,1504,1522,1527,1552,1588],{"__ignoreMap":1167},[1171,1286,1287,1291],{"class":1173,"line":1174},[1171,1288,1290],{"class":1289},"s7zQu","import",[1171,1292,1294],{"class":1293},"sMK4o"," {\n",[1171,1296,1298,1302],{"class":1173,"line":1297},2,[1171,1299,1301],{"class":1300},"sTEyZ","    parse",[1171,1303,1304],{"class":1293},",\n",[1171,1306,1308,1311],{"class":1173,"line":1307},3,[1171,1309,1310],{"class":1300},"    validate",[1171,1312,1304],{"class":1293},[1171,1314,1316,1319],{"class":1173,"line":1315},4,[1171,1317,1318],{"class":1300},"    applyInheritance",[1171,1320,1304],{"class":1293},[1171,1322,1324,1327],{"class":1173,"line":1323},5,[1171,1325,1326],{"class":1300},"    resolveAliases",[1171,1328,1304],{"class":1293},[1171,1330,1332,1335],{"class":1173,"line":1331},6,[1171,1333,1334],{"class":1300},"    walk",[1171,1336,1304],{"class":1293},[1171,1338,1340,1343,1346,1349,1351,1354],{"class":1173,"line":1339},7,[1171,1341,1342],{"class":1293},"}",[1171,1344,1345],{"class":1289}," from",[1171,1347,1348],{"class":1293}," '",[1171,1350,465],{"class":1181},[1171,1352,1353],{"class":1293},"'",[1171,1355,1356],{"class":1293},";\n",[1171,1358,1360],{"class":1173,"line":1359},8,[1171,1361,1362],{"emptyLinePlaceholder":32},"\n",[1171,1364,1366,1370,1373,1376,1380,1383],{"class":1173,"line":1365},9,[1171,1367,1369],{"class":1368},"spNyl","const",[1171,1371,1372],{"class":1300}," doc ",[1171,1374,1375],{"class":1293},"=",[1171,1377,1379],{"class":1378},"s2Zo4"," parse",[1171,1381,1382],{"class":1300},"(jsonString)",[1171,1384,1356],{"class":1293},[1171,1386,1388,1390,1393,1395,1398,1401],{"class":1173,"line":1387},10,[1171,1389,1369],{"class":1368},[1171,1391,1392],{"class":1300}," errors ",[1171,1394,1375],{"class":1293},[1171,1396,1397],{"class":1378}," validate",[1171,1399,1400],{"class":1300},"(doc)",[1171,1402,1356],{"class":1293},[1171,1404,1406,1409,1412,1414,1417,1420,1424,1427],{"class":1173,"line":1405},11,[1171,1407,1408],{"class":1289},"if",[1171,1410,1411],{"class":1300}," (errors",[1171,1413,1124],{"class":1293},[1171,1415,1416],{"class":1300},"length ",[1171,1418,1419],{"class":1293},">",[1171,1421,1423],{"class":1422},"sbssI"," 0",[1171,1425,1426],{"class":1300},") ",[1171,1428,1429],{"class":1293},"{\n",[1171,1431,1433,1436,1439,1442,1446,1449,1452,1455,1458,1461,1464,1466,1469,1472,1474],{"class":1173,"line":1432},12,[1171,1434,1435],{"class":1289},"    throw",[1171,1437,1438],{"class":1293}," new",[1171,1440,1441],{"class":1378}," Error",[1171,1443,1445],{"class":1444},"swJcz","(",[1171,1447,1448],{"class":1293},"`",[1171,1450,1451],{"class":1181},"Invalid DTCG document: ",[1171,1453,1454],{"class":1293},"${",[1171,1456,1457],{"class":1300},"errors[",[1171,1459,1460],{"class":1422},"0",[1171,1462,1463],{"class":1300},"]",[1171,1465,1124],{"class":1293},[1171,1467,1468],{"class":1300},"message",[1171,1470,1471],{"class":1293},"}`",[1171,1473,1102],{"class":1444},[1171,1475,1356],{"class":1293},[1171,1477,1479],{"class":1173,"line":1478},13,[1171,1480,1481],{"class":1293},"}\n",[1171,1483,1485],{"class":1173,"line":1484},14,[1171,1486,1362],{"emptyLinePlaceholder":32},[1171,1488,1490,1492,1495,1497,1500,1502],{"class":1173,"line":1489},15,[1171,1491,1369],{"class":1368},[1171,1493,1494],{"class":1300}," inherited ",[1171,1496,1375],{"class":1293},[1171,1498,1499],{"class":1378}," applyInheritance",[1171,1501,1400],{"class":1300},[1171,1503,1356],{"class":1293},[1171,1505,1507,1509,1512,1514,1517,1520],{"class":1173,"line":1506},16,[1171,1508,1369],{"class":1368},[1171,1510,1511],{"class":1300}," resolved ",[1171,1513,1375],{"class":1293},[1171,1515,1516],{"class":1378}," resolveAliases",[1171,1518,1519],{"class":1300},"(inherited)",[1171,1521,1356],{"class":1293},[1171,1523,1525],{"class":1173,"line":1524},17,[1171,1526,1362],{"emptyLinePlaceholder":32},[1171,1528,1530,1533,1536,1538,1541,1544,1547,1550],{"class":1173,"line":1529},18,[1171,1531,1532],{"class":1289},"for",[1171,1534,1535],{"class":1300}," (",[1171,1537,1369],{"class":1368},[1171,1539,1540],{"class":1300}," entry ",[1171,1542,1543],{"class":1293},"of",[1171,1545,1546],{"class":1378}," walk",[1171,1548,1549],{"class":1300},"(resolved)) ",[1171,1551,1429],{"class":1293},[1171,1553,1555,1558,1560,1563,1565,1568,1570,1573,1576,1579,1581,1584,1586],{"class":1173,"line":1554},19,[1171,1556,1557],{"class":1300},"    console",[1171,1559,1124],{"class":1293},[1171,1561,1562],{"class":1378},"log",[1171,1564,1445],{"class":1444},[1171,1566,1567],{"class":1300},"entry",[1171,1569,1124],{"class":1293},[1171,1571,1572],{"class":1300},"path",[1171,1574,1575],{"class":1293},",",[1171,1577,1578],{"class":1300}," entry",[1171,1580,1124],{"class":1293},[1171,1582,1583],{"class":1300},"token",[1171,1585,1102],{"class":1444},[1171,1587,1356],{"class":1293},[1171,1589,1591],{"class":1173,"line":1590},20,[1171,1592,1481],{"class":1293},[455,1594,1596],{"id":1595},"diagnostic-extensions","Diagnostic extensions",[459,1598,1599,1600,1603,1604,1607],{},"When the CLI cannot losslessly express a Styleframe value as a primitive DTCG type, it preserves it via the standard ",[463,1601,1602],{},"$extensions"," mechanism under the ",[463,1605,1606],{},"dev.styleframe"," namespace:",[664,1609,1610,1620],{},[667,1611,1612],{},[670,1613,1614,1617],{},[673,1615,1616],{},"Extension",[673,1618,1619],{},"Meaning",[680,1621,1622,1632,1649],{},[670,1623,1624,1629],{},[685,1625,1626],{},[463,1627,1628],{},"dev.styleframe.unknownType",[685,1630,1631],{},"The value's DTCG type could not be inferred — token kept as-is",[670,1633,1634,1639],{},[685,1635,1636],{},[463,1637,1638],{},"dev.styleframe.expression",[685,1640,1641,1642,479,1645,1648],{},"Original CSS expression (e.g. ",[463,1643,1644],{},"clamp()",[463,1646,1647],{},"calc()",") preserved alongside a fallback",[670,1650,1651,1656],{},[685,1652,1653],{},[463,1654,1655],{},"dev.styleframe.fluidBound",[685,1657,1658,1659,1662,1663,1666],{},"A fluid value was normalised to its ",[463,1660,1661],{},"min"," or ",[463,1664,1665],{},"max"," bound",[459,1668,1669],{},"Downstream tools that don't recognise these extensions ignore them safely. Tools that do (such as the Styleframe Figma plugin) use them to round-trip without information loss.",[455,1671,1673],{"id":1672},"resources","Resources",[534,1675,1676,1682,1688,1694,1702,1707],{},[537,1677,1678],{},[468,1679,1681],{"href":515,"rel":1680,"target":31},[472],"W3C DTCG Format Module",[537,1683,1684],{},[468,1685,1687],{"href":520,"rel":1686,"target":31},[472],"W3C DTCG Color Module",[537,1689,1690],{},[468,1691,1693],{"href":525,"rel":1692,"target":31},[472],"W3C DTCG Resolver Module",[537,1695,1696],{},[468,1697,1698,1699],{"href":1111},"CLI Reference — ",[463,1700,1701],{},"dtcg export",[537,1703,1704],{},[468,1705,1706],{"href":58},"Figma Plugin — end-to-end Figma sync",[537,1708,1709],{},[468,1710,1713,1714],{"href":1711,"rel":1712,"target":31},"https://github.com/styleframe-dev/styleframe/tree/main/tooling/dtcg",[472],"GitHub — ",[463,1715,465],{},[1717,1718,1719],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":1167,"searchDepth":1297,"depth":1297,"links":1721},[1722,1723,1724,1725,1735,1736,1737,1738],{"id":457,"depth":1297,"text":83},{"id":501,"depth":1297,"text":502},{"id":531,"depth":1297,"text":532},{"id":653,"depth":1297,"text":654,"children":1726},[1727,1728,1729,1730,1731,1732,1733,1734],{"id":661,"depth":1307,"text":662},{"id":740,"depth":1307,"text":741},{"id":816,"depth":1307,"text":817},{"id":849,"depth":1307,"text":850},{"id":905,"depth":1307,"text":906},{"id":962,"depth":1307,"text":963},{"id":1025,"depth":1307,"text":527},{"id":1075,"depth":1307,"text":1076},{"id":1105,"depth":1297,"text":1106},{"id":1208,"depth":1297,"text":1209},{"id":1595,"depth":1297,"text":1596},{"id":1672,"depth":1297,"text":1673},"A spec-conformant parser, validator, and serializer for the W3C Design Tokens Community Group format — the interchange layer behind the styleframe dtcg export command.","md",null,{},{"icon":65},{"title":62,"description":1739},{"loc":63},"gnFXpnfbXMkXP5eB0GIMGS1uRHR6b_k0geL-NQurDl4",[1748,1750],{"title":57,"path":58,"stem":59,"description":1749,"icon":60,"children":-1},"Sync your Styleframe design tokens with Figma using the plugin and CLI commands for bidirectional token synchronization.",{"title":67,"path":68,"stem":69,"description":1751,"icon":70,"children":-1},"See how Styleframe compares to other CSS-in-TypeScript solutions and styling frameworks",1778183741018]