igniteui-angular 20.0.0 → 20.0.2

package/lib/core/styles/components/switch/_switch-theme.scss

@@ -91,7 +91,116 @@
     }
 
     $theme: digest-schema($switch-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
+
+    @if $variant == 'material' {
+        @if not($track-off-color) and $thumb-off-color {
+            $track-off-color: hsl(from var(--thumb-off-color) h s calc(l * 0.5));
+        }
+
+        @if not($thumb-off-color) and $track-off-color {
+            $thumb-off-color: hsl(from var(--track-off-color) h s calc(l * 1.3));
+        }
+
+        @if not($thumb-disabled-color) and $thumb-off-color {
+            $thumb-disabled-color: hsl(from var(--thumb-off-color) h s calc(l + 20));
+        }
+
+        @if not($track-on-color) and $thumb-on-color {
+            $track-on-color: hsl(from var(--thumb-on-color) h s calc(l * 1.3));
+        }
+
+        @if not($track-on-hover-color) and $track-on-color {
+            $track-on-hover-color: var(--track-on-color);
+        }
+
+        @if not($thumb-on-color) and $track-on-color {
+            $thumb-on-color: hsl(from var(--track-on-color) h s calc(l * 0.6));
+        }
+
+        @if not($thumb-on-disabled-color) and $thumb-on-color {
+            $thumb-on-disabled-color: hsl(from var(--thumb-on-color) h s calc(l + 20));
+        }
+    } @else {
+        @if not($thumb-off-color) and $track-off-color {
+            $thumb-off-color: hsla(from adaptive-contrast(var(--track-off-color)) h s l / 0.8);
+        }
+        @if not($border-color) and $thumb-off-color {
+            $border-color: var(--thumb-off-color);
+        }
+
+        @if not($thumb-off-color) and $border-color {
+            $thumb-off-color: var(--border-color);
+        }
+
+        @if not($border-hover-color) and $track-off-color {
+            $border-hover-color: hsla(from var(--thumb-off-color) h s l / 0.9);
+        }
+
+        @if not($border-hover-color) and $border-color {
+            $border-hover-color: hsl(from var(--border-color) h s calc(l * 0.8));
+        }
+
+        @if not($thumb-on-color) and $track-on-color {
+            $thumb-on-color: adaptive-contrast(var(--track-on-color));
+        }
+
+        @if not($track-on-hover-color) and $track-on-color {
+            $track-on-hover-color: hsl(from var(--track-on-color) h s calc(l * 0.9));
+        }
+
+        @if not($border-on-color) and $track-on-color {
+            $border-on-color: var(--track-on-color);
+        }
+
+        @if not($border-on-hover-color) and $border-on-color {
+            $border-on-hover-color: hsl(from var(--border-on-color) h s calc(l * 0.9));
+        }
+
+        @if not($thumb-disabled-color) and $thumb-off-color {
+            $thumb-disabled-color: hsla(from var(--thumb-off-color) h s l / 0.3);
+        }
+
+        @if not($border-disabled-color) and $border-color {
+            $border-disabled-color: hsla(from var(--border-color) h s l / 0.3);
+        }
+
+        @if not($thumb-on-disabled-color) and $thumb-on-color {
+            $thumb-on-disabled-color: hsla(from var(--thumb-on-color) h s l / 0.3);
+        }
+
+        @if $variant == 'bootstrap' {
+            @if not($focus-fill-color) and $track-on-color {
+                $focus-fill-color: hsl(from var(--track-on-color) h s calc(l * 1.2));
+            }
+
+            @if not($focus-outline-color) and $focus-fill-color {
+                $focus-outline-color: hsla(from var(--focus-fill-color) h s l / 0.5);
+            }
+
+            @if not($focus-fill-hover-color) and $focus-fill-color {
+                $focus-fill-hover-color: hsl(from var(--focus-fill-color) h s calc(l * 0.9));
+            }
+        }
+
+        @if $variant == 'indigo' {
+            @if not($focus-outline-color) and $border-color {
+                $focus-outline-color: hsla(from var(--border-color) h s l / 0.5);
+            }
+
+            @if not($focus-outline-color-focused) and $border-on-color {
+                $focus-outline-color-focused: hsla(from var(--border-on-color) h s l / 0.5);
+            }
+        }
+    }
+
+    @if not($track-disabled-color) and $track-off-color {
+        $track-disabled-color: hsla(from var(--track-off-color) h s l / 0.5);
+    }
+
+    @if not($track-on-disabled-color) and $track-on-color {
+        $track-on-disabled-color: hsla(from var(--track-on-color) h s l / 0.5);
+    }
 
     @if not($resting-shadow) {
         $resting-elevation: map.get($switch-schema, 'resting-elevation');
@@ -155,11 +264,6 @@
         focus-outline-color-focused: $focus-outline-color-focused,
         focus-fill-color: $focus-fill-color,
         focus-fill-hover-color: $focus-fill-hover-color,
-        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')
-        )),
     ));
 }
 
