Transparency makes toast text unreadable

[tv42]

This is easy to demonstrate using https://mzohaibqc.github.io/svelte-toasts/

Select light theme. Adjust window / text size so that theme etc selection comes close to right edge of window. Click "Show Toast" enough times to make toasts overlap the radio buttons.

[tv42]

Looks like you're using transparency to lighten a color: rgba(225, 29, 72, 0.2) Might I suggest rgb(249, 210, 218) instead? And the same for all the other uses.

[tv42]

Workaround:

<ToastContainer placement="bottom-right" let:data>
  <!--
    Workaround unreadable transparency
    https://github.com/mzohaibqc/svelte-toasts/issues/7
  -->
  <div style="background-color: white">
    <FlatToast {data} />
  </div>
</ToastContainer>

[dmoebius]

The workaround works fine, thanks! :) But it would be better to have an extra 'opacity' property for this.