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 @@
-
+
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 */