fix(list): theme variables replicated for all list components (#1853)

This PR fixes a critical issue with the list component that prevents it
from being styled using CSS variables alone.

The component includes the CSS variables for the list theme in all
list-related components (list-item, list-header, and the list host
itself), forcing people to have to override the variables in all three
instances.

This PR includes the theme CSS variables only in the list host, while
component specific overrides for the item and header are preserved and
carried by each component separately.

Author: simeonoff

src/components/list/themes/dark/header/list-header.bootstrap.scss

@@ -1,47 +1,17 @@
 import { css } from 'lit';
 
-// Shared Styles
 import type { Themes } from '../../../theming/types.js';
-// Dark Overrides
-import { styles as bootstrapDark } from './dark/header/list-header.bootstrap.css.js';
-import { styles as fluentDark } from './dark/header/list-header.fluent.css.js';
-import { styles as indigoDark } from './dark/header/list-header.indigo.css.js';
-import { styles as materialDark } from './dark/header/list-header.material.css.js';
-// Light Overrides
-import { styles as bootstrapLight } from './light/header/list-header.bootstrap.css.js';
-import { styles as fluentLight } from './light/header/list-header.fluent.css.js';
-import { styles as indigoLight } from './light/header/list-header.indigo.css.js';
-import { styles as materialLight } from './light/header/list-header.material.css.js';
-// Shared Styles
 import { styles as indigo } from './shared/header/list-header.indigo.css.js';
 
 const light = {
-  material: css`
-    ${materialLight}
-  `,
-  bootstrap: css`
-    ${bootstrapLight}
-  `,
-  fluent: css`
-    ${fluentLight}
-  `,
   indigo: css`
-    ${indigo} ${indigoLight}
+    ${indigo}
   `,
 };
 
 const dark = {
-  material: css`
-    ${materialDark}
-  `,
-  bootstrap: css`
-    ${bootstrapDark}
-  `,
-  fluent: css`
-    ${fluentDark}
-  `,
   indigo: css`
-    ${indigo} ${indigoDark}
+    ${indigo}
   `,
 };
 

src/components/list/themes/dark/header/list-header.fluent.scss

@@ -1,48 +1,32 @@
 import { css } from 'lit';
 
 import type { Themes } from '../../../theming/types.js';
-// Dark Overrides
-import { styles as bootstrapDark } from './dark/item/list-item.bootstrap.css.js';
-import { styles as fluentDark } from './dark/item/list-item.fluent.css.js';
-import { styles as indigoDark } from './dark/item/list-item.indigo.css.js';
-import { styles as materialDark } from './dark/item/list-item.material.css.js';
-// Light Overrides
-import { styles as bootstrapLight } from './light/item/list-item.bootstrap.css.js';
-import { styles as fluentLight } from './light/item/list-item.fluent.css.js';
-import { styles as indigoLight } from './light/item/list-item.indigo.css.js';
-import { styles as materialLight } from './light/item/list-item.material.css.js';
 // Shared Styles
 import { styles as bootstrap } from './shared/item/list-item.bootstrap.css.js';
 import { styles as fluent } from './shared/item/list-item.fluent.css.js';
 import { styles as indigo } from './shared/item/list-item.indigo.css.js';
 
 const light = {
   bootstrap: css`
-    ${bootstrap} ${bootstrapLight}
-  `,
-  material: css`
-    ${materialLight}
+    ${bootstrap}
   `,
   fluent: css`
-    ${fluent} ${fluentLight}
+    ${fluent}
   `,
   indigo: css`
-    ${indigo} ${indigoLight}
+    ${indigo}
   `,
 };
 
 const dark = {
   bootstrap: css`
-    ${bootstrap} ${bootstrapDark}
-  `,
-  material: css`
-    ${materialDark}
+    ${bootstrap}
   `,
   fluent: css`
-    ${fluent} ${fluentDark}
+    ${fluent}
   `,
   indigo: css`
-    ${indigo} ${indigoDark}
+    ${indigo}
   `,
 };