fix(date-picker): indigo theme elevations (#16085)

Author: SisIvanova

projects/igniteui-angular/src/lib/date-picker/themes/_base.scss

@@ -14,7 +14,7 @@ $theme: $material;
 
         display: block;
         // TODO move the shadow in the schemas
-        box-shadow: $border-shadow, elevation(24),;
+        box-shadow: $border-shadow, elevation(24);
         border-radius: var-get($theme, 'border-radius');
         background: var-get($theme, 'content-background');
         overflow: hidden;
@@ -38,7 +38,6 @@ $theme: $material;
 
             display: flex;
             justify-content: flex-end;
-
             gap: rem(8px);
 
             // TODO remove this line after the override (--component-size: var(--ig-size, var(--ig-size-large)) is removed

projects/igniteui-angular/src/lib/date-picker/themes/dark/_index.scss

@@ -1,5 +1,6 @@
 @use 'sass:meta';
 @use 'tokens';
+@use 'indigo';
 @use 'styles/themes/standalone' as *;
 
 $tokens: meta.module-variables(tokens);

projects/igniteui-angular/src/lib/date-picker/themes/dark/_indigo.scss

@@ -0,0 +1,16 @@
+@use 'igniteui-theming/sass/bem/index' as *;
+@use 'igniteui-theming/sass/typography/index' as *;
+@use 'igniteui-theming/sass/elevations' as *;
+@use 'styles/themes/standalone' as *;
+@use '../light/tokens' as *;
+
+$_theme: $indigo;
+
+@include themed-block(igx-date-picker, indigo, dark) {
+    $border-shadow: 0 0 0 rem(1px) var-get($_theme, 'border-color');
+    box-shadow: $border-shadow, elevation(7);
+
+    @include m(dropdown) {
+        box-shadow: $border-shadow, elevation(2);
+    }
+}

projects/igniteui-angular/src/lib/date-picker/themes/shared/_indigo.scss

@@ -1,15 +1,22 @@
 @use 'igniteui-theming/sass/bem/index' as *;
 @use 'igniteui-theming/sass/typography/index' as *;
-@use 'igniteui-theming/sass/animations/index' as *;
 @use 'igniteui-theming/sass/themes/functions' as *;
+@use 'igniteui-theming/sass/elevations' as *;
 @use 'styles/themes/standalone' as *;
 @use '../light/tokens' as *;
 
 $_theme: $indigo;
 
 @include themed-block(igx-date-picker, indigo) {
+    $border-shadow: 0 0 0 rem(1px) var-get($_theme, 'border-color');
+    box-shadow: $border-shadow, elevation(5);
+
     @include e(actions) {
         min-height: sizable(rem(40px), rem(44px), rem(48px));
         padding: rem(8px) rem(16px);
     }
+
+    @include m(dropdown) {
+        box-shadow: $border-shadow, elevation(3);
+    }
 }