Enhances event color styling with flexible metadata system

Introduces a new color customization approach for calendar events using CSS custom properties and metadata

- Adds support for dynamic color assignment via event metadata
- Implements a flexible color utility class system
- Replaces hardcoded event type colors with a more generic color-mix() approach
- Provides broader color palette for event styling

src/elements/SwpEventElement.ts

@@ -296,6 +296,11 @@ export class SwpEventElement extends BaseSwpEventElement {
     element.dataset.type = event.type;
     element.dataset.duration = event.metadata?.duration?.toString() || '60';
 
+    // Apply color class from metadata
+    if (event.metadata?.color) {
+      element.classList.add(`is-${event.metadata.color}`);
+    }
+
     return element;
   }
 
@@ -373,6 +378,11 @@ export class SwpAllDayEventElement extends BaseSwpEventElement {
     element.dataset.allday = 'true';
     element.textContent = event.title;
 
+    // Apply color class from metadata
+    if (event.metadata?.color) {
+      element.classList.add(`is-${event.metadata.color}`);
+    }
+
     return element;
   }
 }

src/index.ts

@@ -141,7 +141,7 @@ async function initializeCalendar(): Promise<void> {
     builder.registerType(MockAuditRepository).as<IApiRepository<IAuditEntry>>();
 
     
-    let calendarMode = 'date' ;
+    let calendarMode = 'resource' ;
     // Register DataSource and HeaderRenderer based on mode
     if (calendarMode === 'resource') {
       builder.registerType(ResourceColumnDataSource).as<IColumnDataSource>();