igniteui-angular 20.0.7 → 20.0.9

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

@@ -1,97 +1,5 @@
 @use 'sass:map';
-@use 'sass:meta';
 @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>
-////
-
-///
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $background [null] - The card background color.
-/// @param {Color} $outline-color [null] - The color of the outline for outlined type cards.
-/// @param {Color} $header-text-color [null] - The text color of the card title.
-/// @param {Color} $subtitle-text-color [null] - The text color of the card subtitle.
-/// @param {Color} $content-text-color [null] - The text color of the card content.
-/// @param {Color} $actions-text-color [null] - The text color of the card buttons.
-/// @param {box-shadow} $resting-shadow [null] - The shadow of the card in its resting state.
-/// @param {box-shadow} $hover-shadow [null] - The shadow of the card in its hover state.
-///
-/// @param {List} $border-radius [null] - The border radius used for card component.
-///
-/// @requires $light-material-schema
-///
-/// @example scss Change the background and content text colors in card
-///   $my-card-theme: card-theme($background: #fff);
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-card-theme);
-@function card-theme(
-    $schema: $light-material-schema,
-
-    $border-radius: null,
-    $background: null,
-    $outline-color: null,
-    $header-text-color: null,
-    $subtitle-text-color: null,
-    $content-text-color: null,
-    $actions-text-color: null,
-    $resting-shadow: null,
-    $hover-shadow: null,
-) {
-    $name: 'igx-card';
-    $card-schema: ();
-
-    @if map.has-key($schema, 'card') {
-        $card-schema: map.get($schema, 'card');
-    } @else {
-        $card-schema: $schema;
-    }
-
-    $theme: digest-schema($card-schema);
-
-    @if not($header-text-color) and $background {
-        $header-text-color: adaptive-contrast(var(--background));
-    }
-
-    @if not($actions-text-color) and $background {
-        $actions-text-color: adaptive-contrast(var(--background));
-    }
-
-    @if not($content-text-color) and $background {
-        $content-text-color: hsl(from adaptive-contrast(var(--background)) h s calc(l * 0.85));
-    }
-
-    @if not($subtitle-text-color) and $background {
-        $subtitle-text-color: hsl(from adaptive-contrast(var(--background)) h s calc(l * 0.85));
-    }
-
-    @if not($resting-shadow) {
-        $resting-elevation: map.get($card-schema, 'resting-elevation');
-        $resting-shadow: elevation($resting-elevation);
-    }
-
-    @if not($hover-shadow) {
-        $hover-elevation: map.get($card-schema, 'hover-elevation');
-        $hover-shadow: elevation($hover-elevation);
-    }
-
-    @return extend($theme, (
-        name: $name,
-        background: $background,
-        outline-color: $outline-color,
-        border-radius: $border-radius,
-        header-text-color: $header-text-color,
-        subtitle-text-color: $subtitle-text-color,
-        content-text-color: $content-text-color,
-        actions-text-color: $actions-text-color,
-        resting-shadow: $resting-shadow,
-        hover-shadow: $hover-shadow,
-    ));
-}
 
 /// Card Component
 /// @deprecated Use the `css-vars` mixin instead.

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

@@ -1,225 +1,7 @@
 @use 'sass:map';
-@use 'sass:meta';
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
 @use 'igniteui-theming/sass/animations' 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} $slide-background [null] - The slide background color.
