UI changes to match the calliope design.

docs/static/blockly/media/sprites.svg

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="utf-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="96px" height="124px">
+  <style type="text/css">
+#background {
+  fill: none;
+}
+.arrows {
+  fill: #000;
+  stroke: none;
+}
+.selected>.arrows {
+  fill: #fff;
+}
+.checkmark {
+  fill: #000;
+  font-family: sans-serif;
+  font-size: 10pt;
+  text-anchor: middle;
+}
+.trash {
+  fill: #BDCECF;
+}
+.zoom {
+  fill: none;
+  stroke: #BDCECF;
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+.zoom>.center {
+  fill: #BDCECF;
+  stroke-width: 0;
+}
+  </style>
+  <rect id="background" width="96" height="124" x="0" y="0" />
+
+  <g>
+    <path class="arrows" d="M 13,1.5 13,14.5 1.74,8 z" />
+    <path class="arrows" d="M 17.5,3 30.5,3 24,14.26 z" />
+    <path class="arrows" d="M 35,1.5 35,14.5 46.26,8 z" />
+  </g>
+  <g class="selected" transform="translate(0, 16)">
+    <path class="arrows" d="M 13,1.5 13,14.5 1.74,8 z" />
+    <path class="arrows" d="M 17.5,3 30.5,3 24,14.26 z" />
+    <path class="arrows" d="M 35,1.5 35,14.5 46.26,8 z" />
+  </g>
+
+  <text class="checkmark" x="55.5" y="28">&#10003;</text>
+
+  <g class="trash">
+    <path d="M 2,41 v 6 h 42 v -6 h -10.5 l -3,-3 h -15 l -3,3 z" />
+    <rect width="36" height="20" x="5" y="50" />
+    <rect width="36" height="42" x="5" y="50" rx="4" ry="4" />
+  </g>
+
+  <g class="zoom">
+    <circle r="11.5" cx="16" cy="108" />
+    <circle r="4.3" cx="16" cy="108" class="center" />
+    <path d="m 28,108 h3" />
+    <path d="m 1,108 h3" />
+    <path d="m 16,120 v3" />
+    <path d="m 16,93 v3" />
+  </g>
+
+  <g class="zoom">
+    <circle r="15" cx="48" cy="108" />
+    <path d="m 48,101.6 v12.8" />
+    <path d="m 41.6,108 h12.8" />
+  </g>
+
+  <g class="zoom">
+    <circle r="15" cx="80" cy="108" />
+    <path d="m 73.6,108 h12.8" />
+  </g>
+</svg>

libs/core/basic.cpp

@@ -4,7 +4,7 @@
 /**
  * Provides access to basic micro:bit functionality.
  */
-//% color=#0078D7 weight=100
+//% color=#54C9C9 weight=100
 namespace basic {
     /**
     * Sets the color on the build-in LED. Set to 0 to turn off.

libs/core/basic.ts

@@ -34,7 +34,7 @@ enum Colors {
 /**
  * Provides access to basic micro:bit functionality.
  */
-//% color=#0078D7 weight=100
+//% color=#54C9C9 weight=100
 namespace basic {
     /**
      * Converts the color name to a number

libs/core/control.ts

@@ -1,7 +1,7 @@
 /**
 * Runtime and event utilities.
 */
-//% weight=1 color="#333333"
+//% weight=1 color="#42495F"
 //% advanced=true
 namespace control {
 

libs/core/input.cpp

@@ -108,7 +108,7 @@ enum class Gesture {
     SixG = MICROBIT_ACCELEROMETER_EVT_6G
 };
 
-//% color=300 weight=99
+//% color=#C90072 weight=99
 namespace input {
     /**
      * Do something when a button (``A``, ``B`` or both ``A+B``) is pressed

libs/core/input.ts

@@ -1,7 +1,7 @@
 /**
  * Events and data from sensors
  */
-//% color=#B4009E weight=99
+//% color=#C90072 weight=99
 namespace input {
     /**
      * Attaches code to run when the screen is facing up.

libs/core/led.cpp

@@ -8,7 +8,7 @@ enum class DisplayMode_ {
     // TODO DISPLAY_MODE_BLACK_AND_WHITE_LIGHT_SENSE
 };
 
-//% color=3 weight=35
+//% color=#8169E6 weight=35
 namespace led {
 
     /**

libs/core/led.ts

@@ -1,7 +1,7 @@
 /**
  * Control of the LED screen.
  */
-//% color=#5C2D91 weight=97
+//% color=#8169E6 weight=97
     namespace led {
 
     // what's the current high value

libs/core/motors.cpp

@@ -3,7 +3,7 @@
 /**
 * Blocks to control the onboard motors
 */
-//% weight=30
+//% color=#008272 weight=30
 namespace motors {
     /**
     * Controls the power sent to a single motor

libs/core/music.ts

@@ -125,7 +125,7 @@ enum BeatFraction {
 /**
  * Generation of music tones through pin ``P0``.
  */
-//% color=#D83B01 weight=98
+//% color=#DF4600 weight=98
 namespace music {
     let beatsPerMinute: number = 120;
 

libs/core/shims.d.ts

@@ -126,7 +126,7 @@ declare interface Image {
     /**
      * Provides access to basic micro:bit functionality.
      */
-    //% color=#0078D7 weight=100
+    //% color=#54C9C9 weight=100
 declare namespace basic {
 
     /**
@@ -218,7 +218,7 @@ declare namespace basic {
 
 
 
-    //% color=300 weight=99
+    //% color=#C90072 weight=99
 declare namespace input {
 
     /**
@@ -432,7 +432,7 @@ declare namespace control {
 
 
 
-    //% color=3 weight=35
+    //% color=#8169E6 weight=35
 declare namespace led {
 
     /**
@@ -513,7 +513,7 @@ declare namespace led {
     /**
      * Blocks to control the onboard motors
      */
-    //% weight=30
+    //% color=#008272 weight=30
 declare namespace motors {
 
     /**

pxtarget.json

@@ -219,8 +219,6 @@
     },
     "appTheme": {
         "accentColor": "#249899",
-        "downloadClass": "orange",
-        "invertedMenu": true,
         "defaultLocale": "de",
         "logoUrl": "https://calliope.cc/about",
         "logo": "./static/Calliopeminieditor.svg",
@@ -350,6 +348,12 @@
                 "browser": "*",
                 "path": "/static/mb/device/usb-windows-sendto.jpg"
             }
-        ]
+        ],
+        "invertedMenu": true,
+        "invertedToolbox": true,
+        "blocklyOptions": {
+            "media": "./static/blockly/media/",
+            "trashcan": true
+        }
     }
 }

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;
+}