From 2a0ba04d338d94f443efe1f2fa185efa29c37c60 Mon Sep 17 00:00:00 2001
From: Dirk Hohndel <dirk@hohndel.org>
Date: Thu, 6 Feb 2020 08:28:27 -0800
Subject: mobile/settings: make the color swatches work as color swatches

In a color swatch the color of the body of the swatch is the one that
matters. And we need to ensure readability. So for each pair of colors,
use the combination in the regular order (color/textcolor) for the
background swatch, and inverted for the text swatch.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
---
 mobile-widgets/qml/Settings.qml | 36 +++++++++++++++++-------------------
 1 file changed, 17 insertions(+), 19 deletions(-)

(limited to 'mobile-widgets/qml')

diff --git a/mobile-widgets/qml/Settings.qml b/mobile-widgets/qml/Settings.qml
index 8df9e6bf9..c5a71f5cd 100644
--- a/mobile-widgets/qml/Settings.qml
+++ b/mobile-widgets/qml/Settings.qml
@@ -166,14 +166,14 @@ TemplatePage {
 
 					TemplateLabel {
 						text: qsTr("background")
-						color: "black"
+						color: subsurfaceTheme.textColor
 						colorBackground: parent.color
 						anchors.horizontalCenter: parent.horizontalCenter
 						anchors.verticalCenter: parent.verticalCenter
 					}
 				}
 				Rectangle {
-					color: "white"
+					color: subsurfaceTheme.backgroundColor
 					width: rootItem.width / 2 - 60
 					height: subsurfaceTheme.regularPointSize + 10
 
@@ -196,7 +196,7 @@ TemplatePage {
 
 					TemplateLabel {
 						text: qsTr("primary")
-						color: "black"
+						color: subsurfaceTheme.primaryTextColor
 						colorBackground: parent.color
 						anchors.horizontalCenter: parent.horizontalCenter
 						anchors.verticalCenter: parent.verticalCenter
@@ -205,13 +205,13 @@ TemplatePage {
 				Rectangle {
 					border.width: 2
 					border.color: "black"
-					color: "white"
+					color: subsurfaceTheme.primaryTextColor
 					width: rootItem.width / 2 - 60
 					height: subsurfaceTheme.regularPointSize + 10
 
 					TemplateLabel {
-						text: qsTr("text")
-						color: subsurfaceTheme.primaryTextColor
+						text: qsTr("primary text")
+						color: subsurfaceTheme.primaryColor
 						colorBackground: parent.color
 						anchors.horizontalCenter: parent.horizontalCenter
 						anchors.verticalCenter: parent.verticalCenter
@@ -222,13 +222,12 @@ TemplatePage {
 					border.width: 2
 					border.color: "black"
 					color: 	subsurfaceTheme.darkerPrimaryColor
-
 					width: rootItem.width / 2 - 20
 					height: subsurfaceTheme.regularPointSize + 10
 
 					TemplateLabel {
 						text: qsTr("darker primary")
-						color: "black"
+						color: subsurfaceTheme.darkerPrimaryTextColor
 						colorBackground: parent.color
 						anchors.horizontalCenter: parent.horizontalCenter
 						anchors.verticalCenter: parent.verticalCenter
@@ -237,13 +236,13 @@ TemplatePage {
 				Rectangle {
 					border.width: 2
 					border.color: "black"
-					color: "white"
+					color: subsurfaceTheme.darkerPrimaryTextColor
 					width: rootItem.width / 2 - 60
 					height: subsurfaceTheme.regularPointSize + 10
 
 					TemplateLabel {
-						text: qsTr("text")
-						color: subsurfaceTheme.darkerPrimaryTextColor
+						text: qsTr("darker primary text")
+						color: subsurfaceTheme.darkerPrimaryColor
 						colorBackground: parent.color
 						anchors.horizontalCenter: parent.horizontalCenter
 						anchors.verticalCenter: parent.verticalCenter
@@ -254,13 +253,12 @@ TemplatePage {
 					border.width: 2
 					border.color: "black"
 					color: 	subsurfaceTheme.lightPrimaryColor
-
 					width: rootItem.width / 2 - 20
 					height: subsurfaceTheme.regularPointSize + 10
 
 					TemplateLabel {
 						text: qsTr("light primary")
-						color: "black"
+						color: subsurfaceTheme.lightPrimaryTextColor
 						colorBackground: parent.color
 						anchors.horizontalCenter: parent.horizontalCenter
 						anchors.verticalCenter: parent.verticalCenter
@@ -269,13 +267,13 @@ TemplatePage {
 				Rectangle {
 					border.width: 2
 					border.color: "black"
-					color: "white"
+					color: subsurfaceTheme.lightPrimaryTextColor
 					width: rootItem.width / 2 - 60
 					height: subsurfaceTheme.regularPointSize + 10
 
 					TemplateLabel {
-						text: qsTr("text")
-						color: subsurfaceTheme.lightPrimaryTextColor
+						text: qsTr("light primary text")
+						color: subsurfaceTheme.lightPrimaryColor
 						colorBackground: parent.color
 						anchors.horizontalCenter: parent.horizontalCenter
 						anchors.verticalCenter: parent.verticalCenter
@@ -289,13 +287,13 @@ TemplatePage {
 				Rectangle {
 					border.width: 2
 					border.color: "black"
-					color: "white"
+					color: subsurfaceTheme.secondaryTextColor
 					width: rootItem.width / 2 - 60
 					height: subsurfaceTheme.regularPointSize + 10
 
 					TemplateLabel {
 						text: qsTr("secondary text")
-						color: subsurfaceTheme.secondaryTextColor
+						color: subsurfaceTheme.primaryColor
 						colorBackground: parent.color
 						anchors.horizontalCenter: parent.horizontalCenter
 						anchors.verticalCenter: parent.verticalCenter
@@ -312,7 +310,7 @@ TemplatePage {
 
 					TemplateLabel {
 						text: qsTr("drawer")
-						color: "black"
+						color: subsurfaceTheme.textColor
 						colorBackground: parent.color
 						anchors.horizontalCenter: parent.horizontalCenter
 						anchors.verticalCenter: parent.verticalCenter
-- 
cgit v1.2.3-70-g09d2