CommandPalette theming

Every cosmetic value CommandPalette renders is a --rozie-command-palette-* 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-command-palette {
  --rozie-command-palette-z: 1000;
  --rozie-command-palette-width: min(40rem, 100%);
  --rozie-command-palette-search-padding: 0.75rem;
  --rozie-command-palette-header-font-size: 0.875rem;
}

Tokens

overlay / scrim

Token	Default
--rozie-command-palette-z	1000
--rozie-command-palette-overlay-padding	12vh 1rem 1rem
--rozie-command-palette-backdrop-bg	rgba(0, 0, 0, 0.5)
--rozie-command-palette-backdrop-filter	none

panel chrome

Also carries the depth>0 header's title weight, which shares the panel's chrome semantics rather than the header's own.

Token	Default
--rozie-command-palette-width	min(40rem, 100%)
--rozie-command-palette-max-height	70vh
--rozie-command-palette-font	inherit
--rozie-command-palette-color	inherit
--rozie-command-palette-bg	#fff
--rozie-command-palette-border	none
--rozie-command-palette-radius	0.75rem
--rozie-command-palette-shadow	0 10px 38px rgba(0, 0, 0, 0.35), 0 0 1px rgba(0, 0, 0, 0.25)
--rozie-command-palette-border-width	1px
--rozie-command-palette-divider-color	rgba(0, 0, 0, 0.1)
--rozie-command-palette-title-weight	600

search input

Also drives the vendored Combobox's render-neutral tokens, by aliasing them at panel scope.

Token	Default
--rozie-command-palette-search-padding	0.75rem
--rozie-command-palette-input-padding	0.5rem 0.75rem
--rozie-command-palette-input-font-size	1.05rem
--rozie-command-palette-input-bg	transparent
--rozie-command-palette-input-border	none
--rozie-command-palette-input-radius	0.5rem
--rozie-command-palette-input-border-color	transparent
--rozie-command-palette-input-focus-border-color	transparent
--rozie-command-palette-input-focus-ring-width	0
--rozie-command-palette-input-underline	var(--rozie-command-palette-border-width, 1px) solid var(--rozie-command-palette-divider-color, rgba(0, 0, 0, 0.1))

breadcrumb/back header (depth>0)

Token	Default
--rozie-command-palette-header-font-size	0.875rem
--rozie-command-palette-header-gap	0.5rem
--rozie-command-palette-header-padding	0.5rem 0.75rem

back button

Token	Default
--rozie-command-palette-back-bg	transparent
--rozie-command-palette-back-border	none
--rozie-command-palette-back-font-size	1.1rem
--rozie-command-palette-back-hover-bg	rgba(0, 0, 0, 0.06)
--rozie-command-palette-back-padding	0.125rem 0.375rem
--rozie-command-palette-back-radius	0.375rem

breadcrumb trail

Token	Default
--rozie-command-palette-breadcrumb-color	rgba(0, 0, 0, 0.55)
--rozie-command-palette-breadcrumb-current-color	inherit
--rozie-command-palette-breadcrumb-current-weight	600
--rozie-command-palette-breadcrumb-gap	0.25rem
--rozie-command-palette-breadcrumb-jump-hover-color	var(--rozie-command-palette-breadcrumb-current-color, inherit)
--rozie-command-palette-breadcrumb-jump-hover-decoration	underline
--rozie-command-palette-breadcrumb-jump-radius	0.25rem
--rozie-command-palette-breadcrumb-separator-color	rgba(0, 0, 0, 0.35)
--rozie-command-palette-breadcrumb-weight	400

list + options

Also the option icon, the fuzzy-match highlight, the trailing slot, and group-heading spacing.

Token	Default
--rozie-command-palette-list-padding	0.5rem
--rozie-command-palette-option-gap	0.75rem
--rozie-command-palette-icon-color	inherit
--rozie-command-palette-icon-size	1rem
--rozie-command-palette-match-color	inherit
--rozie-command-palette-match-weight	600
--rozie-command-palette-trailing-color	rgba(0, 0, 0, 0.5)
--rozie-command-palette-trailing-font-size	0.75rem
--rozie-command-palette-section-gap	0.375rem

per-item group label

Token	Default
--rozie-command-palette-group-font-size	0.75rem
--rozie-command-palette-group-color	rgba(0, 0, 0, 0.5)
--rozie-command-palette-group-transform	uppercase

option actions

