From a0f6a55a34c98e5a192cc7b5ec96f7ce3e716e14 Mon Sep 17 00:00:00 2001
From: Andy O'Neill <andy@scratch.mit.edu>
Date: Mon, 27 Mar 2023 15:37:57 -0400
Subject: [PATCH 1/4] feat: use purple theme

---
 src/components/button/button.css               |  4 ++--
 src/components/color-picker/color-picker.css   |  5 +++--
 .../icons/fill-horz-gradient-enabled.svg       |  2 +-
 .../color-picker/icons/fill-radial-enabled.svg |  4 ++--
 .../color-picker/icons/fill-solid-enabled.svg  |  4 ++--
 .../icons/fill-vert-gradient-enabled.svg       |  4 ++--
 src/components/color-picker/icons/swap.svg     |  4 ++--
 src/components/dropdown/dropdown-caret.svg     |  4 ++--
 src/components/dropdown/dropdown.css           |  2 +-
 src/components/fixed-tools/fixed-tools.css     |  2 +-
 src/components/fixed-tools/icons/group.svg     | 18 +++++++++---------
 src/components/fixed-tools/icons/redo.svg      |  4 ++--
 src/components/fixed-tools/icons/send-back.svg |  4 ++--
 .../fixed-tools/icons/send-backward.svg        |  4 ++--
 .../fixed-tools/icons/send-forward.svg         |  4 ++--
 .../fixed-tools/icons/send-front.svg           |  4 ++--
 src/components/fixed-tools/icons/undo.svg      |  4 ++--
 src/components/fixed-tools/icons/ungroup.svg   | 16 ++++++++--------
 src/components/font-dropdown/font-dropdown.css |  2 +-
 src/components/forms/input.css                 |  4 ++--
 src/components/mode-tools/icons/copy.svg       |  6 +++---
 .../mode-tools/icons/curved-point.svg          | 14 +++++++-------
 src/components/mode-tools/icons/delete.svg     |  4 ++--
 .../mode-tools/icons/flip-horizontal.svg       |  6 +++---
 .../mode-tools/icons/flip-vertical.svg         |  6 +++---
 src/components/mode-tools/icons/paste.svg      |  6 +++---
 .../mode-tools/icons/straight-point.svg        |  6 +++---
 .../paint-editor/icons/rotation-point.svg      |  4 ++--
 src/components/paint-editor/paint-editor.css   |  2 +-
 .../tool-select-base/tool-select-base.css      |  2 +-
 src/css/colors.css                             |  5 ++---
 31 files changed, 80 insertions(+), 80 deletions(-)

diff --git a/src/components/button/button.css b/src/components/button/button.css
index e807cd89..1954084a 100644
--- a/src/components/button/button.css
+++ b/src/components/button/button.css
@@ -6,10 +6,10 @@
     user-select: none;
 }
 .button:active {
-    background-color: $motion-transparent; 
+    background-color: $looks-transparent;
 }
 .highlighted.button {
-    background-color: $motion-transparent; 
+    background-color: $looks-transparent;
 }
 .mod-disabled {
     cursor: auto;
diff --git a/src/components/color-picker/color-picker.css b/src/components/color-picker/color-picker.css
index 77987fb5..15bf43c4 100644
--- a/src/components/color-picker/color-picker.css
+++ b/src/components/color-picker/color-picker.css
@@ -1,3 +1,4 @@
+@import "../../css/colors";
 @import "../../css/units";
 
 /* Popover styles */
@@ -79,8 +80,8 @@
 }
 
 .active-swatch {
-    border: 1px solid #4C97FF;
-    box-shadow: 0px 0px 0px 3px hsla(215, 100%, 65%, 0.2);
+    border: 1px solid $looks-tertiary;
+    box-shadow: 0px 0px 0px 3px $looks-transparent;
 }
 
 .swatch-icon {
diff --git a/src/components/color-picker/icons/fill-horz-gradient-enabled.svg b/src/components/color-picker/icons/fill-horz-gradient-enabled.svg
index 0d19dc39..88b14d87 100644
--- a/src/components/color-picker/icons/fill-horz-gradient-enabled.svg
+++ b/src/components/color-picker/icons/fill-horz-gradient-enabled.svg
@@ -6,7 +6,7 @@
     <defs>
         <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
             <stop stop-color="#FFFFFF" offset="0%"></stop>
-            <stop stop-color="#4C97FF" offset="100%"></stop>
+            <stop stop-color="#774DCB" offset="100%"></stop>
         </linearGradient>
     </defs>
     <g id="fill-horz-gradient-enabled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-opacity="0.15">
diff --git a/src/components/color-picker/icons/fill-radial-enabled.svg b/src/components/color-picker/icons/fill-radial-enabled.svg
index 1c7416a6..44336c2c 100644
--- a/src/components/color-picker/icons/fill-radial-enabled.svg
+++ b/src/components/color-picker/icons/fill-radial-enabled.svg
@@ -5,11 +5,11 @@
     <desc>Created with Sketch.</desc>
     <defs>
         <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="39.3896484%" id="radialGradient-1">
-            <stop stop-color="#4C97FF" offset="0%"></stop>
+            <stop stop-color="#774DCB" offset="0%"></stop>
             <stop stop-color="#FFFFFF" offset="100%"></stop>
         </radialGradient>
     </defs>
     <g id="fill-radial-enabled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-opacity="0.15">
         <rect id="Radial" stroke="#000000" fill="url(#radialGradient-1)" x="0.5" y="0.5" width="19" height="19" rx="4"></rect>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/color-picker/icons/fill-solid-enabled.svg b/src/components/color-picker/icons/fill-solid-enabled.svg
index aab0d9d5..23afa639 100644
--- a/src/components/color-picker/icons/fill-solid-enabled.svg
+++ b/src/components/color-picker/icons/fill-solid-enabled.svg
@@ -5,6 +5,6 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="fill-solid-enabled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-opacity="0.15">
-        <rect id="Solid" stroke="#000000" fill="#4C97FF" x="0.5" y="0.5" width="19" height="19" rx="4"></rect>
+        <rect id="Solid" stroke="#000000" fill="#774DCB" x="0.5" y="0.5" width="19" height="19" rx="4"></rect>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/color-picker/icons/fill-vert-gradient-enabled.svg b/src/components/color-picker/icons/fill-vert-gradient-enabled.svg
index 4a5d4bb1..912d1aba 100644
--- a/src/components/color-picker/icons/fill-vert-gradient-enabled.svg
+++ b/src/components/color-picker/icons/fill-vert-gradient-enabled.svg
@@ -6,10 +6,10 @@
     <defs>
         <linearGradient x1="50%" y1="100%" x2="50%" y2="3.061617e-15%" id="linearGradient-1">
             <stop stop-color="#FFFFFF" offset="0%"></stop>
-            <stop stop-color="#4C97FF" offset="100%"></stop>
+            <stop stop-color="#774DCB" offset="100%"></stop>
         </linearGradient>
     </defs>
     <g id="fill-vert-gradient-enabled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-opacity="0.15">
         <rect id="Vertical" stroke="#000000" fill="url(#linearGradient-1)" x="0.5" y="0.5" width="19" height="19" rx="4"></rect>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/color-picker/icons/swap.svg b/src/components/color-picker/icons/swap.svg
index 042218fd..4d79e092 100644
--- a/src/components/color-picker/icons/swap.svg
+++ b/src/components/color-picker/icons/swap.svg
@@ -5,10 +5,10 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="swap" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Swap-v2" transform="translate(2.000000, 2.000000)" fill="#4C97FF">
+        <g id="Swap-v2" transform="translate(2.000000, 2.000000)" fill="#774DCB">
             <path d="M3.69424597,2.00682151 L7.95663608,2.66498231 C8.44536222,2.73588913 8.7900887,3.24405473 8.7176525,3.79585529 C8.66179809,4.24129561 8.34150792,4.58764819 7.95663608,4.64128284 L3.69424597,5.30126176 L3.69424597,6.79666856 C3.69424597,7.22392764 3.23781067,7.42846657 2.97250219,7.13483958 L0.120436084,3.97403142 C-0.0401453614,3.78767373 -0.0401453614,3.48404706 0.120436084,3.30587093 L2.97250219,0.135972153 C3.23781067,-0.157654834 3.69424597,0.0559747078 3.69424597,0.474143173 L3.69424597,2.00682151 Z M12.305754,10.7340942 L12.305754,9.2014159 C12.305754,8.78324744 12.7621893,8.56961789 13.0274978,8.86324488 L15.8795639,12.0331437 C16.0401454,12.2113198 16.0401454,12.5149465 15.8795639,12.7013041 L13.0274978,15.8621123 C12.7621893,16.1557393 12.305754,15.9512004 12.305754,15.5239413 L12.305754,14.0285345 L8.04336392,13.3685556 C7.65849208,13.3149209 7.33820191,12.9685683 7.2823475,12.523128 C7.2099113,11.9713275 7.55463778,11.4631619 8.04336392,11.392255 L12.305754,10.7340942 Z" id="Swap-v1"></path>
             <path d="M11.2727273,1.45454545 L13.4545455,1.45454545 C14.0567273,1.45454545 14.5454545,1.94327273 14.5454545,2.54545455 L14.5454545,4.72727273 C14.5454545,5.33054545 14.0567273,5.81818182 13.4545455,5.81818182 L11.2727273,5.81818182 C10.6705455,5.81818182 10.1818182,5.33054545 10.1818182,4.72727273 L10.1818182,2.54545455 C10.1818182,1.94327273 10.6705455,1.45454545 11.2727273,1.45454545" id="Fill-6" fill-opacity="0.5"></path>
             <path d="M2.54545455,10.1818182 L4.72727273,10.1818182 C5.32945455,10.1818182 5.81818182,10.6705455 5.81818182,11.2727273 L5.81818182,13.4545455 C5.81818182,14.0578182 5.32945455,14.5454545 4.72727273,14.5454545 L2.54545455,14.5454545 C1.94327273,14.5454545 1.45454545,14.0578182 1.45454545,13.4545455 L1.45454545,11.2727273 C1.45454545,10.6705455 1.94327273,10.1818182 2.54545455,10.1818182" id="Fill-6-Copy" fill-opacity="0.5"></path>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/dropdown/dropdown-caret.svg b/src/components/dropdown/dropdown-caret.svg
index 42ef29f4..dd05d610 100644
--- a/src/components/dropdown/dropdown-caret.svg
+++ b/src/components/dropdown/dropdown-caret.svg
@@ -5,8 +5,8 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="dropdown-caret" fill="#4C97FF">
+        <g id="dropdown-caret" fill="#774DCB">
             <path d="M4,5 C3.72520708,5 3.45163006,4.89695045 3.24127973,4.68965311 L0.314613572,1.80666227 C-0.104871191,1.39326583 -0.104871191,0.724642023 0.314613572,0.310047331 C0.732882438,-0.10334911 7.26711756,-0.10334911 7.68538643,0.310047331 C8.10487119,0.723443772 8.10487119,1.39326583 7.68538643,1.80666227 L4.75993617,4.68965311 C4.54958583,4.89695045 4.27600882,5 4,5"></path>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/dropdown/dropdown.css b/src/components/dropdown/dropdown.css
index 6219da4c..d9d58083 100644
--- a/src/components/dropdown/dropdown.css
+++ b/src/components/dropdown/dropdown.css
@@ -7,7 +7,7 @@ $arrow-border-width: 14px;
     border-radius: 5px;
     overflow: visible;
     min-width: 3.5rem;
-    color: $motion-primary;
+    color: $looks-tertiary;
     padding: .5rem;
 }
 