-/// @param {Color} $button-background [null] - The previous/next buttons idle background color.
-/// @param {Color} $button-hover-background [null] - The previous/next buttons hover background color.
-/// @param {Color} $button-disabled-background [null] - The previous/next buttons disabled background color.
-/// @param {Color} $button-arrow-color [null] - The previous/next buttons idle arrow color.
-/// @param {Color} $button-hover-arrow-color [null] - The previous/next buttons hover arrow color.
-/// @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.
-/// @param {Color} $indicator-active-hover-dot-color [null] - The active indicator dot color on hover.
-/// @param {box-shadow} $button-shadow [null] - Shadow underneath the previous/next buttons.
-///
-/// @param {List} $border-radius [null] - The border radius used for carousel component.
-///
-/// @requires $light-material-schema
-///
-/// @example scss Change the previous/next button colors
-///   $my-carousel-theme: carousel-theme(
-///     $button-background: black,
-///     $button-hover-background: white
-///   );
-///   // Pass the carousel theme to the css-vars() mixin
-///   @include css-vars($my-carousel-theme);
-@function carousel-theme(
-    $schema: $light-material-schema,
-
-    $border-radius: null,
-    $button-shadow: null,
-
-    $slide-background: null,
-
-    $button-background: null,
-    $button-hover-background: null,
-    $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,
-    $indicator-active-hover-dot-color: null,
-){
-    $name: 'igx-carousel';
-    $carousel-schema: ();
-
-    @if map.has-key($schema, 'carousel') {
-        $carousel-schema: map.get($schema, 'carousel');
-    } @else {
-        $carousel-schema: $schema;
-    }
-
-    $theme: digest-schema($carousel-schema);
-    $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');
-        $button-shadow: elevation($button-elevation);
-    }
-
-    @if not($button-arrow-color) and $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: 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 {
-        $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));
-        }
-    }
-
-    @return extend($theme, (
-        name: $name,
-
-        slide-background: $slide-background,
-
-        border-radius: $border-radius,
-        button-shadow: $button-shadow,
-
-        button-background: $button-background,
-        button-disabled-background: $button-disabled-background,
-        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,
-    ));
-}
-
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.

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

@@ -2,156 +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>
-////
-
-/// Checkbox Theme
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $label-color [null]- The text color used for the label text.
-/// @param {Color} $label-color-hover [null]- The text color used for the label text on hover.
-/// @param {Color} $empty-color [null] - The unchecked border color.
-/// @param {Color} $empty-color-hover [null] - The unchecked border color on hover.
-/// @param {Color} $empty-fill-color [null] - The unchecked fill color.
-/// @param {Color} $fill-color [null] - The checked border and fill colors.
-/// @param {Color} $fill-color-hover [null] - The checked border and fill colors on hover.
-/// @param {Color} $tick-color [null] - The checked mark color.
-/// @param {Color} $tick-color-hover [null] - The checked mark color on hover.
-/// @param {Color} $disabled-color [null] - The disabled border and fill colors.
-/// @param {Color} $disabled-tick-color [null] - The checked mark color in disabled state.
-/// @param {Color} $disabled-indeterminate-color [null] - The disabled border and fill colors in indeterminate state.
-/// @param {Color} $disabled-color-label [null] - The disabled label color.
-/// @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
-///
-/// @example scss Change the checked fill color
-///   $my-checkbox-theme: igx-checkbox-theme($fill-color: magenta);
-///   // Pass the theme to the css-vars mixin
-///   @include css-vars($my-checkbox-theme);
-@function checkbox-theme(
-    $schema: $light-material-schema,
-
-    $border-radius: null,
-    $label-color: null,
-    $label-color-hover: null,
-    $empty-color: null,
-    $empty-color-hover: null,
-    $empty-fill-color: null,
-    $fill-color: null,
-    $fill-color-hover: null,
-    $tick-color: null,
-    $tick-color-hover: null,
-    $disabled-color: null,
-    $disabled-tick-color: null,
-    $disabled-indeterminate-color: null,
-    $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: ();
-
-    @if map.has-key($schema, 'checkbox') {
-        $checkbox-schema: map.get($schema, 'checkbox');
-    } @else {
-        $checkbox-schema: $schema;
-    }
-
-    $theme: digest-schema($checkbox-schema);
-    $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,
-        label-color: $label-color,
-        label-color-hover: $label-color-hover,
-        empty-color: $empty-color,
-        empty-color-hover: $empty-color-hover,
-        empty-fill-color: $empty-fill-color,
-        fill-color: $fill-color,
-        fill-color-hover: $fill-color-hover,
-        tick-color: $tick-color,
-        tick-color-hover: $tick-color-hover,
-        disabled-color: $disabled-color,
-        disabled-tick-color: $disabled-tick-color,
-        disabled-indeterminate-color: $disabled-indeterminate-color,
-        disabled-color-label: $disabled-color-label,
-        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,
-        focus-outline-color-error: $focus-outline-color-error
-    ));
-}
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars