@use '../../../../utils/map' as *; @use '../../../../typography/functions' as *; //// /// @package theming /// @group schemas /// @access public //// /// Generates a base 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: ('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', 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} 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 {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 ['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 {List} border-radius-indicator [(rem(100px), rem(0), rem(100px))] - The indicator border radius. /// @prop {List} border-radius-step-header [(rem(0), rem(0), rem(100px))] - The header border radius. /// @prop {Map} content-foreground [color: ('gray', 900)] - The foreground of the step content. $light-stepper: ( // Step incomplete content-foreground: ( color: ( 'gray', 900, ), ), step-background: transparent, step-hover-background: ( color: ( 'gray', 200, ), ), step-focus-background: ( color: ( 'gray', 100, ), ), indicator-background: transparent, indicator-outline: ( color: ( 'gray', 300, ), ), indicator-color: ( color: ( 'primary', 500, ), ), 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-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: transparent, 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: ( 'primary', 500, ), ), step-separator-style: 'dashed', complete-step-separator-style: 'solid', border-radius-indicator: ( border-radius: ( rem(100px), rem(0), rem(100px), ), ), border-radius-step-header: ( border-radius: ( rem(0), rem(0), rem(100px), ), ) ); /// Generates a material stepper schema. /// @type {Map} /// @prop {Map} indicator-background [color: ('gray', 400)] - The background color of the incomplete step indicator. /// @prop {Map} indicator-color [color: (contrast-color: ('gray', 400)] - The text color of the incomplete 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} complete-indicator-color [contrast-color: ('gray', 900)] - The color of the completed step indicator. /// @prop {Map} complete-step-separator-color [color: ('gray', 900)] - The separator border-color between the completed steps. /// @prop {Map} disabled-indicator-background [color: ('gray', 200)] - The background color of the disabled step indicator. /// @requires {Map} $light-stepper $material-stepper: extend( $light-stepper, ( indicator-background: ( color: ( 'gray', 300, ), ), indicator-color: ( contrast-color: ( 'gray', 400, ), ), complete-indicator-background: ( color: ( 'gray', 900, ), ), complete-indicator-outline: ( color: ( 'gray', 900, ), ), complete-indicator-color: ( contrast-color: ( 'gray', 900, ), ), complete-step-separator-color: ( color: ( 'gray', 900, ), ), disabled-indicator-background: ( color: ( 'gray', 200, ), ), _meta: ( theme: 'material', variant: 'light', ), ) ); /// Generates a fluent stepper schema. /// @type {Map} /// @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 {Color} disabled-indicator-outline [transparent] - The outline color of the disabled step indicator. /// @prop {List} border-radius-indicator [(rem(2px), rem(0), rem(100px))] - The indicator border radius. /// @prop {List} border-radius-step-header [(rem(2px), rem(0), rem(100px))] - The header border radius. /// @requires {Map} $light-stepper $fluent-stepper: extend( $light-stepper, ( 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, ), ), // Disabled disabled-indicator-outline: transparent, border-radius-indicator: ( border-radius: ( rem(2px), rem(0), rem(100px), ), ), border-radius-step-header: ( border-radius: ( rem(2px), rem(0), rem(100px), ), ), _meta: ( theme: 'fluent', variant: 'light', ), ) ); /// Generates a bootstrap stepper schema. /// @type {Map} /// @prop {Map} indicator-outline [color: ('gray', 300)] - The outline color of the incomplete 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 {String} step-separator-style ['solid'] - The separator border-style of between the 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 {List} border-radius-indicator [(rem(2px), rem(0), rem(100px))] - The indicator border radius. /// @prop {List} border-radius-step-header [(rem(2px), rem(0), rem(100px))] - The header border radius. /// @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-outline: ( color: ( 'gray', 400, ), ), // Complete complete-indicator-background: ( color: ( 'gray', 400, ), ), complete-indicator-outline: ( color: ( 'gray', 400, ), ), complete-indicator-color: ( contrast-color: ( 'gray', 300, ), ), // Disabled disabled-indicator-outline: ( color: ( 'gray', 300, ), ), // Separator step-separator-style: 'solid', border-radius-indicator: ( border-radius: ( rem(2px), rem(0), rem(100px), ), ), border-radius-step-header: ( border-radius: ( rem(2px), rem(0), rem(100px), ), ), _meta: ( theme: 'bootstrap', variant: 'light', ), ) ); /// Generates an indigo stepper schema. /// @type {Map} /// @prop {Map} complete-indicator-background [color: ('gray', 600)] - 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', 900)] - The color of the completed step indicator. /// @prop {Map} step-separator-color [color: ('gray', 900, .3)] - The separator border-color of between the steps. /// @prop {Map} complete-step-separator-color [color: ('gray', 900, .3)] - The separator border-color between the completed steps. /// @prop {Map} indicator-background [color: ('gray', 900, .15)] - 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', 800)] - The text color of the incomplete step indicator. /// @prop {Map} step-hover-background [color: ('gray', 900, .05)] - The background of the step header on hover. /// @prop {Map} step-focus-background [color: ('gray', 900,. 05)] - The background of the step header on focus. /// @prop {Map} current-step-hover-background [color: ('gray', 900, .05)] - The background of the current step header on hover. /// @prop {Map} current-step-focus-background [color: ('gray', 900, .05)] - The background of the current step header on focus. /// @prop {Map} complete-step-hover-background [color: ('gray', 900, .05)] - The background of the complete step header on hover. /// @prop {Map} complete-step-focus-background [color: ('gray', 900, .05)] - The background of the complete step header on focus. /// @prop {Map} invalid-step-hover-background [color: ('gray', 900, .05)] - The background of the invalid step header on hover. /// @prop {Map} invalid-step-focus-background [color: ('gray', 900, .05)] - The background of the invalid step header on focus. /// @prop {Map} disabled-title-color [color: ('gray', 900, .2)] - The title color of the disabled step. /// @prop {Map} disabled-subtitle-color [color: ('gray', 900, .2)] - The subtitle color of the disabled step. /// @prop {Map} disabled-indicator-color [color: ('gray', 900, .2)] - The color of the disabled step indicator, title, and subtitle. /// @prop {Map} disabled-indicator-background [color: ('gray', 900, .05)] - The background color of the disabled step indicator. /// @prop {Color} disabled-indicator-outline [transparent] - The outline color of the disabled step indicator. /// @prop {()} border-radius-step-header [rem(4px)] - The header border radius. /// @prop {Color} current-indicator-outline [transparent] - The outline color of the current step indicator. /// @prop {Map} content-foreground [color: ('gray', 700)] - The foreground of the step content. /// @prop {Color} invalid-indicator-outline [transparent] - The outline color of the invalid step indicator. /// @prop {Map} invalid-title-color [color: ('gray', 900)] - The color of the invalid step title. /// @prop {Map} invalid-title-hover-color [color: ('gray', 900)] - The color of the invalid step title on hover. /// @prop {Map} invalid-title-focus-color [color: ('gray', 900)] - The color of the invalid step title on focus. /// @prop {Map} invalid-subtitle-color [color: ('gray', 700)] - The text of the invalid step subtitle. /// @prop {Map} invalid-subtitle-hover-color [color: ('gray', 700)] - The color of the invalid step subtitle on hover. /// @prop {Map} invalid-subtitle-focus-color [color: ('gray', 700)] - The color of the invalid step subtitle on focus. /// @requires $light-stepper $indigo-stepper: extend( $light-stepper, ( content-foreground: ( color: ( 'gray', 700, ), ), complete-indicator-background: ( color: ( 'gray', 600, ), ), complete-indicator-outline: transparent, complete-indicator-color: ( contrast-color: ( 'gray', 900, ), ), step-separator-color: ( color: ( 'gray', 900, 0.3, ), ), complete-step-separator-color: ( color: ( 'gray', 900, 0.3, ), ), indicator-background: ( color: ( 'gray', 900, 0.15, ), ), indicator-outline: transparent, indicator-color: ( color: ( 'gray', 800, ), ), step-hover-background: ( color: ( 'gray', 900, 0.05, ), ), step-focus-background: ( color: ( 'gray', 900, 0.05, ), ), current-step-hover-background: ( color: ( 'gray', 900, 0.05, ), ), current-step-focus-background: ( color: ( 'gray', 900, 0.05, ), ), complete-step-hover-background: ( color: ( 'gray', 900, 0.05, ), ), complete-step-focus-background: ( color: ( 'gray', 900, 0.05, ), ), invalid-step-hover-background: ( color: ( 'gray', 900, 0.05, ), ), invalid-step-focus-background: ( color: ( 'gray', 900, 0.05, ), ), disabled-title-color: ( color: ( 'gray', 900, 0.2, ), ), disabled-subtitle-color: ( color: ( 'gray', 900, 0.2, ), ), disabled-indicator-color: ( color: ( 'gray', 900, 0.2, ), ), disabled-indicator-background: ( color: ( 'gray', 900, 0.05, ), ), disabled-indicator-outline: transparent, border-radius-step-header: rem(4px), current-indicator-outline: transparent, invalid-indicator-outline: transparent, invalid-title-color: ( color: ( 'gray', 900, ), ), invalid-title-hover-color: ( color: ( 'gray', 900, ), ), invalid-title-focus-color: ( color: ( 'gray', 900, ), ), invalid-subtitle-color: ( color: ( 'gray', 700, ), ), invalid-subtitle-hover-color: ( color: ( 'gray', 700, ), ), invalid-subtitle-focus-color: ( color: ( 'gray', 700, ), ), _meta: ( theme: 'indigo', variant: 'light', ), ) );