import { Meta, Typeset } from "@storybook/addon-docs";
import { typography } from "../theme/tokens";

<Meta title="Tokens/Typography" />

export const SampleText =
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";

# Typography

**Font:** Roboto

**Weight:** 400(regular)

**Sizes:** R50, R75, R100, R200, R300, R400, R500, R600, R700, R800, R900

<Typeset
  fontSizes={Object.values(typography.fontSizes).map((size) =>
    Number(size.replace("px", ""))
  )}
  fontWeight={typography.fontWeights.regular}
  sampleText={SampleText}
  fontFamily={typography.fontFamily}
/>

<hr />

**Font:** Roboto

**Weight:** 500(medium)

**Sizes:** M50, M75, M100, M200, M300, M400, M500, M600, M700, M800, M900

<Typeset
  fontSizes={Object.values(typography.fontSizes).map((size) =>
    Number(size.replace("px", ""))
  )}
  fontWeight={typography.fontWeights.medium}
  sampleText={SampleText}
  fontFamily={typography.fontFamily}
/>

<hr />

**Font:** Roboto

**Weight:** 700(bold)

**Sizes:** B50, B75, B100, B200, B300, B400, B500, B600, B700, B800, B900

<Typeset
  fontSizes={Object.values(typography.fontSizes).map((size) =>
    Number(size.replace("px", ""))
  )}
  fontWeight={typography.fontWeights.bold}
  sampleText={SampleText}
  fontFamily={typography.fontFamily}
/>
