From 3d8108a32bb03018442f23cd224dabb0292c75ae Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sat, 5 Mar 2022 18:28:41 -0800
Subject: [PATCH] Change tool shelf icon colors to use classes not style

---
 .../assets/24px-two-tone/general-crop-tool.svg | 12 ++++++------
 .../24px-two-tone/general-eyedropper-tool.svg  |  4 ++--
 .../assets/24px-two-tone/general-fill-tool.svg |  4 ++--
 .../24px-two-tone/general-gradient-tool.svg    |  4 ++--
 .../24px-two-tone/general-navigate-tool.svg    |  6 +++---
 .../24px-two-tone/general-select-tool.svg      |  4 ++--
 .../assets/24px-two-tone/raster-brush-tool.svg |  4 ++--
 .../assets/24px-two-tone/raster-clone-tool.svg |  4 ++--
 .../24px-two-tone/raster-detail-tool.svg       |  6 +++---
 .../assets/24px-two-tone/raster-heal-tool.svg  |  6 +++---
 .../assets/24px-two-tone/raster-patch-tool.svg | 18 +++++++++---------
 .../24px-two-tone/raster-relight-tool.svg      | 12 ++++++------
 .../24px-two-tone/vector-ellipse-tool.svg      |  4 ++--
 .../24px-two-tone/vector-freehand-tool.svg     |  8 ++++----
 .../assets/24px-two-tone/vector-line-tool.svg  |  4 ++--
 .../assets/24px-two-tone/vector-path-tool.svg  |  4 ++--
 .../assets/24px-two-tone/vector-pen-tool.svg   |  4 ++--
 .../24px-two-tone/vector-rectangle-tool.svg    |  4 ++--
 .../assets/24px-two-tone/vector-shape-tool.svg |  4 ++--
 .../24px-two-tone/vector-spline-tool.svg       | 10 +++++-----
 .../assets/24px-two-tone/vector-text-tool.svg  |  6 +++---
 frontend/public/safari-pinned-tab.svg          |  3 ---
 frontend/src/App.vue                           | 16 +++++++++++++---
 frontend/src/components/panels/Document.vue    | 16 ++++++++++++++++
 24 files changed, 95 insertions(+), 72 deletions(-)

