More Easily Use Design Tokens in Eleventy

Posted on

A few years back Heydon Pickering posted Easily Use Design Tokens In Eleventy. Pretty cool, but hey, rather than duplicating the tokens in theme.njk as he does in the article, you can just generate them from the tokens.json global data.

---
permalink: "css/theme.css"
---
:root {% for key, value in tokens %} {
  --{{ key }}: {{ value }};
} {% endfor %}