import { Meta, Typeset } from '@storybook/addon-docs/blocks'

<Meta title='General/Style Guide/Typography' />

export const typography = {
  type: {
    primary: '"Wix Madefor Display", sans-serif',
  },
  weight: {
    regular: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
  },
  size: {
    s1: '10px',
    s2: '12px',
    s3: '14px',
    s4: '16px',
    s5: '18px',
    s6: '22px',
  },
}

# Typography

**Font:** "Wix Madefor Display", sans-serif

**Sizes:** 10px, 12px, 14px, 16px, 18px, 22px

**Weights:** 400 (regular), 500 (medium), 600 (semibold), 700 (bold)

<Typeset
  fontSizes={[
    typography.size.s1,
    typography.size.s2,
    typography.size.s3,
    typography.size.s4,
    typography.size.s5,
    typography.size.s6,
  ]}
  fontWeight={typography.weight.regular}
  sampleText='Pattern Regular Font Weight'
  fontFamily={typography.type.primary}
/>

<Typeset
  fontSizes={[
    typography.size.s1,
    typography.size.s2,
    typography.size.s3,
    typography.size.s4,
    typography.size.s5,
    typography.size.s6,
  ]}
  fontWeight={typography.weight.medium}
  sampleText='Pattern Medium Font Weight'
  fontFamily={typography.type.primary}
/>

<Typeset
  fontSizes={[
    typography.size.s1,
    typography.size.s2,
    typography.size.s3,
    typography.size.s4,
    typography.size.s5,
    typography.size.s6,
  ]}
  fontWeight={typography.weight.semibold}
  sampleText='Pattern Semibold Font Weight'
  fontFamily={typography.type.primary}
/>

<Typeset
  fontSizes={[
    typography.size.s1,
    typography.size.s2,
    typography.size.s3,
    typography.size.s4,
    typography.size.s5,
    typography.size.s6,
  ]}
  fontWeight={typography.weight.bold}
  sampleText='Pattern Bold Font Weight'
  fontFamily={typography.type.primary}
/>