igniteui-angular 20.0.0 → 20.0.2

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

@@ -0,0 +1,196 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+
+@function contained-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-contained-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, 'contained') {
+            $icon-button-schema: map.get($icon-button-schema, 'contained');
+        } @else {
+            $icon-button-schema: $schema;
+        }
+    }
+
+    $theme: digest-schema($icon-button-schema);
+    $variant: map.get($schema, '_meta', 'theme');
+
+    @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 $variant == 'indigo' {
+        @if not($foreground) and $background {
+            $foreground: hsla(from adaptive-contrast(var(--background)) h s l / 0.8);
+        }
+
+        @if not($hover-background) and $background {
+            $hover-background: hsl(from var(--background) h s calc(l * 1.1));
+        }
+
+        @if not($focus-background) and $background {
+            $focus-background: var(--background);
+        }
+
+        @if not($focus-foreground) and $foreground {
+            $focus-foreground: var(--foreground);
+        }
+
+        @if not($focus-hover-background) and $focus-background {
+            $focus-hover-background: hsl(from var(--focus-background) h s calc(l * 1.1));
+        }
+
+        @if not($active-background) and $background {
+            $active-background: hsl(from var(--background) h s calc(l * 1.1));
+        }
+    } @else {
+        @if not($foreground) and $background {
+            $foreground: adaptive-contrast(var(--background));
+        }
+
+        @if not($hover-background) and $background {
+            $hover-background: hsl(from var(--background) h s calc(l * 0.9));
+        }
+
+        @if not($focus-background) and $background {
+            @if $variant == 'fluent' or $variant == 'bootstrap' {
+                $focus-background: var(--background);
+            } @else {
+                $focus-background: hsl(from var(--background) h s calc(l * 0.8));
+            }
+        }
+
+        @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($active-background) and $background {
+            $active-background: hsl(from var(--background) h s calc(l * 0.8));
+        }
+    }
+
+    @if not($hover-foreground) and $hover-background {
+        $hover-foreground: adaptive-contrast(var(--hover-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 not($shadow-color) and $focus-background {
+        $shadow-color: hsla(from var(--focus-background) h s l / 0.5);
+    }
+
+    @if $variant == 'fluent' {
+        @if not($focus-border-color) and $foreground {
+            $focus-border-color: var(--foreground);
+        }
+    } @else {
+        @if not($focus-border-color) and $border-color {
+            $focus-border-color: hsl(from var(--border-color) h s calc(l * 0.8));
+        }
+    }
+
+    @if $variant == 'indigo' {
+        @if not($disabled-background) and $background {
+            $disabled-background: hsla(from var(--background) h s l / 0.4);
+        }
+
+        @if not($disabled-foreground) and $foreground {
+            $disabled-foreground: hsla(from var(--foreground) h s l / 0.5);
+        }
+
+        @if not($focus-border-color) and $focus-background {
+            $focus-border-color: hsla(from var(--focus-background) h s l / 0.3);
+        }
+    } @else if $variant == 'bootstrap' {
+        @if not($disabled-background) and $background {
+            $disabled-background: hsla(from var(--background) h s l / 0.2);
+        }
+
+        @if not($disabled-foreground) and $disabled-background {
+            $disabled-foreground: hsla(from var(--disabled-background) h s l / 0.7);
+        }
+    }
+
+    @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/icon-button/_flat-icon-button-theme.scss

@@ -0,0 +1,188 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+
+@function flat-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-flat-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, 'flat') {
+            $icon-button-schema: map.get($icon-button-schema, 'flat');
+        } @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 $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);
+            }
+        } @else {
+            @if not($focus-hover-background) and $hover-background {
+                $focus-hover-background: var(--hover-background);
+            }
+        }
+
+        @if not($active-background) and $foreground {
+            $active-background: hsla(from var(--foreground) h s l / 0.24);
+        }
+    }
+
+    @if $variant == 'indigo' {
+        @if not($hover-background) and $foreground {
+            $hover-background: hsla(from var(--foreground) h s l / 0.15);
+        }
+
+        @if not($focus-background) and $foreground {
+            $focus-background: hsla(from var(--foreground) h s l / 0.15);
+        }
+
+        @if not($focus-hover-background) and $foreground {
+            $focus-hover-background: hsla(from var(--foreground) h s l / 0.15);
+        }
+
+        @if not($active-background) and $foreground {
+            $active-background: hsla(from var(--foreground) h s l / 0.15);
+        }
+    }
+
+    @if $variant == 'bootstrap'or $variant == 'indigo' {
+        @if not($hover-foreground) and $foreground {
+            $hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+        }
+
+        @if not($focus-foreground) and $foreground {
+            $focus-foreground: var(--foreground);
+        }
+
+        @if not($focus-hover-foreground) and $hover-foreground {
+            $focus-hover-foreground: var(--hover-foreground);
+        }
+
+        @if not($disabled-foreground) and $foreground {
+        $disabled-foreground: hsla(from var(--foreground) h s l / 0.5);
+    }
+
+        @if $variant == 'bootstrap' {
+            @if not($active-foreground) and $foreground {
+                $active-foreground: hsl(from var(--foreground) h s calc(l * 0.7));
+            }
+
+            @if not($shadow-color) and $foreground {
+                $shadow-color: hsla(from var(--foreground) h s l / 0.5);
+            }
+        } @else {
+            @if not($active-foreground) and $hover-foreground {
+                $active-foreground: var(--hover-foreground);
+            }
+
+            @if not($focus-border-color) and $foreground {
+                $focus-border-color: hsla(from var(--foreground) h s l / 0.3);
+            }
+        }
+    }
+
+    @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/icon-button/_icon-button-theme.scss

