igniteui-angular 20.0.7 → 20.0.9

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

@@ -1,271 +1,7 @@
 @use 'sass:map';
-@use 'sass:meta';
-@use 'sass:color';
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
 @use 'igniteui-theming/sass/animations/easings' as *;
 
-////
-/// @group themes
-/// @access public
-/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
-////
-
-/// Chip Theme
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {List} $border-radius [null] - The chip border-radius.
-///
-/// @param {Color} $text-color [null] - The chip text color.
-/// @param {Color} $background [null] - The chip background color.
-/// @param {Color} $border-color [null] - The chip border color.
-///
-/// @param {Color} $disabled-text-color [null] - The disabled chip text color.
-/// @param {Color} $disabled-background [null] - The disabled chip background color.
-/// @param {Color} $disabled-border-color [null] - The disabled chip border color.
-///
-/// @param {Color} $ghost-background [null] - The chip ghost background color.
-/// @param {box-shadow} $ghost-shadow [null] - The chip ghost shadow.
-///
-/// @param {Color} $hover-text-color [null] - The chip text hover color.
-/// @param {Color} $hover-background [null] - The chip hover background color.
-/// @param {Color} $hover-border-color [null] - The chip hover border color.
-///
-/// @param {Color} $focus-text-color [null] - The chip text focus color.
-/// @param {Color} $focus-background [null] - The chip focus background color.
-/// @param {color} $focus-border-color [null] - The chip focus border color.
-///
-/// @param {color} $selected-text-color [null] - The selected chip text color.
-/// @param {color} $selected-background [null] - The selected chip background color.
-/// @param {color} $selected-border-color [null] The selected chip border color.
-///
-/// @param {color} $hover-selected-text-color [null] - The selected chip hover text color.
-/// @param {color} $hover-selected-background [null] - The selected chip hover background color.
-/// @param {color} $hover-selected-border-color [null] - The selected chip hover border color.
-///
-/// @param {color} $focus-selected-text-color [null] - The selected chip text focus color.
-/// @param {color} $focus-selected-background [null] - The selected chip focus background color.
-/// @param {color} $focus-selected-border-color [null] - The selected chip focus border color.
-///
-/// @param {color} $remove-icon-color [null] - The remove icon color for the chip.
-/// @param {color} $remove-icon-color-focus [null] - The remove icon color on focus for the chip.
-///
-/// @requires $light-material-schema
-///
-/// @example scss Change the background color
-///   $my-chip-theme: igx-chip-theme($background: black);
-///   // Pass the theme to the css-vars mixin
-///   @include css-vars($my-chip-theme);
-@function chip-theme(
-    $schema: $light-material-schema,
-    $border-radius: null,
-
-    $text-color: null,
-    $background: null,
-    $border-color: null,
-    $ghost-background: null,
-
-    $disabled-text-color: null,
-    $disabled-background: null,
-    $disabled-border-color: null,
-
-    $hover-text-color: null,
-    $hover-background: null,
-    $hover-border-color: null,
-
-    $focus-text-color: null,
-    $focus-background: null,
-    $focus-border-color: null,
-    $focus-outline-color: null,
-
-    $selected-text-color: null,
-    $selected-background: null,
-    $selected-border-color: null,
-
-    $hover-selected-text-color: null,
-    $hover-selected-background: null,
-    $hover-selected-border-color: null,
-
-    $focus-selected-text-color: null,
-    $focus-selected-background: null,
-    $focus-selected-border-color: null,
-    $focus-selected-outline-color: null,
-
-    $ghost-shadow: null,
-    $remove-icon-color: null,
-    $remove-icon-color-focus: null,
-    $size: null,
-) {
-    $name: 'igx-chip';
-    $selector: 'igx-chip, .igx-chip__ghost';
-    $chip-schema: ();
-
-    @if map.has-key($schema, 'chip') {
-        $chip-schema: map.get($schema, 'chip');
-    } @else {
-        $chip-schema: $schema;
-    }
-
-    $theme: digest-schema($chip-schema);
-    $variant: map.get($theme, '_meta', 'theme');
-
-    @if not($text-color) and $background {
-        $text-color: adaptive-contrast(var(--background));
-    }
-
-    @if not($border-color) and $background {
-        $border-color: var(--background);
-    }
-
-    @if not($hover-background) and $background {
-        $hover-background: hsl(from var(--background) h s calc(l * 0.9));
-    }
-
-    @if not($hover-text-color) and $hover-background {
-        $hover-text-color: adaptive-contrast(var(--hover-background));
-    }
-
-    @if not($focus-background) and $background {
-        $focus-background: hsl(from var(--background) h s calc(l * 0.8));
-    }
-
-    @if $variant == 'fluent' {
-        @if not($focus-background) and $selected-background {
-            $focus-background: var(--selected-background);
-        }
-    }
-
-    @if not($focus-text-color) and $focus-background {
-        $focus-text-color: adaptive-contrast(var(--focus-background));
-    }
-
-    @if $variant != 'indigo' and $variant != 'fluent' {
-        @if not($selected-background) and $background {
-            $selected-background: var(--background);
-        }
-    } @else {
-        @if not($selected-background) and $background {
-            $selected-background: hsl(from var(--background) h s calc(l * 1.1));
-        }
-    }
-
-    @if not($selected-text-color) and $selected-background {
-        $selected-text-color: adaptive-contrast(var(--selected-background));
-    }
-
-    @if not($hover-selected-background) and $selected-background {
-        $hover-selected-background: hsl(from var(--selected-background) h s calc(l * 0.9));
-    }
-
-    @if not($hover-selected-text-color) and $hover-selected-background {
-        $hover-selected-text-color: adaptive-contrast(var(--hover-selected-background));
-    }
-
-    @if $variant != 'indigo' {
-        @if not($focus-selected-background) and $selected-background {
-            $focus-selected-background: hsl(from var(--selected-background) h s calc(l * 0.8));
-        }
-    } @else {
-        @if not($focus-selected-background) and $selected-background {
-            $focus-selected-background: var(--selected-background);
-        }
-    }
-
-    @if not($focus-selected-text-color) and $focus-selected-background {
-        $focus-selected-text-color: adaptive-contrast(var(--focus-selected-background));
-    }
-
-    @if not($hover-border-color) and $border-color {
-        $hover-border-color: var(--border-color);
-    }
-
-    @if not($focus-border-color) and $border-color {
-        $focus-border-color: var(--border-color);
-    }
-
-    @if not($selected-border-color) and $border-color {
-        $selected-border-color: var(--border-color);
-    }
-
-    @if not($hover-selected-border-color) and $border-color {
-        $hover-selected-border-color: var(--border-color);
-    }
-
-    @if not($focus-selected-border-color) and $border-color {
-        $focus-selected-border-color: var(--border-color);
-    }
-
-    @if $variant == 'indigo' {
-        @if not($selected-border-color) and $selected-background {
-            $selected-border-color: var(--selected-background);
-        }
-
-        @if not($hover-selected-border-color) and $hover-selected-background {
-            $hover-selected-border-color: var(--hover-selected-background);
-        }
-
-        @if not($focus-selected-border-color) and $focus-selected-background {
-            $focus-selected-border-color: var(--focus-selected-background);
-        }
-    }
-
-    @if $variant == 'bootstrap' or $variant == 'indigo' {
-        @if not($focus-outline-color) and $focus-background {
-            $focus-outline-color: hsla(from var(--focus-background) h s l / 0.4);
-        }
-
-        @if not($focus-selected-outline-color) and $focus-selected-background {
-            $focus-selected-outline-color: hsla(from var(--focus-selected-background) h s l / 0.4);
-        }
-    }
-
-    @if not($ghost-shadow) {
-        $ghost-elevation: map.get($chip-schema, 'ghost-elevation');
-        $ghost-shadow: elevation($ghost-elevation);
-    }
-
-    @return extend($theme, (
-        name: $name,
-        selector: $selector,
-        border-radius: $border-radius,
-
-        text-color: $text-color,
-        background: $background,
-        border-color: $border-color,
-        ghost-background: $ghost-background,
-
-        disabled-text-color: $disabled-text-color,
-        disabled-background: $disabled-background,
-        disabled-border-color: $disabled-border-color,
-
-        hover-text-color: $hover-text-color,
-        hover-background: $hover-background,
-        hover-border-color: $hover-border-color,
-
-        focus-text-color: $focus-text-color,
-        focus-background: $focus-background,
-        focus-border-color: $focus-border-color,
-
-        selected-text-color: $selected-text-color,
-        selected-background: $selected-background,
-        selected-border-color: $selected-border-color,
-
-        hover-selected-text-color: $hover-selected-text-color,
-        hover-selected-background: $hover-selected-background,
-        hover-selected-border-color: $hover-selected-border-color,
-
-        focus-selected-text-color: $focus-selected-text-color,
-        focus-selected-background: $focus-selected-background,
-        focus-selected-border-color: $focus-selected-border-color,
-
-        ghost-shadow: $ghost-shadow,
-        remove-icon-color: $remove-icon-color,
-        remove-icon-color-focus: $remove-icon-color-focus,
-        focus-selected-outline-color: $focus-selected-outline-color,
-        focus-outline-color: $focus-outline-color,
-        size: $size,
-    ));
-}
-
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
@@ -307,7 +43,7 @@
 
         @if $variant == 'indigo' {
             padding: rem(4px);
-            gap: rem(8px)
+            gap: rem(8px);
         }
 
         &:empty {

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

@@ -1,53 +1,5 @@
 @use 'sass:map';
 @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>
-////
-
-/// Column actions Theme
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $title-color [null]- The text color used for the title of the list.
-/// @param {Color} $background-color [null] - The background color of the panel.
-///
-/// @requires $light-material-schema
-///
-/// @example scss Change the title color
-///   $column-actions-theme: igx-column-actions-theme($title-color: black);
-///   // Pass the theme to the css-vars mixin
-///   @include css-vars($column-actions-theme);
-////
-@function column-actions-theme(
-    $schema: $light-material-schema,
-
-    $title-color: null,
-    $background-color: null
-) {
-    $name: 'igx-column-actions';
-    $column-actions-schema: ();
-
-    @if map.has-key($schema, 'column-actions') {
-        $column-actions-schema: map.get($schema, 'column-actions');
-    } @else {
-        $column-actions-schema: $schema;
-    }
-
-    $theme: digest-schema($column-actions-schema);
-
-    @if not($title-color) and $background-color {
-        $title-color: adaptive-contrast(var(--background-color));
-    }
-
-    @return extend($theme, (
-        name: $name,
-        title-color: $title-color,
-        background-color: $background-color,
-    ));
-}
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars

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

@@ -1,129 +1,5 @@
 @use 'sass:map';
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
-
-////
-/// @group themes
-/// @access public
-/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
-/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
-////
-
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $search-separator-border-color [null] - The combo search box separator color.
-/// @param {Color} $empty-list-placeholder-color [null] - The combo placeholder text color.
-/// @param {Color} $empty-list-background [null] - The combo list background color.
-/// @param {Color} $toggle-button-background [null] - The combo toggle button background color.
-/// @param {Color} $toggle-button-background-focus [null] - The combo toggle button background color when the combo is focused in material box variant.
-/// @param {Color} $toggle-button-background-focus--border [null] - The combo toggle button background color when the combo is focused in material border variant.
-/// @param {Color} $toggle-button-background-disabled [null] - The combo toggle button background color when the combo is disabled.
-/// @param {Color} $toggle-button-foreground [null] - The combo toggle button foreground color.
-/// @param {Color} $toggle-button-foreground-focus [null] - The combo toggle button foreground color when the combo is focused.
-/// @param {Color} $toggle-button-foreground-disabled [null] - The combo toggle button foreground color when the combo is disabled.
-/// @param {Color} $toggle-button-foreground-filled [null] - The combo toggle button foreground color when the combo is filled.
-/// @param {Color} $clear-button-background [null] - The combo clear button background color.
-/// @param {Color} $clear-button-background-focus [null] - The combo clear button background color when the combo is focused.
-/// @param {Color} $clear-button-foreground [null] - The combo clear button foreground color.
-/// @param {Color} $clear-button-foreground-focus [null] - The combo clear button foreground color when the combo is focused.
-/// @requires $light-material-schema
-/// @example scss Change the combo empty list background
-///   $my-combo-theme: igx-checkbox-theme($empty-list-background);
-///   // Pass the theme to the css-vars mixin
-///   @include css-vars($my-combo-theme);
-@function combo-theme(
-    $schema: $light-material-schema,
-    $search-separator-border-color: null,
-    $empty-list-placeholder-color: null,
-    $empty-list-background: null,
-    $toggle-button-background: null,
-    $toggle-button-background-focus: null,
-    $toggle-button-background-disabled: null,
-    $toggle-button-foreground: null,
-    $toggle-button-foreground-focus: null,
-    $toggle-button-foreground-disabled: null,
-    $toggle-button-background-focus--border: null,
-    $clear-button-background: null,
-    $clear-button-background-focus: null,
-    $clear-button-foreground: null,
-    $clear-button-foreground-focus: null,
-    $toggle-button-foreground-filled: null,
-) {
-    $name: 'igx-combo';
-    $selector: 'igx-combo, igx-simple-combo';
-
-    $combo-schema: ();
-
-    @if map.has-key($schema, 'combo') {
-        $combo-schema: map.get($schema, 'combo');
-    } @else {
-        $combo-schema: $schema;
-    }
-
-    $theme: digest-schema($combo-schema);
-    $variant: map.get($theme, '_meta', 'theme');
-
-    @if not($empty-list-placeholder-color) and $empty-list-background {
-        $empty-list-placeholder-color: adaptive-contrast(var(--empty-list-background));
-    }
-
-    @if not($toggle-button-foreground) and $toggle-button-background {
-        $toggle-button-foreground: adaptive-contrast(var(--toggle-button-background));
-    }
-
-    @if $variant == 'material' {
-        @if not($toggle-button-background-focus) and $toggle-button-background {
-            $toggle-button-background-focus: hsl(from var(--toggle-button-background) h s calc(l * 0.9));
-        }
-    } @else {
-        @if not($toggle-button-background-focus) and $toggle-button-background {
-            $toggle-button-background-focus: var(--toggle-button-background);
-        }
-    }
-
-    @if not($toggle-button-foreground-focus) and $toggle-button-background-focus {
-        $toggle-button-foreground-focus: adaptive-contrast(var(--toggle-button-background-focus));
-    }
-
-    @if not($toggle-button-background-focus--border) and $toggle-button-background {
-        $toggle-button-background-focus--border: var(--toggle-button-background);
-    }
-
-    @if not($toggle-button-foreground-filled) and $toggle-button-background {
-        $toggle-button-foreground-filled: adaptive-contrast(var(--toggle-button-background));
-    }
-
-    @if not($toggle-button-background-disabled) and $toggle-button-background {
-        $toggle-button-background-disabled: hsla(from var(--toggle-button-background) h s l / 0.3);
-    }
-
-    @if not($toggle-button-foreground-disabled) and $toggle-button-background {
-        $toggle-button-foreground-disabled: hsla(from adaptive-contrast(var(--toggle-button-background)) h s l / 0.7);
-    }
-
-    @if not($clear-button-foreground-focus) and $clear-button-background-focus {
-        $clear-button-foreground-focus: adaptive-contrast(var(--clear-button-background-focus));
-    }
-
-    @return extend($theme, (
-        name: $name,
-        selector: $selector,
-        search-separator-border-color: $search-separator-border-color,
-        empty-list-placeholder-color: $empty-list-placeholder-color,
-        empty-list-background: $empty-list-background,
-        toggle-button-background: $toggle-button-background,
-        toggle-button-background-focus: $toggle-button-background-focus,
-        toggle-button-background-disabled: $toggle-button-background-disabled,
-        toggle-button-foreground: $toggle-button-foreground,
-        toggle-button-foreground-focus: $toggle-button-foreground-focus,
-        toggle-button-foreground-disabled: $toggle-button-foreground-disabled,
-        toggle-button-foreground-filled: $toggle-button-foreground-filled,
-        toggle-button-background-focus--border: $toggle-button-background-focus--border,
-        clear-button-background: $clear-button-background,
-        clear-button-background-focus: $clear-button-background-focus,
-        clear-button-foreground: $clear-button-foreground,
-        clear-button-foreground-focus: $clear-button-foreground-focus,
-    ));
-}
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
@@ -210,7 +86,7 @@
     %igx-combo__case-icon {
         igx-icon {
             --igx-icon-disabled-color: var(--ig-gray-600);
-            
+
             opacity: 1;
         }
     }
@@ -314,11 +190,19 @@
         %igx-combo__toggle-button {
             color: var-get($theme, 'toggle-button-foreground-focus');
             background: var-get($theme, 'toggle-button-background-focus');
+
+            &:focus {
+                color: color($color: 'secondary');
+            }
         }
 
         %igx-combo__clear-button {
             color: var-get($theme, 'clear-button-foreground-focus');
             background: var-get($theme, 'clear-button-background-focus');
+
+            &:focus {
+                color: color($color: 'secondary');
+            }
         }
     }
 

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

