igniteui-theming 25.1.0 → 25.2.0

package/sass/themes/schemas/components/light/_button-group.scss

@@ -19,8 +19,17 @@
 /// @prop {Map} item-hover-text-color [color: ('gray', 900)] - The hover text color for button group items.
 /// @prop {Map} item-focused-text-color [color: ('gray', 800)] - The focused text color for button group items.
 /// @prop {Map} item-focused-border-color [color: ('gray', 400)] - The focused border color for an item from the button group.
+/// @prop {Map} item-focused-hover-text-color [color: ('gray', 900)] - The focused & hover text color for button group items.
+/// @prop {Map} item-focused-hover-border-color [color: ('gray', 400)] - The focused & hover border color for an item from the button group.
+/// @prop {Map} item-focused-hover-background [color: ('gray', 200)] - The focused & hover background color for button group items.
+/// @prop {Map} item-selected-hover-text-color [color: ('gray', 900)] - The text color for a selected item in hover state in the button group.
+/// @prop {Map} item-selected-hover-icon-color [color: ('gray', 900)] - The icon color for a selected item in hover state in the button group.
+/// @prop {Map} item-selected-focus-background [color: ('gray', 300)] - The background color for a selected item in focus state in the button group.
+/// @prop {Map} item-selected-focus-hover-background [color: ('gray', 400)] - The background color for a selected item in focused & hover state in the button group.
+/// @prop {Map} item-selected-active-background [color: ('gray', 500)] - The active background color for a selected item in the button group.
+/// @prop {Map} item-active-border-color [color: ('gray', 500)] - The active border color for button group items.
+/// @prop {Map} item-selected-active-border-color [color: ('gray', 600)] - The active border color for a selected item in the button group.
 /// @prop {Map} disabled-background-color [color: ('gray', 50)] - The background color for a disabled item in the button group.
-/// @prop {Map} disabled-selected-background [color: ('gray', 500, .12)] - The disabled background color for a selected item in the button group.
 /// @prop {Number} elevation [2] - The elevation level, between 0-24, to be used for the button group shadow.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for button-group component.
 /// @prop {Number} default-size [2] - The default size used for the button-group component.
@@ -81,18 +90,80 @@ $light-button-group: extend(
             ),
         ),
 
