claudeup 4.35.0 → 4.36.0

package/src/ui/theme-mode.ts

@@ -0,0 +1,73 @@
+import type { ThemeMode } from "@opentui/core";
+
+/**
+ * The one place claudeup needs to know whether the terminal is light or dark.
+ *
+ * Everything else in the palette avoids this question on purpose: accents are
+ * chosen to clear 3:1 against both backgrounds, and body text uses the terminal's
+ * own foreground. A *disabled row tint* is the exception, because "subtle" is
+ * defined relative to the page — a wash that sits gently on cream is a bright
+ * band on near-black, and there is no third colour that is quiet on both.
+ *
+ * ANSI cannot help here either: there is no alpha channel, so the tint cannot be
+ * expressed as "the page, 8% toward the foreground". OpenTUI's alpha blending
+ * lives only in its 3d module, not the text renderer.
+ *
+ * So we ask. OpenTUI queries the terminal over OSC and reports `themeMode`; we
+ * read it once at startup. **Unknown means no tint** — a terminal that does not
+ * answer the query gets today's behaviour rather than a guess that could paint a
+ * bright band across half the list.
+ */
+
+let detected: ThemeMode | null = null;
+
+/** Set once at startup from `renderer.themeMode`. */
+export function setThemeMode(mode: ThemeMode | null): void {
+	detected = mode;
+}
+
+export function getThemeMode(): ThemeMode | null {
+	return detected;
+}
+
+/** Test seam — reset detection between cases. */
+export function resetThemeMode(): void {
+	detected = null;
+}
+
+/**
+ * Fill for an UNLIT segment of the three-square scope bar.
+ *
+ * The bar reads as three segments, each lit (in its scope colour) or unlit. Unlit
+ * used to be the same mid-grey as body de-emphasis, `#6B7280`, which is dark —
+ * so an unlit segment carried the same visual weight as a lit one and the bar
+ * read as three similar blobs. Reported directly: "non installed state is dark as
+ * well - confusing".
+ *
+ * An unlit segment should recede toward the page, and "toward the page" is the
+ * one thing a fixed colour cannot express: a pale fill that sits quietly on cream
+ * is a bright block on near-black. Hence the two values, chosen per detected
+ * terminal — this is the only place claudeup asks.
+ */
+export const SCOPE_OFF_FILL = {
+	/** Just off a light page — a filled but quiet segment. */
+	light: "#D9D9CC",
+	/** Just off a dark page. */
+	dark: "#3A3A40",
+} as const;
+
+/**
+ * Neutral fallback when the terminal never answered the OSC query. A mid grey is
+ * visible on both pages — not as quiet as the tuned values, but never invisible
+ * and never a bright block. Failing to a wrong extreme would be worse than
+ * failing to something merely unremarkable.
+ */
+export const SCOPE_OFF_FALLBACK = "#9CA3AF";
+
+/** Fill colour for an unlit scope segment. Always a colour — never undefined,
+ *  because the segment is a filled block whatever the terminal turns out to be. */
+export function scopeOffFill(): string {
+	if (detected === "light") return SCOPE_OFF_FILL.light;
+	if (detected === "dark") return SCOPE_OFF_FILL.dark;
+	return SCOPE_OFF_FALLBACK;
+}

package/src/ui/theme.ts