@@ -56,6 +56,10 @@
         flex: 1 0 0;
         flex-direction: column;
         box-shadow: $border-shadow, elevation(3);
+
+        @if $variant == 'indigo' and $theme-variant == 'dark' {
+            box-shadow: $border-shadow, elevation(2);
+        }
     }
 
     %date-picker__buttons {

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

@@ -1,35 +1,5 @@
 @use 'sass:map';
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
-
-////
-/// @group themes
-/// @access public
-/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
-////
-
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {color} $label-color [null] - The color for date range separator label.
-@function date-range-picker-theme(
-    $schema: $light-material-schema,
-    $label-color: null
-) {
-    $name: 'igx-date-range-picker';
-    $date-range-schema: ();
-
-    @if map.has-key($schema, 'date-range') {
-        $date-range-schema: map.get($schema, 'date-range');
-    } @else {
-        $date-range-schema: $schema;
-    }
-
-    $theme: digest-schema($date-range-schema);
-
-    @return extend($theme, (
-        name: $name,
-        label-color: $label-color,
-    ));
-}
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars

package/lib/core/styles/components/dialog/_dialog-theme.scss

@@ -1,80 +1,5 @@
 @use 'sass:map';
-@use 'sass:meta';
 @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>
-////
-
-/// Dialog Theme
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $background [null] - The dialog background color.
-/// @param {Color} $title-color [null] - The dialog title text color.
-/// @param {Color} $message-color [null] - The dialog message text color.
-/// @param {box-shadow} $shadow [null] - The shadow used for the dialog.
-/// @param {List} $border-radius [null] - The border radius used for dialog component.
-/// @param {Color} $border-color [null] - The border color used for dialog component.
-/// @requires $light-material-schema
-/// @example scss Change the background color
-///   $my-dialog-theme: dialog-theme($background: black);
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-dialog-theme);
-@function dialog-theme(
-    $schema: $light-material-schema,
-
-    $border-radius: null,
-    $border-color: null,
-
-    $background: null,
-    $title-color: null,
-    $message-color: null,
-    $shadow: null,
-) {
-    $name: 'igx-dialog';
-    $selector: '.igx-dialog';
-
-    $dialog-schema: ();
-
-    @if map.has-key($schema, 'dialog') {
-        $dialog-schema: map.get($schema, 'dialog');
-    } @else {
-        $dialog-schema: $schema;
-    }
-
-    $theme: digest-schema($dialog-schema);
-
-    @if not($title-color) and $background{
-        $title-color: adaptive-contrast(var(--background));
-    }
-
-    @if not($message-color) and $background{
-        $message-color: hsla(from adaptive-contrast(var(--background)) h s l / .8);
-    }
-
-    @if not($border-color) and $background{
-        $border-color: hsla(from adaptive-contrast(var(--background)) h s l / .3);
-    }
-
-    @if not($shadow) {
-        $elevation: map.get($dialog-schema, 'elevation');
-        $shadow: elevation($elevation);
-    }
-
-    @return extend($theme, (
-        name: $name,
-        selector: $selector,
-        border-radius: $border-radius,
-        background: $background,
-        title-color: $title-color,
-        message-color: $message-color,
-        shadow: $shadow,
-        border-color: $border-color
-    ));
-}
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars

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

@@ -1,44 +1,5 @@
 @use 'sass:map';
 @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>
-////
-
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $color [null] - The color of the divider. (Gradients are not supported for dashed dividers).
-/// @param {number} $inset [null] - The inset value of the divider.
-/// @requires $light-material-schema
-/// @example scss Change the color of the divider
-///   $my-divider-theme: divider-theme($color: orange);
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-divider-theme);
-@function divider-theme(
-    $schema: $light-material-schema,
-    $color: null,
-    $inset: null
-) {
-    $name: 'igx-divider';
-    $divider-schema: ();
-
-    @if map.has-key($schema, 'divider') {
-        $divider-schema: map.get($schema, 'divider');
-    } @else {
-        $divider-schema: $schema;
-    }
-
-    $theme: digest-schema($divider-schema);
-
-    @return extend($theme, (
-        name: $name,
-        color: $color,
-        inset: $inset,
-    ));
-}
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars