diff --git a/package-lock.json b/package-lock.json
index 156e6f89587..c93f794db41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "@types/source-map": "0.5.2",
         "express": "^5.1.0",
         "fflate": "^0.8.1",
-        "igniteui-theming": "^19.2.3",
+        "igniteui-theming": "^19.3.1",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
         "rxjs": "^7.8.2",
@@ -71,7 +71,7 @@
         "ig-typedoc-theme": "^6.0.0",
         "igniteui-dockmanager": "^1.16.1",
         "igniteui-sassdoc-theme": "^2.0.1",
-        "igniteui-webcomponents": "6.1.1",
+        "igniteui-webcomponents": "6.2.1",
         "jasmine": "^5.6.0",
         "jasmine-core": "^5.6.0",
         "karma": "^6.4.4",
@@ -12964,9 +12964,9 @@
       }
     },
     "node_modules/igniteui-theming": {
-      "version": "19.2.3",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-19.2.3.tgz",
-      "integrity": "sha512-bC0IS/O2uPkyS9/ElDZUVYrE92Vbgl4Z57zkLo+vIvdkk9gED9TcZC6N3zwT42XjY5JOeBMVY/vBS9y7CpYCVw==",
+      "version": "19.3.1",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-19.3.1.tgz",
+      "integrity": "sha512-8Q2hVpvUJbnwE8Sege+6jHOZSqK7d97muqdb4t1CkLG2onz8HDcMQooUXf7mI7gRQgWavvLQLSgMRWXnUUAsJw==",
       "license": "MIT",
       "peerDependencies": {
         "sass": "^1.69.5"
@@ -12982,9 +12982,9 @@
       }
     },
     "node_modules/igniteui-webcomponents": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-6.1.1.tgz",
-      "integrity": "sha512-U4eINzKGdSvdMf7+gP/srlbdqCtpXBphaljZKdKr2QsvlHMmXuRnIWfoQcMoPS5ar2+W1w+Cy92kl4Mt+GtiQQ==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-6.2.1.tgz",
+      "integrity": "sha512-nsErVEF/2nuU76w8pkDzdu+0Xwv25OYWVDdXP5dFoQwvLMusNFju273e8c+DV9LoPtD0nWx6+RzyNaS+ylWXjw==",
       "dev": true,
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
diff --git a/package.json b/package.json
index 3f70a49727c..b8d97be1412 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "@types/source-map": "0.5.2",
     "express": "^5.1.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^19.2.3",
+    "igniteui-theming": "^19.3.1",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",
@@ -121,7 +121,7 @@
     "ig-typedoc-theme": "^6.0.0",
     "igniteui-dockmanager": "^1.16.1",
     "igniteui-sassdoc-theme": "^2.0.1",
-    "igniteui-webcomponents": "6.1.1",
+    "igniteui-webcomponents": "6.2.1",
     "jasmine": "^5.6.0",
     "jasmine-core": "^5.6.0",
     "karma": "^6.4.4",
diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json
index 0f72fa0a8dc..acbfb57d9fc 100644
--- a/projects/igniteui-angular/package.json
+++ b/projects/igniteui-angular/package.json
@@ -73,7 +73,7 @@
         "tslib": "^2.3.0",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
