mirror of
https://github.com/owncast/owncast.git
synced 2024-11-28 19:19:06 +03:00
88 lines
2.3 KiB
Text
88 lines
2.3 KiB
Text
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} />
|
|
|
|
|
|
|
|
|
|
|