feat: improve nexus w&s page styling

modules/nexus/common/ToggleRow.qml

@@ -7,6 +7,7 @@ import qs.services
 StyledSwitch {
     id: root
 
+    property string subtext
     property bool first
     property bool last
 
@@ -39,17 +40,42 @@ StyledSwitch {
         }
     }
 
-    contentItem: StyledText {
+    contentItem: Item {
-        id: label
-
         anchors.left: parent.left
         anchors.right: root.indicator.left
         anchors.leftMargin: Tokens.padding.large
         anchors.rightMargin: Tokens.spacing.medium
 
-        text: root.text
+        implicitWidth: column.implicitWidth
-        font: Tokens.font.body.small
+        implicitHeight: column.implicitHeight
-        elide: Text.ElideRight
+
-        verticalAlignment: Text.AlignVCenter
+        Column {
+            id: column
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            spacing: 0
+
+            StyledText {
+                anchors.left: parent.left
+                anchors.right: parent.right
+
+                text: root.text
+                font: Tokens.font.body.small
+                elide: Text.ElideRight
+            }
+
+            StyledText {
+                anchors.left: parent.left
+                anchors.right: parent.right
+
+                visible: root.subtext
+                text: root.subtext
+                color: Colours.palette.m3onSurfaceVariant
+                font: Tokens.font.label.small
+                elide: Text.ElideRight
+            }
+        }
     }
 }

modules/nexus/pages/WallpaperAndStyle.qml

@@ -138,9 +138,10 @@ ColumnLayout {
         Layout.alignment: Qt.AlignHCenter
         implicitWidth: root.cappedWidth
 
-        text: qsTr("Dark theme")
+        text: qsTr("Transparency")
-        checked: !Colours.light
+        subtext: qsTr("Base %1, layers %2").arg(Colours.transparency.base).arg(Colours.transparency.layers)
-        onToggled: Colours.setMode(checked ? "dark" : "light")
+        checked: Colours.transparency.enabled
+        onToggled: GlobalConfig.appearance.transparency.enabled = checked
     }
 
     ToggleRow {
@@ -149,9 +150,9 @@ ColumnLayout {
         implicitWidth: root.cappedWidth
 
         last: true
-        text: qsTr("Transparency")
+        text: qsTr("Dark theme")
-        checked: Colours.transparency.enabled
+        checked: !Colours.light
-        onToggled: GlobalConfig.appearance.transparency.enabled = checked
+        onToggled: Colours.setMode(checked ? "dark" : "light")
     }
 
     Item {