Toaster theming

Every cosmetic value Toaster renders is a --rozie-toast-* custom property with a built-in fallback, so the component works with zero configuration and stays fully re-skinnable. The structural rules compile per-leaf and are not consumer-overridable — only the values below flow through tokens.

.rozie-toaster {
  --rozie-toast-z: 9999;
  --rozie-toast-content-gap: 0.75rem;
  --rozie-toast-success-bg: #16a34a;
  --rozie-toast-font-size: 0.9rem;
}

Tokens

region layout

Token	Default
--rozie-toast-z	9999
--rozie-toast-gap	0.5rem
--rozie-toast-region-padding	1rem
--rozie-toast-max-width	calc(100vw - 2rem)
--rozie-toast-font	inherit

per-toast box model

Token	Default
--rozie-toast-content-gap	0.75rem
--rozie-toast-min-width	16rem
--rozie-toast-toast-max-width	24rem
--rozie-toast-padding	0.75rem 1rem
--rozie-toast-color	#fff
--rozie-toast-bg	#333
--rozie-toast-radius	0.5rem
--rozie-toast-shadow	0 6px 20px rgba(0, 0, 0, 0.25)

per-type accents

Token	Default
--rozie-toast-success-bg	#16a34a
--rozie-toast-error-bg	#dc2626
--rozie-toast-warning-bg	#ca8a04
--rozie-toast-info-bg	var(--rozie-toast-bg, #333)

message + close button

Token	Default
--rozie-toast-font-size	0.9rem
--rozie-toast-close-size	1.25rem
--rozie-toast-close-opacity	0.75

enter/exit lifecycle

Token	Default
--rozie-toast-enter-duration	200ms
--rozie-toast-exit-duration	200ms

stacked mode (opt-in stacked prop) — collapsed depth transform

Token	Default
--rozie-toast-stack-offset	8px
--rozie-toast-stack-scale-step	0.05
--rozie-toast-depth	0
--rozie-toast-swipe-exit	1

the decorative 'loading' type spinner

Token	Default
--rozie-toast-spinner-size	1em
--rozie-toast-spinner-color	currentColor

Design-system bridges

Each package ships token presets that map Toaster's tokens onto a known design system's published CSS variables — import base.css first, then a bridge:

import '@rozie-ui/toast-react/themes/base.css';
import '@rozie-ui/toast-react/themes/bootstrap.css';
import '@rozie-ui/toast-react/themes/material.css';
import '@rozie-ui/toast-react/themes/shadcn.css';

See also

• Toaster — showcase & API — the full prop / event / slot / handle reference.
• Toaster — usage examples — idiomatic per-framework consumption code.
• Toaster comparison — how it stacks up against the per-framework libraries.
• Toaster — live demo — the real package running in the page.