From 172639ef5e29adcac81cd7bf95e634682b83cb99 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Wed, 1 Oct 2025 15:29:04 +0300
Subject: [PATCH 1/6] fix(themes): angular element styles don't work

Scope the CSS variables to a dynamic selector based on the prefix
metadata stored in the component theme schema.
---
 package-lock.json                             |  8 +--
 package.json                                  |  2 +-
 .../src/themes/_util.scss                     | 55 ++++++++++++++-----
 projects/igniteui-angular/package.json        |  2 +-
 .../src/lib/core/styles/base/_functions.scss  |  9 +++
 .../components/avatar/_avatar-theme.scss      |  7 ++-
 .../styles/components/badge/_badge-theme.scss |  7 ++-
 .../components/banner/_banner-theme.scss      |  9 ++-
 .../bottom-nav/_bottom-nav-theme.scss         |  7 ++-
 .../button-group/_button-group-theme.scss     |  7 ++-
 .../components/calendar/_calendar-theme.scss  | 11 +++-
 .../styles/components/card/_card-theme.scss   |  8 ++-
 .../components/carousel/_carousel-theme.scss  |  6 +-
 .../components/checkbox/_checkbox-theme.scss  |  7 ++-
 .../styles/components/chip/_chip-theme.scss   |  8 ++-
 .../column-actions/_column-actions-theme.scss |  6 +-
 .../styles/components/combo/_combo-theme.scss |  7 ++-
 .../date-picker/_date-picker-theme.scss       |  2 -
 .../_date-range-picker-theme.scss             |  7 ++-
 .../components/divider/_divider-theme.scss    |  6 +-
 .../_expansion-panel-theme.scss               |  7 ++-
 .../grid-toolbar/_grid-toolbar-theme.scss     |  8 ++-
 .../grid/_excel-filtering-theme.scss          |  2 -
 .../styles/components/grid/_grid-theme.scss   | 17 +++++-
 .../grid/_pivot-data-selector-theme.scss      |  8 ++-
 .../styles/components/icon/_icon-theme.scss   |  7 ++-
 .../components/input/_input-group-theme.scss  | 15 +++--
 .../styles/components/list/_list-theme.scss   |  7 ++-
 .../components/navbar/_navbar-theme.scss      |  7 ++-
 .../navdrawer/_navdrawer-theme.scss           |  7 ++-
 .../paginator/_paginator-theme.scss           |  7 ++-
 .../progress/circular/_circular-theme.scss    |  7 ++-
 .../progress/linear/_linear-theme.scss        |  7 ++-
 .../query-builder/_query-builder-theme.scss   |  7 ++-
 .../styles/components/radio/_radio-theme.scss |  7 ++-
 .../components/select/_select-theme.scss      |  7 ++-
 .../components/slider/_slider-theme.scss      |  7 ++-
 .../components/snackbar/_snackbar-theme.scss  |  6 +-
 .../components/splitter/_splitter-theme.scss  |  7 ++-
 .../components/stepper/_stepper-theme.scss    |  7 ++-
 .../components/switch/_switch-theme.scss      |  7 ++-
 .../styles/components/tabs/_tabs-theme.scss   |  7 ++-
 .../styles/components/toast/_toast-theme.scss |  7 ++-
 .../styles/components/tree/_tree-theme.scss   |  7 ++-
 .../src/lib/core/styles/themes/_core.scss     |  5 +-
 45 files changed, 299 insertions(+), 69 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 138f3c08f7c..7d0fe746293 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": "^20.0.0",
+        "igniteui-theming": "^21.0.0-beta.1",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
         "rxjs": "^7.8.2",
