Theme tokens not working

[imadatyatalah]

My stitches config:

import { createCss } from "@stitches/react";

export const {
  styled,
  css,
  global,
  keyframes,
  getCssString,
  theme,
} = createCss({
  theme: {
    colors: {
      primary600: "#49A47A",
    },
  },
  media: {},
  utils: {},
  prefix: "",
  insertionMethod: "append | prepend | () => {}",
  themeMap: {},
});

My Button component (Not working until I replace $primary600 with it's real value):

import { styled } from "../../stitches.config";

const StyledButton = styled("button", {
  backgroundColor: "$primary600",
});

Any help?

[peduarte]

A few things:

The config you're passing in is a copy/paste from the docs which isn't really a recommended config. It's more to show the keys available.

As a result of that you're passing in an empty "themeMap" object, so that's essentially removing all the mapping between properties and tokens.

Also, the insertion method needs to be one of the documented options or left out completely.

I'll improve the docs to make it clearer.

Remove these keys and other keys you're not making use of and it should work fine.

PS: for future reference please create issues instead of discussions for things like this. Thanks!

[imadatyatalah]

I tried to do what you've said and now it's working fine.
I've created a discussion because I knew the problem is from me, Thank you so much.