@@ -170,8 +274,8 @@
     @include css-vars($theme);
     @include scale-in-out($start-scale: .9);
 
-    $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');
 
     $switch-width: map.get((
         'material': 36px,

package/lib/core/styles/components/tabs/_tabs-theme.scss

@@ -78,82 +78,155 @@
     }
 
     $theme: digest-schema($tabs-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
 
-    @if not($item-text-color) and $item-background {
-        @if meta.type-of($item-background) == 'color' {
-            $item-text-color: rgba(text-contrast($item-background), .54);
-        }
+    @if not($item-active-background) and $item-background {
+        $item-active-background: hsl(from var(--item-background) h s calc(l * 0.9));
     }
 
-    @if not($item-hover-color) and $item-background {
-        $item-hover-color: text-contrast($item-background);
-    }
+    @if not($item-background) {
+        @if not($item-text-color) and $item-icon-color {
+            $item-text-color: var(--item-icon-color);
+        }
+
+        @if not($item-icon-color) and $item-text-color {
+            $item-icon-color: var(--item-text-color);
+        }
+    } @else {
+        @if not($item-text-color) and $item-background {
+            $item-text-color: hsla(from adaptive-contrast(var(--item-background)) h s l / 0.8);
+         }
 
-    @if not($item-hover-color) and $item-hover-background {
-        $item-hover-color: text-contrast($item-hover-background);
+         @if not($item-icon-color) and $item-background {
+             $item-icon-color: hsla(from adaptive-contrast(var(--item-background) h s l / 0.8));
+         }
     }
 
-    @if not($item-active-icon-color) and $item-active-background {
-        $item-active-icon-color: text-contrast($item-active-background);
+    @if not($item-active-background) {
+        @if $variant != 'bootstrap' {
+            @if not($item-active-icon-color) and $item-icon-color {
+                $item-active-icon-color: var(--item-icon-color);
+            }
+
+            @if not($item-active-color) and $item-text-color {
+                $item-active-color: var(--item-text-color);
+            }
+        }
+    } @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));
+        }
+
+        @if not($item-active-color) and $item-active-background {
+            $item-active-color: adaptive-contrast(var(--item-active-background));
+        }
     }
 
-    @if not($item-active-icon-color) and $item-background {
-        $item-active-icon-color: text-contrast($item-background);
+    @if not($item-hover-background) {
+        @if not($item-hover-color) and $item-text-color {
+            $item-hover-color: hsla(from var(--item-text-color) h s l / 1);
+        }
+
+        @if not($item-hover-icon-color) and $item-icon-color {
+            $item-hover-icon-color: hsla(from var(--item-icon-color) h s l / 1);
+        }
+    } @else {
+        @if not($item-hover-color) {
+            $item-hover-color: adaptive-contrast(var(--item-hover-background));
+        }
+
+        @if not($item-hover-icon-color) {
+            $item-hover-icon-color: adaptive-contrast(var(--item-hover-background));
+        }
     }
 
-    @if not($indicator-color) and $item-background {
-        $indicator-color: text-contrast($item-background);
+    @if not($item-hover-background) and $item-background {
+        $item-hover-background: hsl(from var(--item-background) h s calc(l * 0.9));
     }
 
-    @if not($item-active-color) and $item-active-icon-color {
-        $item-active-color: $item-active-icon-color;
+    @if $variant == 'bootstrap' {
+        @if not($border-color) and $item-background {
+            $border-color: hsla(from adaptive-contrast(var(--item-background)) h s l / 0.5);
+        }
+
+        @if not($border-color--hover) and $border-color {
+            $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);
+            }
+        } @else {
+            @if not($indicator-color) and $item-active-color {
+                $indicator-color: var(--item-active-color);
+            }
+
+            @if not($indicator-color) {
+                $indicator-color: adaptive-contrast(var(--item-background));
+            }
+        }
     }
 
     // Button
-    @if not($button-color) and $item-background {
-        $button-color: text-contrast($item-background);
-    }
+    @if $item-background {
+        @if not($button-background) and $item-background {
+            $button-background: var(--item-background);
+        }
 
-    @if not($button-color) and $button-background {
-        $button-color: text-contrast($button-background);
-    }
+        @if not($button-hover-background) and $item-background {
+            $button-hover-background: hsl(from var(--item-background) h s calc(l * 0.9));
+        }
+    } @else if not($button-background) {
+        @if $variant != 'material' {
+            @if not($button-color) and $item-text-color {
+                $button-color: var(--item-text-color);
+            }
+
+            @if not($button-hover-color) and $button-color {
+                $button-hover-color: hsl(from var(--button-color) h s calc(l * 0.9));
+            }
 
-    @if not($button-color) and $item-background {
-        $button-background: transparent;
+            @if not($button-disabled-color) and $button-color {
+                $button-disabled-color: hsla(from var(--button-color) h s l / 0.5);
+            }
+        }
     }
 
-    @if not($button-hover-color) and $button-hover-background {
-        $button-hover-color: text-contrast($button-hover-background);
+    @if $button-background {
+        @if not($button-hover-background) and $button-background {
+            $button-hover-background: hsl(from var(--button-background) h s calc(l * 0.9));
+        }
     }
 
-    @if not($button-hover-background) and $item-background {
-        $button-hover-color: text-contrast($item-background);
+    @if not($button-color) and $button-background {
+        $button-color: adaptive-contrast(var(--button-background));
     }
 
-    @if not($button-background) and $item-background {
-        @if meta.type-of($item-background) == 'color' and lightness($item-background) > 50 {
-            $button-background: transparent;
-        } @else {
-            $button-background: rgba(255, 255, 255 , .1);
-        }
+    @if not($button-hover-color) and $button-hover-background {
+        $button-hover-color: adaptive-contrast(var(--button-hover-background));
     }
 
-    @if not($button-hover-background) and $item-background {
-        @if meta.type-of($item-background) == 'color' and lightness($item-background) > 50 {
-            $button-hover-background: rgba(0, 0, 0, .05);
-        } @else {
-            $button-hover-background: rgba(255, 255, 255 , .14);
-        }
+    @if not($button-ripple-color) and $button-color {
+        $button-ripple-color: var(--button-color);
     }
 
-    @if not($button-ripple-color) and $button-background {
-        @if meta.type-of($item-background) == 'color' and lightness($item-background) > 50 {
-            $button-ripple-color: rgba(0, 0, 0, .4);
-        } @else {
-            $button-ripple-color: rgba(255, 255, 255, .4);
-        }
+    @if not($button-disabled-color) and $button-color {
+        $button-disabled-color: hsla(from var(--button-color) h s l / 0.4);
     }
+
     // Button end
 
     @if not($tab-ripple-color) and $item-active-background {
@@ -186,13 +259,8 @@
         tab-ripple-color: $tab-ripple-color,
         button-ripple-color: $button-ripple-color,
         border-color: $border-color,
-        border-radius: $border-radius,
         border-color--hover: $border-color--hover,
-        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')
-        )),
+        border-radius: $border-radius,
     ));
 }
 
@@ -204,11 +272,11 @@
 @mixin tabs($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $not-bootstrap-theme: $variant != 'bootstrap';
     $bootstrap-theme: $variant == 'bootstrap';
     $indigo-theme: $variant == 'indigo';
-    $theme-variant: map.get($theme, '_meta', 'theme-variant');
+    $theme-variant: map.get($theme, '_meta', 'variant');
 
     $item-min-width: rem(90px);
     $item-max-width: rem(360px);

package/lib/core/styles/components/time-picker/_time-picker-theme.scss

@@ -71,36 +71,57 @@
     }
 
     $theme: digest-schema($time-picker-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($text-color) and $background-color {
-        $text-color: text-contrast($background-color);
+        $text-color: hsla(from adaptive-contrast(var(--background-color)) h s l / 0.7);
+    }
+
+    @if not($hover-text-color) and $text-color {
+        $hover-text-color: hsla(from var(--text-color) h s l / 1);
+    }
+
+    @if not($header-background) and $selected-text-color {
+        $header-background: var(--selected-text-color);
+    }
+
+    @if not($header-background) and $background-color {
+        $header-background: var(--background-color);
     }
 
     @if not($header-hour-text-color) and $header-background {
-        $header-hour-text-color: text-contrast($header-background);
+        $header-hour-text-color: adaptive-contrast(var(--header-background));
     }
 
     @if not($selected-text-color) and $active-item-background {
-        $selected-text-color: text-contrast($active-item-background);
+        $selected-text-color: var(--active-item-background);
+    }
+
+    @if not($active-item-background) and $selected-text-color {
+        $active-item-background: var(--selected-text-color);
     }
 
     @if not($active-item-background) and $background-color {
-        @if meta.type-of($background-color) == 'color' {
-            $active-item-background: rgba(text-contrast($background-color), .12);
-        }
+        $active-item-background: hsla(from adaptive-contrast(var(--background-color)) h s l / .5);
+    }
+
+    @if not($active-item-foreground) and $active-item-background {
+        $active-item-foreground: adaptive-contrast(var(--active-item-background));
+    }
+
+    @if not($selected-text-color) and $background-color {
+        $selected-text-color: adaptive-contrast(var(--background-color));
     }
 
     @if not($disabled-text-color) and $disabled-item-background {
-        @if meta.type-of($disabled-item-background) == 'color' {
-            $disabled-text-color: rgba(text-contrast($disabled-item-background), .6);
-        }
+        $disabled-text-color: hsla(from adaptive-contrast(var(--disabled-item-background)) h s l / .6);
+    }
+
+    @if not($border-color) and $background-color {
+        $border-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .6);
     }
 
     @if not($divider-color) and $border-color {
-        @if meta.type-of($border-color) == 'color' {
-            $divider-color: $border-color;
-        }
+        $divider-color: var(--border-color);
     }
 
     @if not($modal-shadow) {
@@ -133,10 +154,6 @@
         divider-color: $divider-color,
         time-item-size: $time-item-size,
         active-item-border-radius: $active-item-border-radius,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -146,7 +163,7 @@
 @mixin time-picker($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $not-bootstrap-theme: $variant != 'bootstrap';
 
     $picker-buttons-padding: map.get((

package/lib/core/styles/components/toast/_toast-theme.scss

@@ -46,17 +46,20 @@
     }
 
     $theme: digest-schema($toast-schema);
-    $meta: map.get($theme, '_meta');
+
+    @if not($text-color) and $background {
+        $text-color: adaptive-contrast(var(--background));
+    }
+
+    @if not($border-color) and $text-color {
+        $border-color: hsla(from var(--text-color) h s l / 0.3);
+    }
 
     @if not($shadow) {
         $elevation: map.get($toast-schema, 'elevation');
         $shadow: elevation($elevation);
     }
 
-    @if not($text-color) and $background {
-        $text-color: text-contrast($background);
-    }
-
     @return extend($theme, (
         name: $name,
         background: $background,
@@ -64,10 +67,6 @@
         text-color: $text-color,
         border-color: $border-color,
         shadow: $shadow,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -77,8 +76,8 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin toast($theme) {
     @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
 
+    $variant: map.get($theme, '_meta', 'theme');
     $width: rem(52px);
     $margin: rem(42px) auto;
 

package/lib/core/styles/components/tooltip/_tooltip-theme.scss

@@ -43,7 +43,6 @@
     }
 
     $theme: digest-schema($tooltip-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($shadow) {
         $elevation: map.get($tooltip-schema, 'elevation');
@@ -51,7 +50,7 @@
     }
 
     @if not($text-color) and $background {
-        $text-color: text-contrast($background);
+        $text-color: adaptive-contrast($background);
     }
 
     @return extend($theme, (
@@ -61,10 +60,6 @@
         text-color: $text-color,
         border-radius: $border-radius,
         shadow: $shadow,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -73,7 +68,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin tooltip($theme) {
     @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %tooltip-display {
         display: inline-flex;

package/lib/core/styles/components/tree/_tree-theme.scss

@@ -62,22 +62,49 @@
     }
 
     $theme: digest-schema($tree-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($foreground) and $background {
-        $foreground: text-contrast($background);
+        $foreground: adaptive-contrast(var(--background));
+    }
+
+    @if not($background-selected) and $background {
+        $background-selected: hsl(from var(--background) h s calc(l * 0.9));
+    }
+
+    @if not($hover-color) and $background {
+        $hover-color: hsla(from adaptive-contrast(var(--background)) h s l / 0.1);
+    }
+
+    @if not($hover-selected-color) and $background-selected {
+        $hover-selected-color: hsl(from var(--background-selected) h s calc(l * 0.9));
     }
 
     @if not($foreground-selected) and $background-selected {
-        $foreground-selected: text-contrast($background-selected);
+        $foreground-selected: adaptive-contrast(var(--background-selected));
+    }
+
+    @if not($background-active) and $background {
+        $background-active: hsl(from var(--background) h s calc(l * 0.9));
     }
 
     @if not($foreground-active) and $background-active {
-        $foreground-active: text-contrast($background-active);
+        $foreground-active: adaptive-contrast(var(--background-active));
+    }
+
+    @if not($background-active-selected) and $background-active {
+        $background-active-selected: hsl(from var(--background-active) h s calc(l * 0.9));
     }
 
     @if not($foreground-active-selected) and $background-active-selected {
-        $foreground-active-selected: text-contrast($background-active-selected);
+        $foreground-active-selected: adaptive-contrast(var(--background-active-selected));
+    }
+
+    @if not($background-disabled) and $background {
+        $background-disabled: color-mix(in hsl, var(--background), transparent 50%);
+    }
+
+    @if not($foreground-disabled) and $background-disabled {
+        $foreground-disabled: adaptive-contrast(var(--background-disabled));
     }
 
     @return extend($theme, (
@@ -98,10 +125,6 @@
         border-color: $border-color,
         hover-color: $hover-color,
         hover-selected-color: $hover-selected-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
         size: $size,
     ));
 }
@@ -112,7 +135,7 @@
 @mixin tree($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $indigo-theme: $variant == 'indigo';
 
     $node-indent-default: (

package/lib/core/styles/components/watermark/_watermark-theme.scss

@@ -58,7 +58,6 @@
         color: $color,
         border-color: $border-color,
         border-radius: $border-radius,
-        theme: map.get($schema, '_meta', 'theme'),
     ));
 }
 

package/lib/core/styles/themes/_core.scss

@@ -124,6 +124,12 @@
         inherits: true;
     }
 
+    @property --vhelper-scollbar-size {
+        syntax: '<length>';
+        initial-value: 16px;
+        inherits: true;
+    }
+
     // Component styles
     @include ripple.component();
     @include action-strip.component();