igniteui-angular 20.0.0 → 20.0.2

package/lib/core/styles/components/card/_card-theme.scss

@@ -52,28 +52,21 @@
     }
 
     $theme: digest-schema($card-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($header-text-color) and $background {
-        $header-text-color: text-contrast($background);
+        $header-text-color: adaptive-contrast(var(--background));
     }
 
     @if not($actions-text-color) and $background {
-        @if meta.type-of($background) == 'color' {
-            $actions-text-color: rgba(text-contrast($background), .5);
-        }
+        $actions-text-color: adaptive-contrast(var(--background));
     }
 
     @if not($content-text-color) and $background {
-        @if meta.type-of($background) == 'color' {
-            $content-text-color: rgba(text-contrast($background), .7);
-        }
+        $content-text-color: hsl(from adaptive-contrast(var(--background)) h s calc(l * 0.85));
     }
 
     @if not($subtitle-text-color) and $background {
-        @if meta.type-of($background) == 'color' {
-            $subtitle-text-color: rgba(text-contrast($background), .7);
-        }
+        $subtitle-text-color: hsl(from adaptive-contrast(var(--background)) h s calc(l * 0.85));
     }
 
     @if not($resting-shadow) {
@@ -97,10 +90,6 @@
         actions-text-color: $actions-text-color,
         resting-shadow: $resting-shadow,
         hover-shadow: $hover-shadow,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -110,7 +99,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin card($theme) {
     @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $not-material-theme: $variant != 'material';
 
     $card-heading-padding: rem(16px, 16px);

package/lib/core/styles/components/carousel/_carousel-theme.scss

@@ -21,9 +21,13 @@
 /// @param {Color} $button-disabled-arrow-color [null] - The previous/next buttons disabled arrow color.
 /// @param {Color} $button-border-color [null] - The previous/next buttons idle border color.
 /// @param {Color} $button-hover-border-color [null] - The previous/next buttons hover border color.
+/// @param {Color} $button-focus-border-color [null] - The navigation buttons border color on focus.
 /// @param {Color} $button-disabled-border-color [null] - The previous/next buttons disabled border color.
+/// @param {Color} $indicator-background [null] - The indicators container background color.
+/// @param {Color} $label-indicator-background [null] - The label indicator container background color.
 /// @param {Color} $indicator-dot-color [null] - The idle indicator dot color.
 /// @param {Color} $indicator-hover-dot-color [null] - The hover indicator dot color.
+/// @param {Color} $indicator-focus-color [null] - The indicators border and dot color on focus.
 /// @param {Color} $indicator-border-color [null] - The idle indicator border color.
 /// @param {Color} $indicator-active-dot-color [null] - The active indicator dot color.
 /// @param {Color} $indicator-active-border-color [null] - The active indicator border color.
@@ -54,13 +58,18 @@
     $button-disabled-background: null,
     $button-arrow-color: null,
     $button-hover-arrow-color: null,
+    $button-focus-arrow-color: null,
     $button-disabled-arrow-color: null,
     $button-border-color: null,
     $button-hover-border-color: null,
+    $button-focus-border-color: null,
     $button-disabled-border-color: null,
 
+    $indicator-background: null,
+    $label-indicator-background: null,
     $indicator-dot-color: null,
     $indicator-hover-dot-color: null,
+    $indicator-focus-color: null,
     $indicator-border-color: null,
     $indicator-active-dot-color: null,
     $indicator-active-border-color: null,
@@ -76,7 +85,25 @@
     }
 
     $theme: digest-schema($carousel-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
+
+    @if $variant == 'indigo' {
+        @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-border-color) and $button-background {
+            $button-border-color: hsl(from var(--button-background) h s calc(l * 0.9));
+        }
+
+        @if not($button-hover-border-color) and $button-border-color {
+            $button-hover-border-color: hsl(from var(--button-border-color) h s calc(l * 0.9));
+        }
+
+        @if not($indicator-active-dot-color) and not($indicator-background) and $button-background {
+            $indicator-active-dot-color: var(--button-background);
+        }
+    }
 
     @if not($button-shadow) {
         $button-elevation: map.get($carousel-schema, 'button-elevation');
@@ -84,16 +111,80 @@
     }
 
     @if not($button-arrow-color) and $button-background {
-        $button-arrow-color: text-contrast($button-background);
+        $button-arrow-color: hsla(from (adaptive-contrast(var(--button-background)) h s l / 0.85));
+    }
+
+    @if not($button-hover-background) and $button-background {
+        $button-hover-background: var(--button-background);
     }
 
     @if not($button-hover-arrow-color) and $button-hover-background {
-        $button-hover-arrow-color: text-contrast($button-hover-background);
+        $button-hover-arrow-color: adaptive-contrast(var(--button-hover-background));
+    }
+
+    @if not($button-focus-arrow-color) and $button-hover-arrow-color {
+        $button-focus-arrow-color: var(--button-hover-arrow-color);
+    }
+
+    @if not($button-disabled-background) and $button-background {
+        $button-disabled-background: var(--button-background);
     }
 
     @if not($button-disabled-arrow-color) and $button-disabled-background {
-        @if meta.type-of($button-disabled-background) == 'color' {
-            $button-disabled-arrow-color: rgba(text-contrast($button-disabled-background), .3);
+        $button-disabled-arrow-color: hsla(from adaptive-contrast(var(--button-disabled-background)) h s l / .4);
+    }
+
+    @if not($indicator-dot-color) and $indicator-background {
+        $indicator-dot-color: hsla(from adaptive-contrast(var(--indicator-background)) h s l / .8);
+    }
+
+    @if not($indicator-hover-dot-color) and $indicator-dot-color {
+        $indicator-hover-dot-color: hsla(from var(--indicator-dot-color) h s l / 1);
+    }
+
+    @if not($indicator-border-color) and $indicator-dot-color {
+        $indicator-border-color: var(--indicator-dot-color);
+    }
+
+    @if not($indicator-active-dot-color) and $indicator-background {
+        $indicator-active-dot-color: hsl(from adaptive-contrast(var(--indicator-background)) h s calc(l * 0.9));
+    }
+
+    @if not($indicator-active-hover-dot-color) and $indicator-active-dot-color {
+        $indicator-active-hover-dot-color: hsl(from var(--indicator-active-dot-color) h s calc(l * 1.1));
+    }
+
+    @if not($indicator-active-border-color) and $indicator-active-dot-color {
+        $indicator-active-border-color: var(--indicator-active-dot-color);
+    }
+
+    @if $variant == 'material' {
+        @if not($button-focus-border-color) and $button-focus-arrow-color {
+            $button-focus-border-color: var(--button-focus-arrow-color);
+        }
+    }
+
+    @if $variant == 'fluent' or $variant == 'bootstrap' {
+        @if not($button-focus-border-color) and $button-background {
+            $button-focus-border-color: hsla(from adaptive-contrast(var(--button-background)) h s l / 0.5);
+        }
+    }
+
+    @if $variant == 'indigo' {
+        @if not($button-focus-border-color) and $indicator-active-dot-color {
+            $button-focus-border-color: var(--indicator-active-dot-color);
+        }
+
+        @if not($indicator-focus-color) and $indicator-active-hover-dot-color {
+            $indicator-focus-color: hsla(from var(--indicator-active-hover-dot-color) h s l / .5);
+        }
+    } @else {
+        @if not($indicator-focus-color) and not($indicator-background) and $button-background {
+            $indicator-focus-color: var(--button-background);
+        }
+
+        @if not($indicator-focus-color) and $indicator-background {
+            $indicator-focus-color: adaptive-contrast(var(--indicator-background));
         }
     }
 
@@ -110,21 +201,22 @@
         button-hover-background: $button-hover-background,
         button-arrow-color: $button-arrow-color,
         button-hover-arrow-color: $button-hover-arrow-color,
+        button-focus-arrow-color: $button-focus-arrow-color,
         button-disabled-arrow-color: $button-disabled-arrow-color,
         button-border-color: $button-border-color,
         button-hover-border-color: $button-hover-border-color,
+        button-focus-border-color: $button-focus-border-color,
         button-disabled-border-color: $button-disabled-border-color,
 
+        indicator-background: $indicator-background,
+        label-indicator-background: $label-indicator-background,
         indicator-dot-color: $indicator-dot-color,
         indicator-hover-dot-color: $indicator-hover-dot-color,
+        indicator-focus-color: $indicator-focus-color,
         indicator-border-color: $indicator-border-color,
         indicator-active-dot-color: $indicator-active-dot-color,
         indicator-active-border-color: $indicator-active-border-color,
         indicator-active-hover-dot-color: $indicator-active-hover-dot-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -139,7 +231,7 @@
     $indicator-border-style: rem(2px) solid;
     $btn-indent: rem(3px);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $not-bootstrap-theme: $variant != 'bootstrap';
 
     %igx-carousel-display {
@@ -206,25 +298,17 @@
             border: rem(2px) solid var-get($theme, 'button-focus-border-color');
 
             igx-icon {
-                color: var-get($theme, 'button-focus-border-color');
+                color: var-get($theme, 'button-focus-arrow-color');
             }
 
             @if $variant == 'bootstrap' {
                 box-shadow: 0 0 0 rem(4px) var-get($theme, 'button-focus-border-color');
                 border-color: var-get($theme, 'button-border-color');
-
-                igx-icon {
-                    color: var-get($theme, 'button-arrow-color');
-                }
             }
 
             @if $variant == 'fluent' {
                 border: none;
 
-                igx-icon {
-                    color: var-get($theme, 'indicator-focus-color');
-                }
-
                 &::after {
                     position: absolute;
                     content: '';
@@ -239,10 +323,6 @@
 
             @if $variant == 'indigo' {
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'indicator-focus-color');
-
-                igx-icon {
-                    color: var-get($theme, 'button-arrow-color');
-                }
             }
         }
 

package/lib/core/styles/components/checkbox/_checkbox-component.scss

@@ -163,7 +163,7 @@
             @extend %igx-checkbox--focused-bootstrap !optional;
 
             &:hover {
-                @extend %igx-checkbox--focused-hovered !optional;
+                @extend %igx-checkbox--focused-hovered-bootstrap !optional;
             }
         }
 

package/lib/core/styles/components/checkbox/_checkbox-theme.scss

@@ -29,8 +29,11 @@
 /// @param {List} $border-radius [null] - The border radius used for checkbox component.
 /// @param {List} $border-radius-ripple [null] - The border radius used for checkbox ripple.
 /// @param {Color} $focus-outline-color [null] - The focus outlined color.
+/// @param {Color} $focus-outline-color-focused [null] - The focus outlined color for focused state.
+/// @param {Color} $focus-border-color [null] - The focus border color.
 /// @param {Color} $error-color [null] - The border and fill colors in invalid state.
 /// @param {Color} $error-color-hover [null] - The border and fill colors in invalid state on hover.
+/// @param {Color} $focus-outline-color-error [null] - The focus outline error color.
 /// Set to light when the surrounding area is dark.
 ///
 /// @requires $light-material-schema
@@ -58,8 +61,11 @@
     $disabled-color-label: null,
     $border-radius-ripple: null,
     $focus-outline-color: null,
+    $focus-outline-color-focused: null,
+    $focus-border-color: null,
     $error-color: null,
     $error-color-hover: null,
+    $focus-outline-color-error: null,
 ) {
     $name: 'igx-checkbox';
     $checkbox-schema: ();
@@ -71,7 +77,55 @@
     }
 
     $theme: digest-schema($checkbox-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
+
+    @if not($empty-color-hover) and $empty-color {
+        $empty-color-hover: hsl(from var(--empty-color) h s calc(l * 0.9));
+    }
+
+    @if not($fill-color-hover) and $fill-color {
+        $fill-color-hover: hsl(from var(--fill-color) h s calc(l * 0.9));
+    }
+
+    @if not($tick-color) and $fill-color {
+        $tick-color: adaptive-contrast(var(--fill-color));
+    }
+
+    @if not($label-color-hover) and $label-color {
+        $label-color-hover: hsl(from var(--label-color) h s calc(l * 0.9));
+    }
+
+    @if not($focus-border-color) and $fill-color {
+        $focus-border-color: var(--fill-color);
+    }
+
+    @if not($disabled-indeterminate-color) and $fill-color {
+        $disabled-indeterminate-color: hsla(from var(--fill-color) h s l / 0.5);
+    }
+
+    @if not($error-color-hover) and $error-color {
+        $error-color-hover: hsl(from var(--error-color) h s calc(l * 0.9));
+    }
+
+    @if not($focus-outline-color-error) and $error-color {
+        $focus-outline-color-error: hsla(from var(--error-color) h s l / .5);
+    }
+
+    @if $variant == 'bootstrap' {
+        @if not($focus-outline-color) and $fill-color {
+            $focus-outline-color: hsla(from var(--fill-color) h s l / .5);
+        }
+    }
+
+    @if $variant == 'indigo' {
+        @if not($focus-outline-color) and $empty-color {
+            $focus-outline-color: hsla(from var(--empty-color) h s l / .5);
+        }
+
+        @if not($focus-outline-color-focused) and $fill-color {
+            $focus-outline-color-focused: hsla(from var(--fill-color) h s l / .5);
+        }
+    }
 
     @return extend($theme, (
         name: $name,
@@ -91,13 +145,11 @@
         border-radius: $border-radius,
         border-radius-ripple: $border-radius-ripple,
         focus-outline-color: $focus-outline-color,
+        focus-outline-color-focused: $focus-outline-color-focused,
+        focus-border-color: $focus-border-color,
         error-color: $error-color,
         error-color-hover: $error-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')
-        )),
+        focus-outline-color-error: $focus-outline-color-error
     ));
 }
 