diff --git a/src/components/fixed-tools/fixed-tools.css b/src/components/fixed-tools/fixed-tools.css
index 62c0a7d4..7e586e05 100644
--- a/src/components/fixed-tools/fixed-tools.css
+++ b/src/components/fixed-tools/fixed-tools.css
@@ -116,7 +116,7 @@ $border-radius: 0.25rem;
 }
 
 .mod-menu-item:hover {
-    background: $motion-transparent;
+    background: $looks-transparent;
 }
 
 .mod-disabled:hover {
diff --git a/src/components/fixed-tools/icons/group.svg b/src/components/fixed-tools/icons/group.svg
index a3a76f7f..0fd5abb8 100644
--- a/src/components/fixed-tools/icons/group.svg
+++ b/src/components/fixed-tools/icons/group.svg
@@ -7,14 +7,14 @@
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="group" stroke-width="0.75">
             <g id="group-icon" transform="translate(2.000000, 2.000000)">
-                <rect id="Rectangle-2" stroke="#4C97FF" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="0" y="0" width="3" height="3"></rect>
-                <rect id="Rectangle-2-Copy-2" stroke="#4C97FF" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="13" y="0" width="3" height="3"></rect>
-                <rect id="Rectangle-2-Copy" stroke="#4C97FF" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="0" y="13" width="3" height="3"></rect>
-                <rect id="Rectangle-2-Copy-3" stroke="#4C97FF" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="13" y="13" width="3" height="3"></rect>
-                <path d="M1.5,3 L1.5,13" id="Line" stroke="#4C97FF" stroke-linecap="square"></path>
-                <path d="M14.5,3 L14.5,13" id="Line-Copy" stroke="#4C97FF" stroke-linecap="square"></path>
-                <path d="M13,1.5 L3,1.5" id="Line-Copy-2" stroke="#4C97FF" stroke-linecap="square"></path>
-                <path d="M13,14.5 L3,14.5" id="Line-Copy-3" stroke="#4C97FF" stroke-linecap="square"></path>
+                <rect id="Rectangle-2" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="0" y="0" width="3" height="3"></rect>
+                <rect id="Rectangle-2-Copy-2" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="13" y="0" width="3" height="3"></rect>
+                <rect id="Rectangle-2-Copy" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="0" y="13" width="3" height="3"></rect>
+                <rect id="Rectangle-2-Copy-3" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="13" y="13" width="3" height="3"></rect>
+                <path d="M1.5,3 L1.5,13" id="Line" stroke="#774DCB" stroke-linecap="square"></path>
+                <path d="M14.5,3 L14.5,13" id="Line-Copy" stroke="#774DCB" stroke-linecap="square"></path>
+                <path d="M13,1.5 L3,1.5" id="Line-Copy-2" stroke="#774DCB" stroke-linecap="square"></path>
+                <path d="M13,14.5 L3,14.5" id="Line-Copy-3" stroke="#774DCB" stroke-linecap="square"></path>
                 <g id="Group" transform="translate(8.000000, 8.000000) rotate(180.000000) translate(-8.000000, -8.000000) translate(4.000000, 4.000000)" stroke="#575E75">
                     <rect id="Rectangle-3-Copy" fill="#FFFFFF" transform="translate(5.500000, 5.500000) rotate(180.000000) translate(-5.500000, -5.500000) " x="3" y="3" width="5" height="5" rx="0.5"></rect>
                     <rect id="Rectangle-3" fill="#575E75" transform="translate(2.500000, 2.500000) rotate(180.000000) translate(-2.500000, -2.500000) " x="0" y="0" width="5" height="5" rx="0.5"></rect>
@@ -22,4 +22,4 @@
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/fixed-tools/icons/redo.svg b/src/components/fixed-tools/icons/redo.svg
index 6a61e57b..aeeb00c5 100644
--- a/src/components/fixed-tools/icons/redo.svg
+++ b/src/components/fixed-tools/icons/redo.svg
@@ -5,8 +5,8 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="redo" fill="#4C97FF">
+        <g id="redo" fill="#774DCB">
             <path d="M17.5581635,12.7700651 L13.8403972,16.4941315 C13.5610922,16.7671364 13.1830854,16.9211391 12.7903784,16.9211391 C12.3990715,16.9211391 12.0210647,16.7671364 11.7403597,16.4941315 L8.02399342,12.7700651 C7.5969858,12.3430574 7.47098355,11.7060461 7.70198767,11.1530362 C7.93299179,10.6000263 8.46500128,10.24302 9.06701202,10.24302 L10.4040359,10.24302 C10.3690352,9.92101423 10.2780336,9.55700774 10.1240309,9.17200087 C10.07573,9.05999887 10.0260291,8.94799688 9.97002813,8.83599488 C9.89302676,8.70999263 9.90072689,8.67499201 9.79502501,8.52098926 C9.62702201,8.26898476 9.47301926,8.07998139 9.29031601,7.86297752 C8.9200094,7.4639704 8.47200141,7.12096429 7.99599292,6.86895979 C7.5129843,6.6169553 7.00897531,6.46295255 6.56096732,6.37895105 C6.11995945,6.30194968 5.71395221,6.29494955 5.47594796,6.29494955 C5.35694584,6.28794943 5.2029431,6.31594993 5.12594172,6.32295005 C5.04194022,6.32995018 4.99293935,6.3369503 4.99293935,6.3369503 C4.49593048,6.38595117 4.04792249,6.02194468 3.99892162,5.52493582 C3.95692087,5.10492832 4.20192524,4.72692158 4.57293186,4.58691908 C4.57293186,4.58691908 4.62193273,4.56591871 4.6989341,4.53791821 C4.78993573,4.50991771 4.87393723,4.46091684 5.06994072,4.40491584 C5.46194772,4.28591371 5.95895658,4.15991147 6.60996819,4.09691034 C7.25397968,4.04090934 8.03099354,4.05490959 8.85070816,4.22291259 C9.66902276,4.39791571 10.5300381,4.72692158 11.3280524,5.20293007 C11.7060591,5.44793444 12.1120663,5.73493956 12.427072,6.01494456 C12.5670745,6.11994643 12.8050787,6.35795068 12.9450812,6.5049533 C13.1060841,6.67295629 13.2530867,6.84095929 13.4007893,7.01596241 C13.9670994,7.7159749 14.3871069,8.47198839 14.6601118,9.15800062 C14.8211147,9.55000762 14.9331167,9.92101423 15.0171182,10.24302 L16.5151449,10.24302 C17.1171556,10.24302 17.6491651,10.6000263 17.8801692,11.1530362 C18.1111734,11.7060461 17.9851711,12.3430574 17.5581635,12.7700651" id="Fill-1" transform="translate(10.994247, 10.494247) rotate(-45.000000) translate(-10.994247, -10.494247) "></path>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/fixed-tools/icons/send-back.svg b/src/components/fixed-tools/icons/send-back.svg
index 9489b84f..80122540 100644
--- a/src/components/fixed-tools/icons/send-back.svg
+++ b/src/components/fixed-tools/icons/send-back.svg
@@ -7,7 +7,7 @@
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="send-back">
             <g transform="translate(10.000000, 10.000000) rotate(180.000000) translate(-10.000000, -10.000000) translate(2.000000, 3.000000)">
-                <path d="M12.3476736,5.92549723 L10.2407376,5.92549723 L9.33601611,12.7635981 C9.23807603,13.5476661 8.54025295,14.1003698 7.78121732,13.9846876 C7.16909181,13.8947126 6.69163391,13.3805697 6.6169546,12.7635981 L5.7122331,5.92549723 L3.65426714,5.92549723 C3.0678509,5.92549723 2.78504892,5.19284356 3.190276,4.76867564 L7.53514286,0.192803597 C7.79223558,-0.0642678658 8.20970517,-0.0642678658 8.45333113,0.192803597 L12.812889,4.76867564 C13.2168918,5.19284356 12.9230716,5.92549723 12.3476736,5.92549723" id="Fill-1" fill="#4C97FF"></path>
+                <path d="M12.3476736,5.92549723 L10.2407376,5.92549723 L9.33601611,12.7635981 C9.23807603,13.5476661 8.54025295,14.1003698 7.78121732,13.9846876 C7.16909181,13.8947126 6.69163391,13.3805697 6.6169546,12.7635981 L5.7122331,5.92549723 L3.65426714,5.92549723 C3.0678509,5.92549723 2.78504892,5.19284356 3.190276,4.76867564 L7.53514286,0.192803597 C7.79223558,-0.0642678658 8.20970517,-0.0642678658 8.45333113,0.192803597 L12.812889,4.76867564 C13.2168918,5.19284356 12.9230716,5.92549723 12.3476736,5.92549723" id="Fill-1" fill="#774DCB"></path>
                 <path d="M12,8 L16,8" id="Stroke-6" stroke="#575E75" stroke-linecap="round" stroke-linejoin="round"></path>
                 <path d="M12,10 L15,10" id="Stroke-6-Copy" stroke="#575E75" opacity="0.75" stroke-linecap="round" stroke-linejoin="round"></path>
                 <path d="M12,12 L14,12" id="Stroke-6-Copy-2" stroke="#575E75" opacity="0.5" stroke-linecap="round" stroke-linejoin="round"></path>
@@ -17,4 +17,4 @@
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/fixed-tools/icons/send-backward.svg b/src/components/fixed-tools/icons/send-backward.svg
index b599b48f..407078a7 100644
--- a/src/components/fixed-tools/icons/send-backward.svg
+++ b/src/components/fixed-tools/icons/send-backward.svg
@@ -7,10 +7,10 @@
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="send-backward">
             <g id="send-forward" transform="translate(10.000000, 10.000000) rotate(180.000000) translate(-10.000000, -10.000000) translate(2.000000, 3.000000)">
-                <path d="M12.3476736,5.92549723 L10.2407376,5.92549723 L9.33601611,12.7635981 C9.23807603,13.5476661 8.54025295,14.1003698 7.78121732,13.9846876 C7.16909181,13.8947126 6.69163391,13.3805697 6.6169546,12.7635981 L5.7122331,5.92549723 L3.65426714,5.92549723 C3.0678509,5.92549723 2.78504892,5.19284356 3.190276,4.76867564 L7.53514286,0.192803597 C7.79223558,-0.0642678658 8.20970517,-0.0642678658 8.45333113,0.192803597 L12.812889,4.76867564 C13.2168918,5.19284356 12.9230716,5.92549723 12.3476736,5.92549723" id="Fill-1" fill="#4C97FF"></path>
+                <path d="M12.3476736,5.92549723 L10.2407376,5.92549723 L9.33601611,12.7635981 C9.23807603,13.5476661 8.54025295,14.1003698 7.78121732,13.9846876 C7.16909181,13.8947126 6.69163391,13.3805697 6.6169546,12.7635981 L5.7122331,5.92549723 L3.65426714,5.92549723 C3.0678509,5.92549723 2.78504892,5.19284356 3.190276,4.76867564 L7.53514286,0.192803597 C7.79223558,-0.0642678658 8.20970517,-0.0642678658 8.45333113,0.192803597 L12.812889,4.76867564 C13.2168918,5.19284356 12.9230716,5.92549723 12.3476736,5.92549723" id="Fill-1" fill="#774DCB"></path>
                 <path d="M12,8 L16,8" id="Stroke-6" stroke="#575E75" stroke-linecap="round" stroke-linejoin="round"></path>
                 <path d="M0,8 L4,8" id="Stroke-10" stroke="#575E75" stroke-linecap="round" stroke-linejoin="round"></path>
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/fixed-tools/icons/send-forward.svg b/src/components/fixed-tools/icons/send-forward.svg
index 636bf26f..e6ec87f1 100644
--- a/src/components/fixed-tools/icons/send-forward.svg
+++ b/src/components/fixed-tools/icons/send-forward.svg
@@ -7,10 +7,10 @@
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="send-forward">
             <g transform="translate(2.000000, 3.000000)">
-                <path d="M12.3476736,5.92549723 L10.2407376,5.92549723 L9.33601611,12.7635981 C9.23807603,13.5476661 8.54025295,14.1003698 7.78121732,13.9846876 C7.16909181,13.8947126 6.69163391,13.3805697 6.6169546,12.7635981 L5.7122331,5.92549723 L3.65426714,5.92549723 C3.0678509,5.92549723 2.78504892,5.19284356 3.190276,4.76867564 L7.53514286,0.192803597 C7.79223558,-0.0642678658 8.20970517,-0.0642678658 8.45333113,0.192803597 L12.812889,4.76867564 C13.2168918,5.19284356 12.9230716,5.92549723 12.3476736,5.92549723" id="Fill-1" fill="#4C97FF"></path>
+                <path d="M12.3476736,5.92549723 L10.2407376,5.92549723 L9.33601611,12.7635981 C9.23807603,13.5476661 8.54025295,14.1003698 7.78121732,13.9846876 C7.16909181,13.8947126 6.69163391,13.3805697 6.6169546,12.7635981 L5.7122331,5.92549723 L3.65426714,5.92549723 C3.0678509,5.92549723 2.78504892,5.19284356 3.190276,4.76867564 L7.53514286,0.192803597 C7.79223558,-0.0642678658 8.20970517,-0.0642678658 8.45333113,0.192803597 L12.812889,4.76867564 C13.2168918,5.19284356 12.9230716,5.92549723 12.3476736,5.92549723" id="Fill-1" fill="#774DCB"></path>
                 <path d="M12,8 L16,8" id="Stroke-6" stroke="#575E75" stroke-linecap="round" stroke-linejoin="round"></path>
                 <path d="M0,8 L4,8" id="Stroke-10" stroke="#575E75" stroke-linecap="round" stroke-linejoin="round"></path>
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/fixed-tools/icons/send-front.svg b/src/components/fixed-tools/icons/send-front.svg
index c78a5c82..7d106d3c 100644
--- a/src/components/fixed-tools/icons/send-front.svg
+++ b/src/components/fixed-tools/icons/send-front.svg
@@ -7,7 +7,7 @@
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="send-front">
             <g transform="translate(2.000000, 3.000000)">
-                <path d="M12.3476736,5.92549723 L10.2407376,5.92549723 L9.33601611,12.7635981 C9.23807603,13.5476661 8.54025295,14.1003698 7.78121732,13.9846876 C7.16909181,13.8947126 6.69163391,13.3805697 6.6169546,12.7635981 L5.7122331,5.92549723 L3.65426714,5.92549723 C3.0678509,5.92549723 2.78504892,5.19284356 3.190276,4.76867564 L7.53514286,0.192803597 C7.79223558,-0.0642678658 8.20970517,-0.0642678658 8.45333113,0.192803597 L12.812889,4.76867564 C13.2168918,5.19284356 12.9230716,5.92549723 12.3476736,5.92549723" id="Fill-1" fill="#4C97FF"></path>
+                <path d="M12.3476736,5.92549723 L10.2407376,5.92549723 L9.33601611,12.7635981 C9.23807603,13.5476661 8.54025295,14.1003698 7.78121732,13.9846876 C7.16909181,13.8947126 6.69163391,13.3805697 6.6169546,12.7635981 L5.7122331,5.92549723 L3.65426714,5.92549723 C3.0678509,5.92549723 2.78504892,5.19284356 3.190276,4.76867564 L7.53514286,0.192803597 C7.79223558,-0.0642678658 8.20970517,-0.0642678658 8.45333113,0.192803597 L12.812889,4.76867564 C13.2168918,5.19284356 12.9230716,5.92549723 12.3476736,5.92549723" id="Fill-1" fill="#774DCB"></path>
                 <path d="M12,8 L16,8" id="Stroke-6" stroke="#575E75" stroke-linecap="round" stroke-linejoin="round"></path>
                 <path d="M12,10 L15,10" id="Stroke-6-Copy" stroke="#575E75" opacity="0.75" stroke-linecap="round" stroke-linejoin="round"></path>
                 <path d="M12,12 L14,12" id="Stroke-6-Copy-2" stroke="#575E75" opacity="0.5" stroke-linecap="round" stroke-linejoin="round"></path>
@@ -17,4 +17,4 @@
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/fixed-tools/icons/undo.svg b/src/components/fixed-tools/icons/undo.svg
index c9c28254..f6b3fc7f 100644
--- a/src/components/fixed-tools/icons/undo.svg
+++ b/src/components/fixed-tools/icons/undo.svg
@@ -5,8 +5,8 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="undo" fill="#4C97FF">
+        <g id="undo" fill="#774DCB">
             <path d="M15.5581635,12.7700651 L11.8403972,16.4941315 C11.5610922,16.7671364 11.1830854,16.9211391 10.7903784,16.9211391 C10.3990715,16.9211391 10.0210647,16.7671364 9.74035971,16.4941315 L6.02399342,12.7700651 C5.5969858,12.3430574 5.47098355,11.7060461 5.70198767,11.1530362 C5.93299179,10.6000263 6.46500128,10.24302 7.06701202,10.24302 L8.40403587,10.24302 C8.36903525,9.92101423 8.27803362,9.55700774 8.12403088,9.17200087 C8.07573002,9.05999887 8.02602913,8.94799688 7.97002813,8.83599488 C7.89302676,8.70999263 7.90072689,8.67499201 7.79502501,8.52098926 C7.62702201,8.26898476 7.47301926,8.07998139 7.29031601,7.86297752 C6.9200094,7.4639704 6.47200141,7.12096429 5.99599292,6.86895979 C5.5129843,6.6169553 5.00897531,6.46295255 4.56096732,6.37895105 C4.11995945,6.30194968 3.71395221,6.29494955 3.47594796,6.29494955 C3.35694584,6.28794943 3.2029431,6.31594993 3.12594172,6.32295005 C3.04194022,6.32995018 2.99293935,6.3369503 2.99293935,6.3369503 C2.49593048,6.38595117 2.04792249,6.02194468 1.99892162,5.52493582 C1.95692087,5.10492832 2.20192524,4.72692158 2.57293186,4.58691908 C2.57293186,4.58691908 2.62193273,4.56591871 2.6989341,4.53791821 C2.78993573,4.50991771 2.87393723,4.46091684 3.06994072,4.40491584 C3.46194772,4.28591371 3.95895658,4.15991147 4.60996819,4.09691034 C5.25397968,4.04090934 6.03099354,4.05490959 6.85070816,4.22291259 C7.66902276,4.39791571 8.53003812,4.72692158 9.32805235,5.20293007 C9.7060591,5.44793444 10.1120663,5.73493956 10.427072,6.01494456 C10.5670745,6.11994643 10.8050787,6.35795068 10.9450812,6.5049533 C11.1060841,6.67295629 11.2530867,6.84095929 11.4007893,7.01596241 C11.9670994,7.7159749 12.3871069,8.47198839 12.6601118,9.15800062 C12.8211147,9.55000762 12.9331167,9.92101423 13.0171182,10.24302 L14.5151449,10.24302 C15.1171556,10.24302 15.6491651,10.6000263 15.8801692,11.1530362 C16.1111734,11.7060461 15.9851711,12.3430574 15.5581635,12.7700651" id="Fill-1" transform="translate(8.994247, 10.494247) scale(-1, 1) rotate(-45.000000) translate(-8.994247, -10.494247) "></path>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/fixed-tools/icons/ungroup.svg b/src/components/fixed-tools/icons/ungroup.svg
index 2fcb477a..89e5cf1c 100644
--- a/src/components/fixed-tools/icons/ungroup.svg
+++ b/src/components/fixed-tools/icons/ungroup.svg
@@ -9,14 +9,14 @@
             <g id="ungroup-icon" transform="translate(10.000000, 10.000000) rotate(180.000000) translate(-10.000000, -10.000000) translate(2.000000, 2.000000)">
                 <rect id="Rectangle-3-Copy" stroke="#575E75" fill="#FFFFFF" x="6.5" y="6.5" width="8" height="8" rx="0.5"></rect>
                 <rect id="Rectangle-3" stroke="#575E75" fill="#575E75" x="1.5" y="1.5" width="8" height="8" rx="0.5"></rect>
-                <rect id="Rectangle-2" stroke="#4C97FF" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="0" y="0" width="3" height="3"></rect>
-                <rect id="Rectangle-2-Copy-2" stroke="#4C97FF" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="8" y="0" width="3" height="3"></rect>
-                <rect id="Rectangle-2-Copy" stroke="#4C97FF" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="0" y="8" width="3" height="3"></rect>
-                <rect id="Rectangle-2-Copy-3" stroke="#4C97FF" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="8" y="8" width="3" height="3"></rect>
-                <rect id="Rectangle-2-Copy-4" stroke="#4C97FF" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="13" y="5" width="3" height="3"></rect>
-                <rect id="Rectangle-2-Copy-5" stroke="#4C97FF" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="13" y="13" width="3" height="3"></rect>
-                <rect id="Rectangle-2-Copy-6" stroke="#4C97FF" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="5" y="13" width="3" height="3"></rect>
+                <rect id="Rectangle-2" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="0" y="0" width="3" height="3"></rect>
+                <rect id="Rectangle-2-Copy-2" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="8" y="0" width="3" height="3"></rect>
+                <rect id="Rectangle-2-Copy" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="0" y="8" width="3" height="3"></rect>
+                <rect id="Rectangle-2-Copy-3" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="8" y="8" width="3" height="3"></rect>
+                <rect id="Rectangle-2-Copy-4" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="13" y="5" width="3" height="3"></rect>
+                <rect id="Rectangle-2-Copy-5" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="13" y="13" width="3" height="3"></rect>
+                <rect id="Rectangle-2-Copy-6" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="5" y="13" width="3" height="3"></rect>
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/font-dropdown/font-dropdown.css b/src/components/font-dropdown/font-dropdown.css
index c5a55a4c..255947dc 100644
--- a/src/components/font-dropdown/font-dropdown.css
+++ b/src/components/font-dropdown/font-dropdown.css
@@ -16,7 +16,7 @@
 }
 
 .mod-menu-item:hover {
-    background: $motion-primary;
+    background: $looks-tertiary;
     color: white;
 }
 
