import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
import '../../../../css/style.css';

<Meta title="Base/Colors" />

<ColorPalette>
  <ColorItem
    title="Primary"
    subtitle=""
    colors={['hsla(var(--clr-spot-1))']}
  />
  <ColorItem
    title="secondary"
    subtitle=""
    colors={['hsla(var(--clr-spot-2))']}
  />
  <ColorItem
    title="Zebra"
    subtitle="Black and white"
    colors={[
      'hsla(var(--clr-black))',
      'hsla(var(--clr-white))'
    ]}
  />
  <ColorItem
    title="Text"
    subtitle=""
    colors={{
      Text: 'hsla(var(--clr-text))',
      headings: 'hsla(var(--clr-heading))',
    }}
  />
  <ColorItem
    title="Gray"
    subtitle=""
    colors={[
      'hsla(var(--clr-gray-light-1))',
      'hsla(var(--clr-gray-light-2))',
      'hsla(var(--clr-gray-light-3))',
      'hsla(var(--clr-gray))',
    ]}
  />
  <ColorItem
    title="Success"
    subtitle="Messages and forms"
    colors={[
      'hsla(var(--clr-success))',
      'hsla(var(--clr-success--dark))',
    ]}
  />
  <ColorItem
    title="Warning"
    subtitle="Messages and forms"
    colors={[
      'hsla(var(--clr-warning))',
      'hsla(var(--clr-warning--dark))',
    ]}
  />
  <ColorItem
    title="Error"
    subtitle="Messages and forms"
    colors={[
      'hsla(var(--clr-error))',
      'hsla(var(--clr-error--dark))',
    ]}
  />
</ColorPalette>
