@use '../../../../utils/map' as *; @use '../../../../typography/functions' as *; @use '../elevation/grid' as *; //// /// @package theming /// @group schemas /// @access public //// /// Generates a light grid schema. /// @type Map /// @prop {Color} grid-border-color [transparent] - The grid border color. /// @prop {Map} header-background [color: ('gray', 100)] - The table header background color. /// @prop {Map} sorted-header-icon-color [color: ('secondary', 500)] - The sorted table header icon color. /// @prop {Map} sortable-header-icon-hover-color [color: ('secondary', 500)] - The icon color on hover in grid header when the column is sortable. /// @prop {Number} header-border-width [1px] - The border width used for header borders. /// @prop {String} header-border-style [solid] - The border style used for header borders. /// @prop {Map} header-border-color [color: ('gray', 400, .38)] - The color used for header borders. /// @prop {Map} ghost-header-text-color [color: ('gray', 700)] - The dragged header text color. /// @prop {Map} ghost-header-icon-color [color: ('gray', 600)] - The dragged header icon color. /// @prop {Map} ghost-header-background [color: ('gray', 50)] - The dragged header background color. /// @prop {Map} content-background [color: ('gray', 50)] - The table body background color. /// @prop {Map} content-text-color [color: ('gray', 800)] - The table body text color. /// @prop {Map} row-odd-background [color: ('gray', 50)] - The background color of odd rows. /// @prop {Map} body-column-border-color-odd [color: ('gray', 50)] - The border color used for the body columns in odd rows. /// @prop {Map} row-even-background [color: ('gray', 50)] - The background color of even rows. /// @prop {Map} body-column-border-color-even [color: ('gray', 50)] - The border color used for the body columns in even rows. /// @prop {Color} row-odd-text-color [inherit] - The text color of odd rows. /// @prop {Color} row-even-text-color [inherit] - The text color of even rows. /// @prop {Map} tree-selected-filtered-row-text-color [color: ('primary', 400)] - The selected filtered row text color of the tree. /// @prop {Map} row-selected-text-color [contrast-color: ('secondary', 50)] - The selected row text color. /// @prop {Map} row-hover-background [color: ('gray', 200)] - The hover row background color. /// @prop {Map} body-column-hover-border-color [color: ('gray', 200)] - The border color used for the body columns. /// @prop {Map} row-hover-text-color [contrast-color: ('gray', 200)] - The hover row text color. /// @prop {Map} row-border-color [color: ('gray', 300, .38)] - The row bottom border color. /// @prop {Map} row-highlight [color: ('secondary', 500)] - The grid row highlight color. /// @prop {Number} pinned-border-width [.125rem] - The border width of the pinned border. /// @prop {String} pinned-border-style [solid] - The CSS border style of the pinned border. /// @prop {Map} pinned-border-color [color: ('gray', 400)] - The color of the pinned border. /// @prop {Map} cell-active-border-color [color: ('primary', 500)] - The active(focused) cell border color. /// @prop {Map} cell-selected-background [color: ('gray', 200)] - The selected cell background color. /// @prop {Map} cell-selected-text-color [contrast-color: ('gray', 200)] - The selected cell text color. /// @prop {Map} cell-editing-background [color: ('gray', 50)] - The editing background color of a cell. /// @prop {Map} cell-editing-foreground [color: ('gray', 900)] - The cell text color in edit mode /// @prop {Map} cell-editing-focus-foreground [color: ('gray', 900)] - The cell text color in edit mode on focus. /// @prop {Map} edit-mode-color [color: ('secondary', 500)] - The color applied around the row/cell when in editing mode. /// @prop {Map} edited-row-indicator [color: ('gray', 400)] - The indicator's color of edited row. /// @prop {String} cell-new-color [inherit] - The text color of a new, unedited cell. Used when adding new row in a grid. /// @prop {Map} cell-edited-value-color [color: ('gray', 600)] - The color of cell edited value. /// @prop {Map} cell-disabled-color [color: ('gray', 500)] - The text color of a disabled cell. /// @prop {Map} resize-line-color [color: ('secondary', 500)] - The table header resize line color. /// @prop {Map} drop-indicator-color [color: ('secondary', 500)] - The color of the drop indicator. /// @prop {Map} grouparea-background [color: ('gray', 100)] - The grid group area background color. /// @prop {Map} grouparea-color [color: ('gray', 600)] - The grid group area color. /// @prop {Map} group-row-background [color: ('gray', 100)] - The grid group row background color. /// @prop {Map} group-row-selected-background [color: ('gray', 200)] - The drop area background on drop color. /// @prop {Map} active-expand-icon-color [color: ('gray', 500)] - The drop area background on drop color. /// @prop {Map} active-expand-icon-hover-color [color: ('primary', 500)] - The drop area background on drop color. /// @prop {Map} group-label-column-name-text [color: ('primary', 500)] - The grid group row column name text color. /// @prop {Map} group-label-icon [color: ('primary', 500)] - The grid group row icon color. /// @prop {Map} group-label-text [color: ('gray', 800)] - The grid group row text color. /// @prop {Map} expand-all-icon-color [color: ('gray', 600)] - The grid header expand all group rows icon color. /// @prop {Map} expand-all-icon-hover-color [color: ('gray', 800)] - The grid header expand all group rows icon hover color. /// @prop {Map} expand-icon-color [color: ('gray', 600)] - The grid row expand icon color. /// @prop {Map} expand-icon-hover-color [color: ('primary', 500)] - The grid row expand icon hover color. /// @prop {Map} group-count-background [color: ('gray', 200)] - The grid group row cont badge background color. /// @prop {Map} group-count-text-color [color: ('gray', 600)] - The grid group row cont badge text color. /// @prop {Map} drop-area-text-color [color: ('gray', 700)] - The drop area text color. /// @prop {Map} drop-area-icon-color [color: ('gray', 500)] - The drop area icon color. /// @prop {Map} drop-area-background [color: ('gray', 200)] - The drop area background color. /// @prop {Map} drop-area-on-drop-background [color: ('gray', 200)] - The drop area background on drop color. /// @prop {Map} tree-filtered-text-color [color: ('gray', 500)] - grouping row background color on focus. /// @prop {Map} filtering-header-background [color: ('gray', 50)] - The background color of the filtered column header. /// @prop {Map} filtering-header-text-color [color: ('gray', 800)] - The text color of the filtered column header. /// @prop {Map} filtering-row-background [color: 'gray', 50)] - The background color of the filtering row. /// @prop {Map} filtering-row-text-color [color: ('gray', 800)] - The text color of the filtering row. /// @prop {Map} filtering-dialog-background [color: ('surface', 500)] - The background color of the advanced filtering dialog. /// @prop {Map} excel-filtering-header-foreground [color: ('gray', 700)] - The text color of the header in the excel style filtering. /// @prop {Map} excel-filtering-subheader-foreground [color: ('gray', 700)] - The text color of the sorting and moving headers in the excel style filtering. /// @prop {Map} excel-filtering-actions-foreground [color: ('gray', 700)] - The text color of the excel style filtering options. /// @prop {Map} excel-filtering-actions-icon-color [color: ('gray', 700)] - The icon color of the excel style filtering options. /// @prop {Map} excel-filtering-actions-hover-foreground [color: ('gray', 700)] - The text color of the excel style filtering options in hover/focus state. /// @prop {Map} excel-filtering-actions-hover-icon-color [color: ('gray', 700)] - The icon color of the excel style filtering options in hover/focus state. /// @prop {Map} excel-filtering-actions-selected-icon-color [color: ('secondary', 500)] - The icon color of the excel style filtering options in active state. /// @prop {Map} excel-filtering-actions-hover-background [color: ('gray', 100)] - The background color of the excel style filtering options in hover/focus state. /// @prop {Map} excel-filtering-actions-disabled-foreground [color: ('gray', 400)] - The text color of the excel style filtering options in disabled state. /// @prop {Map} excel-filtering-border-color [color: ('gray', 300)] - The border color used in the excel style filter. /// @prop {Map} row-drag-color [color: ('gray', 800)] - The color of the drag handle. /// @prop {Number} grid-elevation [2] - The elevation level, between 0-24, to be used for the grid. /// @prop {Number} drag-elevation [5] - The elevation level, between 0-24, to be used for movable elements (ex. column header). /// @prop {List} drop-area-border-radius [(rem(16px), rem(0), rem(16px))] - The border radius used for drop-area. /// @prop {List} header-size [(rem(32px), rem(40px), rem(50px))] - The size used for the grid header. /// @prop {List} drop-area-size [(rem(24px), rem(24px), rem(32px))] - The size used for the grid drop area. /// @prop {List} group-area-size [(rem(41), rem(49px), rem(57px))] - The size used for the grid group area. /// @prop {Color} row-ghost-background [color: ('gray', 50)] - The background color of the dragged row. /// @prop {Color} row-ghost-border-color [color: ('gray', 500)] - The border color of the dragged row. /// @prop {Color} summaries-patch-background [color: ('gray', 300)] - The leading summaries patch backround. Used in hierarchical grids. /// @prop {String} active-state-border-style ['solid'] - The border style used for row active state and cell active state. /// @prop {Map} typography [header: (comfortable: (value: 'overline'), compact: (value: 'subtitle-1'))] - The typography styles used for the component. /// @requires $default-elevation-grid $light-grid: extend( $default-elevation-grid, ( grouparea-color: ( color: ( 'gray', 600, ), ), grouparea-background: ( color: ( 'gray', 100, ), ), drop-area-text-color: ( color: ( 'gray', 700, ), ), drop-area-icon-color: ( color: ( 'gray', 500, ), ), drop-area-background: ( color: ( 'gray', 200, ), ), drop-area-on-drop-background: ( color: ( 'gray', 200, ), ), header-background: ( color: ( 'gray', 100, ), ), sortable-header-icon-hover-color: ( color: ( 'secondary', 500, ), ), sorted-header-icon-color: ( color: ( 'secondary', 500, ), ), header-border-width: 1px, header-border-style: solid, header-border-color: ( color: ( 'gray', 400, 0.38, ), ), ghost-header-background: ( color: ( 'gray', 50, ), ), ghost-header-text-color: ( color: ( 'gray', 700, ), ), ghost-header-icon-color: ( color: ( 'gray', 600, ), ), excel-filtering-header-foreground: ( color: ( 'gray', 700, ), ), excel-filtering-subheader-foreground: ( color: ( 'gray', 700, ), ), excel-filtering-actions-foreground: ( color: ( 'gray', 700, ), ), excel-filtering-actions-icon-color: ( color: ( 'gray', 700, ), ), excel-filtering-actions-hover-foreground: ( color: ( 'gray', 700, ), ), excel-filtering-actions-hover-icon-color: ( color: ( 'gray', 700, ), ), excel-filtering-actions-selected-icon-color: ( color: ( 'secondary', 500, ), ), excel-filtering-actions-hover-background: ( color: ( 'gray', 100, ), ), excel-filtering-actions-disabled-foreground: ( color: ( 'gray', 400, ), ), excel-filtering-border-color: ( color: ( 'gray', 300, ), ), grid-border-color: transparent, content-background: ( color: ( 'gray', 50, ), ), content-text-color: ( color: ( 'gray', 800, ), ), row-odd-background: ( color: ( 'gray', 50, ), ), row-even-background: ( color: ( 'gray', 50, ), ), body-column-border-color-odd: ( color: ( 'gray', 50, ), ), body-column-border-color-even: ( color: ( 'gray', 50, ), ), row-odd-text-color: inherit, row-even-text-color: inherit, tree-selected-filtered-row-text-color: ( color: ( 'primary', 400, ), ), row-selected-text-color: ( contrast-color: ( 'secondary', 50, ), ), row-hover-background: ( color: ( 'gray', 200, ), ), body-column-hover-border-color: ( color: ( 'gray', 200, ), ), row-hover-text-color: ( contrast-color: ( 'gray', 200, ), ), row-border-color: ( color: ( 'gray', 300, 0.38, ), ), row-drag-color: ( color: ( 'gray', 800, ), ), pinned-border-width: 0.125rem, pinned-border-style: solid, pinned-border-color: ( color: ( 'gray', 400, ), ), cell-active-border-color: ( color: ( 'primary', 500, ), ), cell-selected-background: ( color: ( 'gray', 200, ), ), tree-selected-filtered-cell-text-color: ( color: ( 'secondary', 500, ), ), cell-selected-text-color: ( contrast-color: ( 'gray', 200, ), ), cell-editing-background: ( color: ( 'gray', 50, ), ), cell-editing-foreground: ( color: ( 'gray', 900, ), ), cell-editing-focus-foreground: ( color: ( 'gray', 900, ), ), edit-mode-color: ( color: ( 'secondary', 500, ), ), edited-row-indicator: ( color: ( 'gray', 400, ), ), cell-new-color: inherit, cell-edited-value-color: ( color: ( 'gray', 600, ), ), cell-disabled-color: ( color: ( 'gray', 500, ), ), resize-line-color: ( color: ( 'secondary', 500, ), ), drop-indicator-color: ( color: ( 'secondary', 500, ), ), group-label-column-name-text: ( color: ( 'primary', 500, ), ), group-label-icon: ( color: ( 'primary', 500, ), ), group-label-text: ( color: ( 'gray', 800, ), ), expand-all-icon-color: ( color: ( 'gray', 600, ), ), expand-all-icon-hover-color: ( color: ( 'gray', 800, ), ), expand-icon-color: ( color: ( 'gray', 600, ), ), expand-icon-hover-color: ( color: ( 'gray', 700, ), ), active-expand-icon-color: ( color: ( 'gray', 500, ), ), active-expand-icon-hover-color: ( color: ( 'primary', 500, ), ), group-count-background: ( color: ( 'gray', 200, ), ), group-count-text-color: ( color: ( 'gray', 600, ), ), group-row-background: ( color: ( 'gray', 100, ), ), group-row-selected-background: ( color: ( 'gray', 200, ), ), filtering-header-background: ( color: ( 'gray', 50, ), ), filtering-header-text-color: ( color: ( 'gray', 800, ), ), filtering-row-background: ( color: ( 'gray', 50, ), ), filtering-row-text-color: ( color: ( 'gray', 800, ), ), filtering-dialog-background: ( color: ( 'surface', 500, ), ), tree-filtered-text-color: ( color: ( 'gray', 500, ), ), row-highlight: ( color: ( 'secondary', 500, ), ), row-ghost-background: ( color: ( 'gray', 50, ), ), row-ghost-border-color: ( color: ( 'gray', 500, ), ), drop-area-border-radius: ( border-radius: ( rem(16px), rem(0), rem(16px), ), ), header-size: ( sizable: ( rem(32px), rem(40px), rem(50px), ), ), drop-area-size: ( sizable: ( rem(24px), rem(24px), rem(32px), ), ), group-area-size: ( sizable: ( rem(41px), rem(49px), rem(57px), ), ), summaries-patch-background: ( color: ( 'gray', 300, ), ), typography: ( header: ( comfortable: ( value: 'overline', ), compact: ( value: 'subtitle-1', ), ), ), active-state-border-style: 'solid', _meta: ( name: 'grid', variant: 'light', ), ) ); /// Generates a material grid schema. /// @type Map /// @prop {Map} header-text-color [color: ('gray', 800, .8)] - The table header text color. /// @prop {Map} header-selected-background [color: ('secondary', 100)] - The table header background color when selected (ex. column selection). /// @prop {Map} header-selected-text-color [contrast-color: ('secondary', 100)] - The table header text color when selected (ex. column selection). /// @prop {Map} row-selected-background [color: ('secondary', 50)] - The selected row background color. /// @prop {Map} row-selected-hover-background [color: ('secondary', 100)] - The selected row hover background. /// @prop {Map} row-selected-hover-text-color [contrast-color: ('secondary', 100)] - The selected row hover text color. /// @prop {Map} body-column-selected-border-color [color: ('secondary', 50)] - The border color used for the body column when in group-row state. /// @prop {Map} body-column-hover-selected-border-color [color: ('secondary', 100)] - The border color used for the body column when in group-row + hover state. /// @prop {Map} tree-selected-filtered-row-text-color [color: ('secondary', 300)] - The selected filtered row text color of the tree. /// @prop {Map} cell-selected-within-background [color: ('secondary', 200)] - The background of the selected cell inside a selected row/column. /// @prop {Map} cell-selected-within-text-color [contrast-color: ('secondary', 200)] - The color of the selected cell inside a selected row/column. /// @prop {Map} cell-active-border-color [color: ('secondary', 500)] - The active(focused) cell border color. /// @prop {Map} group-label-column-name-text [color: ('primary', 800)] - The grid group row column name text color. /// @prop {Map} group-label-icon [color: ('primary', 800)] - The grid group row icon color. /// @prop {Map} group-count-text-color [color: ('gray', 700)] - The grid group row cont badge text color. /// @requires $light-grid /// @requires $default-elevation-grid $material-grid: extend( $light-grid, $default-elevation-grid, ( header-text-color: ( color: ( 'gray', 800, 0.8, ), ), header-selected-background: ( color: ( 'secondary', 100, ), ), header-selected-text-color: ( contrast-color: ( 'secondary', 100, ), ), row-selected-background: ( color: ( 'secondary', 50, ), ), row-selected-hover-background: ( color: ( 'secondary', 100, ), ), row-selected-hover-text-color: ( contrast-color: ( 'secondary', 100, ), ), body-column-selected-border-color: ( color: ( 'secondary', 50, ), ), body-column-hover-selected-border-color: ( color: ( 'secondary', 100, ), ), tree-selected-filtered-row-text-color: ( color: ( 'secondary', 300, ), ), cell-selected-within-background: ( color: ( 'secondary', 200, ), ), cell-selected-within-text-color: ( contrast-color: ( 'secondary', 200, ), ), cell-active-border-color: ( color: ( 'secondary', 500, ), ), group-label-column-name-text: ( color: ( 'primary', 800, ), ), group-label-icon: ( color: ( 'primary', 800, ), ), group-count-text-color: ( color: ( 'gray', 700, ), ), _meta: ( theme: 'material', ), ) ); /// Generates a fluent grid schema. /// @type Map /// @prop {Map} grid-border-color [color: ('gray', 100)] - The grid border color only. /// @prop {Map} header-background [color: 'surface'] - The table header background color. /// @prop {Map} header-text-color [color: ('gray', 800)] - The table header text color. /// @prop {Map} header-selected-background [color: ('gray', 200)] - The table header background color when selected (ex. column selection). /// @prop {Map} header-selected-text-color [contrast-color: ('gray', 200)] - The table header text color when selected (ex. column selection). /// @prop {Map} header-border-color [color: ('gray', 100)] - The color used for header borders. /// @prop {Map} row-selected-background [color: ('gray', 200)] - The selected row background color. /// @prop {Map} row-selected-hover-background [color: ('gray', 300)] - The selected row hover background. /// @prop {Map} body-column-selected-border-color [color: ('gray', 200)] - The border color used for the body column when in group-row state. /// @prop {Map} body-column-hover-selected-border-color [color: ('gray', 300)] - The border color used for the body column when in group-row + hover state. /// @prop {Map} row-border-color [color: ('gray', 100)] - The row bottom border color. /// @prop {Map} pinned-border-color [color: ('gray', 200)] - The color of the pinned border. /// @prop {Map} cell-active-border-color [color: ('primary', 100)] - The active(focused) cell border color. /// @prop {Map} grouparea-background [color: 'surface'] - The grid group area background color. /// @prop {Map} group-row-background [color: ('gray', 50)] - The grid group row background color. /// @prop {Map} group-row-selected-background [color: ('gray', 100)] - The drop area background on drop color. /// @prop {Map} group-count-text-color [color: ('gray', 700)] - The grid group row cont badge text color. /// @prop {Map} filtering-header-text-color [color: ('gray', 900)] - The text color of the filtered column header. /// @prop {number} grid-elevation [0] - The elevation level, between 0-24, to be used for the grid. /// @prop {number} drag-elevation [1] - The elevation level, between 0-24, to be used for movable elements (ex. column header). /// @prop {List} drop-area-border-radius [(rem(2px), rem(0), rem(16px))] - The border radius used for drop-area. /// @prop {Map} tree-selected-filtered-row-text-color [color: ('primary', 400)] - The selected filtered row text color of the tree. /// @prop {Map} cell-selected-within-background [color: ('gray', 300)] - The background of the selected cell inside a selected row/column. /// @prop {Map} cell-selected-within-text-color [contrast-color: ('gray', 300)] - The color of the selected cell inside a selected row/column. /// @prop {Map} row-selected-hover-text-color [contrast-color: ('gray', 300)] - The selected row hover text color. /// @prop {Map} summaries-patch-background [color: ('surface')] - The leading summaries patch backround. Used in hierarchical grids. /// @requires $light-grid /// @requires $fluent-elevation-grid $fluent-grid: extend( $light-grid, $fluent-elevation-grid, ( grid-border-color: ( color: ( 'gray', 100, ), ), header-background: ( color: 'surface', ), header-text-color: ( color: ( 'gray', 800, ), ), header-selected-background: ( color: ( 'gray', 200, ), ), header-selected-text-color: ( contrast-color: ( 'gray', 200, ), ), header-border-color: ( color: ( 'gray', 100, ), ), row-border-color: ( color: ( 'gray', 100, ), ), pinned-border-color: ( color: ( 'gray', 200, ), ), cell-active-border-color: ( color: ( 'primary', 100, ), ), grouparea-background: ( color: 'surface', ), group-row-background: ( color: ( 'gray', 50, ), ), group-row-selected-background: ( color: ( 'gray', 100, ), ), group-count-text-color: ( color: ( 'gray', 700, ), ), filtering-header-text-color: ( color: ( 'gray', 900, ), ), row-selected-background: ( color: ( 'gray', 200, ), ), row-selected-hover-background: ( color: ( 'gray', 300, ), ), row-selected-hover-text-color: ( contrast-color: ( 'gray', 300, ), ), body-column-selected-border-color: ( color: ( 'gray', 200, ), ), body-column-hover-selected-border-color: ( color: ( 'gray', 300, ), ), tree-selected-filtered-row-text-color: ( color: ( 'gray', 400, ), ), cell-selected-within-background: ( color: ( 'gray', 300, ), ), cell-selected-within-text-color: ( contrast-color: ( 'gray', 300, ), ), drop-area-border-radius: ( border-radius: ( rem(2px), rem(0), rem(16px), ), ), summaries-patch-background: ( color: ( 'surface', ), ), _meta: ( theme: 'fluent', ), ) ); /// Generates a bootstrap grid schema. /// @type Map /// @prop {Map} grouparea-background [color: 'surface'] - The grid group area background color. /// @prop {Map} group-label-icon [color: ('primary', 600)] - The grid group row icon color. /// @prop {Map} group-label-column-name-text [color: ('primary', 600)] - The grid group row column name text color. /// @prop {Map} group-count-text-color [color: ('gray', 700)] - The grid group row cont badge text color. /// @prop {Map} header-background [color: 'surface'] - The table header background color. /// @prop {Map} header-text-color [contrast-color: 'surface'] - The table header text color. /// @prop {Map} header-selected-background [color: ('primary', 50)] - The table header background color when selected (ex. column selection). /// @prop {Map} header-selected-text-color [contrast-color: ('primary', 50)] - The table header text color when selected (ex. column selection). /// @prop {Map} row-highlight [color: ('primary', 500)] - The grid row highlight color. /// @prop {Map} sorted-header-icon-color [color: ('primary', 500)] - The sorted table header icon color. /// @prop {Map} row-selected-background [ color: ('primary', 50)] - The selected row background color. /// @prop {Map} row-selected-hover-background [color: ('primary', 100)] - The selected row hover background. /// @prop {Map} body-column-selected-border-color [color: ('primary', 50)] - The border color used for the body column when in group-row state. /// @prop {Map} body-column-hover-selected-border-color [color: ('primary', 100)] - The border color used for the body column when in group-row + hover state. /// @prop {Map} resize-line-color [color: ('primary', 500)] - The table header resize line color. /// @prop {List} drop-area-border-radius [(rem(4px), rem(0), rem(16px))] - The border radius used for drop-area. /// @prop {Map} cell-selected-within-background [color: ('primary', 100)] - The background of the selected cell inside a selected row/column. /// @prop {Map} cell-selected-within-text-color [contrast-color: ('primary', 100)] - The color of the selected cell inside a selected row/column. /// @prop {Map} row-selected-hover-text-color [contrast-color: ('primary', 100)] - The selected row hover text color. /// @prop {Map} excel-filtering-border-color [color: ('gray', 100)] - The border color used in the excel style filter. /// @requires $light-grid $bootstrap-grid: extend( $light-grid, ( group-count-text-color: ( color: ( 'gray', 700, ), ), group-label-icon: ( color: ( 'primary', 600, ), ), group-label-column-name-text: ( color: ( 'primary', 600, ), ), grouparea-background: ( color: 'surface', ), header-background: ( color: 'surface', ), header-text-color: ( contrast-color: 'surface', ), header-selected-background: ( color: ( 'primary', 50, ), ), header-selected-text-color: ( contrast-color: ( 'primary', 50, ), ), row-highlight: ( color: ( 'primary', 500, ), ), sorted-header-icon-color: ( color: ( 'primary', 500, ), ), sortable-header-icon-hover-color: ( color: ( 'primary', 500, ), ), cell-selected-within-background: ( color: ( 'primary', 100, ), ), cell-selected-within-text-color: ( contrast-color: ( 'primary', 100, ), ), row-selected-background: ( color: ( 'primary', 50, ), ), row-selected-hover-background: ( color: ( 'primary', 100, ), ), row-selected-hover-text-color: ( contrast-color: ( 'primary', 100, ), ), body-column-selected-border-color: ( color: ( 'primary', 50, ), ), body-column-hover-selected-border-color: ( color: ( 'primary', 100, ), ), resize-line-color: ( color: ( 'primary', 500, ), ), drop-indicator-color: ( color: ( 'primary', 500, ), ), edit-mode-color: ( color: ( 'primary', 500, ), ), drop-area-border-radius: ( border-radius: ( rem(4px), rem(0), rem(16px), ), ), excel-filtering-border-color: ( color: ( 'gray', 100, ), ), _meta: ( theme: 'bootstrap', ), ) ); /// Generates an indigo grid schema. /// @type Map /// @prop {Map} content-background [color: ('surface')] - The table body background color. /// @prop {Map} header-background [color: ('surface')] - The table header background color. /// @prop {Map} header-text-color [color: ('gray', 800)] - The table header text color. /// @prop {Map} header-selected-background [color: ('primary', 50)] - The table header background color when selected (ex. column selection). /// @prop {Map} header-selected-text-color [color: 'gray', 900] - The table header text color when selected (ex. column selection). /// @prop {Map} header-border-color [color: ('gray', 400)] - The color used for header borders. /// @prop {Map} filtering-row-background [color: ('surface', 500)] - The background color of the filtering row. /// @prop {Map} filtering-dialog-background [contrast-color: ('gray', 900)] - The background color of the advanced filtering dialog. /// @prop {Map} edited-row-indicator [color: ('primary', 400)] - The indicator's color of edited row. /// @prop {Map} cell-selected-background [color: ('primary', 50)] - The selected cell background color. /// @prop {Map} ghost-header-text-color [color: 'gray', 700] - The dragged header text color. /// @prop {Map} ghost-header-icon-color [color: 'gray', 600] - The dragged header icon color. /// @prop {Map} row-odd-background [color: ('surface')] - The background color of odd rows. /// @prop {Map} body-column-border-color-odd [color: ('surface')] - The border color used for the body columns in odd rows. /// @prop {Map} row-even-background [color: ('surface')] - The background color of even rows. /// @prop {Map} body-column-border-color-even [color: ('surface')] - The border color used for the body columns in even rows. /// @prop {Map} row-border-color [color: ('gray', 300)] - The row bottom border color. /// @prop {Map} row-highlight [color: ('primary', 400)] - The grid row highlight color. /// @prop {Map} sorted-header-icon-color [color: ('primary', 500)] - The sorted table header icon color. /// @prop {Map} sortable-header-icon-hover-color [color: ('primary', 400)] - The icon color on hover in grid header when the column is sortable. /// @prop {Map} row-selected-background [color: ('primary', 50)] - The selected row background color. /// @prop {Map} row-selected-hover-background [color: ('primary', 100)] - The selected row hover background. /// @prop {Map} body-column-selected-border-color [color: ('primary', 50)] - The border color used for the body column when in group-row state. /// @prop {Map} body-column-hover-selected-border-color [color: ('primary', 100)] - The border color used for the body column when in group-row + hover state. /// @prop {Map} pinned-border-color [color: ('gray', 400)] - The color of the pinned border. /// @prop {Map} resize-line-color [color: ('primary', 400)] - The table header resize line color. /// @prop {Map} drop-indicator-color [color: ('primary', 400)] - The color of the drop indicator. /// @prop {Map} edit-mode-color [color: ('primary', 400)] - The text color in edit mode. /// @prop {Map} drop-area-text-color [color: ('gray', 600)] - The drop area text color. /// @prop {Map} drop-area-icon-color [color: ('gray', 600)] - The drop area icon color. /// @prop {Map} group-row-background [color: ('surface', 500)] - The grid group row background color. /// @prop {Map} group-row-selected-background [color: ('gray', 100)] - The drop area background on drop color. /// @prop {Map} group-count-background [color: ('primary', 400)] - The grid group row cont badge background color. /// @prop {Map} group-count-text-color [contrast-color: ('primary', 900)] - The grid group row cont badge text color. /// @prop {Map} cell-selected-text-color [color: ('gray', 900)] - The selected cell text color. /// @prop {Map} cell-selected-within-background [color: ('primary', 100)] - The background of the selected cell inside a selected row/column. /// @prop {Map} cell-selected-within-text-color [color: ('gray', 900)] - The color of the selected cell inside a selected row/column. /// @prop {Map} cell-active-border-color [color: ('primary', 400)] - The active(focused) cell border color. /// @prop {Map} cell-editing-background [color: ('gray' 200)] - The background for the cell in editing mode. /// @prop {Map} row-selected-hover-text-color [color: ('gray', 900)] - The selected row hover text color. /// @prop {Map} grouparea-background [color: ('surface', 500)] - The grid group area background color. /// @prop {Map} grouparea-color [color: ('gray', 500)] - The grid group area color. /// @prop {Map} drop-area-background [color: ('gray', 200)] - The drop area background color. /// @prop {Map} row-hover-text-color [color: ('gray', 900)] - The hover row text color. /// @prop {Map} row-selected-text-color [color: ('gray', 900)] - The selected row text color. /// @prop {Number} drop-area-border-radius [rem(6px)] - The border radius used for drop-area. /// @prop {Number} grid-elevation [0] - The elevation level, between 0-24, to be used for the grid. /// @prop {Map} active-expand-icon-color [color: ('gray', 600)] - The drop area background on drop color. /// @prop {Map} group-label-column-name-text [color: ('gray', 700)] - The grid group row column name text color. /// @prop {Map} group-label-icon [color: ('gray', 600)] - The grid group row icon color. /// @prop {Map} group-label-text [color: ('gray', 900)] - The grid group row text color. /// @prop {Map} cell-edited-value-color [color: ('gray', 900)] - The color of cell edited value. /// @prop {Map} cell-disabled-color [color: ('gray', 900, .2)] - The text color of a disabled cell. /// @prop {Map} filtering-header-background [color: ('gray', 200)] - The background color of the filtered column header. /// @prop {Map} filtering-header-text-color [color: ('gray', 900)] - The text color of the filtered column header. /// @prop {Map} excel-filtering-actions-foreground [color: ('gray', 800)] - The text color of the excel style filtering options. /// @prop {Map} excel-filtering-actions-hover-foreground [color: ('gray', 900)] - The text color of the excel style filtering options in hover/focus state. /// @prop {Map} excel-filtering-actions-disabled-foreground [color: ('gray', 900, .2)] - The text color of the excel style filtering options in disabled state. /// @prop {Map} excel-filtering-actions-active-icon-color [color: ('primary', 200)] - The icon color of the excel style filtering options in active state. /// @prop {Map} excel-filtering-actions-selected-icon-color [color: ('primary', 200)] - The icon color of the excel style filtering options in selected state. /// @prop {Map} excel-filtering-actions-icon-color [color: ('gray', 600)] - The icon color of the excel style filtering options. /// @prop {Map} excel-filtering-actions-hover-icon-color [color: ('gray', 700)] - The icon color of the excel style filtering options in hover/focus state. /// @prop {Map} excel-filtering-actions-hover-background [color: ('gray', 200)] - The background color of the excel style filtering options in hover/focus state. /// @prop {Color} row-ghost-background [color: ('surface')] - The background color of the dragged row. /// @prop {Map} summaries-patch-background [color: ('surface')] - The leading summaries patch backround. Used in hierarchical grids. /// @requires $light-grid $indigo-grid: extend( $light-grid, $indigo-elevation-grid, ( content-background: ( color: ( 'surface', ), ), header-background: ( color: ( 'surface', ), ), header-text-color: ( color: ( 'gray', 800, ), ), header-selected-background: ( color: ( 'primary', 50, ), ), header-selected-text-color: ( color: ( 'gray', 900, ), ), header-border-color: ( color: ( 'gray', 400, ), ), filtering-header-background: ( color: ( 'gray', 200, ), ), filtering-header-text-color: ( color: ( 'gray', 900, ), ), filtering-row-background: ( color: ( 'surface', 500, ), ), filtering-dialog-background: ( contrast-color: ( 'gray', 900, ), ), edited-row-indicator: ( color: ( 'primary', 400, ), ), cell-selected-background: ( color: ( 'primary', 50, ), ), tree-selected-filtered-cell-text-color: ( color: ( 'primary', 500, ), ), cell-selected-text-color: ( color: ( 'gray', 900, ), ), ghost-header-text-color: ( color: ( 'gray', 700, ), ), ghost-header-icon-color: ( color: ( 'gray', 600, ), ), row-border-color: ( color: ( 'gray', 300, ), ), row-highlight: ( color: ( 'primary', 400, ), ), sorted-header-icon-color: ( color: ( 'primary', 500, ), ), sortable-header-icon-hover-color: ( color: ( 'primary', 400, ), ), cell-selected-within-background: ( color: ( 'primary', 100, ), ), cell-selected-within-text-color: ( color: ( 'gray', 900, ), ), cell-editing-background: ( color: ( 'gray', 200, ), ), row-selected-background: ( color: ( 'primary', 50, ), ), row-selected-hover-background: ( color: ( 'primary', 100, ), ), row-selected-hover-text-color: ( color: ( 'gray', 900, ), ), body-column-selected-border-color: ( color: ( 'primary', 50, ), ), body-column-hover-selected-border-color: ( color: ( 'primary', 100, ), ), pinned-border-color: ( color: ( 'gray', 400, ), ), resize-line-color: ( color: ( 'primary', 400, ), ), drop-indicator-color: ( color: ( 'primary', 400, ), ), edit-mode-color: ( color: ( 'primary', 400, ), ), drop-area-text-color: ( color: ( 'gray', 600, ), ), drop-area-icon-color: ( color: ( 'gray', 600, ), ), group-row-background: ( color: ( 'surface', 500, ), ), group-row-selected-background: ( color: ( 'gray', 100, ), ), group-count-background: ( color: ( 'primary', 400, ), ), group-count-text-color: ( contrast-color: ( 'primary', 900, ), ), cell-active-border-color: ( color: ( 'primary', 400, ), ), row-odd-background: ( color: ( 'surface', ), ), body-column-border-color-odd: ( color: ( 'surface', ), ), body-column-border-color-even: ( color: ( 'surface', ), ), row-even-background: ( color: ( 'surface', ), ), active-expand-icon-color: ( color: ( 'gray', 600, ), ), grouparea-background: ( color: ( 'surface', 500, ), ), grouparea-color: ( color: ( 'gray', 500, ), ), drop-area-background: ( color: ( 'gray', 200, ), ), row-hover-text-color: ( color: ( 'gray', 900, ), ), row-selected-text-color: ( color: ( 'gray', 900, ), ), drop-area-border-radius: ( border-radius: rem(6px), ), group-label-column-name-text: ( color: ( 'gray', 700, ), ), group-label-icon: ( color: ( 'gray', 600, ), ), group-label-text: ( color: ( 'gray', 900, ), ), cell-edited-value-color: ( color: ( 'gray', 900, ), ), cell-disabled-color: ( color: ( 'gray', 900, 0.2, ), ), excel-filtering-actions-foreground: ( color: ( 'gray', 800, ), ), excel-filtering-actions-icon-color: ( color: ( 'gray', 600, ), ), excel-filtering-actions-hover-foreground: ( color: ( 'gray', 900, ), ), excel-filtering-actions-hover-icon-color: ( color: ( 'gray', 700, ), ), excel-filtering-actions-selected-icon-color: ( color: ( 'primary', 200, ), ), excel-filtering-actions-hover-background: ( color: ( 'gray', 200, ), ), excel-filtering-actions-disabled-foreground: ( color: ( 'gray', 900, 0.2, ), ), row-ghost-background: ( color: ( 'surface', ), ), summaries-patch-background: ( color: ( 'surface', ), ), _meta: ( theme: 'indigo', ), ) );