Toaster theming

The values listed below are exposed as --rozie-toast-* custom properties, each with a built-in fallback, so Toaster works with zero configuration and re-skins by remapping tokens. The structural rules compile per-leaf and are not consumer-overridable.

:root {
  --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

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

Defaulted where Toaster reads them

Public, but declared nowhere by base.css: the fallback below applies only while no scope sets the token, and it is resolved at the component itself — so it follows a value set on any ancestor (a token it defaults to included).

Token	Default
--rozie-toast-info-bg	var(--rozie-toast-bg, #333)

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.