@@ -1,55 +1,149 @@
+import { RGBA } from "@opentui/core";
+
+/**
+ * claudeup's palette: our own vivid accents, on the terminal's own canvas.
+ *
+ * Three rules, and the reason for each:
+ *
+ *  1. **Backgrounds are never ours.** Surfaces and modals use the terminal's
+ *     background. Painting an absolute fill boxes the UI into whichever theme we
+ *     guessed, and it was the original sin here — modals hardcoded #1C1C1E.
+ *  2. **Body text is never ours.** Normal text uses the terminal's foreground,
+ *     which is the only colour guaranteed to clear a text-grade contrast ratio
+ *     against that terminal's own background. `text` used to be the string
+ *     `"white"` — OpenTUI resolves that to rgb(255,255,255), not to "the
+ *     terminal's white" — so on a light theme every installed plugin was drawn
+ *     white-on-cream and vanished while the *un*installed ones, in grey, stayed
+ *     readable. The list read exactly backwards.
+ *  3. **Accents ARE ours, and vivid.** Deferring accents to ANSI slots 0-15 made
+ *     everything legible but flattened it: a theme that renders slots 2 and 3 as
+ *     neighbouring olives leaves user/project/local scope squares indistinguishable,
+ *     and slot 8 chips melt into the page. Distinction is a product decision, so
+ *     these are chosen, not inherited.
+ *
+ * ## How the accents were chosen
+ *
+ * By measurement, not taste. A single colour CANNOT reach 4.5:1 against both a
+ * light and a dark terminal — clearing 4.5:1 on cream needs relative luminance
+ * <= ~0.17, clearing it on near-black needs >= ~0.22, and those do not overlap.
+ * So the bar is 3:1, WCAG's threshold for UI components and large text, which
+ * admits a band of mid-dark saturated colours. Every accent below clears 3:1
+ * against BOTH reference backgrounds, verified in theme-adaptive-colors.test.ts —
+ * so a colour that only works on dark cannot be added without failing the build.
+ *
+ * Where we own a badge's background we also own its ink, so `ink` is plain white
+ * and its contrast is deterministic rather than a function of the user's theme.
+ * That is why badge ink is not slot 0 or the terminal background: on a light
+ * theme, terminal-background ink on a yellow chip is unreadable.
+ */
+
+/** Reference backgrounds every accent is measured against. */
+export const CONTRAST_REFERENCE = {
+	light: "#FAFAD2",
+	dark: "#1C1C1E",
+} as const;
+
+/**
+ * The vivid set. Ratios are (on light / on dark), measured — see the test.
+ * Hues for the three scopes are deliberately far apart (blue / green / amber)
+ * because they appear as single-character squares, where a subtle hue shift is
+ * not readable at all.
+ */
+export const brand = {
+	accent: "#9333EA", // 5.04 / 3.16 — brand purple
+	link: "#2563EB", // 4.84 / 3.29
+	info: "#0E7490", // 5.02 / 3.18 — teal
+	success: "#15803D", // 4.70 / 3.39
+	warning: "#B45309", // 4.70 / 3.39 — amber
+	danger: "#DC2626", // 4.52 / 3.52
+	muted: "#6B7280", // 4.53 / 3.52 — de-emphasis, still legible on both
+	/** Ink on OUR badges. We own both sides, so contrast is deterministic. */
+	ink: "#FFFFFF",
+} as const;
+
+/** Any colour a component may hand to a JSX colour prop. */
+export type UiColor = string | RGBA;
+
+/** The terminal's own foreground — the only honest "normal text" colour. */
+const fg = () => RGBA.defaultForeground();
+
+/** The terminal's own background — for surfaces, never for ink. */
+const bg = () => RGBA.defaultBackground();
+
 export const theme = {
-  colors: {
-    text: "white",
-    muted: "#666666",
-    dim: "#333333",
-    border: "#444444",
-    link: "#5c9aff",
-    accent: "#7e57c2",
-    /** Low-key brand tint for bylines — readable, deliberately not attention-grabbing. */
-    byline: "#8a7fa8",
-    success: "green",
-    warning: "yellow",
-    danger: "red",
-    info: "cyan",
-  },
-
-  selection: {
-    bg: "magenta",
-    fg: "white",
-  },
-
-  scopes: {
-    user: "cyan",
-    project: "green",
-    local: "yellow",
-  },
-
-  category: {
-    purple: { bg: "#7e57c2", fg: "white", badgeFg: "#d1c4e9" },
-    green: { bg: "#2e7d32", fg: "white", badgeFg: "#c8e6c9" },
-    teal: { bg: "#00695c", fg: "white", badgeFg: "#b2dfdb" },
-    yellow: { bg: "#8d6e00", fg: "white", badgeFg: "#ffe082" },
-    gray: { bg: "#455a64", fg: "white", badgeFg: "#cfd8dc" },
-    red: { bg: "#b71c1c", fg: "white", badgeFg: "#ffcdd2" },
-  },
-
-  meta: {
-    muted: "gray",
-    warning: "yellow",
-    success: "green",
-    danger: "red",
-  },
-
-  hints: {
-    defaultBg: "white",
-    primaryBg: "cyan",
-    dangerBg: "red",
-  },
-
-  spacing: {
-    rowIndent: 1,
-    sectionGap: 1,
-    panelPadding: 1,
-  },
+	colors: {
+		/** Adaptive by rule 2 — never make this one of ours. */
+		text: fg(),
+		muted: brand.muted,
+		/** Same grey as `muted`; a third level should come from layout, not colour. */
+		dim: brand.muted,
+		border: brand.muted,
+		link: brand.link,
+		accent: brand.accent,
+		/** Low-key brand tint for bylines — readable, deliberately not attention-grabbing. */
+		byline: brand.accent,
+		success: brand.success,
+		warning: brand.warning,
+		danger: brand.danger,
+		info: brand.info,
+	},
+
+	selection: {
+		bg: brand.accent,
+		fg: brand.ink,
+	},
+
+	/** Blue / green / amber: the widest hue separation available, because these
+	 *  render as one-character squares where a subtle shift reads as noise. */
+	scopes: {
+		user: brand.link,
+		project: brand.success,
+		local: brand.warning,
+	},
+
+	/** Badge colours. `fg` is the ink ON the block; `badgeFg` is the same hue used
+	 *  as ink on the normal background instead. */
+	category: {
+		purple: { bg: brand.accent, fg: brand.ink, badgeFg: brand.accent },
+		green: { bg: brand.success, fg: brand.ink, badgeFg: brand.success },
+		teal: { bg: brand.info, fg: brand.ink, badgeFg: brand.info },
+		yellow: { bg: brand.warning, fg: brand.ink, badgeFg: brand.warning },
+		gray: { bg: brand.muted, fg: brand.ink, badgeFg: brand.muted },
+		red: { bg: brand.danger, fg: brand.ink, badgeFg: brand.danger },
+	},
+
+	meta: {
+		muted: brand.muted,
+		warning: brand.warning,
+		success: brand.success,
+		danger: brand.danger,
+	},
+
+	/**
+	 * Footer key chips. A vivid block with white ink, because the point of a chip
+	 * is to read as a pressable key at a glance — the previous neutral-grey chip
+	 * melted into a light page. Dark slates were measured and rejected: they clear
+	 * 3:1 on cream but drop to ~2.2 on a dark terminal, i.e. an invisible block.
+	 */
+	hints: {
+		defaultBg: brand.accent,
+		primaryBg: brand.info,
+		dangerBg: brand.danger,
+		fg: brand.ink,
+	},
+
+	/** Panels and modals sit on the terminal's own background and are separated by
+	 *  their border, never by an absolute fill that fights the user's theme. */
+	surface: {
+		bg: bg(),
+		border: brand.muted,
+	},
+
+	spacing: {
+		rowIndent: 1,
+		sectionGap: 1,
+		panelPadding: 1,
+	},
 } as const;
+
+export { fg as defaultFg, bg as defaultBg };