import {
  Meta,
  ColorPalette,
  ColorItem,
  Typeset,
} from '@storybook/addon-docs/blocks';

import { theme } from '@vegaprotocol/tailwindcss-config';

<Meta title="Primitives/Colors" />

# Primitives

This project uses Tailwindcss so a lot of colour props are passed in as CSS classes that
Tailwind applies styling to i.e. `text-blue-500` to use the primary blue. You can find the
full colour palette [here](https://tailwindcss.com/docs/customizing-colors/#default-color-palette).

## Colours

### Shared

<ColorPalette>
  <ColorItem
    title="theme.color.white"
    subtitle="White"
    colors={theme.colors.white}
  />
  <ColorItem
    title="theme.color.black"
    subtitle="Black"
    colors={theme.colors.black}
  />
  <ColorItem
    title="theme.color.blue"
    subtitle="Blue"
    colors={[theme.colors.blue]}
  />
  <ColorItem
    title="theme.color.coral"
    subtitle="Coral"
    colors={[theme.colors.coral]}
  />
  <ColorItem
    title="theme.color.orange"
    subtitle="Orange"
    colors={[theme.colors.orange]}
  />
  <ColorPalette>
    <ColorItem
      title="theme.color.selected"
      subtitle="Selected"
      colors={[theme.colors.selected]}
    />
  </ColorPalette>
</ColorPalette>

### Vega

<ColorPalette>
  <ColorItem
    title="theme.color.vega"
    subtitle="Vega colors"
    colors={theme.colors.vega}
  />
</ColorPalette>

### Intent

<ColorPalette>
  <ColorItem
    title="theme.color.danger"
    subtitle="danger"
    colors={[theme.colors.danger]}
  />
</ColorPalette>
<ColorPalette>
  <ColorItem
    title="theme.color.warning"
    subtitle="warning"
    colors={[theme.colors.warning]}
  />
</ColorPalette>
<ColorPalette>
  <ColorItem
    title="theme.color.success"
    subtitle="success"
    colors={[theme.colors.success]}
  />
</ColorPalette>

### Background

<ColorPalette>
  <ColorItem
    title="theme.color.backgroundColor"
    subtitle="Intent backgroundColor"
    colors={{
      black: theme.colors.black.DEFAULT,
      white: theme.colors.white.DEFAULT,
      danger: theme.colors['danger-bg'],
    }}
  />
</ColorPalette>