@@ -13688,9 +13688,9 @@
       }
     },
     "node_modules/igniteui-theming": {
-      "version": "20.0.0",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-20.0.0.tgz",
-      "integrity": "sha512-g+pxAskmX1g0wlwaO0MPcT8sMTbr3rzSEOJRWg26FBKcVE09cxPEbX2Vl9k7LdbBc5VdDoiAgsI9yvZhAUM0Xg==",
+      "version": "21.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-21.0.0-beta.1.tgz",
+      "integrity": "sha512-0/sGpCRU9B2/W+6EpUmQwCv+vhFg/ZG6Udlqby20Rszy8aeOxQ6kNNcFCc+/7luPQpRbCrXcDJQe2U0N0895vA==",
       "license": "MIT"
     },
     "node_modules/igniteui-trial-watermark": {
diff --git a/package.json b/package.json
index db833f8676f..8523ab6e964 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": "^20.0.0",
+    "igniteui-theming": "^21.0.0-beta.1",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",
diff --git a/projects/igniteui-angular-elements/src/themes/_util.scss b/projects/igniteui-angular-elements/src/themes/_util.scss
index 78b723451de..50eec838297 100644
--- a/projects/igniteui-angular-elements/src/themes/_util.scss
+++ b/projects/igniteui-angular-elements/src/themes/_util.scss
@@ -29,9 +29,9 @@ $elements-selector-prefix: 'igc';
     $prefix: 'ig';
     $result: $theme_schema;
 
-    @if map.has-key($theme_schema, "name") {
-        $name: map.get($theme_schema, "name");
-        $selector: map.get($theme_schema, "selector") or $name;
+    @if map.has-key($theme_schema, 'name') {
+        $name: map.get($theme_schema, 'name');
+        $element-prefix: map.get($theme_schema, '_meta', 'element-prefix');
         $modified: ();
 
         // @debug "name: #{$name}";
@@ -40,29 +40,54 @@ $elements-selector-prefix: 'igc';
             $name: list.nth(string.split($name, 'igx-'), -1);
             $name: '#{$elements-var-prefix}-#{$name}';
             // @debug "name after: #{$name}";
-            $modified: map.merge($modified, (name: $name));
+            $modified: map.merge(
+                $modified,
+                (
+                    name: $name,
+                )
+            );
         }
 
         // For exposed components also modify selector with updated element prefix:
-        @if list.index(vars.$allowed, map.get($theme_schema, "name")) {
-            // @debug "selector before: #{$selector}";
-            $selector: updateSelectors($selector);
-            // @debug "selector after: #{$selector}";
+        @if list.index(vars.$allowed, map.get($theme_schema, 'name')) {
+            // @debug "selector before: #{$element-prefix}";
+            $element-prefix: $elements-selector-prefix;
+            // @debug "selector after: #{$element-prefix}";
         }
 
-        $modified: map.merge($modified, (selector: $selector));
+        $modified: map.merge(
+            $modified,
+            (
+                _meta: map.merge(
+                    map.get($theme_schema, '_meta'),
+                    (
+                        'element-prefix': $element-prefix,
+                    )
+                ),
+            )
+        );
 
         @if map.has-key($theme_schema, 'themes') {
             $themes: map.get($theme_schema, 'themes');
             $newThemes: ();
             @each $name, $sub_schema in $themes {
-                $newThemes: map.set($newThemes, $name, updateElementName($sub_schema));
+                $newThemes: map.set(
+                    $newThemes,
+                    $name,
+                    updateElementName($sub_schema)
+                );
             }
-            $modified: map.merge($modified, (themes: $newThemes));
+            $modified: map.merge(
+                $modified,
+                (
+                    themes: $newThemes,
+                )
+            );
         }
 
         $result: map.merge($result, $modified);
     }
+
     @return $result;
 }
 
@@ -72,9 +97,9 @@ $elements-selector-prefix: 'igc';
 /// @return {String} - Updated selector(s) with `igc-` prefixed equivalents
 @function updateSelectors($selector) {
     $result: ();
-    $selectors: string.split($selector, ", ");
+    // $selectors: string.split($selector, ", ");
 
-    @each $sel in $selectors {
+    @each $sel in $selector {
         $result: list.append($result, $sel, comma);
 
         @if string.index($sel, 'igx-') == 1 {
@@ -84,7 +109,7 @@ $elements-selector-prefix: 'igc';
         }
     }
 
-    @return "#{$result}";
+    @return '#{$result}';
 }
 
 /// Generates an Ignite UI for Angular Elements global theme.
@@ -109,6 +134,6 @@ $elements-selector-prefix: 'igc';
         $palette: $palette,
         $exclude: $exclude,
         $schema: $schema,
-        $theme-handler: meta.get-function("updateElementName")
+        $theme-handler: meta.get-function('updateElementName')
     );
 }
diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json
index 894e9f0a680..756341d06c7 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": "^20.0.0",
+        "igniteui-theming": "^21.0.0-beta.1",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {
diff --git a/projects/igniteui-angular/src/lib/core/styles/base/_functions.scss b/projects/igniteui-angular/src/lib/core/styles/base/_functions.scss
index e15608cb283..40d69cded2c 100644
--- a/projects/igniteui-angular/src/lib/core/styles/base/_functions.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/base/_functions.scss
@@ -63,3 +63,12 @@
     }
     @return $items;
 }
+
+/// Prefixes a CSS selector with the given string.
+/// @access private
+/// @param {String} $prefix - The prefix to add.
+/// @param {String} $selector - The selector to be prefixed.
+/// @return {String} - The prefixed selector.
+@function prefix-selector($prefix, $selector) {
+    @return string.insert($selector, #{$prefix}-, 1);
+}
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 eb7e5faecc7..6eb2509d6ef 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin avatar($theme) {
-    @include css-vars($theme, 'igx-avatar');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'avatar'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     $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 02a91673ef0..5df5d71377d 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin badge($theme) {
-    @include css-vars($theme, 'igx-badge');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'badge'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     $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 85eab0cc400..2d792a25f91 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,14 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin banner($theme) {
-    @include css-vars($theme, 'igx-banner, .igx-banner');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'banner'),
+        #{'.' + prefix-selector($prefix, 'banner')},
+    );
+
+
+    @include css-vars($theme, $selectors);
     $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 ab862411b98..69abbe51389 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin bottom-nav($theme) {
-    @include css-vars($theme, 'igx-bottom-nav');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'bottom-nav'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     $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 38959c2b0af..9b7b346e21d 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin button-group($theme) {
-    @include css-vars($theme, 'igx-buttongroup');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'buttongroup'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     $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 e1dcfd33250..0d6e2b514ac 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,16 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin calendar($theme) {
-    @include css-vars($theme, 'igx-calendar, .igx-days-view--standalone, .igx-calendar-view--standalone, .igx-date-picker, .igx-month-picker');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'calendar'),
+        '.igx-days-view--standalone',
+        '.igx-calendar-view--standalone',
+        '.igx-date-picker',
+        '.igx-month-picker',
+    );
+
+    @include css-vars($theme, $selectors);
 
     $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 dd3256888a9..d98f60b0181 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,11 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin card($theme) {
-    @include css-vars($theme, 'igx-card');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'card'),
+    );
+    @include css-vars($theme, $selectors);
     $variant: map.get($theme, '_meta', 'theme');
     $not-material-theme: $variant != 'material';
 
@@ -30,7 +34,7 @@
             box-shadow: none;
         }
 
-        igx-avatar {
+        > igx-avatar {
             --ig-size: #{if($variant == 'indigo', 3, 1)};
         }
     }
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 47a43cf5d0a..ad512e290b5 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,11 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin carousel($theme) {
-    @include css-vars($theme, 'igx-carousel');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'carousel'),
+    );
+    @include css-vars($theme, $selectors);
     @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 65dbc507c8f..a5516da98b7 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin checkbox($theme) {
-    @include css-vars($theme, 'igx-checkbox');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'checkbox'),
+    );
+
+    @include css-vars($theme, $selectors);
     $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 9eca06c9e60..99db222bcd0 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,13 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin chip($theme) {
-    @include css-vars($theme, 'igx-chip, .igx-chip__ghost');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'chip'),
+        '.igx-chip__ghost'
+    );
+
+    @include css-vars($theme, $selectors);
     $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 e232e7576fd..900d712fd63 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,11 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin column-actions($theme) {
-    @include css-vars($theme, 'igx-column-actions');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'column-actions'),
+    );
+    @include css-vars($theme, $selectors);
     $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 c247a6c3fff..6c2054bf91a 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin combo($theme) {
-    @include css-vars($theme, 'igx-combo, igx-simple-combo');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'combo'),
+        prefix-selector($prefix, 'simple-combo'),
+    );
+    @include css-vars($theme, $selectors);
 
     $variant: map.get($theme, '_meta', 'theme');
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss
index f7dc255abdb..eb19924ebd4 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss
@@ -9,8 +9,6 @@
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
 ////
 
