igniteui-theming 22.1.0 → 23.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "22.1.0",
+  "version": "23.1.0",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/themes/components/badge/_badge-theme.scss

@@ -81,7 +81,7 @@
             border-color: $border-color,
             border-radius: $border-radius,
             background-color: $background-color,
-            shadow: $shadow,
+            elevation: $shadow,
             size: $size,
             dot-size: $dot-size,
         )

package/sass/themes/components/bottom-nav/_bottom-nav-theme.scss

@@ -105,7 +105,7 @@
             icon-disabled-color: $icon-disabled-color,
             label-disabled-color: $label-disabled-color,
             border-color: $border-color,
-            shadow: $shadow,
+            elevation: $shadow,
         )
     );
 }

package/sass/themes/components/button/_button-theme.scss

@@ -222,10 +222,10 @@
 
                             shadow-color: $shadow-color,
 
-                            resting-shadow: $_resting-shadow,
-                            hover-shadow: $_hover-shadow,
-                            focus-shadow: $_focus-shadow,
-                            active-shadow: $_active-shadow,
+                            resting-elevation: $_resting-shadow,
+                            hover-elevation: $_hover-shadow,
+                            focus-elevation: $_focus-shadow,
+                            active-elevation: $_active-shadow,
 
                             disabled-background: $disabled-background,
                             disabled-foreground: $disabled-foreground,

package/sass/themes/components/button/_contained-button-theme.scss

@@ -294,10 +294,10 @@
             focus-visible-border-color: $focus-visible-border-color,
             active-border-color: $active-border-color,
             shadow-color: $shadow-color,
-            resting-shadow: $resting-shadow,
-            hover-shadow: $hover-shadow,
-            focus-shadow: $focus-shadow,
-            active-shadow: $active-shadow,
+            resting-elevation: $resting-shadow,
+            hover-elevation: $hover-shadow,
+            focus-elevation: $focus-shadow,
+            active-elevation: $active-shadow,
             disabled-background: $disabled-background,
             disabled-foreground: $disabled-foreground,
             disabled-icon-color: $disabled-icon-color,

package/sass/themes/components/button/_fab-button-theme.scss

@@ -270,10 +270,10 @@
             focus-visible-border-color: $focus-visible-border-color,
             active-border-color: $active-border-color,
             shadow-color: $shadow-color,
-            resting-shadow: $resting-shadow,
-            hover-shadow: $hover-shadow,
-            focus-shadow: $focus-shadow,
-            active-shadow: $active-shadow,
+            resting-elevation: $resting-shadow,
+            hover-elevation: $hover-shadow,
+            focus-elevation: $focus-shadow,
+            active-elevation: $active-shadow,
             disabled-background: $disabled-background,
             disabled-foreground: $disabled-foreground,
             disabled-icon-color: $disabled-icon-color,

package/sass/themes/components/button/_flat-button-theme.scss

@@ -329,10 +329,10 @@
             focus-visible-border-color: $focus-visible-border-color,
             active-border-color: $active-border-color,
             shadow-color: $shadow-color,
-            resting-shadow: $resting-shadow,
-            hover-shadow: $hover-shadow,
-            focus-shadow: $focus-shadow,
-            active-shadow: $active-shadow,
+            resting-elevation: $resting-shadow,
+            hover-elevation: $hover-shadow,
+            focus-elevation: $focus-shadow,
+            active-elevation: $active-shadow,
             disabled-background: $disabled-background,
             disabled-foreground: $disabled-foreground,
             disabled-icon-color: $disabled-icon-color,

package/sass/themes/components/button/_outlined-button-theme.scss

@@ -395,10 +395,10 @@
             focus-visible-border-color: $focus-visible-border-color,
             active-border-color: $active-border-color,
             shadow-color: $shadow-color,
-            resting-shadow: $resting-shadow,
-            hover-shadow: $hover-shadow,
-            focus-shadow: $focus-shadow,
-            active-shadow: $active-shadow,
+            resting-elevation: $resting-shadow,
+            hover-elevation: $hover-shadow,
+            focus-elevation: $focus-shadow,
+            active-elevation: $active-shadow,
             disabled-background: $disabled-background,
             disabled-foreground: $disabled-foreground,
             disabled-icon-color: $disabled-icon-color,

package/sass/themes/components/button-group/_button-group-theme.scss

