From ce508664810e93da396d7da5d99f6bc80e3fc81b Mon Sep 17 00:00:00 2001 From: 4gray Date: Sun, 27 Sep 2026 01:05:12 +0200 Subject: [PATCH] fix(playback): keep the play button glyph above 3:1 on 1x displays Electron E2E on Windows measured the hovered play icon at 2.5:1 against its fill (`player-theme.e2e.ts`, white-backing rasterization). White on the #4f8eff accent is only 3.2:1 in theory, and the hover scale(1.04) resampled the glyph, so a 1x display's antialiasing pushed it under 3:1. - Fills under a white glyph (play, active tune) use a deeper --pc-accent-blue-strong #3474e8 (4.4:1); hover darkens to #2a66d6 (5.3:1). The track fill and glow keep the #4f8eff accent. - The play button no longer scales on hover. Co-Authored-By: Claude Opus 5.5 --- docs/architecture/player-controls-contract.md | 9 ++++++--- .../player-controls.component.scss | 20 ++++++++++--------- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/docs/architecture/player-controls-contract.md b/docs/architecture/player-controls-contract.md index a116665ad..a4d9c5eb4 100644 --- a/docs/architecture/player-controls-contract.md +++ b/docs/architecture/player-controls-contract.md @@ -335,9 +335,12 @@ app's `--app-selection-color` is a different blue that would fight the video. recording, picture-in-picture and fullscreen, end-aligned. - **Play button** (`.player-controls__play`, `data-test-id ="player-controls-play"`): a 52px filled accent circle with a white glyph, - not a Material icon button. Hover darkens the fill rather than lightening - it so the glyph keeps ≥3:1 against it — `player-theme.e2e.ts` rasterizes - exactly the hovered and focused states. + not a Material icon button. Fills under a white glyph (play, active + `tune`) use `--pc-accent-blue-strong` `#3474e8` (4.4:1) rather than the + `#4f8eff` accent (3.2:1), and hover darkens to `#2a66d6` (5.3:1) without + scaling — `player-theme.e2e.ts` rasterizes the hovered and focused + states, and on a 1x Windows display the antialiased or resampled glyph + measured below 3:1 against the lighter fills. - **Icon buttons** are 40px with a 12px radius (32px / 9px compact) through Material's `--mat-icon-button-*` tokens; their hover is a flat `rgba(255,255,255,.1)` layer. diff --git a/libs/ui/playback/src/lib/player-controls/player-controls.component.scss b/libs/ui/playback/src/lib/player-controls/player-controls.component.scss index 480d874ce..880a52c58 100644 --- a/libs/ui/playback/src/lib/player-controls/player-controls.component.scss +++ b/libs/ui/playback/src/lib/player-controls/player-controls.component.scss @@ -5,7 +5,11 @@ // tokens of the "Hybrid" controls concept (accent blue = primary action // and progress; cyan = something is on; violet = a value was changed). --pc-accent-blue: #4f8eff; - --pc-accent-blue-hover: #3f7ef5; + // Fills that carry a white glyph (play, active tune) use deeper blues: + // white on #4f8eff is only 3.2:1, too close to the 3:1 floor once a + // 1x display antialiases the glyph. These give 4.4:1 and 5.3:1. + --pc-accent-blue-strong: #3474e8; + --pc-accent-blue-hover: #2a66d6; --pc-accent-cyan: #5cd6ff; --pc-accent-violet: #b599ff; --pc-text: #e7ecf3; @@ -389,7 +393,7 @@ :host :is(.player-controls__tune--active), :host :is(.player-controls__tune--active:hover) { color: #ffffff; - background: var(--pc-accent-blue); + background: var(--pc-accent-blue-strong); --mat-icon-button-icon-color: #ffffff; } @@ -431,14 +435,12 @@ border: 0; border-radius: 50%; color: #ffffff; - background: var(--pc-accent-blue); + background: var(--pc-accent-blue-strong); box-shadow: 0 0 0 6px rgba(79, 142, 255, 0.18), 0 6px 20px rgba(79, 142, 255, 0.35); cursor: pointer; - transition: - background 120ms ease-out, - transform 120ms ease-out; + transition: background 120ms ease-out; } .player-controls__play mat-icon { @@ -448,11 +450,11 @@ color: #ffffff; } -// Hover darkens rather than lightens: the white glyph keeps its contrast -// against the fill (the theme E2E rasterizes exactly this state). +// Hover darkens rather than lightens, and does not scale: the white glyph +// keeps its contrast against the fill, and a scaled glyph is resampled and +// blurred on 1x displays (the theme E2E rasterizes exactly this state). .player-controls__play:hover:not(:disabled) { background: var(--pc-accent-blue-hover); - transform: scale(1.04); } .player-controls__play:focus-visible {