Mixins / foldkit-mixins-ui
ColorPickerSlots
const · packages/mixins-ui/src/colorPicker.ts:20
const ColorPickerSlots: Slots.Contract<{ readonly root: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly [Attr.AttrToken<"role">], readonly Slot.RequirementName[], boolean>; readonly label: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly swatch: Slot.UnnamedSlot<Capability.Capability<"Base", readonly []>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly value: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly channel: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly channelLabel: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName …;An OKLCH color picker, Zag's color picker cut to the channels this repo's
palette is written in: a group named by its label, one native range per
channel (lightness, chroma, hue), each labelled and saying its value with
its unit, a swatch of the result and the result as text, and optionally
presets as a radio group of swatches. The browser gives the ranges and
radios their keys. The color is the application's: the view draws value
and sends onChange with the next one.
The root carries the color as custom properties (--fk-color whole, and
--fk-color-l, --fk-color-c, --fk-color-h), so the recipe paints each
track's gradient from the other two channels; each slider says its
channel in data-channel. A preset carries its own --fk-color.