jake/Lumotia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Jake
2026-05-07 09:07:14 +01:00
parent a545c7a12d
commit 7a21d0c7fc
6 changed files with 20 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/HotkeyRecorder.svelte
View File

@@ -187,7 +187,7 @@
type="button"
class="inline-flex items-center gap-1.5 rounded-xl px-4 py-2.5
{recording
? 'bg-bg-input border-accent shadow-[0_0_0_3px_rgba(232,168,124,0.1)]'
? 'bg-bg-input border-accent shadow-[0_0_0_3px_rgba(201,133,85,0.1)]'
: captured
? 'bg-bg-input border-border animate-pulse-warm'
: 'bg-bg-input border-border hover:border-border'}

4
src/lib/components/ModelDownloader.svelte
View File

@@ -82,7 +82,7 @@
<div class="mb-4">
<div class="h-[6px] bg-bg-elevated rounded-full overflow-hidden mb-2">
<div
class="h-full bg-accent rounded-full transition-all duration-300 shadow-[0_0_8px_rgba(232,168,124,0.4)]"
class="h-full bg-accent rounded-full transition-all duration-300 shadow-[0_0_8px_rgba(201,133,85,0.4)]"
style="width: {progress}%"
></div>
</div>
@@ -93,7 +93,7 @@
{:else}
<button
class="px-6 py-2.5 rounded-xl text-[14px] font-medium text-white bg-accent hover:bg-accent-hover
shadow-[0_4px_16px_rgba(232,168,124,0.3)] active:scale-[0.97] transition-all duration-150"
shadow-[0_4px_16px_rgba(201,133,85,0.3)] transition-all duration-150"
onclick={startDownload}
>
Download Model

2
src/lib/components/SegmentedButton.svelte
View File

@@ -8,7 +8,7 @@
class="rounded-lg font-medium
{size === 'small' ? 'px-2.5 py-1 text-[11px]' : 'px-3.5 py-[6px] text-[12px]'}
{value === option
? 'bg-accent text-bg shadow-[0_1px_4px_rgba(232,168,124,0.3)]'
? 'bg-accent text-bg shadow-[0_1px_4px_rgba(201,133,85,0.3)]'
: 'text-text-secondary hover:text-text hover:bg-hover'}"
style="transition-duration: var(--duration-ui)"
onclick={() => value = option}

7
src/lib/components/Toggle.svelte
View File

@@ -5,9 +5,7 @@
<div class="flex items-start gap-3 py-2.5">
<button
class="relative mt-0.5 w-[38px] min-w-[38px] h-[22px] rounded-full flex-shrink-0
{checked ? 'bg-accent shadow-[0_0_8px_rgba(232,168,124,0.25)]' : 'bg-bg-elevated'}
active:scale-95"
style="transition-duration: var(--duration-ui)"
{checked ? 'bg-accent shadow-[0_0_8px_rgba(201,133,85,0.25)]' : 'bg-bg-elevated'}"
onclick={() => checked = !checked}
role="switch"
aria-checked={checked}
@@ -15,9 +13,8 @@
>
<span
class="absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white shadow-sm
ease-[cubic-bezier(0.16,1,0.3,1)]
{checked ? 'translate-x-[16px]' : 'translate-x-0'}"
style="transition: transform var(--duration-ui) cubic-bezier(0.16, 1, 0.3, 1)"
style="transition: transform var(--duration-ui) cubic-bezier(0.2, 0.8, 0.2, 1)"
></span>
</button>
<div class="flex-1 min-w-0">