Animate the terminal dock with transform only so entry never drops text contrast.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-08-27 01:08:14 +02:00
parent 9bfb1dc71c
commit 8974b4c6fb
2 changed files with 32 additions and 2 deletions

View File

@@ -160,12 +160,10 @@
@keyframes terminal-dock-in { @keyframes terminal-dock-in {
from { from {
opacity: 0;
transform: translateY(0.4rem); transform: translateY(0.4rem);
} }
to { to {
opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
} }

View File

@@ -1,3 +1,6 @@
import { readFileSync } from 'node:fs';
import { join } from 'node:path';
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
import { ApplicationRef, PLATFORM_ID } from '@angular/core'; import { ApplicationRef, PLATFORM_ID } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ComponentFixture, TestBed } from '@angular/core/testing';
@@ -475,3 +478,32 @@ describe('TerminalDock', () => {
expect(remove).toHaveBeenCalledWith('keydown', added?.[1]); expect(remove).toHaveBeenCalledWith('keydown', added?.[1]);
}); });
}); });
describe('terminal dock stylesheet', () => {
const css = readFileSync(join(process.cwd(), 'src/app/shared/terminal/terminal-dock.scss'), 'utf8');
it('does not fade a text-bearing terminal container during entry', () => {
expect(css).toMatch(/\.terminal-dock-panel[\s\S]*?animation:\s*terminal-dock-in/);
const keyframesStart = css.indexOf('@keyframes terminal-dock-in');
expect(keyframesStart).toBeGreaterThan(-1);
const reducedMotion = css.indexOf('@media (prefers-reduced-motion: reduce)', keyframesStart);
expect(reducedMotion).toBeGreaterThan(keyframesStart);
const keyframes = css.slice(keyframesStart, reducedMotion);
expect(keyframes).toMatch(/transform:\s*translateY/);
expect(keyframes).not.toMatch(/opacity\s*:/);
const panelStart = css.indexOf('.terminal-dock-panel {');
const panelBlock = css.slice(panelStart, css.indexOf('}', panelStart) + 1);
expect(panelBlock).toContain('animation: terminal-dock-in');
expect(panelBlock).not.toMatch(/opacity\s*:/);
const reduceBlock = css.slice(css.indexOf('prefers-reduced-motion'));
expect(reduceBlock).toMatch(/\.terminal-dock-panel\s*\{[^}]*animation:\s*none/);
expect(css).toMatch(
/\.terminal-dock-form input::placeholder[\s\S]*?color:\s*var\(--color-text-subtle\)[\s\S]*?opacity:\s*1/,
);
});
});