129 lines
2.4 KiB
Plaintext
129 lines
2.4 KiB
Plaintext
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} />
|