fix(themes): update properties to use 'elevation' variables instead of 'shadow' variables

Author: adrianptrv

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

@@ -24,7 +24,7 @@
         color: var-get($theme, 'text-color');
         background: var-get($theme, 'background-color');
         border-radius: calc(var(--size) / 2);
-        box-shadow: var-get($theme, 'shadow');
+        box-shadow: var-get($theme, 'elevation');
         overflow: hidden;
 
         igx-icon {

projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

@@ -43,13 +43,13 @@
     %igx-bottom-nav-menu--top {
         inset-block-start: 0;
         inset-block-end: inherit;
-        box-shadow: var-get($theme, 'shadow');
+        box-shadow: var-get($theme, 'elevation');
     }
 
     %igx-bottom-nav-menu--bottom {
         inset-block-start: inherit;
         inset-block-end: 0;
-        box-shadow: var-get($theme, 'shadow');
+        box-shadow: var-get($theme, 'elevation');
     }
 
     %igx-bottom-nav-menu-item {

projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss

@@ -36,7 +36,7 @@
 
     %igx-group-display {
         display: flex;
-        box-shadow: var-get($theme, 'shadow');
+        box-shadow: var-get($theme, 'elevation');
         border-radius: var-get($theme, 'border-radius');
 
         button {
@@ -269,6 +269,7 @@
                 color: var-get($theme, 'item-focused-text-color');
                 background: var-get($theme, 'item-focused-background');
                 border-color: var-get($theme, 'item-focused-border-color');
+								box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
                 z-index: 2;
 
                 igx-icon {

projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

@@ -193,7 +193,7 @@
 
     $contained-shadow: map.get(
         (
-            'material': var-get($contained-theme, 'resting-shadow'),
+            'material': var-get($contained-theme, 'resting-elevation'),
             'fluent': none,
             'bootstrap': none,
             'indigo': none,
@@ -203,7 +203,7 @@
 
     $contained-shadow--hover: map.get(
         (
-            'material': var-get($contained-theme, 'hover-shadow'),
+            'material': var-get($contained-theme, 'hover-elevation'),
             'fluent': none,
             'bootstrap': none,
             'indigo': none,
@@ -213,7 +213,7 @@
 
     $contained-shadow--focus: map.get(
         (
-            'material': var-get($contained-theme, 'focus-shadow'),
+            'material': var-get($contained-theme, 'focus-elevation'),
             'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
             'bootstrap': 0 0 0 rem(4px)
                 var-get($contained-theme, 'shadow-color'),
@@ -224,7 +224,7 @@
 
     $contained-shadow--active: map.get(
         (
-            'material': var-get($contained-theme, 'active-shadow'),
+            'material': var-get($contained-theme, 'active-elevation'),
             'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
             'bootstrap': 0 0 0 rem(4px)
                 var-get($contained-theme, 'shadow-color'),
@@ -235,7 +235,7 @@
 
     $fab-shadow: map.get(
         (
-            'material': var-get($fab-theme, 'resting-shadow'),
+            'material': var-get($fab-theme, 'resting-elevation'),
             'fluent': none,
             'bootstrap': none,
             'indigo': none,
@@ -245,7 +245,7 @@
 
     $fab-shadow--hover: map.get(
         (
-            'material': var-get($fab-theme, 'hover-shadow'),
+            'material': var-get($fab-theme, 'hover-elevation'),
             'fluent': none,
             'bootstrap': none,
             'indigo': none,
@@ -255,7 +255,7 @@
 
     $fab-shadow--focus: map.get(
         (
-            'material': var-get($fab-theme, 'focus-shadow'),
+            'material': var-get($fab-theme, 'focus-elevation'),
             'fluent': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
             'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
             'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
@@ -265,7 +265,7 @@
 
     $fab-shadow--active: map.get(
         (
-            'material': var-get($fab-theme, 'active-shadow'),
+            'material': var-get($fab-theme, 'active-elevation'),
             'fluent': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
             'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
             'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
@@ -573,7 +573,7 @@
         background: var-get($contained-theme, 'background');
         border-color: var-get($contained-theme, 'border-color');
         border-radius: var-get($contained-theme, 'border-radius');
-        box-shadow: var-get($contained-theme, 'resting-shadow');
+        box-shadow: var-get($contained-theme, 'resting-elevation');
 
         igx-icon {
             color: var-get($contained-theme, 'icon-color');
@@ -583,7 +583,7 @@
             color: var-get($contained-theme, 'hover-foreground');
             background: var-get($contained-theme, 'hover-background');
             border-color: var-get($contained-theme, 'hover-border-color');
-            box-shadow: var-get($contained-theme, 'hover-shadow');
+            box-shadow: var-get($contained-theme, 'hover-elevation');
 
             igx-icon {
                 color: var-get($contained-theme, 'icon-color-hover');
@@ -594,7 +594,7 @@
             color: var-get($contained-theme, 'active-foreground');
             background: var-get($contained-theme, 'active-background');
             border-color: var-get($contained-theme, 'active-border-color');
-            box-shadow: var-get($contained-theme, 'active-shadow');
+            box-shadow: var-get($contained-theme, 'active-elevation');
 
             igx-icon {
                 color: var-get($contained-theme, 'active-foreground');
@@ -627,7 +627,7 @@
         }
 
         @if $variant == 'material' {
-            box-shadow: var-get($contained-theme, 'focus-shadow');
+            box-shadow: var-get($contained-theme, 'focus-elevation');
         } @else {
             box-shadow: $contained-shadow--active;
         }
@@ -652,7 +652,7 @@
             }
 
             @if $variant == 'material' {
-                box-shadow: var-get($contained-theme, 'focus-shadow');
+                box-shadow: var-get($contained-theme, 'focus-elevation');
             }
         }
 
@@ -713,7 +713,7 @@
         background: var-get($fab-theme, 'background');
         border-color: var-get($fab-theme, 'border-color');
         border-radius: var-get($fab-theme, 'border-radius');
-        box-shadow: var-get($fab-theme, 'resting-shadow');
+        box-shadow: var-get($fab-theme, 'resting-elevation');
 
         igx-icon {
             color: var-get($fab-theme, 'icon-color');
@@ -723,7 +723,7 @@
             color: var-get($fab-theme, 'hover-foreground');
             background: var-get($fab-theme, 'hover-background');
             border-color: var-get($fab-theme, 'hover-border-color');
-            box-shadow: var-get($fab-theme, 'hover-shadow');
+            box-shadow: var-get($fab-theme, 'hover-elevation');
 
             igx-icon {
                 color: var-get($fab-theme, 'icon-color-hover');
@@ -734,7 +734,7 @@
             color: var-get($fab-theme, 'active-foreground');
             background: var-get($fab-theme, 'active-background');
             border-color: var-get($fab-theme, 'active-border-color');
-            box-shadow: var-get($fab-theme, 'active-shadow');
+            box-shadow: var-get($fab-theme, 'active-elevation');
 
             igx-icon {
                 color: var-get($fab-theme, 'active-foreground');
@@ -758,7 +758,7 @@
         }
 
         @if $variant == 'material' {
-            box-shadow: var-get($fab-theme, 'focus-shadow');
+            box-shadow: var-get($fab-theme, 'focus-elevation');
         } @else {
             box-shadow: $contained-shadow--focus;
         }

projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss

@@ -31,10 +31,10 @@
     }
 
     %igx-card--elevated {
-        box-shadow: var-get($theme, 'resting-shadow');
+        box-shadow: var-get($theme, 'resting-elevation');
 
         &:hover {
-            box-shadow: var-get($theme, 'hover-shadow');
+            box-shadow: var-get($theme, 'hover-elevation');
         }
 
         @if $not-material-theme {

projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss

@@ -46,7 +46,7 @@
         outline-style: none;
         transition: all .15s ease-in-out;
         background: var-get($theme, 'button-background');
-        box-shadow: var-get($theme, 'button-shadow');
+        box-shadow: var-get($theme, 'button-elevation');
         border: rem(1px) solid var-get($theme, 'button-border-color');
         border-radius: var(--nav-btn-border-radius);
 
@@ -167,7 +167,7 @@
         inset-inline-start: 50%;
         transform: translateX(-50%);
         background: var-get($theme, 'indicator-background');
-        box-shadow: var-get($theme, 'button-shadow');
+        box-shadow: var-get($theme, 'button-elevation');
         border-radius: var-get($theme, 'border-radius');
 
         [dir='rtl'] & {

projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss

@@ -540,7 +540,7 @@
         @extend %igx-chip;
 
         position: absolute;
-        box-shadow: var-get($theme, 'ghost-shadow');
+        box-shadow: var-get($theme, 'ghost-elevation');
         overflow: hidden;
         color: var-get($theme, 'focus-text-color');
         background: var-get($theme, 'ghost-background');

projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss

@@ -51,7 +51,7 @@
         border: rem(1px) solid var-get($theme, 'border-color');
         border-radius: var-get($theme, 'border-radius');
         background: var-get($theme, 'background');
-        box-shadow: var-get($theme, 'shadow');
+        box-shadow: var-get($theme, 'elevation');
         overflow: hidden;
 
         .igx-calendar {

projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss

@@ -20,7 +20,7 @@
         overflow: hidden;
         border-radius: var-get($theme, 'border-radius');
         background: var-get($theme, 'background-color');
-        box-shadow: var-get($theme, 'shadow');
+        box-shadow: var-get($theme, 'elevation');
         min-width: rem(128px);
         border: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
 

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -34,7 +34,7 @@
     ), $variant);
     $cbx-bs-size: rem(14px);
 
-    $grid-shadow: var-get($theme, 'grid-shadow');
+    $grid-shadow: var-get($theme, 'grid-elevation');
 
     $grid-caption-fs: rem(20px);
     $grid-caption-lh: rem(32px);
@@ -1908,7 +1908,7 @@
         top: rem(-99999px);
         inset-inline-start: rem(-99999px);
         border: none;
-        box-shadow: var-get($theme, 'drag-shadow');
+        box-shadow: var-get($theme, 'drag-elevation');
         overflow: hidden;
         z-index: 20;