@gluonjs/molecules


@gluonjs/molecules / packages/molecules/src / toastStyles

Variable: toastStyles

const toastStyles: CSSStyleSheet

Example

Adopt the separately tree-shakable Toast stylesheet:

ts
import { Toast, ToastViewport, createToastController, toastStyles, type ToastProps, type ToastRequest, type ToastContent, type ToastController, type ToastControllerOptions, type ToastRecord, type ToastViewportProps, type ToastAnnouncement, type ToastAttributes, type ToastDismissLabel, type ToastPauseOwner, type ToastTone, type ToastViewportAttributes } from '@gluonjs/molecules';
const options: ToastControllerOptions = { maxVisible: 3, maxQueue: 8, minimumDuration: 5000 };
const controller: ToastController = createToastController(options);
controller.activate();
const content: ToastContent = { title: 'Added to bag', children: 'A configured product is ready.', tone: 'success', announcement: 'polite' as ToastAnnouncement };
const request: ToastRequest = { id: 'bag-added', ...content };
const props: ToastProps = { id: 'bag-added', ...content };
const record: ToastRecord = { ...request, id: request.id!, timeout: 5000 };
const attributes: ToastAttributes = { class: 'shop-toast' };
const viewportAttributes: ToastViewportAttributes = { class: 'shop-toast-viewport' };
const dismissLabel: ToastDismissLabel = (item) => `Dismiss ${item.id}`;
const pauseOwner: ToastPauseOwner = 'focus';
const viewport: ToastViewportProps = { controller, attributes: viewportAttributes, dismissLabel };
controller.pause('bag-added', pauseOwner); controller.resume('bag-added', pauseOwner);
console.log(Toast(props), ToastViewport(viewport), toastStyles, content, record, attributes, controller.add(request), controller.items, controller.dismiss('bag-added'), controller.clear(), controller.dispose(), 'success' as ToastTone, 'Toast ToastViewport createToastController ToastProps ToastRequest ToastContent ToastController ToastControllerOptions ToastRecord ToastViewportProps ToastAnnouncement ToastAttributes ToastDismissLabel ToastPauseOwner ToastTone ToastViewportAttributes toastStyles');