More styling improvements for Base Style

- Better scalability
- Retina support
- Added glow filter to Private
- Added focus rects

Change-Id: I2ec36a9db546c21e20408429c5e17fde8d67b7c3
Reviewed-by: Gabriel de Dietrich <gabriel.dedietrich@digia.com>

20 files changed, 898 insertions, 264 deletions

diff --git a/src/controls/ComboBox.qml b/src/controls/ComboBox.qml
index 4065724c..db39f579 100644
--- a/src/controls/ComboBox.qml
+++ b/src/controls/ComboBox.qml
@@ -317,7 +317,8 @@ Control {
 
         anchors.fill: parent
         anchors.leftMargin: 8
-        anchors.rightMargin: 24
+        anchors.rightMargin: __style.drowDownButtonWidth
+
         verticalAlignment: Text.AlignVCenter
 
         renderType: Text.NativeRendering
diff --git a/src/controls/Private/FastGlow.qml b/src/controls/Private/FastGlow.qml
new file mode 100644
index 00000000..f4bd2c74
--- /dev/null
+++ b/src/controls/Private/FastGlow.qml
@@ -0,0 +1,393 @@
+/****************************************************************************
+**
+** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the Qt Graphical Effects module.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
+**     of its contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: rootItem
+    property variant source
+    property real spread: 0.0
+    property real blur: 0.0
+    property color color: "white"
+    property bool transparentBorder: false
+    property bool cached: false
+
+    SourceProxy {
+        id: sourceProxy
+        input: rootItem.source
+    }
+
+    ShaderEffectSource {
+        id: cacheItem
+        anchors.fill: shaderItem
+        visible: rootItem.cached
+        smooth: true
+        sourceItem: shaderItem
+        live: true
+        hideSource: visible
+    }
+
+    property string __internalBlurVertexShader: "
+        attribute highp vec4 qt_Vertex;
+        attribute highp vec2 qt_MultiTexCoord0;
+        uniform highp mat4 qt_Matrix;
+        uniform highp float yStep;
+        uniform highp float xStep;
+        varying highp vec2 qt_TexCoord0;
+        varying highp vec2 qt_TexCoord1;
+        varying highp vec2 qt_TexCoord2;
+        varying highp vec2 qt_TexCoord3;
+
+        void main() {
+            qt_TexCoord0 = vec2(qt_MultiTexCoord0.x + xStep, qt_MultiTexCoord0.y + yStep * 0.36);
+            qt_TexCoord1 = vec2(qt_MultiTexCoord0.x + xStep * 0.36, qt_MultiTexCoord0.y - yStep);
+            qt_TexCoord2 = vec2(qt_MultiTexCoord0.x - xStep * 0.36, qt_MultiTexCoord0.y + yStep);
+            qt_TexCoord3 = vec2(qt_MultiTexCoord0.x - xStep, qt_MultiTexCoord0.y - yStep * 0.36);
+            gl_Position = qt_Matrix * qt_Vertex;
+        }
+    "
+
+    property string __internalBlurFragmentShader: "
+        uniform lowp sampler2D source;
+        uniform lowp float qt_Opacity;
+        varying highp vec2 qt_TexCoord0;
+        varying highp vec2 qt_TexCoord1;
+        varying highp vec2 qt_TexCoord2;
+        varying highp vec2 qt_TexCoord3;
+
+        void main() {
+            highp vec4 sourceColor = (texture2D(source, qt_TexCoord0) +
+            texture2D(source, qt_TexCoord1) +
+            texture2D(source, qt_TexCoord2) +
+            texture2D(source, qt_TexCoord3)) * 0.25;
+            gl_FragColor = sourceColor * qt_Opacity;
+        }
+   "
+
+    ShaderEffect {
+        id: level0
+        property variant source: sourceProxy.output
+        anchors.fill: parent
+        visible: false
+        smooth: true
+    }
+
+    ShaderEffectSource {
+        id: level1
+        width: Math.ceil(shaderItem.width / 32) * 32
+        height: Math.ceil(shaderItem.height / 32) * 32
+        sourceItem: level0
+        hideSource: rootItem.visible
+        sourceRect: transparentBorder ? Qt.rect(-64, -64, shaderItem.width, shaderItem.height) : Qt.rect(0,0,0,0)
+        smooth: true
+        visible: false
+    }
+
+    ShaderEffect {
+        id: effect1
+        property variant source: level1
+        property real yStep: 1/height
+        property real xStep: 1/width
+        anchors.fill: level2
+        visible: false
+        smooth: true
+        vertexShader: __internalBlurVertexShader
+        fragmentShader: __internalBlurFragmentShader
+    }
+
+    ShaderEffectSource {
+        id: level2
+        width: level1.width / 2
+        height: level1.height / 2
+        sourceItem: effect1
+        hideSource: rootItem.visible
+        visible: false
+        smooth: true
+    }
+
+    ShaderEffect {
+        id: effect2
+        property variant source: level2
+        property real yStep: 1/height
+        property real xStep: 1/width
+        anchors.fill: level3
+        visible: false
+        smooth: true
+        vertexShader: __internalBlurVertexShader
+        fragmentShader: __internalBlurFragmentShader
+    }
+
+    ShaderEffectSource {
+        id: level3
+        width: level2.width / 2
+        height: level2.height / 2
+        sourceItem: effect2
+        hideSource: rootItem.visible
+        visible: false
+        smooth: true
+    }
+
+    ShaderEffect {
+        id: effect3
+        property variant source: level3
+        property real yStep: 1/height
+        property real xStep: 1/width
+        anchors.fill: level4
+        visible: false
+        smooth: true
+        vertexShader: __internalBlurVertexShader
+        fragmentShader: __internalBlurFragmentShader
+    }
+
+    ShaderEffectSource {
+        id: level4
+        width: level3.width / 2
+        height: level3.height / 2
+        sourceItem: effect3
+        hideSource: rootItem.visible
+        visible: false
+        smooth: true
+    }
+
+    ShaderEffect {
+        id: effect4
+        property variant source: level4
+        property real yStep: 1/height
+        property real xStep: 1/width
+        anchors.fill: level5
+        visible: false
+        smooth: true
+        vertexShader: __internalBlurVertexShader
+        fragmentShader: __internalBlurFragmentShader
+    }
+
+    ShaderEffectSource {
+        id: level5
+        width: level4.width / 2
+        height: level4.height / 2
+        sourceItem: effect4
+        hideSource: rootItem.visible
+        visible: false
+        smooth: true
+    }
+
+    ShaderEffect {
+        id: effect5
+        property variant source: level5
+        property real yStep: 1/height
+        property real xStep: 1/width
+        anchors.fill: level6
+        visible: false
+        smooth: true
+        vertexShader: __internalBlurVertexShader
+        fragmentShader: __internalBlurFragmentShader
+    }
+
+    ShaderEffectSource {
+        id: level6
+        width: level5.width / 2
+        height: level5.height / 2
+        sourceItem: effect5
+        hideSource: rootItem.visible
+        visible: false
+        smooth: true
+    }
+
+    Item {
+        id: dummysource
+        width: 1
+        height: 1
+        visible: false
+    }
+
+    ShaderEffectSource {
+        id: dummy
+        width: 1
+        height: 1
+        sourceItem: dummysource
+        visible: false
+        smooth: false
+        live: false
+    }
+
+    ShaderEffect {
+        id: shaderItem
+        x: transparentBorder ? -64 : 0
+        y: transparentBorder ? -64 : 0
+        width: transparentBorder ? parent.width + 128 : parent.width
+        height: transparentBorder ? parent.height + 128 : parent.height
+
+        property variant source1: level1
+        property variant source2: level2
+        property variant source3: level3
+        property variant source4: level4
+        property variant source5: level5
+        property variant source6: level6
+        property real lod: rootItem.blur
+
+        property real weight1;
+        property real weight2;
+        property real weight3;
+        property real weight4;
+        property real weight5;
+        property real weight6;
+
+        property real spread: 1.0 - (rootItem.spread * 0.98)
+        property alias color: rootItem.color
+
+        function weight(v) {
+            if (v <= 0.0)
+                return 1
+            if (v >= 0.5)
+                return 0
+
+            return 1.0 - v / 0.5
+        }
+
+        function calculateWeights() {
+
+            var w1 = weight(Math.abs(lod - 0.100))
+            var w2 = weight(Math.abs(lod - 0.300))
+            var w3 = weight(Math.abs(lod - 0.500))
+            var w4 = weight(Math.abs(lod - 0.700))
+            var w5 = weight(Math.abs(lod - 0.900))
+            var w6 = weight(Math.abs(lod - 1.100))
+
+            var sum = w1 + w2 + w3 + w4 + w5 + w6;
+            weight1 = w1 / sum;
+            weight2 = w2 / sum;
+            weight3 = w3 / sum;
+            weight4 = w4 / sum;
+            weight5 = w5 / sum;
+            weight6 = w6 / sum;
+
+            upateSources()
+        }
+
+        function upateSources() {
+            var sources = new Array();
+            var weights = new Array();
+
+            if (weight1 > 0) {
+                sources.push(level1)
+                weights.push(weight1)
+            }
+
+            if (weight2 > 0) {
+                sources.push(level2)
+                weights.push(weight2)
+            }
+
+            if (weight3 > 0) {
+                sources.push(level3)
+                weights.push(weight3)
+            }
+
+            if (weight4 > 0) {
+                sources.push(level4)
+                weights.push(weight4)
+            }
+
+            if (weight5 > 0) {
+                sources.push(level5)
+                weights.push(weight5)
+            }
+
+            if (weight6 > 0) {
+                sources.push(level6)
+                weights.push(weight6)
+            }
+
+            for (var j = sources.length; j < 6; j++) {
+                sources.push(dummy)
+                weights.push(0.0)
+            }
+
+            source1 = sources[0]
+            source2 = sources[1]
+            source3 = sources[2]
+            source4 = sources[3]
+            source5 = sources[4]
+            source6 = sources[5]
+
+            weight1 = weights[0]
+            weight2 = weights[1]
+            weight3 = weights[2]
+            weight4 = weights[3]
+            weight5 = weights[4]
+            weight6 = weights[5]
+        }
+
+        Component.onCompleted: calculateWeights()
+
+        onLodChanged: calculateWeights()
+
+        fragmentShader: "
+            uniform lowp sampler2D source1;
+            uniform lowp sampler2D source2;
+            uniform lowp sampler2D source3;
+            uniform lowp sampler2D source4;
+            uniform lowp sampler2D source5;
+            uniform mediump float weight1;
+            uniform mediump float weight2;
+            uniform mediump float weight3;
+            uniform mediump float weight4;
+            uniform mediump float weight5;
+            uniform highp vec4 color;
+            uniform highp float spread;
+            uniform lowp float qt_Opacity;
+            varying mediump vec2 qt_TexCoord0;
+
+            highp float linearstep(highp float e0, highp float e1, highp float x) {
+                return clamp((x - e0) / (e1 - e0), 0.0, 1.0);
+            }
+
+            void main() {
+                lowp vec4 sourceColor = texture2D(source1, qt_TexCoord0) * weight1;
+                sourceColor += texture2D(source2, qt_TexCoord0) * weight2;
+                sourceColor += texture2D(source3, qt_TexCoord0) * weight3;
+                sourceColor += texture2D(source4, qt_TexCoord0) * weight4;
+                sourceColor += texture2D(source5, qt_TexCoord0) * weight5;
+                sourceColor = mix(vec4(0), color, linearstep(0.0, spread, sourceColor.a));
+                gl_FragColor = sourceColor * qt_Opacity;
+            }
+        "
+    }
+}
diff --git a/src/controls/Private/SourceProxy.qml b/src/controls/Private/SourceProxy.qml
new file mode 100644
index 00000000..1cf03f31
--- /dev/null
+++ b/src/controls/Private/SourceProxy.qml
@@ -0,0 +1,137 @@
+/****************************************************************************
+**
+** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the Qt Graphical Effects module.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
+**     of its contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: rootItem
+    property variant input
+    property variant output
+    property variant sourceRect
+    visible: false
+
+    Component.onCompleted: evaluateInput()
+
+    onInputChanged: evaluateInput()
+
+    onSourceRectChanged: evaluateInput()
+
+    function evaluateInput() {
+        if (input == undefined) {
+            output =  input
+        }
+        else if (sourceRect != undefined && sourceRect != Qt.rect(0, 0, 0, 0) && !isQQuickShaderEffectSource(input)) {
+            proxySource.sourceItem = input
+            output = proxySource
+            proxySource.sourceRect = sourceRect
+        }
+        else if (isQQuickItemLayerEnabled(input)) {
+            output = input
+        }
+        else if ((isQQuickImage(input) && !hasTileMode(input) && !hasChildren(input))) {
+            output = input
+        }
+        else if (isQQuickShaderEffectSource(input)) {
+            output = input
+        }
+        else {
+            proxySource.sourceItem = input
+            output = proxySource
+            proxySource.sourceRect = Qt.rect(0, 0, 0, 0)
+        }
+    }
+
+    function isQQuickItemLayerEnabled(item) {
+        if (item.hasOwnProperty("layer")) {
+            var l = item["layer"]
+            if (l.hasOwnProperty("enabled") && l["enabled"].toString() == "true")
+                return true
+        }
+        return false
+    }
+
+    function isQQuickImage(item) {
+        var imageProperties = [ "fillMode", "progress", "asynchronous", "sourceSize", "status", "smooth" ]
+        return hasProperties(item, imageProperties)
+    }
+
+    function isQQuickShaderEffectSource(item) {
+        var shaderEffectSourceProperties = [ "hideSource", "format", "sourceItem", "mipmap", "wrapMode", "live", "recursive", "sourceRect" ]
+        return hasProperties(item, shaderEffectSourceProperties)
+    }
+
+    function hasProperties(item, properties) {
+        var counter = 0
+            for (var j = 0; j < properties.length; j++) {
+                if (item.hasOwnProperty(properties [j]))
+                    counter++
+            }
+        return properties.length == counter
+    }
+
+    function hasChildren(item) {
+        if (item.hasOwnProperty("childrenRect")) {
+            if (item["childrenRect"].toString() != "QRectF(0, 0, 0, 0)")
+                return true
+            else
+                return false
+        }
+        return false
+    }
+
+    function hasTileMode(item) {
+        if (item.hasOwnProperty("fillMode")) {
+            if (item["fillMode"].toString() != "0")
+                return true
+            else
+                return false
+        }
+        return false
+    }
+
+    ShaderEffectSource {
+        id: proxySource
+        live: rootItem.input != rootItem.output
+        hideSource: false
+        smooth: true
+        visible: false
+    }
+}
+
diff --git a/src/controls/Private/private.pri b/src/controls/Private/private.pri
index f51223cd..30464974 100644
--- a/src/controls/Private/private.pri
+++ b/src/controls/Private/private.pri
@@ -30,6 +30,8 @@ PRIVATE_QML_FILES += \
     $$PWD/TabBar.qml \
     $$PWD/BasicButton.qml \
     $$PWD/Control.qml \
+    $$PWD/FastGlow.qml \
+    $$PWD/SourceProxy.qml\
     $$PWD/Style.qml \
     $$PWD/style.js \
     $$PWD/ModalPopupBehavior.qml \
diff --git a/src/controls/Private/qmldir b/src/controls/Private/qmldir
index 05d52b19..c8c6f46b 100644
--- a/src/controls/Private/qmldir
+++ b/src/controls/Private/qmldir
@@ -12,6 +12,8 @@ StackViewSlideDelegate 1.0 StackViewSlideDelegate.qml
 StyleHelpers 1.0 style.js
 JSArray 1.0 StackView.js
 TableViewSelection 1.0 TableViewSelection.qml
+FastGlow 1.0 FastGlow.qml
+SourceProxy 1.0 SourceProxy.qml
 GroupBoxStyle 1.0 ../Styles/Base/GroupBoxStyle.qml
 ToolBarStyle 1.0 ../Styles/Base/ToolBarStyle.qml
 StatusBarStyle 1.0 ../Styles/Base/StatusBarStyle.qml
diff --git a/src/controls/Styles/Base/ButtonStyle.qml b/src/controls/Styles/Base/ButtonStyle.qml
index d6a87540..ad14095c 100644
--- a/src/controls/Styles/Base/ButtonStyle.qml
+++ b/src/controls/Styles/Base/ButtonStyle.qml
@@ -89,38 +89,34 @@ Style {
     padding {
         top: 4
         left: 4
-        right:  control.menu !== null ? 16 : 4
+        right:  control.menu !== null ? Math.round(TextSingleton.implicitHeight * 0.5) : 4
         bottom: 4
     }
 
     /*! This defines the background of the button. */
     property Component background: Item {
-        implicitWidth: 100
-        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.1))
-        BorderImage {
+        implicitWidth: Math.round(TextSingleton.implicitHeight * 4.5)
+        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.2))
+        Rectangle {
             anchors.fill: parent
-            anchors.margins: -1
-            source: control.pressed || (control.checkable && control.checked) ? "images/button_down.png" : "images/button.png"
-            border.top: 6
-            border.bottom: 6
-            border.left: 6
-            border.right: 6
-            anchors.bottomMargin: -1
-            BorderImage {
-                anchors.fill: parent
-                source: "images/focusframe.png"
-                opacity: control.activeFocus ? 1 : 0
-                border.left: 4
-                border.right: 4
-                border.top: 4
-                border.bottom: 4
+            anchors.bottomMargin: control.pressed ? 0 : -1
+            color: "#10000000"
+            radius: baserect.radius
+        }
+        Rectangle {
+            id: baserect
+            gradient: Gradient {
+                GradientStop {color: control.pressed ? "#aaa" : "#fefefe" ; position: 0}
+                GradientStop {color: control.pressed ? "#ccc" : "#e3e3e3" ; position: control.pressed ? 0.1: 1}
             }
+            radius: TextSingleton.implicitHeight * 0.16
+            anchors.fill: parent
+            border.color: control.activeFocus ? "#47b" : "#999"
             Rectangle {
                 anchors.fill: parent
-                anchors.margins: 2
-                radius: 2
-                color: "white"
-                opacity: control.hovered || control.activeFocus ? 0.2 : 0
+                radius: parent.radius
+                color: control.activeFocus ? "#47b" : "white"
+                opacity: control.hovered || control.activeFocus ? 0.1 : 0
                 Behavior on opacity {NumberAnimation{ duration: 100 }}
             }
         }
@@ -130,8 +126,8 @@ Style {
             source: "images/arrow-down.png"
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
-            anchors.rightMargin: 8
-            opacity: control.enabled ? 0.7 : 0.5
+            anchors.rightMargin: padding.right
+            opacity: control.enabled ? 0.6 : 0.5
         }
     }
 
