Dialog theming

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

:root {
  --rozie-dialog-width: auto;
  --rozie-dialog-border: none;
  --rozie-dialog-backdrop-bg: rgba(0, 0, 0, 0.5);
  --rozie-dialog-padding: 1.5rem;
}

Tokens

box geometry

Token	Default
--rozie-dialog-width	auto
--rozie-dialog-max-width	min(32rem, calc(100vw - 2rem))
--rozie-dialog-max-height	calc(100vh - 2rem)

box chrome

Token	Default
--rozie-dialog-border	none
--rozie-dialog-radius	0.75rem
--rozie-dialog-bg	#fff
--rozie-dialog-color	inherit
--rozie-dialog-shadow	0 10px 38px rgba(0, 0, 0, 0.35), 0 0 1px rgba(0, 0, 0, 0.25)

scrim (the native ::backdrop)

Token	Default
--rozie-dialog-backdrop-bg	rgba(0, 0, 0, 0.5)
--rozie-dialog-backdrop-filter	none

content panel

Token	Default
--rozie-dialog-padding	1.5rem
--rozie-dialog-font	inherit

enter/leave transition duration

Token	Default
--rozie-dialog-transition	0.15s ease

Design-system bridges

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

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

See also

• Dialog — showcase & API — the full prop / event / slot / handle reference.
• Dialog — usage examples — idiomatic per-framework consumption code.
• Dialog comparison — how it stacks up against the per-framework libraries.
• Dialog — live demo — the Vue leaf's workspace build running in the page (not yet the published npm package).