theme.css

/* MouseTerm Theme System
 *
 * Two-layer CSS variable strategy:
 *   @theme --color-* tokens -> var(--vscode-*)
 *
 * In VSCode: --vscode-* variables are auto-injected.
 * In standalone/website: applyTheme() sets --vscode-* on document.body.
 *
 * This file intentionally does not provide hardcoded color defaults. Runtime
 * hosts must provide real VSCode variables, either from VSCode itself or from
 * a bundled/installed MouseTerm theme.
 *
 * Two consumers read --vscode-* variables:
 *   1. @theme/body bindings below — for UI colors (surfaces, tabs, etc.)
 *   2. getTerminalTheme() in terminal-theme.ts — reads ANSI colors,
 *      cursor, and selection directly as --vscode-* for xterm.js
 */

/* --- Font tokens (not Tailwind colors) --- */
:root {
  --mt-font-size: var(--vscode-font-size);
  --mt-font-family: var(--vscode-editor-font-family);
}

/* --- Tailwind token declarations --- */
@theme {
  /* Fonts */
  --font-sans: var(--vscode-editor-font-family);
  --font-mono: var(--vscode-editor-font-family);

  /* Type scale — see design.tsx for usage rules. Overrides Tailwind's
   * defaults so the whole app sits on four rem-based steps. */
  --text-xs: 0.625rem;          /*  10px */
  --text-xs--line-height: 1rem;
  --text-sm: 0.75rem;           /*  12px */
  --text-sm--line-height: 1rem;

  /* Surfaces — bg-only:
   *   --color-app-bg           (chrome host)    sideBar.background
   *   --color-terminal-bg                       terminal.background
   *   --color-header-inactive-bg                list.inactiveSelectionBackground
   *   --color-header-active-bg                  list.activeSelectionBackground */
  --color-surface-raised: var(--vscode-editorWidget-background);
  --color-app-bg: var(--vscode-sideBar-background);
  --color-app-fg: var(--vscode-sideBar-foreground);

  /* Text */
  --color-foreground: var(--vscode-editor-foreground);
  --color-muted: var(--vscode-descriptionForeground);

  /* Borders */
  --color-border: var(--vscode-panel-border);

  /* Chrome palette — anchored on VSCode file-tree list.* tokens. Panel
   * headers and doors use only these four tokens. The focus ring (marching-
   * ants + passthrough border) prefers VSCode's focusBorder and falls back to
   * the focused header background when focusBorder is not usable. */
  --color-header-active-bg: var(--vscode-list-activeSelectionBackground);
  --color-header-active-fg: var(--vscode-list-activeSelectionForeground);
  --color-header-inactive-bg: var(--vscode-list-inactiveSelectionBackground);
  --color-header-inactive-fg: var(--vscode-list-inactiveSelectionForeground);

  /* Dynamic palette — Wall overrides these on body at runtime from the shared
   * dynamic-palette helper, picking by OKLab distance/chroma.
   *
   *   --color-door-*    pick: (header-inactive bg/fg) or (terminal bg/fg)
   *   --color-focus-ring  pick: focusBorder or header-active-bg */
  --color-door-bg: var(--color-header-inactive-bg);
  --color-door-fg: var(--color-header-inactive-fg);
  --color-focus-ring: var(--vscode-focusBorder);

  /* Terminal — xterm.js content, orthogonal to chrome */
  --color-terminal-bg: var(--vscode-terminal-background);
  --color-terminal-fg: var(--vscode-terminal-foreground);

  /* Semantic status — use the active terminal palette. */
  --color-error: var(--vscode-terminal-ansiRed);
  --color-success: var(--vscode-terminal-ansiGreen);

  /* Alarm — per-surface, computed at runtime by use-dynamic-palette.ts from the
   * bg the bell sits on (OkLCH hue rotation + max chroma). The fallback below
   * is shown only before the dynamic pass runs. */
  --color-alarm-vs-header-active: var(--vscode-terminal-ansiYellow);
  --color-alarm-vs-header-inactive: var(--vscode-terminal-ansiYellow);
  --color-alarm-vs-door: var(--vscode-terminal-ansiYellow);

  /* Inputs — used by ThemePicker */
  --color-input-bg: var(--vscode-input-background);
  --color-input-border: var(--vscode-input-border);

  /* Animation */
  --animate-bell-ring: bell-ring 800ms ease-in-out infinite;
  --animate-shake-x: shake-x 400ms ease-out;
}

/* --- Body-level dynamic theme bindings ---
 *
 * These mirror the @theme block above but are declared on `body`. CSS resolves
 * var() inside a custom-property declaration at the element where the property
 * is declared, so body-level declarations can see --vscode-* variables that
 * applyTheme() writes to body.style. */