diff --git a/src/controls/Styles/Base/CheckBoxStyle.qml b/src/controls/Styles/Base/CheckBoxStyle.qml
index d045d202..8fb58207 100644
--- a/src/controls/Styles/Base/CheckBoxStyle.qml
+++ b/src/controls/Styles/Base/CheckBoxStyle.qml
@@ -39,6 +39,7 @@
 ****************************************************************************/
 import QtQuick 2.1
 import QtQuick.Controls 1.1
+import QtQuick.Window 2.1
 import QtQuick.Controls.Private 1.0
 
 /*!
@@ -84,58 +85,79 @@ Style {
     }
 
     /*! This defines the text label. */
-    property Component label: Text {
-        text: control.text
-        color: __syspal.text
-        renderType: Text.NativeRendering
+    property Component label: Item {
+        implicitWidth: text.implicitWidth + 2
+        implicitHeight: text.implicitHeight
+        Rectangle {
+            anchors.fill: text
+            anchors.margins: -1
+            anchors.leftMargin: -3
+            anchors.rightMargin: -3
+            visible: control.activeFocus
+            height: 6
+            radius: 3
+            color: "#224f9fef"
+            border.color: "#47b"
+            opacity: 0.6
+        }
+        Text {
+            id: text
+            text: control.text
+            anchors.centerIn: parent
+            color: __syspal.text
+            renderType: Text.NativeRendering
+        }
     }
     /*! The background under indicator and label. */
     property Component background
 
     /*! The spacing between indicator and label. */
-    property int spacing: 4
+    property int spacing: Math.round(TextSingleton.implicitHeight/4)
 
     /*! This defines the indicator button. */
     property Component indicator:  Item {
-        implicitWidth: 16
-        implicitHeight: 18
-        BorderImage {
+        implicitWidth: Math.round(TextSingleton.implicitHeight)
+        height: width
+        Rectangle {
             anchors.fill: parent
-            source: "images/editbox.png"
-            anchors.margins: -1
-            border.top: 6
-            border.bottom: 6
-            border.left: 6
-            border.right: 6
-            anchors.bottomMargin: 1
-            BorderImage {
-                anchors.fill: parent
-                source: "images/focusframe.png"
-                visible: control.activeFocus
-                border.left: 4
-                border.right: 4
-                border.top: 4
-                border.bottom: 4
+            anchors.bottomMargin: -1
+            color: "#44ffffff"
+            radius: baserect.radius
+        }
+        Rectangle {
+            id: baserect
+            gradient: Gradient {
+                GradientStop {color: "#eee" ; position: 0}
+                GradientStop {color: control.pressed ? "#eee" : "#fff" ; position: 0.1}
+                GradientStop {color: "#fff" ; position: 1}
             }
+            radius: TextSingleton.implicitHeight * 0.16
+            anchors.fill: parent
+            border.color: control.activeFocus ? "#47b" : "#999"
+        }
+
+        Image {
+            source: "images/check.png"
+            opacity: control.checkedState === Qt.Checked ? control.enabled ? 1 : 0.5 : 0
+            anchors.centerIn: parent
+            anchors.verticalCenterOffset: 1
+            Behavior on opacity {NumberAnimation {duration: 80}}
         }
+
         Rectangle {
-            height: 16
-            width: 16
-            antialiasing: true
-            visible: control.checked
-            color: "#666"
-            radius: 1
-            anchors.margins: 3
-            anchors.bottomMargin: 5
             anchors.fill: parent
-            border.color: "#222"
-            opacity: control.enabled ? 1 : 0.5
-            Rectangle {
-                anchors.fill: parent
-                anchors.margins: 1
-                color: "transparent"
-                border.color: "#33ffffff"
+            anchors.margins: Math.round(baserect.radius)
+            antialiasing: true
+            gradient: Gradient {
+                GradientStop {color: control.pressed ? "#555" : "#999" ; position: 0}
+                GradientStop {color: "#555" ; position: 1}
             }
+            radius: baserect.radius - 1
+            anchors.centerIn: parent
+            anchors.alignWhenCentered: true
+            border.color: "#222"
+            Behavior on opacity {NumberAnimation {duration: 80}}
+            opacity: control.checkedState === Qt.PartiallyChecked ? control.enabled ? 1 : 0.5 : 0
         }
     }
 
diff --git a/src/controls/Styles/Base/ComboBoxStyle.qml b/src/controls/Styles/Base/ComboBoxStyle.qml
index 14a0ff47..2b4b237d 100644
--- a/src/controls/Styles/Base/ComboBoxStyle.qml
+++ b/src/controls/Styles/Base/ComboBoxStyle.qml
@@ -64,79 +64,78 @@ Style {
     /*! The padding between the background and the label components. */
     padding { top: 4 ; left: 6 ; right: 6 ; bottom:4 }
 
+    /*! The size of the drop down button when the combobox is editable. */
+    property int drowDownButtonWidth: Math.round(TextSingleton.implicitHeight)
+
     /*! This defines the background of the button. */
     property Component background: Item {
-        implicitWidth: 125
-        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.1))
-        BorderImage {
+        implicitWidth: Math.round(TextSingleton.implicitHeight * 4.5)
+        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.2))
+        Rectangle {
             anchors.fill: parent
-            anchors.margins: -1
-            source: control.pressed ? "images/button_down.png" : "images/button.png"
-            border.top: 6
-            border.bottom: 6
-            border.left: 6
-            border.right: 6
-            anchors.bottomMargin: -1
-            BorderImage {
-                anchors.fill: parent
-                source: "images/focusframe.png"
-                opacity: control.activeFocus ? 1 : 0
-                border.left: 4
-                border.right: 4
-                border.top: 4
-                border.bottom: 4
+            anchors.bottomMargin: control.pressed ? 0 : -1
+            color: "#10000000"
+            radius: baserect.radius
+        }
+        Rectangle {
+            id: baserect
+            gradient: Gradient {
+                GradientStop {color: control.pressed ? "#bababa" : "#fefefe" ; position: 0}
+                GradientStop {color: control.pressed ? "#ccc" : "#e3e3e3" ; position: 1}
             }
+            radius: TextSingleton.implicitHeight * 0.16
+            anchors.fill: parent
+            border.color: control.activeFocus ? "#47b" : "#999"
             Rectangle {
                 anchors.fill: parent
-                anchors.margins: 2
-                radius: 2
-                color: "white"
-                opacity: control.hovered || control.activeFocus ? 0.2 : 0
+                radius: parent.radius
+                color: control.activeFocus ? "#47b" : "white"
+                opacity: control.hovered || control.activeFocus ? 0.1 : 0
                 Behavior on opacity {NumberAnimation{ duration: 100 }}
             }
-            Image {
-                id: imageItem
-                source: "images/arrow-down.png"
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.right: parent.right
-                anchors.rightMargin: 8
-                opacity: control.enabled ? 0.7 : 0.5
-            }
+        }
+        Image {
+            id: imageItem
+            visible: control.menu !== null
+            source: "images/arrow-down.png"
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: drowDownButtonWidth / 2
+            opacity: control.enabled ? 0.6 : 0.3
         }
     }
 
     /*! \internal */
     property Component __editor: Item {
-        implicitWidth: 125
-        implicitHeight: 25
+        implicitWidth: 100
+        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.2))
         clip: true
-        BorderImage {
+        Rectangle {
             anchors.fill: parent
-            anchors.margins: -1
             anchors.bottomMargin: 0
-            anchors.rightMargin: -2
-            source: "images/editbox.png"
-            border.left: 4
-            border.right: 4
-            border.top: 4
-            border.bottom: 4
-            BorderImage {
-                anchors.fill: parent
-                source: "images/focusframe.png"
-                visible: control.activeFocus
-                border.left: 4
-                border.right: 4
-                border.top: 4
-                border.bottom: 4
+            color: "#44ffffff"
+            radius: baserect.radius
+        }
+        Rectangle {
+            id: baserect
+            anchors.rightMargin: -radius
+            anchors.bottomMargin: 1
+            gradient: Gradient {
+                GradientStop {color: "#e0e0e0" ; position: 0}
+                GradientStop {color: "#fff" ; position: 0.1}
+                GradientStop {color: "#fff" ; position: 1}
             }
+            radius: TextSingleton.implicitHeight * 0.16
+            anchors.fill: parent
+            border.color: control.activeFocus ? "#47b" : "#999"
         }
         Rectangle {
             color: "#aaa"
+            anchors.bottomMargin: 2
+            anchors.topMargin: 1
             anchors.right: parent.right
             anchors.top: parent.top
             anchors.bottom: parent.bottom
-            anchors.bottomMargin: 2
-            anchors.topMargin: 1
             width: 1
         }
     }
@@ -176,7 +175,7 @@ Style {
         Loader {
             id: editorLoader
             anchors.fill: parent
-            anchors.rightMargin: 20
+            anchors.rightMargin: drowDownButtonWidth + padding.right
             anchors.bottomMargin: -1
             sourceComponent: control.editable ? __editor : null
         }
diff --git a/src/controls/Styles/Base/ProgressBarStyle.qml b/src/controls/Styles/Base/ProgressBarStyle.qml
index fe76f300..63397edf 100644
--- a/src/controls/Styles/Base/ProgressBarStyle.qml
+++ b/src/controls/Styles/Base/ProgressBarStyle.qml
@@ -98,40 +98,65 @@ Style {
     /*! \qmlproperty Component ProgressBarStyle::progress
         The progress component for this style.
     */
-    property Component progress: Rectangle {
+    property Component progress: Item {
         property color progressColor: "#49d"
         anchors.fill: parent
-        radius: 2
-        antialiasing: true
-        gradient: Gradient {
-            GradientStop {color: Qt.lighter(progressColor, 1.3)  ; position: 0}
-            GradientStop {color: progressColor ; position: 1.4}
-        }
-        border.width: 1
-        border.color: Qt.darker(progressColor, 1.2)
+        clip: true
         Rectangle {
-            color: "transparent"
-            radius: 1.5
-            clip: true
+            id: base
+            width: control.width
+            height: control.height
+            radius: TextSingleton.implicitHeight * 0.16
             antialiasing: true
-            anchors.fill: parent
-            anchors.margins: 1
-            border.color: Qt.rgba(1,1,1,0.1)
-            Image {
-                visible: control.indeterminate
-                height: parent.height
-                NumberAnimation on x {
-                    from: -39
-                    to: 0
-                    running: control.indeterminate
-                    duration: 800
-                    loops: Animation.Infinite
+            gradient: Gradient {
+                GradientStop {color: Qt.lighter(progressColor, 1.3)  ; position: 0}
+                GradientStop {color: progressColor ; position: 1.4}
+            }
+            border.width: 1
+            border.color: Qt.darker(progressColor, 1.2)
+            Rectangle {
+                color: "transparent"
+                radius: 1.5
+                clip: true
+                antialiasing: true
+                anchors.fill: parent
+                anchors.margins: 1
+                border.color: Qt.rgba(1,1,1,0.1)
+                Image {
+                    visible: control.indeterminate
+                    height: parent.height
+                    NumberAnimation on x {
+                        from: -39
+                        to: 0
+                        running: control.indeterminate
+                        duration: 800
+                        loops: Animation.Infinite
+                    }
+                    fillMode: Image.Tile
+                    width: parent.width + 25
+                    source: "images/progress-indeterminate.png"
                 }
-                fillMode: Image.Tile
-                width: parent.width + 25
-                source: "images/progress-indeterminate.png"
             }
         }
+        Rectangle {
+            height: parent.height - 2
+            width: 1
+            y: 1
+            anchors.right: parent.right
+            anchors.rightMargin: 1
+            color:  Qt.rgba(1,1,1,0.1)
+            visible: splitter.visible
+        }
+        Rectangle {
+            id: splitter
+            height: parent.height - 2
+            width: 1
+            y: 1
+            anchors.right: parent.right
+            color: Qt.darker(progressColor, 1.2)
+            property int offset: currentProgress * control.width
+            visible: offset > base.radius && offset < control.width - base.radius + 1
+        }
     }
 
     /*! \qmlproperty Component ProgressBarStyle::background
@@ -140,15 +165,29 @@ Style {
     property Component background: Item {
         implicitWidth: 200
         implicitHeight: Math.max(17, Math.round(TextSingleton.implicitHeight * 0.7))
-        BorderImage {
+        Rectangle {
             anchors.fill: parent
-            anchors.topMargin: -1
-            anchors.bottomMargin: -1
-            source: "images/editbox.png"
-            border.left: 4
-            border.right: 4
-            border.top: 4
-            border.bottom: 4
+            anchors.bottomMargin: control.pressed ? 0 : -1
+            color: "#44ffffff"
+            radius: baserect.radius
+        }
+        Rectangle {
+            id: baserect
+            gradient: Gradient {
+                GradientStop {color: "#eee" ; position: 0}
+                GradientStop {color: "#fff" ; position: 0.1}
+                GradientStop {color: "#fff" ; position: 1}
+            }
+            radius: TextSingleton.implicitHeight * 0.16
+            anchors.fill: parent
+            border.color: control.activeFocus ? "#47b" : "#999"
+            Rectangle {
+                anchors.fill: parent
+                radius: parent.radius
+                color: control.activeFocus ? "#47b" : "white"
+                opacity: control.hovered || control.activeFocus ? 0.1 : 0
+                Behavior on opacity {NumberAnimation{ duration: 100 }}
+            }
         }
     }
 
diff --git a/src/controls/Styles/Base/RadioButtonStyle.qml b/src/controls/Styles/Base/RadioButtonStyle.qml
index 1a750923..78f423ac 100644
--- a/src/controls/Styles/Base/RadioButtonStyle.qml
+++ b/src/controls/Styles/Base/RadioButtonStyle.qml
@@ -84,38 +84,61 @@ Style {
     readonly property RadioButton control: __control
 
     /*! This defines the text label. */
-    property Component label: Text {
-        text: control.text
-        renderType: Text.NativeRendering
-        verticalAlignment: Text.AlignVCenter
-        color: __syspal.text
+    property Component label: Item {
+        implicitWidth: text.implicitWidth + 2
+        implicitHeight: text.implicitHeight
+        Rectangle {
+            anchors.fill: text
+            anchors.margins: -1
+            anchors.leftMargin: -3
+            anchors.rightMargin: -3
+            visible: control.activeFocus
+            height: 6
+            radius: 3
+            color: "#224f9fef"
+            border.color: "#47b"
+            opacity: 0.6
+        }
+        Text {
+            id: text
+            text: control.text
+            anchors.centerIn: parent
+            color: __syspal.text
+            renderType: Text.NativeRendering
+        }
     }
 
     /*! The background under indicator and label. */
     property Component background
 
     /*! The spacing between indicator and label. */
-    property int spacing: 4
+    property int spacing: Math.round(TextSingleton.implicitHeight/4)
 
     /*! This defines the indicator button.  */
     property Component indicator: Rectangle {
-        width: 17
-        height: 17
-        color: "white"
+        width:  Math.round(TextSingleton.implicitHeight)
+        height: width
+        gradient: Gradient {
+            GradientStop {color: "#eee" ; position: 0}
+            GradientStop {color: control.pressed ? "#eee" : "#fff" ; position: 0.4}
+            GradientStop {color: "#fff" ; position: 1}
+        }
         border.color: control.activeFocus ? "#16c" : "gray"
         antialiasing: true
         radius: height/2
-
         Rectangle {
             anchors.centerIn: parent
-            visible: control.checked
-            width: 9
-            height: 9
-            color: "#666"
+            width: Math.round(parent.width * 0.5)
+            height: width
+            gradient: Gradient {
+                GradientStop {color: "#999" ; position: 0}
+                GradientStop {color: "#555" ; position: 1}
+            }
             border.color: "#222"
             antialiasing: true
             radius: height/2
-            opacity: control.enabled ? 1 : 0.5
+            Behavior on opacity {NumberAnimation {duration: 80}}
+            opacity: control.checked ? control.enabled ? 1 : 0.5 : 0
         }
     }
 
diff --git a/src/controls/Styles/Base/ScrollViewStyle.qml b/src/controls/Styles/Base/ScrollViewStyle.qml
index 2a0aa137..a7dbcc52 100644
--- a/src/controls/Styles/Base/ScrollViewStyle.qml
+++ b/src/controls/Styles/Base/ScrollViewStyle.qml
@@ -113,8 +113,8 @@ Style {
     property Component scrollBarBackground: Item {
         property bool sticky: false
         property bool hovered: styleData.hovered
-        implicitWidth: 16
-        implicitHeight: 16
+        implicitWidth: Math.round(TextSingleton.implicitHeight)
+        implicitHeight: Math.round(TextSingleton.implicitHeight)
         clip: true
         opacity: transientScrollBars ? 0.5 : 1.0
         visible: !transientScrollBars || sticky
@@ -146,8 +146,8 @@ Style {
     property Component handle: Item {
         property bool sticky: false
         property bool hovered: __activeControl !== "none"
-        implicitWidth: img.implicitWidth
-        implicitHeight: img.implicitHeight
+        implicitWidth: Math.round(TextSingleton.implicitHeight) + 1
+        implicitHeight: Math.round(TextSingleton.implicitHeight) + 1
         BorderImage {
             id: img
             opacity: styleData.pressed && !transientScrollBars ? 0.5 : styleData.hovered ? 1 : 0.8
@@ -161,8 +161,8 @@ Style {
             anchors.bottom: parent.bottom
             anchors.right: parent.right
             anchors.left: styleData.horizontal ? parent.left : undefined
-            width: !styleData.horizontal && transientScrollBars ? sticky ? 13 : 10 : img.implicitWidth
-            height: styleData.horizontal && transientScrollBars ? sticky ? 13 : 10 : img.implicitHeight
+            width: !styleData.horizontal && transientScrollBars ? sticky ? 13 : 10 : parent.width
+            height: styleData.horizontal && transientScrollBars ? sticky ? 13 : 10 : parent.height
             Behavior on width { enabled: !styleData.horizontal && transientScrollBars; NumberAnimation { duration: 100 } }
             Behavior on height { enabled: styleData.horizontal && transientScrollBars; NumberAnimation { duration: 100 } }
         }
@@ -183,8 +183,8 @@ Style {
     */
     property Component incrementControl: Rectangle {
         visible: !transientScrollBars
-        implicitWidth: transientScrollBars ? 0 : 16
-        implicitHeight: transientScrollBars ? 0 : 16
+        implicitWidth: transientScrollBars ? 0 : Math.round(TextSingleton.implicitHeight)
+        implicitHeight: transientScrollBars ? 0 : Math.round(TextSingleton.implicitHeight)
         Rectangle {
             anchors.fill: parent
             anchors.bottomMargin: -1
@@ -199,7 +199,7 @@ Style {
             Image {
                 source: styleData.horizontal ? "images/arrow-right.png" : "images/arrow-down.png"
                 anchors.centerIn: parent
-                opacity: control.enabled ? 0.7 : 0.5
+                opacity: control.enabled ? 0.6 : 0.5
             }
             gradient: Gradient {
                 GradientStop {color: styleData.pressed ? "lightgray" : "white" ; position: 0}
@@ -221,8 +221,8 @@ Style {
     */
     property Component decrementControl: Rectangle {
         visible: !transientScrollBars
-        implicitWidth: transientScrollBars ? 0 : 16
-        implicitHeight: transientScrollBars ? 0 : 16
+        implicitWidth: transientScrollBars ? 0 : Math.round(TextSingleton.implicitHeight)
+        implicitHeight: transientScrollBars ? 0 : Math.round(TextSingleton.implicitHeight)
         Rectangle {
             anchors.fill: parent
             anchors.topMargin: styleData.horizontal ? 0 : -1
@@ -241,7 +241,7 @@ Style {
                 anchors.centerIn: parent
                 anchors.verticalCenterOffset: styleData.horizontal ? 0 : -1
                 anchors.horizontalCenterOffset: styleData.horizontal ? -1 : 0
-                opacity: control.enabled ? 0.7 : 0.5
+                opacity: control.enabled ? 0.6 : 0.5
             }
             gradient: Gradient {
                 GradientStop {color: styleData.pressed ? "lightgray" : "white" ; position: 0}
diff --git a/src/controls/Styles/Base/SliderStyle.qml b/src/controls/Styles/Base/SliderStyle.qml
index 661f70c0..a62230bc 100644
--- a/src/controls/Styles/Base/SliderStyle.qml
+++ b/src/controls/Styles/Base/SliderStyle.qml
@@ -95,54 +95,75 @@ Style {
     /*! This property holds the item for the slider handle.
         You can access the slider through the \c control property
     */
-    property Component handle: Item {
-        implicitWidth:  Math.round(implicitHeight * 1.1)
-        implicitHeight: TextSingleton.implicitHeight
+    property Component handle: Item{
+            implicitWidth:  implicitHeight
+            implicitHeight: TextSingleton.implicitHeight * 1.2
 
-        BorderImage {
-            anchors.fill: parent
-            anchors.margins: -1
-            source: "images/slider-handle.png"
-            border.top: 4
-            border.bottom: 4
-            border.left: 4
-            border.right: 4
-            Rectangle {
+            FastGlow {
+                source: handle
                 anchors.fill: parent
-                anchors.margins: 2
-                radius: 2
-                color: "white"
-                opacity: control.hovered || control.activeFocus ? 0.2 : 0
-                Behavior on opacity {NumberAnimation{ duration: 100 }}
+                anchors.bottomMargin: -1
+                anchors.topMargin: 1
+                smooth: true
+                color: "#11000000"
+                spread: 0.8
+                transparentBorder: true
+                blur: 0.1
+
             }
-            BorderImage {
+            Rectangle {
+                id: handle
                 anchors.fill: parent
-                source: "images/focusframe.png"
-                opacity: control.activeFocus ? 1 : 0
-                border.left: 4
-                border.right: 4
-                border.top: 4
-                border.bottom: 4
+
+                radius: width/2
+                gradient: Gradient {
+                    GradientStop { color: control.pressed ? "#e0e0e0" : "#fff" ; position: 1 }
+                    GradientStop { color: "#eee" ; position: 0 }
+                }
+                Rectangle {
+                    anchors.fill: parent
+                    anchors.margins: 1
+                    radius: width/2
+                    border.color: "#99ffffff"
+                    color: control.activeFocus ? "#224f7fbf" : "transparent"
+                }
+                border.color: control.activeFocus ? "#47b" : "#777"
             }
-        }
-    }
 
+    }
     /*! This property holds the background groove of the slider.
 
         You can access the handle position through the \c styleData.handlePosition property.
     */
     property Component groove: Item {
+        property color fillColor: "#49d"
         anchors.verticalCenter: parent.verticalCenter
-        implicitWidth: 100
-        implicitHeight: 8
-        BorderImage {
+        implicitWidth: Math.round(TextSingleton.implicitHeight * 4.5)
+        implicitHeight: Math.max(6, Math.round(TextSingleton.implicitHeight * 0.3))
+        Rectangle {
+            radius: height/2
             anchors.fill: parent
-            source: "images/slider-groove.png"
-            opacity: 0.8
-            border.top: 3
-            border.bottom: 3
-            border.left: 6
-            border.right: 6
+            border.width: 1
+            border.color: "#888"
+            gradient: Gradient {
+                GradientStop { color: "#bbb" ; position: 0 }
+                GradientStop { color: "#ccc" ; position: 0.6 }
+                GradientStop { color: "#ccc" ; position: 1 }
+            }
+        }
+        Item {
+            clip: true
+            width: styleData.handlePosition
+            height: parent.height
+            Rectangle {
+                anchors.fill: parent
+                border.color: Qt.darker(fillColor, 1.2)
+                radius: height/2
+                gradient: Gradient {
+                    GradientStop {color: Qt.lighter(fillColor, 1.3)  ; position: 0}
+                    GradientStop {color: fillColor ; position: 1.4}
+                }
+            }
         }
     }
 
@@ -194,7 +215,7 @@ Style {
                 x: padding.left
                 sourceComponent: groove
                 width: (horizontal ? parent.width : parent.height) - padding.left - padding.right
-                y:  padding.top +  (Math.round(horizontal ? parent.height : parent.width - padding.top - padding.bottom) - grooveLoader.item.height)/2
+                y:  Math.round(padding.top + (Math.round(horizontal ? parent.height : parent.width - padding.top - padding.bottom) - grooveLoader.item.height)/2)
             }
             Loader {
                 id: tickMarkLoader
diff --git a/src/controls/Styles/Base/SpinBoxStyle.qml b/src/controls/Styles/Base/SpinBoxStyle.qml
index 5c04fd32..9f1b565d 100644
--- a/src/controls/Styles/Base/SpinBoxStyle.qml
+++ b/src/controls/Styles/Base/SpinBoxStyle.qml
@@ -76,7 +76,7 @@ Style {
     }
 
     /*! The content margins of the text field. */
-    padding { top: 1 ; left: 5 ; right: 18 ; bottom: 0 }
+    padding { top: 1 ; left: Math.round(TextSingleton.implicitHeight/2) ; right: Math.round(TextSingleton.implicitHeight) ; bottom: 0 }
 
     /*! \qmlproperty enumeration horizontalAlignment
 
@@ -119,49 +119,46 @@ Style {
 
     /*! The button used to increment the value. */
     property Component incrementControl: Item {
-        implicitWidth: 18
+        implicitWidth: padding.right
         Image {
             source: "images/arrow-up.png"
             anchors.centerIn: parent
             anchors.verticalCenterOffset: 1
-            opacity: control.enabled ? 0.7 : 0.5
+            opacity: control.enabled ? (styleData.upPressed ? 1 : 0.6) : 0.5
         }
     }
 
     /*! The button used to decrement the value. */
     property Component decrementControl: Item {
-        implicitWidth: 18
+        implicitWidth: padding.right
         Image {
             source: "images/arrow-down.png"
             anchors.centerIn: parent
             anchors.verticalCenterOffset: -2
-            opacity: control.enabled ? 0.7 : 0.5
+            opacity: control.enabled ? (styleData.downPressed ? 1 : 0.6) : 0.5
         }
     }
 
     /*! The background of the SpinBox. */
     property Component background: Item {
-        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.1))
+        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.2))
         implicitWidth: styleData.contentWidth + 26
-        BorderImage {
-            id: image
+        Rectangle {
             anchors.fill: parent
-            anchors.margins: -1
-            source: "images/editbox.png"
-            border.left: 4
-            border.right: 4
-            border.top: 4
-            border.bottom: 4
             anchors.bottomMargin: -1
-            BorderImage {
-                anchors.fill: parent
-                source: "images/focusframe.png"
-                visible: control.activeFocus
-                border.left: 4
-                border.right: 4
-                border.top: 4
-                border.bottom: 4
+            color: "#44ffffff"
+            radius: baserect.radius
+        }
+        Rectangle {
+            id: baserect
+            gradient: Gradient {
+                GradientStop {color: "#eee" ; position: 0}
+                GradientStop {color: "#fff" ; position: 0.1}
+                GradientStop {color: "#fff" ; position: 1}
             }
+            radius: TextSingleton.implicitHeight * 0.16
+            anchors.fill: parent
+            border.color: control.activeFocus ? "#47b" : "#999"
         }
     }
 
diff --git a/src/controls/Styles/Base/TabViewStyle.qml b/src/controls/Styles/Base/TabViewStyle.qml
index e4d9c010..430dd02f 100644
--- a/src/controls/Styles/Base/TabViewStyle.qml
+++ b/src/controls/Styles/Base/TabViewStyle.qml
@@ -156,20 +156,22 @@ Style {
                 border.right: 6
                 anchors.topMargin: styleData.selected ? 0 : 1
             }
-            BorderImage {
-                anchors.fill: parent
-                anchors.margins: -1
-                source: "images/focusframe.png"
-                visible: styleData.activeFocus && styleData.selected
-                border.left: 4
-                border.right: 4
-                border.top: 4
-                border.bottom: 4
-            }
+        }
+        Rectangle {
+            anchors.fill: textitem
+            anchors.margins: -1
+            anchors.leftMargin: -3
+            anchors.rightMargin: -3
+            visible: (styleData.activeFocus && styleData.selected)
+            height: 6
+            radius: 3
+            color: "#224f9fef"
+            border.color: "#47b"
         }
         Text {
             id: textitem
             anchors.centerIn: parent
+            anchors.alignWhenCentered: true
             text: styleData.title
             renderType: Text.NativeRendering
             scale: control.tabPosition === Qt.TopEdge ? 1 : -1
diff --git a/src/controls/Styles/Base/TableViewStyle.qml b/src/controls/Styles/Base/TableViewStyle.qml
index 3397a81a..512b0cfe 100644
--- a/src/controls/Styles/Base/TableViewStyle.qml
+++ b/src/controls/Styles/Base/TableViewStyle.qml
@@ -99,6 +99,7 @@ ScrollViewStyle {
             anchors.top: parent.top
             anchors.bottom: parent.bottom
             anchors.bottomMargin: 1
+            anchors.topMargin: 1
             width: 1
             color: "#ccc"
         }
diff --git a/src/controls/Styles/Base/TextFieldStyle.qml b/src/controls/Styles/Base/TextFieldStyle.qml
index e05ae82c..8b4494d1 100644
--- a/src/controls/Styles/Base/TextFieldStyle.qml
+++ b/src/controls/Styles/Base/TextFieldStyle.qml
@@ -77,7 +77,7 @@ Style {
     readonly property TextField control: __control
 
     /*! The content margins of the text field. */
-    padding { top: 4 ; left: 6 ; right: 6 ; bottom:4 }
+    padding { top: 4 ; left: TextSingleton.implicitHeight/3 ; right: TextSingleton.implicitHeight/3 ; bottom:4 }
 
     /*! The current font. */
     property font font
@@ -113,25 +113,24 @@ Style {
 
     /*! The background of the text field. */
     property Component background: Item {
-        implicitWidth: 100
-        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.1))
-        BorderImage {
+        implicitWidth: Math.round(TextSingleton.implicitHeight * 8)
+        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.2))
+        Rectangle {
             anchors.fill: parent
-            anchors.margins: -1
-            source: "images/editbox.png"
-            border.left: 4
-            border.right: 4
-            border.top: 4
-            border.bottom: 4
-            BorderImage {
-                anchors.fill: parent
-                source: "images/focusframe.png"
-                visible: control.activeFocus
-                border.left: 4
-                border.right: 4
-                border.top: 4
-                border.bottom: 4
+            anchors.bottomMargin: -1
+            color: "#44ffffff"
+            radius: baserect.radius
+        }
+        Rectangle {
+            id: baserect
+            gradient: Gradient {
+                GradientStop {color: "#e0e0e0" ; position: 0}
+                GradientStop {color: "#fff" ; position: 0.1}
+                GradientStop {color: "#fff" ; position: 1}
             }
+            radius: TextSingleton.implicitHeight * 0.16
+            anchors.fill: parent
+            border.color: control.activeFocus ? "#47b" : "#999"
         }
     }
 
diff --git a/src/controls/Styles/Base/images/check.png b/src/controls/Styles/Base/images/check.png
new file mode 100644
index 00000000..1774880a
--- /dev/null
+++ b/src/controls/Styles/Base/images/check.png
diff --git a/src/controls/Styles/Base/images/check@2x.png b/src/controls/Styles/Base/images/check@2x.png
new file mode 100644
index 00000000..65727caa
--- /dev/null
+++ b/src/controls/Styles/Base/images/check@2x.png
diff --git a/src/controls/Styles/Desktop/ComboBoxStyle.qml b/src/controls/Styles/Desktop/ComboBoxStyle.qml
index fd4b6cfe..b36b4c1d 100644
--- a/src/controls/Styles/Desktop/ComboBoxStyle.qml
+++ b/src/controls/Styles/Desktop/ComboBoxStyle.qml
@@ -46,6 +46,7 @@ import "." as Desktop
 
 Style {
     readonly property ComboBox control: __control
+    property int drowDownButtonWidth: 24
     property Component panel: Item {
         property bool popup: !!styleItem.styleHint("comboboxpopup")
 
diff --git a/src/controls/Styles/styles.pri b/src/controls/Styles/styles.pri
index 4c57944c..2079e79e 100644
--- a/src/controls/Styles/styles.pri
+++ b/src/controls/Styles/styles.pri
@@ -75,4 +75,3 @@ STYLES_QML_FILES += \
 STYLES_QML_FILES += $$PWD/qmldir
 
 QML_FILES += $$STYLES_QML_FILES
-