igniteui-angular 20.0.7 → 20.0.9

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

@@ -2,270 +2,6 @@
 @use 'sass:math';
 @use '../../base' as *;
 @use 'igniteui-theming/sass/animations' as *;
-@use '../../themes/schemas' as *;
-
-////
-/// @group themes
-/// @access public
-/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
-/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
-////
-
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $thumb-on-color [null] - The color of the thumb when the switch is on.
-/// @param {Color} $track-on-color [null] - The color of the track when the switch is on.
-/// @param {Color} $track-on-hover-color [null] - The color of the track when the switch is on and hovered.
-/// @param {Color} $thumb-off-color [null] - The color of the thumb when the switch is off.
-/// @param {Color} $track-off-color [null] - The color of the track when the switch is off.
-/// @param {Color} $thumb-disabled-color [null] - The color of the thumb when the switch is disabled.
-/// @param {Color} $thumb-on-disabled-color [null] - The color of the thumb when the switch is on and disabled.
-/// @param {Color} $track-disabled-color [null] - The color of the track when the switch is disabled.
-/// @param {Color} $track-on-disabled-color [null] - The color of the track when the switch is on and disabled.
-/// @param {Color} $label-color [null] - The color of the switch label
-/// @param {Color} $label-hover-color [null] - The color of the switch label on hover.
-/// @param {Color} $label-disabled-color [null] - The color of the switch label when the switch is disabled
-/// @param {box-shadow} $resting-shadow [null] - The shadow used for the thumb in resting state of the switch.
-/// @param {box-shadow} $hover-shadow [null] - The shadow used for the thumb in hover state of the switch.
-/// @param {box-shadow} $disabled-shadow [null] - The shadow used for the thumb in disable state of the switch.
-/// @param {List} $border-radius-track [null] - The border radius used for switch track.
-/// @param {List} $border-radius-thumb [null] - The border radius used for switch thumb.
-/// @param {List} $border-radius-ripple [null] - The border radius used for switch ripple.
-/// @param {Color} $border-color [null] - The border color of the switch.
-/// @param {Color} $border-hover-color [null] - The border color of the switch on hover.
-/// @param {Color} $border-disabled-color [null] - The border color of the switch when it is disabled.
-/// @param {Color} $border-on-color [null] - The border color when the switch is on.
-/// @param {Color} $border-on-hover-color [null] - The border color when the switch is on and hovered.
-/// @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-fill-color [null] - The focus fill color.
-/// @param {Color} $focus-fill-hover-color [null] - The focus fill color on hover.
-/// @requires $light-material-schema
-///
-/// @example scss Set custom track and thumb on colors
-///   $my-switch-theme: switch-theme($thumb-on-color: black, $track-on-color: yellow);
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-switch-theme);
-@function switch-theme(
-    $schema: $light-material-schema,
-
-    $thumb-on-color: null,
-    $track-on-color: null,
-    $track-on-hover-color: null,
-
-    $thumb-off-color: null,
-    $track-off-color: null,
-
-    $track-disabled-color: null,
-    $track-on-disabled-color: null,
-    $thumb-disabled-color: null,
-    $thumb-on-disabled-color: null,
-
-    $label-color: null,
-    $label-hover-color: null,
-    $label-disabled-color: null,
-
-    $resting-shadow: null,
-    $hover-shadow: null,
-    $disabled-shadow: null,
-
-    $border-radius-track: null,
-    $border-radius-thumb: null,
-    $border-radius-ripple: null,
-    $border-color: null,
-    $border-hover-color: null,
-    $border-disabled-color: null,
-    $border-on-color: null,
-    $border-on-hover-color: null,
-    $focus-outline-color: null,
-    $focus-outline-color-focused: null,
-    $focus-fill-color: null,
-    $focus-fill-hover-color: null,
-) {
-    $name: 'igx-switch';
-    $switch-schema: ();
-
-    @if map.has-key($schema, 'switch') {
-        $switch-schema: map.get($schema, 'switch');
-    } @else {
-        $switch-schema: $schema;
-    }
-
-    $theme: digest-schema($switch-schema);
-    $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');
-        $resting-shadow: elevation($resting-elevation);
-    }
-
-    @if not($hover-shadow) {
-        $hover-elevation: map.get($switch-schema, 'hover-elevation');
-        $hover-shadow: elevation($hover-elevation);
-    }
-
-    @if not($disabled-shadow) {
-        $disabled-elevation: map.get($switch-schema, 'disabled-elevation');
-        $disabled-shadow: elevation($disabled-elevation);
-    }
-
-    @if not($border-radius-track) {
-        $border-radius-track: map.get($theme, 'border-radius-track');
-    }
-
-    @if not($border-radius-thumb) {
-        $border-radius-thumb: map.get($theme, 'border-radius-thumb');
-    }
-
-    @if not($border-radius-ripple) {
-        $border-radius-ripple: map.get($theme, 'border-radius-ripple');
-    }
-
-    @return extend($theme, (
-        name: $name,
-
-        thumb-on-color: $thumb-on-color,
-        track-on-color: $track-on-color,
-        track-on-hover-color: $track-on-hover-color,
-
-        thumb-off-color: $thumb-off-color,
-        track-off-color: $track-off-color,
-
-        track-disabled-color: $track-disabled-color,
-        track-on-disabled-color: $track-on-disabled-color,
-        thumb-disabled-color: $thumb-disabled-color,
-        thumb-on-disabled-color: $thumb-on-disabled-color,
-
-        label-color: $label-color,
-        label-hover-color: $label-hover-color,
-        label-disabled-color: $label-disabled-color,
-
-        resting-shadow: $resting-shadow,
-        hover-shadow: $hover-shadow,
-        disabled-shadow: $disabled-shadow,
-
-        border-radius-track: $border-radius-track,
-        border-radius-thumb: $border-radius-thumb,
-        border-radius-ripple: $border-radius-ripple,
-        border-color: $border-color,
-        border-hover-color: $border-hover-color,
-        border-disabled-color: $border-disabled-color,
-        border-on-color: $border-on-color,
-        border-on-hover-color: $border-on-hover-color,
-        focus-outline-color: $focus-outline-color,
-        focus-outline-color-focused: $focus-outline-color-focused,
-        focus-fill-color: $focus-fill-color,
-        focus-fill-hover-color: $focus-fill-hover-color,
-    ));
-}
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars

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

