diff --git a/package-lock.json b/package-lock.json
index 711eb1c22..85ff443c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,7 +37,7 @@
         "husky": "^9.1.7",
         "ig-typedoc-theme": "^7.0.1",
         "igniteui-i18n-resources": "^1.0.2",
-        "igniteui-theming": "^24.1.2",
+        "igniteui-theming": "^25.0.0-beta.4",
         "keep-a-changelog": "^2.8.0",
         "lint-staged": "^16.2.7",
         "lit-analyzer": "^2.0.3",
@@ -7778,9 +7778,9 @@
       }
     },
     "node_modules/igniteui-theming": {
-      "version": "24.1.2",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-24.1.2.tgz",
-      "integrity": "sha512-Buz5rDPnOPkX5iPDyH2jCMRtJu5CnnSFBco0Sw5lkmXXgp6+zVyG6eTZQ/m1UR0AEBwb0tHo+6IIEebpMvRWRQ==",
+      "version": "25.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-25.0.0-beta.4.tgz",
+      "integrity": "sha512-P408I01UUMJsUtUobG7AX5pgwOnsIWT9TsPukMUd5rCp//CCVpSs8lwzxOM4nybby0dLI+HThaaYzPhSJdV/EA==",
       "dev": true,
       "license": "MIT"
     },
diff --git a/package.json b/package.json
index b9204ea72..d787023ee 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,7 @@
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^7.0.1",
     "igniteui-i18n-resources": "^1.0.2",
-    "igniteui-theming": "^24.1.2",
+    "igniteui-theming": "^25.0.0-beta.4",
     "keep-a-changelog": "^2.8.0",
     "lint-staged": "^16.2.7",
     "lit-analyzer": "^2.0.3",
diff --git a/src/components/avatar/themes/dark/avatar.bootstrap.scss b/src/components/avatar/themes/dark/avatar.bootstrap.scss
index 054c9776c..68cc3c7bb 100644
--- a/src/components/avatar/themes/dark/avatar.bootstrap.scss
+++ b/src/components/avatar/themes/dark/avatar.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-avatar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/avatar/themes/dark/avatar.fluent.scss b/src/components/avatar/themes/dark/avatar.fluent.scss
index 7fe251d87..679ee2e59 100644
--- a/src/components/avatar/themes/dark/avatar.fluent.scss
+++ b/src/components/avatar/themes/dark/avatar.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-avatar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/avatar/themes/dark/avatar.indigo.scss b/src/components/avatar/themes/dark/avatar.indigo.scss
index 8f5c3c8de..5c1ebeb56 100644
--- a/src/components/avatar/themes/dark/avatar.indigo.scss
+++ b/src/components/avatar/themes/dark/avatar.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-avatar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/avatar/themes/dark/avatar.material.scss b/src/components/avatar/themes/dark/avatar.material.scss
index 63db92c80..0dddc23d0 100644
--- a/src/components/avatar/themes/dark/avatar.material.scss
+++ b/src/components/avatar/themes/dark/avatar.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-avatar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/avatar/themes/light/avatar.bootstrap.scss b/src/components/avatar/themes/light/avatar.bootstrap.scss
index 44c9376bf..8bade7490 100644
--- a/src/components/avatar/themes/light/avatar.bootstrap.scss
+++ b/src/components/avatar/themes/light/avatar.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-avatar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/avatar/themes/light/avatar.fluent.scss b/src/components/avatar/themes/light/avatar.fluent.scss
index 1da2430b0..4d87074b4 100644
--- a/src/components/avatar/themes/light/avatar.fluent.scss
+++ b/src/components/avatar/themes/light/avatar.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-avatar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/avatar/themes/light/avatar.indigo.scss b/src/components/avatar/themes/light/avatar.indigo.scss
index c57b961c0..641839724 100644
--- a/src/components/avatar/themes/light/avatar.indigo.scss
+++ b/src/components/avatar/themes/light/avatar.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-avatar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/avatar/themes/light/avatar.material.scss b/src/components/avatar/themes/light/avatar.material.scss
index b288be892..3271cfef8 100644
--- a/src/components/avatar/themes/light/avatar.material.scss
+++ b/src/components/avatar/themes/light/avatar.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-avatar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/avatar/themes/light/avatar.shared.scss b/src/components/avatar/themes/light/avatar.shared.scss
index 028be1f80..4a7e8438a 100644
--- a/src/components/avatar/themes/light/avatar.shared.scss
+++ b/src/components/avatar/themes/light/avatar.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-avatar');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/badge/themes/dark/badge.bootstrap.scss b/src/components/badge/themes/dark/badge.bootstrap.scss
index 914cc9a73..68cc3c7bb 100644
--- a/src/components/badge/themes/dark/badge.bootstrap.scss
+++ b/src/components/badge/themes/dark/badge.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-badge');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/badge/themes/dark/badge.fluent.scss b/src/components/badge/themes/dark/badge.fluent.scss
index 16a0338ee..679ee2e59 100644
--- a/src/components/badge/themes/dark/badge.fluent.scss
+++ b/src/components/badge/themes/dark/badge.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-badge');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/badge/themes/dark/badge.indigo.scss b/src/components/badge/themes/dark/badge.indigo.scss
index 1c28f6234..5378468d3 100644
--- a/src/components/badge/themes/dark/badge.indigo.scss
+++ b/src/components/badge/themes/dark/badge.indigo.scss
@@ -5,7 +5,7 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-badge');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
 
 :host([variant='warning']) [part~='base'] {
@@ -15,4 +15,4 @@ $theme: $indigo;
     ::slotted(igc-icon) {
         color: color(gray, 50);
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/badge/themes/dark/badge.material.scss b/src/components/badge/themes/dark/badge.material.scss
index d3b6ad76b..0dddc23d0 100644
--- a/src/components/badge/themes/dark/badge.material.scss
+++ b/src/components/badge/themes/dark/badge.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-badge');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/badge/themes/light/badge.bootstrap.scss b/src/components/badge/themes/light/badge.bootstrap.scss
index 158222b7f..8bade7490 100644
--- a/src/components/badge/themes/light/badge.bootstrap.scss
+++ b/src/components/badge/themes/light/badge.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-badge');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/badge/themes/light/badge.fluent.scss b/src/components/badge/themes/light/badge.fluent.scss
index 7433b1f38..4d87074b4 100644
--- a/src/components/badge/themes/light/badge.fluent.scss
+++ b/src/components/badge/themes/light/badge.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-badge');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/badge/themes/light/badge.indigo.scss b/src/components/badge/themes/light/badge.indigo.scss
index 13cc630c4..641839724 100644
--- a/src/components/badge/themes/light/badge.indigo.scss
+++ b/src/components/badge/themes/light/badge.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-badge');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/badge/themes/light/badge.material.scss b/src/components/badge/themes/light/badge.material.scss
index 73c8c4b9e..3271cfef8 100644
--- a/src/components/badge/themes/light/badge.material.scss
+++ b/src/components/badge/themes/light/badge.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-badge');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/badge/themes/light/badge.shared.scss b/src/components/badge/themes/light/badge.shared.scss
index 94d6682a7..4a7e8438a 100644
--- a/src/components/badge/themes/light/badge.shared.scss
+++ b/src/components/badge/themes/light/badge.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-badge');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/banner/themes/dark/banner.bootstrap.scss b/src/components/banner/themes/dark/banner.bootstrap.scss
index 840363c57..4583b8945 100644
--- a/src/components/banner/themes/dark/banner.bootstrap.scss
+++ b/src/components/banner/themes/dark/banner.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-banner');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/banner/themes/dark/banner.fluent.scss b/src/components/banner/themes/dark/banner.fluent.scss
index 4624a8067..5b468e505 100644
--- a/src/components/banner/themes/dark/banner.fluent.scss
+++ b/src/components/banner/themes/dark/banner.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-banner');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/banner/themes/dark/banner.indigo.scss b/src/components/banner/themes/dark/banner.indigo.scss
index 076d232e7..22d505355 100644
--- a/src/components/banner/themes/dark/banner.indigo.scss
+++ b/src/components/banner/themes/dark/banner.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-banner');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/banner/themes/dark/banner.material.scss b/src/components/banner/themes/dark/banner.material.scss
index a5e2f2109..0573bf445 100644
--- a/src/components/banner/themes/dark/banner.material.scss
+++ b/src/components/banner/themes/dark/banner.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-banner');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/banner/themes/light/banner.bootstrap.scss b/src/components/banner/themes/light/banner.bootstrap.scss
index 840363c57..4583b8945 100644
--- a/src/components/banner/themes/light/banner.bootstrap.scss
+++ b/src/components/banner/themes/light/banner.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-banner');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/banner/themes/light/banner.fluent.scss b/src/components/banner/themes/light/banner.fluent.scss
index 4624a8067..5b468e505 100644
--- a/src/components/banner/themes/light/banner.fluent.scss
+++ b/src/components/banner/themes/light/banner.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-banner');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/banner/themes/light/banner.indigo.scss b/src/components/banner/themes/light/banner.indigo.scss
index 076d232e7..22d505355 100644
--- a/src/components/banner/themes/light/banner.indigo.scss
+++ b/src/components/banner/themes/light/banner.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-banner');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/banner/themes/light/banner.material.scss b/src/components/banner/themes/light/banner.material.scss
index a5e2f2109..0573bf445 100644
--- a/src/components/banner/themes/light/banner.material.scss
+++ b/src/components/banner/themes/light/banner.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-banner');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/button-group/themes/dark/button-group.bootstrap.scss b/src/components/button-group/themes/dark/button-group.bootstrap.scss
index 4d41e65ca..8bade7490 100644
--- a/src/components/button-group/themes/dark/button-group.bootstrap.scss
+++ b/src/components/button-group/themes/dark/button-group.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-button-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/button-group/themes/dark/button-group.fluent.scss b/src/components/button-group/themes/dark/button-group.fluent.scss
index 34c83f07b..700019ad3 100644
--- a/src/components/button-group/themes/dark/button-group.fluent.scss
+++ b/src/components/button-group/themes/dark/button-group.fluent.scss
@@ -4,6 +4,6 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-button-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
 
diff --git a/src/components/button-group/themes/dark/button-group.indigo.scss b/src/components/button-group/themes/dark/button-group.indigo.scss
index 88afef683..641839724 100644
--- a/src/components/button-group/themes/dark/button-group.indigo.scss
+++ b/src/components/button-group/themes/dark/button-group.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-button-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/button-group/themes/dark/button-group.material.scss b/src/components/button-group/themes/dark/button-group.material.scss
index 6ad92f138..3271cfef8 100644
--- a/src/components/button-group/themes/dark/button-group.material.scss
+++ b/src/components/button-group/themes/dark/button-group.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-button-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/button-group/themes/dark/button-group.shared.scss b/src/components/button-group/themes/dark/button-group.shared.scss
index bcaa9de8b..96b6530e6 100644
--- a/src/components/button-group/themes/dark/button-group.shared.scss
+++ b/src/components/button-group/themes/dark/button-group.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-button-group');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/button-group/themes/light/button-group.bootstrap.scss b/src/components/button-group/themes/light/button-group.bootstrap.scss
index 4d41e65ca..8bade7490 100644
--- a/src/components/button-group/themes/light/button-group.bootstrap.scss
+++ b/src/components/button-group/themes/light/button-group.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-button-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/button-group/themes/light/button-group.fluent.scss b/src/components/button-group/themes/light/button-group.fluent.scss
index 34c83f07b..700019ad3 100644
--- a/src/components/button-group/themes/light/button-group.fluent.scss
+++ b/src/components/button-group/themes/light/button-group.fluent.scss
@@ -4,6 +4,6 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-button-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
 
diff --git a/src/components/button-group/themes/light/button-group.indigo.scss b/src/components/button-group/themes/light/button-group.indigo.scss
index 88afef683..641839724 100644
--- a/src/components/button-group/themes/light/button-group.indigo.scss
+++ b/src/components/button-group/themes/light/button-group.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-button-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/button-group/themes/light/button-group.material.scss b/src/components/button-group/themes/light/button-group.material.scss
index 6ad92f138..3271cfef8 100644
--- a/src/components/button-group/themes/light/button-group.material.scss
+++ b/src/components/button-group/themes/light/button-group.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-button-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/button-group/themes/light/button-group.shared.scss b/src/components/button-group/themes/light/button-group.shared.scss
index bcaa9de8b..96b6530e6 100644
--- a/src/components/button-group/themes/light/button-group.shared.scss
+++ b/src/components/button-group/themes/light/button-group.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-button-group');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/button/themes/button/dark/button.bootstrap.scss b/src/components/button/themes/button/dark/button.bootstrap.scss
index 9224db22b..50a09d9bf 100644
--- a/src/components/button/themes/button/dark/button.bootstrap.scss
+++ b/src/components/button/themes/button/dark/button.bootstrap.scss
@@ -8,17 +8,17 @@ $fab-theme: $bootstrap-fab;
 $outlined-theme: $bootstrap-outlined;
 
 :host([variant='flat']) {
-    @include css-vars-from-theme(diff(light.$base-flat, $flat-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-flat, $flat-theme));
 }
 
 :host([variant='outlined']) {
-    @include css-vars-from-theme(diff(light.$base-outlined, $outlined-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-outlined, $outlined-theme));
 }
 
 :host([variant='contained']) {
-    @include css-vars-from-theme(diff(light.$base-contained, $contained-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-contained, $contained-theme));
 }
 
 :host([variant='fab']) {
-    @include css-vars-from-theme(diff(light.$base-fab, $fab-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-fab, $fab-theme));
 }
diff --git a/src/components/button/themes/button/dark/button.fluent.scss b/src/components/button/themes/button/dark/button.fluent.scss
index 4add3dcaa..9f146bf83 100644
--- a/src/components/button/themes/button/dark/button.fluent.scss
+++ b/src/components/button/themes/button/dark/button.fluent.scss
@@ -8,17 +8,17 @@ $fab-theme: $fluent-fab;
 $outlined-theme: $fluent-outlined;
 
 :host([variant='flat']) {
-    @include css-vars-from-theme(diff(light.$base-flat, $flat-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-flat, $flat-theme));
 }
 
 :host([variant='outlined']) {
-    @include css-vars-from-theme(diff(light.$base-outlined, $outlined-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-outlined, $outlined-theme));
 }
 
 :host([variant='contained']) {
-    @include css-vars-from-theme(diff(light.$base-contained, $contained-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-contained, $contained-theme));
 }
 
 :host([variant='fab']) {
-    @include css-vars-from-theme(diff(light.$base-fab, $fab-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-fab, $fab-theme));
 }
diff --git a/src/components/button/themes/button/dark/button.indigo.scss b/src/components/button/themes/button/dark/button.indigo.scss
index 4068ca0a0..cf67ab866 100644
--- a/src/components/button/themes/button/dark/button.indigo.scss
+++ b/src/components/button/themes/button/dark/button.indigo.scss
@@ -8,17 +8,17 @@ $fab-theme: $indigo-fab;
 $outlined-theme: $indigo-outlined;
 
 :host([variant='flat']) {
-    @include css-vars-from-theme(diff(light.$base-flat, $flat-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-flat, $flat-theme));
 }
 
 :host([variant='outlined']) {
-    @include css-vars-from-theme(diff(light.$base-outlined, $outlined-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-outlined, $outlined-theme));
 }
 
 :host([variant='contained']) {
-    @include css-vars-from-theme(diff(light.$base-contained, $contained-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-contained, $contained-theme));
 }
 
 :host([variant='fab']) {
-    @include css-vars-from-theme(diff(light.$base-fab, $fab-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-fab, $fab-theme));
 }
diff --git a/src/components/button/themes/button/dark/button.material.scss b/src/components/button/themes/button/dark/button.material.scss
index 506f34829..be86375c4 100644
--- a/src/components/button/themes/button/dark/button.material.scss
+++ b/src/components/button/themes/button/dark/button.material.scss
@@ -8,17 +8,17 @@ $fab-theme: $material-fab;
 $outlined-theme: $material-outlined;
 
 :host([variant='flat']) {
-    @include css-vars-from-theme(diff(light.$base-flat, $flat-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-flat, $flat-theme));
 }
 
 :host([variant='outlined']) {
-    @include css-vars-from-theme(diff(light.$base-outlined, $outlined-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-outlined, $outlined-theme));
 }
 
 :host([variant='contained']) {
-    @include css-vars-from-theme(diff(light.$base-contained, $contained-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-contained, $contained-theme));
 }
 
 :host([variant='fab']) {
-    @include css-vars-from-theme(diff(light.$base-fab, $fab-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-fab, $fab-theme));
 }
diff --git a/src/components/button/themes/button/light/button.bootstrap.scss b/src/components/button/themes/button/light/button.bootstrap.scss
index cd91f8d46..0050820d6 100644
--- a/src/components/button/themes/button/light/button.bootstrap.scss
+++ b/src/components/button/themes/button/light/button.bootstrap.scss
@@ -7,17 +7,17 @@ $fab-theme: $bootstrap-fab;
 $outlined-theme: $bootstrap-outlined;
 
 :host([variant='flat']) {
-    @include css-vars-from-theme(diff($base-flat, $flat-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-flat, $flat-theme));
 }
 
 :host([variant='outlined']) {
-    @include css-vars-from-theme(diff($base-outlined, $outlined-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-outlined, $outlined-theme));
 }
 
 :host([variant='contained']) {
-    @include css-vars-from-theme(diff($base-contained, $contained-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-contained, $contained-theme));
 }
 
 :host([variant='fab']) {
-    @include css-vars-from-theme(diff($base-fab, $fab-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-fab, $fab-theme));
 }
diff --git a/src/components/button/themes/button/light/button.fluent.scss b/src/components/button/themes/button/light/button.fluent.scss
index 4e6e7d0d4..26c2e4b73 100644
--- a/src/components/button/themes/button/light/button.fluent.scss
+++ b/src/components/button/themes/button/light/button.fluent.scss
@@ -7,17 +7,17 @@ $fab-theme: $fluent-fab;
 $outlined-theme: $fluent-outlined;
 
 :host([variant='flat']) {
-    @include css-vars-from-theme(diff($base-flat, $flat-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-flat, $flat-theme));
 }
 
 :host([variant='outlined']) {
-    @include css-vars-from-theme(diff($base-outlined, $outlined-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-outlined, $outlined-theme));
 }
 
 :host([variant='contained']) {
-    @include css-vars-from-theme(diff($base-contained, $contained-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-contained, $contained-theme));
 }
 
 :host([variant='fab']) {
-    @include css-vars-from-theme(diff($base-fab, $fab-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-fab, $fab-theme));
 }
diff --git a/src/components/button/themes/button/light/button.indigo.scss b/src/components/button/themes/button/light/button.indigo.scss
index 1c55ceb16..f02750696 100644
--- a/src/components/button/themes/button/light/button.indigo.scss
+++ b/src/components/button/themes/button/light/button.indigo.scss
@@ -7,17 +7,17 @@ $fab-theme: $indigo-fab;
 $outlined-theme: $indigo-outlined;
 
 :host([variant='flat']) {
-    @include css-vars-from-theme(diff($base-flat, $flat-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-flat, $flat-theme));
 }
 
 :host([variant='outlined']) {
-    @include css-vars-from-theme(diff($base-outlined, $outlined-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-outlined, $outlined-theme));
 }
 
 :host([variant='contained']) {
-    @include css-vars-from-theme(diff($base-contained, $contained-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-contained, $contained-theme));
 }
 
 :host([variant='fab']) {
-    @include css-vars-from-theme(diff($base-fab, $fab-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-fab, $fab-theme));
 }
diff --git a/src/components/button/themes/button/light/button.material.scss b/src/components/button/themes/button/light/button.material.scss
index 94a5b111f..0d9444f18 100644
--- a/src/components/button/themes/button/light/button.material.scss
+++ b/src/components/button/themes/button/light/button.material.scss
@@ -7,17 +7,17 @@ $fab-theme: $material-fab;
 $outlined-theme: $material-outlined;
 
 :host([variant='flat']) {
-    @include css-vars-from-theme(diff($base-flat, $flat-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-flat, $flat-theme));
 }
 
 :host([variant='outlined']) {
-    @include css-vars-from-theme(diff($base-outlined, $outlined-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-outlined, $outlined-theme));
 }
 
 :host([variant='contained']) {
-    @include css-vars-from-theme(diff($base-contained, $contained-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-contained, $contained-theme));
 }
 
 :host([variant='fab']) {
-    @include css-vars-from-theme(diff($base-fab, $fab-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-fab, $fab-theme));
 }
diff --git a/src/components/button/themes/button/light/button.shared.scss b/src/components/button/themes/button/light/button.shared.scss
index 4c5624d66..0dd1f96b6 100644
--- a/src/components/button/themes/button/light/button.shared.scss
+++ b/src/components/button/themes/button/light/button.shared.scss
@@ -2,17 +2,17 @@
 @use 'themes' as *;
 
 :host([variant='flat']) {
-    @include css-vars-from-theme($base-flat, 'ig-button');
+    @include css-vars-from-theme($base-flat);
 }
 
 :host([variant='outlined']) {
-    @include css-vars-from-theme($base-outlined, 'ig-button');
+    @include css-vars-from-theme($base-outlined);
 }
 
 :host([variant='contained']) {
-    @include css-vars-from-theme($base-contained, 'ig-button');
+    @include css-vars-from-theme($base-contained);
 }
 
 :host([variant='fab']) {
-    @include css-vars-from-theme($base-fab, 'ig-button');
+    @include css-vars-from-theme($base-fab);
 }
diff --git a/src/components/calendar/themes/dark/calendar.bootstrap.scss b/src/components/calendar/themes/dark/calendar.bootstrap.scss
index 2528fa8c1..4b4f5f3c8 100644
--- a/src/components/calendar/themes/dark/calendar.bootstrap.scss
+++ b/src/components/calendar/themes/dark/calendar.bootstrap.scss
@@ -3,5 +3,5 @@
 @use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $bootstrap), 'ig-calendar');
+    @include css-vars-from-theme(diff(light.$base, $bootstrap));
 }
diff --git a/src/components/calendar/themes/dark/calendar.fluent.scss b/src/components/calendar/themes/dark/calendar.fluent.scss
index 06a66525e..c9a7c8739 100644
--- a/src/components/calendar/themes/dark/calendar.fluent.scss
+++ b/src/components/calendar/themes/dark/calendar.fluent.scss
@@ -3,5 +3,5 @@
 @use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $fluent), 'ig-calendar');
+    @include css-vars-from-theme(diff(light.$base, $fluent));
 }
diff --git a/src/components/calendar/themes/dark/calendar.indigo.scss b/src/components/calendar/themes/dark/calendar.indigo.scss
index 37a6c26f2..1fe59f8bf 100644
--- a/src/components/calendar/themes/dark/calendar.indigo.scss
+++ b/src/components/calendar/themes/dark/calendar.indigo.scss
@@ -3,5 +3,5 @@
 @use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $indigo), 'ig-calendar');
+    @include css-vars-from-theme(diff(light.$base, $indigo));
 }
diff --git a/src/components/calendar/themes/dark/calendar.material.scss b/src/components/calendar/themes/dark/calendar.material.scss
index 2a30347c4..dbc167aa3 100644
--- a/src/components/calendar/themes/dark/calendar.material.scss
+++ b/src/components/calendar/themes/dark/calendar.material.scss
@@ -3,5 +3,5 @@
 @use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $material), 'ig-calendar');
+    @include css-vars-from-theme(diff(light.$base, $material));
 }