-/// @deprecated Use the `css-vars` mixin instead.
-/// @see {mixin} css-vars
 /// @param {Map} $theme - The calendar theme used to style the component.
 @mixin date-picker($theme) {
     $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 84ce5c56f44..6a631950ce0 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin date-range-picker($theme) {
-    @include css-vars($theme, 'igx-date-range-picker');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'date-range-picker'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     %igx-date-range-picker {
         display: flex;
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 c0b2a736f4e..0bf6f14e2b1 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,11 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin divider($theme) {
-    @include css-vars($theme, 'igx-divider');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'divider'),
+    );
+    @include css-vars($theme, $selectors);
 
     $variant: map.get($theme, '_meta', 'theme');
 
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 20797fb7f57..78fe67521b2 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin expansion-panel($theme) {
-    @include css-vars($theme, 'igx-expansion-panel');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'expansion-panel'),
+    );
+
+    @include css-vars($theme, $selectors);
     $variant: map.get($theme, '_meta', 'theme');
 
     $panel-padding: pad-block(rem(16px)) pad-inline(rem(24px));
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 d22d4a0ef0a..ec80fde4390 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,13 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin grid-toolbar($theme) {
-    @include css-vars($theme, 'igx-grid-toolbar, .igx-grid-toolbar__dd-list');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'grid-toolbar'),
+        '.igx-grid-toolbar__dd-list'
+    );
+
+    @include css-vars($theme, $selectors);
 
     $variant: map.get($theme, '_meta', 'theme');
     $bootstrap-theme: $variant == 'bootstrap';
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
index 8ef846b74bd..00477636f4e 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
@@ -11,8 +11,6 @@
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
 ////
 
-/// @deprecated Use the `css-vars` mixin instead.
-/// @see {mixin} css-vars
 /// @param {Map} $theme - The grid theme used to style the component.
 @mixin excel-filtering($theme) {
     $variant: map.get($theme, '_meta', 'variant');
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 9d2b40109e8..a6cc6a30791 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,8 +18,23 @@
 /// @param {Map} $theme - The theme used to style the component.
 /// @requires {mixin} excel-filtering
 @mixin grid($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');
+    // We do this primarily for the benefit of Angular Elements.
+    // The element selector prefix (igx) is replaced with igc for Elements.
+    // The prefix is configured during the build step for Element styles.
+    // The prefix is otherwise configured in the core mixin by theming.configure-prefix('igx');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+
+    $selectors: (
+        prefix-selector($prefix, 'grid'),
+        prefix-selector($prefix, 'hierarchical-grid'),
+        prefix-selector($prefix, 'pivot-grid'),
+        prefix-selector($prefix, 'tree-grid'),
+        prefix-selector($prefix, 'advanced-filtering-dialog'),
+        prefix-selector($prefix, 'grid-excel-style-filtering'),
+        '.igx_excel-filter__secondary'
+    );
 
+    @include css-vars($theme, $selectors);
     @include scale-in-ver-center();
 
     $variant: map.get($theme, '_meta', 'theme');
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 24389731a1d..c00917f317c 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,13 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin pivot-data-selector($theme) {
-    @include css-vars($theme, 'igx-pivot-data-selector');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'pivot-data-selector'),
+    );
+
+    @include css-vars($theme, $selectors);
+
     $variant: map.get($theme, '_meta', 'theme');
 
     $chip-height-material: (
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 f694a84112f..6035fe22e27 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin icon($theme) {
-    @include css-vars($theme, 'igx-icon');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'icon'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     $size: var-get($theme, 'size');
 
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 b4e35a6ec5e..aab51448168 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
@@ -6,10 +6,17 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin input-group($theme) {
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'input-group'),
+        prefix-selector($prefix, 'date-range-start'),
+        prefix-selector($prefix, 'date-range-end'),
+    );
+
+    @include css-vars($theme, $selectors);
+
     // The --variant CSS produced by css-vars is needed also
     // when dynamically switching between the input `type` attribute.
-    @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;
     $material-theme: $variant == 'material';
@@ -323,7 +330,7 @@
                 box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'border-color');
             }
         }
-        
+
         &%form-group-display--box:not(%form-group-display--disabled) {
             %form-group-bundle {
                 background: var-get($theme, 'box-background-focus');
@@ -1958,7 +1965,7 @@
         }
     }
 
