From 7ad81d7c91a14fb4c0ce3b9b2fc828797e38e453 Mon Sep 17 00:00:00 2001
From: Damyan Petev <damyanpetev@users.noreply.github.com>
Date: Tue, 23 May 2023 18:08:10 +0300
Subject: [PATCH 1/6] refactor(themes): add an internal handler option to
 transform theme maps

---
 .../core/styles/themes/generators/_base.scss  | 515 ++++++++++++------
 1 file changed, 339 insertions(+), 176 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
index f6af5bb6575..c88df4b7f4f 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
@@ -1,4 +1,5 @@
 @use 'sass:list';
+@use 'sass:meta';
 @use 'sass:string';
 @use '../schemas' as *;
 @use '../../base' as *;
@@ -16,6 +17,10 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
+/// Default noop handler for theme map transforms
+/// @access private
+@function theme-noop($arg) { @return $arg; };
+
 /// Generates an Ignite UI for Angular global theme.
 /// @param {Map} $palette - An palette to be used by the global theme.
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the components.
@@ -33,6 +38,36 @@
     $roundness: 1,
     $elevation: true,
     $elevations: elevations.$material-elevations,
+) {
+    @include theme-internal(
+        $palette: $palette,
+        $schema: $schema,
+        $exclude: $exclude,
+        $roundness: $roundness,
+        $elevation: $elevation,
+        $elevations: $elevations
+    )
+}
+
+/// Generates an Ignite UI for Angular global theme.
+/// @access private
+/// @param {Map} $palette - An palette to be used by the global theme.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the components.
+/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
+/// @param {Number} $roundness [null] - Sets the global roundness factor (the value can be any decimal fraction between 0 and 1) for all components.
+/// @param {Boolean} $elevation [true] - Turns on/off elevations for all components in the theme.
+/// @param {Map} $elevations [$elevations] - The elevation map to be used by all component themes.
+/// @requires $light-material-schema
+/// @requires {function} is-component
+/// @requires {function} is-used
+@mixin theme-internal(
+    $palette,
+    $schema: $light-material-schema,
+    $exclude: (),
+    $roundness: 1,
+    $elevation: true,
+    $elevations: elevations.$material-elevations,
+    $theme-handler: meta.get-function("theme-noop"),
 ) {
     // Stores all excluded component styles
     $excluded: ();
@@ -81,387 +116,515 @@
     }
 
     @if is-used('igx-ripple', $exclude) {
-        @include ripple(ripple-theme(
-            $schema: $schema
-        ));
+        $ripple-theme-map: ripple-theme(
+            $schema: $schema,
+        );
+        $ripple-theme-map: meta.call($theme-handler, $ripple-theme-map);
+        @include ripple($ripple-theme-map);
     }
 
     @if is-used('igx-avatar', $exclude) {
-        @include avatar(avatar-theme(
-            $schema: $schema
-        ));
+        $avatar-theme-map: avatar-theme(
+            $schema: $schema,
+        );
+        $avatar-theme-map: meta.call($theme-handler, $avatar-theme-map);
+        @include avatar($avatar-theme-map);
     }
 
     @if is-used('igx-action-strip', $exclude) {
-        @include action-strip(action-strip-theme(
-            $schema: $schema
-        ));
+        $action-strip-theme-map: action-strip-theme(
+            $schema: $schema,
+        );
+        $action-strip-theme-map: meta.call($theme-handler, $action-strip-theme-map);
+        @include action-strip($action-strip-theme-map);
     }
 
     @if is-used('igx-badge', $exclude) {
-        @include badge(badge-theme(
-            $schema: $schema
-        ));
+        $badge-theme-map: badge-theme(
+            $schema: $schema,
+        );
+        $badge-theme-map: meta.call($theme-handler, $badge-theme-map);
+        @include badge($badge-theme-map);
     }
 
     @if is-used('igx-bottom-nav', $exclude) {
-        @include bottom-nav(bottom-nav-theme(
-            $schema: $schema
-        ));
+        $bottom-nav-theme-map: bottom-nav-theme(
+            $schema: $schema,
+        );
+        $bottom-nav-theme-map: meta.call($theme-handler, $bottom-nav-theme-map);
+        @include bottom-nav($bottom-nav-theme-map);
     }
 
     @if is-used('igx-button', $exclude) {
-        @include button(button-theme(
-            $schema: $schema
-        ));
+        $button-theme-map: button-theme(
+            $schema: $schema,
+        );
+        $button-theme-map: meta.call($theme-handler, $button-theme-map);
+        @include button($button-theme-map);
     }
 
     @if is-used('igx-button-group', $exclude) {
-        @include button-group(button-group-theme(
-            $schema: $schema
-        ));
+        $button-group-theme-map: button-group-theme(
+            $schema: $schema,
+        );
+        $button-group-theme-map: meta.call($theme-handler, $button-group-theme-map);
+        @include button-group($button-group-theme-map);
     }
 
     @if is-used('igx-banner', $exclude) {
-        @include banner(banner-theme(
-            $schema: $schema
-        ));
+        $banner-theme-map: banner-theme(
+            $schema: $schema,
+        );
+        $banner-theme-map: meta.call($theme-handler, $banner-theme-map);
+        @include banner($banner-theme-map);
     }
 
     @if is-used('igx-calendar', $exclude) {
-        @include calendar(calendar-theme(
-            $schema: $schema
-        ));
+        $calendar-theme-map: calendar-theme(
+            $schema: $schema,
+        );
+        $calendar-theme-map: meta.call($theme-handler, $calendar-theme-map);
+        @include calendar($calendar-theme-map);
     }
 
     @if is-used('igx-card', $exclude) {
-        @include card(card-theme(
-            $schema: $schema
-        ));
+        $card-theme-map: card-theme(
+            $schema: $schema,
+        );
+        $card-theme-map: meta.call($theme-handler, $card-theme-map);
+        @include card($card-theme-map);
     }
 
     @if is-used('igx-carousel', $exclude) {
-        @include carousel(carousel-theme(
-            $schema: $schema
-        ));
+        $carousel-theme-map: carousel-theme(
+            $schema: $schema,
+        );
+        $carousel-theme-map: meta.call($theme-handler, $carousel-theme-map);
+        @include carousel($carousel-theme-map);
     }
 
     @if is-used('igx-splitter', $exclude) {
-        @include splitter(splitter-theme(
-            $schema: $schema
-        ));
+        $splitter-theme-map: splitter-theme(
+            $schema: $schema,
+        );
+        $splitter-theme-map: meta.call($theme-handler, $splitter-theme-map);
+        @include splitter($splitter-theme-map);
     }
 
     @if is-used('data-chart', $exclude) {
-        @include css-vars(data-chart-theme(
+        $data-chart-theme-map: data-chart-theme(
             $schema: $schema,
-        ));
+        );
+        $data-chart-theme-map: meta.call($theme-handler, $data-chart-theme-map);
+        @include  css-vars($data-chart-theme-map);
     }
 
     @if is-used('doughnut-chart', $exclude) {
-        @include css-vars(doughnut-chart-theme(
+        $doughnut-chart-theme-map: doughnut-chart-theme(
             $schema: $schema,
-        ));
+        );
+        $doughnut-chart-theme-map: meta.call($theme-handler, $doughnut-chart-theme-map);
+        @include  css-vars($doughnut-chart-theme-map);
     }
 
     @if is-used('linear-gauge', $exclude) {
-        @include css-vars(linear-gauge-theme(
+        $linear-gauge-theme-map: linear-gauge-theme(
             $schema: $schema,
-        ));
+        );
+        $linear-gauge-theme-map: meta.call($theme-handler, $linear-gauge-theme-map);
+        @include  css-vars($linear-gauge-theme-map);
     }
 
     @if is-used('radial-gauge', $exclude) {
-        @include css-vars(radial-gauge-theme(
+        $radial-gauge-theme-map: radial-gauge-theme(
             $schema: $schema,
-        ));
+        );
+        $radial-gauge-theme-map: meta.call($theme-handler, $radial-gauge-theme-map);
+        @include  css-vars($radial-gauge-theme-map);
     }
 
     @if is-used('financial-chart', $exclude) {
-        @include css-vars(financial-chart-theme(
+        $financial-chart-theme-map: financial-chart-theme(
             $schema: $schema,
-        ));
+        );
+        $financial-chart-theme-map: meta.call($theme-handler, $financial-chart-theme-map);
+        @include  css-vars($financial-chart-theme-map);
     }
 
     @if is-used('bullet-graph', $exclude) {
-        @include css-vars(bullet-graph-theme(
+        $bullet-graph-theme-map: bullet-graph-theme(
             $schema: $schema,
-        ));
+        );
+        $bullet-graph-theme-map: meta.call($theme-handler, $bullet-graph-theme-map);
+        @include  css-vars($bullet-graph-theme-map);
     }
 
     @if is-used('category-chart', $exclude) {
-        @include css-vars(category-chart-theme(
+        $category-chart-theme-map: category-chart-theme(
             $schema: $schema,
-        ));
+        );
+        $category-chart-theme-map: meta.call($theme-handler, $category-chart-theme-map);
+        @include  css-vars($category-chart-theme-map);
     }
 
     @if is-used('geo-map', $exclude) {
-        @include css-vars(geo-map-theme(
+        $geo-map-theme-map: geo-map-theme(
             $schema: $schema,
-        ));
+        );
+        $geo-map-theme-map: meta.call($theme-handler, $geo-map-theme-map);
+        @include  css-vars($geo-map-theme-map);
     }
 
     @if is-used('pie-chart', $exclude) {
-        @include css-vars(pie-chart-theme(
+        $pie-chart-theme-map: pie-chart-theme(
             $schema: $schema,
-        ));
+        );
+        $pie-chart-theme-map: meta.call($theme-handler, $pie-chart-theme-map);
+        @include  css-vars($pie-chart-theme-map);
     }
 
     @if is-used('sparkline', $exclude) {
-        @include css-vars(sparkline-theme(
+        $sparkline-theme-map: sparkline-theme(
             $schema: $schema,
-        ));
+        );
+        $sparkline-theme-map: meta.call($theme-handler, $sparkline-theme-map);
+        @include  css-vars($sparkline-theme-map);
     }
 
     @if is-used('funnel-chart', $exclude) {
-        @include css-vars(funnel-chart-theme(
+        $funnel-chart-theme-map: funnel-chart-theme(
             $schema: $schema,
-        ));
+        );
+        $funnel-chart-theme-map: meta.call($theme-handler, $funnel-chart-theme-map);
+        @include  css-vars($funnel-chart-theme-map);
     }
 
     @if is-used('shape-chart', $exclude) {
-        @include css-vars(shape-chart-theme(
+        $shape-chart-theme-map: shape-chart-theme(
             $schema: $schema,
-        ));
+        );
+        $shape-chart-theme-map: meta.call($theme-handler, $shape-chart-theme-map);
+        @include  css-vars($shape-chart-theme-map);
     }
 
     @if is-used('igx-checkbox', $exclude) {
-        @include checkbox(checkbox-theme(
-            $schema: $schema
-        ));
+        $checkbox-theme-map: checkbox-theme(
+            $schema: $schema,
+        );
+        $checkbox-theme-map: meta.call($theme-handler, $checkbox-theme-map);
+        @include checkbox($checkbox-theme-map);
     }
 
     @if is-used('igx-chip', $exclude) {
-        @include chip(chip-theme(
-            $schema: $schema
-        ));
+        $chip-theme-map: chip-theme(
+            $schema: $schema,
+        );
+        $chip-theme-map: meta.call($theme-handler, $chip-theme-map);
+        @include chip($chip-theme-map);
     }
 
     @if is-used('igx-column-actions', $exclude) {
-        @include column-actions(column-actions-theme(
-            $schema: $schema
-        ));
+        $column-actions-theme-map: column-actions-theme(
+            $schema: $schema,
+        );
+        $column-actions-theme-map: meta.call($theme-handler, $column-actions-theme-map);
+        @include column-actions($column-actions-theme-map);
     }
 
     @if is-used('igx-combo', $exclude) {
-        @include combo(combo-theme(
-            $schema: $schema
-        ));
+        $combo-theme-map: combo-theme(
+            $schema: $schema,
+        );
+        $combo-theme-map: meta.call($theme-handler, $combo-theme-map);
+        @include combo($combo-theme-map);
     }
 
     @if is-used('igx-select', $exclude) {
-        @include select(select-theme(
-            $schema: $schema
-        ));
+        $select-theme-map: select-theme(
+            $schema: $schema,
+        );
+        $select-theme-map: meta.call($theme-handler, $select-theme-map);
+        @include select($select-theme-map);
     }
 
     @if is-used('igx-date-picker', $exclude) {
-        @include date-picker(calendar-theme(
-            $schema: $schema
-        ));
+        $calendar-theme-map: calendar-theme(
+            $schema: $schema,
+        );
+        $calendar-theme-map: meta.call($theme-handler, $calendar-theme-map);
+        @include date-picker($calendar-theme-map);
     }
 
     @if is-used('igx-date-range-picker', $exclude) {
-        @include date-range-picker(date-range-picker-theme(
-            $schema: $schema
-        ));
+        $date-range-picker-theme-map: date-range-picker-theme(
+            $schema: $schema,
+        );
+        $date-range-picker-theme-map: meta.call($theme-handler, $date-range-picker-theme-map);
+        @include date-range-picker($date-range-picker-theme-map);
     }
 
     @if is-used('igx-dialog', $exclude) {
-        @include dialog(dialog-theme(
-            $schema: $schema
-        ));
+        $dialog-theme-map: dialog-theme(
+            $schema: $schema,
+        );
+        $dialog-theme-map: meta.call($theme-handler, $dialog-theme-map);
+        @include dialog($dialog-theme-map);
     }
 
     @if is-used('igx-divider', $exclude) {
-        @include divider(divider-theme(
-            $schema: $schema
-        ));
+        $divider-theme-map: divider-theme(
+            $schema: $schema,
+        );
+        $divider-theme-map: meta.call($theme-handler, $divider-theme-map);
+        @include divider($divider-theme-map);
     }
 
     @if is-used('igc-dockmanager', $exclude) {
-        @include dock-manager(dock-manager-theme(
-            $schema: $schema
-        ));
+        $dock-manager-theme-map: dock-manager-theme(
+            $schema: $schema,
+        );
+        $dock-manager-theme-map: meta.call($theme-handler, $dock-manager-theme-map);
+        @include dock-manager($dock-manager-theme-map);
     }
 
     @if is-used('igc-rating', $exclude) {
-        @include rating(rating-theme(
-            $schema: $schema
-        ));
+        $rating-theme-map: rating-theme(
+            $schema: $schema,
+        );
+        $rating-theme-map: meta.call($theme-handler, $rating-theme-map);
+        @include rating($rating-theme-map);
     }
 
     @if is-used('igx-drop-down', $exclude) {
-        @include drop-down(drop-down-theme(
-            $schema: $schema
-        ));
+        $drop-down-theme-map: drop-down-theme(
+            $schema: $schema,
+        );
+        $drop-down-theme-map: meta.call($theme-handler, $drop-down-theme-map);
+        @include drop-down($drop-down-theme-map);
     }
 
     @if is-used('igx-expansion-panel', $exclude) {
-        @include expansion-panel(expansion-panel-theme(
-            $schema: $schema
-        ));
+        $expansion-panel-theme-map: expansion-panel-theme(
+            $schema: $schema,
+        );
+        $expansion-panel-theme-map: meta.call($theme-handler, $expansion-panel-theme-map);
+        @include expansion-panel($expansion-panel-theme-map);
     }
 
     @if is-used('igx-grid', $exclude) {
-        @include grid(grid-theme(
-            $schema: $schema
-        ));
+        $grid-theme-map: grid-theme(
+            $schema: $schema,
+        );
+        $grid-theme-map: meta.call($theme-handler, $grid-theme-map);
+        @include grid($grid-theme-map);
     }
 
     @if is-used('igx-grid-summary', $exclude) {
-        @include grid-summary(grid-summary-theme(
-            $schema: $schema
-        ));
+        $grid-summary-theme-map: grid-summary-theme(
+            $schema: $schema,
+        );
+        $grid-summary-theme-map: meta.call($theme-handler, $grid-summary-theme-map);
+        @include grid-summary($grid-summary-theme-map);
     }
 
     @if is-used('igx-grid-toolbar', $exclude) {
-        @include grid-toolbar(grid-toolbar-theme(
-            $schema: $schema
-        ));
+        $grid-toolbar-theme-map: grid-toolbar-theme(
+            $schema: $schema,
+        );
+        $grid-toolbar-theme-map: meta.call($theme-handler, $grid-toolbar-theme-map);
+        @include grid-toolbar($grid-toolbar-theme-map);
     }
 
     @if is-used('igx-pivot-data-selector', $exclude) {
-        @include pivot-data-selector(pivot-data-selector-theme(
-            $schema: $schema
-        ));
+        $pivot-data-selector-theme-map: pivot-data-selector-theme(
+            $schema: $schema,
+        );
+        $pivot-data-selector-theme-map: meta.call($theme-handler, $pivot-data-selector-theme-map);
+        @include pivot-data-selector($pivot-data-selector-theme-map);
     }
 
     @if is-used('igx-highlight', $exclude) {
-        @include highlight(highlight-theme(
-            $schema: $schema
-        ));
+        $highlight-theme-map: highlight-theme(
+            $schema: $schema,
+        );
+        $highlight-theme-map: meta.call($theme-handler, $highlight-theme-map);
+        @include highlight($highlight-theme-map);
     }
 
     @if is-used('igx-icon', $exclude) {
-        @include icon(icon-theme(
-            $schema: $schema
-        ));
+        $icon-theme-map: icon-theme(
+            $schema: $schema,
+        );
+        $icon-theme-map: meta.call($theme-handler, $icon-theme-map);
+        @include icon($icon-theme-map);
     }
 
     @if is-used('igx-input-group', $exclude) {
-        @include input-group(input-group-theme(
-            $schema: $schema
-        ));
+        $input-group-theme-map: input-group-theme(
+            $schema: $schema,
+        );
+        $input-group-theme-map: meta.call($theme-handler, $input-group-theme-map);
+        @include input-group($input-group-theme-map);
     }
 
     @if is-used('igx-list', $exclude) {
-        @include list(list-theme(
-            $schema: $schema
-        ));
+        $list-theme-map: list-theme(
+            $schema: $schema,
+        );
+        $list-theme-map: meta.call($theme-handler, $list-theme-map);
+        @include list($list-theme-map);
     }
 
     @if is-used('igx-navbar', $exclude) {
-        @include navbar(navbar-theme(
-            $schema: $schema
-        ));
+        $navbar-theme-map: navbar-theme(
+            $schema: $schema,
+        );
+        $navbar-theme-map: meta.call($theme-handler, $navbar-theme-map);
+        @include navbar($navbar-theme-map);
     }
 
     @if is-used('igx-nav-drawer', $exclude) {
-        @include navdrawer(navdrawer-theme(
-            $schema: $schema
-        ));
+        $navdrawer-theme-map: navdrawer-theme(
+            $schema: $schema,
+        );
+        $navdrawer-theme-map: meta.call($theme-handler, $navdrawer-theme-map);
+        @include navdrawer($navdrawer-theme-map);
     }
 
     @if is-used('igx-overlay', $exclude) {
-        @include overlay(overlay-theme(
-            $schema: $schema
-        ));
+        $overlay-theme-map: overlay-theme(
+            $schema: $schema,
+        );
+        $overlay-theme-map: meta.call($theme-handler, $overlay-theme-map);
+        @include overlay($overlay-theme-map);
     }
 
     @if is-used('igx-paginator', $exclude) {
-        @include paginator(paginator-theme(
-            $schema: $schema
-        ));
+        $paginator-theme-map: paginator-theme(
+            $schema: $schema,
+        );
+        $paginator-theme-map: meta.call($theme-handler, $paginator-theme-map);
+        @include paginator($paginator-theme-map);
     }
 
     @if is-used('igx-circular-bar', $exclude) {
-        @include progress-circular(progress-circular-theme(
-            $schema: $schema
-        ));
+        $progress-circular-theme-map: progress-circular-theme(
+            $schema: $schema,
+        );
+        $progress-circular-theme-map: meta.call($theme-handler, $progress-circular-theme-map);
+        @include progress-circular($progress-circular-theme-map);
     }
 
     @if is-used('igx-linear-bar', $exclude) {
-        @include progress-linear(progress-linear-theme(
-            $schema: $schema
-        ));
+        $progress-linear-theme-map: progress-linear-theme(
+            $schema: $schema,
+        );
+        $progress-linear-theme-map: meta.call($theme-handler, $progress-linear-theme-map);
+        @include progress-linear($progress-linear-theme-map);
     }
 
     @if is-used('igx-radio', $exclude) {
-        @include radio(radio-theme(
-            $schema: $schema
-        ));
+        $radio-theme-map: radio-theme(
+            $schema: $schema,
+        );
+        $radio-theme-map: meta.call($theme-handler, $radio-theme-map);
+        @include radio($radio-theme-map);
     }
 
     @if is-used('igx-query-builder', $exclude) {
-        @include query-builder(query-builder-theme(
-            $schema: $schema
-        ));
+        $query-builder-theme-map: query-builder-theme(
+            $schema: $schema,
+        );
+        $query-builder-theme-map: meta.call($theme-handler, $query-builder-theme-map);
+        @include query-builder($query-builder-theme-map);
     }
 
     @if is-used('ig-scrollbar', $exclude) {
-        @include scrollbar(scrollbar-theme(
-            $schema: $schema
-        ));
+        $scrollbar-theme-map: scrollbar-theme(
+            $schema: $schema,
+        );
+        $scrollbar-theme-map: meta.call($theme-handler, $scrollbar-theme-map);
+        @include scrollbar($scrollbar-theme-map);
     }
 
     @if is-used('igx-slider', $exclude) {
-        @include slider(slider-theme(
-            $schema: $schema
-        ));
+        $slider-theme-map: slider-theme(
+            $schema: $schema,
+        );
+        $slider-theme-map: meta.call($theme-handler, $slider-theme-map);
+        @include slider($slider-theme-map);
     }
 
     @if is-used('igx-snackbar', $exclude) {
-        @include snackbar(snackbar-theme(
-            $schema: $schema
-        ));
+        $snackbar-theme-map: snackbar-theme(
+            $schema: $schema,
+        );
+        $snackbar-theme-map: meta.call($theme-handler, $snackbar-theme-map);
+        @include snackbar($snackbar-theme-map);
     }
 
     @if is-used('igx-switch', $exclude) {
-        @include switch(switch-theme(
+        $switch-theme-map: switch-theme(
             $schema: $schema,
-        ));
+        );
+        $switch-theme-map: meta.call($theme-handler, $switch-theme-map);
+        @include switch($switch-theme-map);
     }
 
     @if is-used('igx-tabs', $exclude) {
-        @include tabs(tabs-theme(
-            $schema: $schema
-        ));
+        $tabs-theme-map: tabs-theme(
+            $schema: $schema,
+        );
+        $tabs-theme-map: meta.call($theme-handler, $tabs-theme-map);
+        @include tabs($tabs-theme-map);
     }
 
     @if is-used('igx-stepper', $exclude) {
-        @include stepper(stepper-theme(
+        $stepper-theme-map: stepper-theme(
             $schema: $schema,
-        ));
+        );
+        $stepper-theme-map: meta.call($theme-handler, $stepper-theme-map);
+        @include stepper($stepper-theme-map);
     }
 
     @if is-used('igx-toast', $exclude) {
-        @include toast(toast-theme(
-            $schema: $schema
-        ));
+        $toast-theme-map: toast-theme(
+            $schema: $schema,
+        );
+        $toast-theme-map: meta.call($theme-handler, $toast-theme-map);
+        @include toast($toast-theme-map);
     }
 
     @if is-used('igx-tooltip', $exclude) {
-        @include tooltip(tooltip-theme(
-            $schema: $schema
-        ));
+        $tooltip-theme-map: tooltip-theme(
+            $schema: $schema,
+        );
+        $tooltip-theme-map: meta.call($theme-handler, $tooltip-theme-map);
+        @include tooltip($tooltip-theme-map);
     }
 
     @if is-used('igx-time-picker', $exclude) {
-        @include time-picker(time-picker-theme(
+        $time-picker-theme-map: time-picker-theme(
             $schema: $schema,
-        ));
+        );
+        $time-picker-theme-map: meta.call($theme-handler, $time-picker-theme-map);
+        @include time-picker($time-picker-theme-map);
     }
 
     @if is-used('igx-tree', $exclude) {
-        @include tree(tree-theme(
+        $tree-theme-map: tree-theme(
             $schema: $schema,
-        ));
+        );
+        $tree-theme-map: meta.call($theme-handler, $tree-theme-map);
+        @include tree($tree-theme-map);
     }
 
     @if is-used('igx-watermark', $exclude) {
-        @include watermark(watermark-theme(
-            $schema: $schema
-        ));
+        $watermark-theme-map: watermark-theme(
+            $schema: $schema,
+        );
+        $watermark-theme-map: meta.call($theme-handler, $watermark-theme-map);
+        @include watermark($watermark-theme-map);
     }
 
     @if list.length($dropped-themes) > 0 {

From 8e0f62a614bbc39d76121522a437461302115481 Mon Sep 17 00:00:00 2001
From: Damyan Petev <damyanpetev@users.noreply.github.com>
Date: Tue, 23 May 2023 18:09:31 +0300
Subject: [PATCH 2/6] refactor(elements): [WIP] component theme cb to update
 name/prefix and selector

---
 .../src/themes/_util.scss                     | 97 +++++++++++++++++++
 .../src/themes/light/bootstrap.scss           | 12 ++-
 .../styles/components/grid/_grid-theme.scss   |  2 +-
 3 files changed, 109 insertions(+), 2 deletions(-)
 create mode 100644 projects/igniteui-angular-elements/src/themes/_util.scss

diff --git a/projects/igniteui-angular-elements/src/themes/_util.scss b/projects/igniteui-angular-elements/src/themes/_util.scss
new file mode 100644
index 00000000000..8b29a295211
--- /dev/null
+++ b/projects/igniteui-angular-elements/src/themes/_util.scss
@@ -0,0 +1,97 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'sass:list';
+@use '../../../igniteui-angular/src/lib/core/styles/themes' as igx;
+
+/// Callback to update component's name (for var prefix) and selectors for Elements
+/// @access private
+/// @param {Map} $theme_schema - The component's theme schema
+/// @return {Map} - Updated component theme schema
+@function updateElementName($theme_schema) {
+    $prefix: 'ig';
+    $result: $theme_schema;
+    @debug '--- called updateElementName ---';
+    // @each $key, $schema in $theme_schemas {
+    //     @if string.index($key, 'igx-') and map.has-key($schema, "name") {
+    //         $name: map.get($schema, "name");
+    //         @if string.index($name, 'igx-') {
+    //             $name: list.nth(string.split($name, 'igx-'), -1);
+    //             $name: igc-#{$name};
+    //         }
+    //         $result: map.merge($result, ($key: map.merge($schema, (name: $name) )));
+    //     } @else {
+    //         $result: map.merge($result, ($key: $schema));
+    //     }
+    // }
+
+    @if map.has-key($theme_schema, "name") {
+        $name: map.get($theme_schema, "name");
+        $selector: map.get($theme_schema, "selector") or $name;
+
+        @debug "name: #{$name}";
+
+        @if string.index($name, 'igx-') {
+            $name: list.nth(string.split($name, 'igx-'), -1);
+            $name: '#{$prefix}-#{$name}';
+            @debug "name after: #{$name}";
+        }
+
+        // TODO: For exposed components also modify selector with updated element prefix
+        // For the rest of internal components ensure selector with original name is present so it won't default to the new name
+        @debug "selector before: #{$selector}";
+        $selector: updateSelectors($selector);
+        @debug "selector after: #{$selector}";;
+
+        $result: map.merge($result, (name: $name, selector: $selector));
+    }
+    @return $result;
+}
+
+/// Break down the selector and update `igx-` element selectors with matching `igc-` for exposed Elements
+/// @access private
+/// @param {String} $selector - The selector(s) to update
+/// @return {String} - Updated selector(s) with `igc-` prefixed equivalents
+@function updateSelectors($selector) {
+    $result: ();
+    $selectors: string.split($selector, ", ");
+
+    @each $sel in $selectors {
+        $result: list.append($result, $sel, comma);
+
+        // TODO: only need igc- equivalents of exposed components, use theme include/exclude list?
+        @if string.index($sel, 'igx-') == 1 {
+            $igc-sel: list.nth(string.split($sel, 'igx-'), -1);
+            $igc-sel: 'igc-#{$igc-sel}';
+            $result: list.append($result, $igc-sel, comma);
+        }
+    }
+
+    @return "#{$result}"; // is this right?
+}
+
+/// Generates an Ignite UI for Angular Elements global theme.
+/// @param {Map} $palette - An palette to be used by the global theme.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the components.
+/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
+/// @param {Number} $roundness [null] - Sets the global roundness factor (the value can be any decimal fraction between 0 and 1) for all components.
+/// @param {Boolean} $elevation [true] - Turns on/off elevations for all components in the theme.
+/// @param {Map} $elevations [$elevations] - The elevation map to be used by all component themes.
+/// @requires $light-material-schema
+/// @requires {function} is-component
+/// @requires {function} is-used
+@mixin elements-theme(
+    $palette,
+    $schema,
+    $exclude,
+    // $roundness,
+    // $elevation,
+    // $elevations,
+) {
+    @include igx.theme-internal(
+        $palette: $palette,
+        $exclude: $exclude,
+        $schema: igx.$light-bootstrap-schema,
+        $theme-handler: meta.get-function("updateElementName")
+    );
+}
diff --git a/projects/igniteui-angular-elements/src/themes/light/bootstrap.scss b/projects/igniteui-angular-elements/src/themes/light/bootstrap.scss
index 2d9a001feeb..275014e5e10 100644
--- a/projects/igniteui-angular-elements/src/themes/light/bootstrap.scss
+++ b/projects/igniteui-angular-elements/src/themes/light/bootstrap.scss
@@ -1,10 +1,20 @@
 /* You can add global styles to this file, and also import other style files */
 @use '../../../../igniteui-angular/src/lib/core/styles/themes' as igx;
 @use '../variables' as vars;
+@use '../util' as util;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 $palette: igx.$light-bootstrap-palette;
 
 @include igx.core();
 @include igx.typography($font-family: igx.$bootstrap-typeface, $type-scale: igx.$bootstrap-type-scale);
-@include igx.bootstrap-light-theme($palette: $palette, $exclude: vars.$unused-themes);
+@include util.elements-theme(
+    $palette: $palette,
+    $exclude: vars.$unused-themes,
+    $schema: igx.$light-bootstrap-schema,
+);
+
+igc-grid {
+    --ig-grid-grouparea-background: #ff000012;
+    --ig-grid-drop-area-background: #ff004c12;
+}
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 b469509a0c6..ea0c4afba7a 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
@@ -209,7 +209,7 @@
     $cell-selected-within-text-color: null,
 ) {
     $name: 'igx-grid';
-    $selector: 'igx-grid, igc-grid, igx-hierarchical-grid, igc-hierarchical-grid, igx-pivot-grid, igc-pivot-grid, igx-tree-grid, igc-tree-grid, igx-advanced-filtering-dialog, igc-advanced-filtering-dialog, igx-grid-excel-style-filtering, igc-grid-excel-style-filtering, .igx-excel-filter__secondary';
+    $selector: 'igx-grid, igx-hierarchical-grid, igx-pivot-grid, igx-tree-grid, igx-advanced-filtering-dialog, igx-grid-excel-style-filtering, .igx-excel-filter__secondary';
     $grid-schema: ();
 
     @if map.has-key($schema, $name) {

From 280860badf9f1fb4f4e044f90f6933668e038592 Mon Sep 17 00:00:00 2001
From: Damyan Petev <damyanpetev@users.noreply.github.com>
Date: Thu, 8 Jun 2023 17:45:35 +0300
Subject: [PATCH 3/6] refactor(elements): cleanup leftover selector changes,
 elements theme adjust

---
 .../src/themes/_util.scss                     | 21 ++++++++++++++-----
 .../src/themes/_variables.scss                |  8 +++++++
 .../src/themes/light/bootstrap.scss           |  8 +++++++
 .../action-strip/_action-strip-theme.scss     |  2 --
 .../grid-toolbar/_grid-toolbar-theme.scss     |  2 +-
 5 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/projects/igniteui-angular-elements/src/themes/_util.scss b/projects/igniteui-angular-elements/src/themes/_util.scss
index 8b29a295211..68ee5fc34b8 100644
--- a/projects/igniteui-angular-elements/src/themes/_util.scss
+++ b/projects/igniteui-angular-elements/src/themes/_util.scss
@@ -3,6 +3,15 @@
 @use 'sass:string';
 @use 'sass:list';
 @use '../../../igniteui-angular/src/lib/core/styles/themes' as igx;
+@use './variables' as vars;
+
+/// Prefix used for 'global' component CSS vars
+$elements-var-prefix: 'ig';
+
+/// Prefix used in place of `igx-` in component selectors
+$elements-selector-prefix: 'igc';
+
+
 
 /// Callback to update component's name (for var prefix) and selectors for Elements
 /// @access private
@@ -33,15 +42,17 @@
 
         @if string.index($name, 'igx-') {
             $name: list.nth(string.split($name, 'igx-'), -1);
-            $name: '#{$prefix}-#{$name}';
+            $name: '#{$elements-var-prefix}-#{$name}';
             @debug "name after: #{$name}";
         }
 
         // TODO: For exposed components also modify selector with updated element prefix
         // For the rest of internal components ensure selector with original name is present so it won't default to the new 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: #{$selector}";
+            $selector: updateSelectors($selector);
+            @debug "selector after: #{$selector}";;
+        }
 
         $result: map.merge($result, (name: $name, selector: $selector));
     }
