@formtrieb/token-resolver
Advanced tools
Tokens-Studio JSON → CSS variables, utility classes, SCSS mixins, and Figma↔CSS lookup map. Driven by a project-local config.
Tokens-Studio JSON → CSS variables, utility classes, SCSS mixins, and Figma↔CSS lookup map. Driven by a project-local config.
npm install --save-dev @formtrieb/token-resolver
Your consumer project's package.json must have "type": "module" (this package is ESM-only). The CLI loads .ts, .mjs, and .js config files.
Create formtrieb-tokens.config.ts in your project root:
import { defineConfig } from '@formtrieb/token-resolver';
import { typography, directional, container } from '@formtrieb/token-resolver/builders';
export default defineConfig({
prefix: 'mp-',
paths: {
tokens: './tokens',
output: './src/css',
tokenMap: './src/tokens/token-map.json',
},
themeGroups: {
Foundation: { useReferences: false },
},
defaultGroupBehavior: { useReferences: true },
utilities: [
typography(),
directional({
name: 'p',
source: 'spacing.component.*',
property: 'padding',
sides: ['t', 'b', 's', 'e', 'x', 'y', 'all'],
}),
container({
name: 'content',
rules: {
'max-width': '{content.max-width}',
'padding-inline': '{layout.grid.margin}',
'margin-inline': 'auto',
},
}),
],
});
Build:
npx formtrieb-tokens
Watch:
npx formtrieb-tokens --watch
For the example above, the generator produces:
src/css/
variables/
foundation.css (raw values; useReferences: false)
mode.css ([data-mode="…"] selectors)
typography.css (with text-indent, margin-block-end vars)
…
utilities/
typography.css (.mp-display-1, .mp-display-1--paragraph, …)
p.css (.mp-p-md, .mp-p-t-md, .mp-p-s-md, …)
content.css (.mp-content)
main.css (@imports of variables/* + utilities/*)
bundle.css (everything inlined for library consumers)
src/tokens/
token-map.json (figma↔css lookup map)
| Builder | Purpose |
|---|---|
single | One CSS property per token, one class per token. |
directional | Property with logical-axis sides (t/b/s/e/x/y/all), RTL-aware. |
container | Multi-rule class mixing token references and CSS literals. |
typography | Type-driven typography classes with --paragraph helper. |
typographyMixin | SCSS mixin partial — same data, different output format. |
| Side | CSS | LTR | RTL |
|---|---|---|---|
t | padding-block-start | top | top |
b | padding-block-end | bottom | bottom |
s | padding-inline-start | left | right |
e | padding-inline-end | right | left |
x | padding-inline | both | both |
y | padding-block | both | both |
all | padding | all | all |
For full builder API and design rationale, see docs/specs/2026-05-08-token-resolver-package-design.md.
Multi-theme groups in $themes.json produce [data-{group}="{name}"] selectors automatically. Toggle a theme by setting the corresponding HTML attribute — no JS framework required:
<html data-mode="dark" data-device="mobile">
formtrieb-tokens [options]
Options:
-w, --watch Re-run pipeline on tokens/ changes
-c, --config <path> Override config-file location
-h, --help Show usage
The CLI auto-discovers formtrieb-tokens.config.{ts,mjs,js} by walking from cwd up to the filesystem root.
import { runPipeline } from '@formtrieb/token-resolver';
import config from './formtrieb-tokens.config.ts';
await runPipeline(config);
// or partial: await runPipeline(config, { only: ['utilities'] });
MIT
FAQs
Tokens-Studio JSON → CSS variables, utility classes, SCSS mixins, and Figma↔CSS lookup map. Driven by a project-local config.
The npm package @formtrieb/token-resolver receives a total of 5 weekly downloads. As such, @formtrieb/token-resolver popularity was classified as not popular.
We found that @formtrieb/token-resolver demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub Actions checkout now blocks risky pull_request_target checkouts by default to help prevent pwn request supply chain attacks.
Product
Socket now supports Custom Roles and Repository Access Permissions so organizations can control who can access specific repositories and actions.
Product
Socket MCP now lets AI assistants review org alerts, investigate threats using the Socket threat feed, and inspect package files in addition to dependency scoring.