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} />