owncast/web/stories/Typography.stories.mdx
2022-07-10 17:28:03 -07:00

29 lines
872 B
Text

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>