ColorPicker UX improvements

- Tabs and MenuButton for mode selection and enabling/disabling colorized sliders
- MenuButton for shape selection with new icon for each shape
- Drag and drop functionality for presets to arrange order
- A chronological list of recently selected presets which are global for the editor
- Presets are now highlighted as being active or inactive
- Thicker sliders for easy targeting
- `grabber_offset` theme constant for Slider
- Uncolorized sliders

3 files changed, 60 insertions, 0 deletions

diff --git a/editor/icons/PickerShapeCircle.svg b/editor/icons/PickerShapeCircle.svg
new file mode 100644
index 0000000000..8e7fb7f06e
--- /dev/null
+++ b/editor/icons/PickerShapeCircle.svg
@@ -0,0 +1 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h16v16h-16z"/></clipPath><g clip-path="url(#a)" fill="#eaeaea"><rect height="11" rx="5.5" transform="translate(1 2)" width="11"/><path d="m0 0h2v11h-2z" transform="translate(13 2)"/></g></svg>
diff --git a/editor/icons/PickerShapeRectangle.svg b/editor/icons/PickerShapeRectangle.svg
new file mode 100644
index 0000000000..3c7dd46884
--- /dev/null
+++ b/editor/icons/PickerShapeRectangle.svg
@@ -0,0 +1 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h16v16h-16z"/></clipPath><g clip-path="url(#a)" fill="#eaeaea"><path d="m0 0h11v11h-11z" transform="translate(1 2)"/><path d="m0 0h2v11h-2z" transform="translate(13 2)"/></g></svg>
diff --git a/editor/icons/PickerShapeRectangleWheel.svg b/editor/icons/PickerShapeRectangleWheel.svg
new file mode 100644
index 0000000000..e85665a8f2
--- /dev/null
+++ b/editor/icons/PickerShapeRectangleWheel.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="16"
+   viewBox="0 0 16 16"
+   width="16"
+   version="1.1"
+   id="svg11"
+   sodipodi:docname="PickerShapeRectangleWheel.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs15" />
+  <sodipodi:namedview
+     id="namedview13"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     showgrid="true"
+     inkscape:zoom="16"
+     inkscape:cx="0.53125"
+     inkscape:cy="5.28125"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg11">
+    <inkscape:grid
+       type="xygrid"
+       id="grid944" />
+  </sodipodi:namedview>
+  <clipPath
+     id="a">
+    <path
+       d="m0 0h16v16h-16z"
+       id="path2" />
+  </clipPath>
+  <g
+     clip-path="url(#a)"
+     fill="#eaeaea"
+     id="g9"
+     transform="matrix(0.85714286,0,0,0.85714286,1.1428571,1.1428571)">
+    <path
+       d="M 7,2 A 5,5 0 1 0 12,7 5.006,5.006 0 0 0 7,2 M 7,0 A 7,7 0 1 1 0,7 7,7 0 0 1 7,0 Z"
+       transform="translate(1,1)"
+       id="path5" />
+    <path
+       d="M 0,0 H 7 V 7 H 0 Z"
+       transform="translate(4.5,4.5)"
+       id="path7" />
+  </g>
+</svg>