Carousel theming

Every cosmetic value Carousel renders is a --rozie-embla-* 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.

css

.rozie-embla {
  --rozie-embla-accent: #1a1a1a;
  --rozie-embla-arrow-size: 2.25rem;
  --rozie-embla-dots-gap: 0.4rem;
  --rozie-embla-thumbs-gap: 0.5rem;
}

Tokens

accent — the shared selected/active color. Arrow-fg, dot-selected-bg and thumb-selected-border-color all fall back to this ONE token, so overriding just --rozie-embla-accent shifts every "selected" affordance at once.

Token	Default
`--rozie-embla-accent`	`#1a1a1a`

arrows (opt-in via `arrows`)

Token	Default
`--rozie-embla-arrow-size`	`2.25rem`
`--rozie-embla-arrow-radius`	`50%`
`--rozie-embla-arrow-bg`	`rgb(255 255 255 / 0.9)`
`--rozie-embla-arrow-hover-bg`	`#fff`
`--rozie-embla-arrow-fg`	`var(--rozie-embla-accent)`
`--rozie-embla-arrow-font-size`	`1.5rem`
`--rozie-embla-arrow-shadow`	`0 1px 4px rgb(0 0 0 / 0.25)`
`--rozie-embla-arrow-disabled-opacity`	`0.35`
`--rozie-embla-arrow-inset`	`0.5rem`

dot pagination (opt-in via `dots`)

Token	Default
`--rozie-embla-dots-gap`	`0.4rem`
`--rozie-embla-dots-padding`	`0.625rem 0`
`--rozie-embla-dot-size`	`0.5rem`
`--rozie-embla-dot-bg`	`rgb(0 0 0 / 0.25)`
`--rozie-embla-dot-hover-bg`	`rgba(0, 0, 0, 0.45)`
`--rozie-embla-dot-selected-bg`	`var(--rozie-embla-accent)`
`--rozie-embla-dot-selected-scale`	`1.25`

synced thumbnail strip (opt-in via `thumbnails`)

Token	Default
`--rozie-embla-thumbs-gap`	`0.5rem`
`--rozie-embla-thumb-gap`	`0.5rem`
`--rozie-embla-thumb-opacity`	`0.5`
`--rozie-embla-thumb-hover-opacity`	`0.8`
`--rozie-embla-thumb-selected-opacity`	`1`
`--rozie-embla-thumb-border-width`	`2px`
`--rozie-embla-thumb-border-color`	`transparent`
`--rozie-embla-thumb-radius`	`4px`
`--rozie-embla-thumb-selected-border-color`	`var(--rozie-embla-accent)`

Design-system bridges

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

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

Carousel theming ​

Tokens ​

arrows (opt-in via arrows) ​

dot pagination (opt-in via dots) ​

synced thumbnail strip (opt-in via thumbnails) ​

Design-system bridges ​

See also ​