From 068e24989ead3a23e6bad18bbd8d47e4d6e30787 Mon Sep 17 00:00:00 2001 From: Andy O'Neill Date: Fri, 5 May 2023 16:09:54 -0400 Subject: [PATCH] fix: use looks secondary rather than tertiary for purple accent --- src/components/action-menu/action-menu.css | 6 +++--- src/components/asset-panel/selector.css | 2 +- src/components/audio-trimmer/audio-trimmer.css | 6 +++--- src/components/audio-trimmer/icon--handle.svg | 4 ++-- src/components/backpack/backpack.css | 2 +- src/components/browser-modal/browser-modal.css | 6 +++--- src/components/cards/card.css | 4 ++-- src/components/close-button/close-button.css | 2 +- src/components/connection-modal/connection-modal.css | 12 ++++++------ src/components/context-menu/context-menu.css | 2 +- .../custom-procedures/custom-procedures.css | 6 +++--- src/components/delete-button/delete-button.css | 2 +- src/components/direction-picker/dial.css | 2 +- src/components/direction-picker/icon--all-around.svg | 2 +- .../direction-picker/icon--dont-rotate.svg | 2 +- src/components/direction-picker/icon--handle.svg | 2 +- src/components/direction-picker/icon--left-right.svg | 6 +++--- src/components/drag-layer/drag-layer.css | 2 +- src/components/filter/icon--filter.svg | 2 +- src/components/forms/input.css | 4 ++-- src/components/gui/gui.css | 6 +++--- src/components/gui/icon--code.svg | 2 +- src/components/gui/icon--costumes.svg | 2 +- src/components/gui/icon--sounds.svg | 2 +- src/components/icon-button/icon-button.css | 2 +- src/components/library-item/library-item.css | 2 +- src/components/menu-bar/menu-bar.css | 4 ++-- src/components/menu/menu.css | 2 +- src/components/modal/modal.css | 2 +- src/components/prompt/prompt.css | 4 ++-- src/components/question/question.css | 2 +- src/components/record-modal/icon--back.svg | 2 +- src/components/record-modal/icon--play.svg | 2 +- src/components/record-modal/icon--stop-playback.svg | 2 +- src/components/record-modal/record-modal.css | 8 ++++---- src/components/slider-prompt/slider-prompt.css | 4 ++-- src/components/sound-editor/icon--copy-to-new.svg | 2 +- src/components/sound-editor/icon--copy.svg | 4 ++-- src/components/sound-editor/icon--delete.svg | 2 +- src/components/sound-editor/icon--paste.svg | 2 +- src/components/sound-editor/icon--redo.svg | 2 +- src/components/sound-editor/icon--undo.svg | 2 +- src/components/sound-editor/sound-editor.css | 4 ++-- src/components/spinner/spinner.css | 2 +- src/components/sprite-info/icon--hide.svg | 2 +- src/components/sprite-info/icon--show.svg | 2 +- src/components/sprite-info/sprite-info.css | 2 +- .../sprite-selector-item/sprite-selector-item.css | 6 +++--- src/components/stage-header/icon--large-stage.svg | 4 ++-- src/components/stage-header/icon--small-stage.svg | 4 ++-- src/components/stage-selector/stage-selector.css | 6 +++--- src/components/stage/stage.css | 2 +- src/components/tag-button/tag-button.css | 2 +- src/components/telemetry-modal/telemetry-modal.css | 12 ++++++------ src/components/toggle-buttons/toggle-buttons.css | 2 +- src/components/webgl-modal/webgl-modal.css | 8 ++++---- src/css/colors.css | 8 ++++---- 57 files changed, 102 insertions(+), 102 deletions(-) diff --git a/src/components/action-menu/action-menu.css b/src/components/action-menu/action-menu.css index 71d078576..03be98cac 100644 --- a/src/components/action-menu/action-menu.css +++ b/src/components/action-menu/action-menu.css @@ -19,7 +19,7 @@ $more-button-size: 2.25rem; justify-content: center; cursor: pointer; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - background: $looks-tertiary; + background: $looks-secondary; outline: none; border: none; transition: background-color 0.2s; @@ -72,7 +72,7 @@ button::-moz-focus-inner { */ overflow-y: hidden; - background: $looks-tertiary-dark; + background: $looks-secondary-dark; border-top-left-radius: $more-button-size; border-top-right-radius: $more-button-size; width: $more-button-size; @@ -115,7 +115,7 @@ button::-moz-focus-inner { .more-button { width: $more-button-size; height: $more-button-size; - background: $looks-tertiary-dark; + background: $looks-secondary-dark; } .more-icon { diff --git a/src/components/asset-panel/selector.css b/src/components/asset-panel/selector.css index a50b1cc5f..712bdf342 100644 --- a/src/components/asset-panel/selector.css +++ b/src/components/asset-panel/selector.css @@ -20,7 +20,7 @@ align-items: center; justify-content: space-around; padding: 0.75rem 0; - color: $looks-tertiary; + color: $looks-secondary; text-align: center; background: none; } diff --git a/src/components/audio-trimmer/audio-trimmer.css b/src/components/audio-trimmer/audio-trimmer.css index b36ec82b9..9583558df 100644 --- a/src/components/audio-trimmer/audio-trimmer.css +++ b/src/components/audio-trimmer/audio-trimmer.css @@ -41,7 +41,7 @@ $hover-scale: 1.25; } .selection-background { - background: $looks-tertiary; + background: $looks-secondary; opacity: 0.5; } @@ -64,7 +64,7 @@ $hover-scale: 1.25; } .selector .trim-line { - border: 1px solid $looks-tertiary; + border: 1px solid $looks-secondary; } .playhead-container { @@ -83,7 +83,7 @@ $hover-scale: 1.25; */ width: 100%; height: 100%; - border-left: 1px solid $looks-tertiary; + border-left: 1px solid $looks-secondary; border-top: none; border-bottom: none; border-right: none; diff --git a/src/components/audio-trimmer/icon--handle.svg b/src/components/audio-trimmer/icon--handle.svg index bdfeafe20..69eb54a7e 100644 --- a/src/components/audio-trimmer/icon--handle.svg +++ b/src/components/audio-trimmer/icon--handle.svg @@ -8,9 +8,9 @@ - + - + diff --git a/src/components/backpack/backpack.css b/src/components/backpack/backpack.css index d89933954..98a35a5e8 100644 --- a/src/components/backpack/backpack.css +++ b/src/components/backpack/backpack.css @@ -88,7 +88,7 @@ } .more { - background: $looks-tertiary; + background: $looks-secondary; color: $ui-white; border: none; outline: none; diff --git a/src/components/browser-modal/browser-modal.css b/src/components/browser-modal/browser-modal.css index 18c71e418..5fa57bbec 100644 --- a/src/components/browser-modal/browser-modal.css +++ b/src/components/browser-modal/browser-modal.css @@ -60,10 +60,10 @@ } .button-row button { - border: 1px solid $looks-tertiary; + border: 1px solid $looks-secondary; border-radius: 0.25rem; padding: 0.5rem 2rem; - background: $looks-tertiary; + background: $looks-secondary; color: white; font-weight: bold; font-size: 0.875rem; @@ -77,6 +77,6 @@ } .faq-link { - color: $looks-tertiary; + color: $looks-secondary; text-decoration: none; } diff --git a/src/components/cards/card.css b/src/components/cards/card.css index 5a3467e1e..523323fff 100644 --- a/src/components/cards/card.css +++ b/src/components/cards/card.css @@ -214,7 +214,7 @@ } .deck-name { - color: $looks-tertiary; + color: $looks-secondary; font-weight: bold; font-size: 0.85rem; margin: .625rem 0px; @@ -260,7 +260,7 @@ .see-all-button { cursor: pointer; padding: 0.5rem 1rem; - background-color: $looks-tertiary; + background-color: $looks-secondary; color: white; font-weight: bold; border-radius: 0.25rem; diff --git a/src/components/close-button/close-button.css b/src/components/close-button/close-button.css index bcd081a00..2a023e290 100644 --- a/src/components/close-button/close-button.css +++ b/src/components/close-button/close-button.css @@ -28,7 +28,7 @@ .small { width: 0.825rem; height: 0.825rem; - background-color: $looks-tertiary; + background-color: $looks-secondary; color: $ui-white; } diff --git a/src/components/connection-modal/connection-modal.css b/src/components/connection-modal/connection-modal.css index 66b4fcdff..a97c4355d 100644 --- a/src/components/connection-modal/connection-modal.css +++ b/src/components/connection-modal/connection-modal.css @@ -80,8 +80,8 @@ border-radius: 0.25rem; font-weight: 600; font-size: 0.85rem; - background: $looks-tertiary; - border: $looks-tertiary; + background: $looks-secondary; + border: $looks-secondary; color: white; cursor: pointer; } @@ -172,7 +172,7 @@ right: -15px; left: -15px; padding: 5px 5px; - background-color: $looks-tertiary; + background-color: $looks-secondary; border-radius: 100%; box-shadow: 0px 0px 0px 4px $looks-transparent; /* animation: pulse-blue-ring 1s infinite ease-in-out alternate; */ @@ -208,7 +208,7 @@ .bluetooth-centered-icon { position: absolute; padding: 5px 5px; - background-color: $looks-tertiary; + background-color: $looks-secondary; border-radius: 100%; box-shadow: 0px 0px 0px 2px $looks-transparent; } @@ -297,7 +297,7 @@ .connection-button { padding: 0.6rem 0.75rem; border-radius: 0.5rem; - background: $looks-tertiary; + background: $looks-secondary; color: white; font-weight: 600; font-size: 0.85rem; @@ -413,7 +413,7 @@ } .active-step-dot { - background: $looks-tertiary; + background: $looks-secondary; } .success-dot { diff --git a/src/components/context-menu/context-menu.css b/src/components/context-menu/context-menu.css index 55cd2afea..5548e066b 100644 --- a/src/components/context-menu/context-menu.css +++ b/src/components/context-menu/context-menu.css @@ -25,7 +25,7 @@ } .menu-item:hover { - background: $looks-tertiary; + background: $looks-secondary; color: white; } diff --git a/src/components/custom-procedures/custom-procedures.css b/src/components/custom-procedures/custom-procedures.css index 8bf499d00..d54fd7d82 100644 --- a/src/components/custom-procedures/custom-procedures.css +++ b/src/components/custom-procedures/custom-procedures.css @@ -53,7 +53,7 @@ } .option-card:hover { - border: 2px solid $looks-tertiary; + border: 2px solid $looks-secondary; box-shadow: 0px 0px 0px 4px $looks-transparent; } @@ -92,8 +92,8 @@ } .button-row button.ok-button { - background: $looks-tertiary; - border: $looks-tertiary; + background: $looks-secondary; + border: $looks-secondary; color: white; } diff --git a/src/components/delete-button/delete-button.css b/src/components/delete-button/delete-button.css index f9535b395..692a9d352 100644 --- a/src/components/delete-button/delete-button.css +++ b/src/components/delete-button/delete-button.css @@ -19,7 +19,7 @@ width: 1.75rem; height: 1.75rem; box-shadow: 0px 0px 0px 2px $looks-transparent; - background-color: $looks-tertiary; + background-color: $looks-secondary; color: $ui-white; border-radius: 50%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; diff --git a/src/components/direction-picker/dial.css b/src/components/direction-picker/dial.css index ef1fc2e9d..43ab7c7d0 100644 --- a/src/components/direction-picker/dial.css +++ b/src/components/direction-picker/dial.css @@ -36,6 +36,6 @@ $dial-size: 40px; .gauge-path { fill: $looks-transparent; - stroke: $looks-tertiary; + stroke: $looks-secondary; stroke-width: 1px; } diff --git a/src/components/direction-picker/icon--all-around.svg b/src/components/direction-picker/icon--all-around.svg index 06dd9a304..8ace45b7c 100644 --- a/src/components/direction-picker/icon--all-around.svg +++ b/src/components/direction-picker/icon--all-around.svg @@ -5,6 +5,6 @@ Created with Sketch. - + diff --git a/src/components/direction-picker/icon--dont-rotate.svg b/src/components/direction-picker/icon--dont-rotate.svg index f33effad5..222054e82 100644 --- a/src/components/direction-picker/icon--dont-rotate.svg +++ b/src/components/direction-picker/icon--dont-rotate.svg @@ -5,6 +5,6 @@ Created with Sketch. - + diff --git a/src/components/direction-picker/icon--handle.svg b/src/components/direction-picker/icon--handle.svg index f95cf8443..ea901a7a4 100644 --- a/src/components/direction-picker/icon--handle.svg +++ b/src/components/direction-picker/icon--handle.svg @@ -1 +1 @@ -01_Dial Elements +01_Dial Elements diff --git a/src/components/direction-picker/icon--left-right.svg b/src/components/direction-picker/icon--left-right.svg index 4d2cacb51..8565562d8 100644 --- a/src/components/direction-picker/icon--left-right.svg +++ b/src/components/direction-picker/icon--left-right.svg @@ -5,8 +5,8 @@ Created with Sketch. - - - + + + diff --git a/src/components/drag-layer/drag-layer.css b/src/components/drag-layer/drag-layer.css index 5fe1cf5f5..cb8885374 100644 --- a/src/components/drag-layer/drag-layer.css +++ b/src/components/drag-layer/drag-layer.css @@ -29,7 +29,7 @@ margin-top: -50%; padding: 0.25rem; - border: 2px solid $looks-tertiary; + border: 2px solid $looks-secondary; background: $ui-white; border-radius: 0.5rem; diff --git a/src/components/filter/icon--filter.svg b/src/components/filter/icon--filter.svg index e00524981..c60cc9172 100644 --- a/src/components/filter/icon--filter.svg +++ b/src/components/filter/icon--filter.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/forms/input.css b/src/components/forms/input.css index 2d2c1677e..ce0ab17b7 100644 --- a/src/components/forms/input.css +++ b/src/components/forms/input.css @@ -32,11 +32,11 @@ } .input-form:hover { - border-color: $looks-tertiary; + border-color: $looks-secondary; } .input-form:focus { - border-color: $looks-tertiary; + border-color: $looks-secondary; box-shadow: 0 0 0 0.25rem $looks-transparent; } diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css index fdea80336..2002e5bb2 100644 --- a/src/components/gui/gui.css +++ b/src/components/gui/gui.css @@ -124,7 +124,7 @@ .tab.is-selected { height: 90%; - color: $looks-tertiary; + color: $looks-secondary; background-color: $ui-white; z-index: 4; /* Make sure selected is always above */ } @@ -236,9 +236,9 @@ left: 0; right: 0; z-index: $z-index-extension-button; - background: $looks-tertiary; + background: $looks-secondary; - border: 1px solid $looks-tertiary; + border: 1px solid $looks-secondary; box-sizing: content-box; /* To match scratch-block vertical toolbox borders */ } diff --git a/src/components/gui/icon--code.svg b/src/components/gui/icon--code.svg index 1626e2344..c06998055 100644 --- a/src/components/gui/icon--code.svg +++ b/src/components/gui/icon--code.svg @@ -5,6 +5,6 @@ Created with Sketch. - + diff --git a/src/components/gui/icon--costumes.svg b/src/components/gui/icon--costumes.svg index bd6914e77..5111126f0 100644 --- a/src/components/gui/icon--costumes.svg +++ b/src/components/gui/icon--costumes.svg @@ -5,6 +5,6 @@ Created with Sketch. - + diff --git a/src/components/gui/icon--sounds.svg b/src/components/gui/icon--sounds.svg index d789e052e..d05c06309 100644 --- a/src/components/gui/icon--sounds.svg +++ b/src/components/gui/icon--sounds.svg @@ -5,6 +5,6 @@ Created with Sketch. - + diff --git a/src/components/icon-button/icon-button.css b/src/components/icon-button/icon-button.css index 7527804a8..5e6b4845e 100644 --- a/src/components/icon-button/icon-button.css +++ b/src/components/icon-button/icon-button.css @@ -7,7 +7,7 @@ cursor: pointer; font-size: 0.75rem; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - color: $looks-tertiary; + color: $looks-secondary; border-radius: 0.5rem; } diff --git a/src/components/library-item/library-item.css b/src/components/library-item/library-item.css index 33aba52a4..1a7d15933 100644 --- a/src/components/library-item/library-item.css +++ b/src/components/library-item/library-item.css @@ -29,7 +29,7 @@ .library-item:hover { border-width: 2px; - border-color: $looks-tertiary; + border-color: $looks-secondary; } .hidden { diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css index 741c1c071..9e5d6724d 100644 --- a/src/components/menu-bar/menu-bar.css +++ b/src/components/menu-bar/menu-bar.css @@ -27,7 +27,7 @@ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: $menu-bar-standard-font-size; font-weight: bold; - background-color: $looks-tertiary; + background-color: $looks-secondary; color: $ui-white; } @@ -125,7 +125,7 @@ } .feedback-link { - color: $looks-tertiary; + color: $looks-secondary; text-decoration: none; } diff --git a/src/components/menu/menu.css b/src/components/menu/menu.css index 109e1ab5b..e5d0a66ef 100644 --- a/src/components/menu/menu.css +++ b/src/components/menu/menu.css @@ -4,7 +4,7 @@ position: absolute; border: 1px solid $ui-black-transparent; border-radius: 0 0 8px 8px; - background-color: $looks-tertiary; + background-color: $looks-secondary; padding: 0; margin: 0; min-width: 186px; diff --git a/src/components/modal/modal.css b/src/components/modal/modal.css index 89174bb24..6beaaf8f6 100644 --- a/src/components/modal/modal.css +++ b/src/components/modal/modal.css @@ -67,7 +67,7 @@ $sides: 20rem; box-sizing: border-box; width: 100%; - background-color: $looks-tertiary; + background-color: $looks-secondary; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; diff --git a/src/components/prompt/prompt.css b/src/components/prompt/prompt.css index 0b2d9482e..71fb7fac7 100644 --- a/src/components/prompt/prompt.css +++ b/src/components/prompt/prompt.css @@ -64,8 +64,8 @@ } .button-row button.ok-button { - background: $looks-tertiary; - border: $looks-tertiary; + background: $looks-secondary; + border: $looks-secondary; color: white; } diff --git a/src/components/question/question.css b/src/components/question/question.css index 9e077584e..ca5c65913 100644 --- a/src/components/question/question.css +++ b/src/components/question/question.css @@ -34,7 +34,7 @@ border-radius: 100%; color: white; - background: $looks-tertiary; + background: $looks-secondary; } [dir="ltr"] .question-submit-button { diff --git a/src/components/record-modal/icon--back.svg b/src/components/record-modal/icon--back.svg index 82f3b4efd..aff0c4f68 100644 --- a/src/components/record-modal/icon--back.svg +++ b/src/components/record-modal/icon--back.svg @@ -5,7 +5,7 @@ Created with Sketch. - + diff --git a/src/components/record-modal/icon--play.svg b/src/components/record-modal/icon--play.svg index e1871ff70..14ddbbaf2 100644 --- a/src/components/record-modal/icon--play.svg +++ b/src/components/record-modal/icon--play.svg @@ -18,7 +18,7 @@ - + diff --git a/src/components/record-modal/icon--stop-playback.svg b/src/components/record-modal/icon--stop-playback.svg index bc01665db..c72c363e3 100644 --- a/src/components/record-modal/icon--stop-playback.svg +++ b/src/components/record-modal/icon--stop-playback.svg @@ -18,7 +18,7 @@ - + diff --git a/src/components/record-modal/record-modal.css b/src/components/record-modal/record-modal.css index 8086719f5..e59df3e91 100644 --- a/src/components/record-modal/record-modal.css +++ b/src/components/record-modal/record-modal.css @@ -47,7 +47,7 @@ } .playing-text { - color: $looks-tertiary; + color: $looks-secondary; } .recording-text { @@ -89,12 +89,12 @@ border: 1px solid $ui-black-transparent; font-weight: 600; font-size: 0.85rem; - color: $looks-tertiary; + color: $looks-secondary; } .button-row button.ok-button { - background: $looks-tertiary; - border: $looks-tertiary; + background: $looks-secondary; + border: $looks-secondary; color: white; } diff --git a/src/components/slider-prompt/slider-prompt.css b/src/components/slider-prompt/slider-prompt.css index 0b643888c..146b11551 100644 --- a/src/components/slider-prompt/slider-prompt.css +++ b/src/components/slider-prompt/slider-prompt.css @@ -41,8 +41,8 @@ } .button-row button.ok-button { - background: $looks-tertiary; - border: $looks-tertiary; + background: $looks-secondary; + border: $looks-secondary; color: white; } diff --git a/src/components/sound-editor/icon--copy-to-new.svg b/src/components/sound-editor/icon--copy-to-new.svg index 8e08e6eeb..4d228a177 100644 --- a/src/components/sound-editor/icon--copy-to-new.svg +++ b/src/components/sound-editor/icon--copy-to-new.svg @@ -4,6 +4,6 @@ Sound/General/Copy to New Created with Sketch. - + diff --git a/src/components/sound-editor/icon--copy.svg b/src/components/sound-editor/icon--copy.svg index 50e064a2f..b905e4342 100644 --- a/src/components/sound-editor/icon--copy.svg +++ b/src/components/sound-editor/icon--copy.svg @@ -4,10 +4,10 @@ Sound/General/Copy Created with Sketch. - + - + diff --git a/src/components/sound-editor/icon--delete.svg b/src/components/sound-editor/icon--delete.svg index a0a263d69..c7e096962 100644 --- a/src/components/sound-editor/icon--delete.svg +++ b/src/components/sound-editor/icon--delete.svg @@ -11,7 +11,7 @@ - + diff --git a/src/components/sound-editor/icon--paste.svg b/src/components/sound-editor/icon--paste.svg index ce09f40d8..51027762f 100644 --- a/src/components/sound-editor/icon--paste.svg +++ b/src/components/sound-editor/icon--paste.svg @@ -4,6 +4,6 @@ Sound/General/Paste Created with Sketch. - + diff --git a/src/components/sound-editor/icon--redo.svg b/src/components/sound-editor/icon--redo.svg index aeeb00c5d..c32f94494 100644 --- a/src/components/sound-editor/icon--redo.svg +++ b/src/components/sound-editor/icon--redo.svg @@ -5,7 +5,7 @@ Created with Sketch. - + diff --git a/src/components/sound-editor/icon--undo.svg b/src/components/sound-editor/icon--undo.svg index f6b3fc7f8..44c9517b7 100644 --- a/src/components/sound-editor/icon--undo.svg +++ b/src/components/sound-editor/icon--undo.svg @@ -5,7 +5,7 @@ Created with Sketch. - + diff --git a/src/components/sound-editor/sound-editor.css b/src/components/sound-editor/sound-editor.css index fcf2d15ee..e2e38a020 100644 --- a/src/components/sound-editor/sound-editor.css +++ b/src/components/sound-editor/sound-editor.css @@ -95,7 +95,7 @@ $border-radius: 0.25rem; right: -1px; bottom: -1px; left: -1px; - border: 1px solid $looks-tertiary; + border: 1px solid $looks-secondary; z-index: 1; } @@ -110,7 +110,7 @@ $border-radius: 0.25rem; height: 3rem; width: 3rem; outline: none; - background: $looks-tertiary; + background: $looks-secondary; border-radius: 100%; border: 4px solid $ui-white-dim; cursor: pointer; diff --git a/src/components/spinner/spinner.css b/src/components/spinner/spinner.css index 51c4c2706..48601b034 100644 --- a/src/components/spinner/spinner.css +++ b/src/components/spinner/spinner.css @@ -86,5 +86,5 @@ border-color: $looks-transparent; } .spinner.primary::after { - border-top-color: $looks-tertiary; + border-top-color: $looks-secondary; } diff --git a/src/components/sprite-info/icon--hide.svg b/src/components/sprite-info/icon--hide.svg index 4e9dc7a8c..347b4db5b 100644 --- a/src/components/sprite-info/icon--hide.svg +++ b/src/components/sprite-info/icon--hide.svg @@ -5,7 +5,7 @@ Created with Sketch. - + diff --git a/src/components/sprite-info/icon--show.svg b/src/components/sprite-info/icon--show.svg index 0eed3fd98..d6fd9280d 100644 --- a/src/components/sprite-info/icon--show.svg +++ b/src/components/sprite-info/icon--show.svg @@ -5,7 +5,7 @@ Created with Sketch. - + diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css index 876acfd25..364df9fce 100644 --- a/src/components/sprite-info/sprite-info.css +++ b/src/components/sprite-info/sprite-info.css @@ -62,7 +62,7 @@ } .rotation-select:focus { - border-color: $looks-tertiary; + border-color: $looks-secondary; box-shadow: inset 0 0 0 1px $ui-black-transparent); } diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css index 1af628ca2..81c48358b 100644 --- a/src/components/sprite-selector-item/sprite-selector-item.css +++ b/src/components/sprite-selector-item/sprite-selector-item.css @@ -24,12 +24,12 @@ .sprite-selector-item.is-selected { box-shadow: 0px 0px 0px 4px $looks-transparent; - border: 2px solid $looks-tertiary; + border: 2px solid $looks-secondary; background: $ui-white; } .sprite-selector-item:hover { - border: 2px solid $looks-tertiary; + border: 2px solid $looks-secondary; background: $ui-white; } @@ -88,7 +88,7 @@ } .is-selected .sprite-info { - background: $looks-tertiary; + background: $looks-secondary; color: $ui-white; } diff --git a/src/components/stage-header/icon--large-stage.svg b/src/components/stage-header/icon--large-stage.svg index e069a0951..7b33554e7 100644 --- a/src/components/stage-header/icon--large-stage.svg +++ b/src/components/stage-header/icon--large-stage.svg @@ -5,10 +5,10 @@ Created with Sketch. - + - + diff --git a/src/components/stage-header/icon--small-stage.svg b/src/components/stage-header/icon--small-stage.svg index 9ddc61cef..aab6d5b55 100644 --- a/src/components/stage-header/icon--small-stage.svg +++ b/src/components/stage-header/icon--small-stage.svg @@ -5,10 +5,10 @@ Created with Sketch. - + - + diff --git a/src/components/stage-selector/stage-selector.css b/src/components/stage-selector/stage-selector.css index 921c2a2a3..f93a0c344 100644 --- a/src/components/stage-selector/stage-selector.css +++ b/src/components/stage-selector/stage-selector.css @@ -26,12 +26,12 @@ $header-height: calc($stage-menu-height - 2px); .stage-selector.is-selected { border-top-left-radius: .625rem; border-top-right-radius: .625rem; - border-color: $looks-tertiary; + border-color: $looks-secondary; box-shadow: 0px 0px 0px 4px $looks-transparent; } .stage-selector:hover { - border-color: $looks-tertiary; + border-color: $looks-secondary; } .header { @@ -60,7 +60,7 @@ $header-height: calc($stage-menu-height - 2px); } .stage-selector.is-selected .header { - background-color: $looks-tertiary; + background-color: $looks-secondary; } .stage-selector.is-selected .header-title { diff --git a/src/components/stage/stage.css b/src/components/stage/stage.css index e0e74cad8..a799e05ce 100644 --- a/src/components/stage/stage.css +++ b/src/components/stage/stage.css @@ -109,7 +109,7 @@ stage doesn't "spill" out from under its rounded corners. instead, shift these o .frame { background: $looks-transparent; - border: 2px solid $looks-tertiary; + border: 2px solid $looks-secondary; border-radius: 0.5rem; animation-name: flash; animation-duration: 0.75s; diff --git a/src/components/tag-button/tag-button.css b/src/components/tag-button/tag-button.css index a84017ae0..83c9ee9ca 100644 --- a/src/components/tag-button/tag-button.css +++ b/src/components/tag-button/tag-button.css @@ -3,7 +3,7 @@ .tag-button { padding: .625rem 1rem; - background: $looks-tertiary; + background: $looks-secondary; border-radius: 1.375rem; color: $ui-white; height: $library-filter-bar-height; diff --git a/src/components/telemetry-modal/telemetry-modal.css b/src/components/telemetry-modal/telemetry-modal.css index 50165c91a..d94f2f00c 100644 --- a/src/components/telemetry-modal/telemetry-modal.css +++ b/src/components/telemetry-modal/telemetry-modal.css @@ -35,7 +35,7 @@ $ui-gray: hsla(0, 0%, 95%, 1); .illustration { width: 100%; height: 123px; - background-color: $looks-tertiary; + background-color: $looks-secondary; background-image: url('./telemetry-modal-header.png'); background-size: cover; } @@ -46,7 +46,7 @@ $ui-gray: hsla(0, 0%, 95%, 1); } .privacy-policy-link { - color: $looks-tertiary; + color: $looks-secondary; text-decoration: none; } @@ -92,14 +92,14 @@ $ui-gray: hsla(0, 0%, 95%, 1); .radio-buttons input[type="radio"]:checked { transition: all .25s ease; background-color: $ui-white; - border: 1px solid $looks-tertiary; + border: 1px solid $looks-secondary; } .radio-buttons input[type="radio"]:checked::after { display: block; margin: 0.125rem; border-radius: 50%; - background-color: $looks-tertiary; + background-color: $looks-secondary; width: .625rem; height: .625rem; content: ""; @@ -127,11 +127,11 @@ $ui-gray: hsla(0, 0%, 95%, 1); } .button-row button { - border: 1px solid $looks-tertiary; + border: 1px solid $looks-secondary; border-radius: 0.25rem; padding: 0.5rem 1.5rem; color: white; - background: $looks-tertiary; + background: $looks-secondary; font-weight: bold; font-size: .875rem; cursor: pointer; diff --git a/src/components/toggle-buttons/toggle-buttons.css b/src/components/toggle-buttons/toggle-buttons.css index c1abacafd..d5b54e51b 100644 --- a/src/components/toggle-buttons/toggle-buttons.css +++ b/src/components/toggle-buttons/toggle-buttons.css @@ -43,7 +43,7 @@ right: -1px; bottom: -1px; left: -1px; - border: 1px solid $looks-tertiary; + border: 1px solid $looks-secondary; } /* round corners for first and last buttons */ diff --git a/src/components/webgl-modal/webgl-modal.css b/src/components/webgl-modal/webgl-modal.css index 04d85b3d9..43327f211 100644 --- a/src/components/webgl-modal/webgl-modal.css +++ b/src/components/webgl-modal/webgl-modal.css @@ -29,7 +29,7 @@ .illustration { width: 100%; height: 208px; - background-color: $looks-tertiary; + background-color: $looks-secondary; background-image: url('./unsupported.png'); background-size: cover; } @@ -54,10 +54,10 @@ } .button-row button { - border: 1px solid $looks-tertiary; + border: 1px solid $looks-secondary; border-radius: 0.25rem; padding: 0.5rem 2rem; - background: $looks-tertiary; + background: $looks-secondary; color: white; font-weight: bold; font-size: 0.875rem; @@ -70,6 +70,6 @@ } .faq-link { - color: $looks-tertiary; + color: $looks-secondary; text-decoration: none; } diff --git a/src/css/colors.css b/src/css/colors.css index d4457ed6b..13a861788 100644 --- a/src/css/colors.css +++ b/src/css/colors.css @@ -17,10 +17,10 @@ $text-primary-transparent: hsla(225, 15%, 40%, 0.75); $motion-primary: hsla(215, 100%, 65%, 1); /* #4C97FF */ $motion-tertiary: hsla(215, 60%, 50%, 1); /* #3373CC */ -$looks-tertiary: hsla(260, 54%, 54%, 1); /* #774DCB */ -$looks-transparent: hsla(260, 54%, 54%, 0.35); /* 35% transparent version of looks-tertiary */ -$looks-light-transparent: hsla(260, 54%, 54%, 0.15); /* 15% transparent version of looks-tertiary */ -$looks-tertiary-dark: hsla(263, 54%, 46%, 1); /* #6736B5 */ +$looks-secondary: hsla(260, 60%, 60%, 1); /* #855CD6 */ +$looks-transparent: hsla(260, 60%, 60%, 0.35); /* 35% transparent version of looks-tertiary */ +$looks-light-transparent: hsla(260, 60%, 60%, 0.15); /* 15% transparent version of looks-tertiary */ +$looks-secondary-dark: hsla(260, 42%, 51%, 1); /* #714EB6 */ $red-primary: hsla(20, 100%, 55%, 1); /* #FF661A */ $red-tertiary: hsla(20, 100%, 45%, 1); /* #E64D00 */