igniteui-theming 4.2.0 → 4.3.0

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

@@ -10,21 +10,15 @@
 
 /// Generates a light button group schema.
 /// @type {Map}
-/// @prop {Map} item-text-color [color: ('gray', 700)]- The text color for button group items.
-/// @prop {Map} item-background [color: ('gray', 50)] - The background color for button group items.
+/// @prop {Map} idle-shadow-color [transparent] - The outline color of button group items.
+/// @prop {Map} item-background [color: ('gray', 50)] - The background color for button group items .
 /// @prop {Map} item-border-color [color: ('gray', 400)] - The border color between 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-hover-text-color [color: ('gray', 800)] - The hover text color for button group items.
-/// @prop {Map} item-hover-background [color: ('gray', 300)] - The hover background color for button group items.
 /// @prop {Map} item-focused-background [color: ('gray', 300)] - The focused background color for button group items.
+/// @prop {Map} item-selected-border-color [color: ('gray', 500)] - The border color for a selected item from 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-text-color [color: ('gray', 400)]- The text/icon color for a disabled 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} item-disabled-border [color: ('gray', 400)] - The border color for a disabled 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-background [color: ('gray', 400)] - The background 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, .8)] - The background color for a selected item in hover or focus state in the button group.
-/// @prop {Map} idle-shadow-color [transparent] - The outline color of button group items.
 /// @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.
@@ -55,93 +49,110 @@ $light-button-group: extend(
             ),
         ),
 
-        item-text-color: (
+        item-focused-background: (
             color: (
                 'gray',
-                700,
+                300,
             ),
         ),
 
-        item-hover-text-color: (
+        item-selected-border-color: (
             color: (
                 'gray',
-                800,
+                500,
             ),
         ),
 
-        item-hover-background: (
+        disabled-text-color: (
             color: (
                 'gray',
-                300,
+                400,
             ),
         ),
 
-        item-focused-background: (
+        disabled-background-color: (
             color: (
                 'gray',
-                300,
+                50,
             ),
         ),
 
-        item-selected-text-color: (
+        item-disabled-border: (
             color: (
                 'gray',
-                800,
+                400,
             ),
         ),
 
-        item-selected-background: (
-            color: (
-                'gray',
-                400,
+        border-radius: (
+            border-radius: (
+                rem(4px),
+                rem(0),
+                rem(20px),
             ),
         ),
 
-        item-selected-hover-background: (
+        default-size: 2,
+    )
+);
+
+/// Generates a material button group schema.
+/// @type {Map}
+/// @prop {Map} item-text-color [color: ('gray', 700)]- The text color for button group items.
+/// @prop {Map} item-hover-text-color [color: ('gray', 800)] - The hover text color for button group items.
+/// @prop {Map} item-hover-background [color: ('gray', 300)] - The 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-selected-hover-background [color: ('gray', 500, .8)] - The background color for a selected item in hover or focus state 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 {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for button-group component.
+/// @requires {Map} $light-button-group
+/// @requires {Map} $default-elevation-button-group
+$material-button-group: extend(
+    $light-button-group,
+    $default-elevation-button-group,
+    (
+        item-text-color: (
             color: (
                 'gray',
-                500,
-                0.8,
+                700,
             ),
         ),
 
-        item-selected-border-color: (
+        item-hover-text-color: (
             color: (
                 'gray',
-                500,
+                800,
             ),
         ),
 
-        disabled-text-color: (
+        item-hover-background: (
             color: (
                 'gray',
-                400,
+                300,
             ),
         ),
 
-        disabled-background-color: (
+        item-selected-text-color: (
             color: (
                 'gray',
-                50,
+                800,
             ),
         ),
 
-        item-disabled-border: (
+        item-selected-background: (
             color: (
                 'gray',
                 400,
             ),
         ),
 
-        border-radius: (
-            border-radius: (
-                rem(4px),
-                rem(0),
-                rem(20px),
+        item-selected-hover-background: (
+            color: (
+                'gray',
+                500,
+                0.8,
             ),
         ),
-
-        default-size: 2,
     )
 );
 
@@ -152,7 +163,6 @@ $light-button-group: extend(
 /// @prop {Map} item-border-color [color: ('gray', 600)] - The border color between button group items.`
 /// @prop {Map} item-hover-text-color [color: ('gray', 900)] - The hover text color for button group items.
 /// @prop {Map} item-hover-background [color: ('gray', 200)] - The hover background color for button group items.
-/// @prop {Map} item-focused-background [color: ('gray', 300)] - The focused background color for button group items.
 /// @prop {Map} item-selected-background [color: ('gray', 300)] - The background color for a selected item in the button group.
 /// @prop {Map} item-selected-hover-background [color: ('gray', 400)] - The background color for a selected item in hover or focus state in the button group.
 /// @prop {Map} item-selected-text-color [color: ('gray', 900)]- The text color for a selected item in the button group.
@@ -211,13 +221,6 @@ $fluent-button-group: extend(
             ),
         ),
 
-        item-focused-background: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
-
         item-selected-background: (
             color: (
                 'gray',