Make UI changes in the Simulation View for adapting the color gradient

in the Feedrate color scheme. Due to the travel speed is normally very
high compared with the other speeds in the model, the gradient is now
gradual instead of linear in order to show more changes in the low
values and less changes in the high values.
Adapt also the button styles and themes' colors.
Set the play/pause button to the left and reduce the size.

plugins/SimulationView/SimulationView.qml

@@ -97,6 +97,8 @@ Item
             // if we are in compatibility mode, we only show the "line type"
             property bool show_legend: UM.SimulationView.compatibilityMode ? true : UM.Preferences.getValue("layerview/layer_view_type") == 1
             property bool show_gradient: UM.SimulationView.compatibilityMode ? false : UM.Preferences.getValue("layerview/layer_view_type") == 2 || UM.Preferences.getValue("layerview/layer_view_type") == 3
+            property bool show_feedrate_gradient: show_gradient && UM.Preferences.getValue("layerview/layer_view_type") == 2
+            property bool show_thickness_gradient: show_gradient && UM.Preferences.getValue("layerview/layer_view_type") == 3
             property bool only_show_top_layers: UM.Preferences.getValue("view/only_show_top_layers")
             property int top_layer_count: UM.Preferences.getValue("view/top_layer_count")
 
@@ -171,6 +173,9 @@ Item
                 {
                     // update visibility of legends
                     viewSettings.show_legend = UM.SimulationView.compatibilityMode || (type_id == 1);
+                    viewSettings.show_gradient = !UM.SimulationView.compatibilityMode && (type_id == 2 || type_id == 3);
+                    viewSettings.show_feedrate_gradient = viewSettings.show_gradient && (type_id == 2);
+                    viewSettings.show_thickness_gradient = viewSettings.show_gradient && (type_id == 3);
                 }
 
             }
@@ -451,11 +456,42 @@ Item
                 }
             }
 
