import {
  Meta,
  Story,
  Canvas,
  ColorPalette,
  ColorItem,
} from '@storybook/addon-docs';
import color from '../colors';
import PageHeader from 'blocks/PageHeader';

<Meta title="Foundation ✨/Colors" />

<PageHeader type="foundation">Colors</PageHeader>

All of our colors are designed to create a clear interface, support the hierarchy of information on the page and bring attention to the most important elements. Both the core and additional colors are built with base and supporting colors – dark and light.

Base colors should be applied most frequently across our UI elements whereas supporting colors are recommended to use as the colors for surfaces, backgrounds (light tones) and typography (dark tones).

## Full-color palette

Our color palette consists of black, white, gray, blue, green, purple, red, yellow and their variants. These colors represent our visual brand identity.

<ColorPalette>
  {color.fullColorPalette.map(({name, variable, hex}) => (
    <ColorItem
      key={name}
      title={name}
      subtitle={variable}
      colors={[`#${hex}`]}
    />
  ))}
</ColorPalette>

## Text colors

Below are colors that should be used for texts.

<ColorPalette>
  {color.text.map(({name, variable, hex}) => (
    <ColorItem
      key={name}
      title={name}
      subtitle={variable}
      colors={[`#${hex}`]}
    />
  ))}
</ColorPalette>

## Icon colors

Below are colors that should be used for icons.

<ColorPalette>
  {color.icon.map(({name, variable, hex}) => (
    <ColorItem
      key={name}
      title={name}
      subtitle={variable}
      colors={[`#${hex}`]}
    />
  ))}
</ColorPalette>
