First implementation

qml/Controls/ColoredLabel.qml

@@ -0,0 +1,23 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12 as QuickControls
+
+import Utils 1.0
+
+QuickControls.Label {
+    font.family: "Roboto"
+    font.weight: Font.Normal
+    font.pixelSize: Ui.scale(17)
+
+    topPadding: Ui.scale(6)
+    bottomPadding: Ui.scale(6)
+    leftPadding: Ui.scale(12)
+    rightPadding: Ui.scale(12)
+
+    property color backgroundColor: Palette.backgroundColor
+
+    background: Rectangle {
+        radius: Ui.scale(4)
+        color: backgroundColor
+    }
+}

qml/Controls/Indicator.qml

@@ -0,0 +1,33 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+
+import Controls 1.0
+import Utils 1.0
+
+GridLayout {
+    columns: 2
+    columnSpacing: Ui.scale(8)
+    rowSpacing: Ui.scale(4)
+
+    property string label
+    property string indicator
+    property alias value: valueField
+
+    SecondaryLabel {
+        text: label
+        topPadding: lineCount == 1 ? Ui.scale(12) : 0
+        Layout.columnSpan: 2
+        Layout.fillWidth: true
+    }
+
+    TextField {
+        id: valueField
+        selectByMouse: true
+        Layout.fillWidth: true
+    }
+
+    IndicatorLabel {
+        text: indicator
+        Layout.preferredWidth: Ui.scale(18)
+    }
+}

qml/Controls/IndicatorLabel.qml

@@ -0,0 +1,12 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12 as QuickControls
+
+import Utils 1.0
+
+QuickControls.Label {
+    id: control
+    font.pixelSize: Ui.scale(21)
+    font.family: "Roboto"
+    font.weight: Font.DemiBold
+    color: Palette.indicatorLabelColor
+}

qml/Controls/PrimaryButton.qml

@@ -0,0 +1,34 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12 as QuickControls
+
+import Utils 1.0
+
+QuickControls.Button {
+    id: control
+
+    implicitHeight: Ui.scale(52)
+
+    font.pixelSize: Ui.scale(21)
+    font.family: "Roboto"
+    font.weight: Font.DemiBold
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        opacity: enabled ? 1.0 : 0.3
+        color: Palette.primaryButtonTextColor
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    background: Rectangle {
+        radius: Ui.scale(32)
+        color: control.down ? Palette.primaryButtonPushedBackgroundColor : Palette.primaryButtonBackgroundColor
+        border.width: Ui.scale(2)
+        border.color: color
+
+        width: control.width
+        height: control.height
+    }
+}

qml/Controls/PrimaryLabel.qml

@@ -0,0 +1,12 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12 as QuickControls
+
+import Utils 1.0
+
+QuickControls.Label {
+    id: control
+    font.pixelSize: Ui.scale(21)
+    font.family: "Roboto"
+    font.weight: Font.Bold
+    color: Palette.primaryLabelColor
+}

qml/Controls/SecondaryButton.qml

@@ -0,0 +1,34 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12 as QuickControls
+
+import Utils 1.0
+
+QuickControls.Button {
+    id: control
+
+    implicitHeight: Ui.scale(52)
+
+    font.pixelSize: Ui.scale(21)
+    font.family: "Roboto"
+    font.weight: Font.DemiBold
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        opacity: enabled ? 1.0 : 0.3
+        color: Palette.secondaryButtonTextColor
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    background: Rectangle {
+        radius: Ui.scale(32)
+        color: control.down ? Palette.secondaryButtonPushedBackgroundColor : Palette.secondaryButtonBackgroundColor
+        border.width: Ui.scale(2)
+        border.color: Palette.secondaryButtonBorderColor
+
+        width: control.width
+        height: control.height
+    }
+}

qml/Controls/SecondaryLabel.qml

@@ -0,0 +1,13 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12 as QuickControls
+
+import Utils 1.0
+
+QuickControls.Label {
+    id: control
+    font.pixelSize: Ui.scale(12)
+    font.family: "Roboto"
+    font.weight: Font.Normal
+    color: Palette.secondaryLabelColor
+    wrapMode : Text.Wrap
+}

qml/Controls/Separator.qml

@@ -0,0 +1,16 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12 as QuickControls
+
+import Utils 1.0
+
+QuickControls.ToolSeparator {
+    padding: vertical ? Ui.scale(10) : Ui.scale(2)
+    topPadding: vertical ? Ui.scale(2) : Ui.scale(10)
+    bottomPadding: vertical ? Ui.scale(2) : Ui.scale(10)
+
+    contentItem: Rectangle {
+        implicitWidth: parent.vertical ? Ui.scale(1) : Ui.scale(24)
+        implicitHeight: parent.vertical ? Ui.scale(24) : Ui.scale(1)
+        color: Palette.separatorColor
+    }
+}

qml/Controls/TextField.qml

@@ -0,0 +1,34 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12 as QuickControls
+
+import Utils 1.0
+
+QuickControls.TextField {
+    id: control
+
+    implicitHeight: Ui.scale(50)
+
+    horizontalAlignment: Text.AlignLeft
+    verticalAlignment: Text.AlignVCenter
+
+    topPadding: Ui.scale(12)
+    bottomPadding: Ui.scale(12)
+    leftPadding: Ui.scale(24)
+    rightPadding: Ui.scale(24)
+
+    font.family: "Roboto"
+    font.pixelSize: Ui.scale(21)
+    font.weight: Font.Bold
+
+    color: Palette.primaryLabelColor
+
+    background: Rectangle {
+        radius: Ui.scale(5)
+        color: Palette.textFieldBackgroundColor
+        border.width: Ui.scale(1)
+        border.color: control.acceptableInput ? Palette.borderColor : "red"
+
+        width: control.width
+        height: control.height
+    }
+}

qml/Controls/qmldir

@@ -0,0 +1,10 @@
+module Controls
+ColoredLabel 1.0 ColoredLabel.qml
+Indicator 1.0 Indicator.qml
+IndicatorLabel 1.0 IndicatorLabel.qml
+PrimaryButton 1.0 PrimaryButton.qml
+PrimaryLabel 1.0 PrimaryLabel.qml
+SecondaryButton 1.0 SecondaryButton.qml
+SecondaryLabel 1.0 SecondaryLabel.qml
+Separator 1.0 Separator.qml
+TextField 1.0 TextField.qml