From 68d9d6cdd7dd69475de02023384a2253c396a901 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 25 Oct 2023 15:35:08 +0200
Subject: [PATCH] MOBILE-4362 icon: Improve icon filter handling

---
 .../components/activitymodules/activitymodules.scss       | 8 +-------
 src/core/components/mod-icon/mod-icon.scss                | 3 +--
 src/core/features/grades/pages/course/course.scss         | 4 +---
 .../global-search-result/global-search-result.scss        | 4 +---
 src/theme/theme.dark.scss                                 | 2 ++
 src/theme/theme.light.scss                                | 2 ++
 6 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/addons/block/activitymodules/components/activitymodules/activitymodules.scss b/src/addons/block/activitymodules/components/activitymodules/activitymodules.scss
index 6f1f7df99d6..c2aba2a65a5 100644
--- a/src/addons/block/activitymodules/components/activitymodules/activitymodules.scss
+++ b/src/addons/block/activitymodules/components/activitymodules/activitymodules.scss
@@ -1,13 +1,7 @@
 :host {
-    --mod-icon-filter: brightness(0);
-
     core-mod-icon {
         background: transparent;
         margin: 0;
-        --filter: var(--mod-icon-filter);
+        --filter: var(--module-icon-filter);
     }
 }
-
-:host-context(html.dark) {
-    --mod-icon-filter: brightness(0) invert(1);
-}
diff --git a/src/core/components/mod-icon/mod-icon.scss b/src/core/components/mod-icon/mod-icon.scss
index d7a2d78b00a..0be4daed3c0 100644
--- a/src/core/components/mod-icon/mod-icon.scss
+++ b/src/core/components/mod-icon/mod-icon.scss
@@ -7,7 +7,6 @@
     --icon-radius: var(--module-icon-radius, var(--radius-xs));
     --margin-end: 0px;
     --margin-vertical: 0px;
-    --filter: brightness(0) invert(1);
 
     margin-top: var(--margin-vertical);
     margin-bottom: var(--margin-vertical);
@@ -22,7 +21,7 @@
         &.#{$type} {
             background-color: var(--activity#{$type});
             img {
-                filter: var(--filter);
+                filter: var(--filter, brightness(0) invert(1));
             }
         }
     }
diff --git a/src/core/features/grades/pages/course/course.scss b/src/core/features/grades/pages/course/course.scss
index 60ff2ab0a64..388f624e414 100644
--- a/src/core/features/grades/pages/course/course.scss
+++ b/src/core/features/grades/pages/course/course.scss
@@ -8,7 +8,6 @@
     --even-cell-hover: var(--light);
     --icon-color: var(--gray-500);
     --border-color: var(--stroke);
-    --mod-icon-filter: brightness(0);
 
     .odd {
         --cell-background: var(--odd-cell-background);
@@ -29,7 +28,6 @@
     --even-cell-background: var(--gray-900);
     --even-cell-hover: var(--gray-700);
     --icon-color: var(--gray-200);
-    --mod-icon-filter: brightness(0) invert(1);
 }
 
 .core-grades-table {
@@ -89,7 +87,7 @@
             --padding: 0px;
             --size: 16px;
             background: transparent;
-            --filter: var(--mod-icon-filter);
+            --filter: var(--module-icon-filter);
         }
 
 
diff --git a/src/core/features/search/components/global-search-result/global-search-result.scss b/src/core/features/search/components/global-search-result/global-search-result.scss
index 824d1823c4c..ccfbe4d059b 100644
--- a/src/core/features/search/components/global-search-result/global-search-result.scss
+++ b/src/core/features/search/components/global-search-result/global-search-result.scss
@@ -4,7 +4,6 @@
     --core-global-search-result-content-color: var(--gray-700);
     --core-global-search-result-context-color: var(--gray-600);
     --core-global-search-result-icon-size: 16px;
-    --mod-icon-filter: brightness(0);
 
     h3 {
         font-size: 16px;
@@ -14,7 +13,7 @@
 
         core-mod-icon {
             --size: var(--core-global-search-result-icon-size);
-            --filter: var(--mod-icon-filter);
+            --filter: var(--module-icon-filter);
 
             margin-inline-end: var(--spacing-2);
             margin-top: 0px;
@@ -101,5 +100,4 @@
 :host-context(html.dark) ion-item {
     --core-global-search-result-content-color: var(--gray-400);
     --core-global-search-result-context-color: var(--gray-500);
-    --mod-icon-filter: brightness(0) invert(1);
 }
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index c4d0def6c1a..2ee8044b2db 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -130,6 +130,8 @@ html.dark {
     --core-login-input-background: var(--core-login-background);
     --core-login-input-color: var(--core-login-text-color);
 
+    --module-icon-filter: brightness(0) invert(1);
+
     --core-question-correct-color: var(--success-tint);
     --core-question-correct-color-bg: var(--success-shade);
     --core-question-incorrect-color: var(--danger);
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index cfe8b4574eb..2077ad9d78d 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -352,6 +352,8 @@ html {
     --core-messages-discussion-badge: var(--primary);
     --core-messages-discussion-badge-text: var(--white);
 
+    --module-icon-filter: brightness(0);
+
     --addon-forum-avatar-size: var(--core-avatar-size);
     --addon-forum-border-color: var(--stroke);
     --addon-forum-highlight-color: var(--light);