igniteui-theming 25.1.0 → 25.2.0

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

@@ -10,14 +10,16 @@
 /// Generates the base dark button-group schema.
 /// @type Map
 /// @prop {Map} item-border-color [color: ('gray', 100)] - The border color between button group items.
-/// @prop {Map} item-hover-border-color [color: ('gray', 100)] - The hover border color between button group items.
-/// @prop {Map} item-focused-border-color [color: ('gray', 100)] - The focused border color for an item from the button group.
-/// @prop {Map} item-hover-background [color: ('gray', 100), .8] - The hover background color for button group items.
-/// @prop {Map} item-focused-background [color: ('gray', 700), .3] - The focused background 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-hover-border-color [color: ('gray', 200)] - The hover border color between button group items.
+/// @prop {Map} item-focused-border-color [color: ('gray', 200)] - The focused border color for an item from the button group.
+/// @prop {Map} item-focused-hover-border-color [color: ('gray', 300)] - The focused & hover border color for an item from the button group.
+/// @prop {Map} item-selected-background [color: ('gray', 100)] - The background color for a selected item in the button group.
+/// @prop {Map} item-selected-focus-background [color: ('gray', 100)] - The background color for a selected item in focus state in the button group.
 /// @prop {Map} item-selected-hover-background [color: ('gray', 300, .8)] - The hover background color for a selected item in hover or focus state in the button group.
+/// @prop {Map} item-selected-focus-hover-background [color: ('gray', 200)] - The background color for a selected item in focused & hover state in the button group.
 /// @prop {Map} item-selected-border-color [color: ('gray', 300)] - The border color for button group selected items.
