Start implementing new Cura design

icons/down_arrow.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="14"
+   height="7"
+   viewBox="0 0 14 7"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="down_arrow.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.4"
+     inkscape:cx="10.962659"
+     inkscape:cy="9.0480669"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:window-width="1869"
+     inkscape:window-height="1167"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1045.3622)">
+    <path
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 0,1045.3622 7,7 7,-7 z"
+       id="path4138"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

styles.qml

@@ -2,6 +2,50 @@ import QtQuick 2.1
 import QtQuick.Controls 1.1
 import QtQuick.Controls.Styles 1.1
 
+import UM 1.0 as UM
+
 QtObject {
-    
+    property Component sidebar_header_button: Component {
+        ButtonStyle {
+            background: Item {
+                Image {
+                    anchors.right: parent.right;
+                    anchors.verticalCenter: parent.verticalCenter;
+
+                    source: UM.Theme.icons.down_arrow;
+                }
+            }
+
+            label: Label {
+                property bool down: control.pressed || (control.checkable && control.checked);
+
+                font: UM.Theme.fonts.sidebar_header;
+                color: control.hovered ? UM.Theme.colors.text_hover : down ? UM.Theme.colors.text_pressed : UM.Theme.colors.text;
+
+                text: control.text;
+            }
+        }
+    }
+
+    property Component tool_button: Component {
+        ButtonStyle {
+            background: Rectangle {
+                implicitWidth: UM.Theme.sizes.button.width;
+                implicitHeight: UM.Theme.sizes.button.height;
+                color: UM.Theme.colors.primary;
+            }
+
+            label: Item {
+                Image {
+                    anchors.centerIn: parent;
+
+                    source: control.iconSource;
+                    width: UM.Theme.sizes.button_icon.width;
+                    height: UM.Theme.sizes.button_icon.height;
+
+                    sourceSize: UM.Theme.sizes.button_icon;
+                }
+            }
+        }
+    }
 }

theme.json

@@ -7,24 +7,46 @@
         "default": {
             "size": 1
         },
+        "default_allcaps": {
+            "size": 1,
+            "capitalize": true
+        },
         "small": {
-            "size": 0.8
+            "size": 0.75
         },
         "tiny": {
             "size": 0.5
+        },
+        "sidebar_header": {
+            "size": 0.75,
+            "capitalize": true
         }
     },
 
     "colors": {
-        "primary": [1.0, 0.0, 0.0, 1.0],
-        "border": [0.0, 1.0, 0.0, 1.0]
+        "primary": [12, 169, 227, 255],
+        "primary_text": [255, 255, 255, 255],
+        "border": [205, 202, 201, 255],
+
+        "text": [35, 35, 35, 255],
+        "text_inactive": [205, 202, 201, 255],
+        "text_hover": [12, 169, 227, 255],
+        "text_pressed": [12, 169, 227, 255],
+
+        "button_inactive": [205, 202, 201, 255],
+        "button_hover": [174, 174, 174, 255]
     },
 
     "sizes": {
         "toolbar_button": [2.0, 2.0],
-        "window_margin": [1.0, 1.0],
+        "window_margin": [2.0, 2.0],
         "default_margin": [1.0, 1.0],
-        "panel": [10.0, 10.0],
-        "toolbar_spacing": [1.0, 1.0]
+        "panel": [22.0, 10.0],
+        "toolbar_spacing": [1.0, 1.0],
+        "section": [22.0, 3.0],
+        "section_icon": [2.14, 2.14],
+        "section_text_margin": [0.33, 0.33],
+        "button": [4.25, 4.25],
+        "button_icon": [3.57, 3.57]
     }
 }