diff --git a/src/components/calendar/themes/light/calendar.bootstrap.scss b/src/components/calendar/themes/light/calendar.bootstrap.scss
index b15ff5d6f..8bade7490 100644
--- a/src/components/calendar/themes/light/calendar.bootstrap.scss
+++ b/src/components/calendar/themes/light/calendar.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-calendar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/calendar/themes/light/calendar.fluent.scss b/src/components/calendar/themes/light/calendar.fluent.scss
index c5695dda9..4d87074b4 100644
--- a/src/components/calendar/themes/light/calendar.fluent.scss
+++ b/src/components/calendar/themes/light/calendar.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-calendar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/calendar/themes/light/calendar.indigo.scss b/src/components/calendar/themes/light/calendar.indigo.scss
index d8d9493db..641839724 100644
--- a/src/components/calendar/themes/light/calendar.indigo.scss
+++ b/src/components/calendar/themes/light/calendar.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-calendar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/calendar/themes/light/calendar.material.scss b/src/components/calendar/themes/light/calendar.material.scss
index 828ae11ea..3271cfef8 100644
--- a/src/components/calendar/themes/light/calendar.material.scss
+++ b/src/components/calendar/themes/light/calendar.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-calendar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/calendar/themes/light/calendar.shared.scss b/src/components/calendar/themes/light/calendar.shared.scss
index 2effa6ded..96b6530e6 100644
--- a/src/components/calendar/themes/light/calendar.shared.scss
+++ b/src/components/calendar/themes/light/calendar.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-calendar');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss
index 5fffb24f6..604f49f03 100644
--- a/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss
+++ b/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss
@@ -44,7 +44,7 @@ $theme: $bootstrap;
     background: var-get($theme, 'picker-background');
 }
 
-:host([hide-header]) {
+:host([hide-header][visible-months='1']) {
     [part~='navigation'] {
         border-start-start-radius: var-get($theme, 'border-radius');
         border-start-end-radius: var-get($theme, 'border-radius');
diff --git a/src/components/card/themes/dark/card.bootstrap.scss b/src/components/card/themes/dark/card.bootstrap.scss
index 9124408f2..8bade7490 100644
--- a/src/components/card/themes/dark/card.bootstrap.scss
+++ b/src/components/card/themes/dark/card.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-card');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/card/themes/dark/card.fluent.scss b/src/components/card/themes/dark/card.fluent.scss
index ce37dd085..4d87074b4 100644
--- a/src/components/card/themes/dark/card.fluent.scss
+++ b/src/components/card/themes/dark/card.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-card');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/card/themes/dark/card.indigo.scss b/src/components/card/themes/dark/card.indigo.scss
index 489705929..641839724 100644
--- a/src/components/card/themes/dark/card.indigo.scss
+++ b/src/components/card/themes/dark/card.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-card');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/card/themes/dark/card.material.scss b/src/components/card/themes/dark/card.material.scss
index cc3f4f2fb..3271cfef8 100644
--- a/src/components/card/themes/dark/card.material.scss
+++ b/src/components/card/themes/dark/card.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-card');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/card/themes/dark/card.shared.scss b/src/components/card/themes/dark/card.shared.scss
index f7ea21487..96fbe742c 100644
--- a/src/components/card/themes/dark/card.shared.scss
+++ b/src/components/card/themes/dark/card.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-card');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/card/themes/light/container/card.bootstrap.scss b/src/components/card/themes/light/container/card.bootstrap.scss
index 69e7ffcba..597b7897f 100644
--- a/src/components/card/themes/light/container/card.bootstrap.scss
+++ b/src/components/card/themes/light/container/card.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-card');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/card/themes/light/container/card.fluent.scss b/src/components/card/themes/light/container/card.fluent.scss
index 062ee4e40..925a705e7 100644
--- a/src/components/card/themes/light/container/card.fluent.scss
+++ b/src/components/card/themes/light/container/card.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-card');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/card/themes/light/container/card.indigo.scss b/src/components/card/themes/light/container/card.indigo.scss
index f6227c551..52f7ff3eb 100644
--- a/src/components/card/themes/light/container/card.indigo.scss
+++ b/src/components/card/themes/light/container/card.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-card');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/card/themes/light/container/card.material.scss b/src/components/card/themes/light/container/card.material.scss
index f29f0721f..ba3d04144 100644
--- a/src/components/card/themes/light/container/card.material.scss
+++ b/src/components/card/themes/light/container/card.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-card');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/card/themes/light/container/card.shared.scss b/src/components/card/themes/light/container/card.shared.scss
index 62f985d4f..832db6740 100644
--- a/src/components/card/themes/light/container/card.shared.scss
+++ b/src/components/card/themes/light/container/card.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-card');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/carousel/themes/dark/carousel.bootstrap.scss b/src/components/carousel/themes/dark/carousel.bootstrap.scss
index f32860fb4..97e56c61e 100644
--- a/src/components/carousel/themes/dark/carousel.bootstrap.scss
+++ b/src/components/carousel/themes/dark/carousel.bootstrap.scss
@@ -4,7 +4,7 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-carousel');
+    @include css-vars-from-theme(diff($base, $theme));
 
     --navigation-border-radius: #{var-get($theme, 'border-radius')};
 }
diff --git a/src/components/carousel/themes/dark/carousel.fluent.scss b/src/components/carousel/themes/dark/carousel.fluent.scss
index 48c0d7e57..8edede175 100644
--- a/src/components/carousel/themes/dark/carousel.fluent.scss
+++ b/src/components/carousel/themes/dark/carousel.fluent.scss
@@ -4,7 +4,7 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-carousel');
+    @include css-vars-from-theme(diff($base, $theme));
 
     --navigation-border-radius: #{var-get($theme, 'border-radius')};
 }
diff --git a/src/components/carousel/themes/dark/carousel.indigo.scss b/src/components/carousel/themes/dark/carousel.indigo.scss
index 942f489d9..fe3c4cf2e 100644
--- a/src/components/carousel/themes/dark/carousel.indigo.scss
+++ b/src/components/carousel/themes/dark/carousel.indigo.scss
@@ -4,7 +4,7 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-carousel');
+    @include css-vars-from-theme(diff($base, $theme));
 
     --navigation-border-radius: #{var-get($theme, 'border-radius')};
 }
diff --git a/src/components/carousel/themes/dark/carousel.material.scss b/src/components/carousel/themes/dark/carousel.material.scss
index 8dd224116..b94d7e881 100644
--- a/src/components/carousel/themes/dark/carousel.material.scss
+++ b/src/components/carousel/themes/dark/carousel.material.scss
@@ -4,7 +4,7 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-carousel');
+    @include css-vars-from-theme(diff($base, $theme));
 
     --navigation-border-radius: #{var-get($theme, 'border-radius')};
 }
diff --git a/src/components/carousel/themes/dark/carousel.shared.scss b/src/components/carousel/themes/dark/carousel.shared.scss
index a6d941894..96b6530e6 100644
--- a/src/components/carousel/themes/dark/carousel.shared.scss
+++ b/src/components/carousel/themes/dark/carousel.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-carousel');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/carousel/themes/light/carousel.bootstrap.scss b/src/components/carousel/themes/light/carousel.bootstrap.scss
index f32860fb4..97e56c61e 100644
--- a/src/components/carousel/themes/light/carousel.bootstrap.scss
+++ b/src/components/carousel/themes/light/carousel.bootstrap.scss
@@ -4,7 +4,7 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-carousel');
+    @include css-vars-from-theme(diff($base, $theme));
 
     --navigation-border-radius: #{var-get($theme, 'border-radius')};
 }
diff --git a/src/components/carousel/themes/light/carousel.fluent.scss b/src/components/carousel/themes/light/carousel.fluent.scss
index 48c0d7e57..8edede175 100644
--- a/src/components/carousel/themes/light/carousel.fluent.scss
+++ b/src/components/carousel/themes/light/carousel.fluent.scss
@@ -4,7 +4,7 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-carousel');
+    @include css-vars-from-theme(diff($base, $theme));
 
     --navigation-border-radius: #{var-get($theme, 'border-radius')};
 }
diff --git a/src/components/carousel/themes/light/carousel.indigo.scss b/src/components/carousel/themes/light/carousel.indigo.scss
index 942f489d9..fe3c4cf2e 100644
--- a/src/components/carousel/themes/light/carousel.indigo.scss
+++ b/src/components/carousel/themes/light/carousel.indigo.scss
@@ -4,7 +4,7 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-carousel');
+    @include css-vars-from-theme(diff($base, $theme));
 
     --navigation-border-radius: #{var-get($theme, 'border-radius')};
 }
diff --git a/src/components/carousel/themes/light/carousel.material.scss b/src/components/carousel/themes/light/carousel.material.scss
index 8dd224116..b94d7e881 100644
--- a/src/components/carousel/themes/light/carousel.material.scss
+++ b/src/components/carousel/themes/light/carousel.material.scss
@@ -4,7 +4,7 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-carousel');
+    @include css-vars-from-theme(diff($base, $theme));
 
     --navigation-border-radius: #{var-get($theme, 'border-radius')};
 }
diff --git a/src/components/carousel/themes/light/carousel.shared.scss b/src/components/carousel/themes/light/carousel.shared.scss
index a6d941894..96b6530e6 100644
--- a/src/components/carousel/themes/light/carousel.shared.scss
+++ b/src/components/carousel/themes/light/carousel.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-carousel');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/chat/themes/dark/chat.bootstrap.scss b/src/components/chat/themes/dark/chat.bootstrap.scss
index d9580a4b5..8bade7490 100644
--- a/src/components/chat/themes/dark/chat.bootstrap.scss
+++ b/src/components/chat/themes/dark/chat.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chat/themes/dark/chat.fluent.scss b/src/components/chat/themes/dark/chat.fluent.scss
index d1c3e4abb..4d87074b4 100644
--- a/src/components/chat/themes/dark/chat.fluent.scss
+++ b/src/components/chat/themes/dark/chat.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chat/themes/dark/chat.indigo.scss b/src/components/chat/themes/dark/chat.indigo.scss
index c0a2f2917..641839724 100644
--- a/src/components/chat/themes/dark/chat.indigo.scss
+++ b/src/components/chat/themes/dark/chat.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chat/themes/dark/chat.material.scss b/src/components/chat/themes/dark/chat.material.scss
index 6a388bd8d..3271cfef8 100644
--- a/src/components/chat/themes/dark/chat.material.scss
+++ b/src/components/chat/themes/dark/chat.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chat/themes/dark/chat.shared.scss b/src/components/chat/themes/dark/chat.shared.scss
index fcd84baf1..c33c23a0d 100644
--- a/src/components/chat/themes/dark/chat.shared.scss
+++ b/src/components/chat/themes/dark/chat.shared.scss
@@ -6,7 +6,7 @@ $theme: $base;
 :host {
     color-scheme: dark;
 
-    @include css-vars-from-theme($theme, 'ig-chat');
+    @include css-vars-from-theme($theme);
 
     igc-chat-message::part(message-container) {
         --shiki-purple: #b392f0;
diff --git a/src/components/chat/themes/light/chat.bootstrap.scss b/src/components/chat/themes/light/chat.bootstrap.scss
index d9580a4b5..8bade7490 100644
--- a/src/components/chat/themes/light/chat.bootstrap.scss
+++ b/src/components/chat/themes/light/chat.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chat/themes/light/chat.fluent.scss b/src/components/chat/themes/light/chat.fluent.scss
index d1c3e4abb..4d87074b4 100644
--- a/src/components/chat/themes/light/chat.fluent.scss
+++ b/src/components/chat/themes/light/chat.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chat/themes/light/chat.indigo.scss b/src/components/chat/themes/light/chat.indigo.scss
index c0a2f2917..641839724 100644
--- a/src/components/chat/themes/light/chat.indigo.scss
+++ b/src/components/chat/themes/light/chat.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chat/themes/light/chat.material.scss b/src/components/chat/themes/light/chat.material.scss
index 6a388bd8d..3271cfef8 100644
--- a/src/components/chat/themes/light/chat.material.scss
+++ b/src/components/chat/themes/light/chat.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chat/themes/light/chat.shared.scss b/src/components/chat/themes/light/chat.shared.scss
index 0fd9c40d0..4c8aa86fd 100644
--- a/src/components/chat/themes/light/chat.shared.scss
+++ b/src/components/chat/themes/light/chat.shared.scss
@@ -6,7 +6,7 @@ $theme: $base;
 :host {
     color-scheme: light;
 
-    @include css-vars-from-theme($theme, 'ig-chat');
+    @include css-vars-from-theme($theme);
 
     igc-chat-message::part(message-container) {
         --shiki-purple: #6f42c1;
diff --git a/src/components/checkbox/themes/dark/checkbox/checkbox.bootstrap.scss b/src/components/checkbox/themes/dark/checkbox/checkbox.bootstrap.scss
index af32195fe..86bbf4b4f 100644
--- a/src/components/checkbox/themes/dark/checkbox/checkbox.bootstrap.scss
+++ b/src/components/checkbox/themes/dark/checkbox/checkbox.bootstrap.scss
@@ -5,7 +5,7 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-checkbox');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
 
 :host(:not([disabled]):state(ig-invalid)),
diff --git a/src/components/checkbox/themes/dark/checkbox/checkbox.fluent.scss b/src/components/checkbox/themes/dark/checkbox/checkbox.fluent.scss
index b8d976312..db450e052 100644
--- a/src/components/checkbox/themes/dark/checkbox/checkbox.fluent.scss
+++ b/src/components/checkbox/themes/dark/checkbox/checkbox.fluent.scss
@@ -5,7 +5,7 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-checkbox');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
 
 :host(:state(ig-invalid):hover) {
diff --git a/src/components/checkbox/themes/dark/checkbox/checkbox.indigo.scss b/src/components/checkbox/themes/dark/checkbox/checkbox.indigo.scss
index e2125e32a..7f1f12107 100644
--- a/src/components/checkbox/themes/dark/checkbox/checkbox.indigo.scss
+++ b/src/components/checkbox/themes/dark/checkbox/checkbox.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-checkbox');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/checkbox/themes/dark/checkbox/checkbox.material.scss b/src/components/checkbox/themes/dark/checkbox/checkbox.material.scss
index a1a65bd06..137e608b7 100644
--- a/src/components/checkbox/themes/dark/checkbox/checkbox.material.scss
+++ b/src/components/checkbox/themes/dark/checkbox/checkbox.material.scss
@@ -5,7 +5,7 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-checkbox');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
 
 [part~='base']:hover {
diff --git a/src/components/checkbox/themes/dark/switch/switch.bootstrap.scss b/src/components/checkbox/themes/dark/switch/switch.bootstrap.scss
index b105a505c..7abed02be 100644
--- a/src/components/checkbox/themes/dark/switch/switch.bootstrap.scss
+++ b/src/components/checkbox/themes/dark/switch/switch.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-switch');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/checkbox/themes/dark/switch/switch.fluent.scss b/src/components/checkbox/themes/dark/switch/switch.fluent.scss
index b91966473..b53713d77 100644
--- a/src/components/checkbox/themes/dark/switch/switch.fluent.scss
+++ b/src/components/checkbox/themes/dark/switch/switch.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-switch');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/checkbox/themes/dark/switch/switch.indigo.scss b/src/components/checkbox/themes/dark/switch/switch.indigo.scss
index 5a0b89942..0275266e8 100644
--- a/src/components/checkbox/themes/dark/switch/switch.indigo.scss
+++ b/src/components/checkbox/themes/dark/switch/switch.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-switch');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/checkbox/themes/dark/switch/switch.material.scss b/src/components/checkbox/themes/dark/switch/switch.material.scss
index 75e306a37..543615375 100644
--- a/src/components/checkbox/themes/dark/switch/switch.material.scss
+++ b/src/components/checkbox/themes/dark/switch/switch.material.scss
@@ -5,7 +5,7 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-switch');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
 
 [part~='base'] {
diff --git a/src/components/checkbox/themes/light/checkbox/checkbox.bootstrap.scss b/src/components/checkbox/themes/light/checkbox/checkbox.bootstrap.scss
index 4b398b238..8bade7490 100644
--- a/src/components/checkbox/themes/light/checkbox/checkbox.bootstrap.scss
+++ b/src/components/checkbox/themes/light/checkbox/checkbox.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-checkbox');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/checkbox/themes/light/checkbox/checkbox.fluent.scss b/src/components/checkbox/themes/light/checkbox/checkbox.fluent.scss
index 574676636..4d87074b4 100644
--- a/src/components/checkbox/themes/light/checkbox/checkbox.fluent.scss
+++ b/src/components/checkbox/themes/light/checkbox/checkbox.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-checkbox');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/checkbox/themes/light/checkbox/checkbox.indigo.scss b/src/components/checkbox/themes/light/checkbox/checkbox.indigo.scss
index 7f6d18383..641839724 100644
--- a/src/components/checkbox/themes/light/checkbox/checkbox.indigo.scss
+++ b/src/components/checkbox/themes/light/checkbox/checkbox.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-checkbox');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/checkbox/themes/light/checkbox/checkbox.material.scss b/src/components/checkbox/themes/light/checkbox/checkbox.material.scss
index 516103844..3271cfef8 100644
--- a/src/components/checkbox/themes/light/checkbox/checkbox.material.scss
+++ b/src/components/checkbox/themes/light/checkbox/checkbox.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-checkbox');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/checkbox/themes/light/checkbox/checkbox.shared.scss b/src/components/checkbox/themes/light/checkbox/checkbox.shared.scss
index 8f9bd1f5e..96b6530e6 100644
--- a/src/components/checkbox/themes/light/checkbox/checkbox.shared.scss
+++ b/src/components/checkbox/themes/light/checkbox/checkbox.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-checkbox');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/checkbox/themes/light/switch/switch.bootstrap.scss b/src/components/checkbox/themes/light/switch/switch.bootstrap.scss
index ede8567b1..8bade7490 100644
--- a/src/components/checkbox/themes/light/switch/switch.bootstrap.scss
+++ b/src/components/checkbox/themes/light/switch/switch.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-switch');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/checkbox/themes/light/switch/switch.fluent.scss b/src/components/checkbox/themes/light/switch/switch.fluent.scss
index e90b2bca0..4d87074b4 100644
--- a/src/components/checkbox/themes/light/switch/switch.fluent.scss
+++ b/src/components/checkbox/themes/light/switch/switch.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-switch');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/checkbox/themes/light/switch/switch.indigo.scss b/src/components/checkbox/themes/light/switch/switch.indigo.scss
index 909497ff6..641839724 100644
--- a/src/components/checkbox/themes/light/switch/switch.indigo.scss
+++ b/src/components/checkbox/themes/light/switch/switch.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-switch');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/checkbox/themes/light/switch/switch.material.scss b/src/components/checkbox/themes/light/switch/switch.material.scss
index 04ee5ff18..3271cfef8 100644
--- a/src/components/checkbox/themes/light/switch/switch.material.scss
+++ b/src/components/checkbox/themes/light/switch/switch.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-switch');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/checkbox/themes/light/switch/switch.shared.scss b/src/components/checkbox/themes/light/switch/switch.shared.scss
index 0b2649a2f..96b6530e6 100644
--- a/src/components/checkbox/themes/light/switch/switch.shared.scss
+++ b/src/components/checkbox/themes/light/switch/switch.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-switch');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/chip/themes/dark/chip.bootstrap.scss b/src/components/chip/themes/dark/chip.bootstrap.scss
index 167c2dd45..68cc3c7bb 100644
--- a/src/components/chip/themes/dark/chip.bootstrap.scss
+++ b/src/components/chip/themes/dark/chip.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-chip');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/chip/themes/dark/chip.fluent.scss b/src/components/chip/themes/dark/chip.fluent.scss
index 19435d1bb..679ee2e59 100644
--- a/src/components/chip/themes/dark/chip.fluent.scss
+++ b/src/components/chip/themes/dark/chip.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-chip');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/chip/themes/dark/chip.indigo.scss b/src/components/chip/themes/dark/chip.indigo.scss
index 32a12d5e2..17d3a2516 100644
--- a/src/components/chip/themes/dark/chip.indigo.scss
+++ b/src/components/chip/themes/dark/chip.indigo.scss
@@ -5,7 +5,7 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-chip');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
 
 :host([variant='info']) button,
diff --git a/src/components/chip/themes/dark/chip.material.scss b/src/components/chip/themes/dark/chip.material.scss
index 1cd2f81a1..0dddc23d0 100644
--- a/src/components/chip/themes/dark/chip.material.scss
+++ b/src/components/chip/themes/dark/chip.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-chip');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/chip/themes/light/chip.bootstrap.scss b/src/components/chip/themes/light/chip.bootstrap.scss
index 71505a964..8bade7490 100644
--- a/src/components/chip/themes/light/chip.bootstrap.scss
+++ b/src/components/chip/themes/light/chip.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chip');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chip/themes/light/chip.fluent.scss b/src/components/chip/themes/light/chip.fluent.scss
index e314ca120..4d87074b4 100644
--- a/src/components/chip/themes/light/chip.fluent.scss
+++ b/src/components/chip/themes/light/chip.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chip');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chip/themes/light/chip.indigo.scss b/src/components/chip/themes/light/chip.indigo.scss
index f5182a9a2..c0c07e6a2 100644
--- a/src/components/chip/themes/light/chip.indigo.scss
+++ b/src/components/chip/themes/light/chip.indigo.scss
@@ -4,7 +4,7 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chip');
+    @include css-vars-from-theme(diff($base, $theme));
 }
 
 :host([variant='info']) button,
@@ -45,4 +45,4 @@ $theme: $indigo;
 :host([selected]) button[disabled],
 :host([variant='primary']) button[disabled] {
     color: contrast-color(primary, 900, .4);
-}
\ No newline at end of file
+}
diff --git a/src/components/chip/themes/light/chip.material.scss b/src/components/chip/themes/light/chip.material.scss
index 8ce939faf..3271cfef8 100644
--- a/src/components/chip/themes/light/chip.material.scss
+++ b/src/components/chip/themes/light/chip.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chip');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chip/themes/light/chip.shared.scss b/src/components/chip/themes/light/chip.shared.scss
index 85258cd34..96b6530e6 100644
--- a/src/components/chip/themes/light/chip.shared.scss
+++ b/src/components/chip/themes/light/chip.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-chip');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/combo/themes/dark/_themes.scss b/src/components/combo/themes/dark/_themes.scss
index 57445f10d..30a5d523a 100644
--- a/src/components/combo/themes/dark/_themes.scss
+++ b/src/components/combo/themes/dark/_themes.scss
@@ -1,25 +1,8 @@
 @use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/combo' as *;
-@use 'components/input/themes/dark/themes' as input-theme;
 
-$material: map.merge(digest-schema($dark-material-combo), (
-    helper-text-color: map.get(input-theme.$material, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$material, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$material, 'error-secondary-color')
-));
-$bootstrap: map.merge(digest-schema($dark-bootstrap-combo), (
-    helper-text-color: map.get(input-theme.$bootstrap, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$bootstrap, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$bootstrap, 'error-secondary-color')
-));
-$fluent: map.merge(digest-schema($dark-fluent-combo), (
-    helper-text-color: map.get(input-theme.$fluent, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$fluent, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$fluent, 'error-secondary-color')
-));
-$indigo: map.merge(digest-schema($dark-indigo-combo), (
-    helper-text-color: map.get(input-theme.$indigo, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$indigo, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$indigo, 'error-secondary-color')
-));
\ No newline at end of file
+$material: digest-schema($dark-material-combo);
+$bootstrap: digest-schema($dark-bootstrap-combo);
+$fluent: digest-schema($dark-fluent-combo);
+$indigo: digest-schema($dark-indigo-combo);
diff --git a/src/components/combo/themes/dark/combo.bootstrap.scss b/src/components/combo/themes/dark/combo.bootstrap.scss
index 07952b36c..65148d532 100644
--- a/src/components/combo/themes/dark/combo.bootstrap.scss
+++ b/src/components/combo/themes/dark/combo.bootstrap.scss
@@ -8,6 +8,9 @@ $theme: $bootstrap;
 $dropdown: map.remove(dropdown.$bootstrap, 'default-size');
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-combo');
-    @include css-vars-from-theme($dropdown, 'ig-combo-list');
+    @include css-vars-from-theme(diff(light.$base, $theme));
+
+    igc-popover {
+        @include css-vars-from-theme($dropdown);
+    }
 }
diff --git a/src/components/combo/themes/dark/combo.fluent.scss b/src/components/combo/themes/dark/combo.fluent.scss
index defd1c076..d9488cd48 100644
--- a/src/components/combo/themes/dark/combo.fluent.scss
+++ b/src/components/combo/themes/dark/combo.fluent.scss
@@ -8,6 +8,9 @@ $theme: $fluent;
 $dropdown: map.remove(dropdown.$fluent, 'default-size');
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-combo');
-    @include css-vars-from-theme($dropdown, 'ig-combo-list');
+    @include css-vars-from-theme(diff(light.$base, $theme));
+
+    igc-popover {
+        @include css-vars-from-theme($dropdown);
+    }
 }
diff --git a/src/components/combo/themes/dark/combo.indigo.scss b/src/components/combo/themes/dark/combo.indigo.scss
index 9c344568d..2680b183c 100644
--- a/src/components/combo/themes/dark/combo.indigo.scss
+++ b/src/components/combo/themes/dark/combo.indigo.scss
@@ -8,6 +8,9 @@ $theme: $indigo;
 $dropdown: map.remove(dropdown.$indigo, 'default-size');
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-combo');
-    @include css-vars-from-theme($dropdown, 'ig-combo-list');
+    @include css-vars-from-theme(diff(light.$base, $theme));
+
+    igc-popover {
+        @include css-vars-from-theme($dropdown);
+    }
 }
diff --git a/src/components/combo/themes/dark/combo.material.scss b/src/components/combo/themes/dark/combo.material.scss
index 8336ec154..341935354 100644
--- a/src/components/combo/themes/dark/combo.material.scss
+++ b/src/components/combo/themes/dark/combo.material.scss
@@ -8,6 +8,9 @@ $theme: $material;
 $dropdown: map.remove(dropdown.$material, 'default-size');
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-combo');
-    @include css-vars-from-theme($dropdown, 'ig-combo-list');
+    @include css-vars-from-theme(diff(light.$base, $theme));
+
+    igc-popover {
+        @include css-vars-from-theme($dropdown);
+    }
 }
diff --git a/src/components/combo/themes/light/_themes.scss b/src/components/combo/themes/light/_themes.scss
index 25049c604..4636c6794 100644
--- a/src/components/combo/themes/light/_themes.scss
+++ b/src/components/combo/themes/light/_themes.scss
@@ -3,25 +3,9 @@
 @use 'igniteui-theming/sass/themes/schemas/components/light/combo' as *;
 @use 'components/input/themes/light/themes' as input-theme;
 
-
 $base: digest-schema($light-combo);
-$material: map.merge(digest-schema($material-combo), (
-    helper-text-color: map.get(input-theme.$material, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$material, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$material, 'error-secondary-color')
-));
-$bootstrap: map.merge(digest-schema($bootstrap-combo), (
-    helper-text-color: map.get(input-theme.$bootstrap, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$bootstrap, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$bootstrap, 'error-secondary-color')
-));
-$fluent: map.merge(digest-schema($fluent-combo), (
-    helper-text-color: map.get(input-theme.$fluent, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$fluent, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$fluent, 'error-secondary-color')
-));
-$indigo: map.merge(digest-schema($indigo-combo), (
-    helper-text-color: map.get(input-theme.$indigo, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$indigo, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$indigo, 'error-secondary-color')
-));
\ No newline at end of file
+$material: digest-schema($material-combo);
+$bootstrap: digest-schema($bootstrap-combo);
+$fluent: digest-schema($fluent-combo);
+$indigo: digest-schema($indigo-combo);
+
diff --git a/src/components/combo/themes/light/combo.bootstrap.scss b/src/components/combo/themes/light/combo.bootstrap.scss
index 940af59ee..54b32a52b 100644
--- a/src/components/combo/themes/light/combo.bootstrap.scss
+++ b/src/components/combo/themes/light/combo.bootstrap.scss
@@ -7,6 +7,9 @@ $theme: $bootstrap;
 $dropdown: map.remove(dropdown.$bootstrap, 'default-size');
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-combo');
-    @include css-vars-from-theme($dropdown, 'ig-combo-list');
+    @include css-vars-from-theme(diff($base, $theme));
+
+    igc-popover {
+        @include css-vars-from-theme($dropdown);
+    }
 }
