Design tokens for Jekyll

tokens.yml

colorBlue: '#00f'
colorGreen: '#0f0'
colorRed: '#f00'

variables.scss

---
---
// SCSS variables
{% for token in site.data.tokens %}
${{ token[0] }}: {{ token[1] }};
{% endfor %}

// or as a map
$tokens: ({% for token in site.data.tokens %}
  {{ token[0] }}: {{ token[1] }},
{% endfor %});
// then you'd create variables like so:
// $color-blue: map-get($tokens, colorBlue);

// generate utility classes for each color
{% for token in site.data.tokens %}
  {% unless token[0] contains 'color' %}{% continue %}{% endunless %}
  {% assign name = token[0] | replace: 'color', '' | downcase %}
.fg-{{ name }} { color: {{ token[1] }}; }
.bg-{{ name }} { background-color: {{ token[1] }}; }
{% endfor %}

// or CSS variables!
:root {
{% for token in site.data.tokens %}
  --{{ token[0] }}: {{ token[1] }};
{% endfor %}
}