igniteui-theming 4.2.0 → 4.4.0

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

@@ -22,13 +22,13 @@ $base-dark-switch: (
     ),
 );
 
-/// Generates a dark switch schema based on a mix of $light-switch and $base-dark-switch.
+/// Generates a dark material switch schema.
 /// @type {Map}
-/// @requires $light-switch
+/// @requires $material-switch
 /// @requires $base-dark-switch
-$dark-switch: extend($light-switch, $base-dark-switch);
+$dark-material-switch: extend($material-switch, $base-dark-switch);
 
-/// Generates a dark fluent switch schema based on a mix of $fluent-switch and $base-dark-switch.
+/// Generates a dark fluent switch schema.
 /// @type {Map}
 /// @prop {Map} border-color [color: ('gray', 500)] - The border color of the switch.
 /// @prop {Map} border-on-color [color('primary', 300)] - The border color of the on-switch.
@@ -38,9 +38,7 @@ $dark-switch: extend($light-switch, $base-dark-switch);
 /// @prop {Map} track-on-disabled-color [color: ('gray', 200)] - The color of the track when the switch is on and disabled.
 /// @prop {Map} track-on-hover-color [color: ('primary', 100)] - The color of the track when the switch is on and hovered.
 /// @prop {Map} thumb-off-color [color: ('gray', 500)] - The color of the thumb when the switch is off.
-/// @prop {Map} thumb-disabled-color [color: ('gray', 200)] - The color of the thumb when the switch is disabled.
 /// @prop {Map} error-color [color: ('gray', 500)] - The border and thumb color in invalid state.
-///
 /// @requires $fluent-switch
 /// @requires $base-dark-switch
 $dark-fluent-switch: extend(
@@ -89,12 +87,6 @@ $dark-fluent-switch: extend(
                 200,
             ),
         ),
-        thumb-disabled-color: (
-            color: (
-                'gray',
-                200,
-            ),
-        ),
         track-on-disabled-color: (
             color: (
                 'gray',
@@ -110,7 +102,7 @@ $dark-fluent-switch: extend(
     )
 );
 
-/// Generates a dark bootstrap switch schema based on a mix of $bootstrap-switch and $base-dark-switch.
+/// Generates a dark bootstrap switch schema.
 /// @type {Map}
 /// @prop {Map} thumb-on-color [color: ('gray', 900)] - The color of the thumb when the switch is on.
 /// @prop {Map} thumb-on-disabled-color [color: ('gray', 900)] - The color of the thumb when the switch is on and disabled.
@@ -148,7 +140,6 @@ $dark-bootstrap-switch: extend(
 /// @prop {Map} track-on-color [color: ('gray', 900)] - The color of the track when the switch is on.
 /// @prop {Map} thumb-off-color [color: ('gray', 700)] - The color of the thumb when the switch is off.
 /// @prop {Color} track-off-color [transparent] - The color of the track when the switch is off.
-///
 /// @prop {Map} border-color [color: ('gray', 700)] - The border color of the switch.
 /// @prop {Map} border-hover-color [color: ('gray', 700)] - The border color of the switch on hover.
 /// @prop {Map} border-disabled-color [color: ('gray', 400)] - The border color of the disabled switch.

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

@@ -31,19 +31,19 @@ $base-dark-tabs: (
     ),
 );
 
-/// Generates a dark tabs schema based on a mix of $light-tabs and $base-dark-tabs.
+/// Generates a dark material tabs schema.
 /// @type {Map}
-/// @requires $light-tabs
+/// @requires $material-tabs
 /// @requires $base-dark-tabs
-$dark-tabs: extend($light-tabs, $base-dark-tabs);
+$dark-material-tabs: extend($material-tabs, $base-dark-tabs);
 
-/// Generates a dark fluent tabs schema based on a mix of $fluent-tabs and $base-dark-tabs.
+/// Generates a dark fluent tabs schema.
 /// @type {Map}
 /// @requires $fluent-tabs
 /// @requires $base-dark-tabs
 $dark-fluent-tabs: extend($fluent-tabs, $base-dark-tabs);
 
-/// Generates a dark bootstrap tabs schema based on a mix of $bootstrap-tabs and $base-dark-tabs.
+/// Generates a dark bootstrap tabs schema.
 /// @type {Map}
 /// @prop {Map} item-background [color: ('primary', 400)] - The background color used for the tabs header.
 /// @requires $bootstrap-tabs

package/sass/themes/schemas/components/dark/_time-picker.scss

@@ -7,10 +7,10 @@
 /// @access public
 ////
 
-/// Generates a dark time-picker schema.
+/// Generates a dark material time-picker schema.
 /// @type {Map}
-/// @requires $light-time-picker
-$dark-time-picker: $light-time-picker;
+/// @requires $material-time-picker
+$dark-material-time-picker: $material-time-picker;
 
 /// Generates a dark fluent time-picker schema.
 /// @type {Map}

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

@@ -27,7 +27,6 @@ $dark-base-toast: (
             0.9,
         ),
     ),