-        disabled-background-color: (
+        item-focused-hover-text-color: (
             color: (
                 'gray',
-                50,
+                900,
             ),
         ),
 
-        disabled-selected-background: (
+        item-focused-hover-border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        item-focused-hover-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        item-selected-hover-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        item-selected-hover-icon-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        item-selected-focus-background: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        item-selected-focus-hover-background: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        item-selected-active-background: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        item-active-border-color: (
             color: (
                 'gray',
                 500,
-                0.12,
+            ),
+        ),
+
+        item-selected-active-border-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        disabled-background-color: (
+            color: (
+                'gray',
+                50,
             ),
         ),
 
@@ -125,23 +196,21 @@ $light-button-group: extend(
 /// @prop {Map} item-hover-text-color [color: ('gray', 800)] - The hover text color for button group items.
 /// @prop {Map} item-hover-icon-color [color: ('gray', 800)] - The hover icon color for button group items.
 /// @prop {Map} item-hover-border-color [color: ('gray', 400)] - The hover border color between button group items.
-/// @prop {Map} item-hover-background [color: ('gray', 300, .8)] - The hover background color for button group items.
-/// @prop {Map} item-focused-background [color: ('gray', 700, .4)] - The focused background color for button group items.
-/// @prop {Map} item-focused-hover-background [color: ('gray', 500, .5)] - The focused & hover background color for button group items.
-/// @prop {Map} item-selected-background [color: ('gray', 400)] - The background color for a selected item in the button group.
+/// @prop {Map} item-focused-background [color: ('gray', 200)] - The focused background color for button group items.
+/// @prop {Map} item-focused-hover-background [color: ('gray', 300)] - The focused & hover background color for button group items.
+/// @prop {Map} item-focused-hover-text-color [color: ('gray', 800)] - The focused & hover text color for button group items.
+/// @prop {Map} item-selected-background [color: ('gray', 200)] - The background color for a selected item in the button group.
 /// @prop {Map} item-selected-text-color [color: ('gray', 800)] - The text color for a selected item in the button group.
 /// @prop {Map} item-selected-icon-color [color: ('gray', 800)] - The icon color for a selected item in the button group.
 /// @prop {Map} item-selected-border-color [color: ('gray', 500)] - The border color for a selected item from the button group.
-/// @prop {Map} item-selected-hover-background [color: ('gray', 500, .4)] - The background color for a selected item in hover state in the button group.
-/// @prop {Map} item-selected-focus-background [color: ('gray', 700, .5)] - The background color for a selected item in focus state in the button group.
-/// @prop {Map} item-selected-focus-hover-background [color: ('gray', 600, .7)] - The background color for a selected item in focused & hover state in the button group.
+/// @prop {Map} item-selected-hover-background [color: ('gray', 300)] - The background color for a selected item in hover state in the button group.
+/// @prop {Map} item-active-background [color: ('gray', 400)] - The active background color for button group items.
 /// @prop {Map} item-selected-hover-border-color [color: ('gray', 500)] - The border color for a selected item in hover state in the button group.
-/// @prop {Map} item-selected-hover-text-color [color: ('gray', 900)] - The text color for a selected item in hover state in the button group.
-/// @prop {Map} item-selected-hover-icon-color [color: ('gray', 900)] - The icon color for a selected item in hover state in the button group.
 /// @prop {Map} disabled-text-color [color: ('gray', 400)] - The text/icon color for a disabled item in the button group.
 /// @prop {Map} item-disabled-border [color: ('gray', 400)] - The border color for a disabled item in the button group.
 /// @prop {Map} disabled-selected-text-color [color: ('gray', 400)] - The disabled text color for a selected item in the button group.
 /// @prop {Map} disabled-selected-icon-color [color: ('gray', 400)] - The disabled icon color for a selected item in the button group.
+/// @prop {Map} disabled-selected-background [color: ('gray', 100)] - The disabled background color for a selected item in the button group.
 /// @prop {Map} disabled-selected-border-color [color: ('gray', 400)] - The disabled border color for a selected item from the button group.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for button-group component.
 /// @prop {Number} default-size [3] - The default size used for the button-group component.
@@ -179,27 +248,24 @@ $material-button-group: extend(
             ),
         ),
 
-        item-hover-background: (
+        item-focused-background: (
             color: (
                 'gray',
-                300,
-                0.8,
+                200,
             ),
         ),
 
-        item-focused-background: (
+        item-focused-hover-background: (
             color: (
                 'gray',
-                700,
-                0.4,
+                300,
             ),
         ),
 
-        item-focused-hover-background: (
+        item-focused-hover-text-color: (
             color: (
                 'gray',
-                500,
-                0.5,
+                800,
             ),
         ),
 
@@ -220,7 +286,7 @@ $material-button-group: extend(
         item-selected-background: (
             color: (
                 'gray',
-                400,
+                200,
             ),
         ),
 
@@ -231,20 +297,6 @@ $material-button-group: extend(
             ),
         ),
 
-        item-selected-hover-text-color: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-
-        item-selected-hover-icon-color: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-
         item-selected-hover-border-color: (
             color: (
                 'gray',
@@ -255,24 +307,14 @@ $material-button-group: extend(
         item-selected-hover-background: (
             color: (
                 'gray',
-                500,
-                0.4,
-            ),
-        ),
-
-        item-selected-focus-background: (
-            color: (
-                'gray',
-                700,
-                0.5,
+                300,
             ),
         ),
 
-        item-selected-focus-hover-background: (
+        item-active-background: (
             color: (
                 'gray',
-                600,
-                0.7,
+                400,
             ),
         ),
 
@@ -304,6 +346,13 @@ $material-button-group: extend(
             ),
         ),
 
+        disabled-selected-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
         disabled-selected-border-color: (
             color: (
                 'gray',
@@ -329,22 +378,21 @@ $material-button-group: extend(
 /// @prop {Map} item-hover-border-color [color: ('gray', 600)] - The hover border color between button group items.
 /// @prop {Map} item-focused-text-color [color: ('gray', 900)] - The focused text color for button group items.
 /// @prop {Map} item-focused-border-color [color: ('gray', 700)] - The focused border color for an item from the button group.
-/// @prop {Map} item-focused-background [color: ('gray', 300)] - The focused background color for button group items.
-/// @prop {Map} item-focused-hover-background [color: ('gray', 200)] - The focused & hover background color for button group items.
+/// @prop {Map} item-focused-background [contrast-color: ('gray', 900)] - The focused background color for button group items.
+/// @prop {Map} item-focused-hover-border-color [color: ('gray', 600)] - The focused & hover border color for an item from the button group.
 /// @prop {Map} item-selected-background [color: ('gray', 300)] - The background color for a selected item in the button group.
 /// @prop {Map} item-selected-text-color [color: ('gray', 900)] - The text color for a selected item in the button group.
 /// @prop {Map} item-selected-icon-color [color: ('gray', 900)] - The icon color for a selected item in the button group.
 /// @prop {Map} item-selected-border-color [color: ('gray', 600)] - The border color for a selected item from the button group.
-/// @prop {Map} item-selected-hover-background [color: ('gray', 400, .3)] - The background color for a selected item in hover state in the button group.
+/// @prop {Map} item-selected-hover-background [color: ('gray', 400)] - The background color for a selected item in hover state in the button group.
 /// @prop {Map} item-selected-hover-border-color [color: ('gray', 600)] - The border color for a selected item in hover state in the button group.
-/// @prop {Map} item-selected-hover-text-color [color: ('gray', 900)] - The text color for a selected item in hover state in the button group.
-/// @prop {Map} item-selected-hover-icon-color [color: ('gray', 900)] - The icon color for a selected item in hover state in the button group.
-/// @prop {Map} item-selected-focus-background [color: ('gray', 400)] - The background color for a selected item in focus state in the button group.
-/// @prop {Map} item-selected-focus-hover-background [color: ('gray', 400, .3)] - The background color for a selected item in focused & hover state in the button group.
+/// @prop {Map} item-active-background [color: ('gray', 300)] - The active background color for button group items.
+/// @prop {Map} item-active-border-color [color: ('gray', 600)] - The active border color for button group items.
 /// @prop {Map} disabled-text-color [color: ('gray', 500)] - The text/icon color for a disabled item in the button group.
 /// @prop {Map} item-disabled-border [color: ('gray', 600)] - The border color for a disabled item in the button group.
 /// @prop {Map} disabled-selected-text-color [color: ('gray', 500)] - The disabled text color for a selected item in the button group.
 /// @prop {Map} disabled-selected-icon-color [color: ('gray', 500)] - The disabled icon color for a selected item in the button group.
+/// @prop {Map} disabled-selected-background [color: ('gray', 200)] - The disabled background color for a selected item in the button group.
 /// @prop {Map} disabled-selected-border-color [color: ('gray', 600)] - The disabled border color for a selected item from the button group.
 /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for button-group component.
@@ -397,16 +445,16 @@ $fluent-button-group: extend(
         ),
 
         item-focused-background: (
-            color: (
+            contrast-color: (
                 'gray',
-                300,
+                900,
             ),
         ),
 
-        item-focused-hover-background: (
+        item-focused-hover-border-color: (
             color: (
                 'gray',
-                200,
+                600,
             ),
         ),
 
@@ -456,21 +504,6 @@ $fluent-button-group: extend(
             color: (
                 'gray',
                 400,
-                0.3,
-            ),
-        ),
-
-        item-selected-hover-text-color: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-
-        item-selected-hover-icon-color: (
-            color: (
-                'gray',
-                900,
             ),
         ),
 
@@ -481,18 +514,17 @@ $fluent-button-group: extend(
             ),
         ),
 
-        item-selected-focus-background: (
+        item-active-background: (
             color: (
                 'gray',
-                400,
+                300,
             ),
         ),
 
-        item-selected-focus-hover-background: (
+        item-active-border-color: (
             color: (
                 'gray',
-                400,
-                0.3,
+                600,
             ),
         ),
 
@@ -524,6 +556,13 @@ $fluent-button-group: extend(
             ),
         ),
 
+        disabled-selected-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
         disabled-selected-border-color: (
             color: (
                 'gray',
@@ -558,8 +597,11 @@ $fluent-button-group: extend(
 /// @prop {Map} item-hover-icon-color [contrast-color: ('primary', 600)] - The hover icon color for button group items.
 /// @prop {Map} item-hover-border-color [color: ('primary', 500)] - The hover border color between button group items.
 /// @prop {Map} item-focused-text-color [contrast-color: ('primary', 600)] - The focused text color for button group items.
-/// @prop {Map} item-focused-background [color: ('primary', 900, .6)] - The focused background color for button group items.
-/// @prop {Map} item-focused-hover-background [color: ('primary', 600, .5)] - The focused & hover background color for button group items.
+/// @prop {Map} item-focused-background [color: ('primary', 500)] - The focused background color for button group items.
+/// @prop {Map} item-focused-hover-background [color: ('primary', 600)] - The focused & hover background color for button group items.
+/// @prop {Map} item-focused-border-color [color: ('primary', 500)] - The focused border color for an item from the button group.
+/// @prop {Map} item-focused-hover-text-color [contrast-color: ('primary', 600)] - The focused & hover text color for button group items.
+/// @prop {Map} item-focused-hover-border-color [color: ('primary', 600)] - The focused & hover border color for an item from the button group.
 /// @prop {Map} item-selected-background [color: ('primary', 700)] - The background color for a selected item in the button group.
 /// @prop {Map} item-selected-text-color [contrast-color: ('primary', 700)] - The text color for a selected item in the button group.
 /// @prop {Map} item-selected-icon-color [contrast-color: ('primary', 700)] - The icon color for a selected item in the button group.
@@ -568,11 +610,16 @@ $fluent-button-group: extend(
 /// @prop {Map} item-selected-hover-border-color [color: ('primary', 700)] - The border color for a selected item in hover state in the button group.
 /// @prop {Map} item-selected-hover-text-color [contrast-color: ('primary', 700)] - The text color for a selected item in hover state in the button group.
 /// @prop {Map} item-selected-hover-icon-color [contrast-color: ('primary', 700)] - The icon color for a selected item in hover state in the button group.
-/// @prop {Map} item-selected-focus-background [color: ('primary', 900, .9)] - The background color for a selected item in focus state in the button group.
-/// @prop {Map} item-selected-focus-hover-background [color: ('primary', 600, .5)] - The background color for a selected item in focused & hover state in the button group.
-/// @prop {Map} disabled-background-color [color: ('primary', 100)] - The background color for a disabled item in the button group.
+/// @prop {Map} item-selected-focus-background [color: ('primary', 700)] - The background color for a selected item in focus state in the button group.
+/// @prop {Map} item-selected-focus-hover-background [color: ('primary', 800)] - The background color for a selected item in focused & hover state in the button group.
+/// @prop {Map} item-active-background [color: ('primary', 800)] - The active background color for button group items.
+/// @prop {Map} item-active-border-color [color: ('primary', 800)] - The active border color for button group items.
+/// @prop {Map} item-selected-active-background [color: ('primary', 900)] - The active background color for a selected item in the button group.
+/// @prop {Map} item-selected-active-border-color [color: ('primary', 900)] - The active border color for a selected item in the button group.
+/// @prop {Map} disabled-background-color [color: ('primary', 50)] - The background color for a disabled item in the button group.
 /// @prop {Map} disabled-text-color [color: ('primary', 200)] - The text/icon color for a disabled item in the button group.
-/// @prop {Map} item-disabled-border [color: ('primary', 100)] - The border color for a disabled item in the button group.
+/// @prop {Map} item-disabled-border [color: ('primary', 50)] - The border color for a disabled item in the button group.
+/// @prop {Map} disabled-selected-background [color: ('primary', 100)] - The disabled background color for a selected item in the button group.
 /// @prop {Map} disabled-selected-text-color [color: ('primary', 200)] - The disabled text color for a selected item in the button group.
 /// @prop {Map} disabled-selected-icon-color [color: ('primary', 200)] - The disabled icon color for a selected item in the button group.
 /// @prop {Map} disabled-selected-border-color [color: ('primary', 100)] - The disabled border color for a selected item from the button group.
@@ -663,8 +710,7 @@ $bootstrap-button-group: extend(
         item-focused-background: (
             color: (
                 'primary',
-                900,
-                0.6,
+                500,
             ),
         ),
 
@@ -672,7 +718,27 @@ $bootstrap-button-group: extend(
             color: (
                 'primary',
                 600,
-                0.5,
+            ),
+        ),
+
+        item-focused-border-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        item-focused-hover-text-color: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        item-focused-hover-border-color: (
+            color: (
+                'primary',
+                600,
             ),
         ),
 
@@ -735,23 +801,49 @@ $bootstrap-button-group: extend(
         item-selected-focus-background: (
             color: (
                 'primary',
-                900,
-                0.9,
+                700,
             ),
         ),
 
         item-selected-focus-hover-background: (
             color: (
                 'primary',
-                600,
-                0.5,
+                800,
+            ),
+        ),
+
+        item-active-background: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
+
+        item-active-border-color: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
+
+        item-selected-active-background: (
+            color: (
+                'primary',
+                900,
+            ),
+        ),
+
+        item-selected-active-border-color: (
+            color: (
+                'primary',
+                900,
             ),
         ),
 
         disabled-background-color: (
             color: (
                 'primary',
-                100,
+                50,
             ),
         ),
 
@@ -763,6 +855,13 @@ $bootstrap-button-group: extend(
         ),
 
         item-disabled-border: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
+
+        disabled-selected-background: (
             color: (
                 'primary',
                 100,
@@ -804,7 +903,6 @@ $bootstrap-button-group: extend(
 /// @prop {Map} item-hover-icon-color [color: ('gray', 700)] - The hover icon color for button group items.
 /// @prop {Map} item-hover-border-color [color: ('gray', 500)] - The hover border color between button group items.
 /// @prop {Map} item-focused-background [color: ('gray', 50)] - The focused background color for button group items.
-/// @prop {Map} item-focused-hover-background [color: ('gray', 200)] - The focused & hover background color for button group items.
 /// @prop {Map} item-selected-background [color: ('primary', 500)] - The background color for a selected item in the button group.
 /// @prop {Map} item-selected-text-color [contrast-color: ('primary', 500)] - The text color for a selected item in the button group.
 /// @prop {Map} item-selected-icon-color [contrast-color: ('primary', 500, .8)] - The icon color for a selected item in the button group.
@@ -815,6 +913,9 @@ $bootstrap-button-group: extend(
 /// @prop {Map} item-selected-hover-icon-color [contrast-color: ('primary', 500)] - The icon color for a selected item in hover state in the button group.
 /// @prop {Map} item-selected-focus-background [color: ('primary', 500)] - The background color for a selected item in focus state in the button group.
 /// @prop {Map} item-selected-focus-hover-background [color: ('primary', 400)] - The background color for a selected item in focused & hover state in the button group.
+/// @prop {Map} item-active-background [color: ('gray', 200)] - The active background color for button group items.
+/// @prop {Map} item-selected-active-border-color [color: ('primary', 400)] - The active border color for a selected item in the button group.
+/// @prop {Map} item-selected-active-background [color: ('primary', 400)] - The active background color for a selected item in the button group.
 /// @prop {Map} disabled-background-color [contrast-color: ('gray', 900)] - The background color for a disabled item in the button group.
 /// @prop {Map} disabled-text-color [color: ('gray', 900, .2)] - The text/icon color for a disabled item in the button group.
 /// @prop {Map} item-disabled-border [color: ('gray', 300)] - The border color for a disabled item in the button group.
@@ -873,10 +974,10 @@ $indigo-button-group: extend(
             ),
         ),
 
-        item-focused-hover-background: (
+        item-focused-hover-border-color: (
             color: (
                 'gray',
-                200,
+                500,
             ),
         ),
 
@@ -951,6 +1052,27 @@ $indigo-button-group: extend(
             ),
         ),
 
+        item-active-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        item-selected-active-border-color: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+
+        item-selected-active-background: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+
         disabled-background-color: (
             contrast-color: (
                 'gray',

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

@@ -86,14 +86,15 @@
 /// @prop {Map} excel-filtering-actions-hover-background [color: ('gray', 100)] - The background color of the excel style filtering options in hover/focus state.
 /// @prop {Map} excel-filtering-actions-disabled-foreground [color: ('gray', 400)] - The text color of the excel style filtering options in disabled state.
 /// @prop {Map} excel-filtering-border-color [color: ('gray', 300)] - The border color used in the excel style filter.
-/// @prop {Map} row-drag-color [color: ('gray', 200))] - The color of the drag handle.
+/// @prop {Map} row-drag-color [color: ('gray', 800)] - The color of the drag handle.
 /// @prop {Number} grid-elevation [2] - The elevation level, between 0-24, to be used for the grid.
 /// @prop {Number} drag-elevation [5] - The elevation level, between 0-24, to be used for movable elements (ex. column header).
 /// @prop {List} drop-area-border-radius [(rem(16px), rem(0), rem(16px))] - The border radius used for drop-area.
 /// @prop {List} header-size [(rem(32px), rem(40px), rem(50px))] - The size used for the grid header.
 /// @prop {List} drop-area-size [(rem(24px), rem(24px), rem(32px))] - The size used for the grid drop area.
 /// @prop {List} group-area-size [(rem(41), rem(49px), rem(57px))] - The size used for the grid group area.
-/// @prop {Color} row-ghost-background [color: 'primary', 50] - The background color of the dragged row.
+/// @prop {Color} row-ghost-background [color: ('gray', 50)] - The background color of the dragged row.
+/// @prop {Color} row-ghost-border-color [color: ('gray', 500)] - The border color of the dragged row.
 /// @prop {Color} summaries-patch-background [color: ('gray', 300)] - The leading summaries patch backround. Used in hierarchical grids.
 /// @prop {String} active-state-border-style ['solid'] - The border style used for row active state and cell active state.
 /// @prop {Map} typography [header: (comfortable: (value: 'overline'), compact: (value: 'subtitle-1'))] - The typography styles used for the component.
@@ -361,7 +362,7 @@ $light-grid: extend(
         row-drag-color: (
             color: (
                 'gray',
-                200,
+                800,
             ),
         ),
 
@@ -611,11 +612,18 @@ $light-grid: extend(
 
         row-ghost-background: (
             color: (
-                'primary',
+                'gray',
                 50,
             ),
         ),
 
+        row-ghost-border-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
         drop-area-border-radius: (
             border-radius: (
                 rem(16px),
@@ -831,7 +839,6 @@ $material-grid: extend(
 /// @prop {Map} group-row-selected-background [color: ('gray', 100)] - The drop area background on drop color.
 /// @prop {Map} group-count-text-color [color: ('gray', 700)] - The grid group row cont badge text color.
 /// @prop {Map} filtering-header-text-color [color: ('gray', 900)] - The text color of the filtered column header.
-/// @prop {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).
 /// @prop {List} drop-area-border-radius [(rem(2px), rem(0), rem(16px))] - The border radius used for drop-area.
@@ -994,10 +1001,6 @@ $fluent-grid: extend(
             ),
         ),
 
-        row-ghost-background: (
-            color: 'surface',
-        ),
-
         drop-area-border-radius: (
             border-radius: (
                 rem(2px),
@@ -1268,7 +1271,7 @@ $bootstrap-grid: extend(
 /// @prop {Map} excel-filtering-actions-icon-color [color: ('gray', 600)] - The icon color of the excel style filtering options.
 /// @prop {Map} excel-filtering-actions-hover-icon-color [color: ('gray', 700)] - The icon color of the excel style filtering options in hover/focus state.
 /// @prop {Map} excel-filtering-actions-hover-background [color: ('gray', 200)] - The background color of the excel style filtering options in hover/focus state.
-/// @prop {Map} row-drag-color [color: ('gray', 800, .75))] - The color of the drag handle.
+/// @prop {Color} row-ghost-background [color: ('surface')] - The background color of the dragged row.
 /// @prop {Map} summaries-patch-background [color: ('surface')] - The leading summaries patch backround. Used in hierarchical grids.
 /// @requires $light-grid
 $indigo-grid: extend(
@@ -1702,18 +1705,9 @@ $indigo-grid: extend(
             ),
         ),
 
-        row-drag-color: (
-            color: (
-                'gray',
-                800,
-                0.75,
-            ),
-        ),
-
         row-ghost-background: (
             color: (
-                'gray',
-                200,
+                'surface',
             ),
         ),
 

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-© Copyright 2022 INFRAGISTICS. All Rights Reserved.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.