Mixins / foldkit-mixins-ui

ColorPicker

namespace · packages/mixins-ui/src/colorPicker.ts:1

export * as ColorPicker from './colorPicker.js'

In the guides

Members

ColorPicker.Channel

type · packages/mixins-ui/src/colorPicker.ts:45

type Channel = keyof Oklch

One of a color's three channels.

ColorPicker.ColorPickerPreset

interface · packages/mixins-ui/src/colorPicker.ts:96

interface ColorPickerPreset {
  readonly label: string
  readonly value: Oklch
}

ColorPicker.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.

ColorPicker.ColorPickerView

interface · packages/mixins-ui/src/colorPicker.ts:102

interface ColorPickerView<Message> {
  readonly id: string
  readonly label: string
  readonly value: Oklch
  readonly onChange: (value: Oklch) => NoInfer<Message>
  readonly channelLabels?:
    | {
        readonly l: string
        readonly c: string
        readonly h: string
      }
    | undefined
  readonly presets?: ReadonlyArray<ColorPickerPreset> | undefined
  readonly presetsLabel?: string | undefined
  readonly disabled?: boolean | undefined
  readonly style?: NamedStyle<typeof ColorPickerSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

ColorPicker.format

function · packages/mixins-ui/src/colorPicker.ts:69

function format(color: Oklch): string

oklch(62.5% 0.15 250): lightness to two places, chroma to four, hue to two.

ColorPicker.Oklch

const · packages/mixins-ui/src/colorPicker.ts:41

const Oklch: Schema.Struct<{
  readonly l: Schema.Number
  readonly c: Schema.Number
  readonly h: Schema.Number
}>

A color in OKLCH: lightness 0–100 (percent), chroma 0–0.4, hue 0–360 degrees.

ColorPicker.parse

function · packages/mixins-ui/src/colorPicker.ts:84

function parse(text: string): Option.Option<Oklch>

The color CSS text names, or none when it is not oklch(L C H) within the picker's ranges. Lightness may be a percentage or CSS's 0–1 number; a hue past a turn is brought into one. A color with alpha is none, since the picker would drop it.

ColorPicker.view

function · packages/mixins-ui/src/colorPicker.ts:128

function view<Message>(
  options: ColorPickerView<Message>,
  h: HtmlBuilder<Message>,
): Html

ColorPicker.withChannel

function · packages/mixins-ui/src/colorPicker.ts:63

function withChannel(color: Oklch, channel: Channel, value: number): Oklch

color with channel set to value, held to the channel's range and rounded to four places.