-
     text-color: (
         contrast-color: (
             'gray',
@@ -36,14 +35,16 @@ $dark-base-toast: (
     ),
 );
 
-/// Generates a dark toast schema.
+/// Generates a dark material toast schema.
 /// @type {Map}
-/// @requires $light-toast
-$dark-toast: extend($light-toast, $dark-base-toast);
+/// @requires $material-toast
+/// @requires $dark-base-toast
+$dark-material-toast: extend($material-toast, $dark-base-toast);
 
 /// Generates a dark fluent toast schema.
 /// @type {Map}
 /// @requires $fluent-toast
+/// @requires $dark-base-toast
 $dark-fluent-toast: extend($fluent-toast, $dark-base-toast);
 
 /// Generates a dark bootstrap toast schema.
@@ -72,4 +73,5 @@ $dark-bootstrap-toast: extend(
 /// Generates a dark indigo toast schema.
 /// @type {Map}
 /// @requires $indigo-toast
+/// @requires $dark-base-toast
 $dark-indigo-toast: extend($indigo-toast, $dark-base-toast);

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

@@ -7,10 +7,10 @@
 /// @access public
 ////
 
-/// Generates a dark tooltip schema.
+/// Generates a dark material tooltip schema.
 /// @type {Map}
-/// @requires $light-tooltip
-$dark-tooltip: $light-tooltip;
+/// @requires $material-tooltip
+$dark-material-tooltip: $material-tooltip;
 
 /// Generates a dark fluent tooltip schema.
 /// @type {Map}
@@ -24,7 +24,6 @@ $dark-bootstrap-tooltip: $bootstrap-tooltip;
 
 /// Generates a dark indigo tooltip schema.
 /// @type {Map}
-///
 /// @prop {Map} background [contrast-color: ('surface')] - The background color of the tooltip.
 /// @prop {Map} text-color [text-color: (color: 'surface')] - The text color of the tooltip.
 /// @requires $indigo-tooltip

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

@@ -14,7 +14,7 @@
 /// @type {Map}
 /// @prop {Map} background-active [color: ('gray', 100)] - The background color used for the active tree node.
 /// @prop {Map} foreground-active [color: ('gray', 900)] - The color used for the content in active state of the tree node.
-/// @prop {Map} hover-color [color: ('gray', 50, .1)] - The background color used for the tree node on hover.
+/// @prop {Map} hover-color [color: ('gray', 200, .5)] - The background color used for the tree node on hover.
 /// @prop {Map} hover-selected-color [color: ('gray', 50, .1)] - The background color used for the selected tree node on hover.
 $base-dark-tree: (
     background-active: (
@@ -32,8 +32,8 @@ $base-dark-tree: (
     hover-color: (
         color: (
             'gray',
-            50,
-            0.1,
+            200,
+            0.5,
         ),
     ),
     hover-selected-color: (
@@ -45,44 +45,24 @@ $base-dark-tree: (
     ),
 );
 
-/// Generates a dark tree schema.
+/// Generates a dark material tree schema.
 /// @type {Map}
-/// @requires $light-tree
+/// @requires $material-tree
 /// @requires $base-dark-tree
-$dark-tree: extend(
-    $light-tree,
-    $base-dark-tree,
-    (
-        hover-color: (
-            color: (
-                'gray',
-                200,
-                0.5,
-            ),
-        ),
-    )
-);
+$dark-material-tree: extend($material-tree, $base-dark-tree);
 
 /// Generates a dark fluent tree schema.
 /// @type {Map}
-/// @prop {Map} background-active [color: ('gray', 100)] - The background color used for the active tree node.
 /// @prop {Map} background-selected [color: ('gray', 100)] - The background color used for the selected tree node.
 /// @prop {Map} foreground-selected [color: ('gray', 900)] - The color used for the content of the selected tree node.
 /// @prop {Map} background-active-selected [color: ('gray', 200)] - The background color used for the active selected tree node.
 /// @prop {Map} foreground-active-selected [color: ('gray', 900)] - The color used for the content of the active selected tree node.
-/// @prop {Map} hover-color [color: ('gray', 200, .5)] - The background color used for the tree node on hover.
 /// @requires $fluent-tree
 /// @requires $base-dark-tree
 $dark-fluent-tree: extend(
     $fluent-tree,
     $base-dark-tree,
     (
-        background-active: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
         background-selected: (
             color: (
                 'gray',
@@ -107,13 +87,6 @@ $dark-fluent-tree: extend(
                 900,
             ),
         ),
-        hover-color: (
-            color: (
-                'gray',
-                200,
-                0.5,
-            ),
-        ),
     )
 );
 

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

@@ -7,42 +7,32 @@
 /// @access public
 ////
 
-/// Generates a dark watermark schema.
+/// Generates a base dark watermark schema.
 /// @type {Map}
-/// @requires $light-watermark
-$dark-watermark: extend(
-    $light-watermark,
-    (
-        image-opacity: 15%,
-    )
+$dark-watermark: (
+    image-opacity: 15%,
 );
 
+/// Generates a base dark watermark schema.
+/// @type {Map}
+/// @requires $material-watermark
+/// @requires $dark-watermark
+$dark-material-watermark: extend($material-watermark, $dark-watermark);
+
 /// Generates a dark fluent watermark schema.
 /// @type {Map}
 /// @requires $fluent-watermark
-$dark-fluent-watermark: extend(
-    $fluent-watermark,
-    (
-        image-opacity: 15%,
-    )
-);
+/// @requires $dark-watermark
+$dark-fluent-watermark: extend($fluent-watermark, $dark-watermark);
 
 /// Generates a dark bootstrap watermark schema.
 /// @type {Map}
 /// @requires $bootstrap-watermark
-$dark-bootstrap-watermark: extend(
-    $bootstrap-watermark,
-    (
-        image-opacity: 15%,
-    )
-);
+/// @requires $dark-watermark
+$dark-bootstrap-watermark: extend($bootstrap-watermark, $dark-watermark);
 
 /// Generates a dark indigo watermark schema.
 /// @type {Map}
-/// @requires $bootstrap-watermark
-$dark-indigo-watermark: extend(
-    $indigo-watermark,
-    (
-        image-opacity: 15%,
-    )
-);
+/// @requires $indigo-watermark
+/// @requires $dark-watermark
+$dark-indigo-watermark: extend($indigo-watermark, $dark-watermark);

package/sass/themes/schemas/components/elevation/_button.scss

@@ -21,7 +21,7 @@ $flat-elevation-button: (
 /// @prop {Number} hover-elevation [4] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {Number} focus-elevation [8] - The elevation level, between 0-24, to be used for the focus state.
 /// @prop {Number} active-elevation [8] - The elevation level, between 0-24, to be used for the focus state.
-$material-contained-elevation: (
+$light-contained-elevation: (
     resting-elevation: 2,
     hover-elevation: 4,
     focus-elevation: 8,
@@ -33,7 +33,7 @@ $material-contained-elevation: (
 /// @prop {Number} hover-elevation [12] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {Number} focus-elevation [12] - The elevation level, between 0-24, to be used for the focus state.
 /// @prop {Number} active-elevation [12] - The elevation level, between 0-24, to be used for the focus state.
-$material-fab-elevation: (
+$light-fab-elevation: (
     resting-elevation: 6,
     hover-elevation: 12,
     focus-elevation: 12,

package/sass/themes/schemas/components/light/_action-strip.scss

@@ -38,7 +38,16 @@ $light-action-strip: extend(
                 'error',
             ),
         ),
+    )
+);
 
+/// Generates a material action strip schema.
+/// @type {Map}
+/// @prop {List} actions-border-radius [(rem(24px), rem(0), rem(24px))] - The border radius used for action strip actions container.
+/// @requires {Map} $light-action-strip
+$material-action-strip: extend(
+    $light-action-strip,
+    (
         actions-border-radius: (
             border-radius: (
                 rem(24px),

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

@@ -40,9 +40,13 @@ $light-avatar: (
     default-size: 1,
 );
 
+/// Generates a material avatar schema.
+/// @type {Map}
+/// @requires {Map} $light-avatar
+$material-avatar: $light-avatar;
+
 /// Generates a fluent avatar schema.
 /// @type {Map}
-/// @prop {Number} default-size [1] - The default size used for the avatar component.
 /// @requires {Map} $light-avatar
 $fluent-avatar: $light-avatar;
 
@@ -51,7 +55,6 @@ $fluent-avatar: $light-avatar;
 /// @prop {Map} background [color: ('gray', 400)]- The background color of the avatar.
 /// @prop {Map} color [contrast-color: ('gray', 400)] - The text/icon color of the avatar.
 /// @prop {Number} border-radius [rem(4px)] - The border radius for rounded avatar.
-/// @prop {Number} default-size [1] - The default size used for the avatar component.
 /// @requires {Map} $light-avatar
 $bootstrap-avatar: extend(
     $light-avatar,
@@ -74,6 +77,5 @@ $bootstrap-avatar: extend(
 
 /// Generates an indigo avatar schema.
 /// @type {Map}
-/// @prop {Number} default-size [1] - The default size used for the avatar component.
 /// @requires {Map} $light-avatar
 $indigo-avatar: $light-avatar;

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

@@ -55,6 +55,11 @@ $light-badge: extend(
     )
 );
 
+/// Generates a material badge schema.
+/// @type {Map}
+/// @requires {Map} $light-badge
+$material-badge: $light-badge;
+
 /// Generates a fluent badge schema.
 /// @type {Map}
 /// @requires {Map} $light-badge

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

@@ -34,6 +34,11 @@ $light-banner: (
     ),
 );
 
+/// Generates a material banner schema.
+/// @type {Map}
+/// @requires {Map} $light-banner
+$material-banner: $light-banner;
+
 /// Generates a fluent banner schema.
 /// @type {Map}
 /// @requires {Map} $light-banner

package/sass/themes/schemas/components/light/_bottom-nav.scss

@@ -41,6 +41,11 @@ $light-bottom-nav: extend(
     )
 );
 
+/// Generates a material bottom navigation schema.
+/// @type {Map}
+/// @requires {Map} $light-bottom-nav
+$material-bottom-nav: $light-bottom-nav;
+
 /// Generates a fluent bottom navigation schema.
 /// @type {Map}
 /// @prop {Number} elevation [1] - The elevation level, between 0-24, to be used for the bottom nav.

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',