diff --git a/src/components/forms/input.css b/src/components/forms/input.css
index ca9d406a..ca5639cd 100644
--- a/src/components/forms/input.css
+++ b/src/components/forms/input.css
@@ -40,8 +40,8 @@ Edited to add input-range-small
 }
 
 .input-form:focus {
-    border-color: $motion-primary;
-    box-shadow: 0 0 0 $grid-unit $motion-transparent;
+    border-color: $looks-tertiary;
+    box-shadow: 0 0 0 $grid-unit $looks-transparent;
 }
 
 .input-small {
diff --git a/src/components/mode-tools/icons/copy.svg b/src/components/mode-tools/icons/copy.svg
index 89010127..cb057727 100644
--- a/src/components/mode-tools/icons/copy.svg
+++ b/src/components/mode-tools/icons/copy.svg
@@ -8,10 +8,10 @@
         <g id="copy-v2">
             <g id="copy" transform="translate(3.000000, 2.000000)">
                 <polyline id="Path-3" stroke-opacity="0.5" stroke="#575E75" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,2" points="0.503173828 3 0.503173828 15.5 13 15.5"></polyline>
-                <path d="M2,1.00684547 C2,0.450780073 2.45303631,0 2.99703014,0 L10,0 L10,2.34995317 C10,3.26124887 10.7336617,4 11.6500468,4 L14,4 L14,13.0046024 C14,13.5543453 13.544239,14 12.9975267,14 L3.00247329,14 C2.44882258,14 2,13.5500512 2,12.9931545 L2,1.00684547 Z" id="Rectangle-4" fill="#4C97FF"></path>
-                <path d="M11,0 L14,3 L11.9989566,3 C11.4472481,3 11,2.55733967 11,2.00104344 L11,0 Z" id="Rectangle-5" fill="#4C97FF"></path>
+                <path d="M2,1.00684547 C2,0.450780073 2.45303631,0 2.99703014,0 L10,0 L10,2.34995317 C10,3.26124887 10.7336617,4 11.6500468,4 L14,4 L14,13.0046024 C14,13.5543453 13.544239,14 12.9975267,14 L3.00247329,14 C2.44882258,14 2,13.5500512 2,12.9931545 L2,1.00684547 Z" id="Rectangle-4" fill="#774DCB"></path>
+                <path d="M11,0 L14,3 L11.9989566,3 C11.4472481,3 11,2.55733967 11,2.00104344 L11,0 Z" id="Rectangle-5" fill="#774DCB"></path>
                 <path d="M9.8115942,9.1884058 L8.6884058,9.1884058 L8.6884058,10.3115942 C8.6884058,10.6859903 8.38647343,11 8,11 C7.61352657,11 7.3115942,10.6859903 7.3115942,10.3115942 L7.3115942,9.1884058 L6.1884058,9.1884058 C5.81400966,9.1884058 5.5,8.88647343 5.5,8.5 C5.5,8.11352657 5.81400966,7.8115942 6.1884058,7.8115942 L7.3115942,7.8115942 L7.3115942,6.6884058 C7.3115942,6.31280193 7.61352657,6 8,6 C8.38647343,6 8.6884058,6.31280193 8.6884058,6.6884058 L8.6884058,7.8115942 L9.8115942,7.8115942 C10.1859903,7.8115942 10.5,8.11352657 10.5,8.5 C10.5,8.88647343 10.1859903,9.1884058 9.8115942,9.1884058 Z" id="Fill-1" stroke="#FFFFFF" stroke-width="0.25" fill="#FFFFFF"></path>
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/mode-tools/icons/curved-point.svg b/src/components/mode-tools/icons/curved-point.svg
index 6976d36c..9c630534 100644
--- a/src/components/mode-tools/icons/curved-point.svg
+++ b/src/components/mode-tools/icons/curved-point.svg
@@ -6,12 +6,12 @@
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="curved-point">
-            <path d="M2,15 C2,10.5818452 5.58151214,7 10.000744,7 C14.4184879,7 18,10.5818452 18,15" id="Stroke-3" stroke="#4C97FF" stroke-width="0.75" fill-opacity="0.25" fill="#4C97FF" stroke-linecap="round" stroke-linejoin="round"></path>
-            <path d="M3,7 L17,7" id="Stroke-7" stroke="#4C97FF" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"></path>
-            <circle id="Oval-4" fill-opacity="0.25" fill="#4C97FF" cx="10" cy="7" r="3"></circle>
-            <circle id="Oval-4" fill="#4C97FF" cx="10" cy="7" r="2"></circle>
-            <circle id="Oval-5" fill="#4C97FF" cx="3" cy="7" r="1"></circle>
-            <circle id="Oval-5-Copy" fill="#4C97FF" cx="17" cy="7" r="1"></circle>
+            <path d="M2,15 C2,10.5818452 5.58151214,7 10.000744,7 C14.4184879,7 18,10.5818452 18,15" id="Stroke-3" stroke="#774DCB" stroke-width="0.75" fill-opacity="0.25" fill="#774DCB" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M3,7 L17,7" id="Stroke-7" stroke="#774DCB" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"></path>
+            <circle id="Oval-4" fill-opacity="0.25" fill="#774DCB" cx="10" cy="7" r="3"></circle>
+            <circle id="Oval-4" fill="#774DCB" cx="10" cy="7" r="2"></circle>
+            <circle id="Oval-5" fill="#774DCB" cx="3" cy="7" r="1"></circle>
+            <circle id="Oval-5-Copy" fill="#774DCB" cx="17" cy="7" r="1"></circle>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/mode-tools/icons/delete.svg b/src/components/mode-tools/icons/delete.svg
index dbfad7d1..1b1e06ee 100644
--- a/src/components/mode-tools/icons/delete.svg
+++ b/src/components/mode-tools/icons/delete.svg
@@ -5,8 +5,8 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="delete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Delete-Icon" transform="translate(2.000000, 1.500000)" fill="#4C97FF" fill-rule="nonzero">
+        <g id="Delete-Icon" transform="translate(2.000000, 1.500000)" fill="#774DCB" fill-rule="nonzero">
             <path d="M2,3.25 L14,3.25 C14.4437164,3.25 14.7904293,3.63311343 14.7462779,4.07462779 L13.6363275,15.1741315 C13.5468672,16.0687347 12.7940775,16.75 11.8950124,16.75 L4.10498756,16.75 C3.20592253,16.75 2.45313279,16.0687347 2.36367248,15.1741315 L1.25372211,4.07462779 C1.20957067,3.63311343 1.55628356,3.25 2,3.25 Z M8.75,12 L8.75,7 C8.75,6.58578644 8.41421356,6.25 8,6.25 C7.58578644,6.25 7.25,6.58578644 7.25,7 L7.25,12 C7.25,12.4142136 7.58578644,12.75 8,12.75 C8.41421356,12.75 8.75,12.4142136 8.75,12 Z M11.25,12 L11.25,7 C11.25,6.58578644 10.9142136,6.25 10.5,6.25 C10.0857864,6.25 9.75,6.58578644 9.75,7 L9.75,12 C9.75,12.4142136 10.0857864,12.75 10.5,12.75 C10.9142136,12.75 11.25,12.4142136 11.25,12 Z M6.25,12 L6.25,7 C6.25,6.58578644 5.91421356,6.25 5.5,6.25 C5.08578644,6.25 4.75,6.58578644 4.75,7 L4.75,12 C4.75,12.4142136 5.08578644,12.75 5.5,12.75 C5.91421356,12.75 6.25,12.4142136 6.25,12 Z M1.5,4 L14.5,4 L1.5,4 Z M1.5,3 L14.5,3 C15.0522847,3 15.5,3.44771525 15.5,4 C15.5,4.55228475 15.0522847,5 14.5,5 L1.5,5 C0.94771525,5 0.5,4.55228475 0.5,4 C0.5,3.44771525 0.94771525,3 1.5,3 Z M9.25,3.25 L9.25,2 C9.25,1.86192881 9.13807119,1.75 9,1.75 L7,1.75 C6.86192881,1.75 6.75,1.86192881 6.75,2 L6.75,3.25 L9.25,3.25 Z M7,0.25 L9,0.25 C9.96649831,0.25 10.75,1.03350169 10.75,2 L10.75,4.75 L5.25,4.75 L5.25,2 C5.25,1.03350169 6.03350169,0.25 7,0.25 Z" id="Combined-Shape"></path>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/mode-tools/icons/flip-horizontal.svg b/src/components/mode-tools/icons/flip-horizontal.svg
index 972b68b3..7cc7e3ba 100644
--- a/src/components/mode-tools/icons/flip-horizontal.svg
+++ b/src/components/mode-tools/icons/flip-horizontal.svg
@@ -12,9 +12,9 @@
                 <circle id="Oval-Copy" fill="#575E75" opacity="0.5" cx="8" cy="3.875" r="1"></circle>
                 <circle id="Oval-Copy-2" fill="#575E75" opacity="0.5" cx="8" cy="7" r="1"></circle>
                 <circle id="Oval-Copy-3" fill="#575E75" opacity="0.5" cx="8" cy="10.125" r="1"></circle>
-                <path d="M16,3.08425423 L16,10.9157458 C16,11.4342626 15.2574491,11.6956996 14.8235798,11.3282353 L10.2019293,7.41103711 C9.93269025,7.18445835 9.93269025,6.81408922 10.2019293,6.58751046 L14.8235798,2.67176469 C15.2574491,2.30430042 16,2.56573745 16,3.08425423" id="Fill-11" fill="#4C97FF" opacity="0.5"></path>
-                <path d="M0,10.9157458 L0,3.08425423 C0,2.56573745 0.742550911,2.30430042 1.17470525,2.67176469 L5.79807074,6.58896289 C6.06730975,6.81554165 6.06730975,7.18591078 5.79807074,7.41248954 L1.17470525,11.3282353 C0.742550911,11.6956996 0,11.4342626 0,10.9157458" id="Fill-14" fill="#4C97FF"></path>
+                <path d="M16,3.08425423 L16,10.9157458 C16,11.4342626 15.2574491,11.6956996 14.8235798,11.3282353 L10.2019293,7.41103711 C9.93269025,7.18445835 9.93269025,6.81408922 10.2019293,6.58751046 L14.8235798,2.67176469 C15.2574491,2.30430042 16,2.56573745 16,3.08425423" id="Fill-11" fill="#774DCB" opacity="0.5"></path>
+                <path d="M0,10.9157458 L0,3.08425423 C0,2.56573745 0.742550911,2.30430042 1.17470525,2.67176469 L5.79807074,6.58896289 C6.06730975,6.81554165 6.06730975,7.18591078 5.79807074,7.41248954 L1.17470525,11.3282353 C0.742550911,11.6956996 0,11.4342626 0,10.9157458" id="Fill-14" fill="#774DCB"></path>
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/mode-tools/icons/flip-vertical.svg b/src/components/mode-tools/icons/flip-vertical.svg
index dbd3ea69..65948d2a 100644
--- a/src/components/mode-tools/icons/flip-vertical.svg
+++ b/src/components/mode-tools/icons/flip-vertical.svg
@@ -12,9 +12,9 @@
                 <circle id="Oval-Copy" fill="#575E75" opacity="0.5" cx="8" cy="3.875" r="1"></circle>
                 <circle id="Oval-Copy-2" fill="#575E75" opacity="0.5" cx="8" cy="7" r="1"></circle>
                 <circle id="Oval-Copy-3" fill="#575E75" opacity="0.5" cx="8" cy="10.125" r="1"></circle>
-                <path d="M16,3.08425423 L16,10.9157458 C16,11.4342626 15.2574491,11.6956996 14.8235798,11.3282353 L10.2019293,7.41103711 C9.93269025,7.18445835 9.93269025,6.81408922 10.2019293,6.58751046 L14.8235798,2.67176469 C15.2574491,2.30430042 16,2.56573745 16,3.08425423" id="Fill-11" fill="#4C97FF" opacity="0.5"></path>
-                <path d="M0,10.9157458 L0,3.08425423 C0,2.56573745 0.742550911,2.30430042 1.17470525,2.67176469 L5.79807074,6.58896289 C6.06730975,6.81554165 6.06730975,7.18591078 5.79807074,7.41248954 L1.17470525,11.3282353 C0.742550911,11.6956996 0,11.4342626 0,10.9157458" id="Fill-14" fill="#4C97FF"></path>
+                <path d="M16,3.08425423 L16,10.9157458 C16,11.4342626 15.2574491,11.6956996 14.8235798,11.3282353 L10.2019293,7.41103711 C9.93269025,7.18445835 9.93269025,6.81408922 10.2019293,6.58751046 L14.8235798,2.67176469 C15.2574491,2.30430042 16,2.56573745 16,3.08425423" id="Fill-11" fill="#774DCB" opacity="0.5"></path>
+                <path d="M0,10.9157458 L0,3.08425423 C0,2.56573745 0.742550911,2.30430042 1.17470525,2.67176469 L5.79807074,6.58896289 C6.06730975,6.81554165 6.06730975,7.18591078 5.79807074,7.41248954 L1.17470525,11.3282353 C0.742550911,11.6956996 0,11.4342626 0,10.9157458" id="Fill-14" fill="#774DCB"></path>
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/mode-tools/icons/paste.svg b/src/components/mode-tools/icons/paste.svg
index de9b64a4..da9e5a04 100644
--- a/src/components/mode-tools/icons/paste.svg
+++ b/src/components/mode-tools/icons/paste.svg
@@ -8,10 +8,10 @@
         <g id="paste-v2">
             <g id="paste" transform="translate(3.000000, 2.000000)">
                 <polyline id="Path-3" stroke-opacity="0.5" stroke="#575E75" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,2" transform="translate(6.748413, 6.750000) scale(1, -1) translate(-6.748413, -6.750000) " points="0.5 0.5 0.5 13 12.9968262 13"></polyline>
-                <path d="M2,3.00684547 C2,2.45078007 2.45303631,2 2.99703014,2 L10,2 L10,4.34995317 C10,5.26124887 10.7336617,6 11.6500468,6 L14,6 L14,15.0046024 C14,15.5543453 13.544239,16 12.9975267,16 L3.00247329,16 C2.44882258,16 2,15.5500512 2,14.9931545 L2,3.00684547 Z" id="Rectangle-4" fill="#4C97FF"></path>
-                <path d="M11,2 L14,5 L11.9989566,5 C11.4472481,5 11,4.55733967 11,4.00104344 L11,2 Z" id="Rectangle-5" fill="#4C97FF"></path>
+                <path d="M2,3.00684547 C2,2.45078007 2.45303631,2 2.99703014,2 L10,2 L10,4.34995317 C10,5.26124887 10.7336617,6 11.6500468,6 L14,6 L14,15.0046024 C14,15.5543453 13.544239,16 12.9975267,16 L3.00247329,16 C2.44882258,16 2,15.5500512 2,14.9931545 L2,3.00684547 Z" id="Rectangle-4" fill="#774DCB"></path>
+                <path d="M11,2 L14,5 L11.9989566,5 C11.4472481,5 11,4.55733967 11,4.00104344 L11,2 Z" id="Rectangle-5" fill="#774DCB"></path>
                 <path d="M8.34791833,12.8771885 C8.26180668,12.9633001 8.14699113,13.0063559 8.03217559,13.0063559 C7.9030081,13.0063559 7.78819256,12.9633001 7.70208091,12.8771885 L5.86503222,11.0401398 C5.73586474,10.8966203 5.69280891,10.7100451 5.76456862,10.5378218 C5.83632834,10.3655985 5.99419971,10.2651349 6.18077497,10.2651349 L6.92707599,10.2651349 L7.28587456,7.66743321 C7.31457845,7.46650601 7.41504205,7.27993075 7.57291342,7.16511521 C7.73078479,7.03594773 7.94606393,6.97853995 8.13263919,7.00724384 C8.47708582,7.06321642 8.74977273,7.33733852 8.79282856,7.66743321 L9.16597907,10.2651349 L9.86922427,10.2651349 C10.0557995,10.2651349 10.2136709,10.3799504 10.2854306,10.5521737 C10.3571903,10.7100451 10.3141345,10.9109723 10.184967,11.0401398 L8.34791833,12.8771885 Z" id="Fill-1" fill="#FFFFFF"></path>
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/mode-tools/icons/straight-point.svg b/src/components/mode-tools/icons/straight-point.svg
index ff4d280e..6f1c20fe 100644
--- a/src/components/mode-tools/icons/straight-point.svg
+++ b/src/components/mode-tools/icons/straight-point.svg
@@ -5,10 +5,10 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="straight-point" fill="#4C97FF">
-            <polyline id="Path-2" stroke="#4C97FF" stroke-width="0.75" fill-opacity="0.25" stroke-linecap="round" stroke-linejoin="round" points="2 15 10 7 18 15"></polyline>
+        <g id="straight-point" fill="#774DCB">
+            <polyline id="Path-2" stroke="#774DCB" stroke-width="0.75" fill-opacity="0.25" stroke-linecap="round" stroke-linejoin="round" points="2 15 10 7 18 15"></polyline>
             <circle id="Oval-4" fill-opacity="0.25" cx="10" cy="7" r="3"></circle>
             <circle id="Oval-4" cx="10" cy="7" r="2"></circle>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/paint-editor/icons/rotation-point.svg b/src/components/paint-editor/icons/rotation-point.svg
index ce676389..0324b2e2 100755
--- a/src/components/paint-editor/icons/rotation-point.svg
+++ b/src/components/paint-editor/icons/rotation-point.svg
@@ -5,7 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="rotation-point" stroke="#4C97FF" stroke-width="1.35">
+        <g id="rotation-point" stroke="#774DCB" stroke-width="1.35">
             <g id="set-center" transform="translate(3.000000, 3.000000)">
                 <path d="M0,7 L5,7" id="Stroke-1"></path>
                 <path d="M9,7 L14,7" id="Stroke-3"></path>
@@ -15,4 +15,4 @@
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/paint-editor/paint-editor.css b/src/components/paint-editor/paint-editor.css
index 77e3ef67..a5cec6ec 100644
--- a/src/components/paint-editor/paint-editor.css
+++ b/src/components/paint-editor/paint-editor.css
@@ -172,7 +172,7 @@ $border-radius: 0.25rem;
 .bitmap-button {
     display: flex;
     border-radius: 5px;
-    background-color: $motion-primary;
+    background-color: $looks-tertiary;
     padding: calc(2 * $grid-unit);
     line-height: 1.5rem;
     font-size: calc(3 * $grid-unit);
diff --git a/src/components/tool-select-base/tool-select-base.css b/src/components/tool-select-base/tool-select-base.css
index 574de03f..ed2f2ea3 100644
--- a/src/components/tool-select-base/tool-select-base.css
+++ b/src/components/tool-select-base/tool-select-base.css
@@ -16,7 +16,7 @@ $border-radius: .25rem;
 }
 
 .mod-tool-select.is-selected {
-    background-color: $motion-primary;
+    background-color: $looks-tertiary;
 }
 
 .mod-tool-select:focus {
diff --git a/src/css/colors.css b/src/css/colors.css
index 14d539c4..0dfc94d3 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -8,9 +8,8 @@ $ui-background-blue: #e8edf1;
 
 $text-primary: #575e75;
 
-$motion-primary: #4C97FF;
-$motion-tertiary: #3373CC;
-$motion-transparent: hsla(215, 100%, 65%, 0.20);
+$looks-tertiary: #774DCB;
+$looks-transparent: hsla(260, 54%, 54%, 0.35); /* 35% transparent version of looks-tertiary */
 
 $red-primary: #FF661A;
 $red-tertiary: #E64D00;

From 442afcab38cd59434eb53e364876181857d576e6 Mon Sep 17 00:00:00 2001
From: Andy O'Neill <andy@scratch.mit.edu>
Date: Fri, 5 May 2023 14:04:50 -0400
Subject: [PATCH 2/4] fix: use looks secondary rather than tertiary color

---
 src/components/color-picker/color-picker.css     |  2 +-
 .../icons/fill-horz-gradient-enabled.svg         |  2 +-
 .../color-picker/icons/fill-radial-enabled.svg   |  2 +-
 .../color-picker/icons/fill-solid-enabled.svg    |  2 +-
 .../icons/fill-vert-gradient-enabled.svg         |  2 +-
 src/components/color-picker/icons/swap.svg       |  2 +-
 src/components/dropdown/dropdown-caret.svg       |  2 +-
 src/components/dropdown/dropdown.css             |  2 +-
 src/components/fixed-tools/icons/group.svg       | 16 ++++++++--------
 src/components/fixed-tools/icons/redo.svg        |  2 +-
 src/components/fixed-tools/icons/send-back.svg   |  2 +-
 .../fixed-tools/icons/send-backward.svg          |  2 +-
 .../fixed-tools/icons/send-forward.svg           |  2 +-
 src/components/fixed-tools/icons/send-front.svg  |  2 +-
 src/components/fixed-tools/icons/undo.svg        |  2 +-
 src/components/fixed-tools/icons/ungroup.svg     | 14 +++++++-------
 src/components/font-dropdown/font-dropdown.css   |  2 +-
 src/components/forms/input.css                   |  2 +-
 src/components/mode-tools/icons/copy.svg         |  4 ++--
 src/components/mode-tools/icons/curved-point.svg | 12 ++++++------
 src/components/mode-tools/icons/delete.svg       |  2 +-
 .../mode-tools/icons/flip-horizontal.svg         |  4 ++--
 .../mode-tools/icons/flip-vertical.svg           |  4 ++--
 src/components/mode-tools/icons/paste.svg        |  4 ++--
 .../mode-tools/icons/straight-point.svg          |  4 ++--
 .../paint-editor/icons/rotation-point.svg        |  2 +-
 src/components/paint-editor/paint-editor.css     |  2 +-
 .../tool-select-base/tool-select-base.css        |  2 +-
 src/css/colors.css                               |  4 ++--
 29 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/src/components/color-picker/color-picker.css b/src/components/color-picker/color-picker.css
index 15bf43c4..ae0463a2 100644
--- a/src/components/color-picker/color-picker.css
+++ b/src/components/color-picker/color-picker.css
@@ -80,7 +80,7 @@
 }
 
 .active-swatch {
-    border: 1px solid $looks-tertiary;
+    border: 1px solid $looks-secondary;
     box-shadow: 0px 0px 0px 3px $looks-transparent;
 }
 
diff --git a/src/components/color-picker/icons/fill-horz-gradient-enabled.svg b/src/components/color-picker/icons/fill-horz-gradient-enabled.svg
index 88b14d87..36490a57 100644
--- a/src/components/color-picker/icons/fill-horz-gradient-enabled.svg
+++ b/src/components/color-picker/icons/fill-horz-gradient-enabled.svg
@@ -6,7 +6,7 @@
     <defs>
         <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
             <stop stop-color="#FFFFFF" offset="0%"></stop>
-            <stop stop-color="#774DCB" offset="100%"></stop>
+            <stop stop-color="#855CD6" offset="100%"></stop>
         </linearGradient>
     </defs>
     <g id="fill-horz-gradient-enabled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-opacity="0.15">
diff --git a/src/components/color-picker/icons/fill-radial-enabled.svg b/src/components/color-picker/icons/fill-radial-enabled.svg
index 44336c2c..3cac3a2b 100644
--- a/src/components/color-picker/icons/fill-radial-enabled.svg
+++ b/src/components/color-picker/icons/fill-radial-enabled.svg
@@ -5,7 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs>
         <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="39.3896484%" id="radialGradient-1">
-            <stop stop-color="#774DCB" offset="0%"></stop>
+            <stop stop-color="#855CD6" offset="0%"></stop>
             <stop stop-color="#FFFFFF" offset="100%"></stop>
         </radialGradient>
     </defs>
diff --git a/src/components/color-picker/icons/fill-solid-enabled.svg b/src/components/color-picker/icons/fill-solid-enabled.svg
index 23afa639..2f8bb698 100644
--- a/src/components/color-picker/icons/fill-solid-enabled.svg
+++ b/src/components/color-picker/icons/fill-solid-enabled.svg
@@ -5,6 +5,6 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="fill-solid-enabled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-opacity="0.15">
-        <rect id="Solid" stroke="#000000" fill="#774DCB" x="0.5" y="0.5" width="19" height="19" rx="4"></rect>
+        <rect id="Solid" stroke="#000000" fill="#855CD6" x="0.5" y="0.5" width="19" height="19" rx="4"></rect>
     </g>
 </svg>
diff --git a/src/components/color-picker/icons/fill-vert-gradient-enabled.svg b/src/components/color-picker/icons/fill-vert-gradient-enabled.svg
index 912d1aba..838c2da0 100644
--- a/src/components/color-picker/icons/fill-vert-gradient-enabled.svg
+++ b/src/components/color-picker/icons/fill-vert-gradient-enabled.svg
@@ -6,7 +6,7 @@
     <defs>
         <linearGradient x1="50%" y1="100%" x2="50%" y2="3.061617e-15%" id="linearGradient-1">
             <stop stop-color="#FFFFFF" offset="0%"></stop>
-            <stop stop-color="#774DCB" offset="100%"></stop>
+            <stop stop-color="#855CD6" offset="100%"></stop>
         </linearGradient>
     </defs>
     <g id="fill-vert-gradient-enabled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-opacity="0.15">
diff --git a/src/components/color-picker/icons/swap.svg b/src/components/color-picker/icons/swap.svg
index 4d79e092..74afe479 100644
--- a/src/components/color-picker/icons/swap.svg
+++ b/src/components/color-picker/icons/swap.svg
@@ -5,7 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="swap" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Swap-v2" transform="translate(2.000000, 2.000000)" fill="#774DCB">
+        <g id="Swap-v2" transform="translate(2.000000, 2.000000)" fill="#855CD6">
             <path d="M3.69424597,2.00682151 L7.95663608,2.66498231 C8.44536222,2.73588913 8.7900887,3.24405473 8.7176525,3.79585529 C8.66179809,4.24129561 8.34150792,4.58764819 7.95663608,4.64128284 L3.69424597,5.30126176 L3.69424597,6.79666856 C3.69424597,7.22392764 3.23781067,7.42846657 2.97250219,7.13483958 L0.120436084,3.97403142 C-0.0401453614,3.78767373 -0.0401453614,3.48404706 0.120436084,3.30587093 L2.97250219,0.135972153 C3.23781067,-0.157654834 3.69424597,0.0559747078 3.69424597,0.474143173 L3.69424597,2.00682151 Z M12.305754,10.7340942 L12.305754,9.2014159 C12.305754,8.78324744 12.7621893,8.56961789 13.0274978,8.86324488 L15.8795639,12.0331437 C16.0401454,12.2113198 16.0401454,12.5149465 15.8795639,12.7013041 L13.0274978,15.8621123 C12.7621893,16.1557393 12.305754,15.9512004 12.305754,15.5239413 L12.305754,14.0285345 L8.04336392,13.3685556 C7.65849208,13.3149209 7.33820191,12.9685683 7.2823475,12.523128 C7.2099113,11.9713275 7.55463778,11.4631619 8.04336392,11.392255 L12.305754,10.7340942 Z" id="Swap-v1"></path>
             <path d="M11.2727273,1.45454545 L13.4545455,1.45454545 C14.0567273,1.45454545 14.5454545,1.94327273 14.5454545,2.54545455 L14.5454545,4.72727273 C14.5454545,5.33054545 14.0567273,5.81818182 13.4545455,5.81818182 L11.2727273,5.81818182 C10.6705455,5.81818182 10.1818182,5.33054545 10.1818182,4.72727273 L10.1818182,2.54545455 C10.1818182,1.94327273 10.6705455,1.45454545 11.2727273,1.45454545" id="Fill-6" fill-opacity="0.5"></path>
             <path d="M2.54545455,10.1818182 L4.72727273,10.1818182 C5.32945455,10.1818182 5.81818182,10.6705455 5.81818182,11.2727273 L5.81818182,13.4545455 C5.81818182,14.0578182 5.32945455,14.5454545 4.72727273,14.5454545 L2.54545455,14.5454545 C1.94327273,14.5454545 1.45454545,14.0578182 1.45454545,13.4545455 L1.45454545,11.2727273 C1.45454545,10.6705455 1.94327273,10.1818182 2.54545455,10.1818182" id="Fill-6-Copy" fill-opacity="0.5"></path>
diff --git a/src/components/dropdown/dropdown-caret.svg b/src/components/dropdown/dropdown-caret.svg
index dd05d610..4c7f82bc 100644
--- a/src/components/dropdown/dropdown-caret.svg
+++ b/src/components/dropdown/dropdown-caret.svg
@@ -5,7 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="dropdown-caret" fill="#774DCB">
+        <g id="dropdown-caret" fill="#855CD6">
             <path d="M4,5 C3.72520708,5 3.45163006,4.89695045 3.24127973,4.68965311 L0.314613572,1.80666227 C-0.104871191,1.39326583 -0.104871191,0.724642023 0.314613572,0.310047331 C0.732882438,-0.10334911 7.26711756,-0.10334911 7.68538643,0.310047331 C8.10487119,0.723443772 8.10487119,1.39326583 7.68538643,1.80666227 L4.75993617,4.68965311 C4.54958583,4.89695045 4.27600882,5 4,5"></path>
         </g>
     </g>
diff --git a/src/components/dropdown/dropdown.css b/src/components/dropdown/dropdown.css
index d9d58083..aca3ce9a 100644
--- a/src/components/dropdown/dropdown.css
+++ b/src/components/dropdown/dropdown.css
@@ -7,7 +7,7 @@ $arrow-border-width: 14px;
     border-radius: 5px;
     overflow: visible;
     min-width: 3.5rem;
-    color: $looks-tertiary;
+    color: $looks-secondary;
     padding: .5rem;
 }
 