body {
  --mt-font-family: var(--vscode-editor-font-family);
  --font-sans: var(--vscode-editor-font-family);
  --font-mono: var(--vscode-editor-font-family);
  --color-surface-raised: var(--vscode-editorWidget-background);
  --color-app-bg: var(--vscode-sideBar-background);
  --color-app-fg: var(--vscode-sideBar-foreground);
  --color-foreground: var(--vscode-editor-foreground);
  --color-muted: var(--vscode-descriptionForeground);
  --color-border: var(--vscode-panel-border);
  --color-header-active-bg: var(--vscode-list-activeSelectionBackground);
  --color-header-active-fg: var(--vscode-list-activeSelectionForeground);
  --color-header-inactive-bg: var(--vscode-list-inactiveSelectionBackground);
  --color-header-inactive-fg: var(--vscode-list-inactiveSelectionForeground);
  --color-terminal-bg: var(--vscode-terminal-background);
  --color-terminal-fg: var(--vscode-terminal-foreground);
  --color-error: var(--vscode-terminal-ansiRed);
  --color-success: var(--vscode-terminal-ansiGreen);
  --color-alarm-vs-header-active: var(--vscode-terminal-ansiYellow);
  --color-alarm-vs-header-inactive: var(--vscode-terminal-ansiYellow);
  --color-alarm-vs-door: var(--vscode-terminal-ansiYellow);
  --color-input-bg: var(--vscode-input-background);
  --color-input-border: var(--vscode-input-border);
}

@keyframes bell-ring {
  0%, 100% { transform: rotate(45deg); }
  50%      { transform: rotate(-45deg); }
}

@keyframes shake-x {
  0%, 100% { translate: 0; }
  20% { translate: -6px; }
  40% { translate: 5px; }
  60% { translate: -3px; }
  80% { translate: 2px; }
}

/* Pane spawn — directional clip-path reveal applied to the dockview group element.
 * clip-path (not transform) keeps getBoundingClientRect accurate so the selection
 * overlay measures the real post-animation bounds during the animation. */

@keyframes pane-spawn-from-left {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes pane-spawn-from-top {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes pane-spawn-from-top-left {
  from { opacity: 0; clip-path: inset(0 100% 100% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

.pane-spawning-from-left     { animation: pane-spawn-from-left     440ms cubic-bezier(0.22, 1, 0.36, 1); }
.pane-spawning-from-top      { animation: pane-spawn-from-top      440ms cubic-bezier(0.22, 1, 0.36, 1); }
.pane-spawning-from-top-left { animation: pane-spawn-from-top-left 440ms cubic-bezier(0.22, 1, 0.36, 1); }

/* Pane kill — fade the real pane element out. Opacity only is enough for edge
 * and middle kills: the grower reveal beside the fading pane already carries
 * the directional cue. For a last-pane kill there is no grower, so we also
 * shrink the pane toward its bottom-right corner — a visible disappearance
 * that also pairs diagonally with the auto-spawn's top-left reveal. */

@keyframes pane-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes pane-fade-and-shrink-to-br {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0); }
}

/* Matches the pane shrink so the focus ring stays visually glued to its pane. */
@keyframes ring-shrink-to-br {
  from { transform: scale(1); }
  to   { transform: scale(0); }
}

.pane-fading-out                 { animation: pane-fade-out               440ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.pane-fading-and-shrinking-to-br { animation: pane-fade-and-shrink-to-br  440ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
                                   transform-origin: 100% 100%; }
.ring-shrinking-to-br            { animation: ring-shrink-to-br           440ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
                                   transform-origin: 100% 100%; }

@media (prefers-reduced-motion: reduce) {
  .pane-spawning-from-left,
  .pane-spawning-from-top,
  .pane-spawning-from-top-left,
  .pane-fading-out,
  .pane-fading-and-shrinking-to-br,
  .ring-shrinking-to-br { animation: none; }
}

/* TODO dismiss flourish. Sequence across 500ms:
 *   0–30%  letters fade out while the check springs in (with a small overshoot)
 *  30–55%  check settles, pill is visually still
 *  55–100% whole pill shell (border, bg, check) dissolves together
 *
 * The pill body is a grid-stacked <letters, check> so width is stable
 * throughout — no reflow when the animation starts. */
.todo-pill-stack {
  display: inline-grid;
}
.todo-pill-stack > * {
  grid-column: 1;
  grid-row: 1;
}
.todo-pill-stack__letters {
  opacity: 1;
}
.todo-pill-stack__check {
  justify-self: center;
  align-self: center;
  color: var(--color-success);
  opacity: 0;
}

.todo-pill-shell[data-flourishing='true'] {
  animation: todo-pill-dissolve 500ms ease-out forwards;
  pointer-events: none;
}
.todo-pill-shell[data-flourishing='true'] .todo-pill-stack__letters {
  animation: todo-flourish-letters 500ms ease-out forwards;
}
.todo-pill-shell[data-flourishing='true'] .todo-pill-stack__check {
  animation: todo-flourish-check 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes todo-flourish-letters {
  0%   { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes todo-flourish-check {
  0%   { opacity: 0; transform: scale(0.5); }
  35%  { opacity: 1; transform: scale(1.15); }
  55%  { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes todo-pill-dissolve {
  0%, 55%  { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .todo-pill-shell[data-flourishing='true'],
  .todo-pill-shell[data-flourishing='true'] .todo-pill-stack__letters,
  .todo-pill-shell[data-flourishing='true'] .todo-pill-stack__check {
    animation: none;
    opacity: 0;
  }
}