@@ -293,7 +293,7 @@
             disabled-selected-background: $disabled-selected-background,
             disabled-selected-border-color: $disabled-selected-border-color,
             border: $border,
-            shadow: $shadow,
+            elevation: $shadow,
             idle-shadow-color: $idle-shadow-color,
             selected-shadow-color: $selected-shadow-color,
         )

package/sass/themes/components/card/_card-theme.scss

@@ -96,8 +96,8 @@
             subtitle-text-color: $subtitle-text-color,
             content-text-color: $content-text-color,
             actions-text-color: $actions-text-color,
-            resting-shadow: $resting-shadow,
-            hover-shadow: $hover-shadow,
+            resting-elevation: $resting-shadow,
+            hover-elevation: $hover-shadow,
         )
     );
 }

package/sass/themes/components/carousel/_carousel-theme.scss

@@ -212,7 +212,7 @@
             slide-background: $slide-background,
 
             border-radius: $border-radius,
-            button-shadow: $button-shadow,
+            button-elevation: $button-shadow,
 
             button-background: $button-background,
             button-disabled-background: $button-disabled-background,

package/sass/themes/components/chip/_chip-theme.scss

@@ -247,7 +247,7 @@
             focus-selected-background: $focus-selected-background,
             focus-selected-border-color: $focus-selected-border-color,
 
-            ghost-shadow: $ghost-shadow,
+            ghost-elevation: $ghost-shadow,
             remove-icon-color: $remove-icon-color,
             remove-icon-color-focus: $remove-icon-color-focus,
             focus-selected-outline-color: $focus-selected-outline-color,

package/sass/themes/components/combo/_combo-theme.scss

@@ -54,7 +54,11 @@
     $toggle-button-foreground-filled: null
 ) {
     $name: #{config.variable-prefix() + '-' + 'combo'};
-    $selector: (#{config.element-prefix() + '-' + 'combo'}, #{config.element-prefix() + '-' + 'simple-combo'});
+    $selector: (
+        #{config.element-prefix() + '-' + 'combo'},
+        #{config.element-prefix() + '-' + 'simple-combo'},
+        '.igx-drop-down__list'
+    );
     $combo-schema: ();
 
     @if map.has-key($schema, 'combo') {

package/sass/themes/components/dialog/_dialog-theme.scss

@@ -76,7 +76,7 @@
             background: $background,
             title-color: $title-color,
             message-color: $message-color,
-            shadow: $shadow,
+            elevation: $shadow,
             border-color: $border-color,
         )
     );

package/sass/themes/components/drop-down/_drop-down-theme.scss

@@ -211,7 +211,7 @@
             selected-focus-item-text-color: $selected-focus-item-text-color,
             disabled-item-background: $disabled-item-background,
             disabled-item-text-color: $disabled-item-text-color,
-            shadow: $shadow,
+            elevation: $shadow,
             border-color: $border-color,
             border-width: $border-width,
             size: $size,

package/sass/themes/components/grid/_grid-theme.scss

@@ -569,8 +569,8 @@
             tree-selected-filtered-cell-text-color: $tree-selected-filtered-cell-text-color,
 
             row-highlight: $row-highlight,
-            grid-shadow: $grid-shadow,
-            drag-shadow: $drag-shadow,
+            grid-elevation: $grid-shadow,
+            drag-elevation: $drag-shadow,
             row-ghost-background: $row-ghost-background,
             row-drag-color: $row-drag-color,
             drop-area-border-radius: $drop-area-border-radius,

package/sass/themes/components/input/_input-theme.scss

@@ -20,6 +20,8 @@
 /// @param {Color} $focused-text-color [null] - The input text color in the focused state.
 /// @param {Color} $disabled-text-color [null] - The input text color in the disabled state.
 /// @param {Color} $helper-text-color [null] - The helper text color.
+/// @param {Color} $text-error-color [null] - The color used for the error message.
+/// @param {Color} $icon-error-color [null] - The color used for the error icon.
 /// @param {Color} $input-prefix-color [null] - The input prefix color in the idle state.
 /// @param {Color} $input-prefix-background [null] - The background color of an input prefix in the idle state.
 /// @param {Color} $input-prefix-color--filled [null] - The input prefix color in the filled state.
@@ -80,6 +82,8 @@
     $filled-text-hover-color: null,
     $focused-text-color: null,
     $helper-text-color: null,
+    $text-error-color: null,
+    $icon-error-color: null,
     $disabled-text-color: null,
 
     $idle-secondary-color: null,
@@ -490,6 +494,8 @@
             focused-text-color: $focused-text-color,
             disabled-text-color: $disabled-text-color,
             helper-text-color: $helper-text-color,
+            text-error-color: $text-error-color,
+            icon-error-color: $icon-error-color,
             box-border-radius: $box-border-radius,
             border-border-radius: $border-border-radius,
             search-border-radius: $search-border-radius,
@@ -511,9 +517,9 @@
             border-disabled-background: $border-disabled-background,
             search-background: $search-background,
             search-disabled-background: $search-disabled-background,
-            search-resting-shadow: $search-resting-shadow,
-            search-hover-shadow: $search-hover-shadow,
-            search-disabled-shadow: $search-disabled-shadow,
+            search-resting-elevation: $search-resting-shadow,
+            search-hover-elevation: $search-hover-shadow,
+            search-disabled-elevation: $search-disabled-shadow,
             success-secondary-color: $success-secondary-color,
             warning-secondary-color: $warning-secondary-color,
             error-secondary-color: $error-secondary-color,

package/sass/themes/components/navbar/_navbar-theme.scss

@@ -95,7 +95,7 @@
             text-color: $text-color,
             idle-icon-color: $idle-icon-color,
             hover-icon-color: $hover-icon-color,
-            shadow: $shadow,
+            elevation: $shadow,
         )
     );
 }

