igniteui-angular 17.2.2 → 17.2.4

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

@@ -62,10 +62,12 @@
 
             [igxBottomNavHeaderIcon] {
                 @extend %igx-tab-icon !optional;
+                @extend %igx-tab-icon--disabled !optional;
             }
 
             [igxBottomNavHeaderLabel] {
                 @extend %igx-tab-label !optional;
+                @extend %igx-tab-label--disabled !optional;
             }
         }
     }

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

@@ -12,16 +12,19 @@
 ////
 
 /// If only background color is specified,
-/// the idle item color will be assigned automatically to a contrasting color.
+/// the label and icon colors will be assigned automatically to a contrasting color.
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {Map} $elevations [null] - The elevations (shadows) map to be used.
 /// @param {Color} $background [null] - The background color used for the toast.
-/// @param {Color} $idle-item-color [null] - The text-color used for the idle color.
-/// @param {Color} $active-item-color [null] - The text-color used for the active color.
+/// @param {Color} $label-color [null] - The label color used in idle state.
+/// @param {Color} $icon-color [null] - The icon color used in idle state.
+/// @param {Color} $label-selected-color [null] - The label color used in selected state.
+/// @param {Color} $icon-selected-color [null] - The icon color used in selected state.
+/// @param {Color} $icon-disabled-color [null] - The disabled color of the icon.
+/// @param {Color} $label-disabled-color [null] - The disabled color of the label.
+/// @param {Color} $border-color [null] - The border color of the bottom navigation.
 /// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the bar.
-///
 /// @requires $light-material-schema
-///
 /// @example scss Set a custom background color
 ///   $my-bottom-nav-theme: bottom-nav-theme($background: black);
 ///   // Pass the theme to the css-vars() mixin
@@ -29,11 +32,15 @@
 @function bottom-nav-theme(
     $schema: $light-material-schema,
     $elevations: null,
-
     $background: null,
-    $idle-item-color: null,
-    $active-item-color: null,
-    $shadow: null
+    $icon-color: null,
+    $icon-selected-color: null,
+    $label-color: null,
+    $label-selected-color: null,
+    $icon-disabled-color: null,
+    $label-disabled-color: null,
+    $border-color: null,
+    $shadow: null,
 ) {
     $name: 'igx-bottom-nav';
     $bottom-nav-schema: ();
@@ -46,9 +53,41 @@
 
     $theme: digest-schema($bottom-nav-schema);
 
-    @if not($idle-item-color) and $background {
+    $meta: map.get($theme, '_meta');
+
+    @if not($label-color) and $background {
+        @if meta.type-of($background) == 'color' {
+            $label-color: text-contrast($background);
+        }
+    }
+
+    @if not($icon-color) and $label-color {
+        @if meta.type-of($label-color) == 'color' {
+            $icon-color: $label-color;
+        }
+    }
+
+    @if not($icon-disabled-color) and $label-disabled-color {
+        @if meta.type-of($label-disabled-color) == 'color' {
+            $icon-disabled-color: $label-disabled-color;
+        }
+    }
+
+    @if not($label-disabled-color) and $icon-disabled-color {
+        @if meta.type-of($icon-disabled-color) == 'color' {
+            $label-disabled-color: $icon-disabled-color;
+        }
+    }
+
+    @if not($icon-selected-color) and $label-selected-color {
+        @if meta.type-of($background) == 'color' {
+            $icon-selected-color: $label-selected-color;
+        }
+    }
+
+    @if not($icon-color) and $background {
         @if meta.type-of($background) == 'color' {
-            $idle-item-color: rgba(text-contrast($background), .7);
+            $icon-color: text-contrast($background);
         }
     }
 
@@ -60,9 +99,18 @@
     @return extend($theme, (
         name: $name,
         background: $background,
-        idle-item-color: $idle-item-color,
-        active-item-color: $active-item-color,
-        shadow: $shadow
+        icon-color: $icon-color,
+        icon-selected-color: $icon-selected-color,
+        label-color: $label-color,
+        label-selected-color: $label-selected-color,
+        icon-disabled-color: $icon-disabled-color,
+        label-disabled-color: $label-disabled-color,
+        border-color: $border-color,
+        shadow: $shadow,
+        _meta: map.merge(if($meta, $meta, ()), (
+            variant: map.get($schema, '_meta', 'theme'),
+            theme-variant: map.get($schema, '_meta', 'variant')
+        )),
     ));
 }
 
@@ -72,6 +120,7 @@
 @mixin bottom-nav($theme) {
     @include css-vars($theme);
 
+    $variant: map.get($theme, '_meta', 'variant');
     $menu-height: rem(56px);
     $item-min-width: rem(80px);
     $item-max-width: rem(168px);
@@ -98,6 +147,7 @@
         inset-inline-end: 0;
         height: $menu-height;
         background: var-get($theme, 'background');
+        border-top: rem(1px) solid var-get($theme, 'border-color');
         overflow: hidden;
         z-index: 8;
     }
@@ -119,38 +169,46 @@
         position: relative;
         flex-flow: column nowrap;
         flex: 1;
+        gap: rem(4px);
         align-items: center;
         justify-content: center;
         min-width: $item-min-width;
         max-width: $item-max-width;
         height: 100%;
-        color: var-get($theme, 'idle-item-color');
         cursor: pointer;
         user-select: none;
         overflow: hidden;
         padding: $item-padding;
         -webkit-tap-highlight-color: transparent;
         outline-style: none;
+        color: var-get($theme, 'label-color');
 
         igx-icon {
             --component-size: 3;
+
+            @if $variant == 'indigo-design' {
+                --size: rem(16px);
+            }
         }
     }
 
     %igx-bottom-nav-menu-item--disabled {
-        opacity: .5;
+        @if $variant != 'indigo-design' {
+            opacity: .5;
+        }
+
         cursor: default;
         pointer-events: none;
     }
 
     %igx-bottom-nav-menu-item--selected {
-        color: var-get($theme, 'active-item-color');
         transition: color .15s $in-out-quad, opacity .25s $in-out-quad;
     }
 
     %igx-tab-label {
         @include ellipsis();
-        padding-block-start: rem(4px);
+
+        color: var-get($theme, 'label-color');
         max-width: 100%;
         text-align: center;
         transform: translateZ(0);
@@ -158,23 +216,48 @@
         z-index: 1;
     }
 
