Adjust default style to match current specs.

There are still more changes to come.

Change-Id: I94ed2c5d649d72d90e43120841c2457091200b59
Reviewed-by: J-P Nurmi <jpnurmi@theqtcompany.com>

18 files changed, 115 insertions, 219 deletions

diff --git a/src/imports/controls/Button.qml b/src/imports/controls/Button.qml
index 82fe82b4..cd725298 100644
--- a/src/imports/controls/Button.qml
+++ b/src/imports/controls/Button.qml
@@ -35,7 +35,6 @@
 ****************************************************************************/
 
 import QtQuick 2.6
-import Qt.labs.controls 1.0
 import Qt.labs.templates 1.0 as T
 
 T.Button {
@@ -56,10 +55,9 @@ T.Button {
         y: control.topPadding
         width: control.availableWidth
         height: control.availableHeight
-
         text: control.text
         font: control.font
-        color: control.Theme.selectedTextColor
+        color: control.highlighted ? "#ffffff" : (control.pressed ? "#26282a" : "#353637")
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         elide: Text.ElideRight
@@ -68,14 +66,10 @@ T.Button {
 
     //! [background]
     background: Rectangle {
-        implicitWidth: 36
-        implicitHeight: 36
-
-        radius: 3
-        color: Qt.darker(Qt.tint(!control.enabled ? control.Theme.disabledColor :
-                                  control.activeFocus ? control.Theme.focusColor : control.Theme.accentColor,
-                                  control.pressed ? control.Theme.pressColor : "transparent"),
-                         control.checkable && control.checked ? 1.5 : 1.0)
+        implicitWidth: 100
+        implicitHeight: 40
+        color: control.pressed ? (control.highlighted ? "#585a5c" : "#bdbebf") : (control.highlighted ? "#353637" : "#ffffff")
+        border.color: control.pressed ? "#26282a" : "#353637"
     }
     //! [background]
 }
diff --git a/src/imports/controls/CheckBox.qml b/src/imports/controls/CheckBox.qml
index 565187a4..254c4d10 100644
--- a/src/imports/controls/CheckBox.qml
+++ b/src/imports/controls/CheckBox.qml
@@ -35,7 +35,6 @@
 ****************************************************************************/
 
 import QtQuick 2.6
-import Qt.labs.controls 1.0
 import Qt.labs.templates 1.0 as T
 
 T.CheckBox {
@@ -54,28 +53,20 @@ T.CheckBox {
 
     //! [indicator]
     indicator: Rectangle {
-        implicitWidth: 20
-        implicitHeight: 20
+        implicitWidth: 28
+        implicitHeight: 28
         x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
         y: control.topPadding + (control.availableHeight - height) / 2
 
-        radius: 3
-        border.width: control.activeFocus ? 2 : 1
-        border.color: control.activeFocus ? control.Theme.focusColor : control.Theme.frameColor
-        color: control.Theme.backgroundColor
+        color: control.pressed ? "#bdbebf" : "#ffffff"
+        border.color: control.pressed ? "#26282a" : (control.checked ? "#353637" : "#bdbebf")
 
-        Rectangle {
+        Image {
             x: (parent.width - width) / 2
             y: (parent.height - height) / 2
-            width: 12
-            height: 12
-            opacity: control.tristate && control.checkState === Qt.PartiallyChecked ? 0.5 : 1.0
-            color: Qt.tint(control.checked && !control.enabled ? control.Theme.disabledColor :
-                           control.checked && control.activeFocus ? control.Theme.focusColor :
-                           control.checked ? control.Theme.accentColor : control.Theme.baseColor,
-                           control.pressed ? control.Theme.pressColor : "transparent")
-            border.width: control.checked || control.pressed ? 0 : 1
-            border.color: control.Theme.frameColor
+            source: "qrc:/images/check.png"
+            visible: control.checked
+//            opacity: control.tristate && control.checkState === Qt.PartiallyChecked ? 0.5 : 1.0
         }
     }
     //! [indicator]
@@ -89,7 +80,7 @@ T.CheckBox {
 
         text: control.text
         font: control.font
-        color: control.enabled ? control.Theme.textColor : control.Theme.disabledColor
+        color: control.enabled ? "#26282a" : "#bdbebf"
         elide: Text.ElideRight
         visible: control.text
         horizontalAlignment: Text.AlignLeft
diff --git a/src/imports/controls/Frame.qml b/src/imports/controls/Frame.qml
index 2d72acb5..18592b1c 100644
--- a/src/imports/controls/Frame.qml
+++ b/src/imports/controls/Frame.qml
@@ -35,7 +35,6 @@
 ****************************************************************************/
 
 import QtQuick 2.6
-import Qt.labs.controls 1.0
 import Qt.labs.templates 1.0 as T
 
 T.Frame {
@@ -58,9 +57,8 @@ T.Frame {
         width: parent.width
         height: parent.height
 
-        radius: 3
         color: "transparent"
-        border.color: control.Theme.frameColor
+        border.color: "#bdbebf"
     }
     //! [frame]
 }
diff --git a/src/imports/controls/GroupBox.qml b/src/imports/controls/GroupBox.qml
index c7e93c63..8504fae9 100644
--- a/src/imports/controls/GroupBox.qml
+++ b/src/imports/controls/GroupBox.qml
@@ -35,7 +35,6 @@
 ****************************************************************************/
 
 import QtQuick 2.6
-import Qt.labs.controls 1.0
 import Qt.labs.templates 1.0 as T
 
 T.GroupBox {
@@ -62,7 +61,7 @@ T.GroupBox {
 
         text: control.title
         font: control.font
-        color: control.enabled ? control.Theme.textColor : control.Theme.disabledColor
+        color: control.enabled ? "#353637" : "#bdbebf"
         elide: Text.ElideRight
         horizontalAlignment: Text.AlignLeft
         verticalAlignment: Text.AlignVCenter
@@ -75,9 +74,8 @@ T.GroupBox {
         width: parent.width
         height: parent.height - control.topPadding + control.padding
 
-        radius: 3
         color: "transparent"
-        border.color: control.Theme.frameColor
+        border.color: "#bdbebf"
     }
     //! [frame]
 }
diff --git a/src/imports/controls/ProgressBar.qml b/src/imports/controls/ProgressBar.qml
index 6fb5f515..61e35921 100644
--- a/src/imports/controls/ProgressBar.qml
+++ b/src/imports/controls/ProgressBar.qml
@@ -35,7 +35,6 @@
 ****************************************************************************/
 
 import QtQuick 2.6
-import Qt.labs.controls 1.0
 import Qt.labs.templates 1.0 as T
 
 T.ProgressBar {
@@ -69,7 +68,7 @@ T.ProgressBar {
                 height: 2
 
                 radius: 3
-                color: control.enabled ? control.Theme.accentColor : control.Theme.disabledColor
+                color: control.enabled ? "#353637" : "#bdbebf"
 
                 SequentialAnimation on offset {
                     loops: Animation.Infinite
@@ -98,7 +97,7 @@ T.ProgressBar {
         height: 6
 
         radius: 3
-        border.color: control.Theme.frameColor
+        border.color: "#bdbebf"
         color: "transparent"
     }
     //! [background]
diff --git a/src/imports/controls/RadioButton.qml b/src/imports/controls/RadioButton.qml
index 0c4d0edd..83a8359e 100644
--- a/src/imports/controls/RadioButton.qml
+++ b/src/imports/controls/RadioButton.qml
@@ -54,28 +54,24 @@ T.RadioButton {
 
     //! [indicator]
     indicator: Rectangle {
-        implicitWidth: 20
-        implicitHeight: 20
+        implicitWidth: 28
+        implicitHeight: 28
         x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
         y: control.topPadding + (control.availableHeight - height) / 2
 
         radius: width / 2
-        border.width: control.activeFocus ? 2 : 1
-        border.color: control.activeFocus ? control.Theme.focusColor : control.Theme.frameColor
-        color: control.Theme.backgroundColor
+        border.width: 1
+        border.color: control.pressed ? "#26282a" : control.enabled && control.checked ? "#353637" : "#bdbebf"
+        color: control.pressed ? "#bdbebf" : "#ffffff"
 
         Rectangle {
             x: (parent.width - width) / 2
             y: (parent.height - height) / 2
-            width: 12
-            height: 12
+            width: 20
+            height: 20
             radius: width / 2
-            color: Qt.tint(control.checked && !control.enabled ? control.Theme.disabledColor :
-                           control.checked && control.activeFocus ? control.Theme.focusColor :
-                           control.checked ? control.Theme.accentColor : control.Theme.baseColor,
-                           control.pressed ? control.Theme.pressColor : "transparent")
-            border.width: control.checked || control.pressed ? 0 : 1
-            border.color: control.Theme.frameColor
+            color: control.enabled ? "#353637" : "#bdbebf"
+            visible: control.checked
         }
     }
     //! [indicator]
diff --git a/src/imports/controls/RangeSlider.qml b/src/imports/controls/RangeSlider.qml
index e301eed2..9a74d4c8 100644
--- a/src/imports/controls/RangeSlider.qml
+++ b/src/imports/controls/RangeSlider.qml
@@ -35,7 +35,6 @@
 ****************************************************************************/
 
 import QtQuick 2.6
-import Qt.labs.controls 1.0
 import Qt.labs.templates 1.0 as T
 
 T.RangeSlider {
@@ -56,26 +55,14 @@ T.RangeSlider {
     first.handle: Rectangle {
         x: control.leftPadding + (horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
         y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
-        implicitWidth: 20
-        implicitHeight: 20
+        implicitWidth: 28
+        implicitHeight: 28
         radius: width / 2
         border.width: activeFocus ? 2 : 1
-        border.color: activeFocus ? control.Theme.focusColor : control.Theme.frameColor
-        color: control.Theme.backgroundColor
+        border.color: "#353637"
+        color: first.pressed ? "#bdbebf" : "#ffffff"
 
         readonly property bool horizontal: control.orientation === Qt.Horizontal
-
-        Rectangle {
-            x: (parent.width - width) / 2
-            y: (parent.height - height) / 2
-            width: 12
-            height: 12
-            radius: width / 2
-
-            color: Qt.tint(!control.enabled ? control.Theme.disabledColor :
-                            parent.activeFocus ? control.Theme.focusColor : control.Theme.accentColor,
-                            control.first.pressed ? control.Theme.pressColor : "transparent")
-        }
     }
     //! [firstHandle]
 
@@ -83,26 +70,14 @@ T.RangeSlider {
     second.handle: Rectangle {
         x: control.leftPadding + (horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
         y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
-        implicitWidth: 20
-        implicitHeight: 20
+        implicitWidth: 28
+        implicitHeight: 28
         radius: width / 2
         border.width: activeFocus ? 2 : 1
-        border.color: activeFocus ? control.Theme.focusColor : control.Theme.frameColor
-        color: control.Theme.backgroundColor
+        border.color: "#353637"
+        color: second.pressed ? "#bdbebf" : "#ffffff"
 
         readonly property bool horizontal: control.orientation === Qt.Horizontal
-
-        Rectangle {
-            x: (parent.width - width) / 2
-            y: (parent.height - height) / 2
-            width: 12
-            height: 12
-            radius: width / 2
-
-            color: Qt.tint(!control.enabled ? control.Theme.disabledColor :
-                            parent.activeFocus ? control.Theme.focusColor : control.Theme.accentColor,
-                            control.second.pressed ? control.Theme.pressColor : "transparent")
-        }
     }
     //! [secondHandle]
 
@@ -114,23 +89,12 @@ T.RangeSlider {
         implicitHeight: horizontal ? 6 : 200
         width: horizontal ? control.availableWidth : implicitWidth
         height: horizontal ? implicitHeight : control.availableHeight
-
-        readonly property bool horizontal: control.orientation === Qt.Horizontal
-
         radius: 3
-        border.color: control.Theme.frameColor
-        color: control.Theme.backgroundColor
+        border.color: "#353637"
+        color: "#ffffff"
         scale: horizontal && control.mirrored ? -1 : 1
 
-        Rectangle {
-            x: parent.horizontal ? control.first.position * parent.width : 2
-            y: parent.horizontal ? 2 : control.second.visualPosition * parent.height + 2
-            width: parent.horizontal ? control.second.position * parent.width - control.first.position * parent.width - 4 : 2
-            height: parent.horizontal ? 2 : control.second.position * parent.height - control.first.position * parent.height - 4
-
-            radius: 3
-            color: control.enabled ? control.Theme.accentColor : control.Theme.disabledColor
-        }
+        readonly property bool horizontal: control.orientation === Qt.Horizontal
     }
     //! [track]
 }
diff --git a/src/imports/controls/Slider.qml b/src/imports/controls/Slider.qml
index c1309d5a..250dbd3a 100644
--- a/src/imports/controls/Slider.qml
+++ b/src/imports/controls/Slider.qml
@@ -35,7 +35,6 @@
 ****************************************************************************/
 
 import QtQuick 2.6
-import Qt.labs.controls 1.0
 import Qt.labs.templates 1.0 as T
 
 T.Slider {
@@ -52,56 +51,32 @@ T.Slider {
 
     //! [handle]
     handle: Rectangle {
-        implicitWidth: 20
-        implicitHeight: 20
-        radius: width / 2
-        border.width: control.activeFocus ? 2 : 1
-        border.color: control.activeFocus ? control.Theme.focusColor : control.Theme.frameColor
-        color: control.Theme.backgroundColor
-
-        readonly property bool horizontal: control.orientation === Qt.Horizontal
         x: control.leftPadding + (horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
         y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
+        implicitWidth: 28
+        implicitHeight: 28
+        radius: width / 2
+        border.color: "#353637"
+        color: control.pressed ? "#bdbebf" : "#ffffff"
 
-        Rectangle {
-            x: (parent.width - width) / 2
-            y: (parent.height - height) / 2
-            width: 12
-            height: 12
-            radius: width / 2
-
-            color: Qt.tint(!control.enabled ? control.Theme.disabledColor :
-                            control.activeFocus ? control.Theme.focusColor : control.Theme.accentColor,
-                            control.pressed ? control.Theme.pressColor : "transparent")
-        }
+        readonly property bool horizontal: control.orientation === Qt.Horizontal
     }
     //! [handle]
 
     //! [track]
     track: Rectangle {
-        readonly property bool horizontal: control.orientation === Qt.Horizontal
-
-        implicitWidth: horizontal ? 200 : 6
-        implicitHeight: horizontal ? 6 : 200
         x: control.leftPadding + (horizontal ? 0 : (control.availableWidth - width) / 2)
         y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : 0)
+        implicitWidth: horizontal ? 200 : 6
+        implicitHeight: horizontal ? 6 : 200
         width: horizontal ? control.availableWidth : implicitWidth
         height: horizontal ? implicitHeight : control.availableHeight
-
         radius: 3
-        border.color: control.Theme.frameColor
-        color: control.Theme.backgroundColor
+        border.color: "#353637"
+        color: "#ffffff"
         scale: horizontal && control.mirrored ? -1 : 1
 
-        Rectangle {
-            x: 2
-            y: parent.horizontal ? 2 : control.visualPosition * parent.height + 2
-            width: parent.horizontal ? control.position * parent.width - 4 : 2
-            height: parent.horizontal ? 2 : control.position * parent.height - 4
-
-            radius: 3
-            color: control.enabled ? control.Theme.accentColor : control.Theme.disabledColor
-        }
+        readonly property bool horizontal: control.orientation === Qt.Horizontal
     }
     //! [track]
 }
diff --git a/src/imports/controls/SpinBox.qml b/src/imports/controls/SpinBox.qml
index 5aeebe78..a8b2dbe5 100644
--- a/src/imports/controls/SpinBox.qml
+++ b/src/imports/controls/SpinBox.qml
@@ -35,7 +35,6 @@
 ****************************************************************************/
 
 import QtQuick 2.6
-import Qt.labs.controls 1.0
 import Qt.labs.templates 1.0 as T
 
 T.SpinBox {
@@ -67,9 +66,9 @@ T.SpinBox {
         text: control.textFromValue(control.value, control.locale)
 
         font: control.font
-        color: control.Theme.textColor
-        selectionColor: control.Theme.selectionColor
-        selectedTextColor: control.Theme.selectedTextColor
+        color: control.enabled ? "#353637" : "#bdbebf"
+//        selectionColor: control.Theme.selectionColor
+//        selectedTextColor: control.Theme.selectedTextColor
         horizontalAlignment: Qt.AlignHCenter
         verticalAlignment: Qt.AlignVCenter
 
@@ -79,69 +78,52 @@ T.SpinBox {
     //! [contentItem]
 
     //! [up.indicator]
-    up.indicator: Item {
-        implicitWidth: 26
-        height: parent.height
+    up.indicator: Rectangle {
         x: control.mirrored ? 0 : parent.width - width
+        implicitWidth: 40
+        implicitHeight: 40
+        color: up.pressed ? "#bdbebf" : "#ffffff"
+        border.color: control.enabled ? "#353637" : "#bdbebf"
 
-        clip: true
-        Rectangle {
-            x: -radius
-            width: parent.width + radius
-            height: parent.height
-            radius: 3
-            color: Qt.tint(Qt.tint(control.Theme.accentColor,
-                                   control.activeFocus ? control.Theme.focusColor : "transparent"),
-                                   control.up.pressed ? control.Theme.pressColor : "transparent")
-        }
         Rectangle {
             x: (parent.width - width) / 2
             y: (parent.height - height) / 2
             width: parent.width / 3
             height: 2
-            color: control.Theme.selectedTextColor
+            color: control.enabled ? "#353637" : "#bdbebf"
         }
         Rectangle {
             x: (parent.width - width) / 2
             y: (parent.height - height) / 2
             width: 2
             height: parent.height / 3
-            color: control.Theme.selectedTextColor
+            color: control.enabled ? "#353637" : "#bdbebf"
         }
     }
     //! [up.indicator]
 
     //! [down.indicator]
-    down.indicator: Item {
-        implicitWidth: 26
-        height: parent.height
+    down.indicator: Rectangle {
         x: control.mirrored ? parent.width - width : 0
+        implicitWidth: 40
+        implicitHeight: 40
+        color: down.pressed ? "#bdbebf" : "#ffffff"
+        border.color: control.enabled ? "#353637" : "#bdbebf"
 
-        clip: true
-        Rectangle {
-            width: parent.width + radius
-            height: parent.height
-            radius: 3
-            color: Qt.tint(Qt.tint(control.Theme.accentColor,
-                                   control.activeFocus ? control.Theme.focusColor : "transparent"),
-                                   control.down.pressed ? control.Theme.pressColor : "transparent")
-        }
         Rectangle {
             x: (parent.width - width) / 2
             y: (parent.height - height) / 2
             width: parent.width / 3
             height: 2
-            color: control.Theme.selectedTextColor
+            color: control.enabled ? "#353637" : "#bdbebf"
         }
     }
     //! [down.indicator]
 
     //! [background]
     background: Rectangle {
-        implicitWidth: 80
-        radius: 3
-        border.width: control.activeFocus ? 2 : 1
-        border.color: control.activeFocus ? control.Theme.focusColor : control.Theme.frameColor
+        implicitWidth: 140
+        border.color: "#bdbebf"
     }
     //! [background]
 }
diff --git a/src/imports/controls/Switch.qml b/src/imports/controls/Switch.qml
index 2768c2c7..cea3c53a 100644
--- a/src/imports/controls/Switch.qml
+++ b/src/imports/controls/Switch.qml
@@ -35,7 +35,6 @@
 ****************************************************************************/
 
 import QtQuick 2.6
-import Qt.labs.controls 1.0
 import Qt.labs.templates 1.0 as T
 
 T.Switch {
@@ -53,32 +52,31 @@ T.Switch {
     spacing: 6
 
     //! [indicator]
-    indicator: Rectangle {
-        implicitWidth: 36
-        implicitHeight: 20
+    indicator: Item {
         x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
         y: control.topPadding + (control.availableHeight - height) / 2
-
-        radius: 10
-        border.width: control.activeFocus ? 2 : 1
-        border.color: control.activeFocus ? control.Theme.focusColor : control.Theme.frameColor
-        color: control.Theme.backgroundColor
+        implicitWidth: 56
+        implicitHeight: 28
 
         Rectangle {
-            width: 20
-            height: 20
-            radius: 10
-
-            color: Qt.tint(control.checked && !control.enabled ? control.Theme.disabledColor :
-                           control.checked && control.activeFocus ? control.Theme.focusColor :
-                           control.checked ? control.Theme.accentColor : control.Theme.baseColor,
-                           control.pressed ? control.Theme.pressColor : "transparent")
-            border.width: control.checked || control.pressed ? 0 : 1
-            border.color: control.Theme.frameColor
+            y: parent.height / 2 - height / 2
+            width: 56
+            height: 16
+            radius: 8
+            border.width: 1
+            color: control.checked ? "#353637" : "transparent"
+            border.color: control.checked ? "transparent" : "#353637"
+        }
 
-            x: Math.max(0, Math.min(parent.width - width,
-                                    control.visualPosition * parent.width - (width / 2)))
+        Rectangle {
+            x: Math.max(0, Math.min(parent.width - width, control.visualPosition * parent.width - (width / 2)))
             y: (parent.height - height) / 2
+            width: 28
+            height: 28
+            radius: 16
+            color: control.pressed ? "#bdbebf" : "#ffffff"
+            border.width: 1
+            border.color: control.pressed ? "#26282a" : "#353637"
 
             Behavior on x {
                 enabled: !control.pressed
@@ -97,7 +95,7 @@ T.Switch {
 
         text: control.text
         font: control.font
-        color: control.enabled ? control.Theme.textColor : control.Theme.disabledColor
+        color: control.enabled ? "#26282a" : "#bdbebf"
         elide: Text.ElideRight
         visible: control.text
         horizontalAlignment: Text.AlignLeft
diff --git a/src/imports/controls/TabBar.qml b/src/imports/controls/TabBar.qml
index 28d6a5db..773382a3 100644
--- a/src/imports/controls/TabBar.qml
+++ b/src/imports/controls/TabBar.qml
@@ -35,7 +35,6 @@
 ****************************************************************************/
 
 import QtQuick 2.6
-import Qt.labs.controls 1.0
 import Qt.labs.templates 1.0 as T
 
 T.TabBar {
@@ -70,7 +69,7 @@ T.TabBar {
                 height: 4
                 width: parent.width
                 y: parent.height - height
-                color: control.Theme.accentColor
+                color: "#353637"
             }
         }
     }
@@ -81,15 +80,15 @@ T.TabBar {
         implicitWidth: 26
         implicitHeight: 26
 
-        border.color: control.Theme.backgroundColor
+        border.color: "#ffffff"
         border.width: 8
-        color: control.count > 1 ? control.Theme.frameColor : control.Theme.backgroundColor
+        color: control.count > 1 ? "#bdbebf" : "#ffffff"
 
         Rectangle {
             y: parent.height - height
             width: parent.width
             height: 1
-            color: control.Theme.frameColor
+            color: "#bdbebf"
         }
     }
     //! [background]
diff --git a/src/imports/controls/TabButton.qml b/src/imports/controls/TabButton.qml
index 33e0911f..fc95b8a8 100644
--- a/src/imports/controls/TabButton.qml
+++ b/src/imports/controls/TabButton.qml
@@ -35,7 +35,6 @@
 ****************************************************************************/
 
 import QtQuick 2.6
-import Qt.labs.controls 1.0
 import Qt.labs.templates 1.0 as T
 
 T.TabButton {
@@ -60,7 +59,7 @@ T.TabButton {
         text: control.text
         font: control.font
         elide: Text.ElideRight
-        color: !control.enabled ? control.Theme.disabledColor : control.pressed ? control.Theme.accentColor : control.Theme.textColor
+        color: !control.enabled ? "#bdbebf" : control.pressed ? "#000000" : "#353637"
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
     }
@@ -70,7 +69,7 @@ T.TabButton {
     background: Rectangle {
         height: parent.height - 1
         implicitHeight: 26
-        color: control.Theme.backgroundColor
+        color: "#ffffff"
     }
     //! [background]
 }
diff --git a/src/imports/controls/TextField.qml b/src/imports/controls/TextField.qml
index ce5534e4..25e1461d 100644
--- a/src/imports/controls/TextField.qml
+++ b/src/imports/controls/TextField.qml
@@ -35,7 +35,6 @@
 ****************************************************************************/
 
 import QtQuick 2.6
-import Qt.labs.controls 1.0
 import Qt.labs.templates 1.0 as T
 
 T.TextField {
@@ -48,9 +47,9 @@ T.TextField {
 
     padding: 6
 
-    color: enabled ? Theme.textColor : Theme.disabledColor
-    selectionColor: Theme.selectionColor
-    selectedTextColor: Theme.selectedTextColor
+//    color: enabled ? "" : "#bdbebf"
+//    selectionColor: Theme.selectionColor
+//    selectedTextColor: Theme.selectedTextColor
     verticalAlignment: TextInput.AlignVCenter
 
     Text {
@@ -62,7 +61,7 @@ T.TextField {
 
         text: control.placeholderText
         font: control.font
-        color: control.Theme.disabledColor
+        color: "#a0a1a2"
         horizontalAlignment: control.horizontalAlignment
         verticalAlignment: control.verticalAlignment
         visible: !control.displayText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
@@ -71,10 +70,10 @@ T.TextField {
 
     //! [background]
     background: Rectangle {
-        implicitWidth: 120 // TODO
-        border.width: control.activeFocus ? 2 : 1
-        border.color: control.activeFocus ? control.Theme.focusColor : control.Theme.frameColor
-        radius: 3
+        implicitWidth: 200
+        implicitHeight: 40
+//        border.width: control.activeFocus ? 2 : 1
+        border.color: "#bdbebf"
     }
     //! [background]
 }
diff --git a/src/imports/controls/images/check.png b/src/imports/controls/images/check.png
new file mode 100644
index 00000000..28d86ef2
--- /dev/null
+++ b/src/imports/controls/images/check.png
diff --git a/src/imports/controls/images/check@2x.png b/src/imports/controls/images/check@2x.png
new file mode 100644
index 00000000..46c3dafa
--- /dev/null
+++ b/src/imports/controls/images/check@2x.png
diff --git a/src/imports/controls/images/check@3x.png b/src/imports/controls/images/check@3x.png
new file mode 100644
index 00000000..7ad7818b
--- /dev/null
+++ b/src/imports/controls/images/check@3x.png
diff --git a/src/imports/controls/images/check@4x.png b/src/imports/controls/images/check@4x.png
new file mode 100644
index 00000000..ce3d9e76
--- /dev/null
+++ b/src/imports/controls/images/check@4x.png
diff --git a/src/imports/controls/qtlabscontrolsplugin.qrc b/src/imports/controls/qtlabscontrolsplugin.qrc
index b71ec91c..d2dc4f4c 100644
--- a/src/imports/controls/qtlabscontrolsplugin.qrc
+++ b/src/imports/controls/qtlabscontrolsplugin.qrc
@@ -1,10 +1,14 @@
-<!DOCTYPE RCC><RCC version="1.0">
-<qresource prefix="/qtlabscontrols">
-    <file>theme.json</file>
-</qresource>
-<qresource>
-    <file>images/spinner_small.png</file>
-    <file>images/spinner_medium.png</file>
-    <file>images/spinner_large.png</file>
-</qresource>
+<RCC>
+    <qresource prefix="/qtlabscontrols">
+        <file>theme.json</file>
+    </qresource>
+    <qresource prefix="/">
+        <file>images/spinner_small.png</file>
+        <file>images/spinner_medium.png</file>
+        <file>images/spinner_large.png</file>
+        <file>images/check.png</file>
+        <file>images/check@2x.png</file>
+        <file>images/check@3x.png</file>
+        <file>images/check@4x.png</file>
+    </qresource>
 </RCC>