fix(calendar): fix material and indigo theme styles to match webC (#16371)

* fix(calendar): fix material and indigo theme styles to match webC

* fix(calendar): update Fluent theme styles to align with design guidelines

- Adjust date selection, hover, and focus styles.
- Add support for range previews and various states specific to Fluent theme.
- Refactor styles to accommodate Fluent theme-specific variants.

* fix(calendar): fix calendar bootstrap theme parity with web components

* fix(calendar): update Indigo theme styles for improved consistency

* fix(calendar): refine bootstrap theme styles for date range and selection states

* fix(calendar): update styles for Fluent theme range and preview

* fix(calendar): enhance Material theme styles for range and selection states

* fix(calendar): adjust date range border radius styles for fluent theme

* fix(calendar): theme styles

* fix(calendar): update theme styles for improved consistency across variants

* fix(calendar): refactor and simplify theme styles

- Remove `$bootstrap-theme` variable and use `$variant` for conditionals.
- Consolidate redundant styles and improve readability.
- Enhance support for theme-specific behaviors across all variants.

* fix(calendar): add comprehensive Fluent theme styles for date states

- Implement new styles for current, special, selected, and range states.
- Add support for hover, focus, and preview across combinations of states.
- Update border radius and alignment

* refactor(calendar): add theme support for `IgxDaysViewComponent`

- Implement dynamic theme bindings and theme-specific classes for Material, Fluent, Bootstrap, and Indigo variants.
- Introduce `theme` input property and handle theme overrides via DOM or token.
- Update `AfterContentChecked` to adapt theme changes dynamically.

* fix(calendar): correct theme token import path in `days-view` component

* fix(calendar): Fluent theme styles for month/year

* fix(calendar): Fluent theme styles for month/year

---------

Co-authored-by: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com>

Author: desig9stein

angular.json

@@ -307,8 +307,8 @@
                 {
                   "type": "bundle",
                   "name": "styles",
-                  "maximumWarning": "500kb",
-                  "maximumError": "550kb"
+                  "maximumWarning": "600kb",
+                  "maximumError": "600kb"
                 },
                 {
                   "type": "anyComponentStyle",

projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts

@@ -12,15 +12,15 @@ import {
     booleanAttribute,
     ElementRef,
     ChangeDetectorRef,
-    ChangeDetectionStrategy,
+    ChangeDetectionStrategy, inject, DestroyRef, AfterContentChecked,
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TitleCasePipe } from '@angular/common';
 import { CalendarSelection, ScrollDirection } from '../../calendar/calendar';
 import { IgxDayItemComponent } from './day-item.component';
 import { DateRangeType } from '../../core/dates';
 import { IgxCalendarBaseDirective } from '../calendar-base';
-import { PlatformUtil, intoChunks } from '../../core/utils';
+import {PlatformUtil, intoChunks, getComponentTheme} from '../../core/utils';
 import { IViewChangingEventArgs } from './days-view.interface';
 import {
     areSameMonth,
@@ -31,6 +31,7 @@ import {
     isDateInRanges,
 } from "../common/helpers";
 import { CalendarDay } from '../common/model';
+import {IgxTheme, THEME_TOKEN, ThemeToken} from "../../services/theme/theme.token";
 
 let NEXT_ID = 0;
 
@@ -47,7 +48,7 @@ let NEXT_ID = 0;
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [IgxDayItemComponent, TitleCasePipe]
 })
-export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
+export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements AfterContentChecked {
     #standalone = true;
 
     /**
@@ -197,6 +198,42 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
     private _hideTrailingDays: boolean;
     private _showActiveDay: boolean;
 
+    private _destroyRef = inject(DestroyRef);
+    private _theme: IgxTheme;
+
+    @HostBinding('class.igx-days-view')
+    public defaultClass = true;
+
+    // Theme-specific classes
+    @HostBinding('class.igx-days-view--material')
+    public get isMaterial(): boolean {
+        return this._theme === 'material';
+    }
+
+    @HostBinding('class.igx-days-view--fluent')
+    public get isFluent(): boolean {
+        return this._theme === 'fluent';
+    }
+
+    @HostBinding('class.igx-days-view--bootstrap')
+    public get isBootstrap(): boolean {
+        return this._theme === 'bootstrap';
+    }
+
+    @HostBinding('class.igx-days-view--indigo')
+    public get isIndigo(): boolean {
+        return this._theme === 'indigo';
+    }
+
+    @Input()
+    public set theme(value: IgxTheme) {
+        this._theme = value;
+    }
+
+    public get theme(): IgxTheme {
+        return this._theme;
+    }
+
     /**
      * @hidden
      */
@@ -205,8 +242,37 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
         @Inject(LOCALE_ID) _localeId: string,
         protected el: ElementRef,
         public override cdr: ChangeDetectorRef,
+        @Inject(THEME_TOKEN) private themeToken: ThemeToken
+
     ) {
         super(platform, _localeId, null, cdr);
+
+        this._theme = this.themeToken.theme;
+
+        const themeChange = this.themeToken.onChange((theme) => {
+            if (this._theme !== theme) {
+                this._theme = theme;
+                this.cdr.detectChanges();
+            }
+        });
+
+        this._destroyRef.onDestroy(() => themeChange.unsubscribe());
+    }
+
+    private setComponentTheme() {
+        // allow DOM theme override (same pattern as input-group)
+        if (!this.themeToken.preferToken) {
+            const theme = getComponentTheme(this.el.nativeElement);
+
+            if (theme && theme !== this._theme) {
+                this.theme = theme;
+                this.cdr.markForCheck();
+            }
+        }
+    }
+
+    public ngAfterContentChecked() {
+        this.setComponentTheme();
     }
 
     /**