Export formats
A live release as a file your codebase uses. The same formats are on Overview, in the CLI, the API and the MCP export_tokens tool.
Formats
| Format | Id | File | Covers |
|---|---|---|---|
| CSS variables | css | .css | A custom property for every token. Modes become attribute selectors, so one file covers them all. |
| CSS, light and dark | css-auto | .auto.css | Light values in :root and dark values inside prefers-color-scheme: dark, so the page follows the device. data-theme="light" or "dark" on <html> overrides it. |
| JSON (W3C) | json-dtcg | .tokens.json | Resolved tokens in the W3C 2025.10 format, for Style Dictionary v5 and other current tools. One mode per file. |
| JSON (Style Dictionary v4) | json-sd4 | .json | The same tokens with the older value format Style Dictionary v4 reads: hex colours, "16px", "200ms". One mode per file. |
| JavaScript | js | .js | An ES module exporting a nested object of CSS-ready values. One mode per file. |
| TypeScript | ts | .ts | The JavaScript module, typed with as const so values autocomplete. One mode per file. |
| SCSS | scss | .scss | A Sass variable for every token, with CSS-ready values. One mode per file. |
| Tailwind config | tailwind | .tailwind.config.js | A tailwind.config.js theme.extend with colors, spacing, fonts, shadows and easing. Works with Tailwind 3, and Tailwind 4 through @config. One mode per file. |
| Tailwind 4 theme | tailwind4 | .theme.css | A CSS file with an @theme block (--color-*, --spacing-*, --font-*, --shadow-*, --ease-*, --radius-*) for Tailwind 4. Import it after "tailwindcss". One mode per file. |
| Swift (SwiftUI) | swift | .swift | A StoakenTokens enum with Color, CGFloat, Font.Weight and TimeInterval constants. One mode per file. |
| Jetpack Compose | compose | .kt | A Kotlin StoakenTokens object with Color, Dp, FontWeight, TextStyle and easing values for Compose. One mode per file. |
| Android XML | android | .xml | A values resource file with colors, dimens (dp), integers and strings. One mode per file, e.g. values/ and values-night/. |
Modes
CSS variables holds every mode combination in one file: the default in :root and each other mode as an attribute selector such as [data-color-scheme="dark"]. CSS, light and dark follows the device instead, with data-theme to override. Every other format writes one mode per file: pass --mode (CLI) or ?mode= (API), for example one Swift file per mode or values/ and values-night/ on Android.
What gets left out
Each platform can hold some token types and not others (Android resources have no shadows, for instance). Anything left out is listed in a Notes comment at the top of the file and in the Stoaken-Export-Warnings header, so nothing disappears silently. JSON exports are checked against Style Dictionary v5 on every build.