diff --git a/frontend/assets/24px-two-tone/general-crop-tool.svg b/frontend/assets/24px-two-tone/general-crop-tool.svg
index 44bff65ded..ff0fac2036 100644
--- a/frontend/assets/24px-two-tone/general-crop-tool.svg
+++ b/frontend/assets/24px-two-tone/general-crop-tool.svg
@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="#ffffff" d="M20,4H7v2h11v18h2V4z" />
-	<path fill="#ffffff" d="M6,18V0H4v20h13v-2H6z" />
-	<rect fill="#ffffff" x="21" y="18" width="3" height="2" />
-	<rect fill="#ffffff" x="0" y="4" width="3" height="2" />
-	<path fill="#bc719e" d="M21,5l3-3l-1-1l-2,2V5z" />
-	<path fill="#bc719e" d="M17,7L7,17h2l8-8V7z" />
+	<path class="color-solid" d="M20,4H7v2h11v18h2V4z" />
+	<path class="color-solid" d="M6,18V0H4v20h13v-2H6z" />
+	<rect class="color-solid" x="21" y="18" width="3" height="2" />
+	<rect class="color-solid" x="0" y="4" width="3" height="2" />
+	<path class="color-general" d="M21,5l3-3l-1-1l-2,2V5z" />
+	<path class="color-general" d="M17,7L7,17h2l8-8V7z" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/general-eyedropper-tool.svg b/frontend/assets/24px-two-tone/general-eyedropper-tool.svg
index eb1f72fb28..6ff0b6c962 100644
--- a/frontend/assets/24px-two-tone/general-eyedropper-tool.svg
+++ b/frontend/assets/24px-two-tone/general-eyedropper-tool.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="#bc719e" d="M19.78,7.76l2.49-2.49c0.96-0.96,0.98-2.52,0.04-3.5l0,0c-0.97-1.01-2.58-1.03-3.57-0.04l-2.49,2.49l-1.06-1.06c-0.39-0.39-1.02-0.39-1.41,0l-1.46,1.46l7.07,7.07l1.46-1.46c0.39-0.39,0.39-1.02,0-1.41L19.78,7.76z" />
-	<path fill="#ffffff" d="M15.63,9.93L5.9,19.65c-0.12,0.08-0.59,0.15-0.9,0.2c-0.32,0.05-0.68,0.1-1.05,0.2c0.09-0.38,0.15-0.73,0.2-1.05c0.05-0.31,0.12-0.78,0.18-0.88l9.74-9.74l-0.99-0.99c0,0-8.88,8.88-9.74,9.74c-0.86,0.86-0.24,2.89-1.66,4.31l0.88,0.88c1.41-1.41,3.45-0.8,4.31-1.66s9.74-9.74,9.74-9.74L15.63,9.93z" />
+	<path class="color-general" d="M19.78,7.76l2.49-2.49c0.96-0.96,0.98-2.52,0.04-3.5l0,0c-0.97-1.01-2.58-1.03-3.57-0.04l-2.49,2.49l-1.06-1.06c-0.39-0.39-1.02-0.39-1.41,0l-1.46,1.46l7.07,7.07l1.46-1.46c0.39-0.39,0.39-1.02,0-1.41L19.78,7.76z" />
+	<path class="color-solid" d="M15.63,9.93L5.9,19.65c-0.12,0.08-0.59,0.15-0.9,0.2c-0.32,0.05-0.68,0.1-1.05,0.2c0.09-0.38,0.15-0.73,0.2-1.05c0.05-0.31,0.12-0.78,0.18-0.88l9.74-9.74l-0.99-0.99c0,0-8.88,8.88-9.74,9.74c-0.86,0.86-0.24,2.89-1.66,4.31l0.88,0.88c1.41-1.41,3.45-0.8,4.31-1.66s9.74-9.74,9.74-9.74L15.63,9.93z" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/general-fill-tool.svg b/frontend/assets/24px-two-tone/general-fill-tool.svg
index 36cf301b9d..ec21b5661b 100644
--- a/frontend/assets/24px-two-tone/general-fill-tool.svg
+++ b/frontend/assets/24px-two-tone/general-fill-tool.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="#ffffff" d="M17.32,6.6c-1.72-1.69-3.77-3.01-6.01-3.89l-1.2,1.2C7.52,0.35,6.7-0.07,5.93,0.37c-0.45,0.26-1.2,0.69,1.11,6.62L0,14.02c0.88,2.24,2.2,4.29,3.89,6.01c1.72,1.69,3.77,3.01,6.01,3.89l11.31-11.31h0C20.33,10.37,19.01,8.32,17.32,6.6z M7.08,2.49c0.42,0.48,1.05,1.25,1.95,2.5L8.21,5.81C7.7,4.47,7.3,3.31,7.08,2.49z M9.55,22.15c-1.7-0.79-3.26-1.86-4.6-3.17c-1.31-1.35-2.38-2.9-3.17-4.61l5.86-5.86c0.45,1.08,0.97,2.32,1.6,3.72c-0.26,0.31-0.42,0.69-0.42,1.13c0,0.97,0.78,1.75,1.75,1.75s1.75-0.78,1.75-1.75c0-0.95-0.76-1.72-1.71-1.75c-0.63-1.44-1.25-2.91-1.8-4.27l2.05-2.05c0.87,1.65,1.98,3.16,3.29,4.49c1.33,1.31,2.84,2.42,4.49,3.29L9.55,22.15z M15.2,8.72c-1.34-1.37-2.46-2.95-3.3-4.67c1.74,0.81,3.34,1.92,4.72,3.26c1.34,1.38,2.45,2.97,3.26,4.71C18.15,11.18,16.57,10.07,15.2,8.72z" />
-	<path fill="#bc719e" d="M23.18,17.45c-0.32-0.82-0.82-2.09-1.47-3.32c-1.21,1.18-2.28,2.43-3.06,3.58C15.01,23.04,19.44,24,20.52,24S25.73,23.98,23.18,17.45z" />
+	<path class="color-solid" d="M17.32,6.6c-1.72-1.69-3.77-3.01-6.01-3.89l-1.2,1.2C7.52,0.35,6.7-0.07,5.93,0.37c-0.45,0.26-1.2,0.69,1.11,6.62L0,14.02c0.88,2.24,2.2,4.29,3.89,6.01c1.72,1.69,3.77,3.01,6.01,3.89l11.31-11.31h0C20.33,10.37,19.01,8.32,17.32,6.6z M7.08,2.49c0.42,0.48,1.05,1.25,1.95,2.5L8.21,5.81C7.7,4.47,7.3,3.31,7.08,2.49z M9.55,22.15c-1.7-0.79-3.26-1.86-4.6-3.17c-1.31-1.35-2.38-2.9-3.17-4.61l5.86-5.86c0.45,1.08,0.97,2.32,1.6,3.72c-0.26,0.31-0.42,0.69-0.42,1.13c0,0.97,0.78,1.75,1.75,1.75s1.75-0.78,1.75-1.75c0-0.95-0.76-1.72-1.71-1.75c-0.63-1.44-1.25-2.91-1.8-4.27l2.05-2.05c0.87,1.65,1.98,3.16,3.29,4.49c1.33,1.31,2.84,2.42,4.49,3.29L9.55,22.15z M15.2,8.72c-1.34-1.37-2.46-2.95-3.3-4.67c1.74,0.81,3.34,1.92,4.72,3.26c1.34,1.38,2.45,2.97,3.26,4.71C18.15,11.18,16.57,10.07,15.2,8.72z" />
+	<path class="color-general" d="M23.18,17.45c-0.32-0.82-0.82-2.09-1.47-3.32c-1.21,1.18-2.28,2.43-3.06,3.58C15.01,23.04,19.44,24,20.52,24S25.73,23.98,23.18,17.45z" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/general-gradient-tool.svg b/frontend/assets/24px-two-tone/general-gradient-tool.svg
index f56e671d0a..c70f0e6069 100644
--- a/frontend/assets/24px-two-tone/general-gradient-tool.svg
+++ b/frontend/assets/24px-two-tone/general-gradient-tool.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="#bc719e" d="M13.6,14c0-0.77,0.63-1.4,1.4-1.4c0.75-0.02,1.38,0.58,1.4,1.33c0,0.02,0,0.04,0,0.07c0,0.77-0.63,1.4-1.4,1.4S13.6,14.77,13.6,14z M15,11.4c0.77,0,1.4-0.63,1.4-1.4c0-0.02,0-0.04,0-0.07C16.38,9.18,15.75,8.58,15,8.6c-0.77,0-1.4,0.63-1.4,1.4S14.23,11.4,15,11.4z M20,18c0-0.55-0.45-1-1-1c-0.54,0.04-0.96,0.46-1,1c0,0.55,0.45,1,1,1C19.54,18.96,19.96,18.54,20,18z M16.4,18c0-0.77-0.63-1.4-1.4-1.4s-1.4,0.63-1.4,1.4c0.03,0.37,0.17,0.72,0.4,1h2C16.23,18.72,16.37,18.37,16.4,18z M12.7,18c0-0.99-0.8-1.8-1.79-1.8c0,0-0.01,0-0.01,0c-0.94,0-1.71,0.77-1.7,1.72c0,0.03,0,0.05,0,0.08c-0.01,0.36,0.1,0.71,0.3,1h2.9C12.6,18.71,12.71,18.36,12.7,18z M11,11.8c0.99,0,1.8-0.81,1.8-1.8c0,0,0-0.01,0-0.01C12.8,9,11.99,8.2,11,8.2c-0.99,0-1.8,0.81-1.8,1.8S10.01,11.8,11,11.8z M11,15.8c0.99,0,1.8-0.81,1.8-1.8c0,0,0-0.01,0-0.01c0-0.99-0.81-1.79-1.8-1.79c-0.99,0-1.8,0.81-1.8,1.8S10.01,15.8,11,15.8z M19,11c0.55,0,1-0.45,1-1s-0.45-1-1-1s-1,0.45-1,1S18.45,11,19,11z M9.2,6c0,0.99,0.8,1.8,1.8,1.8c0.99,0,1.8-0.8,1.8-1.8c0,0,0,0,0,0c0.01-0.36-0.1-0.71-0.3-1h-3C9.34,5.31,9.24,5.65,9.2,6z M3,5h5.7C8.9,5.22,9.01,5.5,9,5.8C9.11,6.9,8.3,7.89,7.2,8C8.15,8.1,8.9,8.85,9,9.8c0.11,1.1-0.7,2.09-1.8,2.2c0.95,0.1,1.7,0.85,1.8,1.8c0.11,1.1-0.7,2.09-1.8,2.2c0.97,0.07,1.73,0.83,1.8,1.8c0,0.42-0.11,0.83-0.3,1.2H3V5z M4,8c0.52,0.28,0.91,0.75,1.1,1.3C5.41,8.61,6.05,8.12,6.8,8C6.05,7.88,5.41,7.39,5.1,6.7C4.91,7.25,4.52,7.72,4,8z M4,12c0.52,0.28,0.91,0.75,1.1,1.3c0.29-0.71,0.94-1.21,1.7-1.3c-0.76-0.09-1.41-0.59-1.7-1.3C4.91,11.25,4.52,11.72,4,12z M4,16c0.49,0.31,0.88,0.76,1.1,1.3c0.29-0.71,0.94-1.21,1.7-1.3c-0.76-0.09-1.41-0.59-1.7-1.3C4.91,15.25,4.52,15.72,4,16z M13.6,6c0,0.77,0.63,1.4,1.4,1.4s1.4-0.63,1.4-1.4c0,0,0,0,0,0c-0.03-0.37-0.17-0.72-0.4-1h-2C13.77,5.28,13.63,5.63,13.6,6z M18,6c0,0.55,0.45,1,1,1c0.54-0.04,0.96-0.46,1-1c0-0.55-0.45-1-1-1C18.46,5.04,18.04,5.46,18,6z M19,15c0.55,0,1-0.45,1-1s-0.45-1-1-1s-1,0.45-1,1S18.45,15,19,15z" />
-	<path fill="#ffffff" d="M20.5,20h-17C2.67,20,2,19.33,2,18.5v-13C2,4.67,2.67,4,3.5,4h17C21.33,4,22,4.67,22,5.5v13C22,19.33,21.33,20,20.5,20z M3.5,5C3.22,5,3,5.22,3,5.5v13C3,18.78,3.22,19,3.5,19h17c0.28,0,0.5-0.22,0.5-0.5v-13C21,5.22,20.78,5,20.5,5H3.5z" />
+	<path class="color-general" d="M13.6,14c0-0.77,0.63-1.4,1.4-1.4c0.75-0.02,1.38,0.58,1.4,1.33c0,0.02,0,0.04,0,0.07c0,0.77-0.63,1.4-1.4,1.4S13.6,14.77,13.6,14z M15,11.4c0.77,0,1.4-0.63,1.4-1.4c0-0.02,0-0.04,0-0.07C16.38,9.18,15.75,8.58,15,8.6c-0.77,0-1.4,0.63-1.4,1.4S14.23,11.4,15,11.4z M20,18c0-0.55-0.45-1-1-1c-0.54,0.04-0.96,0.46-1,1c0,0.55,0.45,1,1,1C19.54,18.96,19.96,18.54,20,18z M16.4,18c0-0.77-0.63-1.4-1.4-1.4s-1.4,0.63-1.4,1.4c0.03,0.37,0.17,0.72,0.4,1h2C16.23,18.72,16.37,18.37,16.4,18z M12.7,18c0-0.99-0.8-1.8-1.79-1.8c0,0-0.01,0-0.01,0c-0.94,0-1.71,0.77-1.7,1.72c0,0.03,0,0.05,0,0.08c-0.01,0.36,0.1,0.71,0.3,1h2.9C12.6,18.71,12.71,18.36,12.7,18z M11,11.8c0.99,0,1.8-0.81,1.8-1.8c0,0,0-0.01,0-0.01C12.8,9,11.99,8.2,11,8.2c-0.99,0-1.8,0.81-1.8,1.8S10.01,11.8,11,11.8z M11,15.8c0.99,0,1.8-0.81,1.8-1.8c0,0,0-0.01,0-0.01c0-0.99-0.81-1.79-1.8-1.79c-0.99,0-1.8,0.81-1.8,1.8S10.01,15.8,11,15.8z M19,11c0.55,0,1-0.45,1-1s-0.45-1-1-1s-1,0.45-1,1S18.45,11,19,11z M9.2,6c0,0.99,0.8,1.8,1.8,1.8c0.99,0,1.8-0.8,1.8-1.8c0,0,0,0,0,0c0.01-0.36-0.1-0.71-0.3-1h-3C9.34,5.31,9.24,5.65,9.2,6z M3,5h5.7C8.9,5.22,9.01,5.5,9,5.8C9.11,6.9,8.3,7.89,7.2,8C8.15,8.1,8.9,8.85,9,9.8c0.11,1.1-0.7,2.09-1.8,2.2c0.95,0.1,1.7,0.85,1.8,1.8c0.11,1.1-0.7,2.09-1.8,2.2c0.97,0.07,1.73,0.83,1.8,1.8c0,0.42-0.11,0.83-0.3,1.2H3V5z M4,8c0.52,0.28,0.91,0.75,1.1,1.3C5.41,8.61,6.05,8.12,6.8,8C6.05,7.88,5.41,7.39,5.1,6.7C4.91,7.25,4.52,7.72,4,8z M4,12c0.52,0.28,0.91,0.75,1.1,1.3c0.29-0.71,0.94-1.21,1.7-1.3c-0.76-0.09-1.41-0.59-1.7-1.3C4.91,11.25,4.52,11.72,4,12z M4,16c0.49,0.31,0.88,0.76,1.1,1.3c0.29-0.71,0.94-1.21,1.7-1.3c-0.76-0.09-1.41-0.59-1.7-1.3C4.91,15.25,4.52,15.72,4,16z M13.6,6c0,0.77,0.63,1.4,1.4,1.4s1.4-0.63,1.4-1.4c0,0,0,0,0,0c-0.03-0.37-0.17-0.72-0.4-1h-2C13.77,5.28,13.63,5.63,13.6,6z M18,6c0,0.55,0.45,1,1,1c0.54-0.04,0.96-0.46,1-1c0-0.55-0.45-1-1-1C18.46,5.04,18.04,5.46,18,6z M19,15c0.55,0,1-0.45,1-1s-0.45-1-1-1s-1,0.45-1,1S18.45,15,19,15z" />
+	<path class="color-solid" d="M20.5,20h-17C2.67,20,2,19.33,2,18.5v-13C2,4.67,2.67,4,3.5,4h17C21.33,4,22,4.67,22,5.5v13C22,19.33,21.33,20,20.5,20z M3.5,5C3.22,5,3,5.22,3,5.5v13C3,18.78,3.22,19,3.5,19h17c0.28,0,0.5-0.22,0.5-0.5v-13C21,5.22,20.78,5,20.5,5H3.5z" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/general-navigate-tool.svg b/frontend/assets/24px-two-tone/general-navigate-tool.svg
index 5d153a1a64..e66b0e1479 100644
--- a/frontend/assets/24px-two-tone/general-navigate-tool.svg
+++ b/frontend/assets/24px-two-tone/general-navigate-tool.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="#ffffff" d="M23.56,21.45l-6.68-6.69C15.64,16.7,13.47,18,11,18c-3.86,0-7-3.14-7-7c0-2.56,1.39-4.8,3.45-6.02L7.36,4.94L5.25,4.08C3.26,5.73,2,8.22,2,11c0,4.97,4.03,9,9,9c1.95,0,3.74-0.63,5.21-1.68l5.23,5.24c0.58,0.59,1.53,0.59,2.12,0C24.15,22.98,24.15,22.03,23.56,21.45z" />
-	<path fill="#bc719e" d="M19.92,9.97c-0.23-2.01-1.12-3.89-2.56-5.33c-1.44-1.44-3.32-2.33-5.33-2.56l-0.2-1.48L7.89,3.65l4.61,1.89l-0.19-1.4c1.37,0.26,2.64,0.91,3.64,1.91c1,1,1.66,2.27,1.91,3.64l-1.4-0.19l1.89,4.61l3.05-3.94L19.92,9.97z" />
-	<path fill="#ffffff" d="M7.82,14.88c-0.18,0-0.36-0.07-0.5-0.21C6.34,13.69,5.8,12.39,5.8,11s0.54-2.69,1.52-3.68c0.27-0.27,0.72-0.27,0.99,0s0.27,0.72,0,0.99C7.6,9.03,7.2,9.98,7.2,11s0.4,1.97,1.11,2.69c0.27,0.27,0.27,0.72,0,0.99C8.18,14.81,8,14.88,7.82,14.88z" />
+	<path class="color-solid" d="M23.56,21.45l-6.68-6.69C15.64,16.7,13.47,18,11,18c-3.86,0-7-3.14-7-7c0-2.56,1.39-4.8,3.45-6.02L7.36,4.94L5.25,4.08C3.26,5.73,2,8.22,2,11c0,4.97,4.03,9,9,9c1.95,0,3.74-0.63,5.21-1.68l5.23,5.24c0.58,0.59,1.53,0.59,2.12,0C24.15,22.98,24.15,22.03,23.56,21.45z" />
+	<path class="color-general" d="M19.92,9.97c-0.23-2.01-1.12-3.89-2.56-5.33c-1.44-1.44-3.32-2.33-5.33-2.56l-0.2-1.48L7.89,3.65l4.61,1.89l-0.19-1.4c1.37,0.26,2.64,0.91,3.64,1.91c1,1,1.66,2.27,1.91,3.64l-1.4-0.19l1.89,4.61l3.05-3.94L19.92,9.97z" />
+	<path class="color-solid" d="M7.82,14.88c-0.18,0-0.36-0.07-0.5-0.21C6.34,13.69,5.8,12.39,5.8,11s0.54-2.69,1.52-3.68c0.27-0.27,0.72-0.27,0.99,0s0.27,0.72,0,0.99C7.6,9.03,7.2,9.98,7.2,11s0.4,1.97,1.11,2.69c0.27,0.27,0.27,0.72,0,0.99C8.18,14.81,8,14.88,7.82,14.88z" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/general-select-tool.svg b/frontend/assets/24px-two-tone/general-select-tool.svg
index 767e5ebd4a..d8e490a17c 100644
--- a/frontend/assets/24px-two-tone/general-select-tool.svg
+++ b/frontend/assets/24px-two-tone/general-select-tool.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<polygon fill="#bc719e" points="23,18.5 21,16.5 21,18 18,18 18,15 19.5,15 17.5,13 15.5,15 17,15 17,18 14,18 14,16.5 12,18.5 14,20.5 14,19 17,19 17,22 15.5,22 17.5,24 19.5,22 18,22 18,19 21,19 21,20.5" />
-	<path fill="#ffffff" d="M7,4.83L12.17,10H10H9.17l-0.59,0.59L7,12.17V4.83 M5,0v17l5-5h7L5,0L5,0z" />
+	<polygon class="color-general" points="23,18.5 21,16.5 21,18 18,18 18,15 19.5,15 17.5,13 15.5,15 17,15 17,18 14,18 14,16.5 12,18.5 14,20.5 14,19 17,19 17,22 15.5,22 17.5,24 19.5,22 18,22 18,19 21,19 21,20.5" />
+	<path class="color-solid" d="M7,4.83L12.17,10H10H9.17l-0.59,0.59L7,12.17V4.83 M5,0v17l5-5h7L5,0L5,0z" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/raster-brush-tool.svg b/frontend/assets/24px-two-tone/raster-brush-tool.svg
index e7680456e9..03ebab7012 100644
--- a/frontend/assets/24px-two-tone/raster-brush-tool.svg
+++ b/frontend/assets/24px-two-tone/raster-brush-tool.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="#e4bb72" d="M12.96,17.06c-0.18-1.51-1.66-3.27-4-3.14c-1.68,0.1-3.12,1.49-4.04,4.2c-0.95,2.78-3.62,4-3.62,4	c2.86,0.97,5.92,1.31,8.61,0.11C12.32,21.15,13.19,19,12.96,17.06z" />
-	<path fill="#ffffff" d="M22.49,1.1C21.54,0.35,18,3.81,14.1,8.17c-1.38,1.54-2.74,3.16-3.57,4.59c0.62,0.07,1.3,0.31,1.92,0.77c0.78,0.59,1.23,1.29,1.42,1.9c1.29-1.18,2.4-2.69,3.68-4.53C20.94,6.02,23.45,1.86,22.49,1.1z" />
+	<path class="color-raster" d="M12.96,17.06c-0.18-1.51-1.66-3.27-4-3.14c-1.68,0.1-3.12,1.49-4.04,4.2c-0.95,2.78-3.62,4-3.62,4c2.86,0.97,5.92,1.31,8.61,0.11C12.32,21.15,13.19,19,12.96,17.06z" />
+	<path class="color-solid" d="M22.49,1.1C21.54,0.35,18,3.81,14.1,8.17c-1.38,1.54-2.74,3.16-3.57,4.59c0.62,0.07,1.3,0.31,1.92,0.77c0.78,0.59,1.23,1.29,1.42,1.9c1.29-1.18,2.4-2.69,3.68-4.53C20.94,6.02,23.45,1.86,22.49,1.1z" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/raster-clone-tool.svg b/frontend/assets/24px-two-tone/raster-clone-tool.svg
index 109c18e514..34c2750076 100644
--- a/frontend/assets/24px-two-tone/raster-clone-tool.svg
+++ b/frontend/assets/24px-two-tone/raster-clone-tool.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<rect x="4" y="20" fill="#e4bb72" width="16" height="2" />
-	<path fill="#ffffff" d="M19.01,15.52c-1.29-0.33-2.51-0.57-3.93-0.93c-0.62-0.15-1.51-0.55-1.58-1.59v-2.7c0.12-0.4,0.42-0.7,0.56-0.83C15.22,8.71,16,7.45,16,6c0-2.21-1.79-4-4-4S8,3.79,8,6c0,1.4,0.72,2.63,1.81,3.34l-0.01,0c0,0,0.69,0.52,0.69,1.22V13c-0.06,1.04-0.95,1.43-1.58,1.59c-1.42,0.35-2.64,0.6-3.93,0.93C3.94,15.78,3,16.36,3,17v2h18v-2C21,16.36,20.06,15.78,19.01,15.52z" />
+	<rect x="4" y="20" class="color-raster" width="16" height="2" />
+	<path class="color-solid" d="M19.01,15.52c-1.29-0.33-2.51-0.57-3.93-0.93c-0.62-0.15-1.51-0.55-1.58-1.59v-2.7c0.12-0.4,0.42-0.7,0.56-0.83C15.22,8.71,16,7.45,16,6c0-2.21-1.79-4-4-4S8,3.79,8,6c0,1.4,0.72,2.63,1.81,3.34l-0.01,0c0,0,0.69,0.52,0.69,1.22V13c-0.06,1.04-0.95,1.43-1.58,1.59c-1.42,0.35-2.64,0.6-3.93,0.93C3.94,15.78,3,16.36,3,17v2h18v-2C21,16.36,20.06,15.78,19.01,15.52z" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/raster-detail-tool.svg b/frontend/assets/24px-two-tone/raster-detail-tool.svg
index acbd123fc7..c85db1508e 100644
--- a/frontend/assets/24px-two-tone/raster-detail-tool.svg
+++ b/frontend/assets/24px-two-tone/raster-detail-tool.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="#e4bb72" d="M19.47,14.93c0.06,0.95-0.01,1.86-0.21,2.7l1.48,2.97h-3c-0.48,0.55-1.06,1.02-1.72,1.4H23L19.47,14.93z" />
-	<path fill="#e4bb72" d="M6.27,20.6h-3l1.48-2.97c-0.21-0.84-0.27-1.75-0.21-2.7L1,22h6.99C7.33,21.62,6.75,21.15,6.27,20.6z" />
-	<path fill="#ffffff" d="M16.4,9.91C14.53,6.79,13,3.97,12,2.07c-1,1.9-2.53,4.72-4.4,7.84c-1.88,3.15-2.23,6.57-0.89,8.92C7.72,20.62,9.6,21.6,12,21.6s4.28-0.98,5.29-2.77C18.62,16.48,18.28,13.06,16.4,9.91z M9.4,11.5c0.6,6.5,3.6,8,3.6,8C5,20,9.4,11.5,9.4,11.5z" />
+	<path class="color-raster" d="M19.47,14.93c0.06,0.95-0.01,1.86-0.21,2.7l1.48,2.97h-3c-0.48,0.55-1.06,1.02-1.72,1.4H23L19.47,14.93z" />
+	<path class="color-raster" d="M6.27,20.6h-3l1.48-2.97c-0.21-0.84-0.27-1.75-0.21-2.7L1,22h6.99C7.33,21.62,6.75,21.15,6.27,20.6z" />
+	<path class="color-solid" d="M16.4,9.91C14.53,6.79,13,3.97,12,2.07c-1,1.9-2.53,4.72-4.4,7.84c-1.88,3.15-2.23,6.57-0.89,8.92C7.72,20.62,9.6,21.6,12,21.6s4.28-0.98,5.29-2.77C18.62,16.48,18.28,13.06,16.4,9.91z M9.4,11.5c0.6,6.5,3.6,8,3.6,8C5,20,9.4,11.5,9.4,11.5z" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/raster-heal-tool.svg b/frontend/assets/24px-two-tone/raster-heal-tool.svg
index 0b57e617e5..8ea86ad8e3 100644
--- a/frontend/assets/24px-two-tone/raster-heal-tool.svg
+++ b/frontend/assets/24px-two-tone/raster-heal-tool.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="#ffffff" d="M12,6l-6,6l6,6l6-6L12,6z M9,13c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C10,12.55,9.55,13,9,13z M12,16c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C13,15.55,12.55,16,12,16z M12,13c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C13,12.55,12.55,13,12,13z M12,10c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C13,9.55,12.55,10,12,10z M15,13c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C16,12.55,15.55,13,15,13z" />
-	<path fill="#e4bb72" d="M1,17c0,0-1,3,1,5s5,1,5,1l4-4l-6-6L1,17z" />
-	<path fill="#e4bb72" d="M22,2c-2-2-5-1-5-1l-4,4l6,6l4-4C23,7,24,4,22,2z" />
+	<path class="color-solid" d="M12,6l-6,6l6,6l6-6L12,6z M9,13c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C10,12.55,9.55,13,9,13z M12,16c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C13,15.55,12.55,16,12,16z M12,13c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C13,12.55,12.55,13,12,13z M12,10c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C13,9.55,12.55,10,12,10z M15,13c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C16,12.55,15.55,13,15,13z" />
+	<path class="color-raster" d="M1,17c0,0-1,3,1,5s5,1,5,1l4-4l-6-6L1,17z" />
+	<path class="color-raster" d="M22,2c-2-2-5-1-5-1l-4,4l6,6l4-4C23,7,24,4,22,2z" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/raster-patch-tool.svg b/frontend/assets/24px-two-tone/raster-patch-tool.svg
index b395ade0e8..c9032ab1fa 100644
--- a/frontend/assets/24px-two-tone/raster-patch-tool.svg
+++ b/frontend/assets/24px-two-tone/raster-patch-tool.svg
@@ -1,12 +1,12 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="#e4bb72" d="M22.45,8.23l-3.38,1.23c-0.36,0.13-0.55,0.54-0.42,0.9c0.1,0.28,0.37,0.46,0.66,0.4
+	<path class="color-raster" d="M22.45,8.23l-3.38,1.23c-0.36,0.13-0.55,0.54-0.42,0.9c0.1,0.28,0.37,0.46,0.66,0.4
 c0.08,0,0.16-0.01,0.24-0.04l3.38-1.23c0.36-0.13,0.55-0.54,0.42-0.9c-0.1-0.28-0.37-0.46-0.66-0.46C22.61,8.18,22.53,8.2,22.45,8.23z" />
