fix(date-range-picker): fix borders of pickers and indigo elevation (#1764)

didimmova · simeonoff · web-flow · commit f2abd367ce8b · 2025-07-02T17:26:58.000+03:00
Co-authored-by: Simeon Simeonoff &lt;sim.simeonoff@gmail.com&gt;
diff --git a/src/components/date-range-picker/themes/dark/_themes.scss b/src/components/date-range-picker/themes/dark/_themes.scss
@@ -15,24 +15,29 @@ $material: map.merge($material, (
     content-background: map.get(calendar-theme.$material, 'content-background'),
     actions-divider-color: map.get(calendar-theme.$material, 'actions-divider-color'),
 ));
+$material-calendar-border-color: map.get(calendar-theme.$material, 'border-color');
 $bootstrap: map.merge($bootstrap, (
     default-size: map.get(calendar-theme.$bootstrap, 'default-size'),
     border-radius: map.get(calendar-theme.$bootstrap, 'border-radius'),
     border-color: map.get(calendar-theme.$bootstrap, 'border-color'),
     content-background: map.get(calendar-theme.$bootstrap, 'content-background'),
     actions-divider-color: map.get(calendar-theme.$bootstrap, 'actions-divider-color'),
 ));
+$bootstrap-calendar-border-color: map.get(calendar-theme.$bootstrap, 'border-color');
 $fluent: map.merge($fluent, (
     default-size: map.get(calendar-theme.$fluent, 'default-size'),
     border-radius: map.get(calendar-theme.$fluent, 'border-radius'),
     border-color: map.get(calendar-theme.$fluent, 'border-color'),
     content-background: map.get(calendar-theme.$fluent, 'content-background'),
     actions-divider-color: map.get(calendar-theme.$fluent, 'actions-divider-color'),
 ));
+$fluent-calendar-border-color: map.get(calendar-theme.$fluent, 'border-color');
 $indigo: map.merge($indigo, (
     default-size: map.get(calendar-theme.$indigo, 'default-size'),
     border-radius: map.get(calendar-theme.$indigo, 'border-radius'),
     border-color: map.get(calendar-theme.$indigo, 'border-color'),
     content-background: map.get(calendar-theme.$indigo, 'content-background'),
     actions-divider-color: map.get(calendar-theme.$indigo, 'actions-divider-color'),
 ));
+$indigo-calendar-border-color: map.get(calendar-theme.$indigo, 'border-color');
+
diff --git a/src/components/date-range-picker/themes/dark/date-range-picker.bootstrap.scss b/src/components/date-range-picker/themes/dark/date-range-picker.bootstrap.scss
@@ -4,4 +4,6 @@
 
 :host {
     @include css-vars-from-theme(diff(light.$base, $bootstrap), 'ig-daterangepicker');
+
+    --calendar-border-color: #{$bootstrap-calendar-border-color};
 }
diff --git a/src/components/date-range-picker/themes/dark/date-range-picker.fluent.scss b/src/components/date-range-picker/themes/dark/date-range-picker.fluent.scss
@@ -4,4 +4,6 @@
 
 :host {
     @include css-vars-from-theme(diff(light.$base, $fluent), 'ig-daterangepicker');
+
+    --calendar-border-color: #{$fluent-calendar-border-color};
 }
diff --git a/src/components/date-range-picker/themes/dark/date-range-picker.indigo.scss b/src/components/date-range-picker/themes/dark/date-range-picker.indigo.scss
@@ -4,4 +4,10 @@
 
 :host {
     @include css-vars-from-theme(diff(light.$base, $indigo), 'ig-daterangepicker');
+
+    --calendar-border-color: #{$indigo-calendar-border-color};
+
+    igc-dialog[open]::part(base) {
+        box-shadow: var(--ig-elevation-7);
+    }
 }
diff --git a/src/components/date-range-picker/themes/dark/date-range-picker.material.scss b/src/components/date-range-picker/themes/dark/date-range-picker.material.scss
@@ -4,4 +4,6 @@
 
 :host {
     @include css-vars-from-theme(diff(light.$base, $material), 'ig-daterangepicker');
+
+    --calendar-border-color: #{$material-calendar-border-color};
 }
diff --git a/src/components/date-range-picker/themes/light/_themes.scss b/src/components/date-range-picker/themes/light/_themes.scss
@@ -16,24 +16,28 @@ $material: map.merge($material, (
     content-background: map.get(calendar-theme.$material, 'content-background'),
     actions-divider-color: map.get(calendar-theme.$material, 'actions-divider-color'),
 ));
+$material-calendar-border-color: map.get(calendar-theme.$material, 'border-color');
 $bootstrap: map.merge($bootstrap, (
     default-size: map.get(calendar-theme.$bootstrap, 'default-size'),
     border-radius: map.get(calendar-theme.$bootstrap, 'border-radius'),
     border-color: map.get(calendar-theme.$bootstrap, 'border-color'),
     content-background: map.get(calendar-theme.$bootstrap, 'content-background'),
     actions-divider-color: map.get(calendar-theme.$bootstrap, 'actions-divider-color'),
 ));
+$bootstrap-calendar-border-color: map.get(calendar-theme.$bootstrap, 'border-color');
 $fluent: map.merge($fluent, (
     default-size: map.get(calendar-theme.$fluent, 'default-size'),
     border-radius: map.get(calendar-theme.$fluent, 'border-radius'),
     border-color: map.get(calendar-theme.$fluent, 'border-color'),
     content-background: map.get(calendar-theme.$fluent, 'content-background'),
     actions-divider-color: map.get(calendar-theme.$fluent, 'actions-divider-color'),
 ));
+$fluent-calendar-border-color: map.get(calendar-theme.$fluent, 'border-color');
 $indigo: map.merge($indigo, (
     default-size: map.get(calendar-theme.$indigo, 'default-size'),
     border-radius: map.get(calendar-theme.$indigo, 'border-radius'),
     border-color: map.get(calendar-theme.$indigo, 'border-color'),
     content-background: map.get(calendar-theme.$indigo, 'content-background'),
     actions-divider-color: map.get(calendar-theme.$indigo, 'actions-divider-color')
 ));
+$indigo-calendar-border-color: map.get(calendar-theme.$indigo, 'border-color');
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss b/src/components/date-range-picker/themes/shared/date-range-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(helper-text) {
         @include type-style('body-2');
 
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.common.scss b/src/components/date-range-picker/themes/shared/date-range-picker.common.scss
@@ -5,6 +5,7 @@ $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;
@@ -21,6 +22,7 @@ $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) {
@@ -40,6 +42,7 @@ $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) {
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss b/src/components/date-range-picker/themes/shared/date-range-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;
     }
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss b/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss
@@ -4,21 +4,18 @@
 $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-dialog::part(footer) {
         padding: rem(8px) rem(16px);
         gap: rem(8px);
     }
 
-    igc-focus-trap {
-        box-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color');
-    }
-
     ::part(helper-text) {
         @include type-style('caption');
 

Original file line number	Diff line number	Diff line change
`@@ -4,4 +4,6 @@`
`4`	`4`
`5`	`5`	`:host {`
`6`	`6`	`@include css-vars-from-theme(diff(light.$base, $bootstrap), 'ig-daterangepicker');`
	`7`	`+`
	`8`	`+ --calendar-border-color: #{$bootstrap-calendar-border-color};`
`7`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,8 @@`
`4`	`4`	`$theme: $fluent;`
`5`	`5`
`6`	`6`	`:host {`
	`7`	`+ --calendar-border-color: #{$fluent-calendar-border-color};`
	`8`	`+`
`7`	`9`	`igc-dialog[open]::part(base) {`
`8`	`10`	`border-radius: 0;`
`9`	`11`	`}`