igniteui-angular 20.0.0 → 20.0.2

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

@@ -60,7 +60,49 @@
     }
 
     $theme: digest-schema($combo-schema);
-    $meta: map.get($theme, '_meta');
+    $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,
@@ -80,10 +122,6 @@
         clear-button-background-focus: $clear-button-background-focus,
         clear-button-foreground: $clear-button-foreground,
         clear-button-foreground-focus: $clear-button-foreground-focus,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -93,7 +131,7 @@
 @mixin combo($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     $search-input-inline-padding: map.get((
         'material': pad-inline(rem(4px), rem(8px), rem(16px)),
@@ -165,18 +203,15 @@
     %igx-combo__case-icon,
     %igx-combo__case-icon--active {
         line-height: 0;
-
-        igx-icon {
-            --size: rem(18px);
-        }
     }
 
     // The wrapping element here is needed
     // in order to override the !important rule of .igx-icon--inactive.
     %igx-combo__case-icon {
         igx-icon {
-            // Important is needed since the .igx-icon--inactive has !important
-            color: color($color: 'gray', $variant: 600) !important;
+            --igx-icon-disabled-color: var(--ig-gray-600);
+            
+            opacity: 1;
         }
     }
 
@@ -244,6 +279,13 @@
         }
     }
 
+    @if $variant == 'fluent' or $variant == 'bootstrap' {
+        %igx-combo__search {
+            --igx-input-group-input-suffix-background: transparent;
+            --igx-input-group-input-suffix-background--focused: transparent;
+        }
+    }
+
     .igx-input-group {
         %igx-combo__toggle-button {
             background: var-get($theme, 'toggle-button-background');

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

@@ -46,16 +46,17 @@
     }
 
     $theme: digest-schema($dialog-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($title-color) and $background{
-        $title-color: text-contrast($background);
+        $title-color: adaptive-contrast(var(--background));
     }
 
     @if not($message-color) and $background{
-        @if meta.type-of($background) == 'color' {
-            $message-color: rgba(text-contrast($background), .8);
-        }
+        $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) {
@@ -71,11 +72,7 @@
         title-color: $title-color,
         message-color: $message-color,
         shadow: $shadow,
-        border-color: $border-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
+        border-color: $border-color
     ));
 }
 
@@ -85,8 +82,8 @@
 @mixin dialog($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
-    $bootstrap-theme: map.get($theme, '_meta', 'variant') == 'bootstrap';
+    $variant: map.get($theme, '_meta', 'theme');
+    $bootstrap-theme: map.get($theme, '_meta', 'theme') == 'bootstrap';
 
     $dialog-min-width: map.get((
         'material': rem(280px),

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

@@ -32,16 +32,11 @@
     }
 
     $theme: digest-schema($divider-schema);
-    $meta: map.get($theme, '_meta');
 
     @return extend($theme, (
         name: $name,
         color: $color,
         inset: $inset,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme'),
-        )),
     ));
 }
 
