fix(datepicker): fix datepicker issues (#1765)

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: didimmova

src/components/date-picker/themes/dark/_themes.scss

@@ -4,6 +4,10 @@
 @use 'igniteui-theming/sass/themes/schemas/components/dark/input-group' as input-theme;
 
 $material: map.merge(digest-schema($dark-material-calendar), digest-schema(input-theme.$dark-material-input-group));
+$material-calendar-border-color: map.get(digest-schema($dark-material-calendar), 'border-color');
 $bootstrap: map.merge(digest-schema($dark-bootstrap-calendar), digest-schema(input-theme.$dark-bootstrap-input-group));
+$bootstrap-calendar-border-color: map.get(digest-schema($dark-bootstrap-calendar), 'border-color');
 $fluent: map.merge(digest-schema($dark-fluent-calendar), digest-schema(input-theme.$dark-fluent-input-group));
+$fluent-calendar-border-color: map.get(digest-schema($dark-fluent-calendar), 'border-color');
 $indigo: map.merge(digest-schema($dark-indigo-calendar), digest-schema(input-theme.$dark-indigo-input-group));
+$indigo-calendar-border-color: map.get(digest-schema($dark-indigo-calendar), 'border-color');

src/components/date-picker/themes/dark/date-picker.bootstrap.scss

@@ -4,4 +4,6 @@
 
 :host {
     @include css-vars-from-theme(diff(light.$base, $bootstrap), 'ig-datepicker');
+
+    --calendar-border-color: #{$bootstrap-calendar-border-color};
 }

src/components/date-picker/themes/dark/date-picker.fluent.scss

@@ -4,4 +4,6 @@
 
 :host {
     @include css-vars-from-theme(diff(light.$base, $fluent), 'ig-datepicker');
+
+    --calendar-border-color: #{$fluent-calendar-border-color};
 }

src/components/date-picker/themes/dark/date-picker.indigo.scss

@@ -4,4 +4,10 @@
 
 :host {
     @include css-vars-from-theme(diff(light.$base, $indigo), 'ig-datepicker');
+
+    --calendar-border-color: #{$indigo-calendar-border-color};
+
+    igc-dialog[open]::part(base) {
+        box-shadow: var(--ig-elevation-7);
+    }
 }

src/components/date-picker/themes/dark/date-picker.material.scss

@@ -4,4 +4,6 @@
 
 :host {
     @include css-vars-from-theme(diff(light.$base, $material), 'ig-datepicker');
+
+    --calendar-border-color: #{$material-calendar-border-color};
 }

src/components/date-picker/themes/light/_themes.scss

@@ -5,6 +5,10 @@
 
 $base: digest-schema($light-calendar);
 $material: map.merge(digest-schema($material-calendar), digest-schema(input-theme.$material-input-group));
+$material-calendar-border-color: map.get(digest-schema($material-calendar), 'border-color');
 $bootstrap: map.merge(digest-schema($bootstrap-calendar), digest-schema(input-theme.$bootstrap-input-group));
+$bootstrap-calendar-border-color: map.get(digest-schema($bootstrap-calendar), 'border-color');
 $fluent: map.merge(digest-schema($fluent-calendar), digest-schema(input-theme.$fluent-input-group));
+$fluent-calendar-border-color: map.get(digest-schema($fluent-calendar), 'border-color');
 $indigo: map.merge(digest-schema($indigo-calendar), digest-schema(input-theme.$indigo-input-group));
+$indigo-calendar-border-color: map.get(digest-schema($indigo-calendar), 'border-color');

src/components/date-picker/themes/shared/date-picker.bootstrap.scss

@@ -4,20 +4,14 @@
 $theme: $bootstrap;
 
 :host {
+    --calendar-border-color: #{$bootstrap-calendar-border-color};
+
     igc-dialog {
         igc-calendar {
             border: none;
         }
     }
 
-    igc-dialog::part(base) {
-        border: rem(1px) solid var-get($theme, 'border-color');
-    }
-
-    igc-focus-trap {
-        box-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color');
-    }
-
     [part~='label'] {
         @include type-style('body-1');
 

src/components/date-picker/themes/shared/date-picker.common.scss

@@ -7,6 +7,7 @@ $input-theme: input-theme.$material;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+    --calendar-border-color: #{$material-calendar-border-color};
 
     igc-dialog {
         box-shadow: none;
@@ -23,6 +24,7 @@ $input-theme: input-theme.$material;
 
     igc-dialog[open]::part(base) {
         box-shadow: var(--ig-elevation-24);
+        border: rem(1px) solid var(--calendar-border-color);
     }
 
     igc-dialog::part(content),
@@ -42,6 +44,7 @@ $input-theme: input-theme.$material;
 
         border-radius: var-get($theme, 'border-radius');
         background: var-get($theme, 'content-background');
+        box-shadow: 0 0 0 rem(1px) var(--calendar-border-color);
     }
 
     igc-popover::part(container) {

src/components/date-picker/themes/shared/date-picker.fluent.scss

@@ -4,6 +4,8 @@
 $theme: $fluent;
 
 :host {
+    --calendar-border-color: #{$fluent-calendar-border-color};
+
     igc-dialog[open]::part(base) {
         border-radius: 0;
     }

src/components/date-picker/themes/shared/date-picker.indigo.scss

@@ -7,14 +7,11 @@ $theme: $indigo;
 $input-theme: input-theme.$indigo;
 
 :host {
+    --calendar-border-color: #{$indigo-calendar-border-color};
+
     igc-dialog[open]::part(base) {
         border-radius: rem(6px);
         box-shadow: var(--ig-elevation-5);
-        border: rem(1px) solid var-get($theme, 'border-color');
-    }
-
-    igc-focus-trap {
-        box-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color');
     }
 
     [part~='label'] {