diff --git a/package-lock.json b/package-lock.json
index e94cfeab202..5b4d3802ab9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "@types/source-map": "0.5.2",
         "express": "^4.19.2",
         "fflate": "^0.8.1",
-        "igniteui-theming": "^10.1.0",
+        "igniteui-theming": "^11.0.0",
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "rxjs": "^7.8.0",
@@ -12899,9 +12899,9 @@
       }
     },
     "node_modules/igniteui-theming": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-10.1.0.tgz",
-      "integrity": "sha512-U6PAOAbbUZ9V336+5HpztDo3DPUMBOLiAPlYoAc4MbR072jYsYBNt5bWeyLJB7QC7pwXC/VIgqBEXXxIWyAJWQ==",
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-11.0.0.tgz",
+      "integrity": "sha512-t2hRgFBcS4QQFzgPwp3V8d5CFgLFWN9GY0GqnoBdTmtHQEm+2hbzrxgA//akUkO7g5Z6WEp5Y4WWaRkPJVy1HQ==",
       "license": "MIT",
       "peerDependencies": {
         "sass": "^1.58.1"
diff --git a/package.json b/package.json
index 8c0bccfd370..e54aaf1296d 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.19.2",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^10.1.0",
+    "igniteui-theming": "^11.0.0",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",
diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json
index 25ae22f6d11..d461f1fab3c 100644
--- a/projects/igniteui-angular/package.json
+++ b/projects/igniteui-angular/package.json
@@ -74,7 +74,7 @@
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^10.1.0",
+        "igniteui-theming": "^11.0.0",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {
diff --git a/projects/igniteui-angular/src/lib/carousel/carousel-base.ts b/projects/igniteui-angular/src/lib/carousel/carousel-base.ts
index 638170a6204..568e71a15d1 100644
--- a/projects/igniteui-angular/src/lib/carousel/carousel-base.ts
+++ b/projects/igniteui-angular/src/lib/carousel/carousel-base.ts
@@ -45,7 +45,7 @@ export abstract class IgxCarouselComponentBase {
 
     constructor(
         @Inject(IgxAngularAnimationService) private animationService: AnimationService,
-        private cdr: ChangeDetectorRef) {
+        protected cdr: ChangeDetectorRef) {
     }
 
     /** @hidden */
diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts
index 4a73b8f90dc..9fb567e349e 100644
--- a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts
+++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts
@@ -1,6 +1,7 @@
 import { NgIf, NgClass, NgFor, NgTemplateOutlet } from '@angular/common';
 import {
     AfterContentInit,
+    AfterViewInit,
     ChangeDetectorRef,
     Component,
     ContentChild,
@@ -88,7 +89,7 @@ export class CarouselHammerConfig extends HammerGestureConfig {
     imports: [IgxIconComponent, NgIf, NgClass, NgFor, NgTemplateOutlet]
 })
 
-export class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterContentInit {
+export class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterViewInit, AfterContentInit {
 
     /**
      * Sets the `id` of the carousel.
@@ -587,26 +588,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
     ) {
         super(animationService, cdr);
         this.differ = this.iterableDiffers.find([]).create(null);
-        this.theme = this.theme ?? this.themeService.theme;
-
-        for (const icon of this._icons) {
-            switch(this.theme) {
-                case 'indigo':
-                    this.iconService.addIconRef(
-                        icon.name,
-                        icon.family,
-                        icon.ref.get('indigo'),
-                    );
-                    break;
-                case 'material':
-                default:
-                    this.iconService.addIconRef(
-                        icon.name,
-                        icon.family,
-                        icon.ref.get('material'),
-                    );
-            }
-        }
     }
 
 
@@ -738,6 +719,37 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         }
     }
 
+    /** @hidden */
+    public ngAfterViewInit() {
+        this.cdr.detach();
+
+        if (!this.theme) {
+            this.theme = this.themeService.getComponentTheme(this.element);
+        }
+
+        for (const icon of this._icons) {
+            switch(this.theme) {
+                case 'indigo':
+                    this.iconService.addIconRef(
+                        icon.name,
+                        icon.family,
+                        icon.ref.get('indigo'),
+                    );
+                    break;
+                case 'material':
+                default:
+                    this.iconService.addIconRef(
+                        icon.name,
+                        icon.family,
+                        icon.ref.get('material'),
+                    );
+            }
+        }
+
+        this.cdr.detectChanges();
+        this.cdr.reattach();
+    }
+
     /** @hidden */
     public ngAfterContentInit() {
         this.slides.changes
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss
index eafc8d1344a..0b6794fcb8c 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss
@@ -72,10 +72,10 @@
 
     $variant: map.get($theme, '_meta', 'variant');
     $icon-button-size: map.get((
-        material: rem(36px),
-        fluent: rem(32px),
-        bootstrap: rem(36px),
-        indigo-design: rem(36px),
+        'material': rem(36px),
+        'fluent': rem(32px),
+        'bootstrap': rem(36px),
+        'indigo': rem(36px),
     ), $variant);
     $button-size: sizable(rem(28px), rem(28px), $icon-button-size);
     $icon-size: sizable(rem(14px), rem(14px), rem(18px));
@@ -179,7 +179,7 @@
                 color: var-get($theme, 'icon-color');
             }
 
-            @if $variant == 'indigo-design' or $variant == 'fluent' {
+            @if $variant == 'indigo' or $variant == 'fluent' {
                 border-radius: var-get($theme, 'actions-border-radius');
             }
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss
index 0b174f77b87..34bf3ff1fa8 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss
@@ -69,10 +69,10 @@
     $variant: map.get($theme, '_meta', 'variant');
     $bootstrap-theme: $variant == 'bootstrap';
     $box-shadow: map.get((
-        material: null,
-        fluent: null,
-        bootstrap: 0 0 0 rem(3px) var-get($theme, 'background'),
-        indigo-design: null,
+        'material': null,
+        'fluent': null,
+        'bootstrap': 0 0 0 rem(3px) var-get($theme, 'background'),
+        'indigo': null,
     ), $variant);
 
     %igx-avatar-outline {
@@ -108,7 +108,7 @@
             color: var-get($theme, 'icon-color');
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             igx-icon {
                 --component-size: 1;
             }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
index 2a163a45108..19376023a1d 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
@@ -122,7 +122,7 @@
             color: var-get($theme, 'icon-color');
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             igx-icon {
                 $icon-size: rem(12px);
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss
index b4b6b67b993..10609e864e4 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss
@@ -102,7 +102,7 @@
         box-shadow: inset 0 rem(-1px) 0 0 var-get($theme, 'banner-border-color');
         border-radius: var-get($theme, 'border-radius');
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'banner-border-color');
             padding: rem(16px);
         }
@@ -134,7 +134,7 @@
         flex: 1 0 0%;
         gap: rem(16px);
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             gap: rem(8px);
         } @else {
             padding: 0 rem(8px);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss
index 36f8a19dce5..c8d54dcefb3 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss
@@ -186,14 +186,14 @@
         igx-icon {
             --component-size: 3;
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 --size: rem(16px);
             }
         }
     }
 
     %igx-bottom-nav-menu-item--disabled {
-        @if $variant != 'indigo-design' {
+        @if $variant != 'indigo' {
             opacity: .5;
         }
 
@@ -226,7 +226,7 @@
         justify-content: center;
         color: var-get($theme, 'icon-color');
 
-        @if $variant != 'indigo-design' {
+        @if $variant != 'indigo' {
             padding: 0 rem(8px);
             height: rem(24px);
             transform: translateZ(0);
@@ -250,7 +250,7 @@
         color: var-get($theme, 'label-selected-color');
     }
 
-    @if $variant != 'indigo-design' {
+    @if $variant != 'indigo' {
         %igx-tab-icon--selected {
             transform: translateY(-2px);
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss
index b4fd57d7b6a..64ae6929ca4 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss
@@ -226,12 +226,12 @@
 
     $variant: map.get($theme, '_meta', 'variant');
     $bootstrap-theme: $variant == 'bootstrap';
-    $indigo-theme: $variant == 'indigo-design';
+    $indigo-theme: $variant == 'indigo';
     $group-item-min-width: map.get((
-        material: rem(42px),
-        fluent: rem(42px),
-        bootstrap: rem(42px),
-        indigo-design: rem(32px),
+        'material': rem(42px),
+        'fluent': rem(42px),
+        'bootstrap': rem(42px),
+        'indigo': rem(32px),
     ), $variant);
 
     %item-overlay {
@@ -316,7 +316,7 @@
             color: var-get($theme, 'item-hover-text-color');
             background: var-get($theme, 'item-hover-background');
             border-color: var-get($theme, 'item-hover-border-color');
-        
+
             igx-icon {
                 color: var-get($theme, 'item-hover-icon-color');
             }
@@ -369,7 +369,7 @@
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             padding-inline: pad-inline(rem(6px), rem(8px), rem(10px));
 
             igx-icon {
@@ -481,9 +481,9 @@
                 }
             }
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 color: var-get($theme, 'item-focused-text-color');
-                background: var-get($theme, 'item-focused-background'); 
+                background: var-get($theme, 'item-focused-background');
                 border-color: var-get($theme, 'item-focused-border-color');
                 z-index: 2;
 
@@ -618,7 +618,7 @@
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             &:active {
                 background: var-get($theme, 'item-selected-hover-background');
                 color: var-get($theme, 'item-selected-hover-text-color');
@@ -720,7 +720,7 @@
                 }
             }
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
                 border-color: var-get($theme, 'item-selected-border-color');
                 background: var-get($theme, 'item-selected-background');
@@ -754,7 +754,7 @@
                 background: var-get($theme, 'disabled-selected-background');
             }
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 color: var-get($theme, 'disabled-selected-text-color');
                 background: var-get($theme, 'disabled-selected-background');
                 border: none;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss
index 372fd6be816..81a1dddf001 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss
@@ -277,7 +277,7 @@
         material: .1s,
         fluent: .1s,
         bootstrap: .15s,
-        indigo-design: .15s
+        indigo: .15s
     ), $variant);
 
     $button-transition: color $time ease-in-out,
@@ -327,31 +327,31 @@
     );
 
     $button-padding-inline: map.get((
-        material: $button-padding-inline,
-        fluent: $button-padding-inline,
-        bootstrap: $button-padding-inline,
-        indigo-design: $button-padding-indigo-inline,
+        'material': $button-padding-inline,
+        'fluent': $button-padding-inline,
+        'bootstrap': $button-padding-inline,
+        'indigo': $button-padding-indigo-inline,
     ), $variant);
 
     $button-padding-block: map.get((
-        material: $button-padding-material-block,
-        fluent: $button-padding-fluent-block,
-        bootstrap: $button-padding-bootstrap-block,
-        indigo-design: $button-padding-indigo-block,
+        'material': $button-padding-material-block,
+        'fluent': $button-padding-fluent-block,
+        'bootstrap': $button-padding-bootstrap-block,
+        'indigo': $button-padding-indigo-block,
     ), $variant);
 
     $outlined-button-padding-inline: map.get((
-        material: $button-padding-inline,
-        fluent: $button-padding-inline,
-        bootstrap: $button-padding-inline,
-        indigo-design: $button-padding-indigo-inline,
+        'material': $button-padding-inline,
+        'fluent': $button-padding-inline,
+        'bootstrap': $button-padding-inline,
+        'indigo': $button-padding-indigo-inline,
     ), $variant);
 
     $outlined-button-padding-block: map.get((
-        material: $button-padding-material-block,
-        fluent: $button-padding-fluent-block,
-        bootstrap: $button-padding-bootstrap-block,
-        indigo-design: $button-padding-indigo-block
+        'material': $button-padding-material-block,
+        'fluent': $button-padding-fluent-block,
+        'bootstrap': $button-padding-bootstrap-block,
+        'indigo': $button-padding-indigo-block
     ), $variant);
 
     $button-floating-padding-block: (
@@ -387,68 +387,68 @@
     );
 
     $icon-sizes: map.get((
-        material: rem(18px),
-        fluent: rem(18px),
-        bootstrap: rem(18px),
-        indigo-design: rem(16px),
+        'material': rem(18px),
+        'fluent': rem(18px),
+        'bootstrap': rem(18px),
+        'indigo': rem(16px),
     ), $variant);
 
     $icon-in-button-size: $icon-sizes;
 
     $contained-shadow: map.get((
-        material: var-get($contained-theme, 'resting-shadow'),
-        fluent: none,
-        bootstrap: none,
-        indigo-design: none
+        'material': var-get($contained-theme, 'resting-shadow'),
+        'fluent': none,
+        'bootstrap': none,
+        'indigo': none
     ), $variant);
 
     $contained-shadow--hover: map.get((
-        material: var-get($contained-theme, 'hover-shadow'),
-        fluent: none,
-        bootstrap: none,
-        indigo-design: none
+        'material': var-get($contained-theme, 'hover-shadow'),
+        'fluent': none,
+        'bootstrap': none,
+        'indigo': none
     ), $variant);
 
     $contained-shadow--focus: map.get((
-        material: var-get($contained-theme, 'focus-shadow'),
-        fluent: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
-        bootstrap: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'),
-        indigo-design: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color')
+        'material': var-get($contained-theme, 'focus-shadow'),
+        'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
+        'bootstrap': 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'),
+        'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color')
     ), $variant);
 
     $contained-shadow--active: map.get((
-        material: var-get($contained-theme, 'active-shadow'),
-        fluent: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
-        bootstrap: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'),
-        indigo-design: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color')
+        'material': var-get($contained-theme, 'active-shadow'),
+        'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
+        'bootstrap': 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'),
+        'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color')
     ), $variant);
 
     $fab-shadow: map.get((
-        material: var-get($fab-theme, 'resting-shadow'),
-        fluent: none,
-        bootstrap: none,
-        indigo-design: none
+        'material': var-get($fab-theme, 'resting-shadow'),
+        'fluent': none,
+        'bootstrap': none,
+        'indigo': none
     ), $variant);
 
     $fab-shadow--hover: map.get((
-        material: var-get($fab-theme, 'hover-shadow'),
-        fluent: none,
-        bootstrap: none,
-        indigo-design: none
+        'material': var-get($fab-theme, 'hover-shadow'),
+        'fluent': none,
+        'bootstrap': none,
+        'indigo': none
     ), $variant);
 
     $fab-shadow--focus: map.get((
-        material: var-get($fab-theme, 'focus-shadow'),
-        fluent:  0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
-        bootstrap: 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
-        indigo-design: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color')
+        'material': var-get($fab-theme, 'focus-shadow'),
+        'fluent':  0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
+        'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
+        'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color')
     ), $variant);
 
     $fab-shadow--active: map.get((
-        material: var-get($fab-theme, 'active-shadow'),
-        fluent:  0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
-        bootstrap: 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
-        indigo-design: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color')
+        'material': var-get($fab-theme, 'active-shadow'),
+        'fluent':  0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
+        'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
+        'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color')
     ), $variant);
 
     %fluent-border {
@@ -497,7 +497,7 @@
             map.get($items-gap, 'comfortable')
         );
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             min-width: rem(28px);
         }
 
