@repobit/dex-system-design 0.25.12 → 1.0.0

package/src/tokens/fonts.stories.js

@@ -1,400 +1,380 @@
 import { html } from 'lit';
+import {
+  copyToken,
+  discoverConsumers,
+  discoverTokens,
+  docsPage,
+  readAllCssText,
+  refSection,
+  resolve,
+  usageCell
+} from './story-chrome.js';
 
 export default {
-  title: 'Design Tokens/Fonts',
-  tags : ['autodocs'],
-
-  argTypes: {
-    sampleText: {
-      control    : 'text',
-      description: 'Text sample to display',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: 'The quick brown fox jumps over the lazy dog.' }
-      }
-    },
-    fontSize: {
-      control    : { type: 'select' },
-      options    : ['small', 'medium', 'large', 'xlarge'],
-      description: 'Font size demonstration',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: 'medium' }
-      }
-    }
-  },
-
-  parameters: {
-    docs: {
-      description: {
-        component: `
-# Font Tokens & Typography System
-
-Design tokens and typography system using IBM Plex font family.
-
-## Overview
-
-This system uses IBM Plex as the primary font family with CSS custom properties for consistent typography across the application.
-
-## Font Families
-
-### IBM Plex Sans
-Primary font for UI text, headings, and body content.
-
-**CSS Custom Property:** \`--font-family-sans\`
-
-### IBM Plex Mono
-Monospaced font for code, technical content, and data display.
-
-**CSS Custom Property:** \`--font-family-mono\`
-
-## Usage
-
-### In CSS
-\`\`\`css
-/* Using CSS custom properties */
-.element {
-  font-family: var(--font-family-sans);
-  font-weight: 600;
-}
-
-.code-block {
-  font-family: var(--font-family-mono);
-  font-size: 0.875rem;
-}
-\`\`\`
-
-### In HTML with Classes
-\`\`\`html
-<div class="sans-normal">Regular text</div>
-<div class="sans-semibold">Semi-bold text</div>
-<div class="mono-regular">Code example</div>
-\`\`\`
-
-## Available Weights & Styles
-
-### IBM Plex Sans
-| Class | Weight | Style | Use Case |
-|-------|--------|-------|----------|
-| \`.sans-normal\` | 400 | Normal | Body text, paragraphs |
-| \`.sans-semibold\` | 600 | Normal | Subheadings, emphasis |
-| \`.sans-bold\` | 700 | Normal | Headings, titles |
-| \`.sans-italic\` | 400 | Italic | Quotes, highlights |
-
-### IBM Plex Mono
-| Class | Weight | Style | Use Case |
-|-------|--------|-------|----------|
-| \`.mono-regular\` | 400 | Normal | Code snippets, technical text |
-| \`.mono-bold\` | 700 | Normal | Important code, errors |
-| \`.mono-italic\` | 400 | Italic | Comments, annotations |
-
-## CSS Custom Properties
-
-\`\`\`css
-:root {
-  /* Font families */
-  --font-family-sans: 'IBM Plex Sans', Arial, sans-serif;
-  --font-family-mono: 'IBM Plex Mono', monospace;
-  
-  /* Font sizes */
-  --font-size-xs: 0.75rem;   /* 12px */
-  --font-size-sm: 0.875rem;  /* 14px */
-  --font-size-md: 1rem;      /* 16px */
-  --font-size-lg: 1.125rem;  /* 18px */
-  --font-size-xl: 1.25rem;   /* 20px */
-  --font-size-2xl: 1.5rem;   /* 24px */
-  --font-size-3xl: 1.875rem; /* 30px */
-  --font-size-4xl: 2.25rem;  /* 36px */
-  
-  /* Line heights */
-  --line-height-tight: 1.25;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.75;
-}
-\`\`\`
-
-## Best Practices
-
-1. **Use semantic HTML**: Always use proper heading tags (h1-h6) for structure
-2. **Respect hierarchy**: Maintain consistent font size hierarchy
-3. **Contrast ratio**: Ensure minimum 4.5:1 contrast for normal text
-4. **Line length**: Keep line length between 50-75 characters for readability
-5. **Responsive**: Use relative units (rem, em) for font sizes
-
-## Browser Support
-
-IBM Plex is supported in all modern browsers:
-- Chrome 60+
-- Firefox 55+
-- Safari 11+
-- Edge 79+
-
-## Loading Fonts
-
-Fonts are loaded via \`@font-face\` declarations in the global styles:
-
-\`\`\`css
-@font-face {
-  font-family: 'IBM Plex Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: url('/fonts/ibm-plex-sans-regular.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'IBM Plex Sans';
-  font-style: italic;
-  font-weight: 400;
-  src: url('/fonts/ibm-plex-sans-italic.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'IBM Plex Sans';
-  font-style: normal;
-  font-weight: 600;
-  src: url('/fonts/ibm-plex-sans-semibold.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'IBM Plex Sans';
-  font-style: normal;
-  font-weight: 700;
-  src: url('/fonts/ibm-plex-sans-bold.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'IBM Plex Mono';
-  font-style: normal;
-  font-weight: 400;
-  src: url('/fonts/ibm-plex-mono-regular.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'IBM Plex Mono';
-  font-style: italic;
-  font-weight: 400;
-  src: url('/fonts/ibm-plex-mono-italic.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'IBM Plex Mono';
-  font-style: normal;
-  font-weight: 700;
-  src: url('/fonts/ibm-plex-mono-bold.woff2') format('woff2');
-}
-\`\`\`
-        `
-      }
-    }
-  }
+  title: 'Foundations/Fonts',
+  tags : ['autodocs']
 };
 
