igniteui-angular 20.0.0 → 20.0.2

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

@@ -94,160 +94,140 @@
     }
 
     $theme: digest-schema($list-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
 
     @if not($header-background) and $background {
-        $header-background: $background;
+        $header-background: var(--background);
     }
 
     @if not($header-background) and $item-background {
-        $header-background: $item-background;
+        $header-background: var(--item-background);
     }
 
     @if not($item-background) and $background {
-        $item-background: $background;
+        $item-background: var(--background);
     }
 
     @if not($background) and $item-background {
-        $background: $item-background;
+        $background: var(--item-background);
     }
 
     @if not($item-background-hover) and $item-background {
-        @if meta.type-of($item-background) == 'color' {
-            @if luminance($item-background) < .5 {
-                $item-background-hover: color.scale($item-background, $lightness: 8%);
-            } @else {
-                $item-background-hover: color.scale($item-background, $lightness: -8%);
-            }
-        }
+        $item-background-hover: hsl(from var(--item-background) h s calc(l * 0.9));
     }
 
-    @if not($item-background-active) and $item-background {
-        @if meta.type-of($item-background) == 'color' {
-            @if luminance($item-background) < .5 {
-                $item-background-active: color.scale($item-background, $lightness: 8%);
-            } @else {
-                $item-background-active: color.scale($item-background, $lightness: -8%);
-            }
-        }
+    @if not($item-background-active) and $item-background-hover {
+        $item-background-active: var(--item-background-hover);
     }
 
-    @if not($item-background-selected) and $item-background {
-        @if meta.type-of($item-background) == 'color' {
-            @if luminance($item-background) < .5 {
-                $item-background-selected: color.scale($item-background, $lightness: 8%);
-            } @else {
-                $item-background-selected: color.scale($item-background, $lightness: -8%);
-            }
-        }
+    @if not($item-background-selected) and $item-background-active {
+        $item-background-selected: var(--item-background-active);
     }
 
     @if not($header-text-color) and $header-background {
-        $header-text-color: text-contrast($header-background);
+        $header-text-color: adaptive-contrast(var(--header-background));
     }
 
     @if not($item-text-color) and $item-background {
-        $item-text-color: text-contrast($item-background);
+        $item-text-color: adaptive-contrast(var(--item-background));
     }
 
     @if not($item-title-color) and $item-background {
-        $item-title-color: text-contrast($item-background);
+        $item-title-color: adaptive-contrast(var(--item-background));
     }
 
     @if not($item-action-color) and $item-background {
-        $item-action-color: text-contrast($item-background);
+        $item-action-color: adaptive-contrast(var(--item-background));
     }
 
     @if not($item-thumbnail-color) and $item-background {
-        $item-thumbnail-color: text-contrast($item-background);
+        $item-thumbnail-color: adaptive-contrast(var(--item-background));
     }
 
     @if not($item-subtitle-color) and $item-background {
-        @if meta.type-of($item-background) == 'color' {
-            $item-subtitle-color: rgba(text-contrast($item-background), .74);
-        }
+        $item-subtitle-color: hsla(from adaptive-contrast(var(--item-background)) h s l / .74);
     }
 
     @if not($item-subtitle-color) and $item-text-color {
-        $item-subtitle-color: $item-text-color;
+        $item-subtitle-color: var(--item-text-color);
     }
 
     @if not($item-text-color-hover) and $item-background-hover {
-        $item-text-color-hover: text-contrast($item-background-hover);
+        $item-text-color-hover: adaptive-contrast(var(--item-background-hover));
     }
 
     @if not($item-title-color-hover) and $item-background-hover {
-        $item-title-color-hover: text-contrast($item-background-hover);
+        $item-title-color-hover: adaptive-contrast(var(--item-background-hover));
     }
 
     @if not($item-action-color-hover) and $item-background-hover {
-        $item-action-color-hover: text-contrast($item-background-hover);
+        $item-action-color-hover: adaptive-contrast(var(--item-background-hover));
     }
 
     @if not($item-thumbnail-color-hover) and $item-background-hover {
-        $item-thumbnail-color-hover: text-contrast($item-background-hover);
+        $item-thumbnail-color-hover: adaptive-contrast(var(--item-background-hover));
     }
 
     @if not($item-subtitle-color-hover) and $item-background-hover {
-        @if meta.type-of($item-background-hover) == 'color' {
-            $item-subtitle-color-hover: rgba(text-contrast($item-background-hover), .74);
-        }
+        $item-subtitle-color-hover: hsla(from adaptive-contrast(var(--item-background-hover)) h s l / .74);
     }
 
     @if not($item-subtitle-color-hover) and $item-text-color-hover {
-        $item-subtitle-color-hover: $item-text-color-hover;
+        $item-subtitle-color-hover: var(--item-text-color-hover);
     }
 
     @if not($item-text-color-active) and $item-background-active {
-        $item-text-color-active: text-contrast($item-background-active);
+        $item-text-color-active: adaptive-contrast(var(--item-background-active));
     }
 
     @if not($item-text-color-selected) and $item-background-selected {
-        $item-text-color-selected: text-contrast($item-background-selected);
+        $item-text-color-selected: adaptive-contrast(var(--item-background-selected));
     }
 
     @if not($item-title-color-active) and $item-background-active {
-        $item-title-color-active: text-contrast($item-background-active);
+        $item-title-color-active: adaptive-contrast(var(--item-background-active));
     }
 
     @if not($item-title-color-selected) and $item-background-selected {
-        $item-title-color-selected: text-contrast($item-background-selected);
+        $item-title-color-selected: adaptive-contrast(var(--item-background-selected));
     }
 
     @if not($item-action-color-active) and $item-background-active {
-        $item-action-color-active: text-contrast($item-background-active);
+        $item-action-color-active: adaptive-contrast(var(--item-background-active));
     }
 
     @if not($item-action-color-selected) and $item-background-selected {
-        $item-action-color-selected: text-contrast($item-background-selected);
+        $item-action-color-selected: adaptive-contrast(var(--item-background-selected));
     }
 
     @if not($item-thumbnail-color-active) and $item-background-active {
-        $item-thumbnail-color-active: text-contrast($item-background-active);
+        $item-thumbnail-color-active: adaptive-contrast(var(--item-background-active));
     }
 
     @if not($item-thumbnail-color-selected) and $item-background-selected {
-        $item-thumbnail-color-selected: text-contrast($item-background-selected);
+        $item-thumbnail-color-selected: adaptive-contrast(var(--item-background-selected));
     }
 
     @if not($item-subtitle-color-active) and $item-background-active {
-        @if meta.type-of($item-background-active) == 'color' {
-            $item-subtitle-color-active: rgba(text-contrast($item-background-active), .74);
-        }
+        $item-subtitle-color-active: hsla(from adaptive-contrast(var(--item-background-active)) h s l / .74);
     }
 
     @if not($item-subtitle-color-selected) and $item-background-selected {
-        @if meta.type-of($item-background-selected) == 'color' {
-            $item-subtitle-color-selected: rgba(text-contrast($item-background-selected), .74);
-        }
+        $item-subtitle-color-selected: hsla(from adaptive-contrast(var(--item-background-selected)) h s l / .74);
     }
 
     @if not($item-subtitle-color-active) and $item-text-color-active {
-        $item-subtitle-color-active: $item-text-color-active;
+        $item-subtitle-color-active: var(--item-text-color-active);
     }
 
     @if not($item-subtitle-color-selected) and $item-text-color-selected {
-        $item-subtitle-color-selected: $item-text-color-selected;
+        $item-subtitle-color-selected: var(--item-text-color-selected);
+    }
+
+    @if $variant == 'fluent' or $variant == 'bootstrap'{
+        @if not($border-color) and $item-background {
+            $border-color: hsla(from adaptive-contrast(var(--item-background)) h s l / .15);
+        }
     }
 
     @return extend($theme, (
@@ -283,10 +263,6 @@
         item-thumbnail-color-selected: $item-thumbnail-color-selected,
         border-color: $border-color,
         border-width: $border-width,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -296,7 +272,7 @@
 @mixin list($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $bootstrap-theme: $variant == 'bootstrap';
 
     $theme-padding-block-l: map.get((

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

@@ -43,18 +43,32 @@
     }
 
     $theme: digest-schema($navbar-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
 
     @if not($text-color) and $background {
-        $text-color: text-contrast($background);
+        $text-color: adaptive-contrast(var(--background));
+    }
+
+    @if not($hover-icon-color) and $idle-icon-color {
+        $hover-icon-color: hsl(from (var(--idle-icon-color)) h s calc(l * 1.1));
     }
 
     @if not($idle-icon-color) and $background {
-        $idle-icon-color: text-contrast($background);
+        $idle-icon-color: adaptive-contrast(var(--background));
     }
 
-    @if not($hover-icon-color) and $background {
-        $hover-icon-color: text-contrast($background);
+    @if $variant == 'indigo' {
+        @if not($border-color) and $background {
+            $border-color: hsla(from adaptive-contrast(var(--background)) h s l / 0.3);
+        }
+
+        @if not($hover-icon-color) and $background {
+            $hover-icon-color: hsla(from adaptive-contrast(var(--background)) h s l / 0.7);
+        }
+    } @else {
+        @if not($hover-icon-color) and $background {
+            $hover-icon-color: adaptive-contrast(var(--background));
+        }
     }
 
     @if not($shadow) {
@@ -74,10 +88,6 @@
         idle-icon-color: $idle-icon-color,
         hover-icon-color: $hover-icon-color,
         shadow: $shadow,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -86,7 +96,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin navbar($theme) {
     @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     $navbar-padding: rem(16px);
     $navbar-title-fz: rem(18px, 16px);
@@ -194,19 +204,19 @@
         igx-icon,
         igc-icon {
             --component-size: 3;
+
             cursor: pointer;
+            user-select: none;
+            transition: color .15s $out-quad;
         }
 
-        > igx-icon,
-        > igc-icon {
-            transition: color .15s $out-quad;
+        >igx-icon,
+        >igc-icon {
             color: var-get($theme, 'idle-icon-color');
 
             &:hover {
                 color: var-get($theme, 'hover-icon-color');
             }
-
-            user-select: none;
         }
 
         @if $variant == 'indigo' {

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

@@ -73,42 +73,48 @@
     }
 
     $theme: digest-schema($navdrawer-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($item-header-text-color) and $background {
-        $item-header-text-color: text-contrast($background);
+        $item-header-text-color: adaptive-contrast(var(--background));
     }
 
     @if not($item-text-color) and $background {
-        $item-text-color: text-contrast($background);
+        $item-text-color: adaptive-contrast(var(--background));
     }
 
     @if not($item-icon-color) and $background {
-        $item-icon-color: text-contrast($background);
+        $item-icon-color: adaptive-contrast(var(--background));
+    }
+
+    @if not($item-hover-background) and $background {
+        $item-hover-background: hsla(from adaptive-contrast(var(--background)) h s l / .08);
+    }
+
+    @if not($item-hover-text-color) and $background {
+        $item-hover-text-color: adaptive-contrast(var(--background));
+    }
+
+    @if not($item-hover-icon-color) and $background {
+        $item-hover-icon-color: adaptive-contrast(var(--background));
     }
 
     @if not($item-active-background) and $background {
-        @if meta.type-of($background) == 'color' {
-            $item-active-background: rgba(text-contrast($background), .24);
-        }
+        $item-active-background: hsla(from adaptive-contrast(var(--background)) h s l / .24);
     }
 
     @if not($item-active-text-color) and $item-active-background {
-        $item-active-text-color: text-contrast($item-active-background);
+        $item-active-text-color: adaptive-contrast(var(--item-active-background));
     }
 
     @if not($item-active-icon-color) and $item-active-background {
-        $item-active-icon-color: text-contrast($item-active-background);
+        $item-active-icon-color: adaptive-contrast(var(--item-active-background));
     }
 
-    @if not($item-hover-background) and $background {
-        @if meta.type-of($background) == 'color' {
-            $item-hover-background: rgba(text-contrast($background), .08);
-        }
+    @if not($item-disabled-text-color) and $background {
+        $item-disabled-text-color: hsla(from adaptive-contrast(var(--background)) h s l / .38);
     }
-
-    @if not($item-hover-text-color) and $background {
-        $item-hover-text-color: text-contrast($background);
+    @if not($item-disabled-icon-color) and $background {
+        $item-disabled-icon-color: hsla(from adaptive-contrast(var(--background)) h s l / .38);
     }
 
     @if not($shadow) {
@@ -133,11 +139,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,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
+        shadow: $shadow
     ));
 }
 
@@ -147,7 +149,7 @@
 @mixin navdrawer($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $drawer-icon-size: rem(24px);
 
     $aside-padding: map.get((

package/lib/core/styles/components/overlay/_overlay-theme.scss

@@ -37,7 +37,6 @@
         name: $name,
         selector: $selector,
         background-color: $background-color,
-        theme: map.get($schema, '_meta', 'theme'),
     ));
 }
 

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

@@ -38,10 +38,9 @@
     }
 
     $theme: digest-schema($grid-paginator-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($text-color) and $background-color {
-        $text-color: text-contrast($background-color);
+        $text-color: adaptive-contrast($background-color);
     }
 
     @return extend($theme, (
@@ -49,10 +48,6 @@
         text-color: $text-color,
         background-color: $background-color,
         border-color: $border-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -62,7 +57,7 @@
 @mixin paginator($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     $paginator-padding-inline: (
         comfortable: rem(24px),

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

@@ -46,7 +46,6 @@
     }
 
     $theme: digest-schema($circular-bar-schema);
-    $meta: map.get($theme, '_meta');
 
     $fill-color-default-start: map.get($theme, 'fill-color-default');
     $fill-color-default-end: map.get($theme, 'fill-color-default');
@@ -73,10 +72,6 @@
         fill-color-success: $fill-color-success,
         text-color: $text-color,
         diameter: $diameter,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -94,7 +89,7 @@
     $diameter: calc(var(--circular-size) + var(--stroke-thickness));
     $radius: calc(var(--circular-size) / 2 - var(--stroke-thickness) * .5);
     $circumference: calc(#{$radius} * 2 * 3.1416);
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %display-circular {
         --circular-size: calc(#{var-get($theme, 'diameter')} - var(--stroke-thickness));
@@ -136,7 +131,7 @@
 
             %outer {
 	            stroke: var-get($theme, 'fill-color-default');
-	            
+
                 @if $variant != 'bootstrap' {
                     animation: igx-initial-dashoffset var(--_transition-duration) linear;
                 } @else {
@@ -313,7 +308,7 @@
     %text--hidden {
         visibility: hidden;
     }
-	
+
 	%gradient-start {
 		stop-color: var-get($theme, 'fill-color-default-end');
 	}

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

@@ -52,7 +52,6 @@
     $linear-bar-schema: if(map.has-key($schema, 'linear-bar'), map.get($schema, 'linear-bar'), $schema);
 
     $theme: digest-schema($linear-bar-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($track-border-radius) {
         $track-border-radius: map.get($theme, 'track-border-radius');
@@ -71,10 +70,6 @@
         track-border-radius: $track-border-radius,
         track-height: $track-height,
         strip-size: $strip-size,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -127,7 +122,7 @@ $easing-curves: (
 @mixin progress-linear($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %display-linear {
         position: relative;

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

@@ -52,14 +52,36 @@
     }
 
     $theme: digest-schema($query-builder-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
 
-    @if not($header-foreground) and $header-background {
-        $header-foreground: text-contrast($header-background);
+    @if not($label-foreground) and $background {
+        $label-foreground: hsla(from adaptive-contrast(var(--background)) h s l / 0.6);
     }
 
     @if not($header-background) and $background {
-        $header-background: $background;
+        $header-background: var(--background);
+    }
+
+    @if not($header-foreground) and $header-background {
+        $header-foreground: adaptive-contrast(var(--header-background));
+    }
+
+    @if not($subquery-header-background) and $header-background {
+        $subquery-header-background: hsl(from var(--header-background) h s calc(l * 0.9));
+    }
+
+    @if not($subquery-border-color) and $subquery-header-background {
+        $subquery-border-color: hsl(from var(--subquery-header-background) h s calc(l * 0.9));
+    }
+
+    @if not($separator-color) and $subquery-border-color {
+        $separator-color: hsl(from var(--subquery-border-color) h s calc(l * 0.9));
+    }
+
+    @if $variant == 'bootstrap' {
+        @if not($header-border) and $subquery-border-color {
+            $header-border: var(--subquery-border-color);
+        }
     }
 
     @return extend($theme, (
@@ -77,11 +99,6 @@
         separator-color: $separator-color,
         border-radius: $border-radius,
         label-foreground: $label-foreground,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme'),
-            theme-variant: map.get($schema, '_meta', 'variant')
-        )),
     ));
 }
 
@@ -98,8 +115,8 @@
 @mixin query-builder($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
-    $theme-variant: map.get($theme, '_meta', 'theme-variant');
+    $variant: map.get($theme, '_meta', 'theme');
+    $theme-variant: map.get($theme, '_meta', 'variant');
     $bootstrap-theme: $variant == 'bootstrap';
     $not-bootstrap-theme: not($bootstrap-theme);