diff --git a/src/components/fixed-tools/icons/group.svg b/src/components/fixed-tools/icons/group.svg
index 0fd5abb8..1748fe58 100644
--- a/src/components/fixed-tools/icons/group.svg
+++ b/src/components/fixed-tools/icons/group.svg
@@ -7,14 +7,14 @@
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="group" stroke-width="0.75">
             <g id="group-icon" transform="translate(2.000000, 2.000000)">
-                <rect id="Rectangle-2" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="0" y="0" width="3" height="3"></rect>
-                <rect id="Rectangle-2-Copy-2" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="13" y="0" width="3" height="3"></rect>
-                <rect id="Rectangle-2-Copy" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="0" y="13" width="3" height="3"></rect>
-                <rect id="Rectangle-2-Copy-3" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="13" y="13" width="3" height="3"></rect>
-                <path d="M1.5,3 L1.5,13" id="Line" stroke="#774DCB" stroke-linecap="square"></path>
-                <path d="M14.5,3 L14.5,13" id="Line-Copy" stroke="#774DCB" stroke-linecap="square"></path>
-                <path d="M13,1.5 L3,1.5" id="Line-Copy-2" stroke="#774DCB" stroke-linecap="square"></path>
-                <path d="M13,14.5 L3,14.5" id="Line-Copy-3" stroke="#774DCB" stroke-linecap="square"></path>
+                <rect id="Rectangle-2" stroke="#855CD6" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="0" y="0" width="3" height="3"></rect>
+                <rect id="Rectangle-2-Copy-2" stroke="#855CD6" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="13" y="0" width="3" height="3"></rect>
+                <rect id="Rectangle-2-Copy" stroke="#855CD6" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="0" y="13" width="3" height="3"></rect>
+                <rect id="Rectangle-2-Copy-3" stroke="#855CD6" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="13" y="13" width="3" height="3"></rect>
+                <path d="M1.5,3 L1.5,13" id="Line" stroke="#855CD6" stroke-linecap="square"></path>
+                <path d="M14.5,3 L14.5,13" id="Line-Copy" stroke="#855CD6" stroke-linecap="square"></path>
+                <path d="M13,1.5 L3,1.5" id="Line-Copy-2" stroke="#855CD6" stroke-linecap="square"></path>
+                <path d="M13,14.5 L3,14.5" id="Line-Copy-3" stroke="#855CD6" stroke-linecap="square"></path>
                 <g id="Group" transform="translate(8.000000, 8.000000) rotate(180.000000) translate(-8.000000, -8.000000) translate(4.000000, 4.000000)" stroke="#575E75">
                     <rect id="Rectangle-3-Copy" fill="#FFFFFF" transform="translate(5.500000, 5.500000) rotate(180.000000) translate(-5.500000, -5.500000) " x="3" y="3" width="5" height="5" rx="0.5"></rect>
                     <rect id="Rectangle-3" fill="#575E75" transform="translate(2.500000, 2.500000) rotate(180.000000) translate(-2.500000, -2.500000) " x="0" y="0" width="5" height="5" rx="0.5"></rect>
