Listbox theming

Every cosmetic value Listbox renders is a --rozie-listbox-* 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-listbox {
  --rozie-listbox-min-width: 12rem;
  --rozie-listbox-bg: #fff;
  --rozie-listbox-accent: #0066cc;
  --rozie-listbox-arrow-color: currentColor;
}

Tokens

layout / typography

Token	Default
`--rozie-listbox-min-width`	`12rem`
`--rozie-listbox-font`	`inherit`
`--rozie-listbox-gap`	`0.5rem`
`--rozie-listbox-control-padding`	`0.5rem 0.75rem`

Token	Default
`--rozie-listbox-bg`	`#fff`
`--rozie-listbox-fg`	`#1a1a1a`
`--rozie-listbox-border`	`rgba(0, 0, 0, 0.2)`
`--rozie-listbox-border-width`	`1px`
`--rozie-listbox-radius`	`6px`
`--rozie-listbox-placeholder`	`rgba(0, 0, 0, 0.45)`
`--rozie-listbox-disabled-opacity`	`0.6`

focus ring (defaults to accent)

Token	Default
`--rozie-listbox-accent`	`#0066cc`
`--rozie-listbox-ring`	`var(--rozie-listbox-accent)`
`--rozie-listbox-ring-width`	`2px`
`--rozie-listbox-ring-offset`	`1px`

trailing arrow (select-only trigger)

Token	Default
`--rozie-listbox-arrow-color`	`currentColor`
`--rozie-listbox-arrow-opacity`	`0.7`

Token	Default
`--rozie-listbox-popup-bg`	`var(--rozie-listbox-bg)`
`--rozie-listbox-popup-border`	`var(--rozie-listbox-border)`
`--rozie-listbox-popup-radius`	`var(--rozie-listbox-radius)`
`--rozie-listbox-popup-padding`	`0.25rem`
`--rozie-listbox-popup-offset`	`4px`
`--rozie-listbox-shadow`	`0 6px 24px rgba(0, 0, 0, 0.12)`
`--rozie-listbox-z`	`1000`
`--rozie-listbox-max-height`	`16rem`

options

Token	Default
`--rozie-listbox-option-padding`	`0.4rem 0.6rem`
`--rozie-listbox-option-radius`	`4px`
`--rozie-listbox-option-fg`	`inherit`
`--rozie-listbox-active-bg`	`rgba(0, 102, 204, 0.12)`
`--rozie-listbox-active-fg`	`inherit`
`--rozie-listbox-selected-bg`	`transparent`
`--rozie-listbox-selected-fg`	`inherit`
`--rozie-listbox-selected-weight`	`600`
`--rozie-listbox-check`	`'✓'`
`--rozie-listbox-check-color`	`var(--rozie-listbox-accent)`
`--rozie-listbox-empty-fg`	`rgba(0, 0, 0, 0.5)`

Design-system bridges

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

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

Listbox theming ​

Tokens ​

layout / typography ​

control + popup surface ​

focus ring (defaults to accent) ​

trailing arrow (select-only trigger) ​

popup ​

options ​

Design-system bridges ​

See also ​