-    %form-group-display--invalid:not(%form-group-display--readonly), 
+    %form-group-display--invalid:not(%form-group-display--readonly),
     %form-group-display--invalid%form-group-display--file {
         @if $variant != 'indigo' {
             %form-group-label--error,
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 1f4eda528e9..67bf11d47ef 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin list($theme) {
-    @include css-vars($theme, 'igx-list');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'list'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     $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 7be6c74e7ca..4733d2fcf70 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin navbar($theme) {
-    @include css-vars($theme, 'igx-navbar');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'navbar'),
+    );
+
+    @include css-vars($theme, $selectors);
     $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 f163450bd97..15616aeac5b 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin navdrawer($theme) {
-    @include css-vars($theme, 'igx-nav-drawer');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'nav-drawer'),
+    );
+
+   @include css-vars($theme, $selectors);
 
     $variant: map.get($theme, '_meta', 'theme');
     $drawer-icon-size: rem(24px);
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 e25f6e678bb..35069601d01 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin paginator($theme) {
-    @include css-vars($theme, 'igx-paginator');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'paginator'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     $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 fcad5269dc3..c6fb2c26d10 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,12 @@
     // Include rotate animation
     @include rotate-center();
 
-    @include css-vars($theme, 'igx-circular-bar');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'circular-bar'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     $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 8be3e00f3a0..5e455f32126 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,12 @@ $easing-curves: (
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin progress-linear($theme) {
-    @include css-vars($theme, 'igx-linear-bar');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'linear-bar'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     $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 836a2bd2255..b5568a225f1 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The grid theme used to style the component.
 @mixin query-builder($theme) {
-    @include css-vars($theme, 'igx-query-builder');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'query-builder'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     $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 499757b6378..0408efd0970 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin radio($theme) {
-    @include css-vars($theme, 'igx-radio');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'radio'),
+    );
+
+    @include css-vars($theme, $selectors);
     @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/select/_select-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss
index be3cc7086e3..609fe02a464 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin select($theme) {
-    @include css-vars($theme, 'igx-select');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'select'),
+    );
+
+    @include css-vars($theme, $selectors);
     $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 88e5d624974..0cecd771aa0 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin slider($theme) {
-    @include css-vars($theme, 'igx-slider');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'slider'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     $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 2650063cb64..269d5686c96 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,11 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin snackbar($theme) {
-    @include css-vars($theme, 'igx-snackbar');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'snackbar'),
+    );
+    @include css-vars($theme, $selectors);
     @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 1dc170aff65..65ba7dae826 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin splitter($theme) {
-    @include css-vars($theme, 'igx-splitter');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'splitter'),
+    );
+
+    @include css-vars($theme, $selectors);
     $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 73a0295ee53..615c457ee72 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin stepper($theme) {
-    @include css-vars($theme, 'igx-stepper');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'stepper'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     $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 0b319ee3976..735856fab80 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin switch($theme) {
-    @include css-vars($theme, 'igx-switch');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'switch'),
+    );
+
+    @include css-vars($theme, $selectors);
     @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 93506cf22be..4d90d1b4486 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,12 @@
 /// @requires ripple-theme
 /// @requires {mixin} ripple
 @mixin tabs($theme) {
-    @include css-vars($theme, 'igx-tabs');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'tabs'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     $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 158839435b2..9b9fc7ae1b9 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin toast($theme) {
-    @include css-vars($theme, 'igx-toast');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'toast'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     $variant: map.get($theme, '_meta', 'theme');
     $width: rem(52px);
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 f4025595796..7b5fd7cf797 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,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin tree($theme) {
-    @include css-vars($theme, 'igx-tree-node');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'tree-node'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     $variant: map.get($theme, '_meta', 'theme');
     $indigo-theme: $variant == 'indigo';
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 4954d18cfbc..9918f4eab2d 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
@@ -7,8 +7,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;
+@use 'igniteui-theming/sass/themes' as theming;
 
 // Common components
 @use '../components/_common/igx-control';
@@ -92,7 +91,7 @@
     $enhanced-accessibility: false
 ) {
     @include color.configure-colors($enhanced-accessibility);
-    @include themes.configure-prefix('igx');
+    @include theming.configure-prefix('igx');
 
     // Angular hack for binding to [hidden] property
     // not working

From 6d449955b49612b58478fce72c7f42043bbbffb3 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Thu, 2 Oct 2025 14:11:50 +0300
Subject: [PATCH 2/6] refactor(themes): update theming with igx set as default
 prefix

---
 package-lock.json                                         | 8 ++++----
 package.json                                              | 2 +-
 projects/igniteui-angular/package.json                    | 2 +-
 .../src/lib/core/styles/themes/_core.scss                 | 1 -
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7d0fe746293..8981ad70ff7 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": "^21.0.0-beta.1",
+        "igniteui-theming": "^21.0.0-beta.2",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
         "rxjs": "^7.8.2",
@@ -13688,9 +13688,9 @@
       }
     },
     "node_modules/igniteui-theming": {
-      "version": "21.0.0-beta.1",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-21.0.0-beta.1.tgz",
-      "integrity": "sha512-0/sGpCRU9B2/W+6EpUmQwCv+vhFg/ZG6Udlqby20Rszy8aeOxQ6kNNcFCc+/7luPQpRbCrXcDJQe2U0N0895vA==",
+      "version": "21.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-21.0.0-beta.2.tgz",
+      "integrity": "sha512-rn9rz3UMz+j0qjQz+rx7pHQJtnWbASN1TEkLUehnKzBuN8Q3IL1581sNu/VC/F69FNd7VRTMsDIeStDZubEbYQ==",
       "license": "MIT"
     },
     "node_modules/igniteui-trial-watermark": {
diff --git a/package.json b/package.json
index 8523ab6e964..84f17965e56 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": "^21.0.0-beta.1",
+    "igniteui-theming": "^21.0.0-beta.2",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",
diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json
index 756341d06c7..de4ede813e7 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": "^21.0.0-beta.1",
+        "igniteui-theming": "^21.0.0-beta.2",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {
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 9918f4eab2d..894b2b030e0 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
@@ -91,7 +91,6 @@
     $enhanced-accessibility: false
 ) {
     @include color.configure-colors($enhanced-accessibility);
-    @include theming.configure-prefix('igx');
 
     // Angular hack for binding to [hidden] property
     // not working

From cddb9a86aa916f44bfa2a9bb41fed564c6fd372a Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Thu, 2 Oct 2025 17:56:14 +0300
Subject: [PATCH 3/6] refactor(*): depend on element selector being present in
 theming package

---
 package-lock.json                             |  8 +--
 package.json                                  |  2 +-
 .../src/themes/_util.scss                     | 52 +++++--------------
 projects/igniteui-angular/package.json        |  2 +-
 .../src/lib/core/styles/base/_functions.scss  |  9 ----
 .../components/avatar/_avatar-theme.scss      |  7 +--
 .../styles/components/badge/_badge-theme.scss |  7 +--
 .../components/banner/_banner-theme.scss      |  9 +---
 .../bottom-nav/_bottom-nav-theme.scss         |  7 +--
 .../button-group/_button-group-theme.scss     |  7 +--
 .../components/calendar/_calendar-theme.scss  | 11 +---
 .../styles/components/card/_card-theme.scss   |  6 +--
 .../components/carousel/_carousel-theme.scss  |  6 +--
 .../components/checkbox/_checkbox-theme.scss  |  7 +--
 .../styles/components/chip/_chip-theme.scss   |  8 +--
 .../column-actions/_column-actions-theme.scss |  6 +--
 .../styles/components/combo/_combo-theme.scss |  7 +--
 .../_date-range-picker-theme.scss             |  7 +--
 .../components/divider/_divider-theme.scss    |  6 +--
 .../dock-manager/_dock-manager-theme.scss     |  2 +-
 .../_expansion-panel-theme.scss               |  7 +--
 .../grid-toolbar/_grid-toolbar-theme.scss     |  8 +--
 .../styles/components/grid/_grid-theme.scss   | 18 +------
 .../grid/_pivot-data-selector-theme.scss      |  8 +--
 .../styles/components/icon/_icon-theme.scss   |  7 +--
 .../components/input/_input-group-theme.scss  |  9 +---
 .../styles/components/list/_list-theme.scss   |  7 +--
 .../components/navbar/_navbar-theme.scss      |  7 +--
 .../navdrawer/_navdrawer-theme.scss           |  7 +--
 .../paginator/_paginator-theme.scss           |  7 +--
 .../progress/circular/_circular-theme.scss    |  8 +--
 .../progress/linear/_linear-theme.scss        |  7 +--
 .../query-builder/_query-builder-theme.scss   |  7 +--
 .../styles/components/radio/_radio-theme.scss |  7 +--
 .../components/select/_select-theme.scss      |  7 +--
 .../components/slider/_slider-theme.scss      |  7 +--
 .../components/snackbar/_snackbar-theme.scss  |  6 +--
 .../components/splitter/_splitter-theme.scss  |  7 +--
 .../components/stepper/_stepper-theme.scss    |  7 +--
 .../components/switch/_switch-theme.scss      |  7 +--
 .../styles/components/tabs/_tabs-theme.scss   |  7 +--
 .../styles/components/toast/_toast-theme.scss |  7 +--
 .../styles/components/tree/_tree-theme.scss   |  7 +--
 43 files changed, 58 insertions(+), 294 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8981ad70ff7..0049674f8c9 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": "^21.0.0-beta.2",
+        "igniteui-theming": "^21.0.0-beta.3",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
         "rxjs": "^7.8.2",
@@ -13688,9 +13688,9 @@
       }
     },
     "node_modules/igniteui-theming": {
-      "version": "21.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-21.0.0-beta.2.tgz",
-      "integrity": "sha512-rn9rz3UMz+j0qjQz+rx7pHQJtnWbASN1TEkLUehnKzBuN8Q3IL1581sNu/VC/F69FNd7VRTMsDIeStDZubEbYQ==",
+      "version": "21.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-21.0.0-beta.3.tgz",
+      "integrity": "sha512-JG5cFnAgHXTy5dHEjdNKpkv4I4cSFJJ/Obcakhy1Lj7+LYyiekwAUc+f7EBAokubUuKgFTHu6TvfqBAsbR3Fsw==",
       "license": "MIT"
     },
     "node_modules/igniteui-trial-watermark": {
diff --git a/package.json b/package.json
index 84f17965e56..94351fa846f 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": "^21.0.0-beta.2",
+    "igniteui-theming": "^21.0.0-beta.3",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",
diff --git a/projects/igniteui-angular-elements/src/themes/_util.scss b/projects/igniteui-angular-elements/src/themes/_util.scss
index 50eec838297..8668c7dfd4f 100644
--- a/projects/igniteui-angular-elements/src/themes/_util.scss
+++ b/projects/igniteui-angular-elements/src/themes/_util.scss
@@ -29,9 +29,9 @@ $elements-selector-prefix: 'igc';
     $prefix: 'ig';
     $result: $theme_schema;
 
-    @if map.has-key($theme_schema, 'name') {
-        $name: map.get($theme_schema, 'name');
-        $element-prefix: map.get($theme_schema, '_meta', 'element-prefix');
+    @if map.has-key($theme_schema, "name") {
+        $name: map.get($theme_schema, "name");
+        $selector: map.get($theme_schema, "selector") or $name;
         $modified: ();
 
         // @debug "name: #{$name}";
@@ -40,54 +40,29 @@ $elements-selector-prefix: 'igc';
             $name: list.nth(string.split($name, 'igx-'), -1);
             $name: '#{$elements-var-prefix}-#{$name}';
             // @debug "name after: #{$name}";
-            $modified: map.merge(
-                $modified,
-                (
-                    name: $name,
-                )
-            );
+            $modified: map.merge($modified, (name: $name));
         }
 
         // For exposed components also modify selector with updated element prefix:
-        @if list.index(vars.$allowed, map.get($theme_schema, 'name')) {
-            // @debug "selector before: #{$element-prefix}";
-            $element-prefix: $elements-selector-prefix;
-            // @debug "selector after: #{$element-prefix}";
+        @if list.index(vars.$allowed, map.get($theme_schema, "name")) {
+            // @debug "selector before: #{$selector}";
+            $selector: updateSelectors($selector);
+            // @debug "selector after: #{$selector}";
         }
 
-        $modified: map.merge(
-            $modified,
-            (
-                _meta: map.merge(
-                    map.get($theme_schema, '_meta'),
-                    (
-                        'element-prefix': $element-prefix,
-                    )
-                ),
-            )
-        );
+        $modified: map.merge($modified, (selector: $selector));
 
         @if map.has-key($theme_schema, 'themes') {
             $themes: map.get($theme_schema, 'themes');
             $newThemes: ();
             @each $name, $sub_schema in $themes {
-                $newThemes: map.set(
-                    $newThemes,
-                    $name,
-                    updateElementName($sub_schema)
-                );
+                $newThemes: map.set($newThemes, $name, updateElementName($sub_schema));
             }
-            $modified: map.merge(
-                $modified,
-                (
-                    themes: $newThemes,
-                )
-            );
+            $modified: map.merge($modified, (themes: $newThemes));
         }
 
         $result: map.merge($result, $modified);
     }
-
     @return $result;
 }
 
@@ -97,7 +72,6 @@ $elements-selector-prefix: 'igc';
 /// @return {String} - Updated selector(s) with `igc-` prefixed equivalents
 @function updateSelectors($selector) {
     $result: ();
-    // $selectors: string.split($selector, ", ");
 
     @each $sel in $selector {
         $result: list.append($result, $sel, comma);
@@ -109,7 +83,7 @@ $elements-selector-prefix: 'igc';
         }
     }
 
-    @return '#{$result}';
+    @return "#{$result}";
 }
 
 /// Generates an Ignite UI for Angular Elements global theme.
@@ -134,6 +108,6 @@ $elements-selector-prefix: 'igc';
         $palette: $palette,
         $exclude: $exclude,
         $schema: $schema,
-        $theme-handler: meta.get-function('updateElementName')
+        $theme-handler: meta.get-function("updateElementName")
     );
 }
diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json
index de4ede813e7..5e2cdf9c300 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": "^21.0.0-beta.2",
+        "igniteui-theming": "^21.0.0-beta.3",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {
diff --git a/projects/igniteui-angular/src/lib/core/styles/base/_functions.scss b/projects/igniteui-angular/src/lib/core/styles/base/_functions.scss
index 40d69cded2c..e15608cb283 100644
--- a/projects/igniteui-angular/src/lib/core/styles/base/_functions.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/base/_functions.scss
@@ -63,12 +63,3 @@
     }
     @return $items;
 }
