<h1>Typography</h1>
<p class="context-switch">
  <% for (const c of ['base', 'web', 'product']) { %><a href="?context=<%= c %>" class="badge<%= c === ctx ? ' active' : '' %>"><%= c %></a><% } %>
</p>

<% if (typography.length === 0) { %>
<p>No typography tokens found for the <%= ctx %> context.</p>
<% } else { %>
<table class="data-table">
  <thead><tr><th>Token</th><th>Family</th><th>Size</th><th>Weight</th><th>Line height</th><th>Letter spacing</th><th>Transform</th></tr></thead>
  <tbody>
    <% for (const t of typography) { %>
    <tr>
      <td><code><%= t.token || t.name %></code></td>
      <td><%= t.fontFamily || '' %></td>
      <td><%= t.fontSize || '' %></td>
      <td><%= t.fontWeight || '' %></td>
      <td><%= t.lineHeight || '' %></td>
      <td><%= t.letterSpacing || '' %></td>
      <td><%= t.textTransform || '' %></td>
    </tr>
    <% } %>
  </tbody>
</table>
<% } %>
