fix(Calendar): fix hover/active calendar day states (#7738)

* fix(Calendar): fix hover/active calendar day states

* fix: calendar day background

packages/vkui/src/components/CalendarDay/CalendarDay.module.css

@@ -23,7 +23,7 @@
 }
 
 .selected {
-  background-color: var(--vkui--color_background_secondary);
+  background-color: var(--vkui--color_background_secondary_alpha);
 }
 
 .selectionStart.selected,
@@ -74,11 +74,23 @@
 }
 
 .hintedActive,
-.hover :not(.hintedActive) .inner {
+.hostHovered :not(.hintedActive) .inner {
   background-color: var(--vkui--color_background_secondary_alpha--hover);
 }
 
+.hostActivated :not(.hintedActive) .inner {
+  background-color: var(--vkui--color_background_secondary_alpha--active);
+}
+
 .innerActive {
   background-color: var(--vkui--color_background_accent);
   color: var(--vkui--color_text_contrast);
 }
+
+.hostHovered .inner.innerActive {
+  background-color: var(--vkui--color_background_accent--hover);
+}
+
+.hostActivated .inner.innerActive {
+  background-color: var(--vkui--color_background_accent--active);
+}

packages/vkui/src/components/CalendarDay/CalendarDay.tsx

@@ -108,7 +108,8 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
           !sameMonth && styles.notSameMonth,
           className,
         )}
-        hoverMode={active ? '' : styles.hover}
+        hoverMode={styles.hostHovered}
+        activeMode={styles.hostActivated}
         hasActive={false}
         onClick={onClick}
         disabled={disabled}