@@ -51,7 +46,7 @@
 @mixin divider($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %igx-divider-display {
         position: relative;

package/lib/core/styles/components/drop-down/_drop-down-theme.scss

@@ -91,68 +91,88 @@
     }
 
     $theme: digest-schema($drop-down-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
 
     @if not($item-text-color) and $background-color {
-        $item-text-color: text-contrast($background-color);
+        $item-text-color: adaptive-contrast(var(--background-color));
+    }
+
+    @if not($item-icon-color) and $item-text-color {
+        $item-icon-color: hsla(from var(--item-text-color) h s l / 0.8);
     }
 
     @if not($hover-item-background) and $background-color {
-        $hover-item-text-color: text-contrast($background-color);
+        $hover-item-background: hsla(from adaptive-contrast(var(--background-color)) h s l / .12);
+    }
 
-        @if meta.type-of($background-color) == 'color' {
-            $hover-item-background: rgba(text-contrast($background-color), .12);
-        }
+    @if not($hover-item-text-color) and $item-text-color {
+        $hover-item-text-color: var(--item-text-color);
     }
 
-    @if not($hover-item-text-color) and $background-color {
-        $hover-item-text-color: text-contrast($background-color);
+    @if not($hover-item-icon-color) and $hover-item-text-color {
+        $hover-item-icon-color: hsla(from var(--hover-item-text-color) h s l / 0.8);
     }
 
     @if not($focused-item-background) and $background-color {
-        $focused-item-text-color: text-contrast($background-color);
-
-        @if meta.type-of($background-color) == 'color' {
-            $focused-item-background: rgba(text-contrast($background-color), .12);
-        }
+        $focused-item-background: hsl(from var(--background-color) h s calc(l * 0.8));
     }
 
     @if not($focused-item-text-color) and $focused-item-background {
-        $focused-item-text-color: text-contrast($focused-item-background);
+        $focused-item-text-color: adaptive-contrast(var(--focused-item-background));
+    }
+
+    @if not($selected-item-background) and $background-color {
+        $selected-item-background: hsl(from var(--background-color) h s calc(l * 1.2));
     }
 
     @if not($selected-item-text-color) and $selected-item-background {
-        $selected-item-text-color: text-contrast($selected-item-background);
+        $selected-item-text-color: adaptive-contrast(var(--selected-item-background));
+    }
+
+    @if not($selected-item-icon-color) and $selected-item-text-color {
+        $selected-item-icon-color: hsla(from var(--selected-item-text-color) h s l / 0.8);
+    }
+
+    @if not($selected-hover-item-background) and $selected-item-background {
+        $selected-hover-item-background: hsl(from var(--selected-item-background) h s calc(l * 0.7));
     }
 
     @if not($selected-hover-item-text-color) and $selected-hover-item-background {
-        $selected-hover-item-text-color: text-contrast($selected-hover-item-background);
+        $selected-hover-item-text-color: adaptive-contrast(var(--selected-hover-item-background));
+    }
+
+    @if not($selected-hover-item-icon-color) and $selected-hover-item-text-color {
+        $selected-hover-item-icon-color: hsla(from var(--selected-hover-item-text-color) h s l / 0.8);
+    }
+
+    @if not($selected-focus-item-background) and $selected-item-background {
+        $selected-focus-item-background: hsl(from var(--selected-item-background) h s calc(l * 0.7));
     }
 
     @if not($selected-focus-item-text-color) and $selected-focus-item-background {
-        $selected-focus-item-text-color: text-contrast($selected-focus-item-background);
+        $selected-focus-item-text-color: adaptive-contrast(var(--selected-focus-item-background));
     }
 
     @if not($selected-focus-item-text-color) and $selected-focus-item-background {
-        $selected-focus-item-text-color: text-contrast($selected-focus-item-background);
+        $selected-focus-item-text-color: adaptive-contrast(var(--selected-focus-item-background));
     }
 
-    @if not($disabled-item-text-color) and $background-color {
-        @if meta.type-of($background-color) == 'color' {
-            $disabled-item-text-color: rgba(text-contrast($background-color), .36);
+    @if $variant == 'indigo' {
+        @if not($focused-item-border-color) and $selected-item-background {
+            $focused-item-border-color: var(--selected-item-background);
         }
     }
 
+    @if not($disabled-item-text-color) and $background-color {
+            $disabled-item-text-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .36);
+    }
+
     @if not($disabled-item-text-color) and $disabled-item-background {
-        @if meta.type-of($disabled-item-background) == 'color' {
-            $disabled-item-text-color: rgba(text-contrast($disabled-item-background), .36);
-        }
+        $disabled-item-text-color: hsla(from adaptive-contrast(var(--disabled-item-background)) h s l / .36);
     }
 
     @if not($header-text-color) and $background-color {
-        @if meta.type-of($background-color) == 'color' {
-            $header-text-color: rgba(text-contrast($background-color), .7);
-        }
+        $header-text-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .7);
     }
 
     @if not($shadow) {
@@ -189,10 +209,6 @@
         border-color: $border-color,
         border-width: $border-width,
         size: $size,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -201,7 +217,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin drop-down($theme) {
     @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %igx-drop-down {
         position: absolute;
@@ -242,6 +258,10 @@
         overflow-x: hidden;
         -webkit-overflow-scrolling: touch;
         position: relative;
+
+        igx-display-container {
+            padding-inline-end: var(--vhelper-scrollbar-size);
+        }
     }
 
     %igx-drop-down__content {

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

@@ -53,24 +53,33 @@
     }
 
     $theme: digest-schema($expansion-panel-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($header-title-color) and $header-background {
-        $header-title-color: text-contrast($header-background);
+        $header-title-color: adaptive-contrast(var(--header-background));
+    }
+
+    @if not($header-icon-color) and $header-background {
+        $header-icon-color: adaptive-contrast(var(--header-background));
     }
 
     @if not($header-description-color) and $header-background {
-        @if meta.type-of($header-background) == 'color' {
-            $header-description-color: rgba(text-contrast($header-background), .8);
-        }
+        $header-description-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .8);
     }
 
-    @if not($header-icon-color) and $header-background {
-        $header-icon-color: text-contrast($header-background);
+    @if not($header-focus-background) and $header-background {
+        $header-focus-background: hsl(from var(--header-background) h s calc(l * 1.1));
     }
 
     @if not($body-color) and $body-background {
-        $body-color: text-contrast($body-background);
+        $body-color: adaptive-contrast(var(--body-background));
+    }
+
+    @if not($disabled-text-color) and $header-background {
+        $disabled-text-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .5);
+    }
+
+    @if not($disabled-description-color) and $header-background {
+        $disabled-description-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .5);
     }
 
     @return extend($theme, (
@@ -86,10 +95,6 @@
         disabled-text-color: $disabled-text-color,
         disabled-description-color: $disabled-description-color,
         expanded-margin: $expanded-margin,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -98,7 +103,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin expansion-panel($theme) {
     @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     $panel-padding: rem(16px) rem(24px);
     $panel-padding-header-indigo: rem(10px) rem(16px);