import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'
import { colors, shadows, gradients } from '@opencrvs/components/lib/colors'
import { Box } from '@opencrvs/components/lib/Box'
import styled from 'styled-components'

<Meta title="Styles/Colors" />

# Colors

<br />

## Palette

<ColorPalette>
  <ColorItem
    title="colors.primary"
    subtitle="Primary"
    colors={{
      primaryLighter: colors.primaryLighter,
      primaryLight: colors.primaryLight,
      primary: colors.primary,
      primaryDark: colors.primaryDark,
      primaryDarker: colors.primaryDarker
    }}
  />
  <ColorItem
    title="colors.purple"
    subtitle="Purple"
    colors={{
      purpleLighter: colors.purpleLighter,
      purpleLight: colors.purpleLight,
      purple: colors.purple,
      purpleDark: colors.purpleDark,
      purpleDarker: colors.purpleDarker
    }}
  />
  <ColorItem
    title="colors.orange"
    subtitle="Orange"
    colors={{
      orangeLighter: colors.orangeLighter,
      orangeLight: colors.orangeLight,
      orange: colors.orange,
      orangeDark: colors.orangeDark,
      orangeDarker: colors.orangeDarker
    }}
  />
  <ColorItem
    title="colors.red"
    subtitle="Red"
    colors={{
      redLighter: colors.redLighter,
      redLight: colors.redLight,
      red: colors.red,
      redDark: colors.redDark,
      redDarker: colors.redDarker
    }}
  />
  <ColorItem
    title="colors.green"
    subtitle="Green"
    colors={{
      greenLighter: colors.greenLighter,
      greenLight: colors.greenLight,
      green: colors.green,
      greenDark: colors.greenDark,
      greenDarker: colors.greenDarker
    }}
  />
  <ColorItem
    title="colors.blue"
    subtitle="Blue"
    colors={{
      blueLighter: colors.blueLighter,
      blueLight: colors.blueLight,
      blue: colors.blue,
      blueDark: colors.blueDark,
      blueDarker: colors.blueDarker
    }}
  />
  <ColorItem
    title="colors.teal"
    subtitle="Teal"
    colors={{
      tealLighter: colors.tealLighter,
      tealLight: colors.tealLight,
      teal: colors.teal,
      tealDark: colors.tealDark,
      tealDarker: colors.tealDarker
    }}
  />
  <ColorItem
    title="colors.yellow"
    subtitle="Yellow"
    colors={{
      yellowLighter: colors.yellowLighter,
      yellowLight: colors.yellowLight,
      yellow: colors.yellow,
      yellowDark: colors.yellowDark,
      yellowDarker: colors.yellowDarker
    }}
  />
  <ColorItem
    title="colors.grey"
    subtitle="Monochrome"
    colors={{
      white: colors.white,
      grey100: colors.grey100,
      grey200: colors.grey200,
      grey300: colors.grey300,
      grey400: colors.grey400,
      grey500: colors.grey500,
      grey600: colors.grey600
    }}
  />
  <ColorItem
    title="colors.opacity"
    subtitle="Translucent"
    colors={{
      opacity24: colors.opacity24,
      opacity54: colors.opacity54
    }}
  />
</ColorPalette>

## Application

<ColorPalette>
  <ColorItem
    title="colors.positive"
    subtitle="Status Green"
    colors={{
      positive: colors.positive,
      positiveDark: colors.positiveDark,
      positiveDarker: colors.positiveDarker
    }}
  />
  <ColorItem
    title="colors.neutral"
    subtitle="Status Orange"
    colors={{
      neutral: colors.neutral,
      neutralDark: colors.neutralDark,
      neutralDarker: colors.neutralDarker
    }}
  />
  <ColorItem
    title="colors.negative"
    subtitle="Status Red"
    colors={{
      negative: colors.negative,
      negativeDark: colors.negativeDark,
      negativeDarker: colors.negativeDarker
    }}
  />
  <ColorItem
    title="colors.background"
    subtitle="Background"
    colors={{
      background: colors.background
    }}
  />
</ColorPalette>