Merge pull request #42283 from nextcloud/fix/maxcontrast-blur

fix: Ensure correct max contrast color is used when blurred background is used

Author: Pytal

apps/dashboard/src/DashboardApp.vue

@@ -485,6 +485,9 @@ export default {
 }
 
 .panel, .panels > div {
+	// Ensure the maxcontrast color is set for the background
+	--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
+
 	width: 320px;
 	max-width: 100%;
 	margin: 16px;
@@ -591,6 +594,9 @@ export default {
 .edit-panels,
 .statuses ::v-deep .action-item .action-item__menutoggle,
 .statuses ::v-deep .action-item.action-item--open .action-item__menutoggle {
+	// Ensure the maxcontrast color is set for the background
+	--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
+
 	background-color: var(--color-main-background-blur);
 	-webkit-backdrop-filter: var(--filter-background-blur);
 	backdrop-filter: var(--filter-background-blur);

apps/user_status/src/UserStatus.vue

@@ -176,6 +176,9 @@ export default {
 
 <style lang="scss" scoped>
 .user-status-menu-item {
+	// Ensure the maxcontrast color is set for the background
+	--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
+
 	width: auto;
 	min-width: 44px;
 	height: 44px;

core/css/apps.css

@@ -121,6 +121,8 @@ kbd {
 #app-navigation:not(.vue) {
 	// We use fixed variable for the pill style as we have larger containers around nested list entries
 	--border-radius-pill: calc(var(--default-clickable-area) / 2);
+	// Ensure the maxcontrast color is set for the background
+	--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
 
 	width: variables.$navigation-width;
 	z-index: 500;