Style Login page

TeroStyle/Dimensions.qml

@@ -3,8 +3,22 @@ pragma Singleton
 import QtQuick
 
 QtObject {
+    /**
+     * Distance for objects that are tied to each other,
+     * e.g. a field and its label.
+     */
     readonly property int s: 9
+
+    /**
+     * Distance for objects that are grouped together, e.g. radio buttons of the
+     * same radio group.
+     */
     readonly property int m: 15
+
+    /**
+     * Distance for objects that are not related to each other, or to objects
+     * and their container.
+     */
     readonly property int l: 30
 
     readonly property int radius: 4

TeroStyle/Field.qml

@@ -0,0 +1,13 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+ColumnLayout {
+    required property string label
+    spacing: Dimensions.s
+
+    Label {
+        text: label
+        font: Typography.body
+    }
+}

TeroStyle/TextField.qml

@@ -0,0 +1,19 @@
+import QtQuick
+import QtQuick.Templates as T
+
+T.TextField {
+    background: Rectangle {
+        id: background
+        color: Colors.mantle
+        radius: Dimensions.radius
+        border.width: 1
+        border.color: Colors.interactive
+        height: 47
+    }
+
+    color: Colors.foreground
+    implicitHeight: background.height
+    placeholderTextColor: Colors.interactive
+    font: Typography.body
+    padding: Dimensions.m
+}

TeroStyle/qmldir

@@ -2,4 +2,6 @@ module TeroStyle
 singleton Colors Colors.qml
 singleton Dimensions Dimensions.qml
 singleton Typography Typography.qml
-Button Button.qml
+Button Button.qml
+Field Field.qml
+TextField TextField.qml