@use '../../../../utils/map' as *; @use '../../../../typography/functions' as *; @use '../elevation/input-group' as *; //// /// @package theming /// @group schemas /// @access public //// // stylelint-disable max-line-length /// Generates a base light input-group schema. /// @type {Map} /// @prop {Map} input-prefix-color [color: ('gray', 700)] - The text color of an input prefix of type line, box and border. /// @prop {Color} input-prefix-background [transparent] - The background color of an input prefix of type line, box and border. /// @prop {Map} input-suffix-color [color: ('gray', 700)] - The text color of an input suffix of type line, box and border. /// @prop {Color} input-suffix-background [transparent] - The background color of an input suffix of type line, box and border. /// @prop {Map} idle-text-color [color: ('gray', 700)] - The input text color in the idle state. /// @prop {Map} filled-text-color [color: ('gray', 900)] - The input text color in the filled state. /// @prop {Map} filled-text-hover-color [color: ('gray', 900)] - The input text color in the filled state on hover. /// @prop {Map} focused-text-color [color: ('gray', 900)] - The input text color in the focused state. /// @prop {Map} disabled-text-color [color: ('gray', 500)] - The input text color in the disabled state. /// @prop {Map} helper-text-color [color: ('gray', 700)] - The helper text color. /// @prop {Map} idle-secondary-color [color: ('gray', 700)] - The label color in the idle state. /// @prop {Map} filled-secondary-color [color: ('gray', 600)] - The label color in the filled state. /// @prop {Map} focused-secondary-color [color: ('primary', 500)] - The label color in the focused state. /// @prop {Map} idle-bottom-line-color [color: ('gray', 500)] - The bottom line and border colors in the idle state. /// @prop {Map} hover-bottom-line-color [color: ('gray', 900)] - The bottom line and border colors in the hover state. /// @prop {Map} focused-bottom-line-color [color: ('primary', 500)] - The bottom line and border colors in the focused state. /// @prop {Map} interim-bottom-line-color [color: ('primary', 500, .12)] - The bottom line and border colors during the to-focused transition. /// @prop {Map} disabled-bottom-line-color [color: ('gray', 500)] - The bottom line and border colors in the disabled state. /// @prop {Map} border-color [color: ('gray', 400)] - The border color for input groups of type border and fluent. /// @prop {Map} hover-border-color [color: ('gray', 900)] - The hover input border for input groups of type border and fluent. /// @prop {Map} focused-border-color [color: ('primary', 500)] - The focused input border color for input groups of type border and fluent. /// @prop {Map} disabled-border-color [color: ('gray', 300)] - The disabled border color for input groups of type border and fluent. /// @prop {Map} box-background [color: ('gray', 200)] - The background color of an input group of type box. /// @prop {Map} box-background-hover [color: ('gray', 200)] - The background color of an input group of type box on hover. /// @prop {Map} box-background-focus [color: ('gray', 300)] - The background color of an input group of type box on focus. /// @prop {Map} box-disabled-background [color: ('gray', 100)] - The background color of an input group of type box in the disabled state. /// @prop {Color} border-background [transparent] - The background color of an input group of type border. /// @prop {Color} border-disabled-background [transparent] - The background color of an input group of type border in the disabled state. /// @prop {Color} search-background [transparent] - The background color of an input group of type search. /// @prop {Map} search-disabled-background [color: ('gray', 100)] - The background color of an input group of type search in the disabled state. /// @prop {Map} success-secondary-color [color: ('success')] - The success color used in the valid state. /// @prop {Map} warning-secondary-color [color: ('warn')] - The warning color used in the warning state. /// @prop {Map} error-secondary-color [color: ('error')] - The error color used in the error state. /// @prop {Map} success-shadow-color [color: ('success', 500, .38)] - The shadow/border color for success state for bootstrap input group. /// @prop {Map} error-shadow-color [color: ('error', 500, .38)] - The shadow/border color for error state for bootstrap input group. /// @prop {Map} placeholder-color [color: ('gray', 700)] - The placeholder color of an input group. /// @prop {Map} hover-placeholder-color [color: ('gray', 700)] - The placeholder color of an input group on hover. /// @prop {Map} disabled-placeholder-color [color: ('gray', 500)] - The disabled placeholder color of an input group. /// @prop {List} box-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for box input. /// @prop {List} border-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for border input. /// @prop {List} search-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for search input. /// @prop {Map} input-prefix-color--filled [color: ('gray', 900)] - The input prefix color in the filled state. /// @prop {Color} input-prefix-background--filled [inherit] - The background color of an input prefix in the filled state. /// @prop {Map} input-prefix-color--focused [color: ('gray', 900)] - The input prefix color in the focused state. /// @prop {Color} input-prefix-background--focused [inherit] - The background color of an input prefix in the focused state. /// @prop {Map} input-suffix-color--filled [color: ('gray', 900)] - The input suffix color in the filled state. /// @prop {Color} input-suffix-background-filled [inherit] - The background color of an input suffix in the filled state. /// @prop {Map} input-suffix-color--focused [color: ('gray', 900)] - The input suffix color in the focused state. /// @prop {Color} input-suffix-background--focused [inherit] - The background color of an input suffix in the focused state. /// @prop {List} size [(rem(40px), rem(48px), rem(56px))] - The size used for the input group. /// @prop {Number} default-size [2] - The default size used for the input group component. /// @prop {Map} typography [ /// helper-text: (value: 'caption'), /// input-text: (value: 'body-2') /// ] - The typography styles used for the component. $light-input-group: ( helper-text-color: ( color: ( 'gray', 700, ), ), input-prefix-background: transparent, input-prefix-color: ( color: ( 'gray', 700, ), ), input-prefix-background--filled: inherit, input-prefix-color--filled: ( color: ( 'gray', 900, ), ), input-prefix-background--focused: inherit, input-prefix-color--focused: ( color: ( 'gray', 900, ), ), input-suffix-background: transparent, input-suffix-color: ( color: ( 'gray', 700, ), ), input-suffix-background--filled: inherit, input-suffix-color--filled: ( color: ( 'gray', 900, ), ), input-suffix-background--focused: inherit, input-suffix-color--focused: ( color: ( 'gray', 900, ), ), // Text colors idle-text-color: ( color: ( 'gray', 700, ), ), filled-text-color: ( color: ( 'gray', 900, ), ), filled-text-hover-color: ( color: ( 'gray', 900, ), ), focused-text-color: ( color: ( 'gray', 900, ), ), disabled-text-color: ( color: ( 'gray', 500, ), ), // State colors idle-secondary-color: ( color: ( 'gray', 700, ), ), filled-secondary-color: ( color: ( 'gray', 600, ), ), focused-secondary-color: ( color: ( 'primary', 500, ), ), idle-bottom-line-color: ( color: ( 'gray', 500, ), ), hover-bottom-line-color: ( color: ( 'gray', 800, ), ), focused-bottom-line-color: ( color: ( 'primary', 500, ), ), interim-bottom-line-color: ( color: ( 'primary', 500, 0.12, ), ), disabled-bottom-line-color: ( color: ( 'gray', 500, ), ), disabled-border-color: ( color: ( 'gray', 300, ), ), border-color: ( color: ( 'gray', 400, ), ), hover-border-color: ( color: ( 'gray', 900, ), ), focused-border-color: ( color: ( 'primary', 500, ), ), border-background: transparent, border-disabled-background: transparent, search-background: transparent, search-disabled-background: ( color: ( 'gray', 100, ), ), success-secondary-color: ( color: ( 'success', ), ), warning-secondary-color: ( color: ( 'warn', ), ), error-secondary-color: ( color: ( 'error', ), ), placeholder-color: ( color: ( 'gray', 700, ), ), hover-placeholder-color: ( color: ( 'gray', 700, ), ), disabled-placeholder-color: ( color: ( 'gray', 500, ), ), box-background: ( color: ( 'gray', 200, ), ), box-background-hover: ( color: ( 'gray', 200, ), ), box-background-focus: ( color: ( 'gray', 300, ), ), box-disabled-background: ( color: ( 'gray', 100, ), ), box-border-radius: ( border-radius: ( rem(4px), rem(0), rem(20px), ), ), border-border-radius: ( border-radius: ( rem(4px), rem(0), rem(20px), ), ), search-border-radius: ( border-radius: ( rem(4px), rem(0), rem(20px), ), ), success-shadow-color: ( color: ( 'success', 500, 0.38, ), ), error-shadow-color: ( color: ( 'error', 500, 0.38, ), ), size: ( sizable: ( rem(40px), rem(48px), rem(56px), ), ), default-size: 2, typography: ( helper-text: ( value: 'caption', ), input-text: ( value: 'body-2', ), ), ); /// Generates a material input-group schema. /// @type {Map} /// @prop {Number} search-resting-elevation [1] - The elevation level, between 0-24, to be used for the resting state of the search input. /// @prop {Number} search-hover-elevation [2] - The elevation level, between 0-24, to be used for the hover state of the search input. /// @prop {Number} search-disabled-elevation [1] - The elevation level, between 0-24, to be used for the disabled state of the search input. /// @prop {Map} search-background [color: 'surface'] - The background color of an input group of type search. /// @prop {Map} search-disabled-background [color: 'surface'] - The background color of an input group of type search in the disabled state. /// @prop {Map} border-color [color: ('gray', 500)] - The border color for input groups of type border and fluent. /// @prop {Map} hover-border-color [color: ('gray', 800)] - The hover input border for input groups of type border and fluent. /// @prop {Map} disabled-border-color [color: ('gray', 500)] - The disabled border color for input groups of type border and fluent. /// @prop {Map} typography [ /// helper-text: (value: 'caption'), /// input-text: (value: 'subtitle-1') /// ] - The typography styles used for the component. /// @requires {Map} $light-input-group /// @requires {Map} $default-elevation-input-group $material-input-group: extend( $light-input-group, $default-elevation-input-group, ( search-background: ( color: 'surface', ), search-disabled-background: ( color: 'surface', ), border-color: ( color: ( 'gray', 500, ), ), hover-border-color: ( color: ( 'gray', 800, ), ), disabled-border-color: ( color: ( 'gray', 500, ), ), typography: ( helper-text: ( value: 'caption', ), input-text: ( value: 'subtitle-1', ), ), _meta: ( theme: 'material', variant: 'light', ), ) ); /// Generates a fluent input-group schema. /// @type {Map} /// @prop {Map} idle-secondary-color [color: ('gray', 900)] - The label color in the idle state. /// @prop {Map} idle-text-color [color: ('gray', 900)] - The input text color in the idle state. /// @prop {Map} border-color [color: ('gray', 500)] - The border color for input groups of type border and fluent. /// @prop {Map} hover-border-color [color: ('gray', 700)] - The hover input border for input groups of type border and fluent. /// @prop {Map} disabled-border-color [color: ('gray', 100)] - The disabled border color for input groups of type border and fluent. /// @prop {Map} border-disabled-background [color: ('gray', 100)] - The background color of an input group of type border in the disabled state. /// @prop {Number} search-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state of the search input. /// @prop {Number} search-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state of the search input. /// @prop {Number} search-disabled-elevation [0] - The elevation level, between 0-24, to be used for the disabled state of the search input. /// @prop {List} box-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for box input. /// @prop {List} border-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for border input. /// @prop {List} search-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for search input. /// @prop {Map} input-prefix-color--filled [color: ('gray', 700)] - The input prefix color in the filled state. /// @prop {Map} input-prefix-color--focused [color: ('gray', 700)] - The input prefix color in the focused state. /// @prop {Map} input-prefix-background [color: ('gray', 100)] - The background color of an input prefix of type line, box, border and fluent. /// @prop {Map} input-prefix-background--filled [color: ('gray', 100)] - The background color of an input prefix in the filled state. /// @prop {Map} input-prefix-background--focused [color: ('gray', 100)] - The background color of an input prefix in the focused state. /// @prop {Map} input-suffix-color--filled [color: ('gray', 700)] - The input suffix color in the filled state. /// @prop {Map} input-suffix-color--focused [color: ('gray', 700)] - The input suffix color in the focused state. /// @prop {Map} input-suffix-background [color: ('gray', 100)] - The background color of an input suffix of type line, box and border. /// @prop {Map} input-suffix-background-filled [color: ('gray', 100)] - The background color of an input suffix in the filled state. /// @prop {Map} input-suffix-background--focused [color: ('gray', 100)] - The background color of an input suffix in the focused state. /// @prop {List} size [(rem(32px), rem(40px), rem(48px))] - The size used for the input group. /// @requires {Map} $light-input-group /// @requires {Map} $fluent-elevation-input-group $fluent-input-group: extend( $light-input-group, $fluent-elevation-input-group, ( idle-secondary-color: ( color: ( 'gray', 900, ), ), idle-text-color: ( color: ( 'gray', 900, ), ), border-color: ( color: ( 'gray', 500, ), ), hover-border-color: ( color: ( 'gray', 700, ), ), disabled-border-color: ( color: ( 'gray', 100, ), ), border-disabled-background: ( color: ( 'gray', 100, ), ), input-prefix-color--filled: ( color: ( 'gray', 700, ), ), input-prefix-color--focused: ( color: ( 'gray', 700, ), ), input-prefix-background: ( color: ( 'gray', 100, ), ), input-prefix-background--filled: ( color: ( 'gray', 100, ), ), input-prefix-background--focused: ( color: ( 'gray', 100, ), ), input-suffix-color--filled: ( color: ( 'gray', 700, ), ), input-suffix-color--focused: ( color: ( 'gray', 700, ), ), input-suffix-background: ( color: ( 'gray', 100, ), ), input-suffix-background--filled: ( color: ( 'gray', 100, ), ), input-suffix-background--focused: ( color: ( 'gray', 100, ), ), box-border-radius: ( border-radius: ( rem(2px), rem(0), rem(20px), ), ), border-border-radius: ( border-radius: ( rem(2px), rem(0), rem(20px), ), ), search-border-radius: ( border-radius: ( rem(2px), rem(0), rem(20px), ), ), size: ( sizable: ( rem(32px), rem(40px), rem(48px), ), ), _meta: ( theme: 'fluent', variant: 'light', ), ) ); /// Generates a bootstrap input-group schema. /// @type {Map} /// @prop {Number} search-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state of the search input. /// @prop {Number} search-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state of the search input. /// @prop {Number} search-disabled-elevation [0] - The elevation level, between 0-24, to be used for the disabled state of the search input. /// @prop {Map} border-disabled-background [color: ('gray', 100)] - The background color of an input group of type border in the disabled state. /// @prop {Map} focused-secondary-color [color: ('primary', 500, .38)] - The label color in the focused state. /// @prop {Map} disabled-text-color [color: ('gray', 400)] - The input text color in the disabled state. /// @prop {Map} interim-bottom-line-color [color: ('primary', 500)] - The bottom line and border colors during the to-focused transition. /// @prop {Map} disabled-placeholder-color [color: ('gray', 400)] - The disabled placeholder color of an input group. /// @prop {Map} input-prefix-color [color: ('gray', 800)] - The input prefix color in the idle state. /// @prop {Map} input-prefix-color--filled [color: ('gray', 800)] - The input prefix color in the filled state. /// @prop {Map} input-prefix-color--focused [color: ('gray', 800)] - The input prefix color in the focused state. /// @prop {Map} input-prefix-background [color: ('gray', 300)] - The background color of an input prefix in the idle state. /// @prop {Map} input-prefix-background--filled [color: ('gray', 300)] - The background color of an input prefix in the filled state. /// @prop {Map} input-prefix-background--focused [color: ('gray', 300)] - The background color of an input prefix in the focused state. /// @prop {Map} input-suffix-color [color: ('gray', 800)] - The input suffix color in the idle state /// @prop {Map} input-suffix-color--filled [color: ('gray', 800)] - The input suffix color in the filled state. /// @prop {Map} input-suffix-color--focused [color: ('gray', 800)] - The input suffix color in the focused state. /// @prop {Map} input-suffix-background [color: ('gray', 300)] - The background color of an input suffix in the idle state. /// @prop {Map} input-suffix-background-filled [color: ('gray', 300)] - The background color of an input suffix in the filled state. /// @prop {Map} input-suffix-background--focused [color: ('gray', 300)] - The background color of an input suffix in the focused state. /// @prop {List} size [(rem(31px), rem(38px), rem(48px))] - The size used for the input group. /// @prop {Map} typography [ /// helper-text: (value: 'body-2'), /// input-text: (value: 'body-1') /// ] - The typography styles used for the component. /// @requires {Map} $light-input-group /// @requires {Map} $bootstrap-elevation-input-group $bootstrap-input-group: extend( $light-input-group, $bootstrap-elevation-input-group, ( interim-bottom-line-color: ( color: ( 'primary', 500, ), ), border-disabled-background: ( color: ( 'gray', 100, ), ), focused-secondary-color: ( color: ( 'primary', 500, 0.38, ), ), input-prefix-color: ( color: ( 'gray', 800, ), ), input-prefix-background: ( color: ( 'gray', 300, ), ), input-prefix-background--filled: ( color: ( 'gray', 300, ), ), input-prefix-background--focused: ( color: ( 'gray', 300, ), ), input-suffix-color: ( color: ( 'gray', 800, ), ), input-suffix-background: ( color: ( 'gray', 300, ), ), input-suffix-background--filled: ( color: ( 'gray', 300, ), ), input-suffix-background--focused: ( color: ( 'gray', 300, ), ), disabled-text-color: ( color: ( 'gray', 400, ), ), disabled-placeholder-color: ( color: ( 'gray', 400, ), ), size: ( sizable: ( rem(31px), rem(38px), rem(48px), ), ), typography: ( helper-text: ( value: 'body-2', ), input-text: ( value: 'body-1', ), ), _meta: ( theme: 'bootstrap', variant: 'light', ), ) ); /// Generates an indigo input-group schema. /// @type {Map} /// @prop {Map} input-prefix-color [color: ('gray', 600)] - The text color of an input prefix of type line, box and border. /// @prop {Map} input-suffix-color [color: ('gray', 600)] - The text color of an input suffix of type line, box and border. /// @prop {Map} input-prefix-color--filled [color: ('gray', 600)] - The input prefix color in the filled state. /// @prop {Map} input-suffix-color--filled [color: ('gray', 600)] - The input suffix color in the filled state. /// @prop {Map} input-prefix-color--focused [color: ('gray', 600)] - The input prefix color in the focused state. /// @prop {Map} input-suffix-color--focused [color: ('gray', 600)] - The input suffix color in the focused state. /// @prop {Map} hover-border-color [color: ('gray', 600)] - The hover input border color for input groups of type border. /// @prop {Map} focused-border-color [color: ('primary', 400)] - The focused input border color for input groups of type border. /// @prop {Map} idle-bottom-line-color [color: ('gray', 400)] - The bottom line and border colors in the idle state. /// @prop {Map} hover-bottom-line-color [color: ('gray', 600)] - The bottom line and border colors in the hover state. /// @prop {Map} focused-bottom-line-color [color: ('primary', 400)] - The bottom line and border colors in the focused state. /// @prop {Map} disabled-bottom-line-color [color: ('gray', 900, .05)] - The bottom line and border colors in the disabled state. /// @prop {Color} box-background [transparent] - The background color of an input group of type box. /// @prop {Color} box-disabled-background [transparent] - The background color of an input group in the disabled state. /// @prop {Color} search-disabled-background [transparent] - The background color of an input group of type search in the disabled state. /// @prop {Map} box-background-hover [color: ('gray', 900, .05)] - The background color of an input group of type box on hover. /// @prop {Map} idle-text-color [color: ('gray', 800)] - The input text color in the idle state. /// @prop {Map} filled-text-color [color: ('gray', 800)] - The input text color in the filled state. /// @prop {Map} disabled-text-color [color: ('gray', 900, .2)] - The input text color in the disabled state. /// @prop {Map} idle-secondary-color [color: ('gray', 600)] - The label color in the idle state. /// @prop {Map} focused-secondary-color [color: ('gray', 600)] - The label color in the focused state. /// @prop {Map} placeholder-color [color: ('gray', 600)] - The placeholder color of an input group. /// @prop {Map} disabled-placeholder-color [color: ('gray', 900, .2)] - The disabled placeholder color of an input group. /// @prop {Number} search-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state of the search input. /// @prop {Number} search-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state of the search input. /// @prop {Number} search-disabled-elevation [0] - The elevation level, between 0-24, to be used for the disabled state of the search input. /// @prop {List} box-border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for box input. /// @prop {List} border-border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for border input. /// @prop {List} search-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for search input. /// @prop {List} size [(rem(24px), rem(28px), rem(32px))] - The size used for the input group. /// @requires {Map} $light-input-group /// @requires {Map} $indigo-elevation-input-group $indigo-input-group: extend( $light-input-group, $indigo-elevation-input-group, ( input-prefix-color: ( color: ( 'gray', 600, ), ), input-suffix-color: ( color: ( 'gray', 600, ), ), input-prefix-color--filled: ( color: ( 'gray', 600, ), ), input-suffix-color--filled: ( color: ( 'gray', 600, ), ), input-prefix-color--focused: ( color: ( 'gray', 600, ), ), input-suffix-color--focused: ( color: ( 'gray', 600, ), ), hover-border-color: ( color: ( 'gray', 600, ), ), focused-border-color: ( color: ( 'primary', 400, ), ), idle-bottom-line-color: ( color: ( 'gray', 400, ), ), hover-bottom-line-color: ( color: ( 'gray', 600, ), ), focused-bottom-line-color: ( color: ( 'primary', 400, ), ), disabled-bottom-line-color: ( color: ( 'gray', 900, 0.05, ), ), box-background: transparent, box-disabled-background: transparent, search-disabled-background: transparent, box-background-hover: ( color: ( 'gray', 900, 0.05, ), ), idle-text-color: ( color: ( 'gray', 800, ), ), filled-text-color: ( color: ( 'gray', 800, ), ), disabled-text-color: ( color: ( 'gray', 900, 0.2, ), ), idle-secondary-color: ( color: ( 'gray', 600, ), ), focused-secondary-color: ( color: ( 'gray', 600, ), ), placeholder-color: ( color: ( 'gray', 600, ), ), disabled-placeholder-color: ( color: ( 'gray', 900, 0.2, ), ), box-border-radius: ( border-radius: ( rem(0), rem(0), rem(20px), ), ), border-border-radius: ( border-radius: ( rem(0), rem(0), rem(20px), ), ), search-border-radius: ( border-radius: ( rem(2px), rem(0), rem(20px), ), ), size: ( sizable: ( rem(24px), rem(28px), rem(32px), ), ), _meta: ( theme: 'indigo', variant: 'light', ), ) );