From c64f0540b14832b44b788699a13cab6b68e5e6c6 Mon Sep 17 00:00:00 2001 From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com> Date: Tue, 29 Mar 2022 15:38:08 +0300 Subject: [PATCH] feat(themes): add elevation factor CSS variable (#11305) * feat(themes): add elevation factor CSS variable Co-authored-by: Dilyana Dimova Co-authored-by: Simeon Simeonoff --- .../core/styles/base/elevations/_index.scss | 35 ++++++++-- .../src/lib/core/styles/themes/_index.scss | 70 +++++++------------ 2 files changed, 52 insertions(+), 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 index cf9caf2536d..a9a9dcac9db 100644 --- 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 Simeon Simeonoff //// +@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,7 +62,7 @@ 22: 0 10px 14px -6px $color, 23: 0 11px 14px -7px $color, 24: 0 11px 15px -7px $color - ); + )); } /// Level 2 - Penumbra Shadows @@ -48,7 +70,7 @@ /// @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,7 +95,7 @@ 22: 0 22px 35px 3px $color, 23: 0 23px 36px 3px $color, 24: 0 24px 38px 3px $color - ); + )); } /// Level 3 - Ambient Shadows @@ -81,7 +103,7 @@ /// @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 index 7fa67674398..b989a5d2a99 100644 --- 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,25 +85,20 @@ @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 )); } @@ -107,7 +106,6 @@ @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,8 +346,7 @@ @if is-used('igx-navbar', $exclude) { @include navbar(navbar-theme( - $schema: $schema, - $shadow: if($elevation == false, none, null), + $schema: $schema )); } @@ -368,8 +354,7 @@ @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 )); }