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:
@@ -990,7 +990,7 @@
|
||||
<div class="flex items-center gap-3">
|
||||
<select
|
||||
class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]
|
||||
appearance-none cursor-pointer min-w-[280px] max-w-full"
|
||||
bind:value={settings.microphoneDevice}
|
||||
onfocus={refreshAudioDevices}
|
||||
@@ -1044,7 +1044,7 @@
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<select
|
||||
class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]
|
||||
appearance-none cursor-pointer min-w-[220px]"
|
||||
value={profilesStore.activeProfileId}
|
||||
onchange={onActiveProfileChange}
|
||||
@@ -1114,7 +1114,7 @@
|
||||
onblur={renameActiveProfile}
|
||||
onkeydown={(e) => { if (e.key === 'Enter') e.target.blur(); }}
|
||||
class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text min-w-[280px]
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]"
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1130,7 +1130,7 @@
|
||||
onblur={saveInitialPrompt}
|
||||
placeholder="e.g. Meeting between Jake and Wren about CORBEL's Furnished World architecture."
|
||||
class="w-full h-[96px] bg-bg-input border border-border rounded-lg px-3 py-2 text-[12px] text-text resize-none
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]"
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]"
|
||||
></textarea>
|
||||
<div class="flex items-center gap-3 mt-1">
|
||||
{#if initialPromptDirty}
|
||||
@@ -1156,7 +1156,7 @@
|
||||
bind:value={newVocabTerm}
|
||||
onkeydown={(e) => { if (e.key === 'Enter') addVocabTerm(); }}
|
||||
class="flex-1 bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]"
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
@@ -1164,7 +1164,7 @@
|
||||
bind:value={newVocabNote}
|
||||
onkeydown={(e) => { if (e.key === 'Enter') addVocabTerm(); }}
|
||||
class="flex-1 bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]"
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@@ -1190,7 +1190,7 @@
|
||||
rows="4"
|
||||
disabled={bulkVocabBusy}
|
||||
class="w-full bg-bg border border-border rounded-lg px-3 py-2 text-[13px] text-text font-mono
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]
|
||||
disabled:opacity-50 resize-y"
|
||||
></textarea>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
@@ -1486,7 +1486,7 @@
|
||||
{#if hasGpuAcceleration()}
|
||||
<select
|
||||
class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]
|
||||
appearance-none cursor-pointer w-[220px]"
|
||||
bind:value={settings.device}
|
||||
>
|
||||
@@ -1517,7 +1517,7 @@
|
||||
{#if currentModelIsEnglishOnly()}
|
||||
<select
|
||||
class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]
|
||||
appearance-none cursor-not-allowed w-[220px]"
|
||||
bind:value={settings.language}
|
||||
disabled
|
||||
@@ -1527,7 +1527,7 @@
|
||||
{:else}
|
||||
<select
|
||||
class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]
|
||||
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]
|
||||
appearance-none cursor-pointer w-[140px]"
|
||||
bind:value={settings.language}
|
||||
>
|
||||
@@ -1875,7 +1875,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
|
||||
{settings.launchAtLogin ? 'bg-accent shadow-[0_0_8px_rgba(232,168,124,0.25)]' : 'bg-bg-elevated'}
|
||||
{settings.launchAtLogin ? 'bg-accent shadow-[0_0_8px_rgba(201,133,85,0.25)]' : 'bg-bg-elevated'}
|
||||
active:scale-95 disabled:opacity-60"
|
||||
style="transition-duration: var(--duration-ui)"
|
||||
onclick={() => setLaunchAtLogin(!settings.launchAtLogin)}
|
||||
@@ -2171,7 +2171,7 @@
|
||||
<button
|
||||
class="rounded-lg font-medium px-3.5 py-[6px] text-[12px]
|
||||
{$currentLocale === option.code
|
||||
? '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={() => setLocale(option.code)}
|
||||
|
||||
Reference in New Issue
Block a user