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:
@@ -0,0 +1,78 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* @file One-off codemod: shifts every raw `blue-*`/`amber-*` Tailwind utility
|
||||
* one shade darker (100→200 ... 700→800), mirroring the 1-step darkening
|
||||
* already applied to the accent token (`#2563eb` blue-600 → `#1d4ed8`
|
||||
* blue-700). `blue` here is the "current stage" / info color (e.g.
|
||||
* PipelineMap's `current` state, unrelated to the `accent` CSS-variable
|
||||
* token); `amber` is the warning/pending/auto-detected color used across
|
||||
* badges, banners, and the pipeline's dashed "auto: <stage>" chip. `950` is
|
||||
* left alone — already the darkest step available.
|
||||
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
||||
*/
|
||||
import { readdirSync, readFileSync, writeFileSync, statSync } from "node:fs";
|
||||
import { join } from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const SHIFT = {
|
||||
50: 100,
|
||||
100: 200,
|
||||
200: 300,
|
||||
300: 400,
|
||||
400: 500,
|
||||
500: 600,
|
||||
600: 700,
|
||||
700: 800,
|
||||
800: 900,
|
||||
};
|
||||
const COLORS = ["blue", "amber"];
|
||||
const PROPS = ["text", "bg", "border", "ring", "from", "to", "via", "fill"];
|
||||
|
||||
// Descending by `from` — JS enumerates integer-like object keys ascending
|
||||
// regardless of source order, and shifting low-to-high would let an already
|
||||
// -shifted "200" (from 100) get caught and shifted AGAIN by the 200 rule.
|
||||
// Highest-first guarantees each original shade is only ever matched once.
|
||||
const SHIFTS_DESC = Object.entries(SHIFT)
|
||||
.map(([from, to]) => [Number(from), to])
|
||||
.sort((a, b) => b[0] - a[0]);
|
||||
|
||||
function rewrite(text) {
|
||||
let out = text;
|
||||
for (const prop of PROPS) {
|
||||
for (const color of COLORS) {
|
||||
for (const [from, to] of SHIFTS_DESC) {
|
||||
const re = new RegExp(`\\b${prop}-${color}-${from}(\\/[0-9]+)?\\b`, "g");
|
||||
out = out.replace(re, (_m, opacity) => `${prop}-${color}-${to}${opacity || ""}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function walk(dir, files = []) {
|
||||
for (const entry of readdirSync(dir)) {
|
||||
const full = join(dir, entry);
|
||||
const st = statSync(full);
|
||||
if (st.isDirectory()) {
|
||||
if (entry === "node_modules") continue;
|
||||
walk(full, files);
|
||||
} else if (entry.endsWith(".tsx")) {
|
||||
files.push(full);
|
||||
}
|
||||
}
|
||||
return files;
|
||||
}
|
||||
|
||||
const scriptDir = fileURLToPath(new URL(".", import.meta.url));
|
||||
const root = join(scriptDir, "..", "client", "src");
|
||||
const files = walk(root);
|
||||
let changed = 0;
|
||||
for (const file of files) {
|
||||
const before = readFileSync(file, "utf8");
|
||||
const after = rewrite(before);
|
||||
if (after !== before) {
|
||||
writeFileSync(file, after);
|
||||
changed++;
|
||||
}
|
||||
}
|
||||
console.log(`rewrote ${changed} file(s)`);
|
||||
@@ -0,0 +1,111 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* @file One-off codemod: rewrites raw Tailwind gray-scale utility classes
|
||||
* (neutral, gray, slate, zinc, stone shades) across client/src to the
|
||||
* semantic surface/border/fg tokens introduced for dark/light mode.
|
||||
* Status colors (emerald/red/amber) and the categorical hue palette
|
||||
* (violet/indigo/cyan/teal/sky/rose/pink/orange/yellow) are deliberately
|
||||
* out of scope — see docs/superpowers/plans/2026-07-31-color-redesign-dark-light-mode.md.
|
||||
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
||||
*/
|
||||
import { readdirSync, readFileSync, writeFileSync, statSync } from "node:fs";
|
||||
import { join } from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const MAP = {
|
||||
text: {
|
||||
"gray-50": "fg-primary",
|
||||
"gray-100": "fg-primary",
|
||||
"gray-200": "fg-primary",
|
||||
"neutral-50": "fg-primary",
|
||||
"neutral-100": "fg-primary",
|
||||
"gray-300": "fg-secondary",
|
||||
"gray-400": "fg-secondary",
|
||||
"neutral-200": "fg-secondary",
|
||||
"neutral-300": "fg-secondary",
|
||||
"neutral-400": "fg-secondary",
|
||||
"slate-300": "fg-secondary",
|
||||
"gray-500": "fg-muted",
|
||||
"gray-600": "fg-muted",
|
||||
"gray-700": "fg-muted",
|
||||
"neutral-500": "fg-muted",
|
||||
"neutral-600": "fg-muted",
|
||||
},
|
||||
placeholder: {
|
||||
"gray-500": "fg-muted",
|
||||
"gray-600": "fg-muted",
|
||||
},
|
||||
fill: {
|
||||
"gray-100": "fg-primary",
|
||||
"gray-300": "fg-secondary",
|
||||
"gray-600": "fg-muted",
|
||||
},
|
||||
bg: {
|
||||
"neutral-900": "surface-0",
|
||||
"gray-900": "surface-0",
|
||||
"neutral-800": "surface-2",
|
||||
"gray-800": "surface-2",
|
||||
"neutral-700": "surface-3",
|
||||
"gray-700": "surface-3",
|
||||
"neutral-500": "surface-4",
|
||||
"gray-500": "surface-4",
|
||||
"gray-400": "surface-4",
|
||||
"gray-600": "surface-4",
|
||||
"slate-500": "surface-4",
|
||||
},
|
||||
border: {
|
||||
"neutral-800": "border",
|
||||
"gray-800": "border",
|
||||
"neutral-700": "border-light",
|
||||
"gray-700": "border-light",
|
||||
"neutral-500": "border-light",
|
||||
"gray-500": "border-light",
|
||||
"gray-600": "border-light",
|
||||
},
|
||||
ring: {
|
||||
"slate-500": "border-light",
|
||||
"slate-400": "border-light",
|
||||
},
|
||||
};
|
||||
|
||||
function rewrite(text) {
|
||||
let out = text;
|
||||
for (const [prop, shadeMap] of Object.entries(MAP)) {
|
||||
for (const [rawShade, token] of Object.entries(shadeMap)) {
|
||||
// Matches `bg-gray-500`, `bg-gray-500/10`, `bg-gray-500/50` etc. — the
|
||||
// opacity suffix is preserved verbatim since the token's CSS var
|
||||
// already supports `<alpha-value>`.
|
||||
const re = new RegExp(`\\b${prop}-${rawShade}(\\/[0-9]+)?\\b`, "g");
|
||||
out = out.replace(re, (_m, opacity) => `${prop}-${token}${opacity || ""}`);
|
||||
}
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function walk(dir, files = []) {
|
||||
for (const entry of readdirSync(dir)) {
|
||||
const full = join(dir, entry);
|
||||
const st = statSync(full);
|
||||
if (st.isDirectory()) {
|
||||
if (entry === "node_modules") continue;
|
||||
walk(full, files);
|
||||
} else if (entry.endsWith(".tsx")) {
|
||||
files.push(full);
|
||||
}
|
||||
}
|
||||
return files;
|
||||
}
|
||||
|
||||
const scriptDir = fileURLToPath(new URL(".", import.meta.url));
|
||||
const root = join(scriptDir, "..", "client", "src");
|
||||
const files = walk(root);
|
||||
let changed = 0;
|
||||
for (const file of files) {
|
||||
const before = readFileSync(file, "utf8");
|
||||
const after = rewrite(before);
|
||||
if (after !== before) {
|
||||
writeFileSync(file, after);
|
||||
changed++;
|
||||
}
|
||||
}
|
||||
console.log(`rewrote ${changed} file(s)`);
|
||||
@@ -0,0 +1,68 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* @file One-off codemod: rewrites raw `emerald-*`/`red-*`/`amber-*` Tailwind
|
||||
* utilities across client/src to the shared `status-success`/`status-danger`/
|
||||
* `status-warning` CSS-variable tokens (see `src/index.css`), so every
|
||||
* badge/button/component that means "success"/"danger"/"warning" uses the
|
||||
* SAME shade per theme instead of each usage picking its own. The
|
||||
* categorical/decorative hue palette (violet, indigo, cyan, teal, sky, rose,
|
||||
* pink, orange, yellow, and `blue` — which doubles as both "info" and a
|
||||
* categorical role color in places like message bubbles) is deliberately
|
||||
* left alone: those distinguish between different *kinds* of thing, not a
|
||||
* status, and collapsing them would erase that distinction.
|
||||
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
||||
*/
|
||||
import { readdirSync, readFileSync, writeFileSync, statSync } from "node:fs";
|
||||
import { join } from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const COLOR_TO_STATUS = {
|
||||
emerald: "status-success",
|
||||
red: "status-danger",
|
||||
amber: "status-warning",
|
||||
};
|
||||
const PROPS = ["text", "bg", "border", "ring", "from", "to", "via", "fill", "placeholder"];
|
||||
|
||||
function rewrite(text) {
|
||||
let out = text;
|
||||
for (const prop of PROPS) {
|
||||
for (const [color, token] of Object.entries(COLOR_TO_STATUS)) {
|
||||
// Shade number is dropped entirely — the token carries its own
|
||||
// per-theme value, so `emerald-400`, `emerald-500`, `emerald-600` all
|
||||
// collapse onto the one `status-success` (that collapse IS the fix:
|
||||
// no more per-usage shade picking). Opacity suffix (`/10`, `/60`) is
|
||||
// preserved verbatim.
|
||||
const re = new RegExp(`\\b${prop}-${color}-[0-9]+(\\/\\[[0-9.]+\\]|\\/[0-9]+)?`, "g");
|
||||
out = out.replace(re, (_m, opacity) => `${prop}-${token}${opacity || ""}`);
|
||||
}
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function walk(dir, files = []) {
|
||||
for (const entry of readdirSync(dir)) {
|
||||
const full = join(dir, entry);
|
||||
const st = statSync(full);
|
||||
if (st.isDirectory()) {
|
||||
if (entry === "node_modules") continue;
|
||||
walk(full, files);
|
||||
} else if (entry.endsWith(".tsx")) {
|
||||
files.push(full);
|
||||
}
|
||||
}
|
||||
return files;
|
||||
}
|
||||
|
||||
const scriptDir = fileURLToPath(new URL(".", import.meta.url));
|
||||
const root = join(scriptDir, "..", "client", "src");
|
||||
const files = walk(root);
|
||||
let changed = 0;
|
||||
for (const file of files) {
|
||||
const before = readFileSync(file, "utf8");
|
||||
const after = rewrite(before);
|
||||
if (after !== before) {
|
||||
writeFileSync(file, after);
|
||||
changed++;
|
||||
}
|
||||
}
|
||||
console.log(`rewrote ${changed} file(s)`);
|
||||
Reference in New Issue
Block a user