css: Make background a theme-aware property

[benface]

Is your feature request related to a problem? Please describe.
I find it surprising and confusing that the bg shorthand can be set to a color name/key, but not background, as they read the same.

Describe the solution you'd like
I would like background to be a theme-aware property, so I can do sx={{ background: 'myCustomColorName' }}.

Describe alternatives you've considered
I can obviously use bg or backgroundColor. But once in a while, I may forget and use background, and be slightly annoyed when the color name I pass doesn’t get converted to the expected color value.

Additional context
I can send a PR for this if you (the maintainers) agree with the idea. Thank you!

[hasparus]

Yeah, I think that's a nice addition. I wouldn't try to parse complex background like "center / contain no-repeat url("logo.svg")" values anyway, but simply adding background to colors scale would be convenient.

[fcisio]

I have another great use case for this.
Making background theme-aware would allow setting gradients along with the colors in the theme 🔥

{
  primary: '#333',
  gradient: 'background: linear-gradient(#e66465, #9198e5);',
  ...
}

// sx={{ background: 'gradient' }}

[lachlanjc]

Eeh, I’m not in favor of supporting & parsing entire CSS declarations inside theme values. Let's only permit the usage of standard theme values here.

[fcisio]

Hey @lachlanjc ,
Sorry, bad copy/paste, I meant:

gradient: 'linear-gradient(#e66465, #9198e5)'

[lachlanjc]

Oh! Yes, that's cool with me. Semicolon-free is definitely the way to go haha

[hasparus]

🚀 Issue was released in v0.13.1 🚀