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.
This commit is contained in:
@@ -76,9 +76,9 @@ function formatDurationSec(sec: number): string {
|
||||
}
|
||||
|
||||
function successRateColor(rate: number): string {
|
||||
if (rate > 90) return "text-emerald-400";
|
||||
if (rate > 90) return "text-status-success";
|
||||
if (rate > 70) return "text-yellow-400";
|
||||
return "text-red-400";
|
||||
return "text-status-danger";
|
||||
}
|
||||
|
||||
// ── Deterministic interpreters - return an i18n key + params ─────────────────
|
||||
@@ -228,7 +228,7 @@ function InfoPopover({ calculationKey, interp, valueDisplay, metricPhraseKey }:
|
||||
onMouseLeave={() => setOpen(false)}
|
||||
onFocus={() => setOpen(true)}
|
||||
onBlur={() => setOpen(false)}
|
||||
className="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-gray-600 hover:text-gray-300 focus:outline-none focus:ring-1 focus:ring-accent/40"
|
||||
className="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary focus:outline-none focus:ring-1 focus:ring-accent/40"
|
||||
>
|
||||
<Info className="w-4 h-4" />
|
||||
</button>
|
||||
@@ -236,27 +236,27 @@ function InfoPopover({ calculationKey, interp, valueDisplay, metricPhraseKey }:
|
||||
<div
|
||||
ref={popoverRef}
|
||||
role="tooltip"
|
||||
className="fixed z-50 p-3 bg-[#12121f] border border-[#2a2a4a] rounded-lg shadow-2xl text-[11px] text-gray-300 pointer-events-none"
|
||||
className="fixed z-50 p-3 bg-[#12121f] border border-[#2a2a4a] rounded-lg shadow-2xl text-[11px] text-fg-secondary pointer-events-none"
|
||||
style={{ left: coords.left, top: coords.top, width: POPOVER_W }}
|
||||
>
|
||||
<div className="flex items-baseline gap-2 mb-2 pb-2 border-b border-[#2a2a4a]">
|
||||
<span className="text-base font-semibold text-gray-100 tabular-nums">
|
||||
<span className="text-base font-semibold text-fg-primary tabular-nums">
|
||||
{valueDisplay}
|
||||
</span>
|
||||
<span className="text-[10px] uppercase tracking-wider text-gray-500">
|
||||
<span className="text-[10px] uppercase tracking-wider text-fg-muted">
|
||||
{metricPhrase}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="font-semibold text-gray-200 uppercase tracking-wider text-[9px] mb-1">
|
||||
<p className="font-semibold text-fg-secondary uppercase tracking-wider text-[9px] mb-1">
|
||||
{t("stats.tooltip.howCalc")}
|
||||
</p>
|
||||
<p className="text-gray-400 leading-snug mb-2.5">{t(calculationKey)}</p>
|
||||
<p className="text-fg-secondary leading-snug mb-2.5">{t(calculationKey)}</p>
|
||||
|
||||
<p className="font-semibold text-gray-200 uppercase tracking-wider text-[9px] mb-1">
|
||||
<p className="font-semibold text-fg-secondary uppercase tracking-wider text-[9px] mb-1">
|
||||
{t("stats.tooltip.whatItMeans")}
|
||||
</p>
|
||||
<p className="text-gray-400 leading-snug">{valueMeans}</p>
|
||||
<p className="text-fg-secondary leading-snug">{valueMeans}</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
@@ -287,7 +287,7 @@ function StatCard({
|
||||
return (
|
||||
<div className="bg-surface-2 border border-border rounded-xl p-4 flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="text-[10px] font-semibold text-gray-500 uppercase tracking-wider leading-none">
|
||||
<span className="text-[10px] font-semibold text-fg-muted uppercase tracking-wider leading-none">
|
||||
{label}
|
||||
</span>
|
||||
<Icon className={`w-4 h-4 flex-shrink-0 ${accentClass}`} />
|
||||
@@ -340,7 +340,7 @@ export function WorkflowStats({ stats }: WorkflowStatsProps) {
|
||||
label={t("stats.avgSubagentsPerSession")}
|
||||
value={stats.avgSubagents.toFixed(1)}
|
||||
icon={Users}
|
||||
accentClass="text-blue-400"
|
||||
accentClass="text-blue-500"
|
||||
calculationKey="stats.tooltip.calc.subagents"
|
||||
interp={interpAvgSubagents(stats.avgSubagents)}
|
||||
metricPhraseKey="stats.tooltip.phrase.subagents"
|
||||
@@ -376,7 +376,7 @@ export function WorkflowStats({ stats }: WorkflowStatsProps) {
|
||||
label={t("stats.avgDuration")}
|
||||
value={formatDurationSec(stats.avgDurationSec)}
|
||||
icon={Clock}
|
||||
accentClass="text-amber-400"
|
||||
accentClass="text-status-warning"
|
||||
calculationKey="stats.tooltip.calc.duration"
|
||||
interp={interpAvgDuration(stats.avgDurationSec)}
|
||||
metricPhraseKey="stats.tooltip.phrase.duration"
|
||||
|
||||
Reference in New Issue
Block a user