import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';


<Meta title="Foundations / Colors" />

<div className="sb-doc">
# Colors

<p className='excerpt'>You'll find all the official Ghost colors and more in Tailwind, but here's a list of them in case you want to use them elsewhere.</p>

<ColorPalette>
  <ColorItem
    title="Primary colors"
    colors={{
        Green: '#30CF43',
        Black: '#15171A',
        White: '#FFFFFF'
    }}
  />
<ColorItem
    title="Secondary colors"
    colors={{
        Lime: '#B5FF18',
        Blue: '#14B8FF',
        Purple: '#8E42FF'
    }}
  />
<ColorItem
    colors={{
        Yellow: '#FFB41F',
        Red: '#F50B23',
        Pink: '#FB2D8D'
    }}
  />
<ColorItem
    title="Greys"
    colors={{
        50: '#FAFAFB',
        100: '#F4F5F6',
        200: '#EBEEF0',
        300: '#DDE1E5',
        400: '#CED4D9'
    }}
    />
<ColorItem
    colors={{
        500: '#AEB7C1',
        600: '#95A1AD',
        700: '#7C8B9A',
        800: '#626D79',
        900: '#394047',
    }}
    />
</ColorPalette>

</div>