refactor(card): update custom shadow sample

Author: simeonoff

src/app/theming/shadows/card-sample-shadow/card-sample-shadow.scss

@@ -1,20 +1,13 @@
-@use '../../../../variables' as *;
-
-// Creating colors for all 3 shadows
-$color-1: #bcb8ce;
-$color-2: #917898;
-$color-3: #4c394f;
-
-// Use elevations to generate sass maps for all three
-// box-shadows with the costume colors
-$colorful-elevations: elevations($color-1, $color-2, $color-3);
-
-// Use the elevation to set the desired elevation level
-$custom-theme: card-theme(
-    $elevations: $colorful-elevations
+@use 'igniteui-theming/sass/elevations' as *;
+@use 'igniteui-theming/sass/elevations/presets' as * with (
+    $color-1: #4c394f,
+    $color-2: #917898,
+    $color-3: #bcb8ce
 );
 
 :host {
+    @include elevations($material-elevations);
+
     display: flex;
     flex-wrap: nowrap;
     justify-content: center;
@@ -33,8 +26,9 @@ $custom-theme: card-theme(
     }
 
     ::ng-deep {
-        .custom-card {
-            @include card($custom-theme);
+        igx-card#igx-card-1 {
+            --resting-shadow: #{elevation(8)};
+            --hover-shadow: #{elevation(16)};
         }
     }
 }