-	<path fill="#e4bb72" d="M19.55,16.77l3.38-1.23c0.36-0.13,0.55-0.54,0.42-0.9c-0.1-0.28-0.37-0.46-0.66-0.46c-0.08,0-0.16,0.01-0.24,0.04l-3.38,1.23c-0.36,0.13-0.55,0.54-0.42,0.9c0.1,0.28,0.37,0.46,0.66,0.46C19.39,16.82,19.47,16.8,19.55,16.77z" />
-	<path fill="#e4bb72" d="M15.77,21.45l-1.23-3.38c-0.1-0.28-0.37-0.46-0.66-0.46c-0.08,0-0.16,0.01-0.24,0.04c-0.36,0.13-0.55,0.54-0.42,0.9l1.23,3.38c0.1,0.28,0.37,0.46,0.66,0.46c0.08,0,0.16-0.01,0.24-0.04C15.72,22.22,15.91,21.81,15.77,21.45z" />
-	<path fill="#e4bb72" d="M14.64,1.65c-0.36,0.13-0.55,0.54-0.42,0.9l1.23,3.38c0.1,0.28,0.37,0.46,0.66,0.46c0.08,0,0.16-0.01,0.24-0.04c0.36-0.13,0.55-0.54,0.42-0.9l-1.23-3.38c-0.1-0.28-0.37-0.46-0.66-0.46C14.8,1.61,14.72,1.62,14.64,1.65z" />
-	<path fill="#e4bb72" d="M9.77,21.45l-1.23-3.38c-0.1-0.28-0.37-0.46-0.66-0.46c-0.08,0-0.16,0.01-0.24,0.04c-0.36,0.13-0.55,0.54-0.42,0.9l1.23,3.38c0.1,0.28,0.37,0.46,0.66,0.46c0.08,0,0.16-0.01,0.24-0.04C9.72,22.22,9.91,21.81,9.77,21.45z" />
-	<path fill="#e4bb72" d="M1.55,15.77l3.38-1.23c0.36-0.13,0.55-0.54,0.42-0.9c-0.1-0.28-0.37-0.46-0.66-0.46c-0.08,0-0.16,0.01-0.24,0.04l-3.38,1.23c-0.36,0.13-0.55,0.54-0.42,0.9c0.1,0.28,0.37,0.46,0.66,0.46C1.39,15.82,1.47,15.8,1.55,15.77z" />
-	<path fill="#e4bb72" d="M8.64,1.65c-0.36,0.13-0.55,0.54-0.42,0.9l1.23,3.38c0.1,0.28,0.37,0.46,0.66,0.46c0.08,0,0.16-0.01,0.24-0.04c0.36-0.13,0.55-0.54,0.42-0.9L9.54,2.07c-0.1-0.28-0.37-0.46-0.66-0.46C8.8,1.61,8.72,1.62,8.64,1.65z" />
-	<path fill="#e4bb72" d="M4.45,7.23L1.07,8.46c-0.36,0.13-0.55,0.54-0.42,0.9c0.1,0.28,0.37,0.46,0.66,0.46c0.08,0,0.16-0.01,0.24-0.04l3.38-1.23c0.36-0.13,0.55-0.54,0.42-0.9c-0.1-0.28-0.37-0.46-0.66-0.46C4.61,7.18,4.53,7.2,4.45,7.23z" />
-	<path fill="#ffffff" d="M20.03,18.09c-0.23,0.08-0.47,0.13-0.72,0.13c-0.88,0-1.67-0.56-1.98-1.38c-0.19-0.53-0.17-1.1,0.07-1.61c0.24-0.51,0.66-0.89,1.18-1.09L21,13.27v-1.53l-0.97,0.35c-0.23,0.08-0.47,0.13-0.72,0.13c-0.88,0-1.67-0.56-1.98-1.38c-0.4-1.09,0.17-2.3,1.26-2.69L21,7.27V6c0-1.1-0.9-2-2-2h-1.27l0.35,0.97c0.4,1.09-0.17,2.3-1.26,2.69c-0.23,0.08-0.47,0.13-0.72,0.13c-0.88,0-1.67-0.56-1.98-1.38L13.27,4h-1.53l0.35,0.97c0.4,1.09-0.17,2.3-1.26,2.69c-0.23,0.08-0.47,0.13-0.72,0.13c-0.88,0-1.67-0.56-1.98-1.38L7.27,4H5C3.9,4,3,4.9,3,6v0.27l0.97-0.35C4.2,5.83,4.44,5.78,4.69,5.78c0.88,0,1.67,0.56,1.98,1.38c0.19,0.53,0.17,1.1-0.07,1.61C6.36,9.28,5.94,9.67,5.41,9.86L3,10.73v1.53l0.97-0.35c0.23-0.08,0.47-0.13,0.72-0.13c0.88,0,1.67,0.56,1.98,1.38c0.19,0.53,0.17,1.1-0.07,1.61c-0.24,0.51-0.66,0.89-1.18,1.09L3,16.73V18c0,1.1,0.9,2,2,2h1.27l-0.35-0.97c-0.4-1.09,0.17-2.3,1.26-2.69c0.23-0.08,0.47-0.13,0.72-0.13c0.88,0,1.67,0.56,1.98,1.38L10.73,20h1.53l-0.35-0.97c-0.4-1.09,0.17-2.3,1.26-2.69c0.23-0.08,0.47-0.13,0.72-0.13c0.88,0,1.67,0.56,1.98,1.38L16.73,20H19c1.1,0,2-0.9,2-2v-0.27L20.03,18.09z" />
+	<path class="color-raster" d="M19.55,16.77l3.38-1.23c0.36-0.13,0.55-0.54,0.42-0.9c-0.1-0.28-0.37-0.46-0.66-0.46c-0.08,0-0.16,0.01-0.24,0.04l-3.38,1.23c-0.36,0.13-0.55,0.54-0.42,0.9c0.1,0.28,0.37,0.46,0.66,0.46C19.39,16.82,19.47,16.8,19.55,16.77z" />
+	<path class="color-raster" d="M15.77,21.45l-1.23-3.38c-0.1-0.28-0.37-0.46-0.66-0.46c-0.08,0-0.16,0.01-0.24,0.04c-0.36,0.13-0.55,0.54-0.42,0.9l1.23,3.38c0.1,0.28,0.37,0.46,0.66,0.46c0.08,0,0.16-0.01,0.24-0.04C15.72,22.22,15.91,21.81,15.77,21.45z" />
+	<path class="color-raster" d="M14.64,1.65c-0.36,0.13-0.55,0.54-0.42,0.9l1.23,3.38c0.1,0.28,0.37,0.46,0.66,0.46c0.08,0,0.16-0.01,0.24-0.04c0.36-0.13,0.55-0.54,0.42-0.9l-1.23-3.38c-0.1-0.28-0.37-0.46-0.66-0.46C14.8,1.61,14.72,1.62,14.64,1.65z" />
+	<path class="color-raster" d="M9.77,21.45l-1.23-3.38c-0.1-0.28-0.37-0.46-0.66-0.46c-0.08,0-0.16,0.01-0.24,0.04c-0.36,0.13-0.55,0.54-0.42,0.9l1.23,3.38c0.1,0.28,0.37,0.46,0.66,0.46c0.08,0,0.16-0.01,0.24-0.04C9.72,22.22,9.91,21.81,9.77,21.45z" />
+	<path class="color-raster" d="M1.55,15.77l3.38-1.23c0.36-0.13,0.55-0.54,0.42-0.9c-0.1-0.28-0.37-0.46-0.66-0.46c-0.08,0-0.16,0.01-0.24,0.04l-3.38,1.23c-0.36,0.13-0.55,0.54-0.42,0.9c0.1,0.28,0.37,0.46,0.66,0.46C1.39,15.82,1.47,15.8,1.55,15.77z" />
+	<path class="color-raster" d="M8.64,1.65c-0.36,0.13-0.55,0.54-0.42,0.9l1.23,3.38c0.1,0.28,0.37,0.46,0.66,0.46c0.08,0,0.16-0.01,0.24-0.04c0.36-0.13,0.55-0.54,0.42-0.9L9.54,2.07c-0.1-0.28-0.37-0.46-0.66-0.46C8.8,1.61,8.72,1.62,8.64,1.65z" />
+	<path class="color-raster" d="M4.45,7.23L1.07,8.46c-0.36,0.13-0.55,0.54-0.42,0.9c0.1,0.28,0.37,0.46,0.66,0.46c0.08,0,0.16-0.01,0.24-0.04l3.38-1.23c0.36-0.13,0.55-0.54,0.42-0.9c-0.1-0.28-0.37-0.46-0.66-0.46C4.61,7.18,4.53,7.2,4.45,7.23z" />
+	<path class="color-solid" d="M20.03,18.09c-0.23,0.08-0.47,0.13-0.72,0.13c-0.88,0-1.67-0.56-1.98-1.38c-0.19-0.53-0.17-1.1,0.07-1.61c0.24-0.51,0.66-0.89,1.18-1.09L21,13.27v-1.53l-0.97,0.35c-0.23,0.08-0.47,0.13-0.72,0.13c-0.88,0-1.67-0.56-1.98-1.38c-0.4-1.09,0.17-2.3,1.26-2.69L21,7.27V6c0-1.1-0.9-2-2-2h-1.27l0.35,0.97c0.4,1.09-0.17,2.3-1.26,2.69c-0.23,0.08-0.47,0.13-0.72,0.13c-0.88,0-1.67-0.56-1.98-1.38L13.27,4h-1.53l0.35,0.97c0.4,1.09-0.17,2.3-1.26,2.69c-0.23,0.08-0.47,0.13-0.72,0.13c-0.88,0-1.67-0.56-1.98-1.38L7.27,4H5C3.9,4,3,4.9,3,6v0.27l0.97-0.35C4.2,5.83,4.44,5.78,4.69,5.78c0.88,0,1.67,0.56,1.98,1.38c0.19,0.53,0.17,1.1-0.07,1.61C6.36,9.28,5.94,9.67,5.41,9.86L3,10.73v1.53l0.97-0.35c0.23-0.08,0.47-0.13,0.72-0.13c0.88,0,1.67,0.56,1.98,1.38c0.19,0.53,0.17,1.1-0.07,1.61c-0.24,0.51-0.66,0.89-1.18,1.09L3,16.73V18c0,1.1,0.9,2,2,2h1.27l-0.35-0.97c-0.4-1.09,0.17-2.3,1.26-2.69c0.23-0.08,0.47-0.13,0.72-0.13c0.88,0,1.67,0.56,1.98,1.38L10.73,20h1.53l-0.35-0.97c-0.4-1.09,0.17-2.3,1.26-2.69c0.23-0.08,0.47-0.13,0.72-0.13c0.88,0,1.67,0.56,1.98,1.38L16.73,20H19c1.1,0,2-0.9,2-2v-0.27L20.03,18.09z" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/raster-relight-tool.svg b/frontend/assets/24px-two-tone/raster-relight-tool.svg
index 8f5cabba4d..d0c527b78e 100644
--- a/frontend/assets/24px-two-tone/raster-relight-tool.svg
+++ b/frontend/assets/24px-two-tone/raster-relight-tool.svg
@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="#e4bb72" d="M13,11c-1.5-1.5-3.83-2.17-4.5-1.5l-2.48,2.48c1.16,0.27,2.49,1.08,3.71,2.29	c1.26,1.26,2.04,2.56,2.29,3.71l2.48-2.48C15.17,14.83,14.5,12.5,13,11z" />
-	<path fill="#e4bb72" d="M22.5,1.5c-1-1-2.5-1.5-3-1l-8,8c1.33,0,4,2.67,4,4l8-8C24,4,23.5,2.5,22.5,1.5z M17.77,7.23l-1.55,1.55c-0.13,0.13-0.33,0.13-0.45,0l-0.55-0.55c-0.13-0.13-0.13-0.33,0-0.45l1.55-1.55c0.13-0.13,0.33-0.13,0.45,0l0.55,0.55C17.9,6.9,17.9,7.1,17.77,7.23z" />
-	<path fill="#ffffff" d="M8.74,15.26c-1.67-1.67-3.55-2.45-4.29-1.71c-0.73,0.73,0.04,2.61,1.71,4.29	c1.67,1.67,3.55,2.45,4.29,1.71C11.19,18.81,10.41,16.93,8.74,15.26z" />
-	<path fill="#ffffff" d="M2.5,22.25c-0.19,0-0.38-0.07-0.53-0.22c-0.29-0.29-0.29-0.77,0-1.06l2-2c0.29-0.29,0.77-0.29,1.06,0s0.29,0.77,0,1.06l-2,2C2.88,22.18,2.69,22.25,2.5,22.25z" />
-	<path fill="#ffffff" d="M7,23.75c-0.06,0-0.12-0.01-0.18-0.02c-0.4-0.1-0.65-0.51-0.55-0.91l0.5-2c0.1-0.4,0.5-0.65,0.91-0.55c0.4,0.1,0.65,0.51,0.55,0.91l-0.5,2C7.64,23.52,7.34,23.75,7,23.75z" />
-	<path fill="#ffffff" d="M1,17.75c-0.34,0-0.64-0.23-0.73-0.57c-0.1-0.4,0.14-0.81,0.55-0.91l2-0.5c0.4-0.1,0.81,0.14,0.91,0.55c0.1,0.4-0.14,0.81-0.55,0.91l-2,0.5C1.12,17.74,1.06,17.75,1,17.75z" />
+	<path class="color-raster" d="M13,11c-1.5-1.5-3.83-2.17-4.5-1.5l-2.48,2.48c1.16,0.27,2.49,1.08,3.71,2.29	c1.26,1.26,2.04,2.56,2.29,3.71l2.48-2.48C15.17,14.83,14.5,12.5,13,11z" />
+	<path class="color-raster" d="M22.5,1.5c-1-1-2.5-1.5-3-1l-8,8c1.33,0,4,2.67,4,4l8-8C24,4,23.5,2.5,22.5,1.5z M17.77,7.23l-1.55,1.55c-0.13,0.13-0.33,0.13-0.45,0l-0.55-0.55c-0.13-0.13-0.13-0.33,0-0.45l1.55-1.55c0.13-0.13,0.33-0.13,0.45,0l0.55,0.55C17.9,6.9,17.9,7.1,17.77,7.23z" />
+	<path class="color-solid" d="M8.74,15.26c-1.67-1.67-3.55-2.45-4.29-1.71c-0.73,0.73,0.04,2.61,1.71,4.29	c1.67,1.67,3.55,2.45,4.29,1.71C11.19,18.81,10.41,16.93,8.74,15.26z" />
+	<path class="color-solid" d="M2.5,22.25c-0.19,0-0.38-0.07-0.53-0.22c-0.29-0.29-0.29-0.77,0-1.06l2-2c0.29-0.29,0.77-0.29,1.06,0s0.29,0.77,0,1.06l-2,2C2.88,22.18,2.69,22.25,2.5,22.25z" />
+	<path class="color-solid" d="M7,23.75c-0.06,0-0.12-0.01-0.18-0.02c-0.4-0.1-0.65-0.51-0.55-0.91l0.5-2c0.1-0.4,0.5-0.65,0.91-0.55c0.4,0.1,0.65,0.51,0.55,0.91l-0.5,2C7.64,23.52,7.34,23.75,7,23.75z" />
+	<path class="color-solid" d="M1,17.75c-0.34,0-0.64-0.23-0.73-0.57c-0.1-0.4,0.14-0.81,0.55-0.91l2-0.5c0.4-0.1,0.81,0.14,0.91,0.55c0.1,0.4-0.14,0.81-0.55,0.91l-2,0.5C1.12,17.74,1.06,17.75,1,17.75z" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/vector-ellipse-tool.svg b/frontend/assets/24px-two-tone/vector-ellipse-tool.svg
index 21a2d9d92b..36f2952ccf 100644
--- a/frontend/assets/24px-two-tone/vector-ellipse-tool.svg
+++ b/frontend/assets/24px-two-tone/vector-ellipse-tool.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="#ffffff" d="M12,6c4.41,0,8,2.69,8,6s-3.59,6-8,6s-8-2.69-8-6S7.59,6,12,6 M12,4C6.48,4,2,7.58,2,12s4.48,8,10,8s10-3.58,10-8S17.52,4,12,4L12,4z" />
-	<ellipse fill="#65bbe5" cx="12" cy="12" rx="6.5" ry="4.5" />
+	<path class="color-solid" d="M12,6c4.41,0,8,2.69,8,6s-3.59,6-8,6s-8-2.69-8-6S7.59,6,12,6 M12,4C6.48,4,2,7.58,2,12s4.48,8,10,8s10-3.58,10-8S17.52,4,12,4L12,4z" />
+	<ellipse class="color-vector" cx="12" cy="12" rx="6.5" ry="4.5" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/vector-freehand-tool.svg b/frontend/assets/24px-two-tone/vector-freehand-tool.svg
index 113454906b..fa190badaa 100644
--- a/frontend/assets/24px-two-tone/vector-freehand-tool.svg
+++ b/frontend/assets/24px-two-tone/vector-freehand-tool.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="#65bbe5" d="M21.98,15.79c-0.12-0.54-0.65-0.89-1.19-0.77c-0.08,0.02-2.09,0.46-4.39,2.18c-0.77,0.57-1.4,1.09-1.99,1.57c-1.21,0.99-2.17,1.78-3.69,2.47c-0.59,0.27-1.84,0.72-3.57,0.75l-3.61,1.55C4.68,23.84,5.81,24,6.94,24c0.02,0,0.05,0,0.07,0c2.2-0.01,3.8-0.59,4.55-0.94c1.75-0.8,2.85-1.7,4.13-2.75c0.56-0.46,1.17-0.96,1.91-1.51c1.93-1.44,3.6-1.82,3.61-1.82C21.75,16.86,22.09,16.33,21.98,15.79z" />
-	<path fill="#65bbe5" d="M18.5,5.5c-1-1-2.5-1.5-3-1L5,15c0.39,0.24,1.23,0.1,1.59,0.38c0.36,0.28,0.3,1.06,0.63,1.4c0.33,0.33,1.11,0.28,1.4,0.63C8.9,17.77,8.76,18.61,9,19L19.5,8.5C20,8,19.5,6.5,18.5,5.5z M16.5,7.5l-7,7c-0.14,0.14-0.32,0.21-0.5,0.21s-0.36-0.07-0.5-0.21c-0.28-0.28-0.28-0.72,0-1l7-7c0.28-0.28,0.72-0.28,1,0C16.78,6.78,16.78,7.22,16.5,7.5z" />
-	<path fill="#ffffff" d="M7.35,18.47l-2.39,1.71c-0.1-0.27-0.22-0.51-0.42-0.71c-0.2-0.2-0.44-0.32-0.71-0.42l1.71-2.39C5.14,16.61,4.5,16.42,4,16l-3,7l7-3C7.58,19.5,7.39,18.86,7.35,18.47z" />
-	<path fill="#ffffff" d="M21.99,2.01C21,1,19.5,0.5,19,1l-2,2c2,0,4,2,4,4l2-2C23.5,4.5,22.98,3.02,21.99,2.01z" />
+	<path class="color-vector" d="M21.98,15.79c-0.12-0.54-0.65-0.89-1.19-0.77c-0.08,0.02-2.09,0.46-4.39,2.18c-0.77,0.57-1.4,1.09-1.99,1.57c-1.21,0.99-2.17,1.78-3.69,2.47c-0.59,0.27-1.84,0.72-3.57,0.75l-3.61,1.55C4.68,23.84,5.81,24,6.94,24c0.02,0,0.05,0,0.07,0c2.2-0.01,3.8-0.59,4.55-0.94c1.75-0.8,2.85-1.7,4.13-2.75c0.56-0.46,1.17-0.96,1.91-1.51c1.93-1.44,3.6-1.82,3.61-1.82C21.75,16.86,22.09,16.33,21.98,15.79z" />
+	<path class="color-vector" d="M18.5,5.5c-1-1-2.5-1.5-3-1L5,15c0.39,0.24,1.23,0.1,1.59,0.38c0.36,0.28,0.3,1.06,0.63,1.4c0.33,0.33,1.11,0.28,1.4,0.63C8.9,17.77,8.76,18.61,9,19L19.5,8.5C20,8,19.5,6.5,18.5,5.5z M16.5,7.5l-7,7c-0.14,0.14-0.32,0.21-0.5,0.21s-0.36-0.07-0.5-0.21c-0.28-0.28-0.28-0.72,0-1l7-7c0.28-0.28,0.72-0.28,1,0C16.78,6.78,16.78,7.22,16.5,7.5z" />
+	<path class="color-solid" d="M7.35,18.47l-2.39,1.71c-0.1-0.27-0.22-0.51-0.42-0.71c-0.2-0.2-0.44-0.32-0.71-0.42l1.71-2.39C5.14,16.61,4.5,16.42,4,16l-3,7l7-3C7.58,19.5,7.39,18.86,7.35,18.47z" />
+	<path class="color-solid" d="M21.99,2.01C21,1,19.5,0.5,19,1l-2,2c2,0,4,2,4,4l2-2C23.5,4.5,22.98,3.02,21.99,2.01z" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/vector-line-tool.svg b/frontend/assets/24px-two-tone/vector-line-tool.svg
index 12b2fb0402..c51ecc5b10 100644
--- a/frontend/assets/24px-two-tone/vector-line-tool.svg
+++ b/frontend/assets/24px-two-tone/vector-line-tool.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="#65bbe5" d="M5.83,21.71h1.66c0.75,0,1.47-0.3,2-0.83l11.4-11.4c0.53-0.53,0.83-1.25,0.83-2V5.83L5.83,21.71z" />
-	<polygon fill="#ffffff" points="20.29,2.29 2.29,20.29 3.71,21.71 21.71,3.71" />
+	<path class="color-vector" d="M5.83,21.71h1.66c0.75,0,1.47-0.3,2-0.83l11.4-11.4c0.53-0.53,0.83-1.25,0.83-2V5.83L5.83,21.71z" />
+	<polygon class="color-solid" points="20.29,2.29 2.29,20.29 3.71,21.71 21.71,3.71" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/vector-path-tool.svg b/frontend/assets/24px-two-tone/vector-path-tool.svg
index 80c8f57bcf..495b164cdb 100644
--- a/frontend/assets/24px-two-tone/vector-path-tool.svg
+++ b/frontend/assets/24px-two-tone/vector-path-tool.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<polygon fill="#ffffff" points="5,0 5,17 10,12 17,12" />
-	<path fill="#65bbe5" d="M20.77,14.36c-0.35-0.42-0.98-0.48-1.41-0.13c-1.04,0.87-2.19,1.6-3.36,2.24V16h-6v2.9c-2.88,0.84-5.07,1.1-5.11,1.11c-0.55,0.06-0.94,0.56-0.88,1.11C4.06,21.62,4.5,22,5,22c0.04,0,0.07,0,0.11-0.01c0.17-0.02,2.18-0.26,4.89-1.01V22h6v-3.28c1.6-0.79,3.2-1.75,4.64-2.95C21.06,15.42,21.12,14.78,20.77,14.36z M14,20h-2v-2h2V20z" />
+	<polygon class="color-solid" points="5,0 5,17 10,12 17,12" />
+	<path class="color-vector" d="M20.77,14.36c-0.35-0.42-0.98-0.48-1.41-0.13c-1.04,0.87-2.19,1.6-3.36,2.24V16h-6v2.9c-2.88,0.84-5.07,1.1-5.11,1.11c-0.55,0.06-0.94,0.56-0.88,1.11C4.06,21.62,4.5,22,5,22c0.04,0,0.07,0,0.11-0.01c0.17-0.02,2.18-0.26,4.89-1.01V22h6v-3.28c1.6-0.79,3.2-1.75,4.64-2.95C21.06,15.42,21.12,14.78,20.77,14.36z M14,20h-2v-2h2V20z" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/vector-pen-tool.svg b/frontend/assets/24px-two-tone/vector-pen-tool.svg
index f3f07d38cd..48a821c7aa 100644
--- a/frontend/assets/24px-two-tone/vector-pen-tool.svg
+++ b/frontend/assets/24px-two-tone/vector-pen-tool.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="#65bbe5" d="M22.47,4.86C21.91,3.14,19.23,1.15,17.26,1c-3.4,0.35-6.56,2.34-6.32,4.93c0.14-0.29,0.31-0.57,0.53-0.84c0.17-0.21,0.39-0.37,0.63-0.46c0.61-0.23,1.23-0.35,1.86-0.35c1.61,0,3.22,0.8,4.43,2.2c1.07,1.24,1.62,2.72,1.45,3.87c-0.04,0.26-0.14,0.5-0.3,0.7c-0.3,0.38-0.68,0.68-1.11,0.91C22.67,12.01,22.59,6.63,22.47,4.86z" />
-	<path fill="#ffffff" d="M12.63,6.03c-3.51,2.79-7.69,5.59-7.81,6.45C4.48,15,1,21,1,22l6.49-7.21c-0.21-0.55-0.08-1.24,0.38-1.77c0.63-0.73,1.65-0.88,2.28-0.34c0.63,0.54,0.62,1.58-0.02,2.3c-0.41,0.47-0.98,0.7-1.51,0.65L2,23c1,0,7.12-4.65,10.48-4.78c0.33-0.01,3.71-4.64,5.87-8.09C18.59,8.47,15.81,4.74,12.63,6.03z" />
+	<path class="color-vector" d="M22.47,4.86C21.91,3.14,19.23,1.15,17.26,1c-3.4,0.35-6.56,2.34-6.32,4.93c0.14-0.29,0.31-0.57,0.53-0.84c0.17-0.21,0.39-0.37,0.63-0.46c0.61-0.23,1.23-0.35,1.86-0.35c1.61,0,3.22,0.8,4.43,2.2c1.07,1.24,1.62,2.72,1.45,3.87c-0.04,0.26-0.14,0.5-0.3,0.7c-0.3,0.38-0.68,0.68-1.11,0.91C22.67,12.01,22.59,6.63,22.47,4.86z" />
+	<path class="color-solid" d="M12.63,6.03c-3.51,2.79-7.69,5.59-7.81,6.45C4.48,15,1,21,1,22l6.49-7.21c-0.21-0.55-0.08-1.24,0.38-1.77c0.63-0.73,1.65-0.88,2.28-0.34c0.63,0.54,0.62,1.58-0.02,2.3c-0.41,0.47-0.98,0.7-1.51,0.65L2,23c1,0,7.12-4.65,10.48-4.78c0.33-0.01,3.71-4.64,5.87-8.09C18.59,8.47,15.81,4.74,12.63,6.03z" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/vector-rectangle-tool.svg b/frontend/assets/24px-two-tone/vector-rectangle-tool.svg
index ba64eb59bf..ea7b788eae 100644
--- a/frontend/assets/24px-two-tone/vector-rectangle-tool.svg
+++ b/frontend/assets/24px-two-tone/vector-rectangle-tool.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="#ffffff" d="M20,6v12H4V6H20 M22,4H2v16h20V4L22,4z" />
-	<rect x="5.5" y="7.5" fill="#65bbe5" width="13" height="9" />
+	<path class="color-solid" d="M20,6v12H4V6H20 M22,4H2v16h20V4L22,4z" />
+	<rect x="5.5" y="7.5" class="color-vector" width="13" height="9" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/vector-shape-tool.svg b/frontend/assets/24px-two-tone/vector-shape-tool.svg
index 4e51aa9c5d..692f6f5eb4 100644
--- a/frontend/assets/24px-two-tone/vector-shape-tool.svg
+++ b/frontend/assets/24px-two-tone/vector-shape-tool.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="#ffffff" d="M12,4.47l7.65,5.55L16.73,19H7.27l-2.92-8.98L12,4.47 M12,2L2,9.26L5.82,21h12.36L22,9.26L12,2L12,2z" />
-	<polygon fill="#65bbe5" points="12,6.32 6.12,10.6 8.36,17.5 15.64,17.5 17.88,10.6" />
+	<path class="color-solid" d="M12,4.47l7.65,5.55L16.73,19H7.27l-2.92-8.98L12,4.47 M12,2L2,9.26L5.82,21h12.36L22,9.26L12,2L12,2z" />
+	<polygon class="color-vector" points="12,6.32 6.12,10.6 8.36,17.5 15.64,17.5 17.88,10.6" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/vector-spline-tool.svg b/frontend/assets/24px-two-tone/vector-spline-tool.svg
index 47eac1b4f8..6ab6542926 100644
--- a/frontend/assets/24px-two-tone/vector-spline-tool.svg
+++ b/frontend/assets/24px-two-tone/vector-spline-tool.svg
@@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="#ffffff" d="M12.94,5.12c1.37-0.78,3.61-1.54,7.22-2.13l-0.32-1.97c-3.88,0.63-6.69,1.54-8.5,2.76C12.01,4.05,12.56,4.52,12.94,5.12z" />
-	<path fill="#ffffff" d="M11.06,18.88c-1.37,0.78-3.61,1.54-7.22,2.13l0.32,1.97c3.88-0.63,6.69-1.54,8.5-2.76C12,19.95,11.44,19.48,11.06,18.88z" />
-	<path fill="#ffffff" d="M11.8,9.99c-0.53,0.32-1.14,0.51-1.8,0.51c-0.08,0-0.16-0.02-0.24-0.02c0.42,0.74,0.94,1.45,1.44,2.12c0.36,0.48,0.7,0.95,1,1.41c0.53-0.32,1.14-0.51,1.8-0.51c0.08,0,0.16,0.02,0.24,0.02c-0.42-0.74-0.94-1.45-1.44-2.12C12.44,10.92,12.1,10.45,11.8,9.99z" />
-	<circle fill="#65bbe5" cx="14" cy="17" r="2" />
-	<circle fill="#65bbe5" cx="10" cy="7" r="2" />
+	<path class="color-solid" d="M12.94,5.12c1.37-0.78,3.61-1.54,7.22-2.13l-0.32-1.97c-3.88,0.63-6.69,1.54-8.5,2.76C12.01,4.05,12.56,4.52,12.94,5.12z" />
+	<path class="color-solid" d="M11.06,18.88c-1.37,0.78-3.61,1.54-7.22,2.13l0.32,1.97c3.88-0.63,6.69-1.54,8.5-2.76C12,19.95,11.44,19.48,11.06,18.88z" />
+	<path class="color-solid" d="M11.8,9.99c-0.53,0.32-1.14,0.51-1.8,0.51c-0.08,0-0.16-0.02-0.24-0.02c0.42,0.74,0.94,1.45,1.44,2.12c0.36,0.48,0.7,0.95,1,1.41c0.53-0.32,1.14-0.51,1.8-0.51c0.08,0,0.16,0.02,0.24,0.02c-0.42-0.74-0.94-1.45-1.44-2.12C12.44,10.92,12.1,10.45,11.8,9.99z" />
+	<circle class="color-vector" cx="14" cy="17" r="2" />
+	<circle class="color-vector" cx="10" cy="7" r="2" />
 </svg>
