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:
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"action.clear": "clear",
|
||||
"action.forget": "forget lane",
|
||||
"action.purge": "purge history",
|
||||
"action.remove": "remove",
|
||||
"action.clear": "clear state",
|
||||
"action.forget": "delete lane",
|
||||
"action.purge": "delete history",
|
||||
"action.remove": "delete lane + worktree",
|
||||
"action.reset": "reset worktree",
|
||||
"action.start": "start",
|
||||
"action.stop": "stop",
|
||||
@@ -19,6 +19,7 @@
|
||||
"addLaneTitlePlaceholder": "Optional",
|
||||
"autoStage": "auto: {{stage}}",
|
||||
"cardId": "Lane {{id}}",
|
||||
"stageUndeclared": "not declared",
|
||||
"confirmRemoveCancel": "Cancel",
|
||||
"confirmRemoveConfirm": "Remove",
|
||||
"confirmRemoveMessage": "This action cannot be undone.",
|
||||
|
||||
@@ -50,6 +50,12 @@
|
||||
"skipToContent": "Skip to content",
|
||||
"statsPersisted": "Stats persist across reloads",
|
||||
"switchLanguage": "Switch to {{language}}",
|
||||
"switchTheme": "Switch to {{theme}}",
|
||||
"theme": "Theme",
|
||||
"themeNames": {
|
||||
"dark": "Dark",
|
||||
"light": "Light"
|
||||
},
|
||||
"throughput60s": "Throughput · last 60s",
|
||||
"topEventTypes": "Top event types",
|
||||
"unitEvents": "events",
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"action.clear": "xóa",
|
||||
"action.forget": "quên làn đường",
|
||||
"action.clear": "dọn trạng thái",
|
||||
"action.forget": "xóa làn",
|
||||
"action.purge": "xóa lịch sử",
|
||||
"action.remove": "xóa bỏ",
|
||||
"action.remove": "xóa làn + worktree",
|
||||
"action.reset": "đặt lại worktree",
|
||||
"action.start": "bắt đầu",
|
||||
"action.stop": "dừng",
|
||||
@@ -19,6 +19,7 @@
|
||||
"addLaneTitlePlaceholder": "Không bắt buộc",
|
||||
"autoStage": "tự động: {{stage}}",
|
||||
"cardId": "Làn đường {{id}}",
|
||||
"stageUndeclared": "chưa khai báo",
|
||||
"confirmRemoveCancel": "Hủy",
|
||||
"confirmRemoveConfirm": "Xóa",
|
||||
"confirmRemoveMessage": "Hành động này không thể hoàn tác.",
|
||||
|
||||
@@ -50,6 +50,12 @@
|
||||
"skipToContent": "Bỏ qua đến nội dung",
|
||||
"statsPersisted": "Số liệu được lưu sau khi tải lại",
|
||||
"switchLanguage": "Chuyển sang {{language}}",
|
||||
"switchTheme": "Chuyển sang {{theme}}",
|
||||
"theme": "Giao diện",
|
||||
"themeNames": {
|
||||
"dark": "Tối",
|
||||
"light": "Sáng"
|
||||
},
|
||||
"throughput60s": "Lưu lượng · 60s qua",
|
||||
"topEventTypes": "Loại sự kiện phổ biến",
|
||||
"unitEvents": "sự kiện",
|
||||
|
||||
Reference in New Issue
Block a user