feat: allow customizing the hover background of dates

README.md

@@ -115,6 +115,24 @@ calendar.setClassNameGenerator(date -> {
 });
 ```
 
+## Styling dates
+
+Dates are rendered inside `vaadin-month-calendar`, so the styles for the class names returned by the `ClassNameGenerator` must be imported with `themeFor`:
+
+```
+@CssImport(value = "./styles/calendar-styles.css", themeFor = "vaadin-month-calendar")
+```
+
+The background of a date is set through the `--background-color` custom property, and its background on hover through `--hover-background-color`:
+
+```
+[part~='date'].holiday {
+  color: white;
+  --background-color: red;
+  --hover-background-color: darkred;
+}
+```
+
 ## Special configuration when using Spring
 
 By default, Vaadin Flow only includes ```com/vaadin/flow/component``` to be always scanned for UI components and views. For this reason, the addon might need to be whitelisted in order to display correctly. 

pom.xml

@@ -4,7 +4,7 @@
 
 	<groupId>org.vaadin.addons.flowingcode</groupId>
 	<artifactId>year-month-calendar</artifactId>
-	<version>4.6.3-SNAPSHOT</version>
+	<version>4.7.0-SNAPSHOT</version>
 	<name>Year Month Calendar Add-on</name>
 	<description>Year Month Calendar Add-on for Vaadin Flow</description>
 	<url>https://www.flowingcode.com/en/open-source/</url>

src/main/resources/META-INF/frontend/fc-month-calendar/vaadin-month-calendar.css

@@ -28,7 +28,7 @@
   }
 
   [part~='date']:not(:empty):not([part~='disabled']):not([part~='selected']):hover::before {
-    background-color: var(--lumo-primary-color-10pct, var(--aura-background-color));
+    background-color: var(--hover-background-color, var(--lumo-primary-color-10pct, var(--aura-background-color)));
   }
 
   [part~='date']::after {

src/test/resources/META-INF/frontend/styles/test_year-month-calendar.css

@@ -20,6 +20,7 @@
 [part~='date'].holiday {
   color: var(--lumo-error-contrast-color, white);
   --background-color: var(--lumo-error-color, #e00);
+  --hover-background-color: color-mix(in srgb, var(--lumo-error-color, #e00) 80%, black);
 }
 
 [part~='date'].weekend {