<table class="gesso-storybook-spacing">
  <thead>
    <tr>
      <th class="gesso-storybook-spacing__header">Token</th>
      <th class="gesso-storybook-spacing__header">REM</th>
      <th class="gesso-storybook-spacing__header">PX</th>
      <th class="gesso-storybook-spacing__header">Example</th>
    </tr>
  </thead>
  <tbody>{% apply spaceless %}
    {# Base font value should be a pixel value or unitless value #}
    {% for name, unit in gesso.spacing|keysort %}
      {% set remValue =
        (unit~''|replace({'px':''})) /
        (gesso.typography['base-font-size']|replace({'px':''}))
      %}

      <tr>
        <td class="gesso-storybook-spacing__cell">{{name|trim}}</td>
        <td class="gesso-storybook-spacing__cell">{{remValue}}rem</td>
        <td class="gesso-storybook-spacing__cell">{{unit}}</td>
        <td class="gesso-storybook-spacing__cell">
          <div style="height:{{unit}}; width:{{unit}}; background-color: #ccc;"></div>
        </td>
      </tr>
    {% endfor %}
    {% endapply %}</tbody>
</table>