diff --git a/frontend/assets/24px-two-tone/vector-text-tool.svg b/frontend/assets/24px-two-tone/vector-text-tool.svg
index 52a9b81d41..ce43e04b8b 100644
--- a/frontend/assets/24px-two-tone/vector-text-tool.svg
+++ b/frontend/assets/24px-two-tone/vector-text-tool.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="#ffffff" d="M4,3v5h1c0,0,0-3,4-3h2v13.5c0,1.1,0,2-3,2V22h9v-1.5c-3,0-3-0.9-3-2V5h2c4,0,4,3,4,3h1V3H4z" />
-	<path fill="#65bbe5" d="M5,20H1v2h5v-1C6,20.45,5.55,20,5,20z" />
-	<path fill="#65bbe5" d="M20,20c-0.55,0-1,0.45-1,1v1h5v-2H20z" />
+	<path class="color-solid" d="M4,3v5h1c0,0,0-3,4-3h2v13.5c0,1.1,0,2-3,2V22h9v-1.5c-3,0-3-0.9-3-2V5h2c4,0,4,3,4,3h1V3H4z" />
+	<path class="color-vector" d="M5,20H1v2h5v-1C6,20.45,5.55,20,5,20z" />
+	<path class="color-vector" d="M20,20c-0.55,0-1,0.45-1,1v1h5v-2H20z" />
 </svg>
