Merge pull request #292 from IgniteUI/simeonoff/togglable-elevations

feat(themes): add global elevation factor

CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [2.1.1] - 2022-03-15
+
+### Added
+- Control border radius and elevation from `--igc-radius-factor` and `--igc-elevation-factor`:
+
+  Example:
+  ```css
+  /* Make all components square and remove all shadows */
+  :root {
+    --igc-radius-factor: 0;
+    --igc-elevation-factor: 0;
+  }
+  ```
+
 ## [2.1.0] - 2022-03-15
 
 ### Added
@@ -61,6 +75,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[2.1.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/2.1.0...2.1.1
 [2.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/2.0.0...2.1.0
 [2.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/1.0.0...2.0.0
 [1.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0

src/styles/utilities/_elevations.scss

@@ -2,18 +2,40 @@
 @use 'sass:math';
 @use 'sass:meta';
 @use 'sass:string';
+@use 'sass:list';
 
 ////
 /// @group elevations
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
+@function _transform-levels($levels) {
+    $result: ();
+    $x: var(--igc-elevation-factor, 1);
+
+    @each $k, $v in $levels {
+        $l: ();
+
+        @each $d in $v {
+            @if meta.type-of($d) != color and $d != 0 {
+                $l: list.append($l, calc($x * $d));
+            } @else {
+                $l: list.append($l, $d);
+            }
+        }
+
+        $result: map.merge($result, ($k: $l));
+    }
+
+    @return $result;
+}
+
 /// Level 1 - Umbra Shadows
 /// @access private
 /// @param {Color} $color - The color used to generate umbra shadows.
 /// @returns {Map} Returns a map of 24 shadow elevations with the umbra color.
 @function _l1-shadows($color) {
-    @return (
+    @return _transform-levels((
         1: 0 1px 3px 0 $color,
         2: 0 1px 5px 0 $color,
         3: 0 1px 8px 0 $color,
@@ -38,15 +60,15 @@
         22: 0 10px 14px -6px $color,
         23: 0 11px 14px -7px $color,
         24: 0 11px 15px -7px $color
-    );
+    ));
 }
 
 /// Level 2 - Penumbra Shadows
 /// @access private
 /// @param {Color} $color - The color used to generate penumbra shadows.
 /// @returns {Map} Returns a map of 24 shadow elevations with the penumbra color.
 @function _l2-shadows($color) {
-    @return (
+    @return _transform-levels((
         1: 0 1px 1px 0 $color,
         2: 0 2px 2px 0 $color,
         3: 0 3px 4px 0 $color,
@@ -71,15 +93,15 @@
         22: 0 22px 35px 3px $color,
         23: 0 23px 36px 3px $color,
         24: 0 24px 38px 3px $color
-    );
+    ));
 }
 
 /// Level 3 - Ambient Shadows
 /// @access private
 /// @param {Color} $color - The color used to generate ambient shadows.
 /// @returns {Map} Returns a map of 24 shadow elevations with the ambient color.
 @function _l3-shadows($color) {
-    @return (
+    @return _transform-levels((
         1: 0 2px 1px -1px $color,
         2: 0 3px 1px -2px $color,
         3: 0 3px 3px -2px $color,
@@ -104,7 +126,7 @@
         22: 0 8px 42px 7px $color,
         23: 0 9px 44px 8px $color,
         24: 0 9px 46px 8px $color
-    );
+    ));
 }
 
 /// Returns shadow based on elevation, umbra, penumbra, and ambient shadow colors.