@@ -5,265 +5,6 @@
 @use '../ripple/ripple-component' as *;
 @use '../../themes/schemas' as *;
 
-////
-/// @group themes
-/// @access public
-/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
-////
-
-/// If only background color is specified,
-/// the idle item color will be assigned automatically to a contrasting color.
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $item-text-color [null] - The color used for the tab text color.
-/// @param {Color} $item-background [null] - The background color used for the tabs header.
-/// @param {Color} $item-hover-background [null] - The background used for the tabs on hover.
-/// @param {Color} $item-hover-color [null] - The text color used for the tabs on hover.
-/// @param {Color} $item-icon-color [null] - The color used for the tab icon.
-/// @param {Color} $item-active-icon-color [null] - The color used for the active tab icon.
-/// @param {Color} $item-hover-icon-color [null] - The color used for the tab icon on hover.
-/// @param {Color} $item-disabled-icon-color [null] - The color used for the disabled tab icon.
-/// @param {Color} $item-active-color [null] - The color used for the active tabs text.
-/// @param {Color} $item-active-background [null] - The color used for the active/focused tab background.
-/// @param {Color} $item-disabled-color [null] - The color used for the disabled tabs text.
-/// @param {Color} $indicator-color [null] - The color used for the active tab indicator.
-/// @param {Color} $button-color [null] - The color used for the button icon/text color.
-/// @param {Color} $button-hover-color [null] - The color used for the button icon/text color on hover.
-/// @param {Color} $button-disabled-color [null] - The color used for the disabled button icon/text.
-/// @param {Color} $button-background [null] - The color used for the button background.
-/// @param {Color} $button-hover-background [null] - The color used for the button background on hover.
-/// @param {List} $border-radius [null] - The border radius for the tabs.
-/// @param {Color} $border-color [null] - The border color of the tabs.
-/// @param {Color} $border-color--hover [null] - The border color of the tabs on hover.
-/// @param {Color} $tab-ripple-color [null] - The color used for the button background.
-/// @param {Color} $button-ripple-color [null] - The color used for the button background on hover.
-/// @requires $light-material-schema
-/// @example scss Set a custom background color
-///   $my-tabs-theme: tabs-theme(
-///      $item-background: orange
-///    );
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-tabs-theme);
-@function tabs-theme(
-    $schema: $light-material-schema,
-    $item-text-color: null,
-    $item-background: null,
-    $item-hover-background: null,
-    $item-hover-color: null,
-    $item-icon-color: null,
-    $item-active-icon-color: null,
-    $item-hover-icon-color: null,
-    $item-disabled-icon-color: null,
-    $item-active-color: null,
-    $item-active-background: null,
-    $item-disabled-color: null,
-    $indicator-color: null,
-    $button-color: null,
-    $button-background: null,
-    $button-hover-background: null,
-    $button-hover-color: null,
-    $button-disabled-color: null,
-    $tab-ripple-color: null,
-    $button-ripple-color: null,
-    $border-radius: null,
-    $border-color: null,
-    $border-color--hover: null,
-) {
-    $name: 'igx-tabs';
-    $tabs-schema: ();
-
-    @if map.has-key($schema, 'tabs') {
-        $tabs-schema: map.get($schema, 'tabs');
-    } @else {
-        $tabs-schema: $schema;
-    }
-
-    $theme: digest-schema($tabs-schema);
-    $variant: map.get($theme, '_meta', 'theme');
-
-    @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-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-icon-color) and $item-background {
-             $item-icon-color: hsla(from adaptive-contrast(var(--item-background) h s l / 0.8));
-         }
-    }
-
-    @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-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($item-hover-background) and $item-background {
-        $item-hover-background: hsl(from var(--item-background) h s calc(l * 0.9));
-    }
-
-    @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 $item-background {
-        @if not($button-background) and $item-background {
-            $button-background: var(--item-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-disabled-color) and $button-color {
-                $button-disabled-color: hsla(from var(--button-color) h s l / 0.5);
-            }
-        }
-    }
-
-    @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-color) and $button-background {
-        $button-color: adaptive-contrast(var(--button-background));
-    }
-
-    @if not($button-hover-color) and $button-hover-background {
-        $button-hover-color: adaptive-contrast(var(--button-hover-background));
-    }
-
-    @if not($button-ripple-color) and $button-color {
-        $button-ripple-color: var(--button-color);
-    }
-
-    @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 {
-        $tab-ripple-color: text-contrast($item-active-background);
-    }
-
-    @if not($tab-ripple-color) and $item-background {
-        $tab-ripple-color: text-contrast($item-background);
-    }
-
-    @return extend($theme, (
-        name: $name,
-        item-text-color: $item-text-color,
-        item-background: $item-background,
-        item-hover-color: $item-hover-color,
-        item-hover-background: $item-hover-background,
-        item-icon-color: $item-icon-color,
-        item-active-icon-color: $item-active-icon-color,
-        item-hover-icon-color: $item-hover-icon-color,
-        item-disabled-icon-color: $item-disabled-icon-color,
-        item-active-color: $item-active-color,
-        item-active-background: $item-active-background,
-        item-disabled-color: $item-disabled-color,
-        indicator-color: $indicator-color,
-        button-color: $button-color,
-        button-background: $button-background,
-        button-hover-background:$button-hover-background,
-        button-hover-color:$button-hover-color,
-        button-disabled-color:$button-disabled-color,
-        tab-ripple-color: $tab-ripple-color,
-        button-ripple-color: $button-ripple-color,
-        border-color: $border-color,
-        border-color--hover: $border-color--hover,
-        border-radius: $border-radius,
-    ));
-}
-
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
@@ -322,10 +63,10 @@
         flex: 0 0 auto;
         background: var-get($theme, 'item-background');
         z-index: 1;
-	    
+
 	    @if $bootstrap-theme {
 		    position: relative;
-		    
+
 		    &::after {
 			    content: '';
 			    position: absolute;