igniteui-angular 20.0.0 → 20.0.2

package/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss

@@ -0,0 +1,232 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+
+@function outlined-icon-button-theme(
+    $schema: $light-material-schema,
+
+    $background: null,
+    $foreground: null,
+    $shadow-color: null,
+
+    $hover-background: null,
+    $hover-foreground: null,
+
+    $focus-background: null,
+    $focus-foreground: null,
+
+    $focus-hover-background: null,
+    $focus-hover-foreground: null,
+
+    $active-background: null,
+    $active-foreground: null,
+
+    $border-radius: null,
+    $border-color: null,
+    $focus-border-color: null,
+
+    $disabled-background: null,
+    $disabled-foreground: null,
+    $disabled-border-color: null,
+
+    $size: null,
+) {
+    $name: 'igx-outlined-icon-button';
+    $icon-button-schema: ();
+
+    @if map.has-key($schema, 'icon-button') {
+        $icon-button-schema: map.get($schema, 'icon-button');
+        @if map.has-key($icon-button-schema, 'outlined') {
+            $icon-button-schema: map.get($icon-button-schema, 'outlined');
+        } @else {
+            $icon-button-schema: $schema;
+        }
+    }
+
+    $theme: digest-schema($icon-button-schema);
+    $variant: map.get($schema, '_meta', 'theme');
+
+    @if not($hover-foreground) and $hover-background {
+        $hover-foreground: adaptive-contrast(var(--hover-background));
+    }
+
+    @if not($focus-foreground) and $focus-background {
+        $focus-foreground: adaptive-contrast(var(--focus-background));
+    }
+
+    @if not($focus-hover-foreground) and $focus-hover-background {
+        $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
+    }
+
+    @if not($active-foreground) and $active-background {
+        $active-foreground: adaptive-contrast(var(--active-background));
+    }
+
+    @if $variant == 'material' or $variant == 'fluent' {
+        @if not($hover-foreground) and $foreground {
+            $hover-foreground: var(--foreground);
+        }
+
+        @if not($focus-foreground) and $foreground {
+            $focus-foreground: var(--foreground);
+        }
+
+        @if not($focus-hover-foreground) and $foreground {
+            $focus-hover-foreground: var(--foreground);
+        }
+
+        @if not($active-foreground) and $foreground {
+            $active-foreground: var(--foreground);
+        }
+
+        @if not($hover-background) and $foreground {
+            $hover-background: hsla(from var(--foreground) h s l / 0.08);
+        }
+
+        @if not($active-background) and $foreground {
+            $active-background: hsla(from var(--foreground) h s l / 0.24);
+        }
+
+        @if $variant == 'material' {
+            @if not($focus-background) and $foreground {
+                $focus-background: hsla(from var(--foreground) h s l / 0.16);
+            }
+
+            @if not($focus-hover-background) and $foreground {
+                $focus-hover-background: hsla(from var(--foreground) h s l / 0.24);
+            }
+
+            @if not($border-color) and $foreground {
+                $border-color: hsla(from var(--foreground) h s l / 0.4);
+            }
+        } @else {
+            @if not($focus-hover-background) and $hover-background {
+                $focus-hover-background: var(--hover-background);
+            }
+
+            @if not($focus-border-color) and $foreground {
+                $focus-border-color: var(--foreground);
+            }
+
+            @if not($border-color) and $foreground {
+                $border-color: hsla(from var(--foreground) h s l / 0.7);
+            }
+        }
+    }
+
+    @if $variant == 'indigo' {
+        @if not($border-color) and $foreground {
+            $border-color: hsla(from var(--foreground) h s l / 0.8);
+        }
+
+        @if not($hover-foreground) and $foreground {
+            $hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+        }
+
+        @if not($hover-background) and $foreground {
+            $hover-background: hsla(from var(--foreground) h s l / 0.1);
+        }
+
+        @if not($focus-foreground) and $foreground {
+            $focus-foreground: var(--foreground);
+        }
+
+        @if not($focus-border-color) and $foreground {
+            $focus-border-color: hsla(from var(--foreground) h s l / 0.2);
+        }
+
+        @if not($focus-hover-foreground) and $hover-foreground {
+            $focus-hover-foreground: var(--hover-foreground);
+        }
+
+        @if not($active-foreground) and $hover-foreground {
+            $active-foreground: var(--hover-foreground);
+        }
+    }
+
+    @if $variant == 'bootstrap' {
+        @if not($border-color) and $foreground {
+            $border-color: var(--foreground);
+        }
+
+        @if not($hover-background) and $foreground {
+            $hover-background: var(--foreground);
+        }
+
+        @if not($hover-foreground) and $hover-background {
+            $hover-foreground: adaptive-contrast(var(--hover-background));
+        }
+
+        @if not($focus-background) and $foreground {
+            $focus-background: var(--foreground);
+        }
+
+        @if not($focus-foreground) and $focus-background {
+            $focus-foreground: adaptive-contrast(var(--focus-background));
+        }
+
+        @if not($focus-hover-background) and $focus-background {
+            $focus-hover-background: hsl(from var(--focus-background) h s calc(l * 0.9));
+        }
+
+        @if not($focus-hover-foreground) and $focus-hover-background {
+            $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
+        }
+
+        @if not($active-background) and $foreground {
+            $active-background: hsl(from var(--foreground) h s calc(l * 0.8));
+        }
+
+        @if not($active-foreground) and $active-background {
+            $active-foreground: adaptive-contrast(var(--active-background));
+        }
+
+        @if not($focus-border-color) and $active-background {
+            $focus-border-color: var(--active-background);
+        }
+
+        @if not($shadow-color) and $focus-background {
+            $shadow-color: hsla(from var(--focus-background) h s l / 0.5);
+        }
+    }
+
+    @if $variant == 'bootstrap' or $variant == 'indigo' {
+        @if not($disabled-foreground) and $foreground {
+            $disabled-foreground: hsla(from var(--foreground) h s l / 0.5);
+        }
+
+        @if not($disabled-border-color) and $border-color {
+            $disabled-border-color: hsla(from var(--border-color) h s l / 0.2);
+        }
+    }
+
+    @return extend(
+    $theme,
+    (
+        name: $name,
+        background: $background,
+        foreground: $foreground,
+        shadow-color: $shadow-color,
+
+        hover-background: $hover-background,
+        hover-foreground: $hover-foreground,
+
+        focus-background: $focus-background,
+        focus-foreground: $focus-foreground,
+
+        focus-hover-background: $focus-hover-background,
+        focus-hover-foreground: $focus-hover-foreground,
+
+        active-background: $active-background,
+        active-foreground: $active-foreground,
+
+        border-radius: $border-radius,
+        border-color: $border-color,
+        focus-border-color: $focus-border-color,
+
+        disabled-background: $disabled-background,
+        disabled-foreground: $disabled-foreground,
+        disabled-border-color: $disabled-border-color,
+        size: $size,
+    ));
+}

