igniteui-theming 4.2.0 → 4.3.0

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

@@ -9,22 +9,18 @@
 
 /* stylelint-disable max-line-length */
 
-/// Generates a light tree schema.
+/// Generates a base light tree schema.
 /// @type {Map}
 /// @prop {Map} background [ color: ('surface')] - The background color used for the tree node.
-/// @prop {Map} background-selected [color: ('secondary', 200)] - The background color used for the selected tree node.
+/// @prop {Map} background-selected [color: ('primary')] - The background color used for the selected tree node.
 /// @prop {Map} background-active [color: ('gray', 200)] - The background color used for the active tree node.
-/// @prop {Map} background-active-selected [color: ('secondary', 300)] - The background color used for the active selected tree node.
 /// @prop {Map} background-disabled [color: ('surface')] - The background color used for the tree node in disabled state.
 /// @prop {Map} foreground [contrast-color: ('surface')] - The color used for the tree node content.
-/// @prop {Map} foreground-selected [contrast-color: ('secondary', 200)] - The color used for the content of the selected tree node.
 /// @prop {Map} foreground-active [contrast-color: ('gray', 200)] - The color used for the content in active state of the tree node.
-/// @prop {Map} foreground-active-selected [contrast-color: ('secondary', 300)] - The color used for the content of the active selected tree node.
 /// @prop {Map} foreground-disabled [color: ('gray', 500)] - The color used for the content of the disabled tree node.
 /// @prop {Map} drop-area-color [color: ('secondary')] - The background color used for the tree node drop aria.
 /// @prop {Map} hover-color [color: ('gray', 900, .1)] - The background color used for the tree node on hover.
 /// @prop {Map} hover-selected-color [color: ('gray', 900, .1)] - The background color used for the selected tree node on hover.
