Toast background colors

[timgavin]

The toasts don't stand out on my site at all - they get lost in the background and don't pop. I would love to add background colors and my own icons. Would it be possible to allow class and icon attributes like other components?

If not, what about adding a class name to each variant? It's not consistent with the rest of the library, but something as simple as this would do the trick I think

<div class="flux-toast-success">
    ...
</div>

And then we can style it in CSS

.flux-toast-success {
    background: var(--color-green-600);
}

[jeffchown]

@timgavin When I call Flux::toast('Test toast', variant: 'success') I get markup that includes data-variant="success" data-flux-toast-dialog

Have you tried CSS to target these?

[timgavin]

Good suggestion. It's pretty hacky, but it does work. Should be easier (and consistent) though; we should be able to add css and change the icons like the other components. And if Caleb changes from zinc to another color it's gonna break. 🤷‍♂️

[data-flux-toast-dialog][data-variant='success'] .text-zinc-800,
[data-flux-toast-dialog][data-variant='success'] .text-zinc-500 {
    color: white !important;
}

[data-flux-toast-dialog][data-variant='success'] svg {
    color: white !important;
}

[data-variant='success'] > div {
    background-color: var(--color-green-500);
}

[MOA-TI]

This is my solution...

´´´
[data-flux-toast-dialog][data-variant="info"] div {
@apply bg-blue-100! text-blue-800!;
}

[data-flux-toast-dialog][data-variant="success"] div {
@apply bg-green-200!;
}

[data-flux-toast-dialog][data-variant="warning"] div {
@apply bg-yellow-200!;
}

[data-flux-toast-dialog][data-variant="danger"] div {
@apply bg-red-200!;
}
´´´

[jeffchown]

Perfect, @MOA-TI Thanks.

[jeffchown]

@MOA-TI Some additional utility classes will be needed for dark mode text and icon colors. I'll post mine when I have time to test them.

[jeffchown]

@MOA-TI Here's my version of your CSS with the dark: mode overrides included:

[data-flux-toast-dialog][data-variant="success"] div {
    @apply bg-green-200! text-green-700! dark:text-green-700!;

    & > div > div > svg {
        @apply text-green-600! dark:text-green-600!;
    }
}

[data-flux-toast-dialog][data-variant="warning"] div {
    @apply bg-yellow-200! text-amber-500! dark:text-amber-500!;

    & > div > div > svg {
        @apply text-amber-500! dark:text-amber-500!;
    }
}

[data-flux-toast-dialog][data-variant="danger"] div {
    @apply bg-red-200! text-red-700! dark:text-red-700!;

    & > div > div > svg {
        @apply text-red-600! dark:text-red-600!;
    }
}

[MOA-TI]

Thanks for the idea!!

BTW why do you use an amber icon color on success toast for dark mode? Have you tried to replace "dark:text-amber-500!;" by "dark:text-green-700!;". It looks great for dark mode, too...

[jeffchown]

You're welcome! Oops! typo. Just updated it :)

[joewardpr]

The color set supported by badges is great. It would be awesome for toast as it's very important for them to visually capture the eye, and not blend into the color scheme.

[jeffchown]

@joewardpr I like the flux:badge colours as well. Here's my version of the toast CSS using the solid badge colours and sky for the default variant toast - might still need a little 'tweaking', but it's a starting point:

[data-flux-toast-dialog][data-variant=""] div {
    @apply text-white! dark:text-white! bg-sky-500! dark:bg-sky-600! border-sky-500! dark:border-sky-600!;
}
[data-flux-toast-dialog][data-variant=""] div button,
[data-flux-toast-dialog][data-variant=""] div svg {
    @apply text-white! dark:text-white! bg-sky-500! hover:bg-sky-500! dark:bg-sky-600! dark:hover:bg-sky-600!;
}

[data-flux-toast-dialog][data-variant="success"] div {
    @apply text-white! dark:text-white! bg-green-500! dark:bg-green-600! border-green-500! dark:border-green-600!;
}
[data-flux-toast-dialog][data-variant="success"] div button,
[data-flux-toast-dialog][data-variant="success"] div svg {
    @apply text-white! dark:text-white! bg-green-500! hover:bg-green-500! dark:bg-green-600! dark:hover:bg-green-600!;
}

[data-flux-toast-dialog][data-variant="warning"] div {
    @apply text-white! dark:text-zinc-950! bg-yellow-500! dark:bg-yellow-400! border-yellow-500! dark:border-yellow-400!;
}
[data-flux-toast-dialog][data-variant="warning"] div button,
[data-flux-toast-dialog][data-variant="warning"] div svg {
    @apply text-white! dark:text-zinc-950! bg-yellow-500! hover:bg-yellow-500! dark:bg-yellow-400! dark:hover:bg-yellow-400!;
}

[data-flux-toast-dialog][data-variant="danger"] div {
    @apply text-white! dark:text-white! bg-red-500! dark:bg-red-600! border-red-500! dark:border-red-600!;
}
[data-flux-toast-dialog][data-variant="danger"] div button,
[data-flux-toast-dialog][data-variant="danger"] div svg {
    @apply text-white! dark:text-white! bg-red-500!  hover:bg-red-500! dark:bg-red-600! dark:hover:bg-red-600!;
}

[lcallif]

Ummmm, what file are you putting this into ?

[joshhanley]

@lcallif the styles from @jeffchown would go in your app.css

[joewardpr]

Awesome! Thank you, Jeff! :)

[jeffchown]

You're welcome @joewardpr

[doti-dominic]

I’ve also made a version for inverted toasts, which should really make them pop! :)

[data-flux-toast-dialog] div {
    @apply text-white! dark:text-white! bg-zinc-900! dark:bg-zinc-600! border-black! dark:border-zinc-500!;
}

[data-flux-toast-dialog][data-variant="success"] div svg:not(:where(button *)) {
    @apply text-green-500! dark:text-green-500!;
}

[data-flux-toast-dialog][data-variant="warning"] div svg:not(:where(button *)) {
    @apply text-yellow-500! dark:text-yellow-500!;
}

[data-flux-toast-dialog][data-variant="danger"] div svg:not(:where(button *)) {
    @apply text-red-500! dark:text-red-400!;
}

Dark Mode:

Light Mode:

[ghabriel25]

See here the showcase #2535