Change the spectrum gradient in the color picker to <hue-interpolation-method>

Since [Chrome 111](https://developer.mozilla.org/en-US/docs/Web/CSS/hue-interpolation-method#browser_compatibility), CSS gradients support `<hue-interpolation-method>`. This allows us to implement hue gradients in color pickers very accurately.

Previously we could only simulate this by adding multiple color-stops.

```css
.spectrum-hue {
  background: linear-gradient(to left, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
```

Now it's just a simple matter of:

```css
.spectrum-hue {
  background: linear-gradient(to left in hsl longer hue, red 0 100%);
}
```

This is the best practice for generating rainbow 🌈 gradients in the future.

Fixed: 402346402
Change-Id: I43399c40bc68c167bfac0e9d0ce76d3cf37cfe91
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6342933
Commit-Queue: Changhao Han <[email protected]>
Reviewed-by: Changhao Han <[email protected]>

Author: yisibl

front_end/ui/legacy/components/color_picker/spectrum.css

@@ -72,11 +72,11 @@
 
 .spectrum-hue {
   top: 16px;
-  background: linear-gradient(to left, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); /* stylelint-disable-line plugin/use_theme_colors */
+  background: linear-gradient(to left in hsl longer hue, #f00 0 100%); /* stylelint-disable-line plugin/use_theme_colors */
 }
 
 .spectrum-hue.display-p3 {
-  background: linear-gradient(to left, color(display-p3 1 0 0) 0%, color(display-p3 1 1 0) 17%, color(display-p3 0 1 0) 33%, color(display-p3 0 1 1) 50%, color(display-p3 0 0 1) 67%, color(display-p3 1 0 1) 83%, color(display-p3 1 0 0) 100%); /* stylelint-disable-line plugin/use_theme_colors */
+  background: linear-gradient(to left in hsl longer hue, color(display-p3 1 0 0) 0 100%);
 }
 
 .spectrum-alpha {