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