caroso1222 / notyf

👻 A minimalistic, responsive, vanilla JavaScript library to show toast notifications.

Home Page:https://carlosroso.com/notyf/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Custom background colors not accepting gradients

caroso1222 opened this issue · comments

The following config won't properly work:

const notyf = new Notyf({
  types: [
    {
      type: 'custom',
      backgroundColor: 'linear-gradient(45deg, #e541f9, #0aa0ce)'
    }
  ]
});

This is because we're setting the CSS property backgroundColor instead of setting background. Linear gradients are considered to be images and, as such, should be rendered with background-image or the shorthand background.

I think the right way to do this is to introduce a new prop background and deprecate backgroundColor.

This won't be considered as a breaking change as background-color is contained within background

background: [  <background-color>    ||  <background-image>       ||
               <background-repeat>   ||  <background-attachment>  ||
               <background-position>
            ]   |   inherit ;