diff --git a/frontend/public/safari-pinned-tab.svg b/frontend/public/safari-pinned-tab.svg
index 8ab2cf0021..1aa9c242a0 100644
--- a/frontend/public/safari-pinned-tab.svg
+++ b/frontend/public/safari-pinned-tab.svg
@@ -4,9 +4,6 @@
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
  width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
  preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.14, written by Peter Selinger 2001-2017
-</metadata>
 <g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
 fill="#000000" stroke="none">
 <path d="M1935 6994 c-186 -39 -328 -137 -415 -287 -24 -39 -51 -84 -61 -99
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 44633ca2eb..5491e07777 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -61,13 +61,23 @@
 	--color-accent-disabled: #416277;
 	--color-accent-disabled-rgb: 65, 98, 119;
 
-	--color-data-raster: #e4bb72;
-	--color-data-raster-rgb: 228, 187, 114;
-
 	--color-node-background: #f1decd;
 	--color-node-background-rgb: 241, 222, 205;
 	--color-node-icon: #473a3a;
 	--color-node-icon-rgb: 71, 58, 58;
+
+	--color-data-general: #c5c5c5;
+	--color-data-general-rgb: 197, 197, 197;
+	--color-data-vector: #65bbe5;
+	--color-data-vector-rgb: 101, 187, 229;
+	--color-data-raster: #e4bb72;
+	--color-data-raster-rgb: 228, 187, 114;
+	--color-data-mask: #8d85c7;
+	--color-data-mask-rgb: 141, 133, 199;
+	--color-data-unused1: #d6536e;
+	--color-data-unused1-rgb: 214, 83, 110;
+	--color-data-unused2: #70a898;
+	--color-data-unused2-rgb: 112, 168, 152;
 }
 
 html,
diff --git a/frontend/src/components/panels/Document.vue b/frontend/src/components/panels/Document.vue
index 8774766368..db98057071 100644
--- a/frontend/src/components/panels/Document.vue
+++ b/frontend/src/components/panels/Document.vue
@@ -142,6 +142,22 @@
 						opacity: 1;
 					}
 				}
+
+				.color-solid {
+					fill: var(--color-f-white);
+				}
+
+				.color-general {
+					fill: var(--color-data-general);
+				}
+
+				.color-vector {
+					fill: var(--color-data-vector);
+				}
+
+				.color-raster {
+					fill: var(--color-data-raster);
+				}
 			}
 
 			.spacer {