Add new colors to Chakra theme and document them in Storybook

[with-heart]

This issue is for adding the new colors to our Chakra theme and creating a documentation page for them in Storybook.

You can see the new colors and their hex codes in our new design system Figma, but here's a pic of them:

There are a few steps required to add these colors and document them:

• Add the new colors to our theme object (found in packages/client/styles/theme.tsx)

Here's an example of what adding a new color to the theme would look like:

import {extendTheme} from '@chakra-ui/react'

export const theme = extendTheme({
  colors: {
    newColor: {
      100: '#fff',
      200: '#ddd',
      300: '#bbb',
      400: '#999',
      500: '#777',
      600: '#555',
      700: '#333',
      800: '#111',
      900: '#000',
    }
  }
})

• Create a new Storybook stories page and story that renders the colors in a grid similar to the Figma design system colors grid

[4gnle]

already worked on at #166 only need to finish the Storybook setup

[4gnle]

Close with #165