[controls] Add Qt Quick Controls 2 icon support to Button component

 - Add example usage to Sheets app
 - Use icon.name for icons in Climate
 - scalability fixes in Climate

Task-number: QTAUTO-881
Change-Id: Ia5abdbded06a111eaefe452bd93713cd895cc160
Reviewed-by: Daniel d'Andrada <daniel.dandrada@luxoft.com>
Reviewed-by: Bramastyo Harimukti Santoso <bramastyo.harimukti.santoso@pelagicore.com>

35 files changed, 235 insertions, 108 deletions

diff --git a/dev/apps/com.pelagicore.sheets/components/ButtonPanel.qml b/dev/apps/com.pelagicore.sheets/components/ButtonPanel.qml
index d96084b5..db0d3487 100644
--- a/dev/apps/com.pelagicore.sheets/components/ButtonPanel.qml
+++ b/dev/apps/com.pelagicore.sheets/components/ButtonPanel.qml
@@ -39,10 +39,16 @@ import com.pelagicore.styles.neptune 3.0
 Item {
     id: root
 
+    readonly property int largeButtonHeight: 100
+    readonly property int smallButtonHeight: 52
+    readonly property int largeButtonPadding: 58
+    readonly property int smallButtonPadding: 26
+
     ColumnLayout {
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.top: parent.top
         anchors.topMargin: Style.vspan(1)
+        spacing: Style.vspan(.5)
         RowLayout {
             spacing: Style.hspan(0.3)
 
@@ -69,6 +75,114 @@ Item {
                 checkable: true
             }
         }
+        RowLayout {
+            spacing: Style.hspan(0.3)
+
+            Button {
+                implicitHeight: smallButtonHeight
+                implicitWidth: Style.hspan(7)
+                leftPadding: smallButtonPadding
+                rightPadding: smallButtonPadding
+                font.pixelSize: NeptuneStyle.fontSizeS
+                text: "Small button"
+            }
+            Button {
+                implicitHeight: smallButtonHeight
+                implicitWidth: Style.hspan(7)
+                leftPadding: smallButtonPadding
+                rightPadding: smallButtonPadding
+                font.pixelSize: NeptuneStyle.fontSizeS
+                text: "Small button"
+                icon.name: "ic-steering-wheel-heat_OFF"
+            }
+            Button {
+                implicitHeight: smallButtonHeight
+                implicitWidth: Style.hspan(7)
+                leftPadding: smallButtonPadding
+                rightPadding: smallButtonPadding
+                font.pixelSize: NeptuneStyle.fontSizeS
+                text: "Checkable"
+                icon.name: checked ? "ic-steering-wheel-heat_ON" : "ic-steering-wheel-heat_OFF"
+                checkable: true
+            }
+        }
+        RowLayout {
+            spacing: Style.hspan(0.3)
+            Button {
+                text: "Large button"
+                implicitHeight: largeButtonHeight
+                implicitWidth: Style.hspan(7)
+                leftPadding: largeButtonPadding
+                rightPadding: largeButtonPadding
+                font.pixelSize: NeptuneStyle.fontSizeS
+
+            }
+            Button {
+                implicitHeight: largeButtonHeight
+                implicitWidth: Style.hspan(7)
+                leftPadding: largeButtonPadding
+                rightPadding: largeButtonPadding
+                font.pixelSize: NeptuneStyle.fontSizeS
+                text: "Large button"
+                icon.name: "ic-steering-wheel-heat_OFF"
+            }
+            Button {
+                implicitHeight: largeButtonHeight
+                implicitWidth: Style.hspan(7)
+                leftPadding: largeButtonPadding
+                rightPadding: largeButtonPadding
+                font.pixelSize: NeptuneStyle.fontSizeS
+                text: "Checkable"
+                icon.name: checked ? "ic-seat-heat-passenger_ON" : "ic-seat-heat-passenger_OFF"
+                checkable: true
+            }
+        }
+        RowLayout {
+            spacing: Style.hspan(0.3)
+
+            Button {
+                implicitHeight: largeButtonHeight
+                implicitWidth: 160
+                icon.width: 40
+                icon.height: 40
+                customBackgroundColor: NeptuneStyle.clusterMarksColor
+                icon.name: "ic-seat-heat-passenger_OFF"
+                icon.color: "white"
+            }
+            Button {
+                implicitHeight: largeButtonHeight
+                implicitWidth: 160
+                icon.width: 35
+                icon.height: 35
+                customBackgroundColor: NeptuneStyle.highlightedTextColor
+                icon.name: "ic-seat-heat-passenger_OFF"
+                text: "text"
+                font.pixelSize: NeptuneStyle.fontSizeS
+                display: AbstractButton.TextUnderIcon
+                spacing: 0
+            }
+        }
+        RowLayout {
+            spacing: Style.hspan(0.3)
+            Button {
+                implicitHeight: largeButtonHeight
+                implicitWidth: 500
+                leftPadding: largeButtonPadding
+                rightPadding: largeButtonPadding
+                text: "Wide button"
+                font.pixelSize: NeptuneStyle.fontSizeS
+                icon.name: "ic-steering-wheel-heat_OFF"
+            }
+            Button {
+                implicitHeight: largeButtonHeight
+                implicitWidth: Style.hspan(7)
+                leftPadding: largeButtonPadding
+                rightPadding: largeButtonPadding
+                font.pixelSize: NeptuneStyle.fontSizeS
+                text: "Elide too long text"
+                icon.name: "ic-steering-wheel-heat_OFF"
+            }
+        }
     }
 }
 