The row's right-side hint, plus the flyout trigger that hint opens when the option carries more than one action.

Token	Default
--rozie-command-palette-actions-color	rgba(0, 0, 0, 0.55)
--rozie-command-palette-actions-font-size	0.75rem
--rozie-command-palette-actions-gap	0.375rem
--rozie-command-palette-actions-hint-bg	rgba(0, 0, 0, 0.06)
--rozie-command-palette-actions-hint-color	inherit
--rozie-command-palette-actions-hint-font-size	0.6875rem
--rozie-command-palette-actions-hint-padding	0.0625rem 0.3125rem
--rozie-command-palette-actions-hint-radius	0.25rem
--rozie-command-palette-actions-hover-bg	rgba(0, 0, 0, 0.06)
--rozie-command-palette-actions-hover-color	rgba(0, 0, 0, 0.85)
--rozie-command-palette-actions-radius	0.25rem

hotkey badge

The per-item teaching badge. Each token here falls back to the matching actions-hint-* token declared above, so setting the hint styles both.

Token	Default
--rozie-command-palette-hotkey-bg	var(--rozie-command-palette-actions-hint-bg, rgba(0, 0, 0, 0.06))
--rozie-command-palette-hotkey-color	var(--rozie-command-palette-actions-hint-color, inherit)
--rozie-command-palette-hotkey-font-size	var(--rozie-command-palette-actions-hint-font-size, 0.6875rem)
--rozie-command-palette-hotkey-padding	var(--rozie-command-palette-actions-hint-padding, 0.0625rem 0.3125rem)
--rozie-command-palette-hotkey-radius	var(--rozie-command-palette-actions-hint-radius, 0.25rem)

action menu flyout

Token	Default
--rozie-command-palette-action-active-bg	rgba(0, 0, 0, 0.08)
--rozie-command-palette-action-bg	#fff
--rozie-command-palette-action-border	1px solid rgba(0, 0, 0, 0.1)
--rozie-command-palette-action-disabled-opacity	0.5
--rozie-command-palette-action-gap	0.5rem
--rozie-command-palette-action-icon-color	inherit
--rozie-command-palette-action-item-padding	0.375rem 0.5rem
--rozie-command-palette-action-item-radius	0.375rem
--rozie-command-palette-action-max-width	16rem
--rozie-command-palette-action-min-width	10rem
--rozie-command-palette-action-padding	0.25rem
--rozie-command-palette-action-radius	0.5rem
--rozie-command-palette-action-right	0.5rem
--rozie-command-palette-action-shadow	0 6px 24px rgba(0, 0, 0, 0.25)
--rozie-command-palette-action-shortcut-color	rgba(0, 0, 0, 0.5)
--rozie-command-palette-action-shortcut-font-size	0.75rem
--rozie-command-palette-action-z	10

args surface

Panel-internal: a chip plus a fields form, which replaces the result list once the palette descends to an argument-collecting depth.

Token	Default
--rozie-command-palette-args-chip-bg	rgba(0, 0, 0, 0.06)
--rozie-command-palette-args-chip-color	inherit
--rozie-command-palette-args-chip-padding	0.125rem 0.5rem
--rozie-command-palette-args-dim-opacity	0.45
--rozie-command-palette-args-field-bg	var(--rozie-command-palette-input-bg, transparent)
--rozie-command-palette-args-field-border	var(--rozie-command-palette-border-width, 1px) solid var(--rozie-command-palette-divider-color, rgba(0, 0, 0, 0.1))
--rozie-command-palette-args-field-padding	var(--rozie-command-palette-input-padding, 0.5rem 0.75rem)
--rozie-command-palette-args-field-radius	var(--rozie-command-palette-input-radius, 0.5rem)
--rozie-command-palette-args-gap	0.5rem
--rozie-command-palette-args-padding	0.75rem

empty state

Also the loading and error states, which re-project into this same #empty region.

Token	Default
--rozie-command-palette-empty-padding	1.5rem
--rozie-command-palette-empty-color	rgba(0, 0, 0, 0.5)
--rozie-command-palette-loading-color	rgba(0, 0, 0, 0.5)
--rozie-command-palette-error-color	#c0392b

footer

Token	Default
--rozie-command-palette-footer-padding	0.5rem 0.75rem
--rozie-command-palette-footer-font-size	0.8125rem
--rozie-command-palette-footer-color	rgba(0, 0, 0, 0.55)

Design-system bridges

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

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

See also

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