igniteui-theming 4.2.0 → 4.3.0

package/sass/themes/schemas/components/light/_grid.scss

@@ -12,9 +12,6 @@
 /// @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} header-text-color [color: ('gray', 800)] - 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} 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.
@@ -29,10 +26,8 @@
 /// @prop {Color} row-even-background [color: ('gray', 50)] - The background color of 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} row-selected-background [color: ('secondary', 50)] - The selected row background color.
+/// @prop {Color} 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-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} row-hover-background [color: ('gray', 200)] - The hover row background color.
 /// @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.
@@ -40,7 +35,7 @@
 /// @prop {Number} pinned-border-width [2px] - 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: ('secondary', 500)] - The active(focused) cell border color.
+/// @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 {Color} cell-editing-background [color: ('gray', 50)] - The editing background color of a cell.
@@ -51,8 +46,6 @@
 /// @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} 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} 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.
@@ -93,7 +86,6 @@
 /// @prop {Map} root-summaries-background [color: ('gray', 300)] - The background color of the summary groups located the footer.
 /// @prop {Map} root-summaries-text-color [contrast-color: ('gray', 300)] - The text color of the summary groups located the footer.
 /// @prop {Map} row-drag-color [color: ('gray', 200))] - The color of the drag handle.
-/// @prop {Map} row-ghost-background [color: ('primary', 50))] - The background color of the dragged row.
 /// @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.
@@ -153,28 +145,6 @@ $light-grid: extend(
             ),
         ),
 
