[bug] Unable to select or apply a gradient color

[rohan-chidurala]

Describe the bug

Currently, there is no way to select and apply a gradient color in the interface. This limits the design capabilities for users who want to use gradient styling.

[drfarrell]

@rohan-chidurala thanks for reporting this – we definitely need to create a gradient color picker to do this. In the meantime, I encourage you to use the AI to create a gradient and then either continue to prompt or right-click the element and open up the code to see how tailwind handles gradients. I know it's not the best solution, but can be helpful in the short-term.

@Rish-it might be something you'd be interested in tackling if I get you a solid UI design for gradients in the color picker?

[Rish-it]

@drfarrell Sure thing! Just assign me when you are done with the UI designs. And #2178 is ready to be merged @Kitenite

[drfarrell]

@Rish-it here are the mockups for it – it'll require some new components like the gradient handles.

Here are the new icon .svgs for the swap and rotate functionality

[Rish-it]

Hey @drfarrell, quick clarification on the gradient flow:

Are we planning to add a separate tab for the Gradient section alongside the Brand and Custom tabs? Or are gradients meant to be part of the existing palette as presets (like color swatches), where clicking one opens a popup with gradient editor options?

Also, if these are the exact handler designs you have in mind, could you drop the SVGs for those as well?

[drfarrell]

@Rish-it great question.

You can add it as it's own separate tab in the color picker here alongside Brand and Custom tabs.

Eventually we'll consolidate the color picker modes in a tighter design, but the first v1 implementation I'm hoping we can just nail the general implementation.

The color swatches in the brand panel use the same color picker, so we'll need to have the gradient functionality accessible to the top editor toolbar and the brand panel.

I'm not sure which will be more useful, so I am going to give you a few options for the svgs. Thanks for asking!

These handles need a slight regular shadow on them to separate them from the interface below

[Rish-it]

Looks like I was on the right track thanks @drfarrell for the clarification! For the v1 implementation, a simpler approach would definitely make it easier to spot and adapt.