feat: enhance CalendarDay component with holiday outline styling

- Added a new CSS variable for today's holiday outline to improve visual distinction on the calendar.
- Updated the CalendarDay component to apply the holiday outline styling when the day is marked as today and has associated event summaries.
- Enhanced unit tests to verify the correct application of styles for today and holiday events, ensuring proper rendering and user experience.

webapp-next/src/app/globals.css

@@ -76,6 +76,7 @@
   --today-hover: color-mix(in srgb, var(--bg) 15%, var(--today));
   --today-border: color-mix(in srgb, var(--today) 35%, transparent);
   --today-border-selected: color-mix(in srgb, var(--bg) 50%, transparent);
+  --today-holiday-outline: color-mix(in srgb, var(--bg) 28%, var(--today));
   --today-gradient-end: color-mix(in srgb, var(--today) 15%, transparent);
   --muted-fade: color-mix(in srgb, var(--muted) 40%, transparent);
   --handle-bg: color-mix(in srgb, var(--muted) 80%, var(--text));

webapp-next/src/components/calendar/CalendarDay.test.tsx

@@ -76,4 +76,20 @@ describe("CalendarDay", () => {
     const button = screen.getByRole("button", { name: /15/ });
     expect(button.getAttribute("aria-disabled")).not.toBe("true");
   });
+
+  it("applies today base and holiday outline when isToday and eventSummaries are set", () => {
+    render(
+      <CalendarDay
+        {...defaultProps}
+        isOtherMonth={false}
+        isToday={true}
+        eventSummaries={["Holiday"]}
+        onDayClick={() => {}}
+      />
+    );
+    const button = screen.getByRole("button", { name: /15/ });
+    expect(button.className).toMatch(/bg-today|today/);
+    expect(button.className).toMatch(/ring-2|today-holiday-outline/);
+    expect(button.getAttribute("aria-disabled")).not.toBe("true");
+  });
 });

webapp-next/src/components/calendar/CalendarDay.tsx

@@ -45,6 +45,7 @@ function CalendarDayInner({
     [duties]
   );
   const hasEvent = eventSummaries.length > 0;
+  const isTodayHoliday = isToday && hasEvent;
   const showIndicator = !isOtherMonth;
   const hasAny = duties.length > 0 || hasEvent;
 
@@ -82,10 +83,9 @@ function CalendarDayInner({
         showIndicator && hasAny && "font-bold",
         showIndicator &&
           hasEvent &&
+          !isToday &&
           "bg-[linear-gradient(135deg,var(--surface)_0%,var(--today-gradient-end)_100%)] border border-[var(--today-border)]",
-        isToday &&
-          hasEvent &&
-          "bg-today text-[var(--bg)] border border-[var(--today-border-selected)]"
+        isTodayHoliday && "ring-1 ring-inset ring-[var(--today-holiday-outline)]"
       )}
       onClick={(e) => {
         if (isOtherMonth) return;