@@ -562,14 +562,14 @@
                 color: var-get($flat-theme, 'active-foreground');
             }
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 igx-icon {
                     color: var-get($flat-theme, 'icon-color-hover');
                 }
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             border-width: rem(2px);
             gap: pad-inline(
                 map.get($items-gap, 'compact'),
@@ -620,7 +620,7 @@
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color');
 
             &:active {
@@ -648,7 +648,7 @@
             map.get($outlined-button-padding-inline, 'comfortable')
         );
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             gap: pad-inline(
                 map.get($items-gap, 'compact'),
                 map.get($items-gap, 'cosy'),
@@ -681,7 +681,7 @@
                 color: var-get($outlined-theme, 'active-foreground');
             }
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 igx-icon {
                     color: var-get($outlined-theme, 'icon-color-hover');
                 }
@@ -704,7 +704,7 @@
 
         @if $variant == 'bootstrap' {
             box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');
-        } @else if $variant == 'indigo-design' {
+        } @else if $variant == 'indigo' {
             box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');
 
             igx-icon {
@@ -727,7 +727,7 @@
             color: var-get($outlined-theme, 'focus-foreground');
             border-color: var-get($outlined-theme, 'active-border-color');
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 igx-icon {
                     color: var-get($outlined-theme, 'icon-color-hover');
                 }
@@ -779,7 +779,7 @@
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             border-width: rem(2px);
             gap: pad-inline(
                 map.get($items-gap, 'compact'),
@@ -838,7 +838,7 @@
             color: var-get($contained-theme, 'focus-foreground');
             background: var-get($contained-theme, 'focus-background');
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 igx-icon {
                     color: var-get($outlined-theme, 'icon-color-hover');
                 }
@@ -875,7 +875,7 @@
             map.get($button-floating-padding-inline, 'comfortable')
         );
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             padding-inline: pad-inline(
                 map.get($button-floating-padding-indigo-inline, 'compact'),
                 map.get($button-floating-padding-indigo-inline, 'cosy'),
@@ -918,7 +918,7 @@
                 color: var-get($fab-theme, 'active-foreground');
             }
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 igx-icon {
                     color: var-get($outlined-theme, 'icon-color-hover');
                 }
@@ -966,7 +966,7 @@
             background: var-get($fab-theme, 'focus-background');
             color: var-get($fab-theme, 'focus-foreground');
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 igx-icon {
                     color: var-get($outlined-theme, 'icon-color-hover');
                 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
index b243ddf3658..8958aeb3635 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
@@ -392,7 +392,7 @@
         }
     }
 
-    @if $variant == 'material' or $variant == 'indigo-design' {
+    @if $variant == 'material' or $variant == 'indigo' {
         @if not($date-selected-current-outline) and $content-background {
             @if meta.type-of($content-background) == 'color' {
                 $date-selected-current-outline: $content-background;
@@ -697,47 +697,47 @@
     $bootstrap-theme: $variant == 'bootstrap';
 
     $cal-picker-padding: map.get((
-        material: rem(16px),
-        fluent: rem(16px),
-        bootstrap: rem(8px),
-        indigo-design: rem(16px),
+        'material': rem(16px),
+        'fluent': rem(16px),
+        'bootstrap': rem(8px),
+        'indigo': rem(16px),
     ), $variant);
 
     $date-size: map.get((
-        material: var-get($theme, 'size'),
-        fluent: var-get($theme, 'size'),
-        bootstrap: var-get($theme, 'size'),
-        indigo-design: var-get($theme, 'size'),
+        'material': var-get($theme, 'size'),
+        'fluent': var-get($theme, 'size'),
+        'bootstrap': var-get($theme, 'size'),
+        'indigo': var-get($theme, 'size'),
     ), $variant);
 
     $date-height: $date-size;
 
     $date-inner-size: map.get((
-        material: var-get($theme, 'inner-size'),
-        fluent: var-get($theme, 'inner-size'),
-        bootstrap: var-get($theme, 'inner-size'),
-        indigo-design: var-get($theme, 'inner-size'),
+        'material': var-get($theme, 'inner-size'),
+        'fluent': var-get($theme, 'inner-size'),
+        'bootstrap': var-get($theme, 'inner-size'),
+        'indigo': var-get($theme, 'inner-size'),
     ), $variant);
 
     $border-size: map.get((
-        material: rem(1px),
-        fluent: rem(1px),
-        bootstrap: rem(1px),
-        indigo-design: rem(2px),
+        'material': rem(1px),
+        'fluent': rem(1px),
+        'bootstrap': rem(1px),
+        'indigo': rem(2px),
     ), $variant);
 
     $header-padding: map.get((
-        material: rem(16px) rem(24px),
-        fluent: rem(16px),
-        bootstrap: rem(16px),
-        indigo-design: rem(16px),
+        'material': rem(16px) rem(24px),
+        'fluent': rem(16px),
+        'bootstrap': rem(16px),
+        'indigo': rem(16px),
     ), $variant);
 
     $arrow-gap: map.get((
-        material: rem(24px),
-        fluent: rem(8px),
-        bootstrap: rem(24px),
-        indigo-design: rem(8px)
+        'material': rem(24px),
+        'fluent': rem(8px),
+        'bootstrap': rem(24px),
+        'indigo': rem(8px)
     ), $variant);
 
     $date-view-row-gap: rem(4px);
@@ -910,7 +910,7 @@
             gap: rem(28px);
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             gap: rem(2px);
 
             &::after {
@@ -926,7 +926,7 @@
     }
 
     %header-display-vertical {
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             min-width: rem(136px);
             width: rem(136px);
         } @else {
@@ -934,7 +934,7 @@
             width: rem(168px);
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             &::after {
                 inset-inline-start: calc(100% - #{rem(1px)});
                 inset-block-start: 0;
@@ -1046,7 +1046,7 @@
         justify-content: space-between;
         gap: rem(24px);
         position: relative;
-        height: if($variant == 'indigo-design', rem(50px), rem(56px));
+        height: if($variant == 'indigo', rem(50px), rem(56px));
         padding-inline: if($variant == 'material', rem(24px), rem(16px));
         color: var-get($theme, 'picker-foreground');
         background: var-get($theme, 'picker-background');
@@ -1057,7 +1057,7 @@
         }
 
         igx-icon {
-            --size: #{if($variant == 'indigo-design', rem(14px), rem(24px))};
+            --size: #{if($variant == 'indigo', rem(14px), rem(24px))};
         }
     }
 
@@ -1100,7 +1100,7 @@
         outline: none;
         cursor: pointer;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             padding: rem(5px);
         }
 
@@ -1145,7 +1145,7 @@
         display: flex;
         justify-content: space-between;
 
-        @if $variant != 'indigo-design' {
+        @if $variant != 'indigo' {
             &:nth-child(2) {
                 %date-inner-week-number {
                     border-start-start-radius: var-get($theme, 'week-number-border-radius');
@@ -1266,7 +1266,7 @@
                 }
             }
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 border: 0;
 
                 &::before {
@@ -1307,7 +1307,7 @@
         position: relative;
         max-width: rem(240px);
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             &::after {
                 content: '';
                 position: absolute;
@@ -1328,7 +1328,7 @@
             color: var-get($theme, 'ym-selected-current-hover-foreground');
             background: var-get($theme, 'ym-selected-current-hover-background');
 
-            @if $variant != 'indigo-design' {
+            @if $variant != 'indigo' {
                 box-shadow: inset 0 0 0 $border-size var-get($theme, 'ym-selected-current-outline-focus-color');
             } @else {
                 &::after {
@@ -1398,7 +1398,7 @@
             color: var-get($theme, 'ym-selected-current-foreground');
             background: var-get($theme, 'ym-selected-current-background');
 
-            @if $variant != 'indigo-design' {
+            @if $variant != 'indigo' {
                 box-shadow: inset 0 0 0 $border-size var-get($theme, 'ym-selected-current-outline-color');
             } @else {
                 &::after {
@@ -1411,7 +1411,7 @@
                 background: var-get($theme, 'ym-selected-current-hover-background');
 
                 // stylelint-disable-next-line
-                @if $variant != 'indigo-design' {
+                @if $variant != 'indigo' {
                     box-shadow: inset 0 0 0 $border-size var-get($theme, 'ym-selected-current-outline-hover-color');
                 } @else {
                     // stylelint-disable-next-line
@@ -1445,7 +1445,7 @@
         %date-inner-week-number {
             border-radius: 0;
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 border: 0;
 
                 &::before {
@@ -1656,7 +1656,7 @@
 
     %date-special {
         %date-inner {
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 font-weight: 700;
             }
 
@@ -1695,7 +1695,7 @@
 
     %date-special-current {
         %date-inner {
-            @if $variant == 'material' or $variant == 'indigo-design' {
+            @if $variant == 'material' or $variant == 'indigo' {
                 &:hover {
                     color: var-get($theme, 'date-special-hover-foreground');
                 }
@@ -1750,7 +1750,7 @@
             color: var-get($theme, 'date-selected-current-foreground');
             background: var-get($theme, 'date-selected-current-background') ;
 
-            @if $variant != 'indigo-design' {
+            @if $variant != 'indigo' {
                 border-color: var-get($theme, 'date-selected-current-border-color');
             }
 
@@ -1758,7 +1758,7 @@
                 color: var-get($theme, 'date-selected-current-hover-foreground');
                 background: var-get($theme, 'date-selected-current-hover-background');
 
-                @if $variant != 'indigo-design' {
+                @if $variant != 'indigo' {
                     border-color: var-get($theme, 'date-selected-current-hover-border-color');
                 } @else {
                     // stylelint-disable-next-line
@@ -1769,7 +1769,7 @@
             }
 
             &::after {
-                @if $variant == 'indigo-design' {
+                @if $variant == 'indigo' {
                     border-color: var-get($theme, 'date-selected-current-border-color');
                 }
             }
@@ -1781,12 +1781,12 @@
             color: var-get($theme, 'date-selected-current-focus-foreground');
             background: var-get($theme, 'date-selected-current-focus-background');
 
-            @if $variant != 'indigo-design' {
+            @if $variant != 'indigo' {
                 border-color: var-get($theme, 'date-selected-current-focus-border-color');
             }
 
             &::after {
-                @if $variant == 'indigo-design' {
+                @if $variant == 'indigo' {
                     border-color: var-get($theme, 'date-selected-current-focus-border-color');
                 }
             }
@@ -1822,7 +1822,7 @@
                 border-color: var-get($theme, 'date-selected-current-border-color');
             }
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 border-color: transparent;
 
                 &::after {
@@ -1838,7 +1838,7 @@
                     border-color: var-get($theme, 'date-selected-current-hover-border-color');
                 }
 
-                @if $variant == 'indigo-design' {
+                @if $variant == 'indigo' {
                     border-color: transparent;
 
                     // stylelint-disable-next-line
@@ -1859,7 +1859,7 @@
                 border-color: var-get($theme, 'date-selected-current-focus-border-color');
             }
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 border-color: transparent;
 
                 &::after {
@@ -1872,7 +1872,7 @@
     %date-selected-current-range-first,
     %date-selected-current-range-last {
         %date-inner {
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 &::after {
                     border-color: var-get($theme, 'date-selected-current-border-color');
                 }
@@ -1888,7 +1888,7 @@
                 color: var-get($theme, 'date-selected-current-range-foreground');
             }
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 border-color: var-get($theme, 'date-current-border-color');
                 background: var-get($theme, 'date-special-range-background');
             }
@@ -1905,7 +1905,7 @@
                     }
                 }
 
-                @if $variant == 'indigo-design' {
+                @if $variant == 'indigo' {
                     border-color: var-get($theme, 'date-current-hover-border-color');
                 }
             }
@@ -1927,7 +1927,7 @@
                     border-color: var-get($theme, 'date-special-range-border-color');
                 }
 
-                @if $variant == 'indigo-design' {
+                @if $variant == 'indigo' {
                     border-color: transparent;
                 }
             }
@@ -1964,7 +1964,7 @@
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             %date-inner {
                 color: var-get($theme, 'date-selected-foreground');
                 background: var-get($theme, 'date-selected-background');
@@ -1988,7 +1988,7 @@
 
     %date-selected-current-range-special-active-first,
     %date-selected-current-range-special-active-last {
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             %date-inner {
                 color: var-get($theme, 'date-selected-focus-foreground');
                 background: var-get($theme, 'date-selected-focus-background');
@@ -2080,7 +2080,7 @@
 
         %date-inner {
             &::after {
-                @if $variant == 'indigo-design' {
+                @if $variant == 'indigo' {
                     width: $date-inner-size;
                     height: $date-inner-size;
                 }
@@ -2189,7 +2189,7 @@
                 border-color: transparent !important;
             }
 
-            @if $variant != 'fluent' and $variant != 'indigo-design' {
+            @if $variant != 'fluent' and $variant != 'indigo' {
                 border-inline-color: transparent;
             }
 
@@ -2210,7 +2210,7 @@
             height: $date-size;
             width: 50%;
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 border-width: calc(#{$border-size} / 2);
             } @else {
                 border-width: $border-size;
@@ -2255,7 +2255,7 @@
         position: relative;
         border-block-color: var-get($theme, 'date-range-preview-border-color');
 
-        @if $variant == 'material' or $variant == 'indigo-design' {
+        @if $variant == 'material' or $variant == 'indigo' {
             border-block-style: dashed;
         }
 
@@ -2314,9 +2314,11 @@
             @if $variant == 'fluent' {
                 width: calc(50% + #{rem(2px)});
             }
-            @if $variant == 'material' or $variant == 'indigo-desing' {
+
+            @if $variant == 'material' or $variant == 'indigo' {
                 width: calc(50% + #{rem(1px)});
             }
+
             @if $variant == 'bootstrap' {
                 width: 50%;
             }
@@ -2327,7 +2329,7 @@
                 border-inline: 0;
             }
 
-            @if $variant == 'material' or $variant == 'indigo-design' {
+            @if $variant == 'material' or $variant == 'indigo' {
                 border-style: dashed;
             } @else {
                 border-style: solid;
@@ -2572,7 +2574,7 @@
     }
 
     %date-disabled-current-special {
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             %date-inner {
                 color: var-get($theme, 'date-special-foreground');
             }
@@ -2580,7 +2582,7 @@
     }
 
     %date-disabled-current-special-selected {
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             %date-inner {
                 color: var-get($theme, 'date-selected-foreground');
             }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss
index e4eb5630c60..e2814c45fc0 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss
@@ -181,7 +181,7 @@
             margin-inline-end: 0;
             margin-bottom: rem(16px);
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 margin-bottom: rem(8px);
             }
         }
@@ -191,7 +191,7 @@
         align-self: flex-start;
         margin-inline-end: rem(16px);
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             margin-inline-end: rem(8px);
             margin-block: auto;
 
@@ -216,7 +216,7 @@
             display: none;
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             gap: rem(2px);
 
             %igx-card-header-subtitle {
@@ -262,7 +262,7 @@
         align-items: center;
         padding: $card-actions-padding;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             [igxButton],
             [igxIconButton] {
                 --ig-size: 2;
@@ -278,7 +278,7 @@
         }
     }
 
-    @if $variant == 'indigo-design' {
+    @if $variant == 'indigo' {
         %igx-card-content,
         %igx-card-actions {
             padding: rem(16px);
@@ -290,7 +290,7 @@
 
         %igx-card-header + %igx-card-content {
             padding-block-start: 0;
-        }        
+        }
     }
 
     %igx-card-actions--vertical {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
index 699eeeb2060..a1ac19bb104 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
@@ -147,6 +147,8 @@
     $not-bootstrap-theme: $variant != 'bootstrap';
 
     %igx-carousel-display {
+        --theme: #{$variant};
+
         display: flex;
         position: relative;
         justify-content: center;
@@ -179,7 +181,7 @@
             border-radius: var-get($theme, 'border-radius');
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             width: rem(28px);
             height: rem(28px);
             border: rem(2px) solid var-get($theme, 'button-border-color');
@@ -221,7 +223,7 @@
     %igx-carousel-arrow--next {
         inset-inline-end: 0;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             %igx-nav-arrow {
                 &::after {
                     transform: rotate(-135deg);
@@ -233,7 +235,7 @@
     %igx-carousel-arrow--prev {
         inset-inline-start: 0;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             %igx-nav-arrow {
                 &::after {
                     transform: rotate(45deg);
@@ -265,7 +267,7 @@
             transform: translateX(50%);
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             gap: rem(10px);
             margin-block-start: 0;
         }
@@ -292,7 +294,7 @@
         margin: $carousel-indicator-margin;
         cursor: pointer;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             margin: 0;
         }
     }
@@ -303,7 +305,7 @@
         height: rem(12px);
         text-indent: rem(-9999px);
 
-        @if $variant != 'indigo-design' {
+        @if $variant != 'indigo' {
             border: $indicator-border-style;
             border-color: var-get($theme, 'indicator-border-color');
             box-shadow: elevation(1);
@@ -322,7 +324,7 @@
             border-radius: inherit;
             background: var-get($theme, 'indicator-dot-color');
 
-            @if $variant != 'indigo-design' {
+            @if $variant != 'indigo' {
                 @include animation('scale-out-center' .15s $ease-out-quad forwards);
                 inset: rem(1px);
             } @else {
@@ -337,7 +339,7 @@
         &:hover {
             opacity: 1;
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 &::after {
                     background: var-get($theme, 'indicator-hover-dot-color');
                 }
@@ -357,7 +359,7 @@
     }
 
     %igx-nav-dot--active {
-        @if $variant != 'indigo-design' {
+        @if $variant != 'indigo' {
             border: $indicator-border-style;
             border-color: var-get($theme, 'indicator-active-border-color');
         } @else {
@@ -377,12 +379,12 @@
 
         &::after {
             background: var-get($theme, 'indicator-active-dot-color');
-            @if $variant != 'indigo-design' {
+            @if $variant != 'indigo' {
                 @include animation('scale-in-center' .15s $ease-out-quad forwards);
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             &:hover {
                 &::after {
                     background: var-get($theme, 'indicator-active-hover-dot-color');
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
index 34b72d39f0f..563e56273a4 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
@@ -116,45 +116,45 @@
     $checkbox-radius: math.div($size, 2);
 
     $size: map.get((
-        material: $size,
-        fluent: $size,
-        bootstrap: $size-bs,
-        indigo-design: $size-bs,
+        'material': $size,
+        'fluent': $size,
+        'bootstrap': $size-bs,
+        'indigo': $size-bs,
     ), $variant);
 
     $border-width: map.get((
-        material: rem(2px),
-        fluent: rem(1px),
-        bootstrap: rem(1px),
-        indigo-design: rem(2px),
+        'material': rem(2px),
+        'fluent': rem(1px),
+        'bootstrap': rem(1px),
+        'indigo': rem(2px),
     ), $variant);
 
     $ripple-display: map.get((
-        material: block,
-        fluent: none,
-        bootstrap: none,
-        indigo-design: none,
+        'material': block,
+        'fluent': none,
+        'bootstrap': none,
+        'indigo': none,
     ), $variant);
 
     $label-margin: map.get((
-        material: rem(12px),
-        fluent: rem(8px),
-        bootstrap: rem(8px),
-        indigo-design: rem(8px),
+        'material': rem(12px),
+        'fluent': rem(8px),
+        'bootstrap': rem(8px),
+        'indigo': rem(8px),
     ), $variant);
 
     $mark-stroke: map.get((
-        material: 3,
-        fluent: 1,
-        bootstrap: 3,
-        indigo-design: 3,
+        'material': 3,
+        'fluent': 1,
+        'bootstrap': 3,
+        'indigo': 3,
     ), $variant);
 
     $mark-offset: map.get((
-        material: .5px,
-        fluent: -1px,
-        bootstrap: .5px,
-        indigo-design: 1px,
+        'material': .5px,
+        'fluent': -1px,
+        'bootstrap': .5px,
+        'indigo': 1px,
     ), $variant);
 
     $mark-length: 24;
@@ -218,7 +218,7 @@
     }
 
     %cbx-composite--hover {
-        @if $variant == 'indigo-design' or $variant == 'bootstrap' {
+        @if $variant == 'indigo' or $variant == 'bootstrap' {
             border-color: var-get($theme, 'empty-color-hover');
         }
     }
@@ -275,7 +275,7 @@
             background: var-get($theme, 'disabled-color');
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             background: var-get($theme, 'disabled-indeterminate-color');
             border-color: transparent;
             stroke-opacity: 40%;
@@ -341,7 +341,7 @@
 
             %cbx-composite {
                 background: transparent;
-                
+
                 &::before {
                     content: '';
                     position: absolute;
@@ -458,7 +458,7 @@
     }
 
     %cbx-label--hover {
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             color: var-get($theme, 'label-color-hover');
         }
     }
@@ -480,7 +480,7 @@
     }
 
     %cbx-label--invalid {
-        @if $variant != 'indigo-design' {
+        @if $variant != 'indigo' {
             color: var-get($theme, 'error-color');
         }
     }
@@ -540,7 +540,7 @@
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             %cbx-composite {
                 border-radius: var-get($theme, 'border-radius');
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color');
@@ -557,7 +557,7 @@
     }
 
     %igx-checkbox--focused-checked {
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             %cbx-composite {
                 border-radius: var-get($theme, 'border-radius');
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-focused');
@@ -585,7 +585,7 @@
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             %cbx-composite {
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-error');
             }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss
index 46fea93b668..a1663d19227 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss
@@ -266,17 +266,17 @@
     );
 
     $box-shadow-focus: map.get((
-        material: null,
-        fluent: null,
-        bootstrap: 0 0 0 rem(2px) var-get($theme, 'focus-outline-color'),
-        indigo-design: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color')
+        'material': null,
+        'fluent': null,
+        'bootstrap': 0 0 0 rem(2px) var-get($theme, 'focus-outline-color'),
+        'indigo': 0 0 0 rem(3px) var-get($theme, 'focus-outline-color')
     ), $variant);
 
     $box-shadow-focus-selected: map.get((
-        material: null,
-        fluent: null,
-        bootstrap: 0 0 0 rem(2px) var-get($theme, 'focus-selected-outline-color'),
-        indigo-design: 0 0 0 rem(3px) var-get($theme, 'focus-selected-outline-color')
+        'material': null,
+        'fluent': null,
+        'bootstrap': 0 0 0 rem(2px) var-get($theme, 'focus-selected-outline-color'),
+        'indigo': 0 0 0 rem(3px) var-get($theme, 'focus-selected-outline-color')
     ), $variant);
 
     $border-size: rem(1px);
@@ -349,7 +349,7 @@
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             &:focus:hover {
                 %igx-chip__item {
                     color: var-get($theme, 'hover-text-color');
@@ -443,7 +443,7 @@
     %igx-chip%igx-chip--primary {
         &:hover {
             %igx-chip__item {
-                @if $variant == 'indigo-design' {
+                @if $variant == 'indigo' {
                     color: contrast-color($color: 'primary', $variant: 400);
                     background: color($color: 'primary', $variant: 400);
                     border-color: color($color: 'primary', $variant: 400);
@@ -461,7 +461,7 @@
                 background: color($color: 'primary', $variant: 800);
                 border-color: color($color: 'primary', $variant: 800);
 
-                @if $variant == 'indigo-design' {
+                @if $variant == 'indigo' {
                     color: contrast-color($color: 'primary', $variant: 500);
                     background: color($color: 'primary', $variant: 500);
                     border-color: color($color: 'primary', $variant: 500);
@@ -484,7 +484,7 @@
     %igx-chip%igx-chip--info {
         &:hover {
             %igx-chip__item {
-                @if $variant == 'indigo-design' {
+                @if $variant == 'indigo' {
                     color: contrast-color($color: 'info', $variant: 400);
                     background: color($color: 'info', $variant: 400);
                     border-color: color($color: 'info', $variant: 400);
@@ -502,7 +502,7 @@
                 background: color($color: 'info', $variant: 800);
                 border-color: color($color: 'info', $variant: 800);
 
-                @if $variant == 'indigo-design' {
+                @if $variant == 'indigo' {
                     color: contrast-color($color: 'info', $variant: 500);
                     background: color($color: 'info', $variant: 500);
                     border-color: color($color: 'info', $variant: 500);
@@ -529,7 +529,7 @@
     %igx-chip%igx-chip--success {
         &:hover {
             %igx-chip__item {
-                @if $variant == 'indigo-design' {
+                @if $variant == 'indigo' {
                     color: contrast-color($color: 'success', $variant: 400);
                     background: color($color: 'success', $variant: 400);
                     border-color: color($color: 'success', $variant: 400);
@@ -547,7 +547,7 @@
                 background: color($color: 'success', $variant: 800);
                 border-color: color($color: 'success', $variant: 800);
 
-                @if $variant == 'indigo-design' {
+                @if $variant == 'indigo' {
                     color: contrast-color($color: 'success', $variant: 500);
                     background: color($color: 'success', $variant: 500);
                     border-color: color($color: 'success', $variant: 500);
@@ -570,7 +570,7 @@
     %igx-chip%igx-chip--warning {
         &:hover {
             %igx-chip__item {
-                @if $variant == 'indigo-design' {
+                @if $variant == 'indigo' {
                     color: contrast-color($color: 'warn', $variant: 400);
                     background: color($color: 'warn', $variant: 400);
                     border-color: color($color: 'warn', $variant: 400);
@@ -588,7 +588,7 @@
                 background: color($color: 'warn', $variant: 800);
                 border-color: color($color: 'warn', $variant: 800);
 
-                @if $variant == 'indigo-design' {
+                @if $variant == 'indigo' {
                     color: contrast-color($color: 'warn', $variant: 500);
                     background: color($color: 'warn', $variant: 500);
                     border-color: color($color: 'warn', $variant: 500);
@@ -615,7 +615,7 @@
     %igx-chip%igx-chip--danger {
         &:hover {
             %igx-chip__item {
-                @if $variant == 'indigo-design' {
+                @if $variant == 'indigo' {
                     color: contrast-color($color: 'error', $variant: 400);
                     background: color($color: 'error', $variant: 400);
                     border-color: color($color: 'error', $variant: 400);
@@ -633,7 +633,7 @@
                 background: color($color: 'error', $variant: 800);
                 border-color: color($color: 'error', $variant: 800);
 
-                @if $variant == 'indigo-design' {
+                @if $variant == 'indigo' {
                     color: contrast-color($color: 'error', $variant: 500);
                     background: color($color: 'error', $variant: 500);
                     border-color: color($color: 'error', $variant: 500);
@@ -782,7 +782,7 @@
         pointer-events: none;
 
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             &%igx-chip--primary {
                 %igx-chip__item {
                     color: contrast-color($color: 'primary', $variant: 400);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss
index d5a680d82ed..54210650684 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss
@@ -18,10 +18,10 @@
     $border-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color');
 
     $action-area-height: map.get((
-        material: (rem(40px), rem(46px), rem(52px)),
-        fluent: (rem(40px), rem(48px), rem(54px)),
-        bootstrap: (rem(47px), rem(54px), rem(64px)),
-        indigo-design: (rem(40px), rem(44px), rem(48px)),
+        'material': (rem(40px), rem(46px), rem(52px)),
+        'fluent': (rem(40px), rem(48px), rem(54px)),
+        'bootstrap': (rem(47px), rem(54px), rem(64px)),
+        'indigo': (rem(40px), rem(44px), rem(48px)),
     ), $variant);
 
     %date-picker {
@@ -67,7 +67,7 @@
         display: flex;
         justify-content: flex-end;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             padding: rem(8px) rem(16px);
         } @else {
             padding: rem(8px);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss
index a8b49a3658f..a6bd21f8fb7 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss
@@ -90,30 +90,30 @@
     $bootstrap-theme: map.get($theme, variant) == 'bootstrap';
 
     $dialog-min-width: map.get((
-        material: rem(280px),
-        fluent: rem(288px),
-        bootstrap: rem(288px),
+        'material': rem(280px),
+        'fluent': rem(288px),
+        'bootstrap': rem(288px),
     ), $variant);
 
     $dialog-title-padding: map.get((
-        material: rem(24px) rem(24px) rem(12px) rem(24px),
-        fluent: rem(16px) rem(24px) rem(24px) rem(24px),
-        bootstrap: rem(16px),
-        indigo-design: rem(24px) rem(24px) 0 rem(24px),
+        'material': rem(24px) rem(24px) rem(12px) rem(24px),
+        'fluent': rem(16px) rem(24px) rem(24px) rem(24px),
+        'bootstrap': rem(16px),
+        'indigo': rem(24px) rem(24px) 0 rem(24px),
     ), $variant);
 
     $dialog-message-padding: map.get((
-        material: rem(12px) rem(24px),
-        fluent: 0 rem(24px) rem(20px) rem(24px),
-        bootstrap: rem(16px),
-        indigo-design: rem(16px) rem(24px),
+        'material': rem(12px) rem(24px),
+        'fluent': 0 rem(24px) rem(20px) rem(24px),
+        'bootstrap': rem(16px),
+        'indigo': rem(16px) rem(24px),
     ), $variant);
 
     $dialog-actions-padding: map.get((
-        material: rem(8px),
-        fluent: 0 rem(24px) rem(24px) rem(24px),
-        bootstrap: rem(16px),
-        indigo-design: rem(16px) rem(24px) rem(24px) rem(24px),
+        'material': rem(8px),
+        'fluent': 0 rem(24px) rem(24px) rem(24px),
+        'bootstrap': rem(16px),
+        'indigo': rem(16px) rem(24px) rem(24px) rem(24px),
     ), $variant);
 
     %igx-dialog-display {
@@ -167,10 +167,10 @@
         @media all and (-ms-high-contrast: none)
         {
             max-width: map.get((
-                material: 62ch,
-                fluent: 48ch,
-                bootstrap: 60ch,
-                indigo-design: 48ch,
+                'material': 62ch,
+                'fluent': 48ch,
+                'bootstrap': 60ch,
+                'indigo': 48ch,
             ), $variant);
         }
     }
@@ -189,7 +189,7 @@
             margin-inline-start: rem(8px);
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             .igx-button {
                 --ig-size: 2;
             }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss
index cb2a271362c..86847b7ad55 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss
@@ -100,7 +100,7 @@
                 transparent rem(20px)
             );
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 background: repeating-linear-gradient(
                     to right,
                     var-get($theme, 'color'),
@@ -122,7 +122,7 @@
                 transparent rem(20px)
             );
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 background: repeating-linear-gradient(
                     to bottom,
                     var-get($theme, 'color'),
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss
index 01a156b3c3e..db16f413fa9 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss
@@ -25,7 +25,7 @@
 /// @param {Color} $focused-item-border-color [null] - The drop-down item focused border color.
 /// @param {Color} $selected-item-background [null] - The drop-down selected item background color.
 /// @param {Color} $selected-item-text-color [null] - The drop-down selected item text color.
-/// @param {Color} $selected-item-icon-color [null] - The drop-down selected item icon color. 
+/// @param {Color} $selected-item-icon-color [null] - The drop-down selected item icon color.
 /// @param {Color} $selected-hover-item-background [null] - The drop-down selected item hover background color.
 /// @param {Color} $selected-hover-item-text-color [null] - The drop-down selected item hover text color.
 /// @param {Color} $selected-hover-item-icon-color [null] - The drop-down selected item hover icon color.
@@ -220,7 +220,7 @@
         min-width: rem(128px);
         border: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             padding: rem(3px);
 
             %igx-drop-down__item {
@@ -284,7 +284,7 @@
             justify-content: center;
             --component-size: var(--dropdown-size);
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 $icon-size: sizable(rem(14px), rem(16px), rem(16px));
 
                 width: var(--ig-icon-size, $icon-size);
@@ -307,7 +307,7 @@
             color: var-get($theme, 'item-icon-color');
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             padding-inline: pad-inline(rem(8px), rem(12px), rem(12px));
         }
 
@@ -333,7 +333,7 @@
         pointer-events: none;
         padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             padding-inline: pad-inline(rem(8px), rem(12px), rem(12px));
             padding-block: pad-inline(rem(4px), rem(6px), rem(8px));
         }
@@ -356,7 +356,7 @@
             outline-offset: rem(-1px);
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             outline: rem(2px) solid var-get($theme, 'focused-item-border-color');
             outline-offset: rem(-2px);
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss
index f6a03f87ba6..76159c5c35b 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss
@@ -164,7 +164,7 @@
             outline: transparent;
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             padding: $panel-padding-header-indigo;
         }
     }
@@ -176,7 +176,7 @@
         flex: 1 0 0%;
         overflow: hidden;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             %igx-expansion-panel__header-title {
                 margin-block-end: rem(2px);
             }
@@ -187,7 +187,7 @@
         order: 1;
         margin-inline-start: rem(16px, 16px);
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             margin-inline-start: rem(8px, 16px);
         }
     }
@@ -196,7 +196,7 @@
         order: -1;
         margin-inline-end: rem(16px, 16px);
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             margin-inline-end: rem(8px, 16px);
         }
     }
@@ -219,7 +219,7 @@
             color: var-get($theme, 'header-icon-color');
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             igx-icon {
                 --component-size: 1;
             }
@@ -232,7 +232,7 @@
         overflow: hidden;
         padding: $panel-padding;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             padding: $panel-padding-body-indigo;
         }
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
index 8eba6e75b0b..eb82f18f598 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
@@ -89,7 +89,7 @@
     %grid-excel-icon--filtered {
         igx-icon {
             color: if(
-                $variant == 'indigo-design',
+                $variant == 'indigo',
                 color($color: 'warn', $variant: 500),
                 color($color: 'secondary')
             );
@@ -116,12 +116,12 @@
             --item-hover-text-color: #{color($color: 'gray', $variant: 800)};
             --item-hover-icon-color: #{color($color: 'gray', $variant: 800)};
             --item-selected-text-color: #{if(
-                $variant == 'indigo-design',
+                $variant == 'indigo',
                 contrast-color($color: 'surface'),
                 color($color: 'secondary', $variant: 500)
             )};
             --item-selected-icon-color: #{if(
-                $variant == 'indigo-design',
+                $variant == 'indigo',
                 contrast-color($color: 'surface'),
                 color($color: 'secondary', $variant: 500)
             )};
@@ -252,7 +252,7 @@
     %grid-excel-actions--selected {
         igx-icon {
             color: if(
-                $variant == 'indigo-design',
+                $variant == 'indigo',
                 color($color: 'primary', $variant: 200),
                 color($color: 'secondary')
             );
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
index 6ecc643218e..b4e588c9116 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -606,10 +606,10 @@
     $not-bootstrap-theme: $variant != 'bootstrap';
 
     $cbx-size: map.get((
-        material: rem(20px),
-        fluent: rem(20px),
-        bootstrap: rem(14px),
-        indigo-design: rem(20px),
+        'material': rem(20px),
+        'fluent': rem(20px),
+        'bootstrap': rem(14px),
+        'indigo': rem(20px),
     ), $variant);
     $cbx-bs-size: rem(14px);
 
@@ -728,10 +728,10 @@
     $grouping-padding-right: rem(12px);
 
     $grid-header-weight: map.get((
-        material: 600,
-        fluent: 800,
-        bootstrap: 700,
-        indigo-design: 600,
+        'material': 600,
+        'fluent': 800,
+        'bootstrap': 700,
+        'indigo': 600,
     ), $variant);
 
     $editing-outline-width: rem(2px);
@@ -1004,7 +1004,7 @@
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             @if $theme-variant == 'light' {
                 --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)};
                 --igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
@@ -1538,7 +1538,7 @@
         &::before {
             content: '';
             position: absolute;
-            width: if($variant == 'indigo-design', rem(4px), rem(2px));
+            width: if($variant == 'indigo', rem(4px), rem(2px));
             height: 100%;
             z-index: 10000;
             background: var-get($theme, 'edited-row-indicator');
@@ -1973,7 +1973,7 @@
         color: var-get($theme, 'header-selected-text-color');
         background: var-get($theme, 'header-selected-background');
 
-        @if $variant != 'indigo-design' {
+        @if $variant != 'indigo' {
             opacity: .7;
 
             &%grid__drag-ghost-image {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss
index bbe09818ae6..aa385019581 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss
@@ -143,10 +143,10 @@
     @include css-vars($contained-theme);
 
     $icon-sizes: map.get((
-        material: rem(18px),
-        fluent: rem(18px),
-        bootstrap: rem(18px),
-        indigo-design: rem(16px),
+        'material': rem(18px),
+        'fluent': rem(18px),
+        'bootstrap': rem(18px),
+        'indigo': rem(16px),
     ), $variant);
 
     $icon-in-button-size: $icon-sizes;
@@ -211,7 +211,7 @@
             transition: box-shadow .15s ease-out, color .15s ease-out, background .15s ease-out;
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             transition: color .15s ease-in-out, box-shadow .15s ease-in-out, background .15s ease-in-out, border-color .15s ease-in-out;
         }
     }
@@ -267,7 +267,7 @@
             box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color');
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             border-color: var-get($flat-theme, 'border-color');
             box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'focus-border-color');
         }
@@ -328,7 +328,7 @@
             box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color');
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             border-color: var-get($contained-theme, 'border-color');
             box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'focus-border-color');
         }
@@ -343,7 +343,7 @@
         border: rem(1px) solid var-get($outlined-theme, 'border-color');
         border-radius: var-get($outlined-theme, 'border-radius');
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             border-width: rem(2px);
 
             &:hover,
@@ -435,7 +435,7 @@
             box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             border-color: var-get($outlined-theme, 'border-color');
             box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'focus-border-color');
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
index d82bca8a232..7724037017f 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
@@ -273,6 +273,7 @@
         input-suffix-background--filled: $input-suffix-background--filled,
         input-suffix-color--focused: $input-suffix-color--focused,
         input-suffix-background--focused: $input-suffix-background--focused,
+        theme: map.get($schema, '_meta', 'theme'),
         variant: map.get($schema, '_meta', 'theme'),
         size: $size,
     ));
@@ -289,11 +290,11 @@
     $variant: map.get($theme, 'variant');
     $transition-timing: .25s $out-cubic;
     $material-theme: $variant == 'material';
-    $indigo-theme: $variant == 'indigo-design';
+    $indigo-theme: $variant == 'indigo';
     $fluent-theme: $variant == 'fluent';
     $bootstrap-theme: $variant == 'bootstrap';
     $NOT-material-theme: $variant != 'material';
-    $NOT-indigo-theme: $variant != 'indigo-design';
+    $NOT-indigo-theme: $variant != 'indigo';
     $NOT-fluent-theme: $variant != 'fluent';
     $NOT-bootstrap-theme: $variant != 'bootstrap';
 
@@ -342,14 +343,14 @@
         material: rem(5px),
         fluent: rem(5px),
         bootstrap: rem(4px),
-        indigo-design: rem(4px),
+        indigo: rem(4px),
     ), $variant);
 
     $hint-spacing-inline: map.get((
         material: rem(16px),
         fluent: 0,
         bootstrap: 0,
-        indigo-design: 0,
+        indigo: 0,
     ), $variant);
 
     // Base Start
@@ -392,12 +393,6 @@
         }
     }
 
-    igx-input-group,
-    igx-date-range-start,
-    igx-date-range-end {
-        --theme: #{$variant};
-    }
-
     %form-group-display--box {
         %form-group-border {
             margin-bottom: 0;
@@ -461,7 +456,7 @@
         igx-icon[igxSuffix] {
             --component-size: var(--input-size);
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 --size: var(--input-icon) !important;
             }
         }
@@ -587,13 +582,13 @@
 
     %form-group-bundle--focus {
         &::after {
-            @if $variant != 'indigo-design' {
+            @if $variant != 'indigo' {
                 border-block-end-width: rem(2px);
             }
             border-block-end-color: var-get($theme, 'focused-bottom-line-color');
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             caret-color: var-get($theme, 'focused-bottom-line-color');
         }
     }
@@ -829,7 +824,7 @@
     %form-group-display--search {
         %igx-input-group__notch--search,
         %form-group-bundle-main--search {
-            @if $variant != 'indigo-design' {
+            @if $variant != 'indigo' {
                 padding-inline: rem(4px);
             }
         }
@@ -844,7 +839,7 @@
             overflow: hidden;
         }
 
-        @if $variant != 'indigo-design' {
+        @if $variant != 'indigo' {
             &::after {
                 display: none;
             }
@@ -1106,7 +1101,7 @@
             line-height: normal; /* Fix placeholder position in Safari */
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             height: calc(var-get($theme, 'size') - 1px);
 
             &::placeholder {
@@ -1140,7 +1135,7 @@
             transform: translateY(-50%);
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             font-size: rem(12px);
             line-height: rem(16px);
         }
@@ -1396,7 +1391,7 @@
         }
     }
 
-    @if $variant != 'indigo-design' {
+    @if $variant != 'indigo' {
         %form-group-helper--success {
             color: var-get($theme, 'success-secondary-color');
         }
@@ -1441,7 +1436,7 @@
     // ==============================================
 
     // INDIGO START
-    @if $variant == 'indigo-design' {
+    @if $variant == 'indigo' {
         %form-group-display--search {
             igx-prefix,
             [igxPrefix],
@@ -1488,7 +1483,7 @@
         padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
     }
 
-    @if $variant == 'indigo-design' {
+    @if $variant == 'indigo' {
         %form-group-input--search {
             padding-inline: pad-inline(rem(6px), rem(8px), rem(10px));
         }
@@ -1732,7 +1727,7 @@
             transform-origin: top right;
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             font-size: rem(11px);
             line-height: rem(15px);
             font-weight: 400;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss
index b42c902aed3..6382947dad0 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss
@@ -56,7 +56,7 @@
             transform-origin: top right;
         }
 
-        @if $variant == 'fluent' or $variant == 'indigo-design' {
+        @if $variant == 'fluent' or $variant == 'indigo' {
             font-size: rem(14px);
             font-weight: 600;
             height: auto;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
index 22619c5af98..b9887c8d4ed 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
@@ -245,45 +245,45 @@
     $bootstrap-theme: $variant == 'bootstrap';
 
     $theme-padding-block-l: map.get((
-        material: rem(8px),
-        fluent: rem(8px),
-        bootstrap: rem(8px),
-        indigo-design: rem(8px),
+        'material': rem(8px),
+        'fluent': rem(8px),
+        'bootstrap': rem(8px),
+        'indigo': rem(8px),
     ), $variant);
 
     $theme-padding-inline-l: map.get((
-        material: rem(16px),
-        fluent: rem(16px),
-        bootstrap: rem(16px),
-        indigo-design: rem(16px),
+        'material': rem(16px),
+        'fluent': rem(16px),
+        'bootstrap': rem(16px),
+        'indigo': rem(16px),
     ), $variant);
 
     $theme-padding-block-m: map.get((
-        material: rem(4px),
-        fluent: rem(4px),
-        bootstrap: rem(4px),
-        indigo-design: rem(6px),
+        'material': rem(4px),
+        'fluent': rem(4px),
+        'bootstrap': rem(4px),
+        'indigo': rem(6px),
     ), $variant);
 
     $theme-padding-inline-m: map.get((
-        material: rem(8px),
-        fluent: rem(8px),
-        bootstrap: rem(8px),
-        indigo-design: rem(12px),
+        'material': rem(8px),
+        'fluent': rem(8px),
+        'bootstrap': rem(8px),
+        'indigo': rem(12px),
     ), $variant);
 
     $theme-padding-block-s: map.get((
-        material: rem(2px),
-        fluent: rem(2px),
-        bootstrap: rem(2px),
-        indigo-design: rem(4px),
+        'material': rem(2px),
+        'fluent': rem(2px),
+        'bootstrap': rem(2px),
+        'indigo': rem(4px),
     ), $variant);
 
     $theme-padding-inline-s: map.get((
-        material: rem(4px),
-        fluent: rem(4px),
-        bootstrap: rem(4px),
-        indigo-design: rem(8px),
+        'material': rem(4px),
+        'fluent': rem(4px),
+        'bootstrap': rem(4px),
+        'indigo': rem(8px),
     ), $variant);
 
     $list-icon-margin-inline: (
@@ -329,7 +329,7 @@
             outline-style: none;
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             gap: rem(4px);
         }
     }
@@ -354,7 +354,7 @@
         background: var-get($theme, 'header-background');
         user-select: none;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             min-height: sizable(rem(24), rem(28), rem(32));
         }
     }
@@ -430,7 +430,7 @@
         flex-direction: column;
         flex: 1 0 0%;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             gap: rem(2px);
         }
 
@@ -454,7 +454,7 @@
         justify-content: center;
         color: var-get($theme, 'item-action-color');
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             gap: sizable(rem(4), rem(6), rem(8));
         }
 
@@ -463,9 +463,9 @@
         }
 
         > * {
-            --component-size: #{if($variant == 'indigo-design', 2, var(--list-size))};
+            --component-size: #{if($variant == 'indigo', 2, var(--list-size))};
 
-            @if $variant != 'indigo-design' {
+            @if $variant != 'indigo' {
                 margin-inline-start: pad-inline(map.get($list-actions-margin, 'compact'), map.get($list-actions-margin, 'cosy'), map.get($list-actions-margin, 'comfortable'));
             }
         }
@@ -492,7 +492,7 @@
         background: inherit;
         z-index: 2;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             gap: rem(8px);
         }
     }
@@ -507,7 +507,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        align-self: if($variant == 'indigo-design', center, flex-start);
+        align-self: if($variant == 'indigo', center, flex-start);
         padding: 0;
         color: var-get($theme, 'item-thumbnail-color');
         gap: rem(8px);
@@ -515,9 +515,9 @@
 
         > igx-icon,
         > igc-icon {
-            --component-size: #{if($variant == 'indigo-design', 2, var(--list-size))};
+            --component-size: #{if($variant == 'indigo', 2, var(--list-size))};
 
-            @if $variant != 'indigo-design' {
+            @if $variant != 'indigo' {
                 margin-inline-end: pad-inline(map.get($list-icon-margin-inline, 'compact'), map.get($list-icon-margin-inline, 'cosy'), map.get($list-icon-margin-inline, 'comfortable'));
                 margin-inline-start: 0;
                 margin-block: pad-block(map.get($list-icon-margin-block, 'compact'), map.get($list-icon-margin-block, 'cosy'), map.get($list-icon-margin-block, 'comfortable'));
@@ -525,7 +525,7 @@
         }
 
         > igx-avatar {
-            --ig-size: #{if($variant == 'indigo-design', 2, 1)};
+            --ig-size: #{if($variant == 'indigo', 2, 1)};
         }
 
         &:empty {
@@ -536,12 +536,12 @@
     %igx-list__item-thumbnail:not(:empty) + %igx-list__item-lines {
         --component-size: var(--list-size);
 
-        @if $variant != 'indigo-design' {
+        @if $variant != 'indigo' {
             margin-inline-start: pad-inline(map.get($list-line-margin, 'compact'), map.get($list-line-margin, 'cosy'), map.get($list-line-margin, 'comfortable'));
         }
     }
 
-    @if $variant != 'indigo-design' {
+    @if $variant != 'indigo' {
         %igx-list__item-lines + %igx-list__item-actions {
             margin-inline-start: rem(8px);
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss
index 8d3f4cab707..5164227db06 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss
@@ -140,7 +140,7 @@
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             igx-avatar,
             igc-icon-button,
             [igxIconButton] {
@@ -165,7 +165,7 @@
 
     %igx-navbar-left {
         &:not(:empty) {
-            @if $variant != 'indigo-design' {
+            @if $variant != 'indigo' {
                 margin-inline-end: rem(16px)
             }
         }
@@ -176,7 +176,7 @@
     }
 
     %igx-navbar-right {
-        gap: if($variant == 'indigo-design', rem(8px), rem(16px));
+        gap: if($variant == 'indigo', rem(8px), rem(16px));
     }
 
     %igx-navbar-left,
@@ -210,7 +210,7 @@
             user-select: none;
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             igx-icon,
             igc-icon {
                 --component-size: 2;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss
index 23ab0dca9d4..5b3073d13f4 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss
@@ -152,38 +152,38 @@
     $drawer-icon-size: rem(24px);
 
     $aside-padding: map.get((
-        material: rem(8px),
-        fluent: 0,
-        bootstrap: rem(16px),
-        indigo-design: rem(8px),
+        'material': rem(8px),
+        'fluent': 0,
+        'bootstrap': rem(16px),
+        'indigo': rem(8px),
     ), $variant);
 
     $item-padding: map.get((
-        material: rem(12px) rem(8px),
-        fluent: rem(10px) rem(8px),
-        bootstrap: rem(8px) rem(16px),
-        indigo-design: rem(8px) rem(16px),
+        'material': rem(12px) rem(8px),
+        'fluent': rem(10px) rem(8px),
+        'bootstrap': rem(8px) rem(16px),
+        'indigo': rem(8px) rem(16px),
     ), $variant);
 
     $item-gap: map.get((
-        material: rem(32px),
-        fluent: rem(8px),
-        bootstrap: rem(8px),
-        indigo-design: rem(16px),
+        'material': rem(32px),
+        'fluent': rem(8px),
+        'bootstrap': rem(8px),
+        'indigo': rem(16px),
     ), $variant);
 
     $item-min-height: map.get((
-        material: rem(48px),
-        fluent: rem(44px),
-        bootstrap: rem(40px),
-        indigo-design: rem(32px),
+        'material': rem(48px),
+        'fluent': rem(44px),
+        'bootstrap': rem(40px),
+        'indigo': rem(32px),
     ), $variant);
 
     $item-mini-size: map.get((
-        material: rem(56px),
-        fluent: rem(40px),
-        bootstrap: rem(88px),
-        indigo-design: rem(48px),
+        'material': rem(56px),
+        'fluent': rem(40px),
+        'bootstrap': rem(88px),
+        'indigo': rem(48px),
     ), $variant);
 
     %navdrawer-display {
@@ -285,7 +285,7 @@
         %item {
             justify-content: center;
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 //max-width: rem(32px);
                 // important is needed to override the typography margins
                 margin: rem(14px) auto !important;
@@ -344,7 +344,7 @@
         gap: $item-gap;
         padding: $item-padding;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             margin-block-end: rem(4px) !important;
         }
 
@@ -363,7 +363,7 @@
         justify-content: flex-start;
 
         igx-icon {
-            --component-size: #{if($variant == 'indigo-design', 2, 3)};
+            --component-size: #{if($variant == 'indigo', 2, 3)};
 
             color: var-get($theme, 'item-icon-color');
         }
@@ -385,10 +385,10 @@
 
         @if $variant == 'material' {
 	        $reduce-size: rem(8px);
-	        
+
 			// The clip path here fixes a bug: https://github.com/IgniteUI/igniteui-angular/issues/14554
 	        clip-path: inset(calc($reduce-size / 2) 0 round var-get($theme, 'item-border-radius'));
-	        
+
             &::after {
                 content: '';
                 position: absolute;
@@ -484,7 +484,7 @@
         white-space: nowrap;
         color: var-get($theme, 'item-header-text-color');
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             margin-block-end: rem(4px) !important;
         }
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss
index 1cc1a8485ce..e0482cc41b8 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss
@@ -108,31 +108,31 @@
     $variant: map.get($theme, '_meta', 'variant');
 
     $bar-height: map.get((
-        material: rem(4px),
-        fluent: rem(2px),
-        bootstrap: rem(16px),
-        indigo-design: rem(4px),
+        'material': rem(4px),
+        'fluent': rem(2px),
+        'bootstrap': rem(16px),
+        'indigo': rem(4px),
     ), $variant);
 
     $gradient-orientation: map.get((
-        material: -45deg,
-        fluent: -45deg,
-        bootstrap: 45deg,
-        indigo-design: 45deg,
+        'material': -45deg,
+        'fluent': -45deg,
+        'bootstrap': 45deg,
+        'indigo': 45deg,
     ), $variant);
 
     $gradient-orientation-rtl: map.get((
-        material: 45deg,
-        fluent: 45deg,
-        bootstrap: -45deg,
-        indigo-design: -45deg,
+        'material': 45deg,
+        'fluent': 45deg,
+        'bootstrap': -45deg,
+        'indigo': -45deg,
     ), $variant);
 
     $background-size: map.get((
-        material: rem(40px) rem(40px),
-        fluent: rem(40px) rem(40px),
-        bootstrap: rem(16px) rem(16px),
-        indigo-design: rem(20px),
+        'material': rem(40px) rem(40px),
+        'fluent': rem(40px) rem(40px),
+        'bootstrap': rem(16px) rem(16px),
+        'indigo': rem(20px),
     ), $variant);
 
     $stripe-color: var-get($theme, 'stripes-color');
@@ -147,7 +147,7 @@
         flex: 1 1 100%;
         flex-direction: column;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             gap: rem(4px);
         } @else if $variant == 'fluent' {
             gap: rem(2px);
@@ -178,7 +178,7 @@
     }
 
     %linear-indicator--striped {
-        @if $variant != 'indigo-design' {
+        @if $variant != 'indigo' {
             @include striped-gradient($gradient-orientation, $stripe-color);
         } @else {
             @include striped-gradient--indigo($gradient-orientation, $stripe-color);
@@ -187,7 +187,7 @@
         background-size: $background-size;
 
         [dir='rtl'] & {
-            @if $variant != 'indigo-design' {
+            @if $variant != 'indigo' {
                 @include striped-gradient($gradient-orientation-rtl, $stripe-color);
             } @else {
                 @include striped-gradient--indigo($gradient-orientation-rtl, $stripe-color);
@@ -465,7 +465,6 @@
     @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'variant');
-
     $stroke-width: rem(4px);
     $diameter: var-get($theme, 'diameter');
 
@@ -506,7 +505,7 @@
         stroke-dashoffset: 289;
         stroke-dasharray: 289;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             stroke-width: calc($stroke-width + rem(1px));
         }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss
index 29d4b3e55d2..71b0f9524f6 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss
@@ -220,7 +220,7 @@
                 --ig-size: 2;
             }
 
-            @if $variant != 'indigo-design' {
+            @if $variant != 'indigo' {
                 .igx-chip__item {
                     border-block: none;
                 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss
index 25a9d2e1f22..db97c560835 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss
@@ -108,57 +108,57 @@
     $not-bootstrap-theme: $variant != 'bootstrap';
 
     $label-margin: map.get((
-        material: rem(2px),
-        fluent: rem(8px),
-        bootstrap: rem(8px),
-        indigo-design: rem(8px),
+        'material': rem(2px),
+        'fluent': rem(8px),
+        'bootstrap': rem(8px),
+        'indigo': rem(8px),
     ), $variant);
 
     $size: map.get((
-        material: rem(40px),
-        fluent: rem(20px),
-        bootstrap: rem(16px),
-        indigo-design: rem(16px),
+        'material': rem(40px),
+        'fluent': rem(20px),
+        'bootstrap': rem(16px),
+        'indigo': rem(16px),
     ), $variant);
 
     $scale: map.get((
-        material: scale(.5),
-        fluent: scale(.5),
-        bootstrap: scale(.4375),
-        indigo-design: scale(.5),
+        'material': scale(.5),
+        'fluent': scale(.5),
+        'bootstrap': scale(.4375),
+        'indigo': scale(.5),
     ), $variant);
 
     $border-width: map.get((
-        material: rem(2px),
-        fluent: rem(1px),
-        bootstrap: rem(1px),
-        indigo-design: rem(2px),
+        'material': rem(2px),
+        'fluent': rem(1px),
+        'bootstrap': rem(1px),
+        'indigo': rem(2px),
     ), $variant);
 
     $radio-hover-scale: map.get((
-        material: null,
-        fluent: scale(.5),
+        'material': null,
+        'fluent': scale(.5),
     ), $variant);
 
     $ripple-display: map.get((
-        material: block,
-        bootstrap: none,
-        fluent: none,
-        indigo-design: none,
+        'material': block,
+        'bootstrap': none,
+        'fluent': none,
+        'indigo': none,
     ), $variant);
 
     $horizontal-group-margin: map.get((
-        material: rem(16px),
-        fluent: rem(12px),
-        bootstrap: rem(8px),
-        indigo-design: rem(16px),
+        'material': rem(16px),
+        'fluent': rem(12px),
+        'bootstrap': rem(8px),
+        'indigo': rem(16px),
     ), $variant);
 
     $vertical-group-margin: map.get((
-        material: 0,
-        fluent: rem(8px),
-        bootstrap: rem(8px),
-        indigo-design: rem(8px),
+        'material': 0,
+        'fluent': rem(8px),
+        'bootstrap': rem(8px),
+        'indigo': rem(8px),
     ), $variant);
 
     $border-style: solid;
@@ -191,7 +191,7 @@
     %radio-label--invalid {
         color: var-get($theme, 'error-color');
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             color: var-get($theme, 'label-color');
 
             &:hover {
@@ -288,7 +288,7 @@
             }
         }
 
-        @if $variant == 'indigo-design' or $variant == 'bootstrap' {
+        @if $variant == 'indigo' or $variant == 'bootstrap' {
             &::after {
                 border: $border-width $border-style var-get($theme, 'hover-color');
                 transition: $transition;
@@ -350,7 +350,7 @@
         &::after {
             border: $border-width $border-style var-get($theme, 'error-color');
         }
-        
+
         &::before {
             background: var-get($theme, 'error-color');
             border: $border-width $border-style transparent;
@@ -361,7 +361,7 @@
                 background: var-get($theme, 'error-color');
                 border-color: var-get($theme, 'error-color');
             }
-    
+
             &::before {
                 background: white;
             }
@@ -409,7 +409,7 @@
     }
 
     %radio-label--hover {
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             color: var-get($theme, 'label-color-hover');
         }
     }
@@ -467,7 +467,7 @@
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             %radio-composite {
                 border-radius: $border-radius;
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color');
@@ -490,7 +490,7 @@
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             %radio-composite {
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-filled');
             }
@@ -512,7 +512,7 @@
                     border: $border-width $border-style var-get($theme, 'error-color-hover');
                 }
             }
-        } @else if $variant == 'indigo-design' {
+        } @else if $variant == 'indigo' {
             %radio-composite {
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-error');
             }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss
index 4ab53a8d750..0456cfc868f 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss
@@ -117,31 +117,31 @@
     $ripple-radius: math.div($ripple-size, 2);
 
     $thumb-label-width: map.get((
-        material: rem(40px),
-        fluent: rem(40px),
-        bootstrap: rem(40px),
-        indigo-design: rem(36px)
+        'material': rem(40px),
+        'fluent': rem(40px),
+        'bootstrap': rem(40px),
+        'indigo': rem(36px)
     ), $variant);
 
     $thumb-label-height: map.get((
-        material: rem(30px),
-        fluent: rem(30px),
-        bootstrap: rem(30px),
-        indigo-design: rem(22px)
+        'material': rem(30px),
+        'fluent': rem(30px),
+        'bootstrap': rem(30px),
+        'indigo': rem(22px)
     ), $variant);
 
     $slider-track-height: map.get((
-        material: 6px,
-        fluent: 4px,
-        bootstrap: 8px,
-        indigo-design: 2px
+        'material': 6px,
+        'fluent': 4px,
+        'bootstrap': 8px,
+        'indigo': 2px
     ), $variant);
 
     $slider-outline-width: map.get((
-        material: 0,
-        fluent: 0,
-        bootstrap: 3px,
-        indigo-design: 3px
+        'material': 0,
+        'fluent': 0,
+        'bootstrap': 3px,
+        'indigo': 3px
     ), $variant);
 
     // Slider ticks
@@ -152,10 +152,10 @@
 
     // Slider Thumb
     $thumb-size: map.get((
-        material: 20px,
-        fluent: 16px,
-        bootstrap: 16px,
-        indigo-design: 12px
+        'material': 20px,
+        'fluent': 16px,
+        'bootstrap': 16px,
+        'indigo': 12px
     ), $variant);
     $thumb-radius: math.div($thumb-size, 2);
 
@@ -163,18 +163,18 @@
     $thumb-indigo-hover: calc(16 / $thumb-indigo-idle);
 
     $thumb-border-width: map.get((
-        material: 0,
-        fluent: 2px,
-        bootstrap: 1px,
-        indigo-design: 2px
+        'material': 0,
+        'fluent': 2px,
+        'bootstrap': 1px,
+        'indigo': 2px
     ), $variant);
 
     // Slider Steps
     $steps-top-position: map.get((
-        material: 2px,
-        fluent: 1px,
-        bootstrap: 3px,
-        indigo-design: 0
+        'material': 2px,
+        'fluent': 1px,
+        'bootstrap': 3px,
+        'indigo': 0
     ), $variant);
 
     // Slider Label
@@ -236,7 +236,7 @@
         overflow: hidden;
         border-radius: border-radius(rem(32px));
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             border-radius: border-radius(rem(4px));
         }
     }
@@ -291,7 +291,7 @@
             align-items: flex-end;
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             bottom: rem(3px);
 
             &%igx-slider__ticks--top {
@@ -339,7 +339,7 @@
         %igx-slider__ticks-label {
             top: calc(#{$tick-height--tall} + #{$tick-height});
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 top: calc(#{$tick-height--tall} + (#{$tick-height} / 2));
             }
         }
@@ -361,7 +361,7 @@
         %igx-slider__ticks-label {
             top: calc(#{$tick-height--tall} + #{$tick-height});
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 top: calc(#{$tick-height--tall} + (#{$tick-height} / 2));
             }
         }
@@ -408,7 +408,7 @@
     }
 
     %igx-slider-track-steps--disabled {
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             color: transparent;
         }
     }
@@ -491,7 +491,7 @@
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             transition: transform .2s $out-quad;
 
             &:hover,
@@ -535,7 +535,7 @@
         &:focus div::before {
             box-shadow: none;
 
-            @if $variant == 'fluent' or $variant == 'indigo-design' {
+            @if $variant == 'fluent' or $variant == 'indigo' {
                 border-color: var-get($theme, 'thumb-disabled-border-color') !important;
             }
         }
@@ -552,7 +552,7 @@
         top: calc(((#{$thumb-label-height}) + rem(20px)) * -1);
         height: $thumb-label-height;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             top: calc(((#{$thumb-label-height}) + rem(18px)) * -1);
         }
     }
@@ -570,7 +570,7 @@
         min-width: $thumb-label-width;
         opacity: 0;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             border-radius: rem(3px);
         }
 
@@ -582,7 +582,7 @@
             border-inline-end: rem(10px) solid transparent;
             border-top: rem(10px) solid var-get($theme, 'label-background-color');
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 top: rem(16px);
                 border-top: rem(12px) solid var-get($theme, 'label-background-color');
             }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss
index 20e3075c8a4..1cb6123f76d 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss
@@ -110,7 +110,7 @@
             box-shadow: none;
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             padding: rem(4px) rem(16px);
             min-height: rem(36px);
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
index 36c9fc476d6..5daa65ebdd9 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
@@ -82,9 +82,9 @@
 
     //splitter-size + borders
     $splitter-size: unitless(map.get($theme, 'size')) + 2;
-    
+
     //calculate the value for the slim(indigo) splitter
-    $slim-splitter: calc( 1 / $splitter-size); 
+    $slim-splitter: calc( 1 / $splitter-size);
 
     %igx-splitter-base {
         &[aria-orientation='horizontal'] {
@@ -101,7 +101,7 @@
         height: $hitbox-size;
         background: if($debug-hitbox, $hitbox-debug-color, transparent);
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             height: rem($splitter-size * 4px);
         }
     }
@@ -110,7 +110,7 @@
         width: $hitbox-size;
         height: 100%;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             width: rem($splitter-size * 4px);
         }
     }
@@ -137,7 +137,7 @@
         [aria-orientation='horizontal'] & {
             transform: scaleX(1);
         }
-        
+
         [aria-orientation='vertical'] & {
             transform: scaleY(1);
         }
@@ -183,7 +183,7 @@
                 }
             }
         }
-    }    
+    }
 
     %igx-splitter-bar {
         position: relative;
@@ -197,7 +197,7 @@
         opacity: .68;
         transition: opacity .15s $out-quad !important;
 
-        @if $variant != 'indigo-design' {
+        @if $variant != 'indigo' {
             @extend %hide-controls;
 
             &.igx-splitter-bar--collapsible {
@@ -205,7 +205,7 @@
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             @extend %indigo-splitter-bar;
         }
 
@@ -230,9 +230,9 @@
         outline: transparent solid rem(1px);
         box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'focus-color');
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             box-shadow: none;
-            
+
             %indigo-splitter-bar {
                 background: var-get($theme, 'focus-color');
                 border-color: var-get($theme, 'focus-color');
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
index 80d87f589bb..d07d12550cb 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
@@ -333,19 +333,19 @@
     $variant: map.get($theme, '_meta', 'variant');
 
     $indicator-size: map.get((
-        material: rem(24px),
-        fluent: rem(24px),
-        bootstrap: rem(40px),
-        indigo-design: rem(24px)
+        'material': rem(24px),
+        'fluent': rem(24px),
+        'bootstrap': rem(40px),
+        'indigo': rem(24px)
     ), $variant);
 
     $step-header-padding: rem(8px);
 
     $step-header-padding-simple: map.get((
-        material: rem(8px),
-        fluent: rem(8px),
-        bootstrap: rem(16px),
-        indigo-design: rem(8px)
+        'material': rem(8px),
+        'fluent': rem(8px),
+        'bootstrap': rem(16px),
+        'indigo': rem(8px)
     ), $variant);
 
     $title-gap: rem(8px);
@@ -355,17 +355,17 @@
     $separator-position: 50%;
 
     $outline-width: map.get((
-        material: clamp(1px, rem(1px), rem(1px)),
-        fluent: clamp(1px, rem(1px), rem(1px)),
-        bootstrap: clamp(1px, rem(1px), rem(1px)),
-        indigo-design: clamp(2px, rem(2px), rem(2px))
+        'material': clamp(1px, rem(1px), rem(1px)),
+        'fluent': clamp(1px, rem(1px), rem(1px)),
+        'bootstrap': clamp(1px, rem(1px), rem(1px)),
+        'indigo': clamp(2px, rem(2px), rem(2px))
     ), $variant);
 
     $separator-size: map.get((
-        material: rem(1px),
-        fluent: rem(1px),
-        bootstrap: rem(8px),
-        indigo-design: rem(1px)
+        'material': rem(1px),
+        'fluent': rem(1px),
+        'bootstrap': rem(8px),
+        'indigo': rem(1px)
     ), $variant);
 
     $separator-title-top: calc(100% - ((#{$indicator-size} / 2) + #{$step-header-padding} + (#{$separator-size} / 2)));
@@ -531,7 +531,7 @@
                 height: var(--igx-icon-size, #{rem(18px)});
                 font-size: var(--igx-icon-size, #{rem(18px)});
             }
-        } @else if $variant == 'indigo-design' {
+        } @else if $variant == 'indigo' {
             > igx-icon {
                 width: var(--igx-icon-size, #{rem(14px)});
                 height: var(--igx-icon-size, #{rem(14px)});
@@ -565,7 +565,7 @@
         }
 
         %igx-stepper__step-title {
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 /* stylelint-disable scss/at-extend-no-missing-placeholder */
                 @extend .ig-typography__subtitle-2;
                 /* stylelint-enable scss/at-extend-no-missing-placeholder */
@@ -666,7 +666,7 @@
     %igx-stepper__step-content-wrapper {
         margin-inline-start: $v-line-indent;
         position: relative;
-        min-height: if($variant == 'indigo-design', rem(24px), rem(32px));
+        min-height: if($variant == 'indigo', rem(24px), rem(32px));
 
         &::before {
             content: '';
@@ -685,7 +685,7 @@
         }
     }
 
-    @if $variant == 'indigo-design' {
+    @if $variant == 'indigo' {
         [aria-selected='true'] {
             %igx-stepper__step-content-wrapper {
                 padding-block: rem(16px);
@@ -835,7 +835,7 @@
             &::before {
                 content: '';
                 width: auto;
-                min-width: if($variant == 'indigo-design', rem(40px), rem(10px));
+                min-width: if($variant == 'indigo', rem(40px), rem(10px));
                 height: $separator-size;
                 flex: 1;
                 position: relative;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss
index 6bb29822942..8db5abc8c7b 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss
@@ -188,66 +188,66 @@
     $theme-variant: map.get($theme, '_meta', 'theme-variant');
 
     $switch-width: map.get((
-        material: 36px,
-        fluent: 40px,
-        bootstrap: 32px,
-        indigo-design: 32px
+        'material': 36px,
+        'fluent': 40px,
+        'bootstrap': 32px,
+        'indigo': 32px
     ), $variant);
 
     $switch-height: map.get((
-        material: 14px,
-        fluent: 20px,
-        bootstrap: 16px,
-        indigo-design: 16px
+        'material': 14px,
+        'fluent': 20px,
+        'bootstrap': 16px,
+        'indigo': 16px
     ), $variant);
 
     $switch-thumb-width: map.get((
-        material: 20px,
-        fluent: 12px,
-        bootstrap: 10px,
-        indigo-design: 8px
+        'material': 20px,
+        'fluent': 12px,
+        'bootstrap': 10px,
+        'indigo': 8px
     ), $variant);
 
     $switch-on-offset: map.get((
-        material: 1px,
-        fluent: 5px,
-        bootstrap: 4px,
-        indigo-design: 7px
+        'material': 1px,
+        'fluent': 5px,
+        'bootstrap': 4px,
+        'indigo': 7px
     ), $variant);
 
     $switch-off-offset: map.get((
-        material: -1px,
-        fluent: 3px,
-        bootstrap: math.div($switch-thumb-width, 4),
-        indigo-design: math.div($switch-thumb-width, 3),
+        'material': -1px,
+        'fluent': 3px,
+        'bootstrap': math.div($switch-thumb-width, 4),
+        'indigo': math.div($switch-thumb-width, 3),
     ), $variant);
 
     $ripple-display: map.get((
-        material: block,
-        fluent: none,
-        bootstrap: none,
-        indigo-design: none
+        'material': block,
+        'fluent': none,
+        'bootstrap': none,
+        'indigo': none
     ), $variant);
 
     $thumb-resting-shadow: map.get((
-        material: var-get($theme, 'resting-shadow'),
-        fluent: none,
-        bootstrap: none,
-        indigo-design: none
+        'material': var-get($theme, 'resting-shadow'),
+        'fluent': none,
+        'bootstrap': none,
+        'indigo': none
     ), $variant);
 
     $thumb-hover-shadow: map.get((
-        material: var-get($theme, 'hover-shadow'),
-        fluent: none,
-        bootstrap: none,
-        indigo-design: none
+        'material': var-get($theme, 'hover-shadow'),
+        'fluent': none,
+        'bootstrap': none,
+        'indigo': none
     ), $variant);
 
     $thumb-disabled-shadow: map.get((
-        material: var-get($theme, 'disabled-shadow'),
-        fluent: none,
-        bootstrap: none,
-        indigo-design: none
+        'material': var-get($theme, 'disabled-shadow'),
+        'fluent': none,
+        'bootstrap': none,
+        'indigo': none
     ), $variant);
 
     $switch-thumb-height: $switch-thumb-width;
@@ -256,10 +256,10 @@
     $ripple-radius: math.div($ripple-size, 2);
 
     $label-margin: map.get((
-        material: rem(12px),
-        fluent: rem(8px),
-        bootstrap: rem(8px),
-        indigo-design: rem(8px)
+        'material': rem(12px),
+        'fluent': rem(8px),
+        'bootstrap': rem(8px),
+        'indigo': rem(8px)
     ), $variant);
 
     $input-transition: all .2s $ease-in-out-quad;
@@ -293,7 +293,7 @@
         user-select: none;
         transition: $input-transition;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             border: rem(2px) solid var-get($theme, 'border-color');
         }
 
@@ -458,7 +458,7 @@
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             %switch-composite {
                 border-radius: var-get($theme, 'border-radius-thumb');
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color');
@@ -488,7 +488,7 @@
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             %switch-composite {
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'error-color-hover');
             }
@@ -506,7 +506,7 @@
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             %switch-composite {
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-focused');
             }
@@ -517,7 +517,7 @@
         %switch-composite--x {
             background: var-get($theme, 'track-on-disabled-color');
         }
-      
+
         %switch-thumb--x {
             background: var-get($theme, 'thumb-on-disabled-color');
         }
@@ -528,7 +528,7 @@
             }
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             %switch-composite--x {
                 border-color: transparent;
             }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
index 904cc7757e8..198a37f79b6 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
@@ -204,7 +204,7 @@
     $variant: map.get($theme, '_meta', 'variant');
     $not-bootstrap-theme: $variant != 'bootstrap';
     $bootstrap-theme: $variant == 'bootstrap';
-    $indigo-theme: $variant == 'indigo-design';
+    $indigo-theme: $variant == 'indigo';
 
     $item-min-width: rem(90px);
     $item-max-width: rem(360px);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss
index f230c9c28bf..512c5d4deeb 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss
@@ -160,17 +160,17 @@
     $not-bootstrap-theme: $variant != 'bootstrap';
 
     $picker-buttons-padding: map.get((
-        material: rem(8px),
-        fluent: rem(8px),
-        bootstrap: rem(16px),
-        indigo-design: rem(8px) rem(16px),
+        'material': rem(8px),
+        'fluent': rem(8px),
+        'bootstrap': rem(16px),
+        'indigo': rem(8px) rem(16px),
     ), $variant);
 
     $picker-header-padding: map.get((
-        material: rem(24px) rem(16px),
-        fluent: rem(16px),
-        bootstrap: rem(16px),
-        indigo-design: rem(16px) rem(24px) ,
+        'material': rem(24px) rem(16px),
+        'fluent': rem(16px),
+        'bootstrap': rem(16px),
+        'indigo': rem(16px) rem(24px) ,
     ), $variant);
 
     %time-picker-display {
@@ -269,7 +269,7 @@
     }
 
     %time-picker__column {
-        width: if($variant == 'indigo-design', rem(54px), rem(64px));
+        width: if($variant == 'indigo', rem(54px), rem(64px));
         padding: 0;
         cursor: pointer;
         display: flex;
@@ -287,7 +287,7 @@
     }
 
     %time-picker__item {
-        width: if($variant == 'indigo-design', rem(46px), rem(54px));
+        width: if($variant == 'indigo', rem(46px), rem(54px));
         padding: rem(5px) rem(10px);
         border-radius: var-get($theme, 'active-item-border-radius');
         height: var-get($theme, 'time-item-size');
@@ -340,7 +340,7 @@
 
         padding: $picker-header-padding;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             gap: rem(2px);
         }
 
@@ -349,7 +349,7 @@
 
     %time-picker-display:not(%time-picker-display--vertical) {
         %time-picker__header {
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 border-block-end: rem(1px) solid var-get($theme, 'divider-color');
             }
         }
@@ -360,7 +360,7 @@
     }
 
     %time-picker__header--vertical {
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             min-width: rem(136px);
             border-inline-end: rem(1px) solid var-get($theme, 'divider-color');
         } @else {
@@ -391,7 +391,7 @@
         padding: $picker-buttons-padding;
         gap: rem(8px);
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             [igxbutton] {
                 min-width: rem(88px);
             }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss
index f9202bc2b55..5d913a2da79 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss
@@ -85,7 +85,7 @@
         'material': rem(10px) rem(16px),
         'fluent': rem(8px) rem(12px),
         'bootstrap': rem(12px),
-        'indigo-design': rem(10px) rem(16px)
+        'indigo': rem(10px) rem(16px)
     ), $variant);
 
     %igx-toast-display {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss
index 38007ef077b..dd412038042 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss
@@ -86,7 +86,7 @@
         padding: 0 rem(8px);
         min-height: rem(24px);
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             padding: rem(4px) rem(8px);
         }
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss
index 216e1b9d7a1..5fdc78879d2 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss
@@ -112,7 +112,7 @@
     @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'variant');
-    $indigo-theme: $variant == 'indigo-design';
+    $indigo-theme: $variant == 'indigo';
 
     $node-indent-default: (
         comfortable: rem(24px),
@@ -133,24 +133,24 @@
     $icon-space-indigo: rem(4px);
 
     $node-indent: map.get((
-        material: $node-indent-default,
-        fluent: $node-indent-default,
-        bootstrap: $node-indent-default,
-        indigo-design: $node-indent-indigo
+        'material': $node-indent-default,
+        'fluent': $node-indent-default,
+        'bootstrap': $node-indent-default,
+        'indigo': $node-indent-indigo
     ), $variant);
 
     $icon-size: map.get((
-        material: $icon-size-default,
-        fluent: $icon-size-default,
-        bootstrap: $icon-size-default,
-        indigo-design: $icon-size-indigo
+        'material': $icon-size-default,
+        'fluent': $icon-size-default,
+        'bootstrap': $icon-size-default,
+        'indigo': $icon-size-indigo
     ), $variant);
 
     $icon-space: map.get((
-        material: $icon-space-default,
-        fluent: $icon-space-default,
-        bootstrap: $icon-space-default,
-        indigo-design: $icon-space-indigo
+        'material': $icon-space-default,
+        'fluent': $icon-space-default,
+        'bootstrap': $icon-space-default,
+        'indigo': $icon-space-indigo
     ), $variant);
 
     $circular-bar-size: (
@@ -186,7 +186,7 @@
         --tree-size: var(--component-size);
         flex-direction: column;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             border-radius: rem(4px);
         }
     }
@@ -201,8 +201,8 @@
     %node-select {
         margin-inline-end: $icon-space;
     }
-    
-    @if $variant == 'indigo-design' {
+
+    @if $variant == 'indigo' {
         %node-select {
             margin-inline-end: rem(8px);
         }
@@ -226,7 +226,7 @@
         background: var-get($theme, 'background');
         color: var-get($theme, 'foreground');
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             border-radius: rem(4px);
             margin-block-end: rem(4px);
 
@@ -268,7 +268,7 @@
                 background: var-get($theme, 'hover-color');
             }
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 color: var-get($theme, 'foreground-active');
             }
         }
@@ -292,7 +292,7 @@
             &::after {
                 background: var-get($theme, 'hover-selected-color');
 
-                @if $variant == 'indigo-design' {
+                @if $variant == 'indigo' {
                     background: var-get($theme, 'hover-color');
                 }
             }
@@ -303,7 +303,7 @@
         background: var-get($theme, 'background-active');
         color: var-get($theme, 'foreground-active');
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             &:hover {
                 background: var-get($theme, 'hover-selected-color');
 
@@ -318,7 +318,7 @@
         background: var-get($theme, 'background-active-selected');
         color: var-get($theme, 'foreground-active-selected');
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             &:hover {
                 background: var-get($theme, 'hover-selected-color');
             }
@@ -332,7 +332,7 @@
     %node-wrapper--focused {
         box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'border-color');
         }
     }
@@ -341,7 +341,7 @@
         background: var-get($theme, 'background-disabled') !important;
         color: var-get($theme, 'foreground-disabled') !important;
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             igx-icon {
                 color: var-get($theme, 'foreground-disabled') !important;
             }
@@ -364,7 +364,7 @@
         --component-size: var(--tree-size);
         --spacer: #{sizable(#{map.get($node-indent, 'compact')}, #{map.get($node-indent, 'cosy')}, #{map.get($node-indent, 'comfortable')})};
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             --spacer: #{sizable(24px)};
         }
         width: var(--spacer);
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
index a3cdc63e333..0ba134976fe 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
@@ -116,7 +116,7 @@
 
     @if $theme {
         #{$scope} {
-            --ig-theme: #{if($theme == 'indigo-design', 'indigo', #{$theme})};
+            --ig-theme: #{$theme};
             --ig-theme-variant: #{$variant};
         }
     }
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
index 4a634082fee..57c6e23a479 100644
--- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
+++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
@@ -1,5 +1,6 @@
 import { DOCUMENT, NgIf, NgTemplateOutlet, NgClass, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
 import {
+    AfterViewChecked,
     ChangeDetectorRef,
     Component,
     ContentChild,
@@ -7,6 +8,7 @@ import {
     ElementRef,
     HostBinding,
     HostListener, Inject, Input,
+    OnDestroy,
     Optional, QueryList, booleanAttribute
 } from '@angular/core';
 import { IInputResourceStrings, InputResourceStringsEN } from '../core/i18n/input-resources';
@@ -26,6 +28,7 @@ import { IgxIconComponent } from '../icon/icon.component';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { IgxTheme, ThemeService } from '../services/theme/theme.service';
 import { IgxIconService } from '../icon/icon.service';
+import { Subject, Subscription } from 'rxjs';
 
 @Component({
     selector: 'igx-input-group',
@@ -34,7 +37,7 @@ import { IgxIconService } from '../icon/icon.service';
     standalone: true,
     imports: [NgIf, NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, NgClass, IgxSuffixDirective, IgxIconComponent, NgSwitch, NgSwitchCase, NgSwitchDefault]
 })
-export class IgxInputGroupComponent implements IgxInputGroupBase {
+export class IgxInputGroupComponent implements IgxInputGroupBase, AfterViewChecked, OnDestroy {
     /**
      * Sets the resource strings.
      * By default it uses EN resources.
@@ -122,6 +125,8 @@ export class IgxInputGroupComponent implements IgxInputGroupBase {
     private _type: IgxInputGroupType = null;
     private _filled = false;
     private _theme: IgxTheme;
+    private _theme$ = new Subject<IgxTheme>();
+    private _subscription: Subscription;
     private _resourceStrings = getCurrentResourceStrings(InputResourceStringsEN);
 
     /** @hidden */
@@ -216,7 +221,11 @@ export class IgxInputGroupComponent implements IgxInputGroupBase {
         private themeService: ThemeService,
         private iconService?: IgxIconService
     ) {
-        this.theme = this.themeService.theme;
+        this._subscription = this._theme$.asObservable().subscribe(value => {
+            this._theme = value as IgxTheme;
+            this.cdr.detectChanges();
+        });
+
         this.iconService.addIconRef('clear', 'default', {
             name: 'clear',
             family: 'material',
@@ -435,4 +444,23 @@ export class IgxInputGroupComponent implements IgxInputGroupBase {
     public set filled(val) {
         this._filled = val;
     }
+
+    /** @hidden @internal */
+    public ngAfterViewChecked() {
+        if (!this._theme) {
+            const theme = this.theme ?? this.themeService.getComponentTheme(this.element);
+
+            if (theme) {
+                Promise.resolve().then(() => {
+                    this._theme$.next(theme);
+                    this.cdr.markForCheck();
+                });
+            }
+        }
+    }
+
+    /** @hidden @internal */
+    public ngOnDestroy() {
+        this._subscription.unsubscribe();
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/services/theme/theme.service.ts b/projects/igniteui-angular/src/lib/services/theme/theme.service.ts
index 2e4157dd133..e7836e47aca 100644
--- a/projects/igniteui-angular/src/lib/services/theme/theme.service.ts
+++ b/projects/igniteui-angular/src/lib/services/theme/theme.service.ts
@@ -1,4 +1,4 @@
-import { Inject, Injectable } from "@angular/core";
+import { ElementRef, Inject, Injectable } from "@angular/core";
 import { mkenum } from "../../core/utils";
 import { BehaviorSubject } from "rxjs";
 import { DOCUMENT } from "@angular/common";
@@ -23,7 +23,7 @@ export class ThemeService {
      * Sets the theme of the component.
      * Allowed values of type IgxTheme.
      */
-    public theme: IgxTheme;
+    public globalTheme: IgxTheme;
     private theme$ = new BehaviorSubject<IgxTheme>("material");
 
     constructor(
@@ -31,7 +31,7 @@ export class ThemeService {
         private document: any,
     ) {
         this.theme$.asObservable().subscribe((value) => {
-            this.theme = value as IgxTheme;
+            this.globalTheme = value as IgxTheme;
         });
 
         this.init();
@@ -47,4 +47,11 @@ export class ThemeService {
             this.theme$.next(theme as IgxTheme);
         }
     }
+
+    public getComponentTheme(el: ElementRef) {
+        return globalThis.window
+        ?.getComputedStyle(el.nativeElement)
+        .getPropertyValue('--theme')
+        .trim() as IgxTheme;
+    }
 }