package/sass/themes/components/navdrawer/_navdrawer-theme.scss

@@ -147,7 +147,7 @@
             item-hover-icon-color: $item-hover-icon-color,
             item-disabled-text-color: $item-disabled-text-color,
             item-disabled-icon-color: $item-disabled-icon-color,
-            shadow: $shadow,
+            elevation: $shadow,
         )
     );
 }

package/sass/themes/components/snackbar/_snackbar-theme.scss

@@ -70,7 +70,7 @@
             background: $background,
             text-color: $text-color,
             button-color: $button-color,
-            shadow: $shadow,
+            elevation: $shadow,
         )
     );
 }

package/sass/themes/components/switch/_switch-theme.scss

@@ -263,9 +263,9 @@
             label-hover-color: $label-hover-color,
             label-disabled-color: $label-disabled-color,
 
-            resting-shadow: $resting-shadow,
-            hover-shadow: $hover-shadow,
-            disabled-shadow: $disabled-shadow,
+            resting-elevation: $resting-shadow,
+            hover-elevation: $hover-shadow,
+            disabled-elevation: $disabled-shadow,
 
             border-radius-track: $border-radius-track,
             border-radius-thumb: $border-radius-thumb,

package/sass/themes/components/tabs/_tabs-theme.scss

@@ -20,10 +20,13 @@
 /// @param {Color} $item-hover-color [null] - The text color used for the tabs on hover.
 /// @param {Color} $item-icon-color [null] - The color used for the tab icon.
 /// @param {Color} $item-active-icon-color [null] - The color used for the active tab icon.
+/// @param {Color} $item-active-hover-icon-color [null] - The color used for the active tab icon on hover and focus.
 /// @param {Color} $item-hover-icon-color [null] - The color used for the tab icon on hover.
 /// @param {Color} $item-disabled-icon-color [null] - The color used for the disabled tab icon.
 /// @param {Color} $item-active-color [null] - The color used for the active tabs text.
-/// @param {Color} $item-active-background [null] - The color used for the active/focused tab background.
+/// @param {Color} $item-active-hover-color [null] - The color used for the active tabs text on hover and focus.
+/// @param {Color} $item-active-background [null] - The color used for the active tab background.
+/// @param {Color} $item-active-hover-background [null] - The color used for the active tab background on hover and focus.
 /// @param {Color} $item-disabled-color [null] - The color used for the disabled tabs text.
 /// @param {Color} $indicator-color [null] - The color used for the active tab indicator.
 /// @param {Color} $button-color [null] - The color used for the button icon/text color.
@@ -51,10 +54,13 @@
     $item-hover-color: null,
     $item-icon-color: null,
     $item-active-icon-color: null,
+    $item-active-hover-icon-color: null,
     $item-hover-icon-color: null,
     $item-disabled-icon-color: null,
     $item-active-color: null,
+    $item-active-hover-color: null,
     $item-active-background: null,
+    $item-active-hover-background: null,
     $item-disabled-color: null,
     $indicator-color: null,
     $button-color: null,
