fix(list): consume all css vars from schemas (#1538)

Author: SisIvanova

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() {

src/components/list/themes/container.base.scss

@@ -1,15 +1,10 @@
 @use 'styles/common/component';
 @use 'styles/utilities' as *;
-@use './light/themes' as *;
-
-$theme: $material;
 
 :host {
     display: flex;
     flex-flow: column nowrap;
     font-family: var(--ig-font-family);
     overflow: hidden auto;
     height: auto;
-    background: var-get($theme, 'background');
-    border-radius: var-get($theme, 'border-radius');
 }

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}

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

…emes/shared/container/list.material.scss …themes/shared/container/list.common.scsssrc/components/list/themes/shared/container/list.material.scss renamed to src/components/list/themes/shared/container/list.common.scss src/components/list/themes/shared/container/list.material.scss renamed to 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');
+}

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

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

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'] {

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