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;