Cross-platform Outputs

facet build emits multiple artifacts from one graph.

Build output set

• tokens.css (rgb or oklch via --format)
• tokens.oklch.css
• utilities.css
• demo.html
• playground.html
• tokens.dtcg.json
• tokens.styledict.json
• tokens.props.css
• tokens.lightdark.css
• facet.d.ts
• tailwind.css
• native/tokens.rn.js
• native/tokens.js
• native/FacetTokens.swift
• native/FacetTokens.kt

One-dir quick notes

• --format rgb|oklch controls tokens.css emission.
• --minify writes minified tokens.css and utilities.css in-place after emitting readable files.
• --out customizes output directory.

tokens.css vs tokens.oklch.css

Both contain layered CSS variable output. tokens.oklch.css uses full oklch values for native Facet consumption; tokens.css uses compatibility rgb(var(--token)) style values where possible.

Interop exports (export not round-tripped)

• facet tailwind <resolver> [--out file] → Tailwind v4 @theme preset
• facet styledict <resolver> [--out file] → Style Dictionary v4 JSON
• facet export [--out file] → pure DTCG export for default mode
• facet export --figma → Figma Variables payload

facet export --figma is documented as one collection per axis and a primitives collection for static tokens.

Figma payload constraints

From source export notes:

• only COLOR and FLOAT values are written
• float dimensions are emitted in px (unit metadata can be lost)
• cross-axis combinations are not represented as one combined Figma mode
• non-supported composite types require downstream style mapping

Cross-platform notes

Native emitter outputs are token-only maps:

• React Native: native/tokens.rn.js with all permutations
• Swift: native/FacetTokens.swift
• Kotlin: native/FacetTokens.kt

Planned status markers

These exporters are one-way in source docs; Facet remains the source of truth.