This PR was rebased and now includes the angle picker by default. It is ready for a review.

I'm excited to get this in! Here's some feedback that might help tighten this up a bit more.

1. Let’s minimize those tabs (Solid color | Gradient) as much as possible. They’re too big right now.
2. Change the word "Overlay" to "Color".
3. Remove the border around the gradient type icons.
4. Provide more vertical padding between all the parts. (24px or some other CSS variable close to that)
5. Make sure the Angle number field and the "Clear" button align along the right side nicely.

These changes should look something like this:

One more minor text change here that could help.

Accordion title = Overlay
Label next to swatch = Color
Tabs = Solid | Gradient

This may help avoid repetition in the text.

@mapk Hallo!! I'm helping out @jorgefilipecosta with the design follow ups :)

Will create a separate PR with updates!

@mapk Haii! I had a question 👋

Remove the border around the gradient type icons.

If we do this, then there's no indication of which gradient type is active:

How would you like to proceed?

How would you like to proceed?

The grey border in that image should be removed. But the grey background on the icon when it's selected should remain. I hope that helps!

I wonder if a simple square and either circle in it or arrow would work. I really like what Figma does and riffed on that in the monotone (Figma screenshots in green).

I added on states to these to show.

Oooh! I really like these two:

Let's go with these. I'd like to see these in relation to our already standard icon selection background indicator (dark grey background). If that doesn't work too well, we can look into the thinner selection idea.