Values passed to transform functions aren't resolved from the theme first about xstyled HOT 2 CLOSED

const theme = {
  transformers: {
    // In case you define your transformers outside your theme:
    // ===================================================
    // The transformer function is called with 2 arguments,
    // the second argument is an object with variants
    // and in this case your color tokens.
    color: (value, { variants }) => {
      const matches = value.match(/(.*)\.light/);
      if (!matches) return value;
      // this also works ⬇️
      // return lighten(0.2, variants[matches[1]] || matches[1]);
      return lighten(0.2, theme.colors[matches[1]] || matches[1]);
    }
  },
  colors: {
    primary: "#1975f8",
  }
};