refactor(themes): add dark variables, move base out of themes

src/components/grid.ts

@@ -26,10 +26,8 @@ import { asArray, autoGenerateColumns, getFilterOperandsFor } from '../internal/
 import { watch } from '../internal/watch.js';
 import type { FilterExpression } from '../operations/filter/types.js';
 import type { SortExpression } from '../operations/sort/types.js';
-import { styles as bootstrap } from '../styles/grid/themes/light/grid.bootstrap.css.js';
-import { styles as fluent } from '../styles/grid/themes/light/grid.fluent.css.js';
-import { styles as indigo } from '../styles/grid/themes/light/grid.indigo.css.js';
-import { styles as material } from '../styles/grid/themes/light/grid.material.css.js';
+import { styles } from '../styles/grid/themes/grid.base.css.js';
+import { all } from '../styles/grid/themes/themes.js';
 import IgcGridLiteCell from './cell.js';
 import IgcFilterRow from './filter-row.js';
 import IgcGridLiteHeaderRow from './header-row.js';
@@ -137,7 +135,7 @@ export class IgcGridLite<T extends object> extends EventEmitterBase<IgcGridLiteE
     return GRID_TAG;
   }
 
-  public static override styles = bootstrap;
+  public static override styles = styles;
 
   public static register() {
     registerComponent(
@@ -317,10 +315,7 @@ export class IgcGridLite<T extends object> extends EventEmitterBase<IgcGridLiteE
   constructor() {
     super();
 
-    addThemingController(this, {
-      light: { bootstrap, material, fluent, indigo },
-      dark: { bootstrap, material, fluent, indigo },
-    });
+    addThemingController(this, all);
   }
 
   /**

src/internal/theming.ts

@@ -10,7 +10,7 @@ import { adoptStyles, css, isServer } from 'lit';
 type Theme = 'material' | 'bootstrap' | 'indigo' | 'fluent';
 type ThemeVariant = 'light' | 'dark';
 
-type Themes = {
+export type Themes = {
   light: {
     [K in Theme | 'shared']?: CSSResult;
   };

src/styles/grid/themes/dark/grid.bootstrap.scss

@@ -0,0 +1,48 @@
+@use "../../../../../node_modules/igniteui-theming/sass/color/functions" as *;
+@use "../../../../../node_modules/igniteui-theming/sass/typography/functions" as *;
+
+:host {
+    // Header row
+    --header-border-color: #{color(null, gray, 200, 0.28)};
+
+    // Body row
+    --row-hover-background: #{color(null, gray, 100)};
+    --row-hover-text-color: #{contrast-color(null, gray, 100)};
+    --row-border-color: #{color(null, gray, 200, 0.24)};
+
+    // Body cell
+    --cell-active-border-color: #{color(null, primary, 500)};
+
+    // TODO: Common?
+    // Grid body
+    --content-background: #{color(null, gray, 50)};
+    --content-text-color: #{contrast-color(null, gray, 50)};
+
+    // Header row
+    --header-background: #{color(null, surface, 500)};
+    --header-text-color: #{contrast-color(null, surface, 500)};
+    --header-border-width: #{rem(1px)};
+    --header-border-style: solid;
+    --filtering-header-background: #{color(null, gray, 50)};
+
+    // Filtering row
+    --filtering-row-background: #{color(null, gray, 50)};
+    --filtering-row-text-color: #{contrast-color(null, gray, 50)};
+
+    // Header cell
+    --sorted-header-icon-color: #{color(null, primary, 500)};
+
+    // Icon color
+    --icon-color: 'currentColor';
+
+    // Body row
+    --row-even-background: #{color(null, gray, 50)};
+    --row-even-text-color: #{contrast-color(null, gray, 50)};
+    --row-odd-background: #{color(null, gray, 50)};
+    --row-odd-text-color: #{contrast-color(null, gray, 50)};
+    --row-border-style: solid;
+    --row-border-width: #{rem(1px)};
+
+    // Body Cell
+    --grid-resize-line-color: #{color(null, primary, 500)};
+}

src/styles/grid/themes/dark/grid.fluent.scss

@@ -0,0 +1,48 @@
+@use "../../../../../node_modules/igniteui-theming/sass/color/functions" as *;
+@use "../../../../../node_modules/igniteui-theming/sass/typography/functions" as *;
+
+:host {
+    // Header row/cell
+    --header-background: #{color(null, gray, 100)};
+    --header-text-color: #{contrast-color(null, gray, 100)};
+    --header-border-color: #{color(null, gray, 200, 0.24)};
+
+    // Body Row/cell
+    --row-hover-background: #{color(null, gray, 100)};
+    --row-hover-text-color: #{contrast-color(null, gray, 100)};
+    --row-border-color: #{color(null, gray, 200, 0.24)};
+
+    // Body cell
+    --cell-active-border-color: #{color(null, primary, 100)};
+
+    // TODO: Common?
+    // Grid body
+    --content-background: #{var(color(null, gray, 50))};
+    --content-text-color: #{var(contrast-color(null, gray, 50))};
+
+    // Header row
+    --header-border-width: #{rem(1px)};
+    --header-border-style: solid;
+    --filtering-header-background: #{color(null, gray, 50)};
+
+    // Filtering row
+    --filtering-row-background: #{color(null, gray, 50)};
+    --filtering-row-text-color: #{contrast-color(null, gray, 50)};
+
+    // Header cell
+    --sorted-header-icon-color: #{color(null, secondary, 500)};
+
+    // Icon color
+    --icon-color: 'currentColor';
+
+    // Body row
+    --row-even-background: #{color(null, gray, 50)};
+    --row-even-text-color: #{contrast-color(null, gray, 50)};
+    --row-odd-background: #{color(null, gray, 50)};
+    --row-odd-text-color: #{contrast-color(null, gray, 50)};
+    --row-border-style: var(--header-border-style);
+    --row-border-width: var(--header-border-width);
+
+    // Body cell
+    --grid-resize-line-color: #{color(null, primary, 500)};
+}

src/styles/grid/themes/dark/grid.indigo.scss

@@ -0,0 +1,48 @@
+@use "../../../../../node_modules/igniteui-theming/sass/color/functions" as *;
+@use "../../../../../node_modules/igniteui-theming/sass/typography/functions" as *;
+
+:host {
+    // Grid body
+    --content-background: #{color(null, gray, 50)};
+    --content-text-color: #{contrast-color(null, gray, 50)};
+
+    // Header row
+    --header-background: #{color(null, surface, 500)};
+    --header-text-color: #{contrast-color(null, surface, 500)};
+    --header-border-color: #{color(null, gray, 100, 0.24)};
+
+    // Header cell
+    --sorted-header-icon-color: #{contrast-color(null, surface, 500)};
+
+    // Body row
+    --row-hover-background: #{color(null, gray, 200)};
+    --row-even-background: #{color(null, gray, 100)};
+    --row-even-text-color: #{contrast-color(null, gray, 100)};
+    --row-odd-background: #{color(null, gray, 100)};
+    --row-odd-text-color: #{contrast-color(null, gray, 100)};
+    --row-border-color: #{color(null, gray, 50, 0.24)};
+
+    // Body cell
+    --cell-active-border-color: #{contrast-color(null, surface, 500)};
+
+    // TODO: Common?
+    // Header row
+    --header-border-width: #{rem(1px)};
+    --header-border-style: solid;
+    --filtering-header-background: #{color(null, gray, 50)};
+
+    // Filtering row
+    --filtering-row-background: #{color(null, gray, 50)};
+    --filtering-row-text-color: #{contrast-color(null, gray, 50)};
+
+    // Icon color
+    --icon-color: 'currentColor';
+
+    // Body Row
+    --row-hover-text-color: #{contrast-color(null, gray, 200)};
+    --row-border-style: var(--header-border-style);
+    --row-border-width: var(--header-border-width);
+
+    // Body cell
+    --grid-resize-line-color: #{color(null, primary, 500)};
+}

src/styles/grid/themes/dark/grid.material.scss

@@ -0,0 +1,48 @@
+@use "../../../../../node_modules/igniteui-theming/sass/color/functions" as *;
+@use "../../../../../node_modules/igniteui-theming/sass/typography/functions" as *;
+
+:host {
+    // Grid body
+    --content-text-color: #{color(null, gray, 800)};
+
+    // Header row
+    --header-border-color: #{color(null, gray, 200, 0.24)};
+
+    // Header cell
+    --sorted-header-icon-color: #{color(null, secondary, 500)};
+
+    // Body row
+    --row-hover-background: #{color(null, gray, 100)};
+    --row-hover-text-color: #{contrast-color(null, gray, 100)};
+    --row-border-color: #{color(null, gray, 200, 0.24)};
+
+    // TODO: Common?
+    // Grid body
+    --content-background: #{var(color(null, gray, 50))};
+
+    // Header row
+    --header-background: #{color(null, gray, 100)};
+    --header-text-color: #{color(null, gray, 800, .7)};
+    --header-border-width: #{rem(1px)};
+    --header-border-style: solid;
+    --filtering-header-background: #{color(null, gray, 50)};
+
+    // Filtering row
+    --filtering-row-background: #{color(null, gray, 50)};
+    --filtering-row-text-color: #{contrast-color(null, gray, 50)};
+
+    // Icon color
+    --icon-color: 'currentColor';
+
+    // Body Row
+    --row-even-background: #{color(null, gray, 50)};
+    --row-even-text-color: #{color(null, gray, 800)};
+    --row-odd-background: #{color(null, gray, 50)};
+    --row-odd-text-color: #{color(null, gray, 800)};
+    --row-border-style: var(--header-border-style);
+    --row-border-width: var(--header-border-width);
+
+    // Body cell
+    --cell-active-border-color: #{color(null, secondary, 500)};
+    --grid-resize-line-color: #{color(null, secondary, 500)};
+}

src/styles/grid/_grid.base.scss → src/styles/grid/themes/grid.base.scss

@@ -1,4 +1,4 @@
-@use '../common' as *;
+@use '../../common' as *;
 
 $content-background: var(--igx-content-background, var(--content-background));
 $content-text-color: var(--igx-content-text-color, var(--content-text-color));

src/styles/grid/themes/light/grid.bootstrap.scss

@@ -1,6 +1,5 @@
 @use '../../../../../node_modules/igniteui-theming/sass/color/functions' as *;
 @use '../../../../../node_modules/igniteui-theming/sass/typography/functions' as *;
-@use '../../grid.base';
 
 :host {
     // Grid body

src/styles/grid/themes/light/grid.fluent.scss

@@ -1,6 +1,5 @@
 @use '../../../../../node_modules/igniteui-theming/sass/color/functions' as *;
 @use '../../../../../node_modules/igniteui-theming/sass/typography/functions' as *;
-@use '../../grid.base';
 
 :host {
     // Grid body

src/styles/grid/themes/light/grid.indigo.scss

@@ -1,6 +1,5 @@
 @use '../../../../../node_modules/igniteui-theming/sass/color/functions' as *;
 @use '../../../../../node_modules/igniteui-theming/sass/typography/functions' as *;
-@use '../../grid.base';
 
 :host {
     // Grid body

src/styles/grid/themes/light/grid.material.scss

@@ -1,6 +1,5 @@
 @use '../../../../../node_modules/igniteui-theming/sass/color/functions' as *;
 @use '../../../../../node_modules/igniteui-theming/sass/typography/functions' as *;
-@use '../../grid.base';
 
 :host {
     // Grid body

src/styles/grid/themes/themes.ts

@@ -0,0 +1,45 @@
+import { css } from 'lit';
+
+import type { Themes } from '../../../internal/theming.js';
+// Dark Overrides
+import { styles as bootstrapDark } from './dark/grid.bootstrap.css.js';
+import { styles as fluentDark } from './dark/grid.fluent.css.js';
+import { styles as indigoDark } from './dark/grid.indigo.css.js';
+import { styles as materialDark } from './dark/grid.material.css.js';
+// Light Overrides
+import { styles as bootstrapLight } from './light/grid.bootstrap.css.js';
+import { styles as fluentLight } from './light/grid.fluent.css.js';
+import { styles as indigoLight } from './light/grid.indigo.css.js';
+import { styles as materialLight } from './light/grid.material.css.js';
+
+const light = {
+  bootstrap: css`
+    ${bootstrapLight}
+  `,
+  material: css`
+    ${materialLight}
+  `,
+  fluent: css`
+    ${fluentLight}
+  `,
+  indigo: css`
+    ${indigoLight}
+  `,
+};
+
+const dark = {
+  bootstrap: css`
+    ${bootstrapDark}
+  `,
+  material: css`
+    ${materialDark}
+  `,
+  fluent: css`
+    ${fluentDark}
+  `,
+  indigo: css`
+    ${indigoDark}
+  `,
+};
+
+export const all: Themes = { light, dark };