From 773633b7854467f6d4dcdff565d37db6f69845d4 Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Mon, 1 Dec 2025 17:01:33 +0200
Subject: [PATCH 1/2] fix(list): style component using sass theme

---
 .../themes/shared/item/list-item.common.scss     | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/list/themes/shared/item/list-item.common.scss b/src/components/list/themes/shared/item/list-item.common.scss
index b28a1c501..c45d560d5 100644
--- a/src/components/list/themes/shared/item/list-item.common.scss
+++ b/src/components/list/themes/shared/item/list-item.common.scss
@@ -25,6 +25,10 @@ $theme: $material;
 
 [part='start'] {
     color: var-get($theme, 'item-thumbnail-color');
+
+    ::slotted(igc-avatar) {
+        --icon-color: #{var-get($theme, 'item-thumbnail-color')};
+    }
 }
 
 [part='end'] {
@@ -45,6 +49,10 @@ $theme: $material;
 
     [part='start'] {
         color: var-get($theme, 'item-thumbnail-color-selected');
+
+        ::slotted(igc-avatar) {
+            --icon-color: #{var-get($theme, 'item-thumbnail-color-selected')};
+        }
     }
 
     [part='end'] {
@@ -67,6 +75,10 @@ $theme: $material;
 
     [part='start'] {
         color: var-get($theme, 'item-thumbnail-color-hover');
+
+        ::slotted(igc-avatar) {
+            --icon-color: #{var-get($theme, 'item-thumbnail-color-hover')};
+        }
     }
 
     [part='end'] {
@@ -88,6 +100,10 @@ $theme: $material;
 
     [part='start'] {
         color: var-get($theme, 'item-thumbnail-color-active');
+
+        ::slotted(igc-avatar) {
+            --icon-color: #{var-get($theme, 'item-thumbnail-color-active')};
+        }
     }
 
     [part='end'] {

From ff958de4774bb19ead595c123aed2ce074f22874 Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Tue, 2 Dec 2025 17:51:27 +0200
Subject: [PATCH 2/2] fix(list): selected & hover styles

---
 .../themes/shared/item/list-item.common.scss  | 50 +++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/list/themes/shared/item/list-item.common.scss b/src/components/list/themes/shared/item/list-item.common.scss
index c45d560d5..86e451fa4 100644
--- a/src/components/list/themes/shared/item/list-item.common.scss
+++ b/src/components/list/themes/shared/item/list-item.common.scss
@@ -35,31 +35,6 @@ $theme: $material;
     color: var-get($theme, 'item-action-color');
 }
 
-:host([selected]) {
-    color: var-get($theme, 'item-text-color-selected');
-    background: var-get($theme, 'item-background-selected');
-
-    [part='title'] {
-        color: var-get($theme, 'item-title-color-selected');
-    }
-
-    [part='subtitle'] {
-        color: var-get($theme, 'item-subtitle-color-selected');
-    }
-
-    [part='start'] {
-        color: var-get($theme, 'item-thumbnail-color-selected');
-
-        ::slotted(igc-avatar) {
-            --icon-color: #{var-get($theme, 'item-thumbnail-color-selected')};
-        }
-    }
-
-    [part='end'] {
-        color: var-get($theme, 'item-action-color-selected');
-    }
-}
-
 :host(:hover),
 :host(:focus-within) {
     background: var-get($theme, 'item-background-hover');
@@ -110,3 +85,28 @@ $theme: $material;
         color: var-get($theme, 'item-action-color-active');
     }
 }
+
+:host([selected]) {
+    color: var-get($theme, 'item-text-color-selected');
+    background: var-get($theme, 'item-background-selected');
+
+    [part='title'] {
+        color: var-get($theme, 'item-title-color-selected');
+    }
+
+    [part='subtitle'] {
+        color: var-get($theme, 'item-subtitle-color-selected');
+    }
+
+    [part='start'] {
+        color: var-get($theme, 'item-thumbnail-color-selected');
+
+        ::slotted(igc-avatar) {
+            --icon-color: #{var-get($theme, 'item-thumbnail-color-selected')};
+        }
+    }
+
+    [part='end'] {
+        color: var-get($theme, 'item-action-color-selected');
+    }
+}