igniteui-angular 20.0.0 → 20.0.2

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

@@ -0,0 +1,419 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:string';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+
+////
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// If only background color is specified, text/icon color
+/// will be assigned automatically to a contrasting color.
+/// Does ___not___ apply for disabled state colors.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Color} $background [null] - The background color of the button.
+/// @param {Color} $foreground [null] - The text color of the button.
+/// @param {Color} $icon-color [null] - The icon color in the button.
+/// @param {Color} $icon-color-hover [null] - The icon color in the button on hover.
+/// @param {Color} $hover-background [null] - The hover background color of the button.
+/// @param {Color} $hover-foreground [null] - The hover text color of the button.
+/// @param {Color} $focus-background [null] - The focus background color of the button.
+/// @param {Color} $focus-foreground [null] - The focus text color of the button.
+/// @param {Color} $focus-hover-background [null] - The background color on focus hovered state of the button.
+/// @param {Color} $focus-hover-foreground [null] - The text color on focus hovered state of the button.
+/// @param {Color} $focus-visible-background [null] - The focus-visible background color of the button.
+/// @param {Color} $focus-visible-foreground [null] - The focus-visible text color of the button.
+/// @param {Color} $active-background [null] - The active background of the button.
+/// @param {Color} $active-foreground [null] - The active text color of the button.
+/// @param {List} $border-radius [null] - The border radius of the button.
+/// @param {Color} $border-color [null] - The border color of the button.
+/// @param {Color} $hover-border-color [null] - The hover border color of the button.
+/// @param {Color} $focus-border-color [null] - The focus border color of the button.
+/// @param {Color} $focus-visible-border-color [null] - The focus-visible border color of the button.
+/// @param {Color} $active-border-color [null] - The active border color of the button.
+/// @param {Color} $shadow-color [null] - The shadow color of the button.
+/// @param {Color} $resting-shadow [null] - The shadow of the button in its idle state.
+/// @param {Color} $hover-shadow [null] - The shadow of the button in its hover state.
+/// @param {Color} $focus-shadow [null] - The shadow of the button in its focus state.
+/// @param {Color} $active-shadow [null] - The shadow of the button in its focus state.
+/// @param {Color} $disabled-background [null] - The disabled background color of the button.
+/// @param {Color} $disabled-foreground [null] - The disabled text color of the button.
+/// @param {Color} $disabled-icon-color [null] - The disabled icon color of the button.
+/// @param {Color} $disabled-border-color [null] - The disabled border color of the button.
+///
+/// @requires $light-material-schema
+///
+/// @example scss Change the text colors in outlined buttons
+///   $my-button-theme: outlined-button-theme(
+///     $foreground: black,
+///   );
+///   // Pass the theme to the css-vars() mixin
+///   @include css-vars($my-button-theme);
+@function outlined-button-theme(
+    $schema: $light-material-schema,
+
+    $background: null,
+    $foreground: null,
+
+    $hover-background: null,
+    $hover-foreground: null,
+
+    $icon-color: $foreground,
+    $icon-color-hover: $hover-foreground,
+
+    $focus-background: null,
+    $focus-foreground: null,
+
+    $focus-hover-background: null,
+    $focus-hover-foreground: null,
+
+    $focus-visible-background: null,
+    $focus-visible-foreground: null,
+
+    $active-background: null,
+    $active-foreground: null,
+
+    $border-radius: null,
+    $border-color: null,
+    $hover-border-color: null,
+    $focus-border-color: null,
+    $focus-visible-border-color: null,
+    $active-border-color: null,
+
+    $shadow-color: null,
+
+    $resting-shadow: null,
+    $hover-shadow: null,
+    $focus-shadow: null,
+    $active-shadow: null,
+
+    $disabled-background: null,
+    $disabled-foreground: null,
+    $disabled-icon-color: $disabled-foreground,
+    $disabled-border-color: null,
+    $size: null
+) {
+    $name: 'igx-outlined-button';
+    $button-schema: ();
+
+    @if map.has-key($schema, 'button') {
+        $button-schema: map.get($schema, 'button');
+        @if map.has-key($button-schema, 'outlined') {
+            $button-schema: map.get($button-schema, 'outlined');
+        } @else {
+            $button-schema: $schema;
+        }
+    }
+
+    $theme: digest-schema($button-schema);
+    $variant: map.get($schema, '_meta', 'theme');
+
+    @if not($hover-foreground) and $hover-background {
+        $hover-foreground: adaptive-contrast(var(--hover-background));
+    }
+
+    @if not($icon-color-hover) and $hover-foreground {
+        $icon-color-hover: var(--hover-foreground);
+    }
+
+    @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 not($focus-visible-background) and $focus-background {
+        $focus-visible-background: var(--focus-background);
+    }
+
+    @if not($focus-visible-foreground) and $focus-visible-background {
+        $focus-visible-foreground: adaptive-contrast(var(--focus-visible-background));
+    }
+
+    @if not($focus-visible-border-color) and $focus-border-color {
+        $focus-visible-border-color: var(--focus-border-color);
+    }
+
+    @if $variant == 'material' or $variant == 'fluent' {
+        @if not($hover-background) and $foreground {
+            $hover-background: hsla(from var(--foreground) h s l / 0.08);
+        }
+
+        @if not($focus-background) and $foreground {
+            $focus-background: hsla(from var(--foreground) h s l / 0.32);
+        }
+
+        @if not($focus-hover-background) and $foreground {
+            $focus-hover-background: hsla(from var(--foreground) h s l / 0.24);
+        }
+
+        @if not($active-background) and $foreground {
+            $active-background: hsla(from var(--foreground) h s l / 0.16);
+        }
+
+        @if not($hover-foreground) and $hover-background {
+            $hover-foreground: hsla(from var(--hover-background) h s l / 1);
+        }
+
+        @if not($focus-foreground) and $focus-background {
+            $focus-foreground: hsla(from var(--focus-background) h s l / 1);
+        }
+
+        @if not($focus-hover-foreground) and $focus-hover-background {
+            $focus-hover-foreground: hsla(
+                from var(--focus-hover-background) h s l / 1
+            );
+        }
+
+        @if not($active-foreground) and $active-background {
+            $active-foreground: hsla(from var(--active-background) h s l / 1);
+        }
+
+        @if $variant == 'material' {
+            @if not($focus-visible-background) and $foreground {
+                $focus-visible-background: hsla(
+                    from var(--foreground) h s l / 0.16
+                );
+            }
+
+            @if not($focus-visible-foreground) and $focus-visible-background {
+                $focus-visible-foreground: hsla(
+                    from var(--focus-visible-background) h s l / 1
+                );
+            }
+        } @else {
+            @if not($focus-visible-foreground) and $focus-foreground {
+                $focus-visible-foreground: var(--focus-foreground);
+            }
+        }
+
+        @if $variant == 'fluent' {
+            @if not($focus-visible-border-color) and $focus-visible-foreground {
+                $focus-visible-border-color: var(--focus-visible-foreground);
+            }
+        }
+    }
+
+    @if $variant == 'indigo' {
+        @if not($hover-background) and $foreground {
+            $hover-background: hsla(from var(--foreground) h s l / 0.08);
+        }
+
+        @if not($focus-background) and $foreground {
+            $focus-background: hsla(from var(--foreground) h s l / 0.08);
+        }
+
+        @if not($focus-hover-background) and $foreground {
+            $focus-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.08);
+        }
+
+        @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: hsl(from var(--foreground) h s calc(l * 0.9));
+        }
+
+        @if not($focus-hover-foreground) and $foreground {
+            $focus-hover-foreground: hsl(
+                from var(--foreground) h s calc(l * 0.9)
+            );
+        }
+
+        @if not($focus-visible-foreground) and $foreground {
+            $focus-visible-foreground: var(--foreground);
+        }
+
+        @if not($active-foreground) and $foreground {
+            $active-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+        }
+
+        @if not($shadow-color) and $focus-visible-foreground {
+            $shadow-color: hsla(
+                from var(--focus-visible-foreground) h s l / 0.2
+            );
+        }
+    }
+
+    @if $variant == 'bootstrap' {
+        @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: hsl(from var(--foreground) 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 $hover-background {
+            $focus-hover-background: hsl(
+                from var(--hover-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($focus-visible-background) and $hover-background {
+            $focus-visible-background: var(--hover-background);
+        }
+
+        @if not($focus-visible-foreground) and $focus-visible-background {
+            $focus-visible-foreground: adaptive-contrast(
+                var(--focus-visible-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($disabled-foreground) and $foreground {
+            $disabled-foreground: hsl(from (var(--foreground) h s l / 0.5));
+        }
+
+        @if not($disabled-icon-color) and $disabled-foreground {
+            $disabled-icon-color: var(--disabled-foreground);
+        }
+
+        @if not($disabled-border-color) and $disabled-foreground {
+            $disabled-border-color: var(--disabled-foreground);
+        }
+
+        @if not($hover-border-color) and $hover-background {
+            $hover-border-color: var(--hover-background);
+        }
+
+        @if not($focus-border-color) and $focus-background {
+            $focus-border-color: var(--focus-background);
+        }
+
+        @if not($focus-visible-border-color) and $focus-visible-background {
+            $focus-visible-border-color: var(--focus-visible-background);
+        }
+
+        @if not($active-border-color) and $active-background {
+            $active-border-color: var(--active-background);
+        }
+
+        @if not($shadow-color) and $focus-visible-background {
+            $shadow-color: hsla(
+                from var(--focus-visible-background) h s l / 0.5
+            );
+        }
+    }
+
+    @if not($icon-color-hover) and $hover-foreground {
+        $icon-color-hover: var(--hover-foreground);
+    }
+
+    @if variant != 'bootstrap' {
+        @if not($border-color) and $foreground {
+            $border-color: var(--foreground);
+        }
+
+        @if not($hover-border-color) and $hover-foreground {
+            $hover-border-color: var(--hover-foreground);
+        }
+
+        @if not($focus-border-color) and $focus-foreground {
+            $focus-border-color: var(--focus-foreground);
+        }
+
+        @if not($focus-visible-border-color) and $focus-visible-foreground {
+            $focus-visible-border-color: var(--focus-visible-foreground);
+        }
+
+        @if not($active-border-color) and $active-foreground {
+            $active-border-color: var(--active-foreground);
+        }
+    }
+
+    @if not($resting-shadow) {
+        $resting-elevation: map.get($button-schema, 'resting-elevation');
+        $resting-shadow: elevation($resting-elevation);
+    }
+
+    @if not($hover-shadow) {
+        $hover-elevation: map.get($button-schema, 'hover-elevation');
+        $hover-shadow: elevation($hover-elevation);
+    }
+
+    @if not($focus-shadow) {
+        $focus-elevation: map.get($button-schema, 'focus-elevation');
+        $focus-shadow: elevation($focus-elevation);
+    }
+
+    @if not($active-shadow) {
+        $active-elevation: map.get($button-schema, 'active-elevation');
+        $active-shadow: elevation($active-elevation);
+    }
+
+    @return extend(
+        $theme,
+        (
+            name: $name,
+            background: $background,
+            foreground: $foreground,
+            icon-color: $icon-color,
+            icon-color-hover: $icon-color-hover,
+            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,
+            focus-visible-background: $focus-visible-background,
+            focus-visible-foreground: $focus-visible-foreground,
+            active-background: $active-background,
+            active-foreground: $active-foreground,
+            border-radius: $border-radius,
+            border-color: $border-color,
+            hover-border-color: $hover-border-color,
+            focus-border-color: $focus-border-color,
+            focus-visible-border-color: $focus-visible-border-color,
+            active-border-color: $active-border-color,
+            shadow-color: $shadow-color,
+            resting-shadow: $resting-shadow,
+            hover-shadow: $hover-shadow,
+            focus-shadow: $focus-shadow,
+            active-shadow: $active-shadow,
+            disabled-background: $disabled-background,
+            disabled-foreground: $disabled-foreground,
+            disabled-icon-color: $disabled-icon-color,
+            disabled-border-color: $disabled-border-color,
+            size: $size,
+        )
+    );
+}

package/lib/core/styles/components/button-group/_button-group-theme.scss

@@ -120,44 +120,130 @@
     }
 
     $theme: digest-schema($button-group-schema);
-    $meta: map.get($theme, '_meta');
 
     $border: rem(1px) solid map.get($theme, 'item-selected-border-color');
 
+    //background colors
+    @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-selected-background) and $item-background {
+        $item-selected-background: hsl(from var(--item-background) h s calc(l * 0.7));
+    }
+
+    @if not($item-selected-hover-background) and $item-selected-background {
+        $item-selected-hover-background: hsl(from var(--item-selected-background) h s calc(l * 1.1));
+    }
+
+    @if not($item-selected-focus-background) and $item-selected-background {
+        $item-selected-focus-background: var(--item-selected-background);
+    }
+
+    @if not($item-selected-focus-hover-background) and $item-selected-hover-background {
+        $item-selected-focus-hover-background: var(--item-selected-hover-background);
+    }
+
+    @if not($item-focused-background) and $item-background {
+        $item-focused-background: var(--item-hover-background);
+    }
+
+    @if not($item-focused-hover-background) and $item-hover-background {
+        $item-focused-hover-background: hsl(from var(--item-focused-background) h s calc(l * 0.9));
+    }
+
+    @if not($disabled-background-color) and $item-background {
+        $disabled-background-color: var(--item-background);
+    }
+
+    @if not($disabled-selected-background) and $item-selected-background {
+        $disabled-selected-background: rgba(gray, 0.3);
+    }
+
+    //border colors
+    @if not($item-border-color) and $item-background {
+        $item-border-color: hsl(from var(--item-background) h s calc(l * 0.8));
+    }
+
+    @if not($item-hover-border-color) and $item-border-color {
+        $item-hover-border-color: var(--item-border-color);
+    }
+
+    @if not($item-focused-border-color) and $item-border-color {
+        $item-focused-border-color: var(--item-border-color);
+    }
+
+    @if not($item-selected-border-color) and $item-border-color {
+        $item-selected-border-color: var(--item-border-color);
+    }
+
+    @if not($item-selected-hover-border-color) and $item-border-color {
+        $item-selected-hover-border-color: var(--item-border-color);
+    }
+
+    @if not($item-disabled-border) and $item-border-color {
+        $item-disabled-border: var(--item-border-color);
+    }
+
+    @if not($disabled-selected-border-color) and $item-border-color {
+        $disabled-selected-border-color: var(--item-border-color);
+    }
+
+    //text and icon colors
     @if not($item-text-color) and $item-background {
-        @if meta.type-of($item-background) == 'color' {
-            $item-text-color: text-contrast($item-background);
-        }
+        $item-text-color: adaptive-contrast(var(--item-background));
     }
 
-    @if not($item-hover-text-color) and $item-hover-background {
-        @if meta.type-of($item-hover-background) == 'color' {
-            $item-hover-text-color: text-contrast($item-hover-background);
-        }
+    @if not($item-icon-color) and $item-text-color {
+        $item-icon-color: var(--item-text-color);
     }
 
-    @if not($item-selected-background) and $item-background {
-        @if meta.type-of($item-background) == 'color' {
-            $item-selected-background: text-contrast($item-background);
-        }
+    @if not($item-hover-text-color) and $item-hover-background {
+        $item-hover-text-color: adaptive-contrast(var(--item-hover-background));
     }
 
-    @if not($idle-shadow-color) and $selected-shadow-color {
-        @if meta.type-of($selected-shadow-color) == 'color' {
-            $idle-shadow-color: $selected-shadow-color;
-        }
+    @if not($item-hover-icon-color) and $item-hover-text-color {
+        $item-hover-icon-color: var(--item-hover-text-color);
     }
 
-    @if not($selected-shadow-color) and $idle-shadow-color {
-        @if meta.type-of($idle-shadow-color) == 'color' {
-            $selected-shadow-color: $idle-shadow-color;
-        }
+    @if not($item-focused-text-color) and $item-focused-background {
+        $item-focused-text-color: adaptive-contrast(var(--item-focused-background));
     }
 
     @if not($item-selected-text-color) and $item-selected-background {
-        @if meta.type-of($item-selected-background) == 'color' {
-            $item-selected-text-color: text-contrast($item-selected-background);
-        }
+        $item-selected-text-color: adaptive-contrast(var(--item-selected-background));
+    }
+
+    @if not($item-selected-icon-color) and $item-selected-text-color {
+        $item-selected-icon-color: var(--item-selected-text-color);
+    }
+
+    @if not($item-selected-hover-text-color) and $item-selected-hover-background {
+        $item-selected-hover-text-color: adaptive-contrast(var(--item-selected-hover-background));
+    }
+
+    @if not($item-selected-hover-icon-color) and $item-selected-hover-text-color {
+        $item-selected-hover-icon-color: var(--item-selected-hover-text-color);
+    }
+
+    @if not($disabled-text-color) and $disabled-background-color {
+        $disabled-text-color: hsla(from adaptive-contrast(var(--disabled-background-color)) h s l / 0.4);
+    }
+
+    @if not($disabled-selected-text-color) and $disabled-text-color {
+        $disabled-selected-text-color: var(--disabled-text-color);
+    }
+
+    @if not($idle-shadow-color) and $item-background {
+        $idle-shadow-color: hsla(from var(--item-background) h s l / .5);
+    }
+
+    @if not($idle-shadow-color) and $selected-shadow-color {
+        $idle-shadow-color: var(--selected-shadow-color);
+    }
+
+    @if not($selected-shadow-color) and $idle-shadow-color {
+        $selected-shadow-color: var(--idle-shadow-color);
     }
 
     @if map.get($button-group-schema, 'elevation') > 0 {
@@ -205,11 +291,7 @@
         border: $border,
         shadow: $shadow,
         idle-shadow-color: $idle-shadow-color,
-        selected-shadow-color: $selected-shadow-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
+        selected-shadow-color: $selected-shadow-color
     ));
 }
 
@@ -223,7 +305,7 @@
     $group-items-margin: rem(10px, 16px);
     $outline-btn-indent: rem(2px);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $bootstrap-theme: $variant == 'bootstrap';
     $indigo-theme: $variant == 'indigo';
     $group-item-min-width: map.get((
@@ -445,6 +527,7 @@
             @if $variant == 'bootstrap' {
                 background: var-get($theme, 'item-background');
                 z-index: 1;
+                box-shadow: 0 0 0 rem(4px) var-get($theme, 'idle-shadow-color');
 
                 &:active {
                     background: var-get($theme, 'item-hover-background');
@@ -691,6 +774,7 @@
                 color: var-get($theme, 'item-selected-text-color');
                 border-color: var-get($theme, 'item-selected-border-color');
                 background: var-get($theme, 'item-selected-background');
+                box-shadow: 0 0 0 rem(4px) var-get($theme, 'selected-shadow-color');
 
                 igx-icon {
                     color: var-get($theme, 'item-selected-icon-color');