[stable27] fix: Ensure app menu entries and dashboard welcome message have enough contrast

apps/dashboard/src/DashboardApp.vue

@@ -259,7 +259,7 @@
 				}
 				if (element) {
 					this.callbacksStatus[app](element[0])
 					Vue.set(this.statuses, app, { mounted: true })
 				} else {
 					console.error('Failed to register panel in the frontend as no backend data was provided for ' + app)
 				}
@@ -308,16 +308,16 @@
 		 * @param {Function} callback The callback function to register a panel which gets the DOM element passed as parameter
 		 */
 		register(app, callback) {
 			Vue.set(this.callbacks, app, callback)
 		},
 		registerStatus(app, callback) {
 			// always save callbacks in case user enables the status later
 			Vue.set(this.allCallbacksStatus, app, callback)
 			// register only if status is enabled or missing from config
 			if (this.isStatusActive(app)) {
 				this.registeredStatus.push(app)
 				this.$nextTick(() => {
 					Vue.set(this.callbacksStatus, app, callback)
 				})
 			}
 		},
@@ -465,7 +465,8 @@
 	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%;

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%;