ColorPicker

Holds one color for the color parts inside it.

<script>
  import { $bind, $signal } from 'brumate/signals';
  import ColorArea from '@brumate/ui/ColorArea.brm';
  import ColorField from '@brumate/ui/ColorField.brm';
  import ColorPicker from '@brumate/ui/ColorPicker.brm';
  import ColorSlider from '@brumate/ui/ColorSlider.brm';
  import ColorSwatch from '@brumate/ui/ColorSwatch.brm';
  import ColorThumb from '@brumate/ui/ColorThumb.brm';
  import Input from '@brumate/ui/Input.brm';
  import Label from '@brumate/ui/Label.brm';
  import SliderTrack from '@brumate/ui/SliderTrack.brm';

  let color = $signal('hsb(210, 80%, 90%)');
</script>

<ColorPicker value=$bind(color)>
  <div class="ui-stack">
    <ColorArea class="ui-color-area" xChannel="saturation" yChannel="brightness" aria-label="Saturation and brightness">
      <ColorThumb class="ui-color-thumb" />
    </ColorArea>
    <ColorSlider class="ui-color-slider" channel="hue">
      <Label>Hue</Label>
      <SliderTrack class="ui-color-track">
        <ColorThumb class="ui-color-thumb" />
      </SliderTrack>
    </ColorSlider>
    <div class="ui-row ui-color-row">
      <ColorField class="ui-field">
        <Label>Hex</Label>
        <Input class="ui-input" />
      </ColorField>
      <ColorSwatch class="ui-swatch" />
    </div>
  </div>
</ColorPicker>
<p>The color is {color}.</p>

<ColorPicker value=$bind(color)>
  <ColorArea xChannel="saturation" yChannel="brightness"><ColorThumb /></ColorArea>
  <ColorField><Input /></ColorField>
  <ColorSwatch />
</ColorPicker>

• A ColorPicker has no element of its own. It renders its children, and gives its color to the parts inside it.
• value is a color of CSS. It starts its own state, or binds with $bind. See State. onChange gets each change from any part.
• ColorArea, ColorSlider, ColorWheel, ColorField and ColorSwatchPicker inside it show the color of the picker, and write it. A change in one shows in the others.
• ColorSwatch inside it shows the color of the picker. Its own color wins, and so does the color of a ColorSwatchPickerItem.
• A part with a value of its own keeps it: value=(x) or value=$bind(signal) makes the part independent of the picker.
• A part outside a picker works as before.

Format

• The picker keeps its color at full precision, which hex cannot hold, such as the hue of a gray. The parts edit that color and share it. It gives back the format of the caller, and writes value, $bind and onChange only when an edit makes another color. When value changes from outside, the color follows it.
• The picker keeps the format of its value. A part writes in that format, so hsb(210, 50%, 80%) stays in hsb when the field types a hex.
• A pick in a ColorSwatchPicker gives the color as the item wrote it, and the picker has that format from then on.
• A ColorField that is cleared keeps the color of the picker, as the picker has no empty value.