fix(ui): sync stale shadow rgba from pre-Phase-10a amber to current accent

Eighteen sites across SegmentedButton, Toggle, HotkeyRecorder,
ModelDownloader, FilesPage, and SettingsPage hardcoded the old amber
rgba(232,168,124,...) for focus rings, glows, and progress bars. After
the Phase 10a a11y darkening of --accent to #c98555, the inline shadows
no longer matched the accent fill they were paired with, so every
focused input rendered a glow at a noticeably different hue from its
border.

Replaced all of them with the current accent rgba(201,133,85,...).

Toggle component also had two motion violations: an active:scale-95
press-shrink and a cubic-bezier(0.16,1,0.3,1) (ease-out-expo) thumb
transition. Both replaced with the brand's --ease curve
(0.2,0.8,0.2,1) and the scale dropped, in line with the record-button
fix in the previous commit.

Removed redundant inline transition-duration overrides on FilesPage
Browse button (the global * rule already sets --duration-ui) and on
ModelDownloader's primary CTA (also dropped its active:scale-[0.97]).
This commit is contained in:
2026-05-07 09:07:14 +01:00
parent a545c7a12d
commit 7a21d0c7fc
6 changed files with 20 additions and 24 deletions

View File

@@ -199,8 +199,7 @@
<div class="flex items-center gap-2 px-7 pb-3">
<button
class="btn-lg rounded-lg font-medium text-white bg-accent hover:bg-accent-hover
shadow-[0_2px_8px_rgba(232,168,124,0.2)] active:scale-[0.97]"
style="transition-duration: var(--duration-ui)"
shadow-[0_2px_8px_rgba(201,133,85,0.2)]"
onclick={handleBrowse}
disabled={transcribing}
>
@@ -226,7 +225,7 @@
<div class="px-7 pb-3 animate-fade-in">
<div class="h-[3px] bg-bg-elevated rounded-full overflow-hidden">
<div
class="h-full bg-accent rounded-full shadow-[0_0_8px_rgba(232,168,124,0.4)]"
class="h-full bg-accent rounded-full shadow-[0_0_8px_rgba(201,133,85,0.4)]"
style="width: {progress}%; transition-duration: var(--duration-ui)"
></div>
</div>