@@ -82,7 +88,11 @@
     $variant: map.get($theme, '_meta', 'theme');
 
     @if not($item-active-background) and $item-background {
-        $item-active-background: dynamic-shade(var(--item-background));
+        $item-active-background: var(--item-background);
+    }
+
+    @if not($item-active-hover-background) and $item-active-background {
+        $item-active-hover-background: dynamic-shade(var(--item-active-background));
     }
 
     @if not($item-background) {
@@ -103,8 +113,24 @@
         }
     }
 
+    @if not($item-active-icon-color) and $item-active-color {
+        $item-active-icon-color: var(--item-active-color);
+    }
+
+    @if not($item-active-color) and $item-active-icon-color {
+        $item-active-color: var(--item-active-icon-color);
+    }
+
+    @if not($item-active-hover-color) and $item-active-color {
+        $item-active-hover-color: var(--item-active-color);
+    }
+
+    @if not($item-active-hover-icon-color) and $item-active-icon-color {
+        $item-active-hover-icon-color: var(--item-active-icon-color);
+    }
+
     @if not($item-active-background) {
-        @if $variant != 'bootstrap' {
+        @if $variant != 'bootstrap' and $variant != 'material' {
             @if not($item-active-icon-color) and $item-icon-color {
                 $item-active-icon-color: var(--item-icon-color);
             }
@@ -114,14 +140,6 @@
             }
         }
     } @else {
-        @if not($item-active-icon-color) and $item-active-color {
-            $item-active-icon-color: var(--item-active-color);
-        }
-
-        @if not($item-active-color) and $item-active-icon-color {
-            $item-active-color: var(--item-active-icon-color);
-        }
-
         @if not($item-active-icon-color) and $item-active-background {
             $item-active-icon-color: adaptive-contrast(var(--item-active-background));
         }
@@ -129,6 +147,14 @@
         @if not($item-active-color) and $item-active-background {
             $item-active-color: adaptive-contrast(var(--item-active-background));
         }
+
+        @if not($item-active-hover-icon-color) and $item-active-hover-background {
+            $item-active-hover-icon-color: adaptive-contrast(var(--item-active-hover-background));
+        }
+
+        @if not($item-active-hover-color) and $item-active-hover-background {
+            $item-active-hover-color: adaptive-contrast(var(--item-active-hover-background));
+        }
     }
 
     @if not($item-hover-background) {
@@ -162,13 +188,9 @@
             $border-color--hover: var(--border-color);
         }
     } @else {
-        @if not($item-background) {
-            @if not($indicator-color) and $item-text-color {
-                $indicator-color: var(--item-text-color);
-            }
-
-            @if not($indicator-color) and $item-icon-color {
-                $indicator-color: var(--item-icon-color);
+        @if not($item-active-background) {
+            @if not($indicator-color) and $item-active-color {
+                $indicator-color: var(--item-active-color);
             }
         } @else {
             @if not($indicator-color) and $item-active-color {
@@ -176,7 +198,7 @@
             }
 
             @if not($indicator-color) {
-                $indicator-color: adaptive-contrast(var(--item-background));
+                $indicator-color: adaptive-contrast(var(--item-active-background));
             }
         }
     }
@@ -249,10 +271,13 @@
             item-hover-background: $item-hover-background,
             item-icon-color: $item-icon-color,
             item-active-icon-color: $item-active-icon-color,
+            item-active-hover-icon-color: $item-active-hover-icon-color,
             item-hover-icon-color: $item-hover-icon-color,
             item-disabled-icon-color: $item-disabled-icon-color,
             item-active-color: $item-active-color,
+            item-active-hover-color: $item-active-hover-color,
             item-active-background: $item-active-background,
+            item-active-hover-background: $item-active-hover-background,
             item-disabled-color: $item-disabled-color,
             indicator-color: $indicator-color,
             button-color: $button-color,

package/sass/themes/components/time-picker/_time-picker-theme.scss

@@ -156,8 +156,8 @@
             header-background: $header-background,
             header-hour-text-color: $header-hour-text-color,
             background-color: $background-color,
-            modal-shadow: $modal-shadow,
-            dropdown-shadow: $dropdown-shadow,
+            modal-elevation: $modal-shadow,
+            dropdown-elevation: $dropdown-shadow,
             border-radius: $border-radius,
             border-color: $border-color,
             divider-color: $divider-color,

package/sass/themes/components/toast/_toast-theme.scss

@@ -69,7 +69,7 @@
             border-radius: $border-radius,
             text-color: $text-color,
             border-color: $border-color,
-            shadow: $shadow,
+            elevation: $shadow,
         )
     );
 }