diff --git a/src/components/combo/themes/light/combo.fluent.scss b/src/components/combo/themes/light/combo.fluent.scss
index 848a3a8e5..aed62a888 100644
--- a/src/components/combo/themes/light/combo.fluent.scss
+++ b/src/components/combo/themes/light/combo.fluent.scss
@@ -7,6 +7,9 @@ $theme: $fluent;
 $dropdown: map.remove(dropdown.$fluent, 'default-size');
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-combo');
-    @include css-vars-from-theme($dropdown, 'ig-combo-list');
+    @include css-vars-from-theme(diff($base, $theme));
+
+    igc-popover {
+        @include css-vars-from-theme($dropdown);
+    }
 }
diff --git a/src/components/combo/themes/light/combo.indigo.scss b/src/components/combo/themes/light/combo.indigo.scss
index 07a39f14c..4ad9fddfc 100644
--- a/src/components/combo/themes/light/combo.indigo.scss
+++ b/src/components/combo/themes/light/combo.indigo.scss
@@ -7,6 +7,9 @@ $theme: $indigo;
 $dropdown: map.remove(dropdown.$indigo, 'default-size');
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-combo');
-    @include css-vars-from-theme($dropdown, 'ig-combo-list');
+    @include css-vars-from-theme(diff($base, $theme));
+
+    igc-popover {
+        @include css-vars-from-theme($dropdown);
+    }
 }
diff --git a/src/components/combo/themes/light/combo.material.scss b/src/components/combo/themes/light/combo.material.scss
index 62bb9546d..8bb09bc9c 100644
--- a/src/components/combo/themes/light/combo.material.scss
+++ b/src/components/combo/themes/light/combo.material.scss
@@ -7,6 +7,9 @@ $theme: $material;
 $dropdown: map.remove(dropdown.$material, 'default-size');
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-combo');
-    @include css-vars-from-theme($dropdown, 'ig-combo-list');
+    @include css-vars-from-theme(diff($base, $theme));
+
+    igc-popover {
+        @include css-vars-from-theme($dropdown);
+    }
 }
diff --git a/src/components/combo/themes/light/combo.shared.scss b/src/components/combo/themes/light/combo.shared.scss
index e9f2bf516..96b6530e6 100644
--- a/src/components/combo/themes/light/combo.shared.scss
+++ b/src/components/combo/themes/light/combo.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-combo');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/combo/themes/shared/combo.common.scss b/src/components/combo/themes/shared/combo.common.scss
index b79de7faa..01f790796 100644
--- a/src/components/combo/themes/shared/combo.common.scss
+++ b/src/components/combo/themes/shared/combo.common.scss
@@ -71,7 +71,7 @@ $dropdown-theme: dropdown-theme.$material;
 :host(:not([disabled]):state(ig-invalid)),
 :host(:not(:disabled):state(ig-invalid)) {
     ::part(helper-text) {
-        color: var-get($theme, 'error-secondary-color');
+        color: var-get($input-theme, 'error-secondary-color');
     }
 }
 
@@ -107,4 +107,4 @@ $dropdown-theme: dropdown-theme.$material;
 ::slotted([slot='suffix']),
 ::slotted([slot='prefix']) {
     padding-inline: var(--affix-padding);
-}
\ No newline at end of file
+}
diff --git a/src/components/date-picker/themes/dark/_themes.scss b/src/components/date-picker/themes/dark/_themes.scss
index 6ce6241d9..bb24822d5 100644
--- a/src/components/date-picker/themes/dark/_themes.scss
+++ b/src/components/date-picker/themes/dark/_themes.scss
@@ -1,13 +1,17 @@
 @use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/calendar' as *;
-@use 'igniteui-theming/sass/themes/schemas/components/dark/input-group' as input-theme;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/input-group' as *;
+@use '../shared/date-picker.utils' as *;
 
-$material: map.merge(digest-schema($dark-material-calendar), digest-schema(input-theme.$dark-material-input-group));
-$material-calendar-border-color: map.get(digest-schema($dark-material-calendar), 'border-color');
-$bootstrap: map.merge(digest-schema($dark-bootstrap-calendar), digest-schema(input-theme.$dark-bootstrap-input-group));
-$bootstrap-calendar-border-color: map.get(digest-schema($dark-bootstrap-calendar), 'border-color');
-$fluent: map.merge(digest-schema($dark-fluent-calendar), digest-schema(input-theme.$dark-fluent-input-group));
-$fluent-calendar-border-color: map.get(digest-schema($dark-fluent-calendar), 'border-color');
-$indigo: map.merge(digest-schema($dark-indigo-calendar), digest-schema(input-theme.$dark-indigo-input-group));
-$indigo-calendar-border-color: map.get(digest-schema($dark-indigo-calendar), 'border-color');
+$material: digest-schema(calendar-theme($dark-material-calendar));
+$bootstrap: digest-schema(calendar-theme($dark-bootstrap-calendar));
+$fluent: digest-schema(calendar-theme($dark-fluent-calendar));
+$indigo: digest-schema(calendar-theme($dark-indigo-calendar));
+$bootstrap-input: digest-schema(input-theme($dark-bootstrap-input-group));
+$fluent-input: digest-schema(input-theme($dark-fluent-input-group));
+$indigo-input: digest-schema(input-theme($dark-indigo-input-group));
+$material-dialog: digest-schema(dialog-theme($dark-material-calendar));
+$bootstrap-dialog: digest-schema(dialog-theme($dark-bootstrap-calendar));
+$fluent-dialog: digest-schema(dialog-theme($dark-fluent-calendar));
+$indigo-dialog: digest-schema(dialog-theme($dark-indigo-calendar));
diff --git a/src/components/date-picker/themes/dark/date-picker.bootstrap.scss b/src/components/date-picker/themes/dark/date-picker.bootstrap.scss
index b521bf452..54c54c795 100644
--- a/src/components/date-picker/themes/dark/date-picker.bootstrap.scss
+++ b/src/components/date-picker/themes/dark/date-picker.bootstrap.scss
@@ -1,9 +1,11 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $bootstrap), 'ig-datepicker');
+    @include css-vars-from-theme($bootstrap);
+    @include css-vars-from-theme($bootstrap-input);
 
-    --calendar-border-color: #{$bootstrap-calendar-border-color};
+    igc-dialog {
+        @include css-vars-from-theme($bootstrap-dialog);
+    }
 }
diff --git a/src/components/date-picker/themes/dark/date-picker.fluent.scss b/src/components/date-picker/themes/dark/date-picker.fluent.scss
index 9573e0cf9..c5a78372e 100644
--- a/src/components/date-picker/themes/dark/date-picker.fluent.scss
+++ b/src/components/date-picker/themes/dark/date-picker.fluent.scss
@@ -3,7 +3,10 @@
 @use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $fluent), 'ig-datepicker');
+    @include css-vars-from-theme($fluent);
+    @include css-vars-from-theme($fluent-input);
 
-    --calendar-border-color: #{$fluent-calendar-border-color};
+    igc-dialog {
+        @include css-vars-from-theme($fluent-dialog);
+    }
 }
diff --git a/src/components/date-picker/themes/dark/date-picker.indigo.scss b/src/components/date-picker/themes/dark/date-picker.indigo.scss
index 0ce0a5a21..9b425d601 100644
--- a/src/components/date-picker/themes/dark/date-picker.indigo.scss
+++ b/src/components/date-picker/themes/dark/date-picker.indigo.scss
@@ -1,17 +1,13 @@
+@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 @use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $indigo), 'ig-datepicker');
+    @include css-vars-from-theme($indigo);
+    @include css-vars-from-theme($indigo-input);
 
-    --calendar-border-color: #{$indigo-calendar-border-color};
-
-    igc-dialog[open]::part(base) {
-        box-shadow: var(--ig-elevation-7);
-    }
-
-    igc-popover::part(container) {
-        box-shadow: var(--ig-elevation-2);
+    igc-dialog {
+        @include css-vars-from-theme($indigo-dialog);
     }
 }
diff --git a/src/components/date-picker/themes/dark/date-picker.material.scss b/src/components/date-picker/themes/dark/date-picker.material.scss
index 3aa1130a5..06bdf7c41 100644
--- a/src/components/date-picker/themes/dark/date-picker.material.scss
+++ b/src/components/date-picker/themes/dark/date-picker.material.scss
@@ -3,7 +3,9 @@
 @use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $material), 'ig-datepicker');
+    @include css-vars-from-theme($material);
 
-    --calendar-border-color: #{$material-calendar-border-color};
+    igc-dialog {
+        @include css-vars-from-theme($material-dialog);
+    }
 }
diff --git a/src/components/date-picker/themes/date-picker.base.scss b/src/components/date-picker/themes/date-picker.base.scss
index bc5de54e2..41225834f 100644
--- a/src/components/date-picker/themes/date-picker.base.scss
+++ b/src/components/date-picker/themes/date-picker.base.scss
@@ -14,6 +14,7 @@
 
         igc-calendar {
             border: none;
+            border-radius: 0;
             box-shadow: none;
         }
     }
diff --git a/src/components/date-picker/themes/light/_themes.scss b/src/components/date-picker/themes/light/_themes.scss
index a9b00e2b1..e2bbf527f 100644
--- a/src/components/date-picker/themes/light/_themes.scss
+++ b/src/components/date-picker/themes/light/_themes.scss
@@ -1,14 +1,17 @@
 @use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/light/calendar' as *;
-@use 'igniteui-theming/sass/themes/schemas/components/light/input-group' as input-theme;
+@use 'igniteui-theming/sass/themes/schemas/components/light/input-group' as *;
+@use '../shared/date-picker.utils' as *;
 
-$base: digest-schema($light-calendar);
-$material: map.merge(digest-schema($material-calendar), digest-schema(input-theme.$material-input-group));
-$material-calendar-border-color: map.get(digest-schema($material-calendar), 'border-color');
-$bootstrap: map.merge(digest-schema($bootstrap-calendar), digest-schema(input-theme.$bootstrap-input-group));
-$bootstrap-calendar-border-color: map.get(digest-schema($bootstrap-calendar), 'border-color');
-$fluent: map.merge(digest-schema($fluent-calendar), digest-schema(input-theme.$fluent-input-group));
-$fluent-calendar-border-color: map.get(digest-schema($fluent-calendar), 'border-color');
-$indigo: map.merge(digest-schema($indigo-calendar), digest-schema(input-theme.$indigo-input-group));
-$indigo-calendar-border-color: map.get(digest-schema($indigo-calendar), 'border-color');
+$material: digest-schema(calendar-theme($material-calendar));
+$bootstrap: digest-schema(calendar-theme($bootstrap-calendar));
+$fluent: digest-schema(calendar-theme($fluent-calendar));
+$indigo: digest-schema(calendar-theme($indigo-calendar));
+$bootstrap-input: digest-schema(input-theme($bootstrap-input-group));
+$fluent-input: digest-schema(input-theme($fluent-input-group));
+$indigo-input: digest-schema(input-theme($indigo-input-group));
+$material-dialog: digest-schema(dialog-theme($material-calendar));
+$bootstrap-dialog: digest-schema(dialog-theme($bootstrap-calendar));
+$fluent-dialog: digest-schema(dialog-theme($fluent-calendar));
+$indigo-dialog: digest-schema(dialog-theme($indigo-calendar));
diff --git a/src/components/date-picker/themes/light/date-picker.bootstrap.scss b/src/components/date-picker/themes/light/date-picker.bootstrap.scss
index c45112f68..e25ad23ac 100644
--- a/src/components/date-picker/themes/light/date-picker.bootstrap.scss
+++ b/src/components/date-picker/themes/light/date-picker.bootstrap.scss
@@ -1,8 +1,12 @@
+@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 
-$theme: $bootstrap;
-
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-datepicker');
+    @include css-vars-from-theme($bootstrap);
+    @include css-vars-from-theme($bootstrap-input);
+
+    igc-dialog {
+        @include css-vars-from-theme($bootstrap-dialog);
+    }
 }
diff --git a/src/components/date-picker/themes/light/date-picker.fluent.scss b/src/components/date-picker/themes/light/date-picker.fluent.scss
index c15d56e03..ec33f8127 100644
--- a/src/components/date-picker/themes/light/date-picker.fluent.scss
+++ b/src/components/date-picker/themes/light/date-picker.fluent.scss
@@ -1,8 +1,11 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 
-$theme: $fluent;
-
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-datepicker');
+    @include css-vars-from-theme($fluent);
+    @include css-vars-from-theme($fluent-input);
+
+    igc-dialog {
+        @include css-vars-from-theme($fluent-dialog);
+    }
 }
diff --git a/src/components/date-picker/themes/light/date-picker.indigo.scss b/src/components/date-picker/themes/light/date-picker.indigo.scss
index 297a9046d..4d8fba55d 100644
--- a/src/components/date-picker/themes/light/date-picker.indigo.scss
+++ b/src/components/date-picker/themes/light/date-picker.indigo.scss
@@ -1,8 +1,12 @@
+@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 
-$theme: $indigo;
-
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-datepicker');
+    @include css-vars-from-theme($indigo);
+    @include css-vars-from-theme($indigo-input);
+
+    igc-dialog {
+        @include css-vars-from-theme($indigo-dialog);
+    }
 }
diff --git a/src/components/date-picker/themes/light/date-picker.material.scss b/src/components/date-picker/themes/light/date-picker.material.scss
index 58f5280fe..563e35530 100644
--- a/src/components/date-picker/themes/light/date-picker.material.scss
+++ b/src/components/date-picker/themes/light/date-picker.material.scss
@@ -1,8 +1,10 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 
-$theme: $material;
-
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-datepicker');
+    @include css-vars-from-theme($material);
+
+    igc-dialog {
+        @include css-vars-from-theme($material-dialog);
+    }
 }
diff --git a/src/components/date-picker/themes/light/date-picker.shared.scss b/src/components/date-picker/themes/light/date-picker.shared.scss
deleted file mode 100644
index bce8e7abc..000000000
--- a/src/components/date-picker/themes/light/date-picker.shared.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@use 'styles/utilities' as *;
-@use 'themes' as *;
-
-:host {
-    @include css-vars-from-theme($base, 'ig-datepicker');
-}
diff --git a/src/components/date-picker/themes/shared/date-picker.bootstrap.scss b/src/components/date-picker/themes/shared/date-picker.bootstrap.scss
index 41f854fda..886fbce99 100644
--- a/src/components/date-picker/themes/shared/date-picker.bootstrap.scss
+++ b/src/components/date-picker/themes/shared/date-picker.bootstrap.scss
@@ -1,11 +1,10 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
+@use 'components/input/themes/light/themes' as input-theme;
 
