diff --git a/packages/ui/components/form/date-range-picker/styles.css b/packages/ui/components/form/date-range-picker/styles.css
index a2fece3ee9..911a9dffaa 100644
--- a/packages/ui/components/form/date-range-picker/styles.css
+++ b/packages/ui/components/form/date-range-picker/styles.css
@@ -1,8 +1,8 @@
 .react-calendar {
   width: 350px;
   max-width: 100%;
-  background: white;
-  border: 1px solid #e5e7eb;
+  background: var(--cal-bg);
+  border: 1px solid var(--cal-bg-inverted);
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1.125em;
 }
@@ -52,13 +52,13 @@
 }
 
 .react-calendar__navigation button:disabled {
-  background-color: #f0f0f0;
+  background-color: transparent;
 }
 
 .react-calendar__navigation button:enabled:hover,
 .react-calendar__navigation button:enabled:focus {
-  background-color: #e5e7eb;
-  color: #111827;
+  background-color: #1d5ad8;
+  color: var(--cal-text-emphasis);
 }
 
 .react-calendar__tile {
@@ -100,7 +100,7 @@
 
 .react-calendar__tile:enabled:hover,
 .react-calendar__tile:enabled:focus {
-  background-color: #e6e6e6;
+  background-color: var(--cal-bg-subtle);
 }
 
 .react-daterange-picker > .react-daterange-picker__wrapper {
@@ -134,7 +134,7 @@
 
 .react-daterange-picker > .react-daterange-picker__wrapper:focus-within,
 .react-daterange-picker > .react-daterange-picker__wrapper:focus-within:hover {
-  border-color: #111827;
+  border-color: var(--cal-bg-subtle);
   border-width: 2px;
 }
 
@@ -173,7 +173,7 @@
   display: flex;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
-  color: #111827;
+  color: var(--cal-text);
   order: -9999;
   justify-content: flex-start;
   align-items: center;
@@ -206,26 +206,26 @@ button.react-calendar__tile.react-calendar__month-view__days__day {
 }
 
 .react-calendar__tile.react-calendar__tile--hover:not(.react-calendar__tile--active) {
-  background-color: #e5e7eb !important;
+  background-color: var(--cal-bg-subtle) !important;
 }
 
 .react-calendar__month-view__days > .react-calendar__tile.react-calendar__tile--hasActive,
 .react-calendar__month-view__days > .react-calendar__tile.react-calendar__tile--active,
 .react-calendar__month-view__days > button.react-calendar__tile.react-calendar__tile--active:hover {
-  background-color: #111827;
-  color: #ffffff;
+  background-color: var(--cal-bg-inverted);
+  color: var(--cal-text-inverted);
 }
 
 .react-calendar__tile.react-calendar__tile--active.react-calendar__month-view__days__day--weekend {
-  color: #ffffff;
+  color: var(--cal-text-inverted);
 }
 
 .react-calendar__tile.react-calendar__month-view__days__day--weekend {
-  color: #111827;
+  color: var(--cal-text-emphasis);
 }
 
 .react-calendar__tile.react-calendar__month-view__days__day--neighboringMonth {
-  color: #9ca3af;
+  color: var(--cal-text-muted);
 }
 
 .react-calendar__tile--now::before {
@@ -234,7 +234,7 @@ button.react-calendar__tile.react-calendar__month-view__days__day {
   height: 4px;
   border-radius: 50%;
   position: absolute;
-  background-color: #111827;
+  background-color: var(--cal-text-emphasis);
   left: 50%;
   transform: translateX(-50%);
   bottom: 0;
@@ -243,19 +243,19 @@ button.react-calendar__tile.react-calendar__month-view__days__day {
 
 button.react-calendar__tile.react-calendar__month-view__days__day:hover,
 .react-calendar__tile.react-calendar__year-view__months__month:hover {
-  background-color: #d1d5db;
-  color: #111827;
+  background-color: var(--cal-bg-subtle);
+  color: var(--cal-text-emphasis);
 }
 
 .react-daterange-picker > .react-daterange-picker__wrapper:hover {
-  border-color: #9ca3af;
+  border-color: var(--cal-bg-subtle);
 }
 
 .react-daterange-picker.react-daterange-picker--disabled > .react-daterange-picker__wrapper:hover {
-  border-color: #e5e7eb;
+  border-color: var(--cal-bg-subtle);
 }
 
 .react-calendar__navigation button.react-calendar__navigation__label:enabled:hover,
 .react-calendar__navigation button.react-calendar__navigation__label:enabled:focus {
   background-color: transparent;
-}
\ No newline at end of file
+}