diff --git a/src/components/fixed-tools/icons/redo.svg b/src/components/fixed-tools/icons/redo.svg
index aeeb00c5..c32f9449 100644
--- a/src/components/fixed-tools/icons/redo.svg
+++ b/src/components/fixed-tools/icons/redo.svg
@@ -5,7 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="redo" fill="#774DCB">
+        <g id="redo" fill="#855CD6">
             <path d="M17.5581635,12.7700651 L13.8403972,16.4941315 C13.5610922,16.7671364 13.1830854,16.9211391 12.7903784,16.9211391 C12.3990715,16.9211391 12.0210647,16.7671364 11.7403597,16.4941315 L8.02399342,12.7700651 C7.5969858,12.3430574 7.47098355,11.7060461 7.70198767,11.1530362 C7.93299179,10.6000263 8.46500128,10.24302 9.06701202,10.24302 L10.4040359,10.24302 C10.3690352,9.92101423 10.2780336,9.55700774 10.1240309,9.17200087 C10.07573,9.05999887 10.0260291,8.94799688 9.97002813,8.83599488 C9.89302676,8.70999263 9.90072689,8.67499201 9.79502501,8.52098926 C9.62702201,8.26898476 9.47301926,8.07998139 9.29031601,7.86297752 C8.9200094,7.4639704 8.47200141,7.12096429 7.99599292,6.86895979 C7.5129843,6.6169553 7.00897531,6.46295255 6.56096732,6.37895105 C6.11995945,6.30194968 5.71395221,6.29494955 5.47594796,6.29494955 C5.35694584,6.28794943 5.2029431,6.31594993 5.12594172,6.32295005 C5.04194022,6.32995018 4.99293935,6.3369503 4.99293935,6.3369503 C4.49593048,6.38595117 4.04792249,6.02194468 3.99892162,5.52493582 C3.95692087,5.10492832 4.20192524,4.72692158 4.57293186,4.58691908 C4.57293186,4.58691908 4.62193273,4.56591871 4.6989341,4.53791821 C4.78993573,4.50991771 4.87393723,4.46091684 5.06994072,4.40491584 C5.46194772,4.28591371 5.95895658,4.15991147 6.60996819,4.09691034 C7.25397968,4.04090934 8.03099354,4.05490959 8.85070816,4.22291259 C9.66902276,4.39791571 10.5300381,4.72692158 11.3280524,5.20293007 C11.7060591,5.44793444 12.1120663,5.73493956 12.427072,6.01494456 C12.5670745,6.11994643 12.8050787,6.35795068 12.9450812,6.5049533 C13.1060841,6.67295629 13.2530867,6.84095929 13.4007893,7.01596241 C13.9670994,7.7159749 14.3871069,8.47198839 14.6601118,9.15800062 C14.8211147,9.55000762 14.9331167,9.92101423 15.0171182,10.24302 L16.5151449,10.24302 C17.1171556,10.24302 17.6491651,10.6000263 17.8801692,11.1530362 C18.1111734,11.7060461 17.9851711,12.3430574 17.5581635,12.7700651" id="Fill-1" transform="translate(10.994247, 10.494247) rotate(-45.000000) translate(-10.994247, -10.494247) "></path>
         </g>
     </g>