-
-/// Prefixes a CSS selector with the given string.
-/// @access private
-/// @param {String} $prefix - The prefix to add.
-/// @param {String} $selector - The selector to be prefixed.
-/// @return {String} - The prefixed selector.
-@function prefix-selector($prefix, $selector) {
-    @return string.insert($selector, #{$prefix}-, 1);
-}
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 6eb2509d6ef..c01b4128d44 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,12 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin avatar($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'avatar'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $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 5df5d71377d..2e82deb4545 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,12 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin badge($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'badge'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $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 2d792a25f91..dfb88eff7af 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,14 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin banner($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'banner'),
-        #{'.' + prefix-selector($prefix, 'banner')},
-    );
-
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
     $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 69abbe51389..6f21583c88e 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,12 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin bottom-nav($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'bottom-nav'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $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 9b7b346e21d..c90c2a31caf 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,12 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin button-group($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'buttongroup'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $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 0d6e2b514ac..14004190d7e 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,16 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin calendar($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'calendar'),
-        '.igx-days-view--standalone',
-        '.igx-calendar-view--standalone',
-        '.igx-date-picker',
-        '.igx-month-picker',
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $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 ad857da24a9..6461f39423d 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,11 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin card($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'card'),
-    );
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
     $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 ad512e290b5..e3b4e109b69 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,11 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin carousel($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'carousel'),
-    );
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
     @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 a5516da98b7..7b4cdd24724 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,12 +7,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin checkbox($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'checkbox'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
     $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 99db222bcd0..e17b34ca090 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,13 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin chip($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'chip'),
-        '.igx-chip__ghost'
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
     $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 900d712fd63..319f935d6b3 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,11 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin column-actions($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'column-actions'),
-    );
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
     $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 6c2054bf91a..1eb5c643103 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,12 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin combo($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'combo'),
-        prefix-selector($prefix, 'simple-combo'),
-    );
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $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 6a631950ce0..5cd16765d30 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,12 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin date-range-picker($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'date-range-picker'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     %igx-date-range-picker {
         display: flex;
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 0bf6f14e2b1..e866e37f92b 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,11 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin divider($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'divider'),
-    );
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $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 c8adb9e0b5a..de98af72230 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, 'igc-dockmanager');
+    @include css-vars($theme);
 }
 
 /// Adds typography styles for the dock manager component.
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 78fe67521b2..fcc8daa06a4 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,12 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin expansion-panel($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'expansion-panel'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
     $variant: map.get($theme, '_meta', 'theme');
 
     $panel-padding: pad-block(rem(16px)) pad-inline(rem(24px));
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 ec80fde4390..dcc63f3d22c 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,13 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin grid-toolbar($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'grid-toolbar'),
-        '.igx-grid-toolbar__dd-list'
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $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 a6cc6a30791..d1f9b070cb3 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,23 +18,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 /// @requires {mixin} excel-filtering
 @mixin grid($theme) {
-    // We do this primarily for the benefit of Angular Elements.
-    // The element selector prefix (igx) is replaced with igc for Elements.
-    // The prefix is configured during the build step for Element styles.
-    // The prefix is otherwise configured in the core mixin by theming.configure-prefix('igx');
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-
-    $selectors: (
-        prefix-selector($prefix, 'grid'),
-        prefix-selector($prefix, 'hierarchical-grid'),
-        prefix-selector($prefix, 'pivot-grid'),
-        prefix-selector($prefix, 'tree-grid'),
-        prefix-selector($prefix, 'advanced-filtering-dialog'),
-        prefix-selector($prefix, 'grid-excel-style-filtering'),
-        '.igx_excel-filter__secondary'
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
     @include scale-in-ver-center();
 
     $variant: map.get($theme, '_meta', 'theme');
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 c00917f317c..6cee7b9a078 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
@@ -28,6 +28,7 @@
 
     @return extend($theme, (
         name: $name,
+        selector: $selector,
     ));
 }
 
@@ -35,12 +36,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin pivot-data-selector($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'pivot-data-selector'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
 
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 6035fe22e27..7e4a6f9c081 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,12 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin icon($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'icon'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $size: var-get($theme, 'size');
 
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 aab51448168..2f84ee71e3d 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
@@ -6,14 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin input-group($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'input-group'),
-        prefix-selector($prefix, 'date-range-start'),
-        prefix-selector($prefix, 'date-range-end'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     // The --variant CSS produced by css-vars is needed also
     // when dynamically switching between the input `type` attribute.
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 67bf11d47ef..c439845c70d 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,12 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin list($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'list'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $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 4733d2fcf70..90bb814dd6d 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,12 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin navbar($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'navbar'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
     $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 15616aeac5b..b3f91966295 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,12 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin navdrawer($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'nav-drawer'),
-    );
-
-   @include css-vars($theme, $selectors);
+   @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
     $drawer-icon-size: rem(24px);
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 35069601d01..5aeb1c6ed8b 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,12 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin paginator($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'paginator'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $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 c6fb2c26d10..17c86b5e262 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
@@ -8,13 +8,7 @@
 @mixin progress-circular($theme) {
     // Include rotate animation
     @include rotate-center();
-
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'circular-bar'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $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 5e455f32126..b5e78dcea58 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,12 +52,7 @@ $easing-curves: (
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin progress-linear($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'linear-bar'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $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 b5568a225f1..a42f411d365 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,12 +12,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The grid theme used to style the component.
 @mixin query-builder($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'query-builder'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $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 0408efd0970..0edfd40c513 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,12 +7,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin radio($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'radio'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
     @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/select/_select-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss
index 609fe02a464..e6c2fa6b836 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,12 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin select($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'select'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
     $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 0cecd771aa0..64de031b2ec 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,12 +7,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin slider($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'slider'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $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 269d5686c96..5a27bbedd05 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,11 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin snackbar($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'snackbar'),
-    );
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
     @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 65ba7dae826..b45a2f5b4a0 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,12 +7,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin splitter($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'splitter'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
     $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 615c457ee72..329de693b52 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,12 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin stepper($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'stepper'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $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 735856fab80..5f2285a090c 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,12 +7,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin switch($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'switch'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
     @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 4d90d1b4486..cf817cbca0c 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,12 +11,7 @@
 /// @requires ripple-theme
 /// @requires {mixin} ripple
 @mixin tabs($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'tabs'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $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 9b9fc7ae1b9..56b553f5b55 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,12 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin toast($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'toast'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
     $width: rem(52px);
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 7b5fd7cf797..6d4550ba331 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,12 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin tree($theme) {
-    $prefix: map.get($theme, '_meta', 'element-prefix');
-    $selectors: (
-        prefix-selector($prefix, 'tree-node'),
-    );
-
-    @include css-vars($theme, $selectors);
+    @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
     $indigo-theme: $variant == 'indigo';

From 031e3a2f5136a43cbcae6e0c5738f9c95200347f Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Mon, 6 Oct 2025 12:26:27 +0300
Subject: [PATCH 4/6] sassdoc(themes): update comments for some themes

---
 .../src/lib/core/styles/components/card/_card-theme.scss | 1 -
 .../components/date-picker/_date-picker-theme.scss       | 9 ++-------
 .../styles/components/grid/_excel-filtering-theme.scss   | 9 ++-------
 .../components/grid/_pivot-data-selector-theme.scss      | 8 ++------
 .../src/lib/core/styles/components/icon/_icon-theme.scss | 2 +-
 .../components/query-builder/_query-builder-theme.scss   | 7 -------
 .../lib/core/styles/components/toast/_toast-theme.scss   | 1 -
 7 files changed, 7 insertions(+), 30 deletions(-)

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 6461f39423d..75a906b039f 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
@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use '../../base' as *;
 
-/// Card Component
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss
index eb19924ebd4..988b39fdde9 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss
@@ -2,13 +2,8 @@
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
 
-////
-/// @group themes
-/// @access public
-/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
-/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
-////
-
+/// @deprecated Use the `css-vars` mixin instead.
+/// @see {mixin} css-vars
 /// @param {Map} $theme - The calendar theme used to style the component.
 @mixin date-picker($theme) {
     $variant: map.get($theme, '_meta', 'theme');
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
index 00477636f4e..44063a0fbaf 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
@@ -4,13 +4,8 @@
 @use '../button-group/button-group-theme' as *;
 @use '../tree/tree-theme' as *;
 
-////
-/// @group themes
-/// @access private
-/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
-/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
-////
-
+/// @deprecated Use the `css-vars` mixin instead.
+/// @see {mixin} css-vars
 /// @param {Map} $theme - The grid theme used to style the component.
 @mixin excel-filtering($theme) {
     $variant: map.get($theme, '_meta', 'variant');
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 6cee7b9a078..25e17d6286b 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
@@ -3,12 +3,8 @@
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
 
-////
-/// @group themes
-/// @access public
-/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
-////
-
+/// @deprecated Use the `css-vars` mixin instead.
+/// @see {mixin} css-vars
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 @function pivot-data-selector-theme(
     $schema: $light-material-schema,
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..c4181a79271 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
@@ -1,7 +1,7 @@
+// stylelint-disable font-family-no-missing-generic-family-keyword
 @use 'sass:map';
 @use '../../base' as *;
 
-// stylelint-disable font-family-no-missing-generic-family-keyword
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
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..4ca1970f5ee 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
@@ -1,13 +1,6 @@
 @use 'sass:map';
 @use '../../base' as *;
 
-////
-/// @group themes
-/// @access private
-/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
-/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
-////
-
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The grid theme used to style the component.
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 56b553f5b55..355afdff3fc 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
@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use '../../base' as *;
 
-/// Toast Component
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.

From 740717c70fef87f4109c7a0e448372d2ffdbea05 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Mon, 6 Oct 2025 12:32:38 +0300
Subject: [PATCH 5/6] deps(theming): bump to latest version

---
 package-lock.json                      | 8 ++++----
 package.json                           | 2 +-
 projects/igniteui-angular/package.json | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0049674f8c9..c43da6fac59 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": "^21.0.0-beta.3",
+        "igniteui-theming": "^21.0.0",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
         "rxjs": "^7.8.2",
@@ -13688,9 +13688,9 @@
       }
     },
     "node_modules/igniteui-theming": {
-      "version": "21.0.0-beta.3",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-21.0.0-beta.3.tgz",
-      "integrity": "sha512-JG5cFnAgHXTy5dHEjdNKpkv4I4cSFJJ/Obcakhy1Lj7+LYyiekwAUc+f7EBAokubUuKgFTHu6TvfqBAsbR3Fsw==",
+      "version": "21.0.0",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-21.0.0.tgz",
+      "integrity": "sha512-8yJi2zPUz0rRS5Ii+cB9pVY52uC1AxNlbl8XhCS7o8O/te+LWJnuz+zZw9dpkSHQP4USf8cp+bfpL7V9psX2FQ==",
       "license": "MIT"
     },
     "node_modules/igniteui-trial-watermark": {
diff --git a/package.json b/package.json
index 94351fa846f..d36487eea1e 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": "^21.0.0-beta.3",
+    "igniteui-theming": "^21.0.0",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",
diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json
index 5e2cdf9c300..ffd5149cc44 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": "^21.0.0-beta.3",
+        "igniteui-theming": "^21.0.0",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {

From d11912a23a3671ad5e5612d08d9254277f7c910b Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Mon, 6 Oct 2025 13:21:00 +0300
Subject: [PATCH 6/6] deps(sassdoc): bump to latest version

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c43da6fac59..f637858911b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -70,7 +70,7 @@
         "hammerjs": "^2.0.8",
         "ig-typedoc-theme": "^6.0.0",
         "igniteui-dockmanager": "^1.17.0",
-        "igniteui-sassdoc-theme": "^2.0.2",
+        "igniteui-sassdoc-theme": "^2.1.0",
         "igniteui-webcomponents": "6.2.1",
         "jasmine": "^5.6.0",
         "jasmine-core": "^5.6.0",
@@ -13670,9 +13670,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/igniteui-sassdoc-theme": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/igniteui-sassdoc-theme/-/igniteui-sassdoc-theme-2.0.2.tgz",
-      "integrity": "sha512-N+l1wPAYJZou60dE0f6UE5fFwfD4Yr0/LGYZVqfJ5eOvOP9+4Whv9LHT9AROfhJaA0a1+5STab50iL1+R7wgCg==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/igniteui-sassdoc-theme/-/igniteui-sassdoc-theme-2.1.0.tgz",
+      "integrity": "sha512-+g4AIUvyQIxUWI232ntVMFY/FIEjFdERA2sNb2Ls+oesy1CAUMUtIqml8p5n64gSvKpYInI2L4CvyGJihE7Ccg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index d36487eea1e..745a86ba320 100644
--- a/package.json
+++ b/package.json
@@ -120,7 +120,7 @@
     "hammerjs": "^2.0.8",
     "ig-typedoc-theme": "^6.0.0",
     "igniteui-dockmanager": "^1.17.0",
-    "igniteui-sassdoc-theme": "^2.0.2",
+    "igniteui-sassdoc-theme": "^2.1.0",
     "igniteui-webcomponents": "6.2.1",
     "jasmine": "^5.6.0",
     "jasmine-core": "^5.6.0",