diff --git a/imports/assets/icons/ic-front-defrost_OFF.png b/imports/assets/icons/neptune/climate/ic-front-defrost_OFF.png
index bf0d9a4d..bf0d9a4d 100644
--- a/imports/assets/icons/ic-front-defrost_OFF.png
+++ b/imports/assets/icons/neptune/climate/ic-front-defrost_OFF.png
diff --git a/imports/assets/icons/ic-front-defrost_ON.png b/imports/assets/icons/neptune/climate/ic-front-defrost_ON.png
index d9b4b9f4..d9b4b9f4 100644
--- a/imports/assets/icons/ic-front-defrost_ON.png
+++ b/imports/assets/icons/neptune/climate/ic-front-defrost_ON.png
diff --git a/imports/assets/icons/ic-link_OFF-dark.png b/imports/assets/icons/neptune/climate/ic-link_OFF-dark.png
index 392cc6eb..392cc6eb 100644
--- a/imports/assets/icons/ic-link_OFF-dark.png
+++ b/imports/assets/icons/neptune/climate/ic-link_OFF-dark.png
diff --git a/imports/assets/icons/ic-link_OFF.png b/imports/assets/icons/neptune/climate/ic-link_OFF.png
index 871a0f27..871a0f27 100644
--- a/imports/assets/icons/ic-link_OFF.png
+++ b/imports/assets/icons/neptune/climate/ic-link_OFF.png
diff --git a/imports/assets/icons/ic-link_ON-dark.png b/imports/assets/icons/neptune/climate/ic-link_ON-dark.png
index 2eff32ba..2eff32ba 100644
--- a/imports/assets/icons/ic-link_ON-dark.png
+++ b/imports/assets/icons/neptune/climate/ic-link_ON-dark.png
diff --git a/imports/assets/icons/ic-link_ON.png b/imports/assets/icons/neptune/climate/ic-link_ON.png
index 2eff32ba..2eff32ba 100644
--- a/imports/assets/icons/ic-link_ON.png
+++ b/imports/assets/icons/neptune/climate/ic-link_ON.png
diff --git a/imports/assets/icons/ic-rear-defrost_OFF.png b/imports/assets/icons/neptune/climate/ic-rear-defrost_OFF.png
index a7601567..a7601567 100644
--- a/imports/assets/icons/ic-rear-defrost_OFF.png
+++ b/imports/assets/icons/neptune/climate/ic-rear-defrost_OFF.png
diff --git a/imports/assets/icons/ic-rear-defrost_ON.png b/imports/assets/icons/neptune/climate/ic-rear-defrost_ON.png
index 5186a41d..5186a41d 100644
--- a/imports/assets/icons/ic-rear-defrost_ON.png
+++ b/imports/assets/icons/neptune/climate/ic-rear-defrost_ON.png
diff --git a/imports/assets/icons/ic-recirculation_OFF.png b/imports/assets/icons/neptune/climate/ic-recirculation_OFF.png
index 2521482d..2521482d 100644
--- a/imports/assets/icons/ic-recirculation_OFF.png
+++ b/imports/assets/icons/neptune/climate/ic-recirculation_OFF.png
diff --git a/imports/assets/icons/ic-recirculation_ON.png b/imports/assets/icons/neptune/climate/ic-recirculation_ON.png
index 597ceb67..597ceb67 100644
--- a/imports/assets/icons/ic-recirculation_ON.png
+++ b/imports/assets/icons/neptune/climate/ic-recirculation_ON.png
diff --git a/imports/assets/icons/ic-seat-heat-driver_OFF.png b/imports/assets/icons/neptune/climate/ic-seat-heat-driver_OFF.png
index 68dffe66..68dffe66 100644
--- a/imports/assets/icons/ic-seat-heat-driver_OFF.png
+++ b/imports/assets/icons/neptune/climate/ic-seat-heat-driver_OFF.png
diff --git a/imports/assets/icons/ic-seat-heat-driver_ON.png b/imports/assets/icons/neptune/climate/ic-seat-heat-driver_ON.png
index 957fd3fa..957fd3fa 100644
--- a/imports/assets/icons/ic-seat-heat-driver_ON.png
+++ b/imports/assets/icons/neptune/climate/ic-seat-heat-driver_ON.png
diff --git a/imports/assets/icons/ic-seat-heat-passenger_OFF.png b/imports/assets/icons/neptune/climate/ic-seat-heat-passenger_OFF.png
index 9946f8a0..9946f8a0 100644
--- a/imports/assets/icons/ic-seat-heat-passenger_OFF.png
+++ b/imports/assets/icons/neptune/climate/ic-seat-heat-passenger_OFF.png
diff --git a/imports/assets/icons/ic-seat-heat-passenger_ON.png b/imports/assets/icons/neptune/climate/ic-seat-heat-passenger_ON.png
index 61c93b51..61c93b51 100644
--- a/imports/assets/icons/ic-seat-heat-passenger_ON.png
+++ b/imports/assets/icons/neptune/climate/ic-seat-heat-passenger_ON.png
diff --git a/imports/assets/icons/ic-seat-heat_OFF.png b/imports/assets/icons/neptune/climate/ic-seat-heat_OFF.png
index 65310837..65310837 100644
--- a/imports/assets/icons/ic-seat-heat_OFF.png
+++ b/imports/assets/icons/neptune/climate/ic-seat-heat_OFF.png
diff --git a/imports/assets/icons/ic-seat-heat_ON.png b/imports/assets/icons/neptune/climate/ic-seat-heat_ON.png
index 340be71a..340be71a 100644
--- a/imports/assets/icons/ic-seat-heat_ON.png
+++ b/imports/assets/icons/neptune/climate/ic-seat-heat_ON.png
diff --git a/imports/assets/icons/ic-steering-wheel-heat_OFF.png b/imports/assets/icons/neptune/climate/ic-steering-wheel-heat_OFF.png
index 660781eb..660781eb 100644
--- a/imports/assets/icons/ic-steering-wheel-heat_OFF.png
+++ b/imports/assets/icons/neptune/climate/ic-steering-wheel-heat_OFF.png
diff --git a/imports/assets/icons/ic-steering-wheel-heat_ON.png b/imports/assets/icons/neptune/climate/ic-steering-wheel-heat_ON.png
index cc63ae09..cc63ae09 100644
--- a/imports/assets/icons/ic-steering-wheel-heat_ON.png
+++ b/imports/assets/icons/neptune/climate/ic-steering-wheel-heat_ON.png
diff --git a/imports/assets/icons/ic-temperature-minus.png b/imports/assets/icons/neptune/climate/ic-temperature-minus.png
index 8f671a3f..8f671a3f 100644
--- a/imports/assets/icons/ic-temperature-minus.png
+++ b/imports/assets/icons/neptune/climate/ic-temperature-minus.png
diff --git a/imports/assets/icons/ic-temperature-plus.png b/imports/assets/icons/neptune/climate/ic-temperature-plus.png
index 3b187128..3b187128 100644
--- a/imports/assets/icons/ic-temperature-plus.png
+++ b/imports/assets/icons/neptune/climate/ic-temperature-plus.png
diff --git a/imports/assets/icons/neptune/index.theme b/imports/assets/icons/neptune/index.theme
new file mode 100644
index 00000000..189a90b5
--- /dev/null
+++ b/imports/assets/icons/neptune/index.theme
@@ -0,0 +1,10 @@
+[Icon Theme]
+Name=neptune
+Comment=Neptune Icon Theme
+
+Directories=climate
+
+[climate]
+Size=32
+Type=Fixed
+
diff --git a/plugins/styles/neptune/neptune.pro b/plugins/styles/neptune/neptune.pro
index 7a353b83..5e0bc727 100644
--- a/plugins/styles/neptune/neptune.pro
+++ b/plugins/styles/neptune/neptune.pro
@@ -7,6 +7,8 @@ CONFIG += qt plugin c++11 no_private_qt_headers_warning
 uri = com.pelagicore.styles.neptune
 load(qmlplugin)
 
