Implement and document new design tokens

[with-heart]

This is an umbrella issue for tracking the work required to implement and document the tokens for the new design system.

Design tokens are design decisions, represented as data, that ensure systematically unified and cohesive product experiences.

See the "Design Tokens" page of the Adobe Spectrum docs for a more detailed explanation.

This issue covers the following tokens:

• [x] Colors
• [x] Typography
• [x] Spacing

As we come to agreement on the changes required for each token, a new issue will be created for each token containing all of the information a contributor will need to implement the token.

By the time we close this issue, we'll be left with a usable implementation of the tokens along with Storybook documentation for each!

Definition of done

This section describes what it means for a token to be implemented and documented.

• Update our Chakra theme with the new token
• Document the new token in Storybook
• Update existing components/designs to use the new tokens

Update our Chakra theme with the new token

One of the major benefits of Chakra is that its components are themeable. This means that we can modify our theme object with token changes and then use them throughout our Chakra-based components.

For example, adding a new color looks like this:

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',
    }
  }
})

Assuming this theme is passed to the ChakraProvider component, we now have access to the new color anywhere we can use a color-based prop:

<Text color="newColor.100" bg="newColor.900">Text with a new color</Text>

We'll need to make a similar effort for each token so that we can use it throughout our Chakra system.

Document the new token in Storybook

A new Storybook stories page should be created for each token. The page should serve as documentation of the new token so that contributors can understand the token by viewing this page.

For example, with the new color tokens, a Storybook page should be created to display the colors in a similar manner to the Figma colors grid:

Update existing components/designs to use the new tokens

Where it makes sense, existing components and page designs should be updated to use the new token.

[wchamberlain89]

Our Figma colors grid represents the full spectrum of colors for the Developer Dao design system. Our project currently is only using about 8 - 12 of these colors, Do we still want to implement the full range of colors in our system?

[wchamberlain89]

The full list I suppose lets us build aliases around the ones we're using. So we'd be able to narrow down the list later if we'd like