Skip to content

fix(terminal): resolve colors without reduced-motion transitions - #542

Merged
Leeeon233 merged 1 commit into
LodyAI:mainfrom
nzhl:fix/terminal-reduced-motion-colors
Sep 11, 2026
Merged

Leeeon233 merged 1 commit into
LodyAI:mainfrom
nzhl:fix/terminal-reduced-motion-colors

Conversation

@nzhl

@nzhl nzhl commented Sep 9, 2026

Copy link
Copy Markdown
Contributor

Related issue

Closes #541

Problem / pressure

With Reduce motion enabled, the embedded terminal can appear blank because its
foreground, cursor, and ANSI colors resolve to its background color. The global
0.01ms transition duration affects the hidden span used by buildTerminalTheme,
so immediate computed-style reads can return the start of a color transition.

Summary

Disable transitions on the disposable color probe before appending it. This
keeps terminal creation and theme updates synchronous and leaves the global
reduced-motion behavior intact. Add a Chromium regression using the real
stylesheet and resolver, plus a short decision note.

Visual explanation

 const probe = document.createElement('span');
 // Existing positioning, visibility, and pointer-event styles.
+probe.style.transitionProperty = 'none';
 host.appendChild(probe);
 // Assign each color token, then read getComputedStyle(probe).color immediately.

Before / after

Before After
Reduced motion can make foreground, cursor, ANSI colors, and selection match the background. Each token resolves to its requested color, including alpha selection colors.
Normal motion resolves the palette correctly. Normal motion retains the same palette, and subsequent palette changes resolve correctly.

Test plan

  • Chromium regression command: VITE_PREVIEW_PUBLIC_BASE_DOMAIN=example.invalid pnpm --filter @lody/components exec playwright test tests/e2e/terminal-theme.spec.ts --workers=1 --reporter=line.
  • Before the source fix: the reduced-motion case failed and the normal-motion case passed. After the fix: both cases passed.
  • Both cases verify dark and light palettes on the same host, foreground/cursor/red/green colors, selection alpha, and probe cleanup; they load the actual shared stylesheet and resolver without mocking computed style or waiting on timers.
  • pnpm check passed with Node 22.22.2, including typechecks, lint, existing tests, and boundary guards; the component suite passed 445 files / 3306 tests.
  • pnpm format, formatting checks for the new test and note, pnpm run docs check, and git diff --check passed. Unrelated formatter output was excluded, preserving the resolver's existing formatting.
  • The packaged desktop app and non-Chromium engines were not rebuilt or tested; the bug and patch were exercised directly in Chromium using the public renderer source.

Context handoff

Instructions for reviewing agents

  • Review focus: Check the probe setup in terminal-theme.ts and the browser regression's use of the real reduced-motion stylesheet, since both initial and later terminal themes use this resolver.
  • Decisions to challenge: Disabling only the probe's transition property preserves the global accessibility rule and synchronous API without timers.
  • Plausible failures / evidence gaps: The Playwright test covers Chromium rendering, not a packaged Electron lifecycle, and belongs to the existing opt-in test:e2e suite rather than root Vitest CI.

Authoring context

  • User goal / directives: Contribute a permanent fix for an embedded terminal that appears blank when the system Reduce motion preference is enabled.
  • Constraints / non-goals: Keep the patch local to color resolution; leave global accessibility preferences, terminal fonts, shell processes, and theme tokens unchanged.
  • Risk-bearing decisions: Exclude the disposable probe from CSS transitions before attachment so sequential computed-style reads return target colors; retain the existing cleanup and theme-update paths.
  • Destructive or irreversible behavior: The code affects a temporary DOM element and adds no persistent-data operations; reverting the commit restores the previous resolver behavior.
  • Deliberately not done or tested: No desktop release build or cross-engine run; browser verification targets the CSS transition behavior with the real public source and synthetic color tokens.
  • Unknowns / confidence: High confidence in the reproduced color-resolution fix from the failing-before/passing-after browser test; packaging and full desktop lifecycle remain outside that evidence.

@nzhl
nzhl marked this pull request as ready for review September 9, 2026 15:58
@Leeeon233

Copy link
Copy Markdown
Contributor

Thanks!

@Leeeon233
Leeeon233 merged commit a3f2826 into LodyAI:main Sep 11, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] Reduced motion makes embedded terminal text match the background

2 participants