MOBILE-4362 icon: Improve icon filter handling

Author: crazyserver

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);
-}

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));
             }
         }
     }

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);
         }
 
 

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);
 }

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

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