Style Combobox

TeroStyle/Colors.qml

@@ -14,4 +14,6 @@ QtObject {
     readonly property color mantle: theme === dark ? "#1e1f22" : "#e7e9ef"
     readonly property color interactive: theme === dark ? "#878b97" : "#d9d9da"
     readonly property color error: theme === dark ? "#ff2264" : "#ff004b"
+
+    readonly property double highlightOpacity: .3
 }

TeroStyle/ComboBox.qml

@@ -0,0 +1,75 @@
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls
+
+T.ComboBox {
+    id: control
+
+    font: Typography.body
+    implicitHeight: background.height
+    padding: Dimensions.m
+
+    background: Rectangle {
+        border.color: Colors.interactive
+        border.width: 1
+        color: Colors.mantle
+        height: 47
+        radius: Dimensions.radius
+    }
+
+    delegate: T.ItemDelegate {
+        width: control.width
+        height: implicitContentHeight + topPadding + bottomPadding
+        padding: Dimensions.s
+        leftPadding: control.leftPadding
+        contentItem: Label {
+            text: control.textRole ? model[control.textRole] : modelData
+            color: Colors.foreground
+            elide: Text.ElideRight
+            verticalAlignment: Text.AlignVCenter
+        }
+        highlighted: control.highlightedIndex === index
+    }
+    indicator: Label {
+        x: control.width - width
+        height: control.height
+        width: contentWidth + Dimensions.s * 2
+        text: "▼"
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+        padding: Dimensions.s
+
+        background:  Rectangle {
+            anchors.fill: parent
+            color: Colors.primary
+            topRightRadius: Dimensions.radius
+            bottomRightRadius: Dimensions.radius
+            border.color: Colors.interactive
+        }
+    }
+
+    popup: T.Popup {
+        y: control.height
+        z: 2
+        width: control.width
+        contentItem: ListView {
+            clip: true
+            implicitHeight: contentHeight
+            model: control.popup.visible ? control.delegateModel : null
+            currentIndex: control.highlightedIndex
+
+            highlight: Rectangle {
+                color: Colors.primary
+                opacity: Colors.highlightOpacity
+            }
+
+            ScrollIndicator.vertical: ScrollIndicator {}
+        }
+
+        background: Rectangle {
+            color: Colors.mantle
+            border.color: Colors.interactive
+            radius: Dimensions.radius
+        }
+    }
+}

TeroStyle/TextField.qml

@@ -2,11 +2,12 @@ import QtQuick
 import QtQuick.Templates as T
 
 T.TextField {
+    id: control
     background: Rectangle {
         id: background
         color: Colors.mantle
         radius: Dimensions.radius
-        border.width: 1
+        border.width: !control.focus ? 1 : 2
         border.color: Colors.interactive
         height: 47
     }

TeroStyle/Typography.qml

@@ -13,21 +13,14 @@ Item {
         pointSize: 16,
         weight: Font.Medium,
         letterSpacing: 0,
-        kerning: true
+        kerning: true,
     })
 
     readonly property font h1: ({
         family: body.family,
         pointSize: 38,
         weight: body.weight,
-        letterSpacing: body.letterSpacing
-
+        letterSpacing: body.letterSpacing,
+        kerning: body.kerning,
     })
-    //
-    // readonly property font h2: ({
-    //     family: regular.font,
-    //     pointSize: 38,
-    //     weight: Font.Normal
-    // })
-
 }

TeroStyle/qmldir

@@ -3,5 +3,6 @@ singleton Colors Colors.qml
 singleton Dimensions Dimensions.qml
 singleton Typography Typography.qml
 Button Button.qml
+ComboBox ComboBox.qml
 Field Field.qml
 TextField TextField.qml