Listbox theming

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

css

:root {
  --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-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-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-empty-fg`	`rgba(0, 0, 0, 0.5)`

Defaulted where Listbox 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-listbox-check-color`	`var(--rozie-listbox-accent, #0066cc)`
`--rozie-listbox-popup-bg`	`var(--rozie-listbox-bg, #fff)`
`--rozie-listbox-popup-border`	`var(--rozie-listbox-border, rgba(0, 0, 0, 0.15))`
`--rozie-listbox-popup-radius`	`var(--rozie-listbox-radius, 6px)`
`--rozie-listbox-ring`	`var(--rozie-listbox-accent, #0066cc)`

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 ​

Defaulted where Listbox reads them ​

Design-system bridges ​

See also ​