POC: Theme Singleton for color definitions and UI toggling

src/Makefile.qt.include

@@ -294,14 +294,35 @@ QML_RES_FONTS = \
   qml/res/fonts/Inter-Regular.otf \
   qml/res/fonts/Inter-SemiBold.otf
 
+QML_RES_ICONS = \
+  qml/res/icons/moon.png \
+  qml/res/icons/sun.png
+
 QML_QRC_CPP = qml/qrc_bitcoin.cpp
 QML_QRC = qml/bitcoin_qml.qrc
 QML_RES_QML = \
   qml/components/BlockCounter.qml \
   qml/components/ConnectionOptions.qml \
+  qml/components/ConnectionSettings.qml \
+  qml/components/StorageOptions.qml \
+  qml/controls/ContinueButton.qml \
   qml/controls/Header.qml \
+  qml/controls/Indicator.qml \
   qml/controls/OptionButton.qml \
+  qml/controls/OptionSwitch.qml \
   qml/controls/ProgressIndicator.qml \
+  qml/controls/qmldir \
+  qml/controls/Setting.qml \
+  qml/controls/TextButton.qml \
+  qml/controls/Theme.qml \
+  qml/controls/ThemeToggleButton.qml \
+  qml/controls/Wizard.qml \
+  qml/pages/onboarding/onboarding01.qml \
+  qml/pages/onboarding/onboarding02.qml \
+  qml/pages/onboarding/onboarding03.qml \
+  qml/pages/onboarding/onboarding03a.qml \
+  qml/pages/onboarding/onboarding03b.qml \
+  qml/pages/onboarding/onboarding04.qml \
   qml/pages/initerrormessage.qml \
   qml/pages/stub.qml
 
@@ -333,7 +354,7 @@ endif
 nodist_qt_libbitcoinqt_a_SOURCES = $(QT_MOC_CPP) $(QT_MOC) $(QT_QRC_CPP) $(QT_QRC_LOCALE_CPP)
 
 if BUILD_WITH_QML
-  qt_libbitcoinqt_a_SOURCES += $(BITCOIN_QML_BASE_CPP) $(QML_QRC) $(QML_RES_FONTS) $(QML_RES_QML)
+  qt_libbitcoinqt_a_SOURCES += $(BITCOIN_QML_BASE_CPP) $(QML_QRC) $(QML_RES_FONTS) $(QML_RES_ICONS) $(QML_RES_QML)
   nodist_qt_libbitcoinqt_a_SOURCES += $(QML_QRC_CPP)
 endif # BUILD_WITH_QML
 
