feat(themes): add elevation factor CSS variable (#11305)

* feat(themes): add elevation factor CSS variable Co-authored-by: Dilyana Dimova <[email protected]> Co-authored-by: Simeon Simeonoff <[email protected]>
IgniteUI · Mar 29, 2022 · c64f054 · c64f054
1 parent 1f896eb
commit c64f054
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 53 deletions.
diff --git a/projects/igniteui-angular/src/lib/core/styles/base/elevations/_index.scss b/projects/igniteui-angular/src/lib/core/styles/base/elevations/_index.scss
@@ -2,6 +2,7 @@
 @use 'sass:math';
 @use 'sass:meta';
 @use 'sass:string';
+@use 'sass:list';
 @use '../variables' as *;
 @use '../utilities' as *;
 
@@ -10,12 +11,33 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
+@function _transform-levels($levels) {
+    $result: ();
+    $x: var(--igx-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,
@@ -40,15 +62,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,
@@ -73,15 +95,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,
@@ -106,7 +128,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.
@@ -173,4 +195,3 @@ $elevations: elevations(
 
     @return map.get($elevations, #{$elevation});
 }
-
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
@@ -41,16 +41,20 @@
     $excluded: ();
 
     @include palette-vars($palette, $contrast: true);
+    @include elevation-vars($elevations);
 
     @if $wc {
         @include palette-to-wc($palette);
+        @include elevations-to-wc($elevations);
     }
 
-    @if $elevation {
-        @include elevation-vars($elevations);
+    @if $elevation == false {
+        :root {
+            --igx-elevation-factor: 0;
 
-        @if $wc {
-            @include elevations-to-wc($elevations);
+            @if $wc {
+                --igc-elevation-factor: var(--igx-elevation-factor);
+            }
         }
     }
 
@@ -81,33 +85,27 @@
     @if is-used('igx-badge', $exclude) {
         @include badge(badge-theme(
             $schema: $schema,
-            $border-radius: $roundness,
-            $shadow: if($elevation == false, none, null),
+            $border-radius: $roundness
         ));
     }
 
     @if is-used('igx-bottom-nav', $exclude) {
         @include bottom-nav(bottom-nav-theme(
             $schema: $schema,
-            $shadow: if($elevation == false, none, null),
         ));
     }
 
     @if is-used('igx-button', $exclude) {
         @include button(button-theme(
             $schema: $schema,
-            $border-radius: $roundness,
-            $resting-shadow: if($elevation == false, none, null),
-            $hover-shadow: if($elevation == false, none, null),
-            $focus-shadow: if($elevation == false, none, null),
+            $border-radius: $roundness
         ));
     }
 
     @if is-used('igx-button-group', $exclude) {
         @include button-group(button-group-theme(
             $schema: $schema,
             $border-radius: $roundness,
-            $shadow: if($elevation == false, 'none', null),
         ));
     }
 
@@ -129,24 +127,21 @@
     @if is-used('igx-card', $exclude) {
         @include card(card-theme(
             $schema: $schema,
-            $border-radius: $roundness,
-            $resting-shadow: if($elevation == false, none, null),
-            $hover-shadow: if($elevation == false, none, null),
+            $border-radius: $roundness
         ));
     }
 
     @if is-used('igx-carousel', $exclude) {
         @include carousel(carousel-theme(
             $schema: $schema,
-            $border-radius: $roundness,
-            $button-shadow: if($elevation == false, none, null),
+            $border-radius: $roundness
         ));
     }
 
     @if is-used('igx-splitter', $exclude) {
         @include splitter(splitter-theme(
             $schema: $schema,
-            $border-radius: $roundness,
+            $border-radius: $roundness
         ));
     }
 
@@ -233,8 +228,7 @@
     @if is-used('igx-chip', $exclude) {
         @include chip(chip-theme(
             $schema: $schema,
-            $border-radius: $roundness,
-            $ghost-shadow: if($elevation == false, none, null),
+            $border-radius: $roundness
         ));
     }
 
@@ -266,8 +260,7 @@
     @if is-used('igx-dialog', $exclude) {
         @include dialog(dialog-theme(
             $schema: $schema,
-            $border-radius: $roundness,
-            $shadow: if($elevation == false, none, null),
+            $border-radius: $roundness
         ));
     }
 
@@ -286,8 +279,7 @@
     @if is-used('igx-drop-down', $exclude) {
         @include drop-down(drop-down-theme(
             $schema: $schema,
-            $border-radius: $roundness,
-            $shadow: if($elevation == false, none, null),
+            $border-radius: $roundness
         ));
     }
 
@@ -301,9 +293,7 @@
     @if is-used('igx-grid', $exclude) {
         @include grid(grid-theme(
             $schema: $schema,
-            $drop-area-border-radius: $roundness,
-            $grid-shadow: if($elevation == false, none, null),
-            $drag-shadow: if($elevation == false, none, null),
+            $drop-area-border-radius: $roundness
         ));
     }
 
@@ -342,10 +332,7 @@
             $schema: $schema,
             $box-border-radius: $roundness,
             $border-border-radius: $roundness,
-            $search-border-radius: $roundness,
-            $search-resting-shadow: if($elevation == false, none, null),
-            $search-hover-shadow: if($elevation == false, none, null),
-            $search-disabled-shadow: if($elevation == false, none, null),
+            $search-border-radius: $roundness
         ));
     }
 
@@ -359,17 +346,15 @@
 
     @if is-used('igx-navbar', $exclude) {
         @include navbar(navbar-theme(
-            $schema: $schema,
-            $shadow: if($elevation == false, none, null),
+            $schema: $schema
         ));
     }
 
     @if is-used('igx-nav-drawer', $exclude) {
         @include navdrawer(navdrawer-theme(
             $schema: $schema,
             $border-radius: $roundness,
-            $item-border-radius: $roundness,
-            $shadow: if($elevation == false, none, null),
+            $item-border-radius: $roundness
         ));
     }
 
@@ -418,8 +403,7 @@
     @if is-used('igx-snackbar', $exclude) {
         @include snackbar(snackbar-theme(
             $schema: $schema,
-            $border-radius: $roundness,
-            $shadow: if($elevation == false, none, null),
+            $border-radius: $roundness
         ));
     }
 
@@ -428,17 +412,13 @@
             $schema: $schema,
             $border-radius-track: $roundness,
             $border-radius-thumb: $roundness,
-            $border-radius-ripple: $roundness,
-            $resting-shadow: if($elevation == false, none, null),
-            $hover-shadow: if($elevation == false, none, null),
-            $disabled-shadow: if($elevation == false, none, null),
+            $border-radius-ripple: $roundness
         ));
     }
 
     @if is-used('igx-tabs', $exclude) {
         @include tabs(tabs-theme(
-            $schema: $schema,
-            $disable-shadow: if($elevation == false, true, false),
+            $schema: $schema
         ));
     }
 
@@ -466,9 +446,7 @@
         @include time-picker(time-picker-theme(
             $schema: $schema,
             $border-radius: $roundness,
-            $active-item-border-radius: $roundness,
-            $modal-shadow: if($elevation == false, none, null),
-            $dropdown-shadow: if($elevation == false, none, null),
+            $active-item-border-radius: $roundness
         ));
     }