nanools ∕ Design Tokens to CSS

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

Docs

Design tokens

json

Loading editor...

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

Options

json

Loading editor...

{
  "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

Loading editor...