QML UI: redo all the colors

Naming them the same way Davide named them in his emails and assigning the
color values he proposed.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>

mobile-widgets/qml/DiveDetailsView.qml

@@ -59,7 +59,7 @@ Item {
 			id: gpsButton
 			height: Math.round(1.5 * Kirigami.Units.gridUnit)
 			width: dive.gps == "" ? 0 : buttonText.width + Kirigami.Units.gridUnit
-			color: subsurfaceTheme.accentColor
+			color: subsurfaceTheme.darkPrimaryColor
 			antialiasing: true
 			radius: Kirigami.Units.smallSpacing * 2
 			anchors {
@@ -70,7 +70,7 @@ Item {
 			Kirigami.Label {
 				id: buttonText
 				text: qsTr("Map it")
-				color: subsurfaceTheme.accentTextColor
+				color: subsurfaceTheme.darkPrimaryTextColor
 				anchors {
 					horizontalCenter: parent.horizontalCenter
 					verticalCenter: parent.verticalCenter
@@ -96,21 +96,21 @@ Item {
 				text: dive.date + " " + dive.time
 				width: Math.max(locationText.width * 0.45, paintedWidth)
 				font.pointSize: subsurfaceTheme.smallPointSize
-				color: Kirigami.Theme.textColor
+				color: subsurfaceTheme.diveListTextColor
 			}
 			// let's try to show the depth / duration very compact
 			Kirigami.Label {
 				text: dive.depth + ' / ' + dive.duration
 				width: Math.max(Kirigami.Units.gridUnit * 3, paintedWidth)
 				font.pointSize: subsurfaceTheme.smallPointSize
-				color: Kirigami.Theme.textColor
+				color: subsurfaceTheme.diveListTextColor
 			}
 		}
 		Kirigami.Label {
 			id: numberText
 			text: "#" + dive.number
 			font.pointSize: subsurfaceTheme.smallPointSize
-			color: Kirigami.Theme.textColor
+			color: subsurfaceTheme.diveListTextColor
 			anchors {
 				right: parent.right
 				top: locationText.bottom
@@ -142,7 +142,7 @@ Item {
 				color: "transparent"
 				opacity: 0.6
 				border.width: 1
-				border.color: Kirigami.Theme.textColor;
+				border.color: subsurfaceTheme.darkPrimaryColor
 				anchors.fill: parent
 			}
 		}
@@ -199,7 +199,7 @@ Item {
 		}
 
 		Rectangle {
-			color: subsurfaceTheme.accentColor
+			color: subsurfaceTheme.darkPrimaryColor
 			height: 1
 			opacity: 0.5
 			Layout.columnSpan: 3
@@ -252,7 +252,7 @@ Item {
 		}
 
 		Rectangle {
-			color: subsurfaceTheme.accentColor
+			color: subsurfaceTheme.darkPrimaryColor
 			height: 1
 			opacity: 0.5
 			Layout.columnSpan: 3
@@ -294,7 +294,7 @@ Item {
 		}
 
 		Rectangle {
-			color: subsurfaceTheme.accentColor
+			color: subsurfaceTheme.darkPrimaryColor
 			height: 1
 			opacity: 0.5
 			Layout.columnSpan: 3

mobile-widgets/qml/DiveList.qml

@@ -31,7 +31,9 @@ Kirigami.ScrollablePage {
 			checked: diveListView.currentIndex === model.index
 			width: parent.width
 			height: diveListEntry.height + Kirigami.Units.smallSpacing
-			background.opacity: checked ? 0.4 : 1
+			background.opacity: checked ? 0.8 : 1
+			backgroundColor: checked ? subsurfaceTheme.primaryColor : Kirigami.Theme.viewBackgroundColor
+			textColor: checked ? subsurfaceTheme.primaryTextColor : subsurfaceTheme.diveListTextColor
 
 			property real detailsOpacity : 0
 
@@ -55,7 +57,7 @@ Kirigami.ScrollablePage {
 					id: leftBarDive
 					width: dive.tripMeta == "" ? 0 : Kirigami.Units.smallSpacing
 					height: diveListEntry.height * 0.8
-					color: subsurfaceTheme.accentColor
+					color: subsurfaceTheme.lightPrimaryColor
 					anchors {
 						left: parent.left
 						top: parent.top
@@ -123,7 +125,7 @@ Kirigami.ScrollablePage {
 					visible: deleteButtonVisible
 					height: diveListEntry.height - Kirigami.Units.smallSpacing
 					width: height - 3 * Kirigami.Units.smallSpacing
-					color: "#FF3030"
+					color: subsurfaceTheme.contrastAccentColor
 					antialiasing: true
 					radius: Kirigami.Units.smallSpacing
 					anchors {
@@ -173,7 +175,7 @@ Kirigami.ScrollablePage {
 					right: parent.right
 					rightMargin: Kirigami.Units.gridUnit * -2
 				}
-				color: subsurfaceTheme.accentColor
+				color: subsurfaceTheme.lightPrimaryColor
 				visible: section != ""
 				Kirigami.Label {
 					id: sectionText
@@ -199,7 +201,7 @@ Kirigami.ScrollablePage {
 						leftMargin: horizontalPadding * 2
 						right: parent.right
 					}
-					color: textColor
+					color: subsurfaceTheme.lightPrimaryTextColor
 				}
 			}
 			Rectangle {
@@ -210,7 +212,7 @@ Kirigami.ScrollablePage {
 					rightMargin: Kirigami.Units.gridUnit * -2
 					right: parent.right
 				}
-				color: subsurfaceTheme.accentColor
+				color: subsurfaceTheme.lightPrimaryColor
 			}
 		}
 	}

mobile-widgets/qml/main.qml

@@ -310,14 +310,21 @@ Kirigami.ApplicationWindow {
 		id: subsurfaceTheme
 		property int titlePointSize: Math.round(fontMetrics.font.pointSize * 1.5)
 		property int smallPointSize: Math.round(fontMetrics.font.pointSize * 0.8)
-		property color accentColor: "#C0CFFF"
+
-		property color darkAccentColor: "#5870cb"
+		property color darkPrimaryColor: "#303F9f"
-		property color shadedColor: "#132744"
+		property color darkPrimaryTextColor: "#ECECEC"
-		property color accentTextColor: "#ececec"
+		property color primaryColor: "#3F51B5"
-		property color diveListTextColor: "#000000" // the Kirigami theme text color is too light
+		property color primaryTextColor: "#ECECEC"
+		property color lightPrimaryColor: "#C5CAE9"
+		property color lightPrimaryTextColor: "#212121"
+		property color contrastAccentColor: "#FF9800" // used for delete button
+
+		property color diveListTextColor: lightPrimaryTextColor
+
 		property int columnWidth: Math.round(rootItem.width/(Kirigami.Units.gridUnit*28)) > 0 ? Math.round(rootItem.width / Math.round(rootItem.width/(Kirigami.Units.gridUnit*28))) : rootItem.width
 		Component.onCompleted: {
-			Kirigami.Theme.highlightcolor = darkAccentColor
+			Kirigami.Theme.highlightColor = darkPrimaryColor
+			Kirigami.Theme.highlighedTextColor = darkPrimaryTextColor
 		}
 	}
 	property Item stackView: pageStack
@@ -374,7 +381,6 @@ Kirigami.ApplicationWindow {
 	}
 
 	Component.onCompleted: {
-		Kirigami.Theme.highlightColor = subsurfaceTheme.accentColor
 		manager.finishSetup();
 		rootItem.visible = true
 		diveList.opacity = 1