@use '../../../../utils/map' as *; @use '../../../../typography/functions' as *; @use '../elevation/button-group' as *; //// /// @package theming /// @group schemas /// @access public //// /// Generates a light button group schema. /// @type Map /// @prop {Color} idle-shadow-color [transparent] - The outline color of button group items. /// @prop {Color} selected-shadow-color [transparent] - The outline color of selected button group items. /// @prop {Map} item-text-color [color: ('gray', 700)] - The text color for button group items. /// @prop {Map} item-background [color: ('gray', 50)] - The background color for button group items. /// @prop {Map} item-border-color [color: ('gray', 400)] - The border color between button group items. /// @prop {Map} item-hover-background [color: ('gray', 200)] - The hover background color for button group items. /// @prop {Map} item-hover-text-color [color: ('gray', 900)] - The hover text color for button group items. /// @prop {Map} item-focused-text-color [color: ('gray', 800)] - The focused text color for button group items. /// @prop {Map} item-focused-border-color [color: ('gray', 400)] - The focused border color for an item from the button group. /// @prop {Map} item-focused-hover-text-color [color: ('gray', 900)] - The focused & hover text color for button group items. /// @prop {Map} item-focused-hover-border-color [color: ('gray', 400)] - The focused & hover border color for an item from the button group. /// @prop {Map} item-focused-hover-background [color: ('gray', 200)] - The focused & hover background color for button group items. /// @prop {Map} item-selected-hover-text-color [color: ('gray', 900)] - The text color for a selected item in hover state in the button group. /// @prop {Map} item-selected-hover-icon-color [color: ('gray', 900)] - The icon color for a selected item in hover state in the button group. /// @prop {Map} item-selected-focus-background [color: ('gray', 300)] - The background color for a selected item in focus state in the button group. /// @prop {Map} item-selected-focus-hover-background [color: ('gray', 400)] - The background color for a selected item in focused & hover state in the button group. /// @prop {Map} item-selected-active-background [color: ('gray', 500)] - The active background color for a selected item in the button group. /// @prop {Map} item-active-border-color [color: ('gray', 500)] - The active border color for button group items. /// @prop {Map} item-selected-active-border-color [color: ('gray', 600)] - The active border color for a selected item in the button group. /// @prop {Map} disabled-background-color [color: ('gray', 50)] - The background color for a disabled item in the button group. /// @prop {Number} elevation [2] - The elevation level, between 0-24, to be used for the button group shadow. /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for button-group component. /// @prop {Number} default-size [2] - The default size used for the button-group component. /// @prop {Map} typography [text: (value: 'button')] - The typography styles used for the component. /// @requires $default-elevation-button-group $light-button-group: extend( $default-elevation-button-group, ( idle-shadow-color: transparent, selected-shadow-color: transparent, item-text-color: ( color: ( 'gray', 700, ), ), item-background: ( color: ( 'gray', 50, ), ), item-border-color: ( color: ( 'gray', 400, ), ), item-hover-background: ( color: ( 'gray', 200, ), ), item-hover-text-color: ( color: ( 'gray', 900, ), ), item-focused-text-color: ( color: ( 'gray', 800, ), ), item-focused-border-color: ( color: ( 'gray', 400, ), ), item-focused-hover-text-color: ( color: ( 'gray', 900, ), ), item-focused-hover-border-color: ( color: ( 'gray', 400, ), ), item-focused-hover-background: ( color: ( 'gray', 200, ), ), item-selected-hover-text-color: ( color: ( 'gray', 900, ), ), item-selected-hover-icon-color: ( color: ( 'gray', 900, ), ), item-selected-focus-background: ( color: ( 'gray', 300, ), ), item-selected-focus-hover-background: ( color: ( 'gray', 400, ), ), item-selected-active-background: ( color: ( 'gray', 500, ), ), item-active-border-color: ( color: ( 'gray', 500, ), ), item-selected-active-border-color: ( color: ( 'gray', 600, ), ), disabled-background-color: ( color: ( 'gray', 50, ), ), border-radius: ( border-radius: ( rem(4px), rem(0), rem(20px), ), ), default-size: 2, typography: ( text: ( value: 'button', ), ), _meta: ( name: 'button-group', variant: 'light', ), ) ); /// Generates a material button group schema. /// @type Map /// @prop {Map} item-icon-color [color: ('gray', 700)] - The icon color for button group items. /// @prop {Map} item-hover-text-color [color: ('gray', 800)] - The hover text color for button group items. /// @prop {Map} item-hover-icon-color [color: ('gray', 800)] - The hover icon color for button group items. /// @prop {Map} item-hover-border-color [color: ('gray', 400)] - The hover border color between button group items. /// @prop {Map} item-focused-background [color: ('gray', 200)] - The focused background color for button group items. /// @prop {Map} item-focused-hover-background [color: ('gray', 300)] - The focused & hover background color for button group items. /// @prop {Map} item-focused-hover-text-color [color: ('gray', 800)] - The focused & hover text color for button group items. /// @prop {Map} item-selected-background [color: ('gray', 200)] - The background color for a selected item in the button group. /// @prop {Map} item-selected-text-color [color: ('gray', 800)] - The text color for a selected item in the button group. /// @prop {Map} item-selected-icon-color [color: ('gray', 800)] - The icon color for a selected item in the button group. /// @prop {Map} item-selected-border-color [color: ('gray', 500)] - The border color for a selected item from the button group. /// @prop {Map} item-selected-hover-background [color: ('gray', 300)] - The background color for a selected item in hover state in the button group. /// @prop {Map} item-active-background [color: ('gray', 400)] - The active background color for button group items. /// @prop {Map} item-selected-hover-border-color [color: ('gray', 500)] - The border color for a selected item in hover state in the button group. /// @prop {Map} disabled-text-color [color: ('gray', 400)] - The text/icon color for a disabled item in the button group. /// @prop {Map} item-disabled-border [color: ('gray', 400)] - The border color for a disabled item in the button group. /// @prop {Map} disabled-selected-text-color [color: ('gray', 400)] - The disabled text color for a selected item in the button group. /// @prop {Map} disabled-selected-icon-color [color: ('gray', 400)] - The disabled icon color for a selected item in the button group. /// @prop {Map} disabled-selected-background [color: ('gray', 100)] - The disabled background color for a selected item in the button group. /// @prop {Map} disabled-selected-border-color [color: ('gray', 400)] - The disabled border color for a selected item from the button group. /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for button-group component. /// @prop {Number} default-size [3] - The default size used for the button-group component. /// @requires $light-button-group /// @requires $default-elevation-button-group $material-button-group: extend( $light-button-group, $default-elevation-button-group, ( item-icon-color: ( color: ( 'gray', 700, ), ), item-hover-text-color: ( color: ( 'gray', 800, ), ), item-hover-icon-color: ( color: ( 'gray', 800, ), ), item-hover-border-color: ( color: ( 'gray', 400, ), ), item-focused-background: ( color: ( 'gray', 200, ), ), item-focused-hover-background: ( color: ( 'gray', 300, ), ), item-focused-hover-text-color: ( color: ( 'gray', 800, ), ), item-selected-text-color: ( color: ( 'gray', 800, ), ), item-selected-icon-color: ( color: ( 'gray', 800, ), ), item-selected-background: ( color: ( 'gray', 200, ), ), item-selected-border-color: ( color: ( 'gray', 500, ), ), item-selected-hover-border-color: ( color: ( 'gray', 500, ), ), item-selected-hover-background: ( color: ( 'gray', 300, ), ), item-active-background: ( color: ( 'gray', 400, ), ), disabled-text-color: ( color: ( 'gray', 400, ), ), item-disabled-border: ( color: ( 'gray', 400, ), ), disabled-selected-text-color: ( color: ( 'gray', 400, ), ), disabled-selected-icon-color: ( color: ( 'gray', 400, ), ), disabled-selected-background: ( color: ( 'gray', 100, ), ), disabled-selected-border-color: ( color: ( 'gray', 400, ), ), default-size: 3, _meta: ( theme: 'material', ), ) ); /// Generates a fluent button group schema. /// @type Map /// @prop {Map} item-text-color [color: ('gray', 900)] - The text color for button group items. /// @prop {Map} item-icon-color [color: ('gray', 900)] - The icon color for button group items. /// @prop {Map} item-background [contrast-color: ('gray', 900)] - The background color for button group items. /// @prop {Map} item-border-color [color: ('gray', 600)] - The border color between button group items. /// @prop {Map} item-hover-icon-color [color: ('gray', 900)] - The hover icon color for button group items. /// @prop {Map} item-hover-border-color [color: ('gray', 600)] - The hover border color between button group items. /// @prop {Map} item-focused-text-color [color: ('gray', 900)] - The focused text color for button group items. /// @prop {Map} item-focused-border-color [color: ('gray', 700)] - The focused border color for an item from the button group. /// @prop {Map} item-focused-background [contrast-color: ('gray', 900)] - The focused background color for button group items. /// @prop {Map} item-focused-hover-border-color [color: ('gray', 600)] - The focused & hover border color for an item from the button group. /// @prop {Map} item-selected-background [color: ('gray', 300)] - The background color for a selected item in the button group. /// @prop {Map} item-selected-text-color [color: ('gray', 900)] - The text color for a selected item in the button group. /// @prop {Map} item-selected-icon-color [color: ('gray', 900)] - The icon color for a selected item in the button group. /// @prop {Map} item-selected-border-color [color: ('gray', 600)] - The border color for a selected item from the button group. /// @prop {Map} item-selected-hover-background [color: ('gray', 400)] - The background color for a selected item in hover state in the button group. /// @prop {Map} item-selected-hover-border-color [color: ('gray', 600)] - The border color for a selected item in hover state in the button group. /// @prop {Map} item-active-background [color: ('gray', 300)] - The active background color for button group items. /// @prop {Map} item-active-border-color [color: ('gray', 600)] - The active border color for button group items. /// @prop {Map} disabled-text-color [color: ('gray', 500)] - The text/icon color for a disabled item in the button group. /// @prop {Map} item-disabled-border [color: ('gray', 600)] - The border color for a disabled item in the button group. /// @prop {Map} disabled-selected-text-color [color: ('gray', 500)] - The disabled text color for a selected item in the button group. /// @prop {Map} disabled-selected-icon-color [color: ('gray', 500)] - The disabled icon color for a selected item in the button group. /// @prop {Map} disabled-selected-background [color: ('gray', 200)] - The disabled background color for a selected item in the button group. /// @prop {Map} disabled-selected-border-color [color: ('gray', 600)] - The disabled border color for a selected item from the button group. /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow. /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for button-group component. /// @requires $light-button-group /// @requires $fluent-elevation-button-group $fluent-button-group: extend( $light-button-group, $fluent-elevation-button-group, ( item-text-color: ( color: ( 'gray', 900, ), ), item-icon-color: ( color: ( 'gray', 900, ), ), item-background: ( contrast-color: ( 'gray', 900, ), ), item-border-color: ( color: ( 'gray', 600, ), ), item-focused-text-color: ( color: ( 'gray', 900, ), ), item-focused-border-color: ( color: ( 'gray', 700, ), ), item-focused-background: ( contrast-color: ( 'gray', 900, ), ), item-focused-hover-border-color: ( color: ( 'gray', 600, ), ), item-hover-icon-color: ( color: ( 'gray', 900, ), ), item-hover-border-color: ( color: ( 'gray', 600, ), ), item-selected-background: ( color: ( 'gray', 300, ), ), item-selected-text-color: ( color: ( 'gray', 900, ), ), item-selected-icon-color: ( color: ( 'gray', 900, ), ), item-selected-border-color: ( color: ( 'gray', 600, ), ), item-selected-hover-background: ( color: ( 'gray', 400, ), ), item-selected-hover-border-color: ( color: ( 'gray', 600, ), ), item-active-background: ( color: ( 'gray', 300, ), ), item-active-border-color: ( color: ( 'gray', 600, ), ), disabled-text-color: ( color: ( 'gray', 500, ), ), item-disabled-border: ( color: ( 'gray', 600, ), ), disabled-selected-text-color: ( color: ( 'gray', 500, ), ), disabled-selected-icon-color: ( color: ( 'gray', 500, ), ), disabled-selected-background: ( color: ( 'gray', 200, ), ), disabled-selected-border-color: ( color: ( 'gray', 600, ), ), border-radius: ( border-radius: ( rem(2px), rem(0), rem(20px), ), ), _meta: ( theme: 'fluent', ), ) ); /// Generates a bootstrap button group schema. /// @type Map /// @prop {Map} idle-shadow-color [color: ('primary', 600, .5)] - The outline color of button group items. /// @prop {Map} selected-shadow-color [color: ('primary', 600, .5)] - The outline color of selected button group items. /// @prop {Map} item-background [color: ('primary', 500)] - The background color for button group items. /// @prop {Map} item-text-color [contrast-color: ('primary', 600)] - The text color for button group items. /// @prop {Map} item-icon-color [contrast-color: ('primary', 600)] - The icon color for button group items. /// @prop {Map} item-border-color [color: ('primary', 500)] - The border color between button group items. /// @prop {Map} item-hover-background [color: ('primary', 600)] - The hover background color for button group items. /// @prop {Map} item-hover-text-color [contrast-color: ('primary', 600)] - The hover text color for button group items. /// @prop {Map} item-hover-icon-color [contrast-color: ('primary', 600)] - The hover icon color for button group items. /// @prop {Map} item-hover-border-color [color: ('primary', 600)] - The hover border color between button group items. /// @prop {Map} item-focused-text-color [contrast-color: ('primary', 600)] - The focused text color for button group items. /// @prop {Map} item-focused-background [color: ('primary', 500)] - The focused background color for button group items. /// @prop {Map} item-focused-hover-background [color: ('primary', 600)] - The focused & hover background color for button group items. /// @prop {Map} item-focused-border-color [color: ('primary', 500)] - The focused border color for an item from the button group. /// @prop {Map} item-focused-hover-text-color [contrast-color: ('primary', 600)] - The focused & hover text color for button group items. /// @prop {Map} item-focused-hover-border-color [color: ('primary', 600)] - The focused & hover border color for an item from the button group. /// @prop {Map} item-selected-background [color: ('primary', 700)] - The background color for a selected item in the button group. /// @prop {Map} item-selected-text-color [contrast-color: ('primary', 700)] - The text color for a selected item in the button group. /// @prop {Map} item-selected-icon-color [contrast-color: ('primary', 700)] - The icon color for a selected item in the button group. /// @prop {Map} item-selected-border-color [color: ('primary', 700)] - The border color for a selected item from the button group. /// @prop {Map} item-selected-hover-background [color: ('primary', 800)] - The background color for a selected item in hover or focus state in the button group. /// @prop {Map} item-selected-hover-border-color [color: ('primary', 800)] - The border color for a selected item in hover state in the button group. /// @prop {Map} item-selected-hover-text-color [contrast-color: ('primary', 700)] - The text color for a selected item in hover state in the button group. /// @prop {Map} item-selected-hover-icon-color [contrast-color: ('primary', 700)] - The icon color for a selected item in hover state in the button group. /// @prop {Map} item-selected-focus-background [color: ('primary', 700)] - The background color for a selected item in focus state in the button group. /// @prop {Map} item-selected-focus-hover-background [color: ('primary', 800)] - The background color for a selected item in focused & hover state in the button group. /// @prop {Map} item-active-background [color: ('primary', 800)] - The active background color for button group items. /// @prop {Map} item-active-border-color [color: ('primary', 800)] - The active border color for button group items. /// @prop {Map} item-selected-active-background [color: ('primary', 900)] - The active background color for a selected item in the button group. /// @prop {Map} item-selected-active-border-color [color: ('primary', 900)] - The active border color for a selected item in the button group. /// @prop {Map} disabled-background-color [color: ('primary', 50)] - The background color for a disabled item in the button group. /// @prop {Map} disabled-text-color [color: ('primary', 200)] - The text/icon color for a disabled item in the button group. /// @prop {Map} item-disabled-border [color: ('primary', 50)] - The border color for a disabled item in the button group. /// @prop {Map} disabled-selected-background [color: ('primary', 100)] - The disabled background color for a selected item in the button group. /// @prop {Map} disabled-selected-text-color [color: ('primary', 200)] - The disabled text color for a selected item in the button group. /// @prop {Map} disabled-selected-icon-color [color: ('primary', 200)] - The disabled icon color for a selected item in the button group. /// @prop {Map} disabled-selected-border-color [color: ('primary', 100)] - The disabled border color for a selected item from the button group. /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow. /// @requires $light-button-group /// @requires $bootstrap-elevation-button-group $bootstrap-button-group: extend( $light-button-group, $bootstrap-elevation-button-group, ( idle-shadow-color: ( color: ( 'primary', 600, 0.5, ), ), selected-shadow-color: ( color: ( 'primary', 600, 0.5, ), ), item-background: ( color: ( 'primary', 500, ), ), item-text-color: ( contrast-color: ( 'primary', 600, ), ), item-icon-color: ( contrast-color: ( 'primary', 600, ), ), item-border-color: ( color: ( 'primary', 500, ), ), item-hover-border-color: ( color: ( 'primary', 600, ), ), item-hover-background: ( color: ( 'primary', 600, ), ), item-hover-text-color: ( contrast-color: ( 'primary', 600, ), ), item-hover-icon-color: ( contrast-color: ( 'primary', 600, ), ), item-focused-text-color: ( contrast-color: ( 'primary', 600, ), ), item-focused-background: ( color: ( 'primary', 500, ), ), item-focused-hover-background: ( color: ( 'primary', 600, ), ), item-focused-border-color: ( color: ( 'primary', 500, ), ), item-focused-hover-text-color: ( contrast-color: ( 'primary', 600, ), ), item-focused-hover-border-color: ( color: ( 'primary', 600, ), ), item-selected-background: ( color: ( 'primary', 700, ), ), item-selected-text-color: ( contrast-color: ( 'primary', 700, ), ), item-selected-icon-color: ( contrast-color: ( 'primary', 700, ), ), item-selected-border-color: ( color: ( 'primary', 700, ), ), item-selected-hover-background: ( color: ( 'primary', 800, ), ), item-selected-hover-text-color: ( contrast-color: ( 'primary', 700, ), ), item-selected-hover-icon-color: ( contrast-color: ( 'primary', 700, ), ), item-selected-hover-border-color: ( color: ( 'primary', 800, ), ), item-selected-focus-background: ( color: ( 'primary', 700, ), ), item-selected-focus-hover-background: ( color: ( 'primary', 800, ), ), item-active-background: ( color: ( 'primary', 800, ), ), item-active-border-color: ( color: ( 'primary', 800, ), ), item-selected-active-background: ( color: ( 'primary', 900, ), ), item-selected-active-border-color: ( color: ( 'primary', 900, ), ), disabled-background-color: ( color: ( 'primary', 50, ), ), disabled-text-color: ( color: ( 'primary', 200, ), ), item-disabled-border: ( color: ( 'primary', 50, ), ), disabled-selected-background: ( color: ( 'primary', 100, ), ), disabled-selected-text-color: ( color: ( 'primary', 200, ), ), disabled-selected-icon-color: ( color: ( 'primary', 200, ), ), disabled-selected-border-color: ( color: ( 'primary', 100, ), ), _meta: ( theme: 'bootstrap', ), ) ); /// Generates an indigo light button-group schema. /// @type Map /// @prop {Map} item-icon-color [color: ('gray', 600)] - The icon color for button group items. /// @prop {Map} idle-shadow-color [color: ('gray', 900, .15)] - The outline color of button group items. /// @prop {Map} selected-shadow-color [color: ('primary', 400, .5)] - The outline color of selected button group items. /// @prop {Map} item-hover-icon-color [color: ('gray', 700)] - The hover icon color for button group items. /// @prop {Map} item-hover-border-color [color: ('gray', 500)] - The hover border color between button group items. /// @prop {Map} item-focused-background [color: ('gray', 50)] - The focused background color for button group items. /// @prop {Map} item-selected-background [color: ('primary', 500)] - The background color for a selected item in the button group. /// @prop {Map} item-selected-text-color [contrast-color: ('primary', 500)] - The text color for a selected item in the button group. /// @prop {Map} item-selected-icon-color [contrast-color: ('primary', 500, .8)] - The icon color for a selected item in the button group. /// @prop {Map} item-selected-border-color [color: ('primary', 500)] - The border color for a selected item from the button group. /// @prop {Map} item-selected-hover-background [color: ('primary', 400)] - The background color for a selected item in hover state in the button group. /// @prop {Map} item-selected-hover-border-color [color: ('primary', 400)] - The border color for a selected item in hover state in the button group. /// @prop {Map} item-selected-hover-text-color [contrast-color: ('primary', 500)] - The text color for a selected item in hover state in the button group. /// @prop {Map} item-selected-hover-icon-color [contrast-color: ('primary', 500)] - The icon color for a selected item in hover state in the button group. /// @prop {Map} item-selected-focus-background [color: ('primary', 500)] - The background color for a selected item in focus state in the button group. /// @prop {Map} item-selected-focus-hover-background [color: ('primary', 400)] - The background color for a selected item in focused & hover state in the button group. /// @prop {Map} item-active-background [color: ('gray', 200)] - The active background color for button group items. /// @prop {Map} item-selected-active-border-color [color: ('primary', 400)] - The active border color for a selected item in the button group. /// @prop {Map} item-selected-active-background [color: ('primary', 400)] - The active background color for a selected item in the button group. /// @prop {Map} disabled-background-color [contrast-color: ('gray', 900)] - The background color for a disabled item in the button group. /// @prop {Map} disabled-text-color [color: ('gray', 900, .2)] - The text/icon color for a disabled item in the button group. /// @prop {Map} item-disabled-border [color: ('gray', 300)] - The border color for a disabled item in the button group. /// @prop {Map} disabled-selected-background [color: ('primary', 400, .5)] - The disabled background color for a selected item in the button group. /// @prop {Map} disabled-selected-text-color [contrast-color: ('primary', 500, .4)] - The disabled text color for a selected item in the button group. /// @prop {Map} disabled-selected-icon-color [contrast-color: ('primary', 500, .3)] - The disabled icon color for a selected item in the button group. /// @prop {Map} disabled-selected-border-color [color: ('primary', 400, .5)] - The disabled border color for a selected item from the button group. /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow. /// @requires $light-button-group /// @requires $indigo-elevation-button-group $indigo-button-group: extend( $light-button-group, $indigo-elevation-button-group, ( item-icon-color: ( color: ( 'gray', 600, ), ), idle-shadow-color: ( color: ( 'gray', 900, 0.15, ), ), selected-shadow-color: ( color: ( 'primary', 400, 0.5, ), ), item-hover-icon-color: ( color: ( 'gray', 700, ), ), item-hover-border-color: ( color: ( 'gray', 500, ), ), item-focused-background: ( color: ( 'gray', 50, ), ), item-focused-hover-border-color: ( color: ( 'gray', 500, ), ), item-selected-background: ( color: ( 'primary', 500, ), ), item-selected-text-color: ( contrast-color: ( 'primary', 500, ), ), item-selected-icon-color: ( contrast-color: ( 'primary', 500, 0.8, ), ), item-selected-border-color: ( color: ( 'primary', 500, ), ), item-selected-hover-background: ( color: ( 'primary', 400, ), ), item-selected-hover-border-color: ( color: ( 'primary', 400, ), ), item-selected-hover-text-color: ( contrast-color: ( 'primary', 500, ), ), item-selected-hover-icon-color: ( contrast-color: ( 'primary', 500, ), ), item-selected-focus-background: ( color: ( 'primary', 500, ), ), item-selected-focus-hover-background: ( color: ( 'primary', 400, ), ), item-active-background: ( color: ( 'gray', 200, ), ), item-selected-active-border-color: ( color: ( 'primary', 400, ), ), item-selected-active-background: ( color: ( 'primary', 400, ), ), disabled-background-color: ( contrast-color: ( 'gray', 900, ), ), disabled-text-color: ( color: ( 'gray', 900, 0.2, ), ), item-disabled-border: ( color: ( 'gray', 300, ), ), disabled-selected-background: ( color: ( 'primary', 400, 0.5, ), ), disabled-selected-text-color: ( contrast-color: ( 'primary', 500, 0.4, ), ), disabled-selected-icon-color: ( contrast-color: ( 'primary', 500, 0.3, ), ), disabled-selected-border-color: ( color: ( 'primary', 400, 0.5, ), ), _meta: ( theme: 'indigo', ), ) );