+DEFINES += "NEPTUNE_ICONS_PATH=$$INSTALL_PREFIX/neptune3/imports/assets/icons"
+
 SOURCES += \
     neptunestyle.cpp \
     neptunestyleplugin.cpp \
diff --git a/plugins/styles/neptune/neptunetheme.cpp b/plugins/styles/neptune/neptunetheme.cpp
index d57683ac..20a256e4 100644
--- a/plugins/styles/neptune/neptunetheme.cpp
+++ b/plugins/styles/neptune/neptunetheme.cpp
@@ -34,6 +34,11 @@
 #include <QDebug>
 #include <QtGui/QFont>
 #include <QtGui/QFontInfo>
+#include <QtGui/QIcon>
+
+// code to transform a macro into a string literal
+#define QUOTE(name) #name
+#define STR(macro) QUOTE(macro)
 
 Q_LOGGING_CATEGORY(neptuneTheme, "neptune.theme")
 
@@ -57,3 +62,13 @@ const QFont *NeptuneTheme::font(QPlatformTheme::Font type) const
         return &m_systemFont;
     }
 }
+
+QVariant NeptuneTheme::themeHint(QPlatformTheme::ThemeHint hint) const
+{
+    if (hint == SystemIconThemeName || hint == StyleNames) {
+        return QStringLiteral("neptune");
+    } else if (hint == IconThemeSearchPaths) {
+        return STR(NEPTUNE_ICONS_PATH);
+    }
+    return QQuickProxyTheme::themeHint(hint);
+}
diff --git a/plugins/styles/neptune/neptunetheme.h b/plugins/styles/neptune/neptunetheme.h
index b19bf41b..0890697d 100644
--- a/plugins/styles/neptune/neptunetheme.h
+++ b/plugins/styles/neptune/neptunetheme.h
@@ -43,6 +43,7 @@ public:
     NeptuneTheme(QPlatformTheme *theme = nullptr);
 
     const QFont *font(QPlatformTheme::Font type = SystemFont) const override;
