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

<Meta title="core/Colors" />

<ColorPalette>
  <ColorItem
    title="primary"
    subtitle="Primary"
    colors={{ primary500: colors.primary[500], primary400: colors.primary[400], primary300: colors.primary[300], primary200: colors.primary[200], primary100: colors.primary[100] }}
  />
  <ColorItem
    title="blue"
    subtitle="Primary"
    colors={{ blue500: colors.blue[500], blue300: colors.blue[300],blue100: colors.blue[100] }}
  />
  <ColorItem
    title="green"
    subtitle="Success"
    colors={{ green500: colors.green[500], green300: colors.green[300],green100: colors.green[100] }}
  />
  <ColorItem
    title="red"
    subtitle="Danger"
    colors={{ red500: colors.red[500], red300: colors.red[300],red100: colors.red[100] }}
  />
  <ColorItem
    title="yellow"
    subtitle="Warning"
    colors={{ yellow500: colors.yellow[500], yellow300: colors.yellow[300],yellow100: colors.yellow[100] }}
  />
  <ColorItem
    title="gray"
    subtitle="Gray"
    colors={{ 
      gray900 : colors.gray[900],
      gray800 : colors.gray[800],
      gray700 : colors.gray[700],
      gray600 : colors.gray[600],
      gray500 : colors.gray[500],
      gray400 : colors.gray[400],
      gray300 : colors.gray[300],
      gray200 : colors.gray[200],
      gray100 : colors.gray[100],
      gray050 : colors.gray[50],
   }}
  />
</ColorPalette>