@@ -106,8 +158,8 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin checkbox($theme) {
     @include css-vars($theme);
-    $theme-variant: map.get($theme, '_meta', 'theme-variant');
-    $variant: map.get($theme, '_meta', 'variant');
+    $theme-variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $material-theme: $variant == 'material';
     $bootstrap-theme: $variant == 'bootstrap';
 
@@ -591,14 +643,14 @@
     %igx-checkbox--focused-bootstrap {
         %cbx-composite {
             border-radius: var-get($theme, 'border-radius');
-            border-color: color($color: 'primary', $variant: 200);
+            border-color: var-get($theme, 'focus-border-color');
             box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color');
         }
     }
 
-    %igx-checkbox--focused-hovered {
+    %igx-checkbox--focused-hovered-bootstrap {
         %cbx-composite {
-            border-color: color($color: 'primary', $variant: 300);
+            border-color: hsl(from var-get($theme, 'focus-border-color') h calc(s * 1.12) calc(l * 0.82));
         }
     }
 

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

@@ -106,94 +106,116 @@
     }
 
     $theme: digest-schema($chip-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-background) and $background {
-        $luminance: luminance($background);
+    @if not($border-color) and $background {
+        $border-color: var(--background);
+    }
 
-        @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 {
-            $hover-background: color.scale($background, $lightness: 14%);
-        } @else {
-            $hover-background: color.scale($background, $lightness: -4%);
-        }
+    @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: text-contrast(to-opaque($hover-background));
+        $hover-text-color: adaptive-contrast(var(--hover-background));
     }
 
     @if not($focus-background) and $background {
-        $luminance: luminance($background);
+        $focus-background: hsl(from var(--background) h s calc(l * 0.8));
+    }
 
-        @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 {
-            $focus-background: color.scale($background, $lightness: 22%);
-        } @else {
-            $focus-background: color.scale($background, $lightness: -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: text-contrast(to-opaque($focus-background));
+        $focus-text-color: adaptive-contrast(var(--focus-background));
     }
 
-    @if not($selected-background) and $background {
-        $luminance: luminance($background);
-
-        @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 {
-            $selected-background: color.scale($background, $lightness: 22%);
-        } @else {
-            $selected-background: color.scale($background, $lightness: -8%);
+    @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: text-contrast(to-opaque($selected-background));
+        $selected-text-color: adaptive-contrast(var(--selected-background));
     }
 
-    @if not($hover-selected-background) and $hover-background {
-        $hover-selected-background: $hover-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: text-contrast(to-opaque($hover-selected-background));
+        $hover-selected-text-color: adaptive-contrast(var(--hover-selected-background));
     }
 
-    @if not($focus-selected-background) and $selected-background {
-        $luminance: luminance($selected-background);
-
-        @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 {
-            $focus-selected-background: color.scale($background, $lightness: 32%);
-        } @else {
-            $focus-selected-background: color.scale($background, $lightness: -16%);
+    @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: text-contrast(to-opaque($focus-selected-background));
+        $focus-selected-text-color: adaptive-contrast(var(--focus-selected-background));
     }
 
     @if not($hover-border-color) and $border-color {
-        $hover-border-color: $border-color;
+        $hover-border-color: var(--border-color);
     }
 
     @if not($focus-border-color) and $border-color {
-        $focus-border-color: $border-color;
+        $focus-border-color: var(--border-color);
     }
 
     @if not($selected-border-color) and $border-color {
-        $selected-border-color: $border-color;
+        $selected-border-color: var(--border-color);
     }
 
     @if not($hover-selected-border-color) and $border-color {
-        $hover-selected-border-color: $border-color;
+        $hover-selected-border-color: var(--border-color);
     }
 
     @if not($focus-selected-border-color) and $border-color {
-        $focus-selected-border-color: $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) {
@@ -240,11 +262,6 @@
         remove-icon-color-focus: $remove-icon-color-focus,
         focus-selected-outline-color: $focus-selected-outline-color,
         focus-outline-color: $focus-outline-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')
-        )),
         size: $size,
     ));
 }
@@ -256,8 +273,8 @@
     @include css-vars($theme);
     $chip-max-width: 32ch;
 
-    $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');
 
     $chip-padding: (
         comfortable: rem(if($variant != 'indigo', 12px, 7px)),

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

@@ -37,20 +37,15 @@
     }
 
     $theme: digest-schema($column-actions-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($title-color) and $background-color {
-        $title-color: text-contrast($background-color);
+        $title-color: adaptive-contrast(var(--background-color));
     }
 
     @return extend($theme, (
         name: $name,
         title-color: $title-color,
         background-color: $background-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme'),
-        )),
     ));
 }
 
@@ -59,7 +54,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin column-actions($theme) {
     @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %column-actions-display {
         display: flex;