From ba336f650bfe3e685d60eb4b9a9b583bb1725ba1 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Wed, 20 Dec 2023 14:47:33 +0100
Subject: [PATCH] fix: Adjust colors of app menu and dashboard

Those elements are shown directly on the background which has the `color-primary`,
so they need to use `color-primary-text` instead of `color-primary-element-text` for guranteed contrast.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 apps/dashboard/src/DashboardApp.vue | 3 ++-
 core/src/components/AppMenu.vue     | 8 +++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/src/DashboardApp.vue b/apps/dashboard/src/DashboardApp.vue
index 78ea29d089b..3676f68fe10 100644
--- a/apps/dashboard/src/DashboardApp.vue
+++ b/apps/dashboard/src/DashboardApp.vue
@@ -465,7 +465,8 @@ export default {
 	background-attachment: fixed;
 
 	> h2 {
-		color: var(--color-primary-element-text);
+		// this is shown directly on the background which has `color-primary`, so we need `color-primary-text`
+		color: var(--color-primary-text);
 		text-align: center;
 		font-size: 32px;
 		line-height: 130%;
diff --git a/core/src/components/AppMenu.vue b/core/src/components/AppMenu.vue
index debf682081b..d6e5c9826dc 100644
--- a/core/src/components/AppMenu.vue
+++ b/core/src/components/AppMenu.vue
@@ -160,7 +160,7 @@ $header-icon-size: 20px;
 				width: 12px;
 				height: 5px;
 				border-radius: 3px;
-				background-color: var(--color-primary-element-text);
+				background-color: var(--color-primary-text);
 				left: 50%;
 				bottom: 6px;
 				display: block;
@@ -177,7 +177,8 @@ $header-icon-size: 20px;
 			width: calc(100% - 4px);
 			height: calc(100% - 4px);
 			margin: 2px;
-			color: var(--color-primary-element-text);
+			// this is shown directly on the background which has `color-primary`, so we need `color-primary-text`
+			color: var(--color-primary-text);
 			position: relative;
 		}
 
@@ -194,7 +195,8 @@ $header-icon-size: 20px;
 			opacity: 0;
 			position: absolute;
 			font-size: 12px;
-			color: var(--color-primary-element-text);
+			// this is shown directly on the background which has `color-primary`, so we need `color-primary-text`
+			color: var(--color-primary-text);
 			text-align: center;
 			left: 50%;
 			top: 45%;