Gradients

[elpuas]

How to use gradients on export default theme

[atanasster]

@elpuas - not sure what you mean.
There is a sx prop example using @theme-ui/color here: https://theme-ui.com/packages/color/#advanced-usage

If you want to have it in the theme by default for a component of yours, you can use the same code in the theme object as well.

[lachlanjc]

If you're looking to use a gradient on a component, you can use a functional value inside sx, like this:

sx={{
  backgroundImage: theme => `linear-gradient(to bottom, ${theme.colors.red}, ${theme.colors.orange})`
}}

Does that answer your question?

[elpuas]

Yeah, you're both right, on the example, there was a missing ',' so I was confused, but it is all cool now great product.