@phenx-inc/ctlsurf 0.14.2 → 0.15.1

package/src/renderer/lib/themes.ts

@@ -0,0 +1,126 @@
+// The theme registry.
+//
+// Palette values are transcribed from each project's published palette spec —
+// no upstream code is copied. Scheme names identify which palette a theme
+// reproduces; see THIRD-PARTY-NOTICES.md for licences and attribution.
+//
+// Each entry owns everything that can't be reached from CSS: the xterm palette
+// (canvas, not DOM), the Monaco override colours, and the swatch shown in the
+// picker. The chrome colours themselves live in styles.css, under a
+// `:root[data-theme='<id>']` block keyed by the ids below — the two must stay
+// in step, which is why `id` is the single source of truth for both.
+
+export type ThemeMode = 'light' | 'dark'
+
+// Structural subset of xterm's ITheme. Declared locally so this module stays
+// importable from places that don't depend on xterm (the Settings dialog).
+export interface XtermPalette {
+  background: string
+  foreground: string
+  cursor: string
+  selectionBackground: string
+  black: string; red: string; green: string; yellow: string
+  blue: string; magenta: string; cyan: string; white: string
+  brightBlack: string; brightRed: string; brightGreen: string; brightYellow: string
+  brightBlue: string; brightMagenta: string; brightCyan: string; brightWhite: string
+}
+
+export interface ThemeDef {
+  id: string
+  name: string
+  family: string
+  mode: ThemeMode
+  // Preview tile in Settings — drawn from literal values, because a swatch has
+  // to show its own palette rather than the active one.
+  swatch: { bg: string; surface: string; accent: string; text: string }
+  // Painted by Electron before the renderer loads, so it must match --bg-app.
+  background: string
+  terminal: XtermPalette
+  // Monaco ships only 'vs' / 'vs-dark'; these ride on top so the editor at
+  // least shares the scheme's background and gutter rather than clashing.
+  editor: { base: 'vs' | 'vs-dark'; background: string; foreground: string; lineHighlight: string; selection: string }
+}
+
+export const THEMES: ThemeDef[] = [
+  {
+    id: 'tokyo-night',
+    name: 'Tokyo Night',
+    family: 'Tokyo Night',
+    mode: 'dark',
+    swatch: { bg: '#1a1b26', surface: '#2a2b3d', accent: '#7aa2f7', text: '#a9b1d6' },
+    background: '#1a1b26',
+    terminal: {
+      background: '#1a1b26', foreground: '#a9b1d6', cursor: '#c0caf5', selectionBackground: '#33467c',
+      black: '#15161e', red: '#f7768e', green: '#9ece6a', yellow: '#e0af68',
+      blue: '#7aa2f7', magenta: '#bb9af7', cyan: '#7dcfff', white: '#a9b1d6',
+      brightBlack: '#414868', brightRed: '#f7768e', brightGreen: '#9ece6a', brightYellow: '#e0af68',
+      brightBlue: '#7aa2f7', brightMagenta: '#bb9af7', brightCyan: '#7dcfff', brightWhite: '#c0caf5',
+    },
+    editor: { base: 'vs-dark', background: '#1a1b26', foreground: '#a9b1d6', lineHighlight: '#1f2335', selection: '#33467c' },
+  },
+  {
+    id: 'tokyo-day',
+    name: 'Tokyo Night Day',
+    family: 'Tokyo Night',
+    mode: 'light',
+    swatch: { bg: '#e9eaef', surface: '#d4d7e2', accent: '#2e7de9', text: '#3a4060' },
+    background: '#e9eaef',
+    terminal: {
+      background: '#e9eaef', foreground: '#3760bf', cursor: '#3760bf', selectionBackground: '#b6c8f0',
+      black: '#b4b5b9', red: '#c64343', green: '#587539', yellow: '#8c6c3e',
+      blue: '#2e7de9', magenta: '#9854f1', cyan: '#007197', white: '#6172b0',
+      // Deliberately darker than `black`: remote TUIs use bright-black for dim
+      // text, which would vanish on a light background otherwise.
+      brightBlack: '#8990ad', brightRed: '#f52a65', brightGreen: '#4d7a1f', brightYellow: '#8f5e15',
+      brightBlue: '#1a68d6', brightMagenta: '#7847d1', brightCyan: '#006594', brightWhite: '#3760bf',
+    },
+    editor: { base: 'vs', background: '#e9eaef', foreground: '#3760bf', lineHighlight: '#dfe1e8', selection: '#b6c8f0' },
+  },
+  {
+    id: 'catppuccin-mocha',
+    name: 'Catppuccin Mocha',
+    family: 'Catppuccin',
+    mode: 'dark',
+    swatch: { bg: '#1e1e2e', surface: '#313244', accent: '#89b4fa', text: '#cdd6f4' },
+    background: '#1e1e2e',
+    terminal: {
+      background: '#1e1e2e', foreground: '#cdd6f4', cursor: '#f5e0dc', selectionBackground: '#45475a',
+      black: '#45475a', red: '#f38ba8', green: '#a6e3a1', yellow: '#f9e2af',
+      blue: '#89b4fa', magenta: '#f5c2e7', cyan: '#94e2d5', white: '#bac2de',
+      brightBlack: '#585b70', brightRed: '#f38ba8', brightGreen: '#a6e3a1', brightYellow: '#f9e2af',
+      brightBlue: '#89b4fa', brightMagenta: '#f5c2e7', brightCyan: '#94e2d5', brightWhite: '#a6adc8',
+    },
+    editor: { base: 'vs-dark', background: '#1e1e2e', foreground: '#cdd6f4', lineHighlight: '#272739', selection: '#45475a' },
+  },
+  {
+    id: 'catppuccin-latte',
+    name: 'Catppuccin Latte',
+    family: 'Catppuccin',
+    mode: 'light',
+    swatch: { bg: '#eff1f5', surface: '#ccd0da', accent: '#1e66f5', text: '#4c4f69' },
+    background: '#eff1f5',
+    terminal: {
+      background: '#eff1f5', foreground: '#4c4f69', cursor: '#dc8a78', selectionBackground: '#bcc0cc',
+      black: '#5c5f77', red: '#d20f39', green: '#40a02b', yellow: '#df8e1d',
+      blue: '#1e66f5', magenta: '#ea76cb', cyan: '#179299', white: '#acb0be',
+      brightBlack: '#6c6f85', brightRed: '#de293e', brightGreen: '#49af3d', brightYellow: '#eea416',
+      brightBlue: '#456eff', brightMagenta: '#dd63bd', brightCyan: '#2d9fa8', brightWhite: '#8c8fa1',
+    },
+    editor: { base: 'vs', background: '#eff1f5', foreground: '#4c4f69', lineHighlight: '#e6e9ef', selection: '#bcc0cc' },
+  },
+]
+
+export const DEFAULT_DARK = 'tokyo-night'
+export const DEFAULT_LIGHT = 'tokyo-day'
+
+const byId = new Map(THEMES.map(t => [t.id, t]))
+
+export function getTheme(id: string | null | undefined): ThemeDef {
+  return (id && byId.get(id)) || byId.get(DEFAULT_DARK)!
+}
+
+export function isThemeId(v: unknown): v is string {
+  return typeof v === 'string' && byId.has(v)
+}
+
+export const themesByMode = (mode: ThemeMode): ThemeDef[] => THEMES.filter(t => t.mode === mode)