+    QVariant themeHint(QPlatformTheme::ThemeHint hint) const override;
 private:
     QFont m_systemFont;
 };
diff --git a/src/neptune3-ui/main.cpp b/src/neptune3-ui/main.cpp
index 1052919e..f535f923 100644
--- a/src/neptune3-ui/main.cpp
+++ b/src/neptune3-ui/main.cpp
@@ -97,13 +97,6 @@ Q_DECL_EXPORT int main(int argc, char *argv[])
             a.installTranslator(&qtTranslator);
         }
 
-        QIcon::setThemeName("neptune");
-        {
-            QStringList searchPaths = QIcon::themeSearchPaths();
-            searchPaths.prepend(STR(NEPTUNE_ICONS_PATH));
-            QIcon::setThemeSearchPaths(searchPaths);
-        }
-
         DefaultConfiguration cfg(QStringList(qSL("am-config.yaml")), QString());
         cfg.parse();
         a.setup(&cfg, deploymentWarnings);
diff --git a/src/neptune3-ui/neptune3-ui.pro b/src/neptune3-ui/neptune3-ui.pro
index 52a9359d..e357f27c 100644
--- a/src/neptune3-ui/neptune3-ui.pro
+++ b/src/neptune3-ui/neptune3-ui.pro
@@ -24,7 +24,5 @@ SOURCES = main.cpp
 
 DESTDIR = $$OUT_PWD/../../
 
-DEFINES += "NEPTUNE_ICONS_PATH=$$INSTALL_PREFIX/neptune3/imports/assets/icons"
-
 target.path = $$INSTALL_PREFIX/neptune3
 INSTALLS += target
diff --git a/styles/neptune/Button.qml b/styles/neptune/Button.qml
index 0ff618ec..6cb60ae4 100644
--- a/styles/neptune/Button.qml
+++ b/styles/neptune/Button.qml
@@ -29,13 +29,19 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.6
+import QtQuick 2.10
 import QtQuick.Layouts 1.3
