import {
  Meta,
  Title,
  Subtitle,
  ColorPalette,
  ColorItem,
} from '@storybook/blocks'

import * as colors from '../styles/colors'

<Meta title="Design system/Colors" />

<Title>Colors</Title>

<ColorPalette>
  {Object.keys(colors).map((key) => {
    const skipKeys = ['colors', 'tokens', 'Old']
      if (!skipKeys.includes(key)) {
      return Object.keys(colors[key]).map((modeKey) => {
          return <ColorItem title={modeKey} colors={colors[key][modeKey]} />
        })
    }
    return null
  })}
</ColorPalette>
