Doist/reactist

Introduce API to override styles in `Toast` component

pawelgrimm opened this issue ยท 0 comments

๐Ÿš€ Feature request

Motivation

The Toast component should expose a way to customize/override the style of Reactist components rendered within it. Right now, all styles are shared with the global styling.

Example

Let's say your app's content is primary displayed on a light background, but you want to have toast with a dark background. If you wanted to style TextLink differently on the light vs dark background, you couldn't easily do that.

Possible implementations

I see two ways to go about this:

  1. Expose a global toast class that consuming code could use to override CSS components within the toast:
    // In app code
    :global(.toastContainer) {
     	--reactist-text-link-idle-tint: var(--special-toast-text-link-color);
    }
  2. Expose separate CSS variables to certain supported styles (like we do with --reactist-toast-actionable-* CSS vars)
    // In Reactist's toast.module.css
    .toastContainer {
    	--reactist-text-link-idle-tint: var(--reactist-toast-text-link-idle-tint);
    }