-import QtQuick.Templates 2.2 as T
+import QtQuick.Templates 2.3 as T
+import QtQuick.Controls 2.3
+import QtQuick.Controls.impl 2.3
+
 import com.pelagicore.styles.neptune 3.0
 
 T.Button {
     id: control
+
+    property string customBackgroundColor: ""
+
     implicitWidth: NeptuneStyle.cellWidth + leftPadding + rightPadding
     implicitHeight: NeptuneStyle.cellHeight + leftPadding + rightPadding
 
@@ -44,47 +50,52 @@ T.Button {
     rightPadding: padding + NeptuneStyle.dp(2)
     font.pixelSize: NeptuneStyle.fontSizeM
     font.weight: Font.Light
+    spacing: NeptuneStyle.dp(22)
+
+    icon.color: NeptuneStyle.primaryTextColor
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
 
-    contentItem: Text {
-        Layout.fillHeight: true
-        Layout.fillWidth: true
+        anchors.verticalCenter: control.verticalCenter
+        icon: control.icon
         text: control.text
         font: control.font
-        opacity: enabled || control.highlighted || control.checked ?
-                     NeptuneStyle.fontOpacityHigh : NeptuneStyle.fontOpacityLow
-
         color: NeptuneStyle.primaryTextColor
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-        elide: Text.ElideRight
-        wrapMode: Text.WordWrap
+        opacity: control.enabled ? 1.0 : 0.3
     }
 
     background: Rectangle {
         border.width: !control.enabled && !control.checked ? NeptuneStyle.dp(2) : 0
         border.color: NeptuneStyle.contrastColor
         visible: !control.flat
-
         color: {
-            if (control.checked) {
+            if (customBackgroundColor !== "") {
+                if (control.pressed) {
+                    return Qt.darker(customBackgroundColor, (1 / 0.94))
+                }
+                return customBackgroundColor;
+            } else if (control.checked) {
                 return NeptuneStyle.accentColor;
             } else if (!control.enabled) {
-                return "transparent"
+                return "transparent";
             } else {
                 return NeptuneStyle.contrastColor;
             }
         }
-
         opacity: {
-            if (control.pressed && !control.checked) {
+            if (control.pressed && !control.checked && customBackgroundColor === "") {
                 return 0.12;
-            } else if (control.checked) {
+            } else if (control.checked || customBackgroundColor !== "") {
                 return 1.0;
             } else {
                 return 0.06;
             }
         }
         Behavior on opacity { NumberAnimation { duration: 200 } }
+        Behavior on color { ColorAnimation { duration: 200 } }
 
         radius: width / 2
     }
diff --git a/sysui/climate/ClimateAirFlow.qml b/sysui/climate/ClimateAirFlow.qml
index aac8efd0..1ef0354d 100644
--- a/sysui/climate/ClimateAirFlow.qml
+++ b/sysui/climate/ClimateAirFlow.qml
@@ -40,8 +40,8 @@ import com.pelagicore.styles.neptune 3.0
 Item {
     id: root
 
-    width: Style.hspan(550/45)
-    height: Style.vspan(400/80)
+    width: NeptuneStyle.dp(550)
+    height: NeptuneStyle.dp(400)
 
     property var model
     property bool autoMode: false
@@ -82,7 +82,7 @@ Item {
     Item {
         anchors.centerIn: parent
         width: Math.max(airFlowTop.width, airFlowMiddle.width, airFlowDown.width) + NeptuneStyle.dp(70)
-        height: airFlowTop.height + airFlowMiddle.height + airFlowDown.height - NeptuneStyle.dp(40 + 20)
+        height: airFlowTop.height + airFlowMiddle.height + airFlowDown.height - NeptuneStyle.dp(60)
         Image {
             id: seatImage
             width: NeptuneStyle.dp(sourceSize.width)
diff --git a/sysui/climate/ClimateBar.qml b/sysui/climate/ClimateBar.qml
index 3c995a11..ae677501 100644
--- a/sysui/climate/ClimateBar.qml
+++ b/sysui/climate/ClimateBar.qml
@@ -44,8 +44,8 @@ Item {
     property Item popupParent
     property var model
 
-    property real lateralMargin: Style.hspan(0.6)
-    property real toolWidth: Style.hspan(2)
+    property real lateralMargin: NeptuneStyle.dp(27)
+    property real toolWidth: NeptuneStyle.dp(90)
 
     MouseArea {
         anchors.top: parent.top
@@ -60,8 +60,8 @@ Item {
     RowLayout {
         anchors.centerIn: parent
 
-        height: Style.vspan(1)
-        spacing: Style.hspan(0.2)
+        height: NeptuneStyle.dp(80)
+        spacing: NeptuneStyle.dp(9)
 
         Image {
             anchors.verticalCenter: parent.verticalCenter
@@ -73,8 +73,8 @@ Item {
         }
         Label {
             anchors.verticalCenter: parent.verticalCenter
-            Layout.leftMargin: Style.hspan(.8)
-            Layout.rightMargin: Style.hspan(.8)
+            Layout.leftMargin: NeptuneStyle.dp(36)
+            Layout.rightMargin: NeptuneStyle.dp(36)
             text: root.model ? root.model.leftSeat.valueString : ""
             horizontalAlignment: Text.AlignHCenter
             font.pixelSize: NeptuneStyle.fontSizeXL
@@ -100,8 +100,8 @@ Item {
         }
         Label {
             anchors.verticalCenter: parent.verticalCenter
-            Layout.leftMargin: Style.hspan(.8)
-            Layout.rightMargin: Style.hspan(.8)
+            Layout.leftMargin: NeptuneStyle.dp(36)
+            Layout.rightMargin: NeptuneStyle.dp(36)
             text: root.model ? root.model.rightSeat.valueString : ""
             horizontalAlignment: Text.AlignHCenter
             font.pixelSize: NeptuneStyle.fontSizeXL
diff --git a/sysui/climate/ClimateButton.qml b/sysui/climate/ClimateButton.qml
index 55593d1c..fbcc503a 100644
--- a/sysui/climate/ClimateButton.qml
+++ b/sysui/climate/ClimateButton.qml
@@ -29,9 +29,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.6
-import QtQuick.Controls 2.2
-import QtQuick.Layouts 1.3
+import QtQuick 2.10
+import QtQuick.Controls 2.3
 import utils 1.0
 
 import com.pelagicore.styles.neptune 3.0
@@ -39,34 +38,9 @@ import com.pelagicore.styles.neptune 3.0
 Button {
     id: root
     checkable: true
-
-    width: Style.hspan(156/45)
-    height: Style.vspan(146/80)
-
-    property string icon
-    property int textFontSize: NeptuneStyle.fontSizeXS
-
-    background: null
-
-    contentItem: Item {
-        Column {
-            anchors.centerIn: parent
-            spacing: Style.vspan(0.1)
-            Image {
-                width: NeptuneStyle.dp(sourceSize.width)
-                height: NeptuneStyle.dp(sourceSize.height)
-                anchors.horizontalCenter: parent.horizontalCenter
-                source: Style.symbol(root.icon, NeptuneStyle.theme)
-                fillMode: Image.PreserveAspectFit
-            }
-            Label {
-                anchors.horizontalCenter: parent.horizontalCenter
-                wrapMode: Text.WordWrap
-                text: root.text
-                font.pixelSize: root.textFontSize
-                opacity: root.checked ? NeptuneStyle.fontOpacityHigh : NeptuneStyle.fontOpacityDisabled
-                Behavior on opacity { OpacityAnimator {} }
-            }
-        }
-    }
+    width: NeptuneStyle.dp(156)
+    height: NeptuneStyle.dp(146)
+    font.pixelSize: NeptuneStyle.fontSizeXS
+    flat: true
+    icon.color: checked ? NeptuneStyle.accentDetailColor : NeptuneStyle.primaryTextColor
 }
diff --git a/sysui/climate/ClimateButtonsGrid.qml b/sysui/climate/ClimateButtonsGrid.qml
index d76c937f..16be9731 100644
--- a/sysui/climate/ClimateButtonsGrid.qml
+++ b/sysui/climate/ClimateButtonsGrid.qml
@@ -29,24 +29,27 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.6
+import QtQuick 2.10
 import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.3
 
 import utils 1.0
 
+import com.pelagicore.styles.neptune 3.0
+
 GridLayout {
     id: root
 
     property var model
 
-    width: Style.hspan(448/45)
-    height: Style.vspan(312/80)
+    width: NeptuneStyle.dp(448)
+    height: NeptuneStyle.dp(312)
     columns: 3
     ClimateButton {
         id: rear_defrost
         Layout.fillWidth: true
         Layout.fillHeight: true
-        icon: rear_defrost.checked ? "ic-rear-defrost_ON" : "ic-rear-defrost_OFF"
+        icon.name: checked ? "ic-rear-defrost_ON" : "ic-rear-defrost_OFF"
         checked: model.rearHeat.enabled
         onToggled: model.rearHeat.setEnabled(!model.rearHeat.enabled)
     }
@@ -54,7 +57,7 @@ GridLayout {
         id: front_defrost
         Layout.fillWidth: true
         Layout.fillHeight: true
-        icon: front_defrost.checked ? "ic-front-defrost_ON" : "ic-front-defrost_OFF"
+        icon.name: checked ? "ic-front-defrost_ON" : "ic-front-defrost_OFF"
         checked: model.frontHeat.enabled
         onToggled: model.frontHeat.setEnabled(!model.frontHeat.enabled)
     }
@@ -62,7 +65,7 @@ GridLayout {
         id: recirculation
         Layout.fillWidth: true
         Layout.fillHeight: true
-        icon: recirculation.checked ? "ic-recirculation_ON" : "ic-recirculation_OFF"
+        icon.name: checked ? "ic-recirculation_ON" : "ic-recirculation_OFF"
         checked: model.airQuality.enabled
         onToggled: model.airQuality.setEnabled(!model.airQuality.enabled)
     }
@@ -70,7 +73,8 @@ GridLayout {
         id: seat_heater_driver
         Layout.fillWidth: true
         Layout.fillHeight: true
-        icon: seat_heater_driver.checked ? "ic-seat-heat-driver_ON" : "ic-seat-heat-driver_OFF"
+        icon.name: checked ? "ic-seat-heat-driver_ON" : "ic-seat-heat-driver_OFF"
+        display: AbstractButton.TextUnderIcon
         text: qsTr("DRIVER")
         checked: model.leftSeat.heat
         onToggled: model.leftSeat.setHeat(!model.leftSeat.heat)
@@ -79,7 +83,7 @@ GridLayout {
         id: steering_wheel_heat
         Layout.fillWidth: true
         Layout.fillHeight: true
-        icon: steering_wheel_heat.checked ? "ic-steering-wheel-heat_ON" : "ic-steering-wheel-heat_OFF"
+        icon.name: checked ? "ic-steering-wheel-heat_ON" : "ic-steering-wheel-heat_OFF"
         checked: model.steeringWheelHeat.enabled
         onToggled: model.steeringWheelHeat.setEnabled(!model.steeringWheelHeat.enabled)
     }
@@ -87,7 +91,8 @@ GridLayout {
         id: seat_heater_passenger
         Layout.fillWidth: true
         Layout.fillHeight: true
-        icon: seat_heater_passenger.checked ? "ic-seat-heat-passenger_ON" : "ic-seat-heat-passenger_OFF"
+        icon.name: checked ? "ic-seat-heat-passenger_ON" : "ic-seat-heat-passenger_OFF"
+        display: AbstractButton.TextUnderIcon
         text: qsTr("PASSENGER")
         checked: model.rightSeat.heat
         onToggled: model.rightSeat.setHeat(!model.rightSeat.heat)
diff --git a/sysui/climate/ClimateHeader.qml b/sysui/climate/ClimateHeader.qml
index cce983c0..ea4cf45b 100644
--- a/sysui/climate/ClimateHeader.qml
+++ b/sysui/climate/ClimateHeader.qml
@@ -29,8 +29,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.6
-import QtQuick.Controls 2.2
+import QtQuick 2.10
+import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.3
 
 import com.pelagicore.styles.neptune 3.0
@@ -51,7 +51,7 @@ Item {
 
     Row {
         anchors.centerIn: parent
-        spacing: Style.hspan(0.5)
+        spacing: NeptuneStyle.dp(22)
         Column {
             anchors.verticalCenter: parent.verticalCenter
             ClimateButton {
@@ -59,8 +59,8 @@ Item {
                 height: NeptuneStyle.dp(90)
                 anchors.horizontalCenter: parent.horizontalCenter
                 checkable: false
-                textFontSize: NeptuneStyle.fontSizeXL
-                icon: "ic-temperature-plus"
+                font.pixelSize: NeptuneStyle.fontSizeXL
+                icon.name: "ic-temperature-plus"
                 onClicked: root.driverSeatTemperatureIncreased()
             }
             Label {
@@ -75,8 +75,8 @@ Item {
                 height: NeptuneStyle.dp(90)
                 anchors.horizontalCenter: parent.horizontalCenter
                 checkable: false
-                textFontSize: NeptuneStyle.fontSizeXL
-                icon: "ic-temperature-minus"
+                font.pixelSize: NeptuneStyle.fontSizeXL
+                icon.name: "ic-temperature-minus"
                 onClicked: root.driverSeatTemperatureDecreased()
             }
         }
@@ -84,7 +84,9 @@ Item {
         ClimateButton {
             id: linkTemp
             anchors.verticalCenter: parent.verticalCenter
-            icon: linkTemp.checked ? "ic-link_ON" : "ic-link_OFF"
+            icon.name: checked ? "ic-link_ON" : "ic-link_OFF"
+            icon.width: NeptuneStyle.dp(24)
+            icon.height: NeptuneStyle.dp(24)
             onToggled: root.linkToggled(checked)
         }
 
@@ -95,8 +97,8 @@ Item {
                 height: NeptuneStyle.dp(90)
                 anchors.horizontalCenter: parent.horizontalCenter
                 checkable: false
-                textFontSize: NeptuneStyle.fontSizeXL
-                icon: "ic-temperature-plus"
+                font.pixelSize: NeptuneStyle.fontSizeXL
+                icon.name: "ic-temperature-plus"
                 onClicked: root.passengerSeatTemperatureIncreased()
             }
             Label {
@@ -111,8 +113,8 @@ Item {
                 height: NeptuneStyle.dp(90)
                 anchors.horizontalCenter: parent.horizontalCenter
                 checkable: false
-                textFontSize: NeptuneStyle.fontSizeXL
-                icon: "ic-temperature-minus"
+                font.pixelSize: NeptuneStyle.fontSizeXL
+                icon.name: "ic-temperature-minus"
                 onClicked: root.passengerSeatTemperatureDecreased()
             }
         }
diff --git a/sysui/climate/ClimatePopup.qml b/sysui/climate/ClimatePopup.qml
index 5bd443df..b11a1f95 100644
--- a/sysui/climate/ClimatePopup.qml
+++ b/sysui/climate/ClimatePopup.qml
@@ -41,10 +41,10 @@ import controls 1.0
 
 NeptunePopup {
     id: root
-    width: Style.hspan(910/45)
-    height: Style.vspan(1426/80)
+    width: NeptuneStyle.dp(910)
+    height: NeptuneStyle.dp(1426)
     headerBackgroundVisible: true
-    headerBackgroundHeight: Style.hspan(278/45)
+    headerBackgroundHeight: NeptuneStyle.dp(278)
 
     property var model
     property bool seatTemperaturesLinked: false
@@ -75,7 +75,7 @@ NeptunePopup {
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
-        height: Style.hspan(278/45)
+        height: NeptuneStyle.dp(278)
         temperatureDriverSeat: model.leftSeat.valueString
         temperaturePassengerSeat: model.rightSeat.valueString
         onDriverSeatTemperatureIncreased: {
@@ -104,7 +104,7 @@ NeptunePopup {
     ClimateButtonsGrid {
         id: buttonsGrid
         anchors.top: header.bottom
-        anchors.topMargin: Style.vspan(36/45)
+        anchors.topMargin: NeptuneStyle.dp(64)
         anchors.horizontalCenter: parent.horizontalCenter
         model: root.model
     }
@@ -113,17 +113,17 @@ NeptunePopup {
         id: airFlow
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.top: buttonsGrid.bottom
-        anchors.topMargin: Style.vspan(36/45)
+        anchors.topMargin: NeptuneStyle.dp(64)
         model: root.model
     }
 
     Button {
         id: bigFatButton
-        width: Style.hspan(460/45)
-        height: Style.vspan(1)
+        width: NeptuneStyle.dp(460)
+        height: NeptuneStyle.dp(80)
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.bottom: parent.bottom
-        anchors.bottomMargin: Style.vspan(118/80)
+        anchors.bottomMargin: NeptuneStyle.dp(118)
         checkable: true
         text: qsTr("Auto")
         onCheckedChanged: {
@@ -135,10 +135,10 @@ NeptunePopup {
     TemperatureSlider {
         id: leftTempSlider
         anchors.top: parent.top
-        anchors.topMargin: Style.vspan(130/80) - leftTempSlider.handleHeight/2
+        anchors.topMargin: NeptuneStyle.dp(130) - leftTempSlider.handleHeight/2
         anchors.left: parent.left
-        anchors.leftMargin: -leftTempSlider.width/2 + Style.hspan(30/45)/2
-        height: Style.vspan(15)
+        anchors.leftMargin: -leftTempSlider.width/2 + NeptuneStyle.dp(30)/2
+        height: NeptuneStyle.dp(1200)
         convertFunc: model.calculateUnitValue
 
         property bool sliderChanging: false
@@ -166,10 +166,10 @@ NeptunePopup {
     TemperatureSlider {
         id: rightTempSlider
         anchors.top: parent.top
-        anchors.topMargin: Style.vspan(130/80) - rightTempSlider.handleHeight/2
+        anchors.topMargin: NeptuneStyle.dp(130) - rightTempSlider.handleHeight/2
         anchors.right: parent.right
-        anchors.rightMargin: -rightTempSlider.width/2 + Style.hspan(30/45)/2
-        height: Style.vspan(15)
+        anchors.rightMargin: -rightTempSlider.width/2 + NeptuneStyle.dp(30)/2
+        height: NeptuneStyle.dp(1200)
         convertFunc: model.calculateUnitValue
 
         property bool sliderChanging: false
diff --git a/sysui/climate/TemperatureSlider.qml b/sysui/climate/TemperatureSlider.qml
index 32119e18..935b478c 100644
--- a/sysui/climate/TemperatureSlider.qml
+++ b/sysui/climate/TemperatureSlider.qml
@@ -34,9 +34,11 @@ import QtQuick.Controls 2.2
 
 import utils 1.0
 
+import com.pelagicore.styles.neptune 3.0
+
 Slider {
     id: root
-    width: Style.hspan(4)
+    width: NeptuneStyle.dp(180)
 
     orientation: Qt.Vertical
     snapMode: Slider.SnapOnRelease