From 76ad8074775fc75f9237bbc9532b901dd0d1d191 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Thu, 29 Oct 2026 16:22:58 +0100
Subject: [PATCH] fix: make other months' days in the calendar readable

---
 components/calendar/__tests__/mini-calendar.test.tsx | 7 +++++++
 components/calendar/calendar-month-view.tsx          | 6 ++++--
 components/calendar/mini-calendar.tsx                | 8 +++++---
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/components/calendar/__tests__/mini-calendar.test.tsx b/components/calendar/__tests__/mini-calendar.test.tsx
index 7fdf46f69..0bd995c96 100644
--- a/components/calendar/__tests__/mini-calendar.test.tsx
+++ b/components/calendar/__tests__/mini-calendar.test.tsx
@@ -85,6 +85,13 @@ describe('MiniCalendar', () => {
     expect(document.activeElement).toBe(day(/October 5, 2026/));
   });
 
+  it("draws other months' days in a colour that keeps text contrast, not a faded one", () => {
+    render(<Harness />);
+    const circle = day(/September 28, 2026/).firstElementChild!;
+    expect(circle.className).toContain('text-muted-foreground');
+    expect(circle.className).not.toMatch(/text-muted-foreground\/\d+/);
+  });
+
   it('tells which month is selected in the month picker', () => {
     render(<Harness />);
     fireEvent.click(screen.getByRole('button', { name: /October 2026/ }));
diff --git a/components/calendar/calendar-month-view.tsx b/components/calendar/calendar-month-view.tsx
index fb6ed8b0b..0ff30c202 100644
--- a/components/calendar/calendar-month-view.tsx
+++ b/components/calendar/calendar-month-view.tsx
@@ -433,7 +433,7 @@ export function CalendarMonthView({
                 >
                   <div className="flex items-center justify-center gap-1 mb-0.5">
                     {firstOfMonth && (
-                      <span className={cn("text-[10px] font-medium", inMonth ? "text-muted-foreground" : "text-muted-foreground/60")}>
+                      <span className="text-[10px] font-medium text-muted-foreground">
                         {t(`months.${monthLabelKeys[getMonth(day)]}`)}
                       </span>
                     )}
@@ -456,7 +456,9 @@ export function CalendarMonthView({
                         isMobile ? "w-7 h-7 text-xs" : "w-6 h-6 text-xs",
                         today && "bg-primary text-primary-foreground font-bold",
                         selected && !today && "bg-primary/15 text-primary font-bold",
-                        !inMonth && !selected && !today && "text-muted-foreground/50",
+                        // Readable at 4.5:1 like any text; the muted colour
+                        // still sets other months apart.
+                        !inMonth && !selected && !today && "text-muted-foreground",
                         inMonth && !selected && !today && "font-medium",
                         !today && !isMobile && "hover:bg-muted"
                       )}
diff --git a/components/calendar/mini-calendar.tsx b/components/calendar/mini-calendar.tsx
index 5fe39e4a6..93f2259e5 100644
--- a/components/calendar/mini-calendar.tsx
+++ b/components/calendar/mini-calendar.tsx
@@ -252,7 +252,7 @@ export function MiniCalendar({
                 {showWeekNumbers && (
                   <th
                     scope="row"
-                    className="w-5 p-0 text-center text-[9px] text-muted-foreground/60 font-medium"
+                    className="w-5 p-0 text-center text-[9px] text-muted-foreground font-medium"
                   >
                     <span aria-hidden="true">{weekNumberOf(week[0])}</span>
                     <span className="sr-only">{t("mini_week_number", { week: weekNumberOf(week[0]) })}</span>
@@ -281,7 +281,9 @@ export function MiniCalendar({
                         <span
                           className={cn(
                             "relative flex items-center justify-center w-7 h-7 rounded-full transition-colors",
-                            !inMonth && "text-muted-foreground/40",
+                            // Other months' days in the muted text colour, which
+                            // still reads at 4.5:1 (a faded one did not).
+                            !inMonth && "text-muted-foreground",
                             // Today is the filled circle; the selected day is tinted.
                             today && "bg-primary text-primary-foreground font-semibold",
                             selected && !today && "bg-primary/15 text-primary font-semibold",
@@ -350,7 +352,7 @@ export function MiniCalendar({
                   "py-2 text-xs rounded-md transition-colors",
                   isSelected && "bg-primary text-primary-foreground",
                   !isSelected && isCurrentYear && "font-bold text-primary",
-                  !isSelected && !isCurrentYear && !inDecade && "text-muted-foreground/40",
+                  !isSelected && !isCurrentYear && !inDecade && "text-muted-foreground",
                   !isSelected && !isCurrentYear && "hover:bg-muted"
                 )}
               >