From 5f4003e75d49d17386901b4aedd0e487a490ffa9 Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Mon, 13 Jan 2025 12:15:16 +0200
Subject: [PATCH] fix(list): consume all css vars from schemas

---
 src/components/list/list.ts                   |  3 +-
 .../list/themes/container.base.scss           |  5 --
 src/components/list/themes/container.ts       |  5 +-
 .../shared/container/list.bootstrap.scss      |  4 +-
 .../{list.material.scss => list.common.scss}  |  7 ++-
 .../shared/item/list-item.bootstrap.scss      | 15 ------
 .../themes/shared/item/list-item.common.scss  | 51 +++++++++++++------
 .../themes/shared/item/list-item.fluent.scss  | 11 ----
 .../themes/shared/item/list-item.indigo.scss  |  3 +-
 9 files changed, 46 insertions(+), 58 deletions(-)
 rename src/components/list/themes/shared/container/{list.material.scss => list.common.scss} (57%)

diff --git a/src/components/list/list.ts b/src/components/list/list.ts
index 6595dd6d2..b72f6a050 100644
--- a/src/components/list/list.ts
+++ b/src/components/list/list.ts
@@ -6,6 +6,7 @@ import IgcListHeaderComponent from './list-header.js';
 import IgcListItemComponent from './list-item.js';
 import { styles } from './themes/container.base.css.js';
 import { all } from './themes/container.js';
