experimental: add gradient controller to update color stops using ui

[JayaKrishnaNamburu]

Description

The GradientControl helps in displaying the colour stops that are available in the linear-gradient that users added.

There are two knows issues at the moment.

• The only limitation is. We can't swap the colours when a colour stop crosses an existing colour stop. In some
  tools, the colours are swapped resulting in the swiping of the gradient too.
  This is because of a limitation/bug on the radix side, they pre-sort the slider stops. So, we can never know which crosses an existing stop and changed it's value. Slider ability to disable swap of multiple thumbs radix-ui/primitives#2247

Steps for reproduction

• Passing a linear-gradient should show all the color-stops in the gradient.
• The color-hints are displayed at the bottom of the gradient bar. These can't be moved along, more info about it is in the code component. Because, this basically changes the whole gradient just by moving.
• The color-hints are showed at the bottom of the gradient. Just to notify users about the existence of the hints.
• Users should be able to move the color-stops along the slider track.
• The color-stops can be moved using the arrow keys from the keyboard.

Code Review

• hi @kof, I need you to do
  • conceptual review (architecture, feature-correctness)
  • detailed review (read every line)
  • test it on preview

Before requesting a review

• made a self-review
• added inline comments where things may be not obvious (the "why", not "what")

Before merging

• tested locally and on preview environment (preview dev login: 5de6)
• updated test cases document
• added tests
• if any new env variables are added, added them to .env file

[kof]

If we are building a lower level component, without any application logic, then it should go into design system pacakge

[JayaKrishnaNamburu]

Currently in the design-system package we are not using css-engine pacakge. Is it ok if i add it there ? I am using types from there and it's the only reason i added it into builder.

[kof]

I would say you can decouple the things you are using from css engine, seems very minimal, but curious what @TrySound would say

[TrySound]

I like how gradient style tries to balance new dots instead of manually centering, maybe not needed for our case
https://github.com/user-attachments/assets/a339afc6-6d18-4597-9eb0-518dcc03b52e

[TrySound]

I would add outline for focus-visible only

[TrySound]

I instinctively do alt+click to delete thumbs

[TrySound]

I would do color picker as popover, tooltip feels super unpredictable

[kof]

I instinctively do alt+click to delete thumbs

I think its not a bad idea for us to support this, since our users know this combo

[JayaKrishnaNamburu]

I like how gradient style tries to balance new dots instead of manually centering, maybe not needed for our case https://github.com/user-attachments/assets/a339afc6-6d18-4597-9eb0-518dcc03b52e

It is indeed looking good. But the catch is, if a user sets the slider to a custom location. It changes it at the time of rebalancing when a new stop is added. Or is the behaviour is different there ?

[JayaKrishnaNamburu]

I would do color picker as popover, tooltip feels super unpredictable

I am using it as PropOver itself.
https://github.com/webstudio-is/webstudio/blob/add-gradient-control/apps/builder/app/builder/features/style-panel/sections/backgrounds/gradient-control.tsx#L320

Seems the events from Slider are little bit unpredictable.