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 @@
-
+
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 @@
Created with Sketch.
-
+
-
\ No newline at end of file
+
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 @@
Created with Sketch.
-
+
-
\ No newline at end of file
+
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 @@
-
+
-
\ No newline at end of file
+
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 @@
Created with Sketch.
-
+
-
\ No newline at end of file
+
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 @@
Created with Sketch.
-
+
-
\ No newline at end of file
+
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 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
@@ -22,4 +22,4 @@
-
\ No newline at end of file
+
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 @@
Created with Sketch.
-
+
-
\ No newline at end of file
+
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 @@
-
+
@@ -17,4 +17,4 @@
-
\ No newline at end of file
+
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 @@
-
+
-
\ No newline at end of file
+
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 @@
-
+
-
\ No newline at end of file
+
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 @@
-
+
@@ -17,4 +17,4 @@
-
\ No newline at end of file
+
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 @@
Created with Sketch.
-
+
-
\ No newline at end of file
+
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 @@
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
\ No newline at end of file
+
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 @@
-
-
+
+
-
\ No newline at end of file
+
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 @@
-
-
-
-
-
-
+
+
+
+
+
+
-
\ No newline at end of file
+
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 @@
Created with Sketch.
-
+
-
\ No newline at end of file
+
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 @@
-
-
+
+
-
\ No newline at end of file
+
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 @@
-
-
+
+
-
\ No newline at end of file
+
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 @@
-
-
+
+
-
\ No newline at end of file
+
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 @@
Created with Sketch.
-
-
+
+
-
\ No newline at end of file
+
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 @@
Created with Sketch.
-
+
@@ -15,4 +15,4 @@
-
\ No newline at end of file
+
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;