-$theme: $bootstrap;
+$theme: input-theme.$bootstrap;
 
 :host {
-    --calendar-border-color: #{$bootstrap-calendar-border-color};
-
     igc-dialog {
         igc-calendar {
             border: none;
diff --git a/src/components/date-picker/themes/shared/date-picker.common.scss b/src/components/date-picker/themes/shared/date-picker.common.scss
index a2ff0a5ec..3961c8f4e 100644
--- a/src/components/date-picker/themes/shared/date-picker.common.scss
+++ b/src/components/date-picker/themes/shared/date-picker.common.scss
@@ -1,30 +1,30 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
-@use '../../../input/themes/light/themes' as input-theme;
+@use 'components/input/themes/light/themes' as input-theme;
 
 $theme: $material;
 $input-theme: input-theme.$material;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
-    --calendar-border-color: #{$material-calendar-border-color};
 
     igc-dialog {
         box-shadow: none;
         border: none;
+        background: transparent;
 
         [part='actions'] {
             border: none;
         }
 
         igc-calendar {
+            border-radius: 0;
             box-shadow: none;
         }
     }
 
     igc-dialog[open]::part(base) {
         box-shadow: var(--ig-elevation-24);
-        border: rem(1px) solid var(--calendar-border-color);
     }
 
     igc-dialog::part(content),
@@ -44,7 +44,7 @@ $input-theme: input-theme.$material;
 
         border-radius: var-get($theme, 'border-radius');
         background: var-get($theme, 'content-background');
-        box-shadow: 0 0 0 rem(1px) var(--calendar-border-color);
+        box-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color');
     }
 
     igc-popover::part(container) {
@@ -57,17 +57,17 @@ $input-theme: input-theme.$material;
     }
 
     ::part(helper-text) {
-        color: var-get($theme, 'helper-text-color');
+        color: var-get($input-theme, 'helper-text-color');
         grid-auto-rows: minmax(rem(18px), auto);
         margin-block-start: pad-block(rem(4px));
     }
 }
 
 :host(:not([disabled],[readonly])) {
-    --affix-color: #{var-get($theme, 'input-prefix-color')};
+    --affix-color: #{var-get($input-theme, 'input-prefix-color')};
 
     igc-date-time-input[readonly] {
-        --affix-color: #{var-get($theme, 'input-prefix-color')};
+        --affix-color: #{var-get($input-theme, 'input-prefix-color')};
 
         &::part(prefix),
         &::part(suffix) {
@@ -82,22 +82,22 @@ $input-theme: input-theme.$material;
     }
 
     igc-date-time-input:focus-within {
-        --affix-color: #{var-get($theme, 'input-prefix-color--focused')};
+        --affix-color: #{var-get($input-theme, 'input-prefix-color--focused')};
 
         &::part(filled) {
-            --affix-color: #{var-get($theme, 'input-prefix-color--focused')};
+            --affix-color: #{var-get($input-theme, 'input-prefix-color--focused')};
         }
     }
 
     ::part(filled) {
-        --affix-color: #{var-get($theme, 'input-prefix-color--filled')};
+        --affix-color: #{var-get($input-theme, 'input-prefix-color--filled')};
     }
 }
 
 :host(:not([disabled],[readonly]):state(ig-invalid)),
 :host(:not(:disabled,[readonly]):state(ig-invalid)) {
     ::part(helper-text) {
-        color: var-get($theme, 'error-secondary-color');
+        color: var-get($input-theme, 'error-secondary-color');
     }
 }
 
diff --git a/src/components/date-picker/themes/shared/date-picker.fluent.scss b/src/components/date-picker/themes/shared/date-picker.fluent.scss
index dd9fceb84..ce3dcc6e9 100644
--- a/src/components/date-picker/themes/shared/date-picker.fluent.scss
+++ b/src/components/date-picker/themes/shared/date-picker.fluent.scss
@@ -1,11 +1,10 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
+@use 'components/input/themes/light/themes' as input-theme;
 
-$theme: $fluent;
+$theme: input-theme.$fluent;
 
 :host {
-    --calendar-border-color: #{$fluent-calendar-border-color};
-
     igc-dialog[open]::part(base) {
         border-radius: 0;
     }
diff --git a/src/components/date-picker/themes/shared/date-picker.indigo.scss b/src/components/date-picker/themes/shared/date-picker.indigo.scss
index 0bcf75d5f..e1f196d55 100644
--- a/src/components/date-picker/themes/shared/date-picker.indigo.scss
+++ b/src/components/date-picker/themes/shared/date-picker.indigo.scss
@@ -1,18 +1,16 @@
 @use 'sass:map';
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
-@use '../../../input/themes/light/themes' as input-theme;
+@use 'components/input/themes/light/themes' as input-theme;
 
-$theme: $indigo;
-$input-theme: input-theme.$indigo;
+$theme: input-theme.$indigo;
 
 :host {
-    --calendar-border-color: #{$indigo-calendar-border-color};
     --input-icon: #{sizable(rem(14px), rem(16px), rem(16px))};
 
     igc-icon,
-    ::slotted(igc-icon) {
-        --size: var(--input-icon) !important;
+    ::slotted(*) {
+        --ig-icon-size: var(--input-icon);
     }
 
     igc-dialog[open]::part(base) {
@@ -33,7 +31,7 @@ $input-theme: input-theme.$indigo;
 
 :host(:focus-within) {
     [part='label'] {
-        color: var-get($input-theme, 'focused-secondary-color');
+        color: var-get($theme, 'focused-secondary-color');
     }
 }
 
@@ -46,7 +44,7 @@ $input-theme: input-theme.$indigo;
 :host(:not([disabled],[readonly]):state(ig-invalid)),
 :host(:not(:disabled,[readonly]):state(ig-invalid)) {
     ::part(helper-text) {
-        color: var-get($input-theme, 'helper-text-color');
+        color: var-get($theme, 'helper-text-color');
     }
 
     igc-date-time-input::part(container) {
diff --git a/src/components/date-picker/themes/shared/date-picker.material.scss b/src/components/date-picker/themes/shared/date-picker.material.scss
index 54c6d477c..c3aa96599 100644
--- a/src/components/date-picker/themes/shared/date-picker.material.scss
+++ b/src/components/date-picker/themes/shared/date-picker.material.scss
@@ -1,7 +1,8 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
+@use 'components/input/themes/light/themes' as input-theme;
 
-$theme: $material;
+$theme: input-theme.$material;
 
 :host {
     ::part(helper-text) {
diff --git a/src/components/date-picker/themes/shared/date-picker.utils.scss b/src/components/date-picker/themes/shared/date-picker.utils.scss
new file mode 100644
index 000000000..24fc99361
--- /dev/null
+++ b/src/components/date-picker/themes/shared/date-picker.utils.scss
@@ -0,0 +1,42 @@
+@use 'sass:map';
+
+// We pick the properties of the calendar theme that are relevant for the date-picker component.
+// In this instance, we only need the content background and border properties that will be applied for the
+// dropdown/dialog parts respectively. Getting the meta is done so varialbes are prefixed correctly.
+@function calendar-theme($theme) {
+    // Pick properties from calendar schemas that are relevant to the date-picker component
+    @return (
+        'content-background': map.get($theme, 'content-background'),
+        'border-color': map.get($theme, 'border-color'),
+        'border-radius': map.get($theme, 'border-radius'),
+        'actions-divider-color': map.get($theme, 'actions-divider-color'),
+        'default-size': map.get($theme, 'default-size'),
+        _meta: (
+          name: map.get($theme, _meta, name)
+        )
+    );
+}
+
+// We need to extract some properties from the input theme in order to style the label of the date-picker.
+// This is done because the label is a custom element in the date-picker component and is not part of the input.
+@function input-theme($theme) {
+    @return (
+        'idle-secondary-color': map.get($theme, 'idle-secondary-color'),
+        'focused-secondary-color': map.get($theme, 'focused-secondary-color'),
+        'disabled-text-color': map.get($theme, 'disabled-text-color'),
+        'input-prefix-color': map.get($theme, 'input-prefix-color'),
+        _meta: (
+            name: map.get($theme, _meta, name),
+        )
+    );
+}
+
+// We need to the border-color property from the calendar theme to style the igc-dialog part of the date-picker.
+@function dialog-theme($theme) {
+    @return (
+        'border-color': map.get($theme, 'border-color'),
+        _meta: (
+            name: map.get($theme, _meta, name),
+        )
+    );
+}
diff --git a/src/components/date-picker/themes/themes.ts b/src/components/date-picker/themes/themes.ts
index c9d6b849b..4af90e298 100644
--- a/src/components/date-picker/themes/themes.ts
+++ b/src/components/date-picker/themes/themes.ts
@@ -11,7 +11,6 @@ import { styles as bootstrapLight } from './light/date-picker.bootstrap.css.js';
 import { styles as fluentLight } from './light/date-picker.fluent.css.js';
 import { styles as indigoLight } from './light/date-picker.indigo.css.js';
 import { styles as materialLight } from './light/date-picker.material.css.js';
-import { styles as shared } from './light/date-picker.shared.css.js';
 // Shared Styles
 import { styles as bootstrap } from './shared/date-picker.bootstrap.css.js';
 import { styles as fluent } from './shared/date-picker.fluent.css.js';
@@ -19,9 +18,6 @@ import { styles as indigo } from './shared/date-picker.indigo.css.js';
 import { styles as material } from './shared/date-picker.material.css.js';
 
 const light = {
-  shared: css`
-    ${shared}
-  `,
   bootstrap: css`
     ${bootstrap} ${bootstrapLight}
   `,
@@ -37,9 +33,6 @@ const light = {
 };
 
 const dark = {
-  shared: css`
-    ${shared}
-  `,
   bootstrap: css`
     ${bootstrap} ${bootstrapDark}
   `,
diff --git a/src/components/date-range-picker/date-range-picker.base.scss b/src/components/date-range-picker/date-range-picker.base.scss
index add0f835b..cd0569c5a 100644
--- a/src/components/date-range-picker/date-range-picker.base.scss
+++ b/src/components/date-range-picker/date-range-picker.base.scss
@@ -16,6 +16,7 @@
         overflow: auto hidden;
 
         igc-calendar {
+            border-radius: 0;
             border: none;
             box-shadow: none;
         }
diff --git a/src/components/date-range-picker/themes/dark/_themes.scss b/src/components/date-range-picker/themes/dark/_themes.scss
index 447a331e5..b502e6921 100644
--- a/src/components/date-range-picker/themes/dark/_themes.scss
+++ b/src/components/date-range-picker/themes/dark/_themes.scss
@@ -1,43 +1,22 @@
 @use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/date-range-picker' as *;
-@use 'igniteui-theming/sass/themes/schemas/components/dark/input-group' as input-theme;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/input-group' as *;
 @use 'components/calendar/themes/dark/themes' as calendar-theme;
+@use 'components/date-picker/themes/shared/date-picker.utils' as *;
 
-$material: map.merge(digest-schema($dark-material-date-range-picker), digest-schema(input-theme.$dark-material-input-group));
-$bootstrap: map.merge(digest-schema($dark-bootstrap-date-range-picker), digest-schema(input-theme.$dark-bootstrap-input-group));
-$fluent: map.merge(digest-schema($dark-fluent-date-range-picker), digest-schema(input-theme.$dark-fluent-input-group));
-$indigo: map.merge(digest-schema($dark-indigo-date-range-picker), digest-schema(input-theme.$dark-indigo-input-group));
-$material: map.merge($material, (
-    default-size: map.get(calendar-theme.$material, 'default-size'),
-    border-radius: map.get(calendar-theme.$material, 'border-radius'),
-    border-color: map.get(calendar-theme.$material, 'border-color'),
-    content-background: map.get(calendar-theme.$material, 'content-background'),
-    actions-divider-color: map.get(calendar-theme.$material, 'actions-divider-color'),
-));
-$material-calendar-border-color: map.get(calendar-theme.$material, 'border-color');
-$bootstrap: map.merge($bootstrap, (
-    default-size: map.get(calendar-theme.$bootstrap, 'default-size'),
-    border-radius: map.get(calendar-theme.$bootstrap, 'border-radius'),
-    border-color: map.get(calendar-theme.$bootstrap, 'border-color'),
-    content-background: map.get(calendar-theme.$bootstrap, 'content-background'),
-    actions-divider-color: map.get(calendar-theme.$bootstrap, 'actions-divider-color'),
-));
-$bootstrap-calendar-border-color: map.get(calendar-theme.$bootstrap, 'border-color');
-$fluent: map.merge($fluent, (
-    default-size: map.get(calendar-theme.$fluent, 'default-size'),
-    border-radius: map.get(calendar-theme.$fluent, 'border-radius'),
-    border-color: map.get(calendar-theme.$fluent, 'border-color'),
-    content-background: map.get(calendar-theme.$fluent, 'content-background'),
-    actions-divider-color: map.get(calendar-theme.$fluent, 'actions-divider-color'),
-));
-$fluent-calendar-border-color: map.get(calendar-theme.$fluent, 'border-color');
-$indigo: map.merge($indigo, (
-    default-size: map.get(calendar-theme.$indigo, 'default-size'),
-    border-radius: map.get(calendar-theme.$indigo, 'border-radius'),
-    border-color: map.get(calendar-theme.$indigo, 'border-color'),
-    content-background: map.get(calendar-theme.$indigo, 'content-background'),
-    actions-divider-color: map.get(calendar-theme.$indigo, 'actions-divider-color'),
-));
-$indigo-calendar-border-color: map.get(calendar-theme.$indigo, 'border-color');
-
+$material: digest-schema($dark-material-date-range-picker);
+$bootstrap: digest-schema($dark-bootstrap-date-range-picker);
+$fluent: digest-schema($dark-fluent-date-range-picker);
+$indigo: digest-schema($dark-indigo-date-range-picker);
+$bootstrap-calendar: (digest-schema(calendar-theme(calendar-theme.$bootstrap)));
+$fluent-calendar: (digest-schema(calendar-theme(calendar-theme.$fluent)));
+$material-calendar: (digest-schema(calendar-theme(calendar-theme.$material)));
+$indigo-calendar: (digest-schema(calendar-theme(calendar-theme.$indigo)));
+$bootstrap-input: digest-schema(input-theme($dark-bootstrap-input-group));
+$fluent-input: digest-schema(input-theme($dark-fluent-input-group));
+$indigo-input: digest-schema(input-theme($dark-indigo-input-group));
+$material-dialog: digest-schema(dialog-theme(calendar-theme.$material));
+$bootstrap-dialog: digest-schema(dialog-theme(calendar-theme.$bootstrap));
+$fluent-dialog: digest-schema(dialog-theme(calendar-theme.$fluent));
+$indigo-dialog: digest-schema(dialog-theme(calendar-theme.$indigo));
diff --git a/src/components/date-range-picker/themes/dark/date-range-picker.bootstrap.scss b/src/components/date-range-picker/themes/dark/date-range-picker.bootstrap.scss
index 3756cc85c..b4130c88c 100644
--- a/src/components/date-range-picker/themes/dark/date-range-picker.bootstrap.scss
+++ b/src/components/date-range-picker/themes/dark/date-range-picker.bootstrap.scss
@@ -1,9 +1,12 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $bootstrap), 'ig-daterangepicker');
+    @include css-vars-from-theme($bootstrap);
+    @include css-vars-from-theme($bootstrap-input);
+    @include css-vars-from-theme($bootstrap-calendar);
 
-    --calendar-border-color: #{$bootstrap-calendar-border-color};
+    igc-dialog {
+        @include css-vars-from-theme($bootstrap-dialog);
+    }
 }
diff --git a/src/components/date-range-picker/themes/dark/date-range-picker.fluent.scss b/src/components/date-range-picker/themes/dark/date-range-picker.fluent.scss
index 713b4e47e..adc74188a 100644
--- a/src/components/date-range-picker/themes/dark/date-range-picker.fluent.scss
+++ b/src/components/date-range-picker/themes/dark/date-range-picker.fluent.scss
@@ -1,9 +1,12 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $fluent), 'ig-daterangepicker');
+    @include css-vars-from-theme($fluent);
+    @include css-vars-from-theme($fluent-input);
+    @include css-vars-from-theme($fluent-calendar);
 
-    --calendar-border-color: #{$fluent-calendar-border-color};
+    igc-dialog {
+        @include css-vars-from-theme($fluent-dialog);
+    }
 }
diff --git a/src/components/date-range-picker/themes/dark/date-range-picker.indigo.scss b/src/components/date-range-picker/themes/dark/date-range-picker.indigo.scss
index cd390f626..40e448170 100644
--- a/src/components/date-range-picker/themes/dark/date-range-picker.indigo.scss
+++ b/src/components/date-range-picker/themes/dark/date-range-picker.indigo.scss
@@ -1,11 +1,14 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $indigo), 'ig-daterangepicker');
+    @include css-vars-from-theme($indigo);
+    @include css-vars-from-theme($indigo-input);
+    @include css-vars-from-theme($indigo-calendar);
 
-    --calendar-border-color: #{$indigo-calendar-border-color};
+    igc-dialog {
+        @include css-vars-from-theme($indigo-dialog);
+    }
 
     igc-dialog[open]::part(base) {
         box-shadow: var(--ig-elevation-7);
diff --git a/src/components/date-range-picker/themes/dark/date-range-picker.material.scss b/src/components/date-range-picker/themes/dark/date-range-picker.material.scss
index 0632037f9..381fd3393 100644
--- a/src/components/date-range-picker/themes/dark/date-range-picker.material.scss
+++ b/src/components/date-range-picker/themes/dark/date-range-picker.material.scss
@@ -1,9 +1,11 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $material), 'ig-daterangepicker');
+    @include css-vars-from-theme($material);
+    @include css-vars-from-theme($material-calendar);
 
-    --calendar-border-color: #{$material-calendar-border-color};
+    igc-dialog {
+        @include css-vars-from-theme($material-dialog);
+    }
 }
diff --git a/src/components/date-range-picker/themes/light/_themes.scss b/src/components/date-range-picker/themes/light/_themes.scss
index fdbaff0ca..84c3c6b6b 100644
--- a/src/components/date-range-picker/themes/light/_themes.scss
+++ b/src/components/date-range-picker/themes/light/_themes.scss
@@ -1,43 +1,22 @@
 @use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/light/date-range-picker' as *;
-@use 'igniteui-theming/sass/themes/schemas/components/light/input-group' as input-theme;
+@use 'igniteui-theming/sass/themes/schemas/components/light/input-group' as *;
 @use 'components/calendar/themes/light/themes' as calendar-theme;
+@use 'components/date-picker/themes/shared/date-picker.utils' as *;
 
-$material: map.merge(digest-schema($material-date-range-picker), digest-schema(input-theme.$material-input-group));
-$bootstrap: map.merge(digest-schema($bootstrap-date-range-picker), digest-schema(input-theme.$bootstrap-input-group));
-$fluent: map.merge(digest-schema($fluent-date-range-picker), digest-schema(input-theme.$fluent-input-group));
-$indigo: map.merge(digest-schema($indigo-date-range-picker), digest-schema(input-theme.$indigo-input-group));
-$base: digest-schema($light-date-range-picker);
-$material: map.merge($material, (
-    default-size: map.get(calendar-theme.$material, 'default-size'),
-    border-radius: map.get(calendar-theme.$material, 'border-radius'),
-    border-color: map.get(calendar-theme.$material, 'border-color'),
-    content-background: map.get(calendar-theme.$material, 'content-background'),
-    actions-divider-color: map.get(calendar-theme.$material, 'actions-divider-color'),
-));
-$material-calendar-border-color: map.get(calendar-theme.$material, 'border-color');
-$bootstrap: map.merge($bootstrap, (
-    default-size: map.get(calendar-theme.$bootstrap, 'default-size'),
-    border-radius: map.get(calendar-theme.$bootstrap, 'border-radius'),
-    border-color: map.get(calendar-theme.$bootstrap, 'border-color'),
-    content-background: map.get(calendar-theme.$bootstrap, 'content-background'),
-    actions-divider-color: map.get(calendar-theme.$bootstrap, 'actions-divider-color'),
-));
-$bootstrap-calendar-border-color: map.get(calendar-theme.$bootstrap, 'border-color');
-$fluent: map.merge($fluent, (
-    default-size: map.get(calendar-theme.$fluent, 'default-size'),
-    border-radius: map.get(calendar-theme.$fluent, 'border-radius'),
-    border-color: map.get(calendar-theme.$fluent, 'border-color'),
-    content-background: map.get(calendar-theme.$fluent, 'content-background'),
-    actions-divider-color: map.get(calendar-theme.$fluent, 'actions-divider-color'),
-));
-$fluent-calendar-border-color: map.get(calendar-theme.$fluent, 'border-color');
-$indigo: map.merge($indigo, (
-    default-size: map.get(calendar-theme.$indigo, 'default-size'),
-    border-radius: map.get(calendar-theme.$indigo, 'border-radius'),
-    border-color: map.get(calendar-theme.$indigo, 'border-color'),
-    content-background: map.get(calendar-theme.$indigo, 'content-background'),
-    actions-divider-color: map.get(calendar-theme.$indigo, 'actions-divider-color')
-));
-$indigo-calendar-border-color: map.get(calendar-theme.$indigo, 'border-color');
+$material: digest-schema($material-date-range-picker);
+$bootstrap: digest-schema($bootstrap-date-range-picker);
+$fluent: digest-schema($fluent-date-range-picker);
+$indigo: digest-schema($indigo-date-range-picker);
+$bootstrap-calendar: digest-schema(calendar-theme(calendar-theme.$bootstrap));
+$fluent-calendar: digest-schema(calendar-theme(calendar-theme.$fluent));
+$material-calendar: digest-schema(calendar-theme(calendar-theme.$material));
+$indigo-calendar: digest-schema(calendar-theme(calendar-theme.$indigo));
+$bootstrap-input: digest-schema(input-theme($bootstrap-input-group));
+$fluent-input: digest-schema(input-theme($fluent-input-group));
+$indigo-input: digest-schema(input-theme($indigo-input-group));
+$material-dialog: digest-schema(dialog-theme(calendar-theme.$material));
+$bootstrap-dialog: digest-schema(dialog-theme(calendar-theme.$bootstrap));
+$fluent-dialog: digest-schema(dialog-theme(calendar-theme.$fluent));
+$indigo-dialog: digest-schema(dialog-theme(calendar-theme.$indigo));
diff --git a/src/components/date-range-picker/themes/light/date-range-picker.bootstrap.scss b/src/components/date-range-picker/themes/light/date-range-picker.bootstrap.scss
index 60ebbfc52..b4130c88c 100644
--- a/src/components/date-range-picker/themes/light/date-range-picker.bootstrap.scss
+++ b/src/components/date-range-picker/themes/light/date-range-picker.bootstrap.scss
@@ -1,8 +1,12 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 
-$theme: $bootstrap;
-
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-daterangepicker');
+    @include css-vars-from-theme($bootstrap);
+    @include css-vars-from-theme($bootstrap-input);
+    @include css-vars-from-theme($bootstrap-calendar);
+
+    igc-dialog {
+        @include css-vars-from-theme($bootstrap-dialog);
+    }
 }
diff --git a/src/components/date-range-picker/themes/light/date-range-picker.fluent.scss b/src/components/date-range-picker/themes/light/date-range-picker.fluent.scss
index 239fe87ac..adc74188a 100644
--- a/src/components/date-range-picker/themes/light/date-range-picker.fluent.scss
+++ b/src/components/date-range-picker/themes/light/date-range-picker.fluent.scss
@@ -1,8 +1,12 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 
-$theme: $fluent;
-
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-daterangepicker');
+    @include css-vars-from-theme($fluent);
+    @include css-vars-from-theme($fluent-input);
+    @include css-vars-from-theme($fluent-calendar);
+
+    igc-dialog {
+        @include css-vars-from-theme($fluent-dialog);
+    }
 }
diff --git a/src/components/date-range-picker/themes/light/date-range-picker.indigo.scss b/src/components/date-range-picker/themes/light/date-range-picker.indigo.scss
index 82db4579c..ebf75ca64 100644
--- a/src/components/date-range-picker/themes/light/date-range-picker.indigo.scss
+++ b/src/components/date-range-picker/themes/light/date-range-picker.indigo.scss
@@ -4,5 +4,11 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-daterangepicker');
+    @include css-vars-from-theme($indigo);
+    @include css-vars-from-theme($indigo-input);
+    @include css-vars-from-theme($indigo-calendar);
+
+    igc-dialog {
+        @include css-vars-from-theme($indigo-dialog);
+    }
 }
diff --git a/src/components/date-range-picker/themes/light/date-range-picker.material.scss b/src/components/date-range-picker/themes/light/date-range-picker.material.scss
index f17ffaba4..381fd3393 100644
--- a/src/components/date-range-picker/themes/light/date-range-picker.material.scss
+++ b/src/components/date-range-picker/themes/light/date-range-picker.material.scss
@@ -1,8 +1,11 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 
-$theme: $material;
-
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-daterangepicker');
+    @include css-vars-from-theme($material);
+    @include css-vars-from-theme($material-calendar);
+
+    igc-dialog {
+        @include css-vars-from-theme($material-dialog);
+    }
 }
diff --git a/src/components/date-range-picker/themes/light/date-range-picker.shared.scss b/src/components/date-range-picker/themes/light/date-range-picker.shared.scss
deleted file mode 100644
index 13476aeb8..000000000
--- a/src/components/date-range-picker/themes/light/date-range-picker.shared.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@use 'styles/utilities' as *;
-@use 'themes' as *;
-
-:host {
-    @include css-vars-from-theme($base, 'ig-daterangepicker');
-}
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss b/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss
index a8ce5e2d0..bb4083788 100644
--- a/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss
+++ b/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss
@@ -1,11 +1,10 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
+@use 'components/input/themes/light/themes' as input-theme;
 
