mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-22 04:40:37 +03:00
Code Issues Projects Releases Packages Wiki Activity

Update colors and typography stories

Browse source
This commit is contained in:
Gabe Kangas 2022-07-10 17:28:03 -07:00
parent 6b45715724
commit 0a5f183c2d
No known key found for this signature in database
GPG key ID: 9A56337728BC81EA
3 changed files with 25 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
web/stories/Colors.stories.mdx
View file

@ -10,17 +10,13 @@ and get reflected here as they change.
Toggle dark mode on and off in the above toolbar to see how these colors look on a dark vs. light background. Toggle dark mode on and off in the above toolbar to see how these colors look on a dark vs. light background.
## Key Colors
<ColorRow colors={['theme-primary-color', 'theme-text-color-secondary']} />
## Text ## Text
<ColorRow colors={['theme-text-color', 'theme-text-color-secondary', 'theme-link-color']} /> <ColorRow colors={['theme-text-primary', 'theme-text-secondary']} />
## Backgrounds ## Backgrounds
<ColorRow colors={['theme-background', 'theme-background-secondary', 'popover-background']} /> <ColorRow colors={['theme-background-primary', 'theme-background-secondary']} />
## User Colors ## User Colors
@ -36,57 +32,3 @@ Toggle dark mode on and off in the above toolbar to see how these colors look on
'theme-user-colors-8', 'theme-user-colors-8',
]} ]}
/> />
## Status
<ColorRow
colors={['theme-success-color', 'theme-info-color', 'theme-warning-color', 'theme-error-color']}
/>
## Gray
<ColorRow
colors={[
'color-owncast-gray-100',
'color-owncast-gray-300',
'color-owncast-gray-500',
'color-owncast-gray-700',
'color-owncast-gray-900',
]}
/>
## Purple
<ColorRow
colors={[
'color-owncast-purple-100',
'color-owncast-purple-300',
'color-owncast-purple-500',
'color-owncast-purple-700',
'color-owncast-purple-900',
]}
/>
## Green
<ColorRow
colors={[
'color-owncast-green-100',
'color-owncast-green-300',
'color-owncast-green-500',
'color-owncast-green-700',
'color-owncast-green-900',
]}
/>
## Orange
<ColorRow
colors={[
'color-owncast-orange-100',
'color-owncast-orange-300',
'color-owncast-orange-500',
'color-owncast-orange-700',
'color-owncast-orange-900',
]}
/>

28
web/stories/Typography.stories.mdx
View file

@ -2,12 +2,28 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta title="owncast/Style Guide/Typography" /> <Meta title="owncast/Style Guide/Typography" />
# Font ## Body
[Inter font](https://rsms.me/inter/) <div style={{ fontSize: '1.2rem', fontFamily: 'var(--theme-text-body-font-family)' }}>
The quick brown fox jumps over the lazy dog.
</div>
## TODO: List out the different text styles. <Canvas
style={{ color: 'var(--theme-text-secondary)', fontFamily: 'var(--theme-text-body-font-family)' }}
<Canvas style={{ color: 'var(--theme-text-color-secondary)' }}> >
{getComputedStyle(document.documentElement).getPropertyValue('--theme-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> </Canvas>

2
web/stories/preview.scss
View file

@ -1,4 +1,4 @@
html, html,
body { body {
font-family: var(--theme-font-family); font-family: var(--theme-text-body-font-family);
} }