+import { styles as shared } from './themes/shared/container/list.common.css.js';
 
 /**
  * Displays a collection of data items in a templatable list format.
@@ -17,7 +18,7 @@ import { all } from './themes/container.js';
 @themes(all)
 export default class IgcListComponent extends LitElement {
   public static readonly tagName = 'igc-list';
-  public static override styles = styles;
+  public static override styles = [styles, shared];
 
   /* blazorSuppress */
   public static register() {
diff --git a/src/components/list/themes/container.base.scss b/src/components/list/themes/container.base.scss
index c195d3419..b053ab463 100644
--- a/src/components/list/themes/container.base.scss
+++ b/src/components/list/themes/container.base.scss
@@ -1,8 +1,5 @@
 @use 'styles/common/component';
 @use 'styles/utilities' as *;
-@use './light/themes' as *;
-
-$theme: $material;
 
 :host {
     display: flex;
@@ -10,6 +7,4 @@ $theme: $material;
     font-family: var(--ig-font-family);
     overflow: hidden auto;
     height: auto;
-    background: var-get($theme, 'background');
-    border-radius: var-get($theme, 'border-radius');
 }
diff --git a/src/components/list/themes/container.ts b/src/components/list/themes/container.ts
index 81afd41fe..b610ac93a 100644
--- a/src/components/list/themes/container.ts
+++ b/src/components/list/themes/container.ts
@@ -17,7 +17,6 @@ import { styles as sharedLight } from './light/container/list.shared.css.js';
 import { styles as bootstrap } from './shared/container/list.bootstrap.css.js';
 import { styles as fluent } from './shared/container/list.fluent.css.js';
 import { styles as indigo } from './shared/container/list.indigo.css.js';
-import { styles as material } from './shared/container/list.material.css.js';
 
 const light = {
   shared: css`
@@ -27,7 +26,7 @@ const light = {
     ${bootstrap} ${bootstrapLight}
   `,
   material: css`
-    ${material} ${materialLight}
+    ${materialLight}
   `,
   fluent: css`
     ${fluent} ${fluentLight}
@@ -45,7 +44,7 @@ const dark = {
     ${bootstrap} ${bootstrapDark}
   `,
   material: css`
-    ${material} ${materialDark}
+    ${materialDark}
   `,
   fluent: css`
     ${fluent} ${fluentDark}
diff --git a/src/components/list/themes/shared/container/list.bootstrap.scss b/src/components/list/themes/shared/container/list.bootstrap.scss
index f6f35e3bd..d42b1abb5 100644
--- a/src/components/list/themes/shared/container/list.bootstrap.scss
+++ b/src/components/list/themes/shared/container/list.bootstrap.scss
@@ -6,7 +6,5 @@ $theme: $bootstrap;
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')}) !important;
 
-    background: var-get($theme, 'background');
-    border: rem(1px) solid var-get($theme, 'border-color');
-    border-radius: var-get($theme, 'border-radius');
+    border: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
 }
diff --git a/src/components/list/themes/shared/container/list.material.scss b/src/components/list/themes/shared/container/list.common.scss
similarity index 57%
rename from src/components/list/themes/shared/container/list.material.scss
rename to src/components/list/themes/shared/container/list.common.scss
index 95b089100..8f8bde80a 100644
--- a/src/components/list/themes/shared/container/list.material.scss
+++ b/src/components/list/themes/shared/container/list.common.scss
@@ -1,8 +1,11 @@
 @use 'styles/utilities' as *;
 @use '../../light/themes' as *;
 
-$theme: $material;
+$theme: $base;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')}) !important;
-}
+
+    background: var-get($theme, 'background');
+    border-radius: var-get($theme, 'border-radius');
+}
\ No newline at end of file
diff --git a/src/components/list/themes/shared/item/list-item.bootstrap.scss b/src/components/list/themes/shared/item/list-item.bootstrap.scss
index 648a479cf..b111b263b 100644
--- a/src/components/list/themes/shared/item/list-item.bootstrap.scss
+++ b/src/components/list/themes/shared/item/list-item.bootstrap.scss
@@ -1,20 +1,5 @@
 @use 'styles/utilities' as *;
-@use '../../light/themes' as *;
-
-$theme: $bootstrap;
-
-:host {
-    border-bottom: rem(1px) solid var-get($theme, 'border-color');
-}
-
-:host(:last-of-type) {
-    border-bottom: none;
-}
 
 [part='title'] {
     @include type-style('body-1');
 }
-
-[part='subtitle'] {
-    @include type-style('body-2');
-}
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 f70b40800..ee4c4e333 100644
--- a/src/components/list/themes/shared/item/list-item.common.scss
+++ b/src/components/list/themes/shared/item/list-item.common.scss
@@ -7,19 +7,33 @@ $theme: $material;
     border-radius: var-get($theme, 'item-border-radius');
     color: var-get($theme, 'item-text-color');
     background: var-get($theme, 'item-background');
+    border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
 }
 
-::slotted(igc-icon) {
+:host(:last-of-type) {
+    border-bottom: none;
+}
+
+[part='title'] {
+    color: var-get($theme, 'item-title-color');
+}
+
+[part='subtitle'] {
+    color: var-get($theme, 'item-subtitle-color');
+}
+
+[part='start'] {
+    color: var-get($theme, 'item-thumbnail-color');
+}
+
+[part='end'] {
     color: var-get($theme, 'item-action-color');
 }
 
 :host(:hover),
 :host(:focus-within) {
     background: var-get($theme, 'item-background-hover');
-
-    ::slotted(igc-icon) {
-        color: var-get($theme, 'item-action-color-hover');
-    }
+    color: var-get($theme, 'item-text-color-hover');
 
     [part='title'] {
         color: var-get($theme, 'item-title-color-hover');
@@ -38,18 +52,23 @@ $theme: $material;
     }
 }
 
-[part='title'] {
-    color: var-get($theme, 'item-title-color');
-}
+:host(:active) {
+    color: var-get($theme, 'item-text-color-active');
+    background: var-get($theme, 'item-background-active');
 
-[part='subtitle'] {
-    color: var-get($theme, 'item-subtitle-color');
-}
+    [part='title'] {
+        color: var-get($theme, 'item-title-color-active');
+    }
 
-[part='start'] {
-    color: var-get($theme, 'item-thumbnail-color');
-}
+    [part='subtitle'] {
+        color: var-get($theme, 'item-subtitle-color-active');
+    }
 
-[part='end'] {
-    color: var-get($theme, 'item-action-color');
+    [part='start'] {
+        color: var-get($theme, 'item-thumbnail-color-active');
+    }
+
+    [part='end'] {
+        color: var-get($theme, 'item-action-color-active');
+    }
 }
diff --git a/src/components/list/themes/shared/item/list-item.fluent.scss b/src/components/list/themes/shared/item/list-item.fluent.scss
index 3f87f657f..600868c36 100644
--- a/src/components/list/themes/shared/item/list-item.fluent.scss
+++ b/src/components/list/themes/shared/item/list-item.fluent.scss
@@ -1,15 +1,4 @@
 @use 'styles/utilities' as *;
-@use '../../light/themes' as *;
-
-$theme: $fluent;
-
-:host {
-    border-bottom: rem(1px) solid var-get($theme, 'border-color');
-}
-
-:host(:last-of-type) {
-    border-bottom: none;
-}
 
 [part='title'],
 [part='subtitle'] {
diff --git a/src/components/list/themes/shared/item/list-item.indigo.scss b/src/components/list/themes/shared/item/list-item.indigo.scss
index 8c924174e..d03429801 100644
--- a/src/components/list/themes/shared/item/list-item.indigo.scss
+++ b/src/components/list/themes/shared/item/list-item.indigo.scss
@@ -10,8 +10,7 @@
     }
 }
 
-[part='title'],
-[part='subtitle'] {
+[part='title'] {
     @include type-style('body-2');
 }