-$theme: $bootstrap;
+$theme: input-theme.$bootstrap;
 
 :host {
-    --calendar-border-color: #{$bootstrap-calendar-border-color};
-
     igc-dialog {
         igc-calendar {
             border: none;
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.common.scss b/src/components/date-range-picker/themes/shared/date-range-picker.common.scss
index c54ad5633..d3858d283 100644
--- a/src/components/date-range-picker/themes/shared/date-range-picker.common.scss
+++ b/src/components/date-range-picker/themes/shared/date-range-picker.common.scss
@@ -1,15 +1,19 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
+@use 'components/input/themes/light/themes' as input-theme;
+@use 'components/calendar/themes/light/themes' as calendar-theme;
 
 $theme: $material;
+$input-theme: input-theme.$material;
+$calendar-theme: calendar-theme.$material;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
-    --calendar-border-color: #{$material-calendar-border-color};
 
     igc-dialog {
         box-shadow: none;
         border: none;
+        background: transparent;
 
         [part='actions'] {
             border: none;
@@ -17,12 +21,12 @@ $theme: $material;
 
         igc-calendar {
             box-shadow: none;
+            border-radius: 0;
         }
     }
 
     igc-dialog[open]::part(base) {
         box-shadow: var(--ig-elevation-24);
-        border: rem(1px) solid var(--calendar-border-color);
     }
 
     igc-dialog::part(content) {
@@ -31,8 +35,8 @@ $theme: $material;
 
     igc-dialog::part(footer) {
         padding: pad(rem(8px));
-        background: var-get($theme, 'content-background');
-        border-block-start: rem(1px) solid var-get($theme, 'actions-divider-color');
+        background: var-get($calendar-theme, 'content-background');
+        border-block-start: rem(1px) solid var-get($calendar-theme, 'actions-divider-color');
     }
 
     igc-focus-trap {
@@ -40,18 +44,18 @@ $theme: $material;
 
         --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
 
-        border-radius: var-get($theme, 'border-radius');
-        background: var-get($theme, 'content-background');
-        box-shadow: 0 0 0 rem(1px) var(--calendar-border-color);
+        border-radius: var-get($calendar-theme, 'border-radius');
+        background: var-get($calendar-theme, 'content-background');
+        box-shadow: 0 0 0 rem(1px) var-get($calendar-theme, 'border-color');
     }
 
     igc-popover::part(container) {
         box-shadow: var(--ig-elevation-3);
-        border-radius: var-get($theme, 'border-radius');
+        border-radius: var-get($calendar-theme, 'border-radius');
     }
 
     ::part(helper-text) {
-        color: var-get($theme, 'helper-text-color');
+        color: var-get($input-theme, 'helper-text-color');
         grid-auto-rows: minmax(rem(18px), auto);
         margin-block-start: pad-block(rem(4px));
     }
@@ -64,10 +68,10 @@ $theme: $material;
 }
 
 :host(:not([readonly])) {
-    --affix-color: #{var-get($theme, 'input-prefix-color')};
+    --affix-color: #{var-get($input-theme, 'input-prefix-color')};
 
     igc-date-time-input[readonly] {
-        --affix-color: #{var-get($theme, 'input-prefix-color')};
+        --affix-color: #{var-get($input-theme, 'input-prefix-color')};
 
         &::part(prefix),
         &::part(suffix) {
@@ -82,43 +86,44 @@ $theme: $material;
     }
 
     igc-input:focus-within {
-        --affix-color: #{var-get($theme, 'input-prefix-color--focused')};
+        --affix-color: #{var-get($input-theme, 'input-prefix-color--focused')};
 
         &::part(filled) {
-            --affix-color: #{var-get($theme, 'input-prefix-color--focused')};
+            --affix-color: #{var-get($input-theme, 'input-prefix-color--focused')};
         }
     }
 
     ::part(filled) {
-        --affix-color: #{var-get($theme, 'input-prefix-color--filled')};
+        --affix-color: #{var-get($input-theme, 'input-prefix-color--filled')};
     }
 }
 
 :host(:not([disabled],[readonly]):state(ig-invalid)),
 :host(:not(:disabled,[readonly]):state(ig-invalid)) {
     ::part(helper-text) {
-        color: var-get($theme, 'error-secondary-color');
+        color: var-get($input-theme, 'error-secondary-color');
     }
 }
 
 :host(:disabled),
 :host([disabled]) {
-    --affix-color: #{var-get($theme, 'disabled-text-color')};
+    --affix-color: #{var-get($input-theme, 'disabled-text-color')};
 
     ::part(filled) {
-        --affix-color: #{var-get($theme, 'disabled-text-color')};
+        --affix-color: #{var-get($input-theme, 'disabled-text-color')};
     }
 
     ::part(helper-text),
     [part='label'],
     igc-validator {
-        color: var-get($theme, 'disabled-text-color');
+        color: var-get($input-theme, 'disabled-text-color');
     }
 }
 
 [part='actions'] {
     min-height: #{sizable(rem(40px), rem(46px), rem(52px))};
-    border-block-start: rem(1px) solid var-get($theme, 'actions-divider-color');
+    border-block-start: rem(1px) solid var-get($calendar-theme, 'actions-divider-color');
+    background: var-get($calendar-theme, 'content-background');
 }
 
 [part='separator'] {
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss b/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss
index cbbd0891e..06e2cadff 100644
--- a/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss
+++ b/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss
@@ -1,11 +1,10 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
+@use 'components/input/themes/light/themes' as input-theme;
 
-$theme: $fluent;
+$theme: input-theme.$fluent;
 
 :host {
-    --calendar-border-color: #{$fluent-calendar-border-color};
-
     igc-dialog[open]::part(base) {
         border-radius: 0;
     }
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss b/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss
index 4fadae81b..f4677eb7b 100644
--- a/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss
+++ b/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss
@@ -1,15 +1,15 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
+@use 'components/input/themes/light/themes' as input-theme;
 
-$theme: $indigo;
+$theme: input-theme.$indigo;
 
 :host {
-    --calendar-border-color: #{$indigo-calendar-border-color};
     --input-icon: #{sizable(rem(14px), rem(16px), rem(16px))};
 
     igc-icon,
-    ::slotted(igc-icon) {
-        --size: var(--input-icon) !important;
+    ::slotted(*) {
+        --ig-icon-size: var(--input-icon);
     }
 
     igc-dialog[open]::part(base) {
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.material.scss b/src/components/date-range-picker/themes/shared/date-range-picker.material.scss
index 108da4796..472c58085 100644
--- a/src/components/date-range-picker/themes/shared/date-range-picker.material.scss
+++ b/src/components/date-range-picker/themes/shared/date-range-picker.material.scss
@@ -1,7 +1,8 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
+@use 'components/input/themes/light/themes' as input-theme;
 
-$theme: $material;
+$theme: input-theme.$material;
 
 :host {
     ::part(helper-text) {
diff --git a/src/components/date-range-picker/themes/themes.ts b/src/components/date-range-picker/themes/themes.ts
index 1d826c79c..24f46ba05 100644
--- a/src/components/date-range-picker/themes/themes.ts
+++ b/src/components/date-range-picker/themes/themes.ts
@@ -11,7 +11,6 @@ import { styles as bootstrapLight } from './light/date-range-picker.bootstrap.cs
 import { styles as fluentLight } from './light/date-range-picker.fluent.css.js';
 import { styles as indigoLight } from './light/date-range-picker.indigo.css.js';
 import { styles as materialLight } from './light/date-range-picker.material.css.js';
-import { styles as shared } from './light/date-range-picker.shared.css.js';
 // Shared Styles
 import { styles as bootstrap } from './shared/date-range-picker.bootstrap.css.js';
 import { styles as fluent } from './shared/date-range-picker.fluent.css.js';
@@ -19,9 +18,6 @@ import { styles as indigo } from './shared/date-range-picker.indigo.css.js';
 import { styles as material } from './shared/date-range-picker.material.css.js';
 
 const light = {
-  shared: css`
-    ${shared}
-  `,
   bootstrap: css`
     ${bootstrap} ${bootstrapLight}
   `,
@@ -37,9 +33,6 @@ const light = {
 };
 
 const dark = {
-  shared: css`
-    ${shared}
-  `,
   bootstrap: css`
     ${bootstrap} ${bootstrapDark}
   `,
diff --git a/src/components/dialog/themes/dark/dialog.bootstrap.scss b/src/components/dialog/themes/dark/dialog.bootstrap.scss
index 451e1ad58..8bade7490 100644
--- a/src/components/dialog/themes/dark/dialog.bootstrap.scss
+++ b/src/components/dialog/themes/dark/dialog.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dialog');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dialog/themes/dark/dialog.fluent.scss b/src/components/dialog/themes/dark/dialog.fluent.scss
index ad6112c00..4d87074b4 100644
--- a/src/components/dialog/themes/dark/dialog.fluent.scss
+++ b/src/components/dialog/themes/dark/dialog.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dialog');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dialog/themes/dark/dialog.indigo.scss b/src/components/dialog/themes/dark/dialog.indigo.scss
index b817e547c..641839724 100644
--- a/src/components/dialog/themes/dark/dialog.indigo.scss
+++ b/src/components/dialog/themes/dark/dialog.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dialog');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dialog/themes/dark/dialog.material.scss b/src/components/dialog/themes/dark/dialog.material.scss
index e4129e7ce..3271cfef8 100644
--- a/src/components/dialog/themes/dark/dialog.material.scss
+++ b/src/components/dialog/themes/dark/dialog.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dialog');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dialog/themes/dark/dialog.shared.scss b/src/components/dialog/themes/dark/dialog.shared.scss
index d074bbb61..96b6530e6 100644
--- a/src/components/dialog/themes/dark/dialog.shared.scss
+++ b/src/components/dialog/themes/dark/dialog.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-dialog');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/dialog/themes/light/dialog.bootstrap.scss b/src/components/dialog/themes/light/dialog.bootstrap.scss
index 451e1ad58..8bade7490 100644
--- a/src/components/dialog/themes/light/dialog.bootstrap.scss
+++ b/src/components/dialog/themes/light/dialog.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dialog');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dialog/themes/light/dialog.fluent.scss b/src/components/dialog/themes/light/dialog.fluent.scss
index ad6112c00..4d87074b4 100644
--- a/src/components/dialog/themes/light/dialog.fluent.scss
+++ b/src/components/dialog/themes/light/dialog.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dialog');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dialog/themes/light/dialog.indigo.scss b/src/components/dialog/themes/light/dialog.indigo.scss
index b817e547c..641839724 100644
--- a/src/components/dialog/themes/light/dialog.indigo.scss
+++ b/src/components/dialog/themes/light/dialog.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dialog');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dialog/themes/light/dialog.material.scss b/src/components/dialog/themes/light/dialog.material.scss
index e4129e7ce..3271cfef8 100644
--- a/src/components/dialog/themes/light/dialog.material.scss
+++ b/src/components/dialog/themes/light/dialog.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dialog');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dialog/themes/light/dialog.shared.scss b/src/components/dialog/themes/light/dialog.shared.scss
index d074bbb61..96b6530e6 100644
--- a/src/components/dialog/themes/light/dialog.shared.scss
+++ b/src/components/dialog/themes/light/dialog.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-dialog');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/divider/themes/dark/divider.bootstrap.scss b/src/components/divider/themes/dark/divider.bootstrap.scss
index b342d67e8..68cc3c7bb 100644
--- a/src/components/divider/themes/dark/divider.bootstrap.scss
+++ b/src/components/divider/themes/dark/divider.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-divider');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/divider/themes/dark/divider.fluent.scss b/src/components/divider/themes/dark/divider.fluent.scss
index f47d628a1..679ee2e59 100644
--- a/src/components/divider/themes/dark/divider.fluent.scss
+++ b/src/components/divider/themes/dark/divider.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-divider');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/divider/themes/dark/divider.indigo.scss b/src/components/divider/themes/dark/divider.indigo.scss
index 04399fbf7..5c1ebeb56 100644
--- a/src/components/divider/themes/dark/divider.indigo.scss
+++ b/src/components/divider/themes/dark/divider.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-divider');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/divider/themes/dark/divider.material.scss b/src/components/divider/themes/dark/divider.material.scss
index 90af0bcc5..0dddc23d0 100644
--- a/src/components/divider/themes/dark/divider.material.scss
+++ b/src/components/divider/themes/dark/divider.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-divider');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/divider/themes/light/divider.bootstrap.scss b/src/components/divider/themes/light/divider.bootstrap.scss
index c9edd7d3a..8bade7490 100644
--- a/src/components/divider/themes/light/divider.bootstrap.scss
+++ b/src/components/divider/themes/light/divider.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-divider');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/divider/themes/light/divider.fluent.scss b/src/components/divider/themes/light/divider.fluent.scss
index 5fc4b6db9..4d87074b4 100644
--- a/src/components/divider/themes/light/divider.fluent.scss
+++ b/src/components/divider/themes/light/divider.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-divider');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/divider/themes/light/divider.indigo.scss b/src/components/divider/themes/light/divider.indigo.scss
index bc2cbee13..641839724 100644
--- a/src/components/divider/themes/light/divider.indigo.scss
+++ b/src/components/divider/themes/light/divider.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-divider');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/divider/themes/light/divider.material.scss b/src/components/divider/themes/light/divider.material.scss
index 129cf01d1..3271cfef8 100644
--- a/src/components/divider/themes/light/divider.material.scss
+++ b/src/components/divider/themes/light/divider.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-divider');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/divider/themes/light/divider.shared.scss b/src/components/divider/themes/light/divider.shared.scss
index 1153e7cc7..96b6530e6 100644
--- a/src/components/divider/themes/light/divider.shared.scss
+++ b/src/components/divider/themes/light/divider.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-divider');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/dropdown/themes/dark/dropdown.bootstrap.scss b/src/components/dropdown/themes/dark/dropdown.bootstrap.scss
index 2344b67af..8bade7490 100644
--- a/src/components/dropdown/themes/dark/dropdown.bootstrap.scss
+++ b/src/components/dropdown/themes/dark/dropdown.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dropdown');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dropdown/themes/dark/dropdown.fluent.scss b/src/components/dropdown/themes/dark/dropdown.fluent.scss
index 3545e6aa9..4d87074b4 100644
--- a/src/components/dropdown/themes/dark/dropdown.fluent.scss
+++ b/src/components/dropdown/themes/dark/dropdown.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dropdown');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dropdown/themes/dark/dropdown.indigo.scss b/src/components/dropdown/themes/dark/dropdown.indigo.scss
index 90c2ecd67..641839724 100644
--- a/src/components/dropdown/themes/dark/dropdown.indigo.scss
+++ b/src/components/dropdown/themes/dark/dropdown.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dropdown');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dropdown/themes/dark/dropdown.material.scss b/src/components/dropdown/themes/dark/dropdown.material.scss
index 190ebb297..3271cfef8 100644
--- a/src/components/dropdown/themes/dark/dropdown.material.scss
+++ b/src/components/dropdown/themes/dark/dropdown.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dropdown');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dropdown/themes/dark/dropdown.shared.scss b/src/components/dropdown/themes/dark/dropdown.shared.scss
index 9fddf7c49..96b6530e6 100644
--- a/src/components/dropdown/themes/dark/dropdown.shared.scss
+++ b/src/components/dropdown/themes/dark/dropdown.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-dropdown');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/dropdown/themes/light/dropdown.bootstrap.scss b/src/components/dropdown/themes/light/dropdown.bootstrap.scss
index 2344b67af..8bade7490 100644
--- a/src/components/dropdown/themes/light/dropdown.bootstrap.scss
+++ b/src/components/dropdown/themes/light/dropdown.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dropdown');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dropdown/themes/light/dropdown.fluent.scss b/src/components/dropdown/themes/light/dropdown.fluent.scss
index 3545e6aa9..4d87074b4 100644
--- a/src/components/dropdown/themes/light/dropdown.fluent.scss
+++ b/src/components/dropdown/themes/light/dropdown.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dropdown');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dropdown/themes/light/dropdown.indigo.scss b/src/components/dropdown/themes/light/dropdown.indigo.scss
index 90c2ecd67..641839724 100644
--- a/src/components/dropdown/themes/light/dropdown.indigo.scss
+++ b/src/components/dropdown/themes/light/dropdown.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dropdown');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dropdown/themes/light/dropdown.material.scss b/src/components/dropdown/themes/light/dropdown.material.scss
index 190ebb297..3271cfef8 100644
--- a/src/components/dropdown/themes/light/dropdown.material.scss
+++ b/src/components/dropdown/themes/light/dropdown.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dropdown');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dropdown/themes/light/dropdown.shared.scss b/src/components/dropdown/themes/light/dropdown.shared.scss
index 9fddf7c49..96b6530e6 100644
--- a/src/components/dropdown/themes/light/dropdown.shared.scss
+++ b/src/components/dropdown/themes/light/dropdown.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-dropdown');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/expansion-panel/themes/dark/expansion-panel.bootstrap.scss b/src/components/expansion-panel/themes/dark/expansion-panel.bootstrap.scss
index 84bc19bd3..8bade7490 100644
--- a/src/components/expansion-panel/themes/dark/expansion-panel.bootstrap.scss
+++ b/src/components/expansion-panel/themes/dark/expansion-panel.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-expansion-panel');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/expansion-panel/themes/dark/expansion-panel.fluent.scss b/src/components/expansion-panel/themes/dark/expansion-panel.fluent.scss
index f17a88903..4d87074b4 100644
--- a/src/components/expansion-panel/themes/dark/expansion-panel.fluent.scss
+++ b/src/components/expansion-panel/themes/dark/expansion-panel.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-expansion-panel');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/expansion-panel/themes/dark/expansion-panel.indigo.scss b/src/components/expansion-panel/themes/dark/expansion-panel.indigo.scss
index 42359a298..641839724 100644
--- a/src/components/expansion-panel/themes/dark/expansion-panel.indigo.scss
+++ b/src/components/expansion-panel/themes/dark/expansion-panel.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-expansion-panel');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/expansion-panel/themes/dark/expansion-panel.material.scss b/src/components/expansion-panel/themes/dark/expansion-panel.material.scss
index 87b1f6cbb..3271cfef8 100644
--- a/src/components/expansion-panel/themes/dark/expansion-panel.material.scss
+++ b/src/components/expansion-panel/themes/dark/expansion-panel.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-expansion-panel');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/expansion-panel/themes/dark/expansion-panel.shared.scss b/src/components/expansion-panel/themes/dark/expansion-panel.shared.scss
index d7a88b5b6..96b6530e6 100644
--- a/src/components/expansion-panel/themes/dark/expansion-panel.shared.scss
+++ b/src/components/expansion-panel/themes/dark/expansion-panel.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-expansion-panel');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/expansion-panel/themes/light/expansion-panel.bootstrap.scss b/src/components/expansion-panel/themes/light/expansion-panel.bootstrap.scss
index 84bc19bd3..8bade7490 100644
--- a/src/components/expansion-panel/themes/light/expansion-panel.bootstrap.scss
+++ b/src/components/expansion-panel/themes/light/expansion-panel.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-expansion-panel');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/expansion-panel/themes/light/expansion-panel.fluent.scss b/src/components/expansion-panel/themes/light/expansion-panel.fluent.scss
index f17a88903..4d87074b4 100644
--- a/src/components/expansion-panel/themes/light/expansion-panel.fluent.scss
+++ b/src/components/expansion-panel/themes/light/expansion-panel.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-expansion-panel');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/expansion-panel/themes/light/expansion-panel.indigo.scss b/src/components/expansion-panel/themes/light/expansion-panel.indigo.scss
index 42359a298..641839724 100644
--- a/src/components/expansion-panel/themes/light/expansion-panel.indigo.scss
+++ b/src/components/expansion-panel/themes/light/expansion-panel.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-expansion-panel');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/expansion-panel/themes/light/expansion-panel.material.scss b/src/components/expansion-panel/themes/light/expansion-panel.material.scss
index 87b1f6cbb..3271cfef8 100644
--- a/src/components/expansion-panel/themes/light/expansion-panel.material.scss
+++ b/src/components/expansion-panel/themes/light/expansion-panel.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-expansion-panel');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/expansion-panel/themes/light/expansion-panel.shared.scss b/src/components/expansion-panel/themes/light/expansion-panel.shared.scss
index d7a88b5b6..96b6530e6 100644
--- a/src/components/expansion-panel/themes/light/expansion-panel.shared.scss
+++ b/src/components/expansion-panel/themes/light/expansion-panel.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-expansion-panel');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/file-input/themes/dark/file-input.bootstrap.scss b/src/components/file-input/themes/dark/file-input.bootstrap.scss
index dc39a8392..68cc3c7bb 100644
--- a/src/components/file-input/themes/dark/file-input.bootstrap.scss
+++ b/src/components/file-input/themes/dark/file-input.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/file-input/themes/dark/file-input.fluent.scss b/src/components/file-input/themes/dark/file-input.fluent.scss
index 731cb2955..679ee2e59 100644
--- a/src/components/file-input/themes/dark/file-input.fluent.scss
+++ b/src/components/file-input/themes/dark/file-input.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/file-input/themes/dark/file-input.indigo.scss b/src/components/file-input/themes/dark/file-input.indigo.scss
index 4727105e0..5c1ebeb56 100644
--- a/src/components/file-input/themes/dark/file-input.indigo.scss
+++ b/src/components/file-input/themes/dark/file-input.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/file-input/themes/dark/file-input.material.scss b/src/components/file-input/themes/dark/file-input.material.scss
index 8485dccc9..0dddc23d0 100644
--- a/src/components/file-input/themes/dark/file-input.material.scss
+++ b/src/components/file-input/themes/dark/file-input.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/file-input/themes/light/file-input.bootstrap.scss b/src/components/file-input/themes/light/file-input.bootstrap.scss
index 90ca15cea..8bade7490 100644
--- a/src/components/file-input/themes/light/file-input.bootstrap.scss
+++ b/src/components/file-input/themes/light/file-input.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig');
-}
\ No newline at end of file
+    @include css-vars-from-theme(diff($base, $theme));
+}
diff --git a/src/components/file-input/themes/light/file-input.fluent.scss b/src/components/file-input/themes/light/file-input.fluent.scss
index 617cd91ca..4d87074b4 100644
--- a/src/components/file-input/themes/light/file-input.fluent.scss
+++ b/src/components/file-input/themes/light/file-input.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/file-input/themes/light/file-input.indigo.scss b/src/components/file-input/themes/light/file-input.indigo.scss
index 533001aa0..641839724 100644
--- a/src/components/file-input/themes/light/file-input.indigo.scss
+++ b/src/components/file-input/themes/light/file-input.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig');
-}
\ No newline at end of file
+    @include css-vars-from-theme(diff($base, $theme));
+}
diff --git a/src/components/file-input/themes/light/file-input.material.scss b/src/components/file-input/themes/light/file-input.material.scss
index bbfbea38c..3271cfef8 100644
--- a/src/components/file-input/themes/light/file-input.material.scss
+++ b/src/components/file-input/themes/light/file-input.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/file-input/themes/light/file-input.shared.scss b/src/components/file-input/themes/light/file-input.shared.scss
index 3ee672901..96b6530e6 100644
--- a/src/components/file-input/themes/light/file-input.shared.scss
+++ b/src/components/file-input/themes/light/file-input.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/icon/themes/dark/icon.bootstrap.scss b/src/components/icon/themes/dark/icon.bootstrap.scss
index 0a6c8bbcf..68cc3c7bb 100644
--- a/src/components/icon/themes/dark/icon.bootstrap.scss
+++ b/src/components/icon/themes/dark/icon.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-icon');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/icon/themes/dark/icon.fluent.scss b/src/components/icon/themes/dark/icon.fluent.scss
index b19684f93..679ee2e59 100644
--- a/src/components/icon/themes/dark/icon.fluent.scss
+++ b/src/components/icon/themes/dark/icon.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-icon');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/icon/themes/dark/icon.indigo.scss b/src/components/icon/themes/dark/icon.indigo.scss
index 2e9db13f0..5c1ebeb56 100644
--- a/src/components/icon/themes/dark/icon.indigo.scss
+++ b/src/components/icon/themes/dark/icon.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-icon');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/icon/themes/dark/icon.material.scss b/src/components/icon/themes/dark/icon.material.scss
index d300fd83a..0dddc23d0 100644
--- a/src/components/icon/themes/dark/icon.material.scss
+++ b/src/components/icon/themes/dark/icon.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-icon');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/icon/themes/light/icon.bootstrap.scss b/src/components/icon/themes/light/icon.bootstrap.scss
index dbba403ef..8bade7490 100644
--- a/src/components/icon/themes/light/icon.bootstrap.scss
+++ b/src/components/icon/themes/light/icon.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-icon');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/icon/themes/light/icon.fluent.scss b/src/components/icon/themes/light/icon.fluent.scss
index b2e1b546d..4d87074b4 100644
--- a/src/components/icon/themes/light/icon.fluent.scss
+++ b/src/components/icon/themes/light/icon.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-icon');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/icon/themes/light/icon.indigo.scss b/src/components/icon/themes/light/icon.indigo.scss
index e7a041682..641839724 100644
--- a/src/components/icon/themes/light/icon.indigo.scss
+++ b/src/components/icon/themes/light/icon.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-icon');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/icon/themes/light/icon.material.scss b/src/components/icon/themes/light/icon.material.scss
index bd1bf08e5..3271cfef8 100644
--- a/src/components/icon/themes/light/icon.material.scss
+++ b/src/components/icon/themes/light/icon.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-icon');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/icon/themes/light/icon.shared.scss b/src/components/icon/themes/light/icon.shared.scss
index d359cb243..96b6530e6 100644
--- a/src/components/icon/themes/light/icon.shared.scss
+++ b/src/components/icon/themes/light/icon.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-icon');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/input/themes/dark/input.bootstrap.scss b/src/components/input/themes/dark/input.bootstrap.scss
index a1b4fc343..68cc3c7bb 100644
--- a/src/components/input/themes/dark/input.bootstrap.scss
+++ b/src/components/input/themes/dark/input.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-input');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/input/themes/dark/input.fluent.scss b/src/components/input/themes/dark/input.fluent.scss
index f7288db5d..679ee2e59 100644
--- a/src/components/input/themes/dark/input.fluent.scss
+++ b/src/components/input/themes/dark/input.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-input');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/input/themes/dark/input.indigo.scss b/src/components/input/themes/dark/input.indigo.scss
index ab3f450c4..5c1ebeb56 100644
--- a/src/components/input/themes/dark/input.indigo.scss
+++ b/src/components/input/themes/dark/input.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-input');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/input/themes/dark/input.material.scss b/src/components/input/themes/dark/input.material.scss
index 83c5027f7..0dddc23d0 100644
--- a/src/components/input/themes/dark/input.material.scss
+++ b/src/components/input/themes/dark/input.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-input');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/input/themes/light/input.bootstrap.scss b/src/components/input/themes/light/input.bootstrap.scss
index 3985a5cfa..8bade7490 100644
--- a/src/components/input/themes/light/input.bootstrap.scss
+++ b/src/components/input/themes/light/input.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-input');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/input/themes/light/input.fluent.scss b/src/components/input/themes/light/input.fluent.scss
index ab9b87c2c..4d87074b4 100644
--- a/src/components/input/themes/light/input.fluent.scss
+++ b/src/components/input/themes/light/input.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-input');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/input/themes/light/input.indigo.scss b/src/components/input/themes/light/input.indigo.scss
index 2128ffb0b..641839724 100644
--- a/src/components/input/themes/light/input.indigo.scss
+++ b/src/components/input/themes/light/input.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-input');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/input/themes/light/input.material.scss b/src/components/input/themes/light/input.material.scss
index 4e1b3f1ff..3271cfef8 100644
--- a/src/components/input/themes/light/input.material.scss
+++ b/src/components/input/themes/light/input.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-input');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/input/themes/light/input.shared.scss b/src/components/input/themes/light/input.shared.scss
index 39c825453..96b6530e6 100644
--- a/src/components/input/themes/light/input.shared.scss
+++ b/src/components/input/themes/light/input.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-input');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/list/themes/dark/container/list.bootstrap.scss b/src/components/list/themes/dark/container/list.bootstrap.scss
index 699c58fd0..597b7897f 100644
--- a/src/components/list/themes/dark/container/list.bootstrap.scss
+++ b/src/components/list/themes/dark/container/list.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-list');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/list/themes/dark/container/list.fluent.scss b/src/components/list/themes/dark/container/list.fluent.scss
index 41d635539..925a705e7 100644
--- a/src/components/list/themes/dark/container/list.fluent.scss
+++ b/src/components/list/themes/dark/container/list.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-list');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/list/themes/dark/container/list.indigo.scss b/src/components/list/themes/dark/container/list.indigo.scss
index cb169f2f1..52f7ff3eb 100644
--- a/src/components/list/themes/dark/container/list.indigo.scss
+++ b/src/components/list/themes/dark/container/list.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-list');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/list/themes/dark/container/list.material.scss b/src/components/list/themes/dark/container/list.material.scss
index ff87e6336..ba3d04144 100644
--- a/src/components/list/themes/dark/container/list.material.scss
+++ b/src/components/list/themes/dark/container/list.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-list');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/list/themes/dark/container/list.shared.scss b/src/components/list/themes/dark/container/list.shared.scss
index e75a8a406..66f195c18 100644
--- a/src/components/list/themes/dark/container/list.shared.scss
+++ b/src/components/list/themes/dark/container/list.shared.scss
@@ -2,5 +2,5 @@
 @use '../themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-list');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/list/themes/light/container/list.bootstrap.scss b/src/components/list/themes/light/container/list.bootstrap.scss
index 699c58fd0..597b7897f 100644
--- a/src/components/list/themes/light/container/list.bootstrap.scss
+++ b/src/components/list/themes/light/container/list.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-list');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/list/themes/light/container/list.fluent.scss b/src/components/list/themes/light/container/list.fluent.scss
index 41d635539..925a705e7 100644
--- a/src/components/list/themes/light/container/list.fluent.scss
+++ b/src/components/list/themes/light/container/list.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-list');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/list/themes/light/container/list.indigo.scss b/src/components/list/themes/light/container/list.indigo.scss
index cb169f2f1..52f7ff3eb 100644
--- a/src/components/list/themes/light/container/list.indigo.scss
+++ b/src/components/list/themes/light/container/list.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-list');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/list/themes/light/container/list.material.scss b/src/components/list/themes/light/container/list.material.scss
index ff87e6336..ba3d04144 100644
--- a/src/components/list/themes/light/container/list.material.scss
+++ b/src/components/list/themes/light/container/list.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-list');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/list/themes/light/container/list.shared.scss b/src/components/list/themes/light/container/list.shared.scss
index e75a8a406..66f195c18 100644
--- a/src/components/list/themes/light/container/list.shared.scss
+++ b/src/components/list/themes/light/container/list.shared.scss
@@ -2,5 +2,5 @@
 @use '../themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-list');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/nav-drawer/themes/dark/container/nav-drawer.bootstrap.scss b/src/components/nav-drawer/themes/dark/container/nav-drawer.bootstrap.scss
index ad5817e78..3ae1ff78b 100644
--- a/src/components/nav-drawer/themes/dark/container/nav-drawer.bootstrap.scss
+++ b/src/components/nav-drawer/themes/dark/container/nav-drawer.bootstrap.scss
@@ -5,6 +5,6 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-nav-drawer');
-    @include css-vars-from-theme(diff(light.$base-overlay, $bootstrap-overlay), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff($base, $theme));
+    @include css-vars-from-theme(diff(light.$base-overlay, $bootstrap-overlay));
 }
diff --git a/src/components/nav-drawer/themes/dark/container/nav-drawer.fluent.scss b/src/components/nav-drawer/themes/dark/container/nav-drawer.fluent.scss
index 6282f463e..813e1d5e1 100644
--- a/src/components/nav-drawer/themes/dark/container/nav-drawer.fluent.scss
+++ b/src/components/nav-drawer/themes/dark/container/nav-drawer.fluent.scss
@@ -5,6 +5,6 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-nav-drawer');
-    @include css-vars-from-theme(diff(light.$base-overlay, $fluent-overlay), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff($base, $theme));
+    @include css-vars-from-theme(diff(light.$base-overlay, $fluent-overlay));
 }
diff --git a/src/components/nav-drawer/themes/dark/container/nav-drawer.indigo.scss b/src/components/nav-drawer/themes/dark/container/nav-drawer.indigo.scss
index 3d33fb9e7..275c0bc35 100644
--- a/src/components/nav-drawer/themes/dark/container/nav-drawer.indigo.scss
+++ b/src/components/nav-drawer/themes/dark/container/nav-drawer.indigo.scss
@@ -5,6 +5,6 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-nav-drawer');
-    @include css-vars-from-theme(diff(light.$base-overlay, $indigo-overlay), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff($base, $theme));
+    @include css-vars-from-theme(diff(light.$base-overlay, $indigo-overlay));
 }
diff --git a/src/components/nav-drawer/themes/dark/container/nav-drawer.material.scss b/src/components/nav-drawer/themes/dark/container/nav-drawer.material.scss
index 7db3c32cb..6638658ff 100644
--- a/src/components/nav-drawer/themes/dark/container/nav-drawer.material.scss
+++ b/src/components/nav-drawer/themes/dark/container/nav-drawer.material.scss
@@ -5,6 +5,6 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-nav-drawer');
-    @include css-vars-from-theme(diff(light.$base-overlay, $material-overlay), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff($base, $theme));
+    @include css-vars-from-theme(diff(light.$base-overlay, $material-overlay));
 }
diff --git a/src/components/nav-drawer/themes/dark/container/nav-drawer.shared.scss b/src/components/nav-drawer/themes/dark/container/nav-drawer.shared.scss
index b1049eb2d..92adb96ea 100644
--- a/src/components/nav-drawer/themes/dark/container/nav-drawer.shared.scss
+++ b/src/components/nav-drawer/themes/dark/container/nav-drawer.shared.scss
@@ -3,6 +3,6 @@
 @use '../../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-nav-drawer');
-    @include css-vars-from-theme(light.$base-overlay, 'ig-nav-drawer');
+    @include css-vars-from-theme($base);
+    @include css-vars-from-theme(light.$base-overlay);
 }
diff --git a/src/components/nav-drawer/themes/light/container/nav-drawer.bootstrap.scss b/src/components/nav-drawer/themes/light/container/nav-drawer.bootstrap.scss
index a1d472a1b..025a69b60 100644
--- a/src/components/nav-drawer/themes/light/container/nav-drawer.bootstrap.scss
+++ b/src/components/nav-drawer/themes/light/container/nav-drawer.bootstrap.scss
@@ -4,6 +4,6 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-nav-drawer');
-    @include css-vars-from-theme(diff($base, $overlay-bootstrap), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff($base, $theme));
+    @include css-vars-from-theme(diff($base, $overlay-bootstrap));
 }
diff --git a/src/components/nav-drawer/themes/light/container/nav-drawer.fluent.scss b/src/components/nav-drawer/themes/light/container/nav-drawer.fluent.scss
index bd9742d9d..8f1e230b5 100644
--- a/src/components/nav-drawer/themes/light/container/nav-drawer.fluent.scss
+++ b/src/components/nav-drawer/themes/light/container/nav-drawer.fluent.scss
@@ -4,6 +4,6 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-nav-drawer');
-    @include css-vars-from-theme(diff($base, $overlay-fluent), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff($base, $theme));
+    @include css-vars-from-theme(diff($base, $overlay-fluent));
 }
