fix: datepicker border color fix (#13262)

Co-authored-by: Manavpreet Singh <119919977+manavpreetsingh@users.noreply.github.com>

packages/ui/components/form/date-range-picker/styles.css

@@ -108,7 +108,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   border-radius: 0.375rem;
-  border-color: #e5e7eb;
+  border-color: var(--cal-border);
   width: 360px;
   display: flex;
   flex-direction: row;
@@ -152,7 +152,7 @@
   padding: 0.5rem;
   border-radius: 0.375rem;
   border-width: 1px;
-  border-color: #e5e7eb;
+  border-color: var(--cal-border);
   width: 360px;
   margin-top: 4px;
 }
@@ -248,7 +248,7 @@ button.react-calendar__tile.react-calendar__month-view__days__day:hover,
 }
 
 .react-daterange-picker > .react-daterange-picker__wrapper:hover {
-  border-color: var(--cal-bg-subtle);
+  border-color: var(--cal-bg-inverted);
 }
 
 .react-daterange-picker.react-daterange-picker--disabled > .react-daterange-picker__wrapper:hover {