import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="owncast/Style Guide/Typography" />

## Body

<div style={{ fontSize: '1.2rem', fontFamily: 'var(--theme-text-body-font-family)' }}>
  The quick brown fox jumps over the lazy dog.
</div>

<Canvas
  style={{ color: 'var(--theme-text-secondary)', fontFamily: 'var(--theme-text-body-font-family)' }}
>
  {getComputedStyle(document.documentElement).getPropertyValue('--theme-text-body-font-family')}
</Canvas>

## Display

<div style={{ fontSize: '1.2rem', fontFamily: 'var(--theme-text-display-font-family)' }}>
  The quick brown fox jumps over the lazy dog.
</div>
<Canvas
  style={{
    color: 'var(--theme-text-secondary)',
    fontFamily: 'var(--theme-text-display-font-family)',
  }}
>
  {getComputedStyle(document.documentElement).getPropertyValue('--theme-text-display-font-family')}
</Canvas>