Fix ExtruderColor and Extruder icons bleeding into each other

CURA-8011

resources/qml/ExtruderButton.qml

@@ -22,6 +22,7 @@ Cura.ToolbarButton
     {
         materialColor: extruder.color
         extruderEnabled: extruder.stack.isEnabled
+        iconVariant: "default"
         property int index: extruder.index
     }
 

resources/qml/ExtruderIcon.qml

@@ -16,6 +16,8 @@ Item
     property color materialColor
     property alias textColor: extruderNumberText.color
     property bool extruderEnabled: true
+    property alias iconSize: mainIcon.sourceSize
+    property string iconVariant: "medium"
 
     Item
     {
@@ -25,16 +27,18 @@ Item
         UM.RecolorImage
         {
             anchors.fill: parent
+            sourceSize: mainIcon.sourceSize
 
-            source: UM.Theme.getIcon("ExtruderColor", "medium")
+            source: UM.Theme.getIcon("ExtruderColor", iconVariant)
             color: materialColor
         }
         UM.RecolorImage
         {
             id: mainIcon
             anchors.fill: parent
+            sourceSize: UM.Theme.getSize("extruder_icon")
 
-            source: UM.Theme.getIcon("Extruder", "medium")
+            source: UM.Theme.getIcon("Extruder", iconVariant)
             color: UM.Theme.getColor("text")
         }
 
@@ -43,7 +47,7 @@ Item
             id: extruderNumberText
             anchors.centerIn: parent
             text: index + 1
-            font: UM.Theme.getFont("small")
+            font: UM.Theme.getFont("small_black")
             color: UM.Theme.getColor("text")
             width: contentWidth
             height: contentHeight

resources/themes/cura-light/icons/default/Extruder.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<g id="Layer_1_1_">
+	<g>
+		<path d="M12,2C6.5,2,2,6.5,2,12v9h2v-3c1.8,2.4,4.7,4,8,4c5.5,0,10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8
+			s8,3.6,8,8S16.4,20,12,20z"/>
+	</g>
+</g>
+<g id="Comments">
+</g>
+</svg>

resources/themes/cura-light/icons/default/ExtruderColor.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#231F20;}
+</style>
+<g id="Layer_1_1_">
+	<path class="st0" d="M12,21c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S17,21,12,21z M12,6c-3.3,0-6,2.7-6,6s2.7,6,6,6s6-2.7,6-6S15.3,6,12,6z"
+		/>
+</g>
+<g id="Comments">
+</g>
+</svg>

resources/themes/cura-light/icons/medium/ExtruderColor.svg

@@ -1,10 +1,13 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
+<?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
-<g id="Layer_1">
+<style type="text/css">
-	<path style="fill:#231F20;" d="M15,25C9.486,25,5,20.514,5,15S9.486,5,15,5s10,4.486,10,10S20.514,25,15,25z M15,7
+	.st0{fill:#231F20;}
-		c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S19.411,7,15,7z"/>
+</style>
+<g id="Layer_1_1_">
+	<path class="st0" d="M15,26C8.9,26,4,21.1,4,15S8.9,4,15,4s11,4.9,11,11S21.1,26,15,26z M15,7c-4.4,0-8,3.6-8,8s3.6,8,8,8
+		s8-3.6,8-8S19.4,7,15,7z"/>
 </g>
 <g id="Comments">
 </g>

resources/themes/cura-light/theme.json

@@ -129,24 +129,44 @@
             "family": "Noto Sans"
         },
         "small": {
-            "size": 0.7,
+            "size": 0.9,
             "weight": 40,
             "family": "Noto Sans"
         },
         "small_ja_JP": {
-            "size": 0.7,
+            "size": 0.9,
             "weight": 50,
             "family": "Noto Sans"
         },
         "small_zh_CN": {
-            "size": 0.7,
+            "size": 0.9,
             "weight": 50,
             "family": "Noto Sans"
         },
         "small_zh_TW": {
-            "size": 0.7,
+            "size": 0.9,
             "weight": 50,
             "family": "Noto Sans"
+        },
+        "small_black": {
+            "size": 0.9,
+            "weight": 100,
+            "family": "Noto Sans"
+        },
+        "small_black_ja_JP": {
+            "size": 0.9,
+            "weight": 100,
+            "family": "Noto Sans"
+        },
+        "small_black_zh_CN": {
+            "size": 0.9,
+            "weight": 100,
+            "family": "Noto Sans"
+        },
+        "small_black_zh_TW": {
+            "size": 0.9,
+            "weight": 100,
+            "family": "Noto Sans"
         }
     },
 
@@ -503,7 +523,7 @@
         "thin_margin": [0.71, 0.71],
         "narrow_margin": [0.5, 0.5],
 
-        "extruder_icon": [2.33, 2.33],
+        "extruder_icon": [2.5, 2.5],
 
         "section": [0.0, 2],
         "section_control": [0, 1],