package/lib/core/styles/components/input/_input-group-theme.scss

@@ -34,7 +34,6 @@
 /// @param {Color} $idle-bottom-line-color [null] - The bottom line and border colors in the idle state.
 /// @param {Color} $hover-bottom-line-color [null] - The bottom line and border colors in the hover state.
 /// @param {Color} $focused-bottom-line-color [null] - The bottom line and border colors in the focused state.
-/// @param {Color} $interim-bottom-line-color [null] - The bottom line and border colors during the to-focused transition.
 /// @param {Color} $disabled-bottom-line-color [null] - The bottom line and border colors in the disabled state.
 /// @param {Color} $border-color [null] - The border color for input groups of type border and fluent.
 /// @param {Color} $hover-border-color [null] - The hover input border for input groups of type border and fluent.
@@ -86,7 +85,6 @@
     $idle-bottom-line-color: null,
     $hover-bottom-line-color: null,
     $focused-bottom-line-color: null,
-    $interim-bottom-line-color: null,
     $disabled-bottom-line-color: null,
 
     $border-color: null,
@@ -141,24 +139,247 @@
     }
 
     $theme: digest-schema($input-group-schema);
+    $variant: map.get($theme, '_meta', 'theme');
+
     $search-resting-elevation: map.get($input-group-schema, 'search-resting-elevation');
     $search-hover-elevation: map.get($input-group-schema, 'search-hover-elevation');
     $search-disabled-elevation: map.get($input-group-schema, 'search-disabled-elevation');
 
