Make HCheckBox themable

TODO.md

@@ -5,8 +5,6 @@
   - Make all icon SVG files white/black, since we can now use ColorOverlay
     - Make the icon blue in EditAccount when hovering and no avatar set
 
-  - Checkbox theming
-
   - `^property type name$`
   - Use [Animators](https://doc.qt.io/qt-5/qml-qtquick-animator.html)
     - Choose a better default easing type for animations

src/qml/Base/HButton.qml

@@ -4,7 +4,7 @@ import QtQuick.Layouts 1.12
 
 Button {
     id: button
-    opacity: enabled ? 1 : theme.controls.button.disabledOpacity
+    opacity: enabled ? 1 : theme.disabledElementsOpacity
     onVisibleChanged: if (! visible) loading = false
 
 
@@ -17,6 +17,9 @@ Button {
     property bool circle: false
 
 
+    Behavior on opacity { HNumberAnimation {} }
+
+
     background: HRectangle {
         radius: circle ? height : 0
         color: backgroundColor

src/qml/Base/HCheckBox.qml

@@ -5,8 +5,11 @@ import "../utils.js" as Utils
 CheckBox {
     id: box
     spacing: theme.spacing
+    opacity: enabled ? 1 : theme.disabledElementsOpacity
+
+
+    Behavior on opacity { HNumberAnimation { factor: 2 } }
 
-    property bool highlight: enabled && (hovered || visualFocus)
 
     indicator: Rectangle {
         implicitWidth: implicitHeight
@@ -15,10 +18,15 @@ CheckBox {
         y: box.topPadding + box.availableHeight / 2 - height / 2
         radius: theme.radius / 1.5
 
-        color: theme.controls.button.background
+        color: theme.controls.checkBox.boxBackground
-        border.color: Utils.hsluv(
+        border.color:
-            180, highlight ? 80 : 0, highlight ? 80 : 40, highlight ? 1 : 0.7
+            box.enabled && box.pressed ?
-        )
+            theme.controls.checkBox.boxPressedBorder :
+
+            (box.enabled && box.hovered) || box.visualFocus ?
+            theme.controls.checkBox.boxHoveredBorder :
+
+            theme.controls.checkBox.boxBorder
 
         Behavior on border.color { HColorAnimation { factor: 0.5 } }
 
@@ -26,7 +34,7 @@ CheckBox {
             anchors.centerIn: parent
             dimension: parent.width - 2
             svgName: "check-mark"
-            colorize: theme.colors.strongAccentBackground
+            colorize: theme.controls.checkBox.checkIconColor
 
             visible: scale > 0
             scale: box.checked ? 1 : 0
@@ -41,9 +49,7 @@ CheckBox {
 
     contentItem: HLabel {
         text: box.text
-        color: box.enabled ?
+        color: theme.controls.checkBox.text
-               theme.controls.button.text :
-               theme.controls.button.disabledText
 
         // Set a width on CheckBox for wrapping to work, e.g. Layout.fillWidth
         wrapMode: Text.Wrap

src/themes/Default.qpl

@@ -15,10 +15,11 @@ int contentIsWideAbove:     439 * uiScale
 int minimumSupportedWidthPlusSpacing:  minimumSupportedWidth + spacing * 2
 int minimumSupportedHeightPlusSpacing: minimumSupportedHeight + spacing * 2
 
-int baseElementsHeight: 36 * uiScale
+int baseElementsHeight:       36 * uiScale
-int spacing:            12 * uiScale
+int spacing:                  12 * uiScale
-int radius:             5
+int radius:                   5
-int animationDuration:  100
+int animationDuration:        100
+real disabledElementsOpacity: 0.3
 
 string preferredIconPack: "light-thin"
 
@@ -88,14 +89,23 @@ controls:
         color background: colors.strongBackground
 
     button:
-        color background:     colors.inputBackground
+        color background: colors.inputBackground
-        color text:           colors.text
+        color text:       colors.text
-        real disabledOpacity: 0.3
 
         color hoveredOverlay: hsluv(0, 0, 50, 0.3)
         color pressedOverlay: hsluv(0, 0, 50, 0.6)
         color checkedOverlay: colors.accentBackground
 
+    checkBox:
+        color checkIconColor: colors.strongAccentBackground
+        color boxBackground:  colors.inputBackground
+
+        color boxBorder:        hsluv(0, 0, 50, 0.3)
+        color boxHoveredBorder: colors.accentBackground
+        color boxPressedBorder: colors.strongAccentBackground
+
+        color text:             colors.text
+
     interactiveRectangle:
         color background: "transparent"