igniteui-theming 25.0.0 → 25.0.2

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

@@ -8,13 +8,13 @@
 ////
 
 /// Generates a light grid-summary schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} background-color [color: ('gray', 300)] - The summaries background color.
 /// @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 {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 {Color} border-color [transparent] - The summaries column border color.
+/// @prop {String} pinned-border-width [1px] - 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: (
@@ -46,14 +46,9 @@ $light-grid-summary: (
         ),
     ),
 
-    border-color: (
-        color: (
-            'gray',
-            400,
-        ),
-    ),
+    border-color: transparent,
 
-    pinned-border-width: 2px,
+    pinned-border-width: 1px,
     pinned-border-style: solid,
     pinned-border-color: (
         color: (
@@ -69,10 +64,10 @@ $light-grid-summary: (
 );
 
 /// Generates a material grid-summary schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} label-color [color: ('primary', 900)] - The summaries label color.
 /// @prop {Map} label-hover-color [color: ('primary', 900)] - The summaries hover label color.
-/// @requires {Map} $light-grid-summary
+/// @requires $light-grid-summary
 $material-grid-summary: extend(
     $light-grid-summary,
     (
@@ -95,13 +90,13 @@ $material-grid-summary: extend(
 );
 
 /// Generates a fluent grid-summary schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} label-color [color: ('primary', 600)] - The summaries label color.
 /// @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
+/// @requires $light-grid-summary
 $fluent-grid-summary: extend(
     $light-grid-summary,
     (
@@ -145,9 +140,9 @@ $fluent-grid-summary: extend(
 );
 
 /// Generates a bootstrap grid-summary schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} label-color [color: ('primary', 700)] - The summaries label color.
-/// @requires {Map} $light-grid-summary
+/// @requires $light-grid-summary
 $bootstrap-grid-summary: extend(
     $light-grid-summary,
     (
@@ -165,12 +160,11 @@ $bootstrap-grid-summary: extend(
 );
 
 /// Generates an indigo grid-summary schema.
-/// @type {Map}
+/// @type Map
 /// @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
+/// @requires $light-grid-summary
 $indigo-grid-summary: extend(
     $light-grid-summary,
     (
@@ -194,13 +188,6 @@ $indigo-grid-summary: extend(
             ),
         ),
 
-        pinned-border-color: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-
         _meta: (
             theme: 'indigo',
         ),

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

@@ -8,7 +8,7 @@
 ////
 
 /// Generates a light grid-toolbar schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} background-color [color: ('gray', 50)] - The toolbar background color.
 /// @prop {Map} title-text-color [color: ('gray', 700)] - The toolbar title text color.
 /// @prop {Map} dropdown-background [color: ('surface')] - The toolbar drop-down background color.
@@ -97,8 +97,8 @@ $light-grid-toolbar: (
 );
 
 /// Generates a material grid-toolbar schema.
-/// @type {Map}
-/// @requires {Map} $light-grid-toolbar
+/// @type Map
+/// @requires $light-grid-toolbar
 $material-grid-toolbar: extend(
     $light-grid-toolbar,
     (
@@ -109,9 +109,9 @@ $material-grid-toolbar: extend(
 );
 
 /// Generates a fluent grid-toolbar schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} background-color [color: 'surface'] - The toolbar background color.
-/// @requires {Map} $light-grid-toolbar
+/// @requires $light-grid-toolbar
 $fluent-grid-toolbar: extend(
     $light-grid-toolbar,
     (
@@ -126,9 +126,9 @@ $fluent-grid-toolbar: extend(
 );
 
 /// Generates a bootstrap grid-toolbar schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} border-color [color: ('gray', 100)] - The toolbar border-bottom color.
-/// @requires {Map} $light-grid-toolbar
+/// @requires $light-grid-toolbar
 $bootstrap-grid-toolbar: extend(
     $light-grid-toolbar,
     (
@@ -146,10 +146,10 @@ $bootstrap-grid-toolbar: extend(
 );
 
 /// Generates an indigo grid-toolbar schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Color} background-color [color: ('surface', 500)] - The toolbar background color.
 /// @prop {Map} border-color [color: ('gray', 400)] - The toolbar border-bottom color.
-/// @requires {Map} $light-grid-toolbar
+/// @requires $light-grid-toolbar
 $indigo-grid-toolbar: extend(
     $light-grid-toolbar,
     (

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

@@ -9,7 +9,7 @@
 ////
 
 /// Generates a light grid schema.
-/// @type {Map}
+/// @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.
@@ -23,16 +23,19 @@
 /// @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 [2px] - The border width of the pinned border.
+/// @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.
@@ -84,13 +87,11 @@
 /// @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 {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'))
-/// ] - The typography styles used for the component.
-/// @requires {Map} $default-elevation-grid
+/// @prop {Color} row-ghost-background [color: 'primary', 50] - The background 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,
     (
@@ -255,6 +256,20 @@ $light-grid: extend(
             ),
         ),
 
+        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,
@@ -280,6 +295,13 @@ $light-grid: extend(
             ),
         ),
 
+        body-column-hover-border-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
         row-hover-text-color: (
             contrast-color: (
                 'gray',
@@ -302,7 +324,7 @@ $light-grid: extend(
             ),
         ),
 
-        pinned-border-width: 2px,
+        pinned-border-width: 0.125rem,
 
         pinned-border-style: solid,
 
@@ -597,6 +619,8 @@ $light-grid: extend(
             ),
         ),
 
+        active-state-border-style: 'solid',
+
         _meta: (
             name: 'grid',
             variant: 'light',
@@ -605,22 +629,24 @@ $light-grid: extend(
 );
 
 /// Generates a material grid schema.
-/// @type {Map}
+/// @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} 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.
 /// @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 {Map} $light-grid
-/// @requires {Map} $default-elevation-grid
+/// @requires $light-grid
+/// @requires $default-elevation-grid
 $material-grid: extend(
     $light-grid,
     $default-elevation-grid,
@@ -654,38 +680,52 @@ $material-grid: extend(
             ),
         ),
 
-        tree-selected-filtered-row-text-color: (
+        row-selected-hover-background: (
             color: (
                 'secondary',
-                300,
+                100,
             ),
         ),
 
-        cell-selected-within-background: (
-            color: (
+        row-selected-hover-text-color: (
+            contrast-color: (
                 'secondary',
-                200,
+                100,
             ),
         ),
 
-        cell-selected-within-text-color: (
-            contrast-color: (
+        body-column-selected-border-color: (
+            color: (
                 'secondary',
-                200,
+                50,
             ),
         ),
 
-        row-selected-hover-background: (
+        body-column-hover-selected-border-color: (
             color: (
                 'secondary',
                 100,
             ),
         ),
 
-        row-selected-hover-text-color: (
+        tree-selected-filtered-row-text-color: (
+            color: (
+                'secondary',
+                300,
+            ),
+        ),
+
+        cell-selected-within-background: (
+            color: (
+                'secondary',
+                200,
+            ),
+        ),
+
+        cell-selected-within-text-color: (
             contrast-color: (
                 'secondary',
-                100,
+                200,
             ),
         ),
 
@@ -724,7 +764,7 @@ $material-grid: extend(
 );
 
 /// Generates a fluent grid schema.
-/// @type {Map}
+/// @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.
@@ -733,6 +773,8 @@ $material-grid: extend(
 /// @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.
@@ -750,8 +792,8 @@ $material-grid: extend(
 /// @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
+/// @requires $light-grid
+/// @requires $fluent-elevation-grid
 $fluent-grid: extend(
     $light-grid,
     $fluent-elevation-grid,
@@ -795,20 +837,6 @@ $fluent-grid: extend(
             ),
         ),
 
-        row-selected-hover-background: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
-
-        row-selected-hover-text-color: (
-            contrast-color: (
-                'gray',
-                300,
-            ),
-        ),
-
         row-border-color: (
             color: (
                 'gray',
@@ -869,6 +897,34 @@ $fluent-grid: extend(
             ),
         ),
 
+        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',
@@ -915,7 +971,7 @@ $fluent-grid: extend(
 );
 
 /// Generates a bootstrap grid schema.
-/// @type {Map}
+/// @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.
@@ -928,12 +984,14 @@ $fluent-grid: extend(
 /// @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.
-/// @requires {Map} $light-grid
+/// @requires $light-grid
 $bootstrap-grid: extend(
     $light-grid,
     (
@@ -1005,6 +1063,20 @@ $bootstrap-grid: extend(
             ),
         ),
 
+        cell-selected-within-background: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+
+        cell-selected-within-text-color: (
+            contrast-color: (
+                'primary',
+                100,
+            ),
+        ),
+
         row-selected-background: (
             color: (
                 'primary',
@@ -1012,29 +1084,29 @@ $bootstrap-grid: extend(
             ),
         ),
 
-        cell-selected-within-background: (
+        row-selected-hover-background: (
             color: (
                 'primary',
                 100,
             ),
         ),
 
-        cell-selected-within-text-color: (
+        row-selected-hover-text-color: (
             contrast-color: (
                 'primary',
                 100,
             ),
         ),
 
-        row-selected-hover-background: (
+        body-column-selected-border-color: (
             color: (
                 'primary',
-                100,
+                50,
             ),
         ),
 
-        row-selected-hover-text-color: (
-            contrast-color: (
+        body-column-hover-selected-border-color: (
+            color: (
                 'primary',
                 100,
             ),
@@ -1076,7 +1148,7 @@ $bootstrap-grid: extend(
 );
 
 /// Generates an indigo grid schema.
-/// @type {Map}
+/// @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.
@@ -1089,14 +1161,17 @@ $bootstrap-grid: extend(
 /// @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} row-hover-background [color: ('gray', 200)] - The hover row background 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.
@@ -1133,7 +1208,7 @@ $bootstrap-grid: extend(
 /// @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
+/// @requires $light-grid
 $indigo-grid: extend(
     $light-grid,
     $indigo-elevation-grid,
@@ -1255,13 +1330,6 @@ $indigo-grid: extend(
             ),
         ),
 
-        row-hover-background: (
-            color: (
-                'gray',
-                200,
-            ),
-        ),
-
         sorted-header-icon-color: (
             color: (
                 'primary',
@@ -1276,13 +1344,6 @@ $indigo-grid: extend(
             ),
         ),
 
-        row-selected-background: (
-            color: (
-                'primary',
-                50,
-            ),
-        ),
-
         cell-selected-within-background: (
             color: (
                 'primary',
@@ -1304,6 +1365,13 @@ $indigo-grid: extend(
             ),
         ),
 
+        row-selected-background: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
+
         row-selected-hover-background: (
             color: (
                 'primary',
@@ -1318,6 +1386,20 @@ $indigo-grid: extend(
             ),
         ),
 
+        body-column-selected-border-color: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
+
+        body-column-hover-selected-border-color: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+
         pinned-border-color: (
             color: (
                 'gray',
@@ -1401,6 +1483,18 @@ $indigo-grid: extend(
             ),
         ),
 
+        body-column-border-color-odd: (
+            color: (
+                'surface',
+            ),
+        ),
+
+        body-column-border-color-even: (
+            color: (
+                'surface',
+            ),
+        ),
+
         row-even-background: (
             color: (
                 'surface',