-            // Gradient colors for feedrate and thickness
+            // Gradient colors for feedrate
             Rectangle { // In QML 5.9 can be changed by LinearGradient
                 // Invert values because then the bar is rotated 90 degrees
-                id: gradient
+                id: feedrateGradient
-                visible: viewSettings.show_gradient
+                visible: viewSettings.show_feedrate_gradient
+                anchors.left: parent.right
+                height: parent.width
+                width: UM.Theme.getSize("layerview_row").height * 1.5
+                border.width: UM.Theme.getSize("default_lining").width
+                border.color: UM.Theme.getColor("lining")
+                transform: Rotation {origin.x: 0; origin.y: 0; angle: 90}
+                gradient: Gradient {
+                    GradientStop {
+                        position: 0.000
+                        color: Qt.rgba(1, 0.5, 0, 1)
+                    }
+                    GradientStop {
+                        position: 0.625
+                        color: Qt.rgba(0.375, 0.5, 0, 1)
+                    }
+                    GradientStop {
+                        position: 0.75
+                        color: Qt.rgba(0.25, 1, 0, 1)
+                    }
+                    GradientStop {
+                        position: 1.0
+                        color: Qt.rgba(0, 0, 1, 1)
+                    }
+                }
+            }
+
+            // Gradient colors for layer thickness
+            Rectangle { // In QML 5.9 can be changed by LinearGradient
+                // Invert values because then the bar is rotated 90 degrees
+                id: thicknessGradient
+                visible: viewSettings.show_thickness_gradient
                 anchors.left: parent.right
                 height: parent.width
                 width: UM.Theme.getSize("layerview_row").height * 1.5
@@ -469,15 +505,15 @@ Item
                     }
                     GradientStop {
                         position: 0.25
-                        color: Qt.rgba(0.75, 0.5, 0.25, 1)
+                        color: Qt.rgba(0.5, 0.5, 0, 1)
                     }
                     GradientStop {
                         position: 0.5
-                        color: Qt.rgba(0.5, 1, 0.5, 1)
+                        color: Qt.rgba(0, 1, 0, 1)
                     }
                     GradientStop {
                         position: 0.75
-                        color: Qt.rgba(0.25, 0.5, 0.75, 1)
+                        color: Qt.rgba(0, 0.5, 0.5, 1)
                     }
                     GradientStop {
                         position: 1.0
@@ -504,9 +540,9 @@ Item
             id: pathSlider
 
             height: UM.Theme.getSize("slider_handle").width
-            anchors.right: playButton.left
+            anchors.left: playButton.right
-            anchors.rightMargin: UM.Theme.getSize("default_margin").width
+            anchors.leftMargin: UM.Theme.getSize("default_margin").width
-            anchors.left: parent.left
+            anchors.right: parent.right
             visible: !UM.SimulationView.compatibilityMode
 
             // custom properties
@@ -540,7 +576,7 @@ Item
             height: UM.Theme.getSize("layerview_menu_size").height
 
             anchors {
-                top: !UM.SimulationView.compatibilityMode ? playButton.bottom : parent.top
+                top: !UM.SimulationView.compatibilityMode ? pathSlider.bottom : parent.top
                 topMargin: !UM.SimulationView.compatibilityMode ? UM.Theme.getSize("default_margin").height : 0
                 right: parent.right
                 rightMargin: UM.Theme.getSize("slider_layerview_margin").width
@@ -578,13 +614,10 @@ Item
         // Play simulation button
         Button {
             id: playButton
-            implicitWidth: Math.floor(UM.Theme.getSize("button").width * 0.75)
-            implicitHeight: Math.floor(UM.Theme.getSize("button").height * 0.75)
             iconSource: "./resources/simulation_resume.svg"
-            style: UM.Theme.styles.tool_button
+            style: UM.Theme.styles.small_tool_button
             visible: !UM.SimulationView.compatibilityMode
             anchors {
-                horizontalCenter: layerSlider.horizontalCenter
                 verticalCenter: pathSlider.verticalCenter
             }
 

plugins/SimulationView/layers3d.shader

@@ -38,12 +38,25 @@ vertex41core =
     out highp vec3 f_vertex;
     out highp vec3 f_normal;
 
-    vec4 gradientColor(float abs_value, float min_value, float max_value)
+    vec4 feedrateGradientColor(float abs_value, float min_value, float max_value)
     {
         float value = (abs_value - min_value)/(max_value - min_value);
         float red = value;
+        float green = 1-abs(1-4*value);
+        if (value > 0.375)
+        {
+            green = 0.5;
+        }
+        float blue = max(1-4*value, 0);
+        return vec4(red, green, blue, 1.0);
+    }
+
+    vec4 layerThicknessGradientColor(float abs_value, float min_value, float max_value)
+    {
+        float value = (abs_value - min_value)/(max_value - min_value);
+        float red = max(2*value-1, 0);
         float green = 1-abs(1-2*value);
-        float blue = 1-value;
+        float blue = max(1-2*value, 0);
         return vec4(red, green, blue, 1.0);
     }
 
@@ -64,10 +77,10 @@ vertex41core =
                 v_color = a_color;
                 break;
             case 2:  // "Feedrate"
-                v_color = gradientColor(a_feedrate, u_min_feedrate, u_max_feedrate);
+                v_color = feedrateGradientColor(a_feedrate, u_min_feedrate, u_max_feedrate);
                 break;
             case 3:  // "Layer thickness"
-                v_color = gradientColor(a_line_dim.y, u_min_thickness, u_max_thickness);
+                v_color = layerThicknessGradientColor(a_line_dim.y, u_min_thickness, u_max_thickness);
                 break;
         }
 

plugins/SimulationView/resources/simulation_pause.svg

@@ -1,4 +1,6 @@
 <?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#"
@@ -7,73 +9,71 @@
    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"
-   viewBox="0 0 30 30"
+   width="6mm"
+   height="6mm"
+   viewBox="0 0 5.9999999 6"
    version="1.1"
-   id="svg4620"
+   id="svg877"
-   sodipodi:docname="simulation_pause.svg"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
-   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
+   sodipodi:docname="simulation_pause2.svg">
+  <defs
+     id="defs871" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="15.839192"
+     inkscape:cx="-5.3551409"
+     inkscape:cy="17.386031"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="2880"
+     inkscape:window-height="1675"
+     inkscape:window-x="-13"
+     inkscape:window-y="-13"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
   <metadata
-     id="metadata4626">
+     id="metadata874">
     <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>
-  <defs
+  <g
-     id="defs4624" />
+     inkscape:label="Layer 1"
-  <sodipodi:namedview
+     inkscape:groupmode="layer"
-     pagecolor="#ffffff"
+     id="layer1"
-     bordercolor="#666666"
+     transform="translate(-11.163774,-122.8006)">
-     borderopacity="1"
+    <g
-     objecttolerance="10"
+       id="g825"
-     gridtolerance="10"
+       transform="matrix(0.26458333,0,0,0.26458333,10.185689,121.85192)">
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1137"
-     id="namedview4622"
-     showgrid="false"
-     showguides="true"
-     inkscape:guide-bbox="true"
-     inkscape:zoom="22.250293"
-     inkscape:cx="8.1879003"
-     inkscape:cy="12.643765"
-     inkscape:window-x="2872"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg4620">
-    <sodipodi:guide
-       position="15,15"
-       orientation="1,0"
-       id="guide4628"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="15,15"
-       orientation="0,1"
-       id="guide4630"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-  </sodipodi:namedview>
       <rect
-     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         y="5"
-     id="rect5192"
-     width="2"
-     height="20"
          x="19"
-     y="5" />
-  <rect
-     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
-     id="rect5192-5"
-     width="2"
          height="20"
+         width="2.7552757"
+         id="rect5192"
+         style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.34745646;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      <rect
+         y="5"
          x="9"
-     y="5" />
+         height="20"
+         width="2.7552757"
+         id="rect5192-5"
+         style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.34745646;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    </g>
+  </g>
 </svg>

plugins/SimulationView/resources/simulation_resume.svg

@@ -1,4 +1,6 @@
 <?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#"
@@ -7,76 +9,70 @@
    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"
-   viewBox="0 0 30 30"
+   width="6mm"
+   height="6mm"
+   viewBox="0 0 6 6"
    version="1.1"
-   id="svg3765"
+   id="svg8"
-   sodipodi:docname="simulation_resume.svg"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
-   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
+   sodipodi:docname="simulation_resume2.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="15.839192"
+     inkscape:cx="-32.404712"
+     inkscape:cy="14.267522"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="2880"
+     inkscape:window-height="1675"
+     inkscape:window-x="-13"
+     inkscape:window-y="-13"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
   <metadata
-     id="metadata3771">
+     id="metadata5">
     <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>
-  <defs
+  <g
-     id="defs3769" />
+     inkscape:label="Layer 1"
-  <sodipodi:namedview
+     inkscape:groupmode="layer"
-     pagecolor="#ffffff"
+     id="layer1"
-     bordercolor="#666666"
+     transform="translate(81.024887,-389.647)">
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1137"
-     id="namedview3767"
-     showgrid="false"
-     showguides="true"
-     inkscape:guide-bbox="true"
-     inkscape:zoom="23.327047"
-     inkscape:cx="10.788646"
-     inkscape:cy="14.67951"
-     inkscape:window-x="2872"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg3765">
-    <sodipodi:guide
-       position="15,15"
-       orientation="0,1"
-       id="guide4592"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="15,15"
-       orientation="1,0"
-       id="guide4594"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-  </sodipodi:namedview>
     <path
        sodipodi:type="star"
-     id="path3783"
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.50520164;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path847"
        sodipodi:sides="3"
-     sodipodi:cx="12.732001"
+       sodipodi:cx="-78.732257"
-     sodipodi:cy="14.695877"
+       sodipodi:cy="392.65222"
-     sodipodi:r1="13.891838"
+       sodipodi:r1="3.0592039"
-     sodipodi:r2="6.945919"
+       sodipodi:r2="1.5296021"
        sodipodi:arg1="0"
        sodipodi:arg2="1.0471976"
        inkscape:flatsided="true"
        inkscape:rounded="0"
        inkscape:randomized="0"
-     d="m 26.623839,14.695877 -20.8377567,12.030685 0,-24.0613696 z"
+       d="m -75.67305,392.65222 -4.588806,2.64935 v -5.2987 z"
-     inkscape:transform-center-x="-2.9211205"
+       inkscape:transform-center-x="0.75529536"
-     style="fill:none;stroke:#000000;stroke-width:2.32790732;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       inkscape:transform-center-y="0.40090429" />
-     transform="matrix(0.84110413,0,0,0.87756418,1.775541,2.1034247)" />
+  </g>
 </svg>

resources/qml/Topbar.qml

@@ -240,7 +240,7 @@ Rectangle
         Button
         {
             iconSource: UM.Theme.getIcon("view_3d")
-            style: UM.Theme.styles.orientation_button
+            style: UM.Theme.styles.small_tool_button
             anchors.verticalCenter: viewOrientationControl.verticalCenter
             onClicked:{
                 UM.Controller.rotateView("3d", 0);
@@ -252,7 +252,7 @@ Rectangle
         Button
         {
             iconSource: UM.Theme.getIcon("view_front")
-            style: UM.Theme.styles.orientation_button
+            style: UM.Theme.styles.small_tool_button
             anchors.verticalCenter: viewOrientationControl.verticalCenter
             onClicked:{
                 UM.Controller.rotateView("home", 0);
@@ -264,7 +264,7 @@ Rectangle
         Button
         {
             iconSource: UM.Theme.getIcon("view_top")
-            style: UM.Theme.styles.orientation_button
+            style: UM.Theme.styles.small_tool_button
             anchors.verticalCenter: viewOrientationControl.verticalCenter
             onClicked:{
                 UM.Controller.rotateView("y", 90);
@@ -276,7 +276,7 @@ Rectangle
         Button
         {
             iconSource: UM.Theme.getIcon("view_left")
-            style: UM.Theme.styles.orientation_button
+            style: UM.Theme.styles.small_tool_button
             anchors.verticalCenter: viewOrientationControl.verticalCenter
             onClicked:{
                 UM.Controller.rotateView("x", 90);
@@ -288,7 +288,7 @@ Rectangle
         Button
         {
             iconSource: UM.Theme.getIcon("view_right")
-            style: UM.Theme.styles.orientation_button
+            style: UM.Theme.styles.small_tool_button
             anchors.verticalCenter: viewOrientationControl.verticalCenter
             onClicked:{
                 UM.Controller.rotateView("x", -90);

resources/themes/cura-dark/theme.json

@@ -55,6 +55,15 @@
         "button_disabled": [39, 44, 48, 255],
         "button_disabled_text": [255, 255, 255, 101],
 
+        "small_button": [39, 44, 48, 0],
+        "small_button_hover": [39, 44, 48, 255],
+        "small_button_active": [67, 72, 75, 255],
+        "small_button_active_hover": [67, 72, 75, 255],
+        "small_button_text": [255, 255, 255, 197],
+        "small_button_text_hover": [255, 255, 255, 255],
+        "small_button_text_active": [255, 255, 255, 255],
+        "small_button_text_active_hover": [255, 255, 255, 255],
+
         "button_tooltip": [39, 44, 48, 255],
         "button_tooltip_border": [39, 44, 48, 255],
         "button_tooltip_text": [255, 255, 255, 172],

resources/themes/cura-light/styles.qml

@@ -295,16 +295,26 @@ QtObject {
                     anchors.fill: parent;
                     property bool down: control.pressed || (control.checkable && control.checked);
 
-                    color: {
+                    color:
-                        if(control.customColor !== undefined && control.customColor !== null) {
+                    {
+                        if(control.customColor !== undefined && control.customColor !== null)
+                        {
                             return control.customColor
-                        } else if(control.checkable && control.checked && control.hovered) {
+                        }
+                        else if(control.checkable && control.checked && control.hovered)
+                        {
                             return Theme.getColor("button_active_hover");
-                        } else if(control.pressed || (control.checkable && control.checked)) {
+                        }
+                        else if(control.pressed || (control.checkable && control.checked))
+                        {
                             return Theme.getColor("button_active");
-                        } else if(control.hovered) {
+                        }
+                        else if(control.hovered)
+                        {
                             return Theme.getColor("button_hover");
-                        } else {
+                        }
+                        else
+                        {
                             return Theme.getColor("button");
                         }
                     }
@@ -381,30 +391,39 @@ QtObject {
         }
     }
 
-    property Component orientation_button: Component {
+    property Component small_tool_button: Component {
         ButtonStyle {
             background: Item {
-                implicitWidth: 25;
+                implicitWidth: Theme.getSize("small_button").width;
-                implicitHeight: 25;
+                implicitHeight: Theme.getSize("small_button").height;
 
                 Rectangle {
-                    id: buttonFace2;
+                    id: smallButtonFace;
 
                     anchors.fill: parent;
                     property bool down: control.pressed || (control.checkable && control.checked);
 
-                    color: {
+                    color:
-                        if(control.customColor !== undefined && control.customColor !== null) {
+                    {
+                        if(control.customColor !== undefined && control.customColor !== null)
+                        {
                             return control.customColor
-                        } else if(control.checkable && control.checked && control.hovered) {
+                        }
-                            return Theme.getColor("button_active_hover");
+                        else if(control.checkable && control.checked && control.hovered)
-                        } else if(control.pressed || (control.checkable && control.checked)) {
+                        {
-                            return Theme.getColor("button_active");
+                            return Theme.getColor("small_button_active_hover");
-                        } else if(control.hovered) {
+                        }
-                            return Theme.getColor("button_hover");
+                        else if(control.pressed || (control.checkable && control.checked))
-                        } else {
+                        {
-                            //return Theme.getColor("button");
+                            return Theme.getColor("small_button_active");
-                            return "transparent"
+                        }
+                        else if(control.hovered)
+                        {
+                            return Theme.getColor("small_button_hover");
+                        }
+                        else
+                        {
+                            return Theme.getColor("small_button");
                         }
                     }
                     Behavior on color { ColorAnimation { duration: 50; } }
@@ -413,17 +432,10 @@ QtObject {
                     border.color: Theme.getColor("tool_button_border")
 
                     UM.RecolorImage {
-                        id: tool_button_arrow2
+                        id: smallToolButtonArrow
-                        //anchors.right: parent.right;
-                        //anchors.rightMargin: (Theme.getSize("button").width - Theme.getSize("button_icon").width) / 4
-                        //anchors.bottom: parent.bottom;
-                        //anchors.bottomMargin: (Theme.getSize("button").height - Theme.getSize("button_icon").height) / 4
-                        //width: Theme.getSize("standard_arrow").width
-                        //height: Theme.getSize("standard_arrow").height
 
                         width: 5
                         height: 5
-
                         sourceSize.width: 5
                         sourceSize.height: 5
                         visible: control.menu != null;
@@ -431,19 +443,19 @@ QtObject {
                         {
                             if(control.checkable && control.checked && control.hovered)
                             {
-                                return Theme.getColor("button_text_active_hover");
+                                return Theme.getColor("small_button_text_active_hover");
                             }
                             else if(control.pressed || (control.checkable && control.checked))
                             {
-                                return Theme.getColor("button_text_active");
+                                return Theme.getColor("small_button_text_active");
                             }
                             else if(control.hovered)
                             {
-                                return Theme.getColor("button_text_hover");
+                                return Theme.getColor("small_button_text_hover");
                             }
                             else
                             {
-                                return Theme.getColor("button_text");
+                                return Theme.getColor("small_button_text");
                             }
                         }
                         source: Theme.getIcon("arrow_bottom")
@@ -456,31 +468,29 @@ QtObject {
                     anchors.centerIn: parent;
                     opacity: !control.enabled ? 0.2 : 1.0
                     source: control.iconSource;
-                    width: 20;
+                    width: Theme.getSize("small_button_icon").width;
-                    height: 20;
+                    height: Theme.getSize("small_button_icon").height;
                     color:
                     {
                         if(control.checkable && control.checked && control.hovered)
                         {
-                            return Theme.getColor("button_text_active_hover");
+                            return Theme.getColor("small_button_text_active_hover");
                         }
                         else if(control.pressed || (control.checkable && control.checked))
                         {
-                            return Theme.getColor("button_text_active");
+                            return Theme.getColor("small_button_text_active");
                         }
                         else if(control.hovered)
                         {
-                            //return Theme.getColor("button_text_hover");
+                            return Theme.getColor("small_button_text_hover");
-                            return "white"
                         }
                         else
                         {
-                            //return Theme.getColor("button_text");
+                            return Theme.getColor("small_button_text");
-                            return "black"
                         }
                     }
 
-                    sourceSize: Theme.getSize("button_icon")
+                    sourceSize: Theme.getSize("small_button_icon")
                 }
             }
         }

resources/themes/cura-light/theme.json

@@ -103,6 +103,15 @@
         "button_disabled": [31, 36, 39, 255],
         "button_disabled_text": [255, 255, 255, 101],
 
+        "small_button": [31, 36, 39, 0],
+        "small_button_hover": [68, 72, 75, 255],
+        "small_button_active": [68, 72, 75, 255],
+        "small_button_active_hover": [68, 72, 75, 255],
+        "small_button_text": [31, 36, 39, 197],
+        "small_button_text_hover": [255, 255, 255, 255],
+        "small_button_text_active": [255, 255, 255, 255],
+        "small_button_text_active_hover": [255, 255, 255, 255],
+
         "button_tooltip": [31, 36, 39, 255],
         "button_tooltip_border": [68, 192, 255, 255],
         "button_tooltip_text": [192, 193, 194, 255],
@@ -323,6 +332,9 @@
         "button_icon": [2.5, 2.5],
         "button_lining": [0, 0],
 
+        "small_button": [2, 2],
+        "small_button_icon": [1.5, 1.5],
+
         "topbar_logo_right_margin": [3, 0],
         "topbar_button": [8, 4],
         "topbar_button_icon": [1.2, 1.2],