-/// @prop {Map} item-selected-hover-border-color [color: ('gray', 300)] - The hover border color for button group selected items.
+/// @prop {Map} item-selected-hover-border-color [color: ('gray', 500)] - The hover border color for button group selected items.
+/// @prop {Map} item-active-border-color [color: ('gray', 100)] - The active border color for button group items.
 /// @prop {Map} item-disabled-border [color: ('gray', 100)] - The border color for a disabled item in the button group.
 /// @prop {Map} disabled-selected-border-color [color: ('gray', 100)] - The disabled border color for a selected item from the button group.
 $base-dark-button-group: (
@@ -31,37 +33,35 @@ $base-dark-button-group: (
     item-hover-border-color: (
         color: (
             'gray',
-            100,
+            200,
         ),
     ),
 
     item-focused-border-color: (
         color: (
             'gray',
-            100,
+            200,
         ),
     ),
 
-    item-hover-background: (
+    item-focused-hover-border-color: (
         color: (
             'gray',
-            100,
-            0.8,
+            300,
         ),
     ),
 
-    item-focused-background: (
+    item-selected-background: (
         color: (
             'gray',
-            700,
-            0.3,
+            100,
         ),
     ),
 
-    item-selected-background: (
+    item-selected-focus-background: (
         color: (
             'gray',
-            200,
+            100,
         ),
     ),
 
@@ -73,6 +73,13 @@ $base-dark-button-group: (
         ),
     ),
 
+    item-selected-focus-hover-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+
     item-selected-border-color: (
         color: (
             'gray',
@@ -83,7 +90,14 @@ $base-dark-button-group: (
     item-selected-hover-border-color: (
         color: (
             'gray',
-            300,
+            500,
+        ),
+    ),
+
+    item-active-border-color: (
+        color: (
+            'gray',
+            100,
         ),
     ),
 
@@ -109,18 +123,30 @@ $base-dark-button-group: (
 
 /// Generates a dark material button-group schema based on a mix of $light-button-group and $base-dark-button-group
 /// @type Map
-/// @prop {Map} item-selected-background [color: ('gray', 100)] - The background color for a selected item in the button group.
-/// @prop {Map} item-focused-hover-background [color: ('gray', 400, .5)] - The focused & hover background color for button group items.
-/// @prop {Map} item-selected-hover-background [color: ('gray', 300, .4)] - The background color for a selected item in hover state in the button group.
-/// @prop {Map} item-selected-focus-background [color: ('gray', 700, .28)] - The background color for a selected item in focus state in the button group.
-/// @prop {Map} item-selected-focus-hover-background [color: ('gray', 400, .5)] - The background color for a selected item in focused & hover state in the button group.
+/// @prop {Map} item-hover-background [color: ('gray', 100)] - The background color for button group items on hover.
+/// @prop {Map} item-focused-background [color: ('gray', 100)] - The focused background color for button group items.
+/// @prop {Map} item-focused-hover-background [color: ('gray', 100)] - The focused & hover background color for button group items.
+/// @prop {Map} item-selected-hover-background [color: ('gray', 100)] - The background color for a selected item in 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-background [color: ('gray', 200)] - The active background color for a selected item in the button group.
+/// @prop {Map} item-selected-active-border-color [color: ('gray', 500)] - The active border color for a selected item in the button group.
+/// @prop {Map} disabled-selected-background [color: ('gray', 50)] - The disabled background color for a selected item in the button group.
+/// @prop {Map} disabled-selected-text-color [color: ('gray', 200)] - The disabled text color for a selected item in the button group.
+/// @prop {Map} disabled-selected-icon-color [color: ('gray', 200)] - The disabled icon color for a selected item in the button group.
 /// @requires $material-button-group
 /// @requires $base-dark-button-group
 $dark-material-button-group: extend(
     $material-button-group,
     $base-dark-button-group,
     (
-        item-selected-background: (
+        item-hover-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        item-focused-background: (
             color: (
                 'gray',
                 100,
@@ -130,32 +156,56 @@ $dark-material-button-group: extend(
         item-focused-hover-background: (
             color: (
                 'gray',
-                400,
-                0.5,
+                100,
             ),
         ),
 
         item-selected-hover-background: (
             color: (
                 'gray',
-                300,
-                0.4,
+                100,
             ),
         ),
 
-        item-selected-focus-background: (
+        item-active-background: (
             color: (
                 'gray',
-                700,
-                0.28,
+                200,
             ),
         ),
 
-        item-selected-focus-hover-background: (
+        item-selected-active-background: (
             color: (
                 'gray',
-                400,
-                0.5,
+                200,
+            ),
+        ),
+
+        item-selected-active-border-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        disabled-selected-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        disabled-selected-text-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        disabled-selected-icon-color: (
+            color: (
+                'gray',
+                200,
             ),
         ),
     )
@@ -166,15 +216,19 @@ $dark-material-button-group: extend(
 /// @prop {Map} item-border-color [color: ('gray', 400)] - The border 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-focused-border-color [color: ('gray', 400)] - The focused border color for button group items.
+/// @prop {Map} item-focused-hover-border-color [color: ('gray', 400)] - The focused & hover border color for button group items.
 /// @prop {Map} item-hover-background [color: ('gray', 50)] - The background color for button group items on hover.
-/// @prop {Map} item-focused-background [color: ('gray', 100)] - The focused background color for button group items.
-/// @prop {Map} item-selected-background [color: ('gray', 200)] - The background color for button group selected items.
-/// @prop {Map} item-selected-border-color [color: ('gray', 400)] - The border color for button group selected items.
-/// @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-hover-background [color: ('gray', 400, .3)] - The background color for a selected item in hover or focus state in the button group.
-/// @prop {Map} item-selected-hover-border-color [color: ('gray', 400)] - The border color for a selected item in hover state in the button group.
+/// @prop {Map} item-focused-hover-background [color: ('gray', 50)] - The focused & hover background color for button group items.
+/// @prop {Map} item-selected-border-color [color: ('gray', 600)] - The border color for button group selected items.
+/// @prop {Map} item-selected-hover-background [color: ('gray', 100)] - The background color for a selected item in hover or focus 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-active-background [color: ('gray', 100)] - The active background color for button group items.
+/// @prop {Map} item-active-border-color [color: ('gray', 400)] - The active border color for button group items.
+/// @prop {Map} item-selected-active-background [color: ('gray', 300)] - The active background color for a selected item in the button group.
+/// @prop {Map} item-selected-active-border-color [color: ('gray', 600)] - The active border color for a selected item in the button group.
 /// @prop {Map} item-disabled-border [color: ('gray', 400)] - The border color for button group disabled items.
 /// @prop {Map} disabled-text-color [color: ('gray', 300)]- The text/icon color for a disabled 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-text-color [color: ('gray', 300)] - The disabled text color for a selected item in the button group.
 /// @prop {Map} disabled-selected-icon-color [color: ('gray', 300)] - The disabled icon 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.
@@ -205,6 +259,13 @@ $dark-fluent-button-group: extend(
             ),
         ),
 
+        item-focused-hover-border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
         item-hover-background: (
             color: (
                 'gray',
@@ -212,46 +273,59 @@ $dark-fluent-button-group: extend(
             ),
         ),
 
-        item-focused-background: (
+        item-focused-hover-background: (
             color: (
                 'gray',
-                100,
+                50,
             ),
         ),
 
-        item-selected-background: (
+        item-selected-border-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        item-selected-hover-background: (
             color: (
                 'gray',
                 200,
             ),
         ),
 
-        item-selected-border-color: (
+        item-selected-hover-border-color: (
             color: (
                 'gray',
-                400,
+                600,
             ),
         ),
 
-        item-selected-focus-background: (
+        item-active-background: (
             color: (
                 'gray',
-                300,
+                100,
             ),
         ),
 
-        item-selected-hover-background: (
+        item-active-border-color: (
             color: (
                 'gray',
                 400,
-                0.3,
             ),
         ),
 
-        item-selected-hover-border-color: (
+        item-selected-active-background: (
             color: (
                 'gray',
-                400,
+                300,
+            ),
+        ),
+
+        item-selected-active-border-color: (
+            color: (
+                'gray',
+                600,
             ),
         ),
 
@@ -269,6 +343,13 @@ $dark-fluent-button-group: extend(
             ),
         ),
 
+        disabled-selected-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
         disabled-selected-text-color: (
             color: (
                 'gray',
@@ -318,6 +399,11 @@ $dark-bootstrap-button-group: extend(
 /// @prop {Map} item-focused-border-color [color: ('gray', 100)] - The focused border color for an item from the button group.
 /// @prop {Map} item-focused-text-color [contrast-color: ('gray', 50, .8)] - The focused text color for button group items.
 /// @prop {Map} item-focused-background [contrast-color: ('gray', 50, .05)] - The focused background color for button group items.
+/// @prop {Map} item-focused-hover-background [contrast-color: ('gray', 50, .1)] - The focused & hover background color for button group items.
+/// @prop {Map} item-focused-hover-border-color [color: ('gray', 200)] - The focused & hover border color for an item from the button group.
+/// @prop {Map} item-focused-hover-text-color [contrast-color: ('gray', 50)] - The focused & hover text color for button group items.
+/// @prop {Map} item-active-background [contrast-color: ('gray', 50, .1)] - The active background color for button group items.
+/// @prop {Map} item-active-border-color [color: ('gray', 200)] - The active border color for button group items.
 /// @prop {Color} disabled-background-color [transparent] - The background color for a disabled item in the button group.
 /// @prop {Map} disabled-text-color [contrast-color: ('gray', 50, .2)] - The text/icon color for a disabled item in the button group.
 /// @prop {Map} item-disabled-border [color: ('gray', 50)] - The border color for a disabled item in the button group.
@@ -418,6 +504,43 @@ $dark-indigo-button-group: extend(
             ),
         ),
 
+        item-focused-hover-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.1,
+            ),
+        ),
+
+        item-focused-hover-border-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        item-focused-hover-text-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        item-active-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.1,
+            ),
+        ),
+
+        item-active-border-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
         disabled-background-color: transparent,
 
         disabled-text-color: (

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

@@ -26,7 +26,6 @@
 /// @prop {Map} row-selected-text-color [contrast-color: ('secondary', 'A700')] - The selected row text color.
 /// @prop {Map} row-selected-hover-text-color [contrast-color: ('secondary', 'A400')] - The selected row hover text color.
 /// @prop {Map} row-highlight [color: ('secondary', 500)] - The highlight color of a row.
-/// @prop {Map} row-ghost-background [color: ('primary', 900)] - The dragged row background color.
 /// @prop {Map} cell-selected-background [color: ('gray', 100)] - The selected cell background color.
 /// @prop {Map} cell-selected-text-color [contrast-color: ('gray', 100)] - The selected cell text color.
 /// @prop {Map} cell-selected-within-background [color: ('secondary', 'A400')] - The background of the selected cell inside a selected row/column.
@@ -155,13 +154,6 @@ $base-dark-grid: (
         ),
     ),
 
-    row-ghost-background: (
-        color: (
-            'primary',
-            900,
-        ),
-    ),
-
     cell-selected-within-background: (
         color: (
             'secondary',
@@ -507,7 +499,6 @@ $dark-bootstrap-grid: extend(
 /// @prop {Map} excel-filtering-actions-hover-background [contrast-color: ('gray', 50, .1)] - The background color of the excel style filtering options in hover/focus state.
 /// @prop {Map} excel-filtering-actions-disabled-foreground [contrast-color: ('gray', 50, .2)] - The text color of the excel style filtering options in disabled state.
 /// @prop {Map} excel-filtering-border-color [color: ('gray', 100)] - The border color used in the excel style filter.
-/// @prop {Map} row-ghost-background [color: ('gray', 100)] - The background color of the dragged row.
 /// @prop {Map} filtering-dialog-background [color: ('gray', 50)] - The background color of the advanced filtering dialog.
 /// @prop {Map} body-column-selected-border-color [color: ('primary', 900)] - The border color used for the body column when in group-row state.
 /// @prop {Map} body-column-hover-selected-border-color [color: ('primary', 700)] - The border color used for the body column when in group-row + hover state.
@@ -850,13 +841,6 @@ $dark-indigo-grid: extend(
             ),
         ),
 
-        row-ghost-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-
         filtering-dialog-background: (
             color: (
                 'gray',