-/// @prop {Map} border-color [color: ('secondary')] - The outline shadow color used for tree node in focus state.
 /// @prop {List} size [(rem(32px), rem(40px), rem(50px))] - The size used for the tree node.
 /// @prop {Number} default-size [2] - The default size used for the tree component.
 $light-tree: (
@@ -40,14 +36,7 @@ $light-tree: (
     ),
     background-selected: (
         color: (
-            'secondary',
-            200,
-        ),
-    ),
-    foreground-selected: (
-        contrast-color: (
-            'secondary',
-            200,
+            'primary',
         ),
     ),
     background-active: (
@@ -62,30 +51,11 @@ $light-tree: (
             200,
         ),
     ),
-    background-active-selected: (
-        color: (
-            'secondary',
-            300,
-        ),
-    ),
-    foreground-active-selected: (
-        contrast-color: (
-            'secondary',
-            300,
-        ),
-    ),
-    border-color: (
+    background-disabled: (
         color: (
-            'secondary',
+            'surface',
         ),
     ),
-    // Same for all themes
-    background-disabled:
-        (
-            color: (
-                'surface',
-            ),
-        ),
     foreground-disabled: (
         color: (
             'gray',
@@ -121,50 +91,67 @@ $light-tree: (
     default-size: 2,
 );
 
-/// Generates a light fluent tree schema.
+/// Generates a light material tree schema.
 /// @type {Map}
-/// @prop {Map} background [ color: ('surface')] - The background color used for the tree node.
-/// @prop {Map} foreground [contrast-color: ('surface')] - The color used for the tree node content.
-/// @prop {Map} background-selected [color: ('gray', 200)] - The background color used for the selected tree node.
-/// @prop {Map} foreground-selected [contrast-color: ('gray', 200)] - The color used for the content of the selected tree node.
-/// @prop {Map} background-active [color: ('gray', 200)] - The background color used for the active tree node.
-/// @prop {Map} foreground-active [contrast-color: ('gray', 200)] - The color used for the content in active state of the tree node.
-/// @prop {Map} background-active-selected [color: ('gray', 300)] - The background color used for the active selected tree node.
-/// @prop {Map} foreground-active-selected [contrast-color: ('gray', 300)] - The color used for the content of the active selected tree node.
-/// @prop {Map} border-color [color: ('gray', 800)] - The outline shadow color used for tree node in focus state.
+/// @prop {Map} background-selected [color: ('secondary', 200)] - The background color used for the selected tree node.
+/// @prop {Map} foreground-selected [contrast-color: ('secondary', 200)] - The color used for the content of the selected tree node.
+/// @prop {Map} background-active-selected [color: ('secondary', 300)] - The background color used for the active selected tree node.
+/// @prop {Map} foreground-active-selected [contrast-color: ('secondary', 300)] - The color used for the content of the active selected tree node.
+/// @prop {Map} border-color [color: ('secondary')] - The outline shadow color used for tree node in focus state.
 /// @requires {Map} $light-tree
-$fluent-tree: extend(
+$material-tree: extend(
     $light-tree,
     (
-        background: (
+        background-selected: (
             color: (
-                'surface',
+                'secondary',
+                200,
             ),
         ),
-        foreground: (
+        foreground-selected: (
             contrast-color: (
-                'surface',
+                'secondary',
+                200,
             ),
         ),
-        background-selected: (
+        background-active-selected: (
             color: (
-                'gray',
-                200,
+                'secondary',
+                300,
             ),
         ),
-        foreground-selected: (
+        foreground-active-selected: (
             contrast-color: (
-                'gray',
-                200,
+                'secondary',
+                300,
             ),
         ),
-        background-active: (
+        border-color: (
+            color: (
+                'secondary',
+            ),
+        ),
+    )
+);
+
+/// Generates a light fluent tree schema.
+/// @type {Map}
+/// @prop {Map} background-selected [color: ('gray', 200)] - The background color used for the selected tree node.
+/// @prop {Map} foreground-selected [contrast-color: ('gray', 200)] - The color used for the content of the selected tree node.
+/// @prop {Map} background-active-selected [color: ('gray', 300)] - The background color used for the active selected tree node.
+/// @prop {Map} foreground-active-selected [contrast-color: ('gray', 300)] - The color used for the content of the active selected tree node.
+/// @prop {Map} border-color [color: ('gray', 800)] - The outline shadow color used for tree node in focus state.
+/// @requires {Map} $light-tree
+$fluent-tree: extend(
+    $light-tree,
+    (
+        background-selected: (
             color: (
                 'gray',
                 200,
             ),
         ),
-        foreground-active: (
+        foreground-selected: (
             contrast-color: (
                 'gray',
                 200,
@@ -191,10 +178,9 @@ $fluent-tree: extend(
     )
 );
 
-/// Generates a bootstrap tree schema.
+/// Generates a light bootstrap tree schema.
 /// @type {Map}
 /// @prop {Map} foreground-active [contrast-color: ('primary')] - The color used for the content in active state of the tree node.
-/// @prop {Map} background-selected [color: ('primary')] - The background color used for the selected tree node.
 /// @prop {Map} foreground-selected [contrast-color: ('primary', 600)] - The color used for the content of the selected tree node.
 /// @prop {Map} background-active-selected [color: ('primary', 600)] - The background color used for the active selected tree node.
 /// @prop {Map} foreground-active-selected [contrast-color: ('primary', 600)] - The color used for the content of the active selected tree node.
@@ -208,11 +194,6 @@ $bootstrap-tree: extend(
                 'primary',
             ),
         ),
-        background-selected: (
-            color: (
-                'primary',
-            ),
-        ),
         foreground-selected: (
             contrast-color: (
                 'primary',
@@ -233,17 +214,17 @@ $bootstrap-tree: extend(
         ),
         border-color: (
             color: (
-                'primary' 200,
+                'primary',
+                200,
             ),
         ),
     )
 );
 
-/// Generates an indigo tree schema.
+/// Generates a light indigo tree schema.
 /// @type {Map}
 /// @prop {Map} background-active [color: ('surface')] - The background color used for the active tree node.
 /// @prop {Map} foreground-active [contrast-color: ('primary')] - The color used for the content in active state of the tree node.
-/// @prop {Map} background-selected [color: ('primary')] - The background color used for the selected tree node.
 /// @prop {Map} foreground-selected [contrast-color: ('primary')] - The color used for the content of the selected tree node.
 /// @prop {Map} background-active-selected [color: ('primary', 400)] - The background color used for the active selected tree node.
 /// @prop {Map} foreground-active-selected [contrast-color: ('primary', 400)] - The color used for the content of the active selected tree node.
@@ -264,11 +245,6 @@ $indigo-tree: extend(
                 'primary',
             ),
         ),
-        background-selected: (
-            color: (
-                'primary',
-            ),
-        ),
         foreground-selected: (
             contrast-color: (
                 'primary',

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

@@ -7,7 +7,7 @@
 /// @access public
 ////
 
-/// Generates a light watermark schema.
+/// Generates a base light watermark schema.
 /// @type {Map}
 /// @prop {Color} base-color [null] - The base color for all elements of the watermark.
 /// @prop {Color} image-color [null] - The color used for the stamp image.
@@ -41,6 +41,11 @@ $light-watermark: extend(
     )
 );
 
+/// Generates a light material watermark schema.
+/// @type {Map}
+/// @requires {Map} $light-watermark
+$material-watermark: $light-watermark;
+
 /// Generates a light fluent watermark schema.
 /// @type {Map}
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(16px))] - The border radius used for watermark.

package/sass/utils/_map.scss

@@ -37,6 +37,46 @@
     @return $result;
 }
 
+/// Extracts the differences between two or more maps, comparing the first map against the rest.
+/// @group utilities
+/// @access public
+/// @param {Map...} $maps - A list of maps that will be diffed.
+/// @example scss Pull out the unique properties of the second map when compared to the first.
+///   $map-1: (
+///     color: orange,
+///     background: black,
+///   );
+///
+///   $map-2: (
+///     color: red,
+///     background: black,
+///   );
+///
+///   $diffed: diff($map-1, $map-2); // returns (color: red);
+/// @returns {Map} - Returns a map of the unique properties.
+@function diff($maps...) {
+    $result: ();
+
+    @for $i from 1 through list.length($maps) {
+        $base: list.nth($maps, 1);
+
+        @each $key, $value in list.nth($maps, $i) {
+            $match: map.get($base, $key) == $value;
+
+            @if not($match) {
+                $result: map.merge(
+                    $result,
+                    (
+                        $key: $value,
+                    )
+                );
+            }
+        }
+    }
+
+    @return $result;
+}
+
 /// Prefixes the keys in a map with the specified prefix and separator.
 /// @access private
 /// @param {Map} $map - The target map.