diff --git a/src/components/nav-drawer/themes/light/container/nav-drawer.indigo.scss b/src/components/nav-drawer/themes/light/container/nav-drawer.indigo.scss
index dfbd7731e..43738ba21 100644
--- a/src/components/nav-drawer/themes/light/container/nav-drawer.indigo.scss
+++ b/src/components/nav-drawer/themes/light/container/nav-drawer.indigo.scss
@@ -4,6 +4,6 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-nav-drawer');
-    @include css-vars-from-theme(diff($base, $overlay-indigo), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff($base, $theme));
+    @include css-vars-from-theme(diff($base, $overlay-indigo));
 }
diff --git a/src/components/nav-drawer/themes/light/container/nav-drawer.material.scss b/src/components/nav-drawer/themes/light/container/nav-drawer.material.scss
index 1ceb93740..67e073a69 100644
--- a/src/components/nav-drawer/themes/light/container/nav-drawer.material.scss
+++ b/src/components/nav-drawer/themes/light/container/nav-drawer.material.scss
@@ -4,6 +4,6 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-nav-drawer');
-    @include css-vars-from-theme(diff($base, $overlay-material), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff($base, $theme));
+    @include css-vars-from-theme(diff($base, $overlay-material));
 }
diff --git a/src/components/nav-drawer/themes/light/container/nav-drawer.shared.scss b/src/components/nav-drawer/themes/light/container/nav-drawer.shared.scss
index e53f51457..dddd7f799 100644
--- a/src/components/nav-drawer/themes/light/container/nav-drawer.shared.scss
+++ b/src/components/nav-drawer/themes/light/container/nav-drawer.shared.scss
@@ -2,6 +2,6 @@
 @use '../themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-nav-drawer');
-    @include css-vars-from-theme($base-overlay, 'ig-nav-drawer');
+    @include css-vars-from-theme($base);
+    @include css-vars-from-theme($base-overlay);
 }
diff --git a/src/components/navbar/themes/dark/navbar.bootstrap.scss b/src/components/navbar/themes/dark/navbar.bootstrap.scss
index 5727ca047..68cc3c7bb 100644
--- a/src/components/navbar/themes/dark/navbar.bootstrap.scss
+++ b/src/components/navbar/themes/dark/navbar.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-navbar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/navbar/themes/dark/navbar.fluent.scss b/src/components/navbar/themes/dark/navbar.fluent.scss
index 2a8550477..679ee2e59 100644
--- a/src/components/navbar/themes/dark/navbar.fluent.scss
+++ b/src/components/navbar/themes/dark/navbar.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-navbar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/navbar/themes/dark/navbar.indigo.scss b/src/components/navbar/themes/dark/navbar.indigo.scss
index e5ab0f3ee..5c1ebeb56 100644
--- a/src/components/navbar/themes/dark/navbar.indigo.scss
+++ b/src/components/navbar/themes/dark/navbar.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-navbar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/navbar/themes/dark/navbar.material.scss b/src/components/navbar/themes/dark/navbar.material.scss
index cd3685386..0dddc23d0 100644
--- a/src/components/navbar/themes/dark/navbar.material.scss
+++ b/src/components/navbar/themes/dark/navbar.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-navbar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/navbar/themes/light/navbar.bootstrap.scss b/src/components/navbar/themes/light/navbar.bootstrap.scss
index db4c0b131..8bade7490 100644
--- a/src/components/navbar/themes/light/navbar.bootstrap.scss
+++ b/src/components/navbar/themes/light/navbar.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-navbar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/navbar/themes/light/navbar.fluent.scss b/src/components/navbar/themes/light/navbar.fluent.scss
index 477f81b53..4d87074b4 100644
--- a/src/components/navbar/themes/light/navbar.fluent.scss
+++ b/src/components/navbar/themes/light/navbar.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-navbar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/navbar/themes/light/navbar.indigo.scss b/src/components/navbar/themes/light/navbar.indigo.scss
index b265b8ac4..641839724 100644
--- a/src/components/navbar/themes/light/navbar.indigo.scss
+++ b/src/components/navbar/themes/light/navbar.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-navbar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/navbar/themes/light/navbar.material.scss b/src/components/navbar/themes/light/navbar.material.scss
index 6e9ddfa3b..3271cfef8 100644
--- a/src/components/navbar/themes/light/navbar.material.scss
+++ b/src/components/navbar/themes/light/navbar.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-navbar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/navbar/themes/light/navbar.shared.scss b/src/components/navbar/themes/light/navbar.shared.scss
index 1704df577..96b6530e6 100644
--- a/src/components/navbar/themes/light/navbar.shared.scss
+++ b/src/components/navbar/themes/light/navbar.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-navbar');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/popover/themes/light/popover.base.scss b/src/components/popover/themes/light/popover.base.scss
index cdbc0d91b..8867ffa26 100644
--- a/src/components/popover/themes/light/popover.base.scss
+++ b/src/components/popover/themes/light/popover.base.scss
@@ -13,4 +13,5 @@
     inset: unset;
     border: none;
     padding: 0;
+    background: transparent;
 }
diff --git a/src/components/progress/themes/circular/dark/circular.progress.bootstrap.scss b/src/components/progress/themes/circular/dark/circular.progress.bootstrap.scss
index 184182d36..8bade7490 100644
--- a/src/components/progress/themes/circular/dark/circular.progress.bootstrap.scss
+++ b/src/components/progress/themes/circular/dark/circular.progress.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-circular-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/circular/dark/circular.progress.fluent.scss b/src/components/progress/themes/circular/dark/circular.progress.fluent.scss
index 897394fee..4d87074b4 100644
--- a/src/components/progress/themes/circular/dark/circular.progress.fluent.scss
+++ b/src/components/progress/themes/circular/dark/circular.progress.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-circular-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/circular/dark/circular.progress.indigo.scss b/src/components/progress/themes/circular/dark/circular.progress.indigo.scss
index 7d1f94b62..641839724 100644
--- a/src/components/progress/themes/circular/dark/circular.progress.indigo.scss
+++ b/src/components/progress/themes/circular/dark/circular.progress.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-circular-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/circular/dark/circular.progress.material.scss b/src/components/progress/themes/circular/dark/circular.progress.material.scss
index 37328a7b2..3271cfef8 100644
--- a/src/components/progress/themes/circular/dark/circular.progress.material.scss
+++ b/src/components/progress/themes/circular/dark/circular.progress.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-circular-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/circular/dark/circular.progress.shared.scss b/src/components/progress/themes/circular/dark/circular.progress.shared.scss
index 560fb1cd2..4a7e8438a 100644
--- a/src/components/progress/themes/circular/dark/circular.progress.shared.scss
+++ b/src/components/progress/themes/circular/dark/circular.progress.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-circular-progress');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/progress/themes/circular/light/circular.progress.bootstrap.scss b/src/components/progress/themes/circular/light/circular.progress.bootstrap.scss
index 184182d36..8bade7490 100644
--- a/src/components/progress/themes/circular/light/circular.progress.bootstrap.scss
+++ b/src/components/progress/themes/circular/light/circular.progress.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-circular-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/circular/light/circular.progress.fluent.scss b/src/components/progress/themes/circular/light/circular.progress.fluent.scss
index 897394fee..4d87074b4 100644
--- a/src/components/progress/themes/circular/light/circular.progress.fluent.scss
+++ b/src/components/progress/themes/circular/light/circular.progress.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-circular-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/circular/light/circular.progress.indigo.scss b/src/components/progress/themes/circular/light/circular.progress.indigo.scss
index 7d1f94b62..641839724 100644
--- a/src/components/progress/themes/circular/light/circular.progress.indigo.scss
+++ b/src/components/progress/themes/circular/light/circular.progress.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-circular-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/circular/light/circular.progress.material.scss b/src/components/progress/themes/circular/light/circular.progress.material.scss
index 37328a7b2..3271cfef8 100644
--- a/src/components/progress/themes/circular/light/circular.progress.material.scss
+++ b/src/components/progress/themes/circular/light/circular.progress.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-circular-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/circular/light/circular.progress.shared.scss b/src/components/progress/themes/circular/light/circular.progress.shared.scss
index 560fb1cd2..4a7e8438a 100644
--- a/src/components/progress/themes/circular/light/circular.progress.shared.scss
+++ b/src/components/progress/themes/circular/light/circular.progress.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-circular-progress');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/progress/themes/linear/dark/linear.progress.bootstrap.scss b/src/components/progress/themes/linear/dark/linear.progress.bootstrap.scss
index a513c990a..8bade7490 100644
--- a/src/components/progress/themes/linear/dark/linear.progress.bootstrap.scss
+++ b/src/components/progress/themes/linear/dark/linear.progress.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-linear-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/linear/dark/linear.progress.fluent.scss b/src/components/progress/themes/linear/dark/linear.progress.fluent.scss
index 4b7ace01e..4d87074b4 100644
--- a/src/components/progress/themes/linear/dark/linear.progress.fluent.scss
+++ b/src/components/progress/themes/linear/dark/linear.progress.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-linear-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/linear/dark/linear.progress.indigo.scss b/src/components/progress/themes/linear/dark/linear.progress.indigo.scss
index ba3670002..641839724 100644
--- a/src/components/progress/themes/linear/dark/linear.progress.indigo.scss
+++ b/src/components/progress/themes/linear/dark/linear.progress.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-linear-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/linear/dark/linear.progress.material.scss b/src/components/progress/themes/linear/dark/linear.progress.material.scss
index 0b5fc8094..3271cfef8 100644
--- a/src/components/progress/themes/linear/dark/linear.progress.material.scss
+++ b/src/components/progress/themes/linear/dark/linear.progress.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-linear-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/linear/dark/linear.progress.shared.scss b/src/components/progress/themes/linear/dark/linear.progress.shared.scss
index 686e548ef..4a7e8438a 100644
--- a/src/components/progress/themes/linear/dark/linear.progress.shared.scss
+++ b/src/components/progress/themes/linear/dark/linear.progress.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-linear-progress');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/progress/themes/linear/light/linear.progress.bootstrap.scss b/src/components/progress/themes/linear/light/linear.progress.bootstrap.scss
index a513c990a..8bade7490 100644
--- a/src/components/progress/themes/linear/light/linear.progress.bootstrap.scss
+++ b/src/components/progress/themes/linear/light/linear.progress.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-linear-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/linear/light/linear.progress.fluent.scss b/src/components/progress/themes/linear/light/linear.progress.fluent.scss
index 4b7ace01e..4d87074b4 100644
--- a/src/components/progress/themes/linear/light/linear.progress.fluent.scss
+++ b/src/components/progress/themes/linear/light/linear.progress.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-linear-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/linear/light/linear.progress.indigo.scss b/src/components/progress/themes/linear/light/linear.progress.indigo.scss
index ba3670002..641839724 100644
--- a/src/components/progress/themes/linear/light/linear.progress.indigo.scss
+++ b/src/components/progress/themes/linear/light/linear.progress.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-linear-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/linear/light/linear.progress.material.scss b/src/components/progress/themes/linear/light/linear.progress.material.scss
index 0b5fc8094..3271cfef8 100644
--- a/src/components/progress/themes/linear/light/linear.progress.material.scss
+++ b/src/components/progress/themes/linear/light/linear.progress.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-linear-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/linear/light/linear.progress.shared.scss b/src/components/progress/themes/linear/light/linear.progress.shared.scss
index 686e548ef..4a7e8438a 100644
--- a/src/components/progress/themes/linear/light/linear.progress.shared.scss
+++ b/src/components/progress/themes/linear/light/linear.progress.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-linear-progress');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/radio-group/themes/dark/radio-group.bootstrap.scss b/src/components/radio-group/themes/dark/radio-group.bootstrap.scss
index e0960154c..68cc3c7bb 100644
--- a/src/components/radio-group/themes/dark/radio-group.bootstrap.scss
+++ b/src/components/radio-group/themes/dark/radio-group.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio-group');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/radio-group/themes/dark/radio-group.fluent.scss b/src/components/radio-group/themes/dark/radio-group.fluent.scss
index 72121c599..679ee2e59 100644
--- a/src/components/radio-group/themes/dark/radio-group.fluent.scss
+++ b/src/components/radio-group/themes/dark/radio-group.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio-group');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/radio-group/themes/dark/radio-group.indigo.scss b/src/components/radio-group/themes/dark/radio-group.indigo.scss
index 1b7116e63..5c1ebeb56 100644
--- a/src/components/radio-group/themes/dark/radio-group.indigo.scss
+++ b/src/components/radio-group/themes/dark/radio-group.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio-group');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/radio-group/themes/dark/radio-group.material.scss b/src/components/radio-group/themes/dark/radio-group.material.scss
index 56b52deca..0dddc23d0 100644
--- a/src/components/radio-group/themes/dark/radio-group.material.scss
+++ b/src/components/radio-group/themes/dark/radio-group.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio-group');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/radio-group/themes/light/radio-group.bootstrap.scss b/src/components/radio-group/themes/light/radio-group.bootstrap.scss
index bfb654822..8bade7490 100644
--- a/src/components/radio-group/themes/light/radio-group.bootstrap.scss
+++ b/src/components/radio-group/themes/light/radio-group.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-radio-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/radio-group/themes/light/radio-group.fluent.scss b/src/components/radio-group/themes/light/radio-group.fluent.scss
index e3188a7a7..4d87074b4 100644
--- a/src/components/radio-group/themes/light/radio-group.fluent.scss
+++ b/src/components/radio-group/themes/light/radio-group.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-radio-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/radio-group/themes/light/radio-group.indigo.scss b/src/components/radio-group/themes/light/radio-group.indigo.scss
index f850b5555..641839724 100644
--- a/src/components/radio-group/themes/light/radio-group.indigo.scss
+++ b/src/components/radio-group/themes/light/radio-group.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-radio-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/radio-group/themes/light/radio-group.material.scss b/src/components/radio-group/themes/light/radio-group.material.scss
index 3f44b3216..3271cfef8 100644
--- a/src/components/radio-group/themes/light/radio-group.material.scss
+++ b/src/components/radio-group/themes/light/radio-group.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-radio-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/radio-group/themes/light/radio-group.shared.scss b/src/components/radio-group/themes/light/radio-group.shared.scss
index 13ea61243..4a7e8438a 100644
--- a/src/components/radio-group/themes/light/radio-group.shared.scss
+++ b/src/components/radio-group/themes/light/radio-group.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-radio-group');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/radio/themes/dark/radio.bootstrap.scss b/src/components/radio/themes/dark/radio.bootstrap.scss
index ada9eddb0..6b5d66131 100644
--- a/src/components/radio/themes/dark/radio.bootstrap.scss
+++ b/src/components/radio/themes/dark/radio.bootstrap.scss
@@ -5,7 +5,7 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
 
 :host([disabled]),
