You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
2.4 KiB
128 lines
2.4 KiB
import { Canvas, Meta, Story } from '@storybook/addon-docs'; |
|
import { Color, ColorRow } from './Color'; |
|
import { Image, ImageRow } from './ImageAsset'; |
|
|
|
import Logo from '../assets/images/logo.svg'; |
|
import FediverseColor from '../assets/images/fediverse-color.png'; |
|
import FediverseBlack from '../assets/images/fediverse-black.png'; |
|
import Moderator from '../assets/images/moderator.svg'; |
|
import IndieAuth from '../assets/images/indieauth.png'; |
|
import IsBot from '../assets/images/bot.svg'; |
|
|
|
<Meta title="owncast/Style Guide" /> |
|
|
|
<style>{` |
|
|
|
|
|
`}</style> |
|
|
|
export const images = [ |
|
{ |
|
src: Logo, |
|
name: 'Logo', |
|
}, |
|
{ |
|
src: FediverseColor, |
|
name: 'Fediverse Color', |
|
}, |
|
{ |
|
src: FediverseBlack, |
|
name: 'Fediverse Black', |
|
}, |
|
{ |
|
src: Moderator, |
|
name: 'Moderator', |
|
}, |
|
{ |
|
src: IndieAuth, |
|
name: 'IndieAuth', |
|
}, |
|
{ |
|
src: IsBot, |
|
name: 'Bot Flag', |
|
}, |
|
]; |
|
|
|
# Colors |
|
|
|
<Story name="Colors"></Story> |
|
|
|
<ColorRow colors={['theme-primary-color', 'theme-text-color-secondary']} /> |
|
|
|
## Text |
|
|
|
<ColorRow colors={['theme-text-color', 'theme-text-color-secondary', 'theme-link-color']} /> |
|
|
|
## Backgrounds |
|
|
|
<ColorRow colors={['theme-background', 'theme-background-secondary', 'popover-background']} /> |
|
|
|
## 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', |
|
]} |
|
/> |
|
|
|
# Font |
|
|
|
[Inter font](https://rsms.me/inter/) |
|
|
|
<Story name="Fonts"> |
|
<Canvas style={{ color: 'var(--theme-text-color-secondary)' }}> |
|
{getComputedStyle(document.documentElement).getPropertyValue('--theme-font-family')} |
|
</Canvas> |
|
</Story> |
|
|
|
# Images |
|
|
|
<Story name="Images and Icons"></Story> |
|
|
|
<ImageRow images={images} />
|
|
|