fix(webapp): let log level chips and a few stray accents follow the theme

The log level badges were the odd ones out. ERROR and WARN already used tokens,
but TRACE and INFO were raw palette purples and blues, and DEBUG was the only
solid tile in the row - which left it a dark chip sitting in a white table on
the light themes. Every chip is now a translucent wash of its own accent over
whatever surface it lands on, drawn from tokens so the stronger-colours
preference can reach them.

Two more of the same kind: the calendar's selected day used text-text-bright,
which is near-black on the light themes and measured 2.66:1 on indigo-600, so
it now uses white; and a run's span title fell back to a raw blue-500 instead
of the tasks token.

The contrast audit storybook also now re-reads its measurements once CSS
transitions have settled. Reading at the moment the theme attribute changes
pairs the outgoing text colour with the already-updated background, which is
how a perfectly fine button came out at 2.75:1.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: samejr

apps/webapp/app/components/primitives/Calendar.tsx

@@ -103,8 +103,10 @@ export function Calendar({
         ),
         range_start: "day-range-start rounded-l-md",
         range_end: "day-range-end rounded-r-md",
+        // White rather than text-text-bright: that token is near-black on the
+        // light themes, which put the selected day at 2.66:1 on indigo-600.
         selected:
-          "bg-indigo-600 text-text-bright hover:bg-indigo-600 hover:text-text-bright focus:bg-indigo-600 focus:text-text-bright rounded-md",
+          "bg-indigo-600 text-white hover:bg-indigo-600 hover:text-white focus:bg-indigo-600 focus:text-white rounded-md",
         today: "bg-background-raised text-text-bright rounded-md",
         outside:
           "day-outside text-text-dimmed opacity-50 aria-selected:bg-background-raised/50 aria-selected:text-text-dimmed aria-selected:opacity-30",

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx

@@ -438,9 +438,7 @@ function RunBody({
           <Header2
             className={cn(
               "overflow-x-hidden",
-              run.isAgentRun ? "text-agents" : run.isScheduled ? "text-schedules" : "text-blue-500",
-              // System themes: monochrome title, the task icon keeps the color
-              "system:text-text-bright"
+              run.isAgentRun ? "text-agents" : run.isScheduled ? "text-schedules" : "text-tasks"
             )}
           >
             <span className="truncate">

apps/webapp/app/routes/storybook.distinguish-without-color/useThemeRevision.ts

@@ -5,36 +5,57 @@ import { useEffect, useState, useSyncExternalStore } from "react";
  *  the interface-contrast slider writes into `style`. */
 const WATCHED_ATTRIBUTES = ["data-theme", "data-icon-contrast", "style"];
 
+/**
+ * How long to wait before re-reading. Plenty of components put a CSS
+ * `transition` on their text color, and at the moment the attribute changes the
+ * transition has not started - the computed color is still the *outgoing* one,
+ * while untransitioned backgrounds have already snapped to the new theme. Read
+ * then and you pair the old foreground with the new fill, which is how a
+ * perfectly fine button came out at 2.75:1. Tailwind's default is 150ms and a
+ * few call sites use 300ms, so settle well clear of both.
+ */
+const TRANSITION_SETTLE_MS = 500;
+
 /* One observer for the whole page, not one per swatch - the audit renders a few
    hundred measured rows and each of them wants the same signal. */
 const listeners = new Set<() => void>();
 let revision = 0;
 let observer: MutationObserver | null = null;
+let settleTimer: ReturnType<typeof setTimeout> | null = null;
 
 function bump() {
   revision += 1;
   for (const listener of listeners) listener();
 }
 
+/** Read now so nothing looks frozen, then again once the transitions land. */
+function bumpAndSettle() {
+  bump();
+  if (settleTimer) clearTimeout(settleTimer);
+  settleTimer = setTimeout(bump, TRANSITION_SETTLE_MS);
+}
+
 function subscribe(listener: () => void) {
   listeners.add(listener);
 
   if (!observer) {
-    observer = new MutationObserver(bump);
+    observer = new MutationObserver(bumpAndSettle);
     observer.observe(document.documentElement, {
       attributes: true,
       attributeFilter: WATCHED_ATTRIBUTES,
     });
     // One tick on the next frame: in dev the stylesheet can land after
     // hydration, and a ratio measured before it does is meaningless.
-    requestAnimationFrame(bump);
+    requestAnimationFrame(bumpAndSettle);
   }
 
   return () => {
     listeners.delete(listener);
     if (listeners.size === 0) {
       observer?.disconnect();
       observer = null;
+      if (settleTimer) clearTimeout(settleTimer);
+      settleTimer = null;
     }
   };
 }

apps/webapp/app/utils/logUtils.ts

@@ -93,20 +93,24 @@ export function kindToLevel(kind: string, status: string): LogLevel {
   }
 }
 
-// Level badge color styles
+/* Level badge styles. Every chip is a translucent wash of its own accent over
+   whatever surface it lands on, so the set reads as one family and follows the
+   theme - DEBUG included, which used to be the only solid tile in the row and so
+   stayed a dark chip in a white table. Accents come from tokens rather than the
+   raw palette so the "Increase color contrast" preference can reach them. */
 export function getLevelColor(level: LogLevel): string {
   switch (level) {
     case "ERROR":
       return "text-error bg-error/10 border-error/20";
     case "WARN":
       return "text-warning bg-warning/10 border-warning/20";
     case "TRACE":
-      return "text-purple-400 bg-purple-500/10 border-purple-500/20";
+      return "text-log-trace bg-log-trace/10 border-log-trace/20";
     case "DEBUG":
-      return "text-charcoal-400 bg-charcoal-700 border-charcoal-600";
+      return "text-text-dimmed bg-black/5 border-black/10 dark:bg-white/5 dark:border-white/10";
     case "INFO":
-      return "text-blue-400 bg-blue-500/10 border-blue-500/20";
+      return "text-pending bg-pending/10 border-pending/20";
     default:
-      return "text-text-dimmed bg-charcoal-750 border-charcoal-700";
+      return "text-text-dimmed bg-black/5 border-black/10 dark:bg-white/5 dark:border-white/10";
   }
 }