refactor: Dropped themes decorator for explicit initialization (#1746)

Author: rkaraivanov

src/components/avatar/avatar.ts

@@ -1,7 +1,7 @@
 import { html, LitElement, nothing, type PropertyValues } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { themes } from '../../theming/theming-decorator.js';
+import { addThemingController } from '../../theming/theming-controller.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { AvatarShape } from '../types.js';
@@ -22,7 +22,6 @@ import { all } from './themes/themes.js';
  * @csspart image - The image wrapper of the avatar.
  * @csspart icon - The icon wrapper of the avatar.
  */
-@themes(all)
 export default class IgcAvatarComponent extends LitElement {
   public static readonly tagName = 'igc-avatar';
   public static override styles = [styles, shared];
@@ -70,6 +69,11 @@ export default class IgcAvatarComponent extends LitElement {
   @property({ reflect: true })
   public shape: AvatarShape = 'square';
 
+  constructor() {
+    super();
+    addThemingController(this, all);
+  }
+
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has('initials') || changedProperties.has('alt')) {
       this._internals.setARIA({

src/components/badge/badge.ts

@@ -1,6 +1,6 @@
 import { html, LitElement, type PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
-import { themes } from '../../theming/theming-decorator.js';
+import { addThemingController } from '../../theming/theming-controller.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { BadgeShape, StyleVariant } from '../types.js';
@@ -18,7 +18,6 @@ import { all } from './themes/themes.js';
  *
  * @csspart base - The base wrapper of the badge.
  */
-@themes(all)
 export default class IgcBadgeComponent extends LitElement {
   public static readonly tagName = 'igc-badge';
   public static override styles = [styles, shared];
@@ -53,6 +52,11 @@ export default class IgcBadgeComponent extends LitElement {
   @property({ reflect: true })
   public shape: BadgeShape = 'rounded';
 
+  constructor() {
+    super();
+    addThemingController(this, all);
+  }
+
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has('variant')) {
       this._internals.setARIA({ ariaRoleDescription: `badge ${this.variant}` });

src/components/banner/banner.ts

@@ -4,7 +4,7 @@ import { createRef, type Ref, ref } from 'lit/directives/ref.js';
 
 import { addAnimationController } from '../../animations/player.js';
 import { growVerIn, growVerOut } from '../../animations/presets/grow/index.js';
-import { themes } from '../../theming/theming-decorator.js';
+import { addThemingController } from '../../theming/theming-controller.js';
 import IgcButtonComponent from '../button/button.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { registerComponent } from '../common/definitions/register.js';
@@ -38,7 +38,6 @@ export interface IgcBannerComponentEventMap {
  * @csspart actions - The part that holds the banner action buttons.
  */
 
-@themes(all)
 export default class IgcBannerComponent extends EventEmitterMixin<
   IgcBannerComponentEventMap,
   Constructor<LitElement>
@@ -67,6 +66,8 @@ export default class IgcBannerComponent extends EventEmitterMixin<
   constructor() {
     super();
 
+    addThemingController(this, all);
+
     addInternalsController(this, {
       initialARIA: {
         role: 'status',

src/components/button-group/button-group.ts

@@ -1,7 +1,7 @@
 import { html, LitElement } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 
-import { themes } from '../../theming/theming-decorator.js';
+import { addThemingController } from '../../theming/theming-controller.js';
 import {
   createMutationController,
   type MutationControllerParams,
@@ -35,7 +35,6 @@ export interface IgcButtonGroupComponentEventMap {
  *
  * @csspart group - The button group container.
  */
-@themes(all)
 export default class IgcButtonGroupComponent extends EventEmitterMixin<
   IgcButtonGroupComponentEventMap,
   Constructor<LitElement>
@@ -134,6 +133,8 @@ export default class IgcButtonGroupComponent extends EventEmitterMixin<
   constructor() {
     super();
 
+    addThemingController(this, all);
+
     createMutationController(this, {
       callback: this._observerCallback,
       filter: [IgcToggleButtonComponent.tagName],

src/components/button-group/toggle-button.ts

@@ -1,7 +1,7 @@
 import { html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
 
-import { themes } from '../../theming/theming-decorator.js';
+import { addThemingController } from '../../theming/theming-controller.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
 import { shadowOptions } from '../common/decorators/shadow-options.js';
 import { registerComponent } from '../common/definitions/register.js';
@@ -20,7 +20,6 @@ import { styles as shared } from './themes/shared/button/button.common.css.js';
  *
  * @csspart toggle - The native button element.
  */
-@themes(all)
 @shadowOptions({ delegatesFocus: true })
 export default class IgcToggleButtonComponent extends LitElement {
   public static override styles = [styles, shared];
@@ -57,6 +56,11 @@ export default class IgcToggleButtonComponent extends LitElement {
   @property({ type: Boolean, reflect: true })
   public disabled = false;
 
+  constructor() {
+    super();
+    addThemingController(this, all);
+  }
+
   /* alternateName: focusComponent */
   /** Sets focus on the button. */
   public override focus(options?: FocusOptions): void {

src/components/button/button.ts

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import { themes } from '../../theming/theming-decorator.js';
+import { addThemingController } from '../../theming/theming-controller.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { ButtonVariant } from '../types.js';
 import { IgcButtonBaseComponent } from './button-base.js';
@@ -23,7 +23,6 @@ import { all } from './themes/button/themes.js';
  * @csspart prefix - The prefix container of the igc-button component.
  * @csspart suffix - The suffix container of the igc-button component.
  */
-@themes(all)
 export default class IgcButtonComponent extends IgcButtonBaseComponent {
   public static readonly tagName = 'igc-button';
   protected static styles = [styles, shared];
@@ -40,6 +39,11 @@ export default class IgcButtonComponent extends IgcButtonBaseComponent {
   @property({ reflect: true })
   public variant: ButtonVariant = 'contained';
 
+  constructor() {
+    super();
+    addThemingController(this, all);
+  }
+
   protected renderContent() {
     return html`
       <slot name="prefix"></slot>

src/components/button/icon-button.ts

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
-import { themes } from '../../theming/theming-decorator.js';
+import { addThemingController } from '../../theming/theming-controller.js';
 import { blazorInclude } from '../common/decorators/blazorInclude.js';
 import { registerComponent } from '../common/definitions/register.js';
 import IgcIconComponent from '../icon/icon.js';
@@ -22,7 +22,6 @@ import { all } from './themes/icon-button/themes.js';
  * @csspart base - The wrapping element of the icon button.
  * @csspart icon - The icon element of the icon button.
  */
-@themes(all)
 export default class IgcIconButtonComponent extends IgcButtonBaseComponent {
   public static readonly tagName = 'igc-icon-button';
   protected static styles = [styles, shared];
@@ -61,6 +60,11 @@ export default class IgcIconButtonComponent extends IgcButtonBaseComponent {
   @property({ reflect: true })
   public variant: IconButtonVariant = 'contained';
 
+  constructor() {
+    super();
+    addThemingController(this, all);
+  }
+
   protected renderContent() {
     return html`
       ${this.name || this.mirrored

src/components/calendar/calendar.ts

@@ -4,7 +4,7 @@ import { choose } from 'lit/directives/choose.js';
 import { createRef, type Ref, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { themes } from '../../theming/theming-decorator.js';
+import { addThemingController } from '../../theming/theming-controller.js';
 import {
   addKeybindings,
   arrowDown,
@@ -107,7 +107,6 @@ export const focusActiveDate = Symbol();
  * @csspart selected - Indicates selected state. Applies to date, month and year elements of the calendar.
  * @csspart current - Indicates current state. Applies to date, month and year elements of the calendar.
  */
-@themes(all)
 export default class IgcCalendarComponent extends EventEmitterMixin<
   IgcCalendarComponentEventMap,
   Constructor<IgcCalendarBaseComponent>
@@ -413,6 +412,8 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
   constructor() {
     super();
 
+    addThemingController(this, all);
+
     addKeybindings(this, {
       skip: this.isNotFromCalendarView,
       ref: this.contentRef,

src/components/calendar/days-view/days-view.ts

@@ -1,7 +1,7 @@
 import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 
-import { themes } from '../../../theming/theming-decorator.js';
+import { addThemingController } from '../../../theming/theming-controller.js';
 import { addKeybindings } from '../../common/controllers/key-bindings.js';
 import { blazorIndirectRender } from '../../common/decorators/blazorIndirectRender.js';
 import { blazorSuppressComponent } from '../../common/decorators/blazorSuppressComponent.js';
@@ -55,7 +55,6 @@ export interface IgcDaysViewEventMap extends IgcCalendarComponentEventMap {
  */
 @blazorSuppressComponent
 @blazorIndirectRender
-@themes(all)
 export default class IgcDaysViewComponent extends EventEmitterMixin<
   IgcDaysViewEventMap,
   Constructor<IgcCalendarBaseComponent>
@@ -140,6 +139,8 @@ export default class IgcDaysViewComponent extends EventEmitterMixin<
   constructor() {
     super();
 
+    addThemingController(this, all);
+
     addKeybindings(this, {
       bindingDefaults: { preventDefault: true },
     }).setActivateHandler(this.handleInteraction);

src/components/calendar/months-view/months-view.ts

@@ -2,7 +2,7 @@ import { html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { range } from 'lit/directives/range.js';
 
-import { themes } from '../../../theming/theming-decorator.js';
+import { addThemingController } from '../../../theming/theming-controller.js';
 import { addKeybindings } from '../../common/controllers/key-bindings.js';
 import { blazorIndirectRender } from '../../common/decorators/blazorIndirectRender.js';
 import { blazorSuppressComponent } from '../../common/decorators/blazorSuppressComponent.js';
@@ -30,7 +30,6 @@ import type { IgcCalendarComponentEventMap } from '../types.js';
  */
 @blazorIndirectRender
 @blazorSuppressComponent
-@themes(all)
 export default class IgcMonthsViewComponent extends EventEmitterMixin<
   IgcCalendarComponentEventMap,
   Constructor<LitElement>
@@ -86,6 +85,8 @@ export default class IgcMonthsViewComponent extends EventEmitterMixin<
   constructor() {
     super();
 
+    addThemingController(this, all);
+
     addKeybindings(this, {
       bindingDefaults: { preventDefault: true },
     }).setActivateHandler(this.handleInteraction);