feat(theme): dark/light mode with a Radix Colors-based palette

Adds a working Dark/Light toggle (next to the language switcher, same row as EN/VI) and re-themes the whole dashboard, not just the handful of components that already used semantic tokens. - Tailwind darkMode:"class" + CSS-variable color tokens (client/src/index.css, tailwind.config.js): surface.0-5, border/border-light, accent/accent-hover, fg.primary/secondary/muted, status.success/danger/warning. One class flip on <html> re-themes everything — no per-element dark: variant pairs. - useTheme() hook: localStorage-persisted, defaults to dark, no prefers-color-scheme fallback (client/src/hooks/useTheme.ts). - Mechanical, table-driven migration (scripts/migrate-color-tokens.mjs, scripts/tokenize-status-colors.mjs, scripts/darken-status-colors.mjs) of every raw neutral/gray/slate + emerald/red/amber Tailwind utility across client/src onto the new tokens, so every badge/button/component pulls the same shade per status/role instead of each picking its own. - Palette values are the literal Radix Colors (radix-ui.com/colors) scale constants — slate/blue/green/red/amber steps 1-12 — adopted after three rounds of hand-picked values that kept overshooting (flat, then too dark, then glaring); see docs/superpowers/specs/2026-07-31-color-redesign- dark-light-mode-design.md for the full history and role mapping. - PipelineMap: done/current/failed/passed-no-evidence/detected share one visual language (border + text + translucent wash of the same status color); `current` alone stays a solid accent fill, the one state that gets to look bolder ("you are here"). - LaneCard: removed the stage/kind/auto-stage chips that duplicated the Workspace lane-detail header already showing them. Categorical/decorative hues (violet, indigo, cyan, teal, sky, rose, pink, orange, yellow, and blue where it plays a role-coloring part e.g. message bubbles) are deliberately out of scope — collapsing those onto shared tokens would erase the distinction between different kinds of thing, not a status.
2026-07-31 10:54:31 +07:00
parent 4905d63b97
commit b673363351
82 changed files with 3776 additions and 2578 deletions
@@ -2,28 +2,33 @@
 * @file The lane pipeline map: a horizontal chain of stage nodes coloured by
 * state. Layout is computed from the node list (flex + connectors), never from
 * hardcoded coordinates, so a lane can use a longer or shorter template without
- * touching this component. "passed without evidence" is deliberately its own
- * colour: a stage the agent claimed but left no artifact for is not the same as
- * a stage that is genuinely done. A `detected` node (the server's heuristic saw
- * tool-event evidence but the agent never declared it) gets a FOURTH treatment —
- * dashed amber, overriding whatever `state` it carries — because it must never
- * be mistaken for the solid green of a real "done".
+ * touching this component. Every state but `current` shares one visual
+ * language — coloured border, coloured text, a translucent wash of the same
+ * colour — so status colour means the same thing everywhere in the app, not
+ * a different shade per component. `current` is the sole solid fill, in the
+ * app's own accent colour: the one state that gets to look bolder than the
+ * rest, because it answers "where am I right now". "passed without
+ * evidence" is its own colour: a stage the agent claimed but left no
+ * artifact for is not the same as a stage that is genuinely done. A
+ * `detected` node (the server's heuristic saw tool-event evidence but the
+ * agent never declared it) gets a FOURTH treatment — thin dashed warning,
+ * no fill — because it must never be mistaken for a real declaration.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

 import type { LaneNode } from "../../lib/types";

 const STATE_CLASS: Record<LaneNode["state"], string> = {
-  done: "border-emerald-500 text-emerald-400 bg-emerald-500/10",
-  current: "border-blue-400 text-blue-300 bg-blue-500/20 ring-2 ring-blue-400/40",
-  "passed-no-evidence": "border-amber-500 text-amber-400 bg-amber-500/10",
-  failed: "border-red-500 text-red-400 bg-red-500/10",
-  pending: "border-neutral-700 text-neutral-500 bg-transparent",
+  done: "border-status-success/60 text-status-success bg-status-success/10",
+  current: "border-accent bg-accent text-white ring-2 ring-accent/30 shadow-sm",
+  "passed-no-evidence": "border-status-warning/60 text-status-warning bg-status-warning/10",
+  failed: "border-status-danger/60 text-status-danger bg-status-danger/10",
+  pending: "border-border-light text-fg-muted bg-transparent",
 };

-// Dashed border distinguishes an inferred stage from every other class above,
-// including the solid amber of "passed-no-evidence" — never let it read as done.
-const DETECTED_CLASS = "border-dashed border-amber-400 text-amber-300 bg-amber-500/5";
+// Thin dashed border and no fill keep an inference visually lighter than
+// every outlined state above — so it never reads as more certain than a claim.
+const DETECTED_CLASS = "border-dashed border-status-warning/50 text-status-warning bg-transparent";

 export default function PipelineMap({
  nodes,
@@ -32,7 +37,7 @@ export default function PipelineMap({
  nodes: LaneNode[];
  detectedSignal?: string | null;
 }) {
-  if (!nodes.length) return <div className="text-xs text-neutral-500">no pipeline</div>;
+  if (!nodes.length) return <div className="text-xs text-fg-muted">no pipeline</div>;
  return (
    // The map spans the panel: every node takes an equal share and the
    // connectors absorb the slack, so the pipeline reads as one track across
@@ -54,7 +59,7 @@ export default function PipelineMap({
            <span className="shrink-0 text-[13px] leading-none">{n.icon}</span>
            <span className="truncate">{n.label}</span>
          </div>
-          {i < nodes.length - 1 && <div className="h-px w-2 shrink-0 bg-neutral-700 sm:w-3" />}
+          {i < nodes.length - 1 && <div className="h-px w-2 shrink-0 bg-surface-3 sm:w-3" />}
        </div>
      ))}
    </div>