Skip to content

feat(elevations): add elevation factor css variable #11305

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 29, 2022
Merged

feat(elevations): add elevation factor css variable #11305

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1e1a6f4
feat(elevations): add elevation factor css variable
Mar 29, 2022
32aa14d
refactor(themes): slight modifications
simeonoff Mar 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 28 additions & 7 deletions projects/igniteui-angular/src/lib/core/styles/base/elevations/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@use 'sass:math';
@use 'sass:meta';
@use 'sass:string';
@use 'sass:list';
@use '../variables' as *;
@use '../utilities' as *;

Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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.
Expand Down Expand Up @@ -173,4 +195,3 @@ $elevations: elevations(

@return map.get($elevations, #{$elevation});
}

70 changes: 24 additions & 46 deletions projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}

Expand Down Expand Up @@ -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),
));
}

Expand All @@ -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
));
}

Expand Down Expand Up @@ -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
));
}

Expand Down Expand Up @@ -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
));
}

Expand All @@ -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
));
}

Expand All @@ -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
));
}

Expand Down Expand Up @@ -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
));
}

Expand All @@ -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
));
}

Expand Down Expand Up @@ -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
));
}

Expand All @@ -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
));
}

Expand Down Expand Up @@ -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
));
}

Expand Down