Merge pull request #5370 from IgniteUI/elevation-schemas

refactor(schemas): decouple elevations from the main schema

Author: Lipata

projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

@@ -220,23 +220,33 @@
 
 /// Extends a Map object with the properties of another Map object.
 /// @access private
-/// @param {Map} $map1 - The source map to get extended.
-/// @param {Map} $map2 - The map extending the source map.
-/// @returns {Map} - Returns the original map extended with the properties of the second map.
-@function extend($map1, $map2) {
+/// @param {Map...} $maps - The source map to get extended.
+/// @returns {Map} - Returns the merged maps.
+@function extend($maps...) {
     $result: ();
-    @each $key, $value in $map2 {
-        @if not($value) {
-            $result: map-merge($result, (
-                #{$key}: map-get($map1, $key)
-            ));
-        } @else {
+
+    @each $map in $maps {
+        $result: map-merge($result, map-clean($map));
+    }
+
+    @return $result;
+}
+
+/// Removes all null key-value pairs from the map
+/// @access private
+/// @param {Map} $map - The target map to be cleaned.
+/// @returns {Map} - Returns a clean map.
+@function map-clean($map) {
+    $result: ();
+
+    @each $key, $value in $map {
+        @if($value) != null {
             $result: map-merge($result, (
                 #{$key}: $value
             ));
         }
     }
-    $result: map-merge($map1, $result);
+
     @return $result;
 }
 
@@ -245,7 +255,6 @@
 /// @group Palettes
 /// @requires {function} gen-color
 /// @requires {function} text-contrast
-/// @requires {function} extend
 /// @param {Color} $color - The base color used to generate the palette.
 /// @param {List} $saturations - The saturation list of color variants.
 //// Based on the Material color system.
@@ -264,7 +273,6 @@
 /// @access private
 /// @group Palettes
 /// @requires {function} text-contrast
-/// @requires {function} extend
 /// @param {Color} $color - The base color used to generate the palette.
 /// @param {Map} $shades - A map of variations as keys and opacities as values.
 /// Based on the Material color system.
@@ -416,6 +424,7 @@
 /// @access private
 /// @param {Map} $schema - A theme schema.
 /// @param {Map} $palette - An igx-palette map.
+/// @requires {function} extend
 /// @requires {function} resolve-value
 /// @example scss Apply an `igx-palette` to theme schema
 ///   $custom-palette: igx-palette($primary: red, $secondary: blue);
@@ -434,7 +443,7 @@
         @if type-of($value) == 'map' {
             $result: extend($result, (#{$key}: resolve-value($value, $palette)));
         } @else {
-            $result: extend($result, (#{$key}: $value));
+            $result: extend($result, (#{$key}: #{$value}));
         }
     }
     @return $result;

projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_badge.scss

@@ -0,0 +1,8 @@
+////
+/// @group schemas
+/// @access private
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+$_default-elevation-badge: (
+    elevation: 1
+);

projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_bottom-nav.scss

@@ -0,0 +1,8 @@
+////
+/// @group schemas
+/// @access private
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+$_default-elevation-bottom-nav: (
+    elevation: 8
+);

projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_button-group.scss

@@ -0,0 +1,8 @@
+////
+/// @group schemas
+/// @access private
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+$_default-elevation-button-group: (
+    elevation: 2
+);

projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_button.scss

@@ -0,0 +1,14 @@
+////
+/// @group schemas
+/// @access private
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+$_default-elevation-button: (
+    raised-resting-elevation: 2,
+    raised-hover-elevation: 4,
+    raised-focus-elevation: 8,
+
+    fab-resting-elevation: 6,
+    fab-hover-elevation: 12,
+    fab-focus-elevation: 12
+);

projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_card.scss

@@ -0,0 +1,9 @@
+////
+/// @group schemas
+/// @access private
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+$_default-elevation-card: (
+    resting-elevation: 2,
+    hover-elevation: 8
+);

projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_dialog.scss

@@ -0,0 +1,8 @@
+////
+/// @group schemas
+/// @access private
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+$_default-elevation-dialog: (
+    elevation: 24
+);

projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_drop-down.scss

@@ -0,0 +1,8 @@
+////
+/// @group schemas
+/// @access private
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+$_default-elevation-drop-down: (
+    elevation: 8
+);

projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_grid.scss

@@ -0,0 +1,9 @@
+////
+/// @group schemas
+/// @access private
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+$_default-elevation-grid: (
+    grid-elevation: 2,
+    drag-elevation: 5,
+);

projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_input-group.scss

@@ -0,0 +1,10 @@
+////
+/// @group schemas
+/// @access private
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+$_default-elevation-input-group: (
+    search-resting-elevation: 1,
+    search-hover-elevation: 2,
+    search-disabled-elevation: 0,
+);