I'm using https://theme-ui.com/ to style my components. Everything so far as an experience has been splendid but I simply cannot make gradient values work. I have a button which border on hove should change. I have the following variant defined:
'&:hover': {
color: 'lightGraphite',
borderBottom: '1px solid',
borderBottomColor: '(linear-gradient(270deg, #FE9A8B 0%, #FD868C 40.85%, #F9748F 73.15%, #F78CA0 100%))'
}
When I open the application the border has gray color and in the dev tools I see property-invalide-value
or something like that.
How can I use gradient values within theme-ui configuration file?
If you want to use a gradient as the border color in CSS, see here: Gradient borders
This is what the top answer says:
Prooflink: http://www.webkit.org/blog/1424/css3-gradients/
Browser support: http://caniuse.com/#search=border-image
I don't think it's a theme UI issue here.