mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-08 18:05:10 +00:00
Anso
f62716f557
* refactor(design): align surface tokens to DESIGN.md §2 * refactor(design): canonicalize tracked-mono kickers and display rungs * refactor(design): collapse to five-slot palette and align card surfaces
102 lines
3.2 KiB
TypeScript
102 lines
3.2 KiB
TypeScript
/**
|
|
* Resolves design-system CSS tokens to concrete color strings for xterm.js.
|
|
*
|
|
* xterm's canvas renderer does not accept CSS variable references or oklch()
|
|
* values — it needs resolved strings. Calling this function at component mount
|
|
* (after the DOM is ready) produces a theme object wired to the active color
|
|
* scheme without embedding any hex literals.
|
|
*/
|
|
function resolveToken(styles: CSSStyleDeclaration, token: string, fallback = 'oklch(0 0 0)'): string {
|
|
return styles.getPropertyValue(token).trim() || fallback;
|
|
}
|
|
|
|
export interface XtermTheme {
|
|
background: string;
|
|
foreground: string;
|
|
cursor: string;
|
|
cursorAccent: 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;
|
|
}
|
|
|
|
/**
|
|
* Builds the xterm theme from CSS custom properties. Must be called after the
|
|
* document has loaded so getComputedStyle returns the active theme values.
|
|
*
|
|
* ANSI slots are mapped to design-system semantic roles where applicable:
|
|
* cyan → --brand (primary data color)
|
|
* green → --success
|
|
* yellow → --warning
|
|
* red → --destructive
|
|
* Other ANSI slots use neutral grays derived from --terminal-fg/bg.
|
|
*/
|
|
export function buildXtermTheme(): XtermTheme {
|
|
const s = getComputedStyle(document.documentElement);
|
|
const bg = resolveToken(s, '--terminal-bg');
|
|
const fg = resolveToken(s, '--terminal-fg');
|
|
const brand = resolveToken(s, '--brand');
|
|
const success = resolveToken(s, '--success');
|
|
const warning = resolveToken(s, '--warning');
|
|
const destructive = resolveToken(s, '--destructive');
|
|
|
|
return {
|
|
background: bg,
|
|
foreground: fg,
|
|
cursor: resolveToken(s, '--terminal-cursor'),
|
|
cursorAccent: resolveToken(s, '--terminal-cursor-accent'),
|
|
selectionBackground: resolveToken(s, '--terminal-selection'),
|
|
|
|
// ANSI palette aligned to semantic roles
|
|
black: 'oklch(0.30 0 0)',
|
|
red: destructive,
|
|
green: success,
|
|
yellow: warning,
|
|
blue: brand,
|
|
magenta: 'oklch(0.70 0.15 300)',
|
|
cyan: brand,
|
|
white: 'oklch(0.70 0 0)',
|
|
brightBlack: 'oklch(0.43 0 0)',
|
|
brightRed: 'oklch(0.76 0.18 20)',
|
|
brightGreen: 'oklch(0.83 0.16 155)',
|
|
brightYellow: 'oklch(0.87 0.14 75)',
|
|
brightBlue: brand,
|
|
brightMagenta: 'oklch(0.80 0.12 300)',
|
|
brightCyan: brand,
|
|
brightWhite: fg,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Minimal xterm theme for modal/exec contexts that only override the
|
|
* background, foreground, cursor, and selection. The ANSI palette inherits
|
|
* defaults, which is fine for command output that rarely uses ANSI colors.
|
|
*/
|
|
export function buildXtermMinimalTheme(): Pick<
|
|
XtermTheme,
|
|
'background' | 'foreground' | 'cursor' | 'cursorAccent' | 'selectionBackground'
|
|
> {
|
|
const s = getComputedStyle(document.documentElement);
|
|
return {
|
|
background: resolveToken(s, '--terminal-bg'),
|
|
foreground: resolveToken(s, '--terminal-fg'),
|
|
cursor: resolveToken(s, '--terminal-cursor'),
|
|
cursorAccent: resolveToken(s, '--terminal-cursor-accent'),
|
|
selectionBackground: resolveToken(s, '--terminal-selection'),
|
|
};
|
|
}
|