From a0fb228dc16f93bf00f254c507a43e9da32e9b82 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 13 Jun 2024 01:16:03 +0300
Subject: [PATCH] Custom style for ranges

---
 .../primevue/src/datepicker/style/DatePickerStyle.js   | 10 ++++++++++
 packages/themes/src/presets/aura/datepicker/index.js   |  6 ++++--
 packages/themes/src/presets/lara/datepicker/index.js   |  6 ++++--
 packages/themes/src/presets/nora/datepicker/index.js   |  6 ++++--
 4 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/primevue/src/datepicker/style/DatePickerStyle.js b/packages/primevue/src/datepicker/style/DatePickerStyle.js
index e3ed8374b..246e07ab2 100644
--- a/packages/primevue/src/datepicker/style/DatePickerStyle.js
+++ b/packages/primevue/src/datepicker/style/DatePickerStyle.js
@@ -226,6 +226,11 @@ const theme = ({ dt }) => `
     color: ${dt('datepicker.date.selected.color')};
 }
 
+.p-datepicker-day-selected-range {
+    background: ${dt('datepicker.date.range.selected.background')};
+    color: ${dt('datepicker.date.range.selected.color')};
+}
+
 .p-datepicker-today > .p-datepicker-day {
     background: ${dt('datepicker.today.background')};
     color: ${dt('datepicker.today.color')};
@@ -236,6 +241,11 @@ const theme = ({ dt }) => `
     color: ${dt('datepicker.date.selected.color')};
 }
 
+.p-datepicker-today > .p-datepicker-day-selected-range {
+    background: ${dt('datepicker.date.range.selected.background')};
+    color: ${dt('datepicker.date.range.selected.color')};
+}
+
 .p-datepicker-weeknumber {
     text-align: center
 }
diff --git a/packages/themes/src/presets/aura/datepicker/index.js b/packages/themes/src/presets/aura/datepicker/index.js
index ada80cb3f..292caa68c 100644
--- a/packages/themes/src/presets/aura/datepicker/index.js
+++ b/packages/themes/src/presets/aura/datepicker/index.js
@@ -67,10 +67,12 @@ export default {
     },
     date: {
         hoverBackground: '{content.hover.background}',
-        selectedBackground: '{highlight.background}',
+        selectedBackground: '{primary.color}',
+        rangeSelectedBackground: '{highlight.background}',
         color: '{content.color}',
         hoverColor: '{content.hover.color}',
-        selectedColor: '{highlight.color}',
+        selectedColor: '{primary.contrast.color}',
+        rangeSelectedColor: '{highlight.color}',
         width: '2rem',
         height: '2rem',
         borderRadius: '50%',
diff --git a/packages/themes/src/presets/lara/datepicker/index.js b/packages/themes/src/presets/lara/datepicker/index.js
index 6bf29d95d..bceeaf4d4 100644
--- a/packages/themes/src/presets/lara/datepicker/index.js
+++ b/packages/themes/src/presets/lara/datepicker/index.js
@@ -65,10 +65,12 @@ export default {
     },
     date: {
         hoverBackground: '{content.hover.background}',
-        selectedBackground: '{highlight.background}',
+        selectedBackground: '{primary.color}',
+        rangeSelectedBackground: '{highlight.background}',
         color: '{content.color}',
         hoverColor: '{content.hover.color}',
-        selectedColor: '{highlight.color}',
+        selectedColor: '{primary.contrast.color}',
+        rangeSelectedColor: '{highlight.color}',
         width: '2.5rem',
         height: '2.5rem',
         borderRadius: '50%',
diff --git a/packages/themes/src/presets/nora/datepicker/index.js b/packages/themes/src/presets/nora/datepicker/index.js
index b4aa6c90a..c9c9226ff 100644
--- a/packages/themes/src/presets/nora/datepicker/index.js
+++ b/packages/themes/src/presets/nora/datepicker/index.js
@@ -69,10 +69,12 @@ export default {
     },
     date: {
         hoverBackground: '{content.hover.background}',
-        selectedBackground: '{highlight.background}',
+        selectedBackground: '{primary.color}',
+        rangeSelectedBackground: '{highlight.background}',
         color: '{content.color}',
         hoverColor: '{content.hover.color}',
-        selectedColor: '{highlight.color}',
+        selectedColor: '{primary.contrast.color}',
+        rangeSelectedColor: '{highlight.color}',
         width: '2rem',
         height: '2rem',
         borderRadius: '50%',