feat: Use unified theming implementation (#36)

Author: rkaraivanov

package-lock.json

@@ -46,7 +46,7 @@
   "dependencies": {
     "@lit-labs/virtualizer": "^2.1.1",
     "@lit/context": "^1.1.6",
-    "igniteui-webcomponents": "~6.4.0",
+    "igniteui-webcomponents": "~6.5.0",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -68,10 +68,10 @@
     "postcss": "^8.5.6",
     "sass-embedded": "^1.97.2",
     "sinon": "^21.0.1",
-    "stylelint": "^16.26.1",
-    "stylelint-config-standard-scss": "^16.0.0",
+    "stylelint": "^17.0.0",
+    "stylelint-config-standard-scss": "^17.0.0",
     "stylelint-prettier": "^5.0.3",
-    "stylelint-scss": "^6.14.0",
+    "stylelint-scss": "^7.0.0",
     "tslib": "^2.8.1",
     "typedoc": "^0.28.16",
     "typescript": "^5.9.3",

package.json

@@ -31,7 +31,7 @@
   "dependencies": {
     "@lit-labs/virtualizer": "~2.1.0",
     "@lit/context": "~1.1.5",
-    "igniteui-webcomponents": "~6.4.0",
+    "igniteui-webcomponents": "~6.5.0",
     "lit": "^3.3.0"
   }
 }

scripts/_package.json

@@ -1,6 +1,7 @@
 import { ContextProvider } from '@lit/context';
 import type { RenderItemFunction } from '@lit-labs/virtualizer/virtualize.js';
 import {
+  θaddThemingController as addThemingController,
   IgcButtonComponent,
   IgcChipComponent,
   IgcDropdownComponent,
@@ -19,7 +20,6 @@ import { getElementFromEventPath } from '../internal/element-from-event-path.js'
 import { EventEmitterBase } from '../internal/mixins/event-emitter.js';
 import { registerComponent } from '../internal/register.js';
 import { GRID_TAG } from '../internal/tags.js';
-import { addThemingController } from '../internal/theming.js';
 import type {
   ColumnConfiguration,
   DataPipelineConfiguration,

src/components/grid.ts

@@ -1,5 +1,8 @@
 import { consume } from '@lit/context';
-import { IgcIconComponent } from 'igniteui-webcomponents';
+import {
+  θaddThemingController as addThemingController,
+  IgcIconComponent,
+} from 'igniteui-webcomponents';
 import { html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import type { StateController } from '../controllers/state.js';
@@ -12,7 +15,6 @@ import { GRID_STATE_CONTEXT } from '../internal/context.js';
 import { partMap } from '../internal/part-map.js';
 import { registerComponent } from '../internal/register.js';
 import { GRID_HEADER_TAG } from '../internal/tags.js';
-import { addThemingController } from '../internal/theming.js';
 import type { ColumnConfiguration, IgcHeaderContext } from '../internal/types.js';
 import { styles } from '../styles/header-cell/header-cell.css.js';
 import { all } from '../styles/themes/grid-header-themes.js';
@@ -55,6 +57,7 @@ export default class IgcGridLiteHeader<T extends object> extends LitElement {
 
     addThemingController(this, all);
   }
+
   #addResizeEventHandlers() {
     const config: AddEventListenerOptions = { once: true };
 

src/components/header.ts

@@ -1,4 +1,5 @@
-import type { ReactiveControllerHost, TemplateResult } from 'lit';
+import type { Theme } from 'igniteui-webcomponents';
+import type { CSSResult, ReactiveControllerHost, TemplateResult } from 'lit';
 import type IgcGridLiteCell from '../components/cell.js';
 import type { IgcGridLite } from '../components/grid.js';
 import type IgcGridLiteHeader from '../components/header.js';
@@ -8,6 +9,15 @@ import type { SortComparer } from '../operations/sort/types.js';
 export type NavigationState = 'previous' | 'current';
 export type GridHost<T extends object> = ReactiveControllerHost & IgcGridLite<T>;
 
+export type Themes = {
+  light: {
+    [K in Theme | 'shared']?: CSSResult;
+  };
+  dark: {
+    [K in Theme | 'shared']?: CSSResult;
+  };
+};
+
 type FlatKeys<T> = keyof T;
 type DotPaths<T> = {
   [K in keyof T & string]: T[K] extends object

src/internal/theming.ts

@@ -1,26 +1,25 @@
 import { css } from 'lit';
 
-import type { Themes } from '../../internal/theming.js';
-
+import type { Themes } from '../../internal/types.js';
 // Shared
 import { styles as bootstrap } from './shared/header.bootstrap.css.js';
 import { styles as fluent } from './shared/header.fluent.css.js';
 
 const light = {
   bootstrap: css`
-      ${bootstrap}
+    ${bootstrap}
   `,
   fluent: css`
-      ${fluent}
+    ${fluent}
   `,
 };
 
 const dark = {
   bootstrap: css`
-      ${bootstrap}
+    ${bootstrap}
   `,
   fluent: css`
-      ${fluent}
+    ${fluent}
   `,
 };
 

src/internal/types.ts

@@ -1,6 +1,5 @@
 import { css } from 'lit';
-
-import type { Themes } from '../../internal/theming.js';
+import type { Themes } from '../../internal/types.js';
 // Dark Overrides
 import { styles as bootstrapDark } from './dark/grid.bootstrap.css.js';
 import { styles as fluentDark } from './dark/grid.fluent.css.js';
@@ -17,37 +16,37 @@ import { styles as bootstrap } from './shared/grid.common.css.js';
 
 const light = {
   shared: css`
-      ${shared}
+    ${shared}
   `,
   bootstrap: css`
-      ${bootstrap} ${bootstrapLight}
+    ${bootstrap} ${bootstrapLight}
   `,
   material: css`
-      ${materialLight}
+    ${materialLight}
   `,
   fluent: css`
-      ${fluentLight}
+    ${fluentLight}
   `,
   indigo: css`
-      ${indigoLight}
+    ${indigoLight}
   `,
 };
 
 const dark = {
   shared: css`
-      ${shared}
+    ${shared}
   `,
   bootstrap: css`
-      ${bootstrapDark}
+    ${bootstrapDark}
   `,
   material: css`
-      ${materialDark}
+    ${materialDark}
   `,
   fluent: css`
-      ${fluentDark}
+    ${fluentDark}
   `,
   indigo: css`
-      ${indigoDark}
+    ${indigoDark}
   `,
 };