Show a border around text fields and drop-downs when hovering

And when they are focused.
This applies to the setting text fields, extruder selectors and drop-downs as well as to the machine settings.

Contributes to issue CURA-9217.

resources/qml/MachineSettings/NumericTextFieldWithUnit.qml

@@ -90,6 +90,7 @@ UM.TooltipArea
         {
             anchors.fill: parent
 
+            borderColor: (textFieldWithUnit.hovered || textFieldWithUnit.activeFocus) ? UM.Theme.getColor("text_field_border_hovered") : "transparent"
             liningColor:
             {
                 if (!textFieldWithUnit.enabled)
@@ -109,7 +110,7 @@ UM.TooltipArea
                 // Validation is OK.
                 if (textFieldWithUnit.hovered || textFieldWithUnit.activeFocus)
                 {
-                    return UM.Theme.getColor("border_main")
+                    return UM.Theme.getColor("text_field_border_hovered")
                 }
                 return UM.Theme.getColor("border_field_light")
             }

resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml

@@ -129,7 +129,8 @@ Item
             background: UM.UnderlineBackground
             {
                 id: backgroundItem
-                liningColor: intentSelection.hovered ? UM.Theme.getColor("border_main") : UM.Theme.getColor("border_field_light")
+                borderColor: intentSelection.hovered ? UM.Theme.getColor("text_field_border_hovered") : "transparent"
+                liningColor: intentSelection.hovered ? UM.Theme.getColor("text_field_border_hovered") : UM.Theme.getColor("border_field_light")
             }
 
             UM.SimpleButton

resources/qml/Settings/SettingExtruder.qml

@@ -125,15 +125,16 @@ SettingItem
                 }
                 return UM.Theme.getColor("setting_control")
             }
+            borderColor: (base.hovered || control.activeFocus) ? UM.Theme.getSize("text_field_border_hovered") : "transparent"
             liningColor:
             {
                 if (!enabled)
                 {
                     return UM.Theme.getColor("setting_control_disabled_border")
                 }
-                if (control.hovered || control.activeFocus)
+                if (base.hovered || control.activeFocus)
                 {
-                    return UM.Theme.getColor("border_main")
+                    return UM.Theme.getColor("text_field_border_hovered")
                 }
                 return UM.Theme.getColor("border_field_light")
             }

resources/qml/Settings/SettingOptionalExtruder.qml

@@ -126,15 +126,16 @@ SettingItem
                 }
                 return UM.Theme.getColor("setting_control")
             }
+            borderColor: (base.hovered || control.activeFocus) ? UM.Theme.getColor("text_field_border_hovered") : "transparent"
             liningColor:
             {
                 if (!enabled)
                 {
                     return UM.Theme.getColor("setting_control_disabled_border")
                 }
-                if (control.hovered || control.activeFocus)
+                if (base.hovered || control.activeFocus)
                 {
-                    return UM.Theme.getColor("border_main")
+                    return UM.Theme.getColor("text_field_border_hovered")
                 }
                 return UM.Theme.getColor("border_field_light")
             }

resources/qml/Settings/SettingTextField.qml

@@ -32,6 +32,7 @@ SettingItem
 
         anchors.fill: parent
 
+        borderColor: (hovered || input.activeFocus) ? UM.Theme.getColor("text_field_border_hovered") : "transparent"
         liningColor:
         {
             if(!enabled)

resources/qml/Widgets/ComboBox.qml

@@ -32,8 +32,13 @@ ComboBox
         State
         {
             name: "highlighted"
-            when: control.hovered || control.activeFocus
-            PropertyChanges { target: background; liningColor: UM.Theme.getColor("border_main")}
+            when: base.hovered || control.hovered || control.activeFocus
+            PropertyChanges
+            {
+                target: background
+                borderColor: UM.Theme.getColor("text_field_border_hovered")
+                liningColor: UM.Theme.getColor("text_field_border_hovered")
+            }
         }
     ]
 

resources/qml/Widgets/TextField.qml

@@ -47,7 +47,12 @@ TextField
         {
             name: "hovered"
             when: control.hovered || control.activeFocus
-            PropertyChanges { target: backgroundRectangle; liningColor: UM.Theme.getColor("text_field_border_hovered")}
+            PropertyChanges
+            {
+                target: backgroundRectangle
+                liningColor: UM.Theme.getColor("text_field_border_hovered")
+                borderColor: UM.Theme.getColor("text_field_border_hovered")
+            }
         }
     ]
 

resources/themes/cura-dark/theme.json

@@ -15,7 +15,7 @@
         "accent_2": [16, 70, 156, 255],
         "border_main": [118, 118, 119, 255],
         "border_accent_1": [255, 255, 255, 255],
-        "border_accent_2": [16, 70, 156, 255],
+        "border_accent_2": [243, 243, 243, 255],
         "border_field": [57, 57, 58, 255],
 
         "text_default": [255, 255, 255, 255],

resources/themes/cura-light/theme.json

@@ -363,7 +363,7 @@
 
         "text_field": "background_1",
         "text_field_border": [180, 180, 180, 255],
-        "text_field_border_hovered": "border_main",
+        "text_field_border_hovered": "border_accent_2",
         "text_field_border_disabled": "background_2",
         "text_field_text": "text_default",
         "text_field_text_disabled": "text_disabled",