-        "igniteui-theming": "^19.2.3",
+        "igniteui-theming": "^19.3.1",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss
index c01b4128d44..eb7e5faecc7 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss
@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin avatar($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-avatar');
 
     $variant: map.get($theme, '_meta', 'theme');
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
index 77dfdf071c0..c968dccc874 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin badge($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-badge');
 
     $variant: map.get($theme, '_meta', 'theme');
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss
index 574993cd96a..2241dc503a2 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin banner($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-banner, .igx-banner');
     $variant: map.get($theme, '_meta', 'theme');
 
     %igx-banner-host {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss
index cbb9c7412ed..cdf192eb58c 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss
@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin bottom-nav($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-bottom-nav');
 
     $variant: map.get($theme, '_meta', 'theme');
     $menu-height: rem(56px);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss
index c90c2a31caf..38959c2b0af 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss
@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin button-group($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-buttongroup');
 
     $group-item-border-thickness: rem(1px);
     $group-items-margin: rem(10px, 16px);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
index 358cf91c790..97a0d3426f0 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin calendar($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-calendar, .igx-days-view--standalone, .igx-calendar-view--standalone, .igx-date-picker, .igx-month-picker');
 
     $variant: map.get($theme, '_meta', 'theme');
     $bootstrap-theme: $variant == 'bootstrap';
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss
index b7b4da74f09..d17ab526b53 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss
@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin card($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-card');
     $variant: map.get($theme, '_meta', 'theme');
     $not-material-theme: $variant != 'material';
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
index f389ee8175b..5b3e6dab5e0 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin carousel($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-carousel');
     @include scale-in-center();
     @include scale-out-center();
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
index 6231ebcbc1e..64e03221b39 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
@@ -7,7 +7,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin checkbox($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-checkbox');
     $theme-variant: map.get($theme, '_meta', 'variant');
     $variant: map.get($theme, '_meta', 'theme');
     $material-theme: $variant == 'material';
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss
index 861fbadb28d..3a675d01d25 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss
@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin chip($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-chip, .igx-chip__ghost');
     $chip-max-width: 32ch;
 
     $variant: map.get($theme, '_meta', 'theme');
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss
index 319f935d6b3..e232e7576fd 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin column-actions($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-column-actions');
     $variant: map.get($theme, '_meta', 'theme');
 
     %column-actions-display {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss
index 5cbf0d8c1d6..1c0c787018a 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin combo($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-combo, igx-simple-combo');
 
     $variant: map.get($theme, '_meta', 'theme');
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss
index 5cd16765d30..84ce5c56f44 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin date-range-picker($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-date-range-picker');
 
     %igx-date-range-picker {
         display: flex;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss
index e2b9ef81250..08337a13bae 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin dialog($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, '.igx-dialog');
 
     $variant: map.get($theme, '_meta', 'theme');
     $bootstrap-theme: map.get($theme, '_meta', 'theme') == 'bootstrap';
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss
index e866e37f92b..c0b2a736f4e 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin divider($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-divider');
 
     $variant: map.get($theme, '_meta', 'theme');
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss
index de98af72230..c8adb9e0b5a 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin dock-manager($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igc-dockmanager');
 }
 
 /// Adds typography styles for the dock manager component.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss
index c5ce992bdc3..991209278e4 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin drop-down($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, '.igx-drop-down__list, .igx-grid-toolbar__dd-list');
     $variant: map.get($theme, '_meta', 'theme');
 
     %igx-drop-down {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss
index 3fb86209dbe..b8c635aa5c1 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss
@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin expansion-panel($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-expansion-panel');
     $variant: map.get($theme, '_meta', 'theme');
 
     $panel-padding: rem(16px) rem(24px);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss
index 82a0e5827fc..716d32d1ffc 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin grid-summary($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, '.igx-grid-summary');
 
     $variant: map.get($theme, '_meta', 'theme');
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
index dcc63f3d22c..d22d4a0ef0a 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin grid-toolbar($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-grid-toolbar, .igx-grid-toolbar__dd-list');
 
     $variant: map.get($theme, '_meta', 'theme');
     $bootstrap-theme: $variant == 'bootstrap';
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
index 5fa49fb5c1b..5a9f09f3409 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -18,7 +18,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 /// @requires {mixin} excel-filtering
 @mixin grid($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-grid, igx-hierarchical-grid, igx-pivot-grid, igx-tree-grid, igx-advanced-filtering-dialog, igx-grid-excel-style-filtering, .igx-excel-filter__secondary');
 
     @include scale-in-ver-center();
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss
index 29747c382f8..24389731a1d 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss
@@ -35,7 +35,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin pivot-data-selector($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-pivot-data-selector');
     $variant: map.get($theme, '_meta', 'theme');
 
     $chip-height-material: (
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss
index c4a1a7235a5..3bc86edc412 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin highlight($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, '.igx-highlight');
 
     %igx-highlight {
         color: var-get($theme, 'resting-color');
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss
index 7e4a6f9c081..f694a84112f 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss
@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin icon($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-icon');
 
     $size: var-get($theme, 'size');
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss
index e6de04e38e1..c722e7a819c 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss
@@ -51,11 +51,8 @@
     $file-selector-button-foreground--disabled: null,
 ) {
     $name: 'igx-file-input';
-
-    // the variable are scoped to the selector so no other input except the file type will have them.
-    $selector: '.igx-file-input';
-
     $file-input-schema: ();
+
     @if map.has-key($schema, 'file-input') {
         $file-input-schema: map.get($schema, 'file-input');
     } @else {
@@ -68,7 +65,6 @@
         $theme,
         (
             name: $name,
-            selector: $selector,
             file-names-background: $file-names-background,
             file-names-background--focused: $file-names-background--focused,
             file-names-background--filled: $file-names-background--filled,
@@ -94,7 +90,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin file-input($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, '.igx-file-input');
     $variant: map.get($theme, '_meta', 'theme');
 
     %file-names {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
index 66643c96e65..9fa4a79603a 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
@@ -8,7 +8,7 @@
 @mixin input-group($theme) {
     // The --variant CSS produced by css-vars is needed also
     // when dynamically switching between the input `type` attribute.
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-input-group, igx-date-range-start, igx-date-range-end');
 
     $variant: map.get($theme, '_meta', 'theme');
     $transition-timing: .25s $out-cubic;
@@ -687,7 +687,7 @@
             %form-group-prefix:not(:first-child) {
                 border-inline-start-color: var-get($theme, 'warning-secondary-color');
             }
-    
+
             %form-group-suffix:not(:last-child) {
                 border-inline-end-color: var-get($theme, 'warning-secondary-color');
             }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss
index d03ce8b1394..99ac7c9c939 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss
@@ -8,7 +8,7 @@
 @mixin label($theme) {
     // The --variant CSS produced by css-vars is needed also
     // when dynamically switching between the input `type` attribute.
-    @include css-vars($theme);
+    @include css-vars($theme, '[igxLabel]');
 
     $variant: map.get($theme, '_meta', 'theme');
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
index c439845c70d..1f4eda528e9 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin list($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-list');
 
     $variant: map.get($theme, '_meta', 'theme');
     $bootstrap-theme: $variant == 'bootstrap';
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss
index 92a400fc0f5..568516cefee 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss
@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin navbar($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-navbar');
     $variant: map.get($theme, '_meta', 'theme');
 
     $navbar-padding: rem(16px);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss
index 520ac50fb9f..51be2ef5f7b 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss
@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin navdrawer($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-nav-drawer');
 
     $variant: map.get($theme, '_meta', 'theme');
     $drawer-icon-size: rem(24px);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss
index d7371ca5d7f..24027f0d3fc 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss
@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin overlay($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, '.igx-overlay__wrapper--modal, .igx-overlay__content--modal');
 
     %overlay-display {
         width: 0;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss
index 5aeb1c6ed8b..e25f6e678bb 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin paginator($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-paginator');
 
     $variant: map.get($theme, '_meta', 'theme');
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss
index 2bb1e436c07..fcad5269dc3 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss
@@ -9,7 +9,7 @@
     // Include rotate animation
     @include rotate-center();
 
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-circular-bar');
 
     $animation-direction: normal;
     $animation-direction-rtl: reverse;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss
index b5e78dcea58..8be3e00f3a0 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss
@@ -52,7 +52,7 @@ $easing-curves: (
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin progress-linear($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-linear-bar');
 
     $variant: map.get($theme, '_meta', 'theme');
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss
index a42f411d365..836a2bd2255 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss
@@ -12,7 +12,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The grid theme used to style the component.
 @mixin query-builder($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-query-builder');
 
     $variant: map.get($theme, '_meta', 'theme');
     $theme-variant: map.get($theme, '_meta', 'variant');
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss
index 0edfd40c513..499757b6378 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss
@@ -7,7 +7,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin radio($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-radio');
     @include scale-in-out($start-scale: .9);
 
     $theme-variant: map.get($theme, '_meta', 'variant');
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/rating/_rating-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/rating/_rating-theme.scss
index 75d950e3799..3246ed17ecf 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/rating/_rating-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/rating/_rating-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin rating($theme) {
-    @include css-vars($theme: $theme);
+    @include css-vars($theme, 'igc-rating');
 
     igc-rating::part(label) {
         color: var-get($theme, 'label-color');
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss
index 79800283214..6714a83f05c 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin ripple($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, '[igxRipple]');
 
     %igx-ripple-display {
         display: block;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss
index 9e9adbb6a68..653f3a5e829 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss
@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin scrollbar($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, '.ig-scrollbar');
 
     %scrollbar-display {
         // The @-moz-document rule is specifically for Firefox because it does not support the WebKit pseudo-selectors for scrollbar styling.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss
index 388d18940f6..d7286815cfe 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin select($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-select');
     $variant: map.get($theme, '_meta', 'theme');
 
     %igx-select {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss
index 64de031b2ec..88e5d624974 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss
@@ -7,7 +7,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin slider($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-slider');
 
     $variant: map.get($theme, '_meta', 'theme');
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss
index 24a89523f5a..b67815bdf26 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss
@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin snackbar($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-snackbar');
     @include fade-in();
 
     $variant: map.get($theme, '_meta', 'theme');
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
index b45a2f5b4a0..1dc170aff65 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
@@ -7,7 +7,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin splitter($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-splitter');
     $splitter-color: var-get($theme, 'bar-color');
     $hitbox-size: rem(4px);
     $debug-hitbox: false;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
index 329de693b52..73a0295ee53 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin stepper($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-stepper');
 
     $variant: map.get($theme, '_meta', 'theme');
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss
index 5f2285a090c..0b319ee3976 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss
@@ -7,7 +7,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin switch($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-switch');
     @include scale-in-out($start-scale: .9);
 
     $variant: map.get($theme, '_meta', 'theme');
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
index 8b47cbb75b4..e0dc53fded4 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
@@ -11,7 +11,7 @@
 /// @requires ripple-theme
 /// @requires {mixin} ripple
 @mixin tabs($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-tabs');
 
     $variant: map.get($theme, '_meta', 'theme');
     $not-bootstrap-theme: $variant != 'bootstrap';
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss
index 9a661698792..df5c52ac399 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin time-picker($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, '.igx-time-picker');
 
     $variant: map.get($theme, '_meta', 'theme');
     $not-bootstrap-theme: $variant != 'bootstrap';
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss
index 415a9360d88..57888eb6a86 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss
@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin toast($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-toast');
 
     $variant: map.get($theme, '_meta', 'theme');
     $width: rem(52px);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss
index 2af405f6499..5638bef1d0f 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin tooltip($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, '.igx-tooltip');
     $variant: map.get($theme, '_meta', 'theme');
 
     $transparent-border: rem(4px) solid transparent;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss
index 6d4550ba331..f4025595796 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin tree($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-tree-node');
 
     $variant: map.get($theme, '_meta', 'theme');
     $indigo-theme: $variant == 'indigo';
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss
index 8d11269ab0e..774c2a07322 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss
@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin watermark($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igc-trial-watermark');
 
     igc-trial-watermark::part(link) {
         font-family: var(--ig-font-family);
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
index 68864a64e13..69a57df7335 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
@@ -8,6 +8,7 @@
 // Used to configure color accessibility for charts
 @use 'igniteui-theming/sass/color/functions' as color;
 @use 'igniteui-theming/sass/themes/mixins' as theming;
+@use 'igniteui-theming/sass/themes/components' as themes;
 
 // Common components
 @use '../components/_common/igx-control';
@@ -91,6 +92,7 @@
     $enhanced-accessibility: false
 ) {
     @include color.configure-colors($enhanced-accessibility);
+    // @include themes.configure-prefix('igx');
 
     // Angular hack for binding to [hidden] property
     // not working
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
index f3495057e4a..07df64e4335 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
@@ -743,7 +743,7 @@
         @include tree($tree-theme-map);
     }
 
-    @if is-used('igx-watermark', $exclude) {
+    @if is-used('igc-trial-watermark', $exclude) {
         $watermark-theme-map: watermark-theme(
             $schema: $schema,
         );