package/sass/themes/components/tooltip/_tooltip-theme.scss

@@ -62,7 +62,7 @@
             background: $background,
             text-color: $text-color,
             border-radius: $border-radius,
-            shadow: $shadow,
+            elevation: $shadow,
         )
     );
 }

package/sass/themes/schemas/components/dark/_bottom-nav.scss

@@ -9,10 +9,24 @@
 
 /// Generates a dark material bottom-nav schema.
 /// @type {Map}
+/// @prop {Map} icon-selected-color [color: ('primary', 500)] - The icon color used for the selected item.
+/// @prop {Map} label-selected-color [color: ('primary', 500)] - The label color used for the selected item.
 /// @requires $material-bottom-nav
 $dark-material-bottom-nav: extend(
     $material-bottom-nav,
     (
+        icon-selected-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        label-selected-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
         _meta: (
             theme: 'material',
             variant: 'dark',
@@ -22,10 +36,24 @@ $dark-material-bottom-nav: extend(
 
 /// Generates a dark fluent bottom-nav schema.
 /// @type {Map}
+/// @prop {Map} label-selected-color [color: ('primary', 300)] - The label color used for the selected item.
+/// @prop {Map} icon-selected-color [color: ('primary', 300)] - The icon color used for the selected item.
 /// @requires $fluent-bottom-nav
 $dark-fluent-bottom-nav: extend(
     $fluent-bottom-nav,
     (
+        label-selected-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        icon-selected-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
         _meta: (
             theme: 'fluent',
             variant: 'dark',
@@ -35,10 +63,26 @@ $dark-fluent-bottom-nav: extend(
 
 /// Generates a dark bootstrap bottom-nav schema.
 /// @type {Map}
+/// @prop {Map} label-selected-color [color: ('primary', 300)] - The label color used for the selected item.
+/// @prop {Map} icon-selected-color [color: ('primary', 300)] - The icon color used for the selected item.
 /// @requires $bootstrap-bottom-nav
 $dark-bootstrap-bottom-nav: extend(
     $bootstrap-bottom-nav,
     (
+        label-selected-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
+        icon-selected-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
         _meta: (
             theme: 'bootstrap',
             variant: 'dark',

package/sass/themes/schemas/components/dark/_button-group.scss

@@ -104,19 +104,45 @@ $base-dark-button-group: (
 
 /// Generates a dark material button-group schema based on a mix of $light-button-group and $base-dark-button-group
 /// @type {Map}
-/// @prop {Map} item-focused-hover-background [color: ('gray', 500, .3)] - The focused & hover background color for button group items.
-/// @prop {Map} item-selected-focus-hover-background [color: ('gray', 400, .8)] - The background color for a selected item in focused & hover state in the button group.
+/// @prop {Map} item-selected-background [color: ('gray', 100)] - The background color for a selected item in the button group.
+/// @prop {Map} item-focused-hover-background [color: ('gray', 400, .5)] - The focused & hover background color for button group items.
+/// @prop {Map} item-selected-hover-background [color: ('gray', 300, .4)] - The background color for a selected item in hover state in the button group.
+/// @prop {Map} item-selected-focus-background [color: ('gray', 700, .28)] - The background color for a selected item in focus state in the button group.
+/// @prop {Map} item-selected-focus-hover-background [color: ('gray', 400, .5)] - The background color for a selected item in focused & hover state in the button group.
 /// @requires $material-button-group
 /// @requires $base-dark-button-group
 $dark-material-button-group: extend(
     $material-button-group,
     $base-dark-button-group,
     (
+        item-selected-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
         item-focused-hover-background: (
             color: (
                 'gray',
-                500,
-                0.3,
+                400,
+                0.5,
+            ),
+        ),
+
+        item-selected-hover-background: (
+            color: (
+                'gray',
+                300,
+                0.4,
+            ),
+        ),
+
+        item-selected-focus-background: (
+            color: (
+                'gray',
+                700,
+                0.28,
             ),
         ),
 
@@ -124,7 +150,7 @@ $dark-material-button-group: extend(
             color: (
                 'gray',
                 400,
-                0.8,
+                0.5,
             ),
         ),
         _meta: (