nanools ∕ Design Tokens to CSS

Convert JSON design tokens to CSS. Uses postcss-design-token-utils plugin.

Docs

Design tokens

json
{
"color": {
"dark": "#030303",
"light": "#ffffff",
"primary": "#02394A"
},
"space": {
"xs": "0.75rem",
"s": "1rem",
"m": "1.5rem",
"l": "2rem"
}
}

Options

json
{
"breakpoints": {
"sm": "330px",
"md": "650px"
},
"responsivePrefixClassSeparator": "\\:",
"utilityClasses": [
{
"id": "color",
"property": "color",
"prefix": "text"
},
{
"id": "color",
"property": "background-color",
"prefix": "bg"
},
{
"id": "space",
"property": "margin-block",
"prefix": "mt",
"responsiveVariants": true
}
]
}

Output

css
:root {
--color-dark: #030303;
--color-light: #ffffff;
--color-primary: #02394A;
--space-xs: 0.75rem;
--space-s: 1rem;
--space-m: 1.5rem;
--space-l: 2rem;
}

.text-dark {
color: var(--color-dark);
}

.text-light {
color: var(--color-light);
}

.text-primary {
color: var(--color-primary);
}

.bg-dark {
background-color: var(--color-dark);
}

.bg-light {
background-color: var(--color-light);
}

.bg-primary {
background-color: var(--color-primary);