@@ -13,4 +13,4 @@ $theme: $bootstrap;
     [part='control'] {
         background: color('surface')
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/radio/themes/dark/radio.fluent.scss b/src/components/radio/themes/dark/radio.fluent.scss
index 0b2e3103a..a8900b801 100644
--- a/src/components/radio/themes/dark/radio.fluent.scss
+++ b/src/components/radio/themes/dark/radio.fluent.scss
@@ -5,7 +5,7 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
 
 :host(:not([disabled]):state(ig-invalid):hover),
diff --git a/src/components/radio/themes/dark/radio.indigo.scss b/src/components/radio/themes/dark/radio.indigo.scss
index 4b8960393..5c1ebeb56 100644
--- a/src/components/radio/themes/dark/radio.indigo.scss
+++ b/src/components/radio/themes/dark/radio.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/radio/themes/dark/radio.material.scss b/src/components/radio/themes/dark/radio.material.scss
index 79960d917..ff100b9a2 100644
--- a/src/components/radio/themes/dark/radio.material.scss
+++ b/src/components/radio/themes/dark/radio.material.scss
@@ -5,7 +5,7 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
 
 [part~='base'] {
diff --git a/src/components/radio/themes/light/radio.bootstrap.scss b/src/components/radio/themes/light/radio.bootstrap.scss
index 90fc71f88..8bade7490 100644
--- a/src/components/radio/themes/light/radio.bootstrap.scss
+++ b/src/components/radio/themes/light/radio.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-radio');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/radio/themes/light/radio.fluent.scss b/src/components/radio/themes/light/radio.fluent.scss
index dff4eba47..4d87074b4 100644
--- a/src/components/radio/themes/light/radio.fluent.scss
+++ b/src/components/radio/themes/light/radio.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-radio');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/radio/themes/light/radio.indigo.scss b/src/components/radio/themes/light/radio.indigo.scss
index 91f83ea8d..641839724 100644
--- a/src/components/radio/themes/light/radio.indigo.scss
+++ b/src/components/radio/themes/light/radio.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-radio');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/radio/themes/light/radio.material.scss b/src/components/radio/themes/light/radio.material.scss
index 4de6d85cd..3271cfef8 100644
--- a/src/components/radio/themes/light/radio.material.scss
+++ b/src/components/radio/themes/light/radio.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-radio');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/radio/themes/light/radio.shared.scss b/src/components/radio/themes/light/radio.shared.scss
index 1fd86fac3..96b6530e6 100644
--- a/src/components/radio/themes/light/radio.shared.scss
+++ b/src/components/radio/themes/light/radio.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-radio');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/rating/themes/dark/rating.bootstrap.scss b/src/components/rating/themes/dark/rating.bootstrap.scss
index 3878c5f6d..68cc3c7bb 100644
--- a/src/components/rating/themes/dark/rating.bootstrap.scss
+++ b/src/components/rating/themes/dark/rating.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-rating');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/rating/themes/dark/rating.fluent.scss b/src/components/rating/themes/dark/rating.fluent.scss
index 2272aa9d2..679ee2e59 100644
--- a/src/components/rating/themes/dark/rating.fluent.scss
+++ b/src/components/rating/themes/dark/rating.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-rating');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/rating/themes/dark/rating.indigo.scss b/src/components/rating/themes/dark/rating.indigo.scss
index a1d143509..5c1ebeb56 100644
--- a/src/components/rating/themes/dark/rating.indigo.scss
+++ b/src/components/rating/themes/dark/rating.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-rating');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/rating/themes/dark/rating.material.scss b/src/components/rating/themes/dark/rating.material.scss
index d29b4c3e6..0dddc23d0 100644
--- a/src/components/rating/themes/dark/rating.material.scss
+++ b/src/components/rating/themes/dark/rating.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-rating');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/rating/themes/light/rating.bootstrap.scss b/src/components/rating/themes/light/rating.bootstrap.scss
index 7049d4e28..8bade7490 100644
--- a/src/components/rating/themes/light/rating.bootstrap.scss
+++ b/src/components/rating/themes/light/rating.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-rating');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/rating/themes/light/rating.fluent.scss b/src/components/rating/themes/light/rating.fluent.scss
index 13d60176c..4d87074b4 100644
--- a/src/components/rating/themes/light/rating.fluent.scss
+++ b/src/components/rating/themes/light/rating.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-rating');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/rating/themes/light/rating.indigo.scss b/src/components/rating/themes/light/rating.indigo.scss
index 9709343e0..641839724 100644
--- a/src/components/rating/themes/light/rating.indigo.scss
+++ b/src/components/rating/themes/light/rating.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-rating');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/rating/themes/light/rating.material.scss b/src/components/rating/themes/light/rating.material.scss
index 65bcdbf5a..3271cfef8 100644
--- a/src/components/rating/themes/light/rating.material.scss
+++ b/src/components/rating/themes/light/rating.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-rating');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/rating/themes/light/rating.shared.scss b/src/components/rating/themes/light/rating.shared.scss
index a1afcf2cd..4a7e8438a 100644
--- a/src/components/rating/themes/light/rating.shared.scss
+++ b/src/components/rating/themes/light/rating.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-rating');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/resize-container/themes/dark/resize-indicator.bootstrap.scss b/src/components/resize-container/themes/dark/resize-indicator.bootstrap.scss
index 4c15e6275..8bade7490 100644
--- a/src/components/resize-container/themes/dark/resize-indicator.bootstrap.scss
+++ b/src/components/resize-container/themes/dark/resize-indicator.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/resize-container/themes/dark/resize-indicator.fluent.scss b/src/components/resize-container/themes/dark/resize-indicator.fluent.scss
index 6ae921d28..4d87074b4 100644
--- a/src/components/resize-container/themes/dark/resize-indicator.fluent.scss
+++ b/src/components/resize-container/themes/dark/resize-indicator.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/resize-container/themes/dark/resize-indicator.indigo.scss b/src/components/resize-container/themes/dark/resize-indicator.indigo.scss
index acab0ab45..641839724 100644
--- a/src/components/resize-container/themes/dark/resize-indicator.indigo.scss
+++ b/src/components/resize-container/themes/dark/resize-indicator.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/resize-container/themes/dark/resize-indicator.material.scss b/src/components/resize-container/themes/dark/resize-indicator.material.scss
index 30bb27d12..3271cfef8 100644
--- a/src/components/resize-container/themes/dark/resize-indicator.material.scss
+++ b/src/components/resize-container/themes/dark/resize-indicator.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/resize-container/themes/dark/resize-indicator.shared.scss b/src/components/resize-container/themes/dark/resize-indicator.shared.scss
index 8638009cb..96b6530e6 100644
--- a/src/components/resize-container/themes/dark/resize-indicator.shared.scss
+++ b/src/components/resize-container/themes/dark/resize-indicator.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-resize-indicator');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/resize-container/themes/light/resize-indicator.bootstrap.scss b/src/components/resize-container/themes/light/resize-indicator.bootstrap.scss
index 4c15e6275..8bade7490 100644
--- a/src/components/resize-container/themes/light/resize-indicator.bootstrap.scss
+++ b/src/components/resize-container/themes/light/resize-indicator.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/resize-container/themes/light/resize-indicator.fluent.scss b/src/components/resize-container/themes/light/resize-indicator.fluent.scss
index 6ae921d28..4d87074b4 100644
--- a/src/components/resize-container/themes/light/resize-indicator.fluent.scss
+++ b/src/components/resize-container/themes/light/resize-indicator.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/resize-container/themes/light/resize-indicator.indigo.scss b/src/components/resize-container/themes/light/resize-indicator.indigo.scss
index acab0ab45..641839724 100644
--- a/src/components/resize-container/themes/light/resize-indicator.indigo.scss
+++ b/src/components/resize-container/themes/light/resize-indicator.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/resize-container/themes/light/resize-indicator.material.scss b/src/components/resize-container/themes/light/resize-indicator.material.scss
index 30bb27d12..3271cfef8 100644
--- a/src/components/resize-container/themes/light/resize-indicator.material.scss
+++ b/src/components/resize-container/themes/light/resize-indicator.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/resize-container/themes/light/resize-indicator.shared.scss b/src/components/resize-container/themes/light/resize-indicator.shared.scss
index 8638009cb..96b6530e6 100644
--- a/src/components/resize-container/themes/light/resize-indicator.shared.scss
+++ b/src/components/resize-container/themes/light/resize-indicator.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-resize-indicator');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/select/themes/dark/_themes.scss b/src/components/select/themes/dark/_themes.scss
index 2238d0627..d02f627b6 100644
--- a/src/components/select/themes/dark/_themes.scss
+++ b/src/components/select/themes/dark/_themes.scss
@@ -1,25 +1,8 @@
 @use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/select' as *;
-@use 'components/input/themes/dark/themes' as input-theme;
 
-$material: map.merge(digest-schema($dark-material-select), (
-    helper-text-color: map.get(input-theme.$material, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$material, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$material, 'error-secondary-color')
-));
-$bootstrap: map.merge(digest-schema($dark-bootstrap-select), (
-    helper-text-color: map.get(input-theme.$bootstrap, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$bootstrap, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$bootstrap, 'error-secondary-color')
-));
-$fluent: map.merge(digest-schema($dark-fluent-select), (
-    helper-text-color: map.get(input-theme.$fluent, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$fluent, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$fluent, 'error-secondary-color')
-));
-$indigo: map.merge(digest-schema($dark-indigo-select), (
-    helper-text-color: map.get(input-theme.$indigo, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$indigo, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$indigo, 'error-secondary-color')
-));
+$material: digest-schema($dark-material-select);
+$bootstrap: digest-schema($dark-bootstrap-select);
+$fluent: digest-schema($dark-fluent-select);
+$indigo: digest-schema($dark-indigo-select);
diff --git a/src/components/select/themes/dark/select.bootstrap.scss b/src/components/select/themes/dark/select.bootstrap.scss
index 1ee36f9c6..96e91e4f4 100644
--- a/src/components/select/themes/dark/select.bootstrap.scss
+++ b/src/components/select/themes/dark/select.bootstrap.scss
@@ -6,14 +6,11 @@
 $dropdown-theme: dropdown-theme.$bootstrap;
 $theme: $bootstrap;
 
-
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-select');
-    @include css-vars-from-theme($dropdown-theme, 'ig-popover');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 
-    --dd-background-color: #{var-get($dropdown-theme, 'background-color')};
-    --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')};
-    --dd-border-color: #{var-get($dropdown-theme, 'border-color')};
-    --dd-elevation: #{var-get($dropdown-theme, 'elevation')};
+    [part='base'] {
+        @include css-vars-from-theme($dropdown-theme);
+    }
 }
 
diff --git a/src/components/select/themes/dark/select.fluent.scss b/src/components/select/themes/dark/select.fluent.scss
index 250cf1c3c..2080fea83 100644
--- a/src/components/select/themes/dark/select.fluent.scss
+++ b/src/components/select/themes/dark/select.fluent.scss
@@ -7,11 +7,9 @@ $dropdown-theme: dropdown-theme.$fluent;
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-select');
-    @include css-vars-from-theme($dropdown-theme, 'ig-popover');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 
-    --dd-background-color: #{var-get($dropdown-theme, 'background-color')};
-    --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')};
-    --dd-border-color: #{var-get($dropdown-theme, 'border-color')};
-    --dd-elevation: #{var-get($dropdown-theme, 'elevation')};
+    [part='base'] {
+        @include css-vars-from-theme($dropdown-theme);
+    }
 }
diff --git a/src/components/select/themes/dark/select.indigo.scss b/src/components/select/themes/dark/select.indigo.scss
index 3c2d4cf92..beb744043 100644
--- a/src/components/select/themes/dark/select.indigo.scss
+++ b/src/components/select/themes/dark/select.indigo.scss
@@ -7,11 +7,9 @@ $dropdown-theme: dropdown-theme.$indigo;
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-select');
-    @include css-vars-from-theme($dropdown-theme, 'ig-popover');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 
-    --dd-background-color: #{var-get($dropdown-theme, 'background-color')};
-    --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')};
-    --dd-border-color: #{var-get($dropdown-theme, 'border-color')};
-    --dd-elevation: #{var-get($dropdown-theme, 'elevation')};
+    [part='base'] {
+        @include css-vars-from-theme($dropdown-theme);
+    }
 }
diff --git a/src/components/select/themes/dark/select.material.scss b/src/components/select/themes/dark/select.material.scss
index 2059a494d..4f41d71a1 100644
--- a/src/components/select/themes/dark/select.material.scss
+++ b/src/components/select/themes/dark/select.material.scss
@@ -7,11 +7,9 @@ $dropdown-theme: dropdown-theme.$material;
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-select');
-    @include css-vars-from-theme($dropdown-theme, 'ig-popover');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 
-    --dd-background-color: #{var-get($dropdown-theme, 'background-color')};
-    --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')};
-    --dd-border-color: #{var-get($dropdown-theme, 'border-color')};
-    --dd-elevation: #{var-get($dropdown-theme, 'elevation')};
+    [part='base'] {
+        @include css-vars-from-theme($dropdown-theme);
+    }
 }
diff --git a/src/components/select/themes/light/_themes.scss b/src/components/select/themes/light/_themes.scss
index 9783e7c3d..cbed9098c 100644
--- a/src/components/select/themes/light/_themes.scss
+++ b/src/components/select/themes/light/_themes.scss
@@ -1,26 +1,9 @@
 @use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/light/select' as *;
-@use 'components/input/themes/light/themes' as input-theme;
 
 $base: digest-schema($light-select);
-$material: map.merge(digest-schema($material-select), (
-    helper-text-color: map.get(input-theme.$material, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$material, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$material, 'error-secondary-color')
-));
-$bootstrap: map.merge(digest-schema($bootstrap-select), (
-    helper-text-color: map.get(input-theme.$bootstrap, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$bootstrap, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$bootstrap, 'error-secondary-color')
-));
-$fluent: map.merge(digest-schema($fluent-select), (
-    helper-text-color: map.get(input-theme.$fluent, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$fluent, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$fluent, 'error-secondary-color')
-));
-$indigo: map.merge(digest-schema($indigo-select), (
-    helper-text-color: map.get(input-theme.$indigo, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$indigo, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$indigo, 'error-secondary-color')
-));
+$material: digest-schema($material-select);
+$bootstrap: digest-schema($bootstrap-select);
+$fluent: digest-schema($fluent-select);
+$indigo: digest-schema($indigo-select);
diff --git a/src/components/select/themes/light/select.bootstrap.scss b/src/components/select/themes/light/select.bootstrap.scss
index 8158be06f..024f1b151 100644
--- a/src/components/select/themes/light/select.bootstrap.scss
+++ b/src/components/select/themes/light/select.bootstrap.scss
@@ -6,11 +6,9 @@ $dropdown-theme: dropdown-theme.$bootstrap;
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-select');
-    @include css-vars-from-theme($dropdown-theme, 'ig-popover');
+    @include css-vars-from-theme(diff($base, $theme));
 
-    --dd-background-color: #{var-get($dropdown-theme, 'background-color')};
-    --dd-border-radius: #{var-get($dropdown-theme, 'border-radius')};
-    --dd-border-color: #{var-get($dropdown-theme, 'border-color')};
-    --dd-elevation: #{var-get($dropdown-theme, 'elevation')};
+    [part='base'] {
+        @include css-vars-from-theme($dropdown-theme);
+    }
 }
diff --git a/src/components/select/themes/light/select.fluent.scss b/src/components/select/themes/light/select.fluent.scss
index 6fd02a383..41551633e 100644
--- a/src/components/select/themes/light/select.fluent.scss
+++ b/src/components/select/themes/light/select.fluent.scss
@@ -6,11 +6,9 @@ $dropdown-theme: dropdown-theme.$fluent;
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-select');
-    @include css-vars-from-theme($dropdown-theme, 'ig-popover');
+    @include css-vars-from-theme(diff($base, $theme));
 
-    --dd-background-color: #{var-get($dropdown-theme, 'background-color')};
-    --dd-border-radius: #{var-get($dropdown-theme, 'border-radius')};
-    --dd-border-color: #{var-get($dropdown-theme, 'border-color')};
-    --dd-elevation: #{var-get($dropdown-theme, 'elevation')};
+    [part='base'] {
+        @include css-vars-from-theme($dropdown-theme);
+    }
 }
diff --git a/src/components/select/themes/light/select.indigo.scss b/src/components/select/themes/light/select.indigo.scss
index e7590fdab..622768020 100644
--- a/src/components/select/themes/light/select.indigo.scss
+++ b/src/components/select/themes/light/select.indigo.scss
@@ -6,11 +6,9 @@ $dropdown-theme: dropdown-theme.$indigo;
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-select');
-    @include css-vars-from-theme($dropdown-theme, 'ig-popover');
+    @include css-vars-from-theme(diff($base, $theme));
 
-    --dd-background-color: #{var-get($dropdown-theme, 'background-color')};
-    --dd-border-radius: #{var-get($dropdown-theme, 'border-radius')};
-    --dd-border-color: #{var-get($dropdown-theme, 'border-color')};
-    --dd-elevation: #{var-get($dropdown-theme, 'elevation')};
+    [part='base'] {
+        @include css-vars-from-theme($dropdown-theme);
+    }
 }
diff --git a/src/components/select/themes/light/select.material.scss b/src/components/select/themes/light/select.material.scss
index 3b26fcd44..52f02c8e1 100644
--- a/src/components/select/themes/light/select.material.scss
+++ b/src/components/select/themes/light/select.material.scss
@@ -6,11 +6,9 @@ $dropdown-theme: dropdown-theme.$material;
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-select');
-    @include css-vars-from-theme($dropdown-theme, 'ig-popover');
+    @include css-vars-from-theme(diff($base, $theme));
 
-    --dd-background-color: #{var-get($dropdown-theme, 'background-color')};
-    --dd-border-radius: #{var-get($dropdown-theme, 'border-radius')};
-    --dd-border-color: #{var-get($dropdown-theme, 'border-color')};
-    --dd-elevation: #{var-get($dropdown-theme, 'elevation')};
+    [part='base'] {
+        @include css-vars-from-theme($dropdown-theme);
+    }
 }
diff --git a/src/components/select/themes/light/select.shared.scss b/src/components/select/themes/light/select.shared.scss
index 0d0cdf0d5..96b6530e6 100644
--- a/src/components/select/themes/light/select.shared.scss
+++ b/src/components/select/themes/light/select.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-select');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/select/themes/shared/select.bootstrap.scss b/src/components/select/themes/shared/select.bootstrap.scss
index 1d014f0a3..d4fc0d183 100644
--- a/src/components/select/themes/shared/select.bootstrap.scss
+++ b/src/components/select/themes/shared/select.bootstrap.scss
@@ -1,9 +1,11 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
+@use 'components/dropdown/themes/light/themes' as dropdown-theme;
 @use 'components/input/themes/light/themes' as input-theme;
 
 $theme: $bootstrap;
 $input-theme: input-theme.$bootstrap;
+$dropdown-theme: dropdown-theme.$bootstrap;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
@@ -13,7 +15,7 @@ $input-theme: input-theme.$bootstrap;
     ::part(helper-text) {
         @include type-style('body-2');
 
-        color: var-get($theme, 'helper-text-color');
+        color: var-get($input-theme, 'helper-text-color');
         grid-auto-rows: minmax(rem(20px), auto);
         margin-block-start: pad-block(rem(4px));
     }
@@ -27,7 +29,7 @@ $input-theme: input-theme.$bootstrap;
 }
 
 [part='base'] {
-    border: rem(1px) solid var(--dd-border-color);
+    border: rem(1px) solid var-get($dropdown-theme, 'border-color');
     padding: pad-block(rem(8px)) 0;
 }
 