@@ -1,9 +1,14 @@
 @use 'sass:map';
 @use 'sass:meta';
+@use 'sass:list';
 @use 'sass:color';
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
 
+@forward './flat-icon-button-theme';
+@forward './contained-icon-button-theme';
+@forward './outlined-icon-button-theme';
+
 ////
 /// @group themes
 /// @access public
@@ -57,37 +62,19 @@
         }
 
         @if not($foreground) and $background {
-            $foreground: text-contrast($background);
-        }
-
-        @if not($hover-background) and $background {
-            @if meta.type-of($background) == 'color' {
-                $hover-background: color.scale($background, $lightness: 5%);
-            }
+            $foreground: adaptive-contrast(var(--background));
         }
 
         @if not($hover-foreground) and $hover-background {
-            @if meta.type-of($hover-background) == 'color' {
-                $hover-foreground: text-contrast($hover-background);
-            }
-        }
-
-        @if not($focus-background) and $background {
-            $focus-background: color.scale($background, $lightness: 5%);
+            $hover-foreground: adaptive-contrast(var(--hover-background));
         }
 
         @if not($focus-foreground) and $focus-background {
-            $focus-foreground: text-contrast($focus-background);
-        }
-
-        @if not($focus-hover-background) and $background {
-            @if meta.type-of($background) == 'color' {
-                $focus-hover-background: color.scale($background, $lightness: 5%);
-            }
+            $focus-foreground: adaptive-contrast(var(--focus-background));
         }
 
         @if not($focus-hover-foreground) and $focus-hover-background {
-            $focus-hover-foreground: text-contrast($focus-hover-background);
+            $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
         }
 
         $themes: map.merge($themes, (
@@ -117,7 +104,6 @@
                 disabled-foreground: $disabled-foreground,
                 disabled-border-color: $disabled-border-color,
                 size: $size,
-                theme: map.get($schema, '_meta', 'theme'),
             ))
         ));
     }
@@ -132,15 +118,42 @@
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
-@mixin icon-button($theme) {
-    $variant: map.get($theme, variant);
-    $flat-theme: map.get(map.get($theme, 'themes'), 'flat');
-    $outlined-theme: map.get(map.get($theme, 'themes'), 'outlined');
-    $contained-theme: map.get(map.get($theme, 'themes'), 'contained');
-
-    @include css-vars($flat-theme);
-    @include css-vars($outlined-theme);
-    @include css-vars($contained-theme);
+@mixin icon-button($themes...) {
+    $flat-theme: null;
+    $contained-theme: null;
+    $outlined-theme: null;
+    $variant: 'material';
+
+    $required: ('flat', 'contained', 'outlined');
+    $added: ();
+    $missing: ();
+
+    @each $key, $theme in meta.keywords($themes) {
+        $type: map.get($theme, _meta, type);
+
+        $added: list.append($added, $key);
+
+        @if $type == 'flat' {
+            $flat-theme: $theme;
+        } @else if $type == 'contained' {
+            $contained-theme: $theme;
+        } @else if $type == 'outlined' {
+            $outlined-theme: $theme;
+        }
+
+        $variant: map.get($theme, '_meta', 'theme');
+        @include css-vars($theme);
+    }
+
+    @each $item in $required {
+        @if not(list.index($added, $item)) {
+            $missing: list.append($missing, '$#{$item}', $separator: comma);
+        }
+    }
+
+    @if list.length($missing) != 0 {
+        @error meta.inspect(string.unquote("Missing theme properties:") #{$missing});
+    }
 
     $icon-sizes: map.get((
         'material': rem(18px),