feat: color picker

[boehs]

closes #360

1. A "color" is a nth-dimensional array. Common specs are [r,g,b], [h,s,v] / [h,s,b], and [h,s,l]. An implementation difficulty is that saturation is defined differently between HSV and HSL. Most color pickers work in HSV. The workaround is as follows: The Root component will accept a format, which is one of rgb or hsv (hsl may not be supported initially because usage is very low). Many components accept a channel. This channel is one of hue|saturation|value|red|green|blue|alpha. Only channels defined by the format choice will be allowed (for instance, if format is rgb, you cannot use hue). You may then use ColorPicker.View to display and allow editing the color in a different format, conversions will be handled automatically.
2. Colors are generally convertible, but not always. For instance, many monitors are capable of displaying color beyond those allowed in the rgb space of 256^3. We must not concern ourselves with this, because HTML forms exclusively accept colors in the format #rrggbb, and supporting these colors requires a drastic amount of work.
3. Make note of the lack of alpha in the allowed value for the form. Alpha is a common enough feature that we must support it. The input element will never include alpha. By default, the value will not include alpha. withAlpha must be manually enabled. In this case, the input will continue to not include alpha, but the value will. The value will always be in the format #rrggbb or #rrggbbaa, regardless of the format prop.

Checklist

• ColorPicker.Root
• Conversion Primitives
• Input paradigms
  • ColorPicker.Area
    • An area is a 2D representation of a color space. In the case of chrome's area, the y axis is brightness, and the x axis is saturation.
    • ColorPicker.AreaBackground
      • Supporting all possible x and y channels is not feasible. We can provide a default implementation for saturation and value, and allow the user to provide a custom implementation. Throw if this implementation is not provided.
    • ColorPicker.AreaThumb
  • ColorPicker.Slider
    • A slider is a 1D representation of a color space. In the case of chrome's slider, the x axis is hue. Can we use Kobalte's Slider component?
    • ColorPicker.ChannelSliderBackground
    • ColorPicker.ChannelSliderThumb
  • ColorPicker.TransparencyGrid
  • ColorPicker.ChannelInput
    • Text input
• ColorPicker.View
• Reexport popover
• Docs

[netlify]

👷 Deploy request for kobalte pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	0a5a84b