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.
88 lines
2.3 KiB
88 lines
2.3 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} /> |
|
|
|
|
|
|
|
|
|
|
|
|