From cb104918215809b5a5ad7d0b67d44034be485d7e Mon Sep 17 00:00:00 2001
From: Nadezzdi <nadezzdi@gmail.com>
Date: Thu, 18 Mar 2021 13:54:18 +0300
Subject: [PATCH] fix(calendar): fix selected and day-off days style

---
 src/calendar/README.md                        | 5 +++++
 src/calendar/calendar_theme_alfa-on-color.css | 6 ++++++
 src/calendar/calendar_theme_alfa-on-white.css | 6 ++++++
 3 files changed, 17 insertions(+)

diff --git a/src/calendar/README.md b/src/calendar/README.md
index d976f7a9f1..60c65bd28f 100644
--- a/src/calendar/README.md
+++ b/src/calendar/README.md
@@ -56,6 +56,9 @@ const offDays = [
     getTime(startOfDay(addDays(currentDate, 7)))
 ];
 
+const startDate = getTime(currentDate.setDate(1));
+const endDate = getTime(addDays(currentDate, 30));
+
 <Calendar
     value={ state.date }
     offDays={ offDays }
@@ -64,6 +67,8 @@ const offDays = [
             date: newDate
         });
     } }
+    selectedFrom={ startDate }
+    selectedTo={ endDate }
 />
 ```
 
diff --git a/src/calendar/calendar_theme_alfa-on-color.css b/src/calendar/calendar_theme_alfa-on-color.css
index 6dde1541b4..914febd4ff 100644
--- a/src/calendar/calendar_theme_alfa-on-color.css
+++ b/src/calendar/calendar_theme_alfa-on-color.css
@@ -42,6 +42,12 @@
                 &:hover {
                     background: var(--color-white);
                 }
+
+                &.calendar__day_type_off,
+                &.calendar__day_type_weekend-off {
+                    color: var(--color-dark-indigo-30-flat);
+                    background: var(--color-background-minor-alfa-on-color);
+                }
             }
         }
 
diff --git a/src/calendar/calendar_theme_alfa-on-white.css b/src/calendar/calendar_theme_alfa-on-white.css
index f12a0000d5..717e6bafa8 100644
--- a/src/calendar/calendar_theme_alfa-on-white.css
+++ b/src/calendar/calendar_theme_alfa-on-white.css
@@ -42,6 +42,12 @@
                 &:hover {
                     background: var(--color-dark-indigo);
                 }
+
+                &.calendar__day_type_off,
+                &.calendar__day_type_weekend-off {
+                    color: var(--color-dark-indigo-30-flat);
+                    background: var(--color-dark-indigo-60);
+                }
             }
         }