-    @if not($placeholder-color) and $box-background {
-        $placeholder-color: text-contrast($box-background);
+    @if $variant == 'material' {
+        @if not($box-background-hover) and $box-background {
+            $box-background-hover: var(--box-background);
+        }
+
+        @if not($box-background-focus) and $box-background {
+            $box-background-focus: hsl(from var(--box-background) h s calc(l * 0.9));
+        }
+
+        @if not($placeholder-color) and $box-background {
+            $placeholder-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
+        }
+
+        @if not($hover-placeholder-color) and $box-background-hover {
+            $hover-placeholder-color: hsla(from adaptive-contrast(var(--box-background-hover)) h s l / 0.9);
+        }
+
+        @if not($idle-text-color) and $box-background {
+            $idle-text-color: adaptive-contrast(var(--box-background));
+        }
+
+        @if not($filled-text-color) and $box-background {
+            $filled-text-color: adaptive-contrast(var(--box-background));
+        }
+
+        @if not($filled-text-hover-color) and $box-background {
+            $filled-text-hover-color: adaptive-contrast(var(--box-background));
+        }
+
+        @if not($focused-text-color) and $box-background-focus {
+            $focused-text-color: adaptive-contrast(var(--box-background-focus));
+        }
+
+        @if not($idle-secondary-color) and $box-background {
+            $idle-secondary-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
+        }
+
+        @if not($input-prefix-color) and $box-background {
+            $input-prefix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
+        }
+
+        @if not($input-prefix-color--filled) and $box-background {
+            $input-prefix-color--filled: adaptive-contrast(var(--box-background));
+        }
+
+        @if not($input-prefix-color--focused) and $box-background-focus {
+            $input-prefix-color--focused: adaptive-contrast(var(--box-background-focus));
+        }
+
+        @if not($input-suffix-color) and $box-background {
+            $input-suffix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
+        }
+
+        @if not($input-suffix-color--filled) and $box-background {
+            $input-suffix-color--filled: adaptive-contrast(var(--box-background));
+        }
+
+        @if not($input-suffix-color--focused) and $box-background-focus {
+            $input-suffix-color--focused: adaptive-contrast(var(--box-background-focus));
+        }
+
+        @if $box-background != transparent {
+            @if not($box-disabled-background) and $box-background {
+                $box-disabled-background: hsla(from var(--box-background) h s l / 0.4);
+            }
+
+            @if not($disabled-placeholder-color) and $box-disabled-background {
+                $disabled-placeholder-color: adaptive-contrast(var(--box-disabled-background));
+            }
+
+            @if not($disabled-text-color) and $box-disabled-background {
+                $disabled-text-color: adaptive-contrast(var(--box-disabled-background));
+            }
+        } @else {
+            @if not($box-disabled-background) and $box-background {
+                $box-disabled-background: var(--box-background);
+            }
+
+            @if not($disabled-placeholder-color) and $placeholder-color {
+                $disabled-placeholder-color: hsla(from var(--placeholder-color) h s l / 0.7);
+            }
+
+            @if not($disabled-text-color) and $idle-text-color {
+                $disabled-text-color: hsla(from var(--idle-text-color) h s l / 0.7);
+            }
+        }
+    }
+
+    @if $variant == 'fluent' or $variant == 'bootstrap' {
+        @if not($input-prefix-background) and $input-suffix-background {
+            $input-prefix-background: var(--input-suffix-background);
+        }
+
+        @if not($input-suffix-background) and $input-prefix-background {
+            $input-suffix-background: var(--input-prefix-background);
+        }
     }
 
-    @if not($placeholder-color) and $box-background-hover {
-        $placeholder-color: text-contrast($box-background-hover);
+    @if $variant == 'material' or $variant == 'indigo' {
+        //bottom line color
+        @if not($hover-bottom-line-color) and $idle-bottom-line-color {
+            $hover-bottom-line-color: hsl(from var(--idle-bottom-line-color) h s calc(l * 0.8));
+        }
+
+        @if not($focused-bottom-line-color) and $hover-bottom-line-color {
+            $focused-bottom-line-color: var(--hover-bottom-line-color);
+        }
+
+        @if $variant == 'material' {
+            @if not($focused-secondary-color) and $focused-bottom-line-color {
+                $focused-secondary-color: var(--focused-bottom-line-color);
+            }
+
+            @if not($border-color) and $idle-bottom-line-color {
+                $border-color: var(--idle-bottom-line-color);
+            }
+        }
+    }
+
+    //border-color
+    @if $variant == 'bootstrap' {
+        @if not($focused-border-color) and $border-color {
+            $focused-border-color: hsl(from var(--border-color) h s calc(l * 0.8));
+        }
+
+        @if not($focused-secondary-color) and $focused-border-color {
+            $focused-secondary-color: hsla(from var(--focused-border-color) h s l / 0.4);
+        }
+    } @else {
+        @if not($hover-border-color) and $border-color {
+            $hover-border-color: hsl(from var(--border-color) h s calc(l * 0.8));
+        }
+
+        @if not($focused-border-color) and $hover-border-color {
+            $focused-border-color: var(--hover-border-color);
+        }
+
+        @if $variant != 'indigo' {
+            @if not($focused-secondary-color) and $focused-border-color {
+                $focused-secondary-color: var(--focused-border-color);
+            }
+        }
     }
 
-    @if not($placeholder-color) and $box-background-focus {
-        $placeholder-color: text-contrast($box-background-focus);
+    @if $variant == 'material' {
+        @if not($focused-bottom-line-color) and $focused-border-color {
+            $focused-bottom-line-color: var(--focused-border-color);
+        }
     }
 
+    //search input
     @if not($placeholder-color) and $search-background {
-        $placeholder-color: text-contrast($search-background);
+        $placeholder-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9);
+    }
+
+    @if not($hover-placeholder-color) and $placeholder-color {
+        $hover-placeholder-color: var(--placeholder-color);
+    }
+
+    @if $variant == 'indigo' {
+        @if not($box-background-hover) and $search-background {
+            $box-background-hover: var(--search-background);
+        }
+    } @else {
+        @if not($idle-secondary-color) and $placeholder-color {
+            $idle-secondary-color: var(--placeholder-color);
+        }
+    }
+
+    @if not($idle-text-color) and $search-background {
+        $idle-text-color: adaptive-contrast(var(--search-background));
+    }
+
+    @if not($filled-text-color) and $search-background {
+        $filled-text-color: adaptive-contrast(var(--search-background));
+    }
+
+    @if not($filled-text-hover-color) and $search-background {
+        $filled-text-hover-color: adaptive-contrast(var(--search-background));
+    }
+
+    @if not($focused-text-color) and $search-background {
+        $focused-text-color: adaptive-contrast(var(--search-background));
+    }
+
+    @if not($input-prefix-color) and $search-background {
+        $input-prefix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9);
+    }
+
+    @if not($input-suffix-color) and $search-background {
+        $input-suffix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9);
+    }
+
+    @if $variant != 'indigo' {
+        @if not($input-prefix-color--filled) and $search-background {
+            $input-prefix-color--filled: adaptive-contrast(var(--search-background));
+        }
+
+        @if not($input-prefix-color--focused) and $search-background {
+            $input-prefix-color--focused: adaptive-contrast(var(--search-background));
+        }
+
+        @if not($input-suffix-color--filled) and $search-background {
+            $input-suffix-color--filled: adaptive-contrast(var(--search-background));
+        }
+
+        @if not($input-suffix-color--focused) and $search-background {
+            $input-suffix-color--focused: adaptive-contrast(var(--search-background));
+        }
+    }
+
+    @if $search-background != transparent {
+        @if not($search-disabled-background) and $search-background {
+            $search-disabled-background: hsla(from var(--search-background) h s l / 0.4);
+        }
+
+        @if not($disabled-placeholder-color) and $search-disabled-background {
+            $disabled-placeholder-color: adaptive-contrast(var(--search-disabled-background));
+        }
+
+        @if not($disabled-text-color) and $search-disabled-background {
+            $disabled-text-color: adaptive-contrast(var(--search-disabled-background));
+        }
+    } @else {
+        @if not($search-disabled-background) and $search-background {
+            $search-disabled-background: var(--search-background);
+        }
+
+        @if not($disabled-placeholder-color) and $placeholder-color {
+            $disabled-placeholder-color: hsla(from var(--placeholder-color) h s l / 0.7);
+        }
+
+        @if not($disabled-text-color) and $idle-text-color {
+            $disabled-text-color: hsla(from var(--idle-text-color) h s l / 0.7);
+        }
     }
 
     @if not($search-resting-shadow) {
@@ -172,37 +393,70 @@
     @if not($search-disabled-shadow) {
         $search-disabled-shadow: elevation($search-disabled-elevation);
     }
+    //end search input
+
+    @if not($input-prefix-color) and $input-suffix-color {
+        $input-prefix-color: var(--input-suffix-color);
+    }
+
+    @if not($input-suffix-color) and $input-prefix-color {
+        $input-suffix-color: var(--input-prefix-color);
+    }
 
     @if not($input-prefix-background--filled) and $input-prefix-background {
-        $input-prefix-background--filled: $input-prefix-background;
+        $input-prefix-background--filled: var(--input-prefix-background);
     }
 
     @if not($input-prefix-background--focused) and $input-prefix-background {
-        $input-prefix-background--focused: $input-prefix-background;
+        $input-prefix-background--focused: var(--input-prefix-background);
     }
 
     @if not($input-prefix-color) and $input-prefix-background {
-        $input-prefix-color: text-contrast($input-prefix-background);
+        $input-prefix-color: adaptive-contrast(var(--input-prefix-background));
+    }
+
+    @if not($input-prefix-color--filled) and $input-prefix-color {
+        $input-prefix-color--filled: var(--input-prefix-color);
+    }
+
+    @if not($input-prefix-color--focused) and $input-prefix-color--filled {
+        $input-prefix-color--focused: var(--input-prefix-color--filled);
     }
 
     @if not($input-prefix-color--filled) and $input-prefix-background--filled {
-        $input-prefix-color--filled: text-contrast($input-prefix-background--filled);
+        $input-prefix-color--filled: adaptive-contrast(var(--input-prefix-background--filled));
     }
 
     @if not($input-prefix-color--focused) and $input-prefix-background--focused {
-        $input-prefix-color--focused: text-contrast($input-prefix-background--focused);
+        $input-prefix-color--focused: adaptive-contrast(var(--input-prefix-background--focused));
+    }
+
+    @if not($input-suffix-background--filled) and $input-suffix-background {
+        $input-suffix-background--filled: var(--input-suffix-background);
+    }
+
+    @if not($input-suffix-background--focused) and $input-suffix-background {
+        $input-suffix-background--focused: var(--input-suffix-background);
     }
 
     @if not($input-suffix-color) and $input-suffix-background {
-        $input-suffix-color: text-contrast($input-suffix-background);
+        $input-suffix-color: adaptive-contrast(var(--input-suffix-background));
+    }
+
+    @if not($input-suffix-color--filled) and $input-suffix-color {
+        $input-suffix-color--filled: var(--input-suffix-color);
+    }
+
+    @if not($input-suffix-color--focused) and $input-suffix-color--filled {
+        $input-suffix-color--focused: var(--input-suffix-color--filled);
     }
 
     @if not($input-suffix-color--filled) and $input-suffix-background--filled {
-        $input-suffix-color--filled: text-contrast($input-suffix-background--filled);
+        $input-suffix-color--filled: adaptive-contrast(var(--input-suffix-background--filled));
     }
 
     @if not($input-suffix-color--focused) and $input-suffix-background--focused {
-        $input-suffix-color--focused: text-contrast($input-suffix-background--focused);
+        $input-suffix-color--focused: adaptive-contrast(var(--input-suffix-background--focused));
     }
 
     @if not($box-border-radius) {
@@ -234,7 +488,6 @@
         idle-bottom-line-color: $idle-bottom-line-color,
         hover-bottom-line-color: $hover-bottom-line-color,
         focused-bottom-line-color: $focused-bottom-line-color,
-        interim-bottom-line-color: $interim-bottom-line-color,
         disabled-bottom-line-color: $disabled-bottom-line-color,
         border-color: $border-color,
         hover-border-color: $hover-border-color,
@@ -271,8 +524,6 @@
         input-suffix-background--filled: $input-suffix-background--filled,
         input-suffix-color--focused: $input-suffix-color--focused,
         input-suffix-background--focused: $input-suffix-background--focused,
-        theme: map.get($schema, '_meta', 'theme'),
-        variant: map.get($schema, '_meta', 'theme'),
         size: $size,
     ));
 }
@@ -285,7 +536,7 @@
     // when dynamically switching between the input `type` attribute.
     @include css-vars($theme);
 
-    $variant: map.get($theme, 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $transition-timing: .25s $out-cubic;
     $material-theme: $variant == 'material';
     $indigo-theme: $variant == 'indigo';

package/lib/core/styles/components/label/_label-theme.scss

@@ -33,9 +33,7 @@
         name: $name,
         selector: $selector,
         color: $color,
-        disabled-color: $disabled-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        variant: map.get($schema, '_meta', 'theme'),
+        disabled-color: $disabled-color
     ));
 }
 
@@ -46,7 +44,7 @@
     // The --variant CSS produced by css-vars is needed also
     // when dynamically switching between the input `type` attribute.
     @include css-vars($theme);
-    $variant: map.get($theme, 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %label-base {
         @include ellipsis();