From 58abed20599d85eb71f70edef77a7b7aaec043bc Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Wed, 19 Oct 2022 02:07:12 +0000
Subject: Invert header icons on bright preset backgrounds

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 core/css/server.css              | 2 +-
 core/css/styles.css              | 2 +-
 core/css/styles.scss             | 2 +-
 core/src/components/AppMenu.vue  | 3 +--
 core/src/views/UnifiedSearch.vue | 4 ++++
 5 files changed, 8 insertions(+), 5 deletions(-)

(limited to 'core')

diff --git a/core/css/server.css b/core/css/server.css
index 99375731703..53a44b55084 100644
--- a/core/css/server.css
+++ b/core/css/server.css
@@ -859,7 +859,7 @@ span.ui-icon {
   padding: 14px;
   content: " ";
   background-image: var(--original-icon-contacts-white);
-  filter: var(--primary-invert-if-bright);
+  filter: var(--background-image-invert-if-bright);
 }
 #contactsmenu .menutoggle:hover, #contactsmenu .menutoggle:focus, #contactsmenu .menutoggle:active {
   opacity: 1 !important;
diff --git a/core/css/styles.css b/core/css/styles.css
index c60b5dc396c..de07bf1d3a7 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -858,7 +858,7 @@ span.ui-icon {
   padding: 14px;
   content: " ";
   background-image: var(--original-icon-contacts-white);
-  filter: var(--primary-invert-if-bright);
+  filter: var(--background-image-invert-if-bright);
 }
 #contactsmenu .menutoggle:hover, #contactsmenu .menutoggle:focus, #contactsmenu .menutoggle:active {
   opacity: 1 !important;
diff --git a/core/css/styles.scss b/core/css/styles.scss
index bfc570426c3..b6583b05f7f 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -907,7 +907,7 @@ span.ui-icon {
 			content: ' ';
 			// Force white
 			background-image: var(--original-icon-contacts-white);
-			filter: var(--primary-invert-if-bright);
+			filter: var(--background-image-invert-if-bright);
 		}
 
 		&:hover,
diff --git a/core/src/components/AppMenu.vue b/core/src/components/AppMenu.vue
index 2ee91c30f40..b03ef0adf67 100644
--- a/core/src/components/AppMenu.vue
+++ b/core/src/components/AppMenu.vue
@@ -144,6 +144,7 @@ $header-icon-size: 20px;
 		position: relative;
 		display: flex;
 		opacity: .7;
+		filter: var(--background-image-invert-if-bright);
 
 		&.app-menu-entry__active {
 			opacity: 1;
@@ -183,7 +184,6 @@ $header-icon-size: 20px;
 			width: $header-icon-size;
 			height: $header-icon-size;
 			padding: calc((100% - $header-icon-size) / 2);
-			filter: var(--primary-invert-if-bright);
 		}
 
 		.app-menu-entry--label {
@@ -269,7 +269,6 @@ $header-icon-size: 20px;
 		}
 
 		img {
-			filter: var(--background-invert-if-bright);
 			width: $header-icon-size;
 			height: $header-icon-size;
 			padding: calc((50px - $header-icon-size) / 2);
diff --git a/core/src/views/UnifiedSearch.vue b/core/src/views/UnifiedSearch.vue
index d13ba9114bc..7811d1e497f 100644
--- a/core/src/views/UnifiedSearch.vue
+++ b/core/src/views/UnifiedSearch.vue
@@ -718,6 +718,10 @@ $input-height: 34px;
 $input-padding: 6px;
 
 .unified-search {
+	&__trigger {
+		filter: var(--background-image-invert-if-bright);
+	}
+
 	&__input-wrapper {
 		position: sticky;
 		// above search results
-- 
cgit v1.2.3