Remove frames from certain controls and lighten others

E.g. Button and Popups look awkward with frames. Other controls
need them, but they're currently too dark. This patch gives them
gentler shades.

Change-Id: I1c3c486935180300b8233a028d25742fe8535995
Reviewed-by: J-P Nurmi <jpnurmi@qt.io>

8 files changed, 32 insertions, 36 deletions

diff --git a/src/imports/controls/Button.qml b/src/imports/controls/Button.qml
index 94c05c40..f875a97a 100644
--- a/src/imports/controls/Button.qml
+++ b/src/imports/controls/Button.qml
@@ -70,9 +70,9 @@ T.Button {
         visible: !control.flat || control.down || control.checked || control.highlighted
         color: control.checked || control.highlighted ?
             (control.visualFocus ? (control.down ? "#599bff" : "#0066ff") : (control.down ? "#585a5c" : "#353637")) :
-            (control.visualFocus ? (control.down ? "#cce0ff" : "#f0f6ff") : (control.down ? "#d6d6d6" : "#f6f6f6"))
-        border.color: control.visualFocus ? "#0066ff" : (control.down ? "#26282a" : "#353637")
-        border.width: control.flat || control.checked || control.highlighted ? 0 : (control.visualFocus ? 2 : 1)
+            (control.visualFocus ? (control.down ? "#cce0ff" : "#f0f6ff") : (control.down ? "#d0d0d0" : "#e0e0e0"))
+        border.color: "#0066ff"
+        border.width: control.visualFocus ? 2 : 0
     }
     //! [background]
 }