@@ -41,7 +43,7 @@ $input-theme: input-theme.$bootstrap;
 :host([disabled]),
 :host(:disabled) {
     igc-validator {
-        color: var-get($theme, 'disabled-text-color');
+        color: var-get($input-theme, 'disabled-text-color');
     }
 
     [part~='toggle-icon'] {
diff --git a/src/components/select/themes/shared/select.common.scss b/src/components/select/themes/shared/select.common.scss
index 0e5ee8b1d..c20a7f538 100644
--- a/src/components/select/themes/shared/select.common.scss
+++ b/src/components/select/themes/shared/select.common.scss
@@ -18,9 +18,9 @@ $dropdown-theme: dropdown-theme.$material;
 }
 
 [part='base'] {
-    background: var(--dd-background-color);
-    border-radius: var(--dd-border-radius);
-    box-shadow: var(--dd-elevation);
+    background: var-get($dropdown-theme, 'background-color');
+    border-radius: var-get($dropdown-theme, 'border-radius');
+    box-shadow: var-get($dropdown-theme, 'elevation');
 }
 
 [part~='toggle-icon'] {
@@ -69,11 +69,11 @@ $dropdown-theme: dropdown-theme.$material;
 :host(:not([disabled]):state(ig-invalid)),
 :host(:not(:disabled):state(ig-invalid)) {
     ::part(helper-text) {
-        color: var-get($theme, 'error-secondary-color');
+        color: var-get($input-theme, 'error-secondary-color');
     }
 }
 
 ::slotted([slot='suffix']),
 ::slotted([slot='prefix']) {
     padding-inline: var(--affix-padding);
-}
\ No newline at end of file
+}
diff --git a/src/components/select/themes/shared/select.fluent.scss b/src/components/select/themes/shared/select.fluent.scss
index 230a93816..b40f26134 100644
--- a/src/components/select/themes/shared/select.fluent.scss
+++ b/src/components/select/themes/shared/select.fluent.scss
@@ -13,7 +13,7 @@ $input-theme: input-theme.$fluent;
     --dropdown-size: var(--component-size);
 
     ::part(helper-text) {
-        color: var-get($theme, 'helper-text-color');
+        color: var-get($input-theme, 'helper-text-color');
         margin-block-start: pad-block(rem(5px));
         grid-auto-rows: minmax(rem(18px), auto);
     }
@@ -43,7 +43,7 @@ $input-theme: input-theme.$fluent;
 :host(:disabled),
 :host([disabled]) {
     igc-validator {
-        color: var-get($fluent, 'disabled-text-color');
+        color: var-get($input-theme, 'disabled-text-color');
     }
 
     [part~='toggle-icon'] {
diff --git a/src/components/select/themes/shared/select.indigo.scss b/src/components/select/themes/shared/select.indigo.scss
index 61a80ac05..164b04ed2 100644
--- a/src/components/select/themes/shared/select.indigo.scss
+++ b/src/components/select/themes/shared/select.indigo.scss
@@ -64,14 +64,14 @@ $input-theme: input-theme.$indigo;
     }
 
     ::part(validation-icon) {
-        color: var-get($theme, 'error-secondary-color');
+        color: var-get($input-theme, 'error-secondary-color');
     }
 }
 
 :host(:disabled),
 :host([disabled]) {
     igc-input::part(input) {
-        color: var-get($theme, 'disabled-text-color');
+        color: var-get($input-theme, 'disabled-text-color');
     }
 
     [part~='toggle-icon'] {
diff --git a/src/components/slider/themes/dark/slider.bootstrap.scss b/src/components/slider/themes/dark/slider.bootstrap.scss
index e10ab8312..68cc3c7bb 100644
--- a/src/components/slider/themes/dark/slider.bootstrap.scss
+++ b/src/components/slider/themes/dark/slider.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-slider');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/slider/themes/dark/slider.fluent.scss b/src/components/slider/themes/dark/slider.fluent.scss
index 6faaf556f..679ee2e59 100644
--- a/src/components/slider/themes/dark/slider.fluent.scss
+++ b/src/components/slider/themes/dark/slider.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-slider');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/slider/themes/dark/slider.indigo.scss b/src/components/slider/themes/dark/slider.indigo.scss
index 4c00e9590..5c1ebeb56 100644
--- a/src/components/slider/themes/dark/slider.indigo.scss
+++ b/src/components/slider/themes/dark/slider.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-slider');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/slider/themes/dark/slider.material.scss b/src/components/slider/themes/dark/slider.material.scss
index b9a40188a..0dddc23d0 100644
--- a/src/components/slider/themes/dark/slider.material.scss
+++ b/src/components/slider/themes/dark/slider.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-slider');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/slider/themes/light/slider.bootstrap.scss b/src/components/slider/themes/light/slider.bootstrap.scss
index 741a90d02..8bade7490 100644
--- a/src/components/slider/themes/light/slider.bootstrap.scss
+++ b/src/components/slider/themes/light/slider.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-slider');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/slider/themes/light/slider.fluent.scss b/src/components/slider/themes/light/slider.fluent.scss
index e4fd404c7..4d87074b4 100644
--- a/src/components/slider/themes/light/slider.fluent.scss
+++ b/src/components/slider/themes/light/slider.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-slider');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/slider/themes/light/slider.indigo.scss b/src/components/slider/themes/light/slider.indigo.scss
index d7f2cbbfe..641839724 100644
--- a/src/components/slider/themes/light/slider.indigo.scss
+++ b/src/components/slider/themes/light/slider.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-slider');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/slider/themes/light/slider.material.scss b/src/components/slider/themes/light/slider.material.scss
index a06298b7e..3271cfef8 100644
--- a/src/components/slider/themes/light/slider.material.scss
+++ b/src/components/slider/themes/light/slider.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-slider');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/slider/themes/light/slider.shared.scss b/src/components/slider/themes/light/slider.shared.scss
index 55b45a623..4a7e8438a 100644
--- a/src/components/slider/themes/light/slider.shared.scss
+++ b/src/components/slider/themes/light/slider.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-slider');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/snackbar/themes/dark/snackbar.bootstrap.scss b/src/components/snackbar/themes/dark/snackbar.bootstrap.scss
index 0f550df1c..68cc3c7bb 100644
--- a/src/components/snackbar/themes/dark/snackbar.bootstrap.scss
+++ b/src/components/snackbar/themes/dark/snackbar.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-snackbar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/snackbar/themes/dark/snackbar.fluent.scss b/src/components/snackbar/themes/dark/snackbar.fluent.scss
index 843e7f3a6..679ee2e59 100644
--- a/src/components/snackbar/themes/dark/snackbar.fluent.scss
+++ b/src/components/snackbar/themes/dark/snackbar.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-snackbar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/snackbar/themes/dark/snackbar.indigo.scss b/src/components/snackbar/themes/dark/snackbar.indigo.scss
index 4fcfd760d..5c1ebeb56 100644
--- a/src/components/snackbar/themes/dark/snackbar.indigo.scss
+++ b/src/components/snackbar/themes/dark/snackbar.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-snackbar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/snackbar/themes/dark/snackbar.material.scss b/src/components/snackbar/themes/dark/snackbar.material.scss
index e168b5d83..0dddc23d0 100644
--- a/src/components/snackbar/themes/dark/snackbar.material.scss
+++ b/src/components/snackbar/themes/dark/snackbar.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-snackbar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/snackbar/themes/light/snackbar.bootstrap.scss b/src/components/snackbar/themes/light/snackbar.bootstrap.scss
index 24872b92e..8bade7490 100644
--- a/src/components/snackbar/themes/light/snackbar.bootstrap.scss
+++ b/src/components/snackbar/themes/light/snackbar.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-snackbar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/snackbar/themes/light/snackbar.fluent.scss b/src/components/snackbar/themes/light/snackbar.fluent.scss
index 994d09f62..4d87074b4 100644
--- a/src/components/snackbar/themes/light/snackbar.fluent.scss
+++ b/src/components/snackbar/themes/light/snackbar.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-snackbar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/snackbar/themes/light/snackbar.indigo.scss b/src/components/snackbar/themes/light/snackbar.indigo.scss
index 56e768b07..641839724 100644
--- a/src/components/snackbar/themes/light/snackbar.indigo.scss
+++ b/src/components/snackbar/themes/light/snackbar.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-snackbar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/snackbar/themes/light/snackbar.material.scss b/src/components/snackbar/themes/light/snackbar.material.scss
index 74f2a22d9..3271cfef8 100644
--- a/src/components/snackbar/themes/light/snackbar.material.scss
+++ b/src/components/snackbar/themes/light/snackbar.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-snackbar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/snackbar/themes/light/snackbar.shared.scss b/src/components/snackbar/themes/light/snackbar.shared.scss
index 36794d1d8..4a7e8438a 100644
--- a/src/components/snackbar/themes/light/snackbar.shared.scss
+++ b/src/components/snackbar/themes/light/snackbar.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-snackbar');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/stepper/themes/step/dark/step.bootstrap.scss b/src/components/stepper/themes/step/dark/step.bootstrap.scss
index 7f015916f..a54e5e8c2 100644
--- a/src/components/stepper/themes/step/dark/step.bootstrap.scss
+++ b/src/components/stepper/themes/step/dark/step.bootstrap.scss
@@ -4,6 +4,6 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-stepper');
+    @include css-vars-from-theme(diff($base, $theme));
 }
 
diff --git a/src/components/stepper/themes/step/dark/step.fluent.scss b/src/components/stepper/themes/step/dark/step.fluent.scss
index 005f1d0ae..4d87074b4 100644
--- a/src/components/stepper/themes/step/dark/step.fluent.scss
+++ b/src/components/stepper/themes/step/dark/step.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-stepper');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/stepper/themes/step/dark/step.indigo.scss b/src/components/stepper/themes/step/dark/step.indigo.scss
index 1b066bc9f..641839724 100644
--- a/src/components/stepper/themes/step/dark/step.indigo.scss
+++ b/src/components/stepper/themes/step/dark/step.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-stepper');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/stepper/themes/step/dark/step.material.scss b/src/components/stepper/themes/step/dark/step.material.scss
index 7f21149f2..3271cfef8 100644
--- a/src/components/stepper/themes/step/dark/step.material.scss
+++ b/src/components/stepper/themes/step/dark/step.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-stepper');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/stepper/themes/step/dark/step.shared.scss b/src/components/stepper/themes/step/dark/step.shared.scss
index cf8dfcf54..96b6530e6 100644
--- a/src/components/stepper/themes/step/dark/step.shared.scss
+++ b/src/components/stepper/themes/step/dark/step.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-stepper');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/stepper/themes/step/light/step.bootstrap.scss b/src/components/stepper/themes/step/light/step.bootstrap.scss
index 960f4965b..8bade7490 100644
--- a/src/components/stepper/themes/step/light/step.bootstrap.scss
+++ b/src/components/stepper/themes/step/light/step.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-stepper');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/stepper/themes/step/light/step.fluent.scss b/src/components/stepper/themes/step/light/step.fluent.scss
index 005f1d0ae..4d87074b4 100644
--- a/src/components/stepper/themes/step/light/step.fluent.scss
+++ b/src/components/stepper/themes/step/light/step.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-stepper');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/stepper/themes/step/light/step.indigo.scss b/src/components/stepper/themes/step/light/step.indigo.scss
index 1b066bc9f..641839724 100644
--- a/src/components/stepper/themes/step/light/step.indigo.scss
+++ b/src/components/stepper/themes/step/light/step.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-stepper');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/stepper/themes/step/light/step.material.scss b/src/components/stepper/themes/step/light/step.material.scss
index 7f21149f2..3271cfef8 100644
--- a/src/components/stepper/themes/step/light/step.material.scss
+++ b/src/components/stepper/themes/step/light/step.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-stepper');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/stepper/themes/step/light/step.shared.scss b/src/components/stepper/themes/step/light/step.shared.scss
index cf8dfcf54..96b6530e6 100644
--- a/src/components/stepper/themes/step/light/step.shared.scss
+++ b/src/components/stepper/themes/step/light/step.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-stepper');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/tabs/themes/dark/tab.bootstrap.scss b/src/components/tabs/themes/dark/tab.bootstrap.scss
index c2b537314..8bade7490 100644
--- a/src/components/tabs/themes/dark/tab.bootstrap.scss
+++ b/src/components/tabs/themes/dark/tab.bootstrap.scss
@@ -4,7 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
-
-    --navigation-border-color: #{var-get($theme, 'border-color')};
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tabs/themes/dark/tab.fluent.scss b/src/components/tabs/themes/dark/tab.fluent.scss
index b3406000a..4d87074b4 100644
--- a/src/components/tabs/themes/dark/tab.fluent.scss
+++ b/src/components/tabs/themes/dark/tab.fluent.scss
@@ -4,7 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
-
-    --navigation-border-color: #{var-get($theme, 'border-color')};
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tabs/themes/dark/tab.indigo.scss b/src/components/tabs/themes/dark/tab.indigo.scss
index fb9dea547..641839724 100644
--- a/src/components/tabs/themes/dark/tab.indigo.scss
+++ b/src/components/tabs/themes/dark/tab.indigo.scss
@@ -4,7 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
-
-    --navigation-border-color: #{var-get($theme, 'border-color')};
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tabs/themes/dark/tab.material.scss b/src/components/tabs/themes/dark/tab.material.scss
index 82d7a599d..3271cfef8 100644
--- a/src/components/tabs/themes/dark/tab.material.scss
+++ b/src/components/tabs/themes/dark/tab.material.scss
@@ -4,7 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
-
-    --navigation-border-color: #{var-get($theme, 'border-color')};
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tabs/themes/dark/tab.shared.scss b/src/components/tabs/themes/dark/tab.shared.scss
index 9b4e329da..96b6530e6 100644
--- a/src/components/tabs/themes/dark/tab.shared.scss
+++ b/src/components/tabs/themes/dark/tab.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-tabs');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/tabs/themes/light/tab.bootstrap.scss b/src/components/tabs/themes/light/tab.bootstrap.scss
index c2b537314..8bade7490 100644
--- a/src/components/tabs/themes/light/tab.bootstrap.scss
+++ b/src/components/tabs/themes/light/tab.bootstrap.scss
@@ -4,7 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
-
-    --navigation-border-color: #{var-get($theme, 'border-color')};
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tabs/themes/light/tab.fluent.scss b/src/components/tabs/themes/light/tab.fluent.scss
index b3406000a..4d87074b4 100644
--- a/src/components/tabs/themes/light/tab.fluent.scss
+++ b/src/components/tabs/themes/light/tab.fluent.scss
@@ -4,7 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
-
-    --navigation-border-color: #{var-get($theme, 'border-color')};
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tabs/themes/light/tab.indigo.scss b/src/components/tabs/themes/light/tab.indigo.scss
index fb9dea547..641839724 100644
--- a/src/components/tabs/themes/light/tab.indigo.scss
+++ b/src/components/tabs/themes/light/tab.indigo.scss
@@ -4,7 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
-
-    --navigation-border-color: #{var-get($theme, 'border-color')};
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tabs/themes/light/tab.material.scss b/src/components/tabs/themes/light/tab.material.scss
index 82d7a599d..3271cfef8 100644
--- a/src/components/tabs/themes/light/tab.material.scss
+++ b/src/components/tabs/themes/light/tab.material.scss
@@ -4,7 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
-
-    --navigation-border-color: #{var-get($theme, 'border-color')};
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tabs/themes/light/tab.shared.scss b/src/components/tabs/themes/light/tab.shared.scss
index 9b4e329da..96b6530e6 100644
--- a/src/components/tabs/themes/light/tab.shared.scss
+++ b/src/components/tabs/themes/light/tab.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-tabs');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/textarea/themes/dark/textarea.bootstrap.scss b/src/components/textarea/themes/dark/textarea.bootstrap.scss
index 194e1d1ae..68cc3c7bb 100644
--- a/src/components/textarea/themes/dark/textarea.bootstrap.scss
+++ b/src/components/textarea/themes/dark/textarea.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-textarea');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/textarea/themes/dark/textarea.fluent.scss b/src/components/textarea/themes/dark/textarea.fluent.scss
index 06d66a8de..679ee2e59 100644
--- a/src/components/textarea/themes/dark/textarea.fluent.scss
+++ b/src/components/textarea/themes/dark/textarea.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-textarea');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/textarea/themes/dark/textarea.indigo.scss b/src/components/textarea/themes/dark/textarea.indigo.scss
index 9c4819eec..5c1ebeb56 100644
--- a/src/components/textarea/themes/dark/textarea.indigo.scss
+++ b/src/components/textarea/themes/dark/textarea.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-textarea');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/textarea/themes/dark/textarea.material.scss b/src/components/textarea/themes/dark/textarea.material.scss
index 5f57a0ee5..0dddc23d0 100644
--- a/src/components/textarea/themes/dark/textarea.material.scss
+++ b/src/components/textarea/themes/dark/textarea.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-textarea');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/textarea/themes/light/textarea.bootstrap.scss b/src/components/textarea/themes/light/textarea.bootstrap.scss
index 039072b89..8bade7490 100644
--- a/src/components/textarea/themes/light/textarea.bootstrap.scss
+++ b/src/components/textarea/themes/light/textarea.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-textarea');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/textarea/themes/light/textarea.fluent.scss b/src/components/textarea/themes/light/textarea.fluent.scss
index f9848b586..4d87074b4 100644
--- a/src/components/textarea/themes/light/textarea.fluent.scss
+++ b/src/components/textarea/themes/light/textarea.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-textarea');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/textarea/themes/light/textarea.indigo.scss b/src/components/textarea/themes/light/textarea.indigo.scss
index 0de11c3ca..641839724 100644
--- a/src/components/textarea/themes/light/textarea.indigo.scss
+++ b/src/components/textarea/themes/light/textarea.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-textarea');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/textarea/themes/light/textarea.material.scss b/src/components/textarea/themes/light/textarea.material.scss
index 6e618de7f..3271cfef8 100644
--- a/src/components/textarea/themes/light/textarea.material.scss
+++ b/src/components/textarea/themes/light/textarea.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-textarea');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/textarea/themes/light/textarea.shared.scss b/src/components/textarea/themes/light/textarea.shared.scss
index 1bfba893a..96b6530e6 100644
--- a/src/components/textarea/themes/light/textarea.shared.scss
+++ b/src/components/textarea/themes/light/textarea.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-textarea');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/tile-manager/themes/dark/tile-manager.bootstrap.scss b/src/components/tile-manager/themes/dark/tile-manager.bootstrap.scss
index 78f430331..8bade7490 100644
--- a/src/components/tile-manager/themes/dark/tile-manager.bootstrap.scss
+++ b/src/components/tile-manager/themes/dark/tile-manager.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tile-manager/themes/dark/tile-manager.fluent.scss b/src/components/tile-manager/themes/dark/tile-manager.fluent.scss
index fb1ce6204..4d87074b4 100644
--- a/src/components/tile-manager/themes/dark/tile-manager.fluent.scss
+++ b/src/components/tile-manager/themes/dark/tile-manager.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tile-manager/themes/dark/tile-manager.indigo.scss b/src/components/tile-manager/themes/dark/tile-manager.indigo.scss
index cf387e731..641839724 100644
--- a/src/components/tile-manager/themes/dark/tile-manager.indigo.scss
+++ b/src/components/tile-manager/themes/dark/tile-manager.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tile-manager/themes/dark/tile-manager.material.scss b/src/components/tile-manager/themes/dark/tile-manager.material.scss
index 3e6764ed7..3271cfef8 100644
--- a/src/components/tile-manager/themes/dark/tile-manager.material.scss
+++ b/src/components/tile-manager/themes/dark/tile-manager.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tile-manager/themes/dark/tile-manager.shared.scss b/src/components/tile-manager/themes/dark/tile-manager.shared.scss
index 3aa756d43..96b6530e6 100644
--- a/src/components/tile-manager/themes/dark/tile-manager.shared.scss
+++ b/src/components/tile-manager/themes/dark/tile-manager.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-tile-manager');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/tile-manager/themes/light/tile-manager.bootstrap.scss b/src/components/tile-manager/themes/light/tile-manager.bootstrap.scss
index 78f430331..8bade7490 100644
--- a/src/components/tile-manager/themes/light/tile-manager.bootstrap.scss
+++ b/src/components/tile-manager/themes/light/tile-manager.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tile-manager/themes/light/tile-manager.fluent.scss b/src/components/tile-manager/themes/light/tile-manager.fluent.scss
index fb1ce6204..4d87074b4 100644
--- a/src/components/tile-manager/themes/light/tile-manager.fluent.scss
+++ b/src/components/tile-manager/themes/light/tile-manager.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tile-manager/themes/light/tile-manager.indigo.scss b/src/components/tile-manager/themes/light/tile-manager.indigo.scss
index cf387e731..641839724 100644
--- a/src/components/tile-manager/themes/light/tile-manager.indigo.scss
+++ b/src/components/tile-manager/themes/light/tile-manager.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tile-manager/themes/light/tile-manager.material.scss b/src/components/tile-manager/themes/light/tile-manager.material.scss
index 3e6764ed7..3271cfef8 100644
--- a/src/components/tile-manager/themes/light/tile-manager.material.scss
+++ b/src/components/tile-manager/themes/light/tile-manager.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tile-manager/themes/light/tile-manager.shared.scss b/src/components/tile-manager/themes/light/tile-manager.shared.scss
index 3aa756d43..96b6530e6 100644
--- a/src/components/tile-manager/themes/light/tile-manager.shared.scss
+++ b/src/components/tile-manager/themes/light/tile-manager.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-tile-manager');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/toast/themes/dark/toast.bootstrap.scss b/src/components/toast/themes/dark/toast.bootstrap.scss
index 457b0106c..8bade7490 100644
--- a/src/components/toast/themes/dark/toast.bootstrap.scss
+++ b/src/components/toast/themes/dark/toast.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-toast');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/toast/themes/dark/toast.fluent.scss b/src/components/toast/themes/dark/toast.fluent.scss
index 2c8a8febf..4d87074b4 100644
--- a/src/components/toast/themes/dark/toast.fluent.scss
+++ b/src/components/toast/themes/dark/toast.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-toast');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/toast/themes/dark/toast.indigo.scss b/src/components/toast/themes/dark/toast.indigo.scss
index 7eeb73596..641839724 100644
--- a/src/components/toast/themes/dark/toast.indigo.scss
+++ b/src/components/toast/themes/dark/toast.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-toast');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/toast/themes/dark/toast.material.scss b/src/components/toast/themes/dark/toast.material.scss
index 3eba5aeac..3271cfef8 100644
--- a/src/components/toast/themes/dark/toast.material.scss
+++ b/src/components/toast/themes/dark/toast.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-toast');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/toast/themes/dark/toast.shared.scss b/src/components/toast/themes/dark/toast.shared.scss
index 7e8190f54..96b6530e6 100644
--- a/src/components/toast/themes/dark/toast.shared.scss
+++ b/src/components/toast/themes/dark/toast.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-toast');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/toast/themes/light/toast.bootstrap.scss b/src/components/toast/themes/light/toast.bootstrap.scss
index 457b0106c..8bade7490 100644
--- a/src/components/toast/themes/light/toast.bootstrap.scss
+++ b/src/components/toast/themes/light/toast.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-toast');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/toast/themes/light/toast.fluent.scss b/src/components/toast/themes/light/toast.fluent.scss
index 2c8a8febf..4d87074b4 100644
--- a/src/components/toast/themes/light/toast.fluent.scss
+++ b/src/components/toast/themes/light/toast.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-toast');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/toast/themes/light/toast.indigo.scss b/src/components/toast/themes/light/toast.indigo.scss
index 7eeb73596..641839724 100644
--- a/src/components/toast/themes/light/toast.indigo.scss
+++ b/src/components/toast/themes/light/toast.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-toast');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/toast/themes/light/toast.material.scss b/src/components/toast/themes/light/toast.material.scss
index 3eba5aeac..3271cfef8 100644
--- a/src/components/toast/themes/light/toast.material.scss
+++ b/src/components/toast/themes/light/toast.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-toast');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/toast/themes/light/toast.shared.scss b/src/components/toast/themes/light/toast.shared.scss
index 7e8190f54..96b6530e6 100644
--- a/src/components/toast/themes/light/toast.shared.scss
+++ b/src/components/toast/themes/light/toast.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-toast');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/tooltip/themes/dark/tooltip.bootstrap.scss b/src/components/tooltip/themes/dark/tooltip.bootstrap.scss
index f7749c4a6..68cc3c7bb 100644
--- a/src/components/tooltip/themes/dark/tooltip.bootstrap.scss
+++ b/src/components/tooltip/themes/dark/tooltip.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-tooltip');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/tooltip/themes/dark/tooltip.fluent.scss b/src/components/tooltip/themes/dark/tooltip.fluent.scss
index 78a2bf57a..679ee2e59 100644
--- a/src/components/tooltip/themes/dark/tooltip.fluent.scss
+++ b/src/components/tooltip/themes/dark/tooltip.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-tooltip');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/tooltip/themes/dark/tooltip.indigo.scss b/src/components/tooltip/themes/dark/tooltip.indigo.scss
index d373697ad..5c1ebeb56 100644
--- a/src/components/tooltip/themes/dark/tooltip.indigo.scss
+++ b/src/components/tooltip/themes/dark/tooltip.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-tooltip');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/tooltip/themes/dark/tooltip.material.scss b/src/components/tooltip/themes/dark/tooltip.material.scss
index afc7fdb5a..0dddc23d0 100644
--- a/src/components/tooltip/themes/dark/tooltip.material.scss
+++ b/src/components/tooltip/themes/dark/tooltip.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-tooltip');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/tooltip/themes/light/tooltip.bootstrap.scss b/src/components/tooltip/themes/light/tooltip.bootstrap.scss
index 174983d52..8bade7490 100644
--- a/src/components/tooltip/themes/light/tooltip.bootstrap.scss
+++ b/src/components/tooltip/themes/light/tooltip.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tooltip');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tooltip/themes/light/tooltip.fluent.scss b/src/components/tooltip/themes/light/tooltip.fluent.scss
index 12e11b091..4d87074b4 100644
--- a/src/components/tooltip/themes/light/tooltip.fluent.scss
+++ b/src/components/tooltip/themes/light/tooltip.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tooltip');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tooltip/themes/light/tooltip.indigo.scss b/src/components/tooltip/themes/light/tooltip.indigo.scss
index 2e70733c9..641839724 100644
--- a/src/components/tooltip/themes/light/tooltip.indigo.scss
+++ b/src/components/tooltip/themes/light/tooltip.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tooltip');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tooltip/themes/light/tooltip.material.scss b/src/components/tooltip/themes/light/tooltip.material.scss
index 24764ffe6..3271cfef8 100644
--- a/src/components/tooltip/themes/light/tooltip.material.scss
+++ b/src/components/tooltip/themes/light/tooltip.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tooltip');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tooltip/themes/light/tooltip.shared.scss b/src/components/tooltip/themes/light/tooltip.shared.scss
index c6375dd44..96b6530e6 100644
--- a/src/components/tooltip/themes/light/tooltip.shared.scss
+++ b/src/components/tooltip/themes/light/tooltip.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-tooltip');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/tree/themes/dark/container.bootstrap.scss b/src/components/tree/themes/dark/container.bootstrap.scss
index 15d738e61..0b06c7e38 100644
--- a/src/components/tree/themes/dark/container.bootstrap.scss
+++ b/src/components/tree/themes/dark/container.bootstrap.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme(diff($base, $bootstrap), 'ig-tree');
+    @include css-vars-from-theme(diff($base, $bootstrap));
 }
diff --git a/src/components/tree/themes/dark/container.fluent.scss b/src/components/tree/themes/dark/container.fluent.scss
index b29bd57d2..c733adfcb 100644
--- a/src/components/tree/themes/dark/container.fluent.scss
+++ b/src/components/tree/themes/dark/container.fluent.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme(diff($base, $fluent), 'ig-tree');
+    @include css-vars-from-theme(diff($base, $fluent));
 }
diff --git a/src/components/tree/themes/dark/container.indigo.scss b/src/components/tree/themes/dark/container.indigo.scss
index a1ee71922..20dcee56c 100644
--- a/src/components/tree/themes/dark/container.indigo.scss
+++ b/src/components/tree/themes/dark/container.indigo.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme(diff($base, $indigo), 'ig-tree');
+    @include css-vars-from-theme(diff($base, $indigo));
 }
diff --git a/src/components/tree/themes/dark/container.material.scss b/src/components/tree/themes/dark/container.material.scss
index 9faaee884..75a057bee 100644
--- a/src/components/tree/themes/dark/container.material.scss
+++ b/src/components/tree/themes/dark/container.material.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme(diff($base, $material), 'ig-tree');
+    @include css-vars-from-theme(diff($base, $material));
 }
diff --git a/src/components/tree/themes/dark/container.shared.scss b/src/components/tree/themes/dark/container.shared.scss
index 8856d767c..96b6530e6 100644
--- a/src/components/tree/themes/dark/container.shared.scss
+++ b/src/components/tree/themes/dark/container.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-tree');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/tree/themes/light/container.bootstrap.scss b/src/components/tree/themes/light/container.bootstrap.scss
index 882387932..a54e5e8c2 100644
--- a/src/components/tree/themes/light/container.bootstrap.scss
+++ b/src/components/tree/themes/light/container.bootstrap.scss
@@ -4,6 +4,6 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tree');
+    @include css-vars-from-theme(diff($base, $theme));
 }
 
diff --git a/src/components/tree/themes/light/container.fluent.scss b/src/components/tree/themes/light/container.fluent.scss
index 4fd0097ec..700019ad3 100644
--- a/src/components/tree/themes/light/container.fluent.scss
+++ b/src/components/tree/themes/light/container.fluent.scss
@@ -4,6 +4,6 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tree');
+    @include css-vars-from-theme(diff($base, $theme));
 }
 
diff --git a/src/components/tree/themes/light/container.indigo.scss b/src/components/tree/themes/light/container.indigo.scss
index cb52c9369..09d6167f7 100644
--- a/src/components/tree/themes/light/container.indigo.scss
+++ b/src/components/tree/themes/light/container.indigo.scss
@@ -4,7 +4,7 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tree');
+    @include css-vars-from-theme(diff($base, $theme));
 }
 
 
diff --git a/src/components/tree/themes/light/container.material.scss b/src/components/tree/themes/light/container.material.scss
index 192b56aa5..3271cfef8 100644
--- a/src/components/tree/themes/light/container.material.scss
+++ b/src/components/tree/themes/light/container.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tree');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tree/themes/light/container.shared.scss b/src/components/tree/themes/light/container.shared.scss
index 8856d767c..96b6530e6 100644
--- a/src/components/tree/themes/light/container.shared.scss
+++ b/src/components/tree/themes/light/container.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-tree');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/styles/utilities/_overwrites.scss b/src/styles/utilities/_overwrites.scss
index 6ca61414f..f06b9f30a 100644
--- a/src/styles/utilities/_overwrites.scss
+++ b/src/styles/utilities/_overwrites.scss
@@ -1,4 +1,8 @@
 @use 'igniteui-theming/sass/color/functions' as theming;
+@use 'igniteui-theming/sass/themes/config' as themes;
+
+// Configure the variable prefix for CSS variables
+@include themes.configure-variable-prefix('ig');
 
 @function color(
     $color: primary,