Add type and angle picking to the custom gradient component

[jorgefilipecosta]

Description

This PR adds a UI to pick choose between linear and radial gradients and a UI to pick an angle on linear gradients.
The UI is based on some of the designs suggested in #16662.

The changes seem huge but the file custom-gradient-bar.js is purely a rename from index.js with some class name changes plugs a logic to support radial gradient in the bar. I made the rename in a separate commit but GitHub continues to show all the file as new :(
The file index.js is new (while GitHub shows lots of removals from the old file.

How has this been tested?

I verified I can choose between radial and linear gradients.
I verified for linear gradients I can choose an angle for the gradient.

Screenshots

[jorgefilipecosta]

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

[mapk]

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:

[mapk]

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.

[draganescu]

Tested and works perfectly. Codewise everything looks good.

[ItsJonQ]

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

Will create a separate PR with updates!

[ItsJonQ]

@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?

[mapk]

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!

[karmatosed]

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.

[mapk]

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.