diff --git a/src/imports/controls/CheckIndicator.qml b/src/imports/controls/CheckIndicator.qml
index 69a5e266..d78e9e30 100644
--- a/src/imports/controls/CheckIndicator.qml
+++ b/src/imports/controls/CheckIndicator.qml
@@ -44,9 +44,9 @@ Rectangle {
     implicitWidth: 28
     implicitHeight: 28
 
-    color: control.enabled ? (control.down ? (control.visualFocus ? "#cce0ff" : "#e4e4e4") : "#f6f6f6") : "#353637"
+    color: control.enabled ? (control.down ? (control.visualFocus ? "#cce0ff" : "#f6f6f6") : "#ffffff") : "#353637"
     border.width: control.visualFocus ? 2 : 1
-    border.color: control.enabled ? (control.visualFocus ? "#0066ff" : (control.down ? "#26282a" : "#353637")) : "transparent"
+    border.color: control.enabled ? (control.visualFocus ? "#0066ff" : (control.down ? "#808080" : "#909090")) : "transparent"
 
     Image {
         x: (parent.width - width) / 2
diff --git a/src/imports/controls/ComboBox.qml b/src/imports/controls/ComboBox.qml
index da9e8fe2..757af672 100644
--- a/src/imports/controls/ComboBox.qml
+++ b/src/imports/controls/ComboBox.qml
@@ -95,9 +95,9 @@ T.ComboBox {
         implicitHeight: 40
 
         color: control.visualFocus ? (control.pressed ? "#cce0ff" : "#f0f6ff") :
-            (control.pressed || popup.visible ? "#d6d6d6" : "#f6f6f6")
-        border.color: control.visualFocus ? "#0066ff" : "#353637"
-        border.width: control.visualFocus ? 2 : 1
+            (control.pressed || popup.visible ? "#d0d0d0" : "#e0e0e0")
+        border.color: "#0066ff"
+        border.width: control.visualFocus ? 2 : 0
     }
     //! [background]
 
@@ -121,7 +121,7 @@ T.ComboBox {
                 width: listview.width
                 height: listview.height
                 color: "transparent"
-                border.color: "#353637"
+                border.color: "#bdbebf"
             }
 
             T.ScrollIndicator.vertical: ScrollIndicator { }
diff --git a/src/imports/controls/RadioIndicator.qml b/src/imports/controls/RadioIndicator.qml
index b9a17dfe..08c24cc5 100644
--- a/src/imports/controls/RadioIndicator.qml
+++ b/src/imports/controls/RadioIndicator.qml
@@ -41,9 +41,9 @@ Rectangle {
     implicitHeight: 28
 
     radius: width / 2
-    color: control.down ? (control.visualFocus ? "#cce0ff" : "#e4e4e4") : (control.visualFocus ? "#f0f6ff" : "#f6f6f6")
+    color: control.down ? (control.visualFocus ? "#cce0ff" : "#f6f6f6") : (control.visualFocus ? "#f0f6ff" : "#ffffff")
     border.width: control.visualFocus ? 2 : 1
-    border.color: control.visualFocus ? "#0066ff" : (control.down ? "#26282a" : "#353637")
+    border.color: control.visualFocus ? "#0066ff" : (control.down ? "#808080" : "#909090")
 
     property Item control
 
@@ -53,7 +53,7 @@ Rectangle {
         width: 20
         height: 20
         radius: width / 2
-        color: parent.border.color
+        color: control.down ? "#26282a" : "#353637"
         visible: control.checked
     }
 }
diff --git a/src/imports/controls/RangeSlider.qml b/src/imports/controls/RangeSlider.qml
index e747e077..8d285298 100644
--- a/src/imports/controls/RangeSlider.qml
+++ b/src/imports/controls/RangeSlider.qml
@@ -59,8 +59,8 @@ T.RangeSlider {
         implicitHeight: 28
         radius: width / 2
         border.width: activeFocus ? 2 : 1
-        border.color: control.enabled ? (activeFocus ? "#0066ff" : (control.first.pressed ? "#26282a" : "#353637")) : "#d6d6d6"
-        color: control.enabled ? (first.pressed ? (activeFocus ? "#cce0ff" : "#e4e4e4") : (activeFocus ? "#f0f6ff" : "#f6f6f6")) : "#fdfdfd"
+        border.color: control.enabled ? (activeFocus ? "#0066ff" : (control.first.pressed ? "#808080" : "#909090")) : "#d6d6d6"
+        color: control.enabled ? (first.pressed ? (activeFocus ? "#cce0ff" : "#f6f6f6") : (activeFocus ? "#f0f6ff" : "#ffffff")) : "#fdfdfd"
 
         readonly property bool horizontal: control.orientation === Qt.Horizontal
     }
@@ -74,8 +74,8 @@ T.RangeSlider {
         implicitHeight: 28
         radius: width / 2
         border.width: activeFocus ? 2 : 1
-        border.color: control.enabled ? (activeFocus ? "#0066ff" : (control.first.pressed ? "#26282a" : "#353637")) : "#d6d6d6"
-        color: control.enabled ? (second.pressed ? (activeFocus ? "#cce0ff" : "#e4e4e4") : (activeFocus ? "#f0f6ff" : "#f6f6f6")) : "#fdfdfd"
+        border.color: control.enabled ? (activeFocus ? "#0066ff" : (control.first.pressed ? "#808080" : "#909090")) : "#d6d6d6"
+        color: control.enabled ? (second.pressed ? (activeFocus ? "#cce0ff" : "#f6f6f6") : (activeFocus ? "#f0f6ff" : "#ffffff")) : "#fdfdfd"
 
         readonly property bool horizontal: control.orientation === Qt.Horizontal
     }
@@ -90,9 +90,8 @@ T.RangeSlider {
         width: horizontal ? control.availableWidth : implicitWidth
         height: horizontal ? implicitHeight : control.availableHeight
         radius: 3
-        border.color: "#353637"
-        color: "#ffffff"
-        opacity: control.enabled ? 1 : 0.2
+        opacity: control.enabled ? 1 : 0.3
+        color: "#e0e0e0"
         scale: horizontal && control.mirrored ? -1 : 1
 
         readonly property bool horizontal: control.orientation === Qt.Horizontal
diff --git a/src/imports/controls/Slider.qml b/src/imports/controls/Slider.qml
index 0d4b7125..a44a6c80 100644
--- a/src/imports/controls/Slider.qml
+++ b/src/imports/controls/Slider.qml
@@ -56,9 +56,9 @@ T.Slider {
         implicitWidth: 28
         implicitHeight: 28
         radius: width / 2
-        color: control.enabled ? (control.pressed ? (control.visualFocus ? "#cce0ff" : "#e4e4e4") : (control.visualFocus ? "#f0f6ff" : "#f6f6f6")) : "#fdfdfd"
+        color: control.enabled ? (control.pressed ? (control.visualFocus ? "#cce0ff" : "#f6f6f6") : (control.visualFocus ? "#f0f6ff" : "#ffffff")) : "#fdfdfd"
         border.width: control.visualFocus ? 2 : 1
-        border.color: control.enabled ? (control.visualFocus ? "#0066ff" : (control.pressed ? "#26282a" : "#353637")) : "#d6d6d6"
+        border.color: control.enabled ? (control.visualFocus ? "#0066ff" : (control.pressed ? "#808080" : "#909090")) : "#d6d6d6"
 
         readonly property bool horizontal: control.orientation === Qt.Horizontal
     }
@@ -73,9 +73,8 @@ T.Slider {
         width: horizontal ? control.availableWidth : implicitWidth
         height: horizontal ? implicitHeight : control.availableHeight
         radius: 3
-        border.color: "#353637"
-        color: "#ffffff"
-        opacity: control.enabled ? 1 : 0.2
+        opacity: control.enabled ? 1 : 0.3
+        color: "#e0e0e0"
         scale: horizontal && control.mirrored ? -1 : 1
 
         readonly property bool horizontal: control.orientation === Qt.Horizontal
diff --git a/src/imports/controls/SpinBox.qml b/src/imports/controls/SpinBox.qml
index 81bbb1b2..93db1c8e 100644
--- a/src/imports/controls/SpinBox.qml
+++ b/src/imports/controls/SpinBox.qml
@@ -98,8 +98,7 @@ T.SpinBox {
         height: parent.height
         implicitWidth: 40
         implicitHeight: 40
-        color: up.pressed ? "#e4e4e4" : "#f6f6f6"
-        border.color: control.enabled ? "#353637" : "#bdbebf"
+        color: up.pressed ? "#d0d0d0" : "#e0e0e0"
 
         Rectangle {
             x: (parent.width - width) / 2
@@ -124,8 +123,7 @@ T.SpinBox {
         height: parent.height
         implicitWidth: 40
         implicitHeight: 40
-        color: down.pressed ? "#e4e4e4" : "#f6f6f6"
-        border.color: control.enabled ? "#353637" : "#bdbebf"
+        color: down.pressed ? "#d0d0d0" : "#e0e0e0"
 
         Rectangle {
             x: (parent.width - width) / 2
@@ -140,7 +138,7 @@ T.SpinBox {
     //! [background]
     background: Rectangle {
         implicitWidth: 140
-        border.color: "#bdbebf"
+        border.color: "#e0e0e0"
     }
     //! [background]
 }
diff --git a/src/imports/controls/SwitchIndicator.qml b/src/imports/controls/SwitchIndicator.qml
index f03fa86c..f11f7147 100644
--- a/src/imports/controls/SwitchIndicator.qml
+++ b/src/imports/controls/SwitchIndicator.qml
@@ -47,10 +47,10 @@ Item {
         width: 56
         height: 16
         radius: 8
-        opacity: control.enabled ? 1 : 0.2
-        color: control.checked ? (control.visualFocus ? "#0066ff" : "#353637") : "#ffffff"
-        border.width: control.visualFocus ? 2 : 1
-        border.color: control.checked ? "transparent" : (control.visualFocus ? "#0066ff" : "#353637")
+        opacity: control.enabled ? 1 : 0.3
+        color: control.checked ? (control.visualFocus ? "#0066ff" : "#353637") : "#e0e0e0"
+        border.width: control.visualFocus ? 2 : 0
+        border.color: "#0066ff"
     }
 
     Rectangle {
@@ -59,12 +59,12 @@ Item {
         width: 28
         height: 28
         radius: 16
-        color: control.enabled ? (control.pressed ? (control.visualFocus ? "#cce0ff" : "#e4e4e4") : (control.visualFocus ? "#f0f6ff" : "#f6f6f6")) : "#fdfdfd"
+        color: control.enabled ? (control.down ? (control.visualFocus ? "#cce0ff" : "#f6f6f6") : (control.visualFocus ? "#f0f6ff" : "#ffffff")) : "#fdfdfd"
         border.width: control.visualFocus ? 2 : 1
-        border.color: control.enabled ? (control.visualFocus ? "#0066ff" : (control.pressed ? "#26282a" : "#353637")) : "#d6d6d6"
+        border.color: control.enabled ? (control.visualFocus ? "#0066ff" : (control.down ? "#808080" : "#909090")) : "#d6d6d6"
 
         Behavior on x {
-            enabled: !control.pressed
+            enabled: !control.down
             SmoothedAnimation { velocity: 200 }
         }
     }