feat: add theme provider and control components for light/dark mode

- Implemented ThemeProvider to manage theme state and preferences.
- Added ThemeControl component for users to switch between system, light, and dark themes.
- Integrated localStorage for theme preference persistence.
- Updated document styles based on theme changes.

test: add tests for permanent deletion of habits and related records

- Created tests to ensure permanent deletion of habits removes all dependent records.
- Verified that deletion requires ownership, authentication, and checks for archived habits.
- Added tests to confirm rollback behavior on deletion failures.

test: add tests for habit palette and progress card functionality

- Implemented tests for habit color progression and theme-based color shading.
- Added tests for progress card calculations and calendar display logic.

feat: define theme types and preferences

- Introduced Theme and ThemePreference types for better type safety.
- Created utility functions for resolving theme based on user preference and system settings.
- Defined theme palettes for light and dark modes to ensure adequate contrast.

src/components/design-system/CalendarHeatmap.tsx

@@ -1,12 +1,13 @@
+import { useTheme } from "../ThemeProvider";
+import { habitProgressColor, themedHabitShade } from "../../lib/habit-palette";
 import { useId, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
 import { CalendarLegend } from "./CalendarLegend";
 import { Field } from "./Field";
 import { Button } from "./primitives";
-import { CalendarDays, Keyboard } from "lucide-react";
+import { CalendarDays } from "lucide-react";
 import {
   describeDay,
   calendarTimeline,
-  progressShade,
   MONTH_VIEWS,
   visibleCalendarDays,
   type CalendarDay,
@@ -18,8 +19,8 @@ export function CalendarHeatmap({
   unit,
   label,
   color = "#111111",
-  emptyColor = "#eeeeee",
   compact = false,
+  initialMonths = 12,
   selectedDate: controlledDate,
   onSelectDate,
   historyLabel,
@@ -32,13 +33,15 @@ export function CalendarHeatmap({
   color?: string;
   emptyColor?: string;
   compact?: boolean;
+  initialMonths?: MonthView;
   selectedDate?: string;
   onSelectDate?: (date: string) => void;
   historyLabel?: string;
   legend?: ReactNode;
   selectedDayAction?: (date: string) => ReactNode;
 }) {
-  const [months, setMonths] = useState<MonthView | "custom">(12);
+  const { theme } = useTheme();
+  const [months, setMonths] = useState<MonthView | "custom">(initialMonths);
   const [customRange, setCustomRange] = useState<{ from: string; to: string } | null>(null);
   const [rangeError, setRangeError] = useState("");
   const latestDate =
@@ -236,8 +239,8 @@ export function CalendarHeatmap({
                     day.state === "not-due"
                       ? "transparent"
                       : day.state === "future"
-                        ? emptyColor
-                        : progressShade(day, color),
+                        ? "var(--ds-empty)"
+                        : day.value === 0 ? "var(--ds-empty)" : day.color ? themedHabitShade(day.color, color, theme) : habitProgressColor(color, (Math.max(1, Math.min(8, Math.round(day.value / day.target * 8))) - 1) / 7, theme),
                 }}
                 aria-label={`${day.date}: ${describeDay(day, unit)}`}
                 title={`${day.date}: ${describeDay(day, unit)}`}
@@ -274,27 +277,14 @@ export function CalendarHeatmap({
         </div>
       </div>
       {legend ?? <CalendarLegend days={days} color={color} label={label} />}
-      <div className="ds-calendar-caption">
-        <span>
-          {months === "custom" ? `${days.length} ${days.length === 1 ? "day" : "days"}` : `${months} months`}{" "}
-          <span className="ds-muted">
-            /{" "}
-            {historyLabel ??
-              (compact ? "Demo history" : "Illustrative history")}
-          </span>
-        </span>
-        <details className="ds-calendar-help">
-          <summary><Keyboard size={16} aria-hidden="true" /> Keyboard shortcuts</summary>
-          <p id={instructionsId}>
-            Select a day. Up/down: one day. Left/right: one week. Home/end: first/last date.
-          </p>
-        </details>
-      </div>
+      <p id={instructionsId} className="ds-visually-hidden">
+        Select a day. Up/down: one day. Left/right: one week. Home/end: first/last date.
+      </p>
+      {!historyLabel && <p className="ds-calendar-demo-label ds-muted">Demo history</p>}
       <div id={inspectorId} className="ds-date-inspector">
         <div className="ds-date-inspector-heading" aria-live="polite">
           <CalendarDays size={22} aria-hidden="true" />
           <div>
-            <span className="ds-eyebrow">SELECTED DAY</span>
             <time dateTime={selected.date}>
               {new Date(`${selected.date}T12:00:00Z`).toLocaleDateString("en", {
                 month: "long",