npm - @taskmark/ui - Versions diffs - 0.3.0 → 0.3.1 - Mend

@taskmark/ui 0.3.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (301) hide show

package/README.md CHANGED Viewed

@@ -82,7 +82,7 @@ Board resolution (bound mode only):
 | Layout | Where to install / run |
 |--------|------------------------|
 | Single-git | Product root (discovers `./taskmark/`) or the `taskmark/` folder |
-| Multi-git | Dedicated sibling `*-taskmark` repo root (`INDEX.md` at root) |
+| Multi-git | Dedicated sibling `*-taskmark` repo root (`epics/` at root) |
 You do **not** need to clone `taskmark-frontend`.

package/app/globals.css CHANGED Viewed

@@ -94,6 +94,14 @@
   --shadow-lg: 9px 9px 0 0 var(--shadow-color);
   --shadow-xl: 14px 14px 0 1px var(--shadow-color);
   --shadow-2xl: 20px 20px 0 2px var(--shadow-color);
+  --surface-gradient: linear-gradient(180deg, #ffffff 0%, #f7f4ff 100%);
+  --surface-glow: radial-gradient(ellipse at top, #eadffe 0%, transparent 55%);
+}
+@layer base {
+  body {
+    @apply bg-background text-foreground;
+  }
 }
 /* Markdown body: reset outer margins without Tailwind arbitrary :first-child variants
@@ -105,6 +113,21 @@
   margin-bottom: 0;
 }
+.tm-mermaid svg {
+  max-width: 100%;
+  height: auto;
+}
+/* Page surfaces follow the theme tokens instead of a light-only gradient. */
+.tm-surface {
+  background-color: var(--background);
+  background-image: var(--surface-gradient);
+}
+.tm-surface-glow {
+  background-image: var(--surface-glow), var(--surface-gradient);
+}
 .dark {
   --background: #0f0f0f;
   --foreground: #fafafa;
@@ -134,6 +157,8 @@
   --chart-5: #7b6df5;
   --radius: 0.25rem;
   --border-w: 2px;
+  --surface-gradient: linear-gradient(180deg, #0f0f0f 0%, #171325 100%);
+  --surface-glow: radial-gradient(ellipse at top, #2f2542 0%, transparent 55%);
   --shadow-xs: 2px 2px 0 0 var(--shadow-color);
   --shadow-sm: 3px 3px 0 0 var(--shadow-color);
   --shadow: 5px 5px 0 0 var(--shadow-color);

package/app/layout.tsx CHANGED Viewed

@@ -1,8 +1,11 @@
 import type { Metadata, Viewport } from "next"
 import { Archivo_Black, Space_Grotesk } from "next/font/google"
+import Script from "next/script"
 import { BoardDevReloader } from "@/components/board/board-dev-reloader"
+import { ThemeProvider } from "@/components/theme-provider"
 import { Toaster } from "@/components/ui/sonner"
 import { SITE } from "@/lib/site"
+import { THEME_INIT_SCRIPT } from "@/lib/theme-cookie"
 import "./globals.css"
 const archivoBlack = Archivo_Black({
@@ -19,7 +22,7 @@ const spaceGrotesk = Space_Grotesk({
 })
 const siteDescription =
-  "Taskmark — product memory for agent work. Local markdown boards for Cursor with sizing, work logs, and velocity."
+  "Taskmark — product memory for agent work. Local markdown boards for Cursor with static sizing and work logs."
 export const viewport: Viewport = {
   themeColor: "#111111",
@@ -76,13 +79,20 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body
         className={`${archivoBlack.variable} ${spaceGrotesk.variable} font-sans antialiased`}
       >
-        <Toaster />
-        <BoardDevReloader />
-        {children}
+        <Script
+          id="taskmark-theme-init"
+          strategy="beforeInteractive"
+          dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }}
+        />
+        <ThemeProvider>
+          <Toaster />
+          <BoardDevReloader />
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   )

package/app/setup/page.tsx CHANGED Viewed

@@ -39,7 +39,7 @@ export default async function SetupPage({ searchParams }: SetupPageProps) {
     <div className="relative flex min-h-svh flex-col items-center justify-center px-4 py-16">
       <div
         aria-hidden
-        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_#eadffe_0%,_transparent_55%),_linear-gradient(180deg,_#fff_0%,_#f7f4ff_100%)]"
+        className="tm-surface-glow pointer-events-none absolute inset-0"
       />
       <div className="relative z-10 flex w-full max-w-xl flex-col items-center gap-8">
         <div className="flex flex-col items-center text-center">

package/bin/lib/resolve-board.mjs CHANGED Viewed

@@ -2,10 +2,7 @@ import fs from "node:fs"
 import path from "node:path"
 function hasBoardMarkers(boardPath) {
-  return (
-    fs.existsSync(path.join(boardPath, "INDEX.md")) ||
-    fs.existsSync(path.join(boardPath, "epics"))
-  )
+  return fs.existsSync(path.join(boardPath, "epics"))
 }
 function isDedicatedBoardRepoName(name) {

package/components/board/app-bar.tsx CHANGED Viewed

@@ -2,6 +2,7 @@
 import { selectActiveProject, openAddProject } from "@/app/setup/actions"
 import { BrandLogo } from "@/components/brand-logo"
+import { ThemeToggle } from "@/components/theme-toggle"
 import { Button } from "@/components/ui/button"
 import { projectOptionLabel } from "@/lib/taskmark/project-label"
 import type { DiscoveredProject } from "@/lib/taskmark/types"
@@ -90,6 +91,8 @@ export function AppBar({
             </Button>
           </form>
         ) : null}
+        <ThemeToggle />
       </div>
     </header>
   )

package/components/board/board-screen.tsx CHANGED Viewed

@@ -1,17 +1,17 @@
 import { Suspense } from "react"
-import Link from "next/link"
 import { redirect } from "next/navigation"
 import { AppBar } from "@/components/board/app-bar"
-import { EpicList } from "@/components/board/epic-list"
+import { ChangelogPanel } from "@/components/board/changelog-panel"
 import { ListViewSwitcher } from "@/components/board/list-view-switcher"
-import { OverallWorkItemsList } from "@/components/board/overall-work-items-list"
+import { OverallTreeList } from "@/components/board/overall-tree-list"
+import { PointsHeatmap } from "@/components/board/points-heatmap"
 import { ProjectStatusMetricsStrip } from "@/components/board/project-status-metrics-strip"
 import { StaticBoardApp } from "@/components/board/static-board-app"
-import { TaskList } from "@/components/board/task-list"
 import { WorkItemsList } from "@/components/board/work-items-list"
 import { WorkItemSheetProvider } from "@/components/board/work-item-sheet"
 import { resolveActiveProject } from "@/lib/taskmark/active-project"
+import { buildBoardIndex } from "@/lib/taskmark/board-index"
 import {
   getActiveProjectCookie,
   getHideCompletedCookies,
@@ -19,7 +19,6 @@ import {
 } from "@/lib/taskmark/cookies"
 import {
   LIST_VIEW_LABELS,
-  boardHref,
   parseListViewMode,
   type ListViewMode,
 } from "@/lib/taskmark/list-view-mode"
@@ -30,7 +29,9 @@ import {
   parseWorkItemsForEpic,
   parseWorkItemsViewForProject,
 } from "@/lib/taskmark/parse-flat-lists"
+import { loadBoardChangelogMarkdown } from "@/lib/taskmark/load-changelog"
 import { parseItemsForStory } from "@/lib/taskmark/parse-items"
+import { storyKey } from "@/lib/taskmark/snapshot-types"
 import {
   collectCompletedLeafPointSamples,
   collectMetricLeaves,
@@ -58,7 +59,7 @@ function paramValue(value: string | string[] | undefined): string | null {
 }
 function headingForView(view: ListViewMode): string {
-  if (view === "overall") return "Epics"
+  if (view === "overall") return "Overall"
   return LIST_VIEW_LABELS[view]
 }
@@ -90,16 +91,17 @@ export async function BoardScreen({ searchParams }: BoardScreenProps) {
   }
   const params = await searchParams
-  const activeView = parseListViewMode(params.view)
+  const boardIndex = buildBoardIndex(activeProject.boardPath)
+  const changelogMarkdown = loadBoardChangelogMarkdown(activeProject.boardPath)
+  const hasChangelog = changelogMarkdown != null
+  const activeView = parseListViewMode(params.view, { hasChangelog })
   const selectedEpicId =
     activeView === "overall" ? paramValue(params.epic) : null
   const selectedStoryId =
     activeView === "overall" && selectedEpicId
       ? paramValue(params.story)
       : null
-  const selectedItemId = paramValue(params.item)
-  const list = parseEpicsForProject(activeProject)
+  const list = parseEpicsForProject(activeProject, boardIndex)
   const epicCount = list.epics.length
   const errorCount = list.errors.length
@@ -107,44 +109,50 @@ export async function BoardScreen({ searchParams }: BoardScreenProps) {
     ? list.epics.find((e) => e.id === selectedEpicId) ?? null
     : null
-  const epicWorkItems =
-    activeView === "overall" && selectedEpicId != null
-      ? parseWorkItemsForEpic(
+  const workItemsByEpic: Record<
+    string,
+    ReturnType<typeof parseWorkItemsForEpic>
+  > = {}
+  const itemsByStory: Record<string, ReturnType<typeof parseItemsForStory>> = {}
+  if (activeView === "overall") {
+    for (const epic of list.epics) {
+      const epicItems = parseWorkItemsForEpic(
+        activeProject,
+        epic.id,
+        epic.title,
+        boardIndex
+      )
+      workItemsByEpic[epic.id] = epicItems
+      for (const row of epicItems.rows) {
+        if (row.kind !== "story") continue
+        itemsByStory[storyKey(epic.id, row.id)] = parseItemsForStory(
           activeProject,
-          selectedEpicId,
-          selectedEpic?.title ?? null
+          epic.id,
+          row.id,
+          boardIndex
         )
-      : null
-  const selectedStory =
-    epicWorkItems && selectedStoryId
-      ? (epicWorkItems.rows.find(
-          (row) => row.kind === "story" && row.id === selectedStoryId
-        ) ?? null)
-      : null
-  const itemList =
-    activeView === "overall" &&
-    selectedEpicId != null &&
-    selectedStory != null
-      ? parseItemsForStory(activeProject, selectedEpicId, selectedStory.id)
-      : null
+      }
+    }
+  }
   const workItemsList =
-    activeView === "overall" || activeView === "workitems"
-      ? parseWorkItemsViewForProject(activeProject)
+    activeView === "workitems"
+      ? parseWorkItemsViewForProject(activeProject, boardIndex)
       : null
+  const metricLeaves = collectMetricLeaves(activeProject, boardIndex)
   /** Match Current Speed exactly: completed task/bug leaf points only. */
-  const countableCompletions = collectCompletedLeafPointSamples(
-    collectMetricLeaves(activeProject)
+  const countableCompletions =
+    collectCompletedLeafPointSamples(metricLeaves)
+  const statusMetrics = computeProjectStatusMetrics(
+    activeProject,
+    boardIndex,
+    metricLeaves
   )
-  const statusMetrics = computeProjectStatusMetrics(activeProject)
   return (
     <WorkItemSheetProvider>
-      <div className="min-h-svh bg-[linear-gradient(180deg,_#fff_0%,_#f7f4ff_100%)]">
+      <div className="tm-surface min-h-svh">
         <AppBar
           projects={workspace.projects}
           activeProjectId={activeProject.id}
@@ -169,23 +177,20 @@ export async function BoardScreen({ searchParams }: BoardScreenProps) {
                   ? ` · ${workItemsList.rows.length} item${workItemsList.rows.length === 1 ? "" : "s"}`
                   : ""}
                 {activeView === "overall" && selectedEpic
-                  ? ` · selected ${selectedEpic.id}`
+                  ? ` · expanded ${selectedEpic.id}`
                   : activeView === "overall" && selectedEpicId
                     ? ` · epic ${selectedEpicId} not in list`
-                    : activeView === "overall"
-                      ? " · select an epic to view work items"
-                      : ""}
-                {activeView === "overall" && selectedStory
-                  ? ` · story ${selectedStory.id}`
-                  : activeView === "overall" && selectedStoryId
-                    ? ` · story ${selectedStoryId} not in list`
                     : ""}
+                {activeView === "overall" && selectedStoryId
+                  ? ` · story ${selectedStoryId}`
+                  : ""}
               </p>
             </div>
             <ListViewSwitcher
               activeView={activeView}
               selectedEpicId={selectedEpicId}
-              selectedStoryId={selectedStory?.id ?? null}
+              selectedStoryId={selectedStoryId}
+              hasChangelog={hasChangelog}
             />
           </div>
@@ -193,81 +198,16 @@ export async function BoardScreen({ searchParams }: BoardScreenProps) {
           {activeView === "overall" ? (
             <>
-              <EpicList
-                lists={[list]}
+              <PointsHeatmap samples={countableCompletions} />
+              <OverallTreeList
+                list={list}
+                workItemsByEpic={workItemsByEpic}
+                itemsByStory={itemsByStory}
                 selectedEpicId={selectedEpicId}
+                selectedStoryId={selectedStoryId}
                 countableCompletions={countableCompletions}
                 initialHideCompleted={hideCompletedPrefs.epics}
               />
-              {epicWorkItems ? (
-                <div className="flex flex-col gap-3">
-                  <div className="flex items-baseline justify-between gap-3">
-                    <h2 className="font-head text-2xl tracking-tight">
-                      Work items for{" "}
-                      {epicWorkItems.epicTitle ?? epicWorkItems.epicId}
-                    </h2>
-                    <Link
-                      href={boardHref({
-                        view: "overall",
-                        item: selectedItemId,
-                      })}
-                      className="text-sm text-muted-foreground underline-offset-2 hover:underline"
-                    >
-                      Clear selection
-                    </Link>
-                  </div>
-                  <p className="text-sm text-muted-foreground">
-                    {epicWorkItems.rows.length} work item
-                    {epicWorkItems.rows.length === 1 ? "" : "s"}
-                    {epicWorkItems.errors.length > 0
-                      ? ` · ${epicWorkItems.errors.length} issue${epicWorkItems.errors.length === 1 ? "" : "s"}`
-                      : ""}
-                    {!selectedStory
-                      ? " · select a story to view its sub tasks"
-                      : ""}
-                  </p>
-                  <OverallWorkItemsList
-                    list={epicWorkItems}
-                    selectedStoryId={selectedStory?.id ?? null}
-                    countableCompletions={countableCompletions}
-                    initialHideCompleted={hideCompletedPrefs.overallWorkItems}
-                  />
-                </div>
-              ) : null}
-              {itemList && selectedStory ? (
-                <div className="flex flex-col gap-3">
-                  <div className="flex items-baseline justify-between gap-3">
-                    <h2 className="font-head text-2xl tracking-tight">
-                      Sub Tasks for{" "}
-                      {itemList.storyTitle ?? itemList.storyId}
-                    </h2>
-                    <Link
-                      href={boardHref({
-                        view: "overall",
-                        epic: itemList.epicId,
-                        item: selectedItemId,
-                      })}
-                      className="text-sm text-muted-foreground underline-offset-2 hover:underline"
-                    >
-                      Clear story
-                    </Link>
-                  </div>
-                  <p className="text-sm text-muted-foreground">
-                    {itemList.items.length} sub task
-                    {itemList.items.length === 1 ? "" : "s"}
-                    {itemList.errors.length > 0
-                      ? ` · ${itemList.errors.length} issue${itemList.errors.length === 1 ? "" : "s"}`
-                      : ""}
-                  </p>
-                  <TaskList
-                    list={itemList}
-                    countableCompletions={countableCompletions}
-                    initialHideCompleted={hideCompletedPrefs.tasks}
-                  />
-                </div>
-              ) : null}
             </>
           ) : null}
@@ -278,6 +218,10 @@ export async function BoardScreen({ searchParams }: BoardScreenProps) {
               initialHideCompleted={hideCompletedPrefs.workItems}
             />
           ) : null}
+          {activeView === "changelog" && changelogMarkdown ? (
+            <ChangelogPanel markdown={changelogMarkdown} />
+          ) : null}
         </div>
       </div>
     </WorkItemSheetProvider>

package/components/board/changelog-panel.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+"use client"
+import { MarkdownContent } from "@/components/board/markdown-content"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+export function ChangelogPanel({ markdown }: { markdown: string }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="font-head text-xl">Changelog</CardTitle>
+        <CardDescription>
+          Board-root CHANGELOG.md (Keep a Changelog)
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <MarkdownContent text={markdown} />
+      </CardContent>
+    </Card>
+  )
+}

package/components/board/epic-list.tsx CHANGED Viewed

@@ -26,6 +26,7 @@ import { ChildProgressBar } from "@/components/board/child-progress-bar"
 import { ListFiltersBar } from "@/components/board/list-filters-bar"
 import { ListPagination } from "@/components/board/list-pagination"
 import { SortableTableHead } from "@/components/board/sortable-table-head"
+import { statusRowClass } from "@/components/board/status-badge"
 import { TimeframeFilter } from "@/components/board/timeframe-filter"
 import { ViewWorkItemButton } from "@/components/board/work-item-sheet"
 import { AttributionAvatarGroup } from "@/components/board/attribution-avatars"
@@ -246,6 +247,7 @@ function ProjectEpicCard({
                           key={`${project.id}:${epic.id}:${epic.filePath}`}
                           data-state={selected ? "selected" : undefined}
                           className={cn(
+                            statusRowClass(epic.status),
                             selected && "bg-muted/60",
                             "hover:bg-muted/40"
                           )}

package/components/board/list-view-switcher.tsx CHANGED Viewed

@@ -6,8 +6,8 @@ import { useRouter, useSearchParams } from "next/navigation"
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import {
   LIST_VIEW_LABELS,
-  LIST_VIEW_MODES,
   boardHref,
+  listViewModes,
   type ListViewMode,
 } from "@/lib/taskmark/list-view-mode"
@@ -15,16 +15,19 @@ type ListViewSwitcherProps = {
   activeView: ListViewMode
   selectedEpicId?: string | null
   selectedStoryId?: string | null
+  hasChangelog?: boolean
 }
 function ListViewSwitcherInner({
   activeView,
   selectedEpicId = null,
   selectedStoryId = null,
+  hasChangelog = false,
 }: ListViewSwitcherProps) {
   const router = useRouter()
   const searchParams = useSearchParams()
   const itemId = searchParams.get("item")
+  const modes = listViewModes(hasChangelog)
   return (
     <Tabs
@@ -43,7 +46,7 @@ function ListViewSwitcherInner({
       }}
     >
       <TabsList aria-label="Board list view">
-        {LIST_VIEW_MODES.map((mode) => (
+        {modes.map((mode) => (
           <TabsTrigger key={mode} value={mode}>
             {LIST_VIEW_LABELS[mode]}
           </TabsTrigger>
@@ -54,12 +57,13 @@ function ListViewSwitcherInner({
 }
 export function ListViewSwitcher(props: ListViewSwitcherProps) {
+  const modes = listViewModes(props.hasChangelog ?? false)
   return (
     <React.Suspense
       fallback={
         <Tabs value={props.activeView}>
           <TabsList aria-label="Board list view">
-            {LIST_VIEW_MODES.map((mode) => (
+            {modes.map((mode) => (
               <TabsTrigger key={mode} value={mode} disabled>
                 {LIST_VIEW_LABELS[mode]}
               </TabsTrigger>

package/components/board/markdown-content.tsx CHANGED Viewed

@@ -1,10 +1,22 @@
 "use client"
+import { isValidElement, type ReactNode } from "react"
 import ReactMarkdown from "react-markdown"
 import remarkGfm from "remark-gfm"
+import { MermaidDiagram } from "@/components/board/mermaid-diagram"
 import { cn } from "@/lib/utils"
+function mermaidSourceFromPreChildren(children: ReactNode): string | null {
+  const child = Array.isArray(children) ? children[0] : children
+  if (!isValidElement<{ className?: string; children?: ReactNode }>(child)) {
+    return null
+  }
+  const className = child.props.className ?? ""
+  if (!className.includes("language-mermaid")) return null
+  return String(child.props.children ?? "").replace(/\n$/, "")
+}
 type MarkdownContentProps = {
   text: string
   className?: string
@@ -71,7 +83,15 @@ export function MarkdownContent({
               ol: ({ children }) => <span>{children}</span>,
               li: ({ children }) => <span>{children} </span>,
             }
-          : undefined
+          : {
+              pre({ children }) {
+                const mermaidSource = mermaidSourceFromPreChildren(children)
+                if (mermaidSource !== null) {
+                  return <MermaidDiagram chart={mermaidSource} />
+                }
+                return <pre>{children}</pre>
+              },
+            }
       }
     >
       {trimmed}

package/components/board/mermaid-diagram.tsx ADDED Viewed

@@ -0,0 +1,88 @@
+"use client"
+import { useEffect, useId, useState } from "react"
+function pageIsDark(): boolean {
+  if (typeof document === "undefined") return false
+  return Boolean(
+    document.documentElement.classList.contains("dark") ||
+      document.body.classList.contains("dark")
+  )
+}
+export function MermaidDiagram({ chart }: { chart: string }) {
+  const reactId = useId().replace(/:/g, "")
+  const [dark, setDark] = useState(false)
+  const [svg, setSvg] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  useEffect(() => {
+    const syncDark = () => setDark(pageIsDark())
+    syncDark()
+    const observer = new MutationObserver(syncDark)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    })
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["class"],
+    })
+    return () => observer.disconnect()
+  }, [])
+  useEffect(() => {
+    let cancelled = false
+    async function renderChart() {
+      try {
+        const mermaid = (await import("mermaid")).default
+        mermaid.initialize({
+          startOnLoad: false,
+          securityLevel: "strict",
+          theme: dark ? "dark" : "neutral",
+        })
+        const { svg: rendered } = await mermaid.render(
+          `tm-mermaid-${reactId}-${dark ? "d" : "l"}`,
+          chart
+        )
+        if (!cancelled) {
+          setSvg(rendered)
+          setError(null)
+        }
+      } catch (cause) {
+        if (!cancelled) {
+          setSvg(null)
+          setError(
+            cause instanceof Error ? cause.message : "Could not render diagram"
+          )
+        }
+      }
+    }
+    void renderChart()
+    return () => {
+      cancelled = true
+    }
+  }, [chart, reactId, dark])
+  if (error) {
+    return (
+      <div className="my-2 rounded border-2 border-border bg-muted p-3">
+        <p className="text-xs text-destructive">{error}</p>
+        <pre className="mt-2 overflow-x-auto font-mono text-xs">{chart}</pre>
+      </div>
+    )
+  }
+  if (!svg) {
+    return <p className="text-sm text-muted-foreground">Rendering diagram…</p>
+  }
+  return (
+    <div
+      className="tm-mermaid my-2 max-w-full overflow-x-auto"
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  )
+}

package/components/board/metric-stat-card.tsx CHANGED Viewed

@@ -26,15 +26,15 @@ export function MetricStatCard({
   return (
     <div
       className={cn(
-        "flex min-h-[7.5rem] flex-col justify-between gap-3 border-2 border-black bg-white p-4 shadow-none",
+        "flex min-h-[7.5rem] flex-col justify-between gap-3 border-2 border-black bg-card p-4 shadow-none",
         className
       )}
     >
       <div className="flex items-start justify-between gap-3">
-        <p className="text-sm font-medium text-neutral-800">{title}</p>
+        <p className="text-sm font-medium text-card-foreground">{title}</p>
         <div
           className={cn(
-            "flex size-9 shrink-0 items-center justify-center border-2 border-black text-black shadow-[3px_3px_0_0_#000]",
+            "flex size-9 shrink-0 items-center justify-center border-2 border-black text-black shadow-[3px_3px_0_0_var(--shadow-color)]",
             accentClassName
           )}
           aria-hidden
@@ -43,7 +43,7 @@ export function MetricStatCard({
         </div>
       </div>
       <div className="flex flex-col gap-1">
-        <p className="font-head text-3xl font-bold leading-none tracking-tight text-black tabular-nums sm:text-4xl">
+        <p className="font-head text-3xl font-bold leading-none tracking-tight text-card-foreground tabular-nums sm:text-4xl">
           {value}
         </p>
         {subtitle ? (