igniteui-angular 20.1.1 → 20.1.2

package/lib/core/styles/components/avatar/_avatar-theme.scss

@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin avatar($theme) {
-    @include css-vars($theme, 'igx-avatar');
+    @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
 

package/lib/core/styles/components/badge/_badge-theme.scss

@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin badge($theme) {
-    @include css-vars($theme, 'igx-badge');
+    @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
 

package/lib/core/styles/components/banner/_banner-theme.scss

@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin banner($theme) {
-    @include css-vars($theme, 'igx-banner, .igx-banner');
+    @include css-vars($theme);
     $variant: map.get($theme, '_meta', 'theme');
 
     %igx-banner-host {

package/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin bottom-nav($theme) {
-    @include css-vars($theme, 'igx-bottom-nav');
+    @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
     $menu-height: rem(56px);

package/lib/core/styles/components/button-group/_button-group-theme.scss

@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin button-group($theme) {
-    @include css-vars($theme, 'igx-buttongroup');
+    @include css-vars($theme);
 
     $group-item-border-thickness: rem(1px);
     $group-items-margin: rem(10px, 16px);
@@ -65,11 +65,6 @@
         &[igxButton] {
             border-radius: 0;
             border-color: var-get($theme, 'item-border-color');
-
-            @if $bootstrap-theme {
-                margin: 0 !important;
-                border: none;
-            }
         }
 
         igx-icon {

package/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin calendar($theme) {
-    @include css-vars($theme, 'igx-calendar, .igx-days-view--standalone, .igx-calendar-view--standalone, .igx-date-picker, .igx-month-picker');
+    @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
     $bootstrap-theme: $variant == 'bootstrap';

package/lib/core/styles/components/card/_card-theme.scss

@@ -1,12 +1,11 @@
 @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.
 @mixin card($theme) {
-    @include css-vars($theme, 'igx-card');
+    @include css-vars($theme);
     $variant: map.get($theme, '_meta', 'theme');
     $not-material-theme: $variant != 'material';
 
@@ -29,10 +28,6 @@
         &:hover {
             box-shadow: none;
         }
-
-        igx-avatar {
-            --ig-size: #{if($variant == 'indigo', 3, 1)};
-        }
     }
 
     %igx-card--elevated {
@@ -93,6 +88,10 @@
             margin-block: auto;
         }
 
+        igx-avatar {
+            --ig-size: #{if($variant == 'indigo', 3, 1)};
+        }
+
         &:empty {
             display: none;
         }
@@ -220,14 +219,9 @@
         display: flex;
         align-items: center;
         order: 1;
-        color: var-get($theme, 'actions-text-color');
         margin-inline-start: auto;
         gap: rem(8px);
 
-        [igxIconButton] {
-            color: var-get($theme, 'actions-text-color');
-        }
-
         &:empty {
             display: none;
         }
@@ -239,15 +233,16 @@
         order: 0;
         gap: rem(8px);
 
-        [igxIconButton] {
-            color: var-get($theme, 'actions-text-color');
-        }
-
         &:empty {
             display: none;
         }
     }
 
+    %igx-card-actions__start,
+    %igx-card-actions__end {
+        color: var-get($theme, 'actions-text-color');
+    }
+
     %igx-card-actions__start--justify,
     %igx-card-actions__end--justify {
         justify-content: space-around;

package/lib/core/styles/components/carousel/_carousel-theme.scss

@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin carousel($theme) {
-    @include css-vars($theme, 'igx-carousel');
+    @include css-vars($theme);
     @include scale-in-center();
     @include scale-out-center();
 

package/lib/core/styles/components/checkbox/_checkbox-theme.scss

@@ -7,7 +7,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin checkbox($theme) {
-    @include css-vars($theme, 'igx-checkbox');
+    @include css-vars($theme);
     $theme-variant: map.get($theme, '_meta', 'variant');
     $variant: map.get($theme, '_meta', 'theme');
     $material-theme: $variant == 'material';

package/lib/core/styles/components/chip/_chip-theme.scss

@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin chip($theme) {
-    @include css-vars($theme, 'igx-chip, .igx-chip__ghost');
+    @include css-vars($theme);
     $chip-max-width: 32ch;
 
     $variant: map.get($theme, '_meta', 'theme');

package/lib/core/styles/components/column-actions/_column-actions-theme.scss

@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin column-actions($theme) {
-    @include css-vars($theme, 'igx-column-actions');
+    @include css-vars($theme);
     $variant: map.get($theme, '_meta', 'theme');
 
     %column-actions-display {

package/lib/core/styles/components/combo/_combo-theme.scss

@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin combo($theme) {
-    @include css-vars($theme, 'igx-combo, igx-simple-combo');
+    @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
 

package/lib/core/styles/components/date-picker/_date-picker-theme.scss

@@ -2,13 +2,6 @@
 @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.

package/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss

@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin date-range-picker($theme) {
-    @include css-vars($theme, 'igx-date-range-picker');
+    @include css-vars($theme);
 
     %igx-date-range-picker {
         display: flex;

package/lib/core/styles/components/divider/_divider-theme.scss

@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin divider($theme) {
-    @include css-vars($theme, 'igx-divider');
+    @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
 

package/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.

package/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss

@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin expansion-panel($theme) {
-    @include css-vars($theme, 'igx-expansion-panel');
+    @include css-vars($theme);
     $variant: map.get($theme, '_meta', 'theme');
 
     $panel-padding: pad-block(rem(16px)) pad-inline(rem(24px));

package/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -4,13 +4,6 @@
 @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.

package/lib/core/styles/components/grid/_grid-theme.scss

@@ -18,8 +18,7 @@
 /// @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');
-
+    @include css-vars($theme);
     @include scale-in-ver-center();
 
     $variant: map.get($theme, '_meta', 'theme');

package/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,
@@ -28,6 +24,7 @@
 
     @return extend($theme, (
         name: $name,
+        selector: $selector,
     ));
 }
 
@@ -35,7 +32,8 @@
 /// @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');
+    @include css-vars($theme);
+
     $variant: map.get($theme, '_meta', 'theme');
 
     $chip-height-material: (

package/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss

@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin grid-toolbar($theme) {
-    @include css-vars($theme, 'igx-grid-toolbar, .igx-grid-toolbar__dd-list');
+    @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
     $bootstrap-theme: $variant == 'bootstrap';

package/lib/core/styles/components/icon/_icon-theme.scss

@@ -1,12 +1,12 @@
+// 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.
 @mixin icon($theme) {
-    @include css-vars($theme, 'igx-icon');
+    @include css-vars($theme);
 
     $size: var-get($theme, 'size');
 

package/lib/core/styles/components/input/_input-group-theme.scss

@@ -6,10 +6,10 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin input-group($theme) {
+    @include css-vars($theme);
+
     // 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 +323,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 +1958,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,

package/lib/core/styles/components/list/_list-theme.scss

@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin list($theme) {
-    @include css-vars($theme, 'igx-list');
+    @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
     $bootstrap-theme: $variant == 'bootstrap';

package/lib/core/styles/components/navbar/_navbar-theme.scss

@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin navbar($theme) {
-    @include css-vars($theme, 'igx-navbar');
+    @include css-vars($theme);
     $variant: map.get($theme, '_meta', 'theme');
 
     $navbar-padding: rem(16px);

package/lib/core/styles/components/navdrawer/_navdrawer-theme.scss

@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin navdrawer($theme) {
-    @include css-vars($theme, 'igx-nav-drawer');
+   @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
     $drawer-icon-size: rem(24px);

package/lib/core/styles/components/paginator/_paginator-theme.scss

@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin paginator($theme) {
-    @include css-vars($theme, 'igx-paginator');
+    @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
 

package/lib/core/styles/components/progress/circular/_circular-theme.scss

@@ -8,8 +8,7 @@
 @mixin progress-circular($theme) {
     // Include rotate animation
     @include rotate-center();
-
-    @include css-vars($theme, 'igx-circular-bar');
+    @include css-vars($theme);
 
     $animation-direction: normal;
     $animation-direction-rtl: reverse;

package/lib/core/styles/components/progress/linear/_linear-theme.scss

@@ -52,7 +52,7 @@ $easing-curves: (
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin progress-linear($theme) {
-    @include css-vars($theme, 'igx-linear-bar');
+    @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
 

package/lib/core/styles/components/query-builder/_query-builder-theme.scss

@@ -1,18 +1,11 @@
 @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.
 @mixin query-builder($theme) {
-    @include css-vars($theme, 'igx-query-builder');
+    @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
     $theme-variant: map.get($theme, '_meta', 'variant');

package/lib/core/styles/components/radio/_radio-theme.scss

@@ -7,7 +7,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin radio($theme) {
-    @include css-vars($theme, 'igx-radio');
+    @include css-vars($theme);
     @include scale-in-out($start-scale: .9);
 
     $theme-variant: map.get($theme, '_meta', 'variant');

package/lib/core/styles/components/select/_select-theme.scss

@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin select($theme) {
-    @include css-vars($theme, 'igx-select');
+    @include css-vars($theme);
     $variant: map.get($theme, '_meta', 'theme');
 
     %igx-select {

package/lib/core/styles/components/slider/_slider-theme.scss

@@ -7,7 +7,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin slider($theme) {
-    @include css-vars($theme, 'igx-slider');
+    @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
 

package/lib/core/styles/components/snackbar/_snackbar-theme.scss

@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin snackbar($theme) {
-    @include css-vars($theme, 'igx-snackbar');
+    @include css-vars($theme);
     @include fade-in();
 
     $variant: map.get($theme, '_meta', 'theme');

package/lib/core/styles/components/splitter/_splitter-theme.scss

@@ -7,7 +7,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin splitter($theme) {
-    @include css-vars($theme, 'igx-splitter');
+    @include css-vars($theme);
     $splitter-color: var-get($theme, 'bar-color');
     $hitbox-size: rem(4px);
     $debug-hitbox: false;

package/lib/core/styles/components/stepper/_stepper-theme.scss

@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin stepper($theme) {
-    @include css-vars($theme, 'igx-stepper');
+    @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
 

package/lib/core/styles/components/switch/_switch-theme.scss

@@ -7,7 +7,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin switch($theme) {
-    @include css-vars($theme, 'igx-switch');
+    @include css-vars($theme);
     @include scale-in-out($start-scale: .9);
 
     $variant: map.get($theme, '_meta', 'theme');

package/lib/core/styles/components/tabs/_tabs-theme.scss

@@ -11,7 +11,7 @@
 /// @requires ripple-theme
 /// @requires {mixin} ripple
 @mixin tabs($theme) {
-    @include css-vars($theme, 'igx-tabs');
+    @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
     $not-bootstrap-theme: $variant != 'bootstrap';

package/lib/core/styles/components/toast/_toast-theme.scss

@@ -1,12 +1,11 @@
 @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.
 @mixin toast($theme) {
-    @include css-vars($theme, 'igx-toast');
+    @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
     $width: rem(52px);

package/lib/core/styles/components/tree/_tree-theme.scss

@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin tree($theme) {
-    @include css-vars($theme, 'igx-tree-node');
+    @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
     $indigo-theme: $variant == 'indigo';

package/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,6 @@
     $enhanced-accessibility: false
 ) {
     @include color.configure-colors($enhanced-accessibility);
-    @include themes.configure-prefix('igx');
 
     // Angular hack for binding to [hidden] property
     // not working

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "20.1.1",
+  "version": "20.1.2",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",
@@ -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",
     "@igniteui/material-icons-extended": "^3.1.0"
   },
   "peerDependencies": {