+    %igx-tab-label--disabled {
+        color: var-get($theme, 'label-disabled-color');
+    }
+
     %igx-tab-icon {
         display: flex;
         position: relative;
         justify-content: center;
-        height: rem(24px);
-        padding: 0 rem(8px);
-        transform: translateZ(0);
-        transition: transform .15s $in-out-quad;
+        color: var-get($theme, 'icon-color');
+
+        @if $variant != 'indigo-design' {
+            padding: 0 rem(8px);
+            height: rem(24px);
+            transform: translateZ(0);
+            transition: transform .15s $in-out-quad;
+        }
+
         z-index: 1;
     }
 
+    %igx-tab-icon--disabled {
+        color: var-get($theme, 'icon-disabled-color');
+    }
+
     %igx-tab-icon--selected {
-        transform: translateY(-2px);
+        color: var-get($theme, 'icon-selected-color');
+
+        inset-block-start: rem(-2px);
     }
 
     %igx-tab-label--selected {
-        transform: translateY(-2px) scale(1.166667);
+        color: var-get($theme, 'label-selected-color');
+    }
+
+    @if $variant != 'indigo-design' {
+        %igx-tab-icon--selected {
+            transform: translateY(-2px);
+        }
+
+        %igx-tab-label--selected {
+            transform: translateY(-2px) scale(1.166667);
+        }
     }
 }
 

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

@@ -65,8 +65,8 @@
     $hover-background: null,
     $hover-foreground: null,
 
-    $icon-color: null,
-    $icon-color-hover: null,
+    $icon-color: $foreground,
+    $icon-color-hover: $hover-foreground,
 
     $focus-background: null,
     $focus-foreground: null,
@@ -96,7 +96,7 @@
 
     $disabled-background: null,
     $disabled-foreground: null,