diff --git a/src/components/fixed-tools/icons/send-back.svg b/src/components/fixed-tools/icons/send-back.svg
index 80122540..7e60ac6c 100644
--- a/src/components/fixed-tools/icons/send-back.svg
+++ b/src/components/fixed-tools/icons/send-back.svg
@@ -7,7 +7,7 @@
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="send-back">
             <g transform="translate(10.000000, 10.000000) rotate(180.000000) translate(-10.000000, -10.000000) translate(2.000000, 3.000000)">
-                <path d="M12.3476736,5.92549723 L10.2407376,5.92549723 L9.33601611,12.7635981 C9.23807603,13.5476661 8.54025295,14.1003698 7.78121732,13.9846876 C7.16909181,13.8947126 6.69163391,13.3805697 6.6169546,12.7635981 L5.7122331,5.92549723 L3.65426714,5.92549723 C3.0678509,5.92549723 2.78504892,5.19284356 3.190276,4.76867564 L7.53514286,0.192803597 C7.79223558,-0.0642678658 8.20970517,-0.0642678658 8.45333113,0.192803597 L12.812889,4.76867564 C13.2168918,5.19284356 12.9230716,5.92549723 12.3476736,5.92549723" id="Fill-1" fill="#774DCB"></path>
+                <path d="M12.3476736,5.92549723 L10.2407376,5.92549723 L9.33601611,12.7635981 C9.23807603,13.5476661 8.54025295,14.1003698 7.78121732,13.9846876 C7.16909181,13.8947126 6.69163391,13.3805697 6.6169546,12.7635981 L5.7122331,5.92549723 L3.65426714,5.92549723 C3.0678509,5.92549723 2.78504892,5.19284356 3.190276,4.76867564 L7.53514286,0.192803597 C7.79223558,-0.0642678658 8.20970517,-0.0642678658 8.45333113,0.192803597 L12.812889,4.76867564 C13.2168918,5.19284356 12.9230716,5.92549723 12.3476736,5.92549723" id="Fill-1" fill="#855CD6"></path>
                 <path d="M12,8 L16,8" id="Stroke-6" stroke="#575E75" stroke-linecap="round" stroke-linejoin="round"></path>
                 <path d="M12,10 L15,10" id="Stroke-6-Copy" stroke="#575E75" opacity="0.75" stroke-linecap="round" stroke-linejoin="round"></path>
                 <path d="M12,12 L14,12" id="Stroke-6-Copy-2" stroke="#575E75" opacity="0.5" stroke-linecap="round" stroke-linejoin="round"></path>
diff --git a/src/components/fixed-tools/icons/send-backward.svg b/src/components/fixed-tools/icons/send-backward.svg
index 407078a7..8d490574 100644
--- a/src/components/fixed-tools/icons/send-backward.svg
+++ b/src/components/fixed-tools/icons/send-backward.svg
@@ -7,7 +7,7 @@
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="send-backward">
             <g id="send-forward" transform="translate(10.000000, 10.000000) rotate(180.000000) translate(-10.000000, -10.000000) translate(2.000000, 3.000000)">
-                <path d="M12.3476736,5.92549723 L10.2407376,5.92549723 L9.33601611,12.7635981 C9.23807603,13.5476661 8.54025295,14.1003698 7.78121732,13.9846876 C7.16909181,13.8947126 6.69163391,13.3805697 6.6169546,12.7635981 L5.7122331,5.92549723 L3.65426714,5.92549723 C3.0678509,5.92549723 2.78504892,5.19284356 3.190276,4.76867564 L7.53514286,0.192803597 C7.79223558,-0.0642678658 8.20970517,-0.0642678658 8.45333113,0.192803597 L12.812889,4.76867564 C13.2168918,5.19284356 12.9230716,5.92549723 12.3476736,5.92549723" id="Fill-1" fill="#774DCB"></path>
+                <path d="M12.3476736,5.92549723 L10.2407376,5.92549723 L9.33601611,12.7635981 C9.23807603,13.5476661 8.54025295,14.1003698 7.78121732,13.9846876 C7.16909181,13.8947126 6.69163391,13.3805697 6.6169546,12.7635981 L5.7122331,5.92549723 L3.65426714,5.92549723 C3.0678509,5.92549723 2.78504892,5.19284356 3.190276,4.76867564 L7.53514286,0.192803597 C7.79223558,-0.0642678658 8.20970517,-0.0642678658 8.45333113,0.192803597 L12.812889,4.76867564 C13.2168918,5.19284356 12.9230716,5.92549723 12.3476736,5.92549723" id="Fill-1" fill="#855CD6"></path>
                 <path d="M12,8 L16,8" id="Stroke-6" stroke="#575E75" stroke-linecap="round" stroke-linejoin="round"></path>
                 <path d="M0,8 L4,8" id="Stroke-10" stroke="#575E75" stroke-linecap="round" stroke-linejoin="round"></path>
             </g>
diff --git a/src/components/fixed-tools/icons/send-forward.svg b/src/components/fixed-tools/icons/send-forward.svg
index e6ec87f1..c611e8e7 100644
--- a/src/components/fixed-tools/icons/send-forward.svg
+++ b/src/components/fixed-tools/icons/send-forward.svg
@@ -7,7 +7,7 @@
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="send-forward">
             <g transform="translate(2.000000, 3.000000)">
-                <path d="M12.3476736,5.92549723 L10.2407376,5.92549723 L9.33601611,12.7635981 C9.23807603,13.5476661 8.54025295,14.1003698 7.78121732,13.9846876 C7.16909181,13.8947126 6.69163391,13.3805697 6.6169546,12.7635981 L5.7122331,5.92549723 L3.65426714,5.92549723 C3.0678509,5.92549723 2.78504892,5.19284356 3.190276,4.76867564 L7.53514286,0.192803597 C7.79223558,-0.0642678658 8.20970517,-0.0642678658 8.45333113,0.192803597 L12.812889,4.76867564 C13.2168918,5.19284356 12.9230716,5.92549723 12.3476736,5.92549723" id="Fill-1" fill="#774DCB"></path>
+                <path d="M12.3476736,5.92549723 L10.2407376,5.92549723 L9.33601611,12.7635981 C9.23807603,13.5476661 8.54025295,14.1003698 7.78121732,13.9846876 C7.16909181,13.8947126 6.69163391,13.3805697 6.6169546,12.7635981 L5.7122331,5.92549723 L3.65426714,5.92549723 C3.0678509,5.92549723 2.78504892,5.19284356 3.190276,4.76867564 L7.53514286,0.192803597 C7.79223558,-0.0642678658 8.20970517,-0.0642678658 8.45333113,0.192803597 L12.812889,4.76867564 C13.2168918,5.19284356 12.9230716,5.92549723 12.3476736,5.92549723" id="Fill-1" fill="#855CD6"></path>
                 <path d="M12,8 L16,8" id="Stroke-6" stroke="#575E75" stroke-linecap="round" stroke-linejoin="round"></path>
                 <path d="M0,8 L4,8" id="Stroke-10" stroke="#575E75" stroke-linecap="round" stroke-linejoin="round"></path>
             </g>
diff --git a/src/components/fixed-tools/icons/send-front.svg b/src/components/fixed-tools/icons/send-front.svg
index 7d106d3c..2941c4de 100644
--- a/src/components/fixed-tools/icons/send-front.svg
+++ b/src/components/fixed-tools/icons/send-front.svg
@@ -7,7 +7,7 @@
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="send-front">
             <g transform="translate(2.000000, 3.000000)">
-                <path d="M12.3476736,5.92549723 L10.2407376,5.92549723 L9.33601611,12.7635981 C9.23807603,13.5476661 8.54025295,14.1003698 7.78121732,13.9846876 C7.16909181,13.8947126 6.69163391,13.3805697 6.6169546,12.7635981 L5.7122331,5.92549723 L3.65426714,5.92549723 C3.0678509,5.92549723 2.78504892,5.19284356 3.190276,4.76867564 L7.53514286,0.192803597 C7.79223558,-0.0642678658 8.20970517,-0.0642678658 8.45333113,0.192803597 L12.812889,4.76867564 C13.2168918,5.19284356 12.9230716,5.92549723 12.3476736,5.92549723" id="Fill-1" fill="#774DCB"></path>
+                <path d="M12.3476736,5.92549723 L10.2407376,5.92549723 L9.33601611,12.7635981 C9.23807603,13.5476661 8.54025295,14.1003698 7.78121732,13.9846876 C7.16909181,13.8947126 6.69163391,13.3805697 6.6169546,12.7635981 L5.7122331,5.92549723 L3.65426714,5.92549723 C3.0678509,5.92549723 2.78504892,5.19284356 3.190276,4.76867564 L7.53514286,0.192803597 C7.79223558,-0.0642678658 8.20970517,-0.0642678658 8.45333113,0.192803597 L12.812889,4.76867564 C13.2168918,5.19284356 12.9230716,5.92549723 12.3476736,5.92549723" id="Fill-1" fill="#855CD6"></path>
                 <path d="M12,8 L16,8" id="Stroke-6" stroke="#575E75" stroke-linecap="round" stroke-linejoin="round"></path>
                 <path d="M12,10 L15,10" id="Stroke-6-Copy" stroke="#575E75" opacity="0.75" stroke-linecap="round" stroke-linejoin="round"></path>
                 <path d="M12,12 L14,12" id="Stroke-6-Copy-2" stroke="#575E75" opacity="0.5" stroke-linecap="round" stroke-linejoin="round"></path>
