igniteui-theming 4.2.0 → 4.3.0

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

@@ -10,10 +10,10 @@
 
 /* stylelint-disable max-line-length */
 
-/// Generates a dark slider schema.
+/// Generates a dark material slider schema.
 /// @type {Map}
-/// @requires $light-slider
-$dark-slider: $light-slider;
+/// @requires $material-slider
+$dark-material-slider: $material-slider;
 
 /// Generates a dark fluent slider schema.
 /// @type {Map}

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

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

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

@@ -7,13 +7,13 @@
 /// @access public
 ////
 
-/// Generates a dark splitter schema.
+/// Generates a dark material splitter schema.
 /// @type {Map}
 /// @prop {Map} bar-color [color: ('gray', 50)] - The background color of the bar.
 /// @prop {Map} handle-color [color: ('gray', 800)] - The color for the bar drag handle.
 /// @prop {Map} expander-color [color: ('gray', 800)] - The color for the arrow expander's.
 /// @requires $light-splitter
-$dark-splitter: extend(
+$dark-material-splitter: extend(
     $light-splitter,
     (
         bar-color: (

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

@@ -8,6 +8,7 @@
 ////
 
 /// Generates a base dark stepper schema.
+/// @type {Map}
 /// @prop {Map} current-indicator-color [color: ('gray', 900)] - The color of the current step indicator.
 /// @prop {Map} invalid-indicator-color [color: ('gray', 900)] - The color of the invalid step indicator.
 /// @prop {Map} step-hover-background [color: ('gray', 100, .3)] - The background of the step header on hover.
@@ -18,7 +19,6 @@
 /// @prop {Map} invalid-step-focus-background [color: ('gray', 100, .5)] - The background of the invalid step header on hover.
 /// @prop {Map} current-step-focus-background [color: ('gray', 100, .5)] - The background of the current step header on hover.
 /// @prop {Map} complete-step-focus-background [color: ('gray', 100, .5)] - The background of the complete step header on hover.
-/// @type {Map}
 $base-stepper: (
     step-hover-background: (
         color: (
@@ -91,11 +91,11 @@ $base-stepper: (
     ),
 );
 
-/// Generates a dark stepper schema.
+/// Generates a dark material stepper schema.
 /// @type {Map}
-/// @requires $light-stepper
+/// @requires $material-stepper
 /// @requires $base-stepper
-$dark-stepper: extend($light-stepper, $base-stepper);
+$dark-material-stepper: extend($material-stepper, $base-stepper);
 
 /// Generates a dark fluent stepper schema
 /// @type {Map}

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.