Copy page

Components

ColorSelector

src/lib/components/ui/color-selector/ColorSelector.svelte

Purpose

A color picker with a Popover trigger button showing a color swatch and the current hex value. Opens to the more-shadcn color-picker primitive. Created to consolidate the duplicated Popover + Button + swatch + label block across Profile, Create User, and Edit User pages.

Not avatar-specific — can be used for any color selection field.

Origin

Custom — Primebrick-written wrapper composing shadcn-svelte™ Popover + Button and the more-shadcn-svelte™ color-picker primitive (src/lib/components/ui/color-picker/). Not vendored as a unit from any registry.

Usage

Default (bindable value)

Code
<ColorSelector
  bind:value={formData.avatar_color}
  labelKey="profile.avatarColor"
  placeholderKey="profile.selectColor"
/>

With a fallback color

Code
<ColorSelector
  bind:value={formData.avatar_color}
  labelKey="profile.avatarColor"
  fallbackColor="#0ea5e9"
/>

Props

Full prop table: see API reference — colorselector.

Props: value (bindable, string | undefined), labelKey: string, placeholderKey?: string, fallbackColor?: string = "#000000", triggerId?: string.

Picker formats

ColorPicker.Root accepts a formats prop (hex, rgb, hsl, oklch, system; default all five). The first four show the classic saturation/hue area plus a format selector and a free-form text input — all in ghost chrome (borderless at rest, faint border on hover).

system mode swaps the fine-grain area for the full Tailwind palette grid (every family × shades 50–950) and replaces the text input with a searchable ComboSelect listing every family-shade token. Selecting a swatch or token binds the token string (e.g. "emerald-500") as the value — consumers like badgeClassesFromToken resolve both tokens and raw CSS colors.

Next steps

• Component catalog
• Color picker (more-shadcn) — the underlying primitive
• API reference