Shade/packages/shade-widgets/src/theme.ts

/**
 * Theme tokens for Shade widgets.
 *
 * Self-contained — no external CSS required. Each widget reads tokens
 * from the active theme via context.
 */

export interface ShadeTheme {
  bg: string;
  bgElevated: string;
  border: string;
  text: string;
  textMuted: string;
  textDim: string;
  accent: string;
  accentMuted: string;
  success: string;
  warning: string;
  danger: string;
  font: string;
  fontMono: string;
  radius: string;
  shadow: string;

  // ─── Stream-transfer tokens (v0.2.0) ─────────────────────
  /** Background of progress-bar track. Default: `border`. */
  progressTrack?: string;
  /** Filled portion of the progress bar. Default: `accent`. */
  progressFill?: string;
  /** Animated fill for indeterminate progress. Default: `accentMuted`. */
  progressFillIndeterminate?: string;
  /** Border of an active drag-and-drop zone. Default: `accent`. */
  dropZoneBorderActive?: string;
  /** Lane indicator color when sending. Default: `success`. */
  laneActive?: string;
  /** Lane indicator color when idle. Default: `textDim`. */
  laneIdle?: string;
  /** Lane indicator color on error. Default: `danger`. */
  laneError?: string;
}

export const darkTheme: ShadeTheme = {
  bg: '#0a0a0a',
  bgElevated: '#161616',
  border: '#262626',
  text: '#e5e5e5',
  textMuted: '#a3a3a3',
  textDim: '#525252',
  accent: '#f7c948',
  accentMuted: 'rgba(247, 201, 72, 0.15)',
  success: '#22c55e',
  warning: '#eab308',
  danger: '#ef4444',
  font: 'system-ui, -apple-system, Segoe UI, Roboto, sans-serif',
  fontMono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
  radius: '8px',
  shadow: '0 4px 12px rgba(0, 0, 0, 0.4)',
};

export const lightTheme: ShadeTheme = {
  bg: '#ffffff',
  bgElevated: '#f5f5f5',
  border: '#e5e5e5',
  text: '#0a0a0a',
  textMuted: '#525252',
  textDim: '#a3a3a3',
  accent: '#ca8a04',
  accentMuted: 'rgba(202, 138, 4, 0.1)',
  success: '#16a34a',
  warning: '#ca8a04',
  danger: '#dc2626',
  font: 'system-ui, -apple-system, Segoe UI, Roboto, sans-serif',
  fontMono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
  radius: '8px',
  shadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
};

export type ThemeMode = 'dark' | 'light' | 'auto';

export function resolveTheme(mode: ThemeMode): ShadeTheme {
  if (mode === 'dark') return darkTheme;
  if (mode === 'light') return lightTheme;
  // auto: use prefers-color-scheme
  if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: light)').matches) {
    return lightTheme;
  }
  return darkTheme;
}