style/calendar collection: improve the support for colored notes

apps/client/src/stylesheets/theme-next-dark.css

@@ -270,6 +270,11 @@
     --ck-editor-toolbar-button-on-color: white;
     --ck-editor-toolbar-button-on-shadow: 1px 1px 2px rgba(0, 0, 0, .75);
     --ck-editor-toolbar-dropdown-button-open-background: #ffffff14;
+
+    --calendar-coll-event-background-saturation: 12%;
+    --calendar-coll-event-background-lightness: 21%;
+    --calendar-coll-event-text-color: white;
+    --calendar-cell-event-hover-filter: brightness(1.25);
 }
 
 /*

apps/client/src/stylesheets/theme-next-light.css

@@ -268,6 +268,11 @@
     --ck-editor-toolbar-button-on-color: black;
     --ck-editor-toolbar-button-on-shadow: none;
     --ck-editor-toolbar-dropdown-button-open-background: #0000000f;
+
+    --calendar-coll-event-background-lightness: 95%;
+    --calendar-coll-event-background-saturation: 80%;
+    --calendar-coll-event-text-color: black;
+    --calendar-cell-event-hover-filter: brightness(.95) saturate(1.25);
 }
 
 #left-pane .fancytree-node.tinted {

apps/client/src/widgets/collections/calendar/event_builder.ts

@@ -3,6 +3,7 @@ import froca from "../../../services/froca";
 import { formatDateToLocalISO, getCustomisableLabel, getMonthsInDateRange, offsetDate } from "./utils";
 import FNote from "../../../entities/fnote";
 import server from "../../../services/server";
+import clsx from "clsx";
 
 interface Event {
     startDate: string,
@@ -81,6 +82,7 @@ export async function buildEvent(note: FNote, { startDate, endDate, startTime, e
     const customTitleAttributeName = note.getLabelValue("calendar:title");
     const titles = await parseCustomTitle(customTitleAttributeName, note);
     const color = note.getLabelValue("calendar:color") ?? note.getLabelValue("color");
+    const colorClass = note.getColorClass();
     const events: EventInput[] = [];
 
     const calendarDisplayedAttributes = note.getLabelValue("calendar:displayedAttributes")?.split(",");
@@ -111,7 +113,7 @@ export async function buildEvent(note: FNote, { startDate, endDate, startTime, e
             color: color ?? undefined,
             iconClass: note.getLabelValue("iconClass"),
             promotedAttributes: displayedAttributesData,
-            className: isArchived ? "archived" : ""
+            className: clsx({archived: isArchived}, colorClass)
         };
         if (endDate) {
             eventData.end = endDate;

apps/client/src/widgets/collections/calendar/index.css

@@ -76,3 +76,29 @@ body.desktop:not(.zen) .calendar-view .calendar-header {
     padding-inline-end: unset !important;
 }
 /* #endregion */
+
+.calendar-view {
+    --fc-event-text-color: var(--calendar-coll-event-text-color);
+}
+
+.calendar-view a.fc-timegrid-event,
+.calendar-view a.fc-daygrid-event {
+    font-weight: 500;
+}
+
+.calendar-view a.fc-timegrid-event:hover,
+.calendar-view a.fc-daygrid-event:hover {
+    text-decoration: none;    
+    filter: var(--calendar-cell-event-hover-filter);
+}
+
+.fc-timegrid-event.with-hue, .fc-daygrid-event:not(.fc-daygrid-dot-event).with-hue {
+    --fc-event-text-color: var(--custom-color);
+
+    border: unset;
+    border-left: 4px solid;
+    padding-left: 8px;
+    background: hsl(var(--custom-color-hue),
+                    var(--calendar-coll-event-background-saturation),
+                    var(--calendar-coll-event-background-lightness)) !important;
+}