UI changes to match the calliope design.

theme/site/collections/menu.variables

@@ -1,3 +1,13 @@
 /*******************************
     User Variable Overrides
 *******************************/
+
+@invertedBackground: #525A67;
+@dropdownMenuDistance: 0px;
+
+/*******************************
+    PXT Theme Overrides
+*******************************/
+
+@mainMenuHeight: 5rem;
+@mainMenuMinHeight: (@itemVerticalPadding * 2) + 2em;

theme/site/elements/input.overrides

@@ -1,3 +1,15 @@
 /*******************************
          Site Overrides
 *******************************/
+
+.ui.inverted.input input {
+    background:#424852;
+    border-radius: 20px;
+    border: 0px !important;
+    padding: 0.2em !important;
+    padding-left: 0.6em !important;
+}
+
+.rtl .ui.inverted.input input {
+    padding-right: 0.6em !important;
+}

theme/site/globals/site.variables

@@ -7,13 +7,20 @@
 @secondaryColor: #43C9C9;
 
 @red:#E81123;
-@orange:#D78C01;
-@yellow:#EEDA47;
+@orange:#DF4600;
+@yellow:#F4C918;
 @green:#3FC863;
 @teal:#008272;
-@blue:#0078D7;
-@violet:#CF0071;
-@purple:#8073E5;
+@blue:#54C9C9;
+@violet:#C90072;
+@purple:#8169E6;
 @pink:#E2008C;
 @brown:#6B5B4C;
-@grey:#515B67;
+@grey:#42495F;
+
+/*******************************
+         PXT Overrides
+*******************************/
+
+@backgroundColor: #FDFDFA;
+@blocklyToolboxColor: #F6F4E6;

theme/style.less

@@ -1,2 +1,81 @@
 /* Import all components */
 @import 'semantic';
+@import 'themes/default/globals/site.variables';
+@import 'themes/pxt/globals/site.variables';
+@import 'site/globals/site.variables';
+
+/* Reference import */
+@import (reference) "semantic.less";
+
+.openproject {
+    background: #4ECC60 !important;
+}
+
+.blocks-menuitem, .javascript-menuitem {
+    background: #738791 !important;
+}
+
+.help-dropdown-menuitem, .more-dropdown-menuitem {
+    background: #424955 !important;
+    margin-right:0px !important;
+}
+
+.play-button {
+    &:extend(.ui all);
+    &:extend(.button all);
+    &:extend(.blue all);
+}
+
+.download-button {
+    &:extend(.ui all);
+    &:extend(.button all);
+    &:extend(.yellow all);
+}
+
+/* This removes the margin between the blockly categories to form connected pills */
+.blocklyTreeRow {
+    width: 230px;
+    border-radius:5px;
+}
+
+/* This removes any padding at the top of the toolbox */
+.blocklyTreeRoot {
+    padding: 0px !important;
+}
+
+/* Blockly Text */
+.blocklyTreeLabel {
+    font-family: "Gotham SSm A","Gotham SSm B","Montserrat","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif  !important;
+}
+
+.blocklyTreeLabel {
+    font-size:1rem !important;
+}
+
+.blocklyFlyoutBackground {
+    fill: #FDFDE2;
+}
+
+.blocklyToolboxDiv {
+    /*left:30px !important;*/
+    padding:7px;
+}
+
+@media only screen and (max-width: @largestMobileScreen) {
+    .blocklyTreeLabel {
+        font-size: 0.5rem !important;
+    }
+}
+
+
+/*******************************
+             Menu Bar
+*******************************/
+
+#menubar {
+    height: 5rem;
+}
+
+#fileNameInput {
+    width: 350px;
+}