Popover theming

Every cosmetic value Popover renders is a --rozie-popover-* 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-popover {
  --rozie-popover-z: 1000;
  --rozie-popover-max-width: calc(100vw - 16px);
  --rozie-popover-bg: #fff;
  --rozie-popover-color: inherit;
}

Tokens

Token	Default
--rozie-popover-z	1000
--rozie-popover-max-width	calc(100vw - 16px)
--rozie-popover-bg	#fff
--rozie-popover-color	inherit
--rozie-popover-border	1px solid rgba(0, 0, 0, 0.12)
--rozie-popover-radius	8px
--rozie-popover-shadow	0 8px 24px rgba(0, 0, 0, 0.12)
--rozie-popover-padding	8px 12px
--rozie-popover-arrow-size	8px

Design-system bridges

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

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

See also

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