docs: add visual design reference (TUI mockups)

2026-06-01 23:23:29 +04:00
parent 91ededa4ca
commit 198cf95725
8 changed files with 2225 additions and 0 deletions
@@ -0,0 +1,114 @@
+// 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 };