text: import React from "react";
  import Token from "./token";
  import { benton, miller } from "../../src/styles/fonts";
  
  const Fonts = () => (
    <Token
      id="Fonts"
      title="Fonts"
      description="Use font tokens to set the font stack of an element."
      importPath={`import { benton, miller } from "styles/fonts";`}
      hasExample
    >
      <tr>
        <td><code>benton</code></td>
        <td><code>{benton.toString()}</code></td>
        <td>
          <span
            style={{
              fontFamily: benton,
              fontSize: "24px",
            }}
          >
            Benton Sans
          </span>
        </td>
      </tr>
  
      <tr>
        <td><code>miller</code></td>
        <td><code>{miller.toString()}</code></td>
        <td>
          <span
            style={{
              fontFamily: miller,
              fontSize: "24px",
            }}
          >
            Miller Daily
          </span>
        </td>
      </tr>
    </Token>
  );
  
  export default Fonts;
  