igniteui-theming 10.1.0 → 10.2.0-beta.1

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

@@ -11,13 +11,13 @@
 /// @type {Map}
 /// @prop {Color} background-color [inherit] - The summaries background color is inherited from the grid footer.
 /// @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 {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} border-color [color: ('gray', 400)] - The summaries border 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.
+/// @prop {Map} pinned-border-color [color: ('gray', 400)] - The border color of the summary panel.
 $light-grid-summary: (
     background-color: inherit,
 
@@ -69,8 +69,8 @@ $material-grid-summary: $light-grid-summary;
 /// 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} border-color [color: ('gray', 100)] - The summaries border color.
-/// @prop {map} pinned-border-color [color: ('gray', 300)] - The border color of the summary panel.
+/// @prop {Map} border-color [color: ('gray', 100)] - The summaries border 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(
     $light-grid-summary,
@@ -104,39 +104,30 @@ $bootstrap-grid-summary: $light-grid-summary;
 
 /// Generates an indigo grid-summary schema.
 /// @type {Map}
-/// @prop {Map} background-color [color: ('gray', 100)] - The summaries background color is inherited from the grid footer.
-/// @prop {map} label-hover-color [color: ('primary', 900)] - The summaries hover label color.
-/// @prop {map} border-color [color: ('primary', 50)] - The summaries border color.
-/// @prop {map} pinned-border-color [color: ('primary', 200)] - The border color of the summary panel.
+/// @prop {Map} background-color [color: ('surface')] - The summaries background color is inherited from the grid footer.
+/// @prop {Map} label-hover-color [color: ('primary', 500)] - The summaries hover label color.
+/// @prop {Map} pinned-border-color [color: ('primary', 400)] - The border color of the summary panel.
 /// @requires {Map} $light-grid-summary
 $indigo-grid-summary: extend(
     $light-grid-summary,
     (
         background-color: (
             color: (
-                'gray',
-                100,
+                'surface',
             ),
         ),
 
         label-hover-color: (
             color: (
                 'primary',
-                900,
-            ),
-        ),
-
-        border-color: (
-            color: (
-                'primary',
-                50,
+                500,
             ),
         ),
 
         pinned-border-color: (
             color: (
                 'primary',
-                200,
+                400,
             ),
         ),
     )

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

@@ -18,6 +18,7 @@
 /// @prop {Map} item-focus-background [color: ('gray', 100)] - The toolbar drop-down item focus background color.
 /// @prop {Map} item-focus-text-color [color: ('gray', 600)] - The toolbar drop-down item focus text color.
 /// @prop {List} size [(rem(44px), rem(52px), rem(58px))] - The size used for the grid toolbar min-height.
+/// @prop {Map} border-color [color: ('gray', 300)] - The toolbar border-bottom color.
 $light-grid-toolbar: (
     background-color: (
         color: (
@@ -81,6 +82,13 @@ $light-grid-toolbar: (
             rem(58px),
         ),
     ),
+
+    border-color: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
 );
 
 /// Generates a material grid-toolbar schema.
@@ -102,29 +110,43 @@ $fluent-grid-toolbar: extend(
 );
 
 /// Generates a bootstrap grid-toolbar schema.
+/// @prop {Map} border-color [color: ('gray', 100)] - The toolbar border-bottom color.
 /// @type {Map}
 /// @requires {Map} $light-grid-toolbar
-$bootstrap-grid-toolbar: $light-grid-toolbar;
+$bootstrap-grid-toolbar: extend(
+    $light-grid-toolbar,
+    (
+        border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
 
 /// Generates an indigo grid-toolbar schema.
 /// @type {Map}
-/// @prop {Map} background-color [color: ('gray', 100)] - The toolbar background color.
-/// @prop {Map} title-text-color [color: ('primary', 500)] - The toolbar title text color.
+/// @prop {Color} background-color [transparent] - The toolbar background color.
+/// @prop {Map} title-text-color [color: ('gray', 700)] - The toolbar title text color.
+/// @prop {Map} border-color [color: ('gray', 900, .3)] - The toolbar border-bottom color.
 /// @requires {Map} $light-grid-toolbar
 $indigo-grid-toolbar: extend(
     $light-grid-toolbar,
     (
-        background-color: (
+        background-color: transparent,
+
+        title-text-color: (
             color: (
                 'gray',
-                100,
+                700,
             ),
         ),
-
-        title-text-color: (
+        border-color: (
             color: (
-                'primary',
-                500,
+                'gray',
+                900,
+                0.3,
             ),
         ),
     )

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

@@ -19,14 +19,14 @@
 /// @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 {Color} ghost-header-background [color: ('gray', 50)] - The dragged header background color.
-/// @prop {Color} content-background [color: ('gray', 50)] - The table body background 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 {Color} row-odd-background [color: ('gray', 50)] - The background color of odd rows.
-/// @prop {Color} row-even-background [color: ('gray', 50)] - The background color of even rows.
+/// @prop {Map} row-odd-background [color: ('gray', 50)] - The background color of odd rows.
+/// @prop {Map} 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 {Color} tree-selected-filtered-row-text-color [color: ('primary', 400)] - The selected filtered row text color of the tree.
+/// @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} row-hover-text-color [contrast-color: ('gray', 200)] - The hover row text color.
@@ -38,7 +38,7 @@
 /// @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.
+/// @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.
@@ -68,13 +68,13 @@
 /// @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 {Color} filtering-header-background [color: ('gray', 50)] - The background color of the filtered column header.
+/// @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-background-and [color: ('primary', 300)] - The background color of advanced filtering "AND" condition.
 /// @prop {Map} filtering-background-and--focus [color: ('primary', 700)] - The background color on focus/selected of advanced filtering "AND" condition.
 /// @prop {Map} filtering-background-or [color: ('secondary', 300)] - The background color of advanced filtering "OR" condition.
 /// @prop {Map} filtering-background-or--focus [color: ('secondary', 700)] - The background color on focus/selected of advanced filtering "OR" condition.
-/// @prop {Color} filtering-row-background [color: 'gray', 50)] - The background color of the filtering row.
+/// @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} 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.
@@ -643,7 +643,7 @@ $light-grid: extend(
 /// @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} 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.
@@ -752,7 +752,7 @@ $material-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} 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.
@@ -924,8 +924,8 @@ $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-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.
@@ -1056,49 +1056,75 @@ $bootstrap-grid: extend(
 
 /// Generates an indigo grid schema.
 /// @type {Map}
-/// @prop {Color} header-text-color [color: 'primary'] - The table header text color.
+/// @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', 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).
-/// @prop {Map} header-border-color [color: ('primary', 500, .24)] - The color used for header borders.
+/// @prop {Map} header-border-color [color: ('gray', 400)] - The color used for header borders.
 /// @prop {Map} filtering-header-text-color [color: ('primary', 900)] - The text color of the filtered column header.
-/// @prop {Map} filtering-background-or [color: ('warn', 500, .72)] - The background color of advanced filtering "OR" condition.
-/// @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 {Color} ghost-header-background [color: 'primary'] - The dragged header background color.
+/// @prop {Map} filtering-row-background [contrast-color: ('gray', 900)] - The background color of the filtering row.
+/// @prop {Map} filtering-background-and [color: ('primary', 400)] - The background color of advanced filtering "AND" condition.
+/// @prop {Map} filtering-background-and--focus [color: ('primary', 300)] - The background color on focus/selected of advanced filtering "AND" condition.
+/// @prop {Map} filtering-background-or [color: ('success', 500)] - The background color of advanced filtering "OR" condition.
+/// @prop {Map} filtering-background-or--focus [color: ('success', 400)] - The background color on focus/selected of advanced filtering "OR" condition.
+/// @prop {Map} edited-row-indicator [color: ('primary', 400)] - The indicator's color of edited row.
+/// @prop {Map} cell-selected-background [color: ('gray', 200)] - The selected cell background color.
+/// @prop {Map} 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-odd-background [color: ('surface')] - The background color of odd rows.
+/// @prop {Map} row-even-background [color: ('surface')] - The background color of even rows.
+/// @prop {Map} row-odd-text-color [color: ('gray', 800)] - The text color of odd rows.
+/// @prop {Map} row-even-text-color [color: ('gray', 800)] - The text color of even rows.
+/// @prop {Map} row-border-color [color: ('gray', 300)] - The row bottom border color.
 /// @prop {Map} row-highlight [color: 'primary'] - The grid row highlight color.
 /// @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} sorted-header-icon-color [color: ('primary', 400)] - 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.
-/// @prop {Map} row-selected-background [color: ('primary', 100)] - The selected row background 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: ('primary', 200)] - The color of the pinned border.
-/// @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} 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'] - The text color in edit mode.
 /// @prop {Map} grouparea-color [color: 'primary'] - The grid group area color.
-/// @prop {Map} drop-area-text-color [contrast-color: ('gray', 200)] - The drop area text color.
+/// @prop {Map} drop-area-text-color [color: ('gray', 600)] - 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} 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: ('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.
 /// @prop {Map} group-count-text-color [contrast-color: ('primary', 500)] - The grid group row cont badge text color.
-/// @prop {Map} expand-icon-color [color: ('primary', 200)] - The grid row expand icon color.
+/// @prop {Map} expand-icon-color [color: ('gray', 600)] - The grid row expand icon color.
+/// @prop {Map} cell-selected-text-color [color: ('gray', 800)] - The selected cell text color.
 /// @prop {Map} cell-selected-within-background [color: ('primary', 200)] - The background of the selected cell inside a selected row/column.
 /// @prop {Map} cell-selected-within-text-color [contrast-color: ('primary', 200)] - 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: 'surface'] - The background for the cell in editing mode.
 /// @prop {Map} row-selected-hover-text-color [contrast-color: ('primary', 50)] - The selected row hover text color.
+/// @prop {Map} active-expand-icon-color [color: ('gray', 600)] - The drop area background on drop color.
 /// @requires {Map} $light-grid
 $indigo-grid: extend(
     $light-grid,
     (
+        content-background: (
+            color: (
+                'surface',
+            ),
+        ),
+
+        header-background: (
+            color: (
+                'surface',
+            ),
+        ),
+
         header-text-color: (
             color: (
-                'primary',
-                500,
+                'gray',
+                800,
             ),
         ),
 
@@ -1118,9 +1144,8 @@ $indigo-grid: extend(
 
         header-border-color: (
             color: (
-                'primary',
-                500,
-                0.24,
+                'gray',
+                400,
             ),
         ),
 
@@ -1131,29 +1156,52 @@ $indigo-grid: extend(
             ),
         ),
 
+        filtering-row-background: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        filtering-background-and: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+
+        filtering-background-and--focus: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
         filtering-background-or: (
             color: (
-                'warn',
+                'success',
                 500,
-                0.72,
             ),
         ),
 
         filtering-background-or--focus: (
-            color: 'warn',
+            color: (
+                'success',
+                400,
+            ),
         ),
 
         edited-row-indicator: (
             color: (
                 'primary',
-                500,
+                400,
             ),
         ),
 
         cell-selected-background: (
             color: (
-                'primary',
-                100,
+                'gray',
+                200,
             ),
         ),
 
@@ -1165,9 +1213,9 @@ $indigo-grid: extend(
         ),
 
         cell-selected-text-color: (
-            contrast-color: (
-                'primary',
-                100,
+            color: (
+                'gray',
+                800,
             ),
         ),
 
@@ -1194,8 +1242,8 @@ $indigo-grid: extend(
 
         row-border-color: (
             color: (
-                'primary',
-                50,
+                'gray',
+                300,
             ),
         ),
 
@@ -1216,7 +1264,7 @@ $indigo-grid: extend(
         sorted-header-icon-color: (
             color: (
                 'primary',
-                500,
+                400,
             ),
         ),
 
@@ -1230,24 +1278,28 @@ $indigo-grid: extend(
         row-selected-background: (
             color: (
                 'primary',
-                100,
+                50,
             ),
         ),
 
         cell-selected-within-background: (
             color: (
                 'primary',
-                200,
+                100,
             ),
         ),
 
         cell-selected-within-text-color: (
             contrast-color: (
                 'primary',
-                200,
+                100,
             ),
         ),
 
+        cell-editing-background: (
+            color: 'surface',
+        ),
+
         row-selected-hover-background: (
             color: (
                 'primary',
@@ -1264,22 +1316,22 @@ $indigo-grid: extend(
 
         pinned-border-color: (
             color: (
-                'primary',
-                300,
+                'gray',
+                400,
             ),
         ),
 
         resize-line-color: (
             color: (
                 'primary',
-                500,
+                400,
             ),
         ),
 
         drop-indicator-color: (
             color: (
                 'primary',
-                500,
+                400,
             ),
         ),
 
@@ -1298,9 +1350,9 @@ $indigo-grid: extend(
         ),
 
         drop-area-text-color: (
-            contrast-color: (
+            color: (
                 'gray',
-                200,
+                600,
             ),
         ),
 
@@ -1312,9 +1364,15 @@ $indigo-grid: extend(
         ),
 
         root-summaries-background: (
+            color: (
+                'surface',
+            ),
+        ),
+
+        root-summaries-text-color: (
             color: (
                 'gray',
-                100,
+                800,
             ),
         ),
 
@@ -1349,7 +1407,47 @@ $indigo-grid: extend(
         expand-icon-color: (
             color: (
                 'primary',
-                200,
+                600,
+            ),
+        ),
+
+        cell-active-border-color: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+
+        row-odd-background: (
+            color: (
+                'surface',
+            ),
+        ),
+
+        row-even-background: (
+            color: (
+                'surface',
+            ),
+        ),
+
+        row-odd-text-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        row-even-text-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        active-expand-icon-color: (
+            color: (
+                'gray',
+                600,
             ),
         ),
     )

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

@@ -12,7 +12,7 @@
 /// @prop {Map} text-color [color: ('gray', 800)] - The text color.
 /// @prop {Map} background-color [color: ('gray', 100)] - The background color of the paging panel.
 /// @prop {Map} border-color [color: ('gray', 200)] - The border color of the paging panel.
-/// @prop {List} size [(rem(40px), rem(48px), rem(56px))] - The size used for the paginator.
+/// @prop {List} size [(rem(44px), rem(48px), rem(56px))] - The size used for the paginator.
 $light-pagination: (
     text-color: (
         color: (
@@ -34,6 +34,7 @@ $light-pagination: (
             200,
         ),
     ),
+
     size: (
         sizable: (
             rem(44px),
@@ -87,23 +88,24 @@ $bootstrap-pagination: extend(
 
 /// Generates an indigo pagination schema.
 /// @type {Map}
-/// @prop {Map} text-color [color: ('gray', 700)] - The text color.
-/// @prop {Map} border-color [color: ('gray', 100)] - The border color of the paging panel.
+/// @prop {Map} background-color [contrast-color: ('gray', 900)] - The background color of the paging panel.
+/// @prop {Map} border-color [color: ('gray', 900, .3)] - The border color of the paging panel.
 /// @requires {Map} $light-pagination
 $indigo-pagination: extend(
     $light-pagination,
     (
-        text-color: (
-            color: (
+        background-color: (
+            contrast-color: (
                 'gray',
-                700,
+                900,
             ),
         ),
 
         border-color: (
             color: (
                 'gray',
-                100,
+                900,
+                0.3,
             ),
         ),
     )