Theming the microbit target

pxtarget.json

@@ -173,15 +173,16 @@
     "appTheme": {
         "accentColor": "#5C005C",
         "logoUrl": "http://microbit.org/",
-        "logo": "./static/logo.portrait.black.svg",
+        "logo": "./static/logo.portrait.white.svg",
         "docsLogo": "./static/logo.square.white.svg",
-        "portraitLogo": "./static/logo.square.black.svg",
+        "portraitLogo": "./static/logo.square.white.svg",
         "footerLogo": "./static/logo.portrait.black.svg",
         "cardLogo": "./static/icons/apple-touch-icon.png",
         "appLogo": "./static/icons/apple-touch-icon.png",
         "organization": "Microsoft",
         "organizationUrl": "https://pxt.io/",
         "organizationLogo": "./static/Microsoft-logo_rgb_c-gray.png",
+        "organizationWideLogo": "./static/Microsoft-logo_rgb_c-white.png",
         "homeUrl": "https://pxt.microbit.org/",
         "embedUrl": "https://pxt.microbit.org/",
         "privacyUrl": "https://go.microsoft.com/fwlink/?LinkId=521839",
@@ -311,6 +312,16 @@
                 "browser": "*",
                 "path": "/static/mb/device/usb-windows-sendto.jpg"
             }
-        ]
+        ],
+        "invertedMenu": true,
+        "coloredToolbox": true,
+        "blocklyOptions": { 
+            "grid": {
+                "spacing": 45,
+                "length": 7,
+                "colour": "rgba(189, 195, 199, 0.30)",
+                "snap": false
+            }
+        }
     }
 }

theme/site/collections/menu.variables

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

theme/site/globals/site.variables

@@ -1,3 +1,35 @@
 /*******************************
      User Global Variables
 *******************************/
+
+@importGoogleFonts: true;
+
+@fontName  : 'Roboto';
+
+@emSize      : 14px;
+@fontSize    : 13px;
+
+@primaryColor: @teal;
+
+@teal: #3891A6;
+@blue: #456990;
+@red: #EF767A;
+@pink: #F46197;
+@yellow: #FDE74C;
+
+/* Microbit.org colors */
+@orange: #ff8b27;
+@purple: #6633cc;
+@green: #00ED00;
+
+@pageBackground: #fff;
+
+/*******************************
+         PXT Overrides
+*******************************/
+
+@mainMenuHeight: 5rem;
+@mobileMenuHeight: 5rem;
+
+@simulatorBackground: #FDFDFF;
+@blocklySvgColor: #ecf0f1;

theme/style.less

@@ -13,7 +13,94 @@
 *******************************/
 
 .download-button {
-    &:extend(.ui all);
+    &:extend(.ui.button all);
-    &:extend(.button all);
+    &:extend(.purple all);
-    &:extend(.green all);
+}
+
+.download-button.download-button-full {
+    &:extend(.ui.inverted.button all);
+    &:extend(.purple all);
+}
+
+.download-button:hover {
+    &:extend(.green all);
+    color: black !important;
+}
+
+.getting-started-btn {
+    &:extend(.ui.button all);
+    &:extend(.orange all);
+}
+
+#filelist {
+    background: #fff url(https://az742082.vo.msecnd.net/pub/psopafpj) 0 0 repeat !important;
+}
+
+/*******************************
+             Blockly
+*******************************/
+
+.blocklyTreeRow {
+    border-bottom: 1px solid #ecf0f1;
+    margin-bottom: 0px;
+}
+
+.blocklyTreeSelected {
+    background-color: #1B1C1D !important;
+}
+
+/* Blockly toolbox font size same as the page font */
+.blocklyTreeLabel {
+    font-family: @pageFont !important;
+    font-weight: 200;
+}
+
+.blocklyToolboxDiv {
+    /*padding:5px; */
+    background-color: white;
+}
+
+.blocklyFlyoutBackground {
+    fill: #525A67;
+}
+
+/* Remove shadow around blockly blocks */
+.blocklyPathDark, .blocklyPathLight {
+    display: none;
+}
+
+.organization {
+    top: 1.6em;
+}
+
+/* Mobile */
+@media only screen and (max-width: @largestMobileScreen) {
+    #filelist {
+        background: transparent !important;
+    }
+    .organization {
+        top: auto;
+    }
+}
+
+/* Tablet */
+@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+    .organization {
+        top: auto;
+    }
+}
+
+/* Small Monitor */
+@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
+    .organization {
+        top: auto;
+    }
+}
+
+/* Large Monitor */
+@media only screen and (min-width: @largeMonitorBreakpoint) {
+    .blocklyTreeRow {
+        width: 230px;
+        padding-left: 1rem;
+    }
 }

theme/theme.config

@@ -32,7 +32,7 @@
 @input      : 'pxt';
 @label      : 'pxt';
 @list       : 'pxt';
-@loader     : 'pxt';
+@loader     : 'pulsar';
 @rail       : 'pxt';
 @reveal     : 'pxt';
 @segment    : 'pxt';
@@ -41,7 +41,7 @@
 /* Collections */
 @breadcrumb : 'default';
 @form       : 'default';
-@grid       : 'default';
+@grid       : 'pxt';
 @menu       : 'pxt';
 @message    : 'default';
 @table      : 'default';
@@ -91,7 +91,9 @@
 
 @fontPath  : 'fonts';
 
+/*
 @headerFont        : 'Segoe UI', 'Helvetica Neue', Arial, Helvetica, sans-serif;
 @pageFont          : 'Segoe UI', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+*/
 
 /* End Config */