Access theme tokens from 'complex' background values

[Eric]

Add support for accessing theme tokens when using more complex background values (gradients, multiple backgrounds, etc). It works fine for simple background colors.

// ✅
background="$color1"
// ❌
background="linear-gradient(direction, $color1, $color2 75%, $color3)"

Currently the raw string will be output as invalid CSS, but it should output the transformed token values. Note: This behavior can be accomplished with the function syntax, but it would be great to support both!

background={theme => `linear-gradient(direction, ${theme.colors.color1}, ${theme.colors.color2} 75%, ${theme.colors.color3})`}

See https://codesandbox.io/s/system-props-gradient-y3mou?file=/index.tsx for example case.