@@ -62,7 +73,7 @@
         // TODO: only need igc- equivalents of exposed components, use theme include/exclude list?
         @if string.index($sel, 'igx-') == 1 {
             $igc-sel: list.nth(string.split($sel, 'igx-'), -1);
-            $igc-sel: 'igc-#{$igc-sel}';
+            $igc-sel: '#{$elements-selector-prefix}-#{$igc-sel}';
             $result: list.append($result, $igc-sel, comma);
         }
     }
diff --git a/projects/igniteui-angular-elements/src/themes/_variables.scss b/projects/igniteui-angular-elements/src/themes/_variables.scss
index 1e9307c248f..9cb2c764d5f 100644
--- a/projects/igniteui-angular-elements/src/themes/_variables.scss
+++ b/projects/igniteui-angular-elements/src/themes/_variables.scss
@@ -30,3 +30,11 @@ $unused-themes: (
     igx-tabs,
     igx-toast
 );
+
+$allowed: (
+    igx-grid,
+    igx-paginator,
+    igx-action-strip,
+    igx-grid-toolbar,
+    igx-pivot-data-selector
+);
diff --git a/projects/igniteui-angular-elements/src/themes/light/bootstrap.scss b/projects/igniteui-angular-elements/src/themes/light/bootstrap.scss
index 275014e5e10..faa23eb94c0 100644
--- a/projects/igniteui-angular-elements/src/themes/light/bootstrap.scss
+++ b/projects/igniteui-angular-elements/src/themes/light/bootstrap.scss
@@ -2,14 +2,22 @@
 @use '../../../../igniteui-angular/src/lib/core/styles/themes' as igx;
 @use '../variables' as vars;
 @use '../util' as util;
