igniteui-angular 20.0.7 → 20.0.9

package/lib/core/styles/components/stepper/_stepper-theme.scss

@@ -1,497 +1,5 @@
 @use 'sass:map';
-@use 'sass:math';
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
-
-////
-/// @group themes
-/// @access public
-/// @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} $content-foreground [null] - The foreground of the step content.
-/// @param {Color} $step-background [null] - The background of the step header.
-/// @param {Color} $step-hover-background [null] - The background of the step header on hover.
-/// @param {Color} $step-focus-background [null] - The background of the step header on focus.
-/// @param {Color} $title-color [null] - The color of the step title.
-/// @param {Color} $title-hover-color [null] - The color of the step title on hover.
-/// @param {Color} $title-focus-color [null] - The color of the step title on focus.
-/// @param {Color} $subtitle-color [null] - The color of the step subtitle.
-/// @param {Color} $subtitle-hover-color [null] - The color of the step subtitle on hover.
-/// @param {Color} $subtitle-focus-color [null] - The color of the step subtitle on focus.
-/// @param {Color} $indicator-color [null] - The text color of the step indicator.
-/// @param {Color} $indicator-background [null] - The background color of the step indicator.
-/// @param {Color} $indicator-outline [null] - The outline color of the step indicator.
-///
-/// @param {Color} $invalid-step-background [null] - The background of the invalid step header.
-/// @param {Color} $invalid-step-hover-background [null] - The background of the invalid step header on hover.
-/// @param {Color} $invalid-step-focus-background [null] - The background of the invalid step header on focus.
-/// @param {Color} $invalid-title-color [null] - The color of the invalid step title.
-/// @param {Color} $invalid-title-hover-color [null] - The color of the invalid step title on hover.
-/// @param {Color} $invalid-title-focus-color [null] - The color of the invalid step title on focus.
-/// @param {Color} $invalid-subtitle-color [null] - The color of the invalid step subtitle.
-/// @param {Color} $invalid-subtitle-hover-color [null] - The color of the invalid step subtitle on hover.
-/// @param {Color} $invalid-subtitle-focus-color [null] - The color of the invalid step subtitle on focus.
-/// @param {Color} $invalid-indicator-color [null] - The color of the invalid step indicator.
-/// @param {Color} $invalid-indicator-background [null] - The background color of the invalid step indicator.
-/// @param {Color} $invalid-indicator-outline [null] - The outline color of the invalid step indicator.
-///
-/// @param {Color} $current-step-background [null] - The background of the current step header.
-/// @param {Color} $current-step-hover-background [null] - The background of the current step header on hover.
-/// @param {Color} $current-step-focus-background [null] - The background of the current step header on focus.
-/// @param {Color} $current-title-color [null] - The color of the current step title.
-/// @param {Color} $current-title-hover-color [null] - The color of the current step title on hover.
-/// @param {Color} $current-title-focus-color [null] - The color of the current step title on focus.
-/// @param {Color} $current-subtitle-color [null] - The color of the current step subtitle.
-/// @param {Color} $current-subtitle-hover-color [null] - The color of the current step subtitle on hover.
-/// @param {Color} $current-subtitle-focus-color [null] - The color of the current step subtitle on focus.
-/// @param {Color} $current-indicator-color [null] - The color of the current step indicator.
-/// @param {Color} $current-indicator-background [null] - The background color of the current step indicator.
-/// @param {Color} $current-indicator-outline [null] - The outline color of the current step indicator.
-///
-/// @param {Color} $complete-step-background [null] - The background of the complete step header.
-/// @param {Color} $complete-step-hover-background [null] - The background of the complete step header on hover.
-/// @param {Color} $complete-step-focus-background [null] - The background of the complete step header on focus.
-/// @param {Color} $complete-title-color [null] - The color of the complete step title.
-/// @param {Color} $complete-title-hover-color [null] - The color of the complete step title on hover.
-/// @param {Color} $complete-title-focus-color [null] - The color of the complete step title on focus.
-/// @param {Color} $complete-subtitle-color [null] - The color of the complete step subtitle.
-/// @param {Color} $complete-subtitle-hover-color [null] - The color of the complete step subtitle on hover.
-/// @param {Color} $complete-subtitle-focus-color [null] - The color of the complete step subtitle on focus.
-/// @param {Color} $complete-indicator-color [null] - The color of the completed step indicator.
-/// @param {Color} $complete-indicator-background [null] - The background color of the completed step indicator.
-/// @param {Color} $complete-indicator-outline [null] - The outline color of the completed step indicator.
-///
-/// @param {Color} $disabled-title-color [null] - The title color of the disabled step.
-/// @param {Color} $disabled-subtitle-color [null] - The subtitle color of the disabled step.
-/// @param {Color} $disabled-indicator-color [null] - The indicator color of the disabled step.
-/// @param {Color} $disabled-indicator-background [null] - The indicator background of the disabled step.
-/// @param {Color} $disabled-indicator-outline [null] - The indicator outline color of the disabled step.
-///
-/// @param {Color} $step-separator-color [null] - The separator border-color of between the steps.
-/// @param {Color} $complete-step-separator-color [null] - The separator border-color between the completed steps.
-///
-/// @param {Color} $step-separator-style [null] - The separator border-style of between the steps.
-/// @param {Color} $complete-step-separator-style [null] - The separator border-style between the completed steps.
-///
-/// @param {List} $border-radius-indicator [null] - The border-radius of the step indicator.
-/// @param {List} $border-radius-step-header [null] - The border-radius of the step header.
-///
-/// @requires $light-material-schema
-/// @example scss Set custom stepper colors
-///   $my-stepper-theme: stepper-theme($step-hover-background: red);
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-stepper-theme);
-@function stepper-theme(
-    $schema: $light-material-schema,
-
-    $content-foreground: null,
-
-    $step-background: null,
-    $step-hover-background: null,
-    $step-focus-background: null,
-
-    $invalid-step-background: null,
-    $invalid-step-hover-background: null,
-    $invalid-step-focus-background: null,
-
-    $current-step-background: null,
-    $current-step-hover-background: null,
-    $current-step-focus-background: null,
-
-    $complete-step-background: null,
-    $complete-step-hover-background: null,
-    $complete-step-focus-background: null,
-
-    // Incomplete
-    $indicator-color: null,
-    $indicator-background: null,
-    $indicator-outline: null,
-
-    $title-color: null,
-    $title-hover-color: null,
-    $title-focus-color: null,
-
-    $subtitle-color: null,
-    $subtitle-hover-color: null,
-    $subtitle-focus-color: null,
-
-    // Invalid
-    $invalid-indicator-color: null,
-    $invalid-indicator-background: null,
-    $invalid-indicator-outline: null,
-
-    $invalid-title-color: null,
-    $invalid-title-hover-color: null,
-    $invalid-title-focus-color: null,
-
-    $invalid-subtitle-color: null,
-    $invalid-subtitle-hover-color: null,
-    $invalid-subtitle-focus-color: null,
-
-    // Current
-    $current-indicator-color: null,
-    $current-indicator-background: null,
-    $current-indicator-outline: null,
-
-    $current-title-color: null,
-    $current-title-hover-color: null,
-    $current-title-focus-color: null,
-
-    $current-subtitle-color: null,
-    $current-subtitle-hover-color: null,
-    $current-subtitle-focus-color: null,
-
-    // complete
-    $complete-indicator-color: null,
-    $complete-indicator-background: null,
-    $complete-indicator-outline: null,
-
-    $complete-title-color: null,
-    $complete-title-hover-color: null,
-    $complete-title-focus-color: null,
-
-    $complete-subtitle-color: null,
-    $complete-subtitle-hover-color: null,
-    $complete-subtitle-focus-color: null,
-
-    // Disabled
-    $disabled-indicator-color: null,
-    $disabled-indicator-background: null,
-    $disabled-indicator-outline: null,
-    $disabled-title-color: null,
-    $disabled-subtitle-color: null,
-
-    // Separator
-    $step-separator-color: null,
-    $complete-step-separator-color: null,
-
-    $step-separator-style: null,
-    $complete-step-separator-style: null,
-
-    // Border-radius
-    $border-radius-indicator: null,
-    $border-radius-step-header: null,
-) {
-    $name: 'igx-stepper';
-    $selector: 'igx-stepper';
-    $stepper-schema: ();
-
-    @if map.has-key($schema, 'stepper') {
-        $stepper-schema: map.get($schema, 'stepper');
-    } @else {
-        $stepper-schema: $schema;
-    }
-
-    $theme: digest-schema($stepper-schema);
-
-    //default step
-    @if not($step-hover-background) and $step-background {
-        $step-hover-background: hsl(from var(--step-background) h s calc(l * 0.8));
-    }
-
-    @if not($step-focus-background) and $step-background {
-        $step-focus-background: hsl(from var(--step-background) h s calc(l * 0.9));
-    }
-
-    @if not($indicator-background) and $step-background {
-        $indicator-background: hsla(from adaptive-contrast(var(--step-background)) h s l / .6);
-    }
-
-    @if not($indicator-outline) and $indicator-background {
-        $indicator-outline: var(--indicator-background);
-    }
-
-    @if not($indicator-color) and $indicator-background {
-        $indicator-color: adaptive-contrast(var(--indicator-background));
-    }
-
-    @if not($title-color) and $step-background {
-        $title-color: adaptive-contrast(var(--step-background));
-    }
-
-    @if not($subtitle-color) and $step-background {
-        $subtitle-color: adaptive-contrast(var(--step-background));
-    }
-
-    @if not($title-hover-color) and $step-hover-background {
-        $title-hover-color: adaptive-contrast(var(--step-hover-background));
-    }
-
-    @if not($subtitle-hover-color) and $step-hover-background {
-        $subtitle-hover-color: adaptive-contrast(var(--step-hover-background));
-    }
-
-    @if not($title-focus-color) and $step-focus-background {
-        $title-focus-color: adaptive-contrast(var(--step-focus-background));
-    }
-
-    @if not($subtitle-focus-color) and $step-focus-background {
-        $subtitle-focus-color: adaptive-contrast(var(--step-focus-background));
-    }
-
-    //current step
-    @if not($current-step-background) and $step-background {
-        $current-step-background: var(--step-background);
-    }
-
-    @if not($current-step-hover-background) and $current-step-background {
-        $current-step-hover-background: hsl(from var(--current-step-background) h s calc(l * 0.8));
-    }
-
-    @if not($current-step-focus-background) and $current-step-background {
-        $current-step-focus-background: hsl(from var(--current-step-background) h s calc(l * 0.9));
-    }
-
-    @if not($current-indicator-background) and $current-step-background {
-        $current-indicator-background: hsl(from var(--current-step-background) h s calc(l * 0.6));
-    }
-
-    @if not($current-indicator-outline) and $current-indicator-background {
-        $current-indicator-outline: var(--current-indicator-background);
-    }
-
-    @if not($current-indicator-color) and $current-indicator-background {
-        $current-indicator-color: adaptive-contrast(var(--current-indicator-background));
-    }
-
-    @if not($current-title-color) and $current-step-background {
-        $current-title-color: adaptive-contrast(var(--current-step-background));
-    }
-
-    @if not($current-subtitle-color) and $current-step-background {
-        $current-subtitle-color: adaptive-contrast(var(--current-step-background));
-    }
-
-    @if not($current-title-hover-color) and $current-step-hover-background {
-        $current-title-hover-color: adaptive-contrast(var(--current-step-hover-background));
-    }
-
-    @if not($current-subtitle-hover-color) and $current-step-hover-background {
-        $current-subtitle-hover-color: adaptive-contrast(var(--current-step-hover-background));
-    }
-
-    @if not($current-title-focus-color) and $current-step-focus-background {
-        $current-title-focus-color: adaptive-contrast(var(--current-step-focus-background));
-    }
-
-    @if not($current-subtitle-focus-color) and $current-step-focus-background {
-        $current-subtitle-focus-color: adaptive-contrast(var(--current-step-focus-background));
-    }
-
-    //invalid step
-    @if not($invalid-step-background) and $step-background {
-        $invalid-step-background: var(--step-background);
-    }
-
-    @if not($invalid-step-hover-background) and $invalid-step-background {
-        $invalid-step-hover-background: hsl(from var(--invalid-step-background) h s calc(l * 0.8));
-    }
-
-    @if not($invalid-step-focus-background) and $invalid-step-background {
-        $invalid-step-focus-background: hsl(from var(--invalid-step-background) h s calc(l * 0.9));
-    }
-
-    @if not($invalid-indicator-background) and not($step-background) and $invalid-step-background {
-        $invalid-indicator-background: adaptive-contrast(var(--invalid-step-background));
-    }
-
-    @if not($invalid-indicator-outline) and $invalid-indicator-background {
-        $invalid-indicator-outline: var(--invalid-indicator-background);
-    }
-
-    @if not($invalid-indicator-color) and not($step-background) and $invalid-indicator-background {
-        $invalid-indicator-color: adaptive-contrast(var(--invalid-indicator-background));
-    }
-
-    @if not($invalid-title-color) and $invalid-indicator-background {
-        $invalid-title-color: var(--invalid-indicator-background);
-    }
-
-    @if not($invalid-subtitle-color) and $invalid-indicator-background {
-        $invalid-subtitle-color: var(--invalid-indicator-background);
-    }
-
-    @if not($invalid-title-hover-color) and $invalid-indicator-background {
-        $invalid-title-hover-color: var(--invalid-indicator-background);
-    }
-
-    @if not($invalid-subtitle-hover-color) and $invalid-indicator-background {
-        $invalid-subtitle-hover-color: var(--invalid-indicator-background);
-    }
-
-    @if not($invalid-title-focus-color) and $invalid-indicator-background {
-        $invalid-title-focus-color: var(--invalid-indicator-background);
-    }
-
-    @if not($invalid-subtitle-focus-color) and $invalid-indicator-background {
-        $invalid-subtitle-focus-color: var(--invalid-indicator-background);
-    }
-
-    //completed step
-    @if not($complete-step-background) and $step-background {
-        $complete-step-background: var(--step-background);
-    }
-
-    @if not($complete-step-hover-background) and $complete-step-background {
-        $complete-step-hover-background: hsl(from var(--complete-step-background) h s calc(l * 0.8));
-    }
-
-    @if not($complete-step-focus-background) and $complete-step-background {
-        $complete-step-focus-background: hsl(from var(--complete-step-background) h s calc(l * 0.9));
-    }
-
-    @if not($complete-indicator-background) and $complete-step-background {
-        $complete-indicator-background: adaptive-contrast(var(--complete-step-background));
-    }
-
-    @if not($complete-indicator-color) and $complete-indicator-background {
-        $complete-indicator-color: adaptive-contrast(var(--complete-indicator-background));
-    }
-
-    @if not($complete-title-color) and $complete-step-background {
-        $complete-title-color: adaptive-contrast(var(--complete-step-background));
-    }
-
-    @if not($complete-subtitle-color) and $complete-step-background {
-        $complete-subtitle-color: adaptive-contrast(var(--complete-step-background));
-    }
-
-    @if not($complete-title-hover-color) and $complete-step-hover-background {
-        $complete-title-hover-color: adaptive-contrast(var(--complete-step-hover-background));
-    }
-
-    @if not($complete-subtitle-hover-color) and $complete-step-hover-background {
-        $complete-subtitle-hover-color: adaptive-contrast(var(--complete-step-hover-background));
-    }
-
-    @if not($complete-title-focus-color) and $complete-step-focus-background {
-        $complete-title-focus-color: adaptive-contrast(var(--complete-step-focus-background));
-    }
-
-    @if not($complete-subtitle-focus-color) and $complete-step-focus-background {
-        $complete-subtitle-focus-color: adaptive-contrast(var(--complete-step-focus-background));
-    }
-
-    //disabled step
-    @if not($disabled-indicator-background) and $step-background {
-        $disabled-indicator-background: hsla(from (adaptive-contrast(var(--step-background)) h s l / 0.5));
-    }
-
-    @if not($disabled-indicator-color) and $disabled-indicator-background {
-        $disabled-indicator-color: hsla(from (adaptive-contrast(var(--disabled-indicator-background)) h s l / 0.5));
-    }
-
-    @if not($disabled-indicator-outline) and $disabled-indicator-background {
-        $disabled-indicator-outline: var(--disabled-indicator-background);
-    }
-
-    @if not($disabled-title-color) and $step-background {
-        $disabled-title-color: hsla(from (adaptive-contrast(var(--step-background)) h s l / 0.3));
-    }
-
-    @if not($disabled-subtitle-color) and $step-background {
-        $disabled-subtitle-color: hsla(from (adaptive-contrast(var(--step-background)) h s l / 0.3));
-    }
-
-    @if not($step-separator-color) and $step-background {
-        $step-separator-color: var(--step-background);
-    }
-
-    @if not($step-separator-color) and $indicator-background {
-        $step-separator-color: var(--indicator-background);
-    }
-
-    @if not($border-radius-indicator) {
-        $border-radius-indicator: map.get($theme, 'border-radius-indicator');
-    }
-
-    @if not($border-radius-step-header) {
-        $border-radius-step-header: map.get($theme, 'border-radius-step-header');
-    }
-
-    @return extend($theme, (
-        name: $name,
-        selector: $selector,
-
-        content-foreground: $content-foreground,
-
-        // Incomplete
-        step-background: $step-background,
-        step-hover-background: $step-hover-background,
-        step-focus-background: $step-focus-background,
-        indicator-color: $indicator-color,
-        indicator-background: $indicator-background,
-        indicator-outline: $indicator-outline,
-        title-color: $title-color,
-        title-hover-color: $title-hover-color,
-        title-focus-color: $title-focus-color,
-        subtitle-color: $subtitle-color,
-        subtitle-hover-color: $subtitle-hover-color,
-        subtitle-focus-color: $subtitle-focus-color,
-
-        // Invalid
-        invalid-step-background: $invalid-step-background,
-        invalid-step-hover-background: $invalid-step-hover-background,
-        invalid-step-focus-background: $invalid-step-focus-background,
-        invalid-indicator-color: $invalid-indicator-color,
-        invalid-indicator-background: $invalid-indicator-background,
-        invalid-indicator-outline: $invalid-indicator-outline,
-        invalid-title-color: $invalid-title-color,
-        invalid-title-hover-color: $invalid-title-hover-color,
-        invalid-title-focus-color: $invalid-title-focus-color,
-        invalid-subtitle-color: $invalid-subtitle-color,
-        invalid-subtitle-hover-color: $invalid-subtitle-hover-color,
-        invalid-subtitle-focus-color: $invalid-subtitle-focus-color,
-
-        // Current
-        current-step-background: $current-step-background,
-        current-step-hover-background: $current-step-hover-background,
-        current-step-focus-background: $current-step-focus-background,
-        current-indicator-color: $current-indicator-color,
-        current-indicator-background: $current-indicator-background,
-        current-indicator-outline: $current-indicator-outline,
-        current-title-color: $current-title-color,
-        current-title-hover-color: $current-title-hover-color,
-        current-title-focus-color: $current-title-focus-color,
-        current-subtitle-color: $current-subtitle-color,
-        current-subtitle-hover-color: $current-subtitle-hover-color,
-        current-subtitle-focus-color: $current-subtitle-focus-color,
-
-        // Complete
-        complete-step-background: $complete-step-background,
-        complete-step-hover-background: $complete-step-hover-background,
-        complete-step-focus-background: $complete-step-focus-background,
-        complete-indicator-color: $complete-indicator-color,
-        complete-indicator-background: $complete-indicator-background,
-        complete-indicator-outline: $complete-indicator-outline,
-        complete-title-color: $complete-title-color,
-        complete-title-hover-color: $complete-title-hover-color,
-        complete-title-focus-color: $complete-title-focus-color,
-        complete-subtitle-color: $complete-subtitle-color,
-        complete-subtitle-hover-color: $complete-subtitle-hover-color,
-        complete-subtitle-focus-color: $complete-subtitle-focus-color,
-
-        // Disabled
-        disabled-indicator-color: $disabled-indicator-color,
-        disabled-indicator-background: $disabled-indicator-background,
-        disabled-indicator-outline: $disabled-indicator-outline,
-        disabled-title-color: $disabled-title-color,
-        disabled-subtitle-color: $disabled-subtitle-color,
-
-        // Separator
-        step-separator-color: $step-separator-color,
-        complete-step-separator-color: $complete-step-separator-color,
-        step-separator-style: $step-separator-style,
-        complete-step-separator-style: $complete-step-separator-style,
-
-        // Border-radius
-        border-radius-indicator: $border-radius-indicator,
-        border-radius-step-header: $border-radius-step-header,
-    ));
-}
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars