Token types aren't getting mapped

[danielvaughn]

Bug report

Describe the bug

When using color tokens, the mapping function seems to leave out the colors- portion of the string, though perhaps I'm reading the documentation incorrectly.

To Reproduce

1. Use a color token in stitches.config:

   export const { styled } = createCss({
   theme: {
   colors: {
     brand: 'purple',
   },
   },
   })

2. Use the styled function in a component. Observe that the color is not applied:

   
   const StyledButton = styled('button', {
   backgroundColor: '$brand',
   })

const Button = () => Hello World

3. Update the token reference by appending `colors-`. Observe that now the color is applied:  

const StyledButton = styled('button', { backgroundColor: '$colors-brand', })

const Button = () => Hello World

## Expected behavior

Given the documentation on [this page](https://stitches.dev/docs/tokens), I would expect that `$brand` would apply the purple background to the button.

## Screenshots

Not applicable

## System information

- OS: Mac
- Browser: Chrome
- Version of Stitches: 0.1.9
- Version of Node.js: v14.8.0

## Additional context

What makes me think this is a stitches issue rather than an implementation error is that I can see that the css variable in the browser console is `--colors-brand: purple;`. So either (a) I shouldn't be nested `brand` underneath the `colors` field in the theme config, or `colors-` should be getting applied to the styles under the hood.

[rafgraph]

Hi, I created a codesandbox and I'm unable to reproduce the issue: https://codesandbox.io/s/zealous-ptolemy-2qv7r?file=/src/App.tsx

Can you make edits to the sandbox to reproduce?

[Pipas]

I'm also experiencing this issue. I have only just started porting some of our old components to stitches and all the theme tokens I crated in createCss appear in the browser prefixed with their respective type (E.g. --colors-primary and --fontSizes-body) but the rules applied to the component don't have those prefixes (E.g. font-size: var(--body); and background-color: var(--primary);).

As I said I'm completely new to stitches and I'm not really sure how to reproduce this since I just followed the Getting started section of the documentation.

I'm running on linux, the stitches version is ^0.1.9 and node version is v12.7.0.

[Pipas]

After some trial and error I've found out my problem was related with leaving the themeMap option on my createCss as an empty object (themeMap: {},), after commenting out that line everything works as expected.

I'm still not entirely sure what the themeMap does I simply copied the stitches.config snipped from the docs

[peduarte]

@Pipas hey, thanks for that, I'll update the docs to make it more clear. There's a note already but I think its probably too hidden:

[danielvaughn]

This was my issue as well - looks to be resolved on my end when I merge with defaultThemeMap. Thank you!