@@ -407,7 +428,7 @@ $(QT_QRC_CPP): $(QT_QRC) $(QT_FORMS_H) $(QT_RES_FONTS) $(QT_RES_ICONS) $(QT_RES_
 	$(AM_V_GEN) QT_SELECT=$(QT_SELECT) $(RCC) -name bitcoin --format-version 1 $< > $@
 
 if BUILD_WITH_QML
-$(QML_QRC_CPP): $(QML_QRC) $(QML_RES_FONTS) $(QML_RES_QML)
+$(QML_QRC_CPP): $(QML_QRC) $(QML_RES_FONTS) $(QML_RES_ICONS) $(QML_RES_QML)
 	@test -f $(RCC)
 	$(AM_V_GEN) QT_SELECT=$(QT_SELECT) $(RCC) --name bitcoin_qml --format-version 1 $< > $@
 endif # BUILD_WITH_QML

src/qml/bitcoin_qml.qrc

@@ -2,14 +2,33 @@
     <qresource prefix="/qml">
         <file>components/BlockCounter.qml</file>
         <file>components/ConnectionOptions.qml</file>
+        <file>components/ConnectionSettings.qml</file>
+        <file>components/StorageOptions.qml</file>
+        <file>controls/ContinueButton.qml</file>
         <file>controls/Header.qml</file>
+        <file>controls/Indicator.qml</file>
         <file>controls/OptionButton.qml</file>
+        <file>controls/OptionSwitch.qml</file>
         <file>controls/ProgressIndicator.qml</file>
+        <file>controls/qmldir</file>
+        <file>controls/Setting.qml</file>
+        <file>controls/TextButton.qml</file>
+        <file>controls/Theme.qml</file>
+        <file>controls/ThemeToggleButton.qml</file>
+        <file>controls/Wizard.qml</file>
+        <file>pages/onboarding/onboarding01.qml</file>
+        <file>pages/onboarding/onboarding02.qml</file>
+        <file>pages/onboarding/onboarding03.qml</file>
+        <file>pages/onboarding/onboarding03a.qml</file>
+        <file>pages/onboarding/onboarding03b.qml</file>
+        <file>pages/onboarding/onboarding04.qml</file>
         <file>pages/initerrormessage.qml</file>
         <file>pages/stub.qml</file>
     </qresource>
     <qresource prefix="/icons">
         <file alias="bitcoin">../qt/res/icons/bitcoin.png</file>
+        <file alias="moon">res/icons/moon.png</file>
+        <file alias="sun">res/icons/sun.png</file>
     </qresource>
     <qresource prefix="/fonts">
         <file alias="inter/regular">res/fonts/Inter-Regular.otf</file>

src/qml/components/BlockCounter.qml

@@ -6,13 +6,14 @@
 
 import QtQuick 2.15
 import QtQuick.Controls 2.15
+import "../controls"
 
 Label {
     property int blockHeight: 0
     background: Rectangle {
-        color: "black"
+        color: Theme.color.background
     }
-    color: "orange"
+    color: Theme.color.orange
     padding: 16
     horizontalAlignment: Text.AlignHCenter
     verticalAlignment: Text.AlignVCenter

src/qml/components/ConnectionSettings.qml

@@ -0,0 +1,35 @@
+// Copyright (c) 2022 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import "../controls"
+
+ColumnLayout {
+    spacing: 20
+    Setting {
+        Layout.fillWidth: true
+        header: "Use cellular data"
+    }
+    Setting {
+        Layout.fillWidth: true
+        header: "Daily upload limit"
+    }
+    Setting {
+        Layout.fillWidth: true
+        header: "Connection limit"
+    }
+    Setting {
+        Layout.fillWidth: true
+        header: "Listening enabled"
+        description: "Reduces data usage."
+    }
+    Setting {
+        last: true
+        Layout.fillWidth: true
+        header: "Blocks Only"
+        description: "Do not transfer unconfirmed transactions. Also disabled listening."
+    }
+}

src/qml/components/StorageOptions.qml

@@ -0,0 +1,37 @@
+// Copyright (c) 2022 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import "../controls"
+
+ColumnLayout {
+    ButtonGroup {
+        id: group
+    }
+    spacing: 15
+    OptionButton {
+        ButtonGroup.group: group
+        Layout.fillWidth: true
+        text: qsTr("Reduce storage")
+        description: qsTr("Uses about 75GB.")
+        recommended: true
+        checked: true
+        detail: ProgressIndicator {
+            implicitWidth: 75
+            progress: 0.25
+        }
+    }
+    OptionButton {
+        ButtonGroup.group: group
+        Layout.fillWidth: true
+        text: qsTr("Default")
+        description: qsTr("Uses about 423GB.")
+        detail: ProgressIndicator {
+            implicitWidth: 75
+            progress: 0.8
+        }
+    }
+}

src/qml/controls/ContinueButton.qml

@@ -0,0 +1,25 @@
+// Copyright (c) 2022 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+Button {
+    font.family: "Inter"
+    font.styleName: "Semi Bold"
+    font.pointSize: 18
+    contentItem: Text {
+        text: parent.text
+        font: parent.font
+        color: "white"
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+    background: Rectangle {
+        implicitHeight: 46
+        implicitWidth: 300
+        color: Theme.color.orange
+        radius: 5
+    }
+}

src/qml/controls/Header.qml

@@ -28,7 +28,7 @@ Control {
             font.family: "Inter"
             font.styleName: root.bold ? "Semi Bold" : "Regular"
             font.pointSize: root.headerSize
-            color: "#FFFFFF"
+            color: Theme.color.neutral0
             text: root.header
             horizontalAlignment: center ? Text.AlignHCenter : Text.AlignLeft
             wrapMode: Text.WordWrap
@@ -43,7 +43,7 @@ Control {
                 font.family: "Inter"
                 font.styleName: "Regular"
                 font.pointSize: root.descriptionSize
-                color: "#DEDEDE"
+                color: Theme.color.neutral4
                 text: root.description
                 horizontalAlignment: root.center ? Text.AlignHCenter : Text.AlignLeft
                 wrapMode: Text.WordWrap
@@ -59,7 +59,7 @@ Control {
                 font.family: "Inter"
                 font.styleName: "Regular"
                 font.pixelSize: root.subtextSize
-                color: "#FFFFFF"
+                color: Theme.color.neutral0
                 text: root.subtext
                 horizontalAlignment: root.center ? Text.AlignHCenter : Text.AlignLeft
                 wrapMode: Text.WordWrap

src/qml/controls/Indicator.qml

@@ -0,0 +1,22 @@
+// Copyright (c) 2022 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+PageIndicator {
+    id: root
+    delegate: Rectangle {
+        implicitWidth: 10
+        implicitHeight: 10
+        radius: width / 2
+        color: Theme.color.neutral0
+        opacity: index === root.currentIndex ? 0.95 : pressed ? 0.7 : 0.45
+        Behavior on opacity {
+            OpacityAnimator {
+                duration: 100
+            }
+        }
+    }
+}

src/qml/controls/OptionButton.qml

@@ -15,15 +15,15 @@ Button {
     property alias detail: detail_loader.sourceComponent
     background: Rectangle {
         border.width: 1
-        border.color: button.checked ? "#F7931A" : button.hovered ? "white" : "#999999"
+        border.color: button.checked ? Theme.color.orange : button.hovered ? Theme.color.neutral0 : Theme.color.neutral6
         radius: 10
         color: "transparent"
         Rectangle {
             visible: button.visualFocus
             anchors.fill: parent
             anchors.margins: -4
             border.width: 2
-            border.color: "#F7931A"
+            border.color: Theme.color.orange
             radius: 14
             color: "transparent"
             opacity: 0.4
@@ -33,33 +33,24 @@ Button {
         spacing: 3
         ColumnLayout {
             spacing: 3
-            Label {
+            Header {
                 Layout.fillWidth: true
                 Layout.preferredWidth: 0
-                font.family: "Inter"
-                font.styleName: "Regular"
-                font.pointSize: 18
-                color: "white"
-                text: button.text
-                wrapMode: Text.WordWrap
-            }
-            Label {
-                Layout.fillWidth: true
-                Layout.preferredWidth: 0
-                font.family: "Inter"
-                font.styleName: "Regular"
-                font.pixelSize: 15
-                color: "#DEDEDE"
-                text: button.description
-                wrapMode: Text.WordWrap
+                center: false
+                header: button.text
+                headerSize: 18
+                headerMargin: 0
+                description: button.description
+                descriptionSize: 15
+                descriptionMargin: 0
             }
             Loader {
                 Layout.topMargin: 2
                 active: button.recommended
                 visible: active
                 sourceComponent: Label {
                     background: Rectangle {
-                        color: "white"
+                        color: Theme.color.neutral0
                         radius: 3
                     }
                     font.styleName: "Regular"
@@ -68,7 +59,7 @@ Button {
                     rightPadding: 7
                     bottomPadding: 4
                     leftPadding: 7
-                    color: "black"
+                    color: Theme.color.neutral9
                     text: qsTr("Recommended")
                 }
             }

src/qml/controls/OptionSwitch.qml

@@ -0,0 +1,27 @@
+// Copyright (c) 2022 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+Switch {
+    id: root
+    indicator: Rectangle {
+        implicitWidth: 45
+        implicitHeight: 28
+        x: root.leftPadding
+        y: parent.height / 2 - height / 2
+        radius: 18
+        color: root.checked ? Theme.color.orange : Theme.color.neutral4
+        Rectangle {
+            id: indicatorButton
+            y: parent.height / 2 - height / 2
+            x: root.checked ? parent.width - width - 4 : 0 + 4
+            width: 20
+            height: 20
+            radius: 18
+            color: "#ffffff"
+        }
+    }
+}

src/qml/controls/ProgressIndicator.qml

@@ -17,7 +17,7 @@ Control {
     contentItem: Rectangle {
         implicitHeight: 6
         radius: Math.floor(height / 2)
-        color: "#404040"
+        color: Theme.color.neutral3
         Item {
             width: Math.round(progress * contentItem.width)
             height: parent.height
@@ -26,7 +26,7 @@ Control {
                 width: contentItem.width
                 height: contentItem.height
                 radius: contentItem.radius
-                color: "orange"
+                color: Theme.color.orange
             }
         }
     }