-    $disabled-icon-color: null,
+    $disabled-icon-color: $disabled-foreground,
     $disabled-border-color: null,
     $size: null,
 ) {
@@ -139,6 +139,12 @@
             }
         }
 
+        @if not($icon-color-hover) and $hover-foreground {
+            @if meta.type-of($hover-background) == 'color' {
+                $icon-color-hover: $hover-foreground;
+            }
+        }
+
         @if not($focus-background) and $background {
             $focus-background: color.scale($background, $lightness: 5%);
         }
@@ -761,6 +767,10 @@
             background: var-get($contained-theme, 'active-background');
             border-color: var-get($contained-theme, 'active-border-color');
             box-shadow: var-get($contained-theme, 'hover-shadow');
+
+            igx-icon {
+                color: var-get($contained-theme, 'active-foreground');
+            }
         }
 
         @if ($variant == 'indigo-design') {
@@ -898,6 +908,10 @@
             border-color: var-get($fab-theme, 'active-border-color');
             box-shadow: var-get($fab-theme, 'focus-shadow');
 
+            igx-icon {
+                color: var-get($fab-theme, 'active-foreground');
+            }
+
             @if ($variant == 'indigo-design') {
                 igx-icon {
                     color: var-get($outlined-theme, 'icon-color-hover');

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

@@ -73,12 +73,12 @@
     $shadow: null,
 
     $item-text-color: null,
-    $item-icon-color: null,
+    $item-icon-color: $item-text-color,
     $item-background: null,
     $item-border-color: null,
 
     $item-hover-text-color: null,
-    $item-hover-icon-color: null,
+    $item-hover-icon-color: $item-hover-text-color,
     $item-hover-background: null,
     $item-hover-border-color: null,
 
@@ -95,19 +95,19 @@
     $item-disabled-border: null,
 
     $item-selected-text-color: null,
-    $item-selected-icon-color: null,
+    $item-selected-icon-color: $item-selected-text-color,
     $item-selected-background: null,
     $item-selected-border-color: null,
 
     $item-selected-hover-text-color: null,
-    $item-selected-hover-icon-color: null,
+    $item-selected-hover-icon-color: $item-selected-hover-text-color,
     $item-selected-hover-background: null,
     $item-selected-hover-border-color: null,
     $item-selected-focus-background: null,
     $item-selected-focus-hover-background: null,
 
     $disabled-selected-text-color: null,
-    $disabled-selected-icon-color: null,
+    $disabled-selected-icon-color: $disabled-selected-text-color,
     $disabled-selected-background: null,
     $disabled-selected-border-color: null,
 ) {
@@ -140,7 +140,7 @@
 
     @if not($item-selected-background) and $item-background {
         @if meta.type-of($item-background) == 'color' {
-            $item-selected-text-color: text-contrast($item-background);
+            $item-selected-background: text-contrast($item-background);
         }
     }
 

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

@@ -23,6 +23,10 @@
             @extend %igx-navbar-left !optional;
         }
 
+        @include e(middle) {
+            @extend %igx-navbar-middle !optional;
+        }
+
         @include e(right) {
             @extend %igx-navbar-right !optional;
         }

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

@@ -12,9 +12,9 @@
 
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {Map} $elevations [null] - The elevations (shadows) map to be used.
-///
 /// @param {Color} $background [null] - The navbar background color.
 /// @param {Color} $text-color [null] - The navbar text color.
+/// @param {Color} $border-color [null] - The navbar border color.
 /// @param {box-shadow} $shadow [null] - The shadow of the navbar.
 /// @param {Color} $idle-icon-color [null] - The navbar idle icon color.
 /// @param {Color} $hover-icon-color [null] - The navbar hover icon color.
@@ -27,8 +27,8 @@
 @function navbar-theme(
     $schema: $light-material-schema,
     $elevations: null,
-
     $background: null,
+    $border-color: null,
     $text-color: null,
     $shadow: null,
     $idle-icon-color: null,
@@ -71,6 +71,7 @@
     @return extend($theme, (
         name: $name,
         background: $background,
+        border-color: $border-color,
         text-color: $text-color,
         idle-icon-color: $idle-icon-color,
         hover-icon-color: $hover-icon-color,
@@ -91,14 +92,13 @@
     $navbar-padding: rem(16px);
     $navbar-title-fz: rem(18px, 16px);
     $navbar-title-lh: rem(18px, 16px);
-    $navbar-title-margin: 0;
 
     %igx-navbar-display {
         display: flex;
         position: relative;
         flex-flow: row nowrap;
         align-items: center;
-        justify-content: space-between;
+        gap: rem(16px);
         width: 100%;
         min-height: rem(56px);
         max-height: rem(128px);
@@ -108,9 +108,27 @@
         box-shadow: var-get($theme, 'shadow');
         z-index: 4;
         overflow: hidden;
+        border-bottom: rem(1px) solid var-get($theme, 'border-color');
+
+        igx-avatar,
+        igx-input-group,
+        [igxIconButton],
+        igc-avatar,
+        igc-input,
+        igc-icon-button {
+            --ig-size: 1;
+        }
 
-        @if $variant == 'bootstrap' {
-            border-bottom: rem(1px) solid var-get($theme, 'border-color');
+        [igxButton],
+        igc-button {
+            --ig-size: 2;
+        }
+
+        @if $variant == 'indigo-design' {
+            igc-icon-button,
+            [igxIconButton] {
+                --ig-size: 2;
+            }
         }
     }
 
@@ -121,47 +139,70 @@
 
     %igx-navbar-title {
         @include line-clamp(4, true, true);
-        margin: $navbar-title-margin;
+        margin: 0;
         flex-grow: 1;
         user-select: text;
         display: flex;
         flex-direction: row;
     }
 
-    %igx-navbar-bundle {
-        @extend %igx-navbar-part;
-        user-select: none;
+    %igx-navbar-left {
+        &:not(:empty) {
+            @if $variant != 'indigo-design' {
+                margin-inline-end: rem(16px)
+            }
+        }
+    }
 
-        > * + * {
-            margin-inline-start: rem(16px);
+    %igx-navbar-middle {
+        flex-grow: 1;
+    }
+
+    %igx-navbar-right {
+        gap: if($variant == 'indigo-design', rem(8px), rem(16px));
+    }
+
+    %igx-navbar-left,
+    %igx-navbar-right {
+        &:empty {
+            display: none;
         }
     }
 
-    %igx-navbar-icon-display,
-    %igx-navbar-part {
+    %igx-navbar-left,
+    %igx-navbar-middle,
+    %igx-navbar-right {
+        display: flex;
+        align-items: center;
+
         igx-icon,
-        [igxIconButton] {
+        igc-icon {
             --component-size: 3;
-
             cursor: pointer;
-            color: var-get($theme, 'idle-icon-color');
+        }
+
+        > igx-icon,
+        > igc-icon {
             transition: color .15s $out-quad;
+            color: var-get($theme, 'idle-icon-color');
 
             &:hover {
                 color: var-get($theme, 'hover-icon-color');
             }
+
+            user-select: none;
         }
-    }
 
-    %igx-navbar-left {
-        @extend %igx-navbar-bundle;
-        @extend %igx-navbar-icon-display;
-        flex-grow: 1;
-    }
+        @if $variant == 'indigo-design' {
+            igx-icon,
+            igc-icon {
+                --component-size: 2;
 
-    %igx-navbar-right {
-        @extend %igx-navbar-bundle;
-        @extend %igx-navbar-icon-display;
+                padding: rem(6px);
+                width: auto;
+                height: auto;
+            }
+        }
     }
 
     igx-navbar-action,

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

@@ -141,26 +141,36 @@
 @mixin navdrawer($theme) {
     @include css-vars($theme);
 
-    $drawer-icon-size: rem(24px);
     $drawer-item-margin: rem(8px);
-    $text-side-padding: rem(8px);
     $drawer-item-min-h: auto;
     $drawer-item-max-h: rem(48px);
     $drawer-item-min-w: rem(32px);
 
     $variant: map.get($theme, '_meta', 'variant');
 
+    $drawer-width: rem(240px);
+    $drawer-mini-width: map.get((
+        material: rem(68px),
+        fluent: rem(68px),
+        bootstrap: rem(68px),
+        indigo-design: rem(48px)
+    ), $variant);
+
     %navdrawer-display {
         transition: flex-basis;
         transition-duration: .3s;
         transition-timing-function: $out-quad;
         flex-shrink: 0;
+        flex-basis: $drawer-width;
+
+        &:has(.igx-nav-drawer__aside--mini) {
+            flex-basis: $drawer-mini-width;
+        }
     }
 
     %aside {
         position: fixed;
         height: 100%;
-        max-width: 90%;
         min-height: 100%;
         overflow-x: hidden;
         background: var-get($theme, 'background');
@@ -173,6 +183,11 @@
         box-shadow: var-get($theme, 'shadow');
         border-inline-end: rem(1px) solid var-get($theme, 'border-color');
         border-radius: var-get($theme, 'border-radius');
+
+        @if $variant == 'indigo-design' {
+            transition: padding, width, transform;
+            padding: rem(8px);
+        }
     }
 
     %aside-panning {
@@ -211,6 +226,10 @@
         }
 
         box-shadow: none;
+
+        @if $variant == 'indigo-design' {
+            padding: 0;
+        }
     }
 
     %aside--right {
@@ -221,16 +240,11 @@
     }
 
     %aside--mini {
-        width: rem(60px);
+        width: $drawer-mini-width;
         transition-duration: .2s, .2s;
 
         %item {
             justify-content: center;
-            @if $variant == 'indigo-design' {
-                max-width: rem(32px);
-                // important is needed to override the typography margins
-                margin: rem(14px) auto !important;
-            }
 
             igx-icon {
                 margin-inline-start: 0;
@@ -239,7 +253,7 @@
     }
 
     %aside--normal {
-        width: rem(242px);
+        width: $drawer-width;
         transition-duration: .3s, .3s;
     }
 
@@ -283,19 +297,6 @@
         color: var-get($theme, 'item-text-color');
         max-height: $drawer-item-max-h;
         min-width: $drawer-item-min-w;
-
-        @if $variant != 'indigo-design' {
-            // important is needed to override the typography margins
-            margin: $drawer-item-margin !important;
-            padding: rem(12px) rem(8px);
-            gap: rem(32px);
-        } @else {
-            // important is needed to override the typography margins
-            margin: rem(15px) $drawer-item-margin !important;
-            padding: rem(4px);
-            gap: calc(rem(32px) - #{$text-side-padding});
-        }
-
         cursor: pointer;
         user-select: none;
         outline: transparent;
@@ -306,18 +307,26 @@
         border: none;
         justify-content: flex-start;
 
+        @if $variant != 'indigo-design' {
+            // important is needed to override the typography margins
+            margin: $drawer-item-margin !important;
+            padding: rem(12px) rem(8px);
+            gap: rem(32px);
+        } @else {
+            // important is needed to override the typography margins
+            margin: 0 !important;
+            margin-block-end: rem(4px) !important;
+            padding: rem(8px) rem(16px);
+            gap: rem(16px);
+            width: 100%;
+        }
+
         igx-icon {
             --component-size: 3;
-
             color: var-get($theme, 'item-icon-color');
-            @if $variant == 'indigo-design' {
-                margin-inline-start: rem(4px);
-            }
-        }
 
-        span {
             @if $variant == 'indigo-design' {
-                padding-inline-start: $text-side-padding;
+                --component-size: 2;
             }
         }
 
@@ -375,9 +384,6 @@
             box-shadow: none;
 
             igx-icon {
-                width: var(--igx-icon-size, #{$drawer-icon-size});
-                height: var(--igx-icon-size, #{$drawer-icon-size});
-                font-size: var(--igx-icon-size, #{$drawer-icon-size});
                 margin: 0;
             }
 
@@ -394,6 +400,10 @@
         padding: rem(12px) rem(16px);
         white-space: nowrap;
         color: var-get($theme, 'item-header-text-color');
+
+        @if $variant == 'indigo-design' {
+            padding-block: rem(8px);
+        }
     }
 
     %style-dummy {