Color prop responsive type v3

[AlfonzAlfonz]

🐛 Bug Report

Since the original issue got closed and I'm unable to reopen it, I'm creating a new one. There is a problem with the type definition of a color prop because it combines the type of a color attribute prop and color utility prop. This means that only strings are valid inputs.

I'd gladly help to resolve this issue :)

To Reproduce

Use color prop with an object.

<x.a
  href="#"
  color={{
    _: 'indigo-500',
    hover: 'indigo-600',
    visited: { hover: 'indigo-900' },
  }}
>
  Link
</x.a>

Expected behavior

The color prop should accept objects with responsive/state values as described in docs. https://xstyled.dev/docs/hover-focus-other-states/

Link to repl or repo (highly encouraged)

https://codesandbox.io/s/xstyled-color-type-error-forked-v3kz2?file=/src/App.tsx

[pawelangelow]

I'm dealing with kind of the same problem related to the borderColor in my case. However, @AlfonzAlfonz I think your codebox is working as expected. What is the exact problem?

P.S. My problem was that the theme I'm using didn't define states, so reusing them from the defaultTheme (import { defaultTheme } from '@xstyled/emotion') did the work.

[AlfonzAlfonz]

@pawelangelow Yes, the code is working as intended, but the problem is with the type of color. Typescript doesn't accept an object as color and marks it as an error.