QDS Color Picker

A compact editor for semantic theme tokens and custom colors.

Usage

<qds-color-picker></qds-color-picker>

Behavior

• Theme tab shows semantic theme colors as swatches
• Custom tab uses the native browser color picker
• The current value is displayed as a live swatch plus its raw token or color string
• The component emits value-change when the selection changes

Events

Event	Detail	Description
value-change	{ value: string }	Fired when the selected color changes

Notes

• Theme swatches store semantic token values like var(--theme-warning)
• Custom colors store literal hex values from the native picker
• See test.html for standalone and qds-property-editor integration examples