115 lines
3.5 KiB
React
115 lines
3.5 KiB
React
// themes.jsx — three aesthetic directions for the Correx TUI.
|
|
// Each theme is a set of CSS variables + a `chrome` mode that changes how
|
|
// panels render. Palette accent is independently swappable.
|
|
|
|
const ACCENTS = {
|
|
cyan: { accent: "#56c8d8", accent2: "#7aa2f7", glow: "86 200 216" },
|
|
amber: { accent: "#e8b765", accent2: "#d98a5b", glow: "232 183 101" },
|
|
green: { accent: "#8fd96a", accent2: "#5dd1a0", glow: "143 217 106" },
|
|
magenta: { accent: "#c98fd9", accent2: "#d98ab0", glow: "201 143 217" },
|
|
neutral: { accent: "#b9c0c9", accent2: "#8a929c", glow: "185 192 201" },
|
|
};
|
|
|
|
const THEMES = {
|
|
// 1. Boxed — lazygit / k9s. Sharp single-line borders, numbered panels,
|
|
// active panel highlighted, cool slate ground.
|
|
boxed: {
|
|
label: "Boxed",
|
|
blurb: "lazygit · k9s",
|
|
chrome: "boxed",
|
|
defaultAccent: "cyan",
|
|
vars: {
|
|
"--bg": "#0b0f14",
|
|
"--bg-deep": "#070a0e",
|
|
"--panel": "#0e141b",
|
|
"--panel-2": "#111922",
|
|
"--fg": "#c6d0da",
|
|
"--fg-strong": "#eef3f8",
|
|
"--dim": "#5b6873",
|
|
"--faint": "#36424d",
|
|
"--border": "#1d2935",
|
|
"--border-active": "var(--accent)",
|
|
"--sel": "#16222e",
|
|
"--radius": "0px",
|
|
"--panel-pad": "0px",
|
|
"--gap": "6px",
|
|
"--font": "'JetBrains Mono','SF Mono',ui-monospace,monospace",
|
|
"--line": "1.45",
|
|
"--ok": "#7fd88f",
|
|
"--warn": "#e8c06a",
|
|
"--bad": "#e87f7f",
|
|
},
|
|
},
|
|
|
|
// 2. Soft — Charm / Bubble Tea. Rounded panels, generous padding, gentle
|
|
// separators. Neutral charcoal ground so the look isn't tinted — warmth
|
|
// lives only in the (swappable) accent.
|
|
soft: {
|
|
label: "Soft",
|
|
blurb: "charm · bubbletea",
|
|
chrome: "soft",
|
|
defaultAccent: "amber",
|
|
vars: {
|
|
"--bg": "#14161a",
|
|
"--bg-deep": "#0f1115",
|
|
"--panel": "#181b21",
|
|
"--panel-2": "#1f232b",
|
|
"--fg": "#ced3da",
|
|
"--fg-strong": "#eef1f5",
|
|
"--dim": "#838b96",
|
|
"--faint": "#434a55",
|
|
"--border": "#262b33",
|
|
"--border-active": "var(--accent)",
|
|
"--sel": "#21262e",
|
|
"--radius": "10px",
|
|
"--panel-pad": "4px",
|
|
"--gap": "10px",
|
|
"--font": "'JetBrains Mono','SF Mono',ui-monospace,monospace",
|
|
"--line": "1.6",
|
|
"--ok": "#86d39a",
|
|
"--warn": "#e8b765",
|
|
"--bad": "#e3938a",
|
|
},
|
|
},
|
|
|
|
// 3. Bare — classic monochrome phosphor. Almost no chrome: thin rules,
|
|
// whitespace, green-on-black. Minimal, fast, text-forward.
|
|
bare: {
|
|
label: "Bare",
|
|
blurb: "classic phosphor",
|
|
chrome: "bare",
|
|
defaultAccent: "green",
|
|
vars: {
|
|
"--bg": "#080b08",
|
|
"--bg-deep": "#050705",
|
|
"--panel": "#080b08",
|
|
"--panel-2": "#0b100b",
|
|
"--fg": "#a7c99a",
|
|
"--fg-strong": "#e6f6df",
|
|
"--dim": "#5a7050",
|
|
"--faint": "#2f3d2b",
|
|
"--border": "#1a241799",
|
|
"--border-active": "var(--accent)",
|
|
"--sel": "#12200f",
|
|
"--radius": "0px",
|
|
"--panel-pad": "0px",
|
|
"--gap": "2px",
|
|
"--font": "'JetBrains Mono','SF Mono',ui-monospace,monospace",
|
|
"--line": "1.55",
|
|
"--ok": "#8fd96a",
|
|
"--warn": "#cbd96a",
|
|
"--bad": "#d98a8a",
|
|
},
|
|
},
|
|
};
|
|
|
|
function applyTheme(el, themeKey, accentKey) {
|
|
const th = THEMES[themeKey] || THEMES.boxed;
|
|
const acc = ACCENTS[accentKey] || ACCENTS[th.defaultAccent];
|
|
const vars = { ...th.vars, "--accent": acc.accent, "--accent-2": acc.accent2, "--glow": acc.glow };
|
|
for (const [k, v] of Object.entries(vars)) el.style.setProperty(k, v);
|
|
el.setAttribute("data-chrome", th.chrome);
|
|
}
|
|
|
|
window.CORREX_THEMES = { THEMES, ACCENTS, applyTheme };
|