import { Meta, Typeset } from "@storybook/blocks";
import { tokens } from "../style-dictionary/dist/tokens";

<Meta title="Styles/Typography" />

export const fontSizes = [
  tokens.fontSize.h1,
  tokens.fontSize.h2,
  tokens.fontSize.h3,
  tokens.fontSize.h4,
  tokens.fontSize.h5,
  tokens.fontSize.h6,
].map((size) => Number(size.replace("px", "")));

export const sampleText = "The quick brown fox jumps over the lazy dog.";

# Typography

## Sans Serif Font – Neue Montreal

### Regular

<Typeset
  fontSizes={fontSizes}
  fontWeight={tokens.fontWeight.regular}
  fontFamily={tokens.type.sans.split(", ")}
  sampleText={sampleText}
/>

### Medium

<Typeset
  fontSizes={fontSizes}
  fontWeight={tokens.fontWeight.medium}
  fontFamily={tokens.type.sans.split(", ")}
  sampleText={sampleText}
/>

### Bold

<Typeset
  fontSizes={fontSizes}
  fontWeight={tokens.fontWeight.bold}
  fontFamily={tokens.type.sans.split(", ")}
  sampleText={sampleText}
/>

## Serif Font – Galaxie Copernicus

### Bold

<Typeset
  fontSizes={fontSizes}
  fontFamily={tokens.type.serif.split(", ")}
  sampleText={sampleText}
/>

## Monospace Font

### Regular

<Typeset
  fontSizes={fontSizes}
  fontFamily={tokens.type.mono.split(", ")}
  sampleText={sampleText}
/>