igniteui-theming 16.1.0 → 17.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "16.1.0",
+  "version": "17.0.0",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/themes/schemas/components/dark/_grid-summary.scss

@@ -9,10 +9,26 @@
 
 /// Generates a dark material grid-summary schema.
 /// @type {Map}
-/// @requires $material-grid-summary
+/// @prop {Map} background-color [color: ('gray', 50)] - The summaries background color.
+/// @prop {Map} result-color [contrast-color: ('gray', 50)] - The summaries value/result color.
+/// @requires {Map} $material-grid-summary
 $dark-material-grid-summary: extend(
     $material-grid-summary,
     (
+        background-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        result-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+
         _meta: (
             theme: 'material',
             variant: 'dark',
@@ -22,7 +38,7 @@ $dark-material-grid-summary: extend(
 
 /// Generates a dark fluent grid-summary schema.
 /// @type {Map}
-/// @requires $fluent-grid-summary
+/// @requires {Map} $fluent-grid-summary
 $dark-fluent-grid-summary: extend(
     $fluent-grid-summary,
     (
@@ -35,7 +51,9 @@ $dark-fluent-grid-summary: extend(
 
 /// Generates a dark bootstrap grid-summary schema.
 /// @type {Map}
-/// @requires $bootstrap-grid-summary
+/// @prop {Map} background-color [color: ('gray', 100)] - The summaries background color.
+/// @prop {Map} result-color [contrast-color: ('gray', 100)] - The summaries value/result color.
+/// @requires {Map} $bootstrap-grid-summary
 $dark-bootstrap-grid-summary: extend(
     $bootstrap-grid-summary,
     (
@@ -45,6 +63,14 @@ $dark-bootstrap-grid-summary: extend(
                 100,
             ),
         ),
+
+        result-color: (
+            contrast-color: (
+                'gray',
+                100,
+            ),
+        ),
+
         _meta: (
             theme: 'bootstrap',
             variant: 'dark',
@@ -54,16 +80,23 @@ $dark-bootstrap-grid-summary: extend(
 
 /// Generates a dark indigo grid-summary schema.
 /// @type {Map}
+/// @prop {Map} background-color [color: ('surface')] - The summaries background color.
 /// @prop {Map} focus-background-color [color: ('gray', 100)] - The background color when a summary item is on focus.
 /// @prop {Map} label-color [color: ('primary', 200)] - The summaries label color.
 /// @prop {Map} label-hover-color [color: ('primary', 200)] - The summaries hover label color.
 /// @prop {Map} result-color [contrast-color: 'surface'] - The summaries value/result color.
 /// @prop {Map} border-color [color: ('gray', 200)] - The summaries border color.
 /// @prop {Map} pinned-border-color [color: ('gray', 200)] - The border color of the summary panel.
-/// @requires $indigo-grid-summary
+/// @requires {Map} $indigo-grid-summary
 $dark-indigo-grid-summary: extend(
     $indigo-grid-summary,
     (
+        background-color: (
+            color: (
+                'surface',
+            ),
+        ),
+
         focus-background-color: (
             color: (
                 'gray',

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

@@ -31,10 +31,6 @@
 /// @prop {Map} grouparea-background [color: ('gray', 50)] - 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} body-summaries-background [color: ('gray', 100)] - The background color of the summary groups located the body.
-/// @prop {Map} body-summaries-text-color [contrast-color: ('gray', 100)] - The text color of the summary groups located the body.
-/// @prop {Map} root-summaries-background [color: ('gray', 50)] - The background color of the summary groups located the footer.
-/// @prop {Map} root-summaries-text-color [contrast-color: ('gray', 200)] - The text color of the summary groups located the footer.
 $base-dark-grid: (
     content-background: (
         color: 'surface',
@@ -189,44 +185,24 @@ $base-dark-grid: (
             100,
         ),
     ),
-
-    body-summaries-background: (
-        color: (
-            'gray',
-            50,
-        ),
-    ),
-
-    body-summaries-text-color: (
-        contrast-color: (
-            'gray',
-            50,
-        ),
-    ),
-
-    root-summaries-background: (
-        color: (
-            'gray',
-            50,
-        ),
-    ),
-
-    root-summaries-text-color: (
-        contrast-color: (
-            'gray',
-            50,
-        ),
-    ),
 );
 
 /// Generates a dark material grid schema based on a mix of $material-grid and $base-dark-grid.
 /// @type {Map}
+/// @prop {Map} summaries-patch-background [color: ('gray', 50)] - The leading summaries patch backround. Used in hierarchical grids.
 /// @requires $material-grid
 /// @requires $base-dark-grid
 $dark-material-grid: extend(
     $material-grid,
     $base-dark-grid,
     (
+        summaries-patch-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
         _meta: (
             theme: 'material',
             variant: 'dark',
@@ -330,20 +306,13 @@ $dark-fluent-grid: extend(
 /// @prop {Map} drop-area-background [color: ('gray', 100, .5)] - The drop area background color.
 /// @prop {Map} grouparea-background [color: 'surface'] - The grid group area background color.
 /// @prop {Map} grouparea-color [contrast-color: 'surface'] - The grid group area color.
-/// @prop {Map} root-summaries-background [color: ('gray', 100)] - The background color of the summary groups located the footer.
+/// @prop {Map} summaries-patch-background [color: ('gray', 100)] - The leading summaries patch backround. Used in hierarchical grids.
 /// @requires $bootstrap-grid
 /// @requires $base-dark-grid
 $dark-bootstrap-grid: extend(
     $bootstrap-grid,
     $base-dark-grid,
     (
-        root-summaries-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-
         group-row-background: (
             color: 'surface',
         ),
@@ -373,6 +342,14 @@ $dark-bootstrap-grid: extend(
                 0.5,
             ),
         ),
+
+        summaries-patch-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
         _meta: (
             theme: 'bootstrap',
             variant: 'dark',
@@ -408,10 +385,6 @@ $dark-bootstrap-grid: extend(
 /// @prop {Map} cell-selected-within-text-color [contrast-color: ('primary', 900)] - The color of the selected cell inside a selected row/column.
 /// @prop {Map} cell-selected-background [color: ('primary', 900)] - The selected cell background color.
 /// @prop {Map} cell-selected-text-color [contrast-color: ('primary', 900)] - The selected cell text color.
-/// @prop {Map} root-summaries-background [color: 'surface'] - The background color of the summary groups located the footer.
-/// @prop {Map} root-summaries-text-color [contrast-color: 'surface'] - The text color of the summary groups located the footer.
-/// @prop {Map} body-summaries-background [color: 'surface'] - The background color of the summary groups located the body.
-/// @prop {Map} body-summaries-text-color [contrast-color: 'surface'] - The text color of the summary groups located the body.
 /// @prop {Map} expand-icon-color [contrast-color: ('gray', 50, .8)] - The grid row expand icon color.
 /// @prop {Map} expand-icon-hover-color [contrast-color: ('gray', 50)] - The grid row expand icon hover color.
 /// @prop {Map} active-expand-icon-color [contrast-color: ('gray', 50, .8)] - The drop area background on drop color.
@@ -633,22 +606,6 @@ $dark-indigo-grid: extend(
             ),
         ),
 
-        root-summaries-background: (
-            color: 'surface',
-        ),
-
-        root-summaries-text-color: (
-            contrast-color: 'surface',
-        ),
-
-        body-summaries-background: (
-            color: 'surface',
-        ),
-
-        body-summaries-text-color: (
-            contrast-color: 'surface',
-        ),
-
         expand-icon-color: (
             contrast-color: (
                 'gray',

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

@@ -114,6 +114,7 @@ $light-checkbox: (
 /// @prop {Map} fill-color [color: ('secondary', 500)] - The checked border and fill colors.
 /// @prop {Map} fill-color-hover [color: ('secondary', 500)] - The checked border and fill colors on hover.
 /// @prop {Color} focus-outline-color [transparent] - The focus outlined color.
+/// @prop {Map} focus-border-color [color: ('gray', 600)] - The focus border color.
 /// @prop {Map} error-color-hover [color: ('error', 500)] - The border and fill colors in invalid state on hover.
 /// @prop {Map} typography [label: (value: 'subtitle-1')] - The typography styles used for the component.
 /// @requires {Map} $light-checkbox
@@ -157,6 +158,13 @@ $material-checkbox: extend(
 
         focus-outline-color: transparent,
 
+        focus-border-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
         error-color-hover: (
             color: (
                 'error',
@@ -184,6 +192,7 @@ $material-checkbox: extend(
 /// @prop {Map} empty-color-hover [color: ('gray', 900)] - The unchecked border color on hover.
 /// @prop {Map} fill-color-hover [color: ('primary', 800)] - The checked border and fill colors on hover.
 /// @prop {Map} focus-outline-color [color: ('gray', 700)] - The focus outlined color.
+/// @prop {Map} focus-border-color [color: ('gray', 900)] - The focus border color.
 /// @prop {Map} error-color-hover [color: ('error', 700)] - The border and fill colors in invalid state on hover.
 /// @prop {List} border-radius-ripple [(rem(2px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
 /// @requires {Map} $light-checkbox
@@ -202,6 +211,12 @@ $fluent-checkbox: extend(
                 700,
             ),
         ),
+        focus-border-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
         empty-color: (
             color: (
                 'gray',
@@ -251,6 +266,7 @@ $fluent-checkbox: extend(
 /// @prop {Map} disabled-color [color: ('gray', 300)] - The disabled border color.
 /// @prop {Map} disabled-tick-color [contrast-color: ('primary', 900)] - The checked mark color in disabled state.
 /// @prop {Map} disabled-indeterminate-color [color: ('primary', 200)] - The disabled border and fill colors.
+/// @prop {Map} focus-border-color [color: ('primary', 200)] - The focus border color.
 /// @prop {Map} focus-outline-color [color: ('primary', 200, 0.5)] - The focus outlined color.
 /// @prop {Map} focus-outline-color-error [color: ('error', 200, 0.5)] - The focus outlined color for focused invalid state.
 /// @prop {Map} error-color-hover [color: ('error', 600)] - The focus outlined color in invalid state.
@@ -291,6 +307,12 @@ $bootstrap-checkbox: extend(
                 900,
             ),
         ),
+        focus-border-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
         focus-outline-color: (
             color: (
                 'primary',
@@ -375,6 +397,7 @@ $bootstrap-checkbox: extend(
 /// @prop {Map} disabled-color-label [color: ('gray', 900, .2)] - The disabled label color.
 /// @prop {Map} focus-outline-color [color: ('gray', 900, .15)] - The focus outlined color.
 /// @prop {Map} focus-outline-color-focused [color: ('primary', 400, .5)] - The focus outlined color for focused state.
+/// @prop {Map} focus-border-color [color: ('gray', 500)] - The focus border color.
 /// @prop {Map} focus-outline-color-error [color: ('error', 400, 0.5)] - The focus outlined color for focused invalid state.
 /// @prop {Map} error-color-hover [color: ('error', 400)] - The focus outlined color in invalid state.
 /// @prop {List} border-radius [(rem(3px), rem(0), rem(10px))] - The border radius used for checkbox.
@@ -403,6 +426,12 @@ $indigo-checkbox: extend(
                 0.5,
             ),
         ),
+        focus-border-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
         focus-outline-color-error: (
             color: (
                 'error',

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

@@ -9,17 +9,22 @@
 
 /// Generates a light grid-summary schema.
 /// @type {Map}
-/// @prop {Color} background-color [inherit] - The summaries background color is inherited from the grid footer.
+/// @prop {Map} background-color [color: ('gray', 300)] - The summaries background color.
 /// @prop {Map} focus-background-color [color: ('gray', 100)] - The background color when a summary item is on focus.
 /// @prop {Map} label-color [color: ('primary', 500)] - The summaries label color.
 /// @prop {Map} label-hover-color [color: ('primary', 700)] - The summaries hover label color.
-/// @prop {Color} result-color ["'currentColor'"] - The summaries value/result color.
+/// @prop {Map} result-color [contrast-color: ('gray', 300)] - The summaries value/result color.
 /// @prop {Map} border-color [color: ('gray', 400)] - The summaries border color.
 /// @prop {String} pinned-border-width [2px] - The border width of the summary panel.
 /// @prop {String} pinned-border-style [solid] - The border style of the summary panel.
 /// @prop {Map} pinned-border-color [color: ('gray', 400)] - The border color of the summary panel.
 $light-grid-summary: (
-    background-color: inherit,
+    background-color: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
 
     focus-background-color: (
         color: (
@@ -42,7 +47,12 @@ $light-grid-summary: (
         ),
     ),
 
-    result-color: "'currentColor'",
+    result-color: (
+        contrast-color: (
+            'gray',
+            300,
+        ),
+    ),
 
     border-color: (
         color: (
@@ -76,8 +86,9 @@ $material-grid-summary: extend(
 
 /// Generates a fluent grid-summary schema.
 /// @type {Map}
-/// @prop {Map} background-color [color: ('surface')] - The summaries background color is inherited from the grid footer.
+/// @prop {Map} background-color [color: ('surface')] - The summaries background color.
 /// @prop {Map} border-color [color: ('gray', 100)] - The summaries border color.
+/// @prop {Map} result-color [contrast-color: ('surface')] - The summaries value/result color.
 /// @prop {Map} pinned-border-color [color: ('gray', 300)] - The border color of the summary panel.
 /// @requires {Map} $light-grid-summary
 $fluent-grid-summary: extend(
@@ -96,6 +107,12 @@ $fluent-grid-summary: extend(
             ),
         ),
 
+        result-color: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+
         pinned-border-color: (
             color: (
                 'gray',
@@ -125,8 +142,9 @@ $bootstrap-grid-summary: extend(
 
 /// Generates an indigo grid-summary schema.
 /// @type {Map}
-/// @prop {Map} background-color [color: ('surface')] - The summaries background color is inherited from the grid footer.
+/// @prop {Map} background-color [color: ('surface')] - The summaries background color.
 /// @prop {Map} label-hover-color [color: ('primary', 500)] - The summaries hover label color.
+/// @prop {Map} result-color [color: ('gray', 800)] - The summaries value/result color.
 /// @prop {Map} pinned-border-color [color: ('gray', 400)] - The border color of the summary panel.
 /// @requires {Map} $light-grid-summary
 $indigo-grid-summary: extend(
@@ -145,6 +163,13 @@ $indigo-grid-summary: extend(
             ),
         ),
 
+        result-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
         pinned-border-color: (
             color: (
                 'gray',

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

@@ -81,10 +81,6 @@
 /// @prop {Map} excel-filtering-actions-foreground [color: ('gray', 700)] - The text 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-disabled-foreground [color: ('gray', 400)] - The text color of the excel style filtering options in disabled state.
-/// @prop {Map} body-summaries-background [color: ('gray', 100)] - The background color of the summary groups located the body.
-/// @prop {Map} body-summaries-text-color [contrast-color: ('gray', 100)] - The text color of the summary groups located the body.
-/// @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 {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).
@@ -93,6 +89,7 @@
 /// @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 {Map} row-ghost-background [color: 'primary', 50] - The background color of the dragged row.
+/// @prop {Map} summaries-patch-background [color: ('gray', 300)] - The leading summaries patch backround. Used in hierarchical grids.
 /// @prop {Map} typography [
 ///  header: (comfortable: (value: 'overline'),
 ///  compact: (value: 'subtitle-1'))
@@ -567,34 +564,6 @@ $light-grid: extend(
             ),
         ),
 
-        body-summaries-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-
-        body-summaries-text-color: (
-            contrast-color: (
-                'gray',
-                100,
-            ),
-        ),
-
-        root-summaries-background: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
-
-        root-summaries-text-color: (
-            contrast-color: (
-                'gray',
-                300,
-            ),
-        ),
-
         row-highlight: (
             color: (
                 'secondary',
@@ -641,6 +610,13 @@ $light-grid: extend(
             ),
         ),
 
+        summaries-patch-background: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
         typography: (
             header: (
                 comfortable: (
@@ -767,7 +743,6 @@ $material-grid: extend(
 /// @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-text-color [color: ('gray', 900)] - The text color of the filtered column header.
-/// @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.
 /// @prop {number} drag-elevation [1] - The elevation level, between 0-24, to be used for movable elements (ex. column header).
@@ -778,6 +753,7 @@ $material-grid: extend(
 /// @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 {Map} $light-grid
 /// @requires {Map} $fluent-elevation-grid
 $fluent-grid: extend(
@@ -925,10 +901,6 @@ $fluent-grid: extend(
             ),
         ),
 
-        root-summaries-background: (
-            color: 'surface',
-        ),
-
         row-ghost-background: (
             color: 'surface',
         ),
@@ -940,6 +912,13 @@ $fluent-grid: extend(
                 rem(16px),
             ),
         ),
+
+        summaries-patch-background: (
+            color: (
+                'surface',
+            ),
+        ),
+
         _meta: (
             theme: 'fluent',
             variant: 'light',
@@ -1077,6 +1056,7 @@ $bootstrap-grid: extend(
                 rem(16px),
             ),
         ),
+
         _meta: (
             theme: 'bootstrap',
             variant: 'light',
@@ -1116,8 +1096,6 @@ $bootstrap-grid: extend(
 /// @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} root-summaries-background [color: ('surface')] - The background color of the summary groups located the footer.
-/// @prop {Map} root-summaries-text-color [color: ('gray', 800)] - The text color of the summary groups located the footer.
 /// @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.
@@ -1146,6 +1124,7 @@ $bootstrap-grid: extend(
 /// @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} row-drag-color [color: ('gray', 800, .75))] - The color of the drag handle.
+/// @prop {Map} summaries-patch-background [color: ('surface')] - The leading summaries patch backround. Used in hierarchical grids.
 /// @requires {Map} $light-grid
 $indigo-grid: extend(
     $light-grid,
@@ -1401,19 +1380,6 @@ $indigo-grid: extend(
             ),
         ),
 
-        root-summaries-background: (
-            color: (
-                'surface',
-            ),
-        ),
-
-        root-summaries-text-color: (
-            color: (
-                'gray',
-                800,
-            ),
-        ),
-
         group-row-background: (
             color: (
                 'surface',
@@ -1572,6 +1538,13 @@ $indigo-grid: extend(
                 200,
             ),
         ),
+
+        summaries-patch-background: (
+            color: (
+                'surface',
+            ),
+        ),
+
         _meta: (
             theme: 'indigo',
             variant: 'light',