igniteui-theming 1.4.5 → 1.4.6

package/sass/themes/schemas/components/light/_stepper.scss

@@ -0,0 +1,695 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light stepper schema.
+/// @type {Map}
+/// @prop {Color} step-background [transparent] - The background of the step header.
+/// @prop {Map} step-hover-background [color: ('gray', 200)] - The background of the step header on hover.
+/// @prop {Map} step-focus-background [color: ('gray', 100)] - The background of the step header on focus.
+/// @prop {Map} title-color [color: ('gray', 900)] - The text color of the step title.
+/// @prop {Map} title-hover-color [color: ('gray', 900)] - The text color of the step title on hover.
+/// @prop {Map} title-focus-color [color: ('gray', 900)] - The text color of the step title on focus.
+/// @prop {Map} subtitle-color [color: ('gray', 700)] - The text color of the step subtitle.
+/// @prop {Map} subtitle-hover-color [color: ('gray', 700)] - The text color of the step subtitle on hover.
+/// @prop {Map} subtitle-focus-color [color: ('gray', 700)] - The text color of the step subtitle on focus.
+/// @prop {Map} indicator-color [color: (contrast-color: ('gray', 400)] - The text color of the incomplete step indicator.
+/// @prop {Map} indicator-background [color: ('gray', 400)] - The background color of the incomplete step indicator.
+/// @prop {Map} indicator-outline [color: ('gray', 400)] - The outline color of the incomplete step indicator.
+/// @prop {Color} invalid-step-background [transparent] - The background of the invalid step header.
+/// @prop {Map} invalid-step-hover-background [color: ('gray', 200)] - The background of the invalid step header on hover.
+/// @prop {Map} invalid-step-focus-background [color: 'gray', 100)] - The background of the invalid step header on focus.
+/// @prop {Map} invalid-title-color [color: ('error')] - The color of the invalid step title.
+/// @prop {Map} invalid-title-hover-color [color: ('error')] - The color of the invalid step title on hover.
+/// @prop {Map} invalid-title-focus-color [color: ('error')] - The color of the invalid step title on focus.
+/// @prop {Map} invalid-subtitle-color [color: ('error')] - The text of the invalid step subtitle.
+/// @prop {Map} invalid-subtitle-hover-color [color: ('error')] - The color of the invalid step subtitle on hover.
+/// @prop {Map} invalid-subtitle-focus-color [color: ('error')] - The color of the invalid step subtitle on focus.
+/// @prop {Map} invalid-indicator-color [contrast-color: ('gray', 900)] - The color of the invalid step indicator.
+/// @prop {Map} invalid-indicator-background [color: ('error')] - The background color of the invalid step indicator.
+/// @prop {Map} invalid-indicator-outline [color: ('error')] - The outline color of the invalid step indicator.
+/// @prop {Color} current-step-background [transparent] - The background of the current step header.
+/// @prop {Map} current-step-hover-background [color: ('gray', 200)] - The background of the current step header on hover.
+/// @prop {Map} current-step-focus-background [color: 'gray', 100)] - The background of the current step header on focus.
+/// @prop {Map} current-title-color [color: ('gray', 900)] - The color of the current step title.
+/// @prop {Map} current-title-hover-color [color: ('gray', 900)] - The color of the current step title on hover.
+/// @prop {Map} current-title-focus-color [color: ('gray', 900)] - The color of the current step title on focus.
+/// @prop {Map} current-subtitle-color [color: ('gray', 700)] - The color of the current step subtitle.
+/// @prop {Map} current-subtitle-hover-color [color: ('gray', 700)] - The color of the current step subtitle on hover.
+/// @prop {Map} current-subtitle-focus-color [color: ('gray', 700)] - The color of the current step subtitle on focus.
+/// @prop {Map} current-indicator-color [contrast-color: ('gray', 900)] - The color of the current step indicator.
+/// @prop {Map} current-indicator-background [color: ('primary', 500)] - The background color of the current step indicator.
+/// @prop {Map} current-indicator-outline [color: ('primary', 500)] - The outline color of the current step indicator.
+/// @prop {Color} complete-step-background [transparent] - The background of the complete step header.
+/// @prop {Map} complete-step-hover-background [color: ('gray', 200)] - The background of the complete step header on hover.
+/// @prop {Map} complete-step-focus-background [color: 'gray', 100)] - The background of the complete step header on focus.
+/// @prop {Map} complete-title-color [color: ('gray', 900)] - The color of the complete step title.
+/// @prop {Map} complete-title-hover-color [color: ('gray', 900)] - The color of the complete step title on hover.
+/// @prop {Map} complete-title-focus-color [color: ('gray', 900)] - The color of the complete step title on focus.
+/// @prop {Map} complete-subtitle-color [color: ('gray', 700)] - The color of the complete step subtitle.
+/// @prop {Map} complete-subtitle-hover-color [color: ('gray', 700)] - The color of the complete step subtitle on hover.
+/// @prop {Map} complete-subtitle-focus-color [color: ('gray', 700)] - The color of the complete step subtitle on focus.
+/// @prop {Map} complete-indicator-color [contrast-color: ('gray', 900)] - The color of the completed step indicator.
+/// @prop {Map} complete-indicator-background [color: ('gray', 900)] - The background color of the completed step indicator.
+/// @prop {Map} complete-indicator-outline [color: ('gray', 900)] - The outline color of the completed step indicator.
+/// @prop {Map} disabled-title-color [color: ('gray', 500)] - The title color of the disabled step.
+/// @prop {Map} disabled-subtitle-color [color: ('gray', 500)] - The subtitle color of the disabled step.
+/// @prop {Map} disabled-indicator-color [color: ('gray', 500)] - The color of the disabled step indicator, title, and subtitle.
+/// @prop {Map} disabled-indicator-background [color: ('gray', 200)] - The background color of the disabled step indicator.
+/// @prop {Map} disabled-indicator-outline [color: ('gray', 200)] - The outline color of the disabled step indicator.
+/// @prop {Map} step-separator-color [color: ('gray', 300)] - The separator border-color of between the steps.
+/// @prop {Map} complete-step-separator-color [color: ('gray', 900)] - The separator border-color between the completed steps.
+/// @prop {String} step-separator-style ['dashed'] - The separator border-style of between the steps.
+/// @prop {String} complete-step-separator-style ['solid'] - The separator border-style between the completed steps.
+/// @prop {Number} border-radius-indicator [100px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-step-header [0] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
+$light-stepper: (
+    // Step incomplete
+    step-background: transparent,
+    step-hover-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+    step-focus-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    indicator-background: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
+    indicator-outline: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
+    indicator-color: (
+        contrast-color: (
+            'gray',
+            400,
+        ),
+    ),
+
+    title-color: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+    title-hover-color: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+    title-focus-color: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+
+    subtitle-color: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+    subtitle-hover-color: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+    subtitle-focus-color: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+
+    // Complete
+    complete-step-background: transparent,
+    complete-step-hover-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+    complete-step-focus-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    complete-indicator-background: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+    complete-indicator-outline: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+    complete-indicator-color: (
+        contrast-color: (
+            'gray',
+            900,
+        ),
+    ),
+
+    complete-title-color: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+    complete-title-hover-color: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+    complete-title-focus-color: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+
+    complete-subtitle-color: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+    complete-subtitle-hover-color: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+    complete-subtitle-focus-color: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+
+    // Current
+    current-step-background: transparent,
+    current-step-hover-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+    current-step-focus-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    current-indicator-background: (
+        color: (
+            'primary',
+            500,
+        ),
+    ),
+
+    current-indicator-outline: (
+        color: (
+            'primary',
+            500,
+        ),
+    ),
+
+    current-indicator-color: (
+        contrast-color: (
+            'gray',
+            900,
+        ),
+    ),
+
+    current-title-color: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+    current-title-hover-color: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+    current-title-focus-color: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+
+    current-subtitle-color: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+    current-subtitle-hover-color: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+    current-subtitle-focus-color: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+
+    // Invalid
+    invalid-step-background: transparent,
+    invalid-step-hover-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+    invalid-step-focus-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    invalid-indicator-background: (
+        color: (
+            'error',
+        ),
+    ),
+    invalid-indicator-outline: (
+        color: (
+            'error',
+        ),
+    ),
+    invalid-indicator-color: (
+        contrast-color: (
+            'gray',
+            900,
+        ),
+    ),
+
+    invalid-title-color: (
+        color: (
+            'error',
+        ),
+    ),
+    invalid-title-hover-color: (
+        color: (
+            'error',
+        ),
+    ),
+    invalid-title-focus-color: (
+        color: (
+            'error',
+        ),
+    ),
+
+    invalid-subtitle-color: (
+        color: (
+            'error',
+        ),
+    ),
+    invalid-subtitle-hover-color: (
+        color: (
+            'error',
+        ),
+    ),
+    invalid-subtitle-focus-color: (
+        color: (
+            'error',
+        ),
+    ),
+
+    // Disabled
+    disabled-indicator-color:
+        (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+    disabled-indicator-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+    disabled-indicator-outline: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+    disabled-title-color: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+    disabled-subtitle-color: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+
+    // Separator
+    step-separator-color:
+        (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    complete-step-separator-color: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+    step-separator-style: 'dashed',
+    complete-step-separator-style: 'solid',
+    border-radius-indicator: rem(100px),
+    border-radius-step-header: rem(0)
+);
+
+/// Generates a fluent stepper schema.
+/// @type {Map}
+/// @prop {Color} indicator-background [transparent] - The background color of the incomplete step indicator.
+/// @prop {Color} indicator-outline [transparent] - The outline color of the incomplete step indicator.
+/// @prop {Map} indicator-color [color: ('gray', 900)] - The text color of the incomplete step indicator.
+/// @prop {Map} complete-indicator-background [color: ('gray', 300)] - The background color of the completed step indicator.
+/// @prop {Color} complete-indicator-outline [transparent] - The outline color of the completed step indicator.
+/// @prop {Map} complete-indicator-color [contrast-color: ('gray', 200)] - The text color of the completed step indicator.
+/// @prop {Map} complete-step-separator-color [color: ('primary', 500)] - The separator border-color between the completed steps.
+/// @prop {Color} disabled-indicator-background [transparent] - The background color of the disabled step indicator.
+/// @prop {Color} disabled-indicator-outline [transparent] - The outline color of the disabled step indicator.
+/// @prop {Number} border-radius-indicator [2px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-step-header [2px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-stepper
+$fluent-stepper: extend(
+    $light-stepper,
+    (
+        indicator-background: transparent,
+        indicator-outline: transparent,
+        indicator-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        // Complete
+        complete-indicator-background:
+            (
+                color: (
+                    'gray',
+                    300,
+                ),
+            ),
+        complete-indicator-outline: transparent,
+        complete-indicator-color: (
+            contrast-color: (
+                'gray',
+                200,
+            ),
+        ),
+        complete-step-separator-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        // Disabled
+        disabled-indicator-background: transparent,
+        disabled-indicator-outline: transparent,
+        border-radius-indicator: rem(2px),
+        border-radius-step-header: rem(2px),
+    )
+);
+
+/// Generates a bootstrap stepper schema.
+/// @type {Map}
+/// @prop {Color} indicator-color [color: ('primary', 500)] - The text color of the incomplete step indicator.
+/// @prop {Color} indicator-background [transparent] - The background color of the incomplete step indicator.
+/// @prop {Map} indicator-outline [color: ('gray', 300)] - The outline color of the incomplete step indicator.
+/// @prop {Color} disabled-indicator-background [transparent] - The background color of the disabled step indicator.
+/// @prop {Map} disabled-indicator-outline [color: ('gray', 300)] - The outline color of the disabled step indicator.
+/// @prop {Map} complete-indicator-background [color: ('gray', 300)] - The background color of the completed step indicator.
+/// @prop {Map} complete-indicator-outline [color: ('gray', 300)] - The outline color of the completed step indicator.
+/// @prop {Map} complete-indicator-color [color: ('gray', 300)] - The text color of the completed step indicator.
+/// @prop {Map} step-separator-color [color: ('gray', 300)] - The separator border-color of between the steps.
+/// @prop {Map} complete-step-separator-color [color: ('primary', 500)] - The separator border-color between the completed steps.
+/// @prop {String} step-separator-style ['solid'] - The separator border-style of between the steps.
+/// @prop {String} complete-step-separator-style ['solid'] - The separator border-style between the completed steps.
+/// @prop {Map} step-hover-background [color: ('gray', 300, .5)] - The background of the step header on hover.
+/// @prop {Map} invalid-step-hover-background [color: ('gray', 300, .5)] - The background of the invalid step header on hover.
+/// @prop {Map} current-step-hover-background [color: ('gray', 300, .5)] - The background of the current step header on hover.
+/// @prop {Map} complete-step-hover-background [color: ('gray', 300, .5)] - The background of the complete step header on hover.
+/// @prop {Map} step-focus-background [color: ('gray', 300, .5)] - The background of the step header on hover.
+/// @prop {Map} invalid-step-focus-background [color: ('gray', 300, .5)] - The background of the invalid step header on hover.
+/// @prop {Map} current-step-focus-background [color: ('gray', 300, .5)] - The background of the current step header on hover.
+/// @prop {Map} complete-step-focus-background [color: ('gray', 300, .5)] - The background of the complete step header on hover.
+/// @prop {Number} border-radius-indicator [2px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-step-header [2px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-stepper
+$bootstrap-stepper: extend(
+    $light-stepper,
+    (
+        step-hover-background: (
+            color: (
+                'gray',
+                300,
+                0.5,
+            ),
+        ),
+        complete-step-hover-background: (
+            color: (
+                'gray',
+                300,
+                0.5,
+            ),
+        ),
+        current-step-hover-background: (
+            color: (
+                'gray',
+                300,
+                0.5,
+            ),
+        ),
+        invalid-step-hover-background: (
+            color: (
+                'gray',
+                300,
+                0.5,
+            ),
+        ),
+
+        step-focus-background: (
+            color: (
+                'gray',
+                300,
+                0.5,
+            ),
+        ),
+        complete-step-focus-background: (
+            color: (
+                'gray',
+                300,
+                0.5,
+            ),
+        ),
+        current-step-focus-background: (
+            color: (
+                'gray',
+                300,
+                0.5,
+            ),
+        ),
+        invalid-step-focus-background: (
+            color: (
+                'gray',
+                300,
+                0.5,
+            ),
+        ),
+
+        indicator-background: transparent,
+        indicator-outline: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        indicator-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        // Complete
+        complete-indicator-background:
+            (
+                color: (
+                    'gray',
+                    400,
+                ),
+            ),
+        complete-indicator-outline: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        complete-indicator-color: (
+            contrast-color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        // Disabled
+        disabled-indicator-background: transparent,
+        disabled-indicator-outline: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        // Separator
+        step-separator-color:
+            (
+                color: (
+                    'gray',
+                    300,
+                ),
+            ),
+        complete-step-separator-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        step-separator-style: 'solid',
+        complete-step-separator-style: 'solid',
+        border-radius-indicator: rem(2px),
+        border-radius-step-header: rem(2px),
+    )
+);
+
+/// Generates an indigo stepper schema.
+/// @type {Map}
+/// @prop {Map} indicator-color [color: ('primary', 500)] - The text color of the incomplete step indicator.
+/// @prop {Color} indicator-background [transparent] - The background color of the incomplete step indicator.
+/// @prop {Map} indicator-outline [color: ('gray', 300)] - The outline color of the incomplete step indicator.
+/// @prop {Map} complete-indicator-color [color: ('primary', 500)] - The color of the completed step indicator.
+/// @prop {Map} complete-indicator-background [color: ('primary', 100)] - The background color of the completed step indicator.
+/// @prop {Map} complete-indicator-outline [color: ('primary', 100)] - The outline color of the completed step indicator.
+/// @prop {Color} disabled-indicator-background [transparent] - The background color of the disabled step indicator.
+/// @prop {Map} disabled-indicator-outline [color: ('gray', 200)] - The outline color of the disabled step indicator.
+/// @prop {Map} step-separator-color [color: ('gray', 300)] - The separator border-color of between the steps.
+/// @prop {Map} complete-step-separator-color [color: ('primary', 500)] - The separator border-color between the completed steps.
+/// @prop {String} step-separator-style ['solid'] - The separator border-style of between the steps.
+/// @prop {String} complete-step-separator-style ['solid'] - The separator border-style between the completed steps.
+/// @prop {Number} border-radius-indicator [100px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-step-header [0] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires $light-stepper
+$indigo-stepper: extend(
+    $light-stepper,
+    (
+        indicator-background: transparent,
+        indicator-outline: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        indicator-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        // Complete
+        complete-indicator-background:
+            (
+                color: (
+                    'primary',
+                    100,
+                ),
+            ),
+        complete-indicator-outline: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+        complete-indicator-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        // Disabled
+        disabled-indicator-background: transparent,
+        disabled-indicator-outline: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        // Separator
+        step-separator-color:
+            (
+                color: (
+                    'gray',
+                    300,
+                ),
+            ),
+        complete-step-separator-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        step-separator-style: 'solid',
+        complete-step-separator-style: 'solid',
+    )
+);