-        header-text-color: (
-            color: (
-                'gray',
-                800,
-                0.7,
-            ),
-        ),
-
-        header-selected-background: (
-            color: (
-                'secondary',
-                100,
-            ),
-        ),
-
-        header-selected-text-color: (
-            contrast-color: (
-                'secondary',
-                100,
-            ),
-        ),
-
         sortable-header-icon-hover-color: (
             color: (
                 'secondary',
@@ -319,17 +289,10 @@ $light-grid: extend(
 
         row-even-text-color: inherit,
 
-        row-selected-background: (
-            color: (
-                'secondary',
-                50,
-            ),
-        ),
-
         tree-selected-filtered-row-text-color: (
             color: (
-                'secondary',
-                300,
+                'primary',
+                400,
             ),
         ),
 
@@ -340,34 +303,6 @@ $light-grid: extend(
             ),
         ),
 
-        cell-selected-within-background: (
-            color: (
-                'secondary',
-                200,
-            ),
-        ),
-
-        cell-selected-within-text-color: (
-            contrast-color: (
-                'secondary',
-                200,
-            ),
-        ),
-
-        row-selected-hover-background: (
-            color: (
-                'secondary',
-                100,
-            ),
-        ),
-
-        row-selected-hover-text-color: (
-            contrast-color: (
-                'secondary',
-                100,
-            ),
-        ),
-
         row-hover-background: (
             color: (
                 'gray',
@@ -403,7 +338,7 @@ $light-grid: extend(
 
         cell-active-border-color: (
             color: (
-                'secondary',
+                'primary',
                 500,
             ),
         ),
@@ -702,6 +637,97 @@ $light-grid: extend(
     )
 );
 
+/// Generates a material grid schema.
+/// @type {Map}
+/// @prop {Map} header-text-color [color: ('gray', 800)] - 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 {Color} 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} 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} cell-active-border-color [color: ('secondary', 500)] - The active(focused) cell border color.
+/// @requires {Map} $light-grid
+/// @requires {Map} $default-elevation-grid
+$material-grid: extend(
+    $light-grid,
+    $default-elevation-grid,
+    (
+        header-text-color: (
+            color: (
+                'gray',
+                800,
+                0.7,
+            ),
+        ),
+
+        header-selected-background: (
+            color: (
+                'secondary',
+                100,
+            ),
+        ),
+
+        header-selected-text-color: (
+            contrast-color: (
+                'secondary',
+                100,
+            ),
+        ),
+
+        row-selected-background: (
+            color: (
+                'secondary',
+                50,
+            ),
+        ),
+
+        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,
+            ),
+        ),
+
+        row-selected-hover-background: (
+            color: (
+                'secondary',
+                100,
+            ),
+        ),
+
+        row-selected-hover-text-color: (
+            contrast-color: (
+                'secondary',
+                100,
+            ),
+        ),
+
+        cell-active-border-color: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+    )
+);
+
 /// Generates a fluent grid schema.
 /// @type {Map}
 /// @prop {Map} grid-border-color [color: ('gray', 100)] - The grid border color only.
@@ -718,9 +744,7 @@ $light-grid: extend(
 /// @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} filtering-header-background [color: ('gray', 50)] - 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} filtering-row-background [color: ('gray', 200)] - The background color of the filtering row.
 /// @prop {Map} root-summaries-background [color: 'surface'] - The background color of the summary groups located the footer.
 /// @prop {Map} row-ghost-background [color: 'surface'] - The background color of the dragged row.
 /// @prop {number} grid-elevation [0] - The elevation level, between 0-24, to be used for the grid.
@@ -728,6 +752,7 @@ $light-grid: extend(
 /// @prop {List} drop-area-border-radius [(rem(2px), rem(0), rem(16px))] - The border radius used for drop-area.
 /// @prop {Map} filtering-background-or [color: ('error', .5)] - The background color of advanced filtering "OR" condition.
 /// @prop {Map} filtering-background-or--focus [color: ('error')] - The background color on focus/selected of advanced filtering "OR" condition.
+/// @prop {Color} 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.
@@ -843,13 +868,6 @@ $fluent-grid: extend(
             ),
         ),
 
-        filtering-header-background: (
-            color: (
-                'gray',
-                50,
-            ),
-        ),
-
         filtering-header-text-color: (
             color: (
                 'gray',
@@ -857,13 +875,6 @@ $fluent-grid: extend(
             ),
         ),
 
-        filtering-row-background: (
-            color: (
-                'gray',
-                50,
-            ),
-        ),
-
         row-selected-background: (
             color: (
                 'gray',
@@ -912,16 +923,15 @@ $fluent-grid: extend(
 
 /// Generates a bootstrap grid schema.
 /// @type {Map}
+/// @prop {Map} grouparea-background [color: 'surface'] - The grid group area background color.
 /// @prop {Color} header-background [color: 'surface'] - The table header background color.
 /// @prop {Color} 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} cell-active-border-color [color: ('primary', 500)] - The active(focused) cell border color.
 /// @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} pinned-border-color [color: ('gray', 400)] - The color of the pinned border.
 /// @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.
@@ -957,13 +967,6 @@ $bootstrap-grid: extend(
             ),
         ),
 
-        cell-active-border-color: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
-
         row-highlight: (
             color: (
                 'primary',
@@ -971,13 +974,6 @@ $bootstrap-grid: extend(
             ),
         ),
 
-        row-ghost-background: (
-            color: (
-                'primary',
-                50,
-            ),
-        ),
-
         sorted-header-icon-color: (
             color: (
                 'primary',
@@ -999,13 +995,6 @@ $bootstrap-grid: extend(
             ),
         ),
 
-        tree-selected-filtered-row-text-color: (
-            color: (
-                'primary',
-                400,
-            ),
-        ),
-
         cell-selected-within-background: (
             color: (
                 'primary',
@@ -1034,13 +1023,6 @@ $bootstrap-grid: extend(
             ),
         ),
 
-        pinned-border-color: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-
         resize-line-color: (
             color: (
                 'primary',
@@ -1074,7 +1056,6 @@ $bootstrap-grid: extend(
 
 /// Generates an indigo grid schema.
 /// @type {Map}
-/// @prop {Color} header-background [color: ('gray', 100)] - The table header background color.
 /// @prop {Color} header-text-color [color: 'primary'] - The table header text color.
 /// @prop {Map} header-selected-background [color: ('primary', 100)] - The table header background color when selected (ex. column selection).
 /// @prop {Map} header-selected-text-color [color: 'primary'] - The table header text color when selected (ex. column selection).
@@ -1084,13 +1065,11 @@ $bootstrap-grid: extend(
 /// @prop {Map} filtering-background-or--focus [color: 'warn'] - The background color on focus/selected of advanced filtering "OR" condition.
 /// @prop {Map} edited-row-indicator [color: 'primary'] - The indicator's color of edited row.
 /// @prop {Map} cell-selected-background [color: ('primary', 100)] - The selected cell background color.
-/// @prop {Map} cell-active-border-color [color: ('primary', 500)] - The active(focused) cell border color.
 /// @prop {Color} ghost-header-background [color: 'primary'] - The dragged header background color.
 /// @prop {Map} ghost-header-text-color [contrast-color: 'primary'] - The dragged header text color.
 /// @prop {Map} ghost-header-icon-color [contrast-color: 'primary'] - The dragged header icon color.
 /// @prop {Map} row-border-color [color: ('primary', 50)] - The row bottom border color.
 /// @prop {Map} row-highlight [color: 'primary'] - The grid row highlight color.
-/// @prop {Map} row-ghost-background [color: ('primary', 50)] - The background color of the dragged row.
 /// @prop {Map} row-hover-background [color: ('primary', 50)] - The hover row background color.
 /// @prop {Map} sorted-header-icon-color [color: 'primary'] - The sorted table header icon color.
 /// @prop {Map} sortable-header-icon-hover-color [color: 'primary'] - The icon color on hover in grid header when the column is sortable.
@@ -1100,13 +1079,10 @@ $bootstrap-grid: extend(
 /// @prop {Map} resize-line-color [color: 'primary'] - The table header resize line color.
 /// @prop {Map} drop-indicator-color [color: 'primary'] - The color of the drop indicator.
 /// @prop {Map} edit-mode-color [color: 'primary'] - The text color in edit mode.
-/// @prop {Map} grouparea-background [color: ('gray', 100)] - The grid group area background color.
 /// @prop {Map} grouparea-color [color: 'primary'] - The grid group area color.
-/// @prop {Map} drop-area-background [color: ('gray', 200)] - The drop area background color.
 /// @prop {Map} drop-area-text-color [contrast-color: ('gray', 200)] - The drop area text color.
 /// @prop {Map} drop-area-icon-color [contrast-color: ('gray', 200)] - The drop area icon color.
 /// @prop {Map} root-summaries-background [color: ('gray', 100)] - The background color of the summary groups located the footer.
-/// @prop {Map} body-summaries-background [color: ('gray', 100)] - The background color of the summary groups located the body.
 /// @prop {Map} group-row-background [color: ('gray', 100)] - 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', 300)] - The grid group row cont badge background color.
@@ -1119,13 +1095,6 @@ $bootstrap-grid: extend(
 $indigo-grid: extend(
     $light-grid,
     (
-        header-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-
         header-text-color: (
             color: (
                 'primary',
@@ -1202,13 +1171,6 @@ $indigo-grid: extend(
             ),
         ),
 
-        cell-active-border-color: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
-
         ghost-header-background: (
             color: (
                 'primary',
@@ -1244,13 +1206,6 @@ $indigo-grid: extend(
             ),
         ),
 
-        row-ghost-background: (
-            color: (
-                'primary',
-                50,
-            ),
-        ),
-
         row-hover-background: (
             color: (
                 'primary',
@@ -1279,13 +1234,6 @@ $indigo-grid: extend(
             ),
         ),
 
-        tree-selected-filtered-row-text-color: (
-            color: (
-                'primary',
-                400,
-            ),
-        ),
-
         cell-selected-within-background: (
             color: (
                 'primary',
@@ -1342,13 +1290,6 @@ $indigo-grid: extend(
             ),
         ),
 
-        grouparea-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-
         grouparea-color: (
             color: (
                 'primary',
@@ -1356,13 +1297,6 @@ $indigo-grid: extend(
             ),
         ),
 
-        drop-area-background: (
-            color: (
-                'gray',
-                200,
-            ),
-        ),
-
         drop-area-text-color: (
             contrast-color: (
                 'gray',
@@ -1384,13 +1318,6 @@ $indigo-grid: extend(
             ),
         ),
 
-        body-summaries-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-
         group-row-background: (
             color: (
                 'gray',

package/sass/themes/schemas/components/light/_highlight.scss

@@ -43,6 +43,11 @@ $light-highlight: (
     ),
 );
 
+/// Generates a material highlight schema.
+/// @type {Map}
+/// @requires {Map} $light-highlight
+$material-highlight: $light-highlight;
+
 /// Generates a fluent highlight schema.
 /// @type {Map}
 /// @requires {Map} $light-highlight

package/sass/themes/schemas/components/light/_icon-button.scss

@@ -189,7 +189,7 @@ $material-outlined-icon-button: extend(
 /// @requires {Map} $material-flat-icon-button
 /// @requires {Map} $material-contained-icon-button
 /// @requires {Map} $material-outlined-icon-button
-$light-icon-button: (
+$material-icon-button: (
     flat: $material-flat-icon-button,
     contained: $material-contained-icon-button,
     outlined: $material-outlined-icon-button,

package/sass/themes/schemas/components/light/_icon.scss

@@ -26,6 +26,11 @@ $light-icon: (
     default-size: 3,
 );
 
+/// Generates a material icon schema.
+/// @type {Map}
+/// @requires {Map} $light-icon
+$material-icon: $light-icon;
+
 /// Generates a fluent icon schema.
 /// @type {Map}
 /// @requires {Map} $light-icon

package/sass/themes/schemas/components/light/_index.scss

@@ -62,60 +62,60 @@
 /// Use in combination with light palettes.
 /// @type Map.
 $light-material-schema: (
-    action-strip: $light-action-strip,
-    avatar: $light-avatar,
-    badge: $light-badge,
-    banner: $light-banner,
-    bottom-nav: $light-bottom-nav,
-    button: $light-button,
-    button-group: $light-button-group,
-    calendar: $light-calendar,
-    card: $light-card,
-    carousel: $light-carousel,
-    checkbox: $light-checkbox,
-    chip: $light-chip,
-    column-actions: $light-column-actions,
-    combo: $light-combo,
-    date-range: $light-date-range-picker,
-    dialog: $light-dialog,
-    divider: $light-divider,
-    dockmanager: $light-dock-manager,
-    drop-down: $light-drop-down,
-    expansion-panel: $light-expansion-panel,
-    grid: $light-grid,
-    grid-filtering: $light-grid-filtering,
-    grid-summary: $light-grid-summary,
-    grid-toolbar: $light-grid-toolbar,
-    highlight: $light-highlight,
-    icon: $light-icon,
-    icon-button: $light-icon-button,
-    input-group: $light-input-group,
+    action-strip: $material-action-strip,
+    avatar: $material-avatar,
+    badge: $material-badge,
+    banner: $material-banner,
+    bottom-nav: $material-bottom-nav,
+    button: $material-button,
+    button-group: $material-button-group,
+    calendar: $material-calendar,
+    card: $material-card,
+    carousel: $material-carousel,
+    checkbox: $material-checkbox,
+    chip: $material-chip,
+    column-actions: $material-column-actions,
+    combo: $material-combo,
+    date-range: $material-date-range-picker,
+    dialog: $material-dialog,
+    divider: $material-divider,
+    dockmanager: $material-dock-manager,
+    drop-down: $material-drop-down,
+    expansion-panel: $material-expansion-panel,
+    grid: $material-grid,
+    grid-filtering: $material-grid-filtering,
+    grid-summary: $material-grid-summary,
+    grid-toolbar: $material-grid-toolbar,
+    highlight: $material-highlight,
+    icon: $material-icon,
+    icon-button: $material-icon-button,
+    input-group: $material-input-group,
     label: $material-label,
-    list: $light-list,
-    navbar: $light-navbar,
-    nav-drawer: $light-navdrawer,
-    overlay: $light-overlay,
-    paginator: $light-pagination,
-    pivot-data-selector: $light-pivot-data-selector,
-    linear-bar: $light-progress-linear,
-    circular-bar: $light-progress-circular,
-    query-builder: $light-query-builder,
-    radio: $light-radio,
-    rating: $light-rating,
-    ripple: $light-ripple,
-    scrollbar: $light-scrollbar,
-    select: $light-select,
-    slider: $light-slider,
-    snackbar: $light-snackbar,
-    splitter: $light-splitter,
-    stepper: $light-stepper,
-    switch: $light-switch,
-    tabs: $light-tabs,
-    time-picker: $light-time-picker,
-    toast: $light-toast,
-    tooltip: $light-tooltip,
-    tree: $light-tree,
-    watermark: $light-watermark,
+    list: $material-list,
+    navbar: $material-navbar,
+    nav-drawer: $material-navdrawer,
+    overlay: $material-overlay,
+    paginator: $material-pagination,
+    pivot-data-selector: $material-pivot-data-selector,
+    linear-bar: $material-progress-linear,
+    circular-bar: $material-progress-circular,
+    query-builder: $material-query-builder,
+    radio: $material-radio,
+    rating: $material-rating,
+    ripple: $material-ripple,
+    scrollbar: $material-scrollbar,
+    select: $material-select,
+    slider: $material-slider,
+    snackbar: $material-snackbar,
+    splitter: $material-splitter,
+    stepper: $material-stepper,
+    switch: $material-switch,
+    tabs: $material-tabs,
+    time-picker: $material-time-picker,
+    toast: $material-toast,
+    tooltip: $material-tooltip,
+    tree: $material-tree,
+    watermark: $material-watermark,
     _meta: (
         theme: 'material',
         variant: 'light',