-const Template = (args) => html`
+const fontStyles = html`
   <style>
-    section {
-      margin-bottom: 24px;
-      padding: 16px;
-      background: white;
-      border-radius: 8px;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    }
-    h3 {
-      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
-      font-weight: 600;
-      font-size: 1.2rem;
-      margin-bottom: 12px;
-      color: #333;
-      border-bottom: 2px solid #f0f0f0;
-      padding-bottom: 8px;
-    }
-    .sample {
-      margin-bottom: 12px;
-      font-size: 1.1rem;
-      line-height: 1.5;
-      padding: 8px;
-      background: #fafafa;
-      border-radius: 4px;
-    }
-    .sans-normal {
-      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
-      font-weight: 400;
-      font-style: normal;
-    }
-    .sans-semibold {
-      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
-      font-weight: 600;
-      font-style: normal;
+    .face-sample {
+      font-size: var(--typography-fontSize-lg);
+      color: var(--color-neutral-900);
+      white-space: nowrap;
     }
-    .sans-bold {
-      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
-      font-weight: 700;
-      font-style: normal;
-    }
-    .sans-italic {
-      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
-      font-weight: 400;
-      font-style: italic;
+
+    .file {
+      font-family: var(--typography-fontFamily-mono);
+      font-size: var(--typography-fontSize-xxs);
+      color: var(--color-neutral-500);
+      white-space: nowrap;
     }
-    .mono-regular {
-      font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
-      font-weight: 400;
-      font-style: normal;
-      background: #f5f5f5;
-      border-left: 3px solid #ddd;
+
+    .status {
+      font-family: var(--typography-fontFamily-sans);
+      font-size: var(--typography-fontSize-xxs);
+      font-weight: var(--typography-fontWeight-semibold);
+      padding: 1px var(--spacing-6);
+      border-radius: var(--radius-sm);
     }
-    .mono-bold {
-      font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
-      font-weight: 700;
-      font-style: normal;
-      background: #f5f5f5;
-      border-left: 3px solid #ddd;
+
+    .status[data-ok='true'] {
+      color: var(--color-green-800);
+      background: var(--color-green-50);
     }
-    .mono-italic {
-      font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
-      font-weight: 400;
-      font-style: italic;
-      background: #f5f5f5;
-      border-left: 3px solid #ddd;
+
+    .status[data-ok='false'] {
+      color: var(--color-red-800);
+      background: var(--color-red-50);
     }
-    .font-info {
-      font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
-      font-size: 0.85rem;
-      color: #666;
-      margin-top: 4px;
-      padding-left: 12px;
+
+    .status[data-ok='pending'] {
+      color: var(--color-neutral-600);
+      background: var(--color-neutral-50);
     }
-    .token-display {
-      background: #2d2d2d;
-      color: #fff;
-      padding: 12px;
-      border-radius: 4px;
-      font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
-      font-size: 0.9rem;
-      margin-top: 16px;
+
+    .stack-list {
+      margin: 0;
+      padding-left: var(--spacing-16);
+      font-family: var(--typography-fontFamily-mono);
+      font-size: var(--typography-fontSize-xxs);
+      color: var(--color-neutral-600);
+      line-height: var(--typography-lineHeight-normal);
     }
-    .token-property {
-      color: #9cdcfe;
+
+    .pangram {
+      margin: 0 0 var(--spacing-12);
+      color: var(--color-neutral-900);
     }
-    .token-value {
-      color: #ce9178;
+
+    .pangram:last-child {
+      margin-bottom: 0;
     }
   </style>
+`;
 
-  <section>
-    <h3>IBM Plex Sans - Weights & Styles</h3>
-    <div class="sample sans-normal">
-      ${args.sampleText}
-      <div class="font-info">font-family: var(--font-family-sans); font-weight: 400;</div>
-    </div>
-    <div class="sample sans-semibold">
-      ${args.sampleText}
-      <div class="font-info">font-family: var(--font-family-sans); font-weight: 600;</div>
-    </div>
-    <div class="sample sans-bold">
-      ${args.sampleText}
-      <div class="font-info">font-family: var(--font-family-sans); font-weight: 700;</div>
-    </div>
-    <div class="sample sans-italic">
-      ${args.sampleText}
-      <div class="font-info">font-family: var(--font-family-sans); font-weight: 400; font-style: italic;</div>
-    </div>
-  </section>
+/**
+ * Reads the @font-face rules actually registered in the document. These only
+ * exist because fonts.css is loaded in document scope — @font-face inside a
+ * shadow root never reaches the document font set.
+ */
+function readFontFaces(ownFamilies) {
+  const faces = [];
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    for (const rule of Array.from(rules)) {
+      if (rule.constructor.name !== 'CSSFontFaceRule' && !(rule.style && rule.type === 5)) continue;
+      const family = (rule.style.getPropertyValue('font-family') || '').replace(/['"]/g, '').trim();
+      // Storybook registers its own UI faces in this document; only report the
+      // families our own --typography-fontFamily-* tokens actually ask for.
+      if (!family || !ownFamilies.has(family)) continue;
+      faces.push({
+        family,
+        weight : (rule.style.getPropertyValue('font-weight') || '400').trim(),
+        style  : (rule.style.getPropertyValue('font-style') || 'normal').trim(),
+        display: (rule.style.getPropertyValue('font-display') || '—').trim(),
+        file   : ((rule.style.getPropertyValue('src') || '').match(/([^/'")]+\.woff2?)/) || [null, '—'])[1]
+      });
+    }
+  }
+  return faces;
+}
 
-  <section>
-    <h3>IBM Plex Mono - Weights & Styles</h3>
-    <div class="sample mono-regular">
-      ${args.sampleText}
-      <div class="font-info">font-family: var(--font-family-mono); font-weight: 400;</div>
-    </div>
-    <div class="sample mono-bold">
-      ${args.sampleText}
-      <div class="font-info">font-family: var(--font-family-mono); font-weight: 700;</div>
-    </div>
-    <div class="sample mono-italic">
-      ${args.sampleText}
-      <div class="font-info">font-family: var(--font-family-mono); font-weight: 400; font-style: italic;</div>
+function faceTable(family, faces) {
+  const sorted = [...faces].sort(
+    (a, b) => Number(a.weight) - Number(b.weight) || a.style.localeCompare(b.style)
+  );
+
+  return html`
+    <div class="table-scroll">
+      <table>
+        <caption>${family} faces</caption>
+        <thead>
+          <tr>
+            <th scope="col">Weight</th>
+            <th scope="col">Style</th>
+            <th scope="col">Sample</th>
+            <th scope="col">File</th>
+            <th scope="col">font-display</th>
+            <th scope="col">Loaded</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${sorted.map(face => {
+            const spec = `${face.style} ${face.weight} 16px "${family}"`;
+            const id = `${family}|${face.weight}|${face.style}`;
+            // Faces are fetched lazily, so check() alone only reports what the
+            // page happens to have used. Ask for the face, then report whether
+            // the file actually resolved.
+            queueMicrotask(async () => {
+              let ok;
+              try {
+                const loadedFaces = await document.fonts.load(spec);
+                ok = loadedFaces.length > 0;
+              } catch {
+                ok = false;
+              }
+              for (const node of document.querySelectorAll(`[data-face="${id}"]`)) {
+                node.dataset.ok = String(ok);
+                node.textContent = ok ? 'yes' : 'failed';
+              }
+            });
+            return html`
+              <tr>
+                <td class="num">${face.weight}</td>
+                <td class="mono muted">${face.style}</td>
+                <td
+                  class="face-sample"
+                  style="font-family: '${family}'; font-weight: ${face.weight}; font-style: ${face.style}"
+                >
+                  Handgloves 123
+                </td>
+                <td class="file">${face.file}</td>
+                <td class="mono muted">${face.display}</td>
+                <td>
+                  <span class="status" data-face=${id} data-ok="pending">checking</span>
+                </td>
+              </tr>
+            `;
+          })}
+        </tbody>
+      </table>
     </div>
-  </section>
+  `;
+}
 
-  <section>
-    <h3>CSS Custom Properties</h3>
-    <div class="token-display">
-      <span class="token-property">--font-family-sans</span>: <span class="token-value">'IBM Plex Sans', Arial, sans-serif</span>;<br>
-      <span class="token-property">--font-family-mono</span>: <span class="token-value">'IBM Plex Mono', monospace</span>;<br><br>
-      <span class="token-property">.sans-normal</span> {<br>
-      &nbsp;&nbsp;<span class="token-property">font-family</span>: <span class="token-value">var(--font-family-sans)</span>;<br>
-      &nbsp;&nbsp;<span class="token-property">font-weight</span>: <span class="token-value">400</span>;<br>
-      }<br><br>
-      <span class="token-property">.mono-regular</span> {<br>
-      &nbsp;&nbsp;<span class="token-property">font-family</span>: <span class="token-value">var(--font-family-mono)</span>;<br>
-      &nbsp;&nbsp;<span class="token-property">font-weight</span>: <span class="token-value">400</span>;<br>
-      }
-    </div>
-  </section>
-`;
+export const Default = () => {
+  const cssText = readAllCssText();
+  const consumers = discoverConsumers(cssText);
+
+  const familyTokenNames = discoverTokens(
+    cssText,
+    /(--typography-fontFamily-[a-zA-Z0-9-]+)\s*:/g
+  ).map(match => match[1]);
+
+  // the first entry of each stack is the face we actually ship
+  const ownFamilies = new Set(
+    familyTokenNames
+      .map(token => resolve(token).split(',')[0].replace(/['"]/g, '').trim())
+      .filter(Boolean)
+  );
+  const faces = readFontFaces(ownFamilies);
+
+  const byFamily = new Map();
+  for (const face of faces) {
+    if (!byFamily.has(face.family)) byFamily.set(face.family, []);
+    byFamily.get(face.family).push(face);
+  }
 
-export const Default = Template.bind({});
-Default.args = {
-  sampleText: 'The quick brown fox jumps over the lazy dog.',
-  fontSize  : 'medium'
+  const familyTokens = familyTokenNames;
+
+  return html`
+    ${fontStyles}
+    ${docsPage({
+      title: 'Fonts',
+      lede : html`The families the design system ships, and the individual faces registered in the
+        document. Both tables are read from the loaded CSS at render time.`,
+      note: html`Faces are registered by <code>src/tokens/fonts.css</code>, which must be loaded
+        in <b>document scope</b>. An <code>@font-face</code> rule inside a component's shadow root
+        never reaches <code>document.fonts</code>, so it silently does nothing.
+        <b>Loaded</b> asks the browser to fetch each face and reports whether the file actually
+        resolved, so a broken <code>url()</code> shows up here as <b>failed</b>.`,
+      children: html`
+        ${refSection({
+          name    : 'Family tokens',
+          meta    : `${familyTokens.length} tokens · --typography-fontFamily-*`,
+          children: html`
+            <div class="table-scroll">
+              <table>
+                <caption>Font family tokens</caption>
+                <thead>
+                  <tr>
+                    <th scope="col">Token</th>
+                    <th scope="col">Sample</th>
+                    <th scope="col">Stack</th>
+                    <th scope="col">Used by</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  ${familyTokens.map(token => {
+                    const stack = resolve(token)
+                      .split(',')
+                      .map(part => part.trim())
+                      .filter(Boolean);
+                    return html`
+                      <tr>
+                        <td>${copyToken(token)}</td>
+                        <td class="face-sample" style="font-family: var(${token})">
+                          Handgloves 123
+                        </td>
+                        <td>
+                          <ol class="stack-list">
+                            ${stack.map(part => html`<li>${part}</li>`)}
+                          </ol>
+                        </td>
+                        <td>${usageCell(consumers.get(token))}</td>
+                      </tr>
+                    `;
+                  })}
+                </tbody>
+              </table>
+            </div>
+          `
+        })}
+        ${[...byFamily].map(([family, list]) =>
+          refSection({
+            name    : family,
+            meta    : `${list.length} faces registered`,
+            children: faceTable(family, list)
+          })
+        )}
+        ${byFamily.size
+          ? ''
+          : html`<div class="docs-note">
+              No <code>@font-face</code> rules found in the document. Check that
+              <code>src/tokens/fonts.css</code> is imported in
+              <code>.storybook/preview.js</code>.
+            </div>`}
+      `
+    })}
+  `;
 };
 
-export const CustomText = Template.bind({});
-CustomText.args = {
-  sampleText: 'Typography is the craft of arranging type to make language visible.',
-  fontSize  : 'medium'
+export const CustomText = {
+  args: {
+    text: 'The quick brown fox jumps over the lazy dog'
+  },
+  argTypes: {
+    text: { control: 'text', name: 'Specimen text' }
+  },
+  render: ({ text }) => {
+    const weights = ['300', '400', '500', '600', '700'];
+
+    return html`
+      ${fontStyles}
+      ${docsPage({
+        title   : 'Specimen',
+        lede    : 'Set your own text to judge the families at every weight and in italic.',
+        children: ['--typography-fontFamily-sans', '--typography-fontFamily-mono'].map(token =>
+          refSection({
+            name    : token.replace('--typography-fontFamily-', ''),
+            meta    : token,
+            children: html`
+              <div class="specimen">
+                ${weights.map(
+                  weight => html`
+                    <p
+                      class="pangram"
+                      style="font-family: var(${token}); font-weight: ${weight}; font-size: var(--typography-fontSize-lg)"
+                    >
+                      <span class="file">${weight}</span> ${text}
+                    </p>
+                    <p
+                      class="pangram"
+                      style="font-family: var(${token}); font-weight: ${weight}; font-style: italic; font-size: var(--typography-fontSize-lg)"
+                    >
+                      <span class="file">${weight} italic</span> ${text}
+                    </p>
+                  `
+                )}
+              </div>
+            `
+          })
+        )
+      })}
+    `;
+  }
 };
 
 export const TechnicalExample = () => html`
-  <style>
-    .code-example {
-      background: #1e1e1e;
-      color: #d4d4d4;
-      padding: 20px;
-      border-radius: 8px;
-      font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
-      font-size: 0.9rem;
-      line-height: 1.6;
-      margin: 16px 0;
-    }
-    .code-comment { color: #6a9955; }
-    .code-keyword { color: #569cd6; }
-    .code-string { color: #ce9178; }
-    .code-function { color: #dcdcaa; }
-    .code-number { color: #b5cea8; }
-  </style>
-
-  <section style="background: white; padding: 20px; border-radius: 8px;">
-    <h3 class="sans-semibold">Real-world Usage Example</h3>
-    
-    <div class="sans-normal" style="margin-bottom: 16px;">
-      This is regular body text using IBM Plex Sans. It's used for most UI text and content.
-    </div>
-    
-    <div class="sans-bold" style="margin-bottom: 16px;">
-      This is a bold heading using IBM Plex Sans. Perfect for section titles.
-    </div>
-    
-    <h4 class="sans-semibold" style="margin: 16px 0 8px 0;">Code Example:</h4>
-    <div class="code-example">
-      <span class="code-comment">// JavaScript function example</span><br>
-      <span class="code-keyword">function</span> <span class="code-function">calculateTotal</span>(<span class="code-keyword">items</span>) {<br>
-      &nbsp;&nbsp;<span class="code-keyword">let</span> total = <span class="code-number">0</span>;<br>
-      &nbsp;&nbsp;<span class="code-keyword">for</span> (<span class="code-keyword">let</span> item <span class="code-keyword">of</span> items) {<br>
-      &nbsp;&nbsp;&nbsp;&nbsp;total += item.price * item.quantity;<br>
-      &nbsp;&nbsp;}<br>
-      &nbsp;&nbsp;<span class="code-keyword">return</span> total.<span class="code-function">toFixed</span>(<span class="code-number">2</span>);<br>
-      }<br><br>
-      <span class="code-comment">// Configuration object</span><br>
-      <span class="code-keyword">const</span> config = {<br>
-      &nbsp;&nbsp;apiUrl: <span class="code-string">'https://api.example.com/v1'</span>,<br>
-      &nbsp;&nbsp;timeout: <span class="code-number">5000</span>,<br>
-      &nbsp;&nbsp;retries: <span class="code-number">3</span><br>
-      };
-    </div>
-    
-    <div class="sans-italic" style="margin-top: 16px; color: #666;">
-      Note: Code blocks use IBM Plex Mono for better readability of technical content.
-    </div>
-  </section>
-`;
+  ${fontStyles}
+  ${docsPage({
+    title: 'Monospace in context',
+    lede : html`The mono family carries code and any tabular figures. It is applied through
+      <code>--typography-code-inline-*</code> and <code>--typography-code-block-*</code> rather
+      than by naming the family directly.`,
+    children: html`
+      ${refSection({
+        name    : 'Inline code',
+        meta    : '--typography-code-inline-*',
+        children: html`
+          <div class="specimen">
+            <p style="font: var(--typography-body-regular-fontWeight) var(--typography-body-regular-fontSize)/var(--typography-body-regular-lineHeight) var(--typography-fontFamily-sans); margin: 0">
+              Apply a token with
+              <code
+                style="font-family: var(--typography-code-inline-fontFamily); font-size: var(--typography-code-inline-fontSize); background: var(--color-neutral-50); padding: 0 var(--spacing-4); border-radius: var(--radius-sm)"
+                >var(--color-blue-500)</code
+              >
+              rather than a raw hex value.
+            </p>
+          </div>
+        `
+      })}
+      ${refSection({
+        name    : 'Code block',
+        meta    : '--typography-code-block-*',
+        children: html`
+          <div class="specimen">
+            <pre
+              style="font-family: var(--typography-code-block-fontFamily); font-size: var(--typography-code-block-fontSize); line-height: var(--typography-code-block-lineHeight); margin: 0; overflow-x: auto"
+            >
+.button {
+  padding: var(--spacing-12) var(--spacing-20);
+  font-size: var(--typography-fontSize-base);
+  border-radius: var(--radius-md);
+}</pre
+            >
+          </div>
+        `
+      })}
+      ${refSection({
+        name    : 'Tabular figures',
+        meta    : 'font-variant-numeric: tabular-nums',
+        children: html`
+          <div class="specimen">
+            <table>
+              <caption>Tabular figures</caption>
+              <thead>
+                <tr>
+                  <th scope="col">Plan</th>
+                  <th scope="col">Devices</th>
+                  <th scope="col">Price</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr><td>Antivirus Plus</td><td class="num">3</td><td class="num">29.99</td></tr>
+                <tr><td>Internet Security</td><td class="num">10</td><td class="num">104.99</td></tr>
+                <tr><td>Ultimate Security</td><td class="num">25</td><td class="num">1109.99</td></tr>
+              </tbody>
+            </table>
+          </div>
+        `
+      })}
+    `
+  })}
+`;