diff --git a/src/components/fixed-tools/icons/undo.svg b/src/components/fixed-tools/icons/undo.svg
index f6b3fc7f..44c9517b 100644
--- a/src/components/fixed-tools/icons/undo.svg
+++ b/src/components/fixed-tools/icons/undo.svg
@@ -5,7 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="undo" fill="#774DCB">
+        <g id="undo" fill="#855CD6">
             <path d="M15.5581635,12.7700651 L11.8403972,16.4941315 C11.5610922,16.7671364 11.1830854,16.9211391 10.7903784,16.9211391 C10.3990715,16.9211391 10.0210647,16.7671364 9.74035971,16.4941315 L6.02399342,12.7700651 C5.5969858,12.3430574 5.47098355,11.7060461 5.70198767,11.1530362 C5.93299179,10.6000263 6.46500128,10.24302 7.06701202,10.24302 L8.40403587,10.24302 C8.36903525,9.92101423 8.27803362,9.55700774 8.12403088,9.17200087 C8.07573002,9.05999887 8.02602913,8.94799688 7.97002813,8.83599488 C7.89302676,8.70999263 7.90072689,8.67499201 7.79502501,8.52098926 C7.62702201,8.26898476 7.47301926,8.07998139 7.29031601,7.86297752 C6.9200094,7.4639704 6.47200141,7.12096429 5.99599292,6.86895979 C5.5129843,6.6169553 5.00897531,6.46295255 4.56096732,6.37895105 C4.11995945,6.30194968 3.71395221,6.29494955 3.47594796,6.29494955 C3.35694584,6.28794943 3.2029431,6.31594993 3.12594172,6.32295005 C3.04194022,6.32995018 2.99293935,6.3369503 2.99293935,6.3369503 C2.49593048,6.38595117 2.04792249,6.02194468 1.99892162,5.52493582 C1.95692087,5.10492832 2.20192524,4.72692158 2.57293186,4.58691908 C2.57293186,4.58691908 2.62193273,4.56591871 2.6989341,4.53791821 C2.78993573,4.50991771 2.87393723,4.46091684 3.06994072,4.40491584 C3.46194772,4.28591371 3.95895658,4.15991147 4.60996819,4.09691034 C5.25397968,4.04090934 6.03099354,4.05490959 6.85070816,4.22291259 C7.66902276,4.39791571 8.53003812,4.72692158 9.32805235,5.20293007 C9.7060591,5.44793444 10.1120663,5.73493956 10.427072,6.01494456 C10.5670745,6.11994643 10.8050787,6.35795068 10.9450812,6.5049533 C11.1060841,6.67295629 11.2530867,6.84095929 11.4007893,7.01596241 C11.9670994,7.7159749 12.3871069,8.47198839 12.6601118,9.15800062 C12.8211147,9.55000762 12.9331167,9.92101423 13.0171182,10.24302 L14.5151449,10.24302 C15.1171556,10.24302 15.6491651,10.6000263 15.8801692,11.1530362 C16.1111734,11.7060461 15.9851711,12.3430574 15.5581635,12.7700651" id="Fill-1" transform="translate(8.994247, 10.494247) scale(-1, 1) rotate(-45.000000) translate(-8.994247, -10.494247) "></path>
         </g>
     </g>
diff --git a/src/components/fixed-tools/icons/ungroup.svg b/src/components/fixed-tools/icons/ungroup.svg
index 89e5cf1c..04d45fea 100644
--- a/src/components/fixed-tools/icons/ungroup.svg
+++ b/src/components/fixed-tools/icons/ungroup.svg
@@ -9,13 +9,13 @@
             <g id="ungroup-icon" transform="translate(10.000000, 10.000000) rotate(180.000000) translate(-10.000000, -10.000000) translate(2.000000, 2.000000)">
                 <rect id="Rectangle-3-Copy" stroke="#575E75" fill="#FFFFFF" x="6.5" y="6.5" width="8" height="8" rx="0.5"></rect>
                 <rect id="Rectangle-3" stroke="#575E75" fill="#575E75" x="1.5" y="1.5" width="8" height="8" rx="0.5"></rect>
-                <rect id="Rectangle-2" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="0" y="0" width="3" height="3"></rect>
-                <rect id="Rectangle-2-Copy-2" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="8" y="0" width="3" height="3"></rect>
-                <rect id="Rectangle-2-Copy" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="0" y="8" width="3" height="3"></rect>
-                <rect id="Rectangle-2-Copy-3" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="8" y="8" width="3" height="3"></rect>
-                <rect id="Rectangle-2-Copy-4" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="13" y="5" width="3" height="3"></rect>
-                <rect id="Rectangle-2-Copy-5" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="13" y="13" width="3" height="3"></rect>
-                <rect id="Rectangle-2-Copy-6" stroke="#774DCB" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="5" y="13" width="3" height="3"></rect>
+                <rect id="Rectangle-2" stroke="#855CD6" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="0" y="0" width="3" height="3"></rect>
+                <rect id="Rectangle-2-Copy-2" stroke="#855CD6" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="8" y="0" width="3" height="3"></rect>
+                <rect id="Rectangle-2-Copy" stroke="#855CD6" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="0" y="8" width="3" height="3"></rect>
+                <rect id="Rectangle-2-Copy-3" stroke="#855CD6" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="8" y="8" width="3" height="3"></rect>
+                <rect id="Rectangle-2-Copy-4" stroke="#855CD6" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="13" y="5" width="3" height="3"></rect>
+                <rect id="Rectangle-2-Copy-5" stroke="#855CD6" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="13" y="13" width="3" height="3"></rect>
+                <rect id="Rectangle-2-Copy-6" stroke="#855CD6" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="5" y="13" width="3" height="3"></rect>
             </g>
         </g>
     </g>
diff --git a/src/components/font-dropdown/font-dropdown.css b/src/components/font-dropdown/font-dropdown.css
index 255947dc..a528a9f4 100644
--- a/src/components/font-dropdown/font-dropdown.css
+++ b/src/components/font-dropdown/font-dropdown.css
@@ -16,7 +16,7 @@
 }
 
 .mod-menu-item:hover {
-    background: $looks-tertiary;
+    background: $looks-secondary;
     color: white;
 }
 
diff --git a/src/components/forms/input.css b/src/components/forms/input.css
index ca5639cd..09049a11 100644
--- a/src/components/forms/input.css
+++ b/src/components/forms/input.css
@@ -40,7 +40,7 @@ Edited to add input-range-small
 }
 
 .input-form:focus {
-    border-color: $looks-tertiary;
+    border-color: $looks-secondary;
     box-shadow: 0 0 0 $grid-unit $looks-transparent;
 }
 
diff --git a/src/components/mode-tools/icons/copy.svg b/src/components/mode-tools/icons/copy.svg
index cb057727..37f22e49 100644
--- a/src/components/mode-tools/icons/copy.svg
+++ b/src/components/mode-tools/icons/copy.svg
@@ -8,8 +8,8 @@
         <g id="copy-v2">
             <g id="copy" transform="translate(3.000000, 2.000000)">
                 <polyline id="Path-3" stroke-opacity="0.5" stroke="#575E75" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,2" points="0.503173828 3 0.503173828 15.5 13 15.5"></polyline>
-                <path d="M2,1.00684547 C2,0.450780073 2.45303631,0 2.99703014,0 L10,0 L10,2.34995317 C10,3.26124887 10.7336617,4 11.6500468,4 L14,4 L14,13.0046024 C14,13.5543453 13.544239,14 12.9975267,14 L3.00247329,14 C2.44882258,14 2,13.5500512 2,12.9931545 L2,1.00684547 Z" id="Rectangle-4" fill="#774DCB"></path>
-                <path d="M11,0 L14,3 L11.9989566,3 C11.4472481,3 11,2.55733967 11,2.00104344 L11,0 Z" id="Rectangle-5" fill="#774DCB"></path>
+                <path d="M2,1.00684547 C2,0.450780073 2.45303631,0 2.99703014,0 L10,0 L10,2.34995317 C10,3.26124887 10.7336617,4 11.6500468,4 L14,4 L14,13.0046024 C14,13.5543453 13.544239,14 12.9975267,14 L3.00247329,14 C2.44882258,14 2,13.5500512 2,12.9931545 L2,1.00684547 Z" id="Rectangle-4" fill="#855CD6"></path>
+                <path d="M11,0 L14,3 L11.9989566,3 C11.4472481,3 11,2.55733967 11,2.00104344 L11,0 Z" id="Rectangle-5" fill="#855CD6"></path>
                 <path d="M9.8115942,9.1884058 L8.6884058,9.1884058 L8.6884058,10.3115942 C8.6884058,10.6859903 8.38647343,11 8,11 C7.61352657,11 7.3115942,10.6859903 7.3115942,10.3115942 L7.3115942,9.1884058 L6.1884058,9.1884058 C5.81400966,9.1884058 5.5,8.88647343 5.5,8.5 C5.5,8.11352657 5.81400966,7.8115942 6.1884058,7.8115942 L7.3115942,7.8115942 L7.3115942,6.6884058 C7.3115942,6.31280193 7.61352657,6 8,6 C8.38647343,6 8.6884058,6.31280193 8.6884058,6.6884058 L8.6884058,7.8115942 L9.8115942,7.8115942 C10.1859903,7.8115942 10.5,8.11352657 10.5,8.5 C10.5,8.88647343 10.1859903,9.1884058 9.8115942,9.1884058 Z" id="Fill-1" stroke="#FFFFFF" stroke-width="0.25" fill="#FFFFFF"></path>
             </g>
         </g>
diff --git a/src/components/mode-tools/icons/curved-point.svg b/src/components/mode-tools/icons/curved-point.svg
index 9c630534..fcad7bb0 100644
--- a/src/components/mode-tools/icons/curved-point.svg
+++ b/src/components/mode-tools/icons/curved-point.svg
@@ -6,12 +6,12 @@
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="curved-point">
-            <path d="M2,15 C2,10.5818452 5.58151214,7 10.000744,7 C14.4184879,7 18,10.5818452 18,15" id="Stroke-3" stroke="#774DCB" stroke-width="0.75" fill-opacity="0.25" fill="#774DCB" stroke-linecap="round" stroke-linejoin="round"></path>
-            <path d="M3,7 L17,7" id="Stroke-7" stroke="#774DCB" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"></path>
-            <circle id="Oval-4" fill-opacity="0.25" fill="#774DCB" cx="10" cy="7" r="3"></circle>
-            <circle id="Oval-4" fill="#774DCB" cx="10" cy="7" r="2"></circle>
-            <circle id="Oval-5" fill="#774DCB" cx="3" cy="7" r="1"></circle>
-            <circle id="Oval-5-Copy" fill="#774DCB" cx="17" cy="7" r="1"></circle>
+            <path d="M2,15 C2,10.5818452 5.58151214,7 10.000744,7 C14.4184879,7 18,10.5818452 18,15" id="Stroke-3" stroke="#855CD6" stroke-width="0.75" fill-opacity="0.25" fill="#855CD6" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M3,7 L17,7" id="Stroke-7" stroke="#855CD6" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"></path>
+            <circle id="Oval-4" fill-opacity="0.25" fill="#855CD6" cx="10" cy="7" r="3"></circle>
+            <circle id="Oval-4" fill="#855CD6" cx="10" cy="7" r="2"></circle>
+            <circle id="Oval-5" fill="#855CD6" cx="3" cy="7" r="1"></circle>
+            <circle id="Oval-5-Copy" fill="#855CD6" cx="17" cy="7" r="1"></circle>
         </g>
     </g>
 </svg>
diff --git a/src/components/mode-tools/icons/delete.svg b/src/components/mode-tools/icons/delete.svg
index 1b1e06ee..91d41f00 100644
--- a/src/components/mode-tools/icons/delete.svg
+++ b/src/components/mode-tools/icons/delete.svg
@@ -5,7 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="delete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Delete-Icon" transform="translate(2.000000, 1.500000)" fill="#774DCB" fill-rule="nonzero">
+        <g id="Delete-Icon" transform="translate(2.000000, 1.500000)" fill="#855CD6" fill-rule="nonzero">
             <path d="M2,3.25 L14,3.25 C14.4437164,3.25 14.7904293,3.63311343 14.7462779,4.07462779 L13.6363275,15.1741315 C13.5468672,16.0687347 12.7940775,16.75 11.8950124,16.75 L4.10498756,16.75 C3.20592253,16.75 2.45313279,16.0687347 2.36367248,15.1741315 L1.25372211,4.07462779 C1.20957067,3.63311343 1.55628356,3.25 2,3.25 Z M8.75,12 L8.75,7 C8.75,6.58578644 8.41421356,6.25 8,6.25 C7.58578644,6.25 7.25,6.58578644 7.25,7 L7.25,12 C7.25,12.4142136 7.58578644,12.75 8,12.75 C8.41421356,12.75 8.75,12.4142136 8.75,12 Z M11.25,12 L11.25,7 C11.25,6.58578644 10.9142136,6.25 10.5,6.25 C10.0857864,6.25 9.75,6.58578644 9.75,7 L9.75,12 C9.75,12.4142136 10.0857864,12.75 10.5,12.75 C10.9142136,12.75 11.25,12.4142136 11.25,12 Z M6.25,12 L6.25,7 C6.25,6.58578644 5.91421356,6.25 5.5,6.25 C5.08578644,6.25 4.75,6.58578644 4.75,7 L4.75,12 C4.75,12.4142136 5.08578644,12.75 5.5,12.75 C5.91421356,12.75 6.25,12.4142136 6.25,12 Z M1.5,4 L14.5,4 L1.5,4 Z M1.5,3 L14.5,3 C15.0522847,3 15.5,3.44771525 15.5,4 C15.5,4.55228475 15.0522847,5 14.5,5 L1.5,5 C0.94771525,5 0.5,4.55228475 0.5,4 C0.5,3.44771525 0.94771525,3 1.5,3 Z M9.25,3.25 L9.25,2 C9.25,1.86192881 9.13807119,1.75 9,1.75 L7,1.75 C6.86192881,1.75 6.75,1.86192881 6.75,2 L6.75,3.25 L9.25,3.25 Z M7,0.25 L9,0.25 C9.96649831,0.25 10.75,1.03350169 10.75,2 L10.75,4.75 L5.25,4.75 L5.25,2 C5.25,1.03350169 6.03350169,0.25 7,0.25 Z" id="Combined-Shape"></path>
         </g>
     </g>
