nntrivi2001
b673363351
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.
69 lines
2.4 KiB
JavaScript
69 lines
2.4 KiB
JavaScript
/**
|
|
* @file tailwind.config.js
|
|
* @description Tailwind CSS configuration — content globs and the dashboard's
|
|
* dark/light color tokens. Token values live in `src/index.css` as CSS
|
|
* variables (`:root` = light, `.dark` = dark); this file only wires Tailwind
|
|
* class names to them. RGB-triplet vars (not hex) so `<alpha-value>` keeps
|
|
* opacity modifiers like `bg-surface-2/70` working under either theme.
|
|
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
|
*/
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
darkMode: "class",
|
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
surface: {
|
|
0: "rgb(var(--surface-0) / <alpha-value>)",
|
|
1: "rgb(var(--surface-1) / <alpha-value>)",
|
|
2: "rgb(var(--surface-2) / <alpha-value>)",
|
|
3: "rgb(var(--surface-3) / <alpha-value>)",
|
|
4: "rgb(var(--surface-4) / <alpha-value>)",
|
|
5: "rgb(var(--surface-5) / <alpha-value>)",
|
|
},
|
|
border: {
|
|
DEFAULT: "rgb(var(--border) / <alpha-value>)",
|
|
light: "rgb(var(--border-light) / <alpha-value>)",
|
|
},
|
|
accent: {
|
|
DEFAULT: "rgb(var(--accent) / <alpha-value>)",
|
|
hover: "rgb(var(--accent-hover) / <alpha-value>)",
|
|
muted: "rgb(var(--accent) / 0.15)",
|
|
},
|
|
fg: {
|
|
primary: "rgb(var(--fg-primary) / <alpha-value>)",
|
|
secondary: "rgb(var(--fg-secondary) / <alpha-value>)",
|
|
muted: "rgb(var(--fg-muted) / <alpha-value>)",
|
|
},
|
|
status: {
|
|
success: "rgb(var(--status-success) / <alpha-value>)",
|
|
danger: "rgb(var(--status-danger) / <alpha-value>)",
|
|
warning: "rgb(var(--status-warning) / <alpha-value>)",
|
|
},
|
|
},
|
|
fontFamily: {
|
|
sans: ["Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
|
|
mono: ["JetBrains Mono", "Fira Code", "Consolas", "monospace"],
|
|
},
|
|
animation: {
|
|
"pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite",
|
|
"fade-in": "fadeIn 0.3s ease-out",
|
|
"slide-up": "slideUp 0.3s ease-out",
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
"0%": { opacity: "0" },
|
|
"100%": { opacity: "1" },
|
|
},
|
|
slideUp: {
|
|
"0%": { opacity: "0", transform: "translateY(8px)" },
|
|
"100%": { opacity: "1", transform: "translateY(0)" },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|