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

<Meta title="Documentation/Colours" />

# Theme Colours

<ColorPalette>
  <ColorItem
    title="theme.palette.common"
    subtitle="Black & white"
    colors={['#000000', '#FFFFFF']}
  />
  <ColorItem
    title="theme.palette.background"
    subtitle="Paper & default"
    colors={['#FFFFFF', '#FAFAFA']}
  />
  <ColorItem
    title="theme.palette.primary"
    subtitle="Light, main, dark & contrastText"
    colors={['#8FCAE7', '#007BC7', '#154273', '#FFFFFF']}
  />
  <ColorItem
    title="theme.palette.secondary"
    subtitle="Light, main, dark & contrastText"
    colors={['#F8F4C2', '#F9E11E', '#FFB612', '#000000']}
  />
  <ColorItem
    title="theme.palette.error"
    subtitle="Light, main, dark & contrastText"
    colors={['#E06056', '#D94034', '#D52B1E', '#FFFFFF']}
  />
    <ColorItem
    title="theme.palette.text"
    subtitle="Primary, secondary, disabled, hint"
    colors={['#222222', 'rgba(0, 0, 0, 0.54)', 'rgba(0, 0, 0, 0.38)', 'rgba(0, 0, 0, 0.38)']}
  />
</ColorPalette>

# SCSS Colours

<ColorPalette>
  <ColorItem
    title="Legacy Colours"
    subtitle="lightYellow, logoBlue, textBlack, black, white"
    colors={['#fdf6bb', '#154273', '#222222', '#000000', '#ffffff']}
  />
  <ColorItem
    title="Grey"
    subtitle="$grey 10, 20, 35, 75, 90, 100"
    colors={['#f3f3f3', '#e6e6e6', '#cccccc', '#999999', '#696969', '#535353']}
  />
    <ColorItem
    title="Light Blue"
    subtitle="$lightBlue 10, 20, 35, 75, 90, 100"
    colors={['#f4fafd', '#e9f4fa', '#d8edf7', '#abd7ed', '#9acfe9', '#8fcae7']}
  />
    <ColorItem
    title="Sky Blue"
    subtitle="$skyBlue 10, 20, 35, 75, 90, 100"
    colors={['#e5f0f9', '#c7e5f4', '#a6d1eb', '#409cd5', '#1988cc', '#007bc7']}
  />
    <ColorItem
    title="Dark Blue"
    subtitle="$darkBlue 10, 20, 35, 75, 90, 100"
    colors={['#e5f0f5', '#cce1eb', '#a6cadc', '#418eb4', '#1a77a5', '#01689b']}
  />
    <ColorItem
    title="Mint"
    subtitle="$mint 10, 20, 35, 75, 90, 100"
    colors={['#f1faf8', '#e4f6f0', '#cfefe6', '#98ddc8', '#83d6bd', '#76d2b6']}
  />
    <ColorItem
    title="Green"
    subtitle="$green 10, 20, 35, 75, 90, 100"
    colors={['#ebf3e6', '#d7e7ce', '#bad5aa', '#6ba549', '#4c9324', '#39870c']}
  />
    <ColorItem
    title="Yellow"
    subtitle="$yellow 10, 20, 35, 75, 90, 100"
    colors={['#f8f7d6', '#f8f4c2', '#f8f1a3', '#f9e751', '#f9e332', '#f9e11e']}
  />
    <ColorItem
    title="Dark Yellow"
    subtitle="$darkYellow 10, 20, 35, 75, 90, 100"
    colors={['#f9f2d5', '#f9ecc0', '#fae29f', '#fdc748', '#febd27', '#ffb612']}
  />
    <ColorItem
    title="Orange"
    subtitle="$orange 10, 20, 35, 75, 90, 100"
    colors={['#f6ebd3', '#f3debc', '#f0c999', '#e7923b', '#e37d17', '#e17000']}
  />
    <ColorItem
    title="Red"
    subtitle="$red 10, 20, 35, 75, 90, 100"
    colors={['#fbe9e8', '#f7d5d2', '#f2bfbb', '#e06056', '#d94034', '#d52b1e']}
  />
    <ColorItem
    title="Ruby Red"
    subtitle="$rubyRed 10, 20, 35, 75, 90, 100"
    colors={['#f3e0dd', '#efc7cf', '#e8a2b9', '#d63e81', '#cf186b', '#ca005d']}
  />
</ColorPalette>