[FEAT] Custom Color Picker

[drfarrell]

We need a custom Color Picker + Variable selector module for Onlook.

Requirements

• It should use Onlook's custom variables and brand colors
• It should take as little space as possible on the screen
• It should have room for presets to be chosen.

Some inspiration for what color pickers could look like:
https://www.tldraw.com/r/IjnaUuT7EdRlaflRWj4Fu?v=-2045,-1060,7478,4112&p=page

Open for Design suggestions and contributions!

[Koppeks]

Hi I would like to help with this, do you need just the design or do you also want a pull request with the code?

[drfarrell]

Open to either! Both would be helpful. We already have a base color picker, we just need to wrap it for pre-set variables and such.

What would you be excited to work on? I can get you a design if you'd like to help implement it.

This is also similar to this issue #49 if you want to take a look through it and see if there's something there you'd like to work on.

[Koppeks]

Does the repo work in Windows? I saw that the only download method was IOS.
If only works on iOS I would be glad to only contribute with design 🦩

[Kitenite]

@Koppeks it should work on Windows using the local instructions. We just haven't shipped a Windows executable for sake of focus.

Please let me know if you could not run it.

[ErrolFernandes]

[drfarrell]

Thanks for putting this together @ErrolFernandes!

If you want to keep jamming on it, here are some ideas of other things we need.

• We need to eventually support Gradients like Framer and Figma. Would be great to add those in somewhere.
• I like how both Figma and Framer let you look over the names of the colors you're looking to choose – it'd be great to see what a list of colors looks like
• Also Figma and Framer have the ability to search for specific colors. Wonder where the best place to put a search bar would be. We use Radix 15px icons if you want to use them as a reference.
• We'll also need to support HSL, HEX, RGB, etc. colors, so we need a place to swap those modes out.

[drfarrell]

A light mockup of what the picker can look like (still will add in gradient and variables and such)

The pin icon should be a color picker icon but is a placeholder because Radix doesn't have an eyedropper.

#337 is a request for this (Closed)

[drfarrell]

Here's what I think the v1 design should look like, and there's an even simpler version on the right.

This is an example showing how the headers should "stick" to the top as the user scrolls through the selection. This will only apply when we have more than one fill type (color, gradient, image, etc.)

[hitaspdotnet]

I'm on it, assign me please if possible.

WIP screen: