@use '../../../../utils/map' as *;
@use '../light/stepper' as *;

////
/// @package theming
/// @group schemas
/// @access public
////

/// Generates a base dark stepper schema.
/// @type Map
/// @prop {Map} current-indicator-color [color: ('gray', 900)] - The color of the current step indicator.
/// @prop {Map} invalid-indicator-color [color: ('gray', 900)] - The color of the invalid step indicator.
/// @prop {Map} step-hover-background [color: ('gray', 100, .3)] - The background of the step header on hover.
/// @prop {Map} invalid-step-hover-background [color: ('gray', 100, .3)] - The background of the invalid step header on hover.
/// @prop {Map} current-step-hover-background [color: ('gray', 100, .3)] - The background of the current step header on hover.
/// @prop {Map} complete-step-hover-background [color: ('gray', 100, .3)] - The background of the complete step header on hover.
/// @prop {Map} step-focus-background [color: ('gray', 100, .5)] - The background of the step header on focus.
/// @prop {Map} invalid-step-focus-background [color: ('gray', 100, .5)] - The background of the invalid step header on focus.
/// @prop {Map} current-step-focus-background [color: ('gray', 100, .5)] - The background of the current step header on focus.
/// @prop {Map} complete-step-focus-background [color: ('gray', 100, .5)] - The background of the complete step header on focus.
$base-stepper: (
    step-hover-background: (
        color: (
            'gray',
            100,
            0.3,
        ),
    ),
    complete-step-hover-background: (
        color: (
            'gray',
            100,
            0.3,
        ),
    ),
    current-step-hover-background: (
        color: (
            'gray',
            100,
            0.3,
        ),
    ),
    invalid-step-hover-background: (
        color: (
            'gray',
            100,
            0.3,
        ),
    ),
    step-focus-background: (
        color: (
            'gray',
            100,
            0.5,
        ),
    ),
    complete-step-focus-background: (
        color: (
            'gray',
            100,
            0.5,
        ),
    ),
    current-step-focus-background: (
        color: (
            'gray',
            100,
            0.5,
        ),
    ),
    invalid-step-focus-background: (
        color: (
            'gray',
            100,
            0.5,
        ),
    ),
    current-indicator-color: (
        color: (
            'gray',
            900,
        ),
    ),
    invalid-indicator-color: (
        color: (
            'gray',
            900,
        ),
    ),
    _meta: (
        name: 'stepper',
        variant: 'dark',
    ),
);

/// Generates a dark material stepper schema.
/// @type Map
/// @prop {Map} current-indicator-color [contrast-color: ('gray', 50)] - The color of the current step indicator.
/// @prop {Map} invalid-indicator-color [contrast-color: ('gray', 900)] - The color of the invalid step indicator.
/// @prop {Map} invalid-indicator-background [color: ('error', 500)] - The background color of the invalid step indicator.
/// @prop {Map} invalid-indicator-outline [color: ('error', 500)] - The outline color of the invalid step indicator.
/// @prop {Map} invalid-title-color [color: ('error', 500)] - The color of the invalid step title.
/// @prop {Map} invalid-title-hover-color [color: ('error', 500)] - The color of the invalid step title on hover.
/// @prop {Map} invalid-title-focus-color [color: ('error', 300)] - The color of the invalid step title on focus.
/// @prop {Map} invalid-subtitle-color [color: ('error', 500)] - The text of the invalid step subtitle.
/// @prop {Map} invalid-subtitle-hover-color [color: ('error', 500)] - The color of the invalid step subtitle on hover.
/// @prop {Map} invalid-subtitle-focus-color [color: ('error', 300)] - The color of the invalid step subtitle on focus.
/// @requires $material-stepper
/// @requires $base-stepper
$dark-material-stepper: extend(
    $material-stepper,
    $base-stepper,
    (
        current-indicator-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
        invalid-indicator-color: (
            contrast-color: (
                'gray',
                900,
            ),
        ),
        invalid-indicator-background: (
            color: (
                'error',
                500,
            ),
        ),
        invalid-indicator-outline: (
            color: (
                'error',
                500,
            ),
        ),
        invalid-title-color: (
            color: (
                'error',
                500,
            ),
        ),
        invalid-title-hover-color: (
            color: (
                'error',
                500,
            ),
        ),
        invalid-title-focus-color: (
            color: (
                'error',
                300,
            ),
        ),
        invalid-subtitle-color: (
            color: (
                'error',
                500,
            ),
        ),
        invalid-subtitle-hover-color: (
            color: (
                'error',
                500,
            ),
        ),
        invalid-subtitle-focus-color: (
            color: (
                'error',
                300,
            ),
        ),
    )
);

/// Generates a dark fluent stepper schema
/// @type Map
/// @prop {Map} complete-indicator-background [color: ('gray', 100)] - The background color of the completed step indicator.
/// @prop {Map} step-focus-background [color: ('gray', 100, .4)] - The background of the step header on focus.
/// @prop {Map} invalid-step-focus-background [color: ('gray', 100, .4)] - The background of the invalid step header on focus.
/// @prop {Map} current-step-focus-background [color: ('gray', 100, .4)] - The background of the current step header on focus.
/// @prop {Map} complete-step-focus-background [color: ('gray', 100, .4)] - The background of the complete step header on focus.
/// @prop {Map} invalid-title-color [color: ('error', 50)] - The color of the invalid step title.
/// @prop {Map} invalid-title-hover-color [color: ('error', 50)] - The color of the invalid step title on hover.
/// @prop {Map} invalid-title-focus-color [color: ('error', 50)] - The color of the invalid step title on focus.
/// @prop {Map} invalid-subtitle-color [color: ('error', 700)] - The text of the invalid step subtitle.
/// @prop {Map} invalid-subtitle-hover-color [color: ('error', 50)] - The color of the invalid step subtitle on hover.
/// @prop {Map} invalid-subtitle-focus-color [color: ('error', 50)] - The color of the invalid step subtitle on focus.
/// @requires $fluent-stepper
/// @requires $base-stepper
$dark-fluent-stepper: extend(
    $fluent-stepper,
    $base-stepper,
    (
        complete-indicator-background: (
            color: (
                'gray',
                100,
            ),
        ),
        step-focus-background: (
            color: (
                'gray',
                100,
                0.4,
            ),
        ),
        complete-step-focus-background: (
            color: (
                'gray',
                100,
                0.4,
            ),
        ),
        current-step-focus-background: (
            color: (
                'gray',
                100,
                0.4,
            ),
        ),
        invalid-step-focus-background: (
            color: (
                'gray',
                100,
                0.4,
            ),
        ),
        invalid-title-color: (
            color: (
                'error',
                50,
            ),
        ),
        invalid-title-hover-color: (
            color: (
                'error',
                50,
            ),
        ),
        invalid-title-focus-color: (
            color: (
                'error',
                50,
            ),
        ),
        invalid-subtitle-color: (
            color: (
                'error',
                50,
            ),
        ),
        invalid-subtitle-hover-color: (
            color: (
                'error',
                50,
            ),
        ),
        invalid-subtitle-focus-color: (
            color: (
                'error',
                50,
            ),
        ),
    )
);

/// Generates a dark bootstrap stepper schema.
/// @type Map
/// @prop {Map} indicator-color [color: ('primary', 300)] - The text color of the incomplete step indicator.
/// @prop {Map} step-separator-color [color: ('gray', 100)] - The separator border-color of between the steps.
/// @prop {Map} invalid-title-color [color: ('error', 400)] - The color of the invalid step title.
/// @prop {Map} invalid-title-hover-color [color: ('error', 400)] - The color of the invalid step title on hover.
/// @prop {Map} invalid-title-focus-color [color: ('error', 300)] - The color of the invalid step title on focus.
/// @prop {Map} invalid-subtitle-color [color: ('error', 400)] - The text of the invalid step subtitle.
/// @prop {Map} invalid-subtitle-hover-color [color: ('error', 400)] - The color of the invalid step subtitle on hover.
/// @prop {Map} invalid-subtitle-focus-color [color: ('error', 300)] - 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.
/// @requires $bootstrap-stepper
/// @requires $base-stepper
$dark-bootstrap-stepper: extend(
    $bootstrap-stepper,
    $base-stepper,
    (
        indicator-color: (
            color: (
                'primary',
                300,
            ),
        ),
        step-separator-color: (
            color: (
                'gray',
                100,
            ),
        ),

        invalid-title-color: (
            color: (
                'error',
                400,
            ),
        ),

        invalid-title-hover-color: (
            color: (
                'error',
                400,
            ),
        ),

        invalid-title-focus-color: (
            color: (
                'error',
                300,
            ),
        ),

        invalid-subtitle-color: (
            color: (
                'error',
                400,
            ),
        ),

        invalid-subtitle-hover-color: (
            color: (
                'error',
                400,
            ),
        ),

        invalid-subtitle-focus-color: (
            color: (
                'error',
                300,
            ),
        ),

        invalid-indicator-color: (
            contrast-color: (
                'gray',
                900,
            ),
        ),
    )
);

/// Generates a dark indigo stepper schema.
/// @type Map
/// @prop {Map} content-foreground [contrast-color: ('gray', 50, .8)] - The foreground of the step content.
/// @prop {Map} indicator-color [contrast-color: ('gray', 50, .8)] - The text color of the incomplete step indicator.
/// @prop {Map} indicator-background [contrast-color: ('gray', 50, .15)] - The background color of the incomplete step indicator.
/// @prop {Map} title-color [contrast-color: ('gray', 50)] - The text color of the step title.
/// @prop {Map} title-hover-color [contrast-color: ('gray', 50)] - The text color of the step title on hover.
/// @prop {Map} title-focus-color [contrast-color: ('gray', 50)] - The text color of the step title on focus.
/// @prop {Map} subtitle-color [contrast-color: ('gray', 50, .8)] - The text color of the step subtitle.
/// @prop {Map} subtitle-hover-color [contrast-color: ('gray', 50, .8)] - The text color of the step subtitle on hover.
/// @prop {Map} subtitle-focus-color [contrast-color: ('gray', 50, .8)] - The text color of the step subtitle on focus.
/// @prop {Map} step-hover-background [contrast-color: ('gray', 50, .1)] - The background of the step header on hover.
/// @prop {Map} step-focus-background [contrast-color: ('gray', 50, .1)] - The background of the step header on hover.
/// @prop {Map} current-step-hover-background [contrast-color: ('gray', 50, .1)] - The background of the current step header on hover.
/// @prop {Map} current-step-focus-background [contrast-color: ('gray', 50, .1)] - The background of the current step header on focus.
/// @prop {Map} complete-step-hover-background [contrast-color: ('gray', 50, .1)] - The background of the complete step header on hover.
/// @prop {Map} complete-step-focus-background [contrast-color: ('gray', 50, .1)] - The background of the complete step header on focus.
/// @prop {Map} invalid-step-hover-background [contrast-color: ('gray', 50, .1)] - The background of the invalid step header on hover.
/// @prop {Map} invalid-step-focus-background [contrast-color: ('gray', 50, .1)] - The background of the invalid step header on focus.
/// @prop {Map} complete-indicator-background [contrast-color: ('gray', 50, .8)] - The background color of the completed step indicator.
/// @prop {Map} complete-indicator-color [contrast: ('gray', 50)] - The color of the completed step indicator.
/// @prop {Map} disabled-indicator-color [contrast-color: ('gray', 50, .2)] - The color of the disabled step indicator, title, and subtitle.
/// @prop {Map} disabled-indicator-background [contrast-color: ('gray', 50, .1)] - The background color of the disabled step indicator.
/// @prop {Map} disabled-title-color [contrast-color: ('gray', 50, .2)] - The title color of the disabled step.
/// @prop {Map} disabled-subtitle-color [contrast-color: ('gray', 50, .2)] - The subtitle color of the disabled step.
/// @prop {Map} step-separator-color [contrast-color: ('gray', 50, .3)] - The separator border-color of between the steps.
/// @prop {Map} complete-step-separator-color [contrast-color: ('gray', 50, .3)] - The separator border-color between the completed steps.
/// @prop {Map} invalid-title-color [contrast-color: ('gray', 50)] - The color of the invalid step title.
/// @prop {Map} invalid-title-hover-color [contrast-color: ('gray', 50)] - The color of the invalid step title on hover.
/// @prop {Map} invalid-title-focus-color [contrast-color: ('gray', 50)] - The color of the invalid step title on focus.
/// @prop {Map} invalid-subtitle-color [contrast-color: ('gray', 50, .8)] - The text of the invalid step subtitle.
/// @prop {Map} invalid-subtitle-hover-color [contrast-color: ('gray', 50, .8)] - The color of the invalid step subtitle on hover.
/// @prop {Map} invalid-subtitle-focus-color [contrast-color: ('gray', 50, .8)] - The color of the invalid step subtitle on focus.
/// @prop {Map} current-indicator-color [contrast-color: ('gray', 50)] - The color of the current step indicator.
/// @prop {Map} complete-title-color [contrast-color: ('gray', 50)] - The color of the complete step title.
/// @prop {Map} complete-title-hover-color [contrast-color: ('gray', 50)] - The color of the complete step title on hover.
/// @prop {Map} complete-title-focus-color [contrast-color: ('gray', 50)] - The color of the complete step title on focus.
/// @prop {Map} complete-subtitle-color [contrast-color: ('gray', 50, .8)] - The color of the complete step subtitle.
/// @prop {Map} complete-subtitle-hover-color [contrast-color: ('gray', 50, .8)] - The color of the complete step subtitle on hover.
/// @prop {Map} complete-subtitle-focus-color [contrast-color: ('gray', 50, .8)] - The color of the complete step subtitle on focus.
/// @prop {Map} current-title-color [contrast-color: ('gray', 50)] - The color of the current step title.
/// @prop {Map} current-title-hover-color [contrast-color: ('gray', 50)] - The color of the current step title on hover.
/// @prop {Map} current-title-focus-color [contrast-color: ('gray', 50)] - The color of the current step title on focus.
/// @prop {Map} current-subtitle-color [contrast-color: ('gray', 50, .8)] - The color of the current step subtitle.
/// @prop {Map} current-subtitle-hover-color [contrast-color: ('gray', 50, .8)] - The color of the current step subtitle on hover.
/// @prop {Map} current-subtitle-focus-color [contrast-color: ('gray', 50, .8)] - The color of the current step subtitle on focus.
/// @prop {Map} invalid-indicator-color [contrast-color: ('gray', 50)] - The color of the invalid step indicator.
/// @requires $indigo-stepper
/// @requires $base-stepper
$dark-indigo-stepper: extend(
    $indigo-stepper,
    $base-stepper,
    (
        content-foreground: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        indicator-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        indicator-background: (
            contrast-color: (
                'gray',
                50,
                0.15,
            ),
        ),
        title-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
        title-hover-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
        title-focus-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
        subtitle-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        subtitle-hover-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        subtitle-focus-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        step-hover-background: (
            contrast-color: (
                'gray',
                50,
                0.1,
            ),
        ),
        step-focus-background: (
            contrast-color: (
                'gray',
                50,
                0.1,
            ),
        ),
        current-step-hover-background: (
            contrast-color: (
                'gray',
                50,
                0.1,
            ),
        ),
        current-step-focus-background: (
            contrast-color: (
                'gray',
                50,
                0.1,
            ),
        ),
        complete-step-hover-background: (
            contrast-color: (
                'gray',
                50,
                0.1,
            ),
        ),
        complete-step-focus-background: (
            contrast-color: (
                'gray',
                50,
                0.1,
            ),
        ),
        invalid-step-hover-background: (
            contrast-color: (
                'gray',
                50,
                0.1,
            ),
        ),
        invalid-step-focus-background: (
            contrast-color: (
                'gray',
                50,
                0.1,
            ),
        ),
        complete-indicator-background: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        complete-indicator-color: (
            color: (
                'gray',
                50,
            ),
        ),
        disabled-indicator-color: (
            contrast-color: (
                'gray',
                50,
                0.2,
            ),
        ),
        disabled-indicator-background: (
            contrast-color: (
                'gray',
                50,
                0.1,
            ),
        ),
        disabled-title-color: (
            contrast-color: (
                'gray',
                50,
                0.2,
            ),
        ),
        disabled-subtitle-color: (
            contrast-color: (
                'gray',
                50,
                0.2,
            ),
        ),
        step-separator-color: (
            contrast-color: (
                'gray',
                50,
                0.3,
            ),
        ),
        complete-step-separator-color: (
            contrast-color: (
                'gray',
                50,
                0.3,
            ),
        ),
        invalid-title-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
        invalid-title-hover-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
        invalid-title-focus-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
        invalid-subtitle-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        invalid-subtitle-hover-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        invalid-subtitle-focus-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        current-indicator-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
        complete-title-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
        complete-title-hover-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
        complete-title-focus-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
        complete-subtitle-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        complete-subtitle-hover-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        complete-subtitle-focus-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

        current-title-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
        current-title-hover-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
        current-title-focus-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
        current-subtitle-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        current-subtitle-hover-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        current-subtitle-focus-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        invalid-indicator-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
    )
);