Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use built-in storybook typography component

Browse Source
This commit is contained in:
Gabe Kangas 2023-02-13 15:34:22 -08:00
parent af7a840b69
commit 81f2c4280d
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
1 changed files with 125 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
web/.storybook/stories-category-doc-pages/Typography.stories.mdx
View File

@ -1,29 +1,140 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Canvas, Meta, Story, Typeset, Source } from '@storybook/addon-docs';
<Meta title="owncast/Styles/Typography" />
## Body
export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
<div style={{ fontSize: '1.2rem', fontFamily: 'var(--theme-text-body-font-family)' }}>
The quick brown fox jumps over the lazy dog.
</div>
# Typography
These are the font families in use by Owncast.
---
export const bodyFont = {
type: {
primary: getComputedStyle(document.documentElement).getPropertyValue(
'--theme-text-body-font-family',
),
},
weight: {
regular: '400',
bold: '600',
extrabold: '800',
},
size: {
s1: 12,
s2: 14,
s3: 16,
m1: 20,
m2: 24,
m3: 28,
l1: 32,
l2: 40,
l3: 48,
},
};
## {bodyFont.type.primary.split(',')[0].replaceAll('"', '')}
### Everywhere but headings and titles.
<Typeset
fontSizes={[
Number(bodyFont.size.s1),
Number(bodyFont.size.s2),
Number(bodyFont.size.s3),
Number(bodyFont.size.m1),
Number(bodyFont.size.m2),
Number(bodyFont.size.m3),
Number(bodyFont.size.l1),
Number(bodyFont.size.l2),
Number(bodyFont.size.l3),
]}
fontWeight={bodyFont.weight.black}
sampleText={SampleText}
fontFamily={bodyFont.type.primary}
/>
## Usage
<Canvas
style={{ color: 'var(--theme-text-secondary)', fontFamily: 'var(--theme-text-body-font-family)' }}
columns={2}
withSource="open"
withToolbar
style={{ fontFamily: 'var(--theme-text-body-font-family)' }}
>
{getComputedStyle(document.documentElement).getPropertyValue('--theme-text-body-font-family')}
</Canvas>
## Display
<Source
language="css"
dark
format={true}
code={`
font-family: var(--theme-text-body-font-family);
`}
/>
export const displayFont = {
type: {
primary: getComputedStyle(document.documentElement).getPropertyValue(
'--theme-text-display-font-family',
),
},
weight: {
regular: '400',
bold: '600',
extrabold: '800',
},
size: {
s1: 12,
s2: 14,
s3: 16,
m1: 20,
m2: 24,
m3: 28,
l1: 32,
l2: 40,
l3: 48,
},
};
## {displayFont.type.primary.split(',')[0].replaceAll('"','')}
### Headings and titles.
<Typeset
fontSizes={[
Number(displayFont.size.s1),
Number(displayFont.size.s2),
Number(displayFont.size.s3),
Number(displayFont.size.m1),
Number(displayFont.size.m2),
Number(displayFont.size.m3),
Number(displayFont.size.l1),
Number(displayFont.size.l2),
Number(displayFont.size.l3),
]}
fontWeight={displayFont.weight.black}
sampleText={SampleText}
fontFamily={displayFont.type.primary}
/>
## Usage
<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)',
}}
columns={2}
withSource="open"
withToolbarstyle={{ fontFamily: 'var(--theme-text-display-font-family)' }}
>
{getComputedStyle(document.documentElement).getPropertyValue('--theme-text-display-font-family')}
</Canvas>
<Source
language="css"
dark
format={true}
code={`
font-family: var(--theme-text-display-font-family);
`}
/>