+@use 'sass:map';
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 $palette: igx.$light-bootstrap-palette;
 
+@function include($items, $register) {
+    @return map.keys(map.remove($register, $items...));
+}
+
+
 @include igx.core();
 @include igx.typography($font-family: igx.$bootstrap-typeface, $type-scale: igx.$bootstrap-type-scale);
+@debug map.keys(igx.$components);
 @include util.elements-theme(
     $palette: $palette,
+    // $exclude: include(vars.$allowed, igx.$components),
     $exclude: vars.$unused-themes,
     $schema: igx.$light-bootstrap-schema,
 );
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss
index 6654e78e51c..9432076ae59 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss
@@ -32,7 +32,6 @@
     $actions-border-radius: null,
 ) {
     $name: 'igx-action-strip';
-    $selector: 'igx-action-strip, igc-action-strip';
     $action-strip-schema: ();
 
     @if map.has-key($schema, $name) {
@@ -53,7 +52,6 @@
 
     @return extend($theme, (
         name: $name,
-        selector: $selector,
         background: $background,
         actions-background: $actions-background,
         icon-color: $icon-color,
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 d916306c0dd..48ac13b0d04 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
@@ -41,7 +41,7 @@
     $item-focus-text-color: null
 ) {
     $name: 'igx-grid-toolbar';
-    $selector: 'igx-grid-toolbar, igc-grid-toolbar, .igx-grid-toolbar__dd-list';
+    $selector: 'igx-grid-toolbar, .igx-grid-toolbar__dd-list';
     $grid-toolbar-schema: ();
 
     @if map.has-key($schema, $name) {

From 0388e2606fdbb94ac991fb94340989c5fa325927 Mon Sep 17 00:00:00 2001
From: Damyan Petev <damyanpetev@users.noreply.github.com>
Date: Wed, 21 Jun 2023 21:07:37 +0300
Subject: [PATCH 4/6] refactor(elements): update all themes, more cleanup

---
 .../igniteui-angular-elements/src/index.html  |  2 ++
 .../src/themes/_util.scss                     | 23 ++++++++-----------
 .../src/themes/dark/bootstrap.scss            | 11 ++++++++-
 .../src/themes/dark/fluent.scss               | 11 ++++++++-
 .../src/themes/dark/indigo.scss               | 10 +++++++-
 .../src/themes/dark/material.scss             | 10 +++++++-
 .../src/themes/light/bootstrap.scss           | 17 +++-----------
 .../src/themes/light/fluent.scss              | 10 +++++++-
 .../src/themes/light/indigo.scss              | 11 ++++++++-
 .../src/themes/light/material.scss            | 10 +++++++-
 10 files changed, 80 insertions(+), 35 deletions(-)

diff --git a/projects/igniteui-angular-elements/src/index.html b/projects/igniteui-angular-elements/src/index.html
index 9bd6f0ec1e9..cc05d36097c 100644
--- a/projects/igniteui-angular-elements/src/index.html
+++ b/projects/igniteui-angular-elements/src/index.html
@@ -14,6 +14,8 @@
     }
     igc-grid, igc-tree-grid {
         max-height: 550px;
+        --ig-grid-grouparea-background: #ff000012;
+        --ig-grid-drop-area-background: #ff004c12;
     }
     .range-wrapper {
         width: 100%;
diff --git a/projects/igniteui-angular-elements/src/themes/_util.scss b/projects/igniteui-angular-elements/src/themes/_util.scss
index 68ee5fc34b8..cd04e1e30d8 100644
--- a/projects/igniteui-angular-elements/src/themes/_util.scss
+++ b/projects/igniteui-angular-elements/src/themes/_util.scss
@@ -11,7 +11,15 @@ $elements-var-prefix: 'ig';
 /// Prefix used in place of `igx-` in component selectors
 $elements-selector-prefix: 'igc';
 
-
+/// Filter out included items to get exclude list
+/// @access private
+/// @param {Map} $items - The items to include
+/// @param {Map} $register - The full components list `igx.$components`
+/// @return {Map} - The resulting difference of items for excluding
+@function include($items, $register) {
+    // @debug map.keys(igx.$components);
+    @return map.keys(map.remove($register, $items...));
+}
 
 /// Callback to update component's name (for var prefix) and selectors for Elements
 /// @access private
@@ -20,19 +28,6 @@ $elements-selector-prefix: 'igc';
 @function updateElementName($theme_schema) {
     $prefix: 'ig';
     $result: $theme_schema;
-    @debug '--- called updateElementName ---';
-    // @each $key, $schema in $theme_schemas {
-    //     @if string.index($key, 'igx-') and map.has-key($schema, "name") {
-    //         $name: map.get($schema, "name");
-    //         @if string.index($name, 'igx-') {
-    //             $name: list.nth(string.split($name, 'igx-'), -1);
-    //             $name: igc-#{$name};
-    //         }
-    //         $result: map.merge($result, ($key: map.merge($schema, (name: $name) )));
-    //     } @else {
-    //         $result: map.merge($result, ($key: $schema));
-    //     }
-    // }
 
     @if map.has-key($theme_schema, "name") {
         $name: map.get($theme_schema, "name");
diff --git a/projects/igniteui-angular-elements/src/themes/dark/bootstrap.scss b/projects/igniteui-angular-elements/src/themes/dark/bootstrap.scss
index 84ef4693bbf..b90ef4b7996 100644
--- a/projects/igniteui-angular-elements/src/themes/dark/bootstrap.scss
+++ b/projects/igniteui-angular-elements/src/themes/dark/bootstrap.scss
@@ -1,10 +1,19 @@
 /* You can add global styles to this file, and also import other style files */
 @use '../../../../igniteui-angular/src/lib/core/styles/themes' as igx;
 @use '../variables' as vars;
+@use '../util' as util;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 $palette: igx.$dark-bootstrap-palette;
 
 @include igx.core();
 @include igx.typography($font-family: igx.$bootstrap-typeface, $type-scale: igx.$bootstrap-type-scale);
-@include igx.bootstrap-dark-theme($palette: $palette, $exclude: vars.$unused-themes);
+
+@include util.elements-theme(
+    $palette: $palette,
+    // TODO: adjust dependencies
+    // $exclude: util.include(vars.$allowed, igx.$components),
+    $exclude: vars.$unused-themes,
+    $schema: igx.$dark-bootstrap-schema,
+);
+
diff --git a/projects/igniteui-angular-elements/src/themes/dark/fluent.scss b/projects/igniteui-angular-elements/src/themes/dark/fluent.scss
index 2b0c2da170c..ecbba661bd5 100644
--- a/projects/igniteui-angular-elements/src/themes/dark/fluent.scss
+++ b/projects/igniteui-angular-elements/src/themes/dark/fluent.scss
@@ -1,10 +1,19 @@
 /* You can add global styles to this file, and also import other style files */
 @use '../../../../igniteui-angular/src/lib/core/styles/themes' as igx;
 @use '../variables' as vars;
+@use '../util' as util;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 $palette: igx.$dark-fluent-palette;
 
 @include igx.core();
 @include igx.typography($font-family: igx.$fluent-typeface, $type-scale: igx.$fluent-type-scale);
-@include igx.fluent-dark-theme($palette: $palette, $exclude: vars.$unused-themes);
+
+@include util.elements-theme(
+    $palette: $palette,
+    // TODO: adjust dependencies
+    // $exclude: util.include(vars.$allowed, igx.$components),
+    $exclude: vars.$unused-themes,
+    $schema: igx.$dark-fluent-schema,
+);
+
diff --git a/projects/igniteui-angular-elements/src/themes/dark/indigo.scss b/projects/igniteui-angular-elements/src/themes/dark/indigo.scss
index a8b0eb25e40..0c17eeb4c1b 100644
--- a/projects/igniteui-angular-elements/src/themes/dark/indigo.scss
+++ b/projects/igniteui-angular-elements/src/themes/dark/indigo.scss
@@ -1,10 +1,18 @@
 /* You can add global styles to this file, and also import other style files */
 @use '../../../../igniteui-angular/src/lib/core/styles/themes' as igx;
 @use '../variables' as vars;
+@use '../util' as util;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 $palette: igx.$dark-indigo-palette;
 
 @include igx.core();
 @include igx.typography($font-family: igx.$indigo-typeface, $type-scale: igx.$indigo-type-scale);
-@include igx.indigo-dark-theme($palette: $palette, $exclude: vars.$unused-themes);
+
+@include util.elements-theme(
+    $palette: $palette,
+    // TODO: adjust dependencies
+    // $exclude: util.include(vars.$allowed, igx.$components),
+    $exclude: vars.$unused-themes,
+    $schema: igx.$dark-indigo-schema,
+);
diff --git a/projects/igniteui-angular-elements/src/themes/dark/material.scss b/projects/igniteui-angular-elements/src/themes/dark/material.scss
index fc23a6953b5..f49bc2f439b 100644
--- a/projects/igniteui-angular-elements/src/themes/dark/material.scss
+++ b/projects/igniteui-angular-elements/src/themes/dark/material.scss
@@ -1,10 +1,18 @@
 /* You can add global styles to this file, and also import other style files */
 @use '../../../../igniteui-angular/src/lib/core/styles/themes' as igx;
 @use '../variables' as vars;
+@use '../util' as util;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 $palette: igx.$dark-material-palette;
 
 @include igx.core();
 @include igx.typography($font-family: igx.$material-typeface, $type-scale: igx.$material-type-scale);
-@include igx.dark-theme($palette: $palette, $exclude: vars.$unused-themes);
+
+@include util.elements-theme(
+    $palette: $palette,
+    // TODO: adjust dependencies
+    // $exclude: util.include(vars.$allowed, igx.$components),
+    $exclude: vars.$unused-themes,
+    $schema: igx.$dark-material-schema,
+);
diff --git a/projects/igniteui-angular-elements/src/themes/light/bootstrap.scss b/projects/igniteui-angular-elements/src/themes/light/bootstrap.scss
index faa23eb94c0..0ff1148fe00 100644
--- a/projects/igniteui-angular-elements/src/themes/light/bootstrap.scss
+++ b/projects/igniteui-angular-elements/src/themes/light/bootstrap.scss
@@ -1,28 +1,17 @@
-/* You can add global styles to this file, and also import other style files */
 @use '../../../../igniteui-angular/src/lib/core/styles/themes' as igx;
 @use '../variables' as vars;
 @use '../util' as util;
-@use 'sass:map';
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 $palette: igx.$light-bootstrap-palette;
 
-@function include($items, $register) {
-    @return map.keys(map.remove($register, $items...));
-}
-
-
 @include igx.core();
 @include igx.typography($font-family: igx.$bootstrap-typeface, $type-scale: igx.$bootstrap-type-scale);
-@debug map.keys(igx.$components);
+
 @include util.elements-theme(
     $palette: $palette,
-    // $exclude: include(vars.$allowed, igx.$components),
+    // TODO: adjust dependencies
+    // $exclude: util.include(vars.$allowed, igx.$components),
     $exclude: vars.$unused-themes,
     $schema: igx.$light-bootstrap-schema,
 );
-
-igc-grid {
-    --ig-grid-grouparea-background: #ff000012;
-    --ig-grid-drop-area-background: #ff004c12;
-}
diff --git a/projects/igniteui-angular-elements/src/themes/light/fluent.scss b/projects/igniteui-angular-elements/src/themes/light/fluent.scss
index c7bc78c3c36..4fae9c4b235 100644
--- a/projects/igniteui-angular-elements/src/themes/light/fluent.scss
+++ b/projects/igniteui-angular-elements/src/themes/light/fluent.scss
@@ -1,6 +1,6 @@
-/* You can add global styles to this file, and also import other style files */
 @use '../../../../igniteui-angular/src/lib/core/styles/themes' as igx;
 @use '../variables' as vars;
+@use '../util' as util;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 $palette: igx.$light-fluent-palette;
@@ -8,3 +8,11 @@ $palette: igx.$light-fluent-palette;
 @include igx.core();
 @include igx.typography($font-family: igx.$fluent-typeface, $type-scale: igx.$fluent-type-scale);
 @include igx.fluent-light-theme($palette: $palette, $exclude: vars.$unused-themes);
+
+@include util.elements-theme(
+    $palette: $palette,
+    // TODO: adjust dependencies
+    // $exclude: util.include(vars.$allowed, igx.$components),
+    $exclude: vars.$unused-themes,
+    $schema: igx.$light-fluent-schema,
+);
diff --git a/projects/igniteui-angular-elements/src/themes/light/indigo.scss b/projects/igniteui-angular-elements/src/themes/light/indigo.scss
index 0c8ecebed4b..f8041cf1008 100644
--- a/projects/igniteui-angular-elements/src/themes/light/indigo.scss
+++ b/projects/igniteui-angular-elements/src/themes/light/indigo.scss
@@ -1,10 +1,19 @@
 /* You can add global styles to this file, and also import other style files */
 @use '../../../../igniteui-angular/src/lib/core/styles/themes' as igx;
 @use '../variables' as vars;
+@use '../util' as util;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 $palette: igx.$light-indigo-palette;
 
 @include igx.core();
 @include igx.typography($font-family: igx.$indigo-typeface, $type-scale: igx.$indigo-type-scale);
-@include igx.indigo-light-theme($palette: $palette, $exclude: vars.$unused-themes);
+
+@include util.elements-theme(
+    $palette: $palette,
+    // TODO: adjust dependencies
+    // $exclude: util.include(vars.$allowed, igx.$components),
+    $exclude: vars.$unused-themes,
+    $schema: igx.$light-indigo-schema,
+);
+
diff --git a/projects/igniteui-angular-elements/src/themes/light/material.scss b/projects/igniteui-angular-elements/src/themes/light/material.scss
index dc98881befc..301573a037b 100644
--- a/projects/igniteui-angular-elements/src/themes/light/material.scss
+++ b/projects/igniteui-angular-elements/src/themes/light/material.scss
@@ -1,10 +1,18 @@
 /* You can add global styles to this file, and also import other style files */
 @use '../../../../igniteui-angular/src/lib/core/styles/themes' as igx;
 @use '../variables' as vars;
+@use '../util' as util;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 $palette: igx.$light-material-palette;
 
 @include igx.core();
 @include igx.typography($font-family: igx.$material-typeface, $type-scale: igx.$material-type-scale);
-@include igx.light-theme($palette: $palette, $exclude: vars.$unused-themes);
+
+@include util.elements-theme(
+    $palette: $palette,
+    // TODO: adjust dependencies
+    // $exclude: util.include(vars.$allowed, igx.$components),
+    $exclude: vars.$unused-themes,
+    $schema: igx.$light-material-schema,
+);

From bf3c378364d4a0d444aa5d9774f8bc9b6f1ed614 Mon Sep 17 00:00:00 2001
From: Damyan Petev <damyanpetev@users.noreply.github.com>
Date: Wed, 21 Jun 2023 21:34:32 +0300
Subject: [PATCH 5/6] chore(elements):  cleanup theme debug logs

---
 projects/igniteui-angular-elements/src/index.html  |  1 +
 .../src/themes/_util.scss                          | 14 ++++++--------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/projects/igniteui-angular-elements/src/index.html b/projects/igniteui-angular-elements/src/index.html
index d1e6d8638fc..ecfeda1727a 100644
--- a/projects/igniteui-angular-elements/src/index.html
+++ b/projects/igniteui-angular-elements/src/index.html
@@ -16,6 +16,7 @@
         max-height: 550px;
         --ig-grid-grouparea-background: #ff000012;
         --ig-grid-drop-area-background: #ff004c12;
+        --ig-paginator-border-color:#d0ab23;
     }
     .range-wrapper {
         width: 100%;
diff --git a/projects/igniteui-angular-elements/src/themes/_util.scss b/projects/igniteui-angular-elements/src/themes/_util.scss
index cd04e1e30d8..a0fbde30523 100644
--- a/projects/igniteui-angular-elements/src/themes/_util.scss
+++ b/projects/igniteui-angular-elements/src/themes/_util.scss
@@ -33,20 +33,19 @@ $elements-selector-prefix: 'igc';
         $name: map.get($theme_schema, "name");
         $selector: map.get($theme_schema, "selector") or $name;
 
-        @debug "name: #{$name}";
+        // @debug "name: #{$name}";
 
         @if string.index($name, 'igx-') {
             $name: list.nth(string.split($name, 'igx-'), -1);
             $name: '#{$elements-var-prefix}-#{$name}';
-            @debug "name after: #{$name}";
+            // @debug "name after: #{$name}";
         }
 
-        // TODO: For exposed components also modify selector with updated element prefix
-        // For the rest of internal components ensure selector with original name is present so it won't default to the new 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}";
+            // @debug "selector before: #{$selector}";
             $selector: updateSelectors($selector);
-            @debug "selector after: #{$selector}";;
+            // @debug "selector after: #{$selector}";;
         }
 
         $result: map.merge($result, (name: $name, selector: $selector));
@@ -65,7 +64,6 @@ $elements-selector-prefix: 'igc';
     @each $sel in $selectors {
         $result: list.append($result, $sel, comma);
 
-        // TODO: only need igc- equivalents of exposed components, use theme include/exclude list?
         @if string.index($sel, 'igx-') == 1 {
             $igc-sel: list.nth(string.split($sel, 'igx-'), -1);
             $igc-sel: '#{$elements-selector-prefix}-#{$igc-sel}';
@@ -73,7 +71,7 @@ $elements-selector-prefix: 'igc';
         }
     }
 
-    @return "#{$result}"; // is this right?
+    @return "#{$result}";
 }
 
 /// Generates an Ignite UI for Angular Elements global theme.

From 16776e46cca9a0abcacb6a58a99ea98039a30442 Mon Sep 17 00:00:00 2001
From: Damyan Petev <damyanpetev@users.noreply.github.com>
Date: Wed, 21 Jun 2023 21:40:17 +0300
Subject: [PATCH 6/6] fix(elements): pass correct theme schema

---
 projects/igniteui-angular-elements/src/themes/_util.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/igniteui-angular-elements/src/themes/_util.scss b/projects/igniteui-angular-elements/src/themes/_util.scss
index a0fbde30523..402f710851c 100644
--- a/projects/igniteui-angular-elements/src/themes/_util.scss
+++ b/projects/igniteui-angular-elements/src/themes/_util.scss
@@ -95,7 +95,7 @@ $elements-selector-prefix: 'igc';
     @include igx.theme-internal(
         $palette: $palette,
         $exclude: $exclude,
-        $schema: igx.$light-bootstrap-schema,
+        $schema: $schema,
         $theme-handler: meta.get-function("updateElementName")
     );
 }