Replace coloris with vanilla-colorful (#30201)

Found [a better color
picker](https://github.com/web-padawan/vanilla-colorful) that [does not
rely](https://github.com/mdbassit/Coloris/issues/139) on
`querySelectorAll` or a global shared instance, and is also around a
third of the size of the previous one.

The popover is handled by tippy.js for which I introduced a new "bare"
theme and it uses a new sibling-based mechanism which should prove
useful later to create tippy popovers via HTML only.

<img width="846" alt="Screenshot 2024-03-31 at 04 03 38"
src="7639b911-a2d7-4f5c-bffd-a9d84561e747">

(cherry picked from commit 1195be41a13d2198ab644c8558549edd74485510)

web_src/css/features/colorpicker.css

@@ -1,10 +1,6 @@
-/* This is a stripped-down version of coloris's CSS tailored to our needs. It does only include
-   opaqua colors, and if more features like opacity are needed, the CSS needs to be extended
-   based on upstream: https://github.com/mdbassit/Coloris/blob/main/src/coloris.css. */
-
 .js-color-picker-input {
   display: flex;
-  flex-wrap: wrap;
+  position: relative;
 }
 
 .js-color-picker-input input {
@@ -13,152 +9,39 @@
   padding-left: 32px !important;
 }
 
-.clr-picker {
-  display: none;
-  flex-wrap: wrap;
-  position: absolute;
-  width: 200px;
-  z-index: 1002; /* above .ui.modal which has 1001 */
-  border-radius: var(--border-radius);
-  background-color: var(--color-menu);
-  justify-content: flex-end;
-  direction: ltr;
-  box-shadow: 0 5px 20px var(--color-shadow);
-  user-select: none;
-}
-
-.clr-picker.clr-open {
-  display: flex;
-}
-
-.clr-gradient {
-  position: relative;
-  width: 100%;
-  height: 100px;
-  border-radius: 3px 3px 0 0;
-  background: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentcolor); /* stylelint-disable-line scale-unlimited/declaration-strict-value */
-  cursor: pointer;
-}
-
-.clr-marker {
-  position: absolute;
-  width: 12px;
-  height: 12px;
-  margin: -6px 0 0 -6px;
-  border: 1px solid var(--color-white);
-  border-radius: 50%;
-  background-color: currentcolor;
-  cursor: pointer;
-}
-
-.clr-picker input[type="range"]::-webkit-slider-runnable-track {
-  width: 100%;
-  height: 16px;
-}
-
-.clr-picker input[type="range"]::-webkit-slider-thumb {
-  width: 16px;
-  height: 16px;
-  -webkit-appearance: none;
-}
-
-.clr-picker input[type="range"]::-moz-range-track {
-  width: 100%;
-  height: 16px;
-  border: 0;
-}
-
-.clr-picker input[type="range"]::-moz-range-thumb {
-  width: 16px;
-  height: 16px;
-  border: 0;
-}
-
-.clr-hue {
-  background: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); /* stylelint-disable-line scale-unlimited/declaration-strict-value */
-  position: relative;
-  width: calc(100% - 40px);
-  height: 10px;
-  margin: 10px 20px;
-  border-radius: 4px;
-}
-
-.clr-hue input[type="range"] {
-  position: absolute;
-  width: calc(100% + 32px);
-  margin: 0;
-  background-color: transparent;
-  opacity: 0;
-  cursor: pointer;
-  appearance: none;
-}
-
-.clr-hue div {
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  left: 0;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  border: 2px solid var(--color-white);
-  border-radius: 50%;
-  background-color: currentcolor;
-  box-shadow: 0 0 1px var(--color-shadow);
-  pointer-events: none;
-}
-
-.clr-field {
-  flex: 1;
-  position: relative;
-  color: transparent;
-}
-
-.clr-field button {
+.js-color-picker-input .preview-square {
   position: absolute;
   aspect-ratio: 1;
   height: 16px;
   left: 10px;
   top: 50%;
   transform: translateY(-50%);
-  margin: 0;
-  padding: 0;
-  border: 0;
-  color: inherit;
-  pointer-events: none;
   border-radius: 2px;
   background: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa); /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   background-position: 0 0, 4px 4px;
   background-size: 8px 8px;
 }
 
-.clr-field button::after {
+.js-color-picker-input .preview-square::after {
   content: "";
-  display: block;
   position: absolute;
   width: 100%;
   height: 100%;
-  left: 0;
-  top: 0;
   border-radius: inherit;
   background-color: currentcolor;
 }
 
-.clr-marker:focus {
-  outline: none;
+hex-color-picker {
+  width: 180px;
+  height: 120px;
 }
 
-.clr-keyboard-nav .clr-marker:focus,
-.clr-keyboard-nav .clr-hue input:focus + div,
-.clr-keyboard-nav .clr-alpha input:focus + div {
-  outline: none;
-  box-shadow: 0 0 2px 2px var(--color-white);
+hex-color-picker::part(hue-pointer),
+hex-color-picker::part(saturation-pointer) {
+  width: 22px;
+  height: 22px;
 }
 
-.clr-picker .clr-preview,
-.clr-picker .clr-clear,
-.clr-picker .clr-swatches,
-.clr-picker .clr-format,
-.clr-picker .clr-alpha,
-.clr-picker .clr-color {
-  display: none;
+hex-color-picker::part(hue) {
+  flex-basis: 16px;
 }

web_src/css/modules/tippy.css

@@ -29,6 +29,17 @@
   z-index: 1;
 }
 
+/* bare theme, no styling at all, except box-shadow */
+.tippy-box[data-theme="bare"] {
+  border: none;
+  box-shadow: 0 6px 18px var(--color-shadow);
+}
+
+.tippy-box[data-theme="bare"] .tippy-content {
+  padding: 0;
+  background: transparent;
+}
+
 /* tooltip theme for text tooltips */
 
 .tippy-box[data-theme="tooltip"] {