diff --git a/src/components/mode-tools/icons/flip-horizontal.svg b/src/components/mode-tools/icons/flip-horizontal.svg
index 7cc7e3ba..40c54500 100644
--- a/src/components/mode-tools/icons/flip-horizontal.svg
+++ b/src/components/mode-tools/icons/flip-horizontal.svg
@@ -12,8 +12,8 @@
                 <circle id="Oval-Copy" fill="#575E75" opacity="0.5" cx="8" cy="3.875" r="1"></circle>
                 <circle id="Oval-Copy-2" fill="#575E75" opacity="0.5" cx="8" cy="7" r="1"></circle>
                 <circle id="Oval-Copy-3" fill="#575E75" opacity="0.5" cx="8" cy="10.125" r="1"></circle>
-                <path d="M16,3.08425423 L16,10.9157458 C16,11.4342626 15.2574491,11.6956996 14.8235798,11.3282353 L10.2019293,7.41103711 C9.93269025,7.18445835 9.93269025,6.81408922 10.2019293,6.58751046 L14.8235798,2.67176469 C15.2574491,2.30430042 16,2.56573745 16,3.08425423" id="Fill-11" fill="#774DCB" opacity="0.5"></path>
-                <path d="M0,10.9157458 L0,3.08425423 C0,2.56573745 0.742550911,2.30430042 1.17470525,2.67176469 L5.79807074,6.58896289 C6.06730975,6.81554165 6.06730975,7.18591078 5.79807074,7.41248954 L1.17470525,11.3282353 C0.742550911,11.6956996 0,11.4342626 0,10.9157458" id="Fill-14" fill="#774DCB"></path>
+                <path d="M16,3.08425423 L16,10.9157458 C16,11.4342626 15.2574491,11.6956996 14.8235798,11.3282353 L10.2019293,7.41103711 C9.93269025,7.18445835 9.93269025,6.81408922 10.2019293,6.58751046 L14.8235798,2.67176469 C15.2574491,2.30430042 16,2.56573745 16,3.08425423" id="Fill-11" fill="#855CD6" opacity="0.5"></path>
+                <path d="M0,10.9157458 L0,3.08425423 C0,2.56573745 0.742550911,2.30430042 1.17470525,2.67176469 L5.79807074,6.58896289 C6.06730975,6.81554165 6.06730975,7.18591078 5.79807074,7.41248954 L1.17470525,11.3282353 C0.742550911,11.6956996 0,11.4342626 0,10.9157458" id="Fill-14" fill="#855CD6"></path>
             </g>
         </g>
     </g>
diff --git a/src/components/mode-tools/icons/flip-vertical.svg b/src/components/mode-tools/icons/flip-vertical.svg
index 65948d2a..b286a23e 100644
--- a/src/components/mode-tools/icons/flip-vertical.svg
+++ b/src/components/mode-tools/icons/flip-vertical.svg
@@ -12,8 +12,8 @@
                 <circle id="Oval-Copy" fill="#575E75" opacity="0.5" cx="8" cy="3.875" r="1"></circle>
                 <circle id="Oval-Copy-2" fill="#575E75" opacity="0.5" cx="8" cy="7" r="1"></circle>
                 <circle id="Oval-Copy-3" fill="#575E75" opacity="0.5" cx="8" cy="10.125" r="1"></circle>
-                <path d="M16,3.08425423 L16,10.9157458 C16,11.4342626 15.2574491,11.6956996 14.8235798,11.3282353 L10.2019293,7.41103711 C9.93269025,7.18445835 9.93269025,6.81408922 10.2019293,6.58751046 L14.8235798,2.67176469 C15.2574491,2.30430042 16,2.56573745 16,3.08425423" id="Fill-11" fill="#774DCB" opacity="0.5"></path>
-                <path d="M0,10.9157458 L0,3.08425423 C0,2.56573745 0.742550911,2.30430042 1.17470525,2.67176469 L5.79807074,6.58896289 C6.06730975,6.81554165 6.06730975,7.18591078 5.79807074,7.41248954 L1.17470525,11.3282353 C0.742550911,11.6956996 0,11.4342626 0,10.9157458" id="Fill-14" fill="#774DCB"></path>
+                <path d="M16,3.08425423 L16,10.9157458 C16,11.4342626 15.2574491,11.6956996 14.8235798,11.3282353 L10.2019293,7.41103711 C9.93269025,7.18445835 9.93269025,6.81408922 10.2019293,6.58751046 L14.8235798,2.67176469 C15.2574491,2.30430042 16,2.56573745 16,3.08425423" id="Fill-11" fill="#855CD6" opacity="0.5"></path>
+                <path d="M0,10.9157458 L0,3.08425423 C0,2.56573745 0.742550911,2.30430042 1.17470525,2.67176469 L5.79807074,6.58896289 C6.06730975,6.81554165 6.06730975,7.18591078 5.79807074,7.41248954 L1.17470525,11.3282353 C0.742550911,11.6956996 0,11.4342626 0,10.9157458" id="Fill-14" fill="#855CD6"></path>
             </g>
         </g>
     </g>
diff --git a/src/components/mode-tools/icons/paste.svg b/src/components/mode-tools/icons/paste.svg
index da9e5a04..069531db 100644
--- a/src/components/mode-tools/icons/paste.svg
+++ b/src/components/mode-tools/icons/paste.svg
@@ -8,8 +8,8 @@
         <g id="paste-v2">
             <g id="paste" transform="translate(3.000000, 2.000000)">
                 <polyline id="Path-3" stroke-opacity="0.5" stroke="#575E75" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,2" transform="translate(6.748413, 6.750000) scale(1, -1) translate(-6.748413, -6.750000) " points="0.5 0.5 0.5 13 12.9968262 13"></polyline>
-                <path d="M2,3.00684547 C2,2.45078007 2.45303631,2 2.99703014,2 L10,2 L10,4.34995317 C10,5.26124887 10.7336617,6 11.6500468,6 L14,6 L14,15.0046024 C14,15.5543453 13.544239,16 12.9975267,16 L3.00247329,16 C2.44882258,16 2,15.5500512 2,14.9931545 L2,3.00684547 Z" id="Rectangle-4" fill="#774DCB"></path>
-                <path d="M11,2 L14,5 L11.9989566,5 C11.4472481,5 11,4.55733967 11,4.00104344 L11,2 Z" id="Rectangle-5" fill="#774DCB"></path>
+                <path d="M2,3.00684547 C2,2.45078007 2.45303631,2 2.99703014,2 L10,2 L10,4.34995317 C10,5.26124887 10.7336617,6 11.6500468,6 L14,6 L14,15.0046024 C14,15.5543453 13.544239,16 12.9975267,16 L3.00247329,16 C2.44882258,16 2,15.5500512 2,14.9931545 L2,3.00684547 Z" id="Rectangle-4" fill="#855CD6"></path>
+                <path d="M11,2 L14,5 L11.9989566,5 C11.4472481,5 11,4.55733967 11,4.00104344 L11,2 Z" id="Rectangle-5" fill="#855CD6"></path>
                 <path d="M8.34791833,12.8771885 C8.26180668,12.9633001 8.14699113,13.0063559 8.03217559,13.0063559 C7.9030081,13.0063559 7.78819256,12.9633001 7.70208091,12.8771885 L5.86503222,11.0401398 C5.73586474,10.8966203 5.69280891,10.7100451 5.76456862,10.5378218 C5.83632834,10.3655985 5.99419971,10.2651349 6.18077497,10.2651349 L6.92707599,10.2651349 L7.28587456,7.66743321 C7.31457845,7.46650601 7.41504205,7.27993075 7.57291342,7.16511521 C7.73078479,7.03594773 7.94606393,6.97853995 8.13263919,7.00724384 C8.47708582,7.06321642 8.74977273,7.33733852 8.79282856,7.66743321 L9.16597907,10.2651349 L9.86922427,10.2651349 C10.0557995,10.2651349 10.2136709,10.3799504 10.2854306,10.5521737 C10.3571903,10.7100451 10.3141345,10.9109723 10.184967,11.0401398 L8.34791833,12.8771885 Z" id="Fill-1" fill="#FFFFFF"></path>
             </g>
         </g>
diff --git a/src/components/mode-tools/icons/straight-point.svg b/src/components/mode-tools/icons/straight-point.svg
index 6f1c20fe..a198dfa6 100644
--- a/src/components/mode-tools/icons/straight-point.svg
+++ b/src/components/mode-tools/icons/straight-point.svg
@@ -5,8 +5,8 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="straight-point" fill="#774DCB">
-            <polyline id="Path-2" stroke="#774DCB" stroke-width="0.75" fill-opacity="0.25" stroke-linecap="round" stroke-linejoin="round" points="2 15 10 7 18 15"></polyline>
+        <g id="straight-point" fill="#855CD6">
+            <polyline id="Path-2" stroke="#855CD6" stroke-width="0.75" fill-opacity="0.25" stroke-linecap="round" stroke-linejoin="round" points="2 15 10 7 18 15"></polyline>
             <circle id="Oval-4" fill-opacity="0.25" cx="10" cy="7" r="3"></circle>
             <circle id="Oval-4" cx="10" cy="7" r="2"></circle>
         </g>
diff --git a/src/components/paint-editor/icons/rotation-point.svg b/src/components/paint-editor/icons/rotation-point.svg
index 0324b2e2..5857252c 100755
--- a/src/components/paint-editor/icons/rotation-point.svg
+++ b/src/components/paint-editor/icons/rotation-point.svg
@@ -5,7 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="rotation-point" stroke="#774DCB" stroke-width="1.35">
+        <g id="rotation-point" stroke="#855CD6" stroke-width="1.35">
             <g id="set-center" transform="translate(3.000000, 3.000000)">
                 <path d="M0,7 L5,7" id="Stroke-1"></path>
                 <path d="M9,7 L14,7" id="Stroke-3"></path>
diff --git a/src/components/paint-editor/paint-editor.css b/src/components/paint-editor/paint-editor.css
index a5cec6ec..35672d5c 100644
--- a/src/components/paint-editor/paint-editor.css
+++ b/src/components/paint-editor/paint-editor.css
@@ -172,7 +172,7 @@ $border-radius: 0.25rem;
 .bitmap-button {
     display: flex;
     border-radius: 5px;
-    background-color: $looks-tertiary;
+    background-color: $looks-secondary;
     padding: calc(2 * $grid-unit);
     line-height: 1.5rem;
     font-size: calc(3 * $grid-unit);
diff --git a/src/components/tool-select-base/tool-select-base.css b/src/components/tool-select-base/tool-select-base.css
index ed2f2ea3..9eda9115 100644
--- a/src/components/tool-select-base/tool-select-base.css
+++ b/src/components/tool-select-base/tool-select-base.css
@@ -16,7 +16,7 @@ $border-radius: .25rem;
 }
 
 .mod-tool-select.is-selected {
-    background-color: $looks-tertiary;
+    background-color: $looks-secondary;
 }
 
 .mod-tool-select:focus {
diff --git a/src/css/colors.css b/src/css/colors.css
index 0dfc94d3..7d003201 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -8,8 +8,8 @@ $ui-background-blue: #e8edf1;
 
 $text-primary: #575e75;
 
-$looks-tertiary: #774DCB;
-$looks-transparent: hsla(260, 54%, 54%, 0.35); /* 35% transparent version of looks-tertiary */
+$looks-secondary: #855CD6;
+$looks-transparent: hsla(260, 60%, 60%, 0.35); /* 35% transparent version of looks-secondary */
 
 $red-primary: #FF661A;
 $red-tertiary: #E64D00;

From 6c7f2909131fbf0c4bc2ee2bc41281e60d4c20ff Mon Sep 17 00:00:00 2001
From: Andy O'Neill <andy@scratch.mit.edu>
Date: Fri, 5 May 2023 14:42:42 -0400
Subject: [PATCH 3/4] ci: prepare beta prerelease

---
 .circleci/config.yml | 3 +++
 release.config.js    | 5 +++++
 2 files changed, 8 insertions(+)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 09bb9ba6..a5b5cc38 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -82,6 +82,7 @@ workflows:
                 ignore:
                   - master
                   - develop
+                  - beta
                   - /^hotfix\/.*/
   build-test-no-deploy:
     jobs:
@@ -93,6 +94,7 @@ workflows:
                 ignore:
                   - master
                   - develop
+                  - beta
                   - /^hotfix\/.*/
                   - gh-pages
   build-test-deploy:
@@ -106,6 +108,7 @@ workflows:
                 only:
                   - master
                   - develop
+                  - beta
                   - /^hotfix\/.*/
   push-translations:
     triggers:
diff --git a/release.config.js b/release.config.js
index 87af40a0..4765ef5f 100644
--- a/release.config.js
+++ b/release.config.js
@@ -8,6 +8,11 @@ module.exports = {
         {
             name: 'hotfix/*',
             channel: 'hotfix'
+        },
+        {
+            name: 'beta',
+            channel: 'beta',
+            prerelease: true
         }
     ]
 };

From e330d0b7f22a87f7a83e9d6e7c35149b4e86dc48 Mon Sep 17 00:00:00 2001
From: Andy O'Neill <andy@scratch.mit.edu>
Date: